Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
231 commits
Select commit Hold shift + click to select a range
20d4838
TODO - added temporary file to main feature branch for phase 1
didoo Sep 25, 2025
c7bad46
TODO - added temporary file to main feature branch for phase 1
didoo Sep 25, 2025
71fd7ef
added temporary changeset to feature branch for `$modes` support
didoo Sep 15, 2025
69d5a5c
TEMP - added `$modes` entry to `color.palette.neutral-0`
didoo Sep 15, 2025
ae99955
refactored logic used to provide SD configuration per target
didoo Sep 15, 2025
af2f34e
progress on logic for handling `$modes` - 1
didoo Sep 16, 2025
c0a1e3c
TEMP - added `modes-testing` tokens
didoo Sep 16, 2025
9a55689
TEMP - added `expected-CSS-output` files
didoo Sep 16, 2025
f0c5e94
progress on logic for handling `$modes` - 2
didoo Sep 16, 2025
6cfee07
added `attributes/themeable` transformation
didoo Sep 16, 2025
7cc7853
progress on logic for handling `$modes` - 3
didoo Sep 16, 2025
e8dc4ee
TEMP - used local version of Style Dictionary for debugging
didoo Sep 17, 2025
b5c4125
progress on logic for handling `$modes` - 4
didoo Sep 17, 2025
4cf8fd1
TEMP generated temporary dist files for testing
didoo Sep 16, 2025
2a9547f
TEMP - added examples of generated themed tokens
didoo Sep 19, 2025
76e0358
added logic to generate theming CSS files
didoo Sep 19, 2025
abd9576
REVERT - Removed `modes-testing` tokens
didoo Sep 30, 2025
dc7b2ad
removed `modes-testing` folder from compilation
didoo Sep 30, 2025
8ce296b
added `carbon-extracted` reference in the `source` definitions
didoo Sep 30, 2025
d170478
TEMP - added `$modes` entries for some color and typography tokens, w…
didoo Sep 30, 2025
930f57b
changed `outputReferences` to `false` (temporary) to bypass issue wit…
didoo Sep 30, 2025
d891405
added commented code to `build` to use for debugging issue with missi…
didoo Sep 30, 2025
39319d6
added two new themed tokens generated files, for Scss mixins and for …
didoo Oct 2, 2025
4ead7dc
fixed issue with `cds` naming missing the `g`
didoo Oct 7, 2025
b7c4007
fixed some issues with how the β€œextra” themed CSS files were generated
didoo Oct 7, 2025
81268fe
TEMP - Re-generated tokens
didoo Sep 30, 2025
b3cf42c
REVERT - used local version of Style Dictionary for debugging
didoo Oct 9, 2025
4b23415
REVERT - added examples of generated themed tokens
didoo Oct 9, 2025
46676c3
REVERT - added `expected-CSS-output` files
didoo Oct 9, 2025
07c1b7f
fixed wrong check for existence of key in object (`0` values would tr…
didoo Oct 27, 2025
30467ec
added `.hds-theme-light/dark` and `[data-hds-theme=β€œlight/dark”]` to …
didoo Oct 27, 2025
f0fb471
re-generated themed tokens
didoo Oct 27, 2025
507c06b
updated generation of tokens’ CSS helpers to use CSS variables for `f…
didoo Oct 27, 2025
d5252d4
re-generated CSS helper files
didoo Oct 27, 2025
2d7deb2
updated generation of extra CSS files to include `.hds-theme-hds/[dat…
didoo Oct 28, 2025
980383a
updated design tokens pipeline to generate a `themed-tokens.json` fil…
didoo Oct 28, 2025
19ff901
re-generated themed tokens
didoo Oct 27, 2025
c1fc24e
updated β€œsrc” files to replace `hds` key with `default` in `$modes` d…
didoo Nov 6, 2025
4396bb0
updated logic to replace `hds` key with `default` in `$modes` definit…
didoo Nov 6, 2025
abd1393
re-generated tokens in `dist` folder
didoo Nov 6, 2025
c382225
tweaked logic for CSS selectors for `@media (prefers-color-scheme)` t…
didoo Nov 7, 2025
54be4e6
re-generated tokens in `dist` folder
didoo Nov 7, 2025
32f0fcc
updated generation of extra theming CSS files to avoid CSS variables …
didoo Nov 12, 2025
ac1217c
updated generation of extra theming CSS files to differentiate betwee…
didoo Nov 14, 2025
5039a0f
re-generated tokens in `dist` folder
didoo Nov 14, 2025
5108db5
removed `[data-hds-theme]` CSS selectors for simplicity
didoo Nov 17, 2025
20b962d
re-generated tokens in `dist` folder
didoo Nov 17, 2025
f9c268b
updated logic for generation of extra β€œthemed” CSS files (removed `pr…
didoo Nov 18, 2025
5c338f4
re-generated tokens in `dist` folder
didoo Nov 18, 2025
11877e7
small tweakings before code review
didoo Nov 20, 2025
f8caa0f
renamed `generateExtra***` to `generate***`
didoo Nov 20, 2025
9e45b40
updated comment
didoo Nov 21, 2025
4e131af
Draft a custom plugin to compile the themed SCSS
alex-ju Sep 24, 2025
1ced1d2
updated SCSS files organization for components (split common part) + …
didoo Sep 26, 2025
d416e7f
added support for source maps for generated themed CSS files
didoo Sep 29, 2025
2935a3d
TEMP - Added generation of β€œalt” CSS for HDS components to compare wi…
didoo Sep 30, 2025
423b892
abstracted logic for custom Rollup plugin to compile multiple Sass fi…
didoo Sep 30, 2025
aeac349
updated `includePaths` for design tokens in Showcase and Website `emb…
didoo Sep 30, 2025
fc45c2f
moved compilation of existing Scss files for components and overrides…
didoo Sep 30, 2025
394a058
removed `rollup-plugin-scss` dev dependency (we use our own custom pl…
didoo Sep 30, 2025
909e008
added CSS compilation for `combined-strategies` tokens
didoo Oct 2, 2025
5c22feb
updated the `prePublish` script in `package.json` of `components` to …
didoo Oct 15, 2025
24c9c9b
simplified architecture of CSS compilation for HDS components (as agr…
didoo Oct 24, 2025
16f51cb
fixed `prepublisOnly` script that was causing error in build (looking…
didoo Oct 24, 2025
afb6e3f
updated `cssFilePath` in blueprints to reflect new Scss file organiza…
didoo Oct 29, 2025
2fa10f4
Apply suggestions from code review
didoo Nov 20, 2025
053e6de
Update packages/components/src/styles/@hashicorp/design-system-compon…
didoo Nov 21, 2025
b883034
Merge pull request #3239 from hashicorp/project-solar/phase-1/HDS-521…
didoo Nov 25, 2025
1864883
Merge pull request #3259 from hashicorp/project-solar/phase-1/HDS-550…
didoo Nov 25, 2025
4d46a8b
Merge pull request #3238 from hashicorp/project-solar/phase-1/HDS-521…
didoo Nov 25, 2025
ab6700c
added `Hds::ThemeSwitcher` component
didoo Sep 30, 2025
6d6d7ca
added `Hds::Theming` service
didoo Sep 30, 2025
57ecc17
added theming to the Showcase itself (and replaced hardcoded values w…
didoo Sep 30, 2025
4b2549e
added `Shw::ThemeSwitcher` component for showcase
didoo Sep 30, 2025
6746107
updated `Mock::App` and added new yielded sub-components
didoo Sep 30, 2025
55a9491
added `Shw:: ThemeSwitcher` to the Showcase page header
didoo Sep 30, 2025
4b48670
added `foundations/theming` showcase page (and a frameless demo)
didoo Sep 30, 2025
af67d84
refactored `hds-theming` service to align with the new themes/modes a…
didoo Oct 1, 2025
0e46e57
added `hdsTheming` initialization to main showcase app
didoo Oct 1, 2025
cbca213
removed compilation of components Scss and replaced it with static in…
didoo Oct 3, 2025
aac4323
added theming options via popover - part 1
didoo Oct 3, 2025
d77b8ac
added theming options via popover - part 2
didoo Oct 3, 2025
dcc0b6b
added theming options via popover - part 3
didoo Oct 3, 2025
aced362
added theming options via popover - part 4
didoo Oct 4, 2025
ae0d11c
added theming options via popover - part 5
didoo Oct 6, 2025
a817eb6
big code refactoring for the theme selector, to streamline user selec…
didoo Oct 6, 2025
cf7ed9f
updated logic that sets the theming for the showcase itself (without …
didoo Oct 7, 2025
ee7d8bc
small fixes here and there for cleanup and linting
didoo Oct 10, 2025
e207156
fixed issue with `pnpm lint:format` (missing newline at the end of `p…
didoo Oct 10, 2025
66eeaa4
fixed accessibility issue in `advanced-table` page, due to changes to…
didoo Oct 10, 2025
763fdcf
fixed typescript error due to new mock page being added
didoo Oct 10, 2025
84ffcba
added fix for tests failing
didoo Oct 13, 2025
7fc5b11
started large refactoring/rewrite of the theming switcher and page in…
didoo Oct 14, 2025
deafaf5
updated logic by creating a `shwTheming` service that extends `hdsThe…
didoo Oct 15, 2025
35bc27b
moved theming logic from `ShwThemeSwitcher` component/subcomponents t…
didoo Oct 15, 2025
d8a629c
updated reference CSS files to follow new theming approach/logic
didoo Oct 16, 2025
352764b
further refactoring/rewriting of theming logic
didoo Oct 16, 2025
ac06c81
updated approach to `light/dark` styles in showcase by using the HDS …
didoo Oct 17, 2025
1ba1a2d
migrated back the `Contextual` demo content to the index page
didoo Oct 17, 2025
0e0d261
added a `DebuggingPanel` to the `ShwThemeSwitcher` controls
didoo Oct 17, 2025
3c26aea
refactored/improved `DebuggingPanel` and added new preferences to adv…
didoo Oct 17, 2025
2974fba
small cleanups and refactorings
didoo Oct 17, 2025
811cfd0
fixed small issue with `ShwThemeSwitcher` selector
didoo Oct 20, 2025
8bb238d
removed some outdated comments
didoo Oct 20, 2025
63af275
small refactorings
didoo Oct 20, 2025
df426e2
added local storage support for theming options
didoo Oct 20, 2025
4ffc477
big refactoring of the `hdsTheming` service to simplify logic and red…
didoo Oct 20, 2025
59d5a82
cleanup of debugging comments and other stuff
didoo Oct 20, 2025
a6d7ebd
refactor and cleanup in preparation for PR review
didoo Oct 21, 2025
e5573d2
refactored code to fix logic flow for theming initialization
didoo Oct 21, 2025
1162e09
fixed how the theming options were saved in local storage
didoo Oct 21, 2025
08409e0
Apply suggestions from Copilot's code review
didoo Oct 21, 2025
3f3138a
fixed issue with `setTheme` not being passed `options` by the `ShwThe…
didoo Oct 22, 2025
658922b
fix issue with the popover of the ShwThemeSwitcher component, where t…
didoo Oct 22, 2025
f849855
Update showcase/app/services/shw-theming.ts
didoo Oct 23, 2025
4a14421
small tweak to the typing of `HdsModes` per code review suggestion
didoo Oct 23, 2025
b3a1c0e
updated how the CSS files (tokens and components, with/without themin…
didoo Oct 24, 2025
8ff9558
updated logic for styleshet switching using the `disabled` attribute
didoo Oct 24, 2025
413510a
removed unused import
didoo Oct 24, 2025
ff19bb7
removed `isInitialized` logic from the `hdeTheming` service to avoid bug
didoo Oct 24, 2025
91ddbd7
TEMP - added temporary `hds-theme-light/dark` selectors
didoo Oct 24, 2025
2fab643
TEMP - Added back custom token values for testing purpose
didoo Oct 24, 2025
deab041
fixed small issue with the `HdsThemeSwitcher` components used in the …
didoo Oct 29, 2025
79aa445
added small comment
didoo Oct 29, 2025
d9fd100
updated `hdsTheming` service to support `default` theme / mode
didoo Nov 7, 2025
fcb145b
added support for `default` option to HDS ThemeSwitcher component
didoo Nov 7, 2025
1086033
Updated β€œfoundations/theming” showcase page to include variants of HD…
didoo Nov 7, 2025
8cdeb0b
updated Showcase ThemeSwitcher to use ``default` as theme option
didoo Nov 7, 2025
6bc8726
updated logic for how CSS selectors are applied to the `html:root` el…
didoo Nov 7, 2025
6beef64
updated CSS selectors for local `public/assets` themed tokens CSS fil…
didoo Nov 7, 2025
549f2bb
added fake theming for display/text typography to `public/assets` the…
didoo Nov 7, 2025
f710b0b
updated β€œfoundations/theming” showcase page to include `default` and …
didoo Nov 7, 2025
45fef94
implemented `ThemeContex` component
didoo Nov 13, 2025
77ec00b
added demos of `ThemeContext` component to showcase β€œfoundations/them…
didoo Nov 13, 2025
531ea7b
improved type definitions for ThemeContext and showcase β€œfoundations/…
didoo Nov 13, 2025
f9087dd
refactored how CSS selectors are applied to enable mode-specific over…
didoo Nov 14, 2025
d51a4d7
updated CSS selectors for local `public/assets` themed tokens CSS fil…
didoo Nov 14, 2025
dd4255d
updated `ThemeContext` to use a more generic `context` argument
didoo Nov 14, 2025
7b166b0
updated showcase β€œtheming” page to use the new `@context` argument fo…
didoo Nov 14, 2025
a0ed075
finally defined proper typing for `ThemeContext` component
didoo Nov 14, 2025
71588fb
refactored showcase code to remove handling of `[data-hds-theme]` CSS…
didoo Nov 17, 2025
74cf9b5
updated CSS selectors for local `public/assets` themed tokens CSS fil…
didoo Nov 18, 2025
7cfccbf
refactored theme switching in showcase to use new CSS files
didoo Nov 18, 2025
c2d12f7
updated theme switcher in showcase to allow toggling of the β€œadvanced…
didoo Nov 18, 2025
1946dfd
introduced a β€œcarbonization” mixin for applying styles only for certa…
didoo Nov 19, 2025
65c08ef
added subtle shadow to `ThemingBasicContainer`
didoo Nov 19, 2025
ee26327
fixed small bug that would cause the showcase pages to crash if the v…
didoo Nov 19, 2025
9bed043
small fix to the control logic for the `HdsThemeSwitcher` demo in sho…
didoo Nov 18, 2025
ed980d8
fixed TypeScript issue
didoo Nov 20, 2025
9bc31cd
fix small bug in the logic when the β€œapply” with β€œshow advanced optio…
didoo Nov 20, 2025
a9239d2
added `ShwBodyLinkToRoute` component
didoo Nov 20, 2025
318c915
replaced custom link in AdvancedTable showcase page with newly create…
didoo Nov 20, 2025
aad753f
reworked the demo frameless for application with theme switcher to av…
didoo Nov 20, 2025
d80eaac
replaced custom theme switcher with proper `HdsThemeSwitcher` in `App…
didoo Nov 21, 2025
34c5e91
some cleanup before code review
didoo Nov 21, 2025
a89edd6
changed how theming is applied to the showcase itself, to limit `pref…
didoo Nov 25, 2025
016918f
fixed wrong CSS selector, per code review suggestion
didoo Nov 25, 2025
f2193d9
prefixed `OnSetThemeCallback` with `Hds` per review suggestion
didoo Nov 25, 2025
e10494b
Update packages/components/src/template-registry.ts
didoo Nov 25, 2025
4c76fe9
converted `updatePageStylesheets` function to a private method
didoo Nov 26, 2025
2688039
small cleanup per code reviews suggestions
didoo Nov 26, 2025
ae0c48a
small fixes per code review
didoo Nov 28, 2025
0219437
updated logic that reads the stored theming data for the `HdsThemingS…
didoo Nov 28, 2025
a736ccf
removed comment
didoo Dec 2, 2025
3d4f3b6
updated logic that converts the Carbon duration value to the DTCG for…
didoo Dec 2, 2025
69697b5
updated logic that converts the Carbon `cubic-bezier` value to the ex…
didoo Dec 2, 2025
583d2a7
re-extracted carbon tokens
didoo Dec 2, 2025
738166c
turned on option to convert `font-size` from `rem` to `px` for extrac…
didoo Dec 3, 2025
3dfad74
re-extracted carbon tokens
didoo Dec 3, 2025
2433e8d
Merge pull request #3390 from hashicorp/project-solar/phase-1/HDS-524…
didoo Dec 3, 2025
db5446f
updated CSS selectors for local `public/assets` themed tokens CSS fil…
didoo Nov 18, 2025
63142af
basic implementation of `<ShwCarbonizationComparisonGrid>`
didoo Sep 23, 2025
e97639b
refactored implementation of `<ShwCarbonizationComparisonGrid>`
didoo Sep 23, 2025
06c45fe
implemented β€œCarbonization” section for `Badge` page
didoo Sep 23, 2025
efec79e
implemented β€œCarbonization” section for `BadgeCount` page
didoo Sep 23, 2025
358ff82
implemented β€œCarbonization” section for `Button` page
didoo Sep 23, 2025
a80fd5d
implemented β€œCarbonization” section for `Focus Ring` page
didoo Sep 24, 2025
7c3e7ae
implemented β€œCarbonization” section for `Typography` page
didoo Sep 24, 2025
102d7f3
implemented β€œCarbonization” section for (new) `Color` page
didoo Sep 24, 2025
ab35395
added `@carbon/web-components` as devDependency to Showcase app
didoo Sep 24, 2025
7914664
added `@carbon/[themes|layout|grid|type]` + `@ibm/plex` as devDepende…
didoo Sep 25, 2025
75acfca
refactored `ComparisonGrid` component to add themed background color …
didoo Sep 25, 2025
c4ef3ba
added temporary support for IBM Plex font-family
didoo Sep 25, 2025
91bcfb1
refactored code to support theming for reference web components, base…
didoo Sep 25, 2025
147f8ac
small refactoring
didoo Sep 25, 2025
20e8820
small refactorings
didoo Sep 25, 2025
abf16bf
refactored content organization to have the carbonization pages as st…
didoo Sep 25, 2025
b3f3f45
added carbon web components for comparison on `BadgeCount` page
didoo Oct 7, 2025
40a284d
added carbon web components for comparison on `Button` page
didoo Oct 7, 2025
a1630e8
more small fixes for cleanup and linting
didoo Oct 10, 2025
3278fd3
implemented β€œCarbonization” section for `Form::TextInput` page
didoo Oct 21, 2025
907599b
implemented β€œCarbonization” section for `SegmentedGroup` page
didoo Oct 14, 2025
75d258b
removed link to β€œFoundations > Color” page
didoo Oct 21, 2025
86246f5
Small update to an `rgba` color
didoo Oct 21, 2025
09d0c14
moved theming class in ComparisonGrid from item to item content per c…
didoo Oct 23, 2025
02303db
improved how to apply themed foreground/background colors to content …
didoo Oct 23, 2025
c9eac5d
installed `@carbon/styles` as devDependency to import CSS variables f…
didoo Oct 23, 2025
88c0f53
fixed issue with text color in typography page
didoo Nov 21, 2025
b8b60b3
reorganized carbonized pages so they all live under the `carbonized` …
didoo Oct 23, 2025
5b4510b
prepared the ground for controlling the ShwThemeSwitcher on carbonize…
didoo Oct 23, 2025
50a4fa6
fixed CSS for carbonization pages
didoo Oct 23, 2025
4b90565
updated carbonized typography page to show equivalent/mapped Carbon t…
didoo Oct 24, 2025
e63f799
updated `ShwComparisonGrid` to expose an alternative side-by-side layout
didoo Oct 24, 2025
8e3b5fe
updated some components to take into account the new `hideCarbonLabel…
didoo Oct 24, 2025
b879a52
fixed typescript/glint issue
didoo Oct 24, 2025
6bdd13e
updated a couple of typographic mappings
didoo Oct 24, 2025
510f5df
added yielding of `theme` value in the named blocks of the `Compariso…
didoo Oct 28, 2025
becbfab
introduced `ShwCarbonizationStylePreviewTypography` to facilitate com…
didoo Oct 27, 2025
ba5765e
refactored `carbonization/foundations/color` page and `ShwCarbonizati…
didoo Oct 28, 2025
1e59ba3
updated comparison grid to use `default` for original HDS theming ins…
didoo Nov 7, 2025
b90ed53
small tweak to the `badge` carbonization page
didoo Nov 12, 2025
d3185ec
added logic to the application to lock theme switching when loading a…
didoo Nov 18, 2025
6d4a441
replaced `theme` with `mode` in `ComparisonGrid`
didoo Nov 14, 2025
1a505cf
fixed issue with the β€œdefault” block of the carbonization grid was no…
didoo Nov 20, 2025
cccc7be
fixed issue in the carbonization page for colors
didoo Nov 20, 2025
1bc59bf
some cleanup before code review
didoo Nov 20, 2025
444d2a3
Update showcase/app/components/shw/carbonization/token-preview/color.gts
didoo Nov 21, 2025
c75ad82
updated showcase page for Button carbonization
didoo Nov 18, 2025
41aff58
implemented β€œCarbonization” page for `Modal` component
didoo Nov 25, 2025
7d5cf54
added examples of components with focus state to the carbonization pa…
didoo Nov 27, 2025
224c151
tweaks per code review suggestions
didoo Nov 28, 2025
b459920
implemented β€œCarbonization” page for `Form/RadioCard` component
didoo Nov 28, 2025
932c447
better visual grouping of carbonization pages links in homepage
didoo Dec 1, 2025
f41ea5e
renamed the `page-carbonization` components files and declarations to…
didoo Dec 3, 2025
09df3fb
added `disabled` state to `cds-radio-tile`
didoo Dec 3, 2025
2324b45
avoid duplicate `name` attributes for different radio groups
didoo Dec 3, 2025
d3f3f0d
add missing `{{on "change" this.onChange}}` handled to the `RadioCard…
didoo Dec 3, 2025
cf11205
Merge pull request #3241 from hashicorp/project-solar/phase-1/HDS-524…
didoo Dec 3, 2025
84172e4
Merge pull request #3398 from hashicorp/project-solar/phase-1/HDS-567…
didoo Dec 3, 2025
8c67ca4
Merge pull request #3400 from hashicorp/project-solar/phase-1/HDS-567…
didoo Dec 3, 2025
b5c7548
[06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for founda…
didoo Dec 5, 2025
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
8 changes: 8 additions & 0 deletions .changeset/tough-cows-rule.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@hashicorp/design-system-tokens": major
---

MODES - TODOs

- Decide if this is a `major` or a `minor`
- Add a proper changeset entry here
1 change: 1 addition & 0 deletions DELETE-ME.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
DELETE ME!
10 changes: 8 additions & 2 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
"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/",
"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",
Expand All @@ -30,7 +31,10 @@
"lint:js:fix": "eslint . --fix",
"lint:types": "glint",
"start": "rollup --config --watch --environment development",
"prepublishOnly": "pnpm build && 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": "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"
},
"dependencies": {
"@codemirror/commands": "^6.8.0",
Expand Down Expand Up @@ -112,7 +116,6 @@
"prettier-plugin-ember-template-tag": "^2.0.5",
"rollup": "^4.39.0",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-scss": "^4.0.1",
"stylelint": "^16.17.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard-scss": "^14.0.0",
Expand Down Expand Up @@ -367,6 +370,8 @@
"./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js",
"./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js",
"./components/hds/text.js": "./dist/_app_/components/hds/text.js",
"./components/hds/theme-context.js": "./dist/_app_/components/hds/theme-context.js",
"./components/hds/theme-switcher.js": "./dist/_app_/components/hds/theme-switcher.js",
"./components/hds/time.js": "./dist/_app_/components/hds/time.js",
"./components/hds/time/range.js": "./dist/_app_/components/hds/time/range.js",
"./components/hds/time/single.js": "./dist/_app_/components/hds/time/single.js",
Expand Down Expand Up @@ -395,6 +400,7 @@
"./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
"./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
"./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"
}
},
Expand Down
73 changes: 56 additions & 17 deletions packages/components/rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,57 @@
import { Addon } from '@embroider/addon-dev/rollup';
import { babel } from '@rollup/plugin-babel';
import copy from 'rollup-plugin-copy';
import scss from 'rollup-plugin-scss';
import process from 'process';
import path from 'node:path';
import * as sass from 'sass';

const addon = new Addon({
srcDir: 'src',
destDir: 'dist',
});

// Custom SCSS compilation plugin for Rollup
function addScssCompilationPlugins(options) {
return options.map(({ inputFile, outputFile }) => ({
name: `rollup custom plugin to generate ${outputFile}`,
generateBundle() {
try {
const inputFileFullPath = `src/styles/@hashicorp/${inputFile}`;
const outputFileFullPath = `styles/@hashicorp/${outputFile}`;

const result = sass.compile(inputFileFullPath, {
sourceMap: true,
loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
});

// Emit the compiled CSS
this.emitFile({
type: 'asset',
fileName: outputFileFullPath,
source: result.css,
});

// Emit the source map
if (result.sourceMap) {
this.emitFile({
type: 'asset',
fileName: `${outputFileFullPath}.map`,
source: JSON.stringify(result.sourceMap),
});
}
} catch (error) {
this.error(
`Failed to compile SCSS file "${inputFile}": ${error.message}`
);
}
},
}));
}

const plugins = [
// These are the modules that users should be able to import from your
// addon. Anything not listed here may get optimized away.
addon.publicEntrypoints([
'**/*.{js,ts}',
'index.js',
'template-registry.js',
'styles/@hashicorp/design-system-components.scss',
]),
addon.publicEntrypoints(['**/*.{js,ts}', 'index.js', 'template-registry.js']),

// These are the modules that should get reexported into the traditional
// "app" tree. Things in here should also be in publicEntrypoints above, but
Expand All @@ -50,16 +83,22 @@ const plugins = [
// package names.
addon.dependencies(),

scss({
fileName: 'styles/@hashicorp/design-system-components.css',
includePaths: [
'node_modules/@hashicorp/design-system-tokens/dist/products/css',
],
}),

scss({
fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
}),
// We use a custom plugin for the Sass/SCSS compilation
// so we can have multiple input and multiple outputs
...addScssCompilationPlugins([
{
inputFile: 'design-system-components.scss',
outputFile: 'design-system-components.css',
},
{
inputFile: 'design-system-components-common.scss',
outputFile: 'design-system-components-common.css',
},
{
inputFile: 'design-system-power-select-overrides.scss',
outputFile: 'design-system-power-select-overrides.css',
},
]),

// Ensure that standalone .hbs files are properly integrated as Javascript.
addon.hbs(),
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,12 @@ export { default as HdsTextCode } from './components/hds/text/code.ts';
export { default as HdsTextDisplay } from './components/hds/text/display.ts';
export * from './components/hds/text/types.ts';

// Theme Context
export { default as HdsThemeContext } from './components/hds/theme-context/index.ts';

// Theme Switcher
export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts';

// Time
export { default as HdsTime } from './components/hds/time/index.ts';
export { default as HdsTimeSingle } from './components/hds/time/single.ts';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<div class={{this.classNames}} ...attributes>{{yield}}</div>
69 changes: 69 additions & 0 deletions packages/components/src/components/hds/theme-context/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import type Owner from '@ember/owner';

import {
HdsThemeContextThemesValues,
HdsThemeContextModesValues,
} from './types.ts';
import type { HdsThemeContexts } from './types.ts';

import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';

export interface HdsThemeContextSignature {
Args: {
// can be either an `HdsTheme` or an `HdsMode`
context: HdsThemeContexts;
};
Blocks: {
default: [];
};
Element: HTMLElement;
}

export const CONTEXTUAL_THEMES: HdsThemes[] = Object.values(
HdsThemeContextThemesValues
);
export const CONTEXTUAL_MODES: HdsModes[] = Object.values(
HdsThemeContextModesValues
);
export const CONTEXTUAL_VALUES: HdsThemeContexts[] = [
...CONTEXTUAL_THEMES,
...CONTEXTUAL_MODES,
];

export default class HdsThemeContext extends Component<HdsThemeContextSignature> {
constructor(owner: Owner, args: HdsThemeContextSignature['Args']) {
super(owner, args);

const { context } = args;

assert(
`@context for "Hds::ThemeContext" must be one of the following: ${CONTEXTUAL_VALUES.join(
', '
)}; received: ${context}`,
CONTEXTUAL_VALUES.includes(context)
);
}

// Get the class names to apply to the component.
get classNames(): string {
const classes = ['hds-theme-context'];

const { context } = this.args;

// add "theme" or "mode" classes based on the @context arguments
if (CONTEXTUAL_THEMES.includes(context as HdsThemes)) {
classes.push(`hds-theme-${context}`);
} else if (CONTEXTUAL_MODES.includes(context as HdsModes)) {
classes.push(`hds-mode-${context}`);
}

return classes.join(' ');
}
}
32 changes: 32 additions & 0 deletions packages/components/src/components/hds/theme-context/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/

import {
HdsThemeValues,
HdsModesLightValues,
HdsModesDarkValues,
} from '../../../services/hds-theming.ts';

import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';

// re-export the enum values for the `HdsThemes` to use in the component
// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values)
export const HdsThemeContextThemesValues = {
Default: HdsThemeValues.Default,
System: HdsThemeValues.System,
Light: HdsThemeValues.Light,
Dark: HdsThemeValues.Dark,
} as const;

// re-export the enum values for the `HdsModes` to use in the component
// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values)
export const HdsThemeContextModesValues = {
CdsG0: HdsModesLightValues.CdsG0,
CdsG10: HdsModesLightValues.CdsG10,
CdsG90: HdsModesDarkValues.CdsG90,
CdsG100: HdsModesDarkValues.CdsG100,
} as const;

export type HdsThemeContexts = HdsThemes | Exclude<HdsModes, 'default'>;
29 changes: 29 additions & 0 deletions packages/components/src/components/hds/theme-switcher/index.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}

{{!
------------------------------------------------------------------------------------------
IMPORTANT: this is a temporary implementation, while we wait for the design specifications
------------------------------------------------------------------------------------------
}}

<Hds::Dropdown
@enableCollisionDetection={{true}}
@matchToggleWidth={{@toggleIsFullWidth}}
class="hds-theme-switcher-control"
...attributes
as |D|
>
<D.ToggleButton
@color="secondary"
@size={{this.toggleSize}}
@isFullWidth={{this.toggleIsFullWidth}}
@text={{this.toggleContent.label}}
@icon={{this.toggleContent.icon}}
/>
{{#each-in this._options as |key data|}}
<D.Interactive @icon={{data.icon}} {{on "click" (fn this.onSelectTheme data.theme)}}>{{data.label}}</D.Interactive>
{{/each-in}}
</Hds::Dropdown>
Loading