[Visual Refresh] Fix computed border token mapping (#8170)

elastic · Nov 27, 2024 · 5056ea1 · 5056ea1
1 parent 6c4d9ce
commit 5056ea1
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 16 deletions.
diff --git a/packages/eui-theme-borealis/src/variables/_borders.scss b/packages/eui-theme-borealis/src/variables/_borders.scss
diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss
@@ -3,7 +3,6 @@
 @import 'states';
 
 @import './colors/colors_vis';
-@import 'borders';
 @import 'form';
 @import 'page';
 @import 'font_weight';

diff --git a/packages/eui-theme-common/src/global_styling/variables/_borders.scss b/packages/eui-theme-common/src/global_styling/variables/_borders.scss
@@ -3,7 +3,7 @@
 $euiBorderWidthThin: 1px !default;
 $euiBorderWidthThick: 2px !default;
 
-$euiBorderColor: $euiColorLightShade !default;
+$euiBorderColor: $euiColorBorderBaseSubdued !default;
 $euiBorderRadius: $euiSizeS * .75 !default;
 $euiBorderRadiusSmall: $euiSizeS * .5 !default;
 $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;

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
@@ -60,14 +60,14 @@ 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;"`;
 
-exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: transparent 1`] = `"border-color:;label:transparent;"`;
+exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: transparent 1`] = `"border-color:#D3DAE6;label:transparent;"`;
 
 exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: warning 1`] = `"border-color:#fedc72;label:warning;"`;
diff --git a/packages/eui/src/global_styling/mixins/_color.ts b/packages/eui/src/global_styling/mixins/_color.ts
@@ -153,7 +153,7 @@ export const euiBorderColor = (
       return euiTheme.border.color;
     default: {
       const tokenName = getTokenName(
-        'borderStrong',
+        'borderBase',
         color
       ) as keyof _EuiThemeBorderColors;
 
@@ -171,12 +171,16 @@ const _euiBorderColors = (euiThemeContext: UseEuiTheme) =>
     const borderToken = getTokenName(
       'borderBase',
       color
-    ) as keyof _EuiThemeBackgroundColors;
+    ) as keyof _EuiThemeBorderColors;
+    const borderColor =
+      color === 'transparent'
+        ? euiThemeContext.euiTheme.border.color
+        : euiThemeContext.euiTheme.colors[borderToken];
 
     return {
       ...acc,
       [color]: css`
-        border-color: ${euiThemeContext.euiTheme.colors[borderToken]};
+        border-color: ${borderColor};
         label: ${color};
       `,
     };

diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_borders.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_borders.ts
@@ -12,7 +12,10 @@ import { sizeToPixel } from '../../../../global_styling/functions';
 import { computed } from '../../../../services/theme/utils';
 
 export const border: _EuiThemeBorder = {
-  color: computed(([lightShade]) => lightShade, ['colors.lightShade']),
+  color: computed(
+    ([borderBaseSubdued]) => borderBaseSubdued,
+    ['colors.borderBaseSubdued']
+  ),
   width: {
     thin: '1px',
     thick: '2px',

diff --git 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(