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

* Extract base variables

* Get tw to consume font css variables

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";