@drivy/cobalt 1.5.0 → 2.0.0-beta.2

package/utils/getCobaltTailwindcssConfig2.js

@@ -1,7 +1,6 @@
 import require$$0 from 'tailwindcss/defaultTheme';
 import require$$1 from '../src/tokens/breakpoints.js';
-import require$$2 from '../src/tokens/colors.js';
-import require$$3 from '../src/tokens/zIndexes.js';
+import require$$2 from '../src/tokens/zIndexes.js';
 import { __require as requireHelpers } from './helpers.js';
 import { __require as requireTailwindcssGenerators } from './tailwindcssGenerators.js';
 
@@ -26,8 +25,7 @@ function requireGetCobaltTailwindcssConfig () {
 	hasRequiredGetCobaltTailwindcssConfig = 1;
 	const defaultTheme = require$$0;
 	const breakpoints = require$$1;
-	const legacyColors = require$$2;
-	const zIndexes = require$$3;
+	const zIndexes = require$$2;
 	const { getColorsUsingCSSVariables } = requireHelpers();
 	const generators = requireTailwindcssGenerators();
 
@@ -53,13 +51,8 @@ function requireGetCobaltTailwindcssConfig () {
 	  _64px: 4,
 	};
 
-	const {
-	  stroke: borderColors,
-	  background: bgColors,
-	  fill: fillColors,
-	  text: textColors,
-	} = getColorsUsingCSSVariables({
-	  additionalColors: { transparent: "transparent" },
+	const { themeColors, stateColors } = getColorsUsingCSSVariables({
+	  additionalColors: { transparent: "transparent", current: "currentColor" },
 	});
 
 	const baseFont =
@@ -88,9 +81,6 @@ function requireGetCobaltTailwindcssConfig () {
 	    gradientColorStops: false,
 	    gradientColorStopPositions: false,
 	    textDecorationColor: false,
-	    // SVG color
-	    stroke: false,
-	    fill: false,
 	  },
 	  theme: {
 	    extend: {
@@ -100,29 +90,20 @@ function requireGetCobaltTailwindcssConfig () {
 	        colors: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.colors}`,
 	      },
 	    },
-	    colors: {
-	      ...legacyColors, // deprecated
-	      current: "currentColor",
-	    },
+	    colors: themeColors,
 	    semanticStateColor: {
 	      interactive: {
-	        DEFAULT: "#00000000",
-	        hover: "#00000005",
-	        press: "#0000000F",
+	        DEFAULT: themeColors.transparent,
+	        hover: stateColors.hover,
+	        press: stateColors.press,
 	      },
-	      onDrag: "#00000029",
+	      onDrag: stateColors.drag,
 	      none: {
-	        DEFAULT: "transparent",
-	        hover: "transparent",
-	        press: "transparent",
+	        DEFAULT: themeColors.transparent,
+	        hover: themeColors.transparent,
+	        press: themeColors.transparent,
 	      },
 	    },
-	    semanticBorderColor: borderColors,
-	    semanticBackgroundColor: {
-	      ...bgColors,
-	      ...{ fill: fillColors },
-	    },
-	    semanticFillColor: fillColors,
 	    borderStyle: {
 	      solid: "solid",
 	      dashed: "dashed",
@@ -149,7 +130,6 @@ function requireGetCobaltTailwindcssConfig () {
 	      md: "0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)",
 	      lg: "0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)",
 	    },
-	    semanticTextColor: textColors,
 	    fontFamily: {
 	      base: baseFont,
 	      brand: `BrownPro,${baseFont}`,
@@ -305,7 +285,7 @@ function requireGetCobaltTailwindcssConfig () {
 	        fontWeight: 700,
 	        textTransform: "uppercase",
 	        letterSpacing: "-0.2px",
-	        color: theme("semanticTextColor").subdued,
+	        color: themeColors.onSurfaceVariant,
 	      },
 	    }),
 	  },
@@ -317,30 +297,6 @@ function requireGetCobaltTailwindcssConfig () {
 	    // custom border style classes, must be after border width plugin
 	    generators.borderStyle,
 	    // Semantic colors (handling hover/press color states)
-	    generators.getSemanticColorGenerator({
-	      type: "semanticTextColor",
-	      classPrefix: "text",
-	      cssProperty: "color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticTextColor",
-	      classPrefix: "placeholder",
-	      selectorSuffix: "::placeholder",
-	      cssProperty: "color",
-	      enableInteractiveColors: false,
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticTextColor",
-	      classPrefix: "placeholder",
-	      selectorSuffix: "::-moz-placeholder",
-	      cssProperty: "color",
-	      enableInteractiveColors: false,
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBackgroundColor",
-	      classPrefix: "bg",
-	      cssProperty: "background-color",
-	    }),
 	    generators.getSemanticColorGenerator({
 	      type: "semanticStateColor",
 	      classPrefix: "state",
@@ -351,74 +307,6 @@ function requireGetCobaltTailwindcssConfig () {
 	        },
 	      },
 	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticFillColor",
-	      classPrefix: "accent",
-	      cssProperty: "accent-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border",
-	      cssProperty: "border-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-t",
-	      cssProperty: "border-top-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-b",
-	      cssProperty: "border-bottom-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-l",
-	      cssProperty: "border-left-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-r",
-	      cssProperty: "border-right-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-e",
-	      cssProperty: "border-inline-end-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-s",
-	      cssProperty: "border-inline-start-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-y",
-	      cssProperty: "border-top",
-	      cssProperty2: "border-bottom",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "border-x",
-	      cssProperty: "border-left",
-	      cssProperty2: "border-right",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "divide",
-	      cssProperty: "border-color",
-	      selectorSuffix: " > :not([hidden]) ~ :not([hidden])",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "outline",
-	      cssProperty: "outline-color",
-	    }),
-	    generators.getSemanticColorGenerator({
-	      type: "semanticBorderColor",
-	      classPrefix: "ring",
-	      cssProperty: "--tw-ring-color",
-	    }),
 	  ],
 	});
 

package/utils/getCobaltTailwindcssConfig2.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig2.js","sources":["../../utils/getCobaltTailwindcssConfig.js"],"sourcesContent":["/*\n  FOR NODE ENVIRONMENT ONLY\n  Do never import tailwind file config (or helpers importing it) into Cobalt\n  components/stories on src/ side, it will result to have tailwindcss unecessary\n  dependencies into build files.\n  See https://github.com/tailwindcss/tailwindcss/issues/634#issuecomment-459740859\n  If you need data from the theme configuration, you can do the same as we did\n  for colors:\n    - create a json token file with the data needed (will be the single source of data)\n    - In the tailwindcss config file: import and use this json file\n    - In the src/ side: import and use this json file also\n*/\nconst defaultTheme = require(\"tailwindcss/defaultTheme\")\nconst breakpoints = require(\"../src/tokens/breakpoints.json\")\nconst legacyColors = require(\"../src/tokens/colors.json\")\nconst zIndexes = require(\"../src/tokens/zIndexes.json\")\nconst { getColorsUsingCSSVariables } = require(\"./helpers\")\nconst generators = require(\"./tailwindcssGenerators\")\n\nconst CSS_VAR_STATE_INTERACTIVE_COLOR = \"--c-state-interactive-color\"\n\nconst rem = (value) => `${value}rem`\n\nconst REM = {\n  _12px: 0.75,\n  _14px: 0.875,\n  _15px: 0.9375,\n  _16px: 1,\n  _18px: 1.125,\n  _20px: 1.25,\n  _24px: 1.5,\n  _28px: 1.75,\n  _32px: 2,\n  _36px: 2.25,\n  _40px: 2.5,\n  _44px: 2.75,\n  _56px: 3.5,\n  _60px: 3.75,\n  _64px: 4,\n}\n\nconst {\n  stroke: borderColors,\n  background: bgColors,\n  fill: fillColors,\n  text: textColors,\n} = getColorsUsingCSSVariables({\n  additionalColors: { transparent: \"transparent\" },\n})\n\nconst baseFont =\n  \"BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif\"\n\nconst getCobaltTailwindcssConfig = ({ content, safelist = undefined }) => ({\n  content,\n  safelist: safelist,\n  prefix: \"c-\",\n  // utilities to disable\n  corePlugins: {\n    // Don't use Tailwindcss reset and default styles\n    preflight: false,\n    // Handle by custom classes via generators\n    letterSpacing: false,\n    lineHeight: false,\n    borderStyle: false,\n    borderWidth: false,\n    fontSize: false,\n    // Not needed, at least for now\n    textOpacity: false,\n    backgroundOpacity: false,\n    caretColor: false,\n    boxShadowColor: false,\n    ringOffsetColor: false,\n    gradientColorStops: false,\n    gradientColorStopPositions: false,\n    textDecorationColor: false,\n    // SVG color\n    stroke: false,\n    fill: false,\n  },\n  theme: {\n    extend: {\n      transitionProperty: {\n        interactive: `${CSS_VAR_STATE_INTERACTIVE_COLOR}`,\n        DEFAULT: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.DEFAULT}`,\n        colors: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.colors}`,\n      },\n    },\n    colors: {\n      ...legacyColors, // deprecated\n      current: \"currentColor\",\n    },\n    semanticStateColor: {\n      interactive: {\n        DEFAULT: \"#00000000\",\n        hover: \"#00000005\",\n        press: \"#0000000F\",\n      },\n      onDrag: \"#00000029\",\n      none: {\n        DEFAULT: \"transparent\",\n        hover: \"transparent\",\n        press: \"transparent\",\n      },\n    },\n    semanticBorderColor: borderColors,\n    semanticBackgroundColor: {\n      ...bgColors,\n      ...{ fill: fillColors },\n    },\n    semanticFillColor: fillColors,\n    borderStyle: {\n      solid: \"solid\",\n      dashed: \"dashed\",\n      none: \"none\",\n    },\n    borderWidth: {\n      0: \"0\",\n      \"0_5\": \"0.5px\",\n      DEFAULT: \"1px\",\n      2: \"0.125rem\",\n      4: \".25rem\",\n    },\n    borderRadius: {\n      none: \"0\",\n      DEFAULT: \".25rem\", // c-rounded\n      md: \".375rem\",\n      lg: \".5rem\",\n      xl: \".75rem\",\n      \"2xl\": \"1rem\",\n      full: \"9999px\", // full rounded\n    },\n    boxShadow: {\n      DEFAULT: \"0 0.125rem 0.75rem rgba(0, 0, 0, 0.1)\", // c-shadow\n      md: \"0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)\",\n      lg: \"0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)\",\n    },\n    semanticTextColor: textColors,\n    fontFamily: {\n      base: baseFont,\n      brand: `BrownPro,${baseFont}`,\n      mono: \"Consolas,'Liberation Mono',Menlo,Courier,monospace\",\n    },\n    fontWeight: {\n      regular: \"400\",\n      bold: \"600\",\n    },\n    spacing: {\n      none: \"0\",\n      \"2xs\": \".25rem\",\n      xs: \".5rem\",\n      sm: \"1rem\",\n      md: \"1.5rem\",\n      lg: \"2rem\",\n      xl: \"3rem\",\n      \"2xl\": \"4rem\",\n    },\n    screens: { ...breakpoints },\n    zIndex: Object.fromEntries(\n      Object.entries(zIndexes).map(([key, value]) => [key, value.toString()])\n    ),\n    // custom properties, not processed by Tailwindcss itself\n    customText: ({ theme }) => ({\n      link: {\n        cursor: \"pointer\",\n        textDecoration: \"underline\",\n        fontWeight: 500,\n        textUnderlineOffset: \"2px\",\n        hover: {\n          textDecoration: \"none\",\n        },\n        focus: {\n          textDecoration: \"none\",\n        },\n      },\n      linkVariant: {\n        cursor: \"pointer\",\n        textDecoration: \"none\",\n        fontWeight: 500,\n        textUnderlineOffset: \"2px\",\n        hover: {\n          textDecoration: \"underline\",\n        },\n        focus: {\n          textDecoration: \"underline\",\n        },\n      },\n      heading: {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._36px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: \"-0.5px\",\n        from: {\n          sm: {\n            fontSize: rem(REM._56px),\n          },\n        },\n      },\n      subheading: {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._20px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: \"-0.5px\",\n        from: {\n          sm: {\n            fontSize: rem(REM._28px),\n          },\n        },\n      },\n      \"title-xl\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._32px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._32px),\n        from: {\n          sm: {\n            fontSize: rem(REM._40px),\n            letterSpacing: rem((-2 / 100) * REM._40px),\n          },\n        },\n      },\n      \"title-lg\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._24px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._24px),\n        from: {\n          sm: {\n            fontSize: rem(REM._32px),\n            letterSpacing: rem((-2 / 100) * REM._32px),\n          },\n        },\n      },\n      \"title-md\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._20px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._20px),\n        from: {\n          sm: {\n            fontSize: rem(REM._24px),\n            letterSpacing: rem((-2 / 100) * REM._24px),\n          },\n        },\n      },\n      \"title-sm\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._16px),\n        lineHeight: \"125%\",\n        fontWeight: 600,\n        letterSpacing: rem((-2 / 100) * REM._16px),\n        from: {\n          sm: {\n            fontSize: rem(REM._20px),\n            letterSpacing: rem((-2 / 100) * REM._20px),\n          },\n        },\n      },\n      \"title-xs\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._16px),\n        lineHeight: \"125%\",\n        fontWeight: 600,\n        letterSpacing: rem((-2 / 100) * REM._16px),\n      },\n      //\n      \"body-lg\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._18px),\n        lineHeight: rem(REM._24px),\n      },\n      \"body-md\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._16px),\n        lineHeight: rem(REM._24px),\n      },\n      \"body-sm\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._12px),\n        lineHeight: rem(REM._16px),\n      },\n      \"section-heading\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._14px),\n        lineHeight: \"175%\",\n        fontWeight: 700,\n        textTransform: \"uppercase\",\n        letterSpacing: \"-0.2px\",\n        color: theme(\"semanticTextColor\").subdued,\n      },\n    }),\n  },\n  plugins: [\n    // custom typography classes\n    generators.text,\n    // custom border width classes (width default solid style)\n    generators.borderWidth,\n    // custom border style classes, must be after border width plugin\n    generators.borderStyle,\n    // Semantic colors (handling hover/press color states)\n    generators.getSemanticColorGenerator({\n      type: \"semanticTextColor\",\n      classPrefix: \"text\",\n      cssProperty: \"color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticTextColor\",\n      classPrefix: \"placeholder\",\n      selectorSuffix: \"::placeholder\",\n      cssProperty: \"color\",\n      enableInteractiveColors: false,\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticTextColor\",\n      classPrefix: \"placeholder\",\n      selectorSuffix: \"::-moz-placeholder\",\n      cssProperty: \"color\",\n      enableInteractiveColors: false,\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBackgroundColor\",\n      classPrefix: \"bg\",\n      cssProperty: \"background-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticStateColor\",\n      classPrefix: \"state\",\n      cssProperty: CSS_VAR_STATE_INTERACTIVE_COLOR,\n      additionalRules: {\n        interactive: {\n          \"background-image\": `linear-gradient(var(${CSS_VAR_STATE_INTERACTIVE_COLOR}), var(${CSS_VAR_STATE_INTERACTIVE_COLOR}))`,\n        },\n      },\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticFillColor\",\n      classPrefix: \"accent\",\n      cssProperty: \"accent-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border\",\n      cssProperty: \"border-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-t\",\n      cssProperty: \"border-top-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-b\",\n      cssProperty: \"border-bottom-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-l\",\n      cssProperty: \"border-left-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-r\",\n      cssProperty: \"border-right-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-e\",\n      cssProperty: \"border-inline-end-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-s\",\n      cssProperty: \"border-inline-start-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-y\",\n      cssProperty: \"border-top\",\n      cssProperty2: \"border-bottom\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"border-x\",\n      cssProperty: \"border-left\",\n      cssProperty2: \"border-right\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"divide\",\n      cssProperty: \"border-color\",\n      selectorSuffix: \" > :not([hidden]) ~ :not([hidden])\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"outline\",\n      cssProperty: \"outline-color\",\n    }),\n    generators.getSemanticColorGenerator({\n      type: \"semanticBorderColor\",\n      classPrefix: \"ring\",\n      cssProperty: \"--tw-ring-color\",\n    }),\n  ],\n})\n\nmodule.exports = getCobaltTailwindcssConfig\n"],"names":["require$$4","require$$5"],"mappings":"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"}
+{"version":3,"file":"getCobaltTailwindcssConfig2.js","sources":["../../utils/getCobaltTailwindcssConfig.js"],"sourcesContent":["/*\n  FOR NODE ENVIRONMENT ONLY\n  Do never import tailwind file config (or helpers importing it) into Cobalt\n  components/stories on src/ side, it will result to have tailwindcss unecessary\n  dependencies into build files.\n  See https://github.com/tailwindcss/tailwindcss/issues/634#issuecomment-459740859\n  If you need data from the theme configuration, you can do the same as we did\n  for colors:\n    - create a json token file with the data needed (will be the single source of data)\n    - In the tailwindcss config file: import and use this json file\n    - In the src/ side: import and use this json file also\n*/\nconst defaultTheme = require(\"tailwindcss/defaultTheme\")\nconst breakpoints = require(\"../src/tokens/breakpoints.json\")\nconst zIndexes = require(\"../src/tokens/zIndexes.json\")\nconst { getColorsUsingCSSVariables } = require(\"./helpers\")\nconst generators = require(\"./tailwindcssGenerators\")\n\nconst CSS_VAR_STATE_INTERACTIVE_COLOR = \"--c-state-interactive-color\"\n\nconst rem = (value) => `${value}rem`\n\nconst REM = {\n  _12px: 0.75,\n  _14px: 0.875,\n  _15px: 0.9375,\n  _16px: 1,\n  _18px: 1.125,\n  _20px: 1.25,\n  _24px: 1.5,\n  _28px: 1.75,\n  _32px: 2,\n  _36px: 2.25,\n  _40px: 2.5,\n  _44px: 2.75,\n  _56px: 3.5,\n  _60px: 3.75,\n  _64px: 4,\n}\n\nconst { themeColors, stateColors } = getColorsUsingCSSVariables({\n  additionalColors: { transparent: \"transparent\", current: \"currentColor\" },\n})\n\nconst baseFont =\n  \"BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif\"\n\nconst getCobaltTailwindcssConfig = ({ content, safelist = undefined }) => ({\n  content,\n  safelist: safelist,\n  prefix: \"c-\",\n  // utilities to disable\n  corePlugins: {\n    // Don't use Tailwindcss reset and default styles\n    preflight: false,\n    // Handle by custom classes via generators\n    letterSpacing: false,\n    lineHeight: false,\n    borderStyle: false,\n    borderWidth: false,\n    fontSize: false,\n    // Not needed, at least for now\n    textOpacity: false,\n    backgroundOpacity: false,\n    caretColor: false,\n    boxShadowColor: false,\n    ringOffsetColor: false,\n    gradientColorStops: false,\n    gradientColorStopPositions: false,\n    textDecorationColor: false,\n  },\n  theme: {\n    extend: {\n      transitionProperty: {\n        interactive: `${CSS_VAR_STATE_INTERACTIVE_COLOR}`,\n        DEFAULT: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.DEFAULT}`,\n        colors: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.colors}`,\n      },\n    },\n    colors: themeColors,\n    semanticStateColor: {\n      interactive: {\n        DEFAULT: themeColors.transparent,\n        hover: stateColors.hover,\n        press: stateColors.press,\n      },\n      onDrag: stateColors.drag,\n      none: {\n        DEFAULT: themeColors.transparent,\n        hover: themeColors.transparent,\n        press: themeColors.transparent,\n      },\n    },\n    borderStyle: {\n      solid: \"solid\",\n      dashed: \"dashed\",\n      none: \"none\",\n    },\n    borderWidth: {\n      0: \"0\",\n      \"0_5\": \"0.5px\",\n      DEFAULT: \"1px\",\n      2: \"0.125rem\",\n      4: \".25rem\",\n    },\n    borderRadius: {\n      none: \"0\",\n      DEFAULT: \".25rem\", // c-rounded\n      md: \".375rem\",\n      lg: \".5rem\",\n      xl: \".75rem\",\n      \"2xl\": \"1rem\",\n      full: \"9999px\", // full rounded\n    },\n    boxShadow: {\n      DEFAULT: \"0 0.125rem 0.75rem rgba(0, 0, 0, 0.1)\", // c-shadow\n      md: \"0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)\",\n      lg: \"0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)\",\n    },\n    fontFamily: {\n      base: baseFont,\n      brand: `BrownPro,${baseFont}`,\n      mono: \"Consolas,'Liberation Mono',Menlo,Courier,monospace\",\n    },\n    fontWeight: {\n      regular: \"400\",\n      bold: \"600\",\n    },\n    spacing: {\n      none: \"0\",\n      \"2xs\": \".25rem\",\n      xs: \".5rem\",\n      sm: \"1rem\",\n      md: \"1.5rem\",\n      lg: \"2rem\",\n      xl: \"3rem\",\n      \"2xl\": \"4rem\",\n    },\n    screens: { ...breakpoints },\n    zIndex: Object.fromEntries(\n      Object.entries(zIndexes).map(([key, value]) => [key, value.toString()])\n    ),\n    // custom properties, not processed by Tailwindcss itself\n    customText: ({ theme }) => ({\n      link: {\n        cursor: \"pointer\",\n        textDecoration: \"underline\",\n        fontWeight: 500,\n        textUnderlineOffset: \"2px\",\n        hover: {\n          textDecoration: \"none\",\n        },\n        focus: {\n          textDecoration: \"none\",\n        },\n      },\n      linkVariant: {\n        cursor: \"pointer\",\n        textDecoration: \"none\",\n        fontWeight: 500,\n        textUnderlineOffset: \"2px\",\n        hover: {\n          textDecoration: \"underline\",\n        },\n        focus: {\n          textDecoration: \"underline\",\n        },\n      },\n      heading: {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._36px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: \"-0.5px\",\n        from: {\n          sm: {\n            fontSize: rem(REM._56px),\n          },\n        },\n      },\n      subheading: {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._20px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: \"-0.5px\",\n        from: {\n          sm: {\n            fontSize: rem(REM._28px),\n          },\n        },\n      },\n      \"title-xl\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._32px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._32px),\n        from: {\n          sm: {\n            fontSize: rem(REM._40px),\n            letterSpacing: rem((-2 / 100) * REM._40px),\n          },\n        },\n      },\n      \"title-lg\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._24px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._24px),\n        from: {\n          sm: {\n            fontSize: rem(REM._32px),\n            letterSpacing: rem((-2 / 100) * REM._32px),\n          },\n        },\n      },\n      \"title-md\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._20px),\n        lineHeight: \"125%\",\n        fontWeight: 700,\n        letterSpacing: rem((-2 / 100) * REM._20px),\n        from: {\n          sm: {\n            fontSize: rem(REM._24px),\n            letterSpacing: rem((-2 / 100) * REM._24px),\n          },\n        },\n      },\n      \"title-sm\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._16px),\n        lineHeight: \"125%\",\n        fontWeight: 600,\n        letterSpacing: rem((-2 / 100) * REM._16px),\n        from: {\n          sm: {\n            fontSize: rem(REM._20px),\n            letterSpacing: rem((-2 / 100) * REM._20px),\n          },\n        },\n      },\n      \"title-xs\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._16px),\n        lineHeight: \"125%\",\n        fontWeight: 600,\n        letterSpacing: rem((-2 / 100) * REM._16px),\n      },\n      //\n      \"body-lg\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._18px),\n        lineHeight: rem(REM._24px),\n      },\n      \"body-md\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._16px),\n        lineHeight: rem(REM._24px),\n      },\n      \"body-sm\": {\n        fontFamily: theme(\"fontFamily\").base,\n        fontSize: rem(REM._12px),\n        lineHeight: rem(REM._16px),\n      },\n      \"section-heading\": {\n        fontFamily: theme(\"fontFamily\").brand,\n        fontSize: rem(REM._14px),\n        lineHeight: \"175%\",\n        fontWeight: 700,\n        textTransform: \"uppercase\",\n        letterSpacing: \"-0.2px\",\n        color: themeColors.onSurfaceVariant,\n      },\n    }),\n  },\n  plugins: [\n    // custom typography classes\n    generators.text,\n    // custom border width classes (width default solid style)\n    generators.borderWidth,\n    // custom border style classes, must be after border width plugin\n    generators.borderStyle,\n    // Semantic colors (handling hover/press color states)\n    generators.getSemanticColorGenerator({\n      type: \"semanticStateColor\",\n      classPrefix: \"state\",\n      cssProperty: CSS_VAR_STATE_INTERACTIVE_COLOR,\n      additionalRules: {\n        interactive: {\n          \"background-image\": `linear-gradient(var(${CSS_VAR_STATE_INTERACTIVE_COLOR}), var(${CSS_VAR_STATE_INTERACTIVE_COLOR}))`,\n        },\n      },\n    }),\n  ],\n})\n\nmodule.exports = getCobaltTailwindcssConfig\n"],"names":["require$$3","require$$4"],"mappings":"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"}

package/utils/helpers.js

@@ -18,47 +18,22 @@ function requireHelpers () {
 	  DARK: "dark",
 	};
 	const DEFAULT_THEME_MODE = THEME_MODES.LIGHT;
-	const MODIFIERS = {
-	  HOVER: "hover",
-	  PRESS: "press",
-	};
+
+	const STATES_COLORS = ["hover", "press", "drag", "focus"];
 
 	const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 
 	// Get the CSS Variable name from a palette/colors name
 	// ex: (green, 900) => --c-green-900
-	// ex: (turquoise, "", true) => --c-l-turquoise
-	const getCSSVariableNameFromColorName = ({ color, modifier = "" }) => {
-	  return `${COLOR_PREFIX}-${color}${modifier ? `-${modifier}` : modifier}`
+	// ex: (white) => --c-white
+	const getCSSVariableNameFromColorName = ({ color, scale = "" }) => {
+	  return `${COLOR_PREFIX}-${color}${scale ? `-${scale}` : scale}`
 	};
 
-	// Get the CSS Variable name from a theme color name and category
-	// ex: (background, connect) => --c-background-connect
-	// ex: (background, accentInteractive, hover) => --c-background-connect--hover
-	const getCSSVariableNameFromThemeName = ({
-	  category,
-	  color,
-	  modifier = "",
-	}) => {
-	  return `${COLOR_PREFIX}-${category}-${color}${
-	    modifier && modifier !== DEFAULT_KEY ? `--${modifier}` : ""
-	  }`
-	};
-
-	// Get theme value from theme color name and category
-	// ex: (background, connect) => "turquoise.500/turquoise.500"
-	// ex: (background, accentInteractive, hover) => "purple.700/purpleDeep.400"
-	const getThemeValueFromThemeColor = ({ category, color, modifier = "" }) => {
-	  const colorProp = themeTokens[category][color];
-	  if (typeof colorProp !== "object") return colorProp
-	  if (modifier && modifier in colorProp) {
-	    return colorProp[modifier]
-	  }
-	  if (!modifier && "DEFAULT" in colorProp) {
-	    return colorProp.DEFAULT
-	  } else {
-	    return colorProp
-	  }
+	// Get the CSS Variable name from a theme color name
+	// ex: (surface) => --c-surface
+	const getCSSVariableNameFromThemeName = (themeName) => {
+	  return `${COLOR_PREFIX}-${themeName}`
 	};
 
 	// Get the theme final color from the theme color value
@@ -98,61 +73,57 @@ function requireHelpers () {
 	};
 
 	// Get color CSS Variable from theme value
-	// ex: ("red/red.500/red.200", THEME_MODES.LEGACY) => --c-l-red
+	// ex: ("red/red.500/red.200", THEME_MODES.DARK) => --c-l-red
 	// ex: ("red/red.500/red.200", THEME_MODES.LIGHT) => --c-red-500
 	const getColorCSSVariableFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
 	  getColorCSSVariableFromThemeColor(getThemeColorFromThemeValue(value, mode));
 
 	// Get color value from the theme value
-	// ex: ("red/red.500/red.200", THEME_MODES.LEGACY) => #ff7378
+	// ex: ("red/red.500/red.200", THEME_MODES.DARK) => #ff7378
 	// ex: ("red/red.500/red.200", THEME_MODES.LIGHT) => #c71414
 	const getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
 	  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode));
 
+	const getColorsUsingCSSVariables = ({ additionalColors } = {}) => {
+	  const colorsUsingCSSVariables = {};
+	  const stateColorsUsingCSSVariables = {};
+	  // eslint-disable-next-line guard-for-in
+	  for (const themeProp in themeTokens) {
+	    if (STATES_COLORS.includes(themeProp)) {
+	      stateColorsUsingCSSVariables[themeProp] =
+	        `var(${getCSSVariableNameFromThemeName(themeProp)})`;
+	    } else {
+	      colorsUsingCSSVariables[themeProp] =
+	        `var(${getCSSVariableNameFromThemeName(themeProp)})`;
+	    }
+	  }
+
+	  if (additionalColors) {
+	    for (const color in additionalColors) {
+	      if (hasProp(additionalColors, color)) {
+	        colorsUsingCSSVariables[color] = additionalColors[color];
+	      }
+	    }
+	  }
+
+	  return {
+	    stateColors: stateColorsUsingCSSVariables,
+	    themeColors: colorsUsingCSSVariables,
+	  }
+	};
+
 	helpers = {
 	  DEFAULT_THEME_MODE,
 	  DEFAULT_KEY,
-	  COLOR_PREFIX,
-	  MODIFIERS,
 	  THEME_MODES,
 	  // Following rule https://eslint.org/docs/rules/no-prototype-builtins
 	  hasProp,
 	  getColorCSSVariableFromThemeValue,
 	  getCSSVariableNameFromThemeName,
 	  getCSSVariableNameFromColorName,
-	  getThemeValueFromThemeColor,
 	  getThemeColorFromThemeValue,
 	  getColorFromThemeValue,
-	  getColorsUsingCSSVariables: ({ additionalColors } = {}) => {
-	    const colorsUsingCSSVariables = JSON.parse(JSON.stringify(themeTokens));
-	    // eslint-disable-next-line guard-for-in
-	    for (const category in themeTokens) {
-	      for (const color in themeTokens[category]) {
-	        if (typeof themeTokens[category][color] === "string") {
-	          colorsUsingCSSVariables[category][color] =
-	            `var(${getCSSVariableNameFromThemeName({ category, color })})`;
-	        } else {
-	          // eslint-disable-next-line guard-for-in
-	          for (const modifier in themeTokens[category][color]) {
-	            colorsUsingCSSVariables[category][color][modifier] =
-	              `var(${getCSSVariableNameFromThemeName({
-	                category,
-	                color,
-	                modifier,
-	              })})`;
-	          }
-	        }
-	      }
-	      if (additionalColors) {
-	        for (const color in additionalColors) {
-	          if (hasProp(additionalColors, color)) {
-	            colorsUsingCSSVariables[category][color] = additionalColors[color];
-	          }
-	        }
-	      }
-	    }
-	    return colorsUsingCSSVariables
-	  },
+	  getColorsUsingCSSVariables,
 	};
 	return helpers;
 }

package/utils/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../utils/helpers.js"],"sourcesContent":["const themeTokens = require(\"../src/tokens/theme.json\")\nconst palette = require(\"../src/tokens/palette.json\")\n\nconst DEFAULT_KEY = \"DEFAULT\"\nconst COLOR_PREFIX = \"--c\"\n\nconst THEME_MODES = {\n  LIGHT: \"light\",\n  DARK: \"dark\",\n}\nconst DEFAULT_THEME_MODE = THEME_MODES.LIGHT\nconst MODIFIERS = {\n  HOVER: \"hover\",\n  PRESS: \"press\",\n}\n\nconst hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)\n\n// Get the CSS Variable name from a palette/colors name\n// ex: (green, 900) => --c-green-900\n// ex: (turquoise, \"\", true) => --c-l-turquoise\nconst getCSSVariableNameFromColorName = ({ color, modifier = \"\" }) => {\n  return `${COLOR_PREFIX}-${color}${modifier ? `-${modifier}` : modifier}`\n}\n\n// Get the CSS Variable name from a theme color name and category\n// ex: (background, connect) => --c-background-connect\n// ex: (background, accentInteractive, hover) => --c-background-connect--hover\nconst getCSSVariableNameFromThemeName = ({\n  category,\n  color,\n  modifier = \"\",\n}) => {\n  return `${COLOR_PREFIX}-${category}-${color}${\n    modifier && modifier !== DEFAULT_KEY ? `--${modifier}` : \"\"\n  }`\n}\n\n// Get theme value from theme color name and category\n// ex: (background, connect) => \"turquoise.500/turquoise.500\"\n// ex: (background, accentInteractive, hover) => \"purple.700/purpleDeep.400\"\nconst getThemeValueFromThemeColor = ({ category, color, modifier = \"\" }) => {\n  const colorProp = themeTokens[category][color]\n  if (typeof colorProp !== \"object\") return colorProp\n  if (modifier && modifier in colorProp) {\n    return colorProp[modifier]\n  }\n  if (!modifier && \"DEFAULT\" in colorProp) {\n    return colorProp.DEFAULT\n  } else {\n    return colorProp\n  }\n}\n\n// Get the theme final color from the theme color value\n// ex: (\"red.500/red.200\", THEME_MODES.LIGHT) => red.500\n// ex: (\"red.500/red.200\", THEME_MODES.DARK) => red.200\nconst getThemeColorFromThemeValue = (themeValue, mode = DEFAULT_THEME_MODE) => {\n  const splitPosition = mode === THEME_MODES.LIGHT ? 0 : 1\n\n  return themeValue.split(\"/\")[splitPosition]\n}\n\n// Get the CSS Variable from the theme final color\n// ex: (green.900) => --c-green-900\nconst getColorCSSVariableFromThemeColor = (value) => {\n  const [colorName, colorVariant] = value.split(\".\")\n  if (colorVariant) {\n    return `${COLOR_PREFIX}-${colorName}-${colorVariant}`\n  } else {\n    return `${COLOR_PREFIX}-${value}`\n  }\n}\n\n// Get the color value from the theme final color\n// (red) => #ff7378\n// (red.500) => #c71414\nconst getColorFromThemeColor = (name) => {\n  const [colorName, colorVariant] = name.split(\".\")\n  if (hasProp(palette, colorName)) {\n    if (colorVariant) {\n      return palette[colorName][colorVariant]\n    } else if (typeof palette[colorName] === \"string\") {\n      return palette[colorName]\n    } else {\n      return palette[colorName][DEFAULT_KEY]\n    }\n  }\n}\n\n// Get color CSS Variable from theme value\n// ex: (\"red/red.500/red.200\", THEME_MODES.LEGACY) => --c-l-red\n// ex: (\"red/red.500/red.200\", THEME_MODES.LIGHT) => --c-red-500\nconst getColorCSSVariableFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>\n  getColorCSSVariableFromThemeColor(getThemeColorFromThemeValue(value, mode))\n\n// Get color value from the theme value\n// ex: (\"red/red.500/red.200\", THEME_MODES.LEGACY) => #ff7378\n// ex: (\"red/red.500/red.200\", THEME_MODES.LIGHT) => #c71414\nconst getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>\n  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode))\n\nmodule.exports = {\n  DEFAULT_THEME_MODE,\n  DEFAULT_KEY,\n  COLOR_PREFIX,\n  MODIFIERS,\n  THEME_MODES,\n  // Following rule https://eslint.org/docs/rules/no-prototype-builtins\n  hasProp,\n  getColorCSSVariableFromThemeValue,\n  getCSSVariableNameFromThemeName,\n  getCSSVariableNameFromColorName,\n  getThemeValueFromThemeColor,\n  getThemeColorFromThemeValue,\n  getColorFromThemeValue,\n  getColorsUsingCSSVariables: ({ additionalColors } = {}) => {\n    const colorsUsingCSSVariables = JSON.parse(JSON.stringify(themeTokens))\n    // eslint-disable-next-line guard-for-in\n    for (const category in themeTokens) {\n      for (const color in themeTokens[category]) {\n        if (typeof themeTokens[category][color] === \"string\") {\n          colorsUsingCSSVariables[category][color] =\n            `var(${getCSSVariableNameFromThemeName({ category, color })})`\n        } else {\n          // eslint-disable-next-line guard-for-in\n          for (const modifier in themeTokens[category][color]) {\n            colorsUsingCSSVariables[category][color][modifier] =\n              `var(${getCSSVariableNameFromThemeName({\n                category,\n                color,\n                modifier,\n              })})`\n          }\n        }\n      }\n      if (additionalColors) {\n        for (const color in additionalColors) {\n          if (hasProp(additionalColors, color)) {\n            colorsUsingCSSVariables[category][color] = additionalColors[color]\n          }\n        }\n      }\n    }\n    return colorsUsingCSSVariables\n  },\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helpers.js","sources":["../../utils/helpers.js"],"sourcesContent":["const themeTokens = require(\"../src/tokens/theme.json\")\nconst palette = require(\"../src/tokens/palette.json\")\n\nconst DEFAULT_KEY = \"DEFAULT\"\nconst COLOR_PREFIX = \"--c\"\n\nconst THEME_MODES = {\n  LIGHT: \"light\",\n  DARK: \"dark\",\n}\nconst DEFAULT_THEME_MODE = THEME_MODES.LIGHT\n\nconst STATES_COLORS = [\"hover\", \"press\", \"drag\", \"focus\"]\n\nconst hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)\n\n// Get the CSS Variable name from a palette/colors name\n// ex: (green, 900) => --c-green-900\n// ex: (white) => --c-white\nconst getCSSVariableNameFromColorName = ({ color, scale = \"\" }) => {\n  return `${COLOR_PREFIX}-${color}${scale ? `-${scale}` : scale}`\n}\n\n// Get the CSS Variable name from a theme color name\n// ex: (surface) => --c-surface\nconst getCSSVariableNameFromThemeName = (themeName) => {\n  return `${COLOR_PREFIX}-${themeName}`\n}\n\n// Get the theme final color from the theme color value\n// ex: (\"red.500/red.200\", THEME_MODES.LIGHT) => red.500\n// ex: (\"red.500/red.200\", THEME_MODES.DARK) => red.200\nconst getThemeColorFromThemeValue = (themeValue, mode = DEFAULT_THEME_MODE) => {\n  const splitPosition = mode === THEME_MODES.LIGHT ? 0 : 1\n\n  return themeValue.split(\"/\")[splitPosition]\n}\n\n// Get the CSS Variable from the theme final color\n// ex: (green.900) => --c-green-900\nconst getColorCSSVariableFromThemeColor = (value) => {\n  const [colorName, colorVariant] = value.split(\".\")\n  if (colorVariant) {\n    return `${COLOR_PREFIX}-${colorName}-${colorVariant}`\n  } else {\n    return `${COLOR_PREFIX}-${value}`\n  }\n}\n\n// Get the color value from the theme final color\n// (red) => #ff7378\n// (red.500) => #c71414\nconst getColorFromThemeColor = (name) => {\n  const [colorName, colorVariant] = name.split(\".\")\n  if (hasProp(palette, colorName)) {\n    if (colorVariant) {\n      return palette[colorName][colorVariant]\n    } else if (typeof palette[colorName] === \"string\") {\n      return palette[colorName]\n    } else {\n      return palette[colorName][DEFAULT_KEY]\n    }\n  }\n}\n\n// Get color CSS Variable from theme value\n// ex: (\"red/red.500/red.200\", THEME_MODES.DARK) => --c-l-red\n// ex: (\"red/red.500/red.200\", THEME_MODES.LIGHT) => --c-red-500\nconst getColorCSSVariableFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>\n  getColorCSSVariableFromThemeColor(getThemeColorFromThemeValue(value, mode))\n\n// Get color value from the theme value\n// ex: (\"red/red.500/red.200\", THEME_MODES.DARK) => #ff7378\n// ex: (\"red/red.500/red.200\", THEME_MODES.LIGHT) => #c71414\nconst getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>\n  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode))\n\nconst getColorsUsingCSSVariables = ({ additionalColors } = {}) => {\n  const colorsUsingCSSVariables = {}\n  const stateColorsUsingCSSVariables = {}\n  // eslint-disable-next-line guard-for-in\n  for (const themeProp in themeTokens) {\n    if (STATES_COLORS.includes(themeProp)) {\n      stateColorsUsingCSSVariables[themeProp] =\n        `var(${getCSSVariableNameFromThemeName(themeProp)})`\n    } else {\n      colorsUsingCSSVariables[themeProp] =\n        `var(${getCSSVariableNameFromThemeName(themeProp)})`\n    }\n  }\n\n  if (additionalColors) {\n    for (const color in additionalColors) {\n      if (hasProp(additionalColors, color)) {\n        colorsUsingCSSVariables[color] = additionalColors[color]\n      }\n    }\n  }\n\n  return {\n    stateColors: stateColorsUsingCSSVariables,\n    themeColors: colorsUsingCSSVariables,\n  }\n}\n\nmodule.exports = {\n  DEFAULT_THEME_MODE,\n  DEFAULT_KEY,\n  THEME_MODES,\n  // Following rule https://eslint.org/docs/rules/no-prototype-builtins\n  hasProp,\n  getColorCSSVariableFromThemeValue,\n  getCSSVariableNameFromThemeName,\n  getCSSVariableNameFromColorName,\n  getThemeColorFromThemeValue,\n  getColorFromThemeValue,\n  getColorsUsingCSSVariables,\n}\n"],"names":[],"mappings":"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"}

package/cjs/tokens/colors.js

@@ -1,78 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const white = "#fff";
-const grey = {
-	lighter: "#f8f7f8",
-	light: "#edebed",
-	DEFAULT: "#dbd8dc",
-	dark: "#a49da7"
-};
-const indigo = {
-	DEFAULT: "#61366b",
-	dark: "#390446"
-};
-const purple = {
-	light: "#d076ca",
-	DEFAULT: "#b01aa7"
-};
-const graphite = {
-	light: "#757575",
-	DEFAULT: "#333"
-};
-const turquoise = "#5ecbdd";
-const coral = "#ffa484";
-const amber = "#ffc25a";
-const red = "#ff7378";
-const green = {
-	light: "#0fffb3",
-	DEFAULT: "#00da94",
-	dark: "#00a873"
-};
-const blue = "#2ea2ea";
-const deprecatedBlueGhost = "#2ea2ea0f";
-const deprecatedDriver = "#ffd988";
-const deprecatedSeasonLow = "#BDFFAC";
-const deprecatedSeasonMedium = "#94EA84";
-const deprecatedSeasonHigh = "#73C865";
-const deprecatedSeasonVeryHigh = "#54A949";
-var _colors = {
-	white: white,
-	grey: grey,
-	indigo: indigo,
-	purple: purple,
-	graphite: graphite,
-	turquoise: turquoise,
-	coral: coral,
-	amber: amber,
-	red: red,
-	green: green,
-	blue: blue,
-	deprecatedBlueGhost: deprecatedBlueGhost,
-	deprecatedDriver: deprecatedDriver,
-	deprecatedSeasonLow: deprecatedSeasonLow,
-	deprecatedSeasonMedium: deprecatedSeasonMedium,
-	deprecatedSeasonHigh: deprecatedSeasonHigh,
-	deprecatedSeasonVeryHigh: deprecatedSeasonVeryHigh
-};
-
-exports.amber = amber;
-exports.blue = blue;
-exports.coral = coral;
-exports["default"] = _colors;
-exports.deprecatedBlueGhost = deprecatedBlueGhost;
-exports.deprecatedDriver = deprecatedDriver;
-exports.deprecatedSeasonHigh = deprecatedSeasonHigh;
-exports.deprecatedSeasonLow = deprecatedSeasonLow;
-exports.deprecatedSeasonMedium = deprecatedSeasonMedium;
-exports.deprecatedSeasonVeryHigh = deprecatedSeasonVeryHigh;
-exports.graphite = graphite;
-exports.green = green;
-exports.grey = grey;
-exports.indigo = indigo;
-exports.purple = purple;
-exports.red = red;
-exports.turquoise = turquoise;
-exports.white = white;
-//# sourceMappingURL=colors.js.map

package/cjs/tokens/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/src/tokens/colors.js

@@ -1,57 +0,0 @@
-const white = "#fff";
-const grey = {
-	lighter: "#f8f7f8",
-	light: "#edebed",
-	DEFAULT: "#dbd8dc",
-	dark: "#a49da7"
-};
-const indigo = {
-	DEFAULT: "#61366b",
-	dark: "#390446"
-};
-const purple = {
-	light: "#d076ca",
-	DEFAULT: "#b01aa7"
-};
-const graphite = {
-	light: "#757575",
-	DEFAULT: "#333"
-};
-const turquoise = "#5ecbdd";
-const coral = "#ffa484";
-const amber = "#ffc25a";
-const red = "#ff7378";
-const green = {
-	light: "#0fffb3",
-	DEFAULT: "#00da94",
-	dark: "#00a873"
-};
-const blue = "#2ea2ea";
-const deprecatedBlueGhost = "#2ea2ea0f";
-const deprecatedDriver = "#ffd988";
-const deprecatedSeasonLow = "#BDFFAC";
-const deprecatedSeasonMedium = "#94EA84";
-const deprecatedSeasonHigh = "#73C865";
-const deprecatedSeasonVeryHigh = "#54A949";
-var require$$2 = {
-	white: white,
-	grey: grey,
-	indigo: indigo,
-	purple: purple,
-	graphite: graphite,
-	turquoise: turquoise,
-	coral: coral,
-	amber: amber,
-	red: red,
-	green: green,
-	blue: blue,
-	deprecatedBlueGhost: deprecatedBlueGhost,
-	deprecatedDriver: deprecatedDriver,
-	deprecatedSeasonLow: deprecatedSeasonLow,
-	deprecatedSeasonMedium: deprecatedSeasonMedium,
-	deprecatedSeasonHigh: deprecatedSeasonHigh,
-	deprecatedSeasonVeryHigh: deprecatedSeasonVeryHigh
-};
-
-export { amber, blue, coral, require$$2 as default, deprecatedBlueGhost, deprecatedDriver, deprecatedSeasonHigh, deprecatedSeasonLow, deprecatedSeasonMedium, deprecatedSeasonVeryHigh, graphite, green, grey, indigo, purple, red, turquoise, white };
-//# sourceMappingURL=colors.js.map

package/src/tokens/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}