Introduce surface color variable for component backgrounds

Author: lazaronixon

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## [Unreleased]
+- Introduce surface color for component backgrounds
 
 ## 2.0.1 - 2025-08-05
 - Refactor notice flash to use tag.div in application.html.erb

app/assets/stylesheets/css-zero/utilities.css

@@ -89,6 +89,7 @@
 * Background
 *****************************************************************/
 .bg-main { background-color: var(--color-bg); }
+.bg-surface { background-color: var(--color-surface); }
 .bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
 .bg-shade { background-color: var(--color-border-light); }

lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css

@@ -1,5 +1,5 @@
 .alert {
-  background-color: var(--alert-background, var(--color-bg));
+  background-color: var(--alert-background, var(--color-surface));
   border-radius: var(--rounded-lg);
   border: 1px solid var(--alert-border-color, var(--color-border));
   color: var(--alert-color, var(--color-text));

lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -1,6 +1,6 @@
 .btn {
   align-items: center;
-  background-color: var(--btn-background, var(--color-bg));
+  background-color: var(--btn-background, var(--color-surface));
   block-size: var(--btn-block-size, auto);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
@@ -45,6 +45,7 @@
 }
 
 .btn--borderless {
+  --btn-background: transparent;
   --btn-border-color: transparent;
   --btn-box-shadow: none;
 }

lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css

@@ -1,5 +1,5 @@
 .card {
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   border-radius: var(--rounded-xl);
   border-width: var(--border);
   box-shadow: var(--shadow-sm);

lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css

@@ -2,7 +2,7 @@
 
 .ts-control {
   align-items: center;
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--rounded-md);
   min-block-size: var(--size-9);
@@ -18,7 +18,7 @@
 }
 
 .ts-dropdown {
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
@@ -95,7 +95,7 @@
 }
 
 .ts-wrapper.single .ts-control {
-  background-color: var(--color-bg) !important;
+  background-color: var(--color-surface) !important;
   background-image: url("chevron-down-zinc-500.svg") !important;
   background-position: center right var(--size-2) !important;
   background-repeat: no-repeat !important;

lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css

@@ -1,4 +1,5 @@
 .command {
+  background-color: var(--color-surface);
   border-width: var(--border);
   border-radius: var(--rounded-lg);
   box-shadow: var(--shadow-xs);

lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css

@@ -5,7 +5,7 @@
   --container-size: 220px;
   --day-size: var(--size-8);
 
-  background: var(--color-bg);
+  background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);

lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -1,6 +1,6 @@
 .input {
   appearance: none;
-  background-color: var(--input-background, var(--color-bg));
+  background-color: var(--input-background, var(--color-surface));
   block-size: var(--input-block-size, auto);
   border: 1px solid var(--input-border-color, var(--color-border));
   border-radius: var(--input-radius, var(--rounded-md));

lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css

@@ -1,4 +1,5 @@
 .menu {
+  background-color: var(--color-surface);
   display: flex;
   flex-direction: column;
   padding: var(--size-1);