From fea390440dea0d1efe46dc8e5b9925dbb11a9aa6 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Tue, 17 Oct 2023 17:13:24 -0700
Subject: [PATCH 01/13] updated button styles

---
 .../src/components/button/Button.module.css   | 14 +++++++--
 .../src/components/button/Button.stories.tsx  | 30 -------------------
 2 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 7b294813e58..ad54af1e561 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -117,6 +117,7 @@
   --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
   background: transparent;
+  border-color: var(--harmony-border-strong);
   box-shadow: none;
 }
 .secondary:hover {
@@ -138,15 +139,24 @@
 
 /* Tertiary */
 .tertiary {
-  --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
-  background: var(--harmony-static-white);
+  background: #FFFFFF;
+  opacity: 0.85;
+  backdrop-filter: blur(6px);
+  border-color: var(--harmony-border-default);
 }
 .tertiary:hover {
   box-shadow: var(--harmony-shadow-mid);
+  background: var(--harmony-static-white);
+  border-color: var(--harmony-border-strong);
+  opacity: 1;
+  backdrop-filter: none;
 }
 .tertiary:active {
   background-color: var(--harmony-n-50);
+  border-color: var(--harmony-border-strong);
+  opacity: 1;
+  backdrop-filter: none;
   box-shadow: none;
 }
 
diff --git a/packages/harmony/src/components/button/Button.stories.tsx b/packages/harmony/src/components/button/Button.stories.tsx
index 191a7b56006..a9aa0f2b56b 100644
--- a/packages/harmony/src/components/button/Button.stories.tsx
+++ b/packages/harmony/src/components/button/Button.stories.tsx
@@ -1,13 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import * as Icons from '../typography/Icons'
-
 import { Button } from './Button'
 import { ButtonProps, ButtonSize, ButtonType } from './types'
 
 const baseProps: ButtonProps = {
-  iconLeft: Icons.IconCampfire,
-  iconRight: Icons.IconCampfire,
   text: 'Click Me'
 }
 
@@ -34,32 +30,6 @@ const meta: Meta<typeof Button> = {
         <Button {...baseProps} size={ButtonSize.DEFAULT} {...props} disabled />
         <Button {...baseProps} size={ButtonSize.LARGE} {...props} disabled />
       </div>
-      <div style={{ alignItems: 'center', display: 'flex', gap: '16px' }}>
-        <Button
-          {...baseProps}
-          size={ButtonSize.SMALL}
-          {...props}
-          text='Loading'
-          minWidth={123}
-          isLoading
-        />
-        <Button
-          {...baseProps}
-          size={ButtonSize.DEFAULT}
-          {...props}
-          text='Loading'
-          minWidth={180}
-          isLoading
-        />
-        <Button
-          {...baseProps}
-          size={ButtonSize.LARGE}
-          {...props}
-          text='Loading'
-          minWidth={212}
-          isLoading
-        />
-      </div>
     </div>
   )
 }

From b3ec401dbf15bb652df664b6a805ba589978ef35 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 18 Oct 2023 14:58:52 -0700
Subject: [PATCH 02/13] add theme switching to storybook and web root

---
 package-lock.json                      | 332 ++++++++++++++++++++++++-
 packages/harmony/.storybook/main.ts    |  10 +-
 packages/harmony/.storybook/preview.ts |  14 ++
 packages/harmony/package.json          |   7 +-
 packages/web/src/utils/theme/theme.ts  |  23 +-
 5 files changed, 373 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c30a566565f..4759e35f241 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15862,6 +15862,329 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-7.5.0.tgz",
+      "integrity": "sha512-U6pEwomoh1InNckNTABoBpmCy6lHEv5GrhgdLrqNwjfXGE/t9y5kttREUCFVNW4WWL540Dv7SDriBPW5edga+g==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/components": "7.5.0",
+        "@storybook/core-events": "7.5.0",
+        "@storybook/manager-api": "7.5.0",
+        "@storybook/preview-api": "7.5.0",
+        "@storybook/theming": "7.5.0",
+        "@storybook/types": "7.5.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/channels": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.5.0.tgz",
+      "integrity": "sha512-/7QJS1UA7TX3uhZqCpjv4Ib8nfMnDOJrBWvjiXiUONaRcSk/he5X+W1Zz/c7dgt+wkYuAh+evjc7glIaBhVNVQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/core-events": "7.5.0",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/client-logger": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.5.0.tgz",
+      "integrity": "sha512-JV7J9vc69f9Il4uW62NIeweUU7O38VwFWxtCkhd0bcBA/9RG0go4M2avzxYYEAe9kIOX9IBBk8WGzMacwW4gKQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/components": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.5.0.tgz",
+      "integrity": "sha512-6lmZ6PbS27xN32vTJ/NvgaiKkFIQRzZuBeBIg2u+FoAEgCiCwRXjZKe/O8NZC2Xr0uf97+7U2P0kD4Hwr9SNhw==",
+      "dev": true,
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-toolbar": "^1.0.4",
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/theming": "7.5.0",
+        "@storybook/types": "7.5.0",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/core-events": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.5.0.tgz",
+      "integrity": "sha512-FsD+clTzayqprbVllnL8LLch+uCslJFDgsv7Zh99/zoi7OHtHyauoCZkdLBSiDzgc84qS41dY19HqX1/y7cnOw==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/csf": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz",
+      "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/manager-api": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.5.0.tgz",
+      "integrity": "sha512-n9EaJTThsuFiBDs+GcmNBHnvLhH0znJQprhIQqHNVnosCs/7sloYUzWZzZvPwfnfPvRR7ostEEMXvriaYXYdJQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.5.0",
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/core-events": "7.5.0",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.5.0",
+        "@storybook/theming": "7.5.0",
+        "@storybook/types": "7.5.0",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "semver": "^7.3.7",
+        "store2": "^2.14.2",
+        "telejson": "^7.2.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/preview-api": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.5.0.tgz",
+      "integrity": "sha512-+DubgKwYFk532FKDB6sEGaG47wr0t137aIQSjbNwVmXXxj0QY0zIAThtERx7w6eHS7ZjOs6xlLEZhzC4FI525g==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.5.0",
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/core-events": "7.5.0",
+        "@storybook/csf": "^0.1.0",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.5.0",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/router": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.5.0.tgz",
+      "integrity": "sha512-NzPwjndmOEOUL8jK5kUrSvRUIcN5Z+h+l0Z8g4I56RoEhNTcKeOW4jbcT4WKnR9H455dti8HAcTV/4x59GpgxQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.5.0",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/theming": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.5.0.tgz",
+      "integrity": "sha512-uTo97oh+pvmlfsZocFq5qae0zGo0VGk7oiBqNSSw6CiTqE1rIuSxoPrMAY+oCTWCUZV7DjONIGvpnGl2QALsAw==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.5.0",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/@storybook/types": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.5.0.tgz",
+      "integrity": "sha512-fiOUnHKFi/UZSfvc53F0WEQCiquqcSqslL3f5EffwQRiXfeXlGavJb0kU03BO+CvOXcliRn6qKSF2dL0Rgb7Xw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.5.0",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/file-system-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+      "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "dev": true,
+      "dependencies": {
+        "fs-extra": "11.1.1",
+        "ramda": "0.29.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-themes/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "7.4.2",
       "dev": true,
@@ -113439,13 +113762,14 @@
         "@babel/preset-env": "7.22.15",
         "@babel/preset-react": "7.22.15",
         "@babel/preset-typescript": "7.22.15",
-        "@emotion/babel-plugin": "^11.11.0",
-        "@emotion/babel-preset-css-prop": "^11.11.0",
+        "@emotion/babel-plugin": "11.11.0",
+        "@emotion/babel-preset-css-prop": "11.11.0",
         "@storybook/addon-a11y": "7.4.0",
         "@storybook/addon-actions": "7.4.2",
         "@storybook/addon-essentials": "7.4.2",
         "@storybook/addon-knobs": "7.0.2",
         "@storybook/addon-links": "7.4.2",
+        "@storybook/addon-themes": "7.5.0",
         "@storybook/addons": "7.4.2",
         "@storybook/react": "7.4.2",
         "@storybook/react-webpack5": "7.4.2",
@@ -113458,7 +113782,7 @@
         "babel-core": "6.26.3",
         "babel-loader": "8.3.0",
         "babel-runtime": "6.26.0",
-        "chromatic": "^7.4.0",
+        "chromatic": "7.4.0",
         "cross-env": "5.2.1",
         "css-loader": "3.6.0",
         "eslint": "8.19.0",
@@ -113473,7 +113797,7 @@
         "rollup": "1.32.1",
         "rollup-plugin-babel": "4.4.0",
         "rollup-plugin-copy": "3.5.0",
-        "rollup-plugin-json": "^4.0.0",
+        "rollup-plugin-json": "4.0.0",
         "rollup-plugin-node-resolve": "5.2.0",
         "rollup-plugin-peer-deps-external": "2.2.4",
         "rollup-plugin-postcss": "2.9.0",
diff --git a/packages/harmony/.storybook/main.ts b/packages/harmony/.storybook/main.ts
index 65fa5523044..5134ff04ceb 100644
--- a/packages/harmony/.storybook/main.ts
+++ b/packages/harmony/.storybook/main.ts
@@ -3,19 +3,23 @@ import { StorybookConfig } from '@storybook/react-webpack5'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(mdx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes'
+  ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
   babel: (options) => ({
     ...options,
-    presets: [...(options?.presets ?? []), '@emotion/babel-preset-css-prop'],
+    presets: [...(options?.presets ?? []), '@emotion/babel-preset-css-prop']
   }),
   docs: {
     autodocs: true,
     // autodocs: 'tag',
-    defaultName: 'Documentation',
+    defaultName: 'Documentation'
   },
   webpackFinal: (config: any) => {
     config.module.rules.find(
diff --git a/packages/harmony/.storybook/preview.ts b/packages/harmony/.storybook/preview.ts
index e4ee162f76a..eb2fc691030 100644
--- a/packages/harmony/.storybook/preview.ts
+++ b/packages/harmony/.storybook/preview.ts
@@ -1,3 +1,5 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+
 // This file is used to configure all stories
 import 'assets/styles/reset.css'
 import 'assets/fonts/avenir.css'
@@ -13,3 +15,15 @@ import 'assets/styles/shadows.css'
 export const parameters = {
   viewMode: 'docs'
 }
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      default: 'default',
+      dark: 'dark',
+      matrix: 'matrix'
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-theme'
+  })
+]
diff --git a/packages/harmony/package.json b/packages/harmony/package.json
index 92716200be5..3a3377f6bd0 100644
--- a/packages/harmony/package.json
+++ b/packages/harmony/package.json
@@ -25,13 +25,14 @@
     "@babel/preset-env": "7.22.15",
     "@babel/preset-react": "7.22.15",
     "@babel/preset-typescript": "7.22.15",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/babel-plugin": "11.11.0",
+    "@emotion/babel-preset-css-prop": "11.11.0",
     "@storybook/addon-a11y": "7.4.0",
     "@storybook/addon-actions": "7.4.2",
     "@storybook/addon-essentials": "7.4.2",
     "@storybook/addon-knobs": "7.0.2",
     "@storybook/addon-links": "7.4.2",
+    "@storybook/addon-themes": "7.5.0",
     "@storybook/addons": "7.4.2",
     "@storybook/react": "7.4.2",
     "@storybook/react-webpack5": "7.4.2",
@@ -59,7 +60,7 @@
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-json": "4.0.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "2.9.0",
diff --git a/packages/web/src/utils/theme/theme.ts b/packages/web/src/utils/theme/theme.ts
index 98c4e1da0f3..cfefaf64241 100644
--- a/packages/web/src/utils/theme/theme.ts
+++ b/packages/web/src/utils/theme/theme.ts
@@ -11,10 +11,28 @@ export type ThemeColor = keyof typeof DefaultTheme &
   keyof typeof DarkTheme &
   keyof typeof MatrixTheme
 
-const applyTheme = (themeObject: { [key: string]: string }) => {
+const getThemeNameKey = (theme: Theme) => {
+  switch (theme) {
+    case Theme.AUTO:
+      if (doesPreferDarkMode()) {
+        return Theme.DARK
+      }
+      return Theme.DEFAULT
+    case Theme.DEFAULT:
+    case Theme.DARK:
+    case Theme.MATRIX:
+    default:
+      return theme
+  }
+}
+
+const applyTheme = (theme: Theme) => {
+  const themeObject: { [key: string]: string } = getThemeColors(theme)
   Object.keys(themeObject).forEach((key) => {
     document.documentElement.style.setProperty(key, themeObject[key])
   })
+  // Set data-theme to enable theme scoped css rules
+  document.documentElement.setAttribute('data-theme', getThemeNameKey(theme))
 }
 
 const doesPreferDarkMode = () => {
@@ -47,8 +65,7 @@ const getThemeColors = (theme: Theme | null) => {
 }
 
 export const setTheme = (theme: Theme) => {
-  const themeFile = getThemeColors(theme)
-  applyTheme(themeFile)
+  applyTheme(theme)
   window.localStorage.setItem(THEME_KEY, theme)
 }
 

From b14329851a5880d74f24f22da04e2ff9800b5263 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 18 Oct 2023 15:07:16 -0700
Subject: [PATCH 03/13] set theme background color automatically

---
 packages/harmony/.storybook/global.css | 3 +++
 packages/harmony/.storybook/preview.ts | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 packages/harmony/.storybook/global.css

diff --git a/packages/harmony/.storybook/global.css b/packages/harmony/.storybook/global.css
new file mode 100644
index 00000000000..a1d64250e20
--- /dev/null
+++ b/packages/harmony/.storybook/global.css
@@ -0,0 +1,3 @@
+html {
+    background-color: var(--harmony-background);
+}
diff --git a/packages/harmony/.storybook/preview.ts b/packages/harmony/.storybook/preview.ts
index eb2fc691030..3ef120cfe34 100644
--- a/packages/harmony/.storybook/preview.ts
+++ b/packages/harmony/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 
 // This file is used to configure all stories
+import './global.css'
 import 'assets/styles/reset.css'
 import 'assets/fonts/avenir.css'
 import 'assets/styles/fonts.css'

From e7a38426d9fcb2306846a7f56c5cdab65390f3d0 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 18 Oct 2023 15:09:56 -0700
Subject: [PATCH 04/13] remove unrelated changes

---
 .../src/components/button/Button.module.css   | 14 ++-------
 .../src/components/button/Button.stories.tsx  | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index ad54af1e561..7b294813e58 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -117,7 +117,6 @@
   --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
   background: transparent;
-  border-color: var(--harmony-border-strong);
   box-shadow: none;
 }
 .secondary:hover {
@@ -139,24 +138,15 @@
 
 /* Tertiary */
 .tertiary {
+  --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
-  background: #FFFFFF;
-  opacity: 0.85;
-  backdrop-filter: blur(6px);
-  border-color: var(--harmony-border-default);
+  background: var(--harmony-static-white);
 }
 .tertiary:hover {
   box-shadow: var(--harmony-shadow-mid);
-  background: var(--harmony-static-white);
-  border-color: var(--harmony-border-strong);
-  opacity: 1;
-  backdrop-filter: none;
 }
 .tertiary:active {
   background-color: var(--harmony-n-50);
-  border-color: var(--harmony-border-strong);
-  opacity: 1;
-  backdrop-filter: none;
   box-shadow: none;
 }
 
diff --git a/packages/harmony/src/components/button/Button.stories.tsx b/packages/harmony/src/components/button/Button.stories.tsx
index a9aa0f2b56b..191a7b56006 100644
--- a/packages/harmony/src/components/button/Button.stories.tsx
+++ b/packages/harmony/src/components/button/Button.stories.tsx
@@ -1,9 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
+import * as Icons from '../typography/Icons'
+
 import { Button } from './Button'
 import { ButtonProps, ButtonSize, ButtonType } from './types'
 
 const baseProps: ButtonProps = {
+  iconLeft: Icons.IconCampfire,
+  iconRight: Icons.IconCampfire,
   text: 'Click Me'
 }
 
@@ -30,6 +34,32 @@ const meta: Meta<typeof Button> = {
         <Button {...baseProps} size={ButtonSize.DEFAULT} {...props} disabled />
         <Button {...baseProps} size={ButtonSize.LARGE} {...props} disabled />
       </div>
+      <div style={{ alignItems: 'center', display: 'flex', gap: '16px' }}>
+        <Button
+          {...baseProps}
+          size={ButtonSize.SMALL}
+          {...props}
+          text='Loading'
+          minWidth={123}
+          isLoading
+        />
+        <Button
+          {...baseProps}
+          size={ButtonSize.DEFAULT}
+          {...props}
+          text='Loading'
+          minWidth={180}
+          isLoading
+        />
+        <Button
+          {...baseProps}
+          size={ButtonSize.LARGE}
+          {...props}
+          text='Loading'
+          minWidth={212}
+          isLoading
+        />
+      </div>
     </div>
   )
 }

From 65efccaf8b9e3ed0a055c30e92f529d3e0af5eda Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 18 Oct 2023 15:17:28 -0700
Subject: [PATCH 05/13] disable backgrounds addon

---
 packages/harmony/.storybook/main.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/harmony/.storybook/main.ts b/packages/harmony/.storybook/main.ts
index 5134ff04ceb..6e4ab4fbc7f 100644
--- a/packages/harmony/.storybook/main.ts
+++ b/packages/harmony/.storybook/main.ts
@@ -4,7 +4,12 @@ import { StorybookConfig } from '@storybook/react-webpack5'
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(mdx|ts|tsx)'],
   addons: [
-    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false
+      }
+    },
     '@storybook/addon-a11y',
     '@storybook/addon-themes'
   ],

From 2cc7d99d380f59be62b5ff9f71c9cfc63fc5ff47 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 11:53:57 -0700
Subject: [PATCH 06/13] fix dark mode button styles

---
 .../src/components/button/Button.module.css   | 34 ++++++++++++++++---
 .../src/components/button/Button.stories.tsx  | 30 ----------------
 2 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 7b294813e58..26c0681c872 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -141,13 +141,19 @@
   --button-color: var(--harmony-n-300);
   --text-color: var(--harmony-text-default);
   background: var(--harmony-static-white);
+  opacity: .85;
+  backdrop-filter: blur(6px);
 }
 .tertiary:hover {
   box-shadow: var(--harmony-shadow-mid);
+  opacity: 1;
+  backdrop-filter: none;
 }
 .tertiary:active {
   background-color: var(--harmony-n-50);
   box-shadow: none;
+  opacity: 1;
+  backdrop-filter: none;
 }
 
 /* Destructive */
@@ -167,7 +173,8 @@
 }
 .destructive:active {
   --button-color: var(--harmony-red);
-  --text-color: var(--harmony-static-white);  --overlay-color: var(--harmony-static-black);
+  --text-color: var(--harmony-static-white);
+  --overlay-color: var(--harmony-static-black);
   --overlay-opacity: 0.2;
   background-color: var(--button-color);
   box-shadow: none;
@@ -178,16 +185,16 @@
   box-shadow: none;
 }
 
-.primary.disabled,
-.secondary.disabled {
+.primary.disabled {
   --button-color: var(--harmony-n-150);
   --text-color: var(--harmony-static-white);
   background-color: var(--harmony-n-150);
   border-color: var(--harmony-n-150);
 }
 
-.destructive.disabled,
-.tertiary.disabled {
+.secondary.disabled,
+.tertiary.disabled,
+.destructive.disabled {
   opacity: 0.45;
 }
 
@@ -201,3 +208,20 @@
   padding: 0;
   height: 100%;
 }
+
+/* Dark mode */
+html[data-theme='dark'] {
+  .primary:hover {
+    --overlay-opacity: 0.2;
+  }
+
+  .tertiary {
+    --button-color: var(--harmony-white);
+    --text-color: var(--harmony-text-default);
+    background: transparent;
+  }
+  .tertiary:active {
+    --button-color: var(--harmony-n-50);
+    background-color: var(--button-color); 
+  }
+}
diff --git a/packages/harmony/src/components/button/Button.stories.tsx b/packages/harmony/src/components/button/Button.stories.tsx
index 191a7b56006..a9aa0f2b56b 100644
--- a/packages/harmony/src/components/button/Button.stories.tsx
+++ b/packages/harmony/src/components/button/Button.stories.tsx
@@ -1,13 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import * as Icons from '../typography/Icons'
-
 import { Button } from './Button'
 import { ButtonProps, ButtonSize, ButtonType } from './types'
 
 const baseProps: ButtonProps = {
-  iconLeft: Icons.IconCampfire,
-  iconRight: Icons.IconCampfire,
   text: 'Click Me'
 }
 
@@ -34,32 +30,6 @@ const meta: Meta<typeof Button> = {
         <Button {...baseProps} size={ButtonSize.DEFAULT} {...props} disabled />
         <Button {...baseProps} size={ButtonSize.LARGE} {...props} disabled />
       </div>
-      <div style={{ alignItems: 'center', display: 'flex', gap: '16px' }}>
-        <Button
-          {...baseProps}
-          size={ButtonSize.SMALL}
-          {...props}
-          text='Loading'
-          minWidth={123}
-          isLoading
-        />
-        <Button
-          {...baseProps}
-          size={ButtonSize.DEFAULT}
-          {...props}
-          text='Loading'
-          minWidth={180}
-          isLoading
-        />
-        <Button
-          {...baseProps}
-          size={ButtonSize.LARGE}
-          {...props}
-          text='Loading'
-          minWidth={212}
-          isLoading
-        />
-      </div>
     </div>
   )
 }

From 14343d01050d7b12ca80565221795a1a7eb080f9 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 12:06:28 -0700
Subject: [PATCH 07/13] more button style fixes

---
 .../src/components/button/Button.module.css     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 26c0681c872..32479b2fa62 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -114,7 +114,7 @@
 
 /* Secondary */
 .secondary {
-  --button-color: var(--harmony-n-300);
+  --button-color: var(--harmony-border-strong);
   --text-color: var(--harmony-text-default);
   background: transparent;
   box-shadow: none;
@@ -138,18 +138,20 @@
 
 /* Tertiary */
 .tertiary {
-  --button-color: var(--harmony-n-300);
+  --button-color: var(--harmony-border-default);
   --text-color: var(--harmony-text-default);
-  background: var(--harmony-static-white);
+  background-color: var(--harmony-bg-white);
   opacity: .85;
   backdrop-filter: blur(6px);
 }
 .tertiary:hover {
+  --button-color: var(--harmony-border-strong);
   box-shadow: var(--harmony-shadow-mid);
   opacity: 1;
   backdrop-filter: none;
 }
 .tertiary:active {
+  --button-color: var(--harmony-border-strong);
   background-color: var(--harmony-n-50);
   box-shadow: none;
   opacity: 1;
@@ -216,9 +218,14 @@ html[data-theme='dark'] {
   }
 
   .tertiary {
-    --button-color: var(--harmony-white);
+    --button-color: var(--harmony-bg-white);
     --text-color: var(--harmony-text-default);
-    background: transparent;
+    background-color: var(--button-color);
+    opacity: .6;
+  }
+  .tertiary:hover {
+    --button-color: var(--harmony-bg-white);
+    opacity: 1;
   }
   .tertiary:active {
     --button-color: var(--harmony-n-50);

From 3b79ab118232c8313c5da1b5dfbdec8ac58e86df Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 12:14:57 -0700
Subject: [PATCH 08/13] fix default theme

---
 packages/harmony/.storybook/preview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/harmony/.storybook/preview.ts b/packages/harmony/.storybook/preview.ts
index 3ef120cfe34..42d2e6310de 100644
--- a/packages/harmony/.storybook/preview.ts
+++ b/packages/harmony/.storybook/preview.ts
@@ -24,7 +24,7 @@ export const decorators = [
       dark: 'dark',
       matrix: 'matrix'
     },
-    defaultTheme: 'light',
+    defaultTheme: 'default',
     attributeName: 'data-theme'
   })
 ]

From 10dce95542ac6566a98c0a96a5c5c9b2411021db Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 12:49:00 -0700
Subject: [PATCH 09/13] fix primary dark disabled style

---
 packages/harmony/src/components/button/Button.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 32479b2fa62..26f36731976 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -216,6 +216,10 @@ html[data-theme='dark'] {
   .primary:hover {
     --overlay-opacity: 0.2;
   }
+  .primary.disabled {
+    --button-color: var(--harmony-n-150);
+    --text-color: var(--harmony-white);
+  }
 
   .tertiary {
     --button-color: var(--harmony-bg-white);

From c8ee7ad1689834180a7c51c9f78c216452c0bfba Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 13:46:48 -0700
Subject: [PATCH 10/13] fix secondary dark hover

---
 packages/harmony/src/components/button/Button.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 26f36731976..09272c591a7 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -221,6 +221,10 @@ html[data-theme='dark'] {
     --text-color: var(--harmony-white);
   }
 
+  .secondary:hover {
+    --overlay-opacity: 0.2;
+  }
+
   .tertiary {
     --button-color: var(--harmony-bg-white);
     --text-color: var(--harmony-text-default);

From 7e3505b720fe0b4dd9a7799d3320f79b0b292c2b Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 14:23:20 -0700
Subject: [PATCH 11/13] border color hack

---
 .../harmony/src/components/button/BaseButton.module.css     | 4 +---
 packages/harmony/src/components/button/Button.module.css    | 6 ++++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/harmony/src/components/button/BaseButton.module.css b/packages/harmony/src/components/button/BaseButton.module.css
index 4b649a1779a..da440d0acfc 100644
--- a/packages/harmony/src/components/button/BaseButton.module.css
+++ b/packages/harmony/src/components/button/BaseButton.module.css
@@ -11,7 +11,7 @@
   text-align: center;
   user-select: none;
   white-space: nowrap;
-  transition: all var(--harmony-hover);
+  transition: transform var(--harmony-hover);
 }
 
 .button:focus {
@@ -22,13 +22,11 @@
 @media (hover: hover) {
   .button:not(.disabled):hover {
     transform: scale(1.04);
-    transition: all var(--harmony-hover);
   }
 }
 
 .button:not(.disabled):active {
   transform: scale(0.98);
-  transition: all var(--harmony-press);
 }
 
 .button.disabled {
diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 09272c591a7..0db1d1633d8 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -100,6 +100,8 @@
   --text-color: var(--harmony-static-white);
   --button-color: var(--harmony-primary);
   background: var(--button-color);
+  border: none;
+  margin: 0 1px;
 }
 .primary:hover {
   --overlay-color: var(--harmony-static-white);
@@ -126,6 +128,8 @@
   --overlay-color: var(--harmony-static-white);
   --overlay-opacity: 0.1;
   box-shadow: var(--harmony-shadow-mid);
+  border: none;
+  margin: 0 1px;
 }
 .secondary:active {
   --button-color: var(--harmony-primary);
@@ -134,6 +138,8 @@
   --overlay-color: var(--harmony-static-black);
   --overlay-opacity: 0.2;
   box-shadow: none;
+  border: none;
+  margin: 0 1px;
 }
 
 /* Tertiary */

From 374d5166daface705bd14553e2c66fcd8b18ea8c Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 14:44:51 -0700
Subject: [PATCH 12/13] fix opacity on tertiary text

---
 packages/harmony/src/components/button/Button.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 0db1d1633d8..24936b2dd08 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -146,8 +146,8 @@
 .tertiary {
   --button-color: var(--harmony-border-default);
   --text-color: var(--harmony-text-default);
-  background-color: var(--harmony-bg-white);
-  opacity: .85;
+  /* Don't use opacity prop as it affects the text too */
+  background-color: rgb(255, 255, 255, .85);
   backdrop-filter: blur(6px);
 }
 .tertiary:hover {
@@ -234,8 +234,8 @@ html[data-theme='dark'] {
   .tertiary {
     --button-color: var(--harmony-bg-white);
     --text-color: var(--harmony-text-default);
-    background-color: var(--button-color);
-    opacity: .6;
+    /* Don't use opacity prop as it affects the text too */
+    background-color: rgba(50, 51, 77, 0.6);
   }
   .tertiary:hover {
     --button-color: var(--harmony-bg-white);

From e337f79ca9531aabec1a4c97d93397385f42b9f5 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 19 Oct 2023 14:48:27 -0700
Subject: [PATCH 13/13] no overlay on destructive hover

---
 packages/harmony/src/components/button/Button.module.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/harmony/src/components/button/Button.module.css b/packages/harmony/src/components/button/Button.module.css
index 24936b2dd08..f95b9cab853 100644
--- a/packages/harmony/src/components/button/Button.module.css
+++ b/packages/harmony/src/components/button/Button.module.css
@@ -174,8 +174,6 @@
 .destructive:hover {
   --button-color: var(--harmony-red);
   --text-color: var(--harmony-static-white);
-  --overlay-color: var(--harmony-static-white);
-  --overlay-opacity: 0.1;
   background-color: var(--button-color);
   box-shadow: var(--harmony-shadow-mid);
 }