@rebasepro/ui 0.12.0 → 0.12.1-canary.gdfba2a1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +29 -61
  2. package/dist/index.es.js +12 -6
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/src/index.css +29 -61
  5. package/dist/src/theme.css +81 -0
  6. package/dist/theme.css +81 -0
  7. package/package.json +31 -29
  8. package/src/index.css +29 -61
  9. package/src/theme.css +81 -0
package/dist/src/index.css CHANGED
@@ -1,57 +1,15 @@
1
- @theme {
2
- /* Font Families */
3
- --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
4
- --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
5
- --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
6
-
7
- /* Colors */
8
- --color-primary: #0070F4;
9
- --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
10
- --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
11
- --color-secondary: #FF5B79;
12
- --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
13
- --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
14
-
15
- --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
16
- --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
17
-
18
- /* Field Colors */
19
- --color-field-disabled: rgb(224 224 226);
20
- --color-field-disabled-dark: rgb(35 35 37);
21
-
22
- /* Text Colors — using opaque values so icon strokes render solidly */
23
- --color-text-primary: #212121;
24
- --color-text-secondary: #757575;
25
- --color-text-disabled: #9e9e9e;
26
- --color-text-primary-dark: #ffffff;
27
- --color-text-secondary-dark: #a0a0a9;
28
- --color-text-disabled-dark: #757580;
29
-
30
- /* Surface Colors */
31
- --color-surface-50: #fafafa;
32
- --color-surface-100: #f5f5f5;
33
- --color-surface-200: #e5e5e5;
34
- --color-surface-300: #d4d4d4;
35
- --color-surface-400: #a3a3a3;
36
- --color-surface-500: #737373;
37
- --color-surface-600: #404040;
38
- --color-surface-700: #262626;
39
- --color-surface-800: #111111;
40
- --color-surface-900: #0a0a0a;
41
- --color-surface-950: #000000;
42
-
43
- /* Surface Accent Colors */
44
- --color-surface-accent-50: #f8fafc;
45
- --color-surface-accent-100: #f1f5f9;
46
- --color-surface-accent-200: #e2e8f0;
47
- --color-surface-accent-300: #cbd5e1;
48
- --color-surface-accent-400: #94a3b8;
49
- --color-surface-accent-500: #64748b;
50
- --color-surface-accent-600: #475569;
51
- --color-surface-accent-700: #334155;
52
- --color-surface-accent-800: #1e293b;
53
- --color-surface-accent-900: #172033;
54
- --color-surface-accent-950: #0f172a;
1
+ @import "./theme.css";
2
+
3
+ /* Grayscale antialiasing, not macOS's subpixel default.
4
+ This is the single largest reason the same typeface can look like a
5
+ different one between two pages: subpixel-antialiased text renders visibly
6
+ heavier and slightly fuzzier, and the effect is worst for light text on dark
7
+ backgrounds — which is most of this product and all of the marketing site.
8
+ Design comps that set this and shipped pages that do not will never match,
9
+ no matter how carefully the font, size, weight and tracking are aligned. */
10
+ html {
11
+ -webkit-font-smoothing: antialiased;
12
+ -moz-osx-font-smoothing: grayscale;
55
13
  }
56
14
 
57
15
  /* Native UI (scrollbars, form controls) must follow the active theme,
@@ -74,32 +32,42 @@ html.dark {
74
32
  scrollbar-width: none; /* Firefox */
75
33
  }
76
34
 
35
+ /* Optical ladder: weight comes down as size comes down, tracking tightens as
36
+ size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
37
+ and holding 600 all the way down to text-sm made every heading shout equally
38
+ — a heading stops being a headline somewhere, and the scale should say where.
39
+ 600 is display-scale only; the small end carries 500.
40
+
41
+ With a single face carrying both headings and body, weight and tracking are
42
+ the only things separating a heading from the copy around it — so the tiers
43
+ have to actually differ, rather than all sitting at 600. */
44
+
77
45
  .typography-h1 {
78
- @apply text-4xl font-headers font-semibold tracking-tight;
46
+ @apply text-4xl font-headers font-semibold tracking-display;
79
47
  }
80
48
 
81
49
  .typography-h2 {
82
- @apply text-3xl font-headers font-semibold tracking-tight;
50
+ @apply text-3xl font-headers font-semibold tracking-display;
83
51
  }
84
52
 
85
53
  .typography-h3 {
86
- @apply text-2xl font-headers font-semibold tracking-tight;
54
+ @apply text-2xl font-headers font-semibold tracking-title;
87
55
  }
88
56
 
89
57
  .typography-h4 {
90
- @apply text-xl font-headers font-semibold tracking-[-0.01em];
58
+ @apply text-xl font-headers font-medium tracking-title;
91
59
  }
92
60
 
93
61
  .typography-h5 {
94
- @apply text-lg font-headers font-semibold tracking-[-0.01em];
62
+ @apply text-lg font-headers font-medium tracking-heading;
95
63
  }
96
64
 
97
65
  .typography-h6 {
98
- @apply text-base font-headers font-semibold tracking-[-0.01em];
66
+ @apply text-base font-headers font-medium tracking-heading;
99
67
  }
100
68
 
101
69
  .typography-subtitle1 {
102
- @apply text-sm font-headers font-semibold tracking-[-0.01em];
70
+ @apply text-sm font-headers font-medium tracking-heading;
103
71
  }
104
72
 
105
73
  .typography-subtitle2 {
package/dist/src/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /* ---------------------------------------------------------------------------
2
+ * Design tokens — the single source for fonts, type scale and colour.
3
+ *
4
+ * This lives in its own file for one reason: Tailwind only picks up `@theme`
5
+ * from an UNLAYERED import. Consumers that pull the component styles in with
6
+ * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
7
+ * and the docs both do, to keep component CSS below their own utilities — get
8
+ * the layer wrapped around everything transitively, and the theme silently
9
+ * does not register. That is why the font stacks used to be copy-pasted into
10
+ * every consumer's own `@theme`.
11
+ *
12
+ * Import this file unlayered, alongside the layered index.css:
13
+ *
14
+ * @import "@rebasepro/ui/theme.css";
15
+ * @import "@rebasepro/ui/index.css" layer(base);
16
+ * ------------------------------------------------------------------------- */
17
+
18
+ @theme {
19
+ /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
20
+ --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
21
+ --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
22
+ --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
23
+
24
+ /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
25
+ Tailwind turns each into a `tracking-*` utility, so the admin panel, the
26
+ console and the marketing site all spell the same intent the same way
27
+ instead of each hardcoding its own em value. Pair display/title with
28
+ font-semibold and heading with font-medium. */
29
+ --tracking-display: -0.025em; /* >= 30px — the headline tier */
30
+ --tracking-title: -0.018em; /* 20-24px — section titles */
31
+ --tracking-heading: -0.01em; /* <= 18px — labels; still a heading, not a headline */
32
+
33
+ /* Colors */
34
+ --color-primary: #0070F4;
35
+ --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
36
+ --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
37
+ --color-secondary: #FF5B79;
38
+ --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
39
+ --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
40
+
41
+ --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
42
+ --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
43
+
44
+ /* Field Colors */
45
+ --color-field-disabled: rgb(224 224 226);
46
+ --color-field-disabled-dark: rgb(35 35 37);
47
+
48
+ /* Text Colors — using opaque values so icon strokes render solidly */
49
+ --color-text-primary: #212121;
50
+ --color-text-secondary: #757575;
51
+ --color-text-disabled: #9e9e9e;
52
+ --color-text-primary-dark: #ffffff;
53
+ --color-text-secondary-dark: #a0a0a9;
54
+ --color-text-disabled-dark: #757580;
55
+
56
+ /* Surface Colors */
57
+ --color-surface-50: #fafafa;
58
+ --color-surface-100: #f5f5f5;
59
+ --color-surface-200: #e5e5e5;
60
+ --color-surface-300: #d4d4d4;
61
+ --color-surface-400: #a3a3a3;
62
+ --color-surface-500: #737373;
63
+ --color-surface-600: #404040;
64
+ --color-surface-700: #262626;
65
+ --color-surface-800: #111111;
66
+ --color-surface-900: #0a0a0a;
67
+ --color-surface-950: #000000;
68
+
69
+ /* Surface Accent Colors */
70
+ --color-surface-accent-50: #f8fafc;
71
+ --color-surface-accent-100: #f1f5f9;
72
+ --color-surface-accent-200: #e2e8f0;
73
+ --color-surface-accent-300: #cbd5e1;
74
+ --color-surface-accent-400: #94a3b8;
75
+ --color-surface-accent-500: #64748b;
76
+ --color-surface-accent-600: #475569;
77
+ --color-surface-accent-700: #334155;
78
+ --color-surface-accent-800: #1e293b;
79
+ --color-surface-accent-900: #172033;
80
+ --color-surface-accent-950: #0f172a;
81
+ }
package/dist/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /* ---------------------------------------------------------------------------
2
+ * Design tokens — the single source for fonts, type scale and colour.
3
+ *
4
+ * This lives in its own file for one reason: Tailwind only picks up `@theme`
5
+ * from an UNLAYERED import. Consumers that pull the component styles in with
6
+ * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
7
+ * and the docs both do, to keep component CSS below their own utilities — get
8
+ * the layer wrapped around everything transitively, and the theme silently
9
+ * does not register. That is why the font stacks used to be copy-pasted into
10
+ * every consumer's own `@theme`.
11
+ *
12
+ * Import this file unlayered, alongside the layered index.css:
13
+ *
14
+ * @import "@rebasepro/ui/theme.css";
15
+ * @import "@rebasepro/ui/index.css" layer(base);
16
+ * ------------------------------------------------------------------------- */
17
+
18
+ @theme {
19
+ /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
20
+ --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
21
+ --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
22
+ --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
23
+
24
+ /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
25
+ Tailwind turns each into a `tracking-*` utility, so the admin panel, the
26
+ console and the marketing site all spell the same intent the same way
27
+ instead of each hardcoding its own em value. Pair display/title with
28
+ font-semibold and heading with font-medium. */
29
+ --tracking-display: -0.025em; /* >= 30px — the headline tier */
30
+ --tracking-title: -0.018em; /* 20-24px — section titles */
31
+ --tracking-heading: -0.01em; /* <= 18px — labels; still a heading, not a headline */
32
+
33
+ /* Colors */
34
+ --color-primary: #0070F4;
35
+ --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
36
+ --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
37
+ --color-secondary: #FF5B79;
38
+ --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
39
+ --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
40
+
41
+ --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
42
+ --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
43
+
44
+ /* Field Colors */
45
+ --color-field-disabled: rgb(224 224 226);
46
+ --color-field-disabled-dark: rgb(35 35 37);
47
+
48
+ /* Text Colors — using opaque values so icon strokes render solidly */
49
+ --color-text-primary: #212121;
50
+ --color-text-secondary: #757575;
51
+ --color-text-disabled: #9e9e9e;
52
+ --color-text-primary-dark: #ffffff;
53
+ --color-text-secondary-dark: #a0a0a9;
54
+ --color-text-disabled-dark: #757580;
55
+
56
+ /* Surface Colors */
57
+ --color-surface-50: #fafafa;
58
+ --color-surface-100: #f5f5f5;
59
+ --color-surface-200: #e5e5e5;
60
+ --color-surface-300: #d4d4d4;
61
+ --color-surface-400: #a3a3a3;
62
+ --color-surface-500: #737373;
63
+ --color-surface-600: #404040;
64
+ --color-surface-700: #262626;
65
+ --color-surface-800: #111111;
66
+ --color-surface-900: #0a0a0a;
67
+ --color-surface-950: #000000;
68
+
69
+ /* Surface Accent Colors */
70
+ --color-surface-accent-50: #f8fafc;
71
+ --color-surface-accent-100: #f1f5f9;
72
+ --color-surface-accent-200: #e2e8f0;
73
+ --color-surface-accent-300: #cbd5e1;
74
+ --color-surface-accent-400: #94a3b8;
75
+ --color-surface-accent-500: #64748b;
76
+ --color-surface-accent-600: #475569;
77
+ --color-surface-accent-700: #334155;
78
+ --color-surface-accent-800: #1e293b;
79
+ --color-surface-accent-900: #172033;
80
+ --color-surface-accent-950: #0f172a;
81
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rebasepro/ui",
3
3
  "type": "module",
4
- "version": "0.12.0",
4
+ "version": "0.12.1-canary.gdfba2a1",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/rebaseco"
@@ -39,34 +39,36 @@
39
39
  },
40
40
  "./package.json": "./package.json",
41
41
  "./index.css": "./dist/index.css",
42
- "./dist/index.css": "./dist/index.css"
42
+ "./dist/index.css": "./dist/index.css",
43
+ "./theme.css": "./dist/theme.css",
44
+ "./dist/theme.css": "./dist/theme.css"
43
45
  },
44
46
  "dependencies": {
45
47
  "@dnd-kit/core": "^6.3.1",
46
48
  "@dnd-kit/sortable": "^10.0.0",
47
49
  "@dnd-kit/utilities": "^3.2.2",
48
- "@radix-ui/react-checkbox": "^1.3.4",
49
- "@radix-ui/react-collapsible": "^1.1.13",
50
- "@radix-ui/react-dialog": "^1.1.16",
51
- "@radix-ui/react-dropdown-menu": "^2.1.17",
52
- "@radix-ui/react-label": "^2.1.9",
53
- "@radix-ui/react-menubar": "^1.1.17",
54
- "@radix-ui/react-popover": "^1.1.16",
55
- "@radix-ui/react-portal": "^1.1.11",
56
- "@radix-ui/react-radio-group": "^1.4.0",
57
- "@radix-ui/react-select": "^2.3.0",
58
- "@radix-ui/react-separator": "^1.1.9",
59
- "@radix-ui/react-slider": "^1.4.0",
60
- "@radix-ui/react-slot": "^1.2.5",
61
- "@radix-ui/react-tabs": "^1.1.14",
62
- "@radix-ui/react-tooltip": "^1.2.9",
63
- "@radix-ui/react-visually-hidden": "^1.2.5",
50
+ "@radix-ui/react-checkbox": "^1.3.11",
51
+ "@radix-ui/react-collapsible": "^1.1.20",
52
+ "@radix-ui/react-dialog": "^1.1.23",
53
+ "@radix-ui/react-dropdown-menu": "^2.1.24",
54
+ "@radix-ui/react-label": "^2.1.15",
55
+ "@radix-ui/react-menubar": "^1.1.24",
56
+ "@radix-ui/react-popover": "^1.1.23",
57
+ "@radix-ui/react-portal": "^1.1.17",
58
+ "@radix-ui/react-radio-group": "^1.4.7",
59
+ "@radix-ui/react-select": "^2.3.7",
60
+ "@radix-ui/react-separator": "^1.1.15",
61
+ "@radix-ui/react-slider": "^1.4.7",
62
+ "@radix-ui/react-slot": "^1.3.3",
63
+ "@radix-ui/react-tabs": "^1.1.21",
64
+ "@radix-ui/react-tooltip": "^1.2.16",
65
+ "@radix-ui/react-visually-hidden": "^1.2.11",
64
66
  "clsx": "^2.1.1",
65
67
  "cmdk": "^1.1.1",
66
- "fast-equals": "6.0.0",
67
- "lucide-react": "1.18.0",
68
- "markdown-it": "^14.2.0",
69
- "react-dropzone": "^15.0.0",
68
+ "fast-equals": "6.0.2",
69
+ "lucide-react": "1.27.0",
70
+ "markdown-it": "^14.3.0",
71
+ "react-dropzone": "^19.1.1",
70
72
  "react-use-measure": "^2.1.7",
71
73
  "react-window": "^1.8.11",
72
74
  "tailwind-merge": "^3.6.0"
@@ -77,27 +79,27 @@
77
79
  },
78
80
  "devDependencies": {
79
81
  "@jest/globals": "^30.4.1",
80
- "@testing-library/jest-dom": "^6.9.1",
82
+ "@testing-library/jest-dom": "^7.0.0",
81
83
  "@testing-library/react": "^16.3.2",
82
84
  "@testing-library/user-event": "^14.6.1",
83
85
  "@types/jest": "^30.0.0",
84
86
  "@types/markdown-it": "^14.1.2",
85
- "@types/node": "^25.9.3",
87
+ "@types/node": "^26.1.2",
86
88
  "@types/object-hash": "^3.0.6",
87
89
  "@types/react": "^19.2.17",
88
90
  "@types/react-dom": "^19.2.3",
89
91
  "@types/react-measure": "^2.0.12",
90
92
  "@types/react-window": "^1.8.8",
91
- "@vitejs/plugin-react": "^6.0.2",
93
+ "@vitejs/plugin-react": "^6.0.4",
92
94
  "babel-plugin-react-compiler": "beta",
93
95
  "cross-env": "^10.1.0",
94
96
  "jest": "^30.4.2",
95
97
  "rollup-preserve-directives": "^1.1.3",
96
- "tailwindcss": "^4.3.1",
97
- "ts-jest": "^29.4.11",
98
+ "tailwindcss": "^4.3.3",
99
+ "ts-jest": "^29.4.12",
98
100
  "tsd": "^0.33.0",
99
101
  "typescript": "^6.0.3",
100
- "vite": "^8.0.16",
102
+ "vite": "^8.1.5",
101
103
  "vite-plugin-static-copy": "^4.1.1"
102
104
  },
103
105
  "files": [
@@ -111,7 +113,7 @@
111
113
  },
112
114
  "scripts": {
113
115
  "watch": "vite build --watch",
114
- "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/index.css 2>/dev/null; tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../scripts/assert-build-output.mjs",
116
+ "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../scripts/assert-build-output.mjs",
115
117
  "test:lint": "eslint \"src/**\" --quiet",
116
118
  "test": "jest --passWithNoTests",
117
119
  "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
package/src/index.css CHANGED
@@ -1,57 +1,15 @@
1
- @theme {
2
- /* Font Families */
3
- --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
4
- --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
5
- --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
6
-
7
- /* Colors */
8
- --color-primary: #0070F4;
9
- --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
10
- --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
11
- --color-secondary: #FF5B79;
12
- --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
13
- --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
14
-
15
- --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
16
- --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
17
-
18
- /* Field Colors */
19
- --color-field-disabled: rgb(224 224 226);
20
- --color-field-disabled-dark: rgb(35 35 37);
21
-
22
- /* Text Colors — using opaque values so icon strokes render solidly */
23
- --color-text-primary: #212121;
24
- --color-text-secondary: #757575;
25
- --color-text-disabled: #9e9e9e;
26
- --color-text-primary-dark: #ffffff;
27
- --color-text-secondary-dark: #a0a0a9;
28
- --color-text-disabled-dark: #757580;
29
-
30
- /* Surface Colors */
31
- --color-surface-50: #fafafa;
32
- --color-surface-100: #f5f5f5;
33
- --color-surface-200: #e5e5e5;
34
- --color-surface-300: #d4d4d4;
35
- --color-surface-400: #a3a3a3;
36
- --color-surface-500: #737373;
37
- --color-surface-600: #404040;
38
- --color-surface-700: #262626;
39
- --color-surface-800: #111111;
40
- --color-surface-900: #0a0a0a;
41
- --color-surface-950: #000000;
42
-
43
- /* Surface Accent Colors */
44
- --color-surface-accent-50: #f8fafc;
45
- --color-surface-accent-100: #f1f5f9;
46
- --color-surface-accent-200: #e2e8f0;
47
- --color-surface-accent-300: #cbd5e1;
48
- --color-surface-accent-400: #94a3b8;
49
- --color-surface-accent-500: #64748b;
50
- --color-surface-accent-600: #475569;
51
- --color-surface-accent-700: #334155;
52
- --color-surface-accent-800: #1e293b;
53
- --color-surface-accent-900: #172033;
54
- --color-surface-accent-950: #0f172a;
1
+ @import "./theme.css";
2
+
3
+ /* Grayscale antialiasing, not macOS's subpixel default.
4
+ This is the single largest reason the same typeface can look like a
5
+ different one between two pages: subpixel-antialiased text renders visibly
6
+ heavier and slightly fuzzier, and the effect is worst for light text on dark
7
+ backgrounds — which is most of this product and all of the marketing site.
8
+ Design comps that set this and shipped pages that do not will never match,
9
+ no matter how carefully the font, size, weight and tracking are aligned. */
10
+ html {
11
+ -webkit-font-smoothing: antialiased;
12
+ -moz-osx-font-smoothing: grayscale;
55
13
  }
56
14
 
57
15
  /* Native UI (scrollbars, form controls) must follow the active theme,
@@ -74,32 +32,42 @@ html.dark {
74
32
  scrollbar-width: none; /* Firefox */
75
33
  }
76
34
 
35
+ /* Optical ladder: weight comes down as size comes down, tracking tightens as
36
+ size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
37
+ and holding 600 all the way down to text-sm made every heading shout equally
38
+ — a heading stops being a headline somewhere, and the scale should say where.
39
+ 600 is display-scale only; the small end carries 500.
40
+
41
+ With a single face carrying both headings and body, weight and tracking are
42
+ the only things separating a heading from the copy around it — so the tiers
43
+ have to actually differ, rather than all sitting at 600. */
44
+
77
45
  .typography-h1 {
78
- @apply text-4xl font-headers font-semibold tracking-tight;
46
+ @apply text-4xl font-headers font-semibold tracking-display;
79
47
  }
80
48
 
81
49
  .typography-h2 {
82
- @apply text-3xl font-headers font-semibold tracking-tight;
50
+ @apply text-3xl font-headers font-semibold tracking-display;
83
51
  }
84
52
 
85
53
  .typography-h3 {
86
- @apply text-2xl font-headers font-semibold tracking-tight;
54
+ @apply text-2xl font-headers font-semibold tracking-title;
87
55
  }
88
56
 
89
57
  .typography-h4 {
90
- @apply text-xl font-headers font-semibold tracking-[-0.01em];
58
+ @apply text-xl font-headers font-medium tracking-title;
91
59
  }
92
60
 
93
61
  .typography-h5 {
94
- @apply text-lg font-headers font-semibold tracking-[-0.01em];
62
+ @apply text-lg font-headers font-medium tracking-heading;
95
63
  }
96
64
 
97
65
  .typography-h6 {
98
- @apply text-base font-headers font-semibold tracking-[-0.01em];
66
+ @apply text-base font-headers font-medium tracking-heading;
99
67
  }
100
68
 
101
69
  .typography-subtitle1 {
102
- @apply text-sm font-headers font-semibold tracking-[-0.01em];
70
+ @apply text-sm font-headers font-medium tracking-heading;
103
71
  }
104
72
 
105
73
  .typography-subtitle2 {
package/src/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /* ---------------------------------------------------------------------------
2
+ * Design tokens — the single source for fonts, type scale and colour.
3
+ *
4
+ * This lives in its own file for one reason: Tailwind only picks up `@theme`
5
+ * from an UNLAYERED import. Consumers that pull the component styles in with
6
+ * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
7
+ * and the docs both do, to keep component CSS below their own utilities — get
8
+ * the layer wrapped around everything transitively, and the theme silently
9
+ * does not register. That is why the font stacks used to be copy-pasted into
10
+ * every consumer's own `@theme`.
11
+ *
12
+ * Import this file unlayered, alongside the layered index.css:
13
+ *
14
+ * @import "@rebasepro/ui/theme.css";
15
+ * @import "@rebasepro/ui/index.css" layer(base);
16
+ * ------------------------------------------------------------------------- */
17
+
18
+ @theme {
19
+ /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
20
+ --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
21
+ --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
22
+ --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
23
+
24
+ /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
25
+ Tailwind turns each into a `tracking-*` utility, so the admin panel, the
26
+ console and the marketing site all spell the same intent the same way
27
+ instead of each hardcoding its own em value. Pair display/title with
28
+ font-semibold and heading with font-medium. */
29
+ --tracking-display: -0.025em; /* >= 30px — the headline tier */
30
+ --tracking-title: -0.018em; /* 20-24px — section titles */
31
+ --tracking-heading: -0.01em; /* <= 18px — labels; still a heading, not a headline */
32
+
33
+ /* Colors */
34
+ --color-primary: #0070F4;
35
+ --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
36
+ --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
37
+ --color-secondary: #FF5B79;
38
+ --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
39
+ --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
40
+
41
+ --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
42
+ --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
43
+
44
+ /* Field Colors */
45
+ --color-field-disabled: rgb(224 224 226);
46
+ --color-field-disabled-dark: rgb(35 35 37);
47
+
48
+ /* Text Colors — using opaque values so icon strokes render solidly */
49
+ --color-text-primary: #212121;
50
+ --color-text-secondary: #757575;
51
+ --color-text-disabled: #9e9e9e;
52
+ --color-text-primary-dark: #ffffff;
53
+ --color-text-secondary-dark: #a0a0a9;
54
+ --color-text-disabled-dark: #757580;
55
+
56
+ /* Surface Colors */
57
+ --color-surface-50: #fafafa;
58
+ --color-surface-100: #f5f5f5;
59
+ --color-surface-200: #e5e5e5;
60
+ --color-surface-300: #d4d4d4;
61
+ --color-surface-400: #a3a3a3;
62
+ --color-surface-500: #737373;
63
+ --color-surface-600: #404040;
64
+ --color-surface-700: #262626;
65
+ --color-surface-800: #111111;
66
+ --color-surface-900: #0a0a0a;
67
+ --color-surface-950: #000000;
68
+
69
+ /* Surface Accent Colors */
70
+ --color-surface-accent-50: #f8fafc;
71
+ --color-surface-accent-100: #f1f5f9;
72
+ --color-surface-accent-200: #e2e8f0;
73
+ --color-surface-accent-300: #cbd5e1;
74
+ --color-surface-accent-400: #94a3b8;
75
+ --color-surface-accent-500: #64748b;
76
+ --color-surface-accent-600: #475569;
77
+ --color-surface-accent-700: #334155;
78
+ --color-surface-accent-800: #1e293b;
79
+ --color-surface-accent-900: #172033;
80
+ --color-surface-accent-950: #0f172a;
81
+ }