@evolve.ui/theme-system 1.0.0 → 1.1.0

package/src/utils/color.ts

@@ -0,0 +1,82 @@
+import tinycolor from 'tinycolor2';
+
+// https://github.com/bgrins/TinyColor
+
+export const lighten = (percentAsInt: number, unprocessedColor: string): tinycolor.Instance => {
+    const color = tinycolor(unprocessedColor);
+    const amount = (percentAsInt * ((1 - color.toHsl().l) * 100)) / 100;
+    return color.lighten(amount);
+};
+
+export const darken = (percentAsInt: number, unprocessedColor: string): tinycolor.Instance => {
+    const color = tinycolor(unprocessedColor);
+    const amount = (percentAsInt * (color.toHsl().l * 100)) / 100;
+    return color.darken(amount);
+};
+
+// https://tailwindcss.com/docs/customizing-colors#using-custom-colors
+const removeRGB = (color: string) => color.replace(/rgb\(|,|\)/g, '');
+
+/**
+ * Generate a set of color steps from a base color. Base color becomes 500.
+ *
+ * @param color The color to generate the steps from
+ * @returns An array of 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 color values.
+ */
+export const generateNormalColorSteps = (color: string) => {
+    return [
+        removeRGB(lighten(95, color).toRgbString()),
+        removeRGB(lighten(85, color).toRgbString()),
+        removeRGB(lighten(70, color).toRgbString()),
+        removeRGB(lighten(40, color).toRgbString()),
+        removeRGB(lighten(20, color).toRgbString()),
+        removeRGB(tinycolor(color).toRgbString()),
+        removeRGB(darken(20, color).toRgbString()),
+        removeRGB(darken(40, color).toRgbString()),
+        removeRGB(darken(50, color).toRgbString()),
+        removeRGB(darken(70, color).toRgbString()),
+    ];
+};
+
+/**
+ * Generate a set of color steps from a base color. Base color becomes 500.
+ *
+ * @param color The color to generate the steps from
+ * @param isNeutral Whether the color is a neutral color to make surface-50 true white
+ * @returns An array of 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 color values.
+ */
+export const generateSurfaceColorSteps = (color: string, isNeutral: boolean = false) => {
+    return [
+        removeRGB(lighten(isNeutral ? 100 : 99, color).toRgbString()),
+        removeRGB(lighten(95, color).toRgbString()),
+        removeRGB(lighten(80, color).toRgbString()),
+        removeRGB(lighten(50, color).toRgbString()),
+        removeRGB(lighten(30, color).toRgbString()),
+        removeRGB(tinycolor(color).toRgbString()),
+        removeRGB(darken(20, color).toRgbString()),
+        removeRGB(darken(40, color).toRgbString()),
+        removeRGB(darken(50, color).toRgbString()),
+        removeRGB(darken(70, color).toRgbString()),
+    ];
+};
+
+export type Steps = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export const steps: Steps[] = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
+export type StepObject = Record<Steps, string>;
+
+export const colorStepArrayToObject = (colorStepArray: string[]): StepObject => {
+    return {
+        '100': colorStepArray[1],
+        '200': colorStepArray[2],
+        '300': colorStepArray[3],
+        '400': colorStepArray[4],
+        '50': colorStepArray[0],
+        '500': colorStepArray[5],
+        '600': colorStepArray[6],
+        '700': colorStepArray[7],
+        '800': colorStepArray[8],
+        '900': colorStepArray[9],
+    };
+};
+
+export { tinycolor };

package/src/utils/wrapVar.ts

@@ -0,0 +1,24 @@
+/**
+ * CSS variable wrapping utilities for Tailwind CSS configuration
+ *
+ * These utilities handle the conversion of CSS custom property names
+ * into proper var() references, with optional opacity support for
+ * Tailwind's alpha modifier syntax (e.g., `bg-primary-500/50`).
+ *
+ * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+ * Internal reference: Hammer UI patterns
+ * Ported from the upstream theme system.
+ */
+
+/** Wraps a CSS variable name in var() */
+export const wrapVar = (value: string): string => `var(${value})`;
+
+/** Wraps a CSS variable name in rgb(var()) */
+export const wrapVarRgb = (value: string): string => `rgb(var(${value}))`;
+
+/** Wraps a variable reference with a fixed percentage opacity */
+export const wrapOpacity = (wrappedVariable: string, percentOpacity: number): string =>
+    `rgb(${wrappedVariable} / ${percentOpacity}%)`;
+
+/** Wraps a variable reference with Tailwind's alpha-value placeholder for dynamic opacity */
+export const wrapVariableOpacity = (wrappedVariable: string): string => `rgb(${wrappedVariable} / <alpha-value>)`;