feat: Update color steps from 9 to 12 (#1068)

* feat: add 3 new grays and black and white to 12 * feat: purple remap from 9 to 12 steps * fix: update flair base dark color * feat: pink remap from 9 to 12 steps * feat: cyan remap from 9 to 12 steps * feat: yellow remap from 9 to 12 steps * fix: adjust yellow 300 chroma * feat: blue remap from 9 to 12 steps * fix: reorder white and black tokens in ascending order * feat: red map 9 to 12 steps * feat: green map 9 to 12 steps * feat: yellow map 9 to 12 steps * fix: a11y tertiary text in dark * fix: a11y button hover state * fix: update chip tokens for a11y * fix: update fills for info and error in dark * chore: add changeset
launchdarkly · Nov 6, 2023 · 941d2d6 · 941d2d6
1 parent 260d052
commit 941d2d6
Show file tree

Hide file tree

Showing 21 changed files with 334 additions and 305 deletions.
diff --git a/.changeset/quiet-emus-teach.md b/.changeset/quiet-emus-teach.md
@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/tokens': patch
+'@launchpad-ui/core': patch
+---
+
+Feat: remap colors from 9 to 12 steps
diff --git a/packages/alert/src/styles/Alert.module.css b/packages/alert/src/styles/Alert.module.css
@@ -1,12 +1,12 @@
 :root {
-  --lp-component-alert-notification-flair-strong-color-text: var(--lp-color-white-0);
-  --lp-component-alert-notification-flair-strong-color-fill: var(--lp-color-white-0);
-  --lp-component-alert-notification-flair-strong-button-color-bg: var(--lp-color-white-0);
+  --lp-component-alert-notification-flair-strong-color-text: var(--lp-color-white-950);
+  --lp-component-alert-notification-flair-strong-color-fill: var(--lp-color-white-950);
+  --lp-component-alert-notification-flair-strong-button-color-bg: var(--lp-color-white-950);
   --lp-component-alert-notification-flair-strong-button-color-bg-hover: var(--lp-color-gray-100);
   --lp-component-alert-notification-flair-strong-button-color-bg-focus: var(--lp-color-gray-200);
   --lp-component-alert-notification-flair-strong-button-color-bg-active: var(--lp-color-gray-200);
   --lp-component-alert-notification-flair-strong-button-button-color-border: var(
-    --lp-color-white-0
+    --lp-color-white-950
   );
   --lp-component-alert-notification-flair-strong-button-color-text: var(--lp-color-black-300);
   --lp-component-alert-notification-flair-strong-button-color-text-hover: var(--lp-color-black-300);

diff --git a/packages/avatar/src/styles/Avatar.module.css b/packages/avatar/src/styles/Avatar.module.css
@@ -15,27 +15,27 @@
 
 .Avatar--initials {
   border: none;
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
 }
 
 .Avatar--color0 {
-  background-color: var(--lp-color-yellow-800);
+  background-color: var(--lp-color-yellow-900);
 }
 
 .Avatar--color1 {
-  background-color: var(--lp-color-blue-500);
+  background-color: var(--lp-color-blue-600);
 }
 
 .Avatar--color2 {
   background-color: var(--lp-color-pink-500);
 }
 
 .Avatar--color3 {
-  background-color: var(--lp-color-cyan-600);
+  background-color: var(--lp-color-cyan-500);
 }
 
 .Avatar--color4 {
-  background-color: var(--lp-color-purple-500);
+  background-color: var(--lp-color-purple-600);
 }
 
 .Avatar-initials-content {

diff --git a/packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.module.css
@@ -225,9 +225,9 @@
 .Button.Button--close:active {
   background-color: hsl(0 0% 12.9% / 0.7);
   box-shadow:
-    0 0 0 1px var(--lp-color-black-200),
+    0 0 0 1px var(--lp-color-gray-950),
     0 0 0 4px hsl(0 0% 12.9% / 0.1);
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
 }
 
 .Button.Button--close[disabled],

diff --git a/packages/button/src/styles/ButtonVariables.css b/packages/button/src/styles/ButtonVariables.css
@@ -26,15 +26,15 @@
   /* Remaining Legacy Tokens */
   --Button-border-default: 1px solid transparent;
   --Button-box-shadow-default-active: none;
-  --Button-color-boxShadow-1-default-active: var(--lp-color-white-0);
+  --Button-color-boxShadow-1-default-active: var(--lp-color-white-950);
   --Button-color-boxShadow-2-default-active: hsl(231.5 100% 62.5% / 0.1);
   --Button-color-boxShadow-1-default-withIcon-focus: var(--lp-color-shadow-interactive-focus);
   --Button-color-boxShadow-2-default-withIcon-focus: hsl(231.5 100% 62.5% / 0.1);
   --Button-box-shadow-withIcon-focus: 0 0 0 1px
       var(--Button-color-boxShadow-1-default-withIcon-focus),
     0 0 0 4px var(--Button-color-boxShadow-2-default-withIcon-focus);
-  --Button-color-text-destructive-focus: var(--lp-color-white-0);
-  --Button-color-background-disabled-withIcon: var(--lp-color-white-0);
+  --Button-color-text-destructive-focus: var(--lp-color-white-950);
+  --Button-color-background-disabled-withIcon: var(--lp-color-white-950);
   --Button-color-border-disabled-withIcon: transparent;
 
   /* End Remaining Legacy Tokens */
@@ -172,8 +172,8 @@
   --Button-icon-color-fill-disabled-active: var(--lp-color-fill-interactive-disabled);
 
   /* SEARCH BAR CLEAR BUTTON ICON */
-  --Button-icon-clear-color-fill: var(--lp-color-blue-600);
-  --Button-icon-clear-color-text: var(--lp-color-blue-600);
+  --Button-icon-clear-color-fill: var(--lp-color-blue-700);
+  --Button-icon-clear-color-text: var(--lp-color-blue-700);
 
   /* ------- PRIMARY FLAIR ------- */
   --Button-color-border-primary-flair: var(--lp-color-border-interactive-primary-flair-base);

diff --git a/packages/chip/src/styles/Chip.module.css b/packages/chip/src/styles/Chip.module.css
@@ -8,7 +8,7 @@
   text-overflow: ellipsis;
   max-width: 100%;
   color: var(--lp-color-text-ui-secondary);
-  background-color: var(--lp-color-bg-ui-secondary);
+  background-color: var(--lp-color-bg-ui-quaternary);
   transition: all 0.1s ease-in-out;
 }
 

diff --git a/packages/clipboard/src/styles/CopyCodeButton.module.css b/packages/clipboard/src/styles/CopyCodeButton.module.css
@@ -23,7 +23,7 @@
     border: 1px solid transparent;
 
     svg {
-      fill: var(--lp-color-border-interactive-secondary-base);
+      fill: var(--lp-color-fill-ui-secondary);
     }
   }
 

diff --git a/packages/counter/src/styles/Counter.module.css b/packages/counter/src/styles/Counter.module.css
@@ -6,7 +6,7 @@
   padding: 2px 8px;
   border-radius: 0.625rem;
   color: var(--lp-color-text-ui-secondary);
-  border: 1px solid var(--lp-color-blue-500);
+  border: 1px solid var(--lp-color-blue-600);
   min-width: 1.25rem;
   vertical-align: middle;
 }

diff --git a/packages/data-table/stories/DataTable.stories.tsx b/packages/data-table/stories/DataTable.stories.tsx
@@ -45,7 +45,7 @@ const ROWS = [
     description: 'An element used to display and allow inline editing of a form element value.',
   },
   {
-    name: '--lp-color-blue-100',
+    name: '--lp-color-blue-50',
     type: 'Token',
     status: 'beta',
     key: 3,
@@ -98,7 +98,7 @@ export const Example: Story = {
             <Cell>Alpha</Cell>
           </Row>
           <Row>
-            <Cell>--lp-color-blue-100</Cell>
+            <Cell>--lp-color-blue-50</Cell>
             <Cell>Token</Cell>
             <Cell>Beta</Cell>
           </Row>

diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css
@@ -3,12 +3,12 @@
 :root,
 [data-theme='default'] {
   --lp-component-modal-color-bg-overlay: rgb(40 40 40 / 0.5);
-  --lp-component-modal-color-bg-content: var(--lp-color-white-0);
+  --lp-component-modal-color-bg-content: var(--lp-color-white-950);
 }
 
 [data-theme='dark'] {
   --lp-component-modal-color-bg-overlay: rgb(25 25 25 / 0.75);
-  --lp-component-modal-color-bg-content: var(--lp-color-black-200);
+  --lp-component-modal-color-bg-content: var(--lp-color-gray-950);
 }
 
 :global(.has-overlay) {

diff --git a/packages/navigation/src/styles/Navigation.module.css b/packages/navigation/src/styles/Navigation.module.css
@@ -137,7 +137,7 @@
 }
 
 .NavItem:focus .NavItem-name {
-  box-shadow: 0 0 0 0.125rem var(--lp-color-blue-500);
+  box-shadow: 0 0 0 0.125rem var(--lp-color-blue-600);
   border-radius: 0.375rem;
 }
 

diff --git a/packages/progress-bubbles/src/styles/ProgressBubbles.module.css b/packages/progress-bubbles/src/styles/ProgressBubbles.module.css
@@ -106,13 +106,13 @@ div.ProgressBubbles-icon--current {
 }
 
 .ProgressBubbles-icon svg {
-  fill: var(--lp-color-white-0);
+  fill: var(--lp-color-white-950);
   height: 1rem;
   width: 1rem;
 }
 
 .ProgressBubbles-icon--pending svg {
-  fill: var(--lp-color-white-0);
+  fill: var(--lp-color-white-950);
 }
 
 div.ProgressBubbles-icon--current svg {
@@ -124,7 +124,7 @@ div.ProgressBubbles-icon--pending {
 }
 
 div.ProgressBubbles-icon--warning {
-  background-color: var(--lp-color-white-0);
+  background-color: var(--lp-color-white-950);
   border: none;
 }
 

diff --git a/packages/progress/src/styles/Progress.module.css b/packages/progress/src/styles/Progress.module.css
@@ -20,7 +20,7 @@
 
 .Progress-track {
   fill: none;
-  stroke: var(--lp-color-white-100);
+  stroke: var(--lp-color-gray-50);
 }
 
 .Progress-head {

diff --git a/packages/slider/src/styles/Slider.module.css b/packages/slider/src/styles/Slider.module.css
@@ -54,7 +54,7 @@
   background-image: linear-gradient(#fafafa, #f5f5f5);
   border-radius: var(--lp-border-radius-regular);
   border: solid 1px var(--lp-color-border-ui-primary);
-  box-shadow: 0 0 0 1px var(--lp-color-white-0);
+  box-shadow: 0 0 0 1px var(--lp-color-white-950);
   box-sizing: border-box;
 }
 
@@ -64,8 +64,8 @@
 
 .Slider input[type='range']:focus::-webkit-slider-thumb {
   box-shadow:
-    0 0 0 1px var(--lp-color-white-0),
-    0 0 0 2px var(--lp-color-blue-500),
+    0 0 0 1px var(--lp-color-white-950),
+    0 0 0 2px var(--lp-color-blue-600),
     0 0 0 5px rgb(0 126 255 / 0.1);
 }
 
@@ -78,7 +78,7 @@
   background-image: linear-gradient(#fafafa, #f5f5f5);
   border-radius: var(--lp-border-radius-regular);
   border: solid 1px var(--lp-color-border-ui-primary);
-  box-shadow: 0 0 0 1px var(--lp-color-white-0);
+  box-shadow: 0 0 0 1px var(--lp-color-white-950);
   box-sizing: border-box;
 }
 
@@ -88,8 +88,8 @@
 
 .Slider input[type='range']:focus::-moz-range-thumb {
   box-shadow:
-    0 0 0 1px var(--lp-color-white-0),
-    0 0 0 2px var(--lp-color-blue-500),
+    0 0 0 1px var(--lp-color-white-950),
+    0 0 0 2px var(--lp-color-blue-600),
     0 0 0 5px rgb(0 126 255 / 0.1);
 }
 

diff --git a/packages/snackbar/src/styles/Snackbar.module.css b/packages/snackbar/src/styles/Snackbar.module.css
@@ -1,6 +1,6 @@
 .Snackbar {
   background-color: var(--lp-color-bg-feedback-primary);
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
   padding: var(--lp-spacing-500);
   display: inline-flex;
   gap: 0.875rem;
@@ -20,7 +20,7 @@
 }
 
 .Snackbar--info .Snackbar-icon {
-  fill: var(--lp-color-cyan-500);
+  fill: var(--lp-color-cyan-400);
 }
 
 .Snackbar--warning .Snackbar-icon {
@@ -37,7 +37,7 @@
   font-size: 1rem;
   font-weight: var(--lp-font-weight-medium);
   line-height: 1.5;
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
 }
 
 .Snackbar-content {
@@ -52,7 +52,7 @@
 
   & a,
   & a:hover {
-    color: var(--lp-color-cyan-500);
+    color: var(--lp-color-cyan-400);
   }
 
   & .Snackbar-description {

diff --git a/packages/tag/src/styles/Tag.module.css b/packages/tag/src/styles/Tag.module.css
@@ -39,7 +39,7 @@ a.tag,
   }
 
   [data-theme='dark'] & {
-    color: var(--lp-color-cyan-500);
+    color: var(--lp-color-cyan-400);
     background-color: hsla(190.1 90.2% 60% / 0.2);
   }
 }

diff --git a/packages/toast/src/styles/Toast.module.css b/packages/toast/src/styles/Toast.module.css
@@ -1,6 +1,6 @@
 .Toast {
   background-color: var(--lp-color-bg-feedback-primary);
-  color: var(--lp-color-white-0);
+  color: var(--lp-color-white-950);
   padding: var(--lp-spacing-300) var(--lp-spacing-500);
   display: inline-flex;
   gap: var(--lp-spacing-300);
@@ -41,6 +41,6 @@
 
   & a,
   & a:hover {
-    color: var(--lp-color-cyan-500);
+    color: var(--lp-color-cyan-400);
   }
 }
diff --git a/packages/toggle/src/styles/Toggle.module.css b/packages/toggle/src/styles/Toggle.module.css
@@ -10,8 +10,8 @@
   --lp-component-toggle-color-background-on: var(--lp-color-system-green-700);
   --lp-component-toggle-color-text: var(--lp-color-text-ui-primary-base);
   --lp-component-toggle-color-text-disabled: var(--lp-color-gray-500);
-  --lp-component-toggle-color-text-disabled-on: var(--lp-color-white-0);
-  --lp-component-toggle-color-text-on: var(--lp-color-white-0);
+  --lp-component-toggle-color-text-disabled-on: var(--lp-color-white-950);
+  --lp-component-toggle-color-text-on: var(--lp-color-white-950);
   --lp-component-toggle-height: 1.5rem; /* 24px */
   --lp-component-toggle-transition-timing-function: ease-in-out;
   --lp-component-toggle-transition-duration: var(--lp-duration-100);
@@ -160,7 +160,7 @@
   left: 0;
   width: var(--lp-component-toggle-pin-size);
   height: var(--lp-component-toggle-pin-size);
-  background-color: var(--lp-color-white-0);
+  background-color: var(--lp-color-white-950);
   border-radius: 50%;
   box-shadow: var(--lp-component-toggle-pin-box-shadow);
   transform: var(--lp-component-toggle-pin-transform);
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ @@
         border: 1px solid transparent;
         svg {
-          fill: var(--lp-color-border-interactive-secondary-base);
+          fill: var(--lp-color-fill-ui-secondary);
         }
       }
@@ Expand Down @@