@syncupsuite/themes 0.1.0

package/src/swiss-international/tokens.json

@@ -0,0 +1,900 @@
+{
+  "$name": "swiss-international-style",
+  "$description": "Swiss International Typographic Style — precision, clarity, grid-based order from the Basel and Zurich schools",
+  "$extensions": {
+    "syncupsuite.foundation": {
+      "story": "Born from the Basel and Zurich schools of the 1950s, Swiss International Style prioritized objective clarity over decorative expression. Designers like Josef Müller-Brockmann and Armin Hofmann established principles of grid-based composition, asymmetric layouts, and sans-serif typography that became the global standard for corporate and informational design.",
+      "philosophy": "Sachlichkeit (Objectivity) — form follows function with mathematical precision",
+      "era": "1950s–present",
+      "harmonyMode": "monochromatic",
+      "radiusTendency": "none",
+      "typographyCategory": "neo-grotesque"
+    }
+  },
+  "primitive": {
+    "color": {
+      "schwarz": {
+        "50": {
+          "$type": "color",
+          "$value": "#F2F2F2",
+          "$description": "Schwarz 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E6E6E6",
+          "$description": "Schwarz 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#CCCCCC",
+          "$description": "Schwarz 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#B3B3B3",
+          "$description": "Schwarz 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#999999",
+          "$description": "Schwarz 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#121212",
+          "$description": "Schwarz 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Schwarz",
+              "tradition": "Pure typographic black. The foundation of Swiss poster design and Helvetica specimens.",
+              "source": "Swiss Graphic Design: The Origins and Growth of an International Style, R. Hollis",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#262626",
+          "$description": "Schwarz 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#1A1A1A",
+          "$description": "Schwarz 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#121212",
+          "$description": "Schwarz 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#0A0A0A",
+          "$description": "Schwarz 900"
+        }
+      },
+      "weiss": {
+        "50": {
+          "$type": "color",
+          "$value": "#F2F2F2",
+          "$description": "Weiss 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E6E6E6",
+          "$description": "Weiss 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#CCCCCC",
+          "$description": "Weiss 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#B3B3B3",
+          "$description": "Weiss 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#999999",
+          "$description": "Weiss 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#FAFAFA",
+          "$description": "Weiss 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Weiss",
+              "tradition": "Paper white. The generous whitespace that gives Swiss design its breathing room.",
+              "source": "Grid Systems in Graphic Design, Josef Müller-Brockmann",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#E6E6E6",
+          "$description": "Weiss 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#CCCCCC",
+          "$description": "Weiss 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#B3B3B3",
+          "$description": "Weiss 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#999999",
+          "$description": "Weiss 900"
+        }
+      },
+      "rot-signal-red": {
+        "50": {
+          "$type": "color",
+          "$value": "#F5EFEF",
+          "$description": "Rot (Signal Red) 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#ECE0DF",
+          "$description": "Rot (Signal Red) 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#F5A5A3",
+          "$description": "Rot (Signal Red) 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#F07775",
+          "$description": "Rot (Signal Red) 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#EB4A47",
+          "$description": "Rot (Signal Red) 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#E83430",
+          "$description": "Rot (Signal Red) 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Rot (Signal Red)",
+              "tradition": "The accent of Swiss rail (SBB/CFF), national flag, and Müller-Brockmann concert posters. Pure signal with no ambiguity.",
+              "source": "Swiss Style: The Graphic Design of Swiss International Style",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#D81B18",
+          "$description": "Rot (Signal Red) 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#AA1513",
+          "$description": "Rot (Signal Red) 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#7C100E",
+          "$description": "Rot (Signal Red) 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#4E0A09",
+          "$description": "Rot (Signal Red) 900"
+        }
+      },
+      "mittelgrau": {
+        "50": {
+          "$type": "color",
+          "$value": "#F2F2F2",
+          "$description": "Mittelgrau 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E6E6E6",
+          "$description": "Mittelgrau 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#CCCCCC",
+          "$description": "Mittelgrau 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#B3B3B3",
+          "$description": "Mittelgrau 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#999999",
+          "$description": "Mittelgrau 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#6E6E6E",
+          "$description": "Mittelgrau 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Mittelgrau",
+              "tradition": "Mid-grey for secondary information hierarchy. Swiss design uses grey to create clear visual levels.",
+              "source": "Typographic Design: Form and Communication, R. Carter",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#595959",
+          "$description": "Mittelgrau 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#404040",
+          "$description": "Mittelgrau 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#262626",
+          "$description": "Mittelgrau 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#0D0D0D",
+          "$description": "Mittelgrau 900"
+        }
+      },
+      "hellgrau": {
+        "50": {
+          "$type": "color",
+          "$value": "#F2F2F2",
+          "$description": "Hellgrau 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E6E6E6",
+          "$description": "Hellgrau 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#CCCCCC",
+          "$description": "Hellgrau 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#B3B3B3",
+          "$description": "Hellgrau 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#999999",
+          "$description": "Hellgrau 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#D4D4D4",
+          "$description": "Hellgrau 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Hellgrau",
+              "tradition": "Light grey for borders, dividers, and subtle structural elements in grid systems.",
+              "source": "Swiss Graphic Design",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#BFBFBF",
+          "$description": "Hellgrau 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#A6A6A6",
+          "$description": "Hellgrau 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#8C8C8C",
+          "$description": "Hellgrau 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#737373",
+          "$description": "Hellgrau 900"
+        }
+      },
+      "dunkelblau": {
+        "50": {
+          "$type": "color",
+          "$value": "#F0F2F4",
+          "$description": "Dunkelblau 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E1E5EA",
+          "$description": "Dunkelblau 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#AFCBE9",
+          "$description": "Dunkelblau 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#88B1DD",
+          "$description": "Dunkelblau 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#6097D2",
+          "$description": "Dunkelblau 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#1A3A5B",
+          "$description": "Dunkelblau 500",
+          "$extensions": {
+            "syncupsuite.provenance": {
+              "name": "Dunkelblau",
+              "tradition": "Swiss corporate blue. Used in banking, insurance, and institutional communications for trust and authority.",
+              "source": "Corporate Design, Wally Olins",
+              "isSeed": true
+            }
+          }
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#11263C",
+          "$description": "Dunkelblau 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#111922",
+          "$description": "Dunkelblau 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#0C1218",
+          "$description": "Dunkelblau 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#070A0E",
+          "$description": "Dunkelblau 900"
+        }
+      },
+      "neutral": {
+        "50": {
+          "$type": "color",
+          "$value": "#F8F7F7",
+          "$description": "Neutral 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#F0EFEF",
+          "$description": "Neutral 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#E1DFDF",
+          "$description": "Neutral 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#C9C5C5",
+          "$description": "Neutral 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#A19B9B",
+          "$description": "Neutral 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#797272",
+          "$description": "Neutral 500"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#5F5959",
+          "$description": "Neutral 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#444040",
+          "$description": "Neutral 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#2A2828",
+          "$description": "Neutral 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#151414",
+          "$description": "Neutral 900"
+        }
+      },
+      "accent": {
+        "50": {
+          "$type": "color",
+          "$value": "#F3F2F2",
+          "$description": "Accent 50"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#E7E4E4",
+          "$description": "Accent 100"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#D4C4C4",
+          "$description": "Accent 200"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#BEA7A7",
+          "$description": "Accent 300"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#A88A8A",
+          "$description": "Accent 400"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#4F3B3B",
+          "$description": "Accent 500"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#382929",
+          "$description": "Accent 600"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#1C1717",
+          "$description": "Accent 700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#131010",
+          "$description": "Accent 800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#0B0909",
+          "$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.schwarz.500}",
+          "$description": "Primary interactive (buttons, links)"
+        },
+        "primary-hover": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.600}",
+          "$description": "Primary interactive hover"
+        },
+        "primary-active": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.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": "#CA8A04",
+          "$description": "Warning — WCAG-compliant amber"
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.500}",
+          "$description": "Info status"
+        }
+      },
+      "focus": {
+        "ring": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.500}",
+          "$description": "Focus ring color"
+        }
+      },
+      "accessibility": {
+        "focus-visible": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.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.schwarz.400}",
+          "$description": "Primary interactive — dark"
+        },
+        "primary-hover": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.300}",
+          "$description": "Primary hover — dark"
+        },
+        "primary-active": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.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.schwarz.400}",
+          "$description": "Info — dark"
+        }
+      },
+      "focus": {
+        "ring": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.400}",
+          "$description": "Focus ring — dark"
+        }
+      },
+      "accessibility": {
+        "focus-visible": {
+          "$type": "color",
+          "$value": "{primitive.color.schwarz.400}",
+          "$description": "Keyboard focus — dark"
+        }
+      }
+    }
+  }
+}