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);