Update button colors again

jpmorganchase · May 9, 2024 · b7ebb53 · b7ebb53
1 parent 6a7b5ce
commit b7ebb53
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 14 deletions.
diff --git 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 = () => {
         <ButtonExamples />
         <Button disabled>Submit</Button>
       </StackLayout>
+      <StackLayout direction="row">
+        <SegmentedButtonGroupDefault />
+      </StackLayout>
       <StackLayout direction="row">
         <ToggleButtonGroupHorizontalText defaultValue="high" />
         <ToggleButtonGroupHorizontalIon defaultValue="light" />
@@ -284,7 +288,10 @@ export const Example1 = () => {
         <SwitchDefault label="Switch" disabled />
         <SwitchDefault label="Switch" disabled defaultChecked />
       </StackLayout>
-      <StackLayout direction="row" gap={20} style={{ marginBlock: 60 }}>
+      <StackLayout direction="row" gap={16} style={{ marginBlock: 60 }}>
+        <Tooltip content="I am a tooltip" open placement="bottom">
+          <Button>Info</Button>
+        </Tooltip>
         <Tooltip content="I am a tooltip" status="info" open placement="bottom">
           <Button>Info</Button>
         </Tooltip>

diff --git 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
@@ -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
@@ -1,13 +1,13 @@
 .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);
   --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* TBD */
   --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
@@ -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
@@ -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
@@ -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);