From 14add6004d9fd294dd772f3b6ef2562457734c79 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 19 Nov 2024 20:16:50 +0100 Subject: [PATCH] fix: use computed value from colors instead of border for border token - the issue here seems to be that the border token is defined after color tokens and not available --- .../mixins/__snapshots__/_color.test.ts.snap | 4 ++-- .../global_styling/variables/_colors.ts | 20 +++++++++++++++---- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap b/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap index 1ff6838c54a..25bc6f7dcb5 100644 --- a/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap +++ b/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap @@ -60,11 +60,11 @@ exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color pro exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: danger 1`] = `"border-color:#e5a9a5;label:danger;"`; -exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: plain 1`] = `"border-color:color:#D3DAE6;width{thin:1px;thick:2px;}radius{medium:NaNpx;small:NaNpx;}thin:1px solid [object Object];thick:2px solid [object Object];editable:2px dotted [object Object];;label:plain;"`; +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: plain 1`] = `"border-color:#D3DAE6;label:plain;"`; exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: primary 1`] = `"border-color:#99c9eb;label:primary;"`; -exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: subdued 1`] = `"border-color:color:#D3DAE6;width{thin:1px;thick:2px;}radius{medium:NaNpx;small:NaNpx;}thin:1px solid [object Object];thick:2px solid [object Object];editable:2px dotted [object Object];;label:subdued;"`; +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: subdued 1`] = `"border-color:#D3DAE6;label:subdued;"`; exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: success 1`] = `"border-color:#99e5e1;label:success;"`; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index 241487279e0..31177267cf5 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -276,12 +276,18 @@ export const border_colors: _EuiThemeBorderColors = { ['colors.danger'] ), - borderBaseSubdued: computed(([color]) => color, ['border.color']), + borderBaseSubdued: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), borderBaseDisabled: computed( ([lightShade]) => transparentize(darken(lightShade, 0.4), 0.1), ['colors.lightShade'] ), - borderBasePlain: computed(([color]) => color, ['border.color']), + borderBasePlain: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), borderBaseFloating: 'transparent', borderBaseFormsColorSwatch: computed( @@ -486,12 +492,18 @@ export const dark_border_colors: _EuiThemeBorderColors = { ['colors.danger'] ), - borderBaseSubdued: computed(([color]) => color, ['border.color']), + borderBaseSubdued: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), borderBaseDisabled: computed( ([ghost]) => transparentize(ghost, 0.1), ['colors.ghost'] ), - borderBasePlain: computed(([color]) => color, ['border.color']), + borderBasePlain: computed( + ([lightShade]) => lightShade, + ['colors.lightShade'] + ), borderBaseFloating: 'transparent', borderBaseFormsColorSwatch: computed(