@syncupsuite/themes 0.3.0 → 0.4.0

package/src/de-stijl/tokens.json

@@ -0,0 +1,840 @@
+{
+  "$name": "de-stijl",
+  "$description": "De Stijl — Dutch Neo-Plasticism, founded Leiden 1917. Mondrian's primary colors and Rietveld's spatial geometry reduced to irreducible elements.",
+  "$extensions": {
+    "syncupsuite.foundation": {
+      "story": "Piet Mondrian and Theo van Doesburg reduced painting to its irreducible elements: the primary colors, the horizontal and vertical line. Gerrit Rietveld built a chair from this philosophy. The result is not minimal — it is maximal through constraint. Every decision becomes visible because there are so few of them.",
+      "philosophy": "Absolute abstraction, universal harmony — beauty through the elimination of everything that is not essential",
+      "era": "Early Modernist — De Stijl to International Style, 1917–1931",
+      "harmonyMode": "triadic",
+      "radiusTendency": "none",
+      "typographyCategory": "neo-grotesque"
+    }
+  },
+  "primitive": {
+    "color": {
+      "blue-mondriaan-blauw": {
+        "50": {
+          "$type": "color",
+          "$value": "#E8F6FF",
+          "$description": "Blue (Mondriaan Blauw) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#B9CFF5",
+          "$description": "Blue (Mondriaan Blauw) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#8DA9DB",
+          "$description": "Blue (Mondriaan Blauw) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#6284C1",
+          "$description": "Blue (Mondriaan Blauw) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#3860A7",
+          "$description": "Blue (Mondriaan Blauw) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#0D3B8C",
+          "$description": "Blue (Mondriaan Blauw) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Blue (Mondriaan Blauw)",
+              "tradition": "Mondrian primary blue — the exact blue of Composition with Red, Blue and Yellow (1930). The structural anchor.",
+              "source": "Piet Mondrian: Life and Work, M. Seuphor",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#032A71",
+          "$description": "Blue (Mondriaan Blauw) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#001A57",
+          "$description": "Blue (Mondriaan Blauw) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#000A3E",
+          "$description": "Blue (Mondriaan Blauw) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#000026",
+          "$description": "Blue (Mondriaan Blauw) 900"
+        }
+      },
+      "red-rietveld-rood": {
+        "50": {
+          "$type": "color",
+          "$value": "#FFE9E3",
+          "$description": "Red (Rietveld Rood) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#FFC6BE",
+          "$description": "Red (Rietveld Rood) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#FFA499",
+          "$description": "Red (Rietveld Rood) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#F48075",
+          "$description": "Red (Rietveld Rood) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#E55B52",
+          "$description": "Red (Rietveld Rood) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#D42B2B",
+          "$description": "Red (Rietveld Rood) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Red (Rietveld Rood)",
+              "tradition": "Mondrian primary red — vermilion of the Rietveld Red Blue Chair (1917). Warmth within the grid.",
+              "source": "De Stijl 1917–1931: The Dutch Contribution to Modern Art, H. Jaffé",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#A50311",
+          "$description": "Red (Rietveld Rood) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#780000",
+          "$description": "Red (Rietveld Rood) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#4D0000",
+          "$description": "Red (Rietveld Rood) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#250000",
+          "$description": "Red (Rietveld Rood) 900"
+        }
+      },
+      "yellow-cadmium-geel": {
+        "50": {
+          "$type": "color",
+          "$value": "#FCF6D4",
+          "$description": "Yellow (Cadmium Geel) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#FBF1B8",
+          "$description": "Yellow (Cadmium Geel) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#F9EB9C",
+          "$description": "Yellow (Cadmium Geel) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#F8E57C",
+          "$description": "Yellow (Cadmium Geel) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#F6DF55",
+          "$description": "Yellow (Cadmium Geel) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#F5D800",
+          "$description": "Yellow (Cadmium Geel) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Yellow (Cadmium Geel)",
+              "tradition": "Mondrian primary yellow — cadmium yellow of Neo-Plasticism theory. The light source in the composition.",
+              "source": "Mondrian: The Art of Destruction, C. Blotkamp",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#B59B00",
+          "$description": "Yellow (Cadmium Geel) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#786200",
+          "$description": "Yellow (Cadmium Geel) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#412E00",
+          "$description": "Yellow (Cadmium Geel) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#100300",
+          "$description": "Yellow (Cadmium Geel) 900"
+        }
+      },
+      "black-raster-zwart": {
+        "50": {
+          "$type": "color",
+          "$value": "#F5F5F5",
+          "$description": "Black (Raster Zwart) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#C4C4C4",
+          "$description": "Black (Raster Zwart) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#959595",
+          "$description": "Black (Raster Zwart) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#686868",
+          "$description": "Black (Raster Zwart) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#3F3F3F",
+          "$description": "Black (Raster Zwart) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#1A1A1A",
+          "$description": "Black (Raster Zwart) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Black (Raster Zwart)",
+              "tradition": "De Stijl grid lines — the black bars that define spatial relationships in Mondrian's grids. Structure made visible.",
+              "source": "Theo van Doesburg: A New Expression of Life, Art, and Technology, J. Baljeu",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#141414",
+          "$description": "Black (Raster Zwart) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0F0F0F",
+          "$description": "Black (Raster Zwart) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#0A0A0A",
+          "$description": "Black (Raster Zwart) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#060606",
+          "$description": "Black (Raster Zwart) 900"
+        }
+      },
+      "white-doek-wit": {
+        "50": {
+          "$type": "color",
+          "$value": "#F5F5F4",
+          "$description": "White (Doek Wit) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#F5F5F5",
+          "$description": "White (Doek Wit) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#F6F6F5",
+          "$description": "White (Doek Wit) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#F6F6F5",
+          "$description": "White (Doek Wit) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#F7F7F5",
+          "$description": "White (Doek Wit) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#F7F7F5",
+          "$description": "White (Doek Wit) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "White (Doek Wit)",
+              "tradition": "Canvas ground — the neutral field that makes all relationships visible. Not empty but active.",
+              "source": "The New Art — The New Life: Collected Writings of Piet Mondrian",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#B2B2B0",
+          "$description": "White (Doek Wit) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#717170",
+          "$description": "White (Doek Wit) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#363635",
+          "$description": "White (Doek Wit) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#060605",
+          "$description": "White (Doek Wit) 900"
+        }
+      },
+      "neutral": {
+        "50": {
+          "$type": "color",
+          "$value": "#F4F9FF",
+          "$description": "Neutral 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#EAEFF6",
+          "$description": "Neutral 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#DADEE6",
+          "$description": "Neutral 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#C0C4CC",
+          "$description": "Neutral 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#9498A0",
+          "$description": "Neutral 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#6B6F76",
+          "$description": "Neutral 500"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#4A4D54",
+          "$description": "Neutral 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#303339",
+          "$description": "Neutral 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#181B20",
+          "$description": "Neutral 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#05070C",
+          "$description": "Neutral 900"
+        }
+      },
+      "accent": {
+        "50": {
+          "$type": "color",
+          "$value": "#FFEBF0",
+          "$description": "Accent 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#F7C0C9",
+          "$description": "Accent 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#DE96A3",
+          "$description": "Accent 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#C46D7F",
+          "$description": "Accent 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#A9435D",
+          "$description": "Accent 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#8C0D3C",
+          "$description": "Accent 500"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#6E002B",
+          "$description": "Accent 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#52001A",
+          "$description": "Accent 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#37000B",
+          "$description": "Accent 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#1D0002",
+          "$description": "Accent 900"
+        }
+      }
+    },
+    "typography": {
+      "family": {
+        "heading": {
+          "$type": "fontFamily",
+          "$value": "\"Inter\", \"Helvetica Neue\", \"Arial\", sans-serif",
+          "$description": "Heading font family"
+        },
+        "body": {
+          "$type": "fontFamily",
+          "$value": "\"Inter\", \"Helvetica Neue\", \"Arial\", sans-serif",
+          "$description": "Body font family"
+        },
+        "mono": {
+          "$type": "fontFamily",
+          "$value": "\"JetBrains Mono\", \"SF Mono\", monospace",
+          "$description": "Monospace font family"
+        }
+      },
+      "size": {
+        "xs": {
+          "$type": "dimension",
+          "$value": "0.75rem",
+          "$description": "Font size xs"
+        },
+        "sm": {
+          "$type": "dimension",
+          "$value": "0.875rem",
+          "$description": "Font size sm"
+        },
+        "base": {
+          "$type": "dimension",
+          "$value": "1rem",
+          "$description": "Font size base"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "1.125rem",
+          "$description": "Font size lg"
+        },
+        "xl": {
+          "$type": "dimension",
+          "$value": "1.25rem",
+          "$description": "Font size xl"
+        },
+        "2xl": {
+          "$type": "dimension",
+          "$value": "1.5rem",
+          "$description": "Font size 2xl"
+        },
+        "3xl": {
+          "$type": "dimension",
+          "$value": "1.875rem",
+          "$description": "Font size 3xl"
+        },
+        "4xl": {
+          "$type": "dimension",
+          "$value": "2.25rem",
+          "$description": "Font size 4xl"
+        }
+      },
+      "weight": {
+        "normal": {
+          "$type": "fontWeight",
+          "$value": "400",
+          "$description": "Font weight normal"
+        },
+        "medium": {
+          "$type": "fontWeight",
+          "$value": "500",
+          "$description": "Font weight medium"
+        },
+        "semibold": {
+          "$type": "fontWeight",
+          "$value": "600",
+          "$description": "Font weight semibold"
+        },
+        "bold": {
+          "$type": "fontWeight",
+          "$value": "700",
+          "$description": "Font weight bold"
+        }
+      },
+      "lineHeight": {
+        "tight": {
+          "$type": "number",
+          "$value": "1.25",
+          "$description": "Line height tight"
+        },
+        "normal": {
+          "$type": "number",
+          "$value": "1.5",
+          "$description": "Line height normal"
+        },
+        "relaxed": {
+          "$type": "number",
+          "$value": "1.75",
+          "$description": "Line height relaxed"
+        }
+      }
+    },
+    "spacing": {
+      "0": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Spacing 0 (0px)"
+      },
+      "1": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$description": "Spacing 1 (4px)"
+      },
+      "2": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Spacing 2 (8px)"
+      },
+      "3": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Spacing 3 (12px)"
+      },
+      "4": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Spacing 4 (16px)"
+      },
+      "5": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "Spacing 5 (20px)"
+      },
+      "6": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "Spacing 6 (24px)"
+      },
+      "8": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "Spacing 8 (32px)"
+      },
+      "10": {
+        "$type": "dimension",
+        "$value": "40px",
+        "$description": "Spacing 10 (40px)"
+      },
+      "12": {
+        "$type": "dimension",
+        "$value": "48px",
+        "$description": "Spacing 12 (48px)"
+      },
+      "16": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$description": "Spacing 16 (64px)"
+      },
+      "20": {
+        "$type": "dimension",
+        "$value": "80px",
+        "$description": "Spacing 20 (80px)"
+      },
+      "0.5": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "Spacing 0.5 (2px)"
+      },
+      "1.5": {
+        "$type": "dimension",
+        "$value": "6px",
+        "$description": "Spacing 1.5 (6px)"
+      }
+    },
+    "radius": {
+      "none": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Border radius none"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Border radius sm"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Border radius md"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Border radius lg"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "0px",
+        "$description": "Border radius xl"
+      },
+      "full": {
+        "$type": "dimension",
+        "$value": "9999px",
+        "$description": "Border radius full"
+      }
+    }
+  },
+  "semantic": {
+    "light": {
+      "background": {
+        "canvas": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.50}",
+          "$description": "Page background"
+        },
+        "surface": {
+          "$type": "color",
+          "$value": "#FFFFFF",
+          "$description": "Card/surface background"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.100}",
+          "$description": "Muted background"
+        }
+      },
+      "text": {
+        "primary": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Primary text"
+        },
+        "secondary": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.600}",
+          "$description": "Secondary text"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.500}",
+          "$description": "Muted/disabled text"
+        },
+        "inverse": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.50}",
+          "$description": "Text on dark backgrounds"
+        }
+      },
+      "interactive": {
+        "primary": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.500}",
+          "$description": "Primary interactive (buttons, links)"
+        },
+        "primary-hover": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.600}",
+          "$description": "Primary interactive hover"
+        },
+        "primary-active": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.700}",
+          "$description": "Primary interactive active"
+        }
+      },
+      "border": {
+        "default": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.200}",
+          "$description": "Default border"
+        },
+        "strong": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.400}",
+          "$description": "Strong border"
+        }
+      },
+      "status": {
+        "error": {
+          "$type": "color",
+          "$value": "#DC2626",
+          "$description": "Error — WCAG-compliant red"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "#16A34A",
+          "$description": "Success — WCAG-compliant green"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "#A16207",
+          "$description": "Warning — WCAG AA amber (4.5:1+ on white)"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.500}",
+          "$description": "Info status"
+        }
+      },
+      "focus": {
+        "ring": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.500}",
+          "$description": "Focus ring color"
+        }
+      },
+      "accessibility": {
+        "focus-visible": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.500}",
+          "$description": "Keyboard focus indicator"
+        }
+      }
+    },
+    "dark": {
+      "background": {
+        "canvas": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Page background — dark"
+        },
+        "surface": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.800}",
+          "$description": "Card/surface — dark"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.700}",
+          "$description": "Muted background — dark"
+        }
+      },
+      "text": {
+        "primary": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.50}",
+          "$description": "Primary text — dark"
+        },
+        "secondary": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.300}",
+          "$description": "Secondary text — dark"
+        },
+        "muted": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.500}",
+          "$description": "Muted text — dark"
+        },
+        "inverse": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Text on light backgrounds — dark"
+        }
+      },
+      "interactive": {
+        "primary": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.400}",
+          "$description": "Primary interactive — dark"
+        },
+        "primary-hover": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.300}",
+          "$description": "Primary hover — dark"
+        },
+        "primary-active": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.200}",
+          "$description": "Primary active — dark"
+        }
+      },
+      "border": {
+        "default": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.700}",
+          "$description": "Default border — dark"
+        },
+        "strong": {
+          "$type": "color",
+          "$value": "{primitive.color.neutral.500}",
+          "$description": "Strong border — dark"
+        }
+      },
+      "status": {
+        "error": {
+          "$type": "color",
+          "$value": "#EF4444",
+          "$description": "Error — WCAG-compliant red (dark)"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "#22C55E",
+          "$description": "Success — WCAG-compliant green (dark)"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "#EAB308",
+          "$description": "Warning — WCAG-compliant amber (dark)"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.400}",
+          "$description": "Info — dark"
+        }
+      },
+      "focus": {
+        "ring": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.400}",
+          "$description": "Focus ring — dark"
+        }
+      },
+      "accessibility": {
+        "focus-visible": {
+          "$type": "color",
+          "$value": "{primitive.color.blue-mondriaan-blauw.400}",
+          "$description": "Keyboard focus — dark"
+        }
+      }
+    }
+  }
+}