@flanksource/clicky-ui 0.2.17 → 0.2.19

package/dist/tailwind-preset.js

@@ -2,39 +2,56 @@ const preset = {
   darkMode: ["selector", '[data-theme="dark"]'],
   theme: {
     extend: {
+      // Tokens are full-color aliases of the Flanksource fs-tokens (see
+      // styles/tokens.css), so they are referenced directly with var(--token)
+      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)"
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)"
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
+        },
+        sidebar: {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)",
+          accent: {
+            DEFAULT: "var(--sidebar-accent)",
+            foreground: "var(--sidebar-accent-foreground)"
+          },
+          primary: {
+            DEFAULT: "var(--sidebar-primary)",
+            foreground: "var(--sidebar-primary-foreground)"
+          }
         }
       },
       borderRadius: {

package/dist/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.js","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":"AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"tailwind-preset.js","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      // Tokens are full-color aliases of the Flanksource fs-tokens (see\n      // styles/tokens.css), so they are referenced directly with var(--token)\n      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.\n      colors: {\n        border: \"var(--border)\",\n        input: \"var(--input)\",\n        ring: \"var(--ring)\",\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        primary: {\n          DEFAULT: \"var(--primary)\",\n          foreground: \"var(--primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--secondary)\",\n          foreground: \"var(--secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--destructive)\",\n          foreground: \"var(--destructive-foreground)\",\n        },\n        muted: {\n          DEFAULT: \"var(--muted)\",\n          foreground: \"var(--muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--accent)\",\n          foreground: \"var(--accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--popover)\",\n          foreground: \"var(--popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--card)\",\n          foreground: \"var(--card-foreground)\",\n        },\n        sidebar: {\n          DEFAULT: \"var(--sidebar)\",\n          foreground: \"var(--sidebar-foreground)\",\n          border: \"var(--sidebar-border)\",\n          ring: \"var(--sidebar-ring)\",\n          accent: {\n            DEFAULT: \"var(--sidebar-accent)\",\n            foreground: \"var(--sidebar-accent-foreground)\",\n          },\n          primary: {\n            DEFAULT: \"var(--sidebar-primary)\",\n            foreground: \"var(--sidebar-primary-foreground)\",\n          },\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":"AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEd,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flanksource/clicky-ui",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
   "homepage": "https://github.com/flanksource/clicky-ui#readme",
   "bugs": "https://github.com/flanksource/clicky-ui/issues",