@dreamtree-org/twreact-ui 1.2.1 → 1.3.0

package/dist/tokens/brands/default.css

@@ -0,0 +1 @@
+/* Brand "default": only the variables it overrides. Load after twreact-ui's CSS. */

package/dist/tokens/brands/default.json

@@ -0,0 +1,5 @@
+{
+  "name": "default",
+  "label": "Dreamtree default",
+  "$description": "No overrides: the shared tokens as shipped (Tailwind blue primary, slate shell)."
+}

package/dist/tokens/brands/practicepro.css

@@ -0,0 +1,17 @@
+/* Brand "practicepro": only the variables it overrides. Load after twreact-ui's CSS. */
+:root {
+  --dt-primary-50: 236 251 248;
+  --dt-primary-100: 209 243 238;
+  --dt-primary-200: 166 230 220;
+  --dt-primary-300: 111 209 196;
+  --dt-primary-400: 52 179 166;
+  --dt-primary-500: 15 138 138;
+  --dt-primary-600: 13 115 119;
+  --dt-primary-700: 11 93 96;
+  --dt-primary-800: 11 74 77;
+  --dt-primary-900: 10 61 64;
+  --dt-primary-950: 5 36 38;
+  --dt-background: 246 248 251;
+  --dt-shell: 15 43 61;
+  --dt-shell-active: 19 96 106;
+}

package/dist/tokens/brands/practicepro.json

@@ -0,0 +1,27 @@
+{
+  "name": "practicepro",
+  "label": "PracticePro",
+  "$description": "Teal primary and navy shell, taken from PracticePro/app/globals.css (brand-50/100/500/600/700, shell, shell-active). Steps PracticePro does not define are interpolated on the same hue. PracticePro's own muted grey (#64748b) is not carried over: on the #f6f8fb background it is about 4.4:1, below WCAG AA, so the shared muted token (#475569, 7.5:1) is used.",
+  "color": {
+    "primary": {
+      "50": "#ecfbf8",
+      "100": "#d1f3ee",
+      "200": "#a6e6dc",
+      "300": "#6fd1c4",
+      "400": "#34b3a6",
+      "500": "#0f8a8a",
+      "600": "#0d7377",
+      "700": "#0b5d60",
+      "800": "#0b4a4d",
+      "900": "#0a3d40",
+      "950": "#052426"
+    }
+  },
+  "role": {
+    "background": "#f6f8fb",
+    "foreground": "#0f172a",
+    "line": "#e2e8f0",
+    "shell": "#0f2b3d",
+    "shell-active": "#13606a"
+  }
+}

package/dist/tokens/tailwind3-preset.cjs

@@ -0,0 +1,214 @@
+// Tailwind 3 preset for Dreamtree tokens. Generated by scripts/build-tokens.mjs — do not edit.
+// Usage: module.exports = { presets: [require('@dreamtree-org/twreact-ui/dist/tokens/tailwind3-preset.cjs')], ... }
+const plugin = require('tailwindcss/plugin');
+const colors = {
+  "primary": {
+    "50": "rgb(var(--dt-primary-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-primary-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-primary-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-primary-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-primary-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-primary-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-primary-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-primary-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-primary-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-primary-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-primary-950) / <alpha-value>)"
+  },
+  "secondary": {
+    "50": "rgb(var(--dt-secondary-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-secondary-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-secondary-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-secondary-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-secondary-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-secondary-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-secondary-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-secondary-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-secondary-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-secondary-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-secondary-950) / <alpha-value>)"
+  },
+  "success": {
+    "50": "rgb(var(--dt-success-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-success-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-success-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-success-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-success-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-success-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-success-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-success-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-success-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-success-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-success-950) / <alpha-value>)"
+  },
+  "warning": {
+    "50": "rgb(var(--dt-warning-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-warning-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-warning-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-warning-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-warning-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-warning-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-warning-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-warning-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-warning-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-warning-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-warning-950) / <alpha-value>)"
+  },
+  "error": {
+    "50": "rgb(var(--dt-error-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-error-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-error-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-error-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-error-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-error-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-error-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-error-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-error-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-error-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-error-950) / <alpha-value>)"
+  },
+  "info": {
+    "50": "rgb(var(--dt-info-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-info-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-info-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-info-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-info-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-info-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-info-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-info-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-info-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-info-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-info-950) / <alpha-value>)"
+  },
+  "gray": {
+    "50": "rgb(var(--dt-gray-50) / <alpha-value>)",
+    "100": "rgb(var(--dt-gray-100) / <alpha-value>)",
+    "200": "rgb(var(--dt-gray-200) / <alpha-value>)",
+    "300": "rgb(var(--dt-gray-300) / <alpha-value>)",
+    "400": "rgb(var(--dt-gray-400) / <alpha-value>)",
+    "500": "rgb(var(--dt-gray-500) / <alpha-value>)",
+    "600": "rgb(var(--dt-gray-600) / <alpha-value>)",
+    "700": "rgb(var(--dt-gray-700) / <alpha-value>)",
+    "800": "rgb(var(--dt-gray-800) / <alpha-value>)",
+    "900": "rgb(var(--dt-gray-900) / <alpha-value>)",
+    "950": "rgb(var(--dt-gray-950) / <alpha-value>)"
+  },
+  "background": "rgb(var(--dt-background) / <alpha-value>)",
+  "surface": "rgb(var(--dt-surface) / <alpha-value>)",
+  "foreground": "rgb(var(--dt-foreground) / <alpha-value>)",
+  "muted": "rgb(var(--dt-muted) / <alpha-value>)",
+  "line": "rgb(var(--dt-line) / <alpha-value>)",
+  "shell": "rgb(var(--dt-shell) / <alpha-value>)",
+  "shell-foreground": "rgb(var(--dt-shell-foreground) / <alpha-value>)",
+  "shell-active": "rgb(var(--dt-shell-active) / <alpha-value>)"
+};
+const vars = {
+  "light": {
+    "--dt-primary-50": "239 246 255",
+    "--dt-primary-100": "219 234 254",
+    "--dt-primary-200": "191 219 254",
+    "--dt-primary-300": "147 197 253",
+    "--dt-primary-400": "96 165 250",
+    "--dt-primary-500": "59 130 246",
+    "--dt-primary-600": "37 99 235",
+    "--dt-primary-700": "29 78 216",
+    "--dt-primary-800": "30 64 175",
+    "--dt-primary-900": "30 58 138",
+    "--dt-primary-950": "23 37 84",
+    "--dt-secondary-50": "248 250 252",
+    "--dt-secondary-100": "241 245 249",
+    "--dt-secondary-200": "226 232 240",
+    "--dt-secondary-300": "203 213 225",
+    "--dt-secondary-400": "148 163 184",
+    "--dt-secondary-500": "100 116 139",
+    "--dt-secondary-600": "71 85 105",
+    "--dt-secondary-700": "51 65 85",
+    "--dt-secondary-800": "30 41 59",
+    "--dt-secondary-900": "15 23 42",
+    "--dt-secondary-950": "2 6 23",
+    "--dt-success-50": "240 253 244",
+    "--dt-success-100": "220 252 231",
+    "--dt-success-200": "187 247 208",
+    "--dt-success-300": "134 239 172",
+    "--dt-success-400": "74 222 128",
+    "--dt-success-500": "34 197 94",
+    "--dt-success-600": "22 163 74",
+    "--dt-success-700": "21 128 61",
+    "--dt-success-800": "22 101 52",
+    "--dt-success-900": "20 83 45",
+    "--dt-success-950": "5 46 22",
+    "--dt-warning-50": "255 251 235",
+    "--dt-warning-100": "254 243 199",
+    "--dt-warning-200": "253 230 138",
+    "--dt-warning-300": "252 211 77",
+    "--dt-warning-400": "251 191 36",
+    "--dt-warning-500": "245 158 11",
+    "--dt-warning-600": "217 119 6",
+    "--dt-warning-700": "180 83 9",
+    "--dt-warning-800": "146 64 14",
+    "--dt-warning-900": "120 53 15",
+    "--dt-warning-950": "69 26 3",
+    "--dt-error-50": "254 242 242",
+    "--dt-error-100": "254 226 226",
+    "--dt-error-200": "254 202 202",
+    "--dt-error-300": "252 165 165",
+    "--dt-error-400": "248 113 113",
+    "--dt-error-500": "239 68 68",
+    "--dt-error-600": "220 38 38",
+    "--dt-error-700": "185 28 28",
+    "--dt-error-800": "153 27 27",
+    "--dt-error-900": "127 29 29",
+    "--dt-error-950": "69 10 10",
+    "--dt-info-50": "240 249 255",
+    "--dt-info-100": "224 242 254",
+    "--dt-info-200": "186 230 253",
+    "--dt-info-300": "125 211 252",
+    "--dt-info-400": "56 189 248",
+    "--dt-info-500": "14 165 233",
+    "--dt-info-600": "2 132 199",
+    "--dt-info-700": "3 105 161",
+    "--dt-info-800": "7 89 133",
+    "--dt-info-900": "12 74 110",
+    "--dt-info-950": "8 47 73",
+    "--dt-gray-50": "249 250 251",
+    "--dt-gray-100": "243 244 246",
+    "--dt-gray-200": "229 231 235",
+    "--dt-gray-300": "209 213 219",
+    "--dt-gray-400": "156 163 175",
+    "--dt-gray-500": "107 114 128",
+    "--dt-gray-600": "75 85 99",
+    "--dt-gray-700": "55 65 81",
+    "--dt-gray-800": "31 41 55",
+    "--dt-gray-900": "17 24 39",
+    "--dt-gray-950": "3 7 18",
+    "--dt-background": "248 250 252",
+    "--dt-surface": "255 255 255",
+    "--dt-foreground": "15 23 42",
+    "--dt-muted": "71 85 105",
+    "--dt-line": "226 232 240",
+    "--dt-shell": "15 23 42",
+    "--dt-shell-foreground": "203 213 225",
+    "--dt-shell-active": "30 41 59"
+  },
+  "dark": {
+    "--dt-background": "11 17 32",
+    "--dt-surface": "17 24 39",
+    "--dt-foreground": "229 231 235",
+    "--dt-muted": "148 163 184",
+    "--dt-line": "31 41 55",
+    "--dt-shell": "2 6 23",
+    "--dt-shell-foreground": "203 213 225",
+    "--dt-shell-active": "30 41 59"
+  }
+};
+module.exports = {
+  theme: {
+    extend: {
+      colors,
+      fontSize: { micro: ['0.6875rem', { lineHeight: '1rem' }] },
+      borderRadius: { control: '0.5rem', card: '0.75rem' },
+      fontFamily: { sans: ["Inter","system-ui","-apple-system","Segoe UI","Roboto","Arial","sans-serif"], mono: ["JetBrains Mono","ui-monospace","SFMono-Regular","Menlo","monospace"] },
+    },
+  },
+  plugins: [plugin(({ addBase }) => addBase({ ':root': vars.light, ".dark, [data-theme=\"dark\"]": vars.dark }))],
+};

package/dist/tokens/theme.css

@@ -0,0 +1,193 @@
+/* Tailwind 4 theme for Dreamtree tokens. @import after "tailwindcss". */
+:root {
+  --dt-primary-50: 239 246 255;
+  --dt-primary-100: 219 234 254;
+  --dt-primary-200: 191 219 254;
+  --dt-primary-300: 147 197 253;
+  --dt-primary-400: 96 165 250;
+  --dt-primary-500: 59 130 246;
+  --dt-primary-600: 37 99 235;
+  --dt-primary-700: 29 78 216;
+  --dt-primary-800: 30 64 175;
+  --dt-primary-900: 30 58 138;
+  --dt-primary-950: 23 37 84;
+  --dt-secondary-50: 248 250 252;
+  --dt-secondary-100: 241 245 249;
+  --dt-secondary-200: 226 232 240;
+  --dt-secondary-300: 203 213 225;
+  --dt-secondary-400: 148 163 184;
+  --dt-secondary-500: 100 116 139;
+  --dt-secondary-600: 71 85 105;
+  --dt-secondary-700: 51 65 85;
+  --dt-secondary-800: 30 41 59;
+  --dt-secondary-900: 15 23 42;
+  --dt-secondary-950: 2 6 23;
+  --dt-success-50: 240 253 244;
+  --dt-success-100: 220 252 231;
+  --dt-success-200: 187 247 208;
+  --dt-success-300: 134 239 172;
+  --dt-success-400: 74 222 128;
+  --dt-success-500: 34 197 94;
+  --dt-success-600: 22 163 74;
+  --dt-success-700: 21 128 61;
+  --dt-success-800: 22 101 52;
+  --dt-success-900: 20 83 45;
+  --dt-success-950: 5 46 22;
+  --dt-warning-50: 255 251 235;
+  --dt-warning-100: 254 243 199;
+  --dt-warning-200: 253 230 138;
+  --dt-warning-300: 252 211 77;
+  --dt-warning-400: 251 191 36;
+  --dt-warning-500: 245 158 11;
+  --dt-warning-600: 217 119 6;
+  --dt-warning-700: 180 83 9;
+  --dt-warning-800: 146 64 14;
+  --dt-warning-900: 120 53 15;
+  --dt-warning-950: 69 26 3;
+  --dt-error-50: 254 242 242;
+  --dt-error-100: 254 226 226;
+  --dt-error-200: 254 202 202;
+  --dt-error-300: 252 165 165;
+  --dt-error-400: 248 113 113;
+  --dt-error-500: 239 68 68;
+  --dt-error-600: 220 38 38;
+  --dt-error-700: 185 28 28;
+  --dt-error-800: 153 27 27;
+  --dt-error-900: 127 29 29;
+  --dt-error-950: 69 10 10;
+  --dt-info-50: 240 249 255;
+  --dt-info-100: 224 242 254;
+  --dt-info-200: 186 230 253;
+  --dt-info-300: 125 211 252;
+  --dt-info-400: 56 189 248;
+  --dt-info-500: 14 165 233;
+  --dt-info-600: 2 132 199;
+  --dt-info-700: 3 105 161;
+  --dt-info-800: 7 89 133;
+  --dt-info-900: 12 74 110;
+  --dt-info-950: 8 47 73;
+  --dt-gray-50: 249 250 251;
+  --dt-gray-100: 243 244 246;
+  --dt-gray-200: 229 231 235;
+  --dt-gray-300: 209 213 219;
+  --dt-gray-400: 156 163 175;
+  --dt-gray-500: 107 114 128;
+  --dt-gray-600: 75 85 99;
+  --dt-gray-700: 55 65 81;
+  --dt-gray-800: 31 41 55;
+  --dt-gray-900: 17 24 39;
+  --dt-gray-950: 3 7 18;
+  --dt-background: 248 250 252;
+  --dt-surface: 255 255 255;
+  --dt-foreground: 15 23 42;
+  --dt-muted: 71 85 105;
+  --dt-line: 226 232 240;
+  --dt-shell: 15 23 42;
+  --dt-shell-foreground: 203 213 225;
+  --dt-shell-active: 30 41 59;
+}
+
+.dark, [data-theme="dark"] {
+  --dt-background: 11 17 32;
+  --dt-surface: 17 24 39;
+  --dt-foreground: 229 231 235;
+  --dt-muted: 148 163 184;
+  --dt-line: 31 41 55;
+  --dt-shell: 2 6 23;
+  --dt-shell-foreground: 203 213 225;
+  --dt-shell-active: 30 41 59;
+}
+
+@theme inline {
+  --color-primary-50: rgb(var(--dt-primary-50));
+  --color-primary-100: rgb(var(--dt-primary-100));
+  --color-primary-200: rgb(var(--dt-primary-200));
+  --color-primary-300: rgb(var(--dt-primary-300));
+  --color-primary-400: rgb(var(--dt-primary-400));
+  --color-primary-500: rgb(var(--dt-primary-500));
+  --color-primary-600: rgb(var(--dt-primary-600));
+  --color-primary-700: rgb(var(--dt-primary-700));
+  --color-primary-800: rgb(var(--dt-primary-800));
+  --color-primary-900: rgb(var(--dt-primary-900));
+  --color-primary-950: rgb(var(--dt-primary-950));
+  --color-secondary-50: rgb(var(--dt-secondary-50));
+  --color-secondary-100: rgb(var(--dt-secondary-100));
+  --color-secondary-200: rgb(var(--dt-secondary-200));
+  --color-secondary-300: rgb(var(--dt-secondary-300));
+  --color-secondary-400: rgb(var(--dt-secondary-400));
+  --color-secondary-500: rgb(var(--dt-secondary-500));
+  --color-secondary-600: rgb(var(--dt-secondary-600));
+  --color-secondary-700: rgb(var(--dt-secondary-700));
+  --color-secondary-800: rgb(var(--dt-secondary-800));
+  --color-secondary-900: rgb(var(--dt-secondary-900));
+  --color-secondary-950: rgb(var(--dt-secondary-950));
+  --color-success-50: rgb(var(--dt-success-50));
+  --color-success-100: rgb(var(--dt-success-100));
+  --color-success-200: rgb(var(--dt-success-200));
+  --color-success-300: rgb(var(--dt-success-300));
+  --color-success-400: rgb(var(--dt-success-400));
+  --color-success-500: rgb(var(--dt-success-500));
+  --color-success-600: rgb(var(--dt-success-600));
+  --color-success-700: rgb(var(--dt-success-700));
+  --color-success-800: rgb(var(--dt-success-800));
+  --color-success-900: rgb(var(--dt-success-900));
+  --color-success-950: rgb(var(--dt-success-950));
+  --color-warning-50: rgb(var(--dt-warning-50));
+  --color-warning-100: rgb(var(--dt-warning-100));
+  --color-warning-200: rgb(var(--dt-warning-200));
+  --color-warning-300: rgb(var(--dt-warning-300));
+  --color-warning-400: rgb(var(--dt-warning-400));
+  --color-warning-500: rgb(var(--dt-warning-500));
+  --color-warning-600: rgb(var(--dt-warning-600));
+  --color-warning-700: rgb(var(--dt-warning-700));
+  --color-warning-800: rgb(var(--dt-warning-800));
+  --color-warning-900: rgb(var(--dt-warning-900));
+  --color-warning-950: rgb(var(--dt-warning-950));
+  --color-error-50: rgb(var(--dt-error-50));
+  --color-error-100: rgb(var(--dt-error-100));
+  --color-error-200: rgb(var(--dt-error-200));
+  --color-error-300: rgb(var(--dt-error-300));
+  --color-error-400: rgb(var(--dt-error-400));
+  --color-error-500: rgb(var(--dt-error-500));
+  --color-error-600: rgb(var(--dt-error-600));
+  --color-error-700: rgb(var(--dt-error-700));
+  --color-error-800: rgb(var(--dt-error-800));
+  --color-error-900: rgb(var(--dt-error-900));
+  --color-error-950: rgb(var(--dt-error-950));
+  --color-info-50: rgb(var(--dt-info-50));
+  --color-info-100: rgb(var(--dt-info-100));
+  --color-info-200: rgb(var(--dt-info-200));
+  --color-info-300: rgb(var(--dt-info-300));
+  --color-info-400: rgb(var(--dt-info-400));
+  --color-info-500: rgb(var(--dt-info-500));
+  --color-info-600: rgb(var(--dt-info-600));
+  --color-info-700: rgb(var(--dt-info-700));
+  --color-info-800: rgb(var(--dt-info-800));
+  --color-info-900: rgb(var(--dt-info-900));
+  --color-info-950: rgb(var(--dt-info-950));
+  --color-gray-50: rgb(var(--dt-gray-50));
+  --color-gray-100: rgb(var(--dt-gray-100));
+  --color-gray-200: rgb(var(--dt-gray-200));
+  --color-gray-300: rgb(var(--dt-gray-300));
+  --color-gray-400: rgb(var(--dt-gray-400));
+  --color-gray-500: rgb(var(--dt-gray-500));
+  --color-gray-600: rgb(var(--dt-gray-600));
+  --color-gray-700: rgb(var(--dt-gray-700));
+  --color-gray-800: rgb(var(--dt-gray-800));
+  --color-gray-900: rgb(var(--dt-gray-900));
+  --color-gray-950: rgb(var(--dt-gray-950));
+  --color-background: rgb(var(--dt-background));
+  --color-surface: rgb(var(--dt-surface));
+  --color-foreground: rgb(var(--dt-foreground));
+  --color-muted: rgb(var(--dt-muted));
+  --color-line: rgb(var(--dt-line));
+  --color-shell: rgb(var(--dt-shell));
+  --color-shell-foreground: rgb(var(--dt-shell-foreground));
+  --color-shell-active: rgb(var(--dt-shell-active));
+  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --text-micro: 0.6875rem;
+  --text-micro--line-height: 1rem;
+  --radius-control: 0.5rem;
+  --radius-card: 0.75rem;
+}