@seyuna/postcss 1.0.0-canary.25 → 1.0.0-canary.27

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0-canary.27](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.26...v1.0.0-canary.27) (2026-01-20)
+
+
+### Features
+
+* implement [@import](https://github.com/import) 'seyuna' to replicate CLI behavior ([db3a3ff](https://github.com/seyuna-corp/seyuna-postcss/commit/db3a3fff3664b435840e7421d9b99262dfd31953))
+
+# [1.0.0-canary.26](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.25...v1.0.0-canary.26) (2026-01-11)
+
+
+### Features
+
+* trigger major release\n\nBREAKING CHANGE: rename and prefix all custom CSS functions with Seyuna to avoid conflicts with native CSS functions. ([3a50bca](https://github.com/seyuna-corp/seyuna-postcss/commit/3a50bcafa89d0c3e21e2b9d1acc879458d9b25aa))
+
 # [1.0.0-canary.25](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.24...v1.0.0-canary.25) (2026-01-10)
 
 

package/dist/at-rules/import.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../types.js";
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export declare function handleImport(atRule: any, context: PluginContext): void;

package/dist/at-rules/import.js

@@ -0,0 +1,120 @@
+import Rule from "postcss/lib/rule";
+import Declaration from "postcss/lib/declaration";
+import AtRule from "postcss/lib/at-rule";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import postcss from "postcss";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const STANDARD_HUES = [
+    'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta', 'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi', 'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'
+];
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export function handleImport(atRule, context) {
+    const params = atRule.params.replace(/['"]/g, "");
+    if (params === "seyuna") {
+        const { config, options } = context;
+        if (!config.ui) {
+            atRule.remove();
+            return;
+        }
+        const { theme } = config.ui;
+        const modeAttribute = options.modeAttribute;
+        const nodes = [];
+        // 1. Ingest Global Base Styles (Reset, Layers, etc.)
+        try {
+            const globalStylesPath = path.resolve(__dirname, "../styles/seyuna-global.css");
+            if (fs.existsSync(globalStylesPath)) {
+                const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
+                const cleanCss = globalCss.split('$')[0].trim();
+                const parsed = postcss.parse(cleanCss);
+                // Only keep layers and reset styles, avoid re-injecting variables
+                parsed.each((node) => {
+                    if (node.type === 'atrule' && (node.name === 'layer' || node.name === 'media')) {
+                        nodes.push(node.clone());
+                    }
+                });
+            }
+            else {
+                nodes.push(new AtRule({ name: "layer", params: "reset, base, components, utilities" }));
+            }
+        }
+        catch (e) {
+            console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
+        }
+        // 2. Global Hues and Base Colors (:root)
+        const rootRule = new Rule({ selector: ":root", source: atRule.source });
+        // Process all hues from config plus defaults
+        const allHues = new Set([...STANDARD_HUES, ...Object.keys(theme.hues || {})]);
+        allHues.forEach((name) => {
+            const i = STANDARD_HUES.indexOf(name);
+            const defaultValue = i !== -1 ? i * 15 : 0;
+            const value = (theme.hues && theme.hues[name] !== undefined) ? theme.hues[name] : defaultValue;
+            rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
+        });
+        // Add shared colors from theme.colors
+        if (theme.colors) {
+            for (const [name, color] of Object.entries(theme.colors)) {
+                rootRule.append(new Declaration({ prop: `--${name}-lightness`, value: String(color.lightness) }));
+                rootRule.append(new Declaration({ prop: `--${name}-chroma`, value: String(color.chroma) }));
+                rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }));
+            }
+        }
+        nodes.push(rootRule);
+        // Helper to generate palette declarations for a specific mode
+        const getPaletteDecls = (palette) => {
+            const decls = [];
+            if (palette.lightness !== undefined) {
+                decls.push(new Declaration({ prop: "--lightness", value: String(palette.lightness) }));
+            }
+            if (palette.chroma !== undefined) {
+                decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
+            }
+            // Standard background/text if they exist
+            if (palette.background) {
+                decls.push(new Declaration({ prop: "--background", value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})` }));
+            }
+            if (palette.text) {
+                decls.push(new Declaration({ prop: "--text", value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})` }));
+            }
+            if (palette.colors) {
+                for (const [name, color] of Object.entries(palette.colors)) {
+                    const c = color;
+                    decls.push(new Declaration({ prop: `--${name}-lightness`, value: String(c.lightness) }));
+                    decls.push(new Declaration({ prop: `--${name}-chroma`, value: String(c.chroma) }));
+                    decls.push(new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }));
+                }
+            }
+            return decls;
+        };
+        // 3. Explicit Mode Selectors ([data-mode="..."])
+        if (theme.light) {
+            const lightRule = new Rule({ selector: `[${modeAttribute}="light"]`, source: atRule.source });
+            lightRule.append(...getPaletteDecls(theme.light));
+            nodes.push(lightRule);
+        }
+        if (theme.dark) {
+            const darkRule = new Rule({ selector: `[${modeAttribute}="dark"]`, source: atRule.source });
+            darkRule.append(...getPaletteDecls(theme.dark));
+            nodes.push(darkRule);
+        }
+        // 4. System Preference Support
+        const createSystemMedia = (scheme, palette) => {
+            const media = new AtRule({ name: "media", params: `(prefers-color-scheme: ${scheme})`, source: atRule.source });
+            const rule = new Rule({ selector: `[${modeAttribute}="system"]`, source: atRule.source });
+            rule.append(...getPaletteDecls(palette));
+            media.append(rule);
+            return media;
+        };
+        if (theme.light)
+            nodes.push(createSystemMedia('light', theme.light));
+        if (theme.dark)
+            nodes.push(createSystemMedia('dark', theme.dark));
+        // Replace the @import rule with our generated CSS
+        atRule.replaceWith(...nodes);
+    }
+}

package/dist/at-rules/index.js

@@ -2,8 +2,10 @@
 import { eachStandardColor, eachFixedColor } from "./color.js";
 import container from "./container.js";
 import { light, dark } from "./color-scheme.js";
+import { handleImport } from "./import.js";
 // Ordered array ensures execution order
 export const atRuleHandlers = [
+    { name: "import", handler: handleImport },
     { name: "each-standard-color", handler: eachStandardColor },
     { name: "each-fixed-color", handler: eachFixedColor },
     { name: "light", handler: light },

package/dist/functions/color.d.ts

@@ -1,7 +1,7 @@
 import { PluginContext } from "../types.js";
-export declare function sc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
-export declare function fc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
-export declare function alpha(context: PluginContext, color: string, value: string): string;
-export declare function lighten(context: PluginContext, color: string, amount: string): string;
-export declare function darken(context: PluginContext, color: string, amount: string): string;
-export declare function contrast(context: PluginContext, color: string): string;
+export declare function SeyunaStandardColor(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function SeyunaFixedColor(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function SeyunaAlpha(context: PluginContext, color: string, value: string): string;
+export declare function SeyunaLighten(context: PluginContext, color: string, amount: string): string;
+export declare function SeyunaDarken(context: PluginContext, color: string, amount: string): string;
+export declare function SeyunaContrast(context: PluginContext, color: string): string;

package/dist/functions/color.js

@@ -31,33 +31,33 @@ function getColorVariables(context, color, type) {
     }
     throw new Error(`Color '${color}' not found in seyuna.json`);
 }
-export function sc(context, name, alpha, lightness, chroma) {
+export function SeyunaStandardColor(context, name, alpha, lightness, chroma) {
     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 fc(context, name, alpha, lightness, chroma) {
+export function SeyunaFixedColor(context, name, alpha, lightness, chroma) {
     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;
     return `oklch(${l} ${c} ${vars.h} / ${a})`;
 }
-export function alpha(context, color, value) {
+export function SeyunaAlpha(context, color, value) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(${l} ${c} ${h} / ${value})`;
 }
-export function lighten(context, color, amount) {
+export function SeyunaLighten(context, color, amount) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
 }
-export function darken(context, color, amount) {
+export function SeyunaDarken(context, color, amount) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
 }
-export function contrast(context, color) {
+export function SeyunaContrast(context, color) {
     const { l } = getColorVariables(context, color);
     return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/dist/functions/index.js

@@ -1,11 +1,11 @@
-import { sc, fc, alpha, lighten, darken, contrast } from "./color.js";
-import { theme } from "./theme.js";
+import { SeyunaStandardColor, SeyunaFixedColor, SeyunaAlpha, SeyunaLighten, SeyunaDarken, SeyunaContrast, } from "./color.js";
+import { SeyunaTheme } from "./theme.js";
 export const functions = {
-    sc,
-    fc,
-    alpha,
-    lighten,
-    darken,
-    contrast,
-    theme,
+    SeyunaStandardColor,
+    SeyunaFixedColor,
+    SeyunaAlpha,
+    SeyunaLighten,
+    SeyunaDarken,
+    SeyunaContrast,
+    SeyunaTheme,
 };

package/dist/functions/theme.d.ts

@@ -3,4 +3,4 @@ import { PluginContext } from "../types.js";
  * Accesses values from the Seyuna configuration using dot notation
  * Example: theme(ui.theme.breakpoints.tablet)
  */
-export declare function theme(context: PluginContext, path: string): string;
+export declare function SeyunaTheme(context: PluginContext, path: string): string;

package/dist/functions/theme.js

@@ -2,7 +2,7 @@
  * Accesses values from the Seyuna configuration using dot notation
  * Example: theme(ui.theme.breakpoints.tablet)
  */
-export function theme(context, path) {
+export function SeyunaTheme(context, path) {
     const parts = path.split('.');
     let current = context.config;
     for (const part of parts) {

package/package.json

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

package/src/at-rules/import.ts

@@ -0,0 +1,136 @@
+import Rule from "postcss/lib/rule";
+import Declaration from "postcss/lib/declaration";
+import AtRule from "postcss/lib/at-rule";
+import { PluginContext } from "../types.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import postcss from "postcss";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const STANDARD_HUES = [
+  'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta', 'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi', 'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'
+];
+
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export function handleImport(atRule: any, context: PluginContext) {
+  const params = atRule.params.replace(/['"]/g, "");
+
+  if (params === "seyuna") {
+    const { config, options } = context;
+    if (!config.ui) {
+      atRule.remove();
+      return;
+    }
+
+    const { theme } = config.ui;
+    const modeAttribute = options.modeAttribute;
+    const nodes: any[] = [];
+
+    // 1. Ingest Global Base Styles (Reset, Layers, etc.)
+    try {
+        const globalStylesPath = path.resolve(__dirname, "../styles/seyuna-global.css");
+        if (fs.existsSync(globalStylesPath)) {
+            const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
+            const cleanCss = globalCss.split('$')[0].trim();
+            const parsed = postcss.parse(cleanCss);
+            
+            // Only keep layers and reset styles, avoid re-injecting variables
+            parsed.each((node) => {
+                if (node.type === 'atrule' && (node.name === 'layer' || node.name === 'media')) {
+                    nodes.push(node.clone());
+                }
+            });
+        } else {
+            nodes.push(new AtRule({ name: "layer", params: "reset, base, components, utilities" }));
+        }
+    } catch (e) {
+        console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
+    }
+
+    // 2. Global Hues and Base Colors (:root)
+    const rootRule = new Rule({ selector: ":root", source: atRule.source });
+    
+    // Process all hues from config plus defaults
+    const allHues = new Set([...STANDARD_HUES, ...Object.keys(theme.hues || {})]);
+    allHues.forEach((name) => {
+        const i = STANDARD_HUES.indexOf(name);
+        const defaultValue = i !== -1 ? i * 15 : 0;
+        const value = (theme.hues && theme.hues[name] !== undefined) ? theme.hues[name] : defaultValue;
+        rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
+    });
+
+    // Add shared colors from theme.colors
+    if (theme.colors) {
+        for (const [name, color] of Object.entries(theme.colors)) {
+            rootRule.append(new Declaration({ prop: `--${name}-lightness`, value: String(color.lightness) }));
+            rootRule.append(new Declaration({ prop: `--${name}-chroma`, value: String(color.chroma) }));
+            rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }));
+        }
+    }
+    nodes.push(rootRule);
+
+    // Helper to generate palette declarations for a specific mode
+    const getPaletteDecls = (palette: any) => {
+      const decls: Declaration[] = [];
+      
+      if (palette.lightness !== undefined) {
+          decls.push(new Declaration({ prop: "--lightness", value: String(palette.lightness) }));
+      }
+      if (palette.chroma !== undefined) {
+          decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
+      }
+
+      // Standard background/text if they exist
+      if (palette.background) {
+          decls.push(new Declaration({ prop: "--background", value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})` }));
+      }
+      if (palette.text) {
+          decls.push(new Declaration({ prop: "--text", value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})` }));
+      }
+
+      if (palette.colors) {
+        for (const [name, color] of Object.entries(palette.colors)) {
+          const c = color as any;
+          decls.push(new Declaration({ prop: `--${name}-lightness`, value: String(c.lightness) }));
+          decls.push(new Declaration({ prop: `--${name}-chroma`, value: String(c.chroma) }));
+          decls.push(new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }));
+        }
+      }
+      return decls;
+    };
+
+    // 3. Explicit Mode Selectors ([data-mode="..."])
+    if (theme.light) {
+        const lightRule = new Rule({ selector: `[${modeAttribute}="light"]`, source: atRule.source });
+        lightRule.append(...getPaletteDecls(theme.light));
+        nodes.push(lightRule);
+    }
+
+    if (theme.dark) {
+        const darkRule = new Rule({ selector: `[${modeAttribute}="dark"]`, source: atRule.source });
+        darkRule.append(...getPaletteDecls(theme.dark));
+        nodes.push(darkRule);
+    }
+
+    // 4. System Preference Support
+    const createSystemMedia = (scheme: 'light' | 'dark', palette: any) => {
+        const media = new AtRule({ name: "media", params: `(prefers-color-scheme: ${scheme})`, source: atRule.source });
+        const rule = new Rule({ selector: `[${modeAttribute}="system"]`, source: atRule.source });
+        rule.append(...getPaletteDecls(palette));
+        media.append(rule);
+        return media;
+    };
+
+    if (theme.light) nodes.push(createSystemMedia('light', theme.light));
+    if (theme.dark) nodes.push(createSystemMedia('dark', theme.dark));
+
+    // Replace the @import rule with our generated CSS
+    atRule.replaceWith(...nodes);
+  }
+}

package/src/at-rules/index.ts

@@ -2,6 +2,7 @@
 import { eachStandardColor, eachFixedColor } from "./color.js";
 import container from "./container.js";
 import { light, dark } from "./color-scheme.js";
+import { handleImport } from "./import.js";
 import { PluginContext } from "../types.js";
 
 // Each handler has a name (matches the at-rule) and the function
@@ -12,6 +13,7 @@ export interface AtRuleHandler {
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
+  { name: "import", handler: handleImport },
   { name: "each-standard-color", handler: eachStandardColor },
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },

package/src/functions/color.ts

@@ -39,7 +39,7 @@ function getColorVariables(context: PluginContext, color: string, type?: 'sc' |
   throw new Error(`Color '${color}' not found in seyuna.json`);
 }
 
-export function sc(
+export function SeyunaStandardColor(
   context: PluginContext,
   name: string,
   alpha?: string,
@@ -54,7 +54,7 @@ export function sc(
   return `oklch(${l} ${c} ${vars.h} / ${a})`;
 }
 
-export function fc(
+export function SeyunaFixedColor(
   context: PluginContext,
   name: string,
   alpha?: string,
@@ -69,22 +69,22 @@ export function fc(
   return `oklch(${l} ${c} ${vars.h} / ${a})`;
 }
 
-export function alpha(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 lighten(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 darken(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)`;
 }
 
-export function contrast(context: PluginContext, color: string) {
+export function SeyunaContrast(context: PluginContext, color: string) {
   const { l } = getColorVariables(context, color);
   return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/src/functions/index.ts

@@ -1,15 +1,22 @@
-import { sc, fc, alpha, lighten, darken, contrast } from "./color.js";
-import { theme } from "./theme.js";
+import {
+  SeyunaStandardColor,
+  SeyunaFixedColor,
+  SeyunaAlpha,
+  SeyunaLighten,
+  SeyunaDarken,
+  SeyunaContrast,
+} from "./color.js";
+import { SeyunaTheme } from "./theme.js";
 import { PluginContext } from "../types.js";
 
 export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 
 export const functions: Record<string, FnHandler> = {
-  sc,
-  fc,
-  alpha,
-  lighten,
-  darken,
-  contrast,
-  theme,
+  SeyunaStandardColor,
+  SeyunaFixedColor,
+  SeyunaAlpha,
+  SeyunaLighten,
+  SeyunaDarken,
+  SeyunaContrast,
+  SeyunaTheme,
 };

package/src/functions/theme.ts

@@ -4,7 +4,7 @@ import { PluginContext } from "../types.js";
  * Accesses values from the Seyuna configuration using dot notation
  * Example: theme(ui.theme.breakpoints.tablet)
  */
-export function theme(context: PluginContext, path: string): string {
+export function SeyunaTheme(context: PluginContext, path: string): string {
   const parts = path.split('.');
   let current: any = context.config;
 

package/tests/plugin.test.ts

@@ -38,44 +38,44 @@ async function run(input: string, opts: any = {}) {
 }
 
 describe('Seyuna PostCSS Plugin', () => {
-  it('processes sc() function', async () => {
-    const input = '.test { color: sc(primary); }';
+  it('processes SeyunaStandardColor() function', async () => {
+    const input = '.test { color: SeyunaStandardColor(primary); }';
     const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
 
-  it('processes sc() with alpha', async () => {
-    const input = '.test { color: sc(primary, 0.5); }';
+  it('processes SeyunaStandardColor() with alpha', async () => {
+    const input = '.test { color: SeyunaStandardColor(primary, 0.5); }';
     const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
 
-  it('processes alpha() function with color name', async () => {
-    const input = '.test { color: alpha(primary, 0.5); }';
+  it('processes SeyunaAlpha() function with color name', async () => {
+    const input = '.test { color: SeyunaAlpha(primary, 0.5); }';
     const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
 
-  it('processes lighten() function with color name', async () => {
-    const input = '.test { color: lighten(primary, 0.1); }';
+  it('processes SeyunaLighten() function with color name', async () => {
+    const input = '.test { color: SeyunaLighten(primary, 0.1); }';
     const output = 'color: oklch(calc(var(--lightness) + 0.1) var(--chroma) var(--primary-hue) / 1)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
 
-  it('processes darken() function with color name', async () => {
-    const input = '.test { color: darken(primary, 0.1); }';
+  it('processes SeyunaDarken() function with color name', async () => {
+    const input = '.test { color: SeyunaDarken(primary, 0.1); }';
     const output = 'color: oklch(calc(var(--lightness) - 0.1) var(--chroma) var(--primary-hue) / 1)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
 
-  it('processes theme() function', async () => {
+  it('processes SeyunaTheme() function', async () => {
     // We pass the config via opts for testing
-    const input = '.test { border-radius: theme(ui.theme.breakpoints.tablet); }';
+    const input = '.test { border-radius: SeyunaTheme(ui.theme.breakpoints.tablet); }';
     const result = await run(input, { config: mockConfig });
     expect(result.css).toContain('.test { border-radius: 48rem');
   });
@@ -95,49 +95,76 @@ describe('Seyuna PostCSS Plugin', () => {
     expect(result.css).toContain('[data-mode="light"] &');
   });
 
-  it('processes alpha() with standard color', async () => {
-    const input = '.test { color: alpha(primary, 0.5); }';
+  it('processes SeyunaAlpha() with standard color', async () => {
+    const input = '.test { color: SeyunaAlpha(primary, 0.5); }';
     const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
     const result = await run(input, { config: mockConfig });
     expect(result.css).toContain(output);
   });
 
-  it('processes alpha() with fixed color', async () => {
-    const input = '.test { color: alpha(surface, 0.5); }';
+  it('processes SeyunaAlpha() with fixed color', async () => {
+    const input = '.test { color: SeyunaAlpha(surface, 0.5); }';
     const output = 'color: oklch(var(--surface-lightness) var(--surface-chroma) var(--surface-hue) / 0.5)';
     const result = await run(input, { config: mockConfig });
     expect(result.css).toContain(output);
   });
 
-  it('processes contrast() with fixed color', async () => {
-    const input = '.test { color: contrast(surface); }';
+  it('processes SeyunaContrast() with fixed color', async () => {
+    const input = '.test { color: SeyunaContrast(surface); }';
     const output = 'color: oklch(calc((var(--surface-lightness) - 0.6) * -1000) 0 0)';
     const result = await run(input, { config: mockConfig });
     expect(result.css).toContain(output);
   });
 
-  it('processes contrast() with standard color', async () => {
-    const input = '.test { color: contrast(primary); }';
+  it('processes SeyunaContrast() with standard color', async () => {
+    const input = '.test { color: SeyunaContrast(primary); }';
     const output = 'color: oklch(calc((var(--lightness) - 0.6) * -1000) 0 0)';
     const result = await run(input, { config: mockConfig });
     expect(result.css).toContain(output);
   });
 
   it('throws error for unknown standard color in strict mode', async () => {
-    const input = '.test { color: sc(unknown); }';
+    const input = '.test { color: SeyunaStandardColor(unknown); }';
     await expect(run(input, { config: mockConfig, strict: true }))
       .rejects.toThrow(/Standard color 'unknown' not found/);
   });
 
   it('throws error for unknown fixed color in strict mode', async () => {
-    const input = '.test { color: fc(unknown); }';
+    const input = '.test { color: SeyunaFixedColor(unknown); }';
     await expect(run(input, { config: mockConfig, strict: true }))
       .rejects.toThrow(/Fixed color 'unknown' not found/);
   });
 
-  it('throws error for unknown color in alpha() in strict mode', async () => {
-    const input = '.test { color: alpha(unknown, 0.5); }';
+  it('throws error for unknown color in SeyunaAlpha() in strict mode', async () => {
+    const input = '.test { color: SeyunaAlpha(unknown, 0.5); }';
     await expect(run(input, { config: mockConfig, strict: true }))
       .rejects.toThrow(/Color 'unknown' not found in seyuna.json/);
   });
+
+  it('processes @import "seyuna"', async () => {
+    const input = '@import "seyuna";';
+    const result = await run(input, { config: mockConfig });
+    
+    // Check for root variables (hues)
+    expect(result.css).toContain(':root');
+    expect(result.css).toContain('--alpha-hue: 0');
+    expect(result.css).toContain('--omega-hue: 345');
+    expect(result.css).toContain('--primary-hue: 200'); // Override from mockConfig
+    
+    // Check for mode selectors
+    expect(result.css).toContain('[data-mode="light"]');
+    expect(result.css).toContain('[data-mode="dark"]');
+    expect(result.css).toContain('--lightness: 0.66');
+    
+    // Check for system preference media queries
+    expect(result.css).toContain('@media (prefers-color-scheme: light)');
+    expect(result.css).toContain('@media (prefers-color-scheme: dark)');
+
+    // Check for base styles (reset)
+    expect(result.css).toContain('@layer reset');
+    expect(result.css).toContain('-webkit-text-size-adjust: none');
+
+    // Check for palette colors
+    expect(result.css).toContain('--surface-lightness: 1');
+  });
 });