diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index c7a03043508..7023e9f337d 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -65,6 +65,7 @@ import { HelperText as FormFieldHelperText, Readonly as FormFieldReadonly, } from "../../../core/stories/form-field/form-field.stories"; +import { Default as SegmentedButtonGroupDefault } from "../../../core/stories/segmented-button-group/segmented-button-group.stories.tsx"; import { Default as PillDefault, Disabled as PillDisabled, @@ -238,6 +239,9 @@ export const Example1 = () => { + + + @@ -284,7 +288,10 @@ export const Example1 = () => { - + + + + diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index 965f3bf759d..6dadb1288a8 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/packages/theme/css/characteristics/actionable-next.css @@ -11,19 +11,19 @@ /* Primary variant */ --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt); --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-primary-background: var(--salt-palette-neutral-action); --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-primary-background-active: var(--salt-palette-neutral-strongest); --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-action-disabled); /* Secondary variant */ --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-secondary-background: var(--salt-palette-background-none); /* TBD */ --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-strongest); --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled); } diff --git a/packages/theme/css/characteristics/selectable-next.css b/packages/theme/css/characteristics/selectable-next.css index 101da79f679..35cdba640cf 100644 --- a/packages/theme/css/characteristics/selectable-next.css +++ b/packages/theme/css/characteristics/selectable-next.css @@ -1,19 +1,19 @@ .salt-theme.salt-theme-next { --salt-selectable-borderColor: var(--salt-palette-neutral); - --salt-selectable-borderColor-hover: var(--salt-palette-accent); - --salt-selectable-borderColor-selected: var(--salt-palette-accent-stronger); - --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-stronger-disabled); + --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak); + --salt-selectable-borderColor-selected: var(--salt-palette-accent); + --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled); --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled); --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly); --salt-selectable-foreground: var(--salt-palette-neutral-strong); --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled); - --salt-selectable-foreground-hover: var(--salt-palette-accent); - --salt-selectable-foreground-selected: var(--salt-palette-accent-strong); - --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-strong-disabled); + --salt-selectable-foreground-hover: var(--salt-palette-accent-weak); + --salt-selectable-foreground-selected: var(--salt-palette-accent); + --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled); --salt-selectable-background: var(--salt-palette-background-none); --salt-selectable-background-hover: var(--salt-palette-accent-weakest); - --salt-selectable-background-selected: var(--salt-palette-accent-weak); + --salt-selectable-background-selected: var(--salt-palette-accent-weaker); --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest); --salt-selectable-background-disabled: var(--salt-palette-background-none); --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled); diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css index 6d7119dd80b..db973a7c5ee 100644 --- a/packages/theme/css/characteristics/status-next.css +++ b/packages/theme/css/characteristics/status-next.css @@ -1,5 +1,5 @@ .salt-theme.salt-theme-next { - --salt-status-info-foreground: var(--salt-palette-accent-strong); /* TBD */ + --salt-status-info-foreground: var(--salt-palette-accent); --salt-status-success-foreground: var(--salt-palette-positive); --salt-status-warning-foreground: var(--salt-palette-warning); --salt-status-error-foreground: var(--salt-palette-negative); @@ -7,7 +7,7 @@ --salt-status-negative-foreground: var(--salt-palette-negative); --salt-status-positive-foreground: var(--salt-palette-positive); - --salt-status-info-borderColor: var(--salt-palette-accent-strong); + --salt-status-info-borderColor: var(--salt-palette-accent); --salt-status-success-borderColor: var(--salt-palette-positive); --salt-status-warning-borderColor: var(--salt-palette-warning); --salt-status-error-borderColor: var(--salt-palette-negative); diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index 1ee190edf09..6c9189cd4dc 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/packages/theme/css/palette/accent-next.css @@ -5,6 +5,7 @@ --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a); --salt-palette-accent-stronger: var(--salt-color-blue-700); --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a); + --salt-palette-accent-strongest: var(--salt-color-blue-800); --salt-palette-accent-weak: var(--salt-color-blue-400); --salt-palette-accent-weaker: var(--salt-color-blue-200); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); @@ -21,6 +22,7 @@ --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a); --salt-palette-accent-stronger: var(--salt-color-blue-300); --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a); + --salt-palette-accent-strongest: var(--salt-color-blue-200); --salt-palette-accent-weak: var(--salt-color-blue-600); --salt-palette-accent-weaker: var(--salt-color-blue-800); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index 7902b57832e..35a1492c502 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/packages/theme/css/palette/foreground-next.css @@ -8,6 +8,7 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-600); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a); --salt-palette-foreground-visited: var(--salt-color-purple-800); + --salt-palette-foreground-invert: var(--salt-color-white); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-foreground-active: var(--salt-color-blue-300); @@ -19,4 +20,5 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-400); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a); --salt-palette-foreground-visited: var(--salt-color-purple-200); + --salt-palette-foreground-invert: var(--salt-color-black); } diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css index c12d1c6d716..59b235ba73b 100644 --- a/packages/theme/css/palette/neutral-next.css +++ b/packages/theme/css/palette/neutral-next.css @@ -7,6 +7,7 @@ --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-black-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a); + --salt-palette-neutral-strongest: var(--salt-color-gray-800); --salt-palette-neutral-weak: var(--salt-color-gray-400); --salt-palette-neutral-weaker: var(--salt-color-gray-300); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); @@ -25,6 +26,7 @@ --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-white-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a); + --salt-palette-neutral-strongest: var(--salt-color-gray-200); --salt-palette-neutral-weak: var(--salt-color-gray-600); --salt-palette-neutral-weaker: var(--salt-color-gray-700); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);