@seyuna/postcss 1.0.0-canary.30 → 1.0.0-canary.32

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0-canary.32](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.31...v1.0.0-canary.32) (2026-01-21)
+
+
+### Bug Fixes
+
+* remove color validation to support multi-file CSS processing ([9c6f906](https://github.com/seyuna-corp/seyuna-postcss/commit/9c6f9064ff0a0895506ea95e3a5025523b09271d))
+
+# [1.0.0-canary.31](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.30...v1.0.0-canary.31) (2026-01-21)
+
+
+### Features
+
+* add 24 default Greek alphabet-based hues ([e6fd8f8](https://github.com/seyuna-corp/seyuna-postcss/commit/e6fd8f8d0c59c8e204c36809a116bb84816ff165))
+
 # [1.0.0-canary.30](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.29...v1.0.0-canary.30) (2026-01-21)
 
 

package/README.md

@@ -157,13 +157,21 @@ Seyuna operates entirely in the **OKLCH color space**.
 
 Standard colors define only a hue angle in the config and inherit theme lightness.
 
+### Default Hues
+
+Seyuna comes with 24 default hues based on the Greek alphabet, spaced evenly at 15-degree increments:
+
+`alpha (15)`, `beta (30)`, `gamma (45)`, `delta (60)`, `epsilon (75)`, `zeta (90)`, `eta (105)`, `theta (120)`, `iota (135)`, `kappa (150)`, `lambda (165)`, `mu (180)`, `nu (195)`, `xi (210)`, `omicron (225)`, `pi (240)`, `rho (255)`, `sigma (270)`, `tau (285)`, `upsilon (300)`, `phi (315)`, `chi (330)`, `psi (345)`, `omega (360)`.
+
+You can use these directly without configuration, or override them in the `@config` block.
+
 ```css
 @config "seyuna" {
-  --hue-primary: 240;
+  --hue-alpha: 200; /* Override default Alpha hue */
 }
 
 .badge {
-  background: SeyunaStandardColor(primary);
+  background: SeyunaStandardColor(alpha);
 }
 ```
 

package/dist/config.js

@@ -1,39 +1,71 @@
+const DEFAULT_HUES = {
+    alpha: 15,
+    beta: 30,
+    gamma: 45,
+    delta: 60,
+    epsilon: 75,
+    zeta: 90,
+    eta: 105,
+    theta: 120,
+    iota: 135,
+    kappa: 150,
+    lambda: 165,
+    mu: 180,
+    nu: 195,
+    xi: 210,
+    omicron: 225,
+    pi: 240,
+    rho: 255,
+    sigma: 270,
+    tau: 285,
+    upsilon: 300,
+    phi: 315,
+    chi: 330,
+    psi: 345,
+    omega: 360,
+};
 const DEFAULT_OPTIONS = {
     config: undefined,
     functions: undefined,
 };
 export function loadConfig(options = {}) {
     const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    const baseConfig = {
+        ui: {
+            theme: {
+                hues: { ...DEFAULT_HUES },
+                colors: {},
+                light: {
+                    chroma: 0,
+                    lightness: 0,
+                    background: { lightness: 0, chroma: 0, hue: 0 },
+                    text: { lightness: 0, chroma: 0, hue: 0 },
+                    colors: {},
+                },
+                dark: {
+                    chroma: 0,
+                    lightness: 0,
+                    background: { lightness: 0, chroma: 0, hue: 0 },
+                    text: { lightness: 0, chroma: 0, hue: 0 },
+                    colors: {},
+                },
+            },
+        },
+    };
     if (mergedOptions.config) {
+        // Deep merge or at least merge hues
+        const config = mergedOptions.config;
+        if (config.ui?.theme) {
+            config.ui.theme.hues = { ...DEFAULT_HUES, ...config.ui.theme.hues };
+        }
         return {
-            config: mergedOptions.config,
+            config: config,
             options: { ...mergedOptions, modeAttribute: "data-mode" },
         };
     }
-    // Return base empty config - we'll populate it from CSS
+    // Return base config with defaults
     return {
-        config: {
-            ui: {
-                theme: {
-                    hues: {},
-                    colors: {},
-                    light: {
-                        chroma: 0,
-                        lightness: 0,
-                        background: { lightness: 0, chroma: 0, hue: 0 },
-                        text: { lightness: 0, chroma: 0, hue: 0 },
-                        colors: {},
-                    },
-                    dark: {
-                        chroma: 0,
-                        lightness: 0,
-                        background: { lightness: 0, chroma: 0, hue: 0 },
-                        text: { lightness: 0, chroma: 0, hue: 0 },
-                        colors: {},
-                    },
-                },
-            },
-        },
+        config: baseConfig,
         options: { ...mergedOptions, modeAttribute: "data-mode" },
     };
 }

package/dist/functions/color.js

@@ -7,39 +7,47 @@ function getColorVariables(context, color, type) {
     const colors = config?.ui?.theme?.colors || {};
     const lightColors = config?.ui?.theme?.light?.colors || {};
     const darkColors = config?.ui?.theme?.dark?.colors || {};
-    const isStandard = color in hues;
-    const isFixed = color in colors || color in lightColors || color in darkColors;
-    if (type === 'sc' && !isStandard) {
-        throw new Error(`Standard color '${color}' not found in seyuna.json hues`);
-    }
-    if (type === 'fc' && !isFixed) {
-        throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
-    }
-    if (isStandard) {
+    // If explicitly typed, trust the type and generate appropriate variables
+    if (type === "sc") {
         return {
             l: "var(--lightness)",
             c: "var(--chroma)",
             h: `var(--${color}-hue)`,
         };
     }
-    if (isFixed) {
+    if (type === "fc") {
         return {
             l: `var(--${color}-lightness)`,
             c: `var(--${color}-chroma)`,
             h: `var(--${color}-hue)`,
         };
     }
-    throw new Error(`Color '${color}' not found in seyuna.json`);
+    // Auto-detect based on config
+    const isStandard = color in hues;
+    const isFixed = color in colors || color in lightColors || color in darkColors;
+    if (isStandard) {
+        return {
+            l: "var(--lightness)",
+            c: "var(--chroma)",
+            h: `var(--${color}-hue)`,
+        };
+    }
+    // Default to fixed color pattern (graceful degradation for multi-file scenarios)
+    return {
+        l: `var(--${color}-lightness)`,
+        c: `var(--${color}-chroma)`,
+        h: `var(--${color}-hue)`,
+    };
 }
 export function SeyunaStandardColor(context, name, alpha, lightness, chroma) {
-    const vars = getColorVariables(context, name, 'sc');
+    const vars = getColorVariables(context, name, "sc");
     const a = alpha && alpha !== "null" ? alpha : "1";
     const l = lightness && lightness !== "null" ? lightness : vars.l;
     const c = chroma && chroma !== "null" ? chroma : vars.c;
     return `oklch(${l} ${c} ${vars.h} / ${a})`;
 }
 export function SeyunaFixedColor(context, name, alpha, lightness, chroma) {
-    const vars = getColorVariables(context, name, 'fc');
+    const vars = getColorVariables(context, name, "fc");
     const a = alpha && alpha !== "null" ? alpha : "1";
     const l = lightness && lightness !== "null" ? lightness : vars.l;
     const c = chroma && chroma !== "null" ? chroma : vars.c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.30",
+  "version": "1.0.0-canary.32",
   "description": "Seyuna UI's postcss plugin",
   "type": "module",
   "main": "dist/index.js",

package/src/config.ts

@@ -10,6 +10,33 @@ import {
 // Re-export types for backwards compatibility
 export type { PluginOptions, PluginContext, FunctionMap } from "./types.js";
 
+const DEFAULT_HUES = {
+  alpha: 15,
+  beta: 30,
+  gamma: 45,
+  delta: 60,
+  epsilon: 75,
+  zeta: 90,
+  eta: 105,
+  theta: 120,
+  iota: 135,
+  kappa: 150,
+  lambda: 165,
+  mu: 180,
+  nu: 195,
+  xi: 210,
+  omicron: 225,
+  pi: 240,
+  rho: 255,
+  sigma: 270,
+  tau: 285,
+  upsilon: 300,
+  phi: 315,
+  chi: 330,
+  psi: 345,
+  omega: 360,
+};
+
 const DEFAULT_OPTIONS: Required<PluginOptions> = {
   config: undefined as any,
   functions: undefined as any,
@@ -21,37 +48,44 @@ export function loadConfig(options: PluginOptions = {}): {
 } {
   const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
 
+  const baseConfig: SeyunaConfig = {
+    ui: {
+      theme: {
+        hues: { ...DEFAULT_HUES },
+        colors: {},
+        light: {
+          chroma: 0,
+          lightness: 0,
+          background: { lightness: 0, chroma: 0, hue: 0 },
+          text: { lightness: 0, chroma: 0, hue: 0 },
+          colors: {},
+        },
+        dark: {
+          chroma: 0,
+          lightness: 0,
+          background: { lightness: 0, chroma: 0, hue: 0 },
+          text: { lightness: 0, chroma: 0, hue: 0 },
+          colors: {},
+        },
+      },
+    },
+  };
+
   if (mergedOptions.config) {
+    // Deep merge or at least merge hues
+    const config = mergedOptions.config;
+    if (config.ui?.theme) {
+      config.ui.theme.hues = { ...DEFAULT_HUES, ...config.ui.theme.hues };
+    }
     return {
-      config: mergedOptions.config,
+      config: config,
       options: { ...mergedOptions, modeAttribute: "data-mode" },
     };
   }
 
-  // Return base empty config - we'll populate it from CSS
+  // Return base config with defaults
   return {
-    config: {
-      ui: {
-        theme: {
-          hues: {},
-          colors: {},
-          light: {
-            chroma: 0,
-            lightness: 0,
-            background: { lightness: 0, chroma: 0, hue: 0 },
-            text: { lightness: 0, chroma: 0, hue: 0 },
-            colors: {},
-          },
-          dark: {
-            chroma: 0,
-            lightness: 0,
-            background: { lightness: 0, chroma: 0, hue: 0 },
-            text: { lightness: 0, chroma: 0, hue: 0 },
-            colors: {},
-          },
-        },
-      },
-    } as any,
+    config: baseConfig,
     options: { ...mergedOptions, modeAttribute: "data-mode" },
   };
 }

package/src/functions/color.ts

@@ -3,32 +3,26 @@ import { PluginContext } from "../types.js";
 /**
  * Resolves a color name to its CSS variables based on its type (standard or fixed)
  */
-function getColorVariables(context: PluginContext, color: string, type?: 'sc' | 'fc') {
+function getColorVariables(
+  context: PluginContext,
+  color: string,
+  type?: "sc" | "fc",
+) {
   const { config } = context;
   const hues = config?.ui?.theme?.hues || {};
   const colors = config?.ui?.theme?.colors || {};
   const lightColors = config?.ui?.theme?.light?.colors || {};
   const darkColors = config?.ui?.theme?.dark?.colors || {};
 
-  const isStandard = color in hues;
-  const isFixed = color in colors || color in lightColors || color in darkColors;
-
-  if (type === 'sc' && !isStandard) {
-    throw new Error(`Standard color '${color}' not found in seyuna.json hues`);
-  }
-  if (type === 'fc' && !isFixed) {
-    throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
-  }
-
-  if (isStandard) {
+  // If explicitly typed, trust the type and generate appropriate variables
+  if (type === "sc") {
     return {
       l: "var(--lightness)",
       c: "var(--chroma)",
       h: `var(--${color}-hue)`,
     };
   }
-
-  if (isFixed) {
+  if (type === "fc") {
     return {
       l: `var(--${color}-lightness)`,
       c: `var(--${color}-chroma)`,
@@ -36,7 +30,25 @@ function getColorVariables(context: PluginContext, color: string, type?: 'sc' |
     };
   }
 
-  throw new Error(`Color '${color}' not found in seyuna.json`);
+  // Auto-detect based on config
+  const isStandard = color in hues;
+  const isFixed =
+    color in colors || color in lightColors || color in darkColors;
+
+  if (isStandard) {
+    return {
+      l: "var(--lightness)",
+      c: "var(--chroma)",
+      h: `var(--${color}-hue)`,
+    };
+  }
+
+  // Default to fixed color pattern (graceful degradation for multi-file scenarios)
+  return {
+    l: `var(--${color}-lightness)`,
+    c: `var(--${color}-chroma)`,
+    h: `var(--${color}-hue)`,
+  };
 }
 
 export function SeyunaStandardColor(
@@ -44,9 +56,9 @@ export function SeyunaStandardColor(
   name: string,
   alpha?: string,
   lightness?: string,
-  chroma?: string
+  chroma?: string,
 ) {
-  const vars = getColorVariables(context, name, 'sc');
+  const vars = getColorVariables(context, name, "sc");
   const a = alpha && alpha !== "null" ? alpha : "1";
   const l = lightness && lightness !== "null" ? lightness : vars.l;
   const c = chroma && chroma !== "null" ? chroma : vars.c;
@@ -59,9 +71,9 @@ export function SeyunaFixedColor(
   name: string,
   alpha?: string,
   lightness?: string,
-  chroma?: string
+  chroma?: string,
 ) {
-  const vars = getColorVariables(context, name, 'fc');
+  const vars = getColorVariables(context, name, "fc");
   const a = alpha && alpha !== "null" ? alpha : "1";
   const l = lightness && lightness !== "null" ? lightness : vars.l;
   const c = chroma && chroma !== "null" ? chroma : vars.c;
@@ -69,17 +81,29 @@ export function SeyunaFixedColor(
   return `oklch(${l} ${c} ${vars.h} / ${a})`;
 }
 
-export function SeyunaAlpha(context: PluginContext, color: string, value: string) {
+export function SeyunaAlpha(
+  context: PluginContext,
+  color: string,
+  value: string,
+) {
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(${l} ${c} ${h} / ${value})`;
 }
 
-export function SeyunaLighten(context: PluginContext, color: string, amount: string) {
+export function SeyunaLighten(
+  context: PluginContext,
+  color: string,
+  amount: string,
+) {
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
 }
 
-export function SeyunaDarken(context: PluginContext, color: string, amount: string) {
+export function SeyunaDarken(
+  context: PluginContext,
+  color: string,
+  amount: string,
+) {
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
 }

package/tests/plugin.test.ts

@@ -140,7 +140,8 @@ describe("Seyuna PostCSS Plugin", () => {
     expect(result.css).toContain(":root");
     expect(result.css).toContain("--primary-hue: 200");
     expect(result.css).toContain("--secondary-hue: 100");
-    expect(result.css).not.toContain("--alpha-hue");
+    expect(result.css).toContain("--alpha-hue: 15");
+    expect(result.css).toContain("--omega-hue: 360");
 
     // Check for mode selectors
     expect(result.css).toContain('[data-mode="light"]');