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

* Extract base variables

* Get tw to consume font css variables

libs/components/tailwind.config.base.js

@@ -138,26 +138,9 @@ module.exports = {
       },
     },
     fontFamily: {
-      sans: [
-        "Roboto",
-        '"Helvetica Neue"',
-        "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",
-      ],
+      sans: "var(--font-sans)",
+      serif: "var(--font-serif)",
+      mono: "var(--font-mono)",
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),