Skip to content

[06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for foundations and components #3332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
didoo merged 16 commits into from
Dec 5, 2025
Merged

[06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for foundations and components #3332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a72db93
added proper `$modes` definitions to `typography` src JSON tokens
didoo Oct 27, 2025
39b60e6
TEMP - added `postbuild` scripts to `package.json` files for tokens a…
didoo Oct 27, 2025
eb1b374
added more proper `$modes` definitions to `color/semantic` and `core/…
didoo Nov 10, 2025
5bc6938
added component-level design tokens for badge + added $modes values +…
didoo Nov 12, 2025
d147cc4
updated tokens for `Badge` after sync with Lilith
didoo Nov 13, 2025
a3ca296
updated CSS styles for `Badge`/`BadgeCount` after changes to underlyi…
didoo Nov 13, 2025
396d39c
added component-level design tokens for Button + updated CSS styling …
didoo Nov 17, 2025
4359a89
replaced button-related Sass variables with corresponding CSS variabl…
didoo Nov 17, 2025
632e4cb
added conditional styling for button when full-width
didoo Nov 19, 2025
fb19bae
linting
didoo Nov 21, 2025
3b6e10b
assigned `0` as value for all the “carbonized” border radiuses
didoo Nov 25, 2025
ffd5b21
updated a few tokens for `Form/RadioCard`
didoo Nov 28, 2025
7299142
small fixes per Copilot’s review
didoo Dec 1, 2025
a8fb107
fixed a few `default` mode values for `Badge` and `Button`
didoo Dec 2, 2025
0aed79a
re-generated design tokens in `dist` output
didoo Nov 18, 2025
59aacb2
updated temporary CSS files (components + themed tokens) in showcase …
didoo Nov 10, 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
1 change: 1 addition & 0 deletions packages/components/package.json
View file
Open in desktop
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 Down
102 changes: 26 additions & 76 deletions packages/components/src/styles/components/badge-count.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}
157 changes: 26 additions & 131 deletions packages/components/src/styles/components/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,17 @@
// BADGE COMPONENT
//

@use "sass:map";

$hds-badge-types: ("flat", "inverted", "outlined");
$hds-badge-colors-accents: ("highlight", "success", "warning", "critical");
$hds-badge-sizes: ("small", "medium", "large");
$hds-badge-border-width: 1px;
$hds-badge-colors-props: (
"highlight": (
"inverted-background-color": var(--token-color-palette-purple-200),
"outlined-border-color": var(--token-color-palette-purple-200),
),
"success": (
"inverted-background-color": var(--token-color-palette-green-200),
"outlined-border-color": var(--token-color-palette-green-200),
),
"warning": (
"inverted-background-color": var(--token-color-palette-amber-200),
"outlined-border-color": var(--token-color-palette-amber-200),
),
"critical": (
"inverted-background-color": var(--token-color-palette-red-200),
"outlined-border-color": var(--token-color-palette-red-200),
),
);
$hds-badge-colors: ("neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical");
$hds-badge-types: ("filled", "inverted", "outlined");

.hds-badge {
// Redefine color values to increase contrast
--token-color-surface-success: var(--token-color-palette-green-100);
--token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
--token-color-surface-warning: var(--token-color-palette-amber-100);
--token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
--token-color-surface-critical: var(--token-color-palette-red-100);
--token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
--token-color-surface-highlight: var(--token-color-palette-purple-100);
--token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);

display: inline-flex;
align-items: center;
max-width: 100%;
vertical-align: middle;
border: $hds-badge-border-width solid transparent;
border-radius: var(--token-border-radius-small);
border-style: solid;
border-width: var(--token-badge-border-width);
}

.hds-badge__icon {
Expand All @@ -64,116 +33,42 @@ $hds-badge-colors-props: (

// SIZE

// these values later may come from the design tokens
$hds-badge-size-props: (
"small": (
// 13px = 0.8125rem
"font-size": 0.8125rem,
"gap": 0.25rem,
"height": 1.25rem,
"icon-size": 0.75rem,
// 16px = 1.2308
"line-height": 1.2308,
"padding-vertical": 0.125rem,
"padding-horizontal": 0.375rem,
),
"medium": (
// 13px = 0.8125rem
"font-size": 0.8125rem,
"gap": 0.25rem,
"height": 1.5rem,
"icon-size": 1rem,
// 16px = 1.2308
"line-height": 1.2308,
"padding-vertical": 0.25rem,
"padding-horizontal": 0.5rem,
),
"large": (
// 16px = 1rem
"font-size": 1rem,
"gap": 0.375rem,
"height": 2rem,
"icon-size": 1rem,
// 24px = 1.5
"line-height": 1.5,
"padding-vertical": 0.25rem,
"padding-horizontal": 0.5rem,
),
);

@each $size in $hds-badge-sizes {
.hds-badge--size-#{$size} {
gap: map.get($hds-badge-size-props, $size, "gap");
min-height: map.get($hds-badge-size-props, $size, "height");
padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width})
calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
gap: var(--token-badge-gap-#{$size});
min-height: var(--token-badge-height-#{$size});
padding: calc(var(--token-badge-padding-vertical-#{$size}) - var(--token-badge-border-width))
calc(var(--token-badge-padding-horizontal-#{$size}) - var(--token-badge-border-width));
border-radius: var(--token-badge-border-radius-#{$size});

.hds-badge__icon {
width: map.get($hds-badge-size-props, $size, "icon-size");
height: map.get($hds-badge-size-props, $size, "icon-size");
width: var(--token-badge-icon-size-#{$size});
height: var(--token-badge-icon-size-#{$size});
}

.hds-badge__text {
font-size: map.get($hds-badge-size-props, $size, "font-size");
line-height: map.get($hds-badge-size-props, $size, "line-height");
font-size: var(--token-badge-typography-font-size-#{$size});
line-height: var(--token-badge-typography-line-height-#{$size});
}
}
}

// COLOR + TYPE COMBINATIONS

.hds-badge--color-neutral {
&.hds-badge--type-filled {
color: var(--token-color-foreground-primary);
background-color: var(--token-color-palette-neutral-200);
}

&.hds-badge--type-inverted {
color: var(--token-color-foreground-high-contrast);
background-color: var(--token-color-palette-neutral-500);
}

&.hds-badge--type-outlined {
color: var(--token-color-foreground-primary);
background-color: transparent;
border-color: var(--token-color-palette-neutral-500);
}
}

.hds-badge--color-neutral-dark-mode {
&.hds-badge--type-filled {
color: var(--token-color-foreground-high-contrast);
background-color: var(--token-color-palette-neutral-500);
}

&.hds-badge--type-inverted {
color: var(--token-color-foreground-primary);
background-color: var(--token-color-surface-faint);
}

&.hds-badge--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-colors-accents {
@each $color in $hds-badge-colors {
.hds-badge--color-#{$color} {
&.hds-badge--type-filled {
color: var(--token-color-foreground-#{$color}-on-surface);
background-color: var(--token-color-surface-#{$color});
}

&.hds-badge--type-inverted {
color: var(--token-color-foreground-high-contrast);
background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
}

&.hds-badge--type-outlined {
color: var(--token-color-foreground-#{$color});
background-color: transparent;
border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
@each $type in $hds-badge-types {
&.hds-badge--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;
}
}
}
}
}
5 changes: 5 additions & 0 deletions packages/components/src/styles/components/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
//

@use "../mixins/button" as *;
@use "../mixins/carbonization" as *;

.hds-button {
@include hds-button();
Expand Down Expand Up @@ -51,6 +52,10 @@
width: 100%;
max-width: 100%;

@include hds-apply-only-if-carbon() {
justify-content: space-between;
}

.hds-button__text {
flex: 0 0 auto;
}
Expand Down
8 changes: 3 additions & 5 deletions packages/components/src/styles/components/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@
@use "../mixins/button" as *;
@use "../mixins/focus-ring" as *;

$hds-dropdown-toggle-border-radius: $hds-button-border-radius;

// DROPDOWN

.hds-dropdown--is-inline {
Expand All @@ -39,7 +37,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
color: var(--token-color-foreground-primary);
background-color: var(--token-color-surface-faint);
border: 1px solid var(--token-color-border-strong);
border-radius: $hds-dropdown-toggle-border-radius;
border-radius: var(--token-button-border-radius);
outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
outline-color: transparent; // We need this to be transparent for a11y
isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
Expand Down Expand Up @@ -81,8 +79,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
align-items: center;
justify-content: center;
border-radius: calc(
#{$hds-dropdown-toggle-border-radius} - 2px
); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px)
var(--token-button-border-radius) - 2px
); // var(--token-button-border-radius) - (1px padding + 1px border) (= 3px)

img {
width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/styles/components/form/file-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
background-repeat: no-repeat;
background-position: 15px 50%;
background-size: var(--token-form-text-input-background-image-size);
border: $hds-button-border-width solid var(--token-color-border-strong);
border-radius: $hds-button-border-radius;
border: var(--token-button-border-width) solid var(--token-color-border-strong);
border-radius: var(--token-button-border-radius);
box-shadow: var(--token-elevation-low-box-shadow);
cursor: pointer;
}
Expand Down
Loading