From 61900c03edf8277e9f36345d09f5597d3c828fe3 Mon Sep 17 00:00:00 2001 From: Matthew Ferry Date: Wed, 1 Nov 2023 20:57:37 +0000 Subject: [PATCH] feat: blue remap from 9 to 12 steps --- packages/avatar/src/styles/Avatar.module.css | 2 +- .../button/src/styles/ButtonVariables.css | 4 +- .../counter/src/styles/Counter.module.css | 2 +- .../data-table/stories/DataTable.stories.tsx | 4 +- .../src/styles/Navigation.module.css | 2 +- packages/slider/src/styles/Slider.module.css | 4 +- packages/tokens/src/color-aliases.yaml | 44 +++++++++---------- packages/tokens/src/color-primitives.yaml | 39 ++++++++-------- 8 files changed, 49 insertions(+), 52 deletions(-) diff --git a/packages/avatar/src/styles/Avatar.module.css b/packages/avatar/src/styles/Avatar.module.css index c604be582..d944e5d88 100644 --- a/packages/avatar/src/styles/Avatar.module.css +++ b/packages/avatar/src/styles/Avatar.module.css @@ -23,7 +23,7 @@ } .Avatar--color1 { - background-color: var(--lp-color-blue-500); + background-color: var(--lp-color-blue-600); } .Avatar--color2 { diff --git a/packages/button/src/styles/ButtonVariables.css b/packages/button/src/styles/ButtonVariables.css index f6fca0441..5fa23aa67 100644 --- a/packages/button/src/styles/ButtonVariables.css +++ b/packages/button/src/styles/ButtonVariables.css @@ -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/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/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/slider/src/styles/Slider.module.css b/packages/slider/src/styles/Slider.module.css index 27ffabf65..42347e23a 100644 --- a/packages/slider/src/styles/Slider.module.css +++ b/packages/slider/src/styles/Slider.module.css @@ -65,7 +65,7 @@ .Slider input[type='range']:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--lp-color-white-950), - 0 0 0 2px var(--lp-color-blue-500), + 0 0 0 2px var(--lp-color-blue-600), 0 0 0 5px rgb(0 126 255 / 0.1); } @@ -89,7 +89,7 @@ .Slider input[type='range']:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--lp-color-white-950), - 0 0 0 2px var(--lp-color-blue-500), + 0 0 0 2px var(--lp-color-blue-600), 0 0 0 5px rgb(0 126 255 / 0.1); } diff --git a/packages/tokens/src/color-aliases.yaml b/packages/tokens/src/color-aliases.yaml index 6dc0398fa..4fb14edbe 100644 --- a/packages/tokens/src/color-aliases.yaml +++ b/packages/tokens/src/color-aliases.yaml @@ -7,7 +7,7 @@ color: value: '{ color.system.red.100.value }' dark: '#E83B3B26' info: - value: '{ color.blue.100.value }' + value: '{ color.blue.50.value }' dark: '#405BFF26' success: value: '{ color.system.green.100.value }' @@ -18,13 +18,13 @@ color: interactive: 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 }' secondary: base: value: transparent @@ -104,7 +104,7 @@ color: 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: @@ -159,8 +159,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 }' @@ -172,10 +172,10 @@ color: value: '{ color.gray.300.value }' dark: '{ color.gray.500.value }' active: - value: '{ color.blue.500.value }' + value: '{ color.blue.600.value }' dark: '{ color.cyan.400.value }' focus: - value: '{ color.blue.500.value }' + value: '{ color.blue.600.value }' dark: '{ color.cyan.400.value }' error: value: '{ color.system.red.600.value }' @@ -185,17 +185,17 @@ color: dark: '{ color.gray.700.value }' interactive: focus: - value: '{ color.blue.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.600.value }' @@ -269,8 +269,8 @@ color: value: '{ color.system.red.500.value }' dark: '{ color.system.red.500.value }' info: - value: '{ color.blue.500.value }' - dark: '{ color.blue.400.value }' + value: '{ color.blue.600.value }' + dark: '{ color.blue.500.value }' success: value: '{ color.system.green.700.value }' dark: '{ color.system.green.500.value }' @@ -316,7 +316,7 @@ color: shadow: interactive: focus: - value: '{ color.blue.500.value }' + value: '{ color.blue.600.value }' dark: '{ color.cyan.400.value }' primary: value: '{ color.white.950.value }' @@ -341,13 +341,13 @@ color: 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.500.value }' interactive: # links base: - value: '{ color.blue.600.value }' - dark: '{ color.blue.400.value }' + value: '{ color.blue.700.value }' + dark: '{ color.blue.500.value }' active: value: '{ color.purple.700.value }' dark: '{ color.purple.500.value }' diff --git a/packages/tokens/src/color-primitives.yaml b/packages/tokens/src/color-primitives.yaml index 4116df5fc..25822cb50 100644 --- a/packages/tokens/src/color-primitives.yaml +++ b/packages/tokens/src/color-primitives.yaml @@ -1,32 +1,29 @@ 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' @@ -79,7 +76,7 @@ color: value: '#410E1A' purple: 0: - value: '#FAF6FD' + value: '#FBF5FF' 50: value: '#F5EAFC' 100: @@ -291,10 +288,10 @@ color: yellow-cyan: 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.400.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.600.value } -17.05%, { color.cyan.400.value } 147.06%)' purple-blue: - value: 'linear-gradient(131.04deg, { color.purple.600.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.600.value } -17.19%, { color.pink.500.value } 148.9%)'