mirror
/
solarized
mirror of https://github.com/altercation/solarized.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

docs: Prepare web-tokens for upstream contribution 

Prepares the web-tokens directory for contribution to the main Solarized
project by improving documentation and integration.

Changes:
- Remove non-existent script reference from web-tokens README
- Add "Design Systems & Tokens" section to main README
- Add CHANGELOG entry for 1.0.0beta3 release
- Rename CHANGELOG.mkd to CHANGELOG.md for consistency

web-tokens is now:
- Fully discoverable via main README
- Documented in project history
- Self-contained and ready for git-subtree extraction
- Compliant with project documentation patterns

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
pull/426/head
Coty Beasley 3 months ago
parent
7ce3ca1526
commit
622808880e
No known key found for this signature in database
8 changed files with 1027 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      CHANGELOG.md
  2. 9
      README.md
  3. 18
      web-tokens/README.md
  4. 278
      web-tokens/solarized.dark.tokens.json
  5. 278
      web-tokens/solarized.light.tokens.json
  6. 337
      web-tokens/solarized.multi-theme.tokens.json
  7. 21
      web-tokens/solarized.resolver.json
  8. 244
      web-tokens/solarized.tokens.json

16
CHANGELOG.mkd → CHANGELOG.md
Unescape View File

@ -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
----------

9
README.md
Unescape View File

@ -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

18
web-tokens/README.md
Unescape View File

@ -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)"
[8]: https://commons.wikimedia.org/wiki/File:Solarized-palette.png "Solarized palette image (Wikimedia Commons)"

278
web-tokens/solarized.dark.tokens.json
Unescape View File

@ -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}"
}
}
}
}
}
}

278
web-tokens/solarized.light.tokens.json
Unescape View File

@ -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}"
}
}
}
}
}
}

337
web-tokens/solarized.multi-theme.tokens.json
Unescape View File

@ -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}"
}
}
}
}
}
}
}

21
web-tokens/solarized.resolver.json
Unescape View File

@ -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"
}
]
}
}

244
web-tokens/solarized.tokens.json
Unescape View File

@ -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}"
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save