@seyuna/postcss 1.0.0-canary.15 → 1.0.0-canary.16

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.0.0-canary.16](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.15...v1.0.0-canary.16) (2026-01-10)
+
+
+### Bug Fixes
+
+* Fixed release configuration. ([3e7f764](https://github.com/seyuna-corp/seyuna-postcss/commit/3e7f76488e109110cbec50cb4c5bdc89397b3b40))
+* release configuration error. ([076eb34](https://github.com/seyuna-corp/seyuna-postcss/commit/076eb348d2ce7ca61bbc1c7a9ad597cadbe59f34))
+
 # [1.0.0-canary.15](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.14...v1.0.0-canary.15) (2026-01-09)
 
 

package/README.md

@@ -3,25 +3,37 @@
 [![NPM Version](https://img.shields.io/npm/v/@seyuna/postcss.svg)](https://www.npmjs.com/package/@seyuna/postcss)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-> The official PostCSS plugin for the Seyuna UI framework.
+> Build interfaces that transcend resolution.
 
 ---
 
-## 🚀 Overview
+## What is this
 
-`@seyuna/postcss` is a powerful PostCSS plugin that brings the Seyuna design system to your CSS. It leverages the modern **OKLCH** color space, CSS Container Queries, and configuration-driven styling to provide a premium developer experience.
+Seyuna PostCSS is the engine behind the Seyuna design system. It compiles a declarative color configuration into fully functional CSS, handles theme switching, and provides a suite of utilities that make authoring stylesheets faster and more intuitive.
+
+The core philosophy is simple: **design once at 1080p, deploy everywhere**. Seyuna UI handles upscaling automatically through viewport-relative font sizing. The result is pixel-perfect consistency from a laptop to a 4K display without breakpoints, without media queries, without you lifting a finger.
+
+```css
+html {
+  font-size: max(1rem, 0.833vw);
+}
+```
+
+This single line is the foundation. At 1920px viewport width, `0.833vw` equals exactly `16px`. Everything scales proportionally. No more designing three versions of every component.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @seyuna/postcss postcss-import postcss-advanced-variables postcss-preset-env --save-dev
 ```
 
-## Usage
+---
+
+## Configuration
 
-Add the plugin to your `postcss.config.js` (ESM):
+Create a `postcss.config.js` at your project root:
 
 ```javascript
 import seyunaPostcss from '@seyuna/postcss';
@@ -32,121 +44,155 @@ import postcssPresetEnv from 'postcss-preset-env';
 export default {
   plugins: [
     seyunaPostcss({
-      configPath: 'seyuna.json', // Path to your Seyuna config
-      modeAttribute: 'data-mode', // Attribute used for theme switching
+      configPath: 'seyuna.json',
+      modeAttribute: 'data-mode',
     }),
     postcssImport,
     postcssAdvancedVariables,
     postcssPresetEnv({
-      stage: 3, // Enables features that are in the CSS spec pipeline
+      stage: 3,
       features: {
-        "nesting-rules": true, // Uses postcss-nesting internally
+        'nesting-rules': true,
       },
     }),
   ],
 };
 ```
 
+The plugin reads from `seyuna.json` at build time. This file is your single source of truth for colors, themes, and any other design tokens you want accessible in CSS.
+
 ---
 
-## 🎨 The Color System
+## The Color Model
+
+Seyuna operates entirely in the OKLCH color space. Unlike HSL or RGB, OKLCH is perceptually uniform. A lightness of `0.66` looks equally bright across all hues. This makes it possible to build harmonious palettes programmatically.
+
+### Standard Colors
+
+Standard colors are hue-only tokens. They inherit the global `--lightness` and `--chroma` values from the current theme mode. When the user switches from light to dark, every standard color adapts automatically.
+
+```css
+.button {
+  background: sc(primary);
+}
+```
+
+Compiles to:
+
+```css
+.button {
+  background: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1);
+}
+```
 
-Seyuna distinguishes between two types of colors to maximize flexibility and maintain consistency.
+### Fixed Colors
 
-### 1. Standard Colors (`sc`)
-Standard colors are "hue-only" tokens. They automatically inherit the **lightness** and **chroma** variables assigned to the current mode (light or dark).
+Fixed colors are absolute. They define their own lightness, chroma, and hue. Use these for colors that must remain constant regardless of theme, like brand logos or semantic status indicators.
 
-- **Usage**: `sc(primary)`
-- **Compiled**: `oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)`
+```css
+.badge {
+  background: fc(white);
+}
+```
 
-### 2. Fixed Colors (`fc`)
-Fixed colors ignore the global lightness/chroma context and use their own pre-defined values.
+Compiles to:
 
-- **Usage**: `fc(white)`
-- **Compiled**: `oklch(var(--white-lightness) var(--white-chroma) var(--white-hue) / 1)`
+```css
+.badge {
+  background: oklch(var(--white-lightness) var(--white-chroma) var(--white-hue) / 1);
+}
+```
 
 ---
 
-## 🛠️ Custom Functions
+## Color Manipulation
 
-### Color Manipulation
-All color functions support both raw `oklch()` strings and color names from your `seyuna.json`.
+All color functions accept a color name from your configuration.
 
-| Function | Description | Example |
-| :--- | :--- | :--- |
-| `alpha(color, value)` | Sets the opacity of a color. | `alpha(primary, 0.5)` |
-| `lighten(color, amt)` | Increases lightness. | `lighten(primary, 0.1)` |
-| `darken(color, amt)` | Decreases lightness. | `darken(primary, 0.1)` |
-| `contrast(color)` | Returns `black` or `white`. | `color: contrast(primary)` |
+| Function              | Purpose                                  | Example                     |
+|:----------------------|:-----------------------------------------|:----------------------------|
+| `alpha(color, value)` | Adjusts opacity                          | `alpha(primary, 0.5)`       |
+| `lighten(color, amt)` | Increases lightness by `amt`             | `lighten(primary, 0.1)`     |
+| `darken(color, amt)`  | Decreases lightness by `amt`             | `darken(primary, 0.1)`      |
+| `contrast(color)`     | Returns black or white based on lightness| `color: contrast(surface);` |
 
-### Utilities
-- **`theme(path)`**: Access any value in `seyuna.json` using dot notation.
-  ```css
-  padding: theme(ui.spacing.medium);
-  ```
+The `contrast()` function uses a dynamic CSS calculation internally. It does not bake in a static value. If `--surface-lightness` changes at runtime, the contrast color updates with it.
 
 ---
 
-## 🏗️ Powerful At-Rules
+## Theme Switching
 
-### Palette Iterators
-Generate utility classes by iterating over your configuration.
+Seyuna supports three modes: `light`, `dark`, and `system`. The system mode respects `prefers-color-scheme`. All switching is handled via the `data-mode` attribute on your root element.
+
+```html
+<html data-mode="system">
+```
+
+The compiled CSS contains rules for all three states:
 
 ```css
-@each-standard-color {
-  .bg-{name} { background-color: sc({name}); }
+[data-mode="light"] {
+  --lightness: 0.66;
+  --chroma: 0.26;
 }
 
-@each-fixed-color {
-  .text-{name} { color: fc({name}); }
+@media (prefers-color-scheme: dark) {
+  [data-mode="system"] {
+    --lightness: 0.66;
+    --chroma: 0.26;
+  }
 }
 ```
 
-### Theme Wrappers
-Simplified syntax for light and dark mode overrides.
+### In-CSS Overrides
+
+Need a component to look different in dark mode? Use the `@dark` and `@light` at-rules directly in your stylesheet:
 
 ```css
 .card {
-  background: white;
+  background: fc(white);
+
   @dark {
-    background: black;
+    background: fc(black);
   }
 }
 ```
 
-### Breakpoint Shortcuts
-These generate modern CSS Container Queries. Ensure your parent element has `container-type: inline-size`.
+---
+
+## Container Queries
+
+Seyuna ships with shorthand breakpoints that compile to CSS Container Queries instead of traditional media queries. This means components respond to their container size, not the viewport.
 
 ```css
 .grid {
+  display: grid;
   grid-template-columns: 1fr;
+
   @md {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
-}
-```
-*Supported: `@xs`, `@sm`, `@md`, `@lg`, `@xl`, `@xxl`.*
 
-### Mixins & Conditionals
-```css
-@define-mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.button {
-  @apply flex-center;
-  
-  @if (theme(ui.features.glass)) {
-    backdrop-filter: blur(10px);
+  @lg {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 ```
 
+Available breakpoints:
+
+| At-Rule | Container Width |
+|:--------|:----------------|
+| `@xs`   | 20rem           |
+| `@sm`   | 30rem           |
+| `@md`   | 48rem           |
+| `@lg`   | 62rem           |
+| `@xl`   | 80rem           |
+| `@2xl`  | 96rem           |
+
 ---
 
-## ⚙️ Configuration (`seyuna.json`)
+## Configuration Reference
 
 ```json
 {
@@ -154,26 +200,76 @@ These generate modern CSS Container Queries. Ensure your parent element has `con
     "theme": {
       "hues": {
         "primary": 240,
-        "secondary": 30
+        "secondary": 30,
+        "accent": 150
       },
       "colors": {
-        "white": { "lightness": 1, "chroma": 0, "hue": 0 }
+        "white": { "lightness": 1, "chroma": 0, "hue": 0 },
+        "black": { "lightness": 0, "chroma": 0, "hue": 0 }
       },
       "light": {
+        "lightness": 0.66,
         "chroma": 0.26,
-        "lightness": 0.66
+        "background": { "lightness": 1, "chroma": 0, "hue": 0 },
+        "text": { "lightness": 0, "chroma": 0, "hue": 0 }
       },
       "dark": {
+        "lightness": 0.66,
         "chroma": 0.26,
-        "lightness": 0.66
+        "background": { "lightness": 0, "chroma": 0, "hue": 0 },
+        "text": { "lightness": 1, "chroma": 0, "hue": 0 }
       }
-    }
+    },
+    "mode": "system",
+    "output_dir": "src/styles"
+  }
+}
+```
+
+`hues` defines standard colors. Only the hue angle is specified because lightness and chroma come from the theme mode.
+
+`colors` defines fixed colors with explicit lightness, chroma, and hue values.
+
+`light` and `dark` set the global lightness and chroma for standard colors, plus any mode-specific fixed colors like background and text.
+
+---
+
+## Palette Iteration
+
+Generate utility classes by iterating over your entire color configuration:
+
+```css
+@each-standard-color {
+  .bg-{name} {
+    background-color: sc({name});
+  }
+}
+
+@each-fixed-color {
+  .text-{name} {
+    color: fc({name});
   }
 }
 ```
 
 ---
 
-## 📜 License
+## The Reset Layer
+
+Seyuna UI generates a CSS file that includes a minimal, opinionated reset. It zeroes out margins and padding, removes default list styles, and sets sensible defaults for text rendering. The reset is applied to the `reset` layer, so your styles can override it without specificity battles.
+
+The upscaling magic happens here:
+
+```css
+html {
+  font-size: max(1rem, 0.833vw);
+}
+```
+
+At 1920px, the computed font size is 16px. At 2560px, it becomes roughly 21px. Every `rem` value in your stylesheet scales accordingly. Design at 1080p. Ship at any resolution.
+
+---
+
+## License
 
-MIT © [Seyuna](https://seyuna.com)
+MIT

package/dist/at-rules/index.js

@@ -1,17 +1,9 @@
 import { eachStandardColor, eachFixedColor } from "./color";
 import container from "./container";
 import { light, dark } from "./color-scheme";
-import { defineMixin, applyMixin } from "./mixin";
-import { conditional } from "./conditional";
-import { resolveCustomMedia, defineCustomMedia } from "./custom-media";
 // Ordered array ensures execution order
 export const atRuleHandlers = [
-    { name: "define-mixin", handler: defineMixin },
-    { name: "custom-media", handler: defineCustomMedia },
-    { name: "apply", handler: applyMixin },
-    { name: "if", handler: conditional },
-    { name: "media", handler: resolveCustomMedia },
-    { name: "each-standard-color", handler: eachStandardColor }, // first
+    { name: "each-standard-color", handler: eachStandardColor },
     { name: "each-fixed-color", handler: eachFixedColor },
     { name: "light", handler: light },
     { name: "dark", handler: dark },
@@ -21,5 +13,4 @@ export const atRuleHandlers = [
     { name: "lg", handler: container },
     { name: "xl", handler: container },
     { name: "2xl", handler: container },
-    // add more handlers here as needed
 ];

package/dist/config.d.ts

@@ -7,12 +7,10 @@ export interface PluginOptions {
     config?: SeyunaConfig;
     functions?: FunctionMap;
 }
-import { ChildNode } from 'postcss';
 export interface PluginContext {
     config: SeyunaConfig;
     options: Required<PluginOptions>;
     functions: FunctionMap;
-    mixins: Record<string, ChildNode[]>;
 }
 export declare function loadConfig(options?: PluginOptions): {
     config: SeyunaConfig;

package/dist/functions/color.js

@@ -1,110 +1,63 @@
-/**
- * Utility to parse an oklch string and return its parts
- */
-function parseOklch(color) {
-    const match = color.match(/oklch\(([^ ]+) ([^ ]+) ([^ /]+)(?: \/ ([^)]+))?\)/);
-    if (!match)
-        return null;
-    return {
-        l: match[1],
-        c: match[2],
-        h: match[3],
-        a: match[4] || "1",
-    };
-}
-export function sc(context, name, alpha, lightness, chroma) {
-    let a = alpha && alpha !== "null" ? alpha : "1";
-    let l = lightness && lightness !== "null" ? lightness : "var(--lightness)";
-    let c = chroma && chroma !== "null" ? chroma : "var(--chroma)";
-    let h = `var(--${name}-hue)`;
-    return `oklch(${l} ${c} ${h} / ${a})`;
-}
-export function fc(context, name, alpha, lightness, chroma) {
-    let a = alpha && alpha !== "null" ? alpha : "1";
-    let l = lightness && lightness !== "null" ? lightness : `var(--${name}-lightness)`;
-    let c = chroma && chroma !== "null" ? chroma : `var(--${name}-chroma)`;
-    let h = `var(--${name}-hue)`;
-    return `oklch(${l} ${c} ${h} / ${a})`;
-}
 /**
  * Resolves a color name to its CSS variables based on its type (standard or fixed)
  */
-function getColorVariables(context, color) {
+function getColorVariables(context, color, type) {
     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 || {};
-    // Check if it's a standard color (sc)
-    if (color in hues) {
+    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) {
         return {
             l: "var(--lightness)",
             c: "var(--chroma)",
             h: `var(--${color}-hue)`,
         };
     }
-    // Check if it's a fixed color (fc)
-    if (color in colors || color in lightColors || color in darkColors) {
+    if (isFixed) {
         return {
             l: `var(--${color}-lightness)`,
             c: `var(--${color}-chroma)`,
             h: `var(--${color}-hue)`,
         };
     }
-    // Fallback to assume it's a fixed color if unknown but used as a name
-    return {
-        l: `var(--${color}-lightness)`,
-        c: `var(--${color}-chroma)`,
-        h: `var(--${color}-hue)`,
-    };
+    throw new Error(`Color '${color}' not found in seyuna.json`);
+}
+export function sc(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) {
+    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) {
-    const parsed = parseOklch(color);
-    if (parsed) {
-        return `oklch(${parsed.l} ${parsed.c} ${parsed.h} / ${value})`;
-    }
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(${l} ${c} ${h} / ${value})`;
 }
 export function lighten(context, color, amount) {
-    const parsed = parseOklch(color);
-    if (parsed) {
-        if (parsed.l.startsWith('var(')) {
-            return `oklch(calc(${parsed.l} + ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
-        }
-        const lValue = parseFloat(parsed.l);
-        const amtValue = parseFloat(amount);
-        return `oklch(${Math.min(1, lValue + amtValue)} ${parsed.c} ${parsed.h} / ${parsed.a})`;
-    }
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
 }
 export function darken(context, color, amount) {
-    const parsed = parseOklch(color);
-    if (parsed) {
-        if (parsed.l.startsWith('var(')) {
-            return `oklch(calc(${parsed.l} - ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
-        }
-        const lValue = parseFloat(parsed.l);
-        const amtValue = parseFloat(amount);
-        return `oklch(${Math.max(0, lValue - amtValue)} ${parsed.c} ${parsed.h} / ${parsed.a})`;
-    }
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
 }
 export function contrast(context, color) {
-    const parsed = parseOklch(color);
-    let l;
-    if (parsed) {
-        l = parsed.l;
-    }
-    else {
-        const vars = getColorVariables(context, color);
-        l = vars.l;
-    }
-    // Dynamic CSS contrast logic:
-    // (L - 0.6) * -1000 will be:
-    // - very negative if L > 0.6 (clamped to 0 / black)
-    // - very positive if L < 0.6 (clamped to 1 / white)
+    const { l } = getColorVariables(context, color);
     return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/dist/plugin.js

@@ -9,7 +9,6 @@ export const dynamicFunctionsPlugin = (opts = {}) => {
         config,
         options,
         functions: fnMap,
-        mixins: {},
     };
     return {
         postcssPlugin: "postcss-dynamic-functions",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.15",
+  "version": "1.0.0-canary.16",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,6 +36,7 @@
     "@semantic-release/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.0",
     "semantic-release": "^25.0.2",

package/release.config.mjs

@@ -4,7 +4,12 @@
 export default {
   branches: [{ name: "canary", prerelease: "canary" }, "main"],
   plugins: [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        preset: "conventionalcommits",
+      },
+    ],
     "@semantic-release/release-notes-generator",
     ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
     [

package/src/at-rules/index.ts

@@ -2,9 +2,6 @@ import { AtRule } from "postcss";
 import { eachStandardColor, eachFixedColor } from "./color";
 import container from "./container";
 import { light, dark } from "./color-scheme";
-import { defineMixin, applyMixin } from "./mixin";
-import { conditional } from "./conditional";
-import { resolveCustomMedia, defineCustomMedia } from "./custom-media";
 import { PluginContext } from "../config";
 
 // Each handler has a name (matches the at-rule) and the function
@@ -15,12 +12,7 @@ export interface AtRuleHandler {
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
-  { name: "define-mixin", handler: defineMixin },
-  { name: "custom-media", handler: defineCustomMedia },
-  { name: "apply", handler: applyMixin },
-  { name: "if", handler: conditional },
-  { name: "media", handler: resolveCustomMedia },
-  { name: "each-standard-color", handler: eachStandardColor }, // first
+  { name: "each-standard-color", handler: eachStandardColor },
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },
   { name: "dark", handler: dark },
@@ -30,5 +22,4 @@ export const atRuleHandlers: AtRuleHandler[] = [
   { name: "lg", handler: container },
   { name: "xl", handler: container },
   { name: "2xl", handler: container },
-  // add more handlers here as needed
 ];

package/src/config.ts

@@ -11,13 +11,10 @@ export interface PluginOptions {
   functions?: FunctionMap;
 }
 
-import { ChildNode } from 'postcss';
-
 export interface PluginContext {
   config: SeyunaConfig;
   options: Required<PluginOptions>;
   functions: FunctionMap;
-  mixins: Record<string, ChildNode[]>;
 }
 
 const DEFAULT_OPTIONS: Required<PluginOptions> = {