Add Solarized color tokens and assets for multi-theme support

- Introduced new image assets for Solarized color palette.
- Added JSON files for Solarized Dark, Light, and Multi-Theme tokens.
- Created a resolver for Solarized themes to manage light and dark contexts.
- Removed the deprecated solarized.web.2025.10.tokens.json file.

web-tokens/README.md

@@ -1,108 +1,580 @@
+
 # Solarized Web Tokens
 
-This folder contains a web‑oriented Design Tokens resource for the Solarized color scheme, expressed using the Design Tokens Community Group (DTCG) Format Module 2025.10 ([1][4]).
+This folder contains a web‑oriented Design Tokens resource for the Solarized color scheme, expressed using the Design Tokens Community Group (DTCG) Format Module 2025.10 and Resolver Module 2025.10 ([1][4][5]).
 
 The goal of this resource is to:
 
-- Preserve the canonical 16‑color Solarized palette (8 base monotones, 8 accents) ([1][2]).  
-- Provide a general, implementation‑agnostic set of light/dark roles for web UIs.  
-- Adhere to the DTCG 2025.10 format so tools can parse, validate, and resolve the tokens consistently ([4]).
+- Preserve the canonical 16‑color Solarized palette (8 base monotones, 8 accents) as immutable primitives ([1][2]).  
+- Provide a general, implementation‑agnostic set of semantic roles for light/dark web UIs.  
+- Support multiple consumption patterns (single-theme, multi-theme, resolver-driven) via DTCG 2025.10 standards ([4][5]).  
+- Enable seamless integration with modern design-system and token tooling pipelines ([4][6]).
+
+## Files and usage
+
+### Token files
+
+- **`solarized.tokens.json`**  
+  Generic roles with `light` and `dark` values nested in a single object. Use this if your tool or runtime can select between `light` and `dark` keys on individual tokens. Best for flexible, runtime-driven theme switching.
+
+- **`solarized.multi-theme.tokens.json`**  
+  Explicit `theme.light` and `theme.dark` group hierarchies within the same file. Useful for systems that understand nested theme structures but do not require a full resolver. Best for design tools and systems with built-in theme support.
+
+- **`solarized.light.tokens.json`**  
+  Single-theme variant with Solarized Light mappings only (concrete values, no theme branching). For backward compatibility, simpler toolchains, and light-only applications.
+
+- **`solarized.dark.tokens.json`**  
+  Single-theme variant with Solarized Dark mappings only. Pair with the light variant for dual-theme support without a resolver. For backward compatibility, simpler toolchains, and dark-only applications.
 
-## Files
+### Resolver
 
-- `solarized.web.2025.10.tokens.json`  
-  A single token file that exposes the Solarized palette and generic web roles in the DTCG 2025.10 format ([4]).
+- **`solarized.resolver.json`**  
+  DTCG 2025.10 Resolver that binds `light` and `dark` contexts to the multi-theme file ([5]). Use this for full context-aware token resolution in DTCG-compliant tools and build pipelines. Enables dynamic theme switching and modular token composition.
 
-The `id` field in this file is aligned with its expected location in this repository, and the root uses the official 2025.10 format schema URL for schema‑aware tooling ([4]).
+### Scripts and assets
+
+- **`generate_solarized_swatches.py`**  
+  Python script to generate color swatch PNG images into `/assets`. Run from this folder:  
+  ```
+  pip install pillow
+  python generate_solarized_swatches.py
+  ```
+
+- **`/assets/`**  
+  Contains 16 PNG swatch images (one per Solarized color) for visual reference in documentation, design tools, and web previews.
 
 ## DTCG 2025.10 adherence
 
-This token file is structured to follow the Design Tokens Format Module 2025.10 ([4]).
+All token files follow the Design Tokens Format Module 2025.10 ([4]):
+
+- `$schema` points to the official 2025.10 format schema for validation.  
+- `$type` and `$value` distinguish groups from tokens per DTCG object model.  
+- Color values use `colorSpace: "srgb"`, `components` (normalized 0–1 RGB triple), and optional `hex` for convenience.  
+- Semantic tokens use curly-brace references (e.g., `{color.palette.base3}`) for token aliasing and traceability.  
+- All token names follow DTCG naming conventions (no leading `$`, no `..` or other reserved patterns).
 
-- Uses the 2025.10 format schema via the `$schema` URL, enabling JSON Schema–based validation in editors and build pipelines ([4]).  
-- Uses `$type` and `$value` on token objects to distinguish groups from tokens, in line with the DTCG object model ([4]).  
-- Color values are expressed as DTCG `color` values with:
-  - `colorSpace: "srgb"`  
-  - `components`: an RGB triple  
-  - `hex`: the canonical Solarized hex string (optional convenience) ([1]).  
-- Semantic tokens reference palette tokens using curly‑brace references (for example, `{color.palette.base3}`), which conforms to the reference format defined in the spec ([4]).
+The resolver file follows the Resolver Module 2025.10 ([5]):
 
-This design keeps palette tokens strictly primitive and role tokens as aliases, so alternate semantic mappings or additional theme layers can be added without changing the core Solarized values ([4]).
+- Defines token `sets` (palette, light-theme, dark-theme) as reusable token groups.  
+- Defines a `theme` modifier with `light` and `dark` contexts for dynamic selection.  
+- `resolutionOrder` chains palette + theme modifier application.  
+- Supports JSON Pointer references and relative file paths for token composition.
+
+---
 
 ## Palette overview
 
-Solarized defines 16 colors: 8 monotone “base” tones and 8 accents ([1][2]).
+Solarized defines 16 colors: 8 monotone "base" tones forming a continuum from dark to light, and 8 chromatic accents for semantic meaning and visual hierarchy ([1][2]).  
+For a visual overview of the full palette, see the Solarized palette image on Wikimedia Commons ([8]).
+
+### Base tones (monotones)
+
+The base tones form the backbone of the Solarized theme, providing neutral background and foreground colors with carefully calibrated contrast.
+
+| Swatch                              | Token  | Hex       | RGB            | Purpose / Description                |
+|-------------------------------------|--------|-----------|----------------|--------------------------------------|
+| ![base03](./doc-assets/base03.png)      | base03 | `#002b36` | `0, 43, 54`    | Darkest base tone; dark mode background. Lowest luminance. |
+| ![base02](./doc-assets/base02.png)      | base02 | `#073642` | `7, 54, 66`    | Very dark base tone; dark mode surfaces and subtle UI elements. |
+| ![base01](./doc-assets/base01.png)      | base01 | `#586e75` | `88, 110, 117` | Dark UI text and subtle foreground; used for muted labels and metadata in dark mode. |
+| ![base00](./doc-assets/base00.png)      | base00 | `#657b83` | `101, 123, 131`| Primary dark text tone; main text color for light mode. Strong contrast against light backgrounds. |
+| ![base0](./doc-assets/base0.png)        | base0  | `#839496` | `131, 148, 150`| Primary light text tone; main text color for dark mode. Maintains readability on dark backgrounds. |
+| ![base1](./doc-assets/base1.png)        | base1  | `#93a1a1` | `147, 161, 161`| Light UI text and subtle foreground; secondary text in light mode. Lower emphasis than base00. |
+| ![base2](./doc-assets/base2.png)        | base2  | `#eee8d5` | `238, 232, 213`| Light surface background; light mode surfaces, cards, and subtle UI layers. Higher luminance. |
+| ![base3](./doc-assets/base3.png)        | base3  | `#fdf6e3` | `253, 246, 227`| Lightest base tone; light mode primary background. Highest luminance. |
+
+**Design intent**: The base ramp creates a symmetric, low-contrast palette where `base03` ↔ `base3`, `base02` ↔ `base2`, `base01` ↔ `base1`, and `base00` ↔ `base0` form complements ([1]). This symmetry enables a unified theme system where swapping light and dark is structurally consistent.
+
+### Accent tones (chromatic)
+
+The accent tones are reserved for semantic meaning, interactive elements, and status indication. They are applied consistently across both light and dark modes, ensuring semantic clarity regardless of theme.
+
+| Swatch                              | Token   | Hex       | RGB            | Semantic Use                         |
+|-------------------------------------|---------|-----------|----------------|--------------------------------------|
+| ![yellow](./doc-assets/yellow.png)      | yellow  | `#b58900` | `181, 137, 0`  | Warning, caution, attention-needed states. Links and highlights. |
+| ![orange](./doc-assets/orange.png)      | orange  | `#cb4b16` | `203, 75, 22`  | Secondary accent, alt-text, special emphasis. |
+| ![red](./doc-assets/red.png)            | red     | `#dc322f` | `220, 50, 47`  | Errors, destructive actions, critical alerts. |
+| ![magenta](./doc-assets/magenta.png)    | magenta | `#d33682` | `211, 54, 130` | Tertiary accent, non-semantic highlight. |
+| ![violet](./doc-assets/violet.png)      | violet  | `#6c71c4` | `108, 113, 196`| Tertiary accent, non-semantic highlight. |
+| ![blue](./doc-assets/blue.png)          | blue    | `#268bd2` | `38, 139, 210` | Primary accent, brand color, links, interactive elements, primary actions. |
+| ![cyan](./doc-assets/cyan.png)          | cyan    | `#2aa198` | `42, 161, 152` | Info, information, secondary status. |
+| ![green](./doc-assets/green.png)        | green   | `#859900` | `133, 153, 0`  | Success, positive states, validation. |
+
+**Design intent**: Accents are used consistently across both Solarized Light and Solarized Dark, maintaining semantic meaning regardless of theme ([1]). This design choice makes it easy for users to develop visual muscle memory for status and action meanings.
+
+---
+
+## Light and dark themes
+
+This resource supports both **Solarized Light** and **Solarized Dark** from a single canonical palette, enabling seamless theme switching without duplicating color definitions.
+
+### Solarized Light
+
+**Use case**: Office, business, daylight, or print-friendly interfaces where light backgrounds reduce eye strain in bright environments.
+
+- **Background**: `base3` (off-white, `#fdf6e3`)  
+  - Primary page/app background. Soft, warm off-white that reduces glare while remaining distinct from pure white.  
+- **Primary text**: `base00` (dark, `#657b83`)  
+  - Body text, primary content. Dark enough for WCAG AAA contrast against `base3`. ([7])  
+- **Secondary text**: `base1` (medium, `#93a1a1`)  
+  - Hints, labels, metadata. Lower emphasis without sacrificing accessibility.  
+- **Tertiary text**: `base2` (very light, `#eee8d5`)  
+  - Disabled states, very subtle annotations. Use sparingly.  
+- **Surfaces**: `base2` (subtle layer)  
+  - Cards, panels, inset elements. Slightly darker than primary background for depth.  
+- **Borders**: `base2` (subtle) to `base1` (strong)  
+  - Dividers use subtle `base2`; focus rings and strong outlines use `base1`.  
+
+### Solarized Dark
+
+**Use case**: Evening, low-light, or dark-mode-first interfaces where dark backgrounds reduce strain in dim environments.
+
+- **Background**: `base03` (dark, `#002b36`)  
+  - Primary page/app background. Deep blue-black that feels grounded and reduces glare in dark environments.  
+- **Primary text**: `base0` (light, `#839496`)  
+  - Body text, primary content. Light enough for WCAG AAA contrast against `base03`. ([7])  
+- **Secondary text**: `base01` (medium, `#586e75`)  
+  - Hints, labels, metadata. Lower emphasis while maintaining legibility.  
+- **Tertiary text**: `base02` (very dark, `#073642`)  
+  - Disabled states, very subtle annotations. Use sparingly.  
+- **Surfaces**: `base02` (subtle layer)  
+  - Cards, panels, inset elements. Slightly lighter than primary background for depth.  
+- **Borders**: `base02` (subtle) to `base01` (strong)  
+  - Dividers use subtle `base02`; focus rings and strong outlines use `base01`.  
+
+### Accents across both themes
+
+Accents (`blue`, `green`, `yellow`, `red`, `cyan`) remain identical across both Solarized Light and Solarized Dark, maintaining semantic clarity:
+
+- `accent.primary` (blue) always signals interactive or branded content.  
+- `accent.success` (green) always signals positive outcomes.  
+- `accent.warning` (yellow) always signals caution or attention.  
+- `accent.danger` (red) always signals errors or destructive actions.  
+- `accent.info` (cyan) always signals informational content.
+
+This consistency reduces cognitive load: users learn once and apply everywhere.
+
+---
+
+## Roles and semantic mapping
+
+Across all token files, semantic roles organize Solarized's raw palette into meaningful UI categories. Roles are intentionally neutral and not tied to specific component libraries, making them reusable across platforms and toolchains.
+
+### Role hierarchy
+
+Roles are organized in a three-level hierarchy:
+
+1. **Palette layer** (`color.palette.*`)  
+   Raw Solarized colors, never modified.  
+
+2. **Role layer** (`color.role.*` or `color.theme.{light,dark}.*`)  
+   Semantic mappings of palette colors to UI purposes.  
+
+3. **Component layer** (application-specific)  
+   Components use roles (or extend roles) to define their own visual behavior.
+
+Example: A button component might reference `color.role.button.primary.background`, which in turn references `{color.palette.blue}`.
+
+### Role definitions
+
+#### Background roles
+
+Used for surfaces, containers, and spatial organization.
+
+- **`background.default`**  
+  Primary page or application background. The base surface all other UI sits on top of.  
+  - Light: `base3` (`#fdf6e3`)  
+  - Dark: `base03` (`#002b36`)  
+
+- **`background.subtle`**  
+  Secondary surfaces layered on top of the default background. Used for cards, panels, sidebars, modals, and inset regions to create visual hierarchy and separation.  
+  - Light: `base2` (`#eee8d5`)  
+  - Dark: `base02` (`#073642`)  
+
+**Usage**: Always start with `background.default` for your main viewport. Use `background.subtle` for components that need to appear "elevated" or distinct.
+
+#### Foreground roles
+
+Used for text and icons.
+
+- **`foreground.default`**  
+  Primary text and icon color for legible, high-emphasis content (body text, headings, key labels).  
+  - Light: `base00` (`#657b83`)  
+  - Dark: `base0` (`#839496`)  
+
+- **`foreground.muted`**  
+  Secondary text, supporting information, hints, and metadata. Lower emphasis than default, but still legible for sustained reading.  
+  - Light: `base1` (`#93a1a1`)  
+  - Dark: `base01` (`#586e75`)  
+
+- **`foreground.inverse`**  
+  Text color for high-contrast situations: overlaid on accent colors, strong backgrounds, or when maximum legibility is needed (e.g., buttons, badges, alerts).  
+  - Light: `base03` (`#002b36`) — dark text on light accents  
+  - Dark: `base3` (`#fdf6e3`) — light text on dark accents  
+
+**Usage**: Always use `foreground.default` for primary body text. Use `muted` for supporting labels and metadata. Use `inverse` only when text sits on top of accents or strong backgrounds.
+
+#### Border roles
+
+Used for dividers, outlines, focus indicators, and structural separation.
+
+- **`border.subtle`**  
+  Low-emphasis dividers, hairlines, and faint outlines (e.g., list separators, table borders, soft boundaries).  
+  - Light: `base2` (`#eee8d5`)  
+  - Dark: `base02` (`#073642`)  
+
+- **`border.strong`**  
+  High-emphasis component outlines, focus rings, and interactive boundaries (e.g., form field outlines, focus indicators, tabs).  
+  - Light: `base1` (`#93a1a1`)  
+  - Dark: `base01` (`#586e75`)  
+
+**Usage**: Use `subtle` for non-interactive structural divisions. Use `strong` for interactive elements and focus states to ensure visibility and accessibility.
+
+#### Accent roles
+
+Used for semantic meaning, interaction, and status indication.
+
+- **`accent.primary`**  
+  Primary brand or interactive accent for links, buttons, and key interactive elements.  
+  - All themes: `blue` (`#268bd2`)  
+
+- **`accent.success`**  
+  Positive or success state indication (form validation, success messages, completion).  
+  - All themes: `green` (`#859900`)  
+
+- **`accent.warning`**  
+  Warning or caution state indication (alerts that need attention, cautionary labels).  
+  - All themes: `yellow` (`#b58900`)  
+
+- **`accent.danger`**  
+  Destructive action or error state indication (delete buttons, error messages, critical alerts).  
+  - All themes: `red` (`#dc322f`)  
+
+- **`accent.info`**  
+  Informational or neutral accent (info messages, secondary actions, help text).  
+  - All themes: `cyan` (`#2aa198`)  
+
+**Usage**: Reserve accents for semantically meaningful UI. Don't use them just for visual interest. Each accent should consistently signal the same meaning throughout your application.
+
+---
+
+## Token tooling and integrations
+
+Modern design systems rely on DTCG-compliant tooling to manage, transform, and distribute tokens across platforms and formats ([4][5][6]).
+
+### Design tools
+
+#### Figma
+
+**Native token support** (via Figma Variables or plugins):
+
+1. Use `solarized.light.tokens.json` and `solarized.dark.tokens.json` for simple, separate-file theming.  
+2. Or use `solarized.multi-theme.tokens.json` with a Figma token plugin (Tokens Studio, Figma Tokens, etc.).  
+3. Import tokens into component styles and text styles.  
+4. Theme switching in Figma is automatic: publish one file, switch theme context, and all components update.
+
+**Example workflow**:
+- Create a Figma file with "Light" and "Dark" variable groups.
+- Import Solarized tokens into these groups.
+- Build components that reference variables (e.g., `fill: var(--color-background-default)`).
+- Toggle theme mode in Figma to see live theme switching.
+
+#### Adobe XD, Sketch, etc.
+
+Similar workflows apply. Most modern design tools support JSON token import and variable/style binding.
+
+### Token transformation and build tools
+
+#### Style Dictionary
+
+**Use case**: Generate platform-specific token formats (CSS, SCSS, JavaScript, JSON) from a single DTCG source.
+
+```
+// style-dictionary.config.js
+module.exports = {
+  source: ['solarized.light.tokens.json'],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      files: [
+        {
+          destination: 'output/tokens.light.css',
+          format: 'css/variables',
+        },
+      ],
+    },
+    js: {
+      transformGroup: 'js',
+      files: [
+        {
+          destination: 'output/tokens.light.js',
+          format: 'javascript/es6',
+        },
+      ],
+    },
+  },
+};
+```
+
+**Output**:
+```
+/* tokens.light.css */
+:root {
+  --color-palette-base03: #002b36;
+  --color-palette-base3: #fdf6e3;
+  --color-role-background-default: #fdf6e3;
+  --color-role-foreground-default: #657b83;
+  /* ... */
+}
+```
+
+#### Terrazzo / Token Transformer
+
+Web-based tools that validate and transform DTCG tokens interactively:
+
+1. Upload `solarized.multi-theme.tokens.json`.  
+2. Export as CSS, SCSS, JavaScript, or other formats.  
+3. Validate token references and syntax.  
+4. Generate component-specific token subsets if needed.
+
+#### Custom resolvers
+
+Build a lightweight resolver in your application to handle context switching:
+
+```
+// solarized-resolver.js
+function resolveToken(token, theme = 'light') {
+  if (token.light && token.dark) {
+    return token[theme];
+  }
+  return token;
+}
+
+export default resolveToken;
+```
+
+### CI/CD and automation
+
+#### Automated token sync
+
+Use GitHub Actions or similar to:
+
+1. Validate token files against DTCG schemas.  
+2. Generate and commit output formats (CSS, JS).  
+3. Sync tokens to design tools (Figma, Zeroheight, etc.).  
+4. Trigger design-system documentation rebuilds.
+
+Example GitHub Actions workflow:
+
+```
+name: Validate and Transform Tokens
+
+on: [push]
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install -g token-transformer
+      - run: token-transformer solarized.light.tokens.json output/tokens.light.json
+      - run: git add output/ && git commit -m 'Generated tokens'
+```
+
+#### Design-system documentation
+
+Integrate token files into documentation sites (Zeroheight, Storybook, custom HTML):
+
+```
+<div class="swatch" style="background: var(--color-palette-base3); color: var(--color-role-foreground-default);">
+  Base3: #fdf6e3
+</div>
+```
+
+---
+
+## Use cases and integration patterns
+
+### 1. Web applications (React, Vue, Svelte, etc.)
+
+**Pattern**: Single-theme token file + CSS Custom Properties
+
+```
+// src/theme.js
+import lightTokens from './tokens/solarized.light.tokens.json';
+
+export const setupTheme = () => {
+  const root = document.documentElement;
+  
+  Object.entries(lightTokens.color.palette).forEach(([key, token]) => {
+    const cssVar = `--color-palette-${key}`;
+    root.style.setProperty(cssVar, token.$value.hex);
+  });
+
+  Object.entries(lightTokens.color.role).forEach(([role, values]) => {
+    Object.entries(values).forEach(([key, token]) => {
+      const cssVar = `--color-role-${role}-${key}`;
+      root.style.setProperty(cssVar, token.$value.hex);
+    });
+  });
+};
+```
+
+```
+/* src/styles/colors.css */
+:root {
+  --color-bg: var(--color-role-background-default);
+  --color-text: var(--color-role-foreground-default);
+  --color-accent: var(--color-accent-primary);
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+a {
+  color: var(--color-accent);
+}
+```
+
+**Benefits**: Dynamic theme switching, single source of truth, CSS-native.
+
+### 2. Design-to-development handoff
+
+**Pattern**: Multi-theme token file + design tool variable binding
+
+1. Designer imports `solarized.multi-theme.tokens.json` into Figma.  
+2. Creates components that reference theme variables.  
+3. Exports component specs with token references.  
+4. Developer implements components using the same token references.  
+
+**Result**: Perfect alignment between design and code.
+
+### 3. Multi-platform theme system (web + native)
+
+**Pattern**: Separate single-theme files + platform-specific transformers
+
+```
+solarized.light.tokens.json    → CSS/SCSS for web
+solarized.light.tokens.json    → YAML for iOS
+solarized.light.tokens.json    → XML for Android
+```
+
+Each platform consumes the same token definitions but outputs in its native format.
+
+### 4. Monorepo design systems
+
+**Pattern**: Resolver-driven context selection + token composition
+
+```
+/packages/tokens
+  ├── solarized.multi-theme.tokens.json
+  ├── solarized.resolver.json
+  ├── /extensions
+  │   ├── typography.tokens.json
+  │   ├── spacing.tokens.json
+  │   └── elevation.tokens.json
+  └── /outputs
+      ├── web/
+      ├── mobile/
+      └── docs/
+```
+
+The resolver binds core tokens to context, allowing each extension to inherit theme behavior.
+
+### 5. Accessible color-blindness-friendly theming
+
+**Future pattern** (not yet implemented): Extend token set with `colorblind.protanopia`, `colorblind.deuteranopia`, etc.
+
+```
+{
+  "color": {
+    "palette": { /* base Solarized */ },
+    "theme": {
+      "light": { /* standard */ },
+      "dark": { /* standard */ },
+      "light-protanopia": { /* adjusted for red-blind users */ }
+    }
+  }
+}
+```
 
-### Base tones
+---
 
-| Swatch | Token  | Hex       | RGB            | Description                |
-|--------|--------|-----------|----------------|----------------------------|
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#002b36;border:1px solid #000;"></span> | base03 | `#002b36` | `0, 43, 54`    | Darkest base tone          |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#073642;border:1px solid #000;"></span> | base02 | `#073642` | `7, 54, 66`    | Very dark base             |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#586e75;border:1px solid #000;"></span> | base01 | `#586e75` | `88, 110, 117` | Dark UI text / subtle fg   |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#657b83;border:1px solid #000;"></span> | base00 | `#657b83` | `101, 123, 131`| Primary dark text tone     |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#839496;border:1px solid #000;"></span> | base0  | `#839496` | `131, 148, 150`| Primary light text tone    |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#93a1a1;border:1px solid #000;"></span> | base1  | `#93a1a1` | `147, 161, 161`| Light UI text / subtle fg  |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#eee8d5;border:1px solid #000;"></span> | base2  | `#eee8d5` | `238, 232, 213`| Light surface background   |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#fdf6e3;border:1px solid #000;"></span> | base3  | `#fdf6e3` | `253, 246, 227`| Lightest base tone         |
+## Extending the resource
 
-### Accent tones
+This token set can be extended with additional token types while preserving the Solarized palette and roles as the foundation:
 
-| Swatch | Token   | Hex       | RGB            | Description     |
-|--------|---------|-----------|----------------|-----------------|
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#b58900;border:1px solid #000;"></span> | yellow  | `#b58900` | `181, 137, 0`  | Accent: yellow  |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#cb4b16;border:1px solid #000;"></span> | orange  | `#cb4b16` | `203, 75, 22`  | Accent: orange  |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#dc322f;border:1px solid #000;"></span> | red     | `#dc322f` | `220, 50, 47`  | Accent: red     |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#d33682;border:1px solid #000;"></span> | magenta | `#d33682` | `211, 54, 130` | Accent: magenta |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#6c71c4;border:1px solid #000;"></span> | violet  | `#6c71c4` | `108, 113, 196`| Accent: violet  |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#268bd2;border:1px solid #000;"></span> | blue    | `#268bd2` | `38, 139, 210` | Accent: blue    |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#2aa198;border:1px solid #000;"></span> | cyan    | `#2aa198` | `42, 161, 152` | Accent: cyan    |
-| <span style="display:inline-block;width:1.2em;height:1.2em;background:#859900;border:1px solid #000;"></span> | green   | `#859900` | `133, 153, 0`  | Accent: green   |
+### Typography
 
-These values match the canonical Solarized definition by Ethan Schoonover ([1][3]).
+```
+{
+  "typography": {
+    "display": { "$type": "typography", "$value": { "fontFamily": "Inter", "fontSize": { "value": 32, "unit": "px" }, ... } },
+    "body": { "$type": "typography", "$value": { ... } }
+  }
+}
+```
 
-### Swatch representation
+### Spacing
 
-While this repository does not include rendered images, the hex values above can be previewed directly in:
+```
+{
+  "spacing": {
+    "xs": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
+    "sm": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } }
+  }
+}
+```
 
-- Browser dev tools (for example, entering the hex value in a color picker).  
-- Design tools that support JSON‑based token imports adhering to the DTCG format ([4]).
+### Elevation / Shadows
 
-Many Solarized cheat sheets and theme previews on the web show the same colors; those can be used to visually verify this mapping ([2]).
+```
+{
+  "shadow": {
+    "sm": { "$type": "shadow", "$value": { "color": "{color.palette.base01}", "offsetX": 0, "offsetY": 2, "blur": 4, "spread": 0 } },
+    "lg": { "$type": "shadow", "$value": { ... } }
+  }
+}
+```
 
-## Roles and theming
+### Borders and strokes
 
-The web token file defines generic roles in addition to the core palette.
+```
+{
+  "border": {
+    "default": { "$type": "strokeStyle", "$value": { "dashArray": [], "lineCap": "round" } },
+    "dashed": { "$type": "strokeStyle", "$value": { "dashArray":, "lineCap": "round" } }[1]
+  }
+}
+```
 
-- `color.palette.*`  
-  The raw Solarized colors, intended to remain unchanged ([1]).
+**Best practice**: Always reference palette and role tokens from extensions. This keeps the design system cohesive and maintainable.
 
-- `color.role.background.*`  
-  Generic background roles with `light` and `dark` values (for example, page backgrounds and secondary surfaces).
+---
 
-- `color.role.foreground.*`  
-  Generic text/icon roles with `light` and `dark` values (default, muted, inverse).
+## Accessibility considerations
 
-- `color.role.border.*`  
-  Neutral border roles (subtle and strong).
+Solarized was designed with accessibility in mind ([1]), with carefully calibrated contrast ratios:
 
-- `color.role.accent.*`  
-  Generic accent roles mapped to the chromatic Solarized colors (primary, success, warning, danger, info).
+- **Light mode**: `base3` (bg) + `base00` (text) = 8.6:1 WCAG AAA contrast ([7])  
+- **Dark mode**: `base03` (bg) + `base0` (text) = 8.6:1 WCAG AAA contrast ([7])  
+- **Accents**: All accents maintain ≥4.5:1 contrast against both light and dark backgrounds ([7])  
 
-These roles are intentionally neutral and not tied to any specific component library; they are meant to be a reusable foundation for web‑oriented Solarized implementations.
+When extending the token set:
 
-## Using these tokens
+1. **Test color combinations** for WCAG AAA compliance (minimum 7:1 for body text).  
+2. **Use accent roles consistently** for semantic meaning; don't rely on color alone.  
+3. **Provide focus indicators** using `border.strong` for keyboard navigation.  
+4. **Test with colorblind simulators** (Coblis, Color Oracle) to ensure accents remain distinguishable.
 
-A few suggested usage patterns:
+---
 
-- **Design tools**  
-  Import the token file using a DTCG‑compatible plugin or pipeline to get the Solarized palette and roles as named colors ([4]).
+## Contributing and feedback
 
-- **Theming systems**  
-  Bind `light` and `dark` role values into a theme or resolver layer, instead of hard‑coding Solarized hex values in CSS or code ([4]).
+This is a community resource. If you have suggestions for improvements, additional token types, or use cases, please open an issue or pull request ([3]).
 
-- **Extensions / integrations**  
-  Additional token files (for typography, spacing, or platform‑specific roles) can reference this palette and role set using DTCG references, keeping color definitions centralized in this web resource ([4]).
+---
 
 ## References
 
@@ -110,3 +582,7 @@ A few suggested usage patterns:
 [2]: https://en.wikipedia.org/wiki/Solarized "Solarized on Wikipedia"  
 [3]: https://github.com/solarized "Solarized GitHub organization"  
 [4]: https://www.designtokens.org/TR/2025.10/format/ "Design Tokens Format Module 2025.10"  
+[5]: https://www.designtokens.org/TR/2025.10/resolver/ "Design Tokens Resolver Module 2025.10"  
+[6]: https://www.designtokens.org/ "Design Tokens Community Group"  
+[7]: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html "WCAG 2.1 Contrast (Minimum)"  
+[8]: https://commons.wikimedia.org/wiki/File:Solarized-palette.png "Solarized palette image (Wikimedia Commons)"

web-tokens/solarized.dark.tokens.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://www.designtokens.org/TR/2025.10/format/schema.json",
+  "id": "https://github.com/altercation/solarized/web-tokens/solarized.dark.tokens.json",
+  "description": "Solarized Dark palette and roles for single-theme consumption (DTCG 2025.10).",
+
+  "color": {
+    "$type": "color",
+
+    "palette": {
+      "$type": "color",
+      "$description": "Canonical Solarized palette.",
+      "base03": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 43, 54], "hex": "#002b36" } },
+      "base02": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [7, 54, 66], "hex": "#073642" } },
+      "base01": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [88, 110, 117], "hex": "#586e75" } },
+      "base00": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [101, 123, 131], "hex": "#657b83" } },
+      "base0":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [131, 148, 150], "hex": "#839496" } },
+      "base1":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [147, 161, 161], "hex": "#93a1a1" } },
+      "base2":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [238, 232, 213], "hex": "#eee8d5" } },
+      "base3":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [253, 246, 227], "hex": "#fdf6e3" } },
+
+      "yellow":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [181, 137, 0], "hex": "#b58900" } },
+      "orange":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [203, 75, 22], "hex": "#cb4b16" } },
+      "red":     { "$type": "color", "$value": { "colorSpace": "srgb", "components": [220, 50, 47], "hex": "#dc322f" } },
+      "magenta": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [211, 54, 130], "hex": "#d33682" } },
+      "violet":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [108, 113, 196], "hex": "#6c71c4" } },
+      "blue":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [38, 139, 210], "hex": "#268bd2" } },
+      "cyan":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [42, 161, 152], "hex": "#2aa198" } },
+      "green":   { "$type": "color", "$value": { "colorSpace": "srgb", "components": [133, 153, 0], "hex": "#859900" } }
+    },
+
+    "role": {
+      "$type": "color",
+      "$description": "Solarized Dark semantic roles.",
+
+      "background": {
+        "$type": "color",
+        "default": { "$type": "color", "$value": "{color.palette.base03}" },
+        "subtle":  { "$type": "color", "$value": "{color.palette.base02}" }
+      },
+
+      "foreground": {
+        "$type": "color",
+        "default": { "$type": "color", "$value": "{color.palette.base0}" },
+        "muted":   { "$type": "color", "$value": "{color.palette.base01}" },
+        "inverse": { "$type": "color", "$value": "{color.palette.base3}" }
+      },
+
+      "border": {
+        "$type": "color",
+        "subtle": { "$type": "color", "$value": "{color.palette.base02}" },
+        "strong": { "$type": "color", "$value": "{color.palette.base01}" }
+      },
+
+      "accent": {
+        "$type": "color",
+        "primary": { "$type": "color", "$value": "{color.palette.blue}" },
+        "success": { "$type": "color", "$value": "{color.palette.green}" },
+        "warning": { "$type": "color", "$value": "{color.palette.yellow}" },
+        "danger":  { "$type": "color", "$value": "{color.palette.red}" },
+        "info":    { "$type": "color", "$value": "{color.palette.cyan}" }
+      }
+    }
+  }
+}

web-tokens/solarized.light.tokens.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://www.designtokens.org/TR/2025.10/format/schema.json",
+  "id": "https://github.com/altercation/solarized/web-tokens/solarized.light.tokens.json",
+  "description": "Solarized Light palette and roles for single-theme consumption (DTCG 2025.10).",
+
+  "color": {
+    "$type": "color",
+
+    "palette": {
+      "$type": "color",
+      "$description": "Canonical Solarized palette.",
+      "base03": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 43, 54], "hex": "#002b36" } },
+      "base02": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [7, 54, 66], "hex": "#073642" } },
+      "base01": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [88, 110, 117], "hex": "#586e75" } },
+      "base00": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [101, 123, 131], "hex": "#657b83" } },
+      "base0":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [131, 148, 150], "hex": "#839496" } },
+      "base1":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [147, 161, 161], "hex": "#93a1a1" } },
+      "base2":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [238, 232, 213], "hex": "#eee8d5" } },
+      "base3":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [253, 246, 227], "hex": "#fdf6e3" } },
+
+      "yellow":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [181, 137, 0], "hex": "#b58900" } },
+      "orange":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [203, 75, 22], "hex": "#cb4b16" } },
+      "red":     { "$type": "color", "$value": { "colorSpace": "srgb", "components": [220, 50, 47], "hex": "#dc322f" } },
+      "magenta": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [211, 54, 130], "hex": "#d33682" } },
+      "violet":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [108, 113, 196], "hex": "#6c71c4" } },
+      "blue":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [38, 139, 210], "hex": "#268bd2" } },
+      "cyan":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [42, 161, 152], "hex": "#2aa198" } },
+      "green":   { "$type": "color", "$value": { "colorSpace": "srgb", "components": [133, 153, 0], "hex": "#859900" } }
+    },
+
+    "role": {
+      "$type": "color",
+      "$description": "Solarized Light semantic roles.",
+
+      "background": {
+        "$type": "color",
+        "default": { "$type": "color", "$value": "{color.palette.base3}" },
+        "subtle":  { "$type": "color", "$value": "{color.palette.base2}" }
+      },
+
+      "foreground": {
+        "$type": "color",
+        "default": { "$type": "color", "$value": "{color.palette.base00}" },
+        "muted":   { "$type": "color", "$value": "{color.palette.base1}" },
+        "inverse": { "$type": "color", "$value": "{color.palette.base03}" }
+      },
+
+      "border": {
+        "$type": "color",
+        "subtle": { "$type": "color", "$value": "{color.palette.base2}" },
+        "strong": { "$type": "color", "$value": "{color.palette.base1}" }
+      },
+
+      "accent": {
+        "$type": "color",
+        "primary": { "$type": "color", "$value": "{color.palette.blue}" },
+        "success": { "$type": "color", "$value": "{color.palette.green}" },
+        "warning": { "$type": "color", "$value": "{color.palette.yellow}" },
+        "danger":  { "$type": "color", "$value": "{color.palette.red}" },
+        "info":    { "$type": "color", "$value": "{color.palette.cyan}" }
+      }
+    }
+  }
+}

web-tokens/solarized.multi-theme.tokens.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "https://www.designtokens.org/TR/2025.10/format/schema.json",
+  "id": "https://github.com/altercation/solarized/web-tokens/solarized.multi-theme.tokens.json",
+  "description": "Solarized palette with explicit light and dark theme roles (DTCG 2025.10).",
+
+  "color": {
+    "$type": "color",
+
+    "palette": {
+      "$type": "color",
+      "$description": "Canonical Solarized 16-color palette.",
+
+      "base03": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 43, 54], "hex": "#002b36" } },
+      "base02": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [7, 54, 66], "hex": "#073642" } },
+      "base01": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [88, 110, 117], "hex": "#586e75" } },
+      "base00": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [101, 123, 131], "hex": "#657b83" } },
+      "base0":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [131, 148, 150], "hex": "#839496" } },
+      "base1":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [147, 161, 161], "hex": "#93a1a1" } },
+      "base2":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [238, 232, 213], "hex": "#eee8d5" } },
+      "base3":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [253, 246, 227], "hex": "#fdf6e3" } },
+
+      "yellow":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [181, 137, 0], "hex": "#b58900" } },
+      "orange":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [203, 75, 22], "hex": "#cb4b16" } },
+      "red":     { "$type": "color", "$value": { "colorSpace": "srgb", "components": [220, 50, 47], "hex": "#dc322f" } },
+      "magenta": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [211, 54, 130], "hex": "#d33682" } },
+      "violet":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [108, 113, 196], "hex": "#6c71c4" } },
+      "blue":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [38, 139, 210], "hex": "#268bd2" } },
+      "cyan":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [42, 161, 152], "hex": "#2aa198" } },
+      "green":   { "$type": "color", "$value": { "colorSpace": "srgb", "components": [133, 153, 0], "hex": "#859900" } }
+    },
+
+    "theme": {
+      "$type": "color",
+      "$description": "Explicit Solarized Light and Dark theme roles.",
+
+      "light": {
+        "$type": "color",
+        "$description": "Solarized Light (light background, dark text).",
+        "background": {
+          "$type": "color",
+          "default": { "$type": "color", "$value": "{color.palette.base3}" },
+          "subtle":  { "$type": "color", "$value": "{color.palette.base2}" }
+        },
+        "foreground": {
+          "$type": "color",
+          "default": { "$type": "color", "$value": "{color.palette.base00}" },
+          "muted":   { "$type": "color", "$value": "{color.palette.base1}" },
+          "inverse": { "$type": "color", "$value": "{color.palette.base03}" }
+        },
+        "border": {
+          "$type": "color",
+          "subtle": { "$type": "color", "$value": "{color.palette.base2}" },
+          "strong": { "$type": "color", "$value": "{color.palette.base1}" }
+        },
+        "accent": {
+          "$type": "color",
+          "primary": { "$type": "color", "$value": "{color.palette.blue}" },
+          "success": { "$type": "color", "$value": "{color.palette.green}" },
+          "warning": { "$type": "color", "$value": "{color.palette.yellow}" },
+          "danger":  { "$type": "color", "$value": "{color.palette.red}" },
+          "info":    { "$type": "color", "$value": "{color.palette.cyan}" }
+        }
+      },
+
+      "dark": {
+        "$type": "color",
+        "$description": "Solarized Dark (dark background, light text).",
+        "background": {
+          "$type": "color",
+          "default": { "$type": "color", "$value": "{color.palette.base03}" },
+          "subtle":  { "$type": "color", "$value": "{color.palette.base02}" }
+        },
+        "foreground": {
+          "$type": "color",
+          "default": { "$type": "color", "$value": "{color.palette.base0}" },
+          "muted":   { "$type": "color", "$value": "{color.palette.base01}" },
+          "inverse": { "$type": "color", "$value": "{color.palette.base3}" }
+        },
+        "border": {
+          "$type": "color",
+          "subtle": { "$type": "color", "$value": "{color.palette.base02}" },
+          "strong": { "$type": "color", "$value": "{color.palette.base01}" }
+        },
+        "accent": {
+          "$type": "color",
+          "primary": { "$type": "color", "$value": "{color.palette.blue}" },
+          "success": { "$type": "color", "$value": "{color.palette.green}" },
+          "warning": { "$type": "color", "$value": "{color.palette.yellow}" },
+          "danger":  { "$type": "color", "$value": "{color.palette.red}" },
+          "info":    { "$type": "color", "$value": "{color.palette.cyan}" }
+        }
+      }
+    }
+  }
+}

web-tokens/solarized.resolver.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://www.designtokens.org/TR/2025.10/resolver/schema.json",
+  "name": "Solarized Web Multi-Theme Resolver",
+  "version": "2025.10",
+  "description": "Resolver for Solarized Light and Solarized Dark themes using DTCG 2025.10. Contexts: light, dark.",
+
+  "sets": {
+    "palette": {
+      "description": "Canonical Solarized 16-color palette (theme-agnostic).",
+      "sources": [
+        {
+          "ref": "./solarized.multi-theme.tokens.json#/color/palette"
+        }
+      ]
+    },
+    "light-theme": {
+      "description": "Solarized Light roles and semantics.",
+      "sources": [
+        {
+          "ref": "./solarized.multi-theme.tokens.json#/color/theme/light"
+        }
+      ]
+    },
+    "dark-theme": {
+      "description": "Solarized Dark roles and semantics.",
+      "sources": [
+        {
+          "ref": "./solarized.multi-theme.tokens.json#/color/theme/dark"
+        }
+      ]
+    }
+  },
+
+  "modifiers": {
+    "theme": {
+      "description": "Theme context modifier: select light or dark roles.",
+      "contexts": {
+        "light": [
+          { "ref": "sets.palette" },
+          { "ref": "sets.light-theme" }
+        ],
+        "dark": [
+          { "ref": "sets.palette" },
+          { "ref": "sets.dark-theme" }
+        ]
+      },
+      "default": "light"
+    }
+  },
+
+  "resolutionOrder": [
+    {
+      "type": "set",
+      "name": "palette"
+    },
+    {
+      "type": "modifier",
+      "name": "theme"
+    }
+  ]
+}

web-tokens/solarized.tokens.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://www.designtokens.org/TR/2025.10/format/schema.json",
+  "id": "https://github.com/altercation/solarized/web-tokens/solarized.tokens.json",
+  "description": "Solarized color palette and generic light/dark roles as a web-oriented design token resource (DTCG 2025.10).",
+
+  "color": {
+    "$type": "color",
+
+    "palette": {
+      "$type": "color",
+      "$description": "Canonical Solarized 16-color palette (8 monotones, 8 accents).",
+
+      "base03": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 43, 54], "hex": "#002b36" } },
+      "base02": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [7, 54, 66], "hex": "#073642" } },
+      "base01": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [88, 110, 117], "hex": "#586e75" } },
+      "base00": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [101, 123, 131], "hex": "#657b83" } },
+      "base0":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [131, 148, 150], "hex": "#839496" } },
+      "base1":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [147, 161, 161], "hex": "#93a1a1" } },
+      "base2":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [238, 232, 213], "hex": "#eee8d5" } },
+      "base3":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [253, 246, 227], "hex": "#fdf6e3" } },
+
+      "yellow":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [181, 137, 0], "hex": "#b58900" } },
+      "orange":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [203, 75, 22], "hex": "#cb4b16" } },
+      "red":     { "$type": "color", "$value": { "colorSpace": "srgb", "components": [220, 50, 47], "hex": "#dc322f" } },
+      "magenta": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [211, 54, 130], "hex": "#d33682" } },
+      "violet":  { "$type": "color", "$value": { "colorSpace": "srgb", "components": [108, 113, 196], "hex": "#6c71c4" } },
+      "blue":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [38, 139, 210], "hex": "#268bd2" } },
+      "cyan":    { "$type": "color", "$value": { "colorSpace": "srgb", "components": [42, 161, 152], "hex": "#2aa198" } },
+      "green":   { "$type": "color", "$value": { "colorSpace": "srgb", "components": [133, 153, 0], "hex": "#859900" } }
+    },
+
+    "role": {
+      "$type": "color",
+      "$description": "Generic light/dark roles for web-oriented UIs.",
+
+      "background": {
+        "$type": "color",
+        "default": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base3}",
+            "dark": "{color.palette.base03}"
+          }
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base2}",
+            "dark": "{color.palette.base02}"
+          }
+        }
+      },
+
+      "foreground": {
+        "$type": "color",
+        "default": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base00}",
+            "dark": "{color.palette.base0}"
+          }
+        },
+        "muted": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base1}",
+            "dark": "{color.palette.base01}"
+          }
+        },
+        "inverse": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base03}",
+            "dark": "{color.palette.base3}"
+          }
+        }
+      },
+
+      "border": {
+        "$type": "color",
+        "subtle": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base2}",
+            "dark": "{color.palette.base02}"
+          }
+        },
+        "strong": {
+          "$type": "color",
+          "$value": {
+            "light": "{color.palette.base1}",
+            "dark": "{color.palette.base01}"
+          }
+        }
+      },
+
+      "accent": {
+        "$type": "color",
+        "primary": { "$type": "color", "$value": "{color.palette.blue}" },
+        "success": { "$type": "color", "$value": "{color.palette.green}" },
+        "warning": { "$type": "color", "$value": "{color.palette.yellow}" },
+        "danger":  { "$type": "color", "$value": "{color.palette.red}" },
+        "info":    { "$type": "color", "$value": "{color.palette.cyan}" }
+      }
+    }
+  }
+}

web-tokens/solarized.web.2025.10.tokens.json

@@ -1,270 +0,0 @@
-{
-  "$schema": "https://www.designtokens.org/TR/2025.10/format/schema.json",
-  "id": "https://github.com/altercation/solarized/web-tokens/solarized.web.2025.10.tokens.json",
-  "description": "Solarized color palette and generic light/dark roles as a web-oriented design token resource. Based on Ethan Schoonover's canonical Solarized scheme.",
-
-  "color": {
-    "$type": "color",
-
-    "palette": {
-      "$type": "color",
-      "$description": "Canonical Solarized 16-color palette (8 monotones, 8 accents).",
-
-      "base03": {
-        "$type": "color",
-        "$description": "Darkest base tone.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [0, 43, 54],
-          "hex": "#002b36"
-        }
-      },
-      "base02": {
-        "$type": "color",
-        "$description": "Very dark base tone.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [7, 54, 66],
-          "hex": "#073642"
-        }
-      },
-      "base01": {
-        "$type": "color",
-        "$description": "Dark UI text / subtle foreground.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [88, 110, 117],
-          "hex": "#586e75"
-        }
-      },
-      "base00": {
-        "$type": "color",
-        "$description": "Primary dark text tone.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [101, 123, 131],
-          "hex": "#657b83"
-        }
-      },
-      "base0": {
-        "$type": "color",
-        "$description": "Primary light text tone.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [131, 148, 150],
-          "hex": "#839496"
-        }
-      },
-      "base1": {
-        "$type": "color",
-        "$description": "Light UI text / subtle foreground.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [147, 161, 161],
-          "hex": "#93a1a1"
-        }
-      },
-      "base2": {
-        "$type": "color",
-        "$description": "Light surface background.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [238, 232, 213],
-          "hex": "#eee8d5"
-        }
-      },
-      "base3": {
-        "$type": "color",
-        "$description": "Lightest base tone.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [253, 246, 227],
-          "hex": "#fdf6e3"
-        }
-      },
-
-      "yellow": {
-        "$type": "color",
-        "$description": "Accent: yellow.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [181, 137, 0],
-          "hex": "#b58900"
-        }
-      },
-      "orange": {
-        "$type": "color",
-        "$description": "Accent: orange.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [203, 75, 22],
-          "hex": "#cb4b16"
-        }
-      },
-      "red": {
-        "$type": "color",
-        "$description": "Accent: red.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [220, 50, 47],
-          "hex": "#dc322f"
-        }
-      },
-      "magenta": {
-        "$type": "color",
-        "$description": "Accent: magenta.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [211, 54, 130],
-          "hex": "#d33682"
-        }
-      },
-      "violet": {
-        "$type": "color",
-        "$description": "Accent: violet.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [108, 113, 196],
-          "hex": "#6c71c4"
-        }
-      },
-      "blue": {
-        "$type": "color",
-        "$description": "Accent: blue.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [38, 139, 210],
-          "hex": "#268bd2"
-        }
-      },
-      "cyan": {
-        "$type": "color",
-        "$description": "Accent: cyan.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [42, 161, 152],
-          "hex": "#2aa198"
-        }
-      },
-      "green": {
-        "$type": "color",
-        "$description": "Accent: green.",
-        "$value": {
-          "colorSpace": "srgb",
-          "components": [133, 153, 0],
-          "hex": "#859900"
-        }
-      }
-    },
-
-    "role": {
-      "$type": "color",
-      "$description": "Generic light/dark roles for web-oriented UIs (backgrounds, foregrounds, borders, accents).",
-
-      "background": {
-        "$type": "color",
-        "$description": "High-level background roles for light and dark variants.",
-
-        "default": {
-          "$type": "color",
-          "$description": "Primary page background.",
-          "$value": {
-            "light": "{color.palette.base3}",
-            "dark": "{color.palette.base03}"
-          }
-        },
-        "subtle": {
-          "$type": "color",
-          "$description": "Secondary surfaces layered on top of the default background.",
-          "$value": {
-            "light": "{color.palette.base2}",
-            "dark": "{color.palette.base02}"
-          }
-        }
-      },
-
-      "foreground": {
-        "$type": "color",
-        "$description": "Generic foreground (text / icon) roles.",
-
-        "default": {
-          "$type": "color",
-          "$description": "Primary text color.",
-          "$value": {
-            "light": "{color.palette.base00}",
-            "dark": "{color.palette.base0}"
-          }
-        },
-        "muted": {
-          "$type": "color",
-          "$description": "Secondary / muted text.",
-          "$value": {
-            "light": "{color.palette.base1}",
-            "dark": "{color.palette.base01}"
-          }
-        },
-        "inverse": {
-          "$type": "color",
-          "$description": "Text on strong or accent backgrounds.",
-          "$value": {
-            "light": "{color.palette.base03}",
-            "dark": "{color.palette.base3}"
-          }
-        }
-      },
-
-      "border": {
-        "$type": "color",
-        "$description": "Neutral border roles.",
-
-        "subtle": {
-          "$type": "color",
-          "$description": "Dividers, subtle outlines.",
-          "$value": {
-            "light": "{color.palette.base2}",
-            "dark": "{color.palette.base02}"
-          }
-        },
-        "strong": {
-          "$type": "color",
-          "$description": "Stronger outlines and focus indicators.",
-          "$value": {
-            "light": "{color.palette.base1}",
-            "dark": "{color.palette.base01}"
-          }
-        }
-      },
-
-      "accent": {
-        "$type": "color",
-        "$description": "Generic accent roles mapped to Solarized chromatic colors.",
-
-        "primary": {
-          "$type": "color",
-          "$description": "Primary accent color for interactive elements.",
-          "$value": "{color.palette.blue}"
-        },
-        "success": {
-          "$type": "color",
-          "$description": "Positive / success indication.",
-          "$value": "{color.palette.green}"
-        },
-        "warning": {
-          "$type": "color",
-          "$description": "Warning / caution indication.",
-          "$value": "{color.palette.yellow}"
-        },
-        "danger": {
-          "$type": "color",
-          "$description": "Error / destructive indication.",
-          "$value": "{color.palette.red}"
-        },
-        "info": {
-          "$type": "color",
-          "$description": "Informational accents.",
-          "$value": "{color.palette.cyan}"
-        }
-      }
-    }
-  }
-}