[CORL-1155] Fix theming for rebranded stream/admin (#3012)

* Repair theming and CSS variables for the rebrand

This separates the CSS variables into three sections
for admin, stream, as well as a shared set between
them.

This also adds injection of the raw colours from the
design team into post css variables.

Lastly, this re-maps the existing theme variables to
a new consolidated set with fallbacks for compatibility.

Since this is a singular commit from various WIP commits,
I am crediting @cvle as well as myself for this work.

Thank you all who helped make this rebrand with theming
possible!

CORL-1155

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

* Convert old css variables in CallOut

* Rename postive/negative => success/error

CORL-1155

* Change some CSS Variable names

* fix TextField/PasswordField colors

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

CSS_VARIABLES.md

@@ -0,0 +1,295 @@
+
+# CSS Variables
+
+Coral defines a set of CSS Variables that you can use to broadly customize the
+look and feel of your comment stream. For example you can easily redefine the colors
+or fonts that are being used.
+
+To change the CSS Variables, use the following example in your custom CSS file:
+
+```
+:root {
+  --font-family-primary: 'Verdana';
+  --round-corners: 0px;
+}
+```
+
+The following list contains the CSS Variables that can be customized.
+
+**Info**: *Before 6.3.0 Coral uses a different set of CSS Variables. If you are still using
+the old CSS Variables, please upgrade. Currently we have a compatibility layer to bridge the old CSS Variables to the new ones. This mechanism will be removed in the future.*
+
+<!-- START docs:css-variables -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN npm run docs:css-variables -->
+### Index
+- <a href="#variables">Variables</a>
+  - <a href="#palette">palette</a>
+    - <a href="#palette-primary">palette-primary</a>
+    - <a href="#palette-background">palette-background</a>
+    - <a href="#palette-text">palette-text</a>
+    - <a href="#palette-grey">palette-grey</a>
+    - <a href="#palette-error">palette-error</a>
+    - <a href="#palette-success">palette-success</a>
+    - <a href="#palette-warning">palette-warning</a>
+  - <a href="#font-family">font-family</a>
+  - <a href="#font-weight">font-weight</a>
+    - <a href="#font-weight-primary">font-weight-primary</a>
+    - <a href="#font-weight-secondary">font-weight-secondary</a>
+  - <a href="#font-size">font-size</a>
+  - <a href="#line-height">line-height</a>
+  - <a href="#shadow">shadow</a>
+  - <a href="#spacing">spacing</a>
+  - <a href="#mini-unit">mini-unit</a>
+
+
+### Variables
+
+Use this to remove round corners or make them more round.
+
+`--round-corners: 3px;`
+
+### palette
+
+`--palette-divider: rgba(0, 0, 0, 0.12);`
+
+#### palette-primary
+
+Color palette that is used as the primary color.
+
+`--palette-primary-100: #EBF6FF;  /* Before 6.3.0: --palette-primary-lightest */`
+
+`--palette-primary-200: #B7DCFF;  /* Before 6.3.0: --palette-primary-lighter */`
+
+`--palette-primary-300: #61B3FF;  /* Before 6.3.0: --palette-primary-light */`
+
+`--palette-primary-400: #2897FF;  /* Before 6.3.0: --palette-primary-main */`
+
+`--palette-primary-500: #0070D9;  /* Before 6.3.0: --palette-primary-main */`
+
+`--palette-primary-600: #0062BE;  /* Before 6.3.0: --palette-primary-main */`
+
+`--palette-primary-700: #005AAE;  /* Before 6.3.0: --palette-primary-main */`
+
+`--palette-primary-800: #004688;  /* Before 6.3.0: --palette-primary-dark */`
+
+`--palette-primary-900: #00386D;  /* Before 6.3.0: --palette-primary-darkest */`
+
+#### palette-background
+
+Color palette that is used for background colors.
+
+`--palette-background-body: #FFFFFF;`
+
+`--palette-background-popover: #FFFFFF;`
+
+`--palette-background-tooltip: #65696B;`
+
+`--palette-background-input: #FFFFFF;`
+
+`--palette-background-input-disabled: #EFEFEF;`
+
+#### palette-text
+
+Color palette that is used for text.
+
+`--palette-text-000: #FFFFFF;  /* Before 6.3.0: --palette-text-light */`
+
+`--palette-text-100: #65696B;  /* Before 6.3.0: --palette-text-secondary */`
+
+`--palette-text-500: #353F44;  /* Before 6.3.0: --palette-text-primary */`
+
+`--palette-text-900: #14171A;  /* Before 6.3.0: --palette-text-dark */`
+
+`--palette-text-placeholder: #9FA4A6;  /* Before 6.3.0: --palette-grey-lighter */`
+
+`--palette-text-input-disabled: #9FA4A6;  /* Before 6.3.0: --palette-grey-lighter */`
+
+#### palette-grey
+
+Color palette that is used for grey shades.
+
+`--palette-grey-100: #F4F7F7;  /* Before 6.3.0: --palette-grey-lightest */`
+
+`--palette-grey-200: #EAEFF0;  /* Before 6.3.0: --palette-grey-lightest */`
+
+`--palette-grey-300: #CBD1D2;  /* Before 6.3.0: --palette-grey-lighter */`
+
+`--palette-grey-400: #9FA4A6;  /* Before 6.3.0: --palette-grey-lighter */`
+
+`--palette-grey-500: #65696B;  /* Before 6.3.0: --palette-grey-main */`
+
+`--palette-grey-600: #49545C;  /* Before 6.3.0: --palette-grey-dark */`
+
+`--palette-grey-700: #32404D;  /* Before 6.3.0: --palette-grey-darkest */`
+
+`--palette-grey-800: #202E3E;  /* Before 6.3.0: --palette-grey-darkest */`
+
+`--palette-grey-900: #132033;  /* Before 6.3.0: --palette-grey-darkest */`
+
+#### palette-error
+
+Color palette that is used for indicating something negative and is usually red.
+
+`--palette-error-100: #FCE5D9;  /* Before 6.3.0: --palette-error-lightest */`
+
+`--palette-error-200: #FAC6B4;  /* Before 6.3.0: --palette-error-lighter */`
+
+`--palette-error-300: #F29D8B;  /* Before 6.3.0: --palette-error-lighter */`
+
+`--palette-error-400: #E5766C;  /* Before 6.3.0: --palette-error-light */`
+
+`--palette-error-500: #D53F3F;  /* Before 6.3.0: --palette-error-main */`
+
+`--palette-error-600: #B72E39;  /* Before 6.3.0: --palette-error-main */`
+
+`--palette-error-700: #991F34;  /* Before 6.3.0: --palette-error-dark */`
+
+`--palette-error-800: #7B142E;  /* Before 6.3.0: --palette-error-darkest */`
+
+`--palette-error-900: #660C2B;  /* Before 6.3.0: --palette-error-darkest */`
+
+#### palette-success
+
+Color palette that is used for indicating something positive and is usually green.
+
+`--palette-success-100: #D8F9D5;  /* Before 6.3.0: --palette-success-lightest */`
+
+`--palette-success-200: #ADF3AD;  /* Before 6.3.0: --palette-success-lighter */`
+
+`--palette-success-300: #7CDB85;  /* Before 6.3.0: --palette-success-lighter */`
+
+`--palette-success-400: #54B767;  /* Before 6.3.0: --palette-success-light */`
+
+`--palette-success-500: #268742;  /* Before 6.3.0: --palette-success-main */`
+
+`--palette-success-600: #1B743D;  /* Before 6.3.0: --palette-success-main */`
+
+`--palette-success-700: #136138;  /* Before 6.3.0: --palette-success-dark */`
+
+`--palette-success-800: #0C4E32;  /* Before 6.3.0: --palette-success-darkest */`
+
+`--palette-success-900: #07402E;  /* Before 6.3.0: --palette-success-darkest */`
+
+#### palette-warning
+
+Color palette that is used for indicating a warning and is usually yellow.
+
+`--palette-warning-100: #FFFACC;  /* Before 6.3.0: --palette-warning-main */`
+
+`--palette-warning-500: #FFE91F;  /* Before 6.3.0: --palette-warning-main */`
+
+### font-family
+
+Different font families currently in use.
+
+`--font-family-primary: "Open Sans";  /* Before 6.3.0: --font-family-sans-serif */`
+
+`--font-family-secondary: "Nunito";  /* Before 6.3.0: --font-family-serif */`
+
+### font-weight
+
+Different font weights with matching values for the fonts.
+
+#### font-weight-primary
+
+`--font-weight-primary-bold: 700;  /* Before 6.3.0: --font-weight-sans-bold */`
+
+`--font-weight-primary-semi-bold: 600;  /* Before 6.3.0: --font-weight-sans-medium */`
+
+`--font-weight-primary-regular: 300;  /* Before 6.3.0: --font-weight-sans-regular */`
+
+#### font-weight-secondary
+
+`--font-weight-secondary-bold: 700;  /* Before 6.3.0: --font-weight-serif-bold */`
+
+`--font-weight-secondary-regular: 300;  /* Before 6.3.0: --font-weight-serif-regular */`
+
+### font-size
+
+`--font-size-1: 0.75rem;`
+
+`--font-size-2: 0.875rem;`
+
+`--font-size-3: 1rem;`
+
+`--font-size-4: 1.125rem;`
+
+`--font-size-5: 1.25rem;`
+
+`--font-size-6: 1.5rem;`
+
+`--font-size-7: 1.75rem;`
+
+`--font-size-8: 2rem;`
+
+`--font-size-9: 2.25rem;`
+
+`--font-size-icon-xl: 2.25rem;`
+
+`--font-size-icon-lg: 1.5rem;`
+
+`--font-size-icon-md: 1.125rem;`
+
+`--font-size-icon-sm: 0.875rem;`
+
+`--font-size-icon-xs: 0.75rem;`
+
+### line-height
+
+`--line-height-comment-body: 1.45rem;`
+
+`--line-height-field-description: 1.3rem;`
+
+`--line-height-1: 0.75rem;`
+
+`--line-height-2: 0.875rem;`
+
+`--line-height-3: 1rem;`
+
+`--line-height-4: 1.125rem;`
+
+`--line-height-5: 1.25rem;`
+
+`--line-height-6: 1.5rem;`
+
+`--line-height-7: 1.75rem;`
+
+`--line-height-8: 2rem;`
+
+### shadow
+
+Different shadows that are currently used in Coral.
+
+`--shadow-popover: 1px 0px 4px rgba(0, 0, 0, 0.25);  /* Before 6.3.0: --elevation-main */`
+
+### spacing
+
+Different spacing units currenty used in Coral.
+
+`--spacing-1: 4px;`
+
+`--spacing-2: 8px;`
+
+`--spacing-3: 12px;`
+
+`--spacing-4: 16px;`
+
+`--spacing-5: 24px;`
+
+`--spacing-6: 32px;`
+
+`--spacing-7: 44px;`
+
+`--spacing-8: 60px;`
+
+`--spacing-9: 84px;`
+
+### mini-unit
+
+Grid units for smaller and larger screens.
+
+`--mini-unit-small: 4;`
+
+`--mini-unit-large: 8;`
+
+<!-- END docs:css-variables -->

gatsby-node.js

@@ -42,8 +42,8 @@ exports.onCreateWebpackConfig = ({
 
   if (stage === "develop") {
     config.entry.commons.push(
-      // Add our global css variables file.
+      // Add our stream css variables file.
-      `${srcDir}/core/client/ui/theme/variables.css.ts`
+      `${srcDir}/core/client/ui/theme/stream.css.ts`
     );
   }
 
@@ -52,7 +52,7 @@ exports.onCreateWebpackConfig = ({
   if (stage === "build-javascript") {
     config.entry.app = [
       config.entry.app,
-      `${appDir}/core/client/ui/theme/variables.css.ts`,
+      `${appDir}/core/client/ui/theme/stream.css.ts`,
     ];
   }
   */

package-lock.json

@@ -22020,28 +22020,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true,
           "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
           "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "dev": true,
           "optional": true,
@@ -22052,14 +22052,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true,
           "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "optional": true,
@@ -22077,35 +22077,35 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true,
           "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true,
           "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true,
           "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
           "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "dev": true,
           "optional": true,
@@ -22115,21 +22115,21 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
           "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
@@ -22159,7 +22159,7 @@
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
@@ -22176,7 +22176,7 @@
         },
         "glob": {
           "version": "7.1.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
           "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "dev": true,
           "optional": true,
@@ -22191,14 +22191,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
           "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "dev": true,
           "optional": true,
@@ -22208,7 +22208,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
@@ -22218,7 +22218,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
@@ -22229,21 +22229,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true,
           "optional": true
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
           "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "optional": true,
@@ -22253,14 +22253,14 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "optional": true,
@@ -22308,7 +22308,7 @@
         },
         "ms": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
           "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "dev": true,
           "optional": true
@@ -22322,7 +22322,7 @@
         },
         "needle": {
           "version": "2.3.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
           "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "dev": true,
           "optional": true,
@@ -22334,7 +22334,7 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
           "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "dev": true,
           "optional": true,
@@ -22353,7 +22353,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
@@ -22364,14 +22364,14 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
           "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
           "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "dev": true,
           "optional": true,
@@ -22382,7 +22382,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
@@ -22395,21 +22395,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true,
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "optional": true,
@@ -22419,21 +22419,21 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
@@ -22444,21 +22444,21 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
           "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "dev": true,
           "optional": true,
@@ -22480,7 +22480,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
@@ -22496,7 +22496,7 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
           "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "dev": true,
           "optional": true,
@@ -22506,49 +22506,49 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "dev": true,
           "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
           "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "optional": true,
@@ -22560,7 +22560,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
@@ -22570,7 +22570,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "optional": true,
@@ -22580,7 +22580,7 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
@@ -22603,14 +22603,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
           "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "dev": true,
           "optional": true,
@@ -22620,7 +22620,7 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true,
           "optional": true

package.json

@@ -28,6 +28,7 @@
     "build:server": "gulp server",
     "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts",
     "docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md",
+    "docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md",
     "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
     "generate": "npm-run-all generate:css-types generate:schema generate:relay",
     "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist",
@@ -425,6 +426,9 @@
     "{src/core/client/stream/events.ts,scripts/generateEventDocs.ts,CLIENT_EVENTS.md}": [
       "npm run docs:events -- --verify"
     ],
+    "{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [
+      "npm run docs:css-variables -- --verify"
+    ],
     "{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
       "npm run doctoc"
     ]

scripts/generateCSSVariablesDocs.ts

@@ -0,0 +1,306 @@
+import { stripIndent } from "common-tags";
+import fs from "fs";
+import { kebabCase, trim } from "lodash";
+import path from "path";
+import ts from "typescript";
+
+import colors from "../src/core/client/ui/theme/colors";
+
+/** We collect inforamtion from the AST and put it into DocEntry */
+interface DocEntry {
+  /** Name of property */
+  key: string;
+  /** Documentation if available */
+  docs?: string;
+  /** Value if it is a leaf */
+  value?: string;
+  /** Children if it is a node */
+  children?: DocEntry[];
+}
+
+/**
+ * We use this regexp to find a previous block that we
+ * are going to update in the readme file.
+ */
+const BLOCK_REGEXP = /<!-- START docs:css-variables -->(.|\n)*<!-- END docs:css-variables -->/gm;
+
+/** Sort doc entries will sort childrenless entries first */
+function sortDocEntries(data: DocEntry[]) {
+  data.forEach((d) => {
+    if (d.children) {
+      d.children = sortDocEntries(d.children);
+    }
+  });
+  return data.sort((a, b) => {
+    if (a.children && !b.children) {
+      return 1;
+    }
+    if (b.children && !a.children) {
+      return -1;
+    }
+    return 0;
+  });
+}
+
+/** Generate documentation for all classes in a set of .ts files */
+function gatherEntries(
+  fileName: string,
+  options: ts.CompilerOptions
+): DocEntry[] {
+  // Build a program using the set of root file names in fileNames
+  const program = ts.createProgram([fileName], options);
+
+  // Get the checker, we will use it to find more about classes
+  const checker = program.getTypeChecker();
+
+  const data: DocEntry[] = [];
+  const currentSourceFile = program.getSourceFile(fileName)!;
+
+  ts.forEachChild(currentSourceFile, visit);
+
+  return sortDocEntries(data);
+
+  /** visit nodes finding css variables */
+  function visit(node: ts.Node) {
+    if (ts.isVariableStatement(node)) {
+      // TODO (cvle) - Currently the variable name is hardcoded. We might want to change that.
+      if (!node.getFullText().includes("streamVariables")) {
+        return;
+      }
+      const firstChild = node.declarationList.declarations[0];
+      if (ts.isVariableDeclaration(firstChild)) {
+        const symbol = checker.getSymbolAtLocation(firstChild.name);
+        if (symbol) {
+          const type = checker.getTypeOfSymbolAtLocation(
+            symbol,
+            symbol.valueDeclaration
+          );
+          type.getProperties().forEach((property) => {
+            serializePropertySymbol(property);
+          });
+        }
+      }
+    }
+  }
+
+  /** This will evaluate `symbol` and addthe doc entries */
+  function serializePropertySymbol(symbol: ts.Symbol, parent?: DocEntry) {
+    const entry: DocEntry = { key: symbol.name };
+    const pt = checker.getTypeOfSymbolAtLocation(
+      symbol,
+      symbol.valueDeclaration
+    );
+    if (pt.symbol?.name === "__object") {
+      pt.getProperties().forEach((p2) => {
+        serializePropertySymbol(p2, entry);
+      });
+    } else {
+      entry.value = symbol.valueDeclaration
+        // Last child contains value.
+        .getChildAt(symbol.valueDeclaration.getChildCount() - 1)!
+        .getFullText();
+    }
+    entry.docs = ts.displayPartsToString(
+      symbol.getDocumentationComment(checker)
+    );
+    if (parent) {
+      if (parent.children) {
+        parent.children.push(entry);
+      } else {
+        parent.children = [entry];
+      }
+    } else {
+      data.push(entry);
+    }
+  }
+}
+
+/**
+ * Finds any references to `object` by `variableName` and replaces the text
+ * with the actual value.
+ *
+ * E.g. `replaceObjectVariablesInText("colors.teal100", colors, "colors") === "#E2FAF7"`;
+ */
+function replaceObjectVariablesInText(
+  text: string,
+  object: any,
+  variableName: string
+) {
+  let result = text;
+  Object.keys(object).forEach((c: string) => {
+    if (typeof object[c] === "object") {
+      result = replaceObjectVariablesInText(
+        result,
+        object[c],
+        `${variableName}.${c}`
+      );
+    } else {
+      result = result.replace(`${variableName}.${c}`, object[c]);
+    }
+  });
+  return result;
+}
+
+/**
+ * transforms value to be used in the documentation.
+ */
+function transformValue(value: string) {
+  let compat = "";
+  value = trim(value);
+  // Detect compat value.
+  if (value.startsWith("compat")) {
+    const result = /compat\((.*), *"(.*)"\)/.exec(value);
+    if (!result) {
+      throw new Error("Unrecognized compat format");
+    }
+    value = result[1];
+    compat = result[2];
+  }
+  // If it's a raw string, evaluate it to get rid of the initial quotes.
+  if (value[0] === '"' || value[0] === "'") {
+    // eslint-disable-next-line no-eval
+    value = eval(value);
+  }
+  // Replace all references to colors.
+  value = replaceObjectVariablesInText(value, colors, "colors");
+  if (compat) {
+    // add compat information.
+    return `${value};  /* Before 6.3.0: --${compat} */`;
+  }
+  return `${value};`;
+}
+
+function prefixLines(text: string, prefix: string) {
+  return text.split("\n").join(`\n${prefix}`);
+}
+
+function entries2Summary(
+  entries: DocEntry[],
+  keyprefix = "",
+  nestprefix = ""
+): string {
+  let doc = "";
+  entries.forEach((entry) => {
+    if (!entry.children) {
+      return;
+    }
+    const header = kebabCase(keyprefix + entry.key);
+    doc += `${nestprefix}- <a href="#${header}">${header}</a>\n`;
+    if (entry.children) {
+      doc += entries2Summary(
+        entry.children,
+        keyprefix + entry.key + "-",
+        nestprefix + "  "
+      );
+    }
+  });
+  return doc;
+}
+
+function entries2Doc(entries: DocEntry[], header = "###", prefix = ""): string {
+  let doc = "";
+  entries.forEach((entry) => {
+    if (entry.children) {
+      doc += `\n${header} ${kebabCase(prefix + entry.key)}\n`;
+      if (entry.docs) {
+        doc += `\n${entry.docs}\n`;
+      }
+      doc += entries2Doc(
+        entry.children,
+        header + "#",
+        `${prefix}${entry.key}-`
+      );
+    } else {
+      if (entry.docs) {
+        doc += `\n${entry.docs}\n`;
+      }
+      doc += `\n\`--${kebabCase(prefix + entry.key)}: ${transformValue(
+        entry.value!
+      )}\`\n`;
+    }
+  });
+  return doc;
+}
+
+/**
+ * Append or update previous documention in markdownFile.
+ *
+ * @param markdownFile The markdown file we want to inject the docs too.
+ * @param entries data as returned by gatherEntries.
+ */
+function emitDocs(markdownFile: string, entries: DocEntry[], verify = false) {
+  const previousContent = fs.existsSync(markdownFile)
+    ? fs.readFileSync(markdownFile).toString()
+    : "";
+
+  const summary = entries2Summary(entries, "", "  ");
+  const list = entries2Doc(entries);
+
+  const output = stripIndent`
+    <!-- START docs:css-variables -->
+    <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN npm run docs:css-variables -->
+    ### Index
+    - <a href="#variables">Variables</a>
+    ${prefixLines(summary, "    ")}
+
+    ### Variables
+    ${prefixLines(list, "    ")}
+    <!-- END docs:css-variables -->
+  `;
+
+  let newContent;
+  // Find previous block.
+  if (BLOCK_REGEXP.test(previousContent)) {
+    newContent = previousContent.replace(BLOCK_REGEXP, output);
+  } else {
+    newContent = previousContent + "\n" + output;
+  }
+  if (previousContent === newContent) {
+    // eslint-disable-next-line no-console
+    console.log(`${markdownFile} is up to date`);
+    return;
+  }
+  if (verify) {
+    // eslint-disable-next-line no-console
+    console.error(
+      `${markdownFile} is outdated, please run \`npm run docs:css-variables\``
+    );
+    process.exit(1);
+  }
+
+  fs.writeFileSync(markdownFile, newContent);
+  // eslint-disable-next-line no-console
+  console.log(`Successfully injected documentation into ${markdownFile}`);
+}
+
+function main() {
+  if (process.argv.length < 4) {
+    throw new Error("Must provide path to css variables and a markdown file.");
+  }
+
+  const variableFile = process.argv[2];
+  const markdownFile = process.argv[3];
+
+  // Find tsconfig file.
+  const configFile = ts.findConfigFile(variableFile, fs.existsSync);
+  if (!configFile) {
+    throw new Error("tsconfig file not found");
+  }
+  const configText = fs.readFileSync(configFile).toString();
+  const result = ts.parseConfigFileTextToJson(configFile, configText);
+  if (result.error) {
+    throw result.error;
+  }
+
+  // Parse the JSON raw data into actual consumable compiler options.
+  const config = ts.parseJsonConfigFileContent(
+    result.config,
+    ts.sys,
+    path.dirname(configFile)
+  );
+
+  const entries = gatherEntries(variableFile, config.options);
+  emitDocs(markdownFile, entries, process.argv[4] === "--verify");
+}
+
+main();

src/core/build/paths.ts

@@ -20,7 +20,9 @@ export default {
   appPublicPath: resolveSrc("core/build/publicPath.js"),
   appLocales: resolveSrc("locales"),
   appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
-  appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
+  appSassLikeVariables: resolveSrc("core/client/ui/theme/sassLikeVariables.ts"),
+  appThemeStreamCSS: resolveSrc("core/client/ui/theme/stream.css"),
+  appThemeAdminCSS: resolveSrc("core/client/ui/theme/admin.css"),
   appThemeMixinsCSS: resolveSrc("core/client/ui/theme/mixins.css"),
 
   appStreamHTML: resolveSrc("core/client/stream/index.html"),

src/core/build/postcss.config.js

@@ -3,7 +3,6 @@ require("ts-node/register");
 const kebabCase = require("lodash/kebabCase");
 const mapKeys = require("lodash/mapKeys");
 const mapValues = require("lodash/mapValues");
-const pickBy = require("lodash/pickBy");
 const flat = require("flat");
 const paths = require("./paths").default;
 const autoprefixer = require("autoprefixer");
@@ -17,23 +16,28 @@ const postcssMixins = require("postcss-mixins");
 const postcssPrependImports = require("postcss-prepend-imports");
 const postcssAdvancedVariables = require("postcss-advanced-variables");
 
-delete require.cache[paths.appThemeVariables];
+delete require.cache[paths.appSassLikeVariables];
-const variables = require(paths.appThemeVariables).default;
+const sassLikeVariables = require(paths.appSassLikeVariables).default;
-const flatKebabVariables = mapKeys(
+
-  mapValues(flat(variables, { delimiter: "-" }), (v) => v.toString()),
+const kebabs = mapKeys(
+  mapValues(flat(sassLikeVariables, { delimiter: "-" }), (v) => v.toString()),
   (_, k) => kebabCase(k)
 );
 
-// These are sass style variables used in media queries.
+// Generate sass-style variables to inject into css
-const mediaQueryVariables = mapValues(
+const postCssVariables = mapValues(kebabs, (value, key) => {
-  pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
   // Add unit to breakpoints.
   // Add 1 to support mobile first approach where we start
   // with the smallest screen and gradually add styling for the
   // next bigger screen. This is realized using `min-width` without
   // ever using `max-width`.
-  (v) => `${Number.parseInt(v, 10) + 1}px`
+  if (key.toString().startsWith("breakpoints-")) {
-);
+    return `${Number.parseInt(value, 10) + 1}px`;
+  }
+
+  // Default return the raw value
+  return value;
+});
 
 module.exports = {
   // Necessary for external CSS imports to work
@@ -52,7 +56,7 @@ module.exports = {
     // Support nesting.
     postcssNested(),
     // Sass style variables to be used in media queries.
-    postcssAdvancedVariables({ variables: mediaQueryVariables }),
+    postcssAdvancedVariables({ variables: postCssVariables }),
     // Reduce some calc()
     postcssCalcFunction(),
     // Provides a modern CSS environment.

src/core/client/account/App/MainLayout.css

@@ -1,10 +1,10 @@
 .bar {
   height: calc(6 * var(--mini-unit));
-  background-color: var(--palette-text-primary);
+  background-color: var(--palette-text-500);
 }
 
 .centered {
   margin: 10% auto;
   padding: 0 calc(0.5 * var(--mini-unit));
   box-sizing: border-box;
-}
+}

src/core/client/account/components/Loading.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Delay, Flex, Spinner } from "coral-ui/components";
+import { Delay, Flex, Spinner } from "coral-ui/components/v2";
 
 const Loading: FunctionComponent = () => (
   <Flex justifyContent="center">

src/core/client/account/index.tsx

@@ -10,7 +10,7 @@ import { initLocalState } from "./local";
 import localesData from "./locales";
 
 // Import css variables.
-import "coral-ui/theme/variables.css";
+import "coral-ui/theme/stream.css";
 
 async function main() {
   await injectConditionalPolyfills();

src/core/client/account/routes/NotFound.css

@@ -1,11 +1,11 @@
 .content {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-7);
+  line-height: var(--line-height-7);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
   text-align: center;
 }

src/core/client/account/routes/download/Download/DownloadDescription.css

@@ -1,38 +1,38 @@
 .title {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-7);
+  line-height: var(--line-height-7);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  padding-left: var(--v2-spacing-2);
+  padding-left: var(--spacing-2);
 }
 
 .content {
-  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
 }
 
 .section {
-  margin-bottom: var(--v2-spacing-4);
+  margin-bottom: var(--spacing-4);
 }
 
 .sectionText {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-5);
+  line-height: var(--line-height-5);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-3);
+  margin-bottom: var(--spacing-3);
 }
 
 .list {
   list-style: none;
-  margin-left: calc(-1 * var(--v2-spacing-5));
+  margin-left: calc(-1 * var(--spacing-5));
 }
 
 .list li {
@@ -46,5 +46,5 @@
 .bullet {
   display: inline-block;
   min-width: 16px;
-  margin-right: var(--v2-spacing-2);
+  margin-right: var(--spacing-2);
 }

src/core/client/account/routes/download/Download/DownloadRoute.css

@@ -6,10 +6,10 @@
 .root {
   display: inline-block;
 
-  max-width: calc(70 * var(--v2-spacing-2));
+  max-width: calc(70 * var(--spacing-2));
 
   @media (min-width: $breakpoints-xs) {
-    max-width: calc(60 * var(--v2-spacing-2));
+    max-width: calc(60 * var(--spacing-2));
   }
 
   text-align: left;

src/core/client/account/routes/download/Download/DownloadRoute.tsx

@@ -6,7 +6,7 @@ import { useToken } from "coral-framework/hooks";
 import { createFetch } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { parseHashQuery } from "coral-framework/utils";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import DownloadDescription from "./DownloadDescription";
 import DownloadForm from "./DownloadForm";

src/core/client/account/routes/email/Confirm/Confirm.css

@@ -1,52 +1,52 @@
 .title {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-7);
+  line-height: var(--line-height-7);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .description {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-5);
+  line-height: var(--line-height-5);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-3);
+  margin-bottom: var(--spacing-3);
 }
 
 .label {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-3);
+  line-height: var(--line-height-3);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }
 
 .labelDescription {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-4);
+  line-height: var(--line-height-4);
 
-  color: var(--v2-colors-mono-100);
+  color: var(--palette-text-100);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .submit {
-  margin-top: var(--v2-spacing-5);
+  margin-top: var(--spacing-5);
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }

src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css

@@ -1,52 +1,52 @@
 .title {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-7);
+  line-height: var(--line-height-7);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .description {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-5);
+  line-height: var(--line-height-5);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-3);
+  margin-bottom: var(--spacing-3);
 }
 
 .label {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-3);
+  line-height: var(--line-height-3);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }
 
 .labelDescription {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-4);
+  line-height: var(--line-height-4);
 
-  color: var(--v2-colors-mono-100);
+  color: var(--palette-text-100);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .submit {
-  margin-top: var(--v2-spacing-5);
+  margin-top: var(--spacing-5);
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }

src/core/client/account/routes/password/Reset/Reset.css

@@ -1,52 +1,52 @@
 .title {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-7);
+  line-height: var(--line-height-7);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .description {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-5);
+  line-height: var(--line-height-5);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-3);
+  margin-bottom: var(--spacing-3);
 }
 
 .label {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-3);
+  line-height: var(--line-height-3);
 
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }
 
 .labelDescription {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   font-style: normal;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-4);
+  line-height: var(--line-height-4);
 
-  color: var(--v2-colors-mono-100);
+  color: var(--palette-text-100);
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .submit {
-  margin-top: var(--v2-spacing-5);
+  margin-top: var(--spacing-5);
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }

src/core/client/admin/App/DecisionHistory/ApprovedIcon.css

@@ -1,3 +1,3 @@
 .root {
-  color: var(--v2-palette-success-main);
+  color: var(--palette-success-500);
 }

src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css

@@ -3,6 +3,6 @@
 }
 
 .historyIcon {
-  color: var(--v2-palette-text-secondary);
+  color: var(--palette-text-100);
   margin-right: 10px;
 }

src/core/client/admin/App/DecisionHistory/DecisionItem.css

@@ -1,5 +1,5 @@
 .root {
-  padding: var(--v2-spacing-2) var(--v2-spacing-1);
+  padding: var(--spacing-2) var(--spacing-1);
 }
 
 .leftCol {
@@ -8,5 +8,5 @@
   flex-grow: 0;
   flex-shrink: 0;
   padding-top: 3px;
-  margin-right: var(--v2-spacing-2);
+  margin-right: var(--spacing-2);
 }

src/core/client/admin/App/DecisionHistory/DecisionList.css

@@ -1,4 +1,4 @@
-$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+$decisionHistoryBorderColor: var(--palette-grey-300);
 
 .root {
   margin: 0;

src/core/client/admin/App/DecisionHistory/DotDivider.css

@@ -1,7 +1,7 @@
 .root {
   height: 100%;
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  color: var(--v2-colors-mono-100);
+  color: var(--palette-text-100);
-  padding: 0 var(--v2-spacing-1);
+  padding: 0 var(--spacing-1);
 }

src/core/client/admin/App/DecisionHistory/Empty.css

@@ -3,8 +3,8 @@
 }
 
 .text {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
 }

src/core/client/admin/App/DecisionHistory/Footer.css

@@ -1,3 +1,3 @@
 .root {
-  margin-top: var(--v2-spacing-1);
+  margin-top: var(--spacing-1);
 }

src/core/client/admin/App/DecisionHistory/GoToCommentLink.css

@@ -1,10 +1,10 @@
-$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
 
 .root {
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
   color: $moderateCardDecisionHistoryLinkTextColor;
-  font-style: var(--v2-font-style-underline);
+  font-style: var(--font-style-underline);
 }

src/core/client/admin/App/DecisionHistory/Info.css

@@ -8,9 +8,9 @@
   word-break: break-all;
   /* Fallback end */
   word-break: break-word;
-  color: var(--v2-palette-text-primary);
+  color: var(--palette-text-500);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
 }

src/core/client/admin/App/DecisionHistory/RejectedIcon.css

@@ -1,3 +1,3 @@
 .root {
-  color: var(--v2-palette-error-main);
+  color: var(--palette-error-500);
 }

src/core/client/admin/App/DecisionHistory/ShowMoreButton.css

@@ -1,20 +1,20 @@
-$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
-$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300);
+$moderateCardDecisionHistoryBorderColor: var(--palette-grey-300);
 
 .root {
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   text-transform: uppercase;
   color: $moderateCardDecisionHistoryLinkTextColor;
   width: 100%;
   border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
   text-align: center;
-  padding-top: var(--v2-spacing-1);
+  padding-top: var(--spacing-1);
-  padding-bottom: var(--v2-spacing-1);
+  padding-bottom: var(--spacing-1);
 
   &:disabled {
-    color: var(--v2-palette-grey-lighter);
+    color: var(--palette-grey-300);
   }
 }

src/core/client/admin/App/DecisionHistory/Timestamp.css

@@ -1,9 +1,9 @@
-$timestampColor: var(--v2-colors-mono-100);
+$timestampColor: var(--palette-text-100);
 
 .root {
   color: $timestampColor;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 }

src/core/client/admin/App/DecisionHistory/Title.css

@@ -1,23 +1,23 @@
-$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+$decisionHistoryBorderColor: var(--palette-grey-300);
-$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
+$decisionHistoryTitleBackgroundColor: var(--palette-grey-200);
 
 .root {
   background: $decisionHistoryTitleBackgroundColor;
-  padding: var(--v2-spacing-1);
+  padding: var(--spacing-1);
-  color: var(--v2-palette-text-primary);
+  color: var(--palette-text-500);
   border-bottom: 1px solid $decisionHistoryBorderColor;
-  font-size: var(--v2-font-size-icon-medium);
 }
 
 .icon {
-  margin-right: var(--v2-spacing-2);
+  font-size: var(--font-size-icon-md);
+  margin-right: var(--spacing-2);
 }
 
 .text {
   text-transform: uppercase;
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  color: var(--v2-palette-text-primary);
+  color: var(--palette-text-500);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
   line-height: 1;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
 }

src/core/client/admin/App/DecisionHistory/Username.css

@@ -1,9 +1,9 @@
-$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
+$moderateCardDecisionHistoryColor: var(--palette-text-900);
 
 .root {
   color: $moderateCardDecisionHistoryColor;
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
 }

src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from "react";
+
 import useNotification from "./useNotification";
 
 const NotificationContainer: FunctionComponent<{}> = () => {

src/core/client/admin/App/Main.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { LogoHorizontal } from "coral-ui/components";
+import { LogoHorizontal } from "coral-ui/components/v2";
 import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";
 
 import { DecisionHistoryButton } from "./DecisionHistory";

src/core/client/admin/App/UserMenu/UserMenu.css

@@ -1,4 +1,4 @@
-$userMenuButtonColor: var(--v2-colors-mono-100);
+$userMenuButtonColor: var(--palette-text-100);
 
 .button {
   padding-top: 0;
@@ -11,9 +11,9 @@ $userMenuButtonColor: var(--v2-colors-mono-100);
 }
 
 .buttonText {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   color: $userMenuButtonColor;
-  font-size: var(--v2-font-size-4);
+  font-size: var(--font-size-4);
   margin-left: 2px;
   margin-right: 1px;
 }

src/core/client/admin/App/Version.css

@@ -1,6 +1,6 @@
 .version {
-  font-size: calc(10rem / var(--rem-base));
+  font-size: 0.625rem;
-  color: var(--palette-text-secondary);
+  color: var(--palette-text-100);
   text-align: center;
   padding-bottom: var(--spacing-3);
 }

src/core/client/admin/App/Version.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
+import { Typography } from "coral-ui/components/v2";
 
 import styles from "./Version.css";
 

src/core/client/admin/components/AuthBox.css

@@ -1,8 +1,8 @@
 .container {
   width: 385px;
-  background-color: var(--v2-colors-grey-100);
+  background-color: var(--palette-grey-100);
-  border: 1px solid var(--v2-colors-grey-300);
+  border: 1px solid var(--palette-grey-300);
   margin-top: 70px;
-  padding: var(--v2-spacing-6);
+  padding: var(--spacing-6);
   box-sizing: border-box;
 }

src/core/client/admin/components/Comment/CommentContent.css

@@ -1,20 +1,20 @@
-$comment-content: var(--v2-colors-mono-900);
+$comment-content: var(--palette-text-900);
-$comment-blockquote-bg: var(--v2-colors-grey-100);
+$comment-blockquote-bg: var(--palette-grey-100);
-$comment-highlight-bg: var(--v2-colors-yellow-500);
+$comment-highlight-bg: var(--palette-warning-500);
-$comment-link: var(--v2-palette-primary-main);
+$comment-link: $colors-teal-700;
-$comment-link-active: var(--v2-palette-primary-darkest);
+$comment-link-active: $colors-teal-900;
 
 .root {
-  composes: bodyCommentV2 from "~coral-ui/shared/typography.css";
+  font-size: var(--font-size-3);
-  font-family: var(--v2-font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-body-comment);
+  line-height: var(--line-height-comment-body);
   color: $comment-content;
   overflow-wrap: break-word;
 
   b,
   strong {
-    font-weight: var(--v2-font-weight-primary-bold);
+    font-weight: var(--font-weight-primary-bold);
   }
   i,
   em {

src/core/client/admin/components/Comment/InReplyTo.css

@@ -1,24 +1,24 @@
-$moderateCardIconColor: var(--v2-colors-mono-100);
+$moderateCardIconColor: var(--palette-text-100);
-$moderateCardInReplyToColor: var(--v2-colors-mono-100);
+$moderateCardInReplyToColor: var(--palette-text-100);
-$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500);
+$moderateCardInReplyToUsernameColor: var(--palette-text-500);
-$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
 
 .icon {
   color: $moderateCardIconColor;
 }
 .inReplyTo {
   color: $moderateCardInReplyToColor;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 }
 .username {
   color: $moderateCardInReplyToUsernameColor;
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 
   padding: var(--spacing-1);
 
@@ -38,5 +38,5 @@ $moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
 .usernameButton {
   vertical-align: baseline;
 
-  margin-left: calc(-1 * var(--v2-spacing-1));
+  margin-left: calc(-1 * var(--spacing-1));
 }

src/core/client/admin/components/Comment/Username.css

@@ -1,9 +1,9 @@
-$moderateCardUsernameColor: var(--v2-colors-mono-900);
+$moderateCardUsernameColor: var(--palette-text-900);
 
 .root {
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $moderateCardUsernameColor;
 }

src/core/client/admin/components/Comment/UsernameButton.css

@@ -1,21 +1,21 @@
-$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
 
 .root {
   margin-right: var(--mini-unit);
   padding: var(--spacing-1);
-  margin-left: calc(-1 * var(--v2-spacing-1));
+  margin-left: calc(-1 * var(--spacing-1));
 
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 
   &:hover {
     background-color: $moderateCardUsernameBackgroundHover;
-    border-radius: var(--v2-round-corners);
+    border-radius: var(--round-corners);
     border-style: none;
   }
 
   &:active {
     background-color: $moderateCardUsernameBackgroundHover;
-    border-radius: var(--v2-round-corners);
+    border-radius: var(--round-corners);
     border-style: none;
   }
 }

src/core/client/admin/components/Comment/UsernameButton.tsx

@@ -2,6 +2,7 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { BaseButton } from "coral-ui/components/v2";
+
 import Username from "./Username";
 
 import styles from "./UsernameButton.css";

src/core/client/admin/components/ConversationModal/ConversationModal.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Modal } from "coral-ui/components";
+import { Modal } from "coral-ui/components/v2";
 
 import ConversationModalQuery from "./ConversationModalQuery";
 

src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css

@@ -1,31 +1,31 @@
-$conversationModalHighlightBackground: var(--v2-colors-teal-100);
+$conversationModalHighlightBackground: $colors-teal-100;
-$conversationModalCommentText: var(--v2-colors-mono-500);
+$conversationModalCommentText: var(--palette-text-500);
 .root {
   flex: 1;
 }
 
 .line {
-  border-color: var(--v2-colors-grey-400);
+  border-color: var(--palette-grey-400);
 }
 
 .adornments {
-  margin-right: var(--v2-spacing-2);
+  margin-right: var(--spacing-2);
 }
 
 .circle {
-  margin-top: var(--v2-spacing-2);
+  margin-top: var(--spacing-2);
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .highlightedCircle {
-  margin-top: var(--v2-spacing-1);
+  margin-top: var(--spacing-1);
 }
 
 .highlighted {
   background-color: $conversationModalHighlightBackground;
-  padding: var(--v2-spacing-2);
+  padding: var(--spacing-2);
-  padding-top: var(--v2-spacing-1);
+  padding-top: var(--spacing-1);
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .commentText {
@@ -33,5 +33,5 @@ $conversationModalCommentText: var(--v2-colors-mono-500);
 }
 
 .showReplies {
-  padding-left: var(--v2-spacing-2);
+  padding-left: var(--spacing-2);
 }

src/core/client/admin/components/ConversationModal/ConversationModalContainer.css

@@ -1,10 +1,10 @@
 .root {
 }
 .topCircle {
-  margin-right: var(--v2-spacing-2);
+  margin-right: var(--spacing-2);
 }
 
 .bottomCircleContainer {
   width: 8px;
-  padding-top: var(--v2-spacing-1);
+  padding-top: var(--spacing-1);
 }

src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css

@@ -1,17 +1,17 @@
-$modal-header-text: var(--v2-colors-mono-900);
+$modal-header-text: var(--palette-text-900);
 
 .title {
-  font-size: var(--v2-font-size-4);
+  font-size: var(--font-size-4);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--v2-line-height-title);
+  line-height: var(--line-height-5);
   color: $modal-header-text;
   margin: 0;
 }
 
 .conversationTitle {
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
   text-transform: uppercase;
   display: block;
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }

src/core/client/admin/components/ConversationModal/ConversationModalQuery.css

@@ -4,5 +4,5 @@
 }
 
 .body {
-  padding: var(--v2-spacing-4);
+  padding: var(--spacing-4);
 }

src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css

@@ -1,7 +1,7 @@
 .comment {
-  padding-left: calc(var(--v2-spacing-4));
+  padding-left: calc(var(--spacing-4));
 }
 
 .footer {
-  padding-left: calc(var(--v2-spacing-4));
+  padding-left: calc(var(--spacing-4));
 }

src/core/client/admin/components/ModalBodyText.css

@@ -1,9 +1,9 @@
-$modal-body-text: var(--v2-colors-mono-500);
+$modal-body-text: $colors-mono-500;
 
 .root {
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
   color: $modal-body-text;
 }

src/core/client/admin/components/ModalHeader.css

@@ -1,10 +1,10 @@
-$modal-text: var(--v2-colors-mono-500);
+$modal-text: $colors-mono-500;
 
 .root {
-  font-size: var(--v2-font-size-5);
+  font-size: var(--font-size-5);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  line-height: var(--v2-line-height-title);
+  line-height: var(--line-height-title);
   color: $modal-text;
   margin: 0;
 }

src/core/client/admin/components/ModalHeaderUsername.css

@@ -1,8 +1,8 @@
-$status-modal-username: var(--v2-colors-mono-900);
+$status-modal-username: $colors-mono-900;
 
 .root {
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
   color: $status-modal-username;
   font-size: 1.4rem;
 }

src/core/client/admin/components/ModerateCard/ApproveButton.css

@@ -1,9 +1,9 @@
-$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
+$moderateCardButtonOutlineApproveColor: var(--palette-success-500);
 
 .root {
   border: 1px solid $moderateCardButtonOutlineApproveColor;
   box-sizing: border-box;
-  border-radius: var(--v2-round-corners);
+  border-radius: var(--round-corners);
   width: 65px;
   height: 50px;
   display: flex;
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
   color: $moderateCardButtonOutlineApproveColor;
   &:not(:disabled):active {
     background-color: $moderateCardButtonOutlineApproveColor;
-    color: var(--v2-colors-pure-white);
+    color: var(--palette-text-000);
   }
 }
 
 .readOnly {
   background-color: transparent;
-  border-color: var(--v2-colors-grey-300);
+  border-color: $colors-grey-300);
-  color: var(--v2-colors-grey-300);
+  color: $colors-grey-300);
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.readOnly {
+  background-color: transparent;
+  border-color: $colors-grey-300;
+  color: $colors-grey-300;
 
   &:hover {
     cursor: not-allowed;
@@ -29,10 +39,10 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
 .invert {
   background-color: $moderateCardButtonOutlineApproveColor;
   border-color: $moderateCardButtonOutlineApproveColor;
-  color: var(--v2-colors-pure-white);
+  color: var(--palette-text-000);
 }
 
 .icon {
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
   color: inherit;
 }

src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css

@@ -1,3 +1,3 @@
 .authorStatus {
   padding-right: var(--spacing-2);
-}
+}

src/core/client/admin/components/ModerateCard/FeatureButton.css

@@ -3,7 +3,7 @@
   right: 0px;
   top: 2px;
 
-  border: 1px solid var(--v2-palette-grey-main);
+  border: 1px solid var(--palette-grey-500);
   box-sizing: border-box;
   border-radius: var(--round-corners);
   padding: 2px var(--spacing-2) 2px var(--spacing-2);
@@ -11,34 +11,34 @@
   justify-content: center;
   align-items: center;
 
-  color: var(--v2-palette-grey-main);
+  color: var(--palette-grey-500);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   line-height: 1.2;
 
   &:active {
-    background-color: var(--v2-palette-primary-lightest);
+    background-color: $colors-teal-100;
-    border-color: var(--v2-palette-primary-main);
+    border-color: $colors-teal-700;
-    color: var(--v2-palette-primary-main);
+    color: $colors-teal-700;
   }
 
   &:disabled {
     cursor: not-allowed;
     background-color: transparent;
-    border-color: var(--v2-colors-grey-300);
+    border-color: var(--palette-grey-300);
-    color: var(--v2-colors-grey-300);
+    color: var(--palette-grey-300);
   }
 }
 
 .invert {
-  background-color: var(--v2-palette-primary-main);
+  background-color: $colors-teal-700;
-  border-color: var(--v2-palette-primary-main);
+  border-color: $colors-teal-700;
-  color: var(--v2-palette-text-light);
+  color: var(--palette-text-000);
 
   &:disabled {
-    color: var(--v2-colors-pure-white);
+    color: var(--palette-text-000);
-    border-color: var(--v2-colors-grey-300);
+    border-color: var(--palette-grey-300);
-    background-color: var(--v2-colors-grey-300);
+    background-color: var(--palette-grey-300);
   }
 }

src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css

@@ -1,9 +1,9 @@
-$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);
+$moderateCardFlagsCategoryColor: var(--palette-text-500);
 
 .category {
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-6);
   color: $moderateCardFlagsCategoryColor;
 }

src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css

@@ -1,3 +1,3 @@
 .detailsDivider {
-  border-top: 1px solid var(--v2-colors-grey-100);
+  border-top: 1px solid $colors-grey-100;
 }

src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css

@@ -1,39 +1,40 @@
-$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
+$moderateCardFlagUsernameColor: var(--palette-text-900);
-$moderateCardReasonTextColor: var(--v2-colors-mono-500);
+$moderateCardReasonTextColor: var(--palette-text-500);
 
 .user {
   color: $moderateCardFlagUsernameColor;
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  line-height: var(--v2-line-height-title);
+  line-height: var(--line-height-3);
   padding-right: calc(0.5 * var(--mini-unit));
 }
 
 .details {
   color: $moderateCardReasonTextColor;
+
   display: block;
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-title);
+  line-height: var(--line-height-3);
 }
 
 .flagger {
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   margin-right: var(--mini-unit);
-  padding: var(--v2-spacing-1);
+  padding: var(--spacing-1);
-  margin-left: calc(-1 * var(--v2-spacing-1));
+  margin-left: calc(-1 * var(--spacing-1));
 
   &:hover {
-    background-color: var(--v2-palette-grey-lightest);
+    background-color: var(--palette-grey-200);
-    border-radius: var(--v2-round-corners);
+    border-radius: var(--round-corners);
     border-style: none;
   }
 
   &:active {
-    background-color: var(--v2-palette-grey-lighter);
+    background-color: var(--palette-grey-300);
-    border-radius: var(--v2-round-corners);
+    border-radius: var(--round-corners);
     border-style: none;
   }
 }

src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css

@@ -1,8 +1,8 @@
 .label {
-  font-size: calc(16rem / var(--rem-base));
+  font-size: var(--font-size-3);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--font-family-primary);
-  color: var(--palette-text-primary);
+  color: var(--palette-text-500);
 }
 
 .buttonContainer {

src/core/client/admin/components/ModerateCard/Markers.css

@@ -1,9 +1,10 @@
-$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
+$moderateCardDetailsHeaderColor: var(--palette-text-500);
+$moderateCardDetailsDividerColor: var(--palette-grey-100);
 
 .detailsButton {
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
   line-height: 1.28;
   height: 100%;
   padding: 2px 0px;

src/core/client/admin/components/ModerateCard/Media.css

@@ -1,5 +1,5 @@
 .embed {
-  margin: var(--v2-spacing-2) 0;
+  margin: var(--spacing-2) 0;
 }
 
 .toggle {
@@ -16,14 +16,14 @@
 }
 
 .playIcon {
-  color: var(--v2-colors-pure-white);
+  color: var(--palette-text-000);
 }
 
 .playText {
-  color: var(--v2-colors-pure-white);
+  color: var(--palette-text-000);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   text-transform: uppercase;
   margin: 0;
 }

src/core/client/admin/components/ModerateCard/ModerateCard.css

@@ -1,18 +1,18 @@
-$moderateCardTimestampColor: var(--v2-colors-mono-100);
+$moderateCardTimestampColor: var(--palette-text-100);
-$moderateCardEditedColor: var(--v2-colors-mono-100);
+$moderateCardEditedColor: var(--palette-text-100);
-$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
+$moderateCardAuthorStatusColor: var(--palette-text-100);
-$moderateCardDecisionColor: var(--v2-colors-mono-500);
+$moderateCardDecisionColor: var(--palette-text-500);
-$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
+$moderateCardStoryTitleColor: var(--palette-text-500);
-$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
-$moderateCardLinkTextColor: var(--v2-colors-teal-700);
+$moderateCardLinkTextColor: $colors-teal-700;
 
 .topBar {
   position: relative;
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }
 
 .topBarMini {
-  margin-bottom: var(--v2-spacing-4);
+  margin-bottom: var(--spacing-4);
 }
 
 .inReplyTo {
@@ -25,7 +25,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 .mainContainer {
   flex-grow: 1;
 
-  margin-right: calc(2 * var(--v2-spacing-5));
+  margin-right: calc(2 * var(--spacing-5));
 }
 
 .contentArea {
@@ -52,7 +52,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
     No reply to field, so we align below the fattest element
     which is the feature button.
   */
-  padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
+  padding-top: calc(var(--font-size-2) + 7px + var(--spacing-4));
 }
 
 .asideMiniWithReplyTo {
@@ -60,14 +60,14 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
     We have reply to field, so we align below the fattest
     element plus the reply to field.
   */
-  padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
+  padding-top: calc(2 * var(--font-size-2) + 5px + var(--spacing-4));
 }
 
 .decision {
   color: $moderateCardDecisionColor;
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   line-height: 1.14;
   text-transform: uppercase;
 }
@@ -75,13 +75,13 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 .separator {
   position: absolute;
   top: 0;
-  right: calc(-1 * var(--v2-spacing-5));
+  right: calc(-1 * var(--spacing-5));
   bottom: 0;
   width: 2px;
 }
 
 .ruledSeparator {
-  border-right: 1px solid var(--v2-colors-grey-400);
+  border-right: 1px solid var(--palette-grey-400);
 }
 
 .root {
@@ -93,53 +93,53 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 }
 
 .dangling {
-  background-color: var(--v2-palette-grey-lightest);
+  background-color: var(--palette-grey-200);
   box-shadow: none;
 }
 
 .link {
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $moderateCardLinkTextColor;
   text-transform: uppercase;
 }
 
 .viewContext {
-  padding-bottom: var(--v2-spacing-1);
+  padding-bottom: var(--spacing-1);
 }
 
 .storyLabel {
-  color: var(--v2-palette-grey-main);
+  color: var(--palette-grey-500);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
   text-transform: uppercase;
 }
 
 .commentOn {
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  margin-bottom: var(--v2-spacing-1);
+  margin-bottom: var(--spacing-1);
 }
 
 .siteName {
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
 }
 
 .storyTitle {
+  font-weight: var(--font-weight-primary-semi-bold);
   color: $moderateCardStoryTitleColor;
-  font-weight: var(--v2-font-weight-primary-semi-bold);
 }
 
 .borderless {
   border-width: 0px;
   box-shadow: none;
-  padding: var(--v2-spacing-2) 0;
+  padding: var(--spacing-2) 0;
 }
 
 .miniButton {
@@ -149,19 +149,19 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 
 .timestamp {
   color: $moderateCardTimestampColor;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 }
 
 .edited {
   color: $moderateCardEditedColor;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  padding-left: var(--v2-spacing-2);
+  padding-left: var(--spacing-2);
 }
 
 .selected {
@@ -171,17 +171,17 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
 .authorStatus {
   padding-right: var(--spacing-2);
   color: $moderateCardAuthorStatusColor;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  padding-left: var(--v2-spacing-2);
+  padding-left: var(--spacing-2);
 }
 
 .deleted {
-  background: var(--v2-palette-grey-lightest);
+  background: var(--palette-grey-200);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
 }

src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css

@@ -1,4 +1,4 @@
 .button {
   text-transform: uppercase;
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
 }

src/core/client/admin/components/ModerateCard/ModeratedByContainer.css

@@ -1,20 +1,20 @@
-$moderated-by: var(--v2-colors-mono-100);
+$moderated-by: var(--palette-text-100);
-$moderated-by-username: var(--v2-colors-mono-900);
+$moderated-by-username: var(--palette-text-900);
 
 .moderatedBy {
-  font-size: var(--v2-font-size-1);
+  font-size: var(--font-size-1);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $moderated-by;
   text-transform: uppercase;
 }
 
 .moderatedByUsername {
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $moderated-by-username;
   text-align: center;
   padding-top: 1px;

src/core/client/admin/components/ModerateCard/RejectButton.css

@@ -1,9 +1,9 @@
-$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
+$moderateCardButtonOutlineRejectColor: var(--palette-error-500);
 
 .root {
   border: 1px solid $moderateCardButtonOutlineRejectColor;
   box-sizing: border-box;
-  border-radius: var(--v2-round-corners);
+  border-radius: var(--round-corners);
   width: 65px;
   height: 50px;
   display: flex;
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
   color: $moderateCardButtonOutlineRejectColor;
   &:not(:disabled):active {
     background-color: $moderateCardButtonOutlineRejectColor;
-    color: var(--v2-colors-pure-white);
+    color: var(--palette-text-000);
   }
 }
 
 .readOnly {
   background-color: transparent;
-  border-color: var(--v2-colors-grey-300);
+  border-color: $colors-grey-300);
-  color: var(--v2-colors-grey-300);
+  color: $colors-grey-300);
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.readOnly {
+  background-color: transparent;
+  border-color: $colors-grey-300;
+  color: $colors-grey-300;
 
   &:hover {
     cursor: not-allowed;
@@ -28,8 +38,8 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
 
 .invert {
   background-color: $moderateCardButtonOutlineRejectColor;
+  color: var(--palette-text-000);
   border-color: $moderateCardButtonOutlineRejectColor;
-  color: var(--v2-colors-pure-white);
 }
 
 .icon {

src/core/client/admin/components/ModerateCard/ToxicityLabel.css

@@ -1,11 +1,11 @@
-$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500);
+$moderateCardCounterBadgeBackgroundAlert: var(--palette-error-500);
-$moderateCardToxicityColor: var(--v2-colors-mono-500);
+$moderateCardToxicityColor: var(--palette-text-500);
 
 .root {
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
   color: $moderateCardToxicityColor;
 }
 

src/core/client/admin/components/NotAvailable.css

@@ -1,4 +1,4 @@
-$tableBodyDisabledColor: var(--v2-colors-mono-100);
+$tableBodyDisabledColor: var(--palette-text-100);
 
 .root {
   color: $tableBodyDisabledColor;

src/core/client/admin/components/NotAvailable.tsx

@@ -3,6 +3,8 @@ import React, { FunctionComponent } from "react";
 
 import styles from "./NotAvailable.css";
 
+// TODO: (cvle) remove color styles from here. Color should be applied externally.
+
 const NotAvailable: FunctionComponent = (props) => (
   <Localized id="general-notAvailable">
     <span className={styles.root}>Not available</span>

src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css

@@ -1,5 +1,5 @@
 .root {
-  margin-top: var(--v2-spacing-2);
+  margin-top: var(--spacing-2);
 }
 
 .dropdown {
@@ -15,18 +15,18 @@
 }
 
 .button {
-  color: var(--v2-colors-mono-500) !important;
+  color: var(--palette-text-500) !important;
   border-width: 0;
   width: calc(20 * var(--mini-unit));
-  margin-right: calc(var(--v2-spacing-1) / 2);
+  margin-right: calc(var(--spacing-1) / 2);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-min);
+  line-height: var(--line-height-min);
   justify-content: space-between;
 }
 
 .buttonIconLeft {
   width: 20px;
-  margin-right: calc(var(--v2-spacing-1) / 2);
+  margin-right: calc(var(--spacing-1) / 2);
 }
 
 .buttonIconRight {

src/core/client/admin/components/Timeline/Circle.css

@@ -9,11 +9,11 @@
 }
 
 .colorReg {
-  color: var(--v2-colors-grey-500);
+  color: var(--palette-grey-500);
 }
 
 .colorLight {
-  color: var(--v2-colors-grey-400);
+  color: var(--palette-grey-400);
 }
 
 .root {

src/core/client/admin/components/Timeline/Line.css

@@ -1,6 +1,6 @@
 .root {
-  border-left: 1px solid var(--palette-grey-main);
+  border-left: 1px solid var(--palette-grey-500);
-  border-right: 1px solid var(--palette-grey-main);
+  border-right: 1px solid var(--palette-grey-500);
   flex: 1;
 }
 

src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css

@@ -1,33 +1,33 @@
-$moderator-note-bg: var(--v2-colors-grey-100);
+$moderator-note-bg: var(--palette-grey-100);
-$moderator-note-body: var(--v2-colors-mono-500);
+$moderator-note-body: var(--palette-text-500);
-$moderator-note-dot: var(--v2-colors-mono-100);
+$moderator-note-dot: var(--palette-text-100);
-$moderator-note-username: var(--v2-colors-mono-900);
+$moderator-note-username: var(--palette-text-900);
 
 .root {
 }
 
 .body {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
   background-color: $moderator-note-bg;
   border-radius: 4px;
-  padding: var(--v2-spacing-3);
+  padding: var(--spacing-3);
   color: $moderator-note-body;
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .bodyType {
 }
 
 .leftBy {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  padding-left: var(--v2-spacing-4);
+  padding-left: var(--spacing-4);
-  padding-right: var(--v2-spacing-1);
+  padding-right: var(--spacing-1);
   position: relative;
   color: $moderator-note-body;
 }
@@ -39,19 +39,19 @@ $moderator-note-username: var(--v2-colors-mono-900);
   background-color: ;
   position: absolute;
   border-radius: 50%;
-  left: var(--v2-spacing-1);
+  left: var(--spacing-1);
   background-color: $moderator-note-dot;
   top: 50%;
 }
 
 .username {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
   color: $moderator-note-username;
 }
 
 .footerLeft {
-  padding-left: var(--v2-spacing-3);
+  padding-left: var(--spacing-3);
 }

src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css

@@ -1,44 +1,44 @@
-$recent-history-title: var(--v2-colors-mono-500);
+$recent-history-title: var(--palette-text-500);
-$recent-history-subtitle: var(--v2-colors-mono-100);
+$recent-history-subtitle: var(--palette-text-100);
-$recent-history-info: var(--v2-colors-mono-500);
+$recent-history-info: var(--palette-text-500);
-$recent-history-triggered: var(--v2-palette-error-main);
+$recent-history-triggered: var(--palette-error-500);
 
 .title {
   text-transform: uppercase;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
   margin: 0;
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
   color: $recent-history-title;
 }
 
 .subTitle {
   color: $recent-history-subtitle;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
   margin: 0;
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
 }
 
 .info {
 }
 
 .amount {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $recent-history-info;
   margin: 0;
 }
 
 .amountLabel {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
   color: $recent-history-info;
   margin: 0;
 }

src/core/client/admin/components/UserHistoryDrawer/Tabs.css

@@ -1,4 +1,4 @@
-$indicator-dot: var(--v2-colors-blue-400);
+$indicator-dot: $colors-teal-500;
 
 .root {
   height: 100%;
@@ -23,7 +23,7 @@ $indicator-dot: var(--v2-colors-blue-400);
 }
 
 .tabIcon {
-  margin-right: var(--v2-spacing-1);
+  margin-right: var(--spacing-1);
 }
 
 .tabContent {
@@ -32,7 +32,7 @@ $indicator-dot: var(--v2-colors-blue-400);
 }
 
 .container {
-  height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3));
+  height: calc(100% - var(--spacing-2) - var(--spacing-3));
 
   display: flex;
   flex-direction: column;
@@ -41,8 +41,8 @@ $indicator-dot: var(--v2-colors-blue-400);
 
   overflow: hidden;
 
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
-  margin-top: var(--v2-spacing-3);
+  margin-top: var(--spacing-3);
 }
 
 .scrollable {

src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css

@@ -1,7 +1,7 @@
 .tableHeader {
   border-width: 0px;
   border-style: none;
-  background-color: var(--palette-grey-lightest);
+  background-color: var(--palette-grey-200);
 }
 
 .row:first-child:hover {

src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css

@@ -4,7 +4,7 @@
 
 .callout {
   width: 100%;
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
   align-content: center;
   text-align: center;
 }

src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css

@@ -3,7 +3,7 @@
 
 .textArea {
   width: 100%;
-  margin-bottom: var(--v2-spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .textArea:focus {
@@ -11,6 +11,6 @@
 }
 
 .form {
-  padding: var(--v2-spacing-2) 0;
+  padding: var(--spacing-2) 0;
-  margin-bottom: var(--v2-spacing-4);
+  margin-bottom: var(--spacing-4);
 }

src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css

@@ -1,5 +1,5 @@
 .root {
-  
+
 }
 
 .spinner {
@@ -8,7 +8,7 @@
 
 .callout {
   width: 100%;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--font-family-primary);
   align-content: center;
   text-align: center;
-}
+}

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css

@@ -1,4 +1,4 @@
-$user-drawer-background: var(--v2-colors-pure-white);
+$user-drawer-background: $colors-pure-white;
 
 .root {
   position: fixed;

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx

@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Modal } from "coral-ui/components";
+import { Card, Modal } from "coral-ui/components/v2";
-import { Card } from "coral-ui/components/v2";
 
 import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery";
 

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css

@@ -4,11 +4,11 @@
 
 .loadMore {
   width: 100%;
-  background-color: var(--palette-common-white);
+  background-color: $colors-pure-white;
 
   border-width: 1px;
   border-style: solid;
-  border-color: var(--palette-grey-lighter);
+  border-color: var(--palette-grey-300);
   border-radius: var(--round-corners);
 
   margin-top: var(--spacing-1);

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css

@@ -4,7 +4,7 @@
 
 .callout {
   width: 100%;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--font-family-primary);
   align-content: center;
   text-align: center;
-}
+}

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css

@@ -1,7 +1,7 @@
-$user-drawer-background: var(--v2-colors-pure-white);
+$user-drawer-background: $colors-pure-white;
-$user-drawer-account-info: var(--v2-colors-mono-500);
+$user-drawer-account-info: var(--palette-text-500);
-$user-drawer-divider: var(--v2-colors-grey-300);
+$user-drawer-divider: var(--palette-grey-300);
-$user-drawer-status-label: var(--v2-colors-mono-500);
+$user-drawer-status-label: var(--palette-text-500);
 
 .comments {
   flex: auto;
@@ -26,20 +26,20 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
 }
 
 .username {
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 }
 
 .userDetail {
 }
 
 .userDetailValue {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $user-drawer-account-info;
 }
 
@@ -58,12 +58,12 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
 }
 
 .userStatusLabel {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
   color: $user-drawer-status-label;
-  margin-right: var(--v2-spacing-1);
+  margin-right: var(--spacing-1);
 }
 
 .userStatusChange {

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css

@@ -1,6 +1,6 @@
 .root {
   width: 100%;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--font-family-primary);
   align-content: center;
   text-align: center;
 }

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css

@@ -4,11 +4,11 @@
 
 .loadMore {
   width: 100%;
-  background-color: var(--palette-common-white);
+  background-color: $colors-pure-white;
 
   border-width: 1px;
   border-style: solid;
-  border-color: var(--palette-grey-lighter);
+  border-color: var(--palette-grey-300);
   border-radius: var(--round-corners);
 
   margin-top: var(--spacing-1);

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css

@@ -4,7 +4,7 @@
 
 .callout {
   width: 100%;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--font-family-primary);
   align-content: center;
   text-align: center;
-}
+}

src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css

@@ -1,14 +1,14 @@
-$user-status-details: var(--v2-colors-mono-500);
+$user-status-details: var(--palette-text-500);
 
 .root {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
   color: $user-status-details;
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-4);
-  margin: 0 0 var(--v2-spacing-1) 0;
+  margin: 0 0 var(--spacing-1) 0;
 }
 
 .root strong {
-  font-weight: var(--v2-font-weight-primary-bold);
+  font-weight: var(--font-weight-primary-bold);
 }

src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css

@@ -1,7 +1,7 @@
 .tableLight {
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-primary-regular);
 }
 
 .usernameCell {
   line-height: calc(18em / 14);
-}
+}

src/core/client/admin/components/UserRole/SiteModeratorModal.css

@@ -1,5 +1,5 @@
 .root {
   max-width: 500px;
-  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
-    var(--v2-spacing-3);
+    var(--spacing-3);
 }

src/core/client/admin/components/UserRole/UserRoleText.css

@@ -1,12 +1,12 @@
-$tableBodyTextColor: var(--v2-colors-mono-500);
+$tableBodyTextColor: var(--palette-text-500);
 
 .root {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
   color: $tableBodyTextColor;
 }
 
 .commenter {
   color: $tableBodyTextColor;
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
 }

src/core/client/admin/components/UserStatus/BanModal.css

@@ -1,10 +1,10 @@
-$ban-modal-text: var(--v2-colors-mono-500);
+$ban-modal-text: var(--palette-text-500);
 
 .bodyText {
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
   color: $ban-modal-text;
 }
 

src/core/client/admin/components/UserStatus/ChangeStatusModal.css

@@ -1,5 +1,5 @@
 .root {
   max-width: 500px;
-  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
-    var(--v2-spacing-3);
+    var(--spacing-3);
 }

src/core/client/admin/components/UserStatus/SuspendForm.css

@@ -1,3 +1,5 @@
+$suspend-modal-text: var(--palette-text-500);
+
 .radioButton {
   margin: 0 var(--spacing-1) 0 0 !important;
 }
@@ -13,6 +15,15 @@
   margin: 0 0 var(--spacing-3) 0 !important;
 }
 
+.subTitle {
+  font-size: var(--font-size-4);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  line-height: var(--line-height-5);
+  color: $suspend-modal-text;
+  margin: 0;
+}
+
 .footer {
   margin-top: var(--spacing-3);
 }

src/core/client/admin/components/UserStatus/SuspendModal.css

@@ -0,0 +1,37 @@
+$suspend-modal-text: var(--palette-text-500);
+
+.bodyText {
+  font-size: var(--font-size-3);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  line-height: var(--line-height-field-description);
+  color: $suspend-modal-text;
+}
+
+.subTitle {
+  font-size: var(--font-size-4);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  line-height: var(--line-height-5);
+  color: $suspend-modal-text;
+  margin: 0;
+}
+
+.radioButton {
+  margin: 0 var(--spacing-1) 0 0 !important;
+}
+
+.textArea {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(12 * var(--mini-unit));
+  padding: calc(0.5 * var(--mini-unit));
+}
+
+.header {
+  margin: 0 0 var(--spacing-3) 0 !important;
+}
+
+.footer {
+  margin-top: var(--spacing-3);
+}

src/core/client/admin/components/UserStatus/UserStatus.css

@@ -1,20 +1,20 @@
 .root {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-size: var(--v2-font-size-2);
+  font-size: var(--font-size-2);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
 }
 
 .success {
-  color: var(--v2-palette-success-main);
+  color: var(--palette-success-500);
 }
 
 .warning {
-  color: var(--v2-palette-error-main);
+  color: var(--palette-error-500);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
 }
 
 .error {
-  color: var(--v2-palette-error-darkest);
+  color: var(--palette-error-700);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
 }

src/core/client/admin/components/UserStatus/UserStatusChange.css

@@ -1,4 +1,4 @@
-$status-change-button-border: var(--v2-colors-grey-400);
+$status-change-button-border: var(--palette-grey-400);
 
 .button {
   justify-content: space-between;
@@ -6,7 +6,7 @@ $status-change-button-border: var(--v2-colors-grey-400);
 }
 
 .bordered {
-  padding: 0 var(--v2-spacing-2);
+  padding: 0 var(--spacing-2);
   border: 1px solid $status-change-button-border;
 }
 

src/core/client/admin/index.tsx

@@ -11,7 +11,7 @@ import { initLocalState } from "./local";
 import localesData from "./locales";
 
 // Import css variables.
-import "coral-ui/theme/variables.css";
+import "coral-ui/theme/admin.css";
 
 async function main() {
   await injectConditionalPolyfills();

src/core/client/admin/routes/AuthCheck/NetworkError.tsx

@@ -1,7 +1,7 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Message } from "coral-ui/components";
+import { Message } from "coral-ui/components/v2";
 
 import styles from "./NetworkError.css";
 

src/core/client/admin/routes/AuthCheck/Restricted.css

@@ -1,52 +1,52 @@
 .title {
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  color: var(--v2-colors-mono-100);
+  color: var(--palette-text-100);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-title);
+  line-height: var(--line-height-4);
 
-  padding-bottom: var(--v2-spacing-3);
+  padding-bottom: var(--spacing-3);
 }
 
 .username {
-  font-size: var(--v2-font-size-6);
+  font-size: var(--font-size-6);
-  font-weight: var(--v2-font-weight-secondary-bold);
+  font-weight: var(--font-weight-secondary-bold);
-  font-family: var(--v2-font-family-secondary);
+  font-family: var(--font-family-secondary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-7);
-  color: var(--v2-colors-mono-900);
+  color: var(--palette-text-900);
 
   text-align: center;
 
-  padding-bottom: var(--v2-spacing-5);
+  padding-bottom: var(--spacing-5);
 }
 
 .copy {
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-4);
-  color: var(--v2-colors-mono-500);
+  color: var(--palette-text-500);
 
   text-align: center;
 }
 
 .lockIcon {
-  color: var(--v2-colors-mono-900);
+  color: var(--palette-text-900);
-  padding-bottom: var(--v2-spacing-2);
+  padding-bottom: var(--spacing-2);
 }
 
 .noPermission {
-  font-size: var(--v2-font-size-4);
+  font-size: var(--font-size-4);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-weight: var(--font-weight-primary-semi-bold);
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  line-height: var(--v2-line-height-reset);
+  line-height: var(--line-height-3);
-  color: var(--v2-colors-mono-900);
+  color: var(--palette-text-900);
 
   text-align: center;
 
-  padding-bottom: var(--v2-spacing-5);
+  padding-bottom: var(--spacing-5);
 }
 
 .contactAdmin {
-  padding-top: var(--v2-spacing-3);
+  padding-top: var(--spacing-3);
 }

src/core/client/admin/routes/Community/EmptyMessage.css

@@ -1,7 +1,7 @@
 .root {
-  font-family: var(--v2-font-family-primary);
+  font-family: var(--font-family-primary);
-  font-weight: var(--v2-font-weight-primary-regular);
+  font-weight: var(--font-weight-primary-regular);
-  font-size: var(--v2-font-size-3);
+  font-size: var(--font-size-3);
-  line-height: var(--v2-line-height-body-short);
+  line-height: var(--line-height-field-description);
   text-align: center;
 }

src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css

@@ -1,3 +1,3 @@
 .button {
-  padding: var(--v2-spacing-2);
+  padding: var(--spacing-2);
 }