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
elastic · Nov 19, 2024 · 14add60 · 14add60
1 parent 7950e5d
commit 14add60
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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(