feat!: Light mode (#514)

pluralsh · Sep 25, 2023 · 1a1991c · 1a1991c
1 parent 4dd9851
commit 1a1991c
Show file tree

Hide file tree

Showing 61 changed files with 7,215 additions and 7,467 deletions.
diff --git a/package.json b/package.json
@@ -31,17 +31,17 @@
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.13.3",
     "@loomhq/loom-embed": "1.5.0",
-    "@markdoc/markdoc": "0.3.0",
+    "@markdoc/markdoc": "0.3.2",
     "@monaco-editor/react": "4.5.1",
     "@react-aria/utils": "3.19.0",
     "@react-hooks-library/core": "0.5.1",
     "@react-stately/utils": "3.7.0",
     "@react-types/shared": "3.19.0",
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.9.1",
+    "@tanstack/react-table": "8.9.3",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "@types/chroma-js": "2.4.0",
-    "@types/lodash-es": "4.17.7",
+    "@types/lodash-es": "4.17.8",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
     "grommet": "2.32.2",
@@ -53,55 +53,55 @@
     "moment": "2.29.4",
     "prop-types": "15.8.1",
     "react-animate-height": "3.1.1",
-    "react-aria": "3.25.0",
+    "react-aria": "3.27.0",
     "react-embed": "3.6.0",
     "react-markdown": "8.0.7",
     "react-merge-refs": "2.0.2",
-    "react-spring": "9.7.1",
-    "react-stately": "3.23.0",
+    "react-spring": "9.7.2",
+    "react-stately": "3.25.0",
     "react-use-measure": "2.1.1",
     "rehype-raw": "6.1.1",
     "resize-observer-polyfill": "1.5.1",
     "styled-container-query": "1.3.5",
-    "type-fest": "3.11.1",
+    "type-fest": "3.13.1",
     "use-immer": "0.9.0",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@babel/core": "7.22.1",
-    "@babel/preset-env": "7.22.4",
-    "@babel/preset-react": "7.22.3",
-    "@emotion/react": "11.11.0",
+    "@babel/core": "7.22.11",
+    "@babel/preset-env": "7.22.14",
+    "@babel/preset-react": "7.22.5",
+    "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@pluralsh/eslint-config-typescript": "2.5.41",
-    "@storybook/addon-actions": "7.0.22",
-    "@storybook/addon-docs": "7.0.22",
-    "@storybook/addon-essentials": "7.0.22",
-    "@storybook/addon-interactions": "7.0.22",
-    "@storybook/addon-links": "7.0.22",
-    "@storybook/builder-vite": "7.0.22",
-    "@storybook/node-logger": "7.0.22",
-    "@storybook/react": "7.0.22",
-    "@storybook/react-vite": "7.0.22",
-    "@storybook/testing-library": "0.1.0",
+    "@pluralsh/eslint-config-typescript": "2.5.84",
+    "@storybook/addon-actions": "7.4.0",
+    "@storybook/addon-docs": "7.4.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-interactions": "7.4.0",
+    "@storybook/addon-links": "7.4.0",
+    "@storybook/builder-vite": "7.4.0",
+    "@storybook/node-logger": "7.4.0",
+    "@storybook/react": "7.4.0",
+    "@storybook/react-vite": "7.4.0",
+    "@storybook/testing-library": "0.2.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@types/react-dom": "18.2.4",
+    "@types/react-dom": "18.2.7",
     "@types/react-transition-group": "4.4.6",
     "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.59.9",
-    "@typescript-eslint/parser": "5.59.9",
-    "@vitest/coverage-v8": "0.34.1",
-    "@vitest/ui": "0.34.1",
-    "babel-loader": "9.1.2",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@vitest/coverage-v8": "0.34.3",
+    "@vitest/ui": "0.34.3",
+    "babel-loader": "9.1.3",
     "conventional-changelog-conventionalcommits": "6.1.0",
-    "eslint": "8.42.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-import-newlines": "1.3.1",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import-newlines": "1.3.4",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-storybook": "0.6.13",
     "firebase-tools": "11.30.0",
     "fuse.js": "6.6.2",
     "honorable": "1.0.0-beta.17",
@@ -110,18 +110,18 @@
     "husky": "8.0.3",
     "jest-mock": "29.5.0",
     "jsdom": "22.1.0",
-    "lint-staged": "13.2.2",
+    "lint-staged": "14.0.1",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.1",
-    "storybook": "7.0.22",
+    "storybook": "7.4.0",
     "styled-components": "5.3.11",
     "typescript": "4.9.5",
-    "vite": "4.4.8",
-    "vitest": "0.34.1"
+    "vite": "4.4.9",
+    "vitest": "0.34.3"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.0",

diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -99,6 +99,17 @@ function cssSwapper(selPrimary: string, otherSel: string, limit = 6) {
   return ret
 }
 
+const darkSelector = `[data-${COLOR_THEME_KEY}=dark]`
+const lightSelector = `[data-${COLOR_THEME_KEY}=light]`
+const lightModeSelectors = `html${lightSelector}:root,\n${cssSwapper(
+  lightSelector,
+  darkSelector
+)}`
+const darkModeSelectors = `html${darkSelector}:root,\n${cssSwapper(
+  darkSelector,
+  lightSelector
+)}`
+
 const GlobalStyle = createGlobalStyle(({ theme }) => ({
   ':root': {
     ...baseColorCSSVars,
@@ -111,16 +122,10 @@ const GlobalStyle = createGlobalStyle(({ theme }) => ({
     ...borderWidthsToToCSSVars,
     ...bordersToCSSVars,
   },
-  [cssSwapper(
-    `[data-${COLOR_THEME_KEY}=dark]`,
-    `[data-${COLOR_THEME_KEY}=light]`
-  )]: {
+  [darkModeSelectors]: {
     ...getSemanticColorCSSVars({ mode: 'dark' }),
   },
-  [cssSwapper(
-    `[data-${COLOR_THEME_KEY}=light]`,
-    `[data-${COLOR_THEME_KEY}=dark]`
-  )]: {
+  [lightModeSelectors]: {
     ...getSemanticColorCSSVars({ mode: 'light' }),
   },
   '*': theme.partials.scrollBar({ fillLevel: 0 }),