@charstudios/pallet 0.1.0 → 0.3.0

package/dist/styles/variant-toon.css

@@ -0,0 +1,339 @@
+/*
+ * Toon variant skin.
+ *
+ * Cel-shaded / neo-brutalist: moderate radius, no soft shadows, and a thick
+ * bottom "lip" whose color is auto-derived from each surface's fill
+ * (`--toon-fill`) via color-mix — slightly darker than the background.
+ */
+
+@layer pallet-variants {
+  [data-pallet-variant="toon"] {
+    --toon-radius: var(--radius-lg);
+    --toon-radius-sm: var(--radius-md);
+    --toon-outline: 1.5px;
+    --toon-lip: 3.5px;
+    /* Default fill used when a slot does not override --toon-fill */
+    --toon-fill: var(--card);
+  }
+
+  /* Shared toon chunk: outline + thick auto-darkened bottom border, no shadow.
+     Lip/edge colors read --toon-fill on the element itself so overrides work. */
+  [data-pallet-variant="toon"] :is(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="native-select"],
+    [data-slot="native-select-wrapper"],
+    [data-slot="combobox-trigger"],
+    [data-slot="combobox-chip"],
+    [data-slot="combobox-chip-input"],
+    [data-slot="command-input"],
+    [data-slot="input-otp"],
+    [data-slot="input-otp-slot"],
+    [data-slot="input-group"],
+    [data-slot="input-group-control"],
+    [data-slot="sidebar-input"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group"],
+    [data-slot="toggle-group-item"],
+    [data-slot="pagination-link"],
+    [data-slot="button-group"],
+    [data-slot="input-group-button"],
+    [data-slot="carousel-previous"],
+    [data-slot="carousel-next"],
+    [data-slot="sidebar-trigger"],
+    [data-slot="sidebar-menu-button"],
+    [data-slot="sidebar-menu-sub-button"],
+    [data-slot="sidebar-group-action"],
+    [data-slot="sidebar-menu-action"],
+    [data-slot="badge"],
+    [data-slot="kbd"],
+    [data-slot="card"],
+    [data-slot="alert"],
+    [data-slot="accordion-item"],
+    [data-slot="tabs-list"],
+    [data-slot="tabs-trigger"],
+    [data-slot="table-container"],
+    [data-slot="item"],
+    [data-slot="item-group"],
+    [data-slot="empty"],
+    [data-slot="field-set"],
+    [data-slot="sidebar"],
+    [data-slot="sidebar-container"],
+    [data-slot="sidebar-inner"],
+    [data-slot="sidebar-group"],
+    [data-slot="carousel"],
+    [data-slot="chart"],
+    [data-slot="menubar"],
+    [data-slot="navigation-menu-viewport"],
+    [data-slot="breadcrumb"],
+    [data-slot="pagination"],
+    [data-slot="scroll-area"],
+    [data-slot="calendar"],
+    [data-slot="popover-content"],
+    [data-slot="dropdown-menu-content"],
+    [data-slot="dropdown-menu-sub-content"],
+    [data-slot="context-menu-content"],
+    [data-slot="context-menu-sub-content"],
+    [data-slot="menubar-content"],
+    [data-slot="menubar-sub-content"],
+    [data-slot="select-content"],
+    [data-slot="combobox-content"],
+    [data-slot="combobox-list"],
+    [data-slot="command"],
+    [data-slot="command-list"],
+    [data-slot="hover-card-content"],
+    [data-slot="tooltip-content"],
+    [data-slot="navigation-menu-content"],
+    [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="drawer-content"]
+  ) {
+    border-style: solid;
+    border-width: var(--toon-outline);
+    border-bottom-width: var(--toon-lip);
+    border-color: color-mix(in oklch, var(--toon-fill) 42%, var(--foreground));
+    border-bottom-color: color-mix(in oklch, var(--toon-fill) 68%, black);
+    border-radius: var(--toon-radius);
+    box-shadow: none !important;
+    filter: none;
+    text-shadow: none;
+  }
+
+  /* ── Fill tokens (lip color is derived from these) ─────────────────────── */
+  [data-pallet-variant="toon"] :is(
+    [data-slot="card"],
+    [data-slot="alert"],
+    [data-slot="item"],
+    [data-slot="item-group"],
+    [data-slot="empty"],
+    [data-slot="accordion-item"],
+    [data-slot="table-container"],
+    [data-slot="field-set"],
+    [data-slot="calendar"],
+    [data-slot="chart"],
+    [data-slot="carousel"]
+  ) {
+    --toon-fill: var(--card);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="popover-content"],
+    [data-slot="dropdown-menu-content"],
+    [data-slot="dropdown-menu-sub-content"],
+    [data-slot="context-menu-content"],
+    [data-slot="context-menu-sub-content"],
+    [data-slot="menubar-content"],
+    [data-slot="menubar-sub-content"],
+    [data-slot="select-content"],
+    [data-slot="combobox-content"],
+    [data-slot="combobox-list"],
+    [data-slot="command"],
+    [data-slot="command-list"],
+    [data-slot="hover-card-content"],
+    [data-slot="tooltip-content"],
+    [data-slot="navigation-menu-content"],
+    [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="drawer-content"]
+  ) {
+    --toon-fill: var(--popover);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="native-select"],
+    [data-slot="native-select-wrapper"],
+    [data-slot="combobox-trigger"],
+    [data-slot="combobox-chip-input"],
+    [data-slot="command-input"],
+    [data-slot="input-otp"],
+    [data-slot="input-otp-slot"],
+    [data-slot="input-group"],
+    [data-slot="input-group-control"],
+    [data-slot="sidebar-input"]
+  ) {
+    --toon-fill: var(--background);
+    background-color: var(--background);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="button"],
+    [data-slot="input-group-button"],
+    [data-slot="carousel-previous"],
+    [data-slot="carousel-next"],
+    [data-slot="pagination-link"]
+  ) {
+    /* Default / primary-looking controls — lip darkens the primary fill */
+    --toon-fill: var(--primary);
+  }
+
+  /* Non-primary button variants: lip tracks the light surface fill instead */
+  [data-pallet-variant="toon"] [data-slot="button"]:is(
+    [data-variant="outline"],
+    [data-variant="secondary"],
+    [data-variant="ghost"],
+    [class*="bg-secondary"],
+    [class*="bg-background"]
+  ) {
+    --toon-fill: var(--background);
+  }
+
+  [data-pallet-variant="toon"] [data-slot="button"]:is(
+    [data-variant="destructive"],
+    [class*="bg-destructive"]
+  ) {
+    --toon-fill: var(--destructive);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="badge"],
+    [data-slot="kbd"],
+    [data-slot="tabs-list"],
+    [data-slot="tabs-trigger"],
+    [data-slot="combobox-chip"]
+  ) {
+    --toon-fill: var(--secondary);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="sidebar"],
+    [data-slot="sidebar-container"],
+    [data-slot="sidebar-inner"],
+    [data-slot="sidebar-group"],
+    [data-slot="menubar"],
+    [data-slot="navigation-menu-viewport"]
+  ) {
+    --toon-fill: var(--sidebar);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="sidebar-menu-button"],
+    [data-slot="sidebar-menu-sub-button"],
+    [data-slot="sidebar-trigger"],
+    [data-slot="sidebar-group-action"],
+    [data-slot="sidebar-menu-action"]
+  ) {
+    --toon-fill: var(--sidebar);
+  }
+
+  /* Active / on states: lip tracks the primary fill */
+  [data-pallet-variant="toon"] :is(
+    [data-slot="sidebar-menu-button"],
+    [data-slot="tabs-trigger"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="pagination-link"]
+  ):is([data-active="true"], [data-state="on"], [data-state="active"]) {
+    --toon-fill: var(--primary);
+  }
+
+  /* ── Sizing tweaks ─────────────────────────────────────────────────────── */
+  [data-pallet-variant="toon"] :is(
+    [data-slot="badge"],
+    [data-slot="kbd"],
+    [data-slot="avatar-badge"],
+    [data-slot="checkbox"],
+    [data-slot="input-otp-slot"]
+  ) {
+    border-radius: var(--toon-radius-sm);
+    --toon-lip: 2.5px;
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="slider-track"],
+    [data-slot="progress"],
+    [data-slot="avatar"],
+    [data-slot="avatar-fallback"]
+  ) {
+    --toon-fill: var(--background);
+    border-style: solid;
+    border-width: var(--toon-outline);
+    border-bottom-width: var(--toon-lip);
+    border-color: color-mix(in oklch, var(--toon-fill) 42%, var(--foreground));
+    border-bottom-color: color-mix(in oklch, var(--toon-fill) 68%, black);
+    border-radius: var(--toon-radius-sm);
+    box-shadow: none !important;
+  }
+
+  [data-pallet-variant="toon"] [data-slot="switch"],
+  [data-pallet-variant="toon"] [data-slot="slider-track"],
+  [data-pallet-variant="toon"] [data-slot="progress"] {
+    border-radius: 9999px;
+    --toon-fill: var(--input);
+  }
+
+  [data-pallet-variant="toon"] [data-slot="switch"][data-state="checked"] {
+    --toon-fill: var(--primary);
+    border-color: color-mix(in oklch, var(--toon-fill) 42%, var(--foreground));
+    border-bottom-color: color-mix(in oklch, var(--toon-fill) 68%, black);
+  }
+
+  [data-pallet-variant="toon"] [data-slot="textarea"] {
+    border-radius: var(--radius-xl);
+  }
+
+  /* Press: sink the lip slightly for a tactile toon feel */
+  [data-pallet-variant="toon"] :is(
+    [data-slot="button"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="pagination-link"],
+    [data-slot="sidebar-menu-button"],
+    [data-slot="carousel-previous"],
+    [data-slot="carousel-next"]
+  ):active {
+    transform: translateY(1px);
+    border-bottom-width: 2px;
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="dropdown-menu-item"],
+    [data-slot="dropdown-menu-checkbox-item"],
+    [data-slot="dropdown-menu-radio-item"],
+    [data-slot="dropdown-menu-sub-trigger"],
+    [data-slot="context-menu-item"],
+    [data-slot="menubar-item"],
+    [data-slot="select-item"],
+    [data-slot="combobox-item"],
+    [data-slot="command-item"],
+    [data-slot="navigation-menu-link"]
+  ) {
+    border-radius: var(--toon-radius-sm);
+    box-shadow: none !important;
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="dialog-overlay"],
+    [data-slot="alert-dialog-overlay"],
+    [data-slot="sheet-overlay"],
+    [data-slot="drawer-overlay"]
+  ) {
+    background-color: color-mix(in oklch, var(--foreground) 45%, transparent);
+    backdrop-filter: none;
+  }
+
+  [data-pallet-variant="toon"] [data-slot="table-row"]:hover {
+    background-color: color-mix(in oklch, var(--muted) 80%, transparent);
+  }
+
+  [data-pallet-variant="toon"] :is(
+    [data-slot="separator"],
+    [data-slot="sidebar-separator"],
+    [data-slot="dropdown-menu-separator"],
+    [data-slot="command-separator"],
+    [data-slot="select-separator"]
+  ) {
+    background-color: color-mix(in oklch, var(--foreground) 18%, transparent);
+  }
+}

package/package.json

@@ -1,78 +1,79 @@
-{
-  "name": "@charstudios/pallet",
-  "version": "0.1.0",
-  "description": "Runtime, hook-driven theming layer for shadcn/ui apps. Full control over colors, fonts, roundness, elevation, spacing and motion, with swappable visual variants.",
-  "type": "module",
-  "license": "MIT",
-  "author": "Char Studios",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Char-Studios/Pallet.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Char-Studios/Pallet/issues"
-  },
-  "homepage": "https://github.com/Char-Studios/Pallet#readme",
-  "keywords": [
-    "shadcn",
-    "theme",
-    "theming",
-    "design-system",
-    "tailwind",
-    "react",
-    "nextjs",
-    "css-variables",
-    "tokens"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./server": {
-      "types": "./dist/server.d.ts",
-      "import": "./dist/server.js"
-    },
-    "./presets": {
-      "types": "./dist/presets/index.d.ts",
-      "import": "./dist/presets/index.js"
-    },
-    "./styles": "./dist/styles/index.css",
-    "./styles/flat": "./dist/styles/variant-flat.css",
-    "./styles/launch": "./dist/styles/variant-launch.css",
-    "./styles/base": "./dist/styles/base.css"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "react": "^19",
-    "react-dom": "^19",
-    "tsup": "^8.5.0",
-    "typescript": "^5.6.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}
+{
+  "name": "@charstudios/pallet",
+  "version": "0.3.0",
+  "description": "Runtime, hook-driven theming layer for shadcn/ui apps. Full control over colors, fonts, roundness, elevation, spacing and motion, with swappable visual variants.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Char Studios",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Char-Studios/Pallet.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Char-Studios/Pallet/issues"
+  },
+  "homepage": "https://github.com/Char-Studios/Pallet#readme",
+  "keywords": [
+    "shadcn",
+    "theme",
+    "theming",
+    "design-system",
+    "tailwind",
+    "react",
+    "nextjs",
+    "css-variables",
+    "tokens"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./presets": {
+      "types": "./dist/presets/index.d.ts",
+      "import": "./dist/presets/index.js"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/flat": "./dist/styles/variant-flat.css",
+    "./styles/toon": "./dist/styles/variant-toon.css",
+    "./styles/frosted": "./dist/styles/variant-frosted.css",
+    "./styles/base": "./dist/styles/base.css"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "^8.5.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}