Fix button to match Figma better

jpmorganchase · May 13, 2024 · e5c9ad4 · e5c9ad4
1 parent 45d3235
commit e5c9ad4
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx
@@ -236,7 +236,15 @@ export const Example1 = () => {
       </StackLayout>
       <StackLayout direction="row">
         <ButtonExamples />
-        <Button disabled>Submit</Button>
+        <Button variant="cta" disabled>
+          CTA
+        </Button>
+        <Button variant="primary" disabled>
+          Primary
+        </Button>
+        <Button variant="secondary" disabled>
+          Secondary
+        </Button>
       </StackLayout>
       <StackLayout direction="row">
         <SegmentedButtonGroupDefault />

diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css
@@ -5,25 +5,25 @@
   --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt);
   --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
   --salt-actionable-cta-background: var(--salt-palette-accent-action);
-  --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); /* TBD */
-  --salt-actionable-cta-background-active: var(--salt-palette-accent-action-active);
-  --salt-actionable-cta-background-disabled: var(--salt-palette-accent-action-disabled);
+  --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak);
+  --salt-actionable-cta-background-active: var(--salt-palette-accent-strong);
+  --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled);
   /* 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-invert);
+  --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt);
   --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-strongest);
-  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-action-disabled);
+  --salt-actionable-primary-background: var(--salt-palette-neutral);
+  --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak);
+  --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active);
+  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weak-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-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-strongest);
-  --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled);
+  --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-actionable-secondary-background: var(--salt-palette-background-none);
+  --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak);
+  --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active);
+  --salt-actionable-secondary-background-disabled: var(--salt-palette-background-none);
 }
diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css
@@ -11,8 +11,7 @@
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-100);
   --salt-palette-accent-action: var(--salt-color-blue-500);
-  --salt-palette-accent-action-active: var(--salt-color-blue-800);
-  --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-action-active: var(--salt-color-blue-600);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"] {
@@ -28,6 +27,5 @@
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-900);
   --salt-palette-accent-action: var(--salt-color-blue-500);
-  --salt-palette-accent-action-active: var(--salt-color-blue-800);
-  --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-action-active: var(--salt-color-blue-600);
 }
diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css
@@ -8,7 +8,6 @@
   --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);
@@ -20,5 +19,4 @@
   --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
@@ -9,13 +9,13 @@
   --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-weak-disabled: var(--salt-color-gray-400-40a);
   --salt-palette-neutral-weaker: var(--salt-color-gray-300);
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
   --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-200);
   --salt-palette-neutral-action: var(--salt-color-gray-500);
-  --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-600);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-neutral: var(--salt-color-gray-500);
@@ -28,11 +28,11 @@
   --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-weak-disabled: var(--salt-color-gray-600-40a);
   --salt-palette-neutral-weaker: var(--salt-color-gray-700);
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
   --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-800);
   --salt-palette-neutral-action: var(--salt-color-gray-500);
-  --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-600);
 }