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.

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

[Visual Refresh] Setup semantic color tokens #8097

Merged
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
ce1cee2
feat: add primitive and first level semantic color tokens
mgadewoll Oct 9, 2024
1d7e6b0
refactor: ensure semantic color tokens are available on the theme
mgadewoll Oct 23, 2024
d9d0928
chore: cleanup
mgadewoll Oct 23, 2024
b24e626
feat: add background and border tokens
mgadewoll Oct 14, 2024
a1fcc5f
feat: add util for retrieving a token name based on a dynamic variant
mgadewoll Oct 14, 2024
ec9a21b
refactor: update EUI background color usages
mgadewoll Oct 14, 2024
7025398
refactor: update EUI+ background token usages
mgadewoll Oct 14, 2024
9d45ecc
refactor: update background color usage in EUI docs
mgadewoll Oct 14, 2024
982fa34
refactor: return tokens from mixins and add deprecations
mgadewoll Oct 16, 2024
617caaf
refactor: update sass variables and add background sass vars
mgadewoll Oct 16, 2024
7a50f17
feat: add new base border value
mgadewoll Oct 16, 2024
1f4f63d
refactor: update border mixin usages
mgadewoll Oct 16, 2024
ee4c713
feat: update primitive token values
mgadewoll Oct 16, 2024
17b7dcd
reafactor: move button mixin file
mgadewoll Oct 17, 2024
29d58db
refactor: update paths
mgadewoll Oct 17, 2024
5c278a7
refactor: update token mappings and usages
mgadewoll Oct 20, 2024
fce2cf6
feat: support accentSecondary background variants
mgadewoll Oct 25, 2024
61e5bc9
feat: support accentSecondary variant for more components
mgadewoll Oct 25, 2024
052ab99
refactor: resolve most usages of shade and tint
mgadewoll Oct 21, 2024
2183b13
feat: add transparent color scale tokens
mgadewoll Oct 22, 2024
75350ef
refactor: resolve most usages of transparentize
mgadewoll Oct 22, 2024
e389571
refactor: update to form and switch color mapping
mgadewoll Oct 22, 2024
8f62f0d
refactor: add empty button background token to resolve usage of temp …
mgadewoll Oct 23, 2024
c3ce5da
refactor: remove TEMP_INTERNAL key
mgadewoll Oct 24, 2024
bcf3800
refactor: implement mapping changes
mgadewoll Oct 24, 2024
c980206
refactor: update sass tokens
mgadewoll Oct 24, 2024
2ee22d1
fix: typo
mgadewoll Oct 25, 2024
2a521d6
refactor: token changes + form token changes
mgadewoll Oct 25, 2024
e5c32ff
fix: revert unexpected body token change
mgadewoll Oct 26, 2024
7e59ef0
refactor: update primitive color tokens
mgadewoll Oct 28, 2024
faa7352
fix: update mutedBlack usage to blueBlack
mgadewoll Oct 28, 2024
b903199
refactor: update border mappings
mgadewoll Oct 28, 2024
70aa39a
fix: map accentSecondary to success in current theme
mgadewoll Oct 28, 2024
0869404
chore: renamae variable for more clarity
mgadewoll Oct 31, 2024
322fc90
refactor: flatten primitive color tokens
mgadewoll Oct 31, 2024
410fcd8
test: update test
mgadewoll Oct 31, 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
Prev Previous commit
Next Next commit
fix: map accentSecondary to success in current theme
mgadewoll committed Oct 28, 2024
commit 70aa39a4894b72677eaf77a3a0843765c3239de4
Original file line number Diff line number Diff line change
@@ -40,12 +40,12 @@ exports[`euiMarkdownFormat text colors accent 1`] = `
exports[`euiMarkdownFormat text colors accentSecondary 1`] = `
"
.euiMarkdownFormat__blockquote {
border-inline-start-color: #F04E98;
border-inline-start-color: #00BFB3;
}

.euiHorizontalRule {
background-color: #F04E98;
color: #F04E98; /* ensure that firefox gets the currentColor */
background-color: #00BFB3;
color: #00BFB3; /* ensure that firefox gets the currentColor */
}

/* Tables */
@@ -56,20 +56,20 @@ exports[`euiMarkdownFormat text colors accentSecondary 1`] = `
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
border-inline-start: 1px solid #F04E98;
border-inline-start: 1px solid #00BFB3;
}

.euiMarkdownFormat__table th,
.euiMarkdownFormat__table td {
border-block: 1px solid #F04E98;
border-block: 1px solid #00BFB3;

&:last-child {
border-inline-end: 1px solid #F04E98;
border-inline-end: 1px solid #00BFB3;
}
}

.euiMarkdownFormat__table tr {
border-block-start: 1px solid #F04E98;
border-block-start: 1px solid #00BFB3;
}
;label:accentSecondary;"
`;
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ exports[`euiProgressStyles indeterminate div CSS colors accent 1`] = `
exports[`euiProgressStyles indeterminate div CSS colors accentSecondary 1`] = `
"
&::before {
background-color: #F04E98;
background-color: #00BFB3;
}
;;label:accentSecondary;"
`;
@@ -172,10 +172,10 @@ exports[`euiProgressStyles native progress CSS colors accent 1`] = `
exports[`euiProgressStyles native progress CSS colors accentSecondary 1`] = `
"
&::-webkit-progress-value {
background-color: #F04E98;
background-color: #00BFB3;
}
&::-moz-progress-bar {
background-color: #F04E98;
background-color: #00BFB3;
}
;;label:accentSecondary;"
`;
Original file line number Diff line number Diff line change
@@ -11,9 +11,9 @@ exports[`useEuiButtonColorCSS base 1`] = `
},
"accentSecondary": {
"map": undefined,
"name": "1uoldaz-displaysColorsMap-display-color",
"name": "1j0clgi-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#a03465;background-color:#fcdcea;;;label:base-accentSecondary;",
"styles": "color:#006c66;background-color:#ccf2f0;;;label:base-accentSecondary;",
"toString": [Function],
},
"danger": {
@@ -72,9 +72,9 @@ exports[`useEuiButtonColorCSS empty 1`] = `
},
"accentSecondary": {
"map": undefined,
"name": "cy4kjs-displaysColorsMap-display-color",
"name": "h2w3e9-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#a03465;&:focus,&:active{background-color:rgba(240,78,152,0.1);};label:empty-accentSecondary;",
"styles": "color:#006c66;&:focus,&:active{background-color:rgba(0,191,179,0.1);};label:empty-accentSecondary;",
"toString": [Function],
},
"danger": {
Original file line number Diff line number Diff line change
@@ -2,11 +2,11 @@

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: accent 1`] = `"#feedf5"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: accentSecondary 1`] = `"#feedf5"`;
exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: accentSecondary 1`] = `"#e6f9f7"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: as transparent accent 1`] = `"rgba(240,78,152,0.1)"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: as transparent accentSecondary 1`] = `"rgba(240,78,152,0.1)"`;
exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: as transparent accentSecondary 1`] = `"rgba(0,191,179,0.1)"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: as transparent danger 1`] = `"rgba(189,39,30,0.1)"`;

@@ -38,7 +38,7 @@ exports[`useEuiBackgroundColor mixin returns a calculated background version for

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: accent 1`] = `"background-color:#feedf5;label:accent;"`;

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: accentSecondary 1`] = `"background-color:#feedf5;label:accentSecondary;"`;
exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: accentSecondary 1`] = `"background-color:#e6f9f7;label:accentSecondary;"`;

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: danger 1`] = `"background-color:#f8e9e9;label:danger;"`;

@@ -56,7 +56,7 @@ exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-c

exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: accent 1`] = `"border-color:#f9b8d6;label:accent;"`;

exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: accentSecondary 1`] = `"border-color:#f9b8d6;label:accentSecondary;"`;
exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: accentSecondary 1`] = `"border-color:#99e5e1;label:accentSecondary;"`;

exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: danger 1`] = `"border-color:#e5a9a5;label:danger;"`;

4 changes: 2 additions & 2 deletions packages/eui/src/themes/amsterdam/_colors_dark.scss
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ $euiColorPlainDark: $euiColorInk;
// Brand
$euiColorPrimary: #36A2EF !default;
$euiColorAccent: #F68FBE !default;
$euiColorAccentSecondary: #F68FBE !default;
$euiColorAccentSecondary: #7DDED8 !default;
$euiColorSuccess: #7DDED8 !default;
$euiColorWarning: #F3D371 !default;
$euiColorDanger: #F86B63 !default;
@@ -87,7 +87,7 @@ $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;

$euiColorTextPrimary: $euiColorPrimaryText !default;
$euiColorTextAccent: $euiColorAccentText !default;
$euiColorTextAccentSecondary: $euiColorAccentText !default;
$euiColorTextAccentSecondary: $euiColorSuccessText !default;
$euiColorTextSuccess: $euiColorSuccessText !default;
$euiColorTextWarning: $euiColorWarningText !default;
$euiColorTextDanger: $euiColorDangerText !default;
4 changes: 2 additions & 2 deletions packages/eui/src/themes/amsterdam/_colors_light.scss
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ $euiColorPlainDark: $euiColorInk;
// Brand
$euiColorPrimary: #07C !default;
$euiColorAccent: #F04E98 !default;
$euiColorAccentSecondary: #F04E98 !default;
$euiColorAccentSecondary: #00BFB3 !default;
$euiColorSuccess: #00BFB3 !default;
$euiColorWarning: #FEC514 !default;
$euiColorDanger: #BD271E !default;
@@ -87,7 +87,7 @@ $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;

$euiColorTextPrimary: $euiColorPrimaryText !default;
$euiColorTextAccent: $euiColorAccentText !default;
$euiColorTextAccentSecondary: $euiColorAccentText !default;
$euiColorTextAccentSecondary: $euiColorSuccessText !default;
$euiColorTextSuccess: $euiColorSuccessText !default;
$euiColorTextWarning: $euiColorWarningText !default;
$euiColorTextDanger: $euiColorDangerText !default;
Original file line number Diff line number Diff line change
@@ -91,8 +91,8 @@ const _buttons = {
['colors.accent']
),
backgroundEmptyAccentSecondaryHover: computed(
([accent]) => transparentize(accent, 0.1),
['colors.accent']
([success]) => transparentize(success, 0.1),
['colors.success']
),
backgroundEmptySuccessHover: computed(
([success]) => transparentize(success, 0.1),
@@ -120,8 +120,8 @@ const _buttons = {
['colors.accentText']
),
textColorAccentSecondary: computed(
([accentText]) => accentText,
['colors.accentText']
([successText]) => successText,
['colors.successText']
),
textColorSuccess: computed(
([successText]) => successText,
@@ -150,8 +150,12 @@ const _buttons = {
['colors.accent', 'colors.ghost', 'colors.ink']
),
textColorFilledAccentSecondary: computed(
([accent, ghost, ink]) => (isDark(accent) ? ghost : ink),
['colors.accent', 'colors.ghost', 'colors.ink']
([success, ghost, ink]) => {
const background = tint(success, 0.3);

return isDark(background) ? ghost : ink;
},
['colors.success', 'colors.ghost', 'colors.ink']
),
textColorFilledSuccess: computed(
([success, ghost, ink]) => {
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ import {
export const brand_colors: _EuiThemeBrandColors = {
primary: '#07C',
accent: '#F04E98',
accentSecondary: '#F04E98',
accentSecondary: '#00BFB3',
success: '#00BFB3',
warning: '#FEC514',
danger: '#BD271E',
@@ -54,7 +54,7 @@ export const brand_text_colors: _EuiThemeBrandTextColors = {

textPrimary: computed(makeHighContrastColor('colors.primary')),
textAccent: computed(makeHighContrastColor('colors.accent')),
textAccentSecondary: computed(makeHighContrastColor('colors.accent')),
textAccentSecondary: computed(makeHighContrastColor('colors.success')),
textSuccess: computed(makeHighContrastColor('colors.success')),
textWarning: computed(makeHighContrastColor('colors.warning')),
textDanger: computed(makeHighContrastColor('colors.danger')),
@@ -107,8 +107,8 @@ export const background_colors: _EuiThemeBackgroundColors = {
['colors.accent']
),
backgroundBaseAccentSecondary: computed(
([accent]) => tint(accent, 0.9),
['colors.accent']
([success]) => tint(success, 0.9),
['colors.success']
),
backgroundBaseSuccess: computed(
([success]) => tint(success, 0.9),
@@ -171,8 +171,8 @@ export const background_colors: _EuiThemeBackgroundColors = {
['colors.accent']
),
backgroundLightAccentSecondary: computed(
([accent]) => tint(accent, 0.8),
['colors.accent']
([success]) => tint(success, 0.8),
['colors.success']
),
backgroundLightSuccess: computed(
([success]) => tint(success, 0.8),
@@ -197,8 +197,8 @@ export const background_colors: _EuiThemeBackgroundColors = {
['colors.accent']
),
backgroundFilledAccentSecondary: computed(
([accent]) => tint(accent, 0.3),
['colors.accent']
([success]) => tint(success, 0.3),
['colors.success']
),
backgroundFilledSuccess: computed(
([success]) => tint(success, 0.3),
@@ -224,8 +224,8 @@ export const transparent_background_colors: _EuiThemeTransparentBackgroundColors
['colors.accent']
),
backgroundTransparentAccentSecondary: computed(
([accent]) => transparentize(accent, 0.1),
['colors.accent']
([success]) => transparentize(success, 0.1),
['colors.success']
),
backgroundTransparentSuccess: computed(
([success]) => transparentize(success, 0.1),
@@ -259,8 +259,8 @@ export const border_colors: _EuiThemeBorderColors = {
['colors.accent']
),
borderBaseAccentSecondary: computed(
([accent]) => tint(accent, 0.6),
['colors.accent']
([success]) => tint(success, 0.6),
['colors.success']
),
borderBaseSuccess: computed(
([success]) => tint(success, 0.6),
@@ -354,8 +354,8 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
['colors.accent']
),
backgroundBaseAccentSecondary: computed(
([accent]) => shade(accent, 0.8),
['colors.accent']
([success]) => shade(success, 0.8),
['colors.success']
),
backgroundBaseSuccess: computed(
([success]) => shade(success, 0.8),
@@ -418,8 +418,8 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
['colors.accent']
),
backgroundLightAccentSecondary: computed(
([accent]) => shade(accent, 0.7),
['colors.accent']
([success]) => shade(success, 0.7),
['colors.success']
),
backgroundLightSuccess: computed(
([success]) => shade(success, 0.7),
@@ -441,8 +441,8 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
backgroundFilledPrimary: computed(([primary]) => primary, ['colors.primary']),
backgroundFilledAccent: computed(([accent]) => accent, ['colors.accent']),
backgroundFilledAccentSecondary: computed(
([accent]) => accent,
['colors.accent']
([success]) => success,
['colors.success']
),
backgroundFilledSuccess: computed(([success]) => success, ['colors.success']),
backgroundFilledWarning: computed(([warning]) => warning, ['colors.warning']),
@@ -469,8 +469,8 @@ export const dark_border_colors: _EuiThemeBorderColors = {
['colors.accent']
),
borderBaseAccentSecondary: computed(
([accent]) => shade(accent, 0.6),
['colors.accent']
([success]) => shade(success, 0.6),
['colors.success']
),
borderBaseSuccess: computed(
([success]) => shade(success, 0.6),
@@ -532,7 +532,7 @@ export const dark_colors_ams: _EuiThemeColorsMode = {
// Brand
primary: '#36A2EF',
accent: '#F68FBE',
accentSecondary: '#F68FBE',
accentSecondary: '#7DDED8',
success: '#7DDED8',
warning: '#F3D371',
danger: '#F86B63',