@udixio/tailwind 1.7.2 → 2.0.0

package/dist/tailwind.plugin-DLbaMny3.js

@@ -0,0 +1,773 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import plugin from "tailwindcss/plugin";
+import { kebabCase } from "text-case";
+import { PluginAbstract, FontPlugin, PluginImplAbstract } from "@udixio/theme";
+import { Hct, argbFromHex, hexFromArgb } from "@material/material-color-utilities";
+const createAnimationFunc = ({
+  addBase,
+  prefix,
+  matchUtilities,
+  addUtilities
+}) => (name, styles, values, callback) => {
+  const variableName = (propertyName) => {
+    return `--${prefix}-${propertyName}`;
+  };
+  const param = (propertyName) => {
+    var _a;
+    const defaultValue = (_a = values[propertyName]) == null ? void 0 : _a.DEFAULT;
+    return `var(${variableName(propertyName)} ${defaultValue ? `, ${defaultValue}` : ""})`;
+  };
+  const dependencies = [];
+  Object.values(styles(param)).forEach((step) => {
+    Object.keys(step).forEach((key) => {
+      dependencies.push(kebabCase(key));
+    });
+  });
+  addBase({
+    [`@keyframes ${prefix}-${name}`]: styles(param)
+  });
+  addUtilities({
+    [`.${prefix}-${name}, .${prefix}-${name}-in, .${prefix}-${name}-out`]: {
+      [`--${prefix}-name-${name}`]: `${prefix}-${name}`,
+      [`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
+      animationDuration: `var(--${prefix}-durations, 300ms)`,
+      animationDelay: `var(--${prefix}-delays, 0)`,
+      animationTimingFunction: `var(--${prefix}-eases, cubic-bezier(0.4, 0, 0.2, 1))`,
+      animationFillMode: "both"
+    },
+    [`.${prefix}-${name}, .${prefix}-${name}-in`]: {
+      animationPlayState: `var(--${prefix}-in-state, paused)`
+    },
+    [`.${prefix}-${name}-out`]: {
+      animationPlayState: `var(--${prefix}-out-state, paused)`
+    }
+  });
+  addUtilities({
+    [`.${prefix}-${name}-scroll`]: {
+      [`--${prefix}-name-${name}`]: `${prefix}-${name}`,
+      [`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
+      animationTimeline: `var(--${prefix}-timeline, view())`,
+      animationRangeStart: `var(--${prefix}-range-start, entry 20%)`,
+      animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
+      animationFillMode: "both"
+    }
+  });
+  Object.entries(values).forEach(([key, value], index) => {
+    let as = value.as;
+    if (index !== 0 && !value.as) {
+      as = key;
+    }
+    matchUtilities(
+      {
+        [`${prefix}-${name}${as ? "-" + as : ""}`]: (value2) => ({
+          [variableName(key)]: value2
+        })
+      },
+      {
+        values: value.values
+      }
+    );
+  });
+  callback == null ? void 0 : callback({ variableName, name, dependencies });
+};
+const animation = plugin.withOptions(
+  ({ prefix = "anim" }) => {
+    return ({ addBase, matchUtilities, addUtilities }) => {
+      const createAnimation = createAnimationFunc({
+        addBase,
+        prefix,
+        matchUtilities,
+        addUtilities
+      });
+      addBase({
+        "@keyframes enter": {
+          from: {
+            opacity: `var(--${prefix}-enter-opacity, 1)`,
+            transform: `translate3d(var(--${prefix}-enter-translate-x, 0), var(--${prefix}-enter-translate-y, 0), 0) scale3d(var(--${prefix}-enter-scale, 1), var(--${prefix}-enter-scale, 1), var(--${prefix}-enter-scale, 1)) rotate(var(--${prefix}-enter-rotate, 0))`
+          }
+        },
+        "@keyframes exit": {
+          to: {
+            opacity: `var(--${prefix}-exit-opacity, 1)`,
+            transform: `translate3d(var(--${prefix}-exit-translate-x, 0), var(--${prefix}-exit-translate-y, 0), 0) scale3d(var(--${prefix}-exit-scale, 1), var(--${prefix}-exit-scale, 1), var(--${prefix}-exit-scale, 1)) rotate(var(--${prefix}-exit-rotate, 0))`
+          }
+        }
+      });
+      addUtilities({
+        // in/out
+        // run/pause state
+        [`.${prefix}-in-run`]: { [`--${prefix}-in-state`]: "running" },
+        [`.${prefix}-in-paused`]: { [`--${prefix}-in-state`]: "paused" },
+        // scroll-driven
+        [`.${prefix}-timeline-block`]: {
+          animationTimeline: "view(block)"
+        },
+        [`.${prefix}-timeline-inline`]: {
+          animationTimeline: "view(inline)"
+        },
+        // aliases
+        [`.${prefix}-timeline-y`]: {
+          animationTimeline: "view(block)"
+        },
+        [`.${prefix}-timeline-x`]: {
+          animationTimeline: "view(inline)"
+        }
+      });
+      addBase({
+        [`[data-${prefix}-in-run]`]: { [`--${prefix}-in-state`]: "running" },
+        [`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: "paused" }
+      });
+      createAnimation(
+        "fade",
+        (v) => ({
+          from: {
+            opacity: v("opacity")
+          }
+        }),
+        {
+          opacity: {
+            DEFAULT: "0",
+            values: {
+              0: "0",
+              5: "0.05",
+              10: "0.1",
+              20: "0.2",
+              25: "0.25",
+              30: "0.3",
+              40: "0.4",
+              50: "0.5",
+              60: "0.6",
+              70: "0.7",
+              75: "0.75",
+              80: "0.8",
+              90: "0.9",
+              95: "0.95",
+              100: "1"
+            }
+          }
+        }
+      );
+      createAnimation(
+        "scale",
+        (v) => ({
+          from: {
+            scale: v("scale")
+          }
+        }),
+        {
+          scale: {
+            DEFAULT: ".95",
+            values: {
+              0: "0",
+              50: ".5",
+              75: ".75",
+              90: ".9",
+              95: ".95",
+              100: "1",
+              105: "1.05",
+              110: "1.1",
+              125: "1.25",
+              150: "1.5"
+            }
+          }
+        }
+      );
+      const slideValues = {
+        DEFAULT: "2rem",
+        values: {
+          full: "100%",
+          0: "0px",
+          px: "1px",
+          0.5: "0.125rem",
+          1: "0.25rem",
+          1.5: "0.375rem",
+          2: "0.5rem",
+          2.5: "0.625rem",
+          3: "0.75rem",
+          3.5: "0.875rem",
+          4: "1rem",
+          5: "1.25rem",
+          6: "1.5rem",
+          7: "1.75rem",
+          8: "2rem",
+          9: "2.25rem",
+          10: "2.5rem",
+          11: "2.75rem",
+          12: "3rem",
+          14: "3.5rem",
+          16: "4rem",
+          20: "5rem",
+          24: "6rem",
+          28: "7rem",
+          32: "8rem",
+          36: "9rem",
+          40: "10rem",
+          44: "11rem",
+          48: "12rem",
+          52: "13rem",
+          56: "14rem",
+          60: "15rem",
+          64: "16rem",
+          72: "18rem",
+          80: "20rem",
+          96: "24rem"
+        }
+      };
+      createAnimation(
+        "slide",
+        (param) => ({
+          from: {
+            translate: `calc(${param("distance")} * ${param("dx")}) calc(${param("distance")} * ${param("dy")});`
+          },
+          to: {
+            translate: `var(--tw-translate-x, 0) var(--tw-translate-y, 0)`
+          }
+        }),
+        {
+          distance: {
+            ...slideValues
+          }
+        },
+        ({ name, variableName, dependencies }) => {
+          [
+            "up",
+            "down",
+            "left",
+            "right",
+            "from-top",
+            "from-bottom",
+            "from-left",
+            "from-right",
+            "from-top-left",
+            "from-top-right",
+            "from-bottom-left",
+            "from-bottom-right",
+            "up-left",
+            "up-right",
+            "down-left",
+            "down-right"
+          ].forEach((directionAlias) => {
+            let direction = "";
+            if (directionAlias.startsWith("from-")) {
+              direction = directionAlias;
+            } else if (directionAlias === "up") {
+              direction = "from-bottom";
+            } else if (directionAlias === "down") {
+              direction = "from-top";
+            } else if (directionAlias === "left") {
+              direction = "from-right";
+            } else if (directionAlias === "right") {
+              direction = "from-left";
+            } else if (directionAlias === "up-left") {
+              direction = "from-bottom-right";
+            } else if (directionAlias === "up-right") {
+              direction = "from-bottom-left";
+            } else if (directionAlias === "down-left") {
+              direction = "from-top-right";
+            } else if (directionAlias === "down-right") {
+              direction = "from-top-left";
+            }
+            if (!direction) {
+              throw new Error(`Invalid direction: ${directionAlias}`);
+            }
+            const dxdy = {
+              "from-top": { dx: "0", dy: "1" },
+              "from-bottom": { dx: "0", dy: "-1" },
+              "from-left": { dx: "1", dy: "0" },
+              "from-right": { dx: "-1", dy: "0" },
+              "from-top-left": { dx: "1", dy: "1" },
+              "from-top-right": { dx: "-1", dy: "1" },
+              "from-bottom-left": { dx: "1", dy: "-1" },
+              "from-bottom-right": { dx: "-1", dy: "-1" }
+            };
+            const { dx, dy } = dxdy[direction];
+            addUtilities({
+              [`.${prefix}-${name}-${directionAlias}, .${prefix}-${name}-in-${directionAlias}, .${prefix}-${name}-out-${directionAlias}`]: {
+                [`--${prefix}-name-${name}-${directionAlias}`]: `${prefix}-${name}`,
+                [`--${prefix}-name-${name}`]: `${prefix}-${name}`,
+                [`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
+                animationDuration: `var(--${prefix}-durations, 300ms)`,
+                animationDelay: `var(--${prefix}-delays, 0)`,
+                animationTimingFunction: `var(--${prefix}-eases, cubic-bezier(0.4, 0, 0.2, 1))`,
+                animationFillMode: "both",
+                [variableName("dx")]: dx,
+                [variableName("dy")]: dy
+              },
+              [`.${prefix}-${name}-${directionAlias}, .${prefix}-${name}-in-${directionAlias}`]: {
+                animationPlayState: `var(--${prefix}-in-state, paused)`
+              },
+              [`.${prefix}-${name}-out-${directionAlias}`]: {
+                animationPlayState: `var(--${prefix}-out-state, paused)`
+              }
+            });
+            addUtilities({
+              [`.${prefix}-${name}-scroll-${directionAlias}`]: {
+                [`--${prefix}-name-${name}-${directionAlias}`]: `${prefix}-${name}`,
+                [`--${prefix}-name-${name}`]: `${prefix}-${name}`,
+                [`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
+                animationTimeline: `var(--${prefix}-timeline, view())`,
+                animationRangeStart: `var(--${prefix}-range-start, entry 20%)`,
+                animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
+                animationFillMode: "both",
+                [variableName("dx")]: dx,
+                [variableName("dy")]: dy
+              }
+            });
+          });
+        }
+      );
+      matchUtilities(
+        {
+          [`${prefix}-duration`]: (value) => ({ animationDuration: value })
+        },
+        {
+          values: {
+            75: "75ms",
+            100: "100ms",
+            150: "150ms",
+            200: "200ms",
+            300: "300ms",
+            500: "500ms",
+            700: "700ms",
+            1e3: "1000ms",
+            1500: "1500ms",
+            2e3: "2000ms",
+            3e3: "3000ms"
+          }
+        }
+      );
+      matchUtilities(
+        { [`${prefix}-delay`]: (value) => ({ animationDelay: value }) },
+        {
+          values: {
+            0: "0ms",
+            75: "75ms",
+            100: "100ms",
+            150: "150ms",
+            200: "200ms",
+            300: "300ms",
+            500: "500ms",
+            700: "700ms",
+            1e3: "1000ms",
+            1500: "1500ms",
+            2e3: "2000ms",
+            3e3: "3000ms"
+          }
+        }
+      );
+      matchUtilities(
+        { [`${prefix}-ease`]: (value) => ({ animationTimingFunction: value }) },
+        {
+          values: {
+            linear: "linear",
+            in: "cubic-bezier(0.4, 0, 1, 1)",
+            out: "cubic-bezier(0, 0, 0.2, 1)",
+            "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+          }
+        }
+      );
+      matchUtilities(
+        { [`${prefix}-fill`]: (value) => ({ animationFillMode: value }) },
+        {
+          values: {
+            none: "none",
+            forwards: "forwards",
+            backwards: "backwards",
+            both: "both"
+          }
+        }
+      );
+      matchUtilities(
+        {
+          [`${prefix}-timeline`]: (value) => ({
+            [`--${prefix}-timeline`]: value
+          })
+        },
+        {
+          values: {
+            view: "view()",
+            "view-block": "view(block)",
+            "view-inline": "view(inline)"
+          }
+        }
+      );
+      matchUtilities(
+        {
+          [`${prefix}-range-start`]: (value) => ({
+            [`--${prefix}-range-start`]: value
+          })
+        },
+        {
+          values: {
+            "entry-0": "entry 0%",
+            "entry-20": "entry 20%",
+            "entry-50": "entry 50%",
+            "entry-80": "entry 80%",
+            "entry-100": "entry 100%",
+            "contain-0": "contain 0%",
+            "cover-0": "cover 0%",
+            "cover-50": "cover 50%",
+            "cover-100": "cover 100%",
+            "exit-0": "exit 0%",
+            "exit-20": "exit 20%",
+            "exit-100": "exit 100%"
+          }
+        }
+      );
+      matchUtilities(
+        {
+          [`${prefix}-range-end`]: (value) => ({
+            [`--${prefix}-range-end`]: value
+          })
+        },
+        {
+          values: {
+            "entry-0": "entry 0%",
+            "entry-20": "entry 20%",
+            "entry-50": "entry 50%",
+            "entry-80": "entry 80%",
+            "entry-100": "entry 100%",
+            "contain-0": "contain 0%",
+            "cover-0": "cover 0%",
+            "cover-50": "cover 50%",
+            "cover-100": "cover 100%",
+            "exit-0": "exit 0%",
+            "exit-20": "exit 20%",
+            "exit-100": "exit 100%"
+          }
+        }
+      );
+    };
+  }
+);
+const font = plugin.withOptions((options) => {
+  return ({
+    addUtilities,
+    theme
+  }) => {
+    const { fontStyles, responsiveBreakPoints } = options;
+    const pixelUnit = "rem";
+    const newUtilities = {};
+    const baseTextStyle = (sizeValue) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
+      fontFamily: theme("fontFamily." + sizeValue.fontFamily)
+    });
+    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
+      [`@media (min-width: ${theme("screens." + breakPointName, {})})`]: {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
+      }
+    });
+    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
+      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
+        newUtilities[`.text-${roleName}-${sizeName}`] = {
+          ...baseTextStyle(sizeValue),
+          ...Object.entries(responsiveBreakPoints).reduce(
+            (acc, [breakPointName, breakPointRatio]) => ({
+              ...acc,
+              ...responsiveTextStyle(
+                sizeValue,
+                breakPointName,
+                breakPointRatio
+              )
+            }),
+            {}
+          )
+        };
+      }
+    }
+    addUtilities(newUtilities);
+  };
+});
+const defaultConfig = {
+  statePrefix: "state",
+  disabledStyles: {
+    textOpacity: 0.38,
+    backgroundOpacity: 0.12
+  },
+  transition: {
+    duration: 150
+  }
+};
+const state = plugin.withOptions(({ colorKeys }) => {
+  const resolved = {
+    ...defaultConfig,
+    disabledStyles: {
+      ...defaultConfig.disabledStyles,
+      ...{}
+    },
+    transition: {
+      ...defaultConfig.transition,
+      ...{}
+    }
+  };
+  return ({ addComponents }) => {
+    const newComponents = {};
+    for (const isGroup of [false, true]) {
+      const group = isGroup ? "group-" : "";
+      for (const colorName of colorKeys) {
+        const className = `.${group}${resolved.statePrefix}-${colorName}`;
+        newComponents[className] = {
+          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
+          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
+          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
+          [`@apply transition-colors`]: {},
+          [`@apply duration-${resolved.transition.duration}`]: {},
+          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+        };
+      }
+    }
+    for (const colorName of colorKeys) {
+      for (const stateName of ["hover", "active", "focus", "disabled"]) {
+        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
+        if (stateName === "disabled") {
+          newComponents[className] = {
+            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+          };
+        } else {
+          const opacity = stateName === "hover" ? 0.08 : 0.12;
+          newComponents[className] = {
+            [`@apply bg-${colorName}/[${opacity}]`]: {}
+          };
+        }
+      }
+    }
+    addComponents(newComponents);
+  };
+});
+const shadow = plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      [".shadow"]: {
+        boxShadow: "0 4px 10px #00000008, 0 0 2px #0000000f, 0 2px 6px #0000001f"
+      },
+      [".shadow-1"]: {
+        boxShadow: "0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)"
+      },
+      [".shadow-2"]: {
+        boxShadow: "0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)"
+      },
+      [".shadow-3"]: {
+        boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)"
+      },
+      [".shadow-4"]: {
+        boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)"
+      },
+      [".box-shadow-5"]: {
+        boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)"
+      }
+    });
+  }
+);
+const main = plugin.withOptions((args) => {
+  const configCss = args;
+  const fontStyles = {};
+  configCss.fontStyles.forEach((line) => {
+    const [styleToken, ...properties] = line.split(" ");
+    const [roleToken, sizeToken] = styleToken.split("-");
+    fontStyles[roleToken] ?? (fontStyles[roleToken] = {});
+    properties.forEach((properties2) => {
+      var _a;
+      (_a = fontStyles[roleToken])[sizeToken] ?? (_a[sizeToken] = {});
+      const [key, value] = properties2.slice(0, -1).split("[");
+      fontStyles[roleToken][sizeToken][key] = value;
+    });
+  });
+  let breakPointsCss = configCss.responsiveBreakPoints;
+  if (!Array.isArray(breakPointsCss)) {
+    breakPointsCss = [breakPointsCss];
+  }
+  const responsiveBreakPoints = {};
+  breakPointsCss.forEach((line) => {
+    const [key, value] = line.split(" ");
+    responsiveBreakPoints[key] = value;
+  });
+  const options = {
+    colorKeys: configCss.colorKeys,
+    fontStyles,
+    responsiveBreakPoints
+  };
+  return (api) => {
+    font(options).handler(api);
+    state(options).handler(api);
+    shadow.handler(api);
+    animation(options).handler(api);
+  };
+});
+function createFlexibleSelector(...classes) {
+  classes = classes.filter((classeName) => !!classeName);
+  if (classes.length === 0) return "";
+  if (classes.length === 1 && classes[0]) return classes[0];
+  const selectors = [];
+  selectors.push(classes.join(""));
+  for (let i = 0; i < classes.length; i++) {
+    const ancestor = classes[i];
+    const descendants = classes.filter(
+      (className, index) => index !== i && !!className
+    );
+    if (descendants.length === 1) {
+      selectors.push(`${ancestor} ${descendants[0]}`);
+    } else if (descendants.length > 1) {
+      selectors.push(`${ancestor} ${descendants.join("")}`);
+      for (const desc of descendants) {
+        selectors.push(`${ancestor} ${desc}`);
+      }
+    }
+  }
+  for (let i = 0; i < classes.length; i++) {
+    for (let j = i + 1; j < classes.length; j++) {
+      selectors.push(`${classes[i]} ${classes[j]}`);
+      selectors.push(`${classes[j]} ${classes[i]}`);
+    }
+  }
+  const uniqueSelectors = [...new Set(selectors)];
+  return `:is(${uniqueSelectors.join(", ")})`;
+}
+function darkStyle({
+  selectors,
+  mode,
+  darkSelector,
+  styles
+}) {
+  selectors = selectors.filter((classeName) => !!classeName);
+  if (mode === "media") {
+    if (selectors.length !== 0) {
+      return `@media (prefers-color-scheme: dark) {
+    ${createFlexibleSelector(...selectors)} {
+      ${styles}
+    }
+  }
+`;
+    } else {
+      return `@media (prefers-color-scheme: dark) {
+    ${styles}
+  }
+`;
+    }
+  } else {
+    return `${createFlexibleSelector(...selectors, darkSelector)} {
+    ${styles}
+  }
+`;
+  }
+}
+class TailwindPlugin extends PluginAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dependencies", [FontPlugin]);
+    __publicField(this, "name", "tailwind");
+    __publicField(this, "pluginClass", TailwindImplPluginBrowser);
+  }
+}
+class TailwindImplPluginBrowser extends PluginImplAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "outputCss", "");
+  }
+  onInit() {
+    var _a;
+    (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
+      lg: 1.125
+    });
+    this.options = {
+      responsiveBreakPoints: {
+        lg: 1.125
+      },
+      darkMode: "class",
+      darkSelector: ".dark",
+      dynamicSelector: ".dynamic",
+      ...this.options
+    };
+  }
+  loadColor({ isDynamic }) {
+    let { dynamicSelector, darkSelector } = this.options;
+    if (!isDynamic) {
+      dynamicSelector = void 0;
+    }
+    const darkMode = this.options.darkMode ?? "class";
+    if (darkMode == "media") {
+      darkSelector = void 0;
+    }
+    const colors = this.getColors();
+    if (isDynamic) {
+      this.outputCss += `
+@layer theme {
+  .dynamic {
+    ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+  }
+}`;
+    } else {
+      this.outputCss += `
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}`;
+    }
+    this.outputCss += `
+@layer theme {
+  ${darkStyle({
+      selectors: [dynamicSelector],
+      mode: darkMode,
+      darkSelector: darkSelector ?? "",
+      styles: Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n    ")
+    })} 
+}`;
+    const sourceColor = this.api.context.sourceColor;
+    for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
+      const newHue = Hct.fromInt(argbFromHex(value)).hue;
+      const newColor = Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
+      this.api.context.sourceColor = hexFromArgb(newColor.toInt());
+      const colors2 = this.getColors();
+      this.outputCss += `
+@layer theme {
+  ${createFlexibleSelector(dynamicSelector, ".theme-" + key)} {
+    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.light};`).join("\n    ")}
+    }
+}
+`;
+      this.outputCss += `
+@layer theme {
+  ${darkStyle({
+        selectors: [dynamicSelector, ".theme-" + key],
+        mode: darkMode,
+        darkSelector: darkSelector ?? "",
+        styles: Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")
+      })} 
+}`;
+    }
+  }
+  getColors() {
+    const colors = {};
+    const regex = /([a-z0-9]|(?=[A-Z]))([A-Z])/g;
+    [false, true].forEach((isDark) => {
+      this.api.context.darkMode = isDark;
+      this.api.colors.getAll().forEach((value, key) => {
+        const newKey = key.replace(regex, "$1-$2").toLowerCase();
+        if (!colors[newKey]) {
+          colors[newKey] = { light: "", dark: "" };
+        }
+        colors[newKey][isDark ? "dark" : "light"] = value.getHex();
+      });
+    });
+    return colors;
+  }
+  async onLoad() {
+    this.getColors();
+    this.loadColor({ isDynamic: true });
+  }
+}
+export {
+  TailwindImplPluginBrowser as T,
+  animation as a,
+  TailwindPlugin as b,
+  font as f,
+  main as m,
+  state as s
+};