[WIP-07-A] [Project Solar / Phase 1 / Dry-run] Include IBM Plex fonts as part of the @hashicorp/design-system-components package

packages/components/package.json

@@ -18,6 +18,7 @@
   "author": "HashiCorp Design Systems <[email protected]>",
   "scripts": {
     "build": "rollup --config",
+    "postbuild": "cp -R dist/styles/@hashicorp/design-system-components.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-components-common.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-power-select-overrides.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-plex-fonts.css ../../showcase/public/assets/styles/@hashicorp/",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
@@ -33,7 +34,8 @@
     "test-f:design-system-components": "test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)",
     "test-f:design-system-components-common": "test -f 'dist/styles/@hashicorp/design-system-components-common.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components-common.css\\` was not found\\033[0m\\n\" && exit 1)",
     "test-f:design-system-power-select-overrides": "test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-power-select-overrides.css\\` was not found\\033[0m\\n\" && exit 1)",
-    "prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides"
+    "test-f:design-system-plex-fonts": "test -f 'dist/styles/@hashicorp/design-system-plex-fonts.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-plex-fonts.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides && pnpm test-f:design-system-plex-fonts"
   },
   "dependencies": {
     "@codemirror/commands": "^6.8.0",
@@ -93,6 +95,8 @@
     "@glint/environment-ember-loose": "^1.5.2",
     "@glint/environment-ember-template-imports": "^1.5.2",
     "@glint/template": "^1.5.2",
+    "@ibm/plex-mono": "^1.1.0",
+    "@ibm/plex-sans": "^1.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.10",
     "@types/luxon": "^3.4.2",
@@ -401,6 +405,53 @@
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
       "./services/hds-theming.js": "./dist/_app_/services/hds-theming.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
+    },
+    "public-assets": {
+      "dist/public/assets/fonts/LICENSE.txt": "assets/fonts/LICENSE.txt",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2"
     }
   },
   "exports": {

packages/components/rollup.config.mjs

@@ -26,7 +26,10 @@ function addScssCompilationPlugins(options) {
 
         const result = sass.compile(inputFileFullPath, {
           sourceMap: true,
-          loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
+          loadPaths: [
+            'node_modules/@hashicorp/design-system-tokens/dist',
+            'node_modules/@ibm',
+          ],
         });
 
         // Emit the compiled CSS
@@ -98,6 +101,10 @@ const plugins = [
       inputFile: 'design-system-power-select-overrides.scss',
       outputFile: 'design-system-power-select-overrides.css',
     },
+    {
+      inputFile: 'design-system-plex-fonts.scss',
+      outputFile: 'design-system-plex-fonts.css',
+    },
   ]),
 
   // Ensure that standalone .hbs files are properly integrated as Javascript.
@@ -124,12 +131,34 @@ const plugins = [
   // to leave alone and keep in the published output.
   addon.keepAssets(['**/*.css', '**/*.scss']),
 
-  // Copy readme and license files into published package
   copy({
     targets: [
+      // Copy readme and license files into published package
       { src: 'README.md', dest: 'dist' },
       { src: 'LICENSE.md', dest: 'dist' },
+      // Copy the IBM Plex fonts from the @ibm packages to the public folder
+      {
+        src: 'node_modules/@ibm/plex-sans/LICENSE.txt',
+        dest: 'dist/public/assets/fonts',
+      },
+      {
+        src: [
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Regular-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Italic-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Regular-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Italic-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBold-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-*.woff2',
+        ],
+        dest: 'dist/public/assets/fonts/split/woff2',
+      },
     ],
+    hook: 'writeBundle',
+    copySync: true,
+    copyOnce: true,
+    // verbose: true,
   }),
 ];
 

packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// IBM PLEX FONTS
+//
+
+// We use only a few selected weights, per design specs
+/* stylelint-disable value-keyword-case */
+$selected-weights: (
+  // ❌ 100
+  thin: false,
+  thinItalic: false,
+  // ❌ 200
+  extralight: false,
+  extralightItalic: false,
+  // ❌ 300
+  light: false,
+  lightItalic: false,
+  // ✅ 400
+  regular: true,
+  italic: true,
+  // ❌ 500
+  medium: false,
+  mediumItalic: false,
+  // ❌ 450
+  text: false,
+  textItalic: false,
+  // ✅ 600
+  semibold: true,
+  semiboldItalic: true,
+  // ❌ 700
+  bold: false,
+  boldItalic: false
+);
+/* stylelint-enable value-keyword-case */
+
+// Plex Sans (imported from `node_modules/@ibm/plex-sans`)
+//
+@use "plex-sans/scss/index.scss" as PlexSans with (
+  $font-prefix: "/assets",
+  $font-weights: $selected-weights
+);
+
+// Plex Mono (imported from `node_modules/@ibm/plex-mono`)
+//
+@use "plex-mono/scss/index.scss" as PlexMono with (
+  $font-prefix: "/assets",
+  $font-weights: $selected-weights
+);
+
+// Add the `@font-face` definitions
+// see: https://github.com/IBM/plex/tree/master/packages/plex-sans#font-weights
+//
+@include PlexSans.all();
+@include PlexMono.all();

packages/components/src/styles/components/badge-count.scss

@@ -7,100 +7,50 @@
 // BADGE-COUNT COMPONENT
 //
 
-@use "sass:math";
-@use "sass:map";
-
-$hds-badge-count-types: ("flat", "inverted", "outlined");
 $hds-badge-count-sizes: ("small", "medium", "large");
-$hds-badge-count-border-width: 1px;
+$hds-badge-count-colors: ("neutral", "neutral-dark-mode");
+$hds-badge-count-types: ("filled", "inverted", "outlined");
 
 .hds-badge-count {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   font-weight: var(--token-typography-font-weight-medium);
   font-family: var(--token-typography-font-stack-text);
-  border: $hds-badge-count-border-width solid transparent;
+  border-style: solid;
+  border-width: var(--token-badge-border-width);
 }
 
 // SIZE
 
-// these values later may come from the design tokens
-$hds-badge-count-size-props: (
-  "small": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "height": 1.25rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.125rem,
-    "padding-horizontal": 0.5rem,
-  ),
-  "medium": (
-    // 13px = 0.8125rem
-    "font-size": 0.8125rem,
-    "height": 1.5rem,
-    // 16px = 1.2308
-    "line-height": 1.2308,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.75rem,
-  ),
-  "large": (
-    // 16px = 1rem
-    "font-size": 1rem,
-    "height": 2rem,
-    // 24px = 1.5
-    "line-height": 1.5,
-    "padding-vertical": 0.25rem,
-    "padding-horizontal": 0.875rem,
-  ),
-);
-
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map.get($hds-badge-count-size-props, $size, "height");
-    padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width})
-      calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map.get($hds-badge-count-size-props, $size, "font-size");
-    line-height: map.get($hds-badge-count-size-props, $size, "line-height");
-    border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2);
+    min-height: var(--token-badge-height-#{$size});
+    // note: for the horizontal padding, we're using a specific design token for the `BadgeCount` component
+    padding: calc(var(--token-badge-padding-vertical-#{$size}) - var(--token-badge-border-width))
+      calc(var(--token-badge-count-padding-horizontal-#{$size}) - var(--token-badge-border-width));
+    font-size: var(--token-badge-typography-font-size-#{$size});
+    line-height: var(--token-badge-typography-line-height-#{$size});
+    border-radius: calc(var(--token-badge-height-#{$size}) / 2);
   }
 }
 
 // COLOR + TYPE COMBINATIONS
 
-.hds-badge-count--color-neutral {
-  &.hds-badge-count--type-filled {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-palette-neutral-200);
-  }
-
-  &.hds-badge-count--type-inverted {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-500);
-  }
-
-  &.hds-badge-count--type-outlined {
-    color: var(--token-color-foreground-primary);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-500);
-  }
-}
-
-.hds-badge-count--color-neutral-dark-mode {
-  &.hds-badge-count--type-filled {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-500);
-  }
-
-  &.hds-badge-count--type-inverted {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-faint);
-  }
-
-  &.hds-badge-count--type-outlined {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: transparent;
-    border-color: var(--token-color-palette-neutral-50);
+@each $color in $hds-badge-count-colors {
+  .hds-badge-count--color-#{$color} {
+    @each $type in $hds-badge-count-types {
+      &.hds-badge-count--type-#{$type} {
+        color: var(--token-badge-foreground-color-#{$color}-#{$type});
+
+        @if $type == "outlined" {
+          background-color: transparent;
+          border-color: var(--token-badge-foreground-color-#{$color}-#{$type});
+        } @else {
+          background-color: var(--token-badge-surface-color-#{$color}-#{$type});
+          border-color: transparent;
+        }
+      }
+    }
   }
 }