@fluixi-ui/tokens 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/fluixi/assets/main/logos/128x128.png" alt="Fluixi" width="120" height="120" />
+</p>
+
+# @fluixi-ui/tokens
+
+**Two-tier design tokens and `preset.css` default skin for Fluixi UI.**
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e.svg)](../../LICENSE)
+![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white)
+![Registry](https://img.shields.io/badge/registry-GitHub%20Packages-181717?logo=github)
+![Framework](https://img.shields.io/badge/framework-Fluixi%20%F0%9F%AB%96-ff6b35)
+
+---
+
+Layer 3 of the Fluixi UI ecosystem: the design token and theming system. Every
+visual value a component uses comes from here as a CSS variable, so components
+never hardcode design values.
+
+## Architecture
+
+Two tiers:
+
+- **Reference tokens** — the raw scales. Non-color tokens (spacing, sizing,
+  typography, radius, borders, shadows, motion, opacity, blur, elevation,
+  z-index, breakpoints) are static. Color scales (`gray`, `accent`, status) are
+  authored per theme; their `--flx-ui-*` values change between themes.
+- **Semantic tokens** — meaning-based aliases (`color-bg`, `color-fg`,
+  `color-primary`, `color-border`, …) defined once, referencing the scale
+  variables. Because the scales flip per theme, the semantics follow
+  automatically.
+
+Components consume **semantic** tokens only.
+
+All variables are prefixed `--flx-ui-`. Themes are selected with `data-theme` and
+fall back to `prefers-color-scheme` when unset.
+
+```css
+:root, [data-theme='light'] { /* static + light scales + semantics */ }
+[data-theme='dark']          { /* dark scales only */ }
+[data-theme='high-contrast'] { /* high-contrast scales + semantics */ }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme])    { /* automatic dark */ }
+}
+```
+
+## Using tokens in components
+
+Import the `vars` reference — typed `var(--flx-ui-*)` strings — and never write raw
+values:
+
+```ts
+import { vars } from '@fluixi-ui/tokens/vars';
+
+const styles = {
+  background: vars.color.bg,
+  color: vars.color.fg,
+  padding: vars.space[4],
+  borderRadius: vars.radius.md,
+  boxShadow: vars.shadow.md,
+  transition: `background ${vars.duration.fast} ${vars.easing.standard}`,
+};
+```
+
+## Theming at runtime
+
+```ts
+import { injectTokens, createThemeController } from '@fluixi-ui/tokens/theme';
+
+injectTokens(); // add the stylesheet to <head>
+
+const theme = createThemeController({ defaultPreference: 'system' });
+theme.setPreference('dark');   // light | dark | high-contrast | system
+theme.toggle();
+theme.theme();                 // resolved ThemeName (reactive)
+```
+
+`createThemeController` resolves the preference (honoring `prefers-color-scheme`
+and `prefers-contrast` for `system`), applies it via `data-theme`, persists it,
+and follows system changes while the preference is `system`.
+
+Static helpers are also available: `setTheme`, `getTheme`, `clearTheme`,
+`getSystemTheme`, `prefersHighContrast`, `prefersReducedMotion`, `resolveTheme`.
+
+## Token categories
+
+Colors, typography (family, size, weight, line-height, letter-spacing), spacing,
+sizes, radius, border widths, shadows, motion (duration, easing), opacity, blur,
+elevation, z-index, breakpoints — with light, dark and high-contrast themes.
+
+## Performance
+
+- Side-effect free; the stylesheet is a plain string (`tokensCss`) that can be
+  injected at runtime or extracted at build time.
+- Theme switching only toggles one attribute; no per-component recomputation.
+- SSR-safe: DOM and `matchMedia` access no-op on the server.
+
+## Extension points
+
+`generateTokensCss()` rebuilds the stylesheet from the token definitions, and the
+reference scales (`colorScales`, `semanticColors`, `staticTokens`) are exported
+for custom builds, additional palettes, or brand overrides.
+
+---
+
+Part of the [Fluixi UI](../../README.md) component library. Made with ☕ by the Fluixi team.

package/dist/css/accordion.css

@@ -0,0 +1,7 @@
+@layer flx.components {
+/* Accordion */
+:where([role='region']) {
+  padding-bottom: var(--flx-ui-space-3);
+  color: var(--flx-ui-color-fg-muted);
+}
+}

package/dist/css/alert.css

@@ -0,0 +1,42 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Alert
+ * ------------------------------------------------------------------------- */
+:where([data-alert]) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--flx-ui-space-1);
+  text-align: left;
+  padding-block: var(--flx-ui-space-4);
+  padding-inline: var(--flx-ui-space-4);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-left-width: 3px;
+  border-radius: var(--flx-ui-radius-md);
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-alert][data-variant='info']) {
+  border-color: var(--flx-ui-color-primary);
+  background: var(--flx-ui-color-primary-subtle);
+}
+:where([data-alert][data-variant='success']) {
+  border-color: var(--flx-ui-color-success);
+  background: var(--flx-ui-color-success-subtle);
+}
+:where([data-alert][data-variant='warning']) {
+  border-color: var(--flx-ui-color-warning);
+  background: var(--flx-ui-color-warning-subtle);
+}
+:where([data-alert][data-variant='danger']) {
+  border-color: var(--flx-ui-color-danger);
+  background: var(--flx-ui-color-danger-subtle);
+}
+:where([data-alert-title]) {
+  font-weight: var(--flx-ui-font-weight-semibold);
+}
+:where([data-alert-description]) {
+  font-size: var(--flx-ui-font-size-sm);
+  opacity: 0.9;
+}
+}

package/dist/css/avatar.css

@@ -0,0 +1,36 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Avatar
+ * ------------------------------------------------------------------------- */
+:where([data-avatar]) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex: none;
+  overflow: hidden;
+  border-radius: var(--flx-ui-radius-full);
+  background: var(--flx-ui-color-bg-muted);
+  color: var(--flx-ui-color-fg-muted);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  font-size: var(--flx-ui-font-size-sm);
+  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  user-select: none;
+  vertical-align: middle;
+}
+:where([data-avatar-image]) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+:where([data-avatar-fallback]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+}

package/dist/css/badge.css

@@ -0,0 +1,12 @@
+@layer flx.components {
+/* Badge */
+:where([data-variant].flx-ui-badge, .flx-ui-badge[data-variant]) {
+  height: auto;
+  padding: 2px var(--flx-ui-space-2);
+  border-radius: var(--flx-ui-radius-full);
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-semibold);
+  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  box-shadow: none;
+}
+}

package/dist/css/base.css

@@ -0,0 +1,10 @@
+@layer flx.tokens, flx.components, flx.skin;
+
+@layer flx.components {
+
+
+:where(:root) {
+  --flx-ui-ctl-ring: 0 0 0 2px var(--flx-ui-color-bg), 0 0 0 4px var(--flx-ui-color-focus-ring);
+  --flx-ui-ctl-font: var(--flx-ui-font-weight-medium);
+}
+}