Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v16] Reorganize the color palette #47504

Merged
merged 2 commits into from
Oct 18, 2024
Merged

[v16] Reorganize the color palette #47504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8326818
Reorganize the color palette (#43304)
bl-nero Jun 21, 2024
76ad8ef
Get rid of unnecessary text colors (#47458)
bl-nero Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 70 additions & 71 deletions ...ges/design/src/theme/themeColors.story.js → ...es/design/src/theme/themeColors.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const ColorsComponent = () => {
return (
<Flex flexDirection="column" p="4">
<Flex flexDirection="column">
<Text mb="2" typography="h4">
<Text mb="2" typography="h3">
Levels
</Text>
<Text mb="2">
Expand All @@ -54,50 +54,71 @@ const ColorsComponent = () => {
</Link>
</Text>
<ColorsBox mb="4" colors={theme.colors.levels} themeType="levels" />
<Text mb="2" typography="h3">
Interactive Colors
</Text>
<Text mb="2">
<p>
Interactive colors are used for hover states, indicators, etc. An
example of this in use currently would be unified resource cards in
the Pinned and Pinned (Hovered) states.
</p>
<p>
All interactive colors have separate fields for background and text.
</p>
</Text>
<Flex flexDirection="column" gap={4}>
{Object.entries(theme.colors.interactive.solid).map(
([intent, colorGroup]) => (
<Flex gap={4}>
{Object.entries(colorGroup).map(([state, background]) => (
<SingleColorBox
mb="2"
path={`theme.colors.interactive.solid.${intent}.${state}`}
bg={background}
color={theme.colors.text.primaryInverse}
/>
))}
</Flex>
)
)}
</Flex>
<Text mb="1" typography="h4">
Spot Backgrounds
Tonal color variants
</Text>
<Text mb="2">
Spot backgrounds are used as highlights or accents. They are not solid
colours, instead, they are a slightly transparent mask that highlights
the colour behind it. This makes them quite versatile and they can be
used to accentuate or highlight components on any background.
<br />
They may be used for things such as indicating a hover or active state
for an item in a menu, or for minor accents such as dividers. <br />
Tonal color variants are used as highlights or accents. They are not
solid colours, instead, they are a slightly transparent mask that
highlights the colour behind it. This makes them quite versatile and
they can be used to accentuate or highlight components on any
background.
</Text>
<Flex>
<SingleColorBox
mb="4"
mr={0}
color={theme.colors.spotBackground[0]}
themeType="levels"
path="theme.colors.spotBackground[0]"
/>
<SingleColorBox
mb="4"
mr={0}
color={theme.colors.spotBackground[1]}
themeType="levels"
path="theme.colors.spotBackground[1]"
/>
<SingleColorBox
mb="4"
mr={0}
color={theme.colors.spotBackground[2]}
themeType="levels"
path="theme.colors.spotBackground[2]"
/>
<Flex flexDirection="column" gap={4}>
{Object.entries(theme.colors.interactive.tonal).map(
([intent, colorGroup]) => (
<Flex gap={4}>
{colorGroup.map((background, i) => (
<SingleColorBox
mb="2"
path={`theme.colors.interactive.tonal.${intent}[${i}]`}
bg={background}
color={theme.colors.text.main}
/>
))}
</Flex>
)
)}
</Flex>
<Text mb="2" typography="h4">
<Text mb="2" typography="h3">
Brand
</Text>
<SingleColorBox
mb="4"
path="theme.colors.brand"
color={theme.colors.brand}
bg={theme.colors.brand}
color={theme.colors.text.primaryInverse}
/>
<Text mb="2" typography="h4">
<Text mb="2" typography="h3">
Shadows
</Text>
<Flex>
Expand Down Expand Up @@ -153,7 +174,7 @@ const ColorsComponent = () => {
<Text>theme.boxShadow[2]</Text>
</Box>
</Flex>
<Text mb="2" typography="h4">
<Text mb="2" typography="h3">
Text Colors
</Text>
<Flex width="fit-content" flexDirection="row" mb={4}>
Expand Down Expand Up @@ -291,31 +312,6 @@ const ColorsComponent = () => {
</Text>
</Flex>
</Flex>
<Text mb="2" typography="h3">
Interactive Colors
</Text>
<Text mb="2">
Interactive colors are used for hover states, indicators, etc. An
example of this in use currently would be unified resource cards in
the Pinned and Pinned(Hovered) states.
</Text>
<Flex gap={4}>
<SingleColorBox
mb="2"
path="theme.colors.interactive.tonal.primary[0]"
color={theme.colors.interactive.tonal.primary[0]}
/>
<SingleColorBox
mb="2"
path="theme.colors.interactive.tonal.primary[1]"
color={theme.colors.interactive.tonal.primary[1]}
/>
<SingleColorBox
mb="2"
path="theme.colors.interactive.tonal.primary[2]"
color={theme.colors.interactive.tonal.primary[2]}
/>
</Flex>
</Flex>
</Flex>
);
Expand Down Expand Up @@ -357,17 +353,20 @@ function ColorsBox({ colors, themeType = null, ...styles }) {
);
}

function SingleColorBox({ color, path, ...styles }) {
function SingleColorBox({ bg, color, path, ...styles }) {
return (
<Flex flexWrap="wrap" key={path} width="260px" mb={3}>
<Box
css={`
color: ${props => props.theme.colors.text.slightlyMuted};
`}
>
{path}
</Box>
<Box width="100%" height="50px" p={3} mr={3} bg={color} {...styles} />
</Flex>
<Box width="150px" height="150px" p={3} mr={3} bg={bg} {...styles}>
<Text color={color}>
{/* Path, potentially broken along the periods. */}
{path.split('.').map((word, i, arr) => (
<>
{word}
{i < arr.length - 1 ? '.' : ''}
{/*potential line break*/}
<wbr />
</>
))}
</Text>
</Box>
);
}
30 changes: 29 additions & 1 deletion web/packages/design/src/theme/themes/bblpTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,34 @@ const colors: ThemeColors = {
brand: '#FFA028',

interactive: {
solid: {
primary: {
default: '#FFA028',
hover: '#FFB04C',
active: '#DB8922',
},
success: {
default: '#00A223',
hover: '#35D655',
active: '#00851C',
},
accent: {
default: '#66ABFF',
hover: '#99C7FF',
active: '#2B8EFF',
},
danger: {
default: '#E51E3C',
hover: '#FD2D4A',
active: '#C31834',
},
alert: {
default: '#FA5A28',
hover: '#FB754C',
active: '#D64D22',
},
},

tonal: {
primary: [
'rgba(255,160,40, 0.1)',
Expand Down Expand Up @@ -118,7 +146,7 @@ const colors: ThemeColors = {
'rgba(0, 158, 255, 0.18)',
'rgba(0, 158, 255, 0.25)',
],
neutral: neutralColors,
neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
},
},

Expand Down
30 changes: 29 additions & 1 deletion web/packages/design/src/theme/themes/darkTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,34 @@ const colors: ThemeColors = {
brand: '#9F85FF',

interactive: {
solid: {
primary: {
default: '#9F85FF',
hover: '#B29DFF',
active: '#C5B6FF',
},
success: {
default: '#00BFA6',
hover: '#33CCB8',
active: '#66D9CA',
},
accent: {
default: '#009EFF',
hover: '#33B1FF',
active: '#66C5FF',
},
danger: {
default: '#FF6257',
hover: '#FF8179',
active: '#FFA19A',
},
alert: {
default: '#FFAB00',
hover: '#FFBC33',
active: '#FFCD66',
},
},

tonal: {
primary: [
'rgba(159,133,255, 0.1)',
Expand All @@ -117,7 +145,7 @@ const colors: ThemeColors = {
'rgba(0, 158, 255, 0.18)',
'rgba(0, 158, 255, 0.25)',
],
neutral: neutralColors,
neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
},
},

Expand Down
30 changes: 29 additions & 1 deletion web/packages/design/src/theme/themes/lightTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,34 @@ const colors: ThemeColors = {
brand: '#512FC9',

interactive: {
solid: {
primary: {
default: '#512FC9',
hover: '#4126A1',
active: '#311C79',
},
success: {
default: '#007D6B',
hover: '#006456',
active: '#004B40',
},
accent: {
default: '#0073BA',
hover: '#005C95',
active: '#004570',
},
danger: {
default: '#CC372D',
hover: '#A32C24',
active: '#7A211B',
},
alert: {
default: '#FFAB00',
hover: '#CC8900',
active: '#996700',
},
},

tonal: {
primary: [
'rgba(81,47,201, 0.1)',
Expand All @@ -116,7 +144,7 @@ const colors: ThemeColors = {
'rgba(0, 115, 186, 0.18)',
'rgba(0, 115, 186, 0.25)',
],
neutral: neutralColors,
neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
},
},

Expand Down
Loading
Loading