tailwind-semantic-setup/dist/tailwind-semantic-setup.cjs.map

🧬 Smart multi-theme tool for better semantic Design Systems

{"version":3,"file":"tailwind-semantic-setup.cjs","sources":["../helpers/default-theme-colors.js","../helpers/colors.js","../index.js","../colors.js"],"sourcesContent":["\nexport const defaultThemeColors = {\n  'primary': '#e0a82e', //\n  'primary-dark': '#ba881c',\n  'primary-content': '#18182f',\n\n  'secondary': '#f9d72f', //\n  'secondary-dark': '#e4bf07',\n  'secondary-content': '#18182f',\n\n  'accent': '#18182f', //\n  'accent-dark': '#131325',\n  'accent-content': '#babaee',\n\n  'neutral': '#181830', //\n  'neutral-dark': '#131325',\n  'neutral-content': '#babaee',\n\n  'root': '#ffffff', //\n  'root-dark': '#e6e6e6',\n  'root-darkest': '#cfcfcf',\n  'root-content': '#333333',\n\n  'info': '#3abff8',\n  'info-content': '#002b3d',\n\n  'success': '#36d399',\n  'success-content': '#003320',\n\n  'warning': '#fbbd23',\n  'warning-content': '#382800',\n\n  'error': '#f87272',\n  'error-content': '#470000',\n}\n","import Color from 'color'\n\n\n\nconst formatHslFromArray = (hslArray) => {\n  const [hue, saturation, lightness] = hslArray\n  return `${hue} ${saturation}% ${lightness}%`\n}\n\n\n\n\nexport function convertToHsl (value) {\n  const hslArray = Color(value).hsl().round().array()\n  return formatHslFromArray(hslArray)\n}\n\n\nexport function convertToReadableHsl (input, percentage = 0.8) {\n  const colorByInput = Color(input)\n  const colorToMixWith = colorByInput.isDark()\n    ? Color('white')\n    : Color('black')\n\n  const hslArray = colorByInput.mix(colorToMixWith, percentage).saturate(15).hsl().round().array()\n  return formatHslFromArray(hslArray)\n}\n\n\nexport function convertToDarkerHsl (value, percentage = 0.3) {\n  const hslArray = Color(value).darken(percentage).hsl().round().array()\n  return formatHslFromArray(hslArray)\n}\n","import plugin from 'tailwindcss/plugin'\n\nimport { getColorsByThemesConfig } from './colors.js'\nimport { convertToHsl, convertToDarkerHsl, convertToReadableHsl } from './helpers/colors.js'\nimport { defaultThemeColors } from './helpers/default-theme-colors.js'\n\n\n\nfunction getThemeCssVariables (userColorsObject) {\n  const colorsToProcess = {\n    ...defaultThemeColors,\n    ...userColorsObject,\n  }\n  const cssVariables = {}\n\n  Object.entries(colorsToProcess).forEach(([colorName, colorValue]) => {\n    const cssVariableName = `--${colorName}`\n\n    const userColor = userColorsObject[colorName]\n\n    if (userColor) {\n      const hslColor = convertToHsl(userColor)\n      cssVariables[cssVariableName] = hslColor\n      return\n    }\n\n    // root-dark and root-darkest colors (autogenerate them) ------------------\n    if (['root-dark', 'root-darkest'].includes(colorName)) {\n      const rootColorToDarken = 'root'\n      const userRootColor = userColorsObject[rootColorToDarken]\n\n      const color = userRootColor ?? defaultThemeColors[rootColorToDarken]\n      cssVariables[cssVariableName] = convertToDarkerHsl(color, colorName === 'root-darkest' ? 0.16 : 0.08)\n      return\n    }\n    // ------------------------------------------------------------------------\n\n\n\n    // / *-dark and *-content colors (autogenerate them) --------------------------\n    const isManagedColor = Boolean(defaultThemeColors[colorName])\n    const isDarkColor = colorName.includes('-dark')\n    const isContentColor = colorName.includes('-content')\n\n    if (isManagedColor && (isDarkColor || isContentColor)) {\n      const baseColorName = colorName.replace('-dark', '').replace('-content', '')\n      const userBaseColor = userColorsObject[baseColorName]\n\n      const color = userBaseColor ?? defaultThemeColors[baseColorName]\n      cssVariables[cssVariableName] = isDarkColor\n        ? convertToDarkerHsl(color)\n        : convertToReadableHsl(color)\n      return\n    }\n    // ------------------------------------------------------------------------\n\n\n    const hslColor = convertToHsl(colorValue)\n    cssVariables[cssVariableName] = hslColor\n  })\n\n  return cssVariables\n}\n\nconst assertArray = (value) => {\n  if (value && !Array.isArray(value))\n    throw new Error(`Expected array, got ${value}`)\n}\n\nconst assertColors = (colors) => {\n  const allColorsAreString = Object.values(colors).every(c => typeof c === 'string')\n  if (!allColorsAreString)\n    throw new Error(`color values must be strings, got ${colors}`)\n}\n\nfunction getBaseThemesCssVariables (themes) {\n  // Get and set css variables for each theme\n  return themes.reduce((acc, { name, colors, preferredColorScheme }) => {\n    assertArray(preferredColorScheme)\n    assertColors(colors)\n\n    const cssVariables = getThemeCssVariables(colors)\n    acc[`[data-theme=\"${name}\"]`] = {\n      'color-scheme': preferredColorScheme?.join(' '),\n      ...cssVariables,\n    }\n\n    return acc\n  }, {})\n}\n\n\n/**\n * @param {import('./types').SemanticSetup['semanticSetup']['plugins'] } userPluginsConfig\n * @returns {import('tailwindcss').Config['plugins']}\n * */\nfunction getSemanticSetupPlugins (userPluginsConfig = {}) {\n  const defaultPlugins = {\n    'typography': true,\n    'forms': true,\n    'line-clamp': false,\n    'aspect-ratio': true,\n  }\n\n  const activatedPluginsConfig = {\n    ...defaultPlugins,\n    ...userPluginsConfig,\n  }\n\n  /** @type {import('tailwindcss').Config['plugins']} */\n  const pluginsConfig = [\n    /* [start] ------------------ CUSTOM PLUGIN ---------------------------------- */\n    plugin(function ({ addBase, matchUtilities, addVariant, theme, config }) {\n      const themes = config('semanticSetup.themes')\n      const rootThemesWithCssVariables = getBaseThemesCssVariables(themes)\n\n      addBase(rootThemesWithCssVariables)\n\n      // Setup base background and text color\n      addBase({\n        ':root [data-theme]': {\n          backgroundColor: 'hsl(var(--root) / var(--tw-bg-opacity, 1))',\n          color: 'hsl(var(--root-content) / var(--tw-text-opacity, 1))',\n        },\n      })\n\n\n      /** Add 'wh' utility for width-height quick setup (square) */\n      matchUtilities(\n        {\n          wh: value => ({\n            width: value,\n            height: value,\n          }),\n        },\n        { values: theme('spacing') },\n      )\n\n      /** Add 'circle' utility to quick setup avatars and other circles */\n      matchUtilities(\n        {\n          circle: value => ({\n            width: value,\n            height: value,\n            borderRadius: '100%',\n          }),\n        },\n        { values: theme('spacing') },\n      )\n\n      /** Variants which can be useful */\n      themes.forEach(({ name }) => {\n        addVariant(`theme-${name}`, `[data-theme=\"${name}\"] &`)\n      })\n      addVariant('hocus', ['&:hover', '&:focus'])\n      addVariant('optional', '&:optional')\n      addVariant('group-optional', ':merge(.group):optional &')\n      addVariant('peer-optional', ':merge(.peer):optional ~ &')\n    }),\n    /* [end] -------------------- CUSTOM PLUGIN ---------------------------------- */\n\n\n  ]\n\n  /** Official tailwind plugins */\n  if (activatedPluginsConfig.typography)\n    pluginsConfig.push(require('@tailwindcss/typography'))\n\n  if (activatedPluginsConfig.forms)\n    pluginsConfig.push(require('@tailwindcss/forms'))\n\n  if (activatedPluginsConfig['line-clamp'])\n    pluginsConfig.push(require('@tailwindcss/line-clamp'))\n\n  if (activatedPluginsConfig['aspect-ratio'])\n    pluginsConfig.push(require('@tailwindcss/aspect-ratio'))\n\n  return pluginsConfig\n}\n\n\n\n/**\n * Quick setup for tailwindcss with semantic-ui colors\n *\n * @param {import('tailwindcss').Config & import('./types').SemanticSetup } userConfig\n * @returns {import('tailwindcss').Config}\n */\nexport function withSemanticSetup (userConfig = {}) {\n  const {\n    plugins: userPlugins = [],\n    theme: userTheme = {},\n    semanticSetup = {},\n  } = userConfig\n\n  return {\n    ...userConfig,\n    plugins: [\n      ...userPlugins,\n      ...getSemanticSetupPlugins(semanticSetup.plugins),\n    ],\n    theme: {\n      ...userTheme,\n      colors: getColorsByThemesConfig(semanticSetup.themes),\n      /**\n       * override user extended colors in case they are set up\n       * to force using semantic-ui colors\n       */\n      extend: userTheme?.extend\n        ? {\n            ...userTheme.extend,\n            colors: undefined,\n          }\n        : undefined,\n    },\n  }\n}\n","import { defaultThemeColors } from './helpers/default-theme-colors.js'\n\n\n\nfunction withOpacityValue (variable, fallbackColor = '') {\n  return ({ opacityValue }) => {\n    const fallbackColorValue = fallbackColor ? `, var(${fallbackColor})` : ''\n    const cssColorVariable = `var(${variable}${fallbackColorValue})`\n\n    if (opacityValue === undefined) return `hsl(${cssColorVariable})`\n\n    return `hsl(${cssColorVariable} / ${opacityValue})`\n  }\n}\n\n\n/**\n * Get tailwind theme colors object from themes config array\n *\n * @example\n * primary: 'var(--primary)',  // with opacity function\n * secondary: 'var(--secondary)',\n */\nexport function getColorsByThemesConfig (themesConfigArray) {\n  const colors = {\n    transparent: 'transparent',\n    current: 'currentColor',\n  }\n\n  const uniqueColorNames = Array.from(\n    new Set(\n      [\n        ...Object.keys(defaultThemeColors),\n        ...themesConfigArray.map(theme => Object.keys(theme.colors)).flat(2),\n      ],\n    ),\n  )\n\n  uniqueColorNames.forEach((colorName) => {\n    colors[colorName] = withOpacityValue(`--${colorName}`)\n  })\n\n  return colors\n}\n"],"names":["primary","secondary","accent","neutral","root","info","success","warning","error","formatHslFromArray","hslArray","value","Color","hsl","round","array","percentage","darken","getSemanticSetupPlugins","userPluginsConfig","activatedPluginsConfig","_extends","typography","forms","plugin","_ref3","addBase","matchUtilities","addVariant","theme","themes","config","reduce","acc","name","colors","preferredColorScheme","_ref2","Array","isArray","Error","assertArray","Object","values","every","c","assertColors","userColorsObject","colorsToProcess","defaultThemeColors","cssVariables","entries","forEach","_ref","colorName","colorValue","userColor","hslColor","convertToHsl","cssVariableName","includes","rootColorToDarken","convertToDarkerHsl","userRootColor","Boolean","isDarkColor","isContentColor","isManagedColor","baseColorName","replace","color","userBaseColor","convertToReadableHsl","input","colorByInput","colorToMixWith","isDark","mix","saturate","getThemeCssVariables","join","getBaseThemesCssVariables","backgroundColor","wh","width","height","circle","borderRadius","_ref4","pluginsConfig","push","require","userConfig","themesConfigArray","plugins","userTheme","_userConfig$theme","semanticSetup","_userConfig$semanticS","_userConfig$plugins","transparent","current","from","Set","concat","keys","map","flat","variable","fallbackColor","opacityValue","cssColorVariable","undefined","extend"],"mappings":"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"}