From cdf7b54953a9876996536c80db5ae832f9e81d4c Mon Sep 17 00:00:00 2001
From: Jeffrey Holland <jholland@livefront.com>
Date: Mon, 15 Dec 2025 12:53:22 +0100
Subject: [PATCH] Use `variables-export.css` as the source of truth

---
 .../src/autofill/shared/styles/variables.scss | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss
index f356eb86f3a..41caf6317ca 100644
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -1,36 +1,37 @@
-$dark-icon-themes: "theme_dark";
+@import "./variables-export.css" $dark-icon-themes: "theme_dark";
 
-$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-source-code-pro: "Source Code Pro", monospace;
-$font-size-base: 14px;
+$font-family-sans-serif: var(--autofill-font-family-sans-serif);
+$font-family-source-code-pro: var(--autofill-font-family-source-code-pro);
+$font-size-base: var(--autofill-font-size-base);
 
-$text-color-light: #212529;
-$muted-text-color-light: #6c747c;
-$background-color-light: #ffffff;
-$background-offset-color-light: #f0f0f0;
-$brand-primary-light: #175ddc;
-$password-special-color-light: #b80017;
-$password-number-color-light: #1452c1;
-$success-color-light: #017e45;
-$error-color-light: #c83522;
+$text-color-light: var(--autofill-text-color-light);
+$muted-text-color-light: var(--autofill-muted-text-color-light);
+$background-color-light: var(--autofill-background-color-light);
+$background-offset-color-light: var(--autofill-background-offset-color-light);
+$border-color-light: var(--autofill-border-color-light);
+$brand-primary-light: var(--autofill-brand-primary-light);
+$focus-outline-color-light: var(--autofill-focus-outline-color-light);
+$password-special-color-light: var(--autofill-password-special-color-light);
+$password-number-color-light: var(--autofill-password-number-color-light);
+$success-color-light: var(--autofill-success-color-light);
+$error-color-light: var(--autofill-error-color-light);
 
-$text-color-dark: #ffffff;
-$muted-text-color-dark: #bac0ce;
-$background-color-dark: #2f343d;
-$background-offset-color-dark: darken(#2f343d, 2.75%);
-$border-color-dark: #ddd;
-$brand-primary-dark: #6f9df1;
-$password-special-color-dark: #ff8d85;
-$password-number-color-dark: #6f9df1;
-$success-color-dark: #8db89b;
-$error-color-dark: #ee9792;
+$text-color-dark: var(--autofill-text-color-dark);
+$muted-text-color-dark: var(--autofill-muted-text-color-dark);
+$background-color-dark: var(--autofill-background-color-dark);
+$background-offset-color-dark: var(--autofill-background-offset-color-dark);
+$border-color-dark: var(--autofill-border-color-dark);
+$brand-primary-dark: var(--autofill-brand-primary-dark);
+$focus-outline-color-dark: var(--autofill-focus-outline-color-dark);
+$password-special-color-dark: var(--autofill-password-special-color-dark);
+$password-number-color-dark: var(--autofill-password-number-color-dark);
+$success-color-dark: var(--autofill-success-color-dark);
+$error-color-dark: var(--autofill-error-color-dark);
 
-$muted-blue: #5a6d91;
-$muted-grey: #bac0ce;
-$border-color: #ced4dc;
+$muted-blue: var(--autofill-muted-blue);
+$muted-grey: var(--autofill-muted-grey);
 
-$border-radius: 3px;
-$focus-outline-color: #1252a3;
+$border-radius: var(--autofill-border-radius);
 
 $themes: (
   light: (
@@ -41,9 +42,9 @@ $themes: (
     primaryColor: $brand-primary-light,
     buttonPrimaryColor: $brand-primary-light,
     textContrast: $background-color-light,
-    inputBorderColor: darken($border-color-dark, 2.75%),
+    inputBorderColor: $border-color-light,
     inputBackgroundColor: $background-color-light,
-    borderColor: $border-color,
+    borderColor: $border-color-light,
     focusOutlineColor: $focus-outline-color,
     successColor: $success-color-light,
     errorColor: $error-color-light,
@@ -59,10 +60,10 @@ $themes: (
     buttonPrimaryColor: $brand-primary-dark,
     primaryColor: $brand-primary-dark,
     textContrast: $background-color-dark,
-    inputBorderColor: #4c525f,
+    inputBorderColor: $border-color-dark,
     inputBackgroundColor: $background-color-dark,
-    borderColor: #4c525f,
-    focusOutlineColor: lighten($focus-outline-color, 25%),
+    borderColor: $border-color-dark,
+    focusOutlineColor: $focus-outline-color-dark,
     successColor: $success-color-dark,
     errorColor: $error-color-dark,
     passkeysAuthenticating: $muted-grey,
@@ -89,7 +90,6 @@ $themes: (
     }
   }
 }
-
 @function themed($key) {
   @return map-get($theme-map, $key);
 }