Add Chromatic (#719)

.github/workflows/chromatic.yml

@@ -0,0 +1,41 @@
+---
+name: Chromatic
+
+on: push
+
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Set up Node
+        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
+        with:
+          node-version: "16"
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
+        with:
+          fetch-depth: 0
+
+      - name: Cache npm
+        id: npm-cache
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        with:
+          path: "~/.npm"
+          key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Node dependencies
+        run: npm ci
+        working-directory: ./components
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@c72f0b48c8887c0ef0abe18ad865a6c1e01e73c6
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: ./components
+          exitOnceUploaded: true
+          onlyChanged: true
+          externals: "[\"components/**/*.scss\", \"components/tailwind.config*.js\"]"

components/.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y"],
   framework: "@storybook/angular",
   core: {
     builder: "webpack5",

components/package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser": "^12.2.13",
         "@angular/platform-browser-dynamic": "^12.2.13",
         "@bitwarden/jslib-angular": "file:../angular",
+        "bootstrap": "4.6.0",
         "tslib": "^2.3.0"
       },
       "devDependencies": {
@@ -26,6 +27,7 @@
         "@angular/elements": "^12.2.13",
         "@babel/core": "^7.16.10",
         "@compodoc/compodoc": "^1.1.16",
+        "@storybook/addon-a11y": "^6.4.19",
         "@storybook/addon-actions": "^6.4.18",
         "@storybook/addon-essentials": "^6.4.18",
         "@storybook/addon-links": "^6.4.18",
@@ -37,6 +39,7 @@
         "@webcomponents/custom-elements": "^1.5.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.3",
+        "chromatic": "^6.5.2",
         "jasmine-core": "~3.10.0",
         "karma": "~6.3.0",
         "karma-chrome-launcher": "~3.1.0",
@@ -4757,6 +4760,46 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/@storybook/addon-a11y": {
+      "version": "6.4.19",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.4.19.tgz",
+      "integrity": "sha512-dG6easap6W4AqyggVZPq8lBrhza8StA8J4eYz/GVdoXINSGtq/casV0rkmY3+SUXhPYux5oGavHo86j5I4Q/0Q==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "6.4.19",
+        "@storybook/api": "6.4.19",
+        "@storybook/channels": "6.4.19",
+        "@storybook/client-logger": "6.4.19",
+        "@storybook/components": "6.4.19",
+        "@storybook/core-events": "6.4.19",
+        "@storybook/csf": "0.0.2--canary.87bc651.0",
+        "@storybook/theming": "6.4.19",
+        "axe-core": "^4.2.0",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "lodash": "^4.17.21",
+        "react-sizeme": "^3.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "6.4.19",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.4.19.tgz",
@@ -13487,6 +13530,15 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axe-core": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
+      "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -14023,6 +14075,19 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
     "node_modules/boxen": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
@@ -14694,6 +14759,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromatic": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.2.tgz",
+      "integrity": "sha512-TiAJAF2we4BUflKEfiXs2CiBFvW6yNWkiXKIuBtlSLl2fj1cuueXlV5dYVVoyMDfzTX5JdEn/Bd5CVlpKCeY6A==",
+      "dev": true,
+      "bin": {
+        "chroma": "bin/main.cjs",
+        "chromatic": "bin/main.cjs",
+        "chromatic-cli": "bin/main.cjs"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -21897,6 +21973,12 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "peer": true
+    },
     "node_modules/js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -25131,6 +25213,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -37713,6 +37806,30 @@
       "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
       "dev": true
     },
+    "@storybook/addon-a11y": {
+      "version": "6.4.19",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.4.19.tgz",
+      "integrity": "sha512-dG6easap6W4AqyggVZPq8lBrhza8StA8J4eYz/GVdoXINSGtq/casV0rkmY3+SUXhPYux5oGavHo86j5I4Q/0Q==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.4.19",
+        "@storybook/api": "6.4.19",
+        "@storybook/channels": "6.4.19",
+        "@storybook/client-logger": "6.4.19",
+        "@storybook/components": "6.4.19",
+        "@storybook/core-events": "6.4.19",
+        "@storybook/csf": "0.0.2--canary.87bc651.0",
+        "@storybook/theming": "6.4.19",
+        "axe-core": "^4.2.0",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "lodash": "^4.17.21",
+        "react-sizeme": "^3.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
     "@storybook/addon-actions": {
       "version": "6.4.19",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.4.19.tgz",
@@ -44584,6 +44701,12 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axe-core": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
+      "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
+      "dev": true
+    },
     "babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -45025,6 +45148,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "requires": {}
+    },
     "boxen": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
@@ -45548,6 +45677,12 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "chromatic": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.2.tgz",
+      "integrity": "sha512-TiAJAF2we4BUflKEfiXs2CiBFvW6yNWkiXKIuBtlSLl2fj1cuueXlV5dYVVoyMDfzTX5JdEn/Bd5CVlpKCeY6A==",
+      "dev": true
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -51165,6 +51300,12 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "peer": true
+    },
     "js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -53720,6 +53861,12 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

components/package.json

@@ -9,7 +9,8 @@
     "test": "ng test",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "storybook": "npm run docs:json && start-storybook -p 6006",
-    "build-storybook": "npm run docs:json && build-storybook"
+    "build-storybook": "npm run docs:json && build-storybook",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "private": true,
   "dependencies": {
@@ -22,6 +23,7 @@
     "@angular/platform-browser": "^12.2.13",
     "@angular/platform-browser-dynamic": "^12.2.13",
     "@bitwarden/jslib-angular": "file:../angular",
+    "bootstrap": "4.6.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "@angular/elements": "^12.2.13",
     "@babel/core": "^7.16.10",
     "@compodoc/compodoc": "^1.1.16",
+    "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
@@ -42,6 +45,7 @@
     "@webcomponents/custom-elements": "^1.5.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
+    "chromatic": "^6.5.2",
     "jasmine-core": "~3.10.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",

components/src/stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Jslib/Introduction" />
+<Meta title="Common/Introduction" />
 
 <style>{`
   .subheading {
@@ -77,36 +77,9 @@ import { Meta } from "@storybook/addon-docs";
     font-size: 14px;
     line-height: 20px;
   }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-
 `}</style>
 
-# Welcome to Storybook
+# Bitwarden Component Library
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
 That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
@@ -188,8 +161,3 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     </span>
   </a>
 </div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{" "}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

components/src/stories/colors.stories.mdx

@@ -0,0 +1,85 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Common/Colors" />
+
+export const Row = (name) => (
+  <tr class="tw-h-16">
+    <td class="!tw-border-none">{name}</td>
+    <td class={"tw-bg-" + name + " !tw-border-secondary-300"}></td>
+  </tr>
+);
+
+export const Table = (args) => (
+  <table class={"tw-table-auto border !tw-text-main " + args.class}>
+    <thead>
+      <tr>
+        <th>General usage</th>
+        <th class="tw-w-20"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {Row("background")}
+      {Row("background-alt")}
+      {Row("background-alt2")}
+    </tbody>
+    <tbody>
+      {Row("primary-300")}
+      {Row("primary-500")}
+      {Row("primary-700")}
+    </tbody>
+    <tbody>
+      {Row("secondary-100")}
+      {Row("secondary-300")}
+      {Row("secondary-500")}
+      {Row("secondary-700")}
+    </tbody>
+    <tbody>
+      {Row("success-500")}
+      {Row("success-700")}
+    </tbody>
+    <tbody>
+      {Row("danger-500")}
+      {Row("danger-700")}
+    </tbody>
+    <tbody>
+      {Row("warning-500")}
+      {Row("warning-700")}
+    </tbody>
+    <tbody>
+      {Row("info-500")}
+      {Row("info-700")}
+    </tbody>
+    <tbody>
+      {Row("text-main")}
+      {Row("text-muted")}
+      {Row("text-contrast")}
+    </tbody>
+  </table>
+);
+
+<style>{`
+table {
+  border-spacing: 0.5rem;
+  border-collapse: separate !important;
+}
+
+tr {
+  background: none !important;
+  border: none !important;
+}
+
+td, th {
+  color: inherit !important;
+}
+
+th {
+  border: none !important;
+}
+`}</style>
+
+# Colors
+
+<div class="tw-flex tw-space-x-4">
+  <Table />
+  <Table class="theme_dark tw-bg-background" />
+</div>

components/src/styles.scss

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

components/src/variables.scss

@@ -0,0 +1,357 @@
+$dark-icon-themes: "theme_dark";
+
+$primary: #175ddc;
+$primary-accent: #1252a3;
+$secondary: #ced4da;
+$secondary-alt: #1a3b66;
+$success: #00a65a;
+$info: #555555;
+$warning: #bf7e16;
+$danger: #dd4b39;
+$white: #ffffff;
+
+// Bootstrap Variable Overrides
+
+$theme-colors: (
+  "primary-accent": $primary-accent,
+  "secondary-alt": $secondary-alt,
+);
+
+$body-bg: $white;
+$body-color: #333333;
+
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+$h1-font-size: 1.7rem;
+$h2-font-size: 1.3rem;
+$h3-font-size: 1rem;
+$h4-font-size: 1rem;
+$h5-font-size: 1rem;
+$h6-font-size: 1rem;
+
+$small-font-size: 90%;
+$font-size-lg: 1.15rem;
+$code-font-size: 100%;
+
+$navbar-padding-y: 0.75rem;
+$grid-gutter-width: 20px;
+$card-spacer-y: 0.6rem;
+
+$list-group-item-padding-y: 0.6rem;
+$list-group-active-color: $body-color;
+$list-group-active-bg: $white;
+$list-group-active-border-color: rgba(#000000, 0.125);
+
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-bg: rgba(#000000, 0.06);
+$dropdown-link-active-color: $dropdown-link-color;
+$dropdown-link-active-bg: rgba(#000000, 0.1);
+$dropdown-item-padding-x: 1rem;
+
+$navbar-brand-font-size: 35px;
+$navbar-brand-height: 35px;
+$navbar-brand-padding-y: 0;
+$navbar-dark-color: rgba($white, 0.7);
+$navbar-dark-hover-color: rgba($white, 0.9);
+$navbar-nav-link-padding-x: 0.8rem;
+
+$input-bg: #fbfbfb;
+$input-focus-bg: $white;
+$input-disabled-bg: #e0e0e0;
+$input-placeholder-color: #b4b4b4;
+
+$table-accent-bg: rgba(#000000, 0.02);
+$table-hover-bg: rgba(#000000, 0.03);
+
+$modal-backdrop-opacity: 0.3;
+$btn-font-weight: 600;
+$lead-font-weight: normal;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 1px,
+  md: 2px,
+  lg: 3px,
+  xl: 4px,
+);
+
+$border-color: $secondary;
+
+// MFA Types for logo styling with no dark theme alternative
+
+$mfaTypes: 0, 2, 3, 4, 6;
+
+// Theme Variables
+// Light
+
+$lightDangerHover: #c43421;
+$lightInputColor: #465057;
+$lightInputPlaceholderColor: #b6b8b8;
+
+// Dark
+
+$darkPrimary: #6a99f0;
+$darkPrimary-alt: #b4ccf9;
+$darkDanger: #ff8d85;
+$darkDangerHover: #ffbfbb;
+$darkSuccess: #52e07c;
+$darkWarning: #ffeb66;
+$darkInfo: #a4b0c6;
+$darkLinks: #6a99f0;
+$darkGrey1: #bac0ce;
+$darkGrey2: #8d94a5;
+$darkBlue1: #4c525f;
+$darkBlue2: #3c424e;
+$darkDarkBlue1: #2f343d;
+$darkDarkBlue2: #1f242e;
+$darkInputColor: $white;
+$darkInputPlaceholderColor: $darkGrey1;
+
+$themes: (
+  light: (
+    primary: $primary,
+    primaryAlt: $primary-accent,
+    danger: $danger,
+    info: #343a40,
+    success: $success,
+    warning: $warning,
+    backgroundColor: $white,
+    badgeDangerBackground: $danger,
+    badgeDangerText: $white,
+    badgeInfoBackground: #555555,
+    badgeInfoText: $white,
+    badgePrimaryBackground: $primary,
+    badgePrimaryBackgroundHover: #134eb9,
+    badgePrimaryText: $white,
+    badgeSecondaryBackground: #ced4da,
+    badgeSecondaryText: #212529,
+    bgLightColor: #f8f9fa,
+    bgPrimaryColor: $primary,
+    borderColor: $border-color,
+    borderPrimaryColor: $primary,
+    browserInputIconsFilter: invert(0),
+    btnDanger: $danger,
+    btnDangerHover: $lightDangerHover,
+    btnDangerText: $white,
+    btnLinkText: $primary,
+    btnLinkTextHover: #104097,
+    btnOutlineDangerBackground: $input-bg,
+    btnOutlineDangerBackgroundHover: $danger,
+    btnOutlineDangerBorder: #ced4da,
+    btnOutlineDangerBorderHover: $danger,
+    btnOutlineDangerText: $danger,
+    btnOutlineDangerTextHover: $white,
+    btnOutlinePrimaryBackground: $input-bg,
+    btnOutlinePrimaryBackgroundHover: $primary,
+    btnOutlinePrimaryBorder: #ced4da,
+    btnOutlinePrimaryBorderHover: $primary,
+    btnOutlinePrimaryText: $primary,
+    btnOutlinePrimaryTextHover: $white,
+    btnOutlineSecondaryBackground: $input-bg,
+    btnOutlineSecondaryBackgroundHover: #ced4da,
+    btnOutlineSecondaryBorder: #ced4da,
+    btnOutlineSecondaryBorderHover: #ced4da,
+    btnOutlineSecondaryText: #6c757d,
+    btnOutlineSecondaryTextHover: #333333,
+    btnPrimary: $primary,
+    btnPrimaryBorderHover: #1249ae,
+    btnPrimaryHover: #134eb9,
+    btnPrimaryText: $white,
+    btnSecondary: $secondary,
+    btnSecondaryBorder: $secondary,
+    btnSecondaryBorderHover: #b1bbc4,
+    btnSecondaryHover: #b8c1ca,
+    btnSecondaryText: #212529,
+    btnSecondaryTextHover: #212529,
+    calloutBackground: #fafafa,
+    calloutColor: #212529,
+    cdkDraggingBackground: $white,
+    codeColor: #e83e8c,
+    dropdownBackground: $white,
+    dropdownHover: rgba(0, 0, 0, 0.06),
+    dropdownTextColor: $body-color,
+    dropdownTextMuted: #6c757d,
+    focus: rgb(23 93 220 / 25%),
+    footerBackgroundColor: #fbfbfb,
+    foregroundColor: $white,
+    headerColor: rgba(0, 0, 0, 0.03),
+    iconColor: #777777,
+    iconHover: $body-color,
+    imgFilter: invert(0) grayscale(0),
+    inputBackgroundColor: $input-bg,
+    inputBorderColor: $border-color,
+    inputDisabledBackground: #e0e0e0,
+    inputDisabledColor: #6c757d,
+    inputPlaceholderColor: $lightInputPlaceholderColor,
+    inputTextColor: $lightInputColor,
+    layoutFrontendColor: #ecf0f5,
+    learnMoreHover: #104097,
+    linkColor: $primary,
+    linkColorHover: #104097,
+    linkWeight: 400,
+    listItemActive: $body-color,
+    listItemBorder: rgba(0, 0, 0, 0.125),
+    loadingSvg: url("../images/loading.svg"),
+    logoSuffix: "dark",
+    mfaLogoSuffix: ".png",
+    navActiveBackground: $white,
+    navActiveWeight: 600,
+    navBackground: $primary,
+    navBackgroundAlt: $secondary-alt,
+    navOrgBackgroundColor: #fbfbfb,
+    navWeight: 600,
+    pwLetter: $body-color,
+    pwNumber: #007fde,
+    pwSpecial: #c40800,
+    pwStrengthBackground: #e9ecef,
+    separator: $secondary,
+    separatorHr: rgb(0, 0, 0, 0.1),
+    tableColorHover: #333333,
+    tableLinkColor: $primary,
+    tableLinkColorHover: #104097,
+    tableRowHover: rgba(0, 0, 0, 0.03),
+    tableSeparator: #dee2e6,
+    textColor: $body-color,
+    textDangerColor: $white,
+    textInfoColor: $white,
+    textHeadingColor: #333333,
+    textMuted: #6c757d,
+    textSuccessColor: $white,
+    textWarningColor: $white,
+  ),
+  dark: (
+    primary: $darkPrimary,
+    primaryAlt: $darkPrimary-alt,
+    danger: $darkDanger,
+    info: $darkInfo,
+    success: $darkSuccess,
+    warning: $darkWarning,
+    backgroundColor: $darkDarkBlue2,
+    badgeDangerBackground: $darkDanger,
+    badgeDangerText: $darkDarkBlue2,
+    badgeInfoBackground: $darkInfo,
+    badgeInfoText: $darkDarkBlue2,
+    badgePrimaryBackground: $darkLinks,
+    badgePrimaryBackgroundHover: $darkPrimary-alt,
+    badgePrimaryText: $darkDarkBlue2,
+    badgeSecondaryBackground: $darkGrey2,
+    badgeSecondaryText: $darkDarkBlue2,
+    bgLightColor: $darkDarkBlue2,
+    bgPrimaryColor: $darkPrimary,
+    borderColor: $darkBlue1,
+    borderPrimaryColor: $darkPrimary,
+    browserInputIconsFilter: invert(1),
+    btnDanger: $darkDanger,
+    btnDangerHover: $darkDangerHover,
+    btnDangerText: $darkDarkBlue2,
+    btnLinkText: $white,
+    btnLinkTextHover: $darkGrey1,
+    btnOutlineDangerBackground: $darkDanger,
+    btnOutlineDangerBackgroundHover: $darkDangerHover,
+    btnOutlineDangerBorder: $darkDanger,
+    btnOutlineDangerBorderHover: $darkDangerHover,
+    btnOutlineDangerText: $darkDarkBlue2,
+    btnOutlineDangerTextHover: $darkDarkBlue2,
+    btnOutlinePrimaryBackground: $darkPrimary,
+    btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
+    btnOutlinePrimaryBorder: $darkPrimary,
+    btnOutlinePrimaryBorderHover: $darkPrimary-alt,
+    btnOutlinePrimaryText: $darkDarkBlue2,
+    btnOutlinePrimaryTextHover: $darkDarkBlue2,
+    btnOutlineSecondaryBackground: transparent,
+    btnOutlineSecondaryBackgroundHover: transparent,
+    btnOutlineSecondaryBorder: $darkGrey1,
+    btnOutlineSecondaryBorderHover: $darkGrey2,
+    btnOutlineSecondaryText: $white,
+    btnOutlineSecondaryTextHover: $darkGrey2,
+    btnPrimary: $darkLinks,
+    btnPrimaryBorderHover: $darkPrimary-alt,
+    btnPrimaryHover: $darkPrimary-alt,
+    btnPrimaryText: $darkDarkBlue2,
+    btnSecondary: transparent,
+    btnSecondaryBorder: $darkGrey1,
+    btnSecondaryBorderHover: $darkGrey2,
+    btnSecondaryHover: transparent,
+    btnSecondaryText: $white,
+    btnSecondaryTextHover: $darkGrey2,
+    calloutBackground: $darkBlue2,
+    calloutColor: $white,
+    cdkDraggingBackground: $darkDarkBlue1,
+    codeColor: #e83e8c,
+    dropdownBackground: $darkDarkBlue1,
+    dropdownHover: rgba(255, 255, 255, 0.03),
+    dropdownTextColor: $white,
+    dropdownTextMuted: #bec6cf,
+    focus: rgb(106 153 240 / 25%),
+    footerBackgroundColor: $darkBlue1,
+    foregroundColor: $darkDarkBlue1,
+    headerColor: $darkBlue1,
+    iconColor: #777777,
+    iconHover: $darkGrey2,
+    imgFilter: invert(1) grayscale(1),
+    inputBackgroundColor: transparent,
+    inputBorderColor: $darkGrey1,
+    inputDisabledBackground: $darkBlue2,
+    inputDisabledColor: $darkGrey1,
+    inputPlaceholderColor: $darkInputPlaceholderColor,
+    inputTextColor: $darkInputColor,
+    layoutFrontendColor: $darkDarkBlue2,
+    learnMoreHover: $darkPrimary-alt,
+    linkColor: $darkLinks,
+    linkColorHover: $darkLinks,
+    linkWeight: 600,
+    listItemActive: $darkPrimary,
+    listItemBorder: $darkBlue1,
+    loadingSvg: url("../images/loading-white.svg"),
+    logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
+    navActiveBackground: $darkDarkBlue2,
+    navActiveWeight: 600,
+    navBackground: $darkDarkBlue1,
+    navBackgroundAlt: $darkDarkBlue1,
+    navOrgBackgroundColor: #161c26,
+    navWeight: 400,
+    pwLetter: $white,
+    pwNumber: #52bdfb,
+    pwSpecial: #ff7c70,
+    pwStrengthBackground: $darkBlue2,
+    separator: $darkBlue1,
+    separatorHr: $darkBlue1,
+    tableColorHover: $darkGrey1,
+    tableLinkColor: $white,
+    tableLinkColorHover: $white,
+    tableRowHover: rgba(255, 255, 255, 0.03),
+    tableSeparator: $darkBlue1,
+    textColor: $darkGrey1,
+    textDangerColor: $darkDarkBlue2,
+    textHeadingColor: $white,
+    textInfoColor: $darkDarkBlue2,
+    textMuted: $darkGrey1,
+    textSuccessColor: $darkDarkBlue2,
+    textWarningColor: $darkDarkBlue2,
+  ),
+);
+
+@mixin themify($themes: $themes) {
+  @each $theme, $map in $themes {
+    html.theme_#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+} ;

components/tailwind.config.base.js

@@ -37,7 +37,11 @@ module.exports = {
         500: "var(--color-info-500)",
         700: "var(--color-info-700)",
       },
-      "text-muted": "var(--color-text-muted)",
+      text: {
+        main: "var(--color-text-main)",
+        muted: "var(--color-text-muted)",
+        contrast: "var(--color-text-contrast)",
+      },
       background: {
         DEFAULT: "var(--color-background)",
         alt: "var(--color-background-alt)",

components/tailwind.config.js

@@ -1,6 +1,11 @@
 /* eslint-disable */
 const config = require("./tailwind.config.base");
 
-config.content = ["./src/**/*.{html,ts}", "./.storybook/preview.js"];
+config.content = ["./src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
+config.safelist = [
+  {
+    pattern: /tw-bg-(.*)/,
+  },
+];
 
 module.exports = config;