@ds-gn/tokens 0.0.0-stage → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LightLeap Labs
+
+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

@@ -1,3 +1,245 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=tokens&utm_content=hero_logo">
+    <img src="https://ds-gn.com/logo.svg" alt="DS-GN" width="240">
+  </a>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @ds-gn/tokens
+
+CSS variables, themes, Tailwind integration, and typed JavaScript values for the
+DS-GN Design System.
+
+This package is the design-token dependency for `@ds-gn/ui`. Install it
+directly when your application imports the token stylesheets or customizes the
+DS-GN theme.
+
+**Public Beta** ·
+[Website](https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=tokens&utm_content=website_link)
+· [Documentation](https://docs.ds-gn.com/) ·
+[Token reference](https://docs.ds-gn.com/tokens/colors/) ·
+[Changelog](https://docs.ds-gn.com/changelog/tokens/)
+
+## Install
+
+Choose your package manager:
+
+```bash
+npm install @ds-gn/tokens
+pnpm add @ds-gn/tokens
+bun add @ds-gn/tokens
+```
+
+Using the DS-GN UI components? Install both packages as direct dependencies:
+
+```bash
+npm install @ds-gn/ui @ds-gn/tokens
+```
+
+## Quick start
+
+Load the public token definitions and the semantic light/dark theme, in that
+order:
+
+```css
+@import '@ds-gn/tokens/public';
+@import '@ds-gn/tokens/theme';
+```
+
+Using the DS-GN components as well? Add the custom-property registrations,
+which must be loaded on the document rather than inside a component:
+
+```css
+@import '@ds-gn/tokens/properties';
+```
+
+Tokens are also available as typed named JavaScript exports:
+
+```js
+import { breakpointLg, breakpointMd } from '@ds-gn/tokens';
+
+console.log(breakpointMd); // "768px"
+console.log(breakpointLg); // "1024px"
+```
+
+### Import order matters
+
+Each file builds on the one before it, and the last definition of a custom
+property wins:
+
+1. **`/public`** sets every token's default value on `:root`.
+2. **`/theme`** points the unsuffixed tokens at the light or dark value, keyed
+   on `[data-theme]` or a `.light` / `.dark` class.
+3. **your overrides** replace the defaults from step 1.
+
+`/properties` is order-independent — it only registers types.
+
+## Light and dark
+
+Themed tokens ship as a pair of override targets, `--<name>-on-light` and
+`--<name>-on-dark`, plus an unsuffixed name that components actually read.
+`/theme` is what connects them:
+
+```css
+:root,
+[data-theme='dark'],
+.dark {
+  --color-text-primary: var(--text-primary-on-dark);
+}
+
+[data-theme='light'],
+.light {
+  --color-text-primary: var(--text-primary-on-light);
+}
+```
+
+Dark is the default. Switch by setting `data-theme="light"` on any element —
+the tokens inherit, so a subtree can carry a different theme than the page.
+
+Tokens with no meaningful per-theme value — durations, easing curves, corner
+radii, and the deliberately dark terminal chrome — are single-value. They have
+one unsuffixed override target, no `-on-*` variants, and no entry in `/theme`.
+
+## Customize the theme
+
+Override public CSS custom properties in your own stylesheet. Load the override
+file after the DS-GN token styles so your values win the cascade:
+
+```css
+@import '@ds-gn/tokens/public';
+@import '@ds-gn/tokens/theme';
+@import './brand-overrides.css';
+```
+
+In `brand-overrides.css`, define the variants you want to change:
+
+```css
+:root {
+  /* Themed — override each side */
+  --brand-on-light: oklch(55% 0.2 280);
+  --brand-on-dark: oklch(70% 0.18 280);
+
+  --accent-on-light: oklch(60% 0.25 30);
+  --accent-on-dark: oklch(72% 0.22 30);
+
+  /* Single-value — one override */
+  --radius-button: 0.5rem;
+  --duration-moderate: 300ms;
+}
+```
+
+Each token has a default, so you only need to define the values you want to
+replace. Overrides apply everywhere the tokens are used, including inside
+DS-GN component shadow roots.
+
+### Start from the complete override template
+
+The package includes a commented template containing every supported override:
+
+```bash
+cp node_modules/@ds-gn/tokens/dist/tokens.overrides.template.css \
+  ./src/brand-overrides.css
+```
+
+`brand-overrides.css` is the recommended consumer filename, not a generated
+package artifact; applications may choose another local name. Uncomment and
+edit the required values, then import the copied file after
+`@ds-gn/tokens/theme`. The template is also exposed as
+`@ds-gn/tokens/template` for tools that resolve package exports.
+
+## Package exports
+
+| Export                     | Purpose                                            |
+| -------------------------- | -------------------------------------------------- |
+| `@ds-gn/tokens`            | Typed JavaScript token values                      |
+| `@ds-gn/tokens/public`     | Public CSS custom-property definitions             |
+| `@ds-gn/tokens/theme`      | Semantic light and dark theme mappings             |
+| `@ds-gn/tokens/tailwind`   | Tailwind CSS theme integration                     |
+| `@ds-gn/tokens/properties` | Typed CSS custom-property registrations            |
+| `@ds-gn/tokens/template`   | Starter file for application-level token overrides |
+
+This table is the complete supported surface. Anything else inside `dist` is an
+internal build artifact with no compatibility promise — read it and a patch
+release may break you.
+
+## Tailwind
+
+`@ds-gn/tokens/tailwind` is a Tailwind v4 `@theme` block, so every token
+also generates utilities:
+
+```css
+@import 'tailwindcss';
+@import '@ds-gn/tokens/tailwind';
+```
+
+```html
+<div class="bg-surface-elevated text-text-primary rounded-card">…</div>
+```
+
+You still need `/public` and `/theme` on the document. The `@theme` entries
+carry each token's default as a `var()` fallback so utilities render correctly
+on their own, but theme switching and your overrides come from the document
+stylesheets.
+
+Breakpoints are the exception: they are emitted as literal `rem` values rather
+than `var()` references, because a custom property cannot be used in a media
+query. They are not override targets.
+
+## What is and is not overridable
+
+**Override targets.** The `--<name>-on-light` / `--<name>-on-dark` pairs and the
+single-value tokens — everything the overrides template lists. These are the
+supported API.
+
+**Color primitives** (`--color-orange-500`, `--color-neutral-900`, …) are
+declared on `:root` and stable, but they are the raw palette the semantic tokens
+are built from. Overriding one shifts everything derived from it. Rebrand
+through the semantic tokens instead.
+
+**Structural tokens** — breakpoints and the default font families — are
+JavaScript exports only. They never appear as overridable custom properties.
+
+**Internal variables** are prefixed `--dsgn-src-`. They exist so a token's
+default and a consumer override both survive the crossing into a component's
+shadow root. Never set one; override the public token it reads, and the mirror
+follows.
+
+## Versioning
+
+Both public packages are `0.x`, so a **minor** version may contain a breaking
+change and a **patch** never does.
+
+Against that, tokens carry these rules:
+
+- **Adding** a token is a minor.
+- **Changing a token's value** is a minor. Values are design decisions, not API,
+  but a rebrand-by-default is disruptive enough to deserve the bump.
+- **Renaming or removing** a token, and **collapsing a themed pair to a single
+  value** or the reverse, is a minor **and** requires a migration note in
+  `CHANGELOG.md` naming the old and new custom properties. A token you can no
+  longer set is indistinguishable from one that silently stopped working, so the
+  changelog entry is the only thing standing between a consumer and a mystery.
+- **Adding or removing an export subpath** is a minor.
+
+### Relationship to `@ds-gn/ui`
+
+`@ds-gn/ui` depends on an **exact** `@ds-gn/tokens` version, and
+the two are versioned in lockstep. Your package manager therefore installs a
+matching pair on its own.
+
+Install `@ds-gn/tokens` directly anyway when you import the stylesheets
+or override tokens — depending on a transitive package's file layout is what
+breaks on an unrelated upgrade. Keep the two at the same version when you do: a
+`ui` newer than its `tokens` reads tokens that do not exist yet, which renders
+as missing colors rather than as an error.
+
+## Support
+
+Search or report package issues in the public
+[issue tracker](https://github.com/lightleaplabs/design-system/issues). For
+questions, email [support@ds-gn.com](mailto:support@ds-gn.com).
+
+## License
+
+This package is available under the MIT License included in `LICENSE`.
+Third-party materials included in the distribution remain subject to the
+licenses listed in `THIRD_PARTY_NOTICES`.

package/THIRD_PARTY_NOTICES

@@ -0,0 +1,4 @@
+Third-Party Notices for @lightleaplabs/tokens
+
+This package does not currently include third-party material requiring
+attribution.

package/dist/index.d.ts

@@ -0,0 +1,178 @@
+/** Generated Design Tokens */
+
+export const radiusSurface: string;
+export const radiusInput: string;
+export const radiusCard: string;
+export const radiusButton: string;
+export const durationQuick: string;
+export const durationModerate: string;
+export const easeEmphasized: string;
+export const colorInputFocusOnLight: string;
+export const colorInputFocusOnDark: string;
+export const colorInputErrorTextOnLight: string;
+export const colorInputErrorTextOnDark: string;
+export const colorCardBgOnLight: string;
+export const colorCardBgOnDark: string;
+export const colorCardBorderOnLight: string;
+export const colorCardBorderOnDark: string;
+export const colorGradientAccentBgOnLight: string;
+export const colorGradientAccentBgOnDark: string;
+export const colorGradientAccentBgHoverOnLight: string;
+export const colorGradientAccentBgHoverOnDark: string;
+export const colorButtonSolidBgOnLight: string;
+export const colorButtonSolidBgOnDark: string;
+export const colorButtonSolidTextOnLight: string;
+export const colorButtonSolidTextOnDark: string;
+export const colorButtonSolidBgHoverOnLight: string;
+export const colorButtonSolidBgHoverOnDark: string;
+export const colorButtonOutlineBgOnLight: string;
+export const colorButtonOutlineBgOnDark: string;
+export const colorButtonOutlineTextOnLight: string;
+export const colorButtonOutlineTextOnDark: string;
+export const colorButtonOutlineTextHoverOnLight: string;
+export const colorButtonOutlineTextHoverOnDark: string;
+export const colorButtonOutlineBgHoverOnLight: string;
+export const colorButtonOutlineBgHoverOnDark: string;
+export const colorButtonOutlineOutlineOnLight: string;
+export const colorButtonOutlineOutlineOnDark: string;
+export const colorButtonOutlineOutlineHoverOnLight: string;
+export const colorButtonOutlineOutlineHoverOnDark: string;
+export const colorButtonGhostBgOnLight: string;
+export const colorButtonGhostBgOnDark: string;
+export const colorButtonGhostTextOnLight: string;
+export const colorButtonGhostTextOnDark: string;
+export const colorButtonGhostTextHoverOnLight: string;
+export const colorButtonGhostTextHoverOnDark: string;
+export const colorButtonGhostBgHoverOnLight: string;
+export const colorButtonGhostBgHoverOnDark: string;
+export const colorButtonLinkTextOnLight: string;
+export const colorButtonLinkTextOnDark: string;
+export const colorButtonLinkTextHoverOnLight: string;
+export const colorButtonLinkTextHoverOnDark: string;
+export const colorButtonMonoSolidBgOnLight: string;
+export const colorButtonMonoSolidBgOnDark: string;
+export const colorButtonMonoSolidTextOnLight: string;
+export const colorButtonMonoSolidTextOnDark: string;
+export const colorButtonMonoSolidBgHoverOnLight: string;
+export const colorButtonMonoSolidBgHoverOnDark: string;
+export const colorButtonMonoOutlineBgOnLight: string;
+export const colorButtonMonoOutlineBgOnDark: string;
+export const colorButtonMonoOutlineBgHoverOnLight: string;
+export const colorButtonMonoOutlineBgHoverOnDark: string;
+export const colorButtonMonoOutlineTextOnLight: string;
+export const colorButtonMonoOutlineTextOnDark: string;
+export const colorButtonMonoOutlineTextHoverOnLight: string;
+export const colorButtonMonoOutlineTextHoverOnDark: string;
+export const colorButtonMonoOutlineOutlineOnLight: string;
+export const colorButtonMonoOutlineOutlineOnDark: string;
+export const colorButtonMonoOutlineOutlineHoverOnLight: string;
+export const colorButtonMonoOutlineOutlineHoverOnDark: string;
+export const colorButtonGradientTextOnLight: string;
+export const colorButtonGradientTextOnDark: string;
+export const colorButtonInlineTextOnLight: string;
+export const colorButtonInlineTextOnDark: string;
+export const colorButtonInlineTextHoverOnLight: string;
+export const colorButtonInlineTextHoverOnDark: string;
+export const colorTextPrimaryOnLight: string;
+export const colorTextPrimaryOnDark: string;
+export const colorTextSecondaryOnLight: string;
+export const colorTextSecondaryOnDark: string;
+export const colorTextTertiaryOnLight: string;
+export const colorTextTertiaryOnDark: string;
+export const colorInverseOnLight: string;
+export const colorInverseOnDark: string;
+export const colorNavLinkDropdownTextHoverOnLight: string;
+export const colorNavLinkDropdownTextHoverOnDark: string;
+export const colorDisabledOnLight: string;
+export const colorDisabledOnDark: string;
+export const colorAccentOnLight: string;
+export const colorAccentOnDark: string;
+export const colorAccentTextOnLight: string;
+export const colorAccentTextOnDark: string;
+export const colorEyebrowOnLight: string;
+export const colorEyebrowOnDark: string;
+export const colorBrandOnLight: string;
+export const colorBrandOnDark: string;
+export const colorBrandSubtleOnLight: string;
+export const colorBrandSubtleOnDark: string;
+export const colorPageOnLight: string;
+export const colorPageOnDark: string;
+export const colorSurfaceDefaultOnLight: string;
+export const colorSurfaceDefaultOnDark: string;
+export const colorSurfaceElevatedOnLight: string;
+export const colorSurfaceElevatedOnDark: string;
+export const colorSurfaceSubtleOnLight: string;
+export const colorSurfaceSubtleOnDark: string;
+export const colorOutlineOnLight: string;
+export const colorOutlineOnDark: string;
+export const colorOutlineSubtleOnLight: string;
+export const colorOutlineSubtleOnDark: string;
+export const colorOutlineStrongOnLight: string;
+export const colorOutlineStrongOnDark: string;
+export const colorFocusOnLight: string;
+export const colorFocusOnDark: string;
+export const colorInteractiveOnLight: string;
+export const colorInteractiveOnDark: string;
+export const colorInteractiveHoverOnLight: string;
+export const colorInteractiveHoverOnDark: string;
+export const colorInteractiveActiveOnLight: string;
+export const colorInteractiveActiveOnDark: string;
+export const colorInteractiveDisabledOnLight: string;
+export const colorInteractiveDisabledOnDark: string;
+export const colorSuccessOnLight: string;
+export const colorSuccessOnDark: string;
+export const colorSuccessSubtleOnLight: string;
+export const colorSuccessSubtleOnDark: string;
+export const colorErrorOnLight: string;
+export const colorErrorOnDark: string;
+export const colorErrorSubtleOnLight: string;
+export const colorErrorSubtleOnDark: string;
+export const colorWarningOnLight: string;
+export const colorWarningOnDark: string;
+export const colorWarningSubtleOnLight: string;
+export const colorWarningSubtleOnDark: string;
+export const colorInfoOnLight: string;
+export const colorInfoOnDark: string;
+export const colorInfoSubtleOnLight: string;
+export const colorInfoSubtleOnDark: string;
+export const colorInputBgOnLight: string;
+export const colorInputBgOnDark: string;
+export const colorInputBorderOnLight: string;
+export const colorInputBorderOnDark: string;
+export const colorInputTextOnLight: string;
+export const colorInputTextOnDark: string;
+export const colorInputPlaceholderOnLight: string;
+export const colorInputPlaceholderOnDark: string;
+export const colorTerminalBg: string;
+export const colorTerminalTitlebar: string;
+export const colorTerminalBorder: string;
+export const colorTerminalText: string;
+export const colorTerminalMuted: string;
+export const colorTerminalSuccess: string;
+export const colorTerminalDotRed: string;
+export const colorTerminalDotYellow: string;
+export const colorPatternDotOnLight: string;
+export const colorPatternDotOnDark: string;
+export const colorBadgeBgOnLight: string;
+export const colorBadgeBgOnDark: string;
+export const colorBadgeTextOnLight: string;
+export const colorBadgeTextOnDark: string;
+export const colorBadgeBrandTextOnLight: string;
+export const colorBadgeBrandTextOnDark: string;
+export const colorBadgeWarningTextOnLight: string;
+export const colorBadgeWarningTextOnDark: string;
+export const colorBadgeErrorTextOnLight: string;
+export const colorBadgeErrorTextOnDark: string;
+export const colorBadgeBorderOnLight: string;
+export const colorBadgeBorderOnDark: string;
+export const defaultFontFamily: string;
+export const defaultDisplayFontFamily: string;
+export const defaultMonoFontFamily: string;
+export const breakpointXs: string;
+export const breakpointSm: string;
+export const breakpointMd: string;
+export const breakpointLg: string;
+export const breakpointXl: string;
+export const breakpoint2xl: string;
+export const shadowCardOnLight: string;
+export const shadowCardOnDark: string;

package/dist/index.mjs

@@ -0,0 +1,178 @@
+/** Generated Design Tokens */
+
+export const radiusSurface = "1rem";
+export const radiusInput = "0.5rem";
+export const radiusCard = "1rem";
+export const radiusButton = "calc(infinity * 1px)";
+export const durationQuick = "180ms";
+export const durationModerate = "240ms";
+export const easeEmphasized = "cubic-bezier(0.16, 1, 0.3, 1)";
+export const colorInputFocusOnLight = "var(--color-blue-500)";
+export const colorInputFocusOnDark = "var(--color-blue-400)";
+export const colorInputErrorTextOnLight = "#b91c1c";
+export const colorInputErrorTextOnDark = "#f87171";
+export const colorCardBgOnLight = "var(--color-white)";
+export const colorCardBgOnDark = "var(--color-blue-800)";
+export const colorCardBorderOnLight = "var(--color-neutral-200)";
+export const colorCardBorderOnDark = "rgb(255 255 255 / 0.08)";
+export const colorGradientAccentBgOnLight = "linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400))";
+export const colorGradientAccentBgOnDark = "linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400))";
+export const colorGradientAccentBgHoverOnLight = "linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300))";
+export const colorGradientAccentBgHoverOnDark = "linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300))";
+export const colorButtonSolidBgOnLight = "var(--color-orange-500)";
+export const colorButtonSolidBgOnDark = "var(--color-orange-600)";
+export const colorButtonSolidTextOnLight = "var(--color-neutral-900)";
+export const colorButtonSolidTextOnDark = "var(--color-neutral-900)";
+export const colorButtonSolidBgHoverOnLight = "var(--color-orange-400)";
+export const colorButtonSolidBgHoverOnDark = "var(--color-orange-500)";
+export const colorButtonOutlineBgOnLight = "var(--color-transparent)";
+export const colorButtonOutlineBgOnDark = "var(--color-transparent)";
+export const colorButtonOutlineTextOnLight = "var(--color-neutral-900)";
+export const colorButtonOutlineTextOnDark = "var(--color-neutral-100)";
+export const colorButtonOutlineTextHoverOnLight = "var(--color-orange-600)";
+export const colorButtonOutlineTextHoverOnDark = "var(--color-orange-500)";
+export const colorButtonOutlineBgHoverOnLight = "var(--color-orange-600)";
+export const colorButtonOutlineBgHoverOnDark = "var(--color-orange-500)";
+export const colorButtonOutlineOutlineOnLight = "var(--color-orange-500)";
+export const colorButtonOutlineOutlineOnDark = "var(--color-orange-600)";
+export const colorButtonOutlineOutlineHoverOnLight = "var(--color-orange-600)";
+export const colorButtonOutlineOutlineHoverOnDark = "var(--color-orange-500)";
+export const colorButtonGhostBgOnLight = "transparent";
+export const colorButtonGhostBgOnDark = "transparent";
+export const colorButtonGhostTextOnLight = "var(--color-neutral-900)";
+export const colorButtonGhostTextOnDark = "var(--color-white)";
+export const colorButtonGhostTextHoverOnLight = "var(--color-neutral-900)";
+export const colorButtonGhostTextHoverOnDark = "var(--color-neutral-900)";
+export const colorButtonGhostBgHoverOnLight = "var(--color-neutral-200)";
+export const colorButtonGhostBgHoverOnDark = "var(--color-neutral-300)";
+export const colorButtonLinkTextOnLight = "var(--color-blue-700)";
+export const colorButtonLinkTextOnDark = "var(--color-blue-400)";
+export const colorButtonLinkTextHoverOnLight = "var(--color-blue-800)";
+export const colorButtonLinkTextHoverOnDark = "var(--color-blue-300)";
+export const colorButtonMonoSolidBgOnLight = "var(--color-neutral-900)";
+export const colorButtonMonoSolidBgOnDark = "var(--color-white)";
+export const colorButtonMonoSolidTextOnLight = "var(--color-white)";
+export const colorButtonMonoSolidTextOnDark = "var(--color-neutral-900)";
+export const colorButtonMonoSolidBgHoverOnLight = "var(--color-neutral-700)";
+export const colorButtonMonoSolidBgHoverOnDark = "var(--color-neutral-200)";
+export const colorButtonMonoOutlineBgOnLight = "var(--color-transparent)";
+export const colorButtonMonoOutlineBgOnDark = "var(--color-transparent)";
+export const colorButtonMonoOutlineBgHoverOnLight = "var(--color-neutral-900)";
+export const colorButtonMonoOutlineBgHoverOnDark = "var(--color-white)";
+export const colorButtonMonoOutlineTextOnLight = "var(--color-neutral-900)";
+export const colorButtonMonoOutlineTextOnDark = "var(--color-neutral-100)";
+export const colorButtonMonoOutlineTextHoverOnLight = "var(--color-white)";
+export const colorButtonMonoOutlineTextHoverOnDark = "var(--color-neutral-900)";
+export const colorButtonMonoOutlineOutlineOnLight = "var(--color-neutral-900)";
+export const colorButtonMonoOutlineOutlineOnDark = "var(--color-neutral-100)";
+export const colorButtonMonoOutlineOutlineHoverOnLight = "var(--color-neutral-700)";
+export const colorButtonMonoOutlineOutlineHoverOnDark = "var(--color-white)";
+export const colorButtonGradientTextOnLight = "var(--color-white)";
+export const colorButtonGradientTextOnDark = "var(--color-neutral-900)";
+export const colorButtonInlineTextOnLight = "var(--color-neutral-900)";
+export const colorButtonInlineTextOnDark = "var(--color-white)";
+export const colorButtonInlineTextHoverOnLight = "var(--color-orange-500)";
+export const colorButtonInlineTextHoverOnDark = "var(--color-orange-500)";
+export const colorTextPrimaryOnLight = "var(--color-neutral-900)";
+export const colorTextPrimaryOnDark = "var(--color-neutral-50)";
+export const colorTextSecondaryOnLight = "var(--color-neutral-600)";
+export const colorTextSecondaryOnDark = "var(--color-neutral-400)";
+export const colorTextTertiaryOnLight = "var(--color-neutral-600)";
+export const colorTextTertiaryOnDark = "var(--color-neutral-400)";
+export const colorInverseOnLight = "var(--color-white)";
+export const colorInverseOnDark = "var(--color-neutral-900)";
+export const colorNavLinkDropdownTextHoverOnLight = "var(--color-orange-700)";
+export const colorNavLinkDropdownTextHoverOnDark = "var(--color-orange-200)";
+export const colorDisabledOnLight = "var(--color-neutral-400)";
+export const colorDisabledOnDark = "var(--color-neutral-600)";
+export const colorAccentOnLight = "var(--color-orange-600)";
+export const colorAccentOnDark = "var(--color-orange-500)";
+export const colorAccentTextOnLight = "var(--color-orange-700)";
+export const colorAccentTextOnDark = "var(--color-orange-500)";
+export const colorEyebrowOnLight = "var(--color-orange-700)";
+export const colorEyebrowOnDark = "var(--color-orange-500)";
+export const colorBrandOnLight = "var(--color-blue-500)";
+export const colorBrandOnDark = "var(--color-blue-400)";
+export const colorBrandSubtleOnLight = "var(--color-blue-100)";
+export const colorBrandSubtleOnDark = "var(--color-blue-800)";
+export const colorPageOnLight = "oklch(97% 0.01 255)";
+export const colorPageOnDark = "oklch(12% 0.05 255)";
+export const colorSurfaceDefaultOnLight = "oklch(100% 0 0)";
+export const colorSurfaceDefaultOnDark = "oklch(18% 0.06 255)";
+export const colorSurfaceElevatedOnLight = "oklch(96% 0.02 255)";
+export const colorSurfaceElevatedOnDark = "oklch(0.22 0.08 255)";
+export const colorSurfaceSubtleOnLight = "oklch(94% 0.04 255)";
+export const colorSurfaceSubtleOnDark = "oklch(30% 0.12 255)";
+export const colorOutlineOnLight = "var(--color-neutral-200)";
+export const colorOutlineOnDark = "oklch(24% 0.05 255)";
+export const colorOutlineSubtleOnLight = "var(--color-neutral-100)";
+export const colorOutlineSubtleOnDark = "var(--color-blue-800)";
+export const colorOutlineStrongOnLight = "var(--color-neutral-300)";
+export const colorOutlineStrongOnDark = "var(--color-blue-600)";
+export const colorFocusOnLight = "var(--color-blue-500)";
+export const colorFocusOnDark = "var(--color-blue-400)";
+export const colorInteractiveOnLight = "var(--color-blue-500)";
+export const colorInteractiveOnDark = "var(--color-blue-400)";
+export const colorInteractiveHoverOnLight = "var(--color-blue-600)";
+export const colorInteractiveHoverOnDark = "var(--color-blue-300)";
+export const colorInteractiveActiveOnLight = "var(--color-blue-700)";
+export const colorInteractiveActiveOnDark = "var(--color-blue-500)";
+export const colorInteractiveDisabledOnLight = "var(--color-neutral-300)";
+export const colorInteractiveDisabledOnDark = "var(--color-neutral-700)";
+export const colorSuccessOnLight = "#047857";
+export const colorSuccessOnDark = "#34d399";
+export const colorSuccessSubtleOnLight = "#d1fae5";
+export const colorSuccessSubtleOnDark = "#064e3b";
+export const colorErrorOnLight = "#ef4444";
+export const colorErrorOnDark = "#f87171";
+export const colorErrorSubtleOnLight = "#fee2e2";
+export const colorErrorSubtleOnDark = "#7f1d1d";
+export const colorWarningOnLight = "var(--color-orange-500)";
+export const colorWarningOnDark = "var(--color-orange-400)";
+export const colorWarningSubtleOnLight = "var(--color-orange-100)";
+export const colorWarningSubtleOnDark = "var(--color-orange-900)";
+export const colorInfoOnLight = "var(--color-blue-500)";
+export const colorInfoOnDark = "var(--color-blue-400)";
+export const colorInfoSubtleOnLight = "var(--color-blue-100)";
+export const colorInfoSubtleOnDark = "var(--color-blue-900)";
+export const colorInputBgOnLight = "var(--surface-default-on-light)";
+export const colorInputBgOnDark = "var(--surface-default-on-dark)";
+export const colorInputBorderOnLight = "var(--color-neutral-300)";
+export const colorInputBorderOnDark = "var(--color-blue-600)";
+export const colorInputTextOnLight = "var(--color-neutral-900)";
+export const colorInputTextOnDark = "var(--color-neutral-100)";
+export const colorInputPlaceholderOnLight = "var(--color-neutral-600)";
+export const colorInputPlaceholderOnDark = "var(--color-neutral-500)";
+export const colorTerminalBg = "#09090b";
+export const colorTerminalTitlebar = "#0d0d0f";
+export const colorTerminalBorder = "#1a1a1a";
+export const colorTerminalText = "#e4e4e7";
+export const colorTerminalMuted = "#a1a1aa";
+export const colorTerminalSuccess = "#34d399";
+export const colorTerminalDotRed = "#ea580c";
+export const colorTerminalDotYellow = "#fbbf24";
+export const colorPatternDotOnLight = "oklch(70% 0.03 255)";
+export const colorPatternDotOnDark = "oklch(40% 0.05 255)";
+export const colorBadgeBgOnLight = "var(--color-neutral-100)";
+export const colorBadgeBgOnDark = "var(--color-blue-700)";
+export const colorBadgeTextOnLight = "var(--color-neutral-700)";
+export const colorBadgeTextOnDark = "var(--color-neutral-100)";
+export const colorBadgeBrandTextOnLight = "var(--color-blue-700)";
+export const colorBadgeBrandTextOnDark = "var(--color-blue-100)";
+export const colorBadgeWarningTextOnLight = "var(--color-orange-900)";
+export const colorBadgeWarningTextOnDark = "var(--color-orange-100)";
+export const colorBadgeErrorTextOnLight = "#b91c1c";
+export const colorBadgeErrorTextOnDark = "#fecaca";
+export const colorBadgeBorderOnLight = "var(--color-neutral-200)";
+export const colorBadgeBorderOnDark = "var(--color-blue-600)";
+export const defaultFontFamily = "var(--font-sans)";
+export const defaultDisplayFontFamily = "var(--font-display)";
+export const defaultMonoFontFamily = "var(--font-mono)";
+export const breakpointXs = "0px";
+export const breakpointSm = "640px";
+export const breakpointMd = "768px";
+export const breakpointLg = "1024px";
+export const breakpointXl = "1280px";
+export const breakpoint2xl = "1536px";
+export const shadowCardOnLight = "0 10px 30px rgb(15 23 42 / 0.08)";
+export const shadowCardOnDark = "0 12px 32px rgb(2 6 23 / 0.35)";