@simple-base/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Reda Salmi
+
+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,32 @@
+# @simple-base/tokens
+
+Generated design tokens for Simple Base.
+
+## JavaScript and TypeScript
+
+Use the package root for the resolver and token types:
+
+```ts
+import { resolver, type Tokens } from "@simple-base/tokens";
+
+const tokens: Tokens = resolver.apply({ theme: "simple-base-dark" });
+```
+
+## Stylesheets
+
+Import CSS custom properties through a CSS-aware bundler:
+
+```css
+@import "@simple-base/tokens/css";
+```
+
+For Tailwind CSS v4 integration, use the generated theme instead. It includes
+Tailwind and the token stylesheet and requires Tailwind in the consuming project:
+
+```css
+@import "@simple-base/tokens/tailwind";
+```
+
+Utilities reference the same semantic CSS variables as the component styles, so
+`data-theme` works on the root or a nested region. Breakpoints are generated as
+literal dimensions because CSS media queries cannot resolve custom properties.

package/dist/tailwind.css

@@ -0,0 +1,121 @@
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ *  template: ../src/tailwind.template.css
+ * ------------------------------------------- */
+
+@import "tailwindcss";
+@import "./tokens.css";
+
+/* Inline aliases resolve semantic CSS roles in each element's theme scope. */
+@theme inline {
+  --color-accent-on-surface: var(--sb-semantic-color-accent-on-surface);
+  --color-accent-soft: var(--sb-semantic-color-accent-soft);
+  --color-accent-surface: var(--sb-semantic-color-accent-surface);
+  --color-accent-text: var(--sb-semantic-color-accent-text);
+  --color-background-canvas: var(--sb-semantic-color-background-canvas);
+  --color-background-overlay: var(--sb-semantic-color-background-overlay);
+  --color-background-raised: var(--sb-semantic-color-background-raised);
+  --color-background-subtle: var(--sb-semantic-color-background-subtle);
+  --color-background-surface: var(--sb-semantic-color-background-surface);
+  --color-border-default: var(--sb-semantic-color-border-default);
+  --color-border-strong: var(--sb-semantic-color-border-strong);
+  --color-border-subtle: var(--sb-semantic-color-border-subtle);
+  --color-focus-danger-ring: var(--sb-semantic-color-focus-danger-ring);
+  --color-focus-ring: var(--sb-semantic-color-focus-ring);
+  --color-foreground-inverse: var(--sb-semantic-color-foreground-inverse);
+  --color-foreground-muted: var(--sb-semantic-color-foreground-muted);
+  --color-foreground-primary: var(--sb-semantic-color-foreground-primary);
+  --color-foreground-secondary: var(--sb-semantic-color-foreground-secondary);
+  --color-foreground-subtle: var(--sb-semantic-color-foreground-subtle);
+  --color-overlay-scrim: var(--sb-semantic-color-overlay-scrim);
+  --color-selection-background: var(--sb-semantic-color-selection-background);
+  --color-selection-foreground: var(--sb-semantic-color-selection-foreground);
+  --color-status-danger-base: var(--sb-semantic-color-status-danger-base);
+  --color-status-danger-on-surface: var(--sb-semantic-color-status-danger-on-surface);
+  --color-status-danger-soft: var(--sb-semantic-color-status-danger-soft);
+  --color-status-danger-surface: var(--sb-semantic-color-status-danger-surface);
+  --color-status-danger-text: var(--sb-semantic-color-status-danger-text);
+  --color-status-info-base: var(--sb-semantic-color-status-info-base);
+  --color-status-info-on-surface: var(--sb-semantic-color-status-info-on-surface);
+  --color-status-info-soft: var(--sb-semantic-color-status-info-soft);
+  --color-status-info-surface: var(--sb-semantic-color-status-info-surface);
+  --color-status-info-text: var(--sb-semantic-color-status-info-text);
+  --color-status-success-base: var(--sb-semantic-color-status-success-base);
+  --color-status-success-on-surface: var(--sb-semantic-color-status-success-on-surface);
+  --color-status-success-soft: var(--sb-semantic-color-status-success-soft);
+  --color-status-success-surface: var(--sb-semantic-color-status-success-surface);
+  --color-status-success-text: var(--sb-semantic-color-status-success-text);
+  --color-status-warning-base: var(--sb-semantic-color-status-warning-base);
+  --color-status-warning-on-surface: var(--sb-semantic-color-status-warning-on-surface);
+  --color-status-warning-soft: var(--sb-semantic-color-status-warning-soft);
+  --color-status-warning-surface: var(--sb-semantic-color-status-warning-surface);
+  --color-status-warning-text: var(--sb-semantic-color-status-warning-text);
+  --font-body: var(--sb-semantic-typography-family-body);
+  --font-code: var(--sb-semantic-typography-family-code);
+  --font-display: var(--sb-semantic-typography-family-display);
+  --text-2xl: var(--sb-semantic-typography-size-2xl);
+  --text-3xl: var(--sb-semantic-typography-size-3xl);
+  --text-4xl: var(--sb-semantic-typography-size-4xl);
+  --text-5xl: var(--sb-semantic-typography-size-5xl);
+  --text-display: var(--sb-semantic-typography-size-display);
+  --text-lg: var(--sb-semantic-typography-size-lg);
+  --text-md: var(--sb-semantic-typography-size-md);
+  --text-sm: var(--sb-semantic-typography-size-sm);
+  --text-xl: var(--sb-semantic-typography-size-xl);
+  --text-xs: var(--sb-semantic-typography-size-xs);
+  --font-weight-bold: var(--sb-semantic-typography-weight-bold);
+  --font-weight-medium: var(--sb-semantic-typography-weight-medium);
+  --font-weight-regular: var(--sb-semantic-typography-weight-regular);
+  --font-weight-semibold: var(--sb-semantic-typography-weight-semibold);
+  --leading-none: var(--sb-semantic-typography-line-height-none);
+  --leading-normal: var(--sb-semantic-typography-line-height-normal);
+  --leading-relaxed: var(--sb-semantic-typography-line-height-relaxed);
+  --leading-snug: var(--sb-semantic-typography-line-height-snug);
+  --leading-tight: var(--sb-semantic-typography-line-height-tight);
+  --tracking-normal: var(--sb-semantic-typography-letter-spacing-normal);
+  --tracking-snug: var(--sb-semantic-typography-letter-spacing-snug);
+  --tracking-tight: var(--sb-semantic-typography-letter-spacing-tight);
+  --tracking-wide: var(--sb-semantic-typography-letter-spacing-wide);
+  --tracking-wider: var(--sb-semantic-typography-letter-spacing-wider);
+  --spacing-0: var(--sb-semantic-space-0);
+  --spacing-1: var(--sb-semantic-space-1);
+  --spacing-2: var(--sb-semantic-space-2);
+  --spacing-3: var(--sb-semantic-space-3);
+  --spacing-4: var(--sb-semantic-space-4);
+  --spacing-5: var(--sb-semantic-space-5);
+  --spacing-6: var(--sb-semantic-space-6);
+  --spacing-8: var(--sb-semantic-space-8);
+  --spacing-10: var(--sb-semantic-space-10);
+  --spacing-12: var(--sb-semantic-space-12);
+  --spacing-16: var(--sb-semantic-space-16);
+  --spacing-20: var(--sb-semantic-space-20);
+  --radius-full: var(--sb-semantic-radius-full);
+  --radius-lg: var(--sb-semantic-radius-lg);
+  --radius-md: var(--sb-semantic-radius-md);
+  --radius-none: var(--sb-semantic-radius-none);
+  --radius-sm: var(--sb-semantic-radius-sm);
+  --radius-xl: var(--sb-semantic-radius-xl);
+  --breakpoint-2xl: 1536px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-md: 768px;
+  --breakpoint-sm: 640px;
+  --breakpoint-xl: 1280px;
+  --container-content: var(--sb-semantic-size-container-content);
+  --shadow-card: var(--sb-semantic-shadow-card);
+  --shadow-overlay: var(--sb-semantic-shadow-overlay);
+  --ease-out: var(--sb-semantic-motion-easing-out);
+  --ease-standard: var(--sb-semantic-motion-easing-standard);
+  --default-transition-duration: var(--sb-semantic-motion-duration-normal);
+  --default-transition-timing-function: var(--sb-semantic-motion-easing-standard);
+}
+
+/* Theme variants match the data-theme selectors emitted in tokens.css. */
+@custom-variant simple-base-dark ([data-theme="simple-base-dark"] &);
+@custom-variant simple-base-light ([data-theme="simple-base-light"] &);
+@custom-variant catppuccin-latte ([data-theme="catppuccin-latte"] &);
+@custom-variant catppuccin-frappe ([data-theme="catppuccin-frappe"] &);
+@custom-variant catppuccin-macchiato ([data-theme="catppuccin-macchiato"] &);
+@custom-variant catppuccin-mocha ([data-theme="catppuccin-mocha"] &);
+@custom-variant dracula ([data-theme="dracula"] &);
+@custom-variant tokyo-night ([data-theme="tokyo-night"] &);
+@custom-variant nord ([data-theme="nord"] &);