feat(theme): add brown and orange background gradients

packages/ui/src/theme/contract.ts

@@ -20,6 +20,16 @@ export const runtimeThemeContract = {
   "color.bg.brand.stop.42": { property: "--hm-sem-brand-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-42"], type: "color" },
   "color.bg.brand.stop.78": { property: "--hm-sem-brand-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-78"], type: "color" },
   "color.bg.brand.stop.100": { property: "--hm-sem-brand-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-100"], type: "color" },
+  "color.bg.brown.stop.0": { property: "--hm-sem-brown-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-0"], type: "color" },
+  "color.bg.brown.stop.12": { property: "--hm-sem-brown-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-12"], type: "color" },
+  "color.bg.brown.stop.42": { property: "--hm-sem-brown-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-42"], type: "color" },
+  "color.bg.brown.stop.78": { property: "--hm-sem-brown-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-78"], type: "color" },
+  "color.bg.brown.stop.100": { property: "--hm-sem-brown-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-100"], type: "color" },
+  "color.bg.orange.stop.0": { property: "--hm-sem-orange-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-0"], type: "color" },
+  "color.bg.orange.stop.12": { property: "--hm-sem-orange-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-12"], type: "color" },
+  "color.bg.orange.stop.42": { property: "--hm-sem-orange-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-42"], type: "color" },
+  "color.bg.orange.stop.78": { property: "--hm-sem-orange-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-78"], type: "color" },
+  "color.bg.orange.stop.100": { property: "--hm-sem-orange-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-100"], type: "color" },
   "surface.action.primary.stop.0": { property: "--hm-sem-action-surface-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-0"], type: "color" },
   "surface.action.primary.stop.30": { property: "--hm-sem-action-surface-stop-30", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-30"], type: "color" },
   "surface.action.primary.stop.65": { property: "--hm-sem-action-surface-stop-65", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-65"], type: "color" },
@@ -115,5 +125,19 @@ export const runtimeGradientGroups = [
     "surface.action.primary.border.stop.0",
     "surface.action.primary.border.stop.50",
     "surface.action.primary.border.stop.100"
+  ],
+  [
+    "color.bg.brown.stop.0",
+    "color.bg.brown.stop.12",
+    "color.bg.brown.stop.42",
+    "color.bg.brown.stop.78",
+    "color.bg.brown.stop.100"
+  ],
+  [
+    "color.bg.orange.stop.0",
+    "color.bg.orange.stop.12",
+    "color.bg.orange.stop.42",
+    "color.bg.orange.stop.78",
+    "color.bg.orange.stop.100"
   ]
 ] as const

packages/ui/src/theme/default-values.generated.ts

@@ -18,6 +18,16 @@ export const runtimeThemeDefaults = {
   "--hm-sem-brand-bg-stop-42": "#123328",
   "--hm-sem-brand-bg-stop-78": "#266651",
   "--hm-sem-brand-bg-stop-100": "#205241",
+  "--hm-sem-brown-bg-stop-0": "#352d1d",
+  "--hm-sem-brown-bg-stop-12": "#2f281c",
+  "--hm-sem-brown-bg-stop-42": "#3e3523",
+  "--hm-sem-brown-bg-stop-78": "#897445",
+  "--hm-sem-brown-bg-stop-100": "#604f32",
+  "--hm-sem-orange-bg-stop-0": "#bc4c00",
+  "--hm-sem-orange-bg-stop-12": "#883700",
+  "--hm-sem-orange-bg-stop-42": "#cc5200",
+  "--hm-sem-orange-bg-stop-78": "#f87725",
+  "--hm-sem-orange-bg-stop-100": "#eb5f00",
   "--hm-sem-action-surface-stop-0": "#1f8265",
   "--hm-sem-action-surface-stop-30": "#165c47",
   "--hm-sem-action-surface-stop-65": "#114838",

packages/ui/src/theme/default.css

@@ -62,6 +62,26 @@
     var(--hm-sem-brand-bg-stop-42) 42%, var(--hm-sem-brand-bg-stop-78) 78%,
     var(--hm-sem-brand-bg-stop-100) 100%);
 
+  /* Independent common backgrounds; Button and Dashboard mappings stay unchanged. */
+  --hm-sem-brown-bg-stop-0: var(--hm-sem-palette-brown-dark-1);
+  --hm-sem-brown-bg-stop-12: var(--hm-sem-palette-brown-dark-2);
+  --hm-sem-brown-bg-stop-42: var(--hm-sem-palette-brown-default);
+  --hm-sem-brown-bg-stop-78: var(--hm-sem-palette-brown-light-2);
+  --hm-sem-brown-bg-stop-100: var(--hm-sem-palette-brown-light-1);
+  --hm-sem-bg-brown: linear-gradient(to bottom,
+    var(--hm-sem-brown-bg-stop-0) 0%, var(--hm-sem-brown-bg-stop-12) 12%,
+    var(--hm-sem-brown-bg-stop-42) 42%, var(--hm-sem-brown-bg-stop-78) 78%,
+    var(--hm-sem-brown-bg-stop-100) 100%);
+  --hm-sem-orange-bg-stop-0: var(--hm-sem-palette-orange-dark-1);
+  --hm-sem-orange-bg-stop-12: var(--hm-sem-palette-orange-dark-2);
+  --hm-sem-orange-bg-stop-42: var(--hm-sem-palette-orange-default);
+  --hm-sem-orange-bg-stop-78: var(--hm-sem-palette-orange-light-2);
+  --hm-sem-orange-bg-stop-100: var(--hm-sem-palette-orange-light-1);
+  --hm-sem-bg-orange: linear-gradient(to bottom,
+    var(--hm-sem-orange-bg-stop-0) 0%, var(--hm-sem-orange-bg-stop-12) 12%,
+    var(--hm-sem-orange-bg-stop-42) 42%, var(--hm-sem-orange-bg-stop-78) 78%,
+    var(--hm-sem-orange-bg-stop-100) 100%);
+
   --hm-sem-action-surface-stop-0: var(--hm-sem-palette-green-tone-1);
   --hm-sem-action-surface-stop-30: var(--hm-sem-palette-green-tone-2);
   --hm-sem-action-surface-stop-65: var(--hm-sem-palette-green-tone-3);