update color system: rename, add new group

src/_config/setup/create-colors.js

@@ -54,7 +54,7 @@ const colorTokens = {
   items: []
 };
 
-colorsBase.neutral.forEach(color => {
+colorsBase.shades_neutral.forEach(color => {
   const palette = generatePalette(color.value, neutralSteps);
   palette.forEach(shade => {
     colorTokens.items.push({
@@ -64,7 +64,7 @@ colorsBase.neutral.forEach(color => {
   });
 });
 
-colorsBase.vibrant.forEach(color => {
+colorsBase.shades_vibrant.forEach(color => {
   const palette = generatePalette(color.value, vibrantSteps);
   palette.forEach(shade => {
     colorTokens.items.push({
@@ -74,17 +74,17 @@ colorsBase.vibrant.forEach(color => {
   });
 });
 
-colorsBase.fixed.forEach(color => {
+colorsBase.light_dark.forEach(color => {
   colorTokens.items.push({
     name: color.name,
     value: color.value
   });
 
-  const fixedColor = new Color(color.value).to('oklch');
+  const lightDark = new Color(color.value).to('oklch');
   const subduedColor = new Color('oklch', [
-    fixedColor.l,
-    fixedColor.c * 0.8, // reduce chroma by 20%
-    fixedColor.h
+    lightDark.l,
+    lightDark.c * 0.8, // reduce chroma by 20%
+    lightDark.h
   ]).to('srgb');
 
   const [r, g, b] = subduedColor.coords.map(value => Math.round(Math.min(Math.max(value * 255, 0), 255)));
@@ -99,4 +99,11 @@ colorsBase.fixed.forEach(color => {
   });
 });
 
+colorsBase.standalone.forEach(color => {
+  colorTokens.items.push({
+    name: color.name,
+    value: color.value
+  });
+});
+
 fs.writeFileSync('./src/_data/designTokens/colors.json', JSON.stringify(colorTokens, null, 2));

src/_data/designTokens/colorsBase.json

@@ -1,14 +1,14 @@
 {
   "title": "Colors",
   "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print. neutral and vibrant colors are converted to color palettes, fixed colors are kept as they are",
-  "neutral": [
+  "shades_neutral": [
     {
       "name": "Gray",
       "value": "#888888"
     }
   ],
-  "vibrant": [],
-  "fixed": [
+  "shades_vibrant": [],
+  "light_dark": [
     {
       "name": "Pink",
       "value": "#dd4462"
@@ -21,5 +21,6 @@
       "name": "Gold",
       "value": "#fbbe25"
     }
-  ]
+  ],
+  "standalone": []
 }

src/docs/design-tokens.md

@@ -14,11 +14,11 @@ As of version 4.0, you can create colors dynamically. Run `npm run colors` after
 
 If you want to adjust how the colors turn out, edit `src/_config/setup/create-colors.js`.
 
-Placed under `neutral` or `vibrant`, colors are converted into scalable palettes. `neutral` is better for grayish / monochromatic colors, while `vibrant` is better for colorful palettes. Colors listed under `fixed` remain as standalone values without generating shades. Each color placed here also generates a "subdued" version for the dark theme.
+Colors placed under `shades_neutral` or `shades_vibrant` are converted into scalable palettes. `shades_neutral` is better for grayish / monochromatic colors, while `shades_vibrant` is better for colorful palettes. Colors listed under `standalone` and `light_dark` are left as they are, `light_dark` items output a second "subdued" version optimized for dark themes.
 
 ```js
 // this creates a palette with shades of green, 100 to 900
-  "vibrant": [
+  "shades_vibrant": [
     {
       "name": "green",
       "value": "#008000"

src/posts/2025/2025-01-11-v-4.md

@@ -47,13 +47,13 @@ For a detailed overview of the new image possibilities [see the dedicated blog p
 
 Run `npm run colors` after defining your base color values in `src/_data/designTokens/colorsBase.json`. This will generate or update the `colors.json` file in the same directory.
 
-- Colors under `neutral` or `vibrant` are converted into scalable palettes.
-- Colors listed under `fixed` are standalone values and do not generate shades. Each fixed color also produces a "subdued" version optimized for dark themes.
+- Colors under `shades_neutral` or `shades_vibrant` are converted into scalable palettes. This is not very elaborate, use a value more or less in the middle of the scale. Happy to receive suggestions for improvements.
+- Colors listed under `standalone` and `light_dark` are left as they are, `light_dark` items output a second "subdued" version optimized for dark themes.
 
 ```json
 // this creates a palette with shades of green, 100 to 900
 {
-  "vibrant": [
+  "shades_vibrant": [
     {
       "name": "green",
       "value": "#008000"
@@ -68,6 +68,8 @@ I also considered using the new `light-dark()` CSS function instead of the repet
 
 **Breaking:**: `src/assets/css/global/base/variables.css` changed. You must adapt your colors in `src/_data/designTokens/colorsBase.json` if you want to use the `npm run colors` script.
 
+You can also just completely skip that and just define your colors directly in `colors.json` (I recommend deleting the colors command in `package.json` in this case, so you don't unitentionally overwrite your work).
+
 [More about colors here](/get-started/#design-tokens).
 
 ## New button styles