Adding customColor to className

elastic · Jul 25, 2022 · d026372 · d026372
1 parent 0f34784
commit d026372
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiToken is rendered 1`] = `
 
 exports[`EuiToken props color can be a custom hex 1`] = `
 <span
-  class="euiToken emotion-euiToken-circle-light-s"
+  class="euiToken css-12d11bg-customColor-euiToken-circle-light-s"
   style="color:#000000;background-color:#FF0000"
 >
   <span

diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx
@@ -144,13 +144,14 @@ export const EuiToken: FunctionComponent<EuiTokenProps> = ({
   if (isTokenColor) {
     cssStyles = [styles[finalColor as TokenColor], ...cssStyles];
   } else if (finalFill === 'none') {
-    // when custom color is used, we passed it in the style prop
     cssStyles = [styles.customColor, ...cssStyles];
     finalStyle = { color: finalColor, ...style };
   } else {
     const isFinalColorDark = isColorDark(...hexToRgb(finalColor));
     const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000';
 
+    cssStyles = [styles.customColor, ...cssStyles];
+
     finalFill = 'dark';
     finalStyle = {
       color: lightOrDarkColor,