[CL-836] Extract base css variables (#14733)

* Extract base variables

* Get tw to consume font css variables

apps/browser/src/popup/scss/popup.scss

@@ -1,4 +1,3 @@
-@import "../../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "variables.scss";
 @import "../../../../../libs/angular/src/scss/icons.scss";

apps/desktop/src/scss/styles.scss

@@ -1,4 +1,3 @@
-@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "@angular/cdk/overlay-prebuilt.css";
 @import "variables.scss";

apps/web/src/scss/styles.scss

@@ -1,6 +1,5 @@
 @import "./variables";
 
-@import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
 @import "../../../../libs/angular/src/scss/icons.scss";
 @import "../../../../libs/components/src/multi-select/scss/bw.theme";

libs/angular/src/scss/webfonts.css

@@ -1,8 +0,0 @@
-@font-face {
-  font-family: Roboto;
-  src:
-    url("webfonts/roboto.woff2") format("woff2 supports variations"),
-    url("webfonts/roboto.woff2") format("woff2-variations");
-  font-display: swap;
-  font-weight: 100 900;
-}

libs/components/src/styles.scss

@@ -3,7 +3,6 @@ $card-icons-base: "../../src/billing/images/cards/";
 
 @import "./variables";
 
-@import "../../angular/src/scss/webfonts.css";
 @import "../../angular/src/scss/bwicons/styles/style.scss";
 @import "../../angular/src/scss/icons.scss";
 @import "multi-select/scss/bw.theme.scss";

libs/components/src/theme.css

@@ -0,0 +1,27 @@
+/**
+ * This file contains CSS variables that can be used across frontend systems.
+ * This allows us to share styling between Angular, content scripts and more.
+ */
+
+/**
+ * Font faces
+ */
+@font-face {
+  font-family: Roboto;
+  src:
+    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2 supports variations"),
+    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+/**
+ * CSS variables
+ */
+:root {
+  --font-sans:
+    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Menlo, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}

libs/components/src/tw-theme.css

@@ -1,3 +1,4 @@
+@import "theme.css";
 @import "@angular/cdk/a11y-prebuilt.css";
 @import "@angular/cdk/text-field-prebuilt.css";
 @import "./reset.css";

libs/components/tailwind.config.base.js

@@ -138,26 +138,9 @@ module.exports = {
       },
     },
     fontFamily: {
-      sans: [
+      sans: "var(--font-sans)",
-        "Roboto",
+      serif: "var(--font-serif)",
-        '"Helvetica Neue"',
+      mono: "var(--font-mono)",
-        "Helvetica",
-        "Arial",
-        "sans-serif",
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-      ],
-      serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
-      mono: [
-        "Menlo",
-        "SFMono-Regular",
-        "Monaco",
-        "Consolas",
-        '"Liberation Mono"',
-        '"Courier New"',
-        "monospace",
-      ],
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),