@salesforcedevs/arch-components 1.20.17-alpha9 → 1.25.1-alpha

package/lwc.config.json

@@ -1,7 +1,46 @@
 {
     "modules": [
-        { "dir": "src/modules" }
+        { "dir": "src/modules" },
+        { "npm": "@salesforcedevs/dw-components" },
+        { "npm": "@salesforcedevs/docs-components" },
+        { "npm": "@salesforcedevs/dx-components" }
     ],
-    "expose": []
+    "expose": [
+        "arch/badge",
+        "arch/button",
+        "arch/buttonLink",
+        "arch/card",
+        "arch/cardGridA",
+        "arch/cardGridC",
+        "arch/cardGridD",
+        "arch/cardNew",
+        "arch/children",
+        "arch/content",
+        "arch/contentIcon",
+        "arch/context",
+        "arch/contextAdapter",
+        "arch/effectAdapter",
+        "arch/explorer",
+        "arch/footerMfe",
+        "arch/gallery",
+        "arch/heading",
+        "arch/heroA",
+        "arch/heroB",
+        "arch/icon",
+        "arch/instrumentation",
+        "arch/page",
+        "arch/pageHeaderA",
+        "arch/pill",
+        "arch/reflectedElement",
+        "arch/searchList",
+        "arch/sectionA",
+        "arch/select",
+        "arch/socialShare",
+        "arch/spinner",
+        "arch/summary",
+        "arch/tab",
+        "arch/tabset",
+        "arch/threeCardGrid",
+        "arch/xsfMfeEvents"
+    ]
 }
-

package/package.json

@@ -1,9 +1,8 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha9",
-    "description": "Architecture Lightning web components for DSC",
+    "version": "1.25.1-alpha",
+    "description": "Architect Lightning web components",
     "license": "MIT",
-    "main": "index.js",
     "engines": {
         "node": "20.x"
     },
@@ -11,50 +10,40 @@
         "access": "public"
     },
     "dependencies": {
-        "@a11y/focus-trap": "^1.0.5",
-        "@popperjs/core": "^2.11.8",
-        "@salesforcedevs/docs-components": "1.18.0",
-        "@salesforcedevs/dw-components": "1.18.2",
-        "@salesforcedevs/dx-components": "1.18.4",
-        "@salesforcedevs/dx-css-variables": "0.3.43",
-        "@salesforcedevs/mrkt-components": "1.14.2",
-        "algolia-indexing": "^1.3.0",
-        "algoliasearch": "^4.22.1",
-        "chart.js": "^4.4.2",
-        "child-process": "^1.0.2",
-        "classnames": "^2.5.1",
-        "compression": "^1.7.4",
-        "connect": "^3.7.0",
-        "copy-dir": "^1.3.0",
-        "cors": "^2.8.5",
-        "cpx": "^1.5.0",
-        "crypto-js": "^4.2.0",
-        "date-fns": "^2.30.0",
-        "dotenv": "^10.0.0",
-        "esm": "^3.2.25",
-        "gray-matter": "^4.0.3",
-        "gulp": "^4.0.2",
-        "gulp-run-command": "^0.0.10",
-        "gulp-sass": "^5.1.0",
-        "helmet": "^4.6.0",
-        "i18n-js": "^3.9.2",
-        "ip": "^1.1.9",
-        "jsdom": "^18.1.1",
-        "jsonwebtoken": "^9.0.2",
+        "@coveo/headless": "3.22.2",
+        "@floating-ui/dom": "1.5.1",
+        "@optimizely/optimizely-sdk": "5.3.0",
+        "@shikijs/colorized-brackets": "^3.12.2",
+        "@types/throttle-debounce": "5.0.2",
+        "@vimeo/player": "2.22.0",
+        "classnames": "2.5.1",
+        "composed-offset-position": "0.0.4",
+        "coveo-search-ui": "2.10113.0",
+        "debounce": "1.2.1",
+        "js-cookie": "3.0.5",
         "jspdf": "^2.5.1",
-        "lwc": "^6.3.3",
-        "lwr": "0.11.15",
-        "node-cron": "^3.0.3",
-        "node-fetch": "^3.3.2",
-        "perfect-express-sanitizer": "^2.0.2",
-        "promisify": "^0.0.3",
-        "rss": "^1.2.2",
-        "rss-to-json": "^2.1.1",
-        "sass": "^1.72.0",
-        "sharp": "^0.29.3",
-        "sitemap": "^7.1.1"
+        "lodash.defaults": "4.2.0",
+        "lodash.get": "4.4.2",
+        "lodash.kebabcase": "4.1.1",
+        "memoize-one": "6.0.0",
+        "microtip": "0.2.2",
+        "shiki": "^3.12.2",
+        "throttle-debounce": "5.0.0",
+        "uuid": "9.0.1"
+    },
+    "devDependencies": {
+        "@types/classnames": "2.3.1",
+        "@types/debounce": "1.2.4",
+        "@types/js-cookie": "3.0.6",
+        "@types/lodash.defaults": "4.2.9",
+        "@types/lodash.get": "4.4.9",
+        "@types/lodash.kebabcase": "4.1.9",
+        "@types/luxon": "3.4.2",
+        "@types/uuid": "8.3.4",
+        "@types/vimeo__player": "2.18.3",
+        "eventsourcemock": "2.0.0",
+        "luxon": "3.4.4"
     },
-    "devDependencies": {},
     "volta": {
         "node": "20.19.0",
         "yarn": "1.22.19"

package/src/assets/css/arch-variables.css

@@ -0,0 +1,512 @@
+/* This file is generated by theme.js */
+
+:root {
+    --arch-color-architect-light-h: 198;
+    --arch-color-architect-light-s: 99%;
+    --arch-color-architect-light-l: 70%;
+    --arch-color-architect-light: hsl(
+        var(--arch-color-architect-light-h),
+        var(--arch-color-architect-light-s),
+        var(--arch-color-architect-light-l)
+    );
+    --arch-color-architect-dark-h: 179;
+    --arch-color-architect-dark-s: 95%;
+    --arch-color-architect-dark-l: 15%;
+    --arch-color-architect-dark: hsl(
+        var(--arch-color-architect-dark-h),
+        var(--arch-color-architect-dark-s),
+        var(--arch-color-architect-dark-l)
+    );
+    --arch-color-architect-bright-h: 14;
+    --arch-color-architect-bright-s: 100%;
+    --arch-color-architect-bright-l: 72%;
+    --arch-color-architect-bright: hsl(
+        var(--arch-color-architect-bright-h),
+        var(--arch-color-architect-bright-s),
+        var(--arch-color-architect-bright-l)
+    );
+    --arch-color-commerce-dark-h: 115;
+    --arch-color-commerce-dark-s: 27%;
+    --arch-color-commerce-dark-l: 32%;
+    --arch-color-commerce-dark: hsl(
+        var(--arch-color-commerce-dark-h),
+        var(--arch-color-commerce-dark-s),
+        var(--arch-color-commerce-dark-l)
+    );
+    --arch-color-commerce-light-h: 105;
+    --arch-color-commerce-light-s: 25%;
+    --arch-color-commerce-light-l: 97%;
+    --arch-color-commerce-light: hsl(
+        var(--arch-color-commerce-light-h),
+        var(--arch-color-commerce-light-s),
+        var(--arch-color-commerce-light-l)
+    );
+    --arch-color-developer-dark-h: 226;
+    --arch-color-developer-dark-s: 98%;
+    --arch-color-developer-dark-l: 21%;
+    --arch-color-developer-dark: hsl(
+        var(--arch-color-developer-dark-h),
+        var(--arch-color-developer-dark-s),
+        var(--arch-color-developer-dark-l)
+    );
+    --arch-color-developer-light-h: 210;
+    --arch-color-developer-light-s: 50%;
+    --arch-color-developer-light-l: 96%;
+    --arch-color-developer-light: hsl(
+        var(--arch-color-developer-light-h),
+        var(--arch-color-developer-light-s),
+        var(--arch-color-developer-light-l)
+    );
+    --arch-color-trailblazer-dark-h: 95;
+    --arch-color-trailblazer-dark-s: 40%;
+    --arch-color-trailblazer-dark-l: 15%;
+    --arch-color-trailblazer-dark: hsl(
+        var(--arch-color-trailblazer-dark-h),
+        var(--arch-color-trailblazer-dark-s),
+        var(--arch-color-trailblazer-dark-l)
+    );
+    --arch-color-trailblazer-light-h: 40;
+    --arch-color-trailblazer-light-s: 27%;
+    --arch-color-trailblazer-light-l: 98%;
+    --arch-color-trailblazer-light: hsl(
+        var(--arch-color-trailblazer-light-h),
+        var(--arch-color-trailblazer-light-s),
+        var(--arch-color-trailblazer-light-l)
+    );
+    --arch-color-admin-dark-h: 90;
+    --arch-color-admin-dark-s: 57%;
+    --arch-color-admin-dark-l: 32%;
+    --arch-color-admin-dark: hsl(
+        var(--arch-color-admin-dark-h),
+        var(--arch-color-admin-dark-s),
+        var(--arch-color-admin-dark-l)
+    );
+    --arch-color-admin-light-h: 185;
+    --arch-color-admin-light-s: 58%;
+    --arch-color-admin-light-l: 96%;
+    --arch-color-admin-light: hsl(
+        var(--arch-color-admin-light-h),
+        var(--arch-color-admin-light-s),
+        var(--arch-color-admin-light-l)
+    );
+    --arch-color-starter-dark-h: 196;
+    --arch-color-starter-dark-s: 72%;
+    --arch-color-starter-dark-l: 31%;
+    --arch-color-starter-dark: hsl(
+        var(--arch-color-starter-dark-h),
+        var(--arch-color-starter-dark-s),
+        var(--arch-color-starter-dark-l)
+    );
+    --arch-color-starter-light-h: 192;
+    --arch-color-starter-light-s: 56%;
+    --arch-color-starter-light-l: 96%;
+    --arch-color-starter-light: hsl(
+        var(--arch-color-starter-light-h),
+        var(--arch-color-starter-light-s),
+        var(--arch-color-starter-light-l)
+    );
+    --arch-color-careers-dark-h: 220;
+    --arch-color-careers-dark-s: 50%;
+    --arch-color-careers-dark-l: 34%;
+    --arch-color-careers-dark: hsl(
+        var(--arch-color-careers-dark-h),
+        var(--arch-color-careers-dark-s),
+        var(--arch-color-careers-dark-l)
+    );
+    --arch-color-careers-light-h: 225;
+    --arch-color-careers-light-s: 33%;
+    --arch-color-careers-light-l: 98%;
+    --arch-color-careers-light: hsl(
+        var(--arch-color-careers-light-h),
+        var(--arch-color-careers-light-s),
+        var(--arch-color-careers-light-l)
+    );
+    --arch-color-work-dark-h: 220;
+    --arch-color-work-dark-s: 50%;
+    --arch-color-work-dark-l: 34%;
+    --arch-color-work-dark: hsl(
+        var(--arch-color-work-dark-h),
+        var(--arch-color-work-dark-s),
+        var(--arch-color-work-dark-l)
+    );
+    --arch-color-work-light-h: 40;
+    --arch-color-work-light-s: 53%;
+    --arch-color-work-light-l: 97%;
+    --arch-color-work-light: hsl(
+        var(--arch-color-work-light-h),
+        var(--arch-color-work-light-s),
+        var(--arch-color-work-light-l)
+    );
+    --arch-color-salesforce-dark-h: 194;
+    --arch-color-salesforce-dark-s: 100%;
+    --arch-color-salesforce-dark-l: 15%;
+    --arch-color-salesforce-dark: hsl(
+        var(--arch-color-salesforce-dark-h),
+        var(--arch-color-salesforce-dark-s),
+        var(--arch-color-salesforce-dark-l)
+    );
+    --arch-color-salesforce-light-h: 196;
+    --arch-color-salesforce-light-s: 100%;
+    --arch-color-salesforce-light-l: 98%;
+    --arch-color-salesforce-light: hsl(
+        var(--arch-color-salesforce-light-h),
+        var(--arch-color-salesforce-light-s),
+        var(--arch-color-salesforce-light-l)
+    );
+    --arch-color-azure-h: 220;
+    --arch-color-azure-s: 53%;
+    --arch-color-azure-l: 45%;
+    --arch-color-azure: hsl(
+        var(--arch-color-azure-h),
+        var(--arch-color-azure-s),
+        var(--arch-color-azure-l)
+    );
+    --arch-color-black-h: 0;
+    --arch-color-black-s: 0%;
+    --arch-color-black-l: 12%;
+    --arch-color-black: hsl(
+        var(--arch-color-black-h),
+        var(--arch-color-black-s),
+        var(--arch-color-black-l)
+    );
+    --arch-color-calypso-h: 198;
+    --arch-color-calypso-s: 54%;
+    --arch-color-calypso-l: 36%;
+    --arch-color-calypso: hsl(
+        var(--arch-color-calypso-h),
+        var(--arch-color-calypso-s),
+        var(--arch-color-calypso-l)
+    );
+    --arch-color-evergreen-h: 153;
+    --arch-color-evergreen-s: 94%;
+    --arch-color-evergreen-l: 26%;
+    --arch-color-evergreen: hsl(
+        var(--arch-color-evergreen-h),
+        var(--arch-color-evergreen-s),
+        var(--arch-color-evergreen-l)
+    );
+    --arch-color-fire-h: 21;
+    --arch-color-fire-s: 97%;
+    --arch-color-fire-l: 52%;
+    --arch-color-fire: hsl(
+        var(--arch-color-fire-h),
+        var(--arch-color-fire-s),
+        var(--arch-color-fire-l)
+    );
+    --arch-color-fog-h: 0;
+    --arch-color-fog-s: 0%;
+    --arch-color-fog-l: 89%;
+    --arch-color-fog: hsl(
+        var(--arch-color-fog-h),
+        var(--arch-color-fog-s),
+        var(--arch-color-fog-l)
+    );
+    --arch-color-granite-h: 0;
+    --arch-color-granite-s: 0%;
+    --arch-color-granite-l: 68%;
+    --arch-color-granite: hsl(
+        var(--arch-color-granite-h),
+        var(--arch-color-granite-s),
+        var(--arch-color-granite-l)
+    );
+    --arch-color-ice-h: 216;
+    --arch-color-ice-s: 23%;
+    --arch-color-ice-l: 74%;
+    --arch-color-ice: hsl(
+        var(--arch-color-ice-h),
+        var(--arch-color-ice-s),
+        var(--arch-color-ice-l)
+    );
+    --arch-color-lochinvar-h: 176;
+    --arch-color-lochinvar-s: 54%;
+    --arch-color-lochinvar-l: 36%;
+    --arch-color-lochinvar: hsl(
+        var(--arch-color-lochinvar-h),
+        var(--arch-color-lochinvar-s),
+        var(--arch-color-lochinvar-l)
+    );
+    --arch-color-meteorite-h: 0;
+    --arch-color-meteorite-s: 0%;
+    --arch-color-meteorite-l: 35%;
+    --arch-color-meteorite: hsl(
+        var(--arch-color-meteorite-h),
+        var(--arch-color-meteorite-s),
+        var(--arch-color-meteorite-l)
+    );
+    --arch-color-midnight-h: 216;
+    --arch-color-midnight-s: 61%;
+    --arch-color-midnight-l: 22%;
+    --arch-color-midnight: hsl(
+        var(--arch-color-midnight-h),
+        var(--arch-color-midnight-s),
+        var(--arch-color-midnight-l)
+    );
+    --arch-color-ocean-h: 208;
+    --arch-color-ocean-s: 100%;
+    --arch-color-ocean-l: 41%;
+    --arch-color-ocean: hsl(
+        var(--arch-color-ocean-h),
+        var(--arch-color-ocean-s),
+        var(--arch-color-ocean-l)
+    );
+    --arch-color-ruby-h: 2;
+    --arch-color-ruby-s: 58%;
+    --arch-color-ruby-l: 48%;
+    --arch-color-ruby: hsl(
+        var(--arch-color-ruby-h),
+        var(--arch-color-ruby-s),
+        var(--arch-color-ruby-l)
+    );
+    --arch-color-sand-h: 0;
+    --arch-color-sand-s: 0%;
+    --arch-color-sand-l: 96%;
+    --arch-color-sand: hsl(
+        var(--arch-color-sand-h),
+        var(--arch-color-sand-s),
+        var(--arch-color-sand-l)
+    );
+    --arch-color-sunshine-h: 39;
+    --arch-color-sunshine-s: 98%;
+    --arch-color-sunshine-l: 58%;
+    --arch-color-sunshine: hsl(
+        var(--arch-color-sunshine-h),
+        var(--arch-color-sunshine-s),
+        var(--arch-color-sunshine-l)
+    );
+    --arch-color-white-h: 0;
+    --arch-color-white-s: 0%;
+    --arch-color-white-l: 100%;
+    --arch-color-white: hsl(
+        var(--arch-color-white-h),
+        var(--arch-color-white-s),
+        var(--arch-color-white-l)
+    );
+    --arch-color-hot-orange-sixty-h: 14;
+    --arch-color-hot-orange-sixty-s: 100%;
+    --arch-color-hot-orange-sixty-l: 59%;
+    --arch-color-hot-orange-sixty: hsl(
+        var(--arch-color-hot-orange-sixty-h),
+        var(--arch-color-hot-orange-sixty-s),
+        var(--arch-color-hot-orange-sixty-l)
+    );
+    --arch-color-hot-orange-eighty-h: 13;
+    --arch-color-hot-orange-eighty-s: 98%;
+    --arch-color-hot-orange-eighty-l: 82%;
+    --arch-color-hot-orange-eighty: hsl(
+        var(--arch-color-hot-orange-eighty-h),
+        var(--arch-color-hot-orange-eighty-s),
+        var(--arch-color-hot-orange-eighty-l)
+    );
+    --arch-color-hot-orange-ninety-h: 13;
+    --arch-color-hot-orange-ninety-s: 100%;
+    --arch-color-hot-orange-ninety-l: 92%;
+    --arch-color-hot-orange-ninety: hsl(
+        var(--arch-color-hot-orange-ninety-h),
+        var(--arch-color-hot-orange-ninety-s),
+        var(--arch-color-hot-orange-ninety-l)
+    );
+    --arch-color-teal-sixty-h: 176;
+    --arch-color-teal-sixty-s: 93%;
+    --arch-color-teal-sixty-l: 34%;
+    --arch-color-teal-sixty: hsl(
+        var(--arch-color-teal-sixty-h),
+        var(--arch-color-teal-sixty-s),
+        var(--arch-color-teal-sixty-l)
+    );
+    --arch-color-teal-eighty-h: 171;
+    --arch-color-teal-eighty-s: 59%;
+    --arch-color-teal-eighty-l: 65%;
+    --arch-color-teal-eighty: hsl(
+        var(--arch-color-teal-eighty-h),
+        var(--arch-color-teal-eighty-s),
+        var(--arch-color-teal-eighty-l)
+    );
+    --arch-color-teal-ninety-five-h: 167;
+    --arch-color-teal-ninety-five-s: 69%;
+    --arch-color-teal-ninety-five-l: 92%;
+    --arch-color-teal-ninety-five: hsl(
+        var(--arch-color-teal-ninety-five-h),
+        var(--arch-color-teal-ninety-five-s),
+        var(--arch-color-teal-ninety-five-l)
+    );
+    --arch-color-blue-sixty-h: 208;
+    --arch-color-blue-sixty-s: 100%;
+    --arch-color-blue-sixty-l: 55%;
+    --arch-color-blue-sixty: hsl(
+        var(--arch-color-blue-sixty-h),
+        var(--arch-color-blue-sixty-s),
+        var(--arch-color-blue-sixty-l)
+    );
+    --arch-color-blue-ninety-h: 207;
+    --arch-color-blue-ninety-s: 96%;
+    --arch-color-blue-ninety-l: 90%;
+    --arch-color-blue-ninety: hsl(
+        var(--arch-color-blue-ninety-h),
+        var(--arch-color-blue-ninety-s),
+        var(--arch-color-blue-ninety-l)
+    );
+    --arch-color-blue-ninety-five-h: 209;
+    --arch-color-blue-ninety-five-s: 100%;
+    --arch-color-blue-ninety-five-l: 96%;
+    --arch-color-blue-ninety-five: hsl(
+        var(--arch-color-blue-ninety-five-h),
+        var(--arch-color-blue-ninety-five-s),
+        var(--arch-color-blue-ninety-five-l)
+    );
+    --arch-color-theme-dark-h: 216;
+    --arch-color-theme-dark-s: 61%;
+    --arch-color-theme-dark-l: 22%;
+    --arch-color-theme-dark: hsl(
+        var(--arch-color-theme-dark-h),
+        var(--arch-color-theme-dark-s),
+        var(--arch-color-theme-dark-l)
+    );
+    --arch-color-theme-light-h: 0;
+    --arch-color-theme-light-s: 0%;
+    --arch-color-theme-light-l: 96%;
+    --arch-color-theme-light: hsl(
+        var(--arch-color-theme-light-h),
+        var(--arch-color-theme-light-s),
+        var(--arch-color-theme-light-l)
+    );
+    --arch-color-brand-h: 208;
+    --arch-color-brand-s: 100%;
+    --arch-color-brand-l: 41%;
+    --arch-color-brand: hsl(
+        var(--arch-color-brand-h),
+        var(--arch-color-brand-s),
+        var(--arch-color-brand-l)
+    );
+    --arch-color-success-h: 153;
+    --arch-color-success-s: 94%;
+    --arch-color-success-l: 26%;
+    --arch-color-success: hsl(
+        var(--arch-color-success-h),
+        var(--arch-color-success-s),
+        var(--arch-color-success-l)
+    );
+    --arch-color-destructive-h: 2;
+    --arch-color-destructive-s: 58%;
+    --arch-color-destructive-l: 48%;
+    --arch-color-destructive: hsl(
+        var(--arch-color-destructive-h),
+        var(--arch-color-destructive-s),
+        var(--arch-color-destructive-l)
+    );
+    --arch-color-important-h: 21;
+    --arch-color-important-s: 97%;
+    --arch-color-important-l: 52%;
+    --arch-color-important: hsl(
+        var(--arch-color-important-h),
+        var(--arch-color-important-s),
+        var(--arch-color-important-l)
+    );
+    --arch-font-size-xs: 12px;
+    --arch-font-size-sm: 14px;
+    --arch-font-size-md: 16px;
+    --arch-font-size-lg: 18px;
+    --arch-font-size-xl: 20px;
+    --arch-font-size-2xl: 24px;
+    --arch-font-size-3xl: 28px;
+    --arch-font-size-4xl: 32px;
+    --arch-font-size-5xl: 36px;
+    --arch-font-size-6xl: 40px;
+    --arch-font-size-7xl: 44px;
+    --arch-font-size-8xl: 48px;
+    --arch-radius-none: 0px;
+    --arch-radius-sm: 2px;
+    --arch-radius-md: 4px;
+    --arch-radius-lg: 8px;
+    --arch-radius-xl: 12px;
+    --arch-radius-full: 15984px;
+    --arch-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.04);
+    --arch-shadow-sm: 0 1px 3px 1px rgba(0, 0, 0, 0.06);
+    --arch-shadow-md: 0 3px 7px 1px rgba(0, 0, 0, 0.08);
+    --arch-shadow-lg: 0 4px 14px 1px rgba(0, 0, 0, 0.1);
+    --arch-duration-xshort: 75ms;
+    --arch-duration-short: 150ms;
+    --arch-duration-normal: 250ms;
+    --arch-duration-long: 400ms;
+    --arch-duration-xlong: 600ms;
+    --arch-spacing-0: 0px;
+    --arch-spacing-1: 4px;
+    --arch-spacing-2: 8px;
+    --arch-spacing-3: 12px;
+    --arch-spacing-4: 16px;
+    --arch-spacing-5: 20px;
+    --arch-spacing-6: 24px;
+    --arch-spacing-8: 32px;
+    --arch-spacing-10: 40px;
+    --arch-spacing-12: 48px;
+    --arch-spacing-16: 64px;
+    --arch-spacing-20: 80px;
+    --arch-spacing-24: 96px;
+    --arch-spacing-32: 128px;
+    --arch-spacing-40: 160px;
+    --arch-spacing-48: 192px;
+    --arch-spacing-px: 16px;
+    --arch-breakpoint-sm: 30rem;
+    --arch-breakpoint-md: 48rem;
+    --arch-breakpoint-lg: 64rem;
+    --arch-line-height-none: 16px;
+    --arch-line-height-tight: 18px;
+    --arch-line-height-snug: 20.4px;
+    --arch-line-height-normal: 24px;
+    --arch-line-height-relaxed: 26px;
+    --arch-line-height-loose: 32px;
+    --arch-container-sm: 480px;
+    --arch-container-md: 768px;
+    --arch-container-lg: 1024px;
+    --arch-container-xl: 1280px;
+}
+
+:root {
+    font-family: 'Salesforce Sans';
+    font-size: var(--arch-font-size-md);
+}
+
+.theme--architect {
+    --arch-color-theme-dark: var(--arch-color-architect-dark);
+    --arch-color-theme-light: var(--arch-color-architect-light);
+    --arch-color-theme-bright: var(--arch-color-architect-bright);
+}
+
+.theme--commerce {
+    --arch-color-theme-dark: var(--arch-color-commerce-dark);
+    --arch-color-theme-light: var(--arch-color-commerce-light);
+}
+
+.theme--developer {
+    --arch-color-theme-dark: var(--arch-color-developer-dark);
+    --arch-color-theme-light: var(--arch-color-developer-light);
+}
+
+.theme--trailblazer {
+    --arch-color-theme-dark: var(--arch-color-trailblazer-dark);
+    --arch-color-theme-light: var(--arch-color-trailblazer-light);
+}
+
+.theme--admin {
+    --arch-color-theme-dark: var(--arch-color-admin-dark);
+    --arch-color-theme-light: var(--arch-color-admin-light);
+}
+
+.theme--careers {
+    --arch-color-theme-dark: var(--arch-color-careers-dark);
+    --arch-color-theme-light: var(--arch-color-careers-light);
+}
+
+.theme--starter {
+    --arch-color-theme-dark: var(--arch-color-starter-dark);
+    --arch-color-theme-light: var(--arch-color-starter-light);
+}
+
+.theme--work {
+    --arch-color-theme-dark: var(--arch-color-work-dark);
+    --arch-color-theme-light: var(--arch-color-work-light);
+}
+
+.theme--salesforce {
+    --arch-color-theme-dark: var(--arch-color-salesforce-dark);
+    --arch-color-theme-light: var(--arch-color-salesforce-light);
+}

package/src/modules/arch/badge/badge.css

@@ -0,0 +1,22 @@
+@import 'arch/reset';
+
+:host {
+    display: inline-flex;
+}
+
+.badge {
+    border-radius: var(--arch-radius-xl);
+    font-size: var(--arch-font-size-xs);
+    font-weight: bold;
+    padding: var(--arch-spacing-1) var(--arch-spacing-2);
+}
+
+.fog {
+    background-color: var(--arch-color-fog);
+    color: var(--arch-color-meteorite);
+}
+
+.blue {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}

package/src/modules/arch/badge/badge.html

@@ -0,0 +1,5 @@
+<template>
+    <span class={className}>
+        <slot></slot>
+    </span>
+</template>

package/src/modules/arch/badge/badge.ts

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api color: string = 'fog';
+
+    get className() {
+        return `badge ${this.color}`;
+    }
+}

package/src/modules/arch/button/button.css

@@ -0,0 +1 @@
+@import 'arch/buttonStyles';