@hanzogui/themes 2.0.0

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@hanzogui/themes",
+  "version": "2.0.0",
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    },
+    "./v3": {
+      "types": "./types/v3.d.ts",
+      "react-native": "./dist/esm/v3.native.js",
+      "browser": "./dist/esm/v3.mjs",
+      "module": "./dist/esm/v3.mjs",
+      "import": "./dist/esm/v3.mjs",
+      "require": "./dist/cjs/v3.cjs",
+      "default": "./dist/esm/v3.mjs"
+    },
+    "./v3-themes": {
+      "types": "./types/v3-themes.d.ts",
+      "react-native": "./dist/esm/v3-themes.native.js",
+      "browser": "./dist/esm/v3-themes.mjs",
+      "module": "./dist/esm/v3-themes.mjs",
+      "import": "./dist/esm/v3-themes.mjs",
+      "require": "./dist/cjs/v3-themes.cjs",
+      "default": "./dist/esm/v3-themes.mjs"
+    },
+    "./v4": {
+      "types": "./types/v4.d.ts",
+      "react-native": "./dist/esm/v4.native.js",
+      "browser": "./dist/esm/v4.mjs",
+      "module": "./dist/esm/v4.mjs",
+      "import": "./dist/esm/v4.mjs",
+      "require": "./dist/cjs/v4.cjs",
+      "default": "./dist/esm/v4.mjs"
+    },
+    "./v5": {
+      "types": "./types/v5.d.ts",
+      "react-native": "./dist/esm/v5.native.js",
+      "browser": "./dist/esm/v5.mjs",
+      "module": "./dist/esm/v5.mjs",
+      "import": "./dist/esm/v5.mjs",
+      "require": "./dist/cjs/v5.cjs",
+      "default": "./dist/esm/v5.mjs"
+    },
+    "./v5-subtle": {
+      "types": "./types/v5-subtle.d.ts",
+      "react-native": "./dist/esm/v5-subtle.native.js",
+      "browser": "./dist/esm/v5-subtle.mjs",
+      "module": "./dist/esm/v5-subtle.mjs",
+      "import": "./dist/esm/v5-subtle.mjs",
+      "require": "./dist/cjs/v5-subtle.cjs",
+      "default": "./dist/esm/v5-subtle.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate": "bun run generate:v5 & bun run generate:v5-subtle",
+    "generate:v5": "gui generate-themes ./src/v5-themes.ts ./src/generated-v5.ts",
+    "generate:v5-subtle": "gui generate-themes ./src/v5-themes-subtle.ts ./src/generated-v5-subtle.ts",
+    "generate:v3": "gui generate-themes ./src/v3-themes.ts ./src/generated-v3.ts",
+    "generate:v4": "gui generate-themes ./src/v4-default.ts ./src/generated-v4.ts",
+    "generate:v4-gui": "gui generate-themes ./src/v4-gui.ts ./src/generated-v4-gui.ts",
+    "test": "bun run generate",
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/colors": "workspace:*",
+    "@hanzogui/create-theme": "workspace:*",
+    "@hanzogui/theme-builder": "workspace:*",
+    "@hanzogui/web": "workspace:*",
+    "color2k": "^2.0.2"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "@hanzogui/cli": "workspace:*",
+    "vitest": "4.0.4"
+  }
+}

package/src/componentThemeDefinitions.tsx

@@ -0,0 +1,129 @@
+import type { ThemeDefinitions } from '@hanzogui/create-theme'
+import type { masks } from '@hanzogui/theme-builder'
+import { maskOptions } from './templates'
+
+type Masks = typeof masks
+
+const overlayThemes = {
+  light: {
+    background: 'rgba(0,0,0,0.5)',
+  },
+  dark: {
+    background: 'rgba(0,0,0,0.9)',
+  },
+}
+
+export const overlayThemeDefinitions = [
+  {
+    parent: 'light',
+    theme: overlayThemes.light,
+  },
+  {
+    parent: 'dark',
+    theme: overlayThemes.dark,
+  },
+]
+
+export const componentThemeDefinitions = {
+  ListItem: [
+    {
+      parent: 'light',
+      mask: 'strengthen',
+      ...maskOptions.component,
+    },
+    {
+      parent: 'dark',
+      mask: 'identity',
+      ...maskOptions.component,
+    },
+  ],
+
+  Card: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  Button: {
+    mask: 'soften2',
+    ...maskOptions.button,
+  },
+
+  Checkbox: {
+    mask: 'softenBorder2',
+    ...maskOptions.component,
+  },
+
+  Switch: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  SwitchThumb: {
+    mask: 'inverseStrengthen2',
+    ...maskOptions.component,
+  },
+
+  TooltipContent: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  DrawerFrame: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  Progress: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  RadioGroupItem: {
+    mask: 'softenBorder2',
+    ...maskOptions.component,
+  },
+
+  TooltipArrow: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  SliderTrackActive: {
+    mask: 'inverseSoften',
+    ...maskOptions.component,
+  },
+
+  SliderTrack: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  SliderThumb: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  Tooltip: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  ProgressIndicator: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  SheetOverlay: overlayThemeDefinitions,
+  DialogOverlay: overlayThemeDefinitions,
+  ModalOverlay: overlayThemeDefinitions,
+
+  Input: {
+    mask: 'softenBorder2',
+    ...maskOptions.component,
+  },
+
+  TextArea: {
+    mask: 'softenBorder2',
+    ...maskOptions.component,
+  },
+} satisfies ThemeDefinitions<keyof Masks>