From 941d2d60c96f095e7043852f02bc6b5f157edb3b Mon Sep 17 00:00:00 2001 From: Matthew Ferry Date: Mon, 6 Nov 2023 12:23:46 -0700 Subject: [PATCH] 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 --- .changeset/quiet-emus-teach.md | 6 + packages/alert/src/styles/Alert.module.css | 8 +- packages/avatar/src/styles/Avatar.module.css | 10 +- packages/button/src/styles/Button.module.css | 4 +- .../button/src/styles/ButtonVariables.css | 10 +- packages/chip/src/styles/Chip.module.css | 2 +- .../src/styles/CopyCodeButton.module.css | 2 +- .../counter/src/styles/Counter.module.css | 2 +- .../data-table/stories/DataTable.stories.tsx | 4 +- packages/modal/src/styles/Modal.module.css | 4 +- .../src/styles/Navigation.module.css | 2 +- .../src/styles/ProgressBubbles.module.css | 6 +- .../progress/src/styles/Progress.module.css | 2 +- packages/slider/src/styles/Slider.module.css | 12 +- .../snackbar/src/styles/Snackbar.module.css | 8 +- packages/tag/src/styles/Tag.module.css | 2 +- packages/toast/src/styles/Toast.module.css | 4 +- packages/toggle/src/styles/Toggle.module.css | 6 +- packages/tokens/src/color-aliases.yaml | 231 ++++++------- packages/tokens/src/color-primitives.yaml | 312 +++++++++--------- .../tooltip/src/styles/Tooltip.module.css | 2 +- 21 files changed, 334 insertions(+), 305 deletions(-) create mode 100644 .changeset/quiet-emus-teach.md diff --git a/.changeset/quiet-emus-teach.md b/.changeset/quiet-emus-teach.md new file mode 100644 index 000000000..2bf1c90b9 --- /dev/null +++ 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 index abe89779a..b03491fd1 100644 --- 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 index e9400d7f5..d944e5d88 100644 --- a/packages/avatar/src/styles/Avatar.module.css +++ b/packages/avatar/src/styles/Avatar.module.css @@ -15,15 +15,15 @@ .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 { @@ -31,11 +31,11 @@ } .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 index 2fd7db809..454e5b9a1 100644 --- 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 index 56ae455ad..5fa23aa67 100644 --- 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 index 63c0a4dcb..c83e742dc 100644 --- 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 index c589fa1c4..6dd7ce929 100644 --- 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 index df9ade733..fe7e8be33 100644 --- 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 index f7f71ea55..a800624ce 100644 --- 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 = { Alpha - --lp-color-blue-100 + --lp-color-blue-50 Token Beta diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css index d412d4660..30ce7abc7 100644 --- 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 index fa4438e3e..f79782a18 100644 --- 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 index 97bf6bce1..ee198576e 100644 --- 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 index 738f872e1..2c0bbc5be 100644 --- 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 index 458b2984e..42347e23a 100644 --- 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 index ef3797f13..9b61366be 100644 --- 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 index 7461aaced..1abaac74b 100644 --- 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 index 30afd8658..4013d31f3 100644 --- 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 index e94f28a98..23d49c511 100644 --- 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); diff --git a/packages/tokens/src/color-aliases.yaml b/packages/tokens/src/color-aliases.yaml index 7e990b41f..f11352363 100644 --- a/packages/tokens/src/color-aliases.yaml +++ b/packages/tokens/src/color-aliases.yaml @@ -4,27 +4,29 @@ color: primary: value: '{ color.gray.800.value }' error: - value: '{ color.system.red.100.value }' - dark: '#E83B3B26' + value: '{ color.system.red.50.value }' + dark: '{ color.system.red.900.value }' info: - value: '{ color.blue.100.value }' - dark: '#405BFF26' + value: '{ color.blue.50.value }' + dark: '{ color.blue.900.value }' success: value: '{ color.system.green.100.value }' - dark: '#00DA7B26' + dark: '{ color.system.green.900.value }' warning: value: '{ color.system.yellow.100.value }' - dark: '#EEC34026' + dark: '{ color.system.yellow.900.value }' interactive: primary: base: - value: '{ color.blue.500.value }' - active: value: '{ color.blue.600.value }' + dark: '{ color.blue.500.value}' + active: + value: '{ color.blue.700.value }' focus: - value: '{ color.blue.600.value }' + value: '{ color.blue.700.value }' hover: - value: '{ color.blue.400.value }' + value: '{ color.blue.500.value }' + dark: '{ color.blue.400.value}' secondary: base: value: transparent @@ -40,16 +42,16 @@ color: secondary-flair: base: value: '{ color.purple.100.value }' - dark: '#2d1140' # purple-900 isn't dark enough + dark: '{ color.purple.950.value }' active: - value: '{ color.purple.300.value }' - dark: '{ color.purple.900.value }' + value: '{ color.purple.400.value }' + dark: '{ color.purple.950.value }' focus: + value: '{ color.purple.400.value }' + dark: '{ color.purple.950.value }' + hover: value: '{ color.purple.300.value }' dark: '{ color.purple.900.value }' - hover: - value: '{ color.purple.200.value }' - dark: '{ color.purple.800.value }' tertiary: base: value: transparent @@ -66,14 +68,14 @@ color: base: value: transparent active: - value: '{ color.purple.200.value }' - dark: '{ color.purple.900.value }' + value: '{ color.purple.300.value }' + dark: '{ color.purple.950.value }' focus: - value: '{ color.purple.200.value }' - dark: '{ color.purple.900.value }' + value: '{ color.purple.300.value }' + dark: '{ color.purple.950.value }' hover: value: '{ color.purple.100.value }' - dark: '{ color.purple.800.value }' + dark: '{ color.purple.900.value }' success: base: value: '{ color.system.green.100.value }' @@ -89,8 +91,8 @@ color: dark: '#00DA7B4D' # color.system.green.500.value at opacity 30% destructive: base: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' active: value: '{ color.system.red.200.value }' dark: '#E5242426' @@ -98,48 +100,51 @@ color: value: '{ color.system.red.200.value }' dark: '#E5242426' hover: - value: '{ color.system.red.100.value }' + value: '{ color.system.red.50.value }' dark: '#E5242433' disabled: value: '{ color.gray.100.value }' dark: '{ color.gray.800.value }' link: - value: '{ color.blue.100.value }' + value: '{ color.blue.50.value }' dark: '#3DD6F533' ui: primary: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' primary-flair: - value: '{ color.purple.200.value }' - dark: '{ color.purple.900.value }' + value: '{ color.purple.300.value }' + dark: '{ color.purple.950.value }' secondary: - value: '{ color.white.100.value }' - dark: '{ color.black.100.value }' + value: '{ color.gray.0.value }' + dark: '{ color.gray.900.value }' tertiary: + value: '{ color.gray.50.value }' + dark: '{ color.black.900.value }' + quaternary: value: '{ color.gray.100.value }' - dark: '{ color.black.400.value }' + dark: '{ color.gray.800.value }' overlay: primary: - value: '{ color.white.0.value }' - dark: '{ color.black.100.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.900.value }' secondary: - value: '{ color.black.300.value }' - dark: '{ color.black.100.value }' + value: '{ color.gray.950.value }' + dark: '{ color.gray.900.value }' field: base: - value: '{ color.white.0.value }' + value: '{ color.white.950.value }' dark: transparent disabled: value: '{ color.gray.100.value }' - dark: '{ color.black.100.value }' + dark: '{ color.gray.900.value }' aside: value: '{ color.gray.100.value }' dark: '{ color.gray.800.value }' product: beta: value: '{ color.purple.100.value }' - dark: '#A34FDE26' + dark: '{ color.purple.900.value }' federal: value: '{ color.yellow.500.value }' dark: '#E8FF1F26' @@ -156,8 +161,8 @@ color: value: '{ color.system.red.500.value }' dark: '{ color.system.red.500.value }' info: - value: '{ color.blue.500.value }' - dark: '{ color.blue.500.value }' + value: '{ color.blue.600.value }' + dark: '{ color.blue.600.value }' success: value: '{ color.system.green.600.value }' dark: '{ color.system.green.500.value }' @@ -169,11 +174,11 @@ color: value: '{ color.gray.300.value }' dark: '{ color.gray.500.value }' active: - value: '{ color.blue.500.value }' - dark: '{ color.cyan.500.value }' + value: '{ color.blue.600.value }' + dark: '{ color.cyan.400.value }' focus: - value: '{ color.blue.500.value }' - dark: '{ color.cyan.500.value }' + value: '{ color.blue.600.value }' + dark: '{ color.cyan.400.value }' error: value: '{ color.system.red.600.value }' dark: '{ color.system.red.600.value }' @@ -182,30 +187,30 @@ color: dark: '{ color.gray.700.value }' interactive: focus: - value: '{ color.blue.500.value }' - dark: '{ color.cyan.500.value }' + value: '{ color.blue.600.value }' + dark: '{ color.cyan.400.value }' primary: base: - value: '{ color.blue.500.value }' - active: value: '{ color.blue.600.value }' + active: + value: '{ color.blue.700.value }' focus: - value: '{ color.blue.600.value }' + value: '{ color.blue.700.value }' hover: - value: '{ color.blue.400.value }' + value: '{ color.blue.500.value }' primary-flair: base: - value: '{ color.purple.500.value }' - dark: '{ color.purple.400.value }' + value: '{ color.purple.600.value }' + dark: '{ color.purple.500.value }' active: - value: '{ color.purple.700.value }' - dark: '{ color.purple.700.value }' + value: '{ color.purple.800.value }' + dark: '{ color.purple.800.value }' focus: - value: '{ color.purple.700.value }' - dark: '{ color.purple.700.value }' + value: '{ color.purple.800.value }' + dark: '{ color.purple.800.value }' hover: - value: '{ color.purple.600.value }' - dark: '{ color.purple.500.value }' + value: '{ color.purple.700.value }' + dark: '{ color.purple.600.value }' secondary: base: value: '{ color.gray.300.value }' @@ -219,17 +224,17 @@ color: value: '{ color.gray.600.value }' secondary-flair: base: - value: '{ color.purple.500.value }' - dark: '{ color.purple.500.value }' - active: - value: '{ color.purple.700.value }' + value: '{ color.purple.600.value }' dark: '{ color.purple.600.value }' + active: + value: '{ color.purple.800.value }' + dark: '{ color.purple.700.value }' focus: - value: '{ color.purple.700.value }' - dark: '{ color.purple.600.value }' + value: '{ color.purple.800.value }' + dark: '{ color.purple.700.value }' hover: - value: '{ color.purple.600.value }' - dark: '{ color.purple.400.value }' + value: '{ color.purple.700.value }' + dark: '{ color.purple.500.value }' success: base: value: '{ color.system.green.400.value }' @@ -254,8 +259,8 @@ color: value: '{ color.gray.200.value }' dark: '{ color.gray.700.value }' primary-flair: - value: '{ color.purple.300.value }' - dark: '{ color.purple.600.value }' + value: '{ color.purple.400.value }' + dark: '{ color.purple.700.value }' secondary: value: '{ color.gray.100.value }' dark: '{ color.gray.800.value }' @@ -264,9 +269,9 @@ color: feedback: error: value: '{ color.system.red.500.value }' - dark: '{ color.system.red.500.value }' + dark: '{ color.system.red.400.value }' info: - value: '{ color.blue.500.value }' + value: '{ color.blue.600.value }' dark: '{ color.blue.400.value }' success: value: '{ color.system.green.700.value }' @@ -276,7 +281,7 @@ color: dark: '{ color.system.yellow.500.value }' interactive: primary: - value: '{ color.white.0.value }' + value: '{ color.white.950.value }' success: base: value: '{ color.system.green.900.value }' @@ -292,17 +297,19 @@ color: dark: '{ color.system.green.300.value }' destructive: value: '{ color.system.red.700.value }' - dark: '{ color.white.0.value }' + dark: '{ color.white.950.value }' disabled: value: '{ color.gray.700.value }' dark: '{ color.gray.500.value }' ui: primary: value: currentcolor - dark: '{ color.white.0.value }' + dark: '{ color.white.950.value }' + secondary: + value: '{ color.gray.500.value }' primary-flair: - value: '{ color.purple.500.value }' - dark: '{ color.purple.300.value }' + value: '{ color.purple.600.value }' + dark: '{ color.purple.400.value }' field: base: value: '{ color.gray.600.value }' @@ -311,51 +318,51 @@ color: shadow: interactive: focus: - value: '{ color.blue.500.value }' - dark: '{ color.cyan.500.value }' + value: '{ color.blue.600.value }' + dark: '{ color.cyan.400.value }' primary: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' ui: primary: value: '{ color.gray.500.value }' - dark: '{ color.black.0.value }' + dark: '{ color.black.950.value }' text: feedback: base: - value: '{ color.black.300.value }' - dark: '{ color.white.0.value }' + value: '{ color.gray.950.value }' + dark: '{ color.white.950.value }' error: value: '{ color.system.red.600.value }' dark: '{ color.system.red.400.value }' success: value: '{ color.system.green.800.value }' - dark: '{ color.system.green.500.value }' + dark: '{ color.system.green.400.value }' warning: value: '{ color.system.yellow.800.value }' dark: '{ color.system.yellow.500.value }' info: - value: '{ color.blue.700.value }' - dark: '{ color.blue.400.value }' + value: '{ color.blue.800.value }' + dark: '{ color.blue.300.value }' interactive: # links base: - value: '{ color.blue.600.value }' + value: '{ color.blue.700.value }' dark: '{ color.blue.400.value }' active: - value: '{ color.purple.600.value }' + value: '{ color.purple.700.value }' dark: '{ color.purple.400.value }' primary: base: - value: '{ color.white.0.value }' + value: '{ color.white.950.value }' active: - value: '{ color.white.0.value }' + value: '{ color.white.950.value }' focus: - value: '{ color.white.0.value }' + value: '{ color.white.950.value }' hover: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' secondary: value: '{ color.gray.600.value }' dark: '{ color.gray.400.value }' @@ -374,44 +381,44 @@ color: dark: '{ color.system.green.300.value }' destructive: value: '{ color.system.red.700.value }' - dark: '{ color.white.0.value }' + dark: '{ color.white.950.value }' disabled: value: '{ color.gray.500.value }' dark: '{ color.gray.600.value }' flair: focus: - value: '{ color.purple.800.value }' - dark: '{ color.purple.300.value }' + value: '{ color.purple.900.value }' + dark: '{ color.purple.400.value }' hover: - value: '{ color.purple.700.value }' - dark: '{ color.purple.300.value }' + value: '{ color.purple.800.value }' + dark: '{ color.purple.400.value }' base: - value: '{ color.purple.600.value }' + value: '{ color.purple.700.value }' dark: '{ color.purple.400.value }' active: - value: '{ color.purple.800.value }' - dark: '{ color.purple.300.value }' + value: '{ color.purple.900.value }' + dark: '{ color.purple.400.value }' ui: primary: base: - value: '{ color.black.300.value }' - dark: '{ color.white.0.value }' + value: '{ color.gray.950.value }' + dark: '{ color.white.950.value }' inverted: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' secondary: value: '{ color.gray.800.value }' dark: '{ color.gray.200.value }' tertiary: value: '{ color.gray.600.value }' - dark: '{ color.gray.500.value }' + dark: '{ color.gray.400.value }' overlay: primary: value: '{ color.gray.800.value }' dark: '{ color.gray.100.value }' secondary: - value: '{ color.white.0.value }' - dark: '{ color.black.300.value }' + value: '{ color.white.950.value }' + dark: '{ color.gray.950.value }' field: base: value: '{ color.gray.600.value }' @@ -424,17 +431,17 @@ color: dark: '{ color.gray.400.value }' product: beta: - value: '{ color.purple.500.value }' + value: '{ color.purple.600.value }' dark: '{ color.purple.400.value }' code: value: '{ color.pink.600.value }' dark: '{ color.pink.300.value }' federal: - value: '{ color.black.300.value }' + value: '{ color.gray.950.value }' dark: '{ color.yellow.500.value }' flair: - value: '{ color.purple.600.value }' - dark: '{ color.purple.400.value }' + value: '{ color.purple.700.value }' + dark: '{ color.purple.500.value }' toggle-chip-on: value: '{ color.system.green.700.value }' dark: '{ color.system.green.500.value }' diff --git a/packages/tokens/src/color-primitives.yaml b/packages/tokens/src/color-primitives.yaml index 48325e29e..fcc39a7f3 100644 --- a/packages/tokens/src/color-primitives.yaml +++ b/packages/tokens/src/color-primitives.yaml @@ -1,272 +1,288 @@ color: blue: - 100: + 0: + value: '#F5F7FF' + 50: value: '#E5EBFF' - dark: '#F5F7FF' + 100: + value: '#D6DDFF' 200: - value: '#B3BDFF' - dark: '#E2E6FF' + value: '#C1CAFF' 300: - value: '#7587FF' - dark: '#B3BDFF' + value: '#98AAFF' 400: - value: '#4D65FF' - dark: '#7084FF' + value: '#5F7BFF' 500: - value: '#2443FF' - dark: '#4761FF' + value: '#3C5EFB' 600: - value: '#2840D2' - dark: '#364DD9' + value: '#2443FF' 700: - value: '#27379B' - dark: '#3044BF' + value: '#2936B5' 800: - value: '#1C276E' - dark: '#2A3BA6' + value: '#24318A' 900: - value: '#101741' - dark: '#23328C' + value: '#1D2865' + 950: + value: '#111946' cyan: + 0: + value: '#e5fbff' + 50: + value: '#c9f4fd' 100: - value: '#E7FAFE' - dark: '#F5FDFE' + value: '#a6efff' 200: - value: '#B6F0FB' - dark: '#E2F9FD' + value: '#7ae9fe' 300: - value: '#81E4F8' - dark: '#B1EFFB' + value: '#35defa' 400: - value: '#47D8F5' - dark: '#6DE0F7' + value: '#00cded' 500: - value: '#1FD0F4' - dark: '#3DD6F5' + value: '#00b8d7' 600: - value: '#0BBBE0' - dark: '#34B6D0' + value: '#00a0bc' 700: - value: '#0993AE' - dark: '#2EA0B8' + value: '#007d95' 800: - value: '#076B7E' - dark: '#288B9F' + value: '#00677b' 900: - value: '#04424E' - dark: '#227687' + value: '#004f5e' + 950: + value: '#003742' pink: - 100: + 0: + value: '#FFF5F8' + 50: value: '#FFE5EC' - dark: '#FFF5F8' + 100: + value: '#FFD0DC' 200: value: '#FFADC2' - dark: '#FFE1E9' 300: value: '#FF7599' - dark: '#FFAFC4' 400: value: '#FF3D6F' - dark: '#FF6A90' 500: value: '#FF1451' - dark: '#FF386B' 600: - value: '#EB003C' - dark: '#D9305B' + value: '#DC0A40' 700: value: '#B8002F' - dark: '#BF2A50' 800: value: '#850022' - dark: '#A62446' 900: value: '#520015' - dark: '#8C1F3B' + 950: + value: '#410E1A' purple: + 0: + value: '#FBF5FF' + 50: + value: '#F5EAFC' 100: - value: '#EFE1FA' - dark: '#FAF6FD' + value: '#EEDBFB' 200: - value: '#D4ADF0' - dark: '#F1E5FA' + value: '#E2C9F4' 300: - value: '#B97AE6' - dark: '#DAB9F2' + value: '#D4ADF0' 400: - value: '#A14BDD' - dark: '#BA7BE6' + value: '#BF80ED' 500: - value: '#9331D8' - dark: '#A34FDE' + value: '#A14BDD' 600: - value: '#8325C6' - dark: '#8B43BD' + value: '#912fd6' 700: - value: '#671D9B' - dark: '#7A3BA7' + value: '#8325C6' 800: - value: '#4B1570' - dark: '#6A3390' + value: '#671D9B' 900: + value: '#4B1570' + 950: value: '#2E0C45' - dark: '#5A2B7A' yellow: + 0: + value: '#FCFEF0' + 50: + value: '#F9FDD3' 100: - value: '#FCFFE5' - dark: '#FEFFF5' + value: '#F7FFAF' 200: - value: '#F7FFB2' - dark: '#FCFFE1' + value: '#F3FC88' 300: - value: '#F2FF80' - dark: '#F7FFAF' + value: '#E2F160' 400: - value: '#EEFF4D' - dark: '#F3FF88' + value: '#D8EB33' 500: - value: '#E8FF1F' - dark: '#EBFF38' + value: '#E6FD1A' 600: - value: '#D3EB00' - dark: '#C8D930' + value: '#BACA00' 700: - value: '#8B9721' - dark: '#B0BF2A' + value: '#94A300' 800: - value: '#646D18' - dark: '#99A624' + value: '#7A8202' 900: - value: '#3D430F' - dark: '#818C1F' - white: - 100: - value: '#F1F2F4' - 0: - value: '#FFFFFF' + value: '#62680F' + 950: + value: '#393D06' gray: + 0: + value: '#FCFCFC' + 50: + value: '#F7F7F8' 100: - value: '#E3E4E8' + value: '#E8E9EE' 200: - value: '#D5D6DD' + value: '#D6D8DC' 300: - value: '#B7B9C5' + value: '#BCBDC3' 400: - value: '#9D9FAF' + value: '#A1A3AB' 500: - value: '#8C8FA1' + value: '#868893' 600: - value: '#686B7F' + value: '#6C6E7A' 700: value: '#515362' 800: - value: '#3B3C48' + value: '#373841' 900: - value: '#2E2F38' - black: + value: '#26272E' + 950: + value: '#191919' + white: + 0: + value: '#FFFFFF0d' + 50: + value: '#FFFFFF1a' 100: - value: '#282828' + value: '#FFFFFF26' 200: - value: '#212121' + value: '#FFFFFF33' 300: - value: '#191919' + value: '#FFFFFF4d' 400: - value: '#121212' + value: '#FFFFFF66' + 500: + value: '#FFFFFF80' + 600: + value: '#FFFFFF99' + 700: + value: '#FFFFFFb3' + 800: + value: '#FFFFFFcc' + 900: + value: '#FFFFFFe6' + 950: + value: '#FFFFFF' + black: 0: + value: '#0000000d' + 50: + value: '#0000001a' + 100: + value: '#00000026' + 200: + value: '#00000033' + 300: + value: '#0000004d' + 400: + value: '#00000066' + 500: + value: '#00000080' + 600: + value: '#00000099' + 700: + value: '#000000b3' + 800: + value: '#000000cc' + 900: + value: '#000000e6' + 950: value: '#000000' system: green: + 0: + value: '#EEFDF7' + 50: + value: '#DAFCEE' 100: - value: '#E5FFF4' - dark: '#F2FDF8' + value: '#C3FDE5' 200: value: '#94FFD0' - dark: '#D9F9EB' 300: value: '#42FFAD' - dark: '#99F0CA' 400: value: '#00F087' - dark: '#40E39C' 500: value: '#00CC73' - dark: '#00DA7B' 600: value: '#00A85F' - dark: '#00B969' 700: value: '#00854B' - dark: '#00A45C' 800: value: '#006B3C' - dark: '#008E50' 900: value: '#00522E' - dark: '#007844' + 950: + value: '#003A21' red: + 0: + value: '#FFF5F3' + 50: + value: '#FFE7E4' 100: - value: '#FCE8E8' - dark: '#FEF5F5' + value: '#FDD4CE' 200: - value: '#F7BBBB' - dark: '#FCE2E2' + value: '#F7BCB3' 300: - value: '#F18888' - dark: '#F6B1B1' + value: '#F48D7F' 400: - value: '#EB5656' - dark: '#EE6C6C' + value: '#F74C3A' 500: - value: '#E52424' - dark: '#E83B3B' + value: '#E52618' 600: - value: '#C41717' - dark: '#C73333' + value: '#C41A01' 700: - value: '#9B1212' - dark: '#AE2C2C' + value: '#9B1403' 800: - value: '#720D0D' - dark: '#972626' + value: '#720E06' 900: - value: '#490808' - dark: '#802020' + value: '#490904' + 950: + value: '#370403' yellow: + 0: + value: '#FFFCF2' + 50: + value: '#FEF6DB' 100: - value: '#FCF6E3' - dark: '#FEFCF5' + value: '#FEF1C6' 200: - value: '#F8E6AF' - dark: '#FCF6E2' + value: '#FDE59E' 300: - value: '#F3D67C' - dark: '#F8E7B3' + value: '#F5D672' 400: value: '#EEC649' - dark: '#F2D270' 500: value: '#EBBA23' - dark: '#EEC340' 600: value: '#D7A613' - dark: '#CAA636' 700: - value: '#A88210' - dark: '#A98A2D' + value: '#A37D03' 800: - value: '#795D0B' - dark: '#9B7F2A' + value: '#795605' 900: - value: '#4B3B07' - dark: '#836B23' + value: '#52370A' + 950: + value: '#3D2B10' gradient: yellow-cyan: - value: 'linear-gradient(126.73deg, { color.yellow.500.value } -38.66%, { color.cyan.500.value } 83.73%)' + value: 'linear-gradient(126.73deg, { color.yellow.500.value } -38.66%, { color.cyan.400.value } 83.73%)' cyan-blue: - value: 'linear-gradient(136.11deg, { color.cyan.500.value } 22.68%, { color.blue.500.value } 127.6%)' + value: 'linear-gradient(136.11deg, { color.cyan.400.value } 22.68%, { color.blue.600.value } 127.6%)' cyan-purple: - value: 'linear-gradient(41.76deg, { color.purple.500.value } -17.05%, { color.cyan.500.value } 147.06%)' + value: 'linear-gradient(41.76deg, { color.purple.600.value } -17.05%, { color.cyan.400.value } 147.06%)' purple-blue: - value: 'linear-gradient(131.04deg, { color.purple.500.value } -15.82%, { color.blue.500.value } 118.85%)' + value: 'linear-gradient(131.04deg, { color.purple.600.value } -15.82%, { color.blue.600.value } 118.85%)' pink-purple: - value: 'linear-gradient(39.47deg, { color.purple.500.value } -17.19%, { color.pink.500.value } 148.9%)' + value: 'linear-gradient(39.47deg, { color.purple.600.value } -17.19%, { color.pink.500.value } 148.9%)' diff --git a/packages/tooltip/src/styles/Tooltip.module.css b/packages/tooltip/src/styles/Tooltip.module.css index fcf6759a7..096912328 100644 --- a/packages/tooltip/src/styles/Tooltip.module.css +++ b/packages/tooltip/src/styles/Tooltip.module.css @@ -25,7 +25,7 @@ [class^='_Popover-content_'].Tooltip-popover-content kbd { color: var(--lp-color-gray-100); - background-color: var(--lp-color-black-100); + background-color: var(--lp-color-gray-900); border: 0.0625rem solid var(--lp-color-gray-700); box-shadow: inset 0 -0.0625rem 0 var(--lp-color-gray-700); }