Update variables

Use proper labels for viewfinder compatibility.

packages/web/base/button/src/index.ts

@@ -158,13 +158,13 @@ export const Button = ({
   css.if (variant === ButtonVariant.FILLED) (
     css`
       background-color: var(--color-accent, blue);
-      color: var(--color-bg, white) !important;
+      color: var(--color-background, white) !important;
     `
   ),
 
   css.if (variant === ButtonVariant.OUTLINE) (
     css`
-      background-color: var(--color-bg, white);
+      background-color: var(--color-background, white);
       color: var(--color-accent, blue);
     `
   ),

packages/web/base/checkcontrol/src/index.ts

@@ -188,8 +188,8 @@ export const CheckIndicatorArea = ({
     vertical-align: middle;
     place-content: center;
     position: relative;
-    background-color: var(--color-bg, white);
-    box-shadow: 0 0 0 0.125rem var(--color-bg, white);
+    background-color: var(--color-background, white);
+    box-shadow: 0 0 0 0.125rem var(--color-background, white);
     color: var(--color-accent, blue);
     overflow: hidden;
     &::before {
@@ -298,7 +298,7 @@ export const CheckIndicator = ({
 }: CheckControlBaseArgs) => css.cx(
   css`
     fill: none;
-    stroke: var(--color-bg, white);
+    stroke: var(--color-background, white);
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

packages/web/base/textcontrol/src/index.ts

@@ -159,7 +159,7 @@ export const LabelWrapper = ({
   }),
   css.if (border) (
     css`
-      background-color: var(--color-bg, white);
+      background-color: var(--color-background, white);
     `
   ),
   css.if (style === TextControlStyle.ALTERNATE) (
@@ -215,7 +215,7 @@ export const Input = ({
     transition-property: background-color, color;
     &:focus {
       outline: 0;
-      color: var(--color-fg, black);
+      color: var(--color-foreground, black);
     }
     &:disabled {
       cursor: not-allowed;
@@ -227,8 +227,8 @@ export const Input = ({
   `,
   css.media('only screen') (
     css`
-      background-color: var(--color-bg, white);
-      color: var(--color-fg, black);
+      background-color: var(--color-background, white);
+      color: var(--color-foreground, black);
     `
   ),
   css.dynamic({
@@ -247,7 +247,7 @@ export const Input = ({
   ),
   css.if (border) (
     css`
-      background-color: var(--color-bg, white);
+      background-color: var(--color-background, white);
     `
   ),
   css.if (style === TextControlStyle.ALTERNATE) (
@@ -317,7 +317,7 @@ export const HintWrapper = ({
   `,
   css.if (border) (
     css`
-      background-color: var(--color-bg, white);
+      background-color: var(--color-background, white);
     `
   ),
   css.if (style === TextControlStyle.ALTERNATE) (

packages/web/kitchen-sink/react-next/public/theme.css

@@ -59,8 +59,8 @@
 }
 
 :root {
-  --color-bg: var(--color-negative, white);
-  --color-fg: var(--color-positive, black);
+  --color-background: var(--color-negative, white);
+  --color-foreground: var(--color-positive, black);
   --color-accent: var(--color-primary, blue);
   --color-active: var(--color-tertiary, red);
   --color-hover: var(--color-secondary, blue);
@@ -68,8 +68,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg: var(--color-negative, black);
-    --color-fg: var(--color-positive, white);
+    --color-background: var(--color-negative, black);
+    --color-foreground: var(--color-positive, white);
   }
 }
 
@@ -86,8 +86,8 @@
 
 @media only screen {
   :root {
-    background-color: var(--color-bg);
-    color: var(--color-fg);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
   }
 }
 
@@ -173,7 +173,7 @@ a {
 
 ::selection {
   background-color: var(--color-active);
-  color: var(--color-fg);
+  color: var(--color-foreground);
 }
 
 :root {