[CORL-360] Embrace CSS Variables (#2312)

* fix: docz bug

* feat: implement css variables

* fix: adapt docz

* fix: webpack config

* fix: add ui l10n bundle to tests

src/core/client/account/index.tsx

@@ -6,6 +6,9 @@ import App from "./App";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     initLocalState,

src/core/client/admin/index.tsx

@@ -6,6 +6,9 @@ import EntryContainer from "./containers/EntryContainer";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     initLocalState,

src/core/client/auth/index.tsx

@@ -10,6 +10,9 @@ import { initLocalState } from "./local";
 import localesData from "./locales";
 import AppQuery from "./queries/AppQuery";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 /**
  * Adapt popup height to current content every 100ms.
  *

src/core/client/framework/testHelpers/createFluentBundle.ts

@@ -7,7 +7,7 @@ import fs from "fs";
 import path from "path";
 
 // These locale prefixes are always loaded.
-const commonPrefixes = ["common", "framework"];
+const commonPrefixes = ["ui", "common", "framework"];
 
 function decorateErrorWhenMissing(bundle: FluentBundle) {
   const originalHasMessage = bundle.hasMessage;

src/core/client/install/index.tsx

@@ -7,6 +7,9 @@ import { createManaged } from "talk-framework/lib/bootstrap";
 import App from "./components/App";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     localesData,

src/core/client/stream/index.tsx

@@ -16,6 +16,9 @@ import {
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 const listeners = (
   <>
     <OnPymLogin />

src/core/client/ui/components/Brand/BrandName.tsx

@@ -22,7 +22,7 @@ const BrandName: FunctionComponent<Props> = ({
   size,
   ...rest
 }) => (
-  <Localized id="general-brandName">
+  <Localized id="ui-brandName">
     <Typography
       {...rest}
       variant="heading1"

src/core/client/ui/theme/variables.css

@@ -1,16 +0,0 @@
-/*
-  Variables defined in `variables.ts` are already available
-  flattened and in kebab case.
-
-  These are additionally variables we define.
-*/
-
-:root {
-  --mini-unit: calc(1px * var(--mini-unit-small));
-}
-
-@media (min-width: $breakpoints-xs) {
-  :root {
-    --mini-unit: calc(1px * var(--mini-unit-large));
-  }
-}

src/core/client/ui/theme/variables.css.ts

@@ -0,0 +1,36 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+import flat from "flat";
+import { kebabCase, mapKeys, mapValues, pickBy } from "lodash";
+
+import variables from "./variables";
+
+const flatKebabVariables = mapKeys(
+  mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
+  (_, k) => `--${kebabCase(k)}`
+);
+
+// These are the default css standard variables.
+const cssVariables = pickBy(
+  flatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
+const style = {
+  ":root": {
+    ...cssVariables,
+    "--mini-unit": "calc(1px * var(--mini-unit-small))",
+  },
+  [`@media (min-width: ${variables.breakpoints.xs}px)`]: {
+    ":root": {
+      "--mini-unit": "calc(1px * var(--mini-unit-large))",
+    },
+  },
+};
+
+module.exports = style;