diff --git a/CHANGELOG.mkd b/CHANGELOG.md similarity index 92% rename from CHANGELOG.mkd rename to CHANGELOG.md index ec00a76..ded964c 100644 --- a/CHANGELOG.mkd +++ b/CHANGELOG.md @@ -1,7 +1,21 @@ Solarized Changelog =================== -## Current release 1.0.0beta2 +## Current release 1.0.0beta3 (unreleased) + +1.0.0beta3 (unreleased) +----------------------- + +### Summary + +Added modern design token format following DTCG 2025.10 specification. + +#### Design Systems & Tokens + +* [NEW] **Design Tokens (DTCG)** — Web-oriented token resource with semantic + role mappings, light/dark theme support, and resolver-driven context + switching. Supports Style Dictionary, Figma Variables, and DTCG-compliant + tooling. Located in `web-tokens/`. 1.0.0beta2 ---------- diff --git a/README.md b/README.md index d18ee94..d75653c 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,15 @@ Currently available in formats for (cf [screenshots](#screenshots) below): * **Apple Color Picker** Palettes * **GIMP** Palette +### Design Systems & Tokens + +* **Design Tokens (DTCG)** — modern web-oriented token format following the + Design Tokens Community Group 2025.10 specification. Includes semantic role + mappings for light/dark themes, resolver-driven context switching, and + multi-format variants (single-theme, multi-theme, resolver). Supports Style + Dictionary, Figma Variables, and other DTCG-compliant tooling. See the + [web-tokens README](./web-tokens/README.md) for usage and integration patterns. + Don't see the application you want to use it in? Download the palettes (or pull the values from the table below) and create your own. Submit it back and I'll happily note the contribution and include it on this page. See also the diff --git a/web-tokens/README.md b/web-tokens/README.md index eb5711f..e9b2c81 100644 --- a/web-tokens/README.md +++ b/web-tokens/README.md @@ -1,4 +1,3 @@ - # 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 and Resolver Module 2025.10 ([1][4][5]). @@ -31,16 +30,9 @@ The goal of this resource is to: - **`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. -### 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 -- **`/assets/`** +- **`/doc-assets/`** Contains 16 PNG swatch images (one per Solarized color) for visual reference in documentation, design tools, and web previews. ## DTCG 2025.10 adherence @@ -273,12 +265,13 @@ Modern design systems rely on DTCG-compliant tooling to manage, transform, and d 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. +#### Adobe XD, Sketch, etc Similar workflows apply. Most modern design tools support JSON token import and variable/style binding. @@ -316,6 +309,7 @@ module.exports = { ``` **Output**: + ``` /* tokens.light.css */ :root { @@ -585,4 +579,4 @@ This is a community resource. If you have suggestions for improvements, addition [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)" \ No newline at end of file +[8]: https://commons.wikimedia.org/wiki/File:Solarized-palette.png "Solarized palette image (Wikimedia Commons)" diff --git a/web-tokens/solarized.dark.tokens.json b/web-tokens/solarized.dark.tokens.json index de559dc..e103d45 100644 --- a/web-tokens/solarized.dark.tokens.json +++ b/web-tokens/solarized.dark.tokens.json @@ -2,63 +2,267 @@ "$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" } } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" + } } } } -} +} \ No newline at end of file diff --git a/web-tokens/solarized.light.tokens.json b/web-tokens/solarized.light.tokens.json index 3c201da..406b5ee 100644 --- a/web-tokens/solarized.light.tokens.json +++ b/web-tokens/solarized.light.tokens.json @@ -2,63 +2,267 @@ "$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" } } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" + } } } } -} +} \ No newline at end of file diff --git a/web-tokens/solarized.multi-theme.tokens.json b/web-tokens/solarized.multi-theme.tokens.json index 917c560..8a7c3d4 100644 --- a/web-tokens/solarized.multi-theme.tokens.json +++ b/web-tokens/solarized.multi-theme.tokens.json @@ -2,94 +2,335 @@ "$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" } } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" } + "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}" + } } } } } -} +} \ No newline at end of file diff --git a/web-tokens/solarized.resolver.json b/web-tokens/solarized.resolver.json index 9aa9e86..0ab0f4c 100644 --- a/web-tokens/solarized.resolver.json +++ b/web-tokens/solarized.resolver.json @@ -3,7 +3,6 @@ "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).", @@ -30,24 +29,30 @@ ] } }, - "modifiers": { "theme": { "description": "Theme context modifier: select light or dark roles.", "contexts": { "light": [ - { "ref": "sets.palette" }, - { "ref": "sets.light-theme" } + { + "ref": "sets.palette" + }, + { + "ref": "sets.light-theme" + } ], "dark": [ - { "ref": "sets.palette" }, - { "ref": "sets.dark-theme" } + { + "ref": "sets.palette" + }, + { + "ref": "sets.dark-theme" + } ] }, "default": "light" } }, - "resolutionOrder": [ { "type": "set", @@ -58,4 +63,4 @@ "name": "theme" } ] -} +} \ No newline at end of file diff --git a/web-tokens/solarized.tokens.json b/web-tokens/solarized.tokens.json index 8b05fef..528c9e8 100644 --- a/web-tokens/solarized.tokens.json +++ b/web-tokens/solarized.tokens.json @@ -2,37 +2,207 @@ "$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" } } + "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": { @@ -50,7 +220,6 @@ } } }, - "foreground": { "$type": "color", "default": { @@ -75,7 +244,6 @@ } } }, - "border": { "$type": "color", "subtle": { @@ -93,15 +261,29 @@ } } }, - "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}" } + "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}" + } } } } -} +} \ No newline at end of file