Skip to content

Commit

Permalink
feat: blue remap from 9 to 12 steps
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthewferry
matthewferry authored Nov 1, 2023
1 parent 1ddda5a commit 61900c0
Show file tree
Hide file tree
Showing 8 changed files with 49 additions and 52 deletions.
2 changes: 1 addition & 1 deletion packages/avatar/src/styles/Avatar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.Avatar--color1 {
background-color: var(--lp-color-blue-500);
background-color: var(--lp-color-blue-600);
}

.Avatar--color2 {
Expand Down
4 changes: 2 additions & 2 deletions packages/button/src/styles/ButtonVariables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/counter/src/styles/Counter.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/data-table/stories/DataTable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/navigation/src/styles/Navigation.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/slider/src/styles/Slider.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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);
}

Expand Down
44 changes: 22 additions & 22 deletions packages/tokens/src/color-aliases.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }'
Expand All @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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 }'
Expand All @@ -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 }'
Expand All @@ -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 }'
Expand Down Expand Up @@ -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 }'
Expand Down Expand Up @@ -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 }'
Expand All @@ -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 }'
Expand Down
39 changes: 18 additions & 21 deletions packages/tokens/src/color-primitives.yaml
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -79,7 +76,7 @@ color:
value: '#410E1A'
purple:
0:
value: '#FAF6FD'
value: '#FBF5FF'
50:
value: '#F5EAFC'
100:
Expand Down Expand Up @@ -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%)'

0 comments on commit 61900c0

Please sign in to comment.