Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 52 additions & 2 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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",
Expand Down Expand Up @@ -90,6 +91,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",
Comment on lines +94 to +95
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBD if they should be devDependencies or normal dependencies

"@rollup/plugin-babel": "^6.0.4",
"@tsconfig/ember": "^3.0.10",
"@types/luxon": "^3.4.2",
Expand Down Expand Up @@ -392,6 +395,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": {
Expand Down Expand Up @@ -425,4 +475,4 @@
"engines": {
"node": ">= 18"
}
}
}
33 changes: 31 additions & 2 deletions packages/components/rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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,
}),

// After bundle is written, copy built CSS to Showcase app
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion showcase/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@
<link rel="stylesheet" integrity=""
href="{{rootURL}}assets/styles/@hashicorp/design-system-power-select-overrides.css">

<!-- these are the `@font-face` declarations for the IBM Plex fonts -->
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/styles/@hashicorp/design-system-plex-fonts.css">

<!-- these styles are compiled with the Showcase -->
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/showcase.css">
Expand All @@ -63,7 +66,7 @@

<!-- This contains global styles and CSS resets too! -->
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css" />
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
<!-- <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" /> -->
<style type="text/css">
/* Suppress custom element until styles are loaded */
cds-badge-indicator:not(:defined),
Expand Down
Loading
Loading