@trackunit/css-core 1.11.32 → 1.12.0

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 (7) hide show
  1. package/package.json +4 -2
  2. package/src/lib/core.css +24 -22
  3. package/src/lib/generated/component-tokens.generated.css +283 -0
  4. package/src/lib/generated/tailwind-theme.generated.css +835 -0
  5. package/src/lib/generated/tailwind-utilities.generated.css +347 -0
  6. package/src/lib/react-calendar.css +18 -18
  7. package/src/lib/theme/custom-properties.css +7 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/css-core",
3
- "version": "1.11.32",
3
+ "version": "1.12.0",
4
4
  "main": "src/lib/core.css",
5
5
  "repository": "https://github.com/Trackunit/manager",
6
6
  "license": "SEE LICENSE IN LICENSE.txt",
@@ -10,6 +10,8 @@
10
10
  "dependencies": {
11
11
  "copy-webpack-plugin": "11.0.0",
12
12
  "react-image-gallery": "1.3.0",
13
- "tailwindcss": "3.4.3"
13
+ "tailwindcss": "^4.1.18",
14
+ "@tailwindcss/typography": "^0.5.19",
15
+ "@tailwindcss/postcss": "^4.1.18"
14
16
  }
15
17
  }
package/src/lib/core.css CHANGED
@@ -1,19 +1,21 @@
1
1
  /*
2
- * Setup Tailwind Base css
2
+ * Setup Tailwind CSS v4
3
+ *
4
+ * ALL @import statements MUST come first, before @plugin or any CSS rules
3
5
  */
4
6
 
5
- @import "tailwindcss/base";
6
- @import "tailwindcss/components";
7
- @import "tailwindcss/utilities";
8
-
7
+ @import "tailwindcss";
8
+ @import "./generated/tailwind-theme.generated.css";
9
+ @import "./generated/tailwind-utilities.generated.css";
10
+ @import "./generated/component-tokens.generated.css";
9
11
  @import "react-image-gallery/styles/css/image-gallery.css";
10
-
11
12
  @import "./theme/custom-properties.css";
12
-
13
13
  @import "./react-calendar.css";
14
-
15
14
  @import "./fonts.css";
16
15
 
16
+ /* Load Tailwind plugins AFTER all imports */
17
+ @plugin "@tailwindcss/typography";
18
+
17
19
  /* Override to fix type="button" in safari */
18
20
  [type="button"] {
19
21
  -webkit-appearance: none;
@@ -33,14 +35,14 @@
33
35
  }
34
36
 
35
37
  input[type="date"]::-webkit-datetime-edit-month-field:focus {
36
- color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
38
+ color: var(--color-primary-600);
37
39
  }
38
40
 
39
41
  input[type="date"]::-webkit-datetime-edit-day-field:focus {
40
- color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
42
+ color: var(--color-primary-600);
41
43
  }
42
44
  input[type="date"]::-webkit-datetime-edit-year-field:focus {
43
- color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
45
+ color: var(--color-primary-600);
44
46
  }
45
47
 
46
48
  h1,
@@ -86,36 +88,36 @@ tr > td[data-pinned=""] + td[data-pinned="right"] {
86
88
 
87
89
  /* Row focus (body rows only) */
88
90
  .row-focus:has(:focus-visible):not(:has([data-selection-cell] :focus-visible)) {
89
- box-shadow: inset 0 0 0 2px rgb(var(--color-primary-600));
91
+ box-shadow: inset 0 0 0 2px var(--color-primary-600);
90
92
  outline: none !important;
91
93
  }
92
94
 
93
95
  /* LEFT pinned — first cell in the block: left + top + bottom */
94
96
  .row-focus:has(:focus-visible) > td[data-pinned="left"] {
95
97
  box-shadow:
96
- inset 2px 0 0 rgb(var(--color-primary-600)),
97
- inset 0 2px 0 rgb(var(--color-primary-600)),
98
- inset 0 -2px 0 rgb(var(--color-primary-600));
98
+ inset 2px 0 0 var(--color-primary-600),
99
+ inset 0 2px 0 var(--color-primary-600),
100
+ inset 0 -2px 0 var(--color-primary-600);
99
101
  }
100
102
 
101
103
  /* LEFT pinned — all following cells in the block: only top + bottom (no inner vertical line) */
102
104
  .row-focus:has(:focus-visible) > td[data-pinned="left"] + td[data-pinned="left"] {
103
105
  box-shadow:
104
- inset 0 2px 0 rgb(var(--color-primary-600)),
105
- inset 0 -2px 0 rgb(var(--color-primary-600));
106
+ inset 0 2px 0 var(--color-primary-600),
107
+ inset 0 -2px 0 var(--color-primary-600);
106
108
  }
107
109
 
108
110
  /* RIGHT pinned — last cell in the block: right + top + bottom */
109
111
  .row-focus:has(:focus-visible) > td[data-pinned="right"] {
110
112
  box-shadow:
111
- inset -2px 0 0 rgb(var(--color-primary-600)),
112
- inset 0 2px 0 rgb(var(--color-primary-600)),
113
- inset 0 -2px 0 rgb(var(--color-primary-600));
113
+ inset -2px 0 0 var(--color-primary-600),
114
+ inset 0 2px 0 var(--color-primary-600),
115
+ inset 0 -2px 0 var(--color-primary-600);
114
116
  }
115
117
 
116
118
  /* RIGHT pinned — all cells that have another right pinned cell on their right: only top + bottom */
117
119
  .row-focus:has(:focus-visible) > td[data-pinned="right"]:has(+ td[data-pinned="right"]) {
118
120
  box-shadow:
119
- inset 0 2px 0 rgb(var(--color-primary-600)),
120
- inset 0 -2px 0 rgb(var(--color-primary-600));
121
+ inset 0 2px 0 var(--color-primary-600),
122
+ inset 0 -2px 0 var(--color-primary-600);
121
123
  }
package/src/lib/generated/component-tokens.generated.css ADDED
@@ -0,0 +1,283 @@
1
+ /**
2
+ * Generated Tailwind CSS v4 Component Tokens
3
+ * DO NOT EDIT - This file is auto-generated from component token definitions
4
+ * Run: yarn nx run css-core:generate-css
5
+ */
6
+
7
+ /* ========================================
8
+ * Component Token Variables - DEFAULT Theme
9
+ * ======================================== */
10
+ :root {
11
+ --component-card-border-border-color: var(--color-neutral-200);
12
+ --component-card-border-border-radius: var(--radius-lg);
13
+ --component-card-popover-border-border-radius: var(--radius-lg);
14
+ --component-card-shadow-box-shadow: var(--shadow-none);
15
+ --component-card-spacing-gap: var(--spacing-3);
16
+ --component-card-spacing-padding: var(--spacing-3);
17
+ --component-card-spacing-sm-gap: var(--spacing-4);
18
+ --component-card-spacing-sm-padding: var(--spacing-4);
19
+ --component-card-spacing-md-gap: var(--spacing-4);
20
+ --component-card-spacing-md-padding: var(--spacing-4);
21
+ --component-button-secondary-color-background-color: var(--color-neutral-200);
22
+ --component-button-secondary-color-color: var(--color-neutral-600);
23
+ --component-button-border-border-radius: var(--radius-lg);
24
+ --component-button-height-height: auto;
25
+ --component-button-padding-padding-left: var(--spacing-2-5);
26
+ --component-button-padding-padding-right: var(--spacing-2-5);
27
+ --component-search-width-width: 9rem;
28
+ --component-search-background-background-color: ;
29
+ --component-search-borderless-border-style: hidden;
30
+ --component-search-focus-hover-border-width: 1px;
31
+ --component-search-focus-hover-border-bottom-width: 1px;
32
+ --component-search-focus-hover-border-color: var(--color-neutral-400);
33
+ --component-search-focus-hover-border-bottom-color: var(--color-neutral-400);
34
+ --component-search-focus-hover-background-color: var(--color-neutral-50);
35
+ --component-search-border-border-style: solid;
36
+ --component-search-border-border-width: 1px;
37
+ --component-search-border-border-bottom-width: 1px;
38
+ --component-search-border-border-color: var(--color-neutral-200);
39
+ --component-search-border-border-bottom-color: var(--color-neutral-200);
40
+ --component-search-border-border-radius: 0.5rem;
41
+ --component-search-focus-within-border-color: var(--color-neutral-400);
42
+ --component-search-focus-within-box-shadow: var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
43
+ --component-search-widen-border-bottom-color: var(--color-neutral-400);
44
+ --component-search-widen-focus-border-bottom-color: var(--color-neutral-400);
45
+ --component-search-prefix-color: var(--color-neutral-400);
46
+ --component-search-prefix-cursor: default;
47
+ --component-popover-border-border-radius: var(--radius-DEFAULT);
48
+ --component-popoverListItem-border-border-radius: var(--radius-DEFAULT);
49
+ --component-baseInput-border-border-radius: var(--radius-lg);
50
+ --component-baseInput-border-border-width: 1px;
51
+ --component-baseInput-shadow-box-shadow: var(--shadow-sm);
52
+ --component-baseInput-background-background-color: white;
53
+ --component-baseInput-prefix-border-right-width: 1px;
54
+ --component-formGroup-gap-display: auto;
55
+ --component-formGroup-gap-gap: auto;
56
+ --component-formGroup-font-font-weight: normal;
57
+ }
58
+
59
+ /* ========================================
60
+ * Component Token Variables - Marketing Theme
61
+ * ======================================== */
62
+ .theme-marketing {
63
+
64
+ --component-card-border-border-color: rgba(0, 0, 0, 0);
65
+ --component-card-border-border-radius: 2rem;
66
+ --component-card-popover-border-border-radius: 1rem;
67
+ --component-card-shadow-box-shadow: 0px 20px 48px rgba(73, 55, 54, 0.1);
68
+ --component-card-spacing-gap: var(--spacing-3);
69
+ --component-card-spacing-padding: var(--spacing-3);
70
+ --component-card-spacing-sm-gap: var(--spacing-4);
71
+ --component-card-spacing-sm-padding: var(--spacing-4);
72
+ --component-card-spacing-md-gap: var(--spacing-4);
73
+ --component-card-spacing-md-padding: var(--spacing-6);
74
+ --component-button-secondary-color-background-color: var(--color-neutral-600);
75
+ --component-button-secondary-color-color: var(--color-neutral-50);
76
+ --component-button-border-border-radius: 50px;
77
+ --component-button-height-height: 55px;
78
+ --component-button-padding-padding-left: var(--spacing-12);
79
+ --component-button-padding-padding-right: var(--spacing-12);
80
+ --component-search-width-width: 0px;
81
+ --component-search-background-background-color: transparent;
82
+ --component-search-borderless-border-style: hidden;
83
+ --component-search-focus-hover-border-width: 1px;
84
+ --component-search-focus-hover-border-bottom-width: 1px;
85
+ --component-search-focus-hover-border-color: var(--color-black);
86
+ --component-search-focus-hover-border-bottom-color: var(--color-black);
87
+ --component-search-focus-hover-background-color: transparent;
88
+ --component-search-border-border-style: solid;
89
+ --component-search-border-border-width: 1px;
90
+ --component-search-border-border-bottom-width: 1px;
91
+ --component-search-border-border-color: var(--color-neutral-300);
92
+ --component-search-border-border-bottom-color: var(--color-neutral-300);
93
+ --component-search-border-border-radius: 0px;
94
+ --component-search-focus-within-border-color: none;
95
+ --component-search-focus-within-box-shadow: none;
96
+ --component-search-widen-border-bottom-color: var(--color-white);
97
+ --component-search-widen-focus-border-bottom-color: var(--color-black);
98
+ --component-search-prefix-color: var(--color-neutral-600);
99
+ --component-search-prefix-cursor: pointer;
100
+ --component-popover-border-border-radius: 1rem;
101
+ --component-popoverListItem-border-border-radius: 1rem;
102
+ --component-baseInput-border-border-radius: 8px;
103
+ --component-baseInput-border-border-width: 1px;
104
+ --component-baseInput-shadow-box-shadow: none;
105
+ --component-baseInput-background-background-color: var(--color-stone-50);
106
+ --component-baseInput-prefix-border-right-width: 0px;
107
+ --component-formGroup-gap-display: grid;
108
+ --component-formGroup-gap-gap: var(--spacing-4);
109
+ --component-formGroup-font-font-weight: 700;
110
+ --color-stone-50: rgb(251 249 249 / var(--tw-bg-opacity));
111
+ --color-stone-100: rgb(243 237 237 / var(--tw-bg-opacity));
112
+ --color-stone-200: rgb(234 222 222 / var(--tw-bg-opacity));
113
+ --color-stone-300: rgb(219 198 198 / var(--tw-bg-opacity));
114
+ --color-stone-400: rgb(196 165 165 / var(--tw-bg-opacity));
115
+ --color-stone-500: rgb(173 134 134 / var(--tw-bg-opacity));
116
+ --color-stone-600: rgb(150 108 108 / var(--tw-bg-opacity));
117
+ --color-stone-700: rgb(125 88 88 / var(--tw-bg-opacity));
118
+ --color-stone-800: rgb(105 75 75 / var(--tw-bg-opacity));
119
+ --color-stone-900: rgb(89 67 67 / var(--tw-bg-opacity));
120
+ --color-primary-50: rgb(254 236 235 / var(--tw-bg-opacity));
121
+ --color-primary-100: rgb(254 236 235 / var(--tw-bg-opacity));
122
+ --color-primary-200: rgb(254 217 215 / var(--tw-bg-opacity));
123
+ --color-primary-300: rgb(253 180 176 / var(--tw-bg-opacity));
124
+ --color-primary-400: rgb(251 142 136 / var(--tw-bg-opacity));
125
+ --color-primary-500: rgb(250 104 97 / var(--tw-bg-opacity));
126
+ --color-primary-600: rgb(249 66 58 / var(--tw-bg-opacity));
127
+ --color-primary-700: rgb(238 19 7 / var(--tw-bg-opacity));
128
+ --color-primary-800: rgb(178 14 5 / var(--tw-bg-opacity));
129
+ --color-primary-900: rgb(119 9 4 / var(--tw-bg-opacity));
130
+ --color-secondary-50: rgb(238 243 246 / var(--tw-bg-opacity));
131
+ --color-secondary-100: rgb(238 243 246 / var(--tw-bg-opacity));
132
+ --color-secondary-200: rgb(222 231 237 / var(--tw-bg-opacity));
133
+ --color-secondary-300: rgb(189 208 219 / var(--tw-bg-opacity));
134
+ --color-secondary-400: rgb(155 184 202 / var(--tw-bg-opacity));
135
+ --color-secondary-500: rgb(122 160 184 / var(--tw-bg-opacity));
136
+ --color-secondary-600: rgb(89 137 166 / var(--tw-bg-opacity));
137
+ --color-secondary-700: rgb(71 109 133 / var(--tw-bg-opacity));
138
+ --color-secondary-800: rgb(53 82 100 / var(--tw-bg-opacity));
139
+ --color-secondary-900: rgb(36 55 66 / var(--tw-bg-opacity));
140
+ --color-yellow-50: rgb(255 246 240 / var(--tw-bg-opacity));
141
+ --color-yellow-100: rgb(255 246 240 / var(--tw-bg-opacity));
142
+ --color-yellow-200: rgb(255 238 224 / var(--tw-bg-opacity));
143
+ --color-yellow-300: rgb(255 223 199 / var(--tw-bg-opacity));
144
+ --color-yellow-400: rgb(255 206 168 / var(--tw-bg-opacity));
145
+ --color-yellow-500: rgb(255 191 143 / var(--tw-bg-opacity));
146
+ --color-yellow-600: rgb(255 173 112 / var(--tw-bg-opacity));
147
+ --color-yellow-700: rgb(255 134 41 / var(--tw-bg-opacity));
148
+ --color-yellow-800: rgb(219 95 0 / var(--tw-bg-opacity));
149
+ --color-yellow-900: rgb(148 64 0 / var(--tw-bg-opacity));
150
+ }
151
+
152
+ /* ========================================
153
+ * Component Token Classes
154
+ * Wrapped in @layer components so utilities (p-0, etc.) can override them
155
+ * ======================================== */
156
+ @layer components {
157
+ .component-card-border {
158
+ border-color: var(--component-card-border-border-color);
159
+ border-radius: var(--component-card-border-border-radius);
160
+ }
161
+
162
+ .component-card-popover-border {
163
+ border-radius: var(--component-card-popover-border-border-radius);
164
+ }
165
+
166
+ .component-card-shadow {
167
+ box-shadow: var(--component-card-shadow-box-shadow);
168
+ }
169
+
170
+ .component-card-spacing {
171
+ gap: var(--component-card-spacing-gap);
172
+ padding: var(--component-card-spacing-padding);
173
+ }
174
+
175
+ .component-card-spacing-sm {
176
+ gap: var(--component-card-spacing-sm-gap);
177
+ padding: var(--component-card-spacing-sm-padding);
178
+ }
179
+
180
+ .component-card-spacing-md {
181
+ gap: var(--component-card-spacing-md-gap);
182
+ padding: var(--component-card-spacing-md-padding);
183
+ }
184
+
185
+ .component-button-secondary-color {
186
+ background-color: var(--component-button-secondary-color-background-color);
187
+ color: var(--component-button-secondary-color-color);
188
+ }
189
+
190
+ .component-button-border {
191
+ border-radius: var(--component-button-border-border-radius);
192
+ }
193
+
194
+ .component-button-height {
195
+ height: var(--component-button-height-height);
196
+ }
197
+
198
+ .component-button-padding {
199
+ padding-left: var(--component-button-padding-padding-left);
200
+ padding-right: var(--component-button-padding-padding-right);
201
+ }
202
+
203
+ .component-search-width {
204
+ width: var(--component-search-width-width);
205
+ }
206
+
207
+ .component-search-background {
208
+ background-color: var(--component-search-background-background-color);
209
+ }
210
+
211
+ .component-search-borderless {
212
+ border-style: var(--component-search-borderless-border-style);
213
+ }
214
+
215
+ .component-search-focus-hover {
216
+ border-width: var(--component-search-focus-hover-border-width);
217
+ border-bottom-width: var(--component-search-focus-hover-border-bottom-width);
218
+ border-color: var(--component-search-focus-hover-border-color);
219
+ border-bottom-color: var(--component-search-focus-hover-border-bottom-color);
220
+ background-color: var(--component-search-focus-hover-background-color);
221
+ }
222
+
223
+ .component-search-border {
224
+ border-style: var(--component-search-border-border-style);
225
+ border-width: var(--component-search-border-border-width);
226
+ border-bottom-width: var(--component-search-border-border-bottom-width);
227
+ border-color: var(--component-search-border-border-color);
228
+ border-bottom-color: var(--component-search-border-border-bottom-color);
229
+ border-radius: var(--component-search-border-border-radius);
230
+ }
231
+
232
+ .component-search-focus-within {
233
+ border-color: var(--component-search-focus-within-border-color);
234
+ box-shadow: var(--component-search-focus-within-box-shadow);
235
+ }
236
+
237
+ .component-search-widen {
238
+ border-bottom-color: var(--component-search-widen-border-bottom-color);
239
+ }
240
+
241
+ .component-search-widen-focus {
242
+ border-bottom-color: var(--component-search-widen-focus-border-bottom-color);
243
+ }
244
+
245
+ .component-search-prefix {
246
+ color: var(--component-search-prefix-color);
247
+ cursor: var(--component-search-prefix-cursor);
248
+ }
249
+
250
+ .component-popover-border {
251
+ border-radius: var(--component-popover-border-border-radius);
252
+ }
253
+
254
+ .component-popoverListItem-border {
255
+ border-radius: var(--component-popoverListItem-border-border-radius);
256
+ }
257
+
258
+ .component-baseInput-border {
259
+ border-radius: var(--component-baseInput-border-border-radius);
260
+ border-width: var(--component-baseInput-border-border-width);
261
+ }
262
+
263
+ .component-baseInput-shadow {
264
+ box-shadow: var(--component-baseInput-shadow-box-shadow);
265
+ }
266
+
267
+ .component-baseInput-background {
268
+ background-color: var(--component-baseInput-background-background-color);
269
+ }
270
+
271
+ .component-baseInput-prefix {
272
+ border-right-width: var(--component-baseInput-prefix-border-right-width);
273
+ }
274
+
275
+ .component-formGroup-gap {
276
+ display: var(--component-formGroup-gap-display);
277
+ gap: var(--component-formGroup-gap-gap);
278
+ }
279
+
280
+ .component-formGroup-font {
281
+ font-weight: var(--component-formGroup-font-font-weight);
282
+ }
283
+ }