Use new UI (#8983)

* fixup build

* swap frontends

web/themes/theme-blue.css

@@ -0,0 +1,46 @@
+@layer base {
+  .theme-blue.light {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .theme-blue.dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 217.2 32.6% 17.5%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 38.6% 29.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}

web/themes/theme-default.css

@@ -0,0 +1,121 @@
+@layer base {
+  :root {
+    --background-hsl: hsl(0 0% 100%);
+    --background: 0 0% 100%;
+
+    --foreground: hsl(222.2 84% 4.9%);
+    --foreground: 222.2 84% 4.9%;
+
+    --card: hsl(0 0% 100%);
+    --card: 0 0% 100%;
+
+    --card-foreground: hsl(222.2 84% 4.9%);
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: hsl(0 0% 100%);
+    --popover: 0 0% 100%;
+
+    --popover-foreground: hsl(222.2 84% 4.9%);
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: hsl(222.2 47.4% 11.2%);
+    --primary: 222.2 47.4% 11.2%;
+
+    --primary-foreground: hsl(210 40% 98%);
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: hsl(210 40% 96.1%);
+    --secondary: 210 40% 96.1%;
+
+    --secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: hsl(210 40% 96.1%);
+    --muted: 210 40% 96.1%;
+
+    --muted-foreground: hsl(215.4 16.3% 46.9%);
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: hsl(210 40% 96.1%);
+    --accent: 210 40% 96.1%;
+
+    --accent-foreground: hsl(222.2 47.4% 11.2%);
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive: 0 84.2% 60.2%;
+
+    --destructive-foreground: hsl(210 40% 98%);
+    --destructive-foreground: 210 40% 98%;
+
+    --border: hsl(214.3 31.8% 91.4%);
+    --border: 214.3 31.8% 91.4%;
+
+    --input: hsl(214.3 31.8% 91.4%);
+    --input: 214.3 31.8% 91.4%;
+
+    --ring: hsl(222.2 84% 4.9%);
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background-hsl: hsl(222.2 84% 4.9%);
+    --background: 222.2 84% 4.9%;
+
+    --foreground: hsl(210 40% 98%);
+    --foreground: 210 40% 98%;
+
+    --card: hsl(222.2 84% 4.9%);
+    --card: 222.2 84% 4.9%;
+
+    --card-foreground: hsl(210 40% 98%);
+    --card-foreground: 210 40% 98%;
+
+    --popover: hsl(222.2 84% 4.9%);
+    --popover: 222.2 84% 4.9%;
+
+    --popover-foreground: hsl(210 40% 98%);
+    --popover-foreground: 210 40% 98%;
+
+    --primary: hsl(210 40% 98%);
+    --primary: 210 40% 98%;
+
+    --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary: 217.2 32.6% 17.5%;
+
+    --secondary-foreground: hsl(210 40% 98%);
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted: 217.2 32.6% 17.5%;
+
+    --muted-foreground: hsl(215 20.2% 65.1%);
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: hsl(217.2 32.6% 17.5%);
+    --accent: 217.2 32.6% 17.5%;
+
+    --accent-foreground: hsl(210 40% 98%);
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive: 0 62.8% 30.6%;
+
+    --destructive-foreground: hsl(210 40% 98%);
+    --destructive-foreground: 210 40% 98%;
+
+    --border: hsl(217.2 32.6% 17.5%);
+    --border: 217.2 32.6% 17.5%;
+
+    --input: hsl(217.2 32.6% 17.5%);
+    --input: 217.2 32.6% 17.5%;
+
+    --ring: hsl(212.7 26.8% 83.9%);
+    --ring: 212.7 26.8% 83.9%;
+  }
+}

web/themes/theme-gold.css

@@ -0,0 +1,61 @@
+.theme-gold.light {
+  --background: 38, 77%, 88%;
+  --foreground: 16, 43%, 34%;
+
+  --muted: 28, 46%, 56%;
+  --muted-foreground: 16, 43%, 34%;
+
+  --popover: 38, 77%, 88%;
+  --popover-foreground: 16, 43%, 34%;
+
+  --border: 28, 46%, 56%;
+  --input: 28, 46%, 56%;
+
+  --card: 38, 77%, 88%;
+  --card-foreground: 16, 43%, 34%;
+
+  --primary: 28, 46%, 56%;
+  --primary-foreground: 60, 70%, 90%;
+
+  --secondary: 39, 100%, 73%;
+  --secondary-foreground: 16, 43%, 34%;
+
+  --accent: 39, 100%, 73%;
+  --accent-foreground: 16, 43%, 34%;
+
+  --destructive: 16, 43%, 34%;
+  --destructive-foreground: 38, 77%, 88%;
+
+  --ring: 28, 46%, 56%;
+}
+
+.theme-gold.dark {
+  --background: 16, 43%, 34%;
+  --foreground: 38, 77%, 88%;
+
+  --muted: 28, 46%, 56%;
+  --muted-foreground: 38, 77%, 88%;
+
+  --popover: 16, 43%, 34%;
+  --popover-foreground: 38, 77%, 88%;
+
+  --border: 28, 46%, 56%;
+  --input: 28, 46%, 56%;
+
+  --card: 16, 43%, 34%;
+  --card-foreground: 38, 77%, 88%;
+
+  --primary: 28, 46%, 56%;
+  --primary-foreground: 60, 70%, 90%;
+
+  --secondary: 39, 100%, 73%;
+  --secondary-foreground: 16, 43%, 34%;
+
+  --accent: 39, 100%, 52%;
+  --accent-foreground: 16, 43%, 34%;
+
+  --destructive: 38, 77%, 88%;
+  --destructive-foreground: 16, 43%, 34%;
+
+  --ring: 28, 46%, 56%;
+}

web/themes/theme-green.css

@@ -0,0 +1,46 @@
+@layer base {
+  .theme-green.light {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
+  }
+
+  .theme-green.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+  }
+}

web/themes/theme-nature.css

@@ -0,0 +1,61 @@
+.theme-nature.light {
+  --background: 58, 65%, 83%;
+  --foreground: 187, 33%, 43%;
+
+  --muted: 70, 20%, 68%;
+  --muted-foreground: 187, 33%, 43%;
+
+  --popover: 58, 65%, 83%;
+  --popover-foreground: 187, 33%, 43%;
+
+  --border: 93, 28%, 56%;
+  --input: 93, 28%, 56%;
+
+  --card: 58, 65%, 83%;
+  --card-foreground: 187, 33%, 43%;
+
+  --primary: 93, 28%, 56%;
+  --primary-foreground: 58, 65%, 83%;
+
+  --secondary: 70, 20%, 68%;
+  --secondary-foreground: 187, 33%, 43%;
+
+  --accent: 70, 20%, 68%;
+  --accent-foreground: 187, 33%, 43%;
+
+  --destructive: 187, 33%, 43%;
+  --destructive-foreground: 58, 65%, 83%;
+
+  --ring: 93, 28%, 56%;
+}
+
+.theme-nature.dark {
+  --background: 187, 33%, 43%;
+  --foreground: 58, 65%, 83%;
+
+  --muted: 70, 20%, 68%;
+  --muted-foreground: 58, 65%, 83%;
+
+  --popover: 187, 33%, 43%;
+  --popover-foreground: 58, 65%, 83%;
+
+  --border: 93, 28%, 56%;
+  --input: 93, 28%, 56%;
+
+  --card: 187, 33%, 43%;
+  --card-foreground: 58, 65%, 83%;
+
+  --primary: 93, 28%, 56%;
+  --primary-foreground: 187, 33%, 43%;
+
+  --secondary: 70, 20%, 68%;
+  --secondary-foreground: 58, 65%, 83%;
+
+  --accent: 70, 20%, 68%;
+  --accent-foreground: 58, 65%, 83%;
+
+  --destructive: 58, 65%, 83%;
+  --destructive-foreground: 187, 33%, 43%;
+
+  --ring: 93, 28%, 56%;
+}

web/themes/theme-netflix.css

@@ -0,0 +1,61 @@
+.theme-netflix.light {
+  --background: 0, 0%, 100%;
+  --foreground: 0, 0%, 0%;
+
+  --muted: 0, 0%, 68%;
+  --muted-foreground: 0, 0%, 0%;
+
+  --popover: 0, 0%, 95%;
+  --popover-foreground: 0, 0%, 0%;
+
+  --border: 0, 68%, 39%;
+  --input: 0, 68%, 39%;
+
+  --card: 0, 0%, 95%;
+  --card-foreground: 0, 0%, 0%;
+
+  --primary: 0, 100%, 44%;
+  --primary-foreground: 0, 0%, 100%;
+
+  --secondary: 0, 0%, 0%;
+  --secondary-foreground: 0, 0%, 100%;
+
+  --accent: 0, 100%, 50%;
+  --accent-foreground: 0, 0%, 0%;
+
+  --destructive: 0, 68%, 39%;
+  --destructive-foreground: 0, 0%, 100%;
+
+  --ring: 0, 100%, 44%;
+}
+
+.theme-netflix.dark {
+  --background: 0, 0%, 0%;
+  --foreground: 0, 0%, 100%;
+
+  --muted: 0, 0%, 50%;
+  --muted-foreground: 0, 0%, 100%;
+
+  --popover: 0, 0%, 5%;
+  --popover-foreground: 0, 0%, 100%;
+
+  --border: 0, 68%, 39%;
+  --input: 0, 68%, 39%;
+
+  --card: 0, 0%, 5%;
+  --card-foreground: 0, 0%, 100%;
+
+  --primary: 0, 100%, 44%;
+  --primary-foreground: 0, 0%, 0%;
+
+  --secondary: 0, 0%, 100%;
+  --secondary-foreground: 0, 0%, 0%;
+
+  --accent: 0, 100%, 50%;
+  --accent-foreground: 0, 0%, 100%;
+
+  --destructive: 0, 68%, 39%;
+  --destructive-foreground: 0, 0%, 100%;
+
+  --ring: 0, 100%, 44%;
+}

web/themes/theme-nord.css

@@ -0,0 +1,61 @@
+.theme-nord.light {
+  --background: 220, 16%, 96%;
+  --foreground: 222, 20%, 16%;
+
+  --muted: 215, 14%, 80%;
+  --muted-foreground: 222, 20%, 16%;
+
+  --popover: 220, 16%, 96%;
+  --popover-foreground: 222, 20%, 16%;
+
+  --border: 222, 20%, 70%;
+  --input: 222, 20%, 70%;
+
+  --card: 220, 16%, 96%;
+  --card-foreground: 222, 20%, 16%;
+
+  --primary: 222, 20%, 70%;
+  --primary-foreground: 220, 16%, 96%;
+
+  --secondary: 215, 14%, 80%;
+  --secondary-foreground: 222, 20%, 16%;
+
+  --accent: 215, 14%, 80%;
+  --accent-foreground: 222, 20%, 16%;
+
+  --destructive: 0, 80%, 50%;
+  --destructive-foreground: 222, 20%, 16%;
+
+  --ring: 222, 20%, 70%;
+}
+
+.theme-nord.dark {
+  --background: 220, 16%, 16%;
+  --foreground: 222, 20%, 96%;
+
+  --muted: 215, 14%, 25%;
+  --muted-foreground: 222, 20%, 96%;
+
+  --popover: 220, 16%, 16%;
+  --popover-foreground: 222, 20%, 96%;
+
+  --border: 222, 20%, 40%;
+  --input: 222, 20%, 40%;
+
+  --card: 220, 16%, 16%;
+  --card-foreground: 222, 20%, 96%;
+
+  --primary: 222, 20%, 65%;
+  --primary-foreground: 220, 16%, 16%;
+
+  --secondary: 215, 14%, 25%;
+  --secondary-foreground: 222, 20%, 96%;
+
+  --accent: 215, 14%, 25%;
+  --accent-foreground: 222, 20%, 96%;
+
+  --destructive: 0, 80%, 50%;
+  --destructive-foreground: 222, 20%, 96%;
+
+  --ring: 222, 20%, 40%;
+}

web/themes/theme-orange.css

@@ -0,0 +1,46 @@
+@layer base {
+  .theme-orange.light {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+  }
+
+  .theme-orange.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+  }
+}

web/themes/theme-red.css

@@ -0,0 +1,46 @@
+@layer base {
+  .theme-red.light {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 346.8 77.2% 49.8%;
+    --radius: 0.5rem;
+  }
+
+  .theme-red.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+}