@jiwambe/components 0.2.0

package/dist/plugin/jiwambe-plugin.js

@@ -0,0 +1,640 @@
+import plugin from "tailwindcss/plugin";
+const baseColors = {
+  // Neutral
+  "neutral-0": "#FFFFFF",
+  "neutral-25": "#FAFBFB",
+  "neutral-50": "#F5F6F6",
+  "neutral-100": "#E5E8E7",
+  "neutral-150": "#DADEDC",
+  "neutral-200": "#CED3D2",
+  "neutral-250": "#BDC4C3",
+  "neutral-300": "#ABB5B3",
+  "neutral-350": "#97A2A0",
+  "neutral-400": "#828E8C",
+  "neutral-450": "#74817F",
+  "neutral-500": "#667472",
+  "neutral-600": "#586261",
+  "neutral-700": "#4B5353",
+  "neutral-800": "#424847",
+  "neutral-850": "#393F3E",
+  "neutral-900": "#303635",
+  "neutral-950": "#181B1B",
+  "neutral-950--t75": "rgba(24, 27, 27, 0.75)",
+  "neutral-950--t50": "rgba(24, 27, 27, 0.50)",
+  "neutral-950--t25": "rgba(24, 27, 27, 0.25)",
+  "neutral-950--t10": "rgba(24, 27, 27, 0.10)",
+  // Green
+  "green-50": "#ECF9F3",
+  "green-100": "#D9F2E7",
+  "green-150": "#C7ECDE",
+  "green-200": "#B4E6D4",
+  "green-250": "#9ADEC8",
+  "green-300": "#80D5BB",
+  "green-350": "#64C9AB",
+  "green-400": "#4DC2A3",
+  "green-450": "#33B897",
+  "green-500": "#19AE8A",
+  "green-600": "#109274",
+  "green-700": "#0D755F",
+  "green-800": "#0B6556",
+  "green-850": "#065E4F",
+  "green-900": "#005748",
+  "green-950": "#00332A",
+  "green-950--t75": "rgba(0, 51, 42, 0.75)",
+  "green-950--t50": "rgba(0, 51, 42, 0.50)",
+  "green-950--t25": "rgba(0, 51, 42, 0.25)",
+  "green-950--t10": "rgba(0, 51, 42, 0.10)",
+  // Red
+  "red-50": "#FEF3F1",
+  "red-100": "#FCE6E3",
+  "red-150": "#FAD5D1",
+  "red-200": "#F8C4BF",
+  "red-250": "#F9ADA5",
+  "red-300": "#F9958B",
+  "red-400": "#F67265",
+  "red-500": "#F34F3F",
+  "red-600": "#E52B19",
+  "red-700": "#CF2717",
+  "red-800": "#93251A",
+  "red-850": "#791F16",
+  "red-900": "#5F1811",
+  "red-950": "#340D09",
+  "red-950--t75": "rgba(52, 13, 9, 0.75)",
+  "red-950--t50": "rgba(52, 13, 9, 0.50)",
+  "red-950--t25": "rgba(52, 13, 9, 0.25)",
+  "red-950--t10": "rgba(52, 13, 9, 0.10)",
+  // Yellow
+  "yellow-50": "#FEFCF1",
+  "yellow-100": "#FCF8E3",
+  "yellow-150": "#FAF4D1",
+  "yellow-200": "#F8EFBF",
+  "yellow-250": "#F9EBA5",
+  "yellow-300": "#F9E68B",
+  "yellow-350": "#F8E278",
+  "yellow-400": "#F7DE64",
+  "yellow-500": "#F3D53F",
+  "yellow-600": "#EBC714",
+  "yellow-700": "#BC8E10",
+  "yellow-800": "#826217",
+  "yellow-850": "#6D5213",
+  "yellow-900": "#57410F",
+  "yellow-950": "#2B2108",
+  "yellow-950--t75": "rgba(43, 33, 8, 0.75)",
+  "yellow-950--t50": "rgba(43, 33, 8, 0.50)",
+  "yellow-950--t25": "rgba(43, 33, 8, 0.25)",
+  "yellow-950--t10": "rgba(43, 33, 8, 0.10)"
+};
+function resolve(ref, opacity) {
+  const hex = baseColors[ref];
+  if (!hex) return ref;
+  if (opacity === void 0 || opacity === 100) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${(opacity / 100).toFixed(2)})`;
+}
+function defaultSemanticColors() {
+  return {
+    // Text
+    "text-primary": resolve("neutral-950"),
+    "text-secondary": resolve("neutral-950", 75),
+    "text-disabled": resolve("neutral-950", 50),
+    "text-primary-inverse": resolve("neutral-0"),
+    "text-secondary-inverse": resolve("neutral-0", 75),
+    "text-inverse-disabled": resolve("neutral-0", 50),
+    "text-action-primary": resolve("neutral-0"),
+    "text-action-primary-disabled": resolve("neutral-0", 50),
+    "text-action-secondary": resolve("neutral-950"),
+    "text-action-secondary-disabled": resolve("neutral-950", 50),
+    "text-action-tertiary": resolve("neutral-0"),
+    "text-action-tertiary-hover": resolve("neutral-0", 75),
+    "text-action-tertiary-disabled": resolve("neutral-0", 50),
+    "text-err": resolve("red-950"),
+    "text-err-disabled": resolve("red-950", 50),
+    // Link
+    "link-primary": resolve("green-900"),
+    "link-primary-hover": resolve("green-950", 75),
+    "link-primary-disabled": resolve("green-950", 50),
+    "link-secondary": resolve("neutral-950"),
+    "link-secondary-hover": resolve("neutral-950", 75),
+    "link-secondary-disabled": resolve("neutral-950", 50),
+    "link-tertiary": resolve("neutral-950", 50),
+    "link-tertiary-hover": resolve("neutral-950", 25),
+    "link-tertiary-disabled": resolve("neutral-950", 25),
+    "link-inverse": resolve("neutral-0"),
+    "link-inverse-hover": resolve("neutral-0", 75),
+    "link-inverse-disabled": resolve("neutral-0", 50),
+    // Background fills
+    "fill-bg-primary": resolve("neutral-0"),
+    "fill-bg-secondary": resolve("neutral-50"),
+    "fill-bg-tertiary": resolve("green-900"),
+    "fill-bg-err": resolve("red-100"),
+    "fill-bg-info": resolve("neutral-0"),
+    "fill-bg-dimmer": resolve("neutral-950", 75),
+    // Action fills
+    "fill-action-primary": resolve("green-900"),
+    "fill-action-primary-hover": resolve("green-950"),
+    "fill-action-primary-active": resolve("green-950"),
+    "fill-action-primary-focus": resolve("green-900"),
+    "fill-action-primary-selected": resolve("green-900"),
+    "fill-action-primary-disabled": resolve("green-900"),
+    "fill-action-secondary": resolve("neutral-100"),
+    "fill-action-secondary-hover": resolve("neutral-200"),
+    "fill-action-secondary-active": resolve("neutral-200"),
+    "fill-action-secondary-focus": resolve("neutral-100"),
+    "fill-action-secondary-selected": resolve("neutral-100"),
+    "fill-action-secondary-disabled": resolve("neutral-100"),
+    "fill-action-inverse": resolve("neutral-0"),
+    "fill-action-inverse-hover": resolve("neutral-0", 90),
+    "fill-action-inverse-active": resolve("neutral-0", 90),
+    "fill-action-inverse-focus": resolve("neutral-0"),
+    "fill-action-inverse-selected": resolve("neutral-0"),
+    "fill-action-inverse-disabled": resolve("neutral-0"),
+    "fill-action-ghost": resolve("neutral-0", 0),
+    "fill-action-ghost-hover": resolve("neutral-0", 10),
+    "fill-action-ghost-active": resolve("neutral-0", 10),
+    "fill-action-ghost-focus": resolve("neutral-0", 0),
+    "fill-action-ghost-selected": resolve("neutral-0", 0),
+    "fill-action-ghost-disabled": resolve("neutral-0", 0),
+    // Form fills
+    "fill-form-primary": resolve("neutral-0"),
+    "fill-form-primary-hover": resolve("neutral-0"),
+    "fill-form-primary-active": resolve("neutral-0"),
+    "fill-form-primary-focus": resolve("neutral-0"),
+    "fill-form-primary-selected": resolve("neutral-0"),
+    "fill-form-primary-disabled": resolve("neutral-0"),
+    // Borders
+    "border-light": resolve("neutral-100"),
+    "border-heavy": resolve("neutral-200"),
+    "border-inverse": resolve("neutral-0"),
+    "border-focus": resolve("green-900"),
+    "border-err": resolve("red-800"),
+    // Form borders
+    "border-form-primary": resolve("neutral-300"),
+    "border-form-primary-hover": resolve("neutral-600"),
+    "border-form-primary-active": resolve("green-900"),
+    "border-form-primary-focus": resolve("green-900"),
+    "border-form-primary-selected": resolve("green-900"),
+    "border-form-primary-disabled": resolve("neutral-200"),
+    // Icons
+    "icon-primary": resolve("neutral-950"),
+    "icon-primary-disabled": resolve("neutral-950", 50),
+    "icon-inverse": resolve("neutral-0"),
+    "icon-inverse-disabled": resolve("neutral-0", 50),
+    "icon-err": resolve("red-950"),
+    "icon-err-disabled": resolve("red-950", 50)
+  };
+}
+const fontFamilyPrimary = '"Instrument Sans", sans-serif';
+const fontFamilySecondary = '"Inter", sans-serif';
+const typographyTokens = {
+  "title-sm": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "1.0625rem",
+    fontWeight: "600",
+    lineHeight: "1.2",
+    letterSpacing: "-0.005em",
+    textWrap: "balance"
+  },
+  "title-md": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "1.1875rem",
+    fontWeight: "600",
+    lineHeight: "1.2",
+    letterSpacing: "0.02em",
+    textWrap: "balance"
+  },
+  "title-lg": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "clamp(1.5625rem, 1.4375rem + 0.625vw, 2rem)",
+    fontWeight: "600",
+    lineHeight: "1.1",
+    letterSpacing: "-0.005em",
+    textWrap: "balance"
+  },
+  "title-xl": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)",
+    fontWeight: "680",
+    lineHeight: "1.1",
+    letterSpacing: "-0.005em",
+    textWrap: "balance"
+  },
+  "text-xs": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "0.75rem",
+    fontWeight: "400",
+    lineHeight: "1.4",
+    letterSpacing: "-0.005em",
+    textWrap: "pretty"
+  },
+  "text-xs-bold": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    lineHeight: "1.4",
+    letterSpacing: "-0.005em",
+    textWrap: "pretty"
+  },
+  "text-sm": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1rem",
+    fontWeight: "400",
+    lineHeight: "1.4",
+    textWrap: "pretty"
+  },
+  "text-sm-bold": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1rem",
+    fontWeight: "600",
+    lineHeight: "1.4",
+    textWrap: "pretty"
+  },
+  "text-md": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1.125rem",
+    fontWeight: "400",
+    lineHeight: "1.4",
+    textWrap: "pretty"
+  },
+  "text-md-bold": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1.125rem",
+    fontWeight: "600",
+    lineHeight: "1.4",
+    textWrap: "pretty"
+  },
+  "text-xl": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)",
+    fontWeight: "680",
+    lineHeight: "1.1",
+    letterSpacing: "-0.005em",
+    textWrap: "pretty"
+  },
+  "form-text": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1.125rem",
+    fontWeight: "400",
+    lineHeight: "1.4",
+    textWrap: "pretty"
+  },
+  "form-label": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "1.1875rem",
+    fontWeight: "600",
+    lineHeight: "1.2",
+    letterSpacing: "-0.005em",
+    textWrap: "balance"
+  },
+  "btn-small": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1rem",
+    fontWeight: "500",
+    lineHeight: "1.4"
+  },
+  "btn-reg": {
+    fontFamily: fontFamilySecondary,
+    fontSize: "1.125rem",
+    fontWeight: "500",
+    lineHeight: "1.4"
+  },
+  "link-md": {
+    fontFamily: fontFamilyPrimary,
+    fontSize: "1.1875rem",
+    fontWeight: "600",
+    lineHeight: "1.2",
+    letterSpacing: "0.02em"
+  }
+};
+const spacingTokens = {
+  // Fixed
+  "space-0": "0rem",
+  "space-0-25": "0.0625rem",
+  "space-1": "0.25rem",
+  "space-2": "0.5rem",
+  "space-3": "0.75rem",
+  "space-4": "1rem",
+  "space-5": "1.25rem",
+  "space-6": "1.5rem",
+  "space-8": "2rem",
+  "space-9": "2.25rem",
+  "space-12": "3rem",
+  "space-16": "4rem",
+  "space-18": "4.5rem",
+  "space-24": "6rem",
+  "space-30": "7.5rem",
+  "space-36": "9rem",
+  "space-48": "12rem",
+  "space-72": "18rem",
+  // Fluid
+  "space-fluid-1-2": "clamp(0.25rem, 0.1706rem + 0.3968vw, 0.5rem)",
+  "space-fluid-2-4": "clamp(0.5rem, 0.3413rem + 0.7937vw, 1rem)",
+  "space-fluid-4-5": "clamp(1rem, 0.9206rem + 0.3968vw, 1.25rem)",
+  "space-fluid-4-6": "clamp(1rem, 0.8413rem + 0.7937vw, 1.5rem)",
+  "space-fluid-4-8": "clamp(1rem, 0.6825rem + 1.5873vw, 2rem)",
+  "space-fluid-4-9": "clamp(1rem, 0.6032rem + 1.9841vw, 2.25rem)",
+  "space-fluid-5-6": "clamp(1.25rem, 1.1706rem + 0.3968vw, 1.5rem)",
+  "space-fluid-6-9": "clamp(1.5rem, 1.2619rem + 1.1905vw, 2.25rem)",
+  "space-fluid-8-16": "clamp(2rem, 1.3651rem + 3.1746vw, 4rem)",
+  "space-fluid-16-18": "clamp(4rem, 3.8413rem + 0.7937vw, 4.5rem)",
+  "space-fluid-30-36": "clamp(7.5rem, 7.0238rem + 2.381vw, 9rem)",
+  "space-fluid-48-72": "clamp(12rem, 10.0952rem + 9.5238vw, 18rem)"
+};
+const borderWidthTokens = {
+  "border-none": "0",
+  "border-xs": ".0625rem",
+  "border-sm": ".078125rem",
+  "border-md": ".09375rem"
+};
+const borderRadiusTokens = {
+  "rad-none": "0",
+  "rad-xs": ".375rem",
+  "rad-sm": ".75rem",
+  "rad-md": "1rem",
+  "rad-lg": "1.25rem",
+  "rad-xl": "1.5rem",
+  "rad-rounded": "100rem"
+};
+const elevationTokens = {
+  "elevation-low": "0 2px 8px 0 var(--col-neutral-950--t10)",
+  "elevation-normal": "0 2px 8px 4px var(--col-neutral-950--t10)"
+};
+const canonicalColourPrimitives = {
+  "col-neutral-0": "hsla(0, 0%, 100%, 1)",
+  "col-neutral-0--t0": "hsla(0, 0%, 100%, 0)",
+  "col-neutral-0--t10": "hsla(0, 0%, 100%, 0.1)",
+  "col-neutral-0--t25": "hsla(0, 0%, 100%, 0.25)",
+  "col-neutral-0--t50": "hsla(0, 0%, 100%, 0.5)",
+  "col-neutral-0--t75": "hsla(0, 0%, 100%, 0.75)",
+  "col-neutral-0--t90": "hsla(0, 0%, 100%, 0.9)",
+  "col-neutral-50": "hsla(180, 5%, 96%, 1)",
+  "col-neutral-100": "hsla(160, 6%, 90%, 1)",
+  "col-neutral-200": "hsla(168, 5%, 82%, 1)",
+  "col-neutral-300": "hsla(168, 6%, 69%, 1)",
+  "col-neutral-400": "hsla(170, 5%, 53%, 1)",
+  "col-neutral-500": "hsla(171, 6%, 43%, 1)",
+  "col-neutral-600": "hsla(174, 5%, 36%, 1)",
+  "col-neutral-700": "hsla(180, 5%, 31%, 1)",
+  "col-neutral-800": "hsla(170, 4%, 27%, 1)",
+  "col-neutral-900": "hsla(170, 6%, 20%, 1)",
+  "col-neutral-950": "hsla(180, 5%, 10%, 1)",
+  "col-neutral-950--t10": "hsla(180, 5%, 10%, 0.1)",
+  "col-neutral-950--t25": "hsla(180, 5%, 10%, 0.25)",
+  "col-neutral-950--t50": "hsla(180, 5%, 10%, 0.5)",
+  "col-neutral-950--t75": "hsla(180, 5%, 10%, 0.75)",
+  "col-neutral-950--t90": "hsla(180, 5%, 10%, 0.9)",
+  "col-green-50": "hsla(156, 24%, 96%, 1)",
+  "col-green-100": "hsla(154, 49%, 90%, 1)",
+  "col-green-200": "hsla(158, 50%, 80%, 1)",
+  "col-green-300": "hsla(162, 50%, 67%, 1)",
+  "col-green-400": "hsla(164, 52%, 52%, 1)",
+  "col-green-500": "hsla(166, 75%, 39%, 1)",
+  "col-green-600": "hsla(166, 80%, 32%, 1)",
+  "col-green-700": "hsla(167, 80%, 25%, 1)",
+  "col-green-800": "hsla(170, 80%, 22%, 1)",
+  "col-green-900": "hsla(170, 100%, 17%, 1)",
+  "col-green-950": "hsla(170, 100%, 10%, 1)",
+  "col-green-950--t10": "hsla(170, 100%, 10%, 0.1)",
+  "col-green-950--t50": "hsla(170, 100%, 10%, 0.5)",
+  "col-green-950--t75": "hsla(170, 100%, 10%, 0.75)",
+  "col-green-950--t90": "hsla(170, 100%, 10%, 0.9)",
+  "col-red-50": "hsla(7, 60%, 97%, 1)",
+  "col-red-100": "hsla(7, 81%, 94%, 1)",
+  "col-red-200": "hsla(5, 80%, 86%, 1)",
+  "col-red-300": "hsla(5, 90%, 76%, 1)",
+  "col-red-400": "hsla(5, 90%, 68%, 1)",
+  "col-red-500": "hsla(5, 88%, 60%, 1)",
+  "col-red-600": "hsla(5, 80%, 50%, 1)",
+  "col-red-700": "hsla(5, 80%, 45%, 1)",
+  "col-red-800": "hsla(5, 70%, 34%, 1)",
+  "col-red-900": "hsla(5, 70%, 22%, 1)",
+  "col-red-950": "hsla(5, 70%, 12%, 1)",
+  "col-red-950--t10": "hsla(5, 70%, 12%, 0.1)",
+  "col-red-950--t50": "hsla(5, 70%, 12%, 0.5)",
+  "col-red-950--t75": "hsla(5, 70%, 12%, 0.75)",
+  "col-red-950--t90": "hsla(5, 70%, 12%, 0.9)",
+  "col-yellow-50": "hsla(47, 60%, 97%, 1)",
+  "col-yellow-100": "hsla(50, 81%, 94%, 1)",
+  "col-yellow-200": "hsla(50, 80%, 86%, 1)",
+  "col-yellow-300": "hsla(50, 90%, 76%, 1)",
+  "col-yellow-400": "hsla(50, 90%, 68%, 1)",
+  "col-yellow-500": "hsla(50, 88%, 60%, 1)",
+  "col-yellow-600": "hsla(50, 84%, 50%, 1)",
+  "col-yellow-700": "hsla(44, 84%, 40%, 1)",
+  "col-yellow-800": "hsla(42, 70%, 30%, 1)",
+  "col-yellow-900": "hsla(42, 71%, 20%, 1)",
+  "col-yellow-950": "hsla(42, 69%, 10%, 1)",
+  "col-yellow-950--t10": "hsla(42, 69%, 10%, 0.1)",
+  "col-yellow-950--t50": "hsla(42, 69%, 10%, 0.5)",
+  "col-yellow-950--t75": "hsla(42, 69%, 10%, 0.75)",
+  "col-yellow-950--t90": "hsla(42, 69%, 10%, 0.9)"
+};
+const canonicalTransitionPrimitives = {
+  "trans-timing-light": "ease-out",
+  "trans-timing-normal": "ease-out",
+  "trans-timing-heavy": "ease-in",
+  "trans-duration-snap": "30ms",
+  "trans-duration-normal": "120ms",
+  "trans-duration-slow": "300ms"
+};
+const canonicalTypographyPrimitives = {
+  "font-size-fluid-25-32": "clamp(1.5625rem, 1.4375rem + 0.625vw, 2rem)",
+  "font-size-fluid-48-60": "clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)",
+  "font-family-primary": '"Instrument Sans", sans-serif',
+  "font-family-secondary": "'Inter', system-ui, sans-serif",
+  "font-size-a-sm": "1.0625rem",
+  "font-size-a-md": "1.1875rem",
+  "font-size-a-lg-fluid": "var(--font-size-fluid-25-32)",
+  "font-size-a-xl-fluid": "var(--font-size-fluid-48-60)",
+  "font-size-b-xs": "0.75rem",
+  "font-size-b-sm": "1rem",
+  "font-size-b-md": "1.125rem",
+  "font-weight-xs": "400",
+  "font-weight-sm": "500",
+  "font-weight-md": "600",
+  "font-weight-lg": "680",
+  "font-line-tight": "1.1",
+  "font-line-normal": "1.2",
+  "font-line-loose": "1.4",
+  "font-ltrspc-xs": "-0.005em",
+  "font-ltrspc-sm": "0.01em",
+  "font-ltrspc-md": "0.02em"
+};
+const screens = {
+  xs: "0px",
+  sm: "600px",
+  md: "800px",
+  lg: "940px",
+  xl: "1440px"
+};
+function mergeTypography(base, overrides) {
+  if (!overrides) return base;
+  const merged = { ...base };
+  for (const [key, partial] of Object.entries(overrides)) {
+    merged[key] = { ...merged[key] ?? {}, ...partial };
+  }
+  return merged;
+}
+function resolvedFontFamilies(options) {
+  var _a, _b;
+  return {
+    primary: ((_a = options == null ? void 0 : options.fontFamily) == null ? void 0 : _a.primary) ?? fontFamilyPrimary,
+    secondary: ((_b = options == null ? void 0 : options.fontFamily) == null ? void 0 : _b.secondary) ?? fontFamilySecondary
+  };
+}
+const jiwambePlugin = plugin.withOptions(
+  (options) => {
+    return ({ addBase, addUtilities }) => {
+      const fonts = resolvedFontFamilies(options);
+      const mergedColors = { ...defaultSemanticColors(), ...(options == null ? void 0 : options.colors) ?? {} };
+      const mergedSpacing = { ...spacingTokens, ...(options == null ? void 0 : options.spacing) ?? {} };
+      const mergedBorderWidth = { ...borderWidthTokens, ...(options == null ? void 0 : options.borderWidth) ?? {} };
+      const mergedBorderRadius = { ...borderRadiusTokens, ...(options == null ? void 0 : options.borderRadius) ?? {} };
+      const mergedElevation = { ...elevationTokens, ...(options == null ? void 0 : options.elevation) ?? {} };
+      const mergedTypography = mergeTypography(typographyTokens, options == null ? void 0 : options.typography);
+      const cssVars = {};
+      for (const [key, value] of Object.entries(baseColors)) {
+        cssVars[`--color-${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(mergedColors)) {
+        cssVars[`--color-${key}`] = value;
+      }
+      if (mergedColors["text-secondary"]) {
+        cssVars["--col-text-secondary"] = mergedColors["text-secondary"];
+      }
+      for (const [key, value] of Object.entries(mergedSpacing)) {
+        cssVars[`--${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(mergedBorderWidth)) {
+        cssVars[`--${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(mergedBorderRadius)) {
+        cssVars[`--${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(mergedElevation)) {
+        cssVars[`--${key}`] = value;
+      }
+      cssVars["--font-family-primary"] = fonts.primary;
+      cssVars["--font-family-secondary"] = fonts.secondary;
+      for (const [key, value] of Object.entries(canonicalColourPrimitives)) {
+        cssVars[`--${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(canonicalTransitionPrimitives)) {
+        cssVars[`--${key}`] = value;
+      }
+      for (const [key, value] of Object.entries(canonicalTypographyPrimitives)) {
+        cssVars[`--${key}`] = value;
+      }
+      addBase({ ":root": cssVars });
+      addBase({
+        "@keyframes jiwambe-shimmer": {
+          "0%": {
+            backgroundPosition: "-200% 0"
+          },
+          "100%": {
+            backgroundPosition: "200% 0"
+          }
+        },
+        ".jiwambe-skeleton": {
+          backgroundColor: "var(--col-neutral-100)",
+          backgroundImage: [
+            "linear-gradient(",
+            "  90deg,",
+            "  var(--col-neutral-100) 25%,",
+            "  var(--col-neutral-50) 50%,",
+            "  var(--col-neutral-100) 75%",
+            ")"
+          ].join(""),
+          backgroundSize: "200% 100%",
+          backgroundRepeat: "no-repeat",
+          animation: "jiwambe-shimmer 1.5s ease-in-out infinite"
+        }
+      });
+      addBase({
+        ".jiwambe-list": {
+          paddingLeft: "var(--space-6)",
+          margin: "0"
+        },
+        ".jiwambe-list--unstyled": {
+          paddingLeft: "0",
+          listStyle: "none"
+        },
+        ".jiwambe-list--disc li::marker": {
+          color: "var(--col-text-secondary)"
+        },
+        ".jiwambe-list--decimal li::marker": {
+          color: "var(--col-text-secondary)",
+          fontVariantNumeric: "tabular-nums"
+        },
+        ".jiwambe-list--none": {
+          listStyle: "none",
+          paddingLeft: "0"
+        },
+        ".jiwambe-list-item": {
+          paddingLeft: "var(--space-1)"
+        },
+        ".jiwambe-list-item + .jiwambe-list-item": {
+          marginTop: "var(--space-0)"
+        }
+      });
+      const typographyUtilities = {};
+      for (const [name, def] of Object.entries(mergedTypography)) {
+        const styles = {
+          "font-family": def.fontFamily,
+          "font-size": def.fontSize,
+          "font-weight": def.fontWeight,
+          "line-height": def.lineHeight
+        };
+        if (def.letterSpacing) styles["letter-spacing"] = def.letterSpacing;
+        if (def.textWrap) styles["text-wrap"] = def.textWrap;
+        typographyUtilities[`.text-${name}`] = styles;
+      }
+      addUtilities(typographyUtilities);
+    };
+  },
+  (options) => {
+    const fonts = resolvedFontFamilies(options);
+    const mergedColors = { ...defaultSemanticColors(), ...(options == null ? void 0 : options.colors) ?? {} };
+    const mergedSpacing = { ...spacingTokens, ...(options == null ? void 0 : options.spacing) ?? {} };
+    const mergedBorderWidth = { ...borderWidthTokens, ...(options == null ? void 0 : options.borderWidth) ?? {} };
+    const mergedBorderRadius = { ...borderRadiusTokens, ...(options == null ? void 0 : options.borderRadius) ?? {} };
+    const mergedElevation = { ...elevationTokens, ...(options == null ? void 0 : options.elevation) ?? {} };
+    const allColors = {};
+    for (const [key, value] of Object.entries(baseColors)) {
+      allColors[key] = value;
+    }
+    for (const [key, value] of Object.entries(mergedColors)) {
+      allColors[key] = value;
+    }
+    const spacingExtension = {};
+    for (const key of Object.keys(mergedSpacing)) {
+      spacingExtension[key] = `var(--${key})`;
+      if (key.startsWith("space-fluid-")) {
+        const shortKey = key.replace(/^space-/, "");
+        spacingExtension[shortKey] = `var(--${key})`;
+      }
+    }
+    return {
+      theme: {
+        screens,
+        extend: {
+          colors: allColors,
+          spacing: spacingExtension,
+          borderWidth: mergedBorderWidth,
+          borderRadius: mergedBorderRadius,
+          boxShadow: mergedElevation,
+          fontFamily: {
+            primary: [fonts.primary],
+            secondary: [fonts.secondary]
+          }
+        }
+      }
+    };
+  }
+);
+export {
+  jiwambePlugin as default,
+  resolve
+};
+//# sourceMappingURL=jiwambe-plugin.js.map