Merge pull request #10 from medusajs/feat/apply-theme

feat: apply theme
medusajs · Jul 10, 2023 · 45967e7 · 45967e7
2 parents 38b1749 + d27cb9e
commit 45967e7
Show file tree

Hide file tree

Showing 85 changed files with 1,915 additions and 278 deletions.
diff --git a/.prettierrc b/.prettierrc
diff --git a/configs/eslint-config-ui/index.js b/configs/eslint-config-ui/index.js
@@ -2,6 +2,7 @@ module.exports = {
   extends: ["next", "turbo", "prettier"],
   rules: {
     "@next/next/no-html-link-for-pages": "off",
+    "react/no-children-prop": "off",
   },
   settings: {
     react: {

diff --git a/configs/tsconfig-ui/react-library.json b/configs/tsconfig-ui/react-library.json
@@ -3,7 +3,7 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["ES2015", "DOM"],
     "module": "ESNext",
     "target": "es6"

diff --git a/package.json b/package.json
@@ -12,13 +12,14 @@
     "version:next": "changeset version --snapshot next",
     "release:snapshot": "changeset publish --no-git-tags --snapshot --tag snapshot",
     "generate:icons": "rimraf ./packages/icons/src/components && toolbox icons -o './packages/icons/src/components'",
-    "generate:tokens": "toolbox tokens -o './packages/ui/src/theme'"
+    "generate:tokens": "toolbox tokens -o './packages/ui-preset/src/theme'"
   },
   "devDependencies": {
     "@medusajs/eslint-config-ui": "*",
     "@medusajs/toolbox": "*",
     "eslint": "^7.32.0",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "rimraf": "^5.0.1",
     "turbo": "latest"
   },

diff --git a/packages/icons/rollup.config.mjs b/packages/icons/rollup.config.mjs
@@ -22,14 +22,9 @@ const plugins = (pkg, minify, esbuildOptions = {}) =>
       filename: `stats/${pkg.name}${minify ? "-min" : ""}.html`,
     }),
     nodeResolve(),
-    // ts({
-    //   tsconfig: "tsconfig.json",
-    //   allowJs: false,
-    //   checkJs: false,
-    // }),
   ].filter(Boolean)
 
-const packageName = "@medusajs/icons"
+const packageName = pkg.name
 const outputFileName = "medusa-icons"
 const outputDir = "dist"
 const inputs = ["src/components/index.ts"]
@@ -42,12 +37,6 @@ const bundles = [
     minify: true,
     sourcemap: true,
   },
-  {
-    format: "umd",
-    inputs,
-    outputDir,
-    sourcemap: true,
-  },
   {
     format: "cjs",
     inputs,

diff --git a/packages/ui-preset/.eslintrc.js b/packages/ui-preset/.eslintrc.js
@@ -0,0 +1,7 @@
+/* eslint-env node */
+module.exports = {
+  extends: ["@medusajs/eslint-config-ui"],
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+}
diff --git a/packages/ui-preset/README.md b/packages/ui-preset/README.md
@@ -0,0 +1 @@
+# ui-preset
diff --git a/packages/ui-preset/package.json b/packages/ui-preset/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@medusajs/ui-preset",
+  "version": "0.0.0",
+  "description": "Medusa UI preset",
+  "license": "MIT",
+  "author": "Kasper Kristensen <[email protected]>",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.3.2",
+    "tailwindcss-animate": "^1.0.6"
+  },
+  "devDependencies": {
+    "@medusajs/tsconfig-ui": "*",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6",
+    "eslint": "^7.32.0",
+    "@medusajs/eslint-config-ui": "*"
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/packages/ui-preset/src/index.ts b/packages/ui-preset/src/index.ts
@@ -0,0 +1,3 @@
+import { preset } from "./preset"
+
+module.exports = preset
diff --git a/packages/ui/src/theme/plugin.ts → packages/ui-preset/src/plugin.ts b/packages/ui/src/theme/plugin.ts → packages/ui-preset/src/plugin.ts
@@ -1,10 +1,11 @@
 import plugin from "tailwindcss/plugin"
-import { theme } from "./extension/theme"
-import { colors } from "./tokens/colors"
-import { components } from "./tokens/components"
+import { theme } from "./theme/extension/theme"
+import { colors } from "./theme/tokens/colors"
+import { components } from "./theme/tokens/components"
+import { effects } from "./theme/tokens/effects"
 
 export default plugin(
-  function medusaUi({ addBase, addComponents, config, theme }) {
+  function medusaUi({ addBase, addComponents, addUtilities, config, theme }) {
     const [darkMode, className = ".dark"] = ([] as string[]).concat(
       config("darkMode", "media")
     )
@@ -21,17 +22,17 @@ export default plugin(
     addComponents(components)
 
     addBase({
-      ":root": colors.light,
+      ":root": { ...colors.light, ...effects.light },
     })
 
     if (darkMode === "class") {
       addBase({
-        [className]: colors.dark,
+        [className]: { ...colors.dark, ...effects.dark },
       })
     } else {
       addBase({
         "@media (prefers-color-scheme: dark)": {
-          ":root": colors.dark,
+          ":root": { ...colors.dark, ...effects.dark },
         },
       })
     }

diff --git a/packages/ui-preset/src/preset.ts b/packages/ui-preset/src/preset.ts
@@ -0,0 +1,10 @@
+import type { Config } from "tailwindcss"
+
+import plugin from "./plugin"
+
+const preset = {
+  content: [],
+  plugins: [plugin, require("tailwindcss-animate")],
+} satisfies Config
+
+export { preset }
diff --git a/packages/ui/src/theme/extension/theme.ts → ...es/ui-preset/src/theme/extension/theme.ts b/packages/ui/src/theme/extension/theme.ts → ...es/ui-preset/src/theme/extension/theme.ts
@@ -102,6 +102,9 @@ export const theme = {
           },
           "purple": {
             "bg": {
+              "hover": {
+                "DEFAULT": "var(--tag-purple-bg-hover)"
+              },
               "DEFAULT": "var(--tag-purple-bg)"
             },
             "text": {
@@ -163,6 +166,9 @@ export const theme = {
             "DEFAULT": "var(--bg-highlight)"
           },
           "base": {
+            "hover": {
+              "DEFAULT": "var(--bg-base-hover)"
+            },
             "DEFAULT": "var(--bg-base)",
             "pressed": {
               "DEFAULT": "var(--bg-base-pressed)"
@@ -188,7 +194,10 @@ export const theme = {
           },
           "toggle": {
             "off": {
-              "DEFAULT": "var(--bg-toggle-off)"
+              "DEFAULT": "var(--bg-toggle-off)",
+              "hover": {
+                "DEFAULT": "var(--bg-toggle-off-hover)"
+              }
             }
           },
           "disabled": {
@@ -205,6 +214,9 @@ export const theme = {
             }
           },
           "interactive": {
+            "hover": {
+              "DEFAULT": "var(--fg-interactive-hover)"
+            },
             "DEFAULT": "var(--fg-interactive)"
           },
           "error": {
@@ -252,32 +264,41 @@ export const theme = {
             }
           },
           "inverted": {
+            "pressed": {
+              "DEFAULT": "var(--button-inverted-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--button-inverted-hover)"
+            },
             "DEFAULT": "var(--button-inverted)"
           }
         }
       }
     },
     "boxShadow": {
-      "form-focus": "var(--form-focus)",
+      "details-switch-handle": "var(--details-switch-handle)",
+      "details-switch-background-focus": "var(--details-switch-background-focus)",
+      "details-switch-background": "var(--details-switch-background)",
+      "borders-focus": "var(--borders-focus)",
+      "elevation-flyout": "var(--elevation-flyout)",
+      "borders-interactive": "var(--borders-interactive)",
+      "buttons-secondary": "var(--buttons-secondary)",
+      "buttons-danger": "var(--buttons-danger)",
+      "buttons-primary-focus": "var(--buttons-primary-focus)",
+      "elevation-modal": "var(--elevation-modal)",
+      "borders-interactive-w-focus": "var(--borders-interactive-w-focus)",
+      "borders-active": "var(--borders-active)",
+      "borders-base-w-shadow": "var(--borders-base-w-shadow)",
+      "borders-base": "var(--borders-base)",
+      "borders-strong-w-shadow": "var(--borders-strong-w-shadow)",
+      "borders-interactive-w-shadow": "var(--borders-interactive-w-shadow)",
+      "buttons-primary": "var(--buttons-primary)",
+      "buttons-secondary-focus": "var(--buttons-secondary-focus)",
+      "buttons-danger-focus": "var(--buttons-danger-focus)",
       "elevation-tooltip": "var(--elevation-tooltip)",
       "elevation-card-hover": "var(--elevation-card-hover)",
-      "elevation-flyout": "var(--elevation-flyout)",
       "elevation-card-rest": "var(--elevation-card-rest)",
-      "form-border-interactive": "var(--form-border-interactive)",
-      "form-border-strong-shadow": "var(--form-border-strong-shadow)",
-      "form-border-interactive-shadow": "var(--form-border-interactive-shadow)",
-      "form-border-base-shadow": "var(--form-border-base-shadow)",
-      "form-border-interactive-focus": "var(--form-border-interactive-focus)",
-      "form-button-danger": "var(--form-button-danger)",
-      "form-button-neutral": "var(--form-button-neutral)",
-      "form-active": "var(--form-active)",
-      "form-button-inverted-focus": "var(--form-button-inverted-focus)",
-      "form-button-danger-focus": "var(--form-button-danger-focus)",
-      "form-button-inverted": "var(--form-button-inverted)",
-      "form-button-neutral-focus": "var(--form-button-neutral-focus)",
-      "elevation-modal": "var(--elevation-modal)",
-      "form-border-base": "var(--form-border-base)",
-      "form-bg-interactive-enhancer": "var(--form-bg-interactive-enhancer)"
+      "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)"
     }
   }
 }
diff --git a/packages/ui/src/theme/tokens/colors.ts → ...ages/ui-preset/src/theme/tokens/colors.ts b/packages/ui/src/theme/tokens/colors.ts → ...ages/ui-preset/src/theme/tokens/colors.ts
@@ -63,7 +63,7 @@ export const colors = {
     "--code-bg-header": "rgba(22, 22, 24, 1)",
     "--bg-base-pressed": "rgba(40, 40, 44, 1)",
     "--tag-orange-bg-hover": "rgba(74, 41, 0, 1)",
-    "--button-transparent": "rgba(0, 0, 0, 1)",
+    "--button-transparent": "rgba(0, 0, 0, 0)",
     "--button-transparent-pressed": "rgba(46, 46, 50, 1)",
     "--tag-pink-border": "rgba(96, 29, 72, 1)",
     "--tag-neutral-bg": "rgba(40, 40, 44, 1)",
@@ -132,7 +132,7 @@ export const colors = {
     "--button-danger-pressed": "rgba(225, 29, 72, 1)",
     "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
     "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--button-inverted-pressed": "rgba(17, 24, 39, 1)",
     "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
     "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
@@ -149,9 +149,9 @@ export const colors = {
     "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
     "--fg-interactive": "rgba(59, 130, 246, 1)",
     "--fg-error": "rgba(225, 29, 72, 1)",
-    "--border-loud-transparent": "rgba(3, 7, 18, 1)",
-    "--border-loud-muted": "rgba(3, 7, 18, 0.12)",
+    "--border-loud-transparent": "rgba(3, 7, 18, 0)",
     "--border-danger": "rgba(190, 18, 60, 1)",
+    "--border-loud-muted": "rgba(3, 7, 18, 0.1)",
     "--bg-overlay": "rgba(3, 7, 18, 0.4)",
     "--bg-toggle-off": "rgba(229, 231, 235, 1)",
     "--fg-base": "rgba(3, 7, 18, 1)",
@@ -187,6 +187,9 @@ export const colors = {
     "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
     "--button-neutral-hover": "rgba(255, 255, 255, 1)",
     "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)"
+    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
+    "--bg-toggle-off-hover": "rgba(229, 231, 235, 1)",
+    "--bg-toggle-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
+    "--bg-toggle-off-hover-gradient-to": "rgba(3, 7, 18, 1)"
   }
 }
diff --git a/packages/ui-preset/src/theme/tokens/components.ts b/packages/ui-preset/src/theme/tokens/components.ts
@@ -0,0 +1,42 @@
+export const components = {
+  ".button-neutral-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
+    "opacity": "2%"
+  },
+  ".button-danger-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
+    "opacity": "12%"
+  },
+  ".button-inverted-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
+    "opacity": "12%"
+  },
+  ".button-danger-pressed-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
+    "opacity": "16%"
+  },
+  ".button-inverted-pressed-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
+    "opacity": "16%"
+  },
+  ".button-inverted-hover-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
+    "opacity": "16%"
+  },
+  ".button-danger-hover-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
+    "opacity": "16%"
+  },
+  ".button-neutral-pressed-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
+    "opacity": "6%"
+  },
+  ".button-neutral-hover-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
+    "opacity": "6%"
+  },
+  ".bg-toggle-off-hover-gradient": {
+    "backgroundImage": "linear-gradient(0deg, var(--bg-toggle-off-hover-gradient-from), var(--bg-toggle-off-hover-gradient-to))",
+    "opacity": "6%"
+  }
+}
diff --git a/packages/ui-preset/src/theme/tokens/effects.ts b/packages/ui-preset/src/theme/tokens/effects.ts
@@ -0,0 +1,36 @@
+export const effects = {
+  "dark": {
+    "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+    "--form-focus": "0px 0px 0px 2px rgba(28, 28, 31, 1), 0px 0px 0px 4px rgba(0, 145, 255, 1)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
+    "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
+    "--form-active": "0px 0px 0px 3px rgba(16, 42, 76, 1)",
+    "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)"
+  },
+  "light": {
+    "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)",
+    "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
+    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
+    "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
+    "--buttons-secondary": "0px -1px 0px 0px rgba(3, 7, 18, 0.08) inset, 0px 1px 1px 0px rgba(3, 7, 18, 0.06)",
+    "--buttons-danger": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 1px 1px 0px rgba(190, 18, 60, 0.2)",
+    "--buttons-primary-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 1px 1px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
+    "--borders-interactive-w-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
+    "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
+    "--borders-base-w-shadow": "0px 1px 2px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(229, 231, 235, 1)",
+    "--borders-base": "0px 0px 0px 1px rgba(229, 231, 235, 1)",
+    "--borders-strong-w-shadow": "0px 1px 2px 0px rgba(3, 7, 18, 0.3), 0px 0px 0px 1px rgba(209, 213, 219, 1)",
+    "--borders-interactive-w-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
+    "--buttons-primary": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 1px 1px 0px rgba(3, 7, 18, 0.2)",
+    "--buttons-secondary-focus": "0px -1px 0px 0px rgba(3, 7, 18, 0.08) inset, 0px 1px 1px 0px rgba(3, 7, 18, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
+    "--buttons-danger-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 1px 1px 0px rgba(190, 18, 60, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
+    "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
+    "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
+    "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)"
+  }
+}
diff --git a/packages/ui-preset/tsconfig.json b/packages/ui-preset/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@medusajs/tsconfig-ui/base.json",
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"]
+}