@drivy/cobalt 0.48.0 → 0.49.1

package/utils/getCobaltTailwindcssConfig.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from '../_virtual/_commonjsHelpers.js';
+import { __require as requireGetCobaltTailwindcssConfig } from './getCobaltTailwindcssConfig2.js';
+
+var getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();
+var getCobaltTailwindcssConfig = /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);
+
+export { getCobaltTailwindcssConfig as default };
+//# sourceMappingURL=getCobaltTailwindcssConfig.js.map

package/utils/getCobaltTailwindcssConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}

package/utils/getCobaltTailwindcssConfig2.js

@@ -0,0 +1,372 @@
+import require$$0 from '../src/tokens/breakpoints.js';
+import require$$1 from '../src/tokens/colors.js';
+import require$$2 from '../src/tokens/zIndexes.js';
+import { __require as requireHelpers } from './helpers.js';
+import { __require as requireTailwindcssGenerators } from './tailwindcssGenerators.js';
+
+/*
+  FOR NODE ENVIRONMENT ONLY
+  Do never import tailwind file config (or helpers importing it) into Cobalt
+  components/stories on src/ side, it will result to have tailwindcss unecessary
+  dependencies into build files.
+  See https://github.com/tailwindcss/tailwindcss/issues/634#issuecomment-459740859
+  If you need data from the theme configuration, you can do the same as we did
+  for colors:
+    - create a json token file with the data needed (will be the single source of data)
+    - In the tailwindcss config file: import and use this json file
+    - In the src/ side: import and use this json file also
+*/
+
+var getCobaltTailwindcssConfig_1;
+var hasRequiredGetCobaltTailwindcssConfig;
+
+function requireGetCobaltTailwindcssConfig () {
+	if (hasRequiredGetCobaltTailwindcssConfig) return getCobaltTailwindcssConfig_1;
+	hasRequiredGetCobaltTailwindcssConfig = 1;
+	const breakpoints = require$$0;
+	const legacyColors = require$$1;
+	const zIndexes = require$$2;
+	const { getColorsUsingCSSVariables } = requireHelpers();
+	const generators = requireTailwindcssGenerators();
+
+	const rem = (value) => `${value}rem`;
+
+	const REM = {
+	  _12px: 0.75,
+	  _14px: 0.875,
+	  _15px: 0.9375,
+	  _16px: 1,
+	  _18px: 1.125,
+	  _20px: 1.25,
+	  _24px: 1.5,
+	  _28px: 1.75,
+	  _32px: 2,
+	  _36px: 2.25,
+	  _40px: 2.5,
+	  _44px: 2.75,
+	  _56px: 3.5,
+	  _60px: 3.75,
+	  _64px: 4,
+	};
+
+	const {
+	  stroke: borderColors,
+	  background: bgColors,
+	  fill: fillColors,
+	  text: textColors,
+	} = getColorsUsingCSSVariables({
+	  additionalColors: { transparent: "transparent" },
+	});
+
+	const baseFont =
+	  "BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif";
+
+	const getCobaltTailwindcssConfig = ({ content, safelist = undefined }) => ({
+	  content,
+	  safelist: safelist,
+	  prefix: "c-",
+	  // utilities to disable
+	  corePlugins: {
+	    // Don't use Tailwindcss reset and default styles
+	    preflight: false,
+	    // Handle by custom classes via generators
+	    letterSpacing: false,
+	    lineHeight: false,
+	    borderStyle: false,
+	    borderWidth: false,
+	    fontSize: false,
+	    // Not needed, at least for now
+	    textOpacity: false,
+	    backgroundOpacity: false,
+	    caretColor: false,
+	    boxShadowColor: false,
+	    ringOffsetColor: false,
+	    gradientColorStops: false,
+	    gradientColorStopPositions: false,
+	    textDecorationColor: false,
+	    // SVG color
+	    stroke: false,
+	    fill: false,
+	  },
+	  theme: {
+	    colors: {
+	      ...legacyColors, // deprecated
+	      current: "currentColor",
+	    },
+	    semanticBorderColor: borderColors,
+	    semanticBackgroundColor: {
+	      ...bgColors,
+	      ...{ fill: fillColors },
+	    },
+	    semanticFillColor: fillColors,
+	    borderStyle: {
+	      solid: "solid",
+	      dashed: "dashed",
+	      none: "none",
+	    },
+	    borderWidth: {
+	      0: "0",
+	      "0_5": "0.5px",
+	      DEFAULT: "1px",
+	      2: "0.125rem",
+	      4: ".25rem",
+	    },
+	    borderRadius: {
+	      none: "0",
+	      DEFAULT: ".25rem", // c-rounded
+	      md: ".375rem",
+	      lg: ".5rem",
+	      xl: ".75rem",
+	      "2xl": "1rem",
+	      full: "9999px", // full rounded
+	    },
+	    boxShadow: {
+	      DEFAULT: "0 0.125rem 0.75rem rgba(0, 0, 0, 0.1)", // c-shadow
+	      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}`,
+	      mono: "Consolas,'Liberation Mono',Menlo,Courier,monospace",
+	    },
+	    fontWeight: {
+	      regular: "400",
+	      bold: "600",
+	    },
+	    spacing: {
+	      none: "0",
+	      "2xs": ".25rem",
+	      xs: ".5rem",
+	      sm: "1rem",
+	      md: "1.5rem",
+	      lg: "2rem",
+	      xl: "3rem",
+	      "2xl": "4rem",
+	    },
+	    screens: { ...breakpoints },
+	    zIndex: Object.fromEntries(
+	      Object.entries(zIndexes).map(([key, value]) => [key, value.toString()])
+	    ),
+	    // custom properties, not processed by Tailwindcss itself
+	    customText: ({ theme }) => ({
+	      heading: {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._36px),
+	        lineHeight: "125%",
+	        fontWeight: 700,
+	        letterSpacing: "-0.5px",
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._56px),
+	          },
+	        },
+	      },
+	      subheading: {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._20px),
+	        lineHeight: "125%",
+	        fontWeight: 700,
+	        letterSpacing: "-0.5px",
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._28px),
+	          },
+	        },
+	      },
+	      "title-xl": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._32px),
+	        lineHeight: "125%",
+	        fontWeight: 700,
+	        letterSpacing: rem((-2 / 100) * REM._32px),
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._40px),
+	            letterSpacing: rem((-2 / 100) * REM._40px),
+	          },
+	        },
+	      },
+	      "title-lg": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._24px),
+	        lineHeight: "125%",
+	        fontWeight: 700,
+	        letterSpacing: rem((-2 / 100) * REM._24px),
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._32px),
+	            letterSpacing: rem((-2 / 100) * REM._32px),
+	          },
+	        },
+	      },
+	      "title-md": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._20px),
+	        lineHeight: "125%",
+	        fontWeight: 700,
+	        letterSpacing: rem((-2 / 100) * REM._20px),
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._24px),
+	            letterSpacing: rem((-2 / 100) * REM._24px),
+	          },
+	        },
+	      },
+	      "title-sm": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._16px),
+	        lineHeight: "125%",
+	        fontWeight: 600,
+	        letterSpacing: rem((-2 / 100) * REM._16px),
+	        from: {
+	          sm: {
+	            fontSize: rem(REM._20px),
+	            letterSpacing: rem((-2 / 100) * REM._20px),
+	          },
+	        },
+	      },
+	      "title-xs": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._16px),
+	        lineHeight: "125%",
+	        fontWeight: 600,
+	        letterSpacing: rem((-2 / 100) * REM._16px),
+	      },
+	      //
+	      "body-lg": {
+	        fontFamily: theme("fontFamily").base,
+	        fontSize: rem(REM._18px),
+	        lineHeight: rem(REM._24px),
+	      },
+	      "body-md": {
+	        fontFamily: theme("fontFamily").base,
+	        fontSize: rem(REM._16px),
+	        lineHeight: rem(REM._24px),
+	      },
+	      "body-sm": {
+	        fontFamily: theme("fontFamily").base,
+	        fontSize: rem(REM._12px),
+	        lineHeight: rem(REM._16px),
+	      },
+	      "section-heading": {
+	        fontFamily: theme("fontFamily").brand,
+	        fontSize: rem(REM._14px),
+	        lineHeight: "175%",
+	        fontWeight: 700,
+	        textTransform: "uppercase",
+	        letterSpacing: "-0.2px",
+	        color: theme("semanticTextColor").subdued,
+	      },
+	    }),
+	  },
+	  plugins: [
+	    // custom typography classes
+	    generators.text,
+	    // custom border width classes (width default solid style)
+	    generators.borderWidth,
+	    // 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: "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",
+	    }),
+	  ],
+	});
+
+	getCobaltTailwindcssConfig_1 = getCobaltTailwindcssConfig;
+	return getCobaltTailwindcssConfig_1;
+}
+
+export { requireGetCobaltTailwindcssConfig as __require };
+//# sourceMappingURL=getCobaltTailwindcssConfig2.js.map

package/utils/getCobaltTailwindcssConfig2.js.map

@@ -0,0 +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 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 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    colors: {\n      ...legacyColors, // deprecated\n      current: \"currentColor\",\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      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: \"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$$3","require$$4"],"mappings":"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"}

package/utils/helpers.js

@@ -0,0 +1,161 @@
+import require$$0 from '../src/tokens/theme.js';
+import require$$1 from '../src/tokens/palette.js';
+
+var helpers;
+var hasRequiredHelpers;
+
+function requireHelpers () {
+	if (hasRequiredHelpers) return helpers;
+	hasRequiredHelpers = 1;
+	const themeTokens = require$$0;
+	const palette = require$$1;
+
+	const DEFAULT_KEY = "DEFAULT";
+	const COLOR_PREFIX = "--c";
+
+	const THEME_MODES = {
+	  LIGHT: "light",
+	  DARK: "dark",
+	};
+	const DEFAULT_THEME_MODE = THEME_MODES.LIGHT;
+	const MODIFIERS = {
+	  HOVER: "hover",
+	  PRESS: "press",
+	};
+
+	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}`
+	};
+
+	// 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 theme final color from the theme color value
+	// ex: ("red.500/red.200", THEME_MODES.LIGHT) => red.500
+	// ex: ("red.500/red.200", THEME_MODES.DARK) => red.200
+	const getThemeColorFromThemeValue = (themeValue, mode = DEFAULT_THEME_MODE) => {
+	  const splitPosition = mode === THEME_MODES.LIGHT ? 0 : 1;
+
+	  return themeValue.split("/")[splitPosition]
+	};
+
+	// Get the CSS Variable from the theme final color
+	// ex: (green.900) => --c-green-900
+	const getColorCSSVariableFromThemeColor = (value) => {
+	  const [colorName, colorVariant] = value.split(".");
+	  if (colorVariant) {
+	    return `${COLOR_PREFIX}-${colorName}-${colorVariant}`
+	  } else {
+	    return `${COLOR_PREFIX}-${value}`
+	  }
+	};
+
+	// Get the color value from the theme final color
+	// (red) => #ff7378
+	// (red.500) => #c71414
+	const getColorFromThemeColor = (name) => {
+	  const [colorName, colorVariant] = name.split(".");
+	  if (hasProp(palette, colorName)) {
+	    if (colorVariant) {
+	      return palette[colorName][colorVariant]
+	    } else if (typeof palette[colorName] === "string") {
+	      return palette[colorName]
+	    } else {
+	      return palette[colorName][DEFAULT_KEY]
+	    }
+	  }
+	};
+
+	// 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.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.LIGHT) => #c71414
+	const getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE) =>
+	  getColorFromThemeColor(getThemeColorFromThemeValue(value, mode));
+
+	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
+	  },
+	};
+	return helpers;
+}
+
+export { requireHelpers as __require };
+//# sourceMappingURL=helpers.js.map

package/utils/helpers.js.map

@@ -0,0 +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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"}