fix: prepare for inheriot colors & use alt in fields

Author: Sebastian Thulin

component-design-tokens.json

@@ -554,6 +554,7 @@
       "color--danger",
       "color--success",
       "color--surface",
+      "color--surface-alt",
       "color--surface-border",
       "shadow-color",
       "shadow-amount",

source/components/field/component.json

@@ -10,6 +10,7 @@
 		"color--danger",
 		"color--success",
 		"color--surface",
+		"color--surface-alt",
 		"color--surface-border",
 		"shadow-color",
 		"shadow-amount",

source/components/field/style.scss

@@ -2,20 +2,25 @@
 @use "../../sass/mixin/focus";
 @use "../../sass/mixin/tokens";
 
+/* Inheritance properties */
+@property --inherit-color-background {
+    syntax: "*";
+    inherits: false;
+}
+
 /* Component name */
 $_: "c-field";
 
 /* Design tokens */
-@include tokens.create($_, getComponentTokens($_), (
-    "base": "var(--base)",
-    "border": tokens.use($_, "border-width", 1) solid tokens.get($_, "color--surface-border"),
-    "background-color": tokens.get($_, "color--surface"),
-    "height": "calc(var(--base) * 6)",
-    "shadow": tokens.use($_, "shadow", 1),
-    "shadow-hover": tokens.use($_, "shadow", 1.5)
-));
+@include tokens.create($_, getComponentTokens($_), ("base": "var(--base)",
+        "border": tokens.use($_, "border-width", 1) solid tokens.get($_, "color--surface-border"),
+        "background-color": tokens.get($_, "color--surface-alt"),
+        "contrast-color": tokens.get($_, "color--surface-contrast"),
+        "height": "calc(var(--base) * 6)",
+        "shadow": tokens.use($_, "shadow", 1),
+        "shadow-hover": tokens.use($_, "shadow", 1.5)));
 
-$fields: "input, input[type="color"], input[type="text"], input[type="search"], input[type="tel"], input[type="time"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="week"], input[type="month"], input[type="number"], input[type="password"], input[type="email"], [data-js-select-action-overlay]";
+$fields: "input, input[type=" color"], input[type=" text"], input[type=" search"], input[type=" tel"], input[type=" time"], input[type=" date"], input[type=" datetime-local"], input[type=" url"], input[type=" week"], input[type=" month"], input[type=" number"], input[type=" password"], input[type=" email"], [data-js-select-action-overlay]";
 
 /* Component */
 .#{$_} {
@@ -30,7 +35,7 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
     }
 
     .#{$_}__label {
-        color: tokens.get($_, "color--surface-contrast");
+        color: tokens.get($_, "contrast-color");
         font-size: 0.75rem;
         font-weight: 700;
         text-transform: uppercase;
@@ -40,14 +45,14 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
 
     .#{$_}__description {
         font-size: 0.75rem;
-        color: tokens.get($_, "color--surface-contrast");
+        color: tokens.get($_, "contrast-color");
         margin-top: 0;
     }
 
     .#{$_}__helper {
         font-family: var(--font-family-base);
         font-size: var(--font-size-caption, 0.875rem);
-        color: tokens.get($_, "color--surface-contrast");
+        color: tokens.get($_, "contrast-color");
         margin-top: tokens.use($_, "space", 0.5);
         margin-left: tokens.use($_, "space", 0.25);
     }
@@ -62,7 +67,7 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
         padding: tokens.use($_, "space", 2);
         outline: 0;
         margin: 0;
-        color: tokens.get($_, "color--surface-contrast");
+        color: tokens.get($_, "contrast-color");
     }
 
     .#{$_}__inner {
@@ -76,8 +81,8 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
         font-size: 0.95rem;
         line-height: calc(var(--base) * 2);
         border: tokens.get($_, "border");
-        background: tokens.get($_, "background-color");
-        color: tokens.get($_, "color--surface-contrast");
+        background: var(--inherit-color-background, tokens.get($_, "background-color"));
+        color: tokens.get($_, "contrast-color");
         border-radius: tokens.use($_, "border-radius");
         corner-shape: tokens.get($_, "corner-shape");
 
@@ -141,11 +146,9 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
                 height: 100%;
                 width: calc(#{tokens.get($_, "base")} * 5);
                 border-left: tokens.use($_, "border-width", 1) solid tokens.get($_, "color--surface-border");
-                background-image: linear-gradient(
-                    to bottom,
-                    color-mix(in srgb, tokens.get($_, "color--surface-border") 14%, tokens.get($_, "background-color")),
-                    color-mix(in srgb, tokens.get($_, "color--surface-border") 8%, tokens.get($_, "background-color"))
-                );
+                background-image: linear-gradient(to bottom,
+                        color-mix(in srgb, tokens.get($_, "color--surface-border") 14%, tokens.get($_, "background-color")),
+                        color-mix(in srgb, tokens.get($_, "color--surface-border") 8%, tokens.get($_, "background-color")));
                 border-top-right-radius: tokens.use($_, "border-radius");
                 border-bottom-right-radius: tokens.use($_, "border-radius");
                 pointer-events: none;
@@ -169,7 +172,7 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
         .#{$_}__icon,
         .#{$_}__prefix,
         .#{$_}__suffix {
-            color: tokens.get($_, "color--surface-contrast");
+            color: tokens.get($_, "contrast-color");
         }
 
         .#{$_}__icon,
@@ -440,7 +443,7 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
         left: 0;
         right: 0;
         z-index: 4500;
-        background-color: tokens.get($_, "background-color");
+        background-color: var(--inherit-color-background, tokens.get($_, "background-color"));
         border: tokens.get($_, "border");
         border-radius: tokens.use($_, "border-radius");
         corner-shape: tokens.get($_, "corner-shape");
@@ -466,7 +469,7 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
     .#{$_}__search-results-link {
         display: block;
         text-decoration: none;
-        color: tokens.get($_, "color--surface-contrast");
+        color: tokens.get($_, "contrast-color");
         padding: tokens.use($_, "space", 1.25) tokens.use($_, "space", 2);
 
         &:hover,
@@ -493,4 +496,4 @@ $fields: "input, input[type="color"], input[type="text"], input[type="search"],
             padding: 0 calc(var(--base, 8px) * 4);
         }
     }
-}
+}