feat: tailwind tokens support opacity modifier syntax color (fixed #526…

…) (#525) Co-authored-by: Guillaume Chau <[email protected]>
histoire-dev · Jun 13, 2023 · b007fa1 · b007fa1
1 parent 8e6cf1e
commit b007fa1
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts b/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts
@@ -136,7 +136,7 @@ export default {
       }, ({ color}) => h('div', {
         class: '__hst-shade',
         style: {
-          backgroundColor: color,
+          backgroundColor: color.replace('<alpha-value>', 1),
         },
       })))),
       onMountControls: (api) => mountApp(api, () => [
@@ -159,7 +159,7 @@ export default {
       }, ({ color}) => h('div', {
         class: '__hst-shade __hst-text',
         style: {
-          color,
+          color: color.replace('<alpha-value>', 1),
         },
       }, 'Aa')))),
       onMountControls: (api) => mountApp(api, () => [
@@ -182,7 +182,7 @@ export default {
       }, ({ color}) => h('div', {
         class: '__hst-shade __hst-border',
         style: {
-          borderColor: color,
+          borderColor: color.replace('<alpha-value>', 1),
         },
       })))),
       onMountControls: (api) => mountApp(api, () => [