fix(button plugin): fixed button plugin for clear and outline styles …

…to be compatable for dark mode
fluid-design-io · Nov 14, 2022 · c94c789 · c94c789
1 parent 07dcc3f
commit c94c789
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/src/plugin/template/bold.js b/src/plugin/template/bold.js
@@ -4,7 +4,6 @@ const tinycolor = require('../lib/tinycolor');
 const _color = require('tailwindcss/lib/util/color');
 const { contrastRing, focusRing } = require('../util/generateRing');
 const {
-  focusHoverRingColor,
   disabledColor,
   contrastMoreColor,
 } = require('../util/generateColors');

diff --git a/src/plugin/template/clear.js b/src/plugin/template/clear.js
@@ -4,14 +4,14 @@ const tinycolor = require('../lib/tinycolor');
 const _color = require('tailwindcss/lib/util/color');
 const { contrastRing, focusRing } = require('../util/generateRing');
 const {
-  focusHoverRingColor,
   disabledColor,
   contrastMoreColor,
 } = require('../util/generateColors');
 const { generateBtnStroke } = require('../util/generateStroke');
 const { BUTTON_STATE, BUTTON_DEFAULT } = require('../lib/constants');
 const { generateBtnTextBg } = require('../util/generateTextBg');
 const { default: toColorValue } = require('../util/toColorValue');
+const { generateTransparentTxtBg } = require('../util/generateTransparentTxtBg');
 
 const generateClearBtnState = (color, theme, isDark) => {
   const activeColor = isDark
@@ -20,19 +20,25 @@ const generateClearBtnState = (color, theme, isDark) => {
   const contrastMoreOffsetColor = isDark
     ? tinycolor(color).lighten(30).toRgbString()
     : tinycolor(color).darken(30).toRgbString();
+  const houcusColor = isDark
+    ? tinycolor(color).saturate(5).toRgbString()
+    : tinycolor(color).saturate(5).darken(4).toRgbString();
+  const houcusBackground = isDark
+    ? tinycolor(activeColor).darken().setAlpha(0.12).toRgbString()
+    : tinycolor(houcusColor).setAlpha(0.1).toRgbString();
+  const activeBackground = isDark
+    ? tinycolor(activeColor).darken().setAlpha(0.2).toRgbString()
+    : tinycolor(activeColor).setAlpha(0.18).toRgbString();
   return {
     [BUTTON_STATE.HOVER]: {
-      color: color,
-      'background-color': tinycolor(color).setAlpha(0.1).toRgbString(),
+      'background-color': houcusBackground,
     }, // Focus and hover state
     [BUTTON_STATE.FOCUS]: {
-      color: color,
-      'background-color': tinycolor(color).setAlpha(0.1).toRgbString(),
+      'background-color': houcusBackground,
       ...focusRing({ color, theme }),
     }, // Focus and hover state
     [BUTTON_STATE.ACTIVE]: {
-      color: color,
-      'background-color': tinycolor(color).setAlpha(0.2).toRgbString(),
+      'background-color': activeBackground,
     }, // Active state
     [BUTTON_STATE.DISABLED]: {
       ...generateBtnTextBg(
@@ -42,7 +48,8 @@ const generateClearBtnState = (color, theme, isDark) => {
       cursor: 'not-allowed',
     }, // Disabled state
     [BUTTON_STATE.CONTRAST_MORE]: {
-      color: color,
+      ...generateBtnTextBg(
+        contrastMoreColor({ color }), 'transparent', true),
       ...contrastRing({ color, theme, offsetColor: contrastMoreOffsetColor }),
     },
   };
@@ -60,22 +67,25 @@ const generateClearBtn = (value, theme) => {
       };
     const { mode, color: c, alpha } = colorValue;
     const color = _color.formatColor({ mode, color: c, alpha });
+    const { lightColor, darkColor } = generateTransparentTxtBg({ color, alpha });
 
     return {
       ...BUTTON_DEFAULT,
-      ...generateBtnStroke({ opacity: '0.38' }),
-      ...generateClearBtnState(color, theme), // Generate focus, hover, active and disabled states
-      color: color,
+      ...generateBtnStroke({ opacity: '0.48' }),
+      ...generateClearBtnState(lightColor, theme), // Generate focus, hover, active and disabled states
       'background-color': 'transparent',
+      color: lightColor,
       [BUTTON_STATE.DARK]: {
-        ...generateBtnStroke({ opacity: '0.3' }),
-        ...generateClearBtnState(color, theme, true),
-        color: color,
-        'background-color': 'transparent',
+        color: darkColor,
+        ...generateBtnStroke({ opacity: '0.38' }),
+        ...generateClearBtnState(darkColor, theme, true),
       },
       '&.pressed::after': {
         transition: 'all 0.08s ease-in-out',
-        borderColor: color,
+        borderColor: darkColor,
+        [BUTTON_STATE.DARK]: {
+          borderColor: lightColor,
+        }
       },
     };
   }

diff --git a/src/plugin/template/outline.js b/src/plugin/template/outline.js
@@ -4,13 +4,11 @@ const tinycolor = require('../lib/tinycolor');
 const _color = require('tailwindcss/lib/util/color');
 const { contrastRing, focusRing } = require('../util/generateRing');
 const {
-  focusHoverRingColor,
   disabledColor,
-  contrastMoreColor,
 } = require('../util/generateColors');
-const { generateBtnStroke } = require('../util/generateStroke');
 const { BUTTON_STATE, BUTTON_DEFAULT } = require('../lib/constants');
 const { generateBtnTextBg } = require('../util/generateTextBg');
+const { generateTransparentTxtBg } = require('../util/generateTransparentTxtBg');
 const { default: toColorValue } = require('../util/toColorValue');
 
 const generateOutlineBtnState = (color, theme, isDark) => {
@@ -108,17 +106,7 @@ const generateOutlineBtn = (value, theme) => {
       };
     const { mode, color: c, alpha } = colorValue;
     const color = _color.formatColor({ mode, color: c, alpha });
-    const { h, s, v } = tinycolor(color).toHsv();
-    const lightColor = tinycolor({ h, s, v: s > 0.25 ? 0.55 : 0.4 })
-      .setAlpha(alpha || 1)
-      .toRgbString();
-    const darkColorHSV = tinycolor({ h, s, v: v * 0.8 }).toRgbString();
-    const darkColorHSL = tinycolor(darkColorHSV).toHsl();
-    const darkColor = tinycolor({
-      h: darkColorHSL.h,
-      s: darkColorHSL.s,
-      l: 0.8,
-    }).toRgbString();
+    const { lightColor, darkColor } = generateTransparentTxtBg({ color, alpha });
     const borderColor = tinycolor(color)
       .setAlpha(alpha * 0.7 || 0.7)
       .toRgbString();

diff --git a/src/plugin/util/generateTransparentTxtBg.js b/src/plugin/util/generateTransparentTxtBg.js
@@ -0,0 +1,21 @@
+/** @type {import('tinycolor2')} */
+const tinycolor = require('../lib/tinycolor');
+
+const generateTransparentTxtBg = ({ color, alpha }) => {
+    const { h, s, v } = tinycolor(color).toHsv();
+    const lightColor = tinycolor({ h, s, v: s > 0.25 ? 0.55 : 0.4 })
+        .setAlpha(alpha || 1)
+        .toRgbString();
+    const darkColorHSV = tinycolor({ h, s, v: v * 0.8 }).toRgbString();
+    const darkColorHSL = tinycolor(darkColorHSV).toHsl();
+    const darkColor = tinycolor({
+        h: darkColorHSL.h,
+        s: darkColorHSL.s,
+        l: 0.8,
+    }).toRgbString();
+    return {
+        lightColor,
+        darkColor,
+    }
+}
+module.exports = { generateTransparentTxtBg };