Starting to think about theming again

src/cg/02-design-tokens.cg

@@ -1,38 +0,0 @@
-colors = {
-  primary = "#0066cc",
-  primaryDark = "#0052a3",
-  danger = "#dc3545",
-  success = "#28a745",
-  bg = "#ffffff",
-  bgGray = "#f8f9fa",
-  text = "#212529",
-  textLight = "#6c757d",
-  border = "#dee2e6"
-};
-
-spacing = {
-  xs = 4,
-  sm = 8,
-  md = 16,
-  lg = 32,
-  xl = 64
-};
-
-primaryStyle = {
-  bg = colors.primary,
-  fg = colors.bg,
-  px = spacing.md,
-  py = spacing.sm
-};
-
-dangerStyle = {
-  bg = colors.danger,
-  fg = colors.bg,
-  px = spacing.md,
-  py = spacing.sm
-};
-
-theme = {
-  colors = colors,
-  spacing = spacing
-};

src/cg/theme.cg

@@ -0,0 +1,46 @@
+@theme
+
+# Later: Color = Hex String | RGB Int Int Int | RGBA Int Int Int Float;
+
+Theme = {
+  bg : {
+    primary : String,
+    secondary : String,
+    tertiary : String,
+    hover : String,
+    active : String,
+  },
+  fg : {
+    primary : String,
+    secondary : String,
+    tertiary : String,
+    link : String,
+  },
+  accent : String,
+  success : String,
+  warning : String,
+  danger : String,
+  info : String,
+  border : { default : String, muted : String, strong : String },
+  space : { xs : Int, sm : Int, md : Int, lg : Int, xl : Int, xxl : Int },
+  text : { lineH : Int, rowH : Int, headerH : Int },
+  radius : { sm : Int, md : Int, lg : Int },
+};
+
+dark : Theme = {
+  bg = { primary = "#0d1117", secondary = "#161b22", tertiary = "#21262d", hover = "#30363d", active = "#388bfd26"},
+  fg = { primary = "#e6edf3", secondary = "#8b949e", tertiary = "#6e7681", link = "#58a6ff" },
+  accent = "#58a6ff",
+  success = "#3fb950",
+  warning = "#d29922",
+  danger = "#f85149",
+  info = "#58a6ff",
+  border = { default = "30363d", muted = "#21262d", strong = "#8b949e" },
+  space = { xs = 4, sm = 8, md = 12, lg = 16, xl = 24, xxl = 32 },
+  text = { lineH = 20, rowH = 28, headerH = 36 },
+  radius = { sm = 3, md = 6, lg = 12 },
+};
+
+theme = dark;
+
+@