feat: new colors system

package.json

@@ -66,7 +66,7 @@
     "rollup": "^2.77.2",
     "svelte": "^3.47.0",
     "svelte-navigator": "^3.1.5",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.8",
     "vite": "^2.9.5",
     "vue": "^3.2.37",
     "vue-router": "^4.0.14"

src/config.js

@@ -3,6 +3,7 @@ const configExtend = require('./config/config-extend.js');
 const extendTheme = require('./config/extend-theme.js');
 
 const pluginBase = require('./config/plugin-base.js');
+const pluginColors = require('./config/plugin-colors.js');
 const pluginPreloader = require('./config/plugin-preloader.js');
 const pluginHairlines = require('./config/plugin-hairlines.js');
 const pluginTouchRipple = require('./config/plugin-touch-ripple.js');
@@ -13,19 +14,29 @@ const pluginTranslucent = require('./config/plugin-translucent.js');
 const pluginRange = require('./config/plugin-range.js');
 const pluginTouch = require('./config/plugin-touch.js');
 const pluginNoScrollbar = require('./config/plugin-no-scrollbar.js');
-const mdColors = require('./config/md-colors.js');
 
 const content = `${path.resolve(__dirname)}/**/*.{js,jsx,vue,svelte}`;
 
 const config = (userConfig = {}) => {
+  const userConfigKonsta = { ...(userConfig.konsta || {}) };
+  const userConfigModified = { ...userConfig };
+  delete userConfigModified.konsta;
+
+  const konstaConfig = {
+    colors: {
+      primary: '#007aff',
+      ...(userConfigKonsta.colors || {}),
+    },
+  };
+
   const newConfig = configExtend(
     {},
     {
       theme: {
-        extend: extendTheme(),
+        extend: extendTheme(konstaConfig),
       },
       plugins: [
-        pluginBase(userConfig),
+        pluginBase(userConfig, konstaConfig),
         pluginPreloader(),
         pluginIosMaterial(),
         pluginHairlines(),
@@ -36,15 +47,11 @@ const config = (userConfig = {}) => {
         pluginRange(),
         pluginTouch(),
         pluginNoScrollbar(),
+        pluginColors(konstaConfig),
       ],
     },
-    userConfig
-  );
-  const materialColors = mdColors(
-    newConfig.theme.extend.colors.primary.DEFAULT
+    userConfigModified
   );
-  console.log(materialColors);
-  Object.assign(newConfig.theme.extend.colors, materialColors);
 
   if (!newConfig.content) {
     newConfig.content = [content];

src/config/extend-theme.js

@@ -1,4 +1,7 @@
-const extendTheme = () => {
+const iosColors = require('./ios-colors.js');
+const mdColors = require('./md-colors.js');
+
+const extendTheme = (konstaConfig) => {
   // SIZES
   const sizesValues = [
     0.25, 0.75, 4.5, 4.75, 5.5, 5.75, 6.5, 7.5, 12.5, 13, 15, 18, 160,
@@ -67,27 +70,33 @@ const extendTheme = () => {
     'ios-toggle': '0 2px 4px rgba(0,0,0,.3)',
   };
 
+  const themeColors = {};
+  Object.keys(konstaConfig.colors).forEach((key) => {
+    themeColors[key] = `rgb(var(--k-color-${key}) / <alpha-value>)`;
+  });
+  const mdColorsResult = mdColors(konstaConfig.colors.primary);
+  Object.keys(mdColorsResult).forEach((key) => {
+    mdColorsResult[key] = `rgb(var(--k-color-${key}) / <alpha-value>)`;
+  });
+  const iosColorsResult = iosColors(konstaConfig.colors.primary);
+  Object.keys(iosColorsResult).forEach((key) => {
+    iosColorsResult[key] = `rgb(var(--k-color-${key}) / <alpha-value>)`;
+  });
   // COLORS
   const colors = {
-    'ios-light-page': '#efeff4',
-    'ios-dark-page': '#000',
-    'block-strong-light': '#fff',
-    'block-strong-dark': '#1c1c1d',
-    'list-divider-light': '#f4f4f4',
-    'list-divider-dark': '#232323',
-    'bars-ios-light': '#f7f7f8',
-    'bars-ios-dark': '#121212',
-    'bars-material-light': '#fff',
-    'bars-material-dark': '#202020',
-    'toast-ios': '#000000',
-    'toast-material': '#323232',
-    'popover-light': '#ffffff',
-    'popover-dark': '#1c1c1d',
-    primary: {
-      light: '#298fff',
-      DEFAULT: '#007aff',
-      dark: '#0066d6',
-    },
+    ...themeColors,
+    ...mdColorsResult,
+    'ios-light-surface': '#efeff4',
+    'ios-dark-surface': '#000',
+    'ios-light-surface-1': '#fff',
+    'ios-dark-surface-1': '#1c1c1d',
+    'ios-light-surface-2': '#f7f7f8',
+    'ios-dark-surface-2': '#121212',
+    'ios-light-surface-3': '#fff',
+    'ios-dark-surface-3': '#1c1c1d',
+    'ios-light-surface-variant': '#f4f4f4',
+    'ios-dark-surface-variant': '#232323',
+    ...iosColorsResult,
   };
 
   const transitionTimingFunction = {

src/config/ios-colors.js

@@ -0,0 +1,75 @@
+function colorHexToRgb(hex) {
+  const h = hex.replace(
+    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+    (m, r, g, b) => r + r + g + g + b + b
+  );
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
+  return result ? result.slice(1).map((n) => parseInt(n, 16)) : null;
+}
+function colorRgbToHex(r, g, b) {
+  const result = [r, g, b]
+    .map((n) => {
+      const hex = n.toString(16);
+      return hex.length === 1 ? `0${hex}` : hex;
+    })
+    .join('');
+  return `#${result}`;
+}
+function colorRgbToHsl(r, g, b) {
+  r /= 255; // eslint-disable-line
+  g /= 255; // eslint-disable-line
+  b /= 255; // eslint-disable-line
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h;
+  if (d === 0) h = 0;
+  else if (max === r) h = ((g - b) / d) % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else if (max === b) h = (r - g) / d + 4;
+  const l = (min + max) / 2;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  if (h < 0) h = 360 / 60 + h;
+  return [h * 60, s, l];
+}
+function colorHslToRgb(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const hp = h / 60;
+  const x = c * (1 - Math.abs((hp % 2) - 1));
+  let rgb1;
+  if (Number.isNaN(h) || typeof h === 'undefined') {
+    rgb1 = [0, 0, 0];
+  } else if (hp <= 1) rgb1 = [c, x, 0];
+  else if (hp <= 2) rgb1 = [x, c, 0];
+  else if (hp <= 3) rgb1 = [0, c, x];
+  else if (hp <= 4) rgb1 = [0, x, c];
+  else if (hp <= 5) rgb1 = [x, 0, c];
+  else if (hp <= 6) rgb1 = [c, 0, x];
+  const m = l - c / 2;
+  return rgb1.map((n) => Math.max(0, Math.min(255, Math.round(255 * (n + m)))));
+}
+
+function iosColors(...args) {
+  let hex;
+  let rgb;
+  if (args.length === 1) {
+    hex = args[0];
+    rgb = colorHexToRgb(hex);
+  } else if (args.length === 3) {
+    rgb = args;
+    hex = colorRgbToHex(...rgb);
+  }
+  if (!rgb) return {};
+  const hsl = colorRgbToHsl(...rgb);
+  const hslShade = [hsl[0], hsl[1], Math.max(0, hsl[2] - 0.08)];
+  const hslTint = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.08)];
+  const shade = colorRgbToHex(...colorHslToRgb(...hslShade));
+  const tint = colorRgbToHex(...colorHslToRgb(...hslTint));
+  return {
+    'ios-primary': hex,
+    'ios-primary-tint': tint,
+    'ios-primary-shade': shade,
+  };
+}
+
+module.exports = iosColors;

src/config/md-colors.js

@@ -1941,12 +1941,26 @@ const mdColors = (hexColor = '') => {
       .join('');
   };
 
+  const shouldSkip = (prop) => {
+    const skip = [
+      'tertiary',
+      'inverse',
+      'shadow',
+      'scrim',
+      'error',
+      'background',
+    ];
+    return skip.filter((v) => prop.toLowerCase().includes(v)).length > 0;
+  };
+
   Object.keys(theme.schemes.light.props).forEach((prop) => {
+    if (shouldSkip(prop)) return;
     colors[name(`md-light-${prop}`)] = hexFromArgb(
       theme.schemes.light.props[prop]
     );
   });
   Object.keys(theme.schemes.dark.props).forEach((prop) => {
+    if (shouldSkip(prop)) return;
     colors[name(`md-dark-${prop}`)] = hexFromArgb(
       theme.schemes.dark.props[prop]
     );

src/config/plugin-base.js

@@ -1,6 +1,9 @@
 const plugin = require('tailwindcss/plugin');
+const hexToRgb = require('./hex-to-rgb.js');
+const iosColors = require('./ios-colors.js');
+const mdColors = require('./md-colors.js');
 
-module.exports = (userConfig = {}) => {
+module.exports = (userConfig = {}, konstConfig = {}) => {
   let iosFont =
     '-apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif';
   let materialFont = 'Roboto, system-ui, Noto, Helvetica, Arial, sans-serif';
@@ -49,10 +52,26 @@ module.exports = (userConfig = {}) => {
       };
     }
 
+    const primaryColors = {
+      ...iosColors(konstConfig.colors.primary),
+      ...mdColors(konstConfig.colors.primary),
+    };
+    Object.keys(konstConfig.colors).forEach((key) => {
+      primaryColors[key] = konstConfig.colors[key];
+    });
+    const primaryColorVars = {};
+
+    Object.keys(primaryColors).forEach((key) => {
+      primaryColorVars[`--k-color-${key}`] = hexToRgb(primaryColors[key]).join(
+        ' '
+      );
+    });
+
     addBase({
       ':root': {
         '--k-device-pixel-ratio': '1',
         '--k-hairline-color': 'rgba(0, 0, 0, 0.2)',
+        ...primaryColorVars,
       },
       ...darkProps,
       '@media (min-resolution: 1.25dppx)': {

src/config/plugin-colors.js

@@ -0,0 +1,34 @@
+const plugin = require('tailwindcss/plugin');
+const hexToRgb = require('./hex-to-rgb.js');
+const iosColors = require('./ios-colors.js');
+const mdColors = require('./md-colors.js');
+
+const rulesForColor = (name, hex) => {
+  if (!hex.includes('#') || name === 'primary') return {};
+  const data = {};
+  const colors = {
+    primary: hex,
+    ...iosColors(hex),
+    ...mdColors(hex),
+  };
+  Object.keys(colors).forEach((key) => {
+    data[`--k-color-${key}`] = hexToRgb(colors[key]).join(' ');
+  });
+
+  return {
+    [`.k-color-${name}`]: data,
+  };
+};
+
+module.exports = (konstaConfig) =>
+  plugin(({ addUtilities }) => {
+    const themeColors = konstaConfig.colors;
+
+    const colors = {};
+
+    Object.keys(themeColors).forEach((name) => {
+      Object.assign(colors, rulesForColor(name, themeColors[name]));
+    });
+
+    addUtilities(colors);
+  });

src/config/plugin-hairlines.js

@@ -8,22 +8,26 @@ module.exports = () =>
     const hairlineColors = {};
     const hairlineDurations = {};
 
+    const alphaValue = (v) => {
+      return (v || '').replace('<alpha-value>', '0.2');
+    };
+
     Object.keys(themeColors).forEach((key) => {
       const value = themeColors[key];
       if (typeof value === 'string') {
         hairlineColors[`.hairline-${key}`] = {
-          '--k-hairline-color': value,
+          '--k-hairline-color': alphaValue(value),
         };
       } else {
         Object.keys(value).forEach((subKey) => {
           const subValue = value[subKey];
           if (subKey === 'DEFAULT') {
             hairlineColors[`.hairline-${key}`] = {
-              '--k-hairline-color': subValue,
+              '--k-hairline-color': alphaValue(subValue),
             };
           } else {
             hairlineColors[`.hairline-${key}-${subKey}`] = {
-              '--k-hairline-color': subValue,
+              '--k-hairline-color': alphaValue(subValue),
             };
           }
         });

src/config/plugin-safe-areas.js

@@ -17,27 +17,28 @@ module.exports = () =>
           '--k-safe-area-top': 'env(safe-area-inset-top)',
           '--k-safe-area-bottom': 'env(safe-area-inset-bottom)',
         },
-        '.no-safe-areas': {
-          '--k-safe-area-left': '0px',
-          '--k-safe-area-right': '0px',
-          '--k-safe-area-top': '0px',
-          '--k-safe-area-bottom': '0px',
-        },
-        '.no-safe-areas-top': {
-          '--k-safe-area-top': '0px',
-        },
-        '.no-safe-areas-right': {
-          '--k-safe-area-right': '0px',
-        },
-        '.no-safe-areas-bottom': {
-          '--k-safe-area-bottom': '0px',
-        },
-        '.no-safe-areas-left': {
-          '--k-safe-area-left': '0px',
-        },
       },
     };
-    const safe = {};
+    const safe = {
+      '.no-safe-areas': {
+        '--k-safe-area-left': '0px',
+        '--k-safe-area-right': '0px',
+        '--k-safe-area-top': '0px',
+        '--k-safe-area-bottom': '0px',
+      },
+      '.no-safe-areas-top': {
+        '--k-safe-area-top': '0px',
+      },
+      '.no-safe-areas-right': {
+        '--k-safe-area-right': '0px',
+      },
+      '.no-safe-areas-bottom': {
+        '--k-safe-area-bottom': '0px',
+      },
+      '.no-safe-areas-left': {
+        '--k-safe-area-left': '0px',
+      },
+    };
     const spacing = theme('spacing');
     ['top', 'right', 'bottom', 'left'].forEach((side) => {
       const first = side[0];