twntyx-css 1.0.8 → 1.0.10
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.
- package/README.md +42 -3
- package/fonts/GazpachoBold.woff2 +0 -0
- package/fonts/GazpachoBoldItalic.woff2 +0 -0
- package/fonts/GazpachoMedium.woff2 +0 -0
- package/fonts/GazpachoMediumItalic.woff2 +0 -0
- package/fonts/GazpachoRegular.woff2 +0 -0
- package/fonts/GazpachoRegularItalic.woff2 +0 -0
- package/llm/components/breadcrumb.json +0 -2
- package/llm/components/button.json +0 -1
- package/llm/components/checkmark.json +0 -2
- package/llm/components/divider.json +19 -4
- package/llm/components/dot-wave-background.json +91 -0
- package/llm/components/progress-bullet.json +0 -2
- package/llm/components/table.json +0 -1
- package/llm/examples/dot-wave-background.html +1 -0
- package/llm/index.json +23 -2
- package/package.json +1 -1
- package/styles/animation.css +17 -10
- package/styles/collapsible.css +6 -1
- package/styles/datepicker.css +1 -1
- package/styles/divider.css +19 -5
- package/styles/font.css +21 -7
- package/styles/form-shared.css +3 -3
- package/styles/shared.css +1 -1
- package/styles/surface.css +10 -4
- package/styles/table.css +1 -11
- package/styles/timeline.css +7 -10
- package/styles/typography.css +4 -0
package/README.md
CHANGED
|
@@ -101,20 +101,59 @@ cp node_modules/twntyx-css/llm/assistants/codex/AGENTS.md ./AGENTS.md
|
|
|
101
101
|
cp node_modules/twntyx-css/llm/assistants/claude/CLAUDE.md ./CLAUDE.md
|
|
102
102
|
```
|
|
103
103
|
|
|
104
|
-
## Publishing
|
|
104
|
+
## Publishing a new version
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
The npm package is **`twntyx-css`**, published from the `framework/` folder. Version lives in **`framework/package.json`** (`version` field).
|
|
107
|
+
|
|
108
|
+
### 1. Bump the version
|
|
109
|
+
|
|
110
|
+
Each publish needs a **new semver** than anything already on [npm](https://www.npmjs.com/package/twntyx-css). npm will reject republishing the same version (403).
|
|
111
|
+
|
|
112
|
+
Edit `framework/package.json` and increment `version` (e.g. `1.0.8` → `1.0.9` for a patch).
|
|
113
|
+
|
|
114
|
+
### 2. Log in to npm
|
|
115
|
+
|
|
116
|
+
From any directory:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
npm whoami
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
If that fails, run `npm login` and use an account that is a **maintainer** of `twntyx-css`. Granular access tokens must allow **publish** for this package.
|
|
123
|
+
|
|
124
|
+
### 3. Dry run (optional)
|
|
125
|
+
|
|
126
|
+
From the **repository root**:
|
|
107
127
|
|
|
108
128
|
```bash
|
|
109
129
|
npm run pack:framework
|
|
110
130
|
```
|
|
111
131
|
|
|
112
|
-
|
|
132
|
+
This runs the same prepare step as publish and shows what would go into the tarball, without uploading.
|
|
133
|
+
|
|
134
|
+
### 4. Publish
|
|
135
|
+
|
|
136
|
+
Still from the **repository root**:
|
|
113
137
|
|
|
114
138
|
```bash
|
|
115
139
|
npm run publish:framework
|
|
116
140
|
```
|
|
117
141
|
|
|
142
|
+
That script:
|
|
143
|
+
|
|
144
|
+
1. Runs `scripts/package-framework.mjs` (syncs styles/fonts into `framework/`, rebuilds the LLM kit, validates metadata).
|
|
145
|
+
2. Runs `npm publish --access public ./framework` (uses a separate cache under `/tmp/twntyx-npm-cache`).
|
|
146
|
+
|
|
147
|
+
Publishing also triggers **`prepack`** in `framework/package.json`, which runs the prepare script again so the packed tarball matches a fresh build.
|
|
148
|
+
|
|
149
|
+
### Troubleshooting
|
|
150
|
+
|
|
151
|
+
| Symptom | Likely cause |
|
|
152
|
+
|--------|----------------|
|
|
153
|
+
| **403** — cannot publish over previously published version | Bump `framework/package.json` `version`. |
|
|
154
|
+
| **404** on `PUT` / “not in this registry” | Usually **auth**: not logged in, expired token, or token without publish rights. Fix with `npm login` or a new publish-capable token. |
|
|
155
|
+
| Prepare / validation errors | Fix LLM or assistant-guide issues, then retry; see `LLM_MAINTENANCE.md`. |
|
|
156
|
+
|
|
118
157
|
## That's it!
|
|
119
158
|
|
|
120
159
|
Your projects can now consume the twntyX theme and components. ✨
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -37,6 +37,16 @@
|
|
|
37
37
|
"name": "divider-end",
|
|
38
38
|
"className": "divider-end",
|
|
39
39
|
"description": "Aligns content to the end"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "divider-dashed",
|
|
43
|
+
"className": "divider-dashed",
|
|
44
|
+
"description": "Renders the divider lines with a dashed border style"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "divider-dotted",
|
|
48
|
+
"className": "divider-dotted",
|
|
49
|
+
"description": "Renders the divider lines with a dotted border style"
|
|
40
50
|
}
|
|
41
51
|
],
|
|
42
52
|
"sizes": [],
|
|
@@ -49,7 +59,9 @@
|
|
|
49
59
|
"optionalClasses": [
|
|
50
60
|
"divider-horizontal",
|
|
51
61
|
"divider-start",
|
|
52
|
-
"divider-end"
|
|
62
|
+
"divider-end",
|
|
63
|
+
"divider-dashed",
|
|
64
|
+
"divider-dotted"
|
|
53
65
|
],
|
|
54
66
|
"requiredChildren": [],
|
|
55
67
|
"optionalChildren": []
|
|
@@ -60,12 +72,16 @@
|
|
|
60
72
|
],
|
|
61
73
|
"required": [],
|
|
62
74
|
"dataAttributes": [],
|
|
63
|
-
"roles": [
|
|
75
|
+
"roles": [
|
|
76
|
+
"separator"
|
|
77
|
+
],
|
|
64
78
|
"aria": []
|
|
65
79
|
},
|
|
66
80
|
"a11y": {
|
|
67
81
|
"interactive": false,
|
|
68
|
-
"requiredRoles": [
|
|
82
|
+
"requiredRoles": [
|
|
83
|
+
"separator"
|
|
84
|
+
],
|
|
69
85
|
"requiredAria": [],
|
|
70
86
|
"keyboardSupport": [],
|
|
71
87
|
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
@@ -82,7 +98,6 @@
|
|
|
82
98
|
],
|
|
83
99
|
"tokenUsage": [
|
|
84
100
|
"line-highlight",
|
|
85
|
-
"text-default",
|
|
86
101
|
"text-tertiary"
|
|
87
102
|
],
|
|
88
103
|
"examples": [
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "dot-wave-background",
|
|
3
|
+
"name": "Dot Wave Background",
|
|
4
|
+
"status": "preview",
|
|
5
|
+
"summary": "Reusable animated dot-wave background for decorative template surfaces and ambient interface layers.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"ambient",
|
|
8
|
+
"animated background",
|
|
9
|
+
"background",
|
|
10
|
+
"backgrounds",
|
|
11
|
+
"canvas",
|
|
12
|
+
"decorative",
|
|
13
|
+
"dot wave",
|
|
14
|
+
"dot wave background",
|
|
15
|
+
"dot-wave-background",
|
|
16
|
+
"dots",
|
|
17
|
+
"template",
|
|
18
|
+
"wave"
|
|
19
|
+
],
|
|
20
|
+
"sourcePaths": [
|
|
21
|
+
"app/design-system/dot-wave-background/page.js",
|
|
22
|
+
"components/backgrounds/DotWaveBackground.js"
|
|
23
|
+
],
|
|
24
|
+
"apiModel": "html-class",
|
|
25
|
+
"baseClass": "dot-wave-background",
|
|
26
|
+
"variants": [],
|
|
27
|
+
"sizes": [],
|
|
28
|
+
"states": [],
|
|
29
|
+
"structure": {
|
|
30
|
+
"rootElement": "canvas",
|
|
31
|
+
"requiredClasses": [
|
|
32
|
+
"dot-wave-background"
|
|
33
|
+
],
|
|
34
|
+
"optionalClasses": [
|
|
35
|
+
"pointer-events-none"
|
|
36
|
+
],
|
|
37
|
+
"requiredChildren": [],
|
|
38
|
+
"optionalChildren": []
|
|
39
|
+
},
|
|
40
|
+
"attributes": {
|
|
41
|
+
"allowed": [
|
|
42
|
+
"aria-hidden",
|
|
43
|
+
"class",
|
|
44
|
+
"style"
|
|
45
|
+
],
|
|
46
|
+
"required": [
|
|
47
|
+
"aria-hidden"
|
|
48
|
+
],
|
|
49
|
+
"dataAttributes": [],
|
|
50
|
+
"roles": [],
|
|
51
|
+
"aria": [
|
|
52
|
+
"aria-hidden"
|
|
53
|
+
]
|
|
54
|
+
},
|
|
55
|
+
"a11y": {
|
|
56
|
+
"interactive": false,
|
|
57
|
+
"requiredRoles": [],
|
|
58
|
+
"requiredAria": [
|
|
59
|
+
"aria-hidden"
|
|
60
|
+
],
|
|
61
|
+
"keyboardSupport": [],
|
|
62
|
+
"focusBehavior": "Decorative canvas backgrounds must remain hidden from assistive technology and must not capture pointer or keyboard interaction."
|
|
63
|
+
},
|
|
64
|
+
"dos": [
|
|
65
|
+
"Apply the base class 'dot-wave-background' on the canvas element.",
|
|
66
|
+
"Use aria-hidden=\"true\" for decorative background usage.",
|
|
67
|
+
"Use pointer-events-none when layering the background behind interactive content."
|
|
68
|
+
],
|
|
69
|
+
"donts": [
|
|
70
|
+
"Do not use the canvas as meaningful content without an accessible alternative.",
|
|
71
|
+
"Do not allow the background layer to capture pointer events from foreground controls.",
|
|
72
|
+
"Do not place interactive children inside the decorative canvas."
|
|
73
|
+
],
|
|
74
|
+
"tokenUsage": [],
|
|
75
|
+
"examples": [
|
|
76
|
+
{
|
|
77
|
+
"id": "canonical",
|
|
78
|
+
"file": "examples/dot-wave-background.html",
|
|
79
|
+
"description": "Minimal canonical Dot Wave Background usage."
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
|
+
"composition": {
|
|
83
|
+
"patterns": [],
|
|
84
|
+
"relatedComponents": [],
|
|
85
|
+
"notes": []
|
|
86
|
+
},
|
|
87
|
+
"breakingChangePolicy": {
|
|
88
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
89
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<canvas class="dot-wave-background pointer-events-none" aria-hidden="true"></canvas>
|
package/llm/index.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"llmSchemaVersion": "1.0.0",
|
|
3
|
-
"designSystemVersion": "1.0.
|
|
3
|
+
"designSystemVersion": "1.0.10",
|
|
4
4
|
"packageName": "twntyx-css",
|
|
5
5
|
"apiModel": "html-class",
|
|
6
|
-
"sourceFingerprint": "
|
|
6
|
+
"sourceFingerprint": "f7c8ee0540e7bb413846b1be281b9f5034f86ab48ade5f990858bbcce6fea5ad",
|
|
7
7
|
"files": {
|
|
8
8
|
"schema": "schema.json",
|
|
9
9
|
"tokens": "tokens.json",
|
|
@@ -627,6 +627,27 @@
|
|
|
627
627
|
"split"
|
|
628
628
|
]
|
|
629
629
|
},
|
|
630
|
+
{
|
|
631
|
+
"id": "dot-wave-background",
|
|
632
|
+
"name": "Dot Wave Background",
|
|
633
|
+
"file": "components/dot-wave-background.json",
|
|
634
|
+
"status": "preview",
|
|
635
|
+
"summary": "Reusable animated dot-wave background for decorative template surfaces and ambient interface layers.",
|
|
636
|
+
"keywords": [
|
|
637
|
+
"ambient",
|
|
638
|
+
"animated background",
|
|
639
|
+
"background",
|
|
640
|
+
"backgrounds",
|
|
641
|
+
"canvas",
|
|
642
|
+
"decorative",
|
|
643
|
+
"dot wave",
|
|
644
|
+
"dot wave background",
|
|
645
|
+
"dot-wave-background",
|
|
646
|
+
"dots",
|
|
647
|
+
"template",
|
|
648
|
+
"wave"
|
|
649
|
+
]
|
|
650
|
+
},
|
|
630
651
|
{
|
|
631
652
|
"id": "field",
|
|
632
653
|
"name": "Field",
|
package/package.json
CHANGED
package/styles/animation.css
CHANGED
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
alternate-reverse;
|
|
108
108
|
--animate-bounce-left-small: bounceLeftSmall 0.7s ease-in-out infinite;
|
|
109
109
|
--animate-rotate: rotate 10s linear infinite;
|
|
110
|
+
--animate-profile-edit-dash: profile-edit-dash 1.2s linear infinite;
|
|
110
111
|
--animate-double-rays: doubleRays 3s cubic-bezier(0.7, 0, 0.3, 1) infinite
|
|
111
112
|
both;
|
|
112
113
|
--animate-double-rays-transform: doubleRaysTransform 3s
|
|
@@ -1175,6 +1176,12 @@
|
|
|
1175
1176
|
}
|
|
1176
1177
|
}
|
|
1177
1178
|
|
|
1179
|
+
@keyframes profile-edit-dash {
|
|
1180
|
+
to {
|
|
1181
|
+
stroke-dashoffset: -2;
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1178
1185
|
@keyframes bounceLeft {
|
|
1179
1186
|
0%,
|
|
1180
1187
|
100% {
|
|
@@ -1357,7 +1364,7 @@
|
|
|
1357
1364
|
|
|
1358
1365
|
@keyframes tooltipSlideDown {
|
|
1359
1366
|
0% {
|
|
1360
|
-
transform: translate(0,
|
|
1367
|
+
transform: translate(0, 1rem);
|
|
1361
1368
|
opacity: 0;
|
|
1362
1369
|
}
|
|
1363
1370
|
100% {
|
|
@@ -1368,7 +1375,7 @@
|
|
|
1368
1375
|
|
|
1369
1376
|
@keyframes tooltipSlideUp {
|
|
1370
1377
|
0% {
|
|
1371
|
-
transform: translate(0, 1rem);
|
|
1378
|
+
transform: translate(0, -1rem);
|
|
1372
1379
|
opacity: 0;
|
|
1373
1380
|
}
|
|
1374
1381
|
100% {
|
|
@@ -1379,7 +1386,7 @@
|
|
|
1379
1386
|
|
|
1380
1387
|
@keyframes tooltipSlideRight {
|
|
1381
1388
|
0% {
|
|
1382
|
-
transform: translateX(1rem);
|
|
1389
|
+
transform: translateX(-1rem);
|
|
1383
1390
|
opacity: 0;
|
|
1384
1391
|
}
|
|
1385
1392
|
100% {
|
|
@@ -1390,7 +1397,7 @@
|
|
|
1390
1397
|
|
|
1391
1398
|
@keyframes tooltipSlideLeft {
|
|
1392
1399
|
0% {
|
|
1393
|
-
transform: translateX(
|
|
1400
|
+
transform: translateX(1rem);
|
|
1394
1401
|
opacity: 0;
|
|
1395
1402
|
}
|
|
1396
1403
|
100% {
|
|
@@ -2057,7 +2064,7 @@
|
|
|
2057
2064
|
@keyframes tooltip-in-top {
|
|
2058
2065
|
0% {
|
|
2059
2066
|
opacity: 0;
|
|
2060
|
-
transform: translateY(4px);
|
|
2067
|
+
transform: translateY(-4px);
|
|
2061
2068
|
}
|
|
2062
2069
|
100% {
|
|
2063
2070
|
opacity: 1;
|
|
@@ -2068,7 +2075,7 @@
|
|
|
2068
2075
|
@keyframes tooltip-in-bottom {
|
|
2069
2076
|
0% {
|
|
2070
2077
|
opacity: 0;
|
|
2071
|
-
transform: translateY(
|
|
2078
|
+
transform: translateY(4px);
|
|
2072
2079
|
}
|
|
2073
2080
|
100% {
|
|
2074
2081
|
opacity: 1;
|
|
@@ -2079,7 +2086,7 @@
|
|
|
2079
2086
|
@keyframes tooltip-in-left {
|
|
2080
2087
|
0% {
|
|
2081
2088
|
opacity: 0;
|
|
2082
|
-
transform: translateX(4px);
|
|
2089
|
+
transform: translateX(-4px);
|
|
2083
2090
|
}
|
|
2084
2091
|
100% {
|
|
2085
2092
|
opacity: 1;
|
|
@@ -2090,7 +2097,7 @@
|
|
|
2090
2097
|
@keyframes tooltip-in-right {
|
|
2091
2098
|
0% {
|
|
2092
2099
|
opacity: 0;
|
|
2093
|
-
transform: translateX(
|
|
2100
|
+
transform: translateX(4px);
|
|
2094
2101
|
}
|
|
2095
2102
|
100% {
|
|
2096
2103
|
opacity: 1;
|
|
@@ -2203,8 +2210,8 @@
|
|
|
2203
2210
|
.flip {
|
|
2204
2211
|
@apply relative
|
|
2205
2212
|
transition-transform
|
|
2206
|
-
duration-
|
|
2207
|
-
ease-
|
|
2213
|
+
duration-500
|
|
2214
|
+
ease-in-out-cubic;
|
|
2208
2215
|
transform-style: preserve-3d;
|
|
2209
2216
|
/* backface-visibility: hidden; */
|
|
2210
2217
|
|
package/styles/collapsible.css
CHANGED
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
> .collapsible-content {
|
|
13
13
|
@apply grid-rows-[1fr]!;
|
|
14
14
|
}
|
|
15
|
+
&.collapsible-card {
|
|
16
|
+
> .collapsible-header {
|
|
17
|
+
@apply rounded-b-sm;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
&.collapsible-has-arrow {
|
|
@@ -81,7 +86,7 @@
|
|
|
81
86
|
}
|
|
82
87
|
|
|
83
88
|
.collapsible-header {
|
|
84
|
-
@apply rounded-[calc(var(--roundness)-0.125rem-1px)] flex-1 flex items-center gap-2 cursor-pointer include-interactive text-text-default;
|
|
89
|
+
@apply rounded-[calc(var(--roundness)-0.125rem-1px)] text-left flex-1 flex items-center gap-2 cursor-pointer include-interactive text-text-default;
|
|
85
90
|
|
|
86
91
|
> span {
|
|
87
92
|
@apply flex-1;
|
package/styles/datepicker.css
CHANGED
package/styles/divider.css
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
/* Lines using pseudo elements */
|
|
12
12
|
&::before,
|
|
13
13
|
&::after {
|
|
14
|
-
@apply content-['']
|
|
14
|
+
@apply content-[''] border-t border-t-text-default/10;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Horizontal divider lines */
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
&::before,
|
|
30
30
|
&::after {
|
|
31
|
-
@apply w-px h-full;
|
|
31
|
+
@apply w-px h-full border-l border-l-text-default/10;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -38,13 +38,13 @@
|
|
|
38
38
|
@apply flex-[0.25];
|
|
39
39
|
}
|
|
40
40
|
&::after {
|
|
41
|
-
@apply flex-
|
|
41
|
+
@apply flex-1;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
&.divider-end {
|
|
46
46
|
&::before {
|
|
47
|
-
@apply flex-
|
|
47
|
+
@apply flex-1;
|
|
48
48
|
}
|
|
49
49
|
&::after {
|
|
50
50
|
@apply flex-[0.25];
|
|
@@ -66,7 +66,21 @@
|
|
|
66
66
|
&.divider-highlight {
|
|
67
67
|
&::before,
|
|
68
68
|
&::after {
|
|
69
|
-
@apply
|
|
69
|
+
@apply border-line-highlight;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.divider-dashed {
|
|
74
|
+
&::before,
|
|
75
|
+
&::after {
|
|
76
|
+
@apply border-dashed;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.divider-dotted {
|
|
81
|
+
&::before,
|
|
82
|
+
&::after {
|
|
83
|
+
@apply border-dotted;
|
|
70
84
|
}
|
|
71
85
|
}
|
|
72
86
|
}
|
package/styles/font.css
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
src: url("../fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
|
|
8
8
|
font-weight: 100 900;
|
|
9
9
|
font-style: normal;
|
|
10
|
+
font-display: swap;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
@font-face {
|
|
@@ -14,46 +15,59 @@
|
|
|
14
15
|
src: url("../fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
|
|
15
16
|
font-weight: 100 900;
|
|
16
17
|
font-style: italic;
|
|
18
|
+
font-display: swap;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
@font-face {
|
|
20
22
|
font-family: "Gazpacho";
|
|
21
|
-
src: url("../fonts/GazpachoRegular.
|
|
23
|
+
src: url("../fonts/GazpachoRegular.woff2") format("woff2"),
|
|
24
|
+
url("../fonts/GazpachoRegular.otf") format("opentype");
|
|
22
25
|
font-weight: 400;
|
|
23
26
|
font-style: normal;
|
|
27
|
+
font-display: swap;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
@font-face {
|
|
27
31
|
font-family: "Gazpacho";
|
|
28
|
-
src: url("../fonts/GazpachoRegularItalic.
|
|
32
|
+
src: url("../fonts/GazpachoRegularItalic.woff2") format("woff2"),
|
|
33
|
+
url("../fonts/GazpachoRegularItalic.otf") format("opentype");
|
|
29
34
|
font-weight: 400;
|
|
30
35
|
font-style: italic;
|
|
36
|
+
font-display: swap;
|
|
31
37
|
}
|
|
32
38
|
|
|
33
39
|
@font-face {
|
|
34
40
|
font-family: "Gazpacho";
|
|
35
|
-
src: url("../fonts/GazpachoMedium.
|
|
41
|
+
src: url("../fonts/GazpachoMedium.woff2") format("woff2"),
|
|
42
|
+
url("../fonts/GazpachoMedium.otf") format("opentype");
|
|
36
43
|
font-weight: 500;
|
|
37
44
|
font-style: normal;
|
|
45
|
+
font-display: swap;
|
|
38
46
|
}
|
|
39
47
|
|
|
40
48
|
@font-face {
|
|
41
49
|
font-family: "Gazpacho";
|
|
42
|
-
src: url("../fonts/GazpachoMediumItalic.
|
|
50
|
+
src: url("../fonts/GazpachoMediumItalic.woff2") format("woff2"),
|
|
51
|
+
url("../fonts/GazpachoMediumItalic.otf") format("opentype");
|
|
43
52
|
font-weight: 500;
|
|
44
53
|
font-style: italic;
|
|
54
|
+
font-display: swap;
|
|
45
55
|
}
|
|
46
56
|
|
|
47
57
|
@font-face {
|
|
48
58
|
font-family: "Gazpacho";
|
|
49
|
-
src: url("../fonts/GazpachoBold.
|
|
59
|
+
src: url("../fonts/GazpachoBold.woff2") format("woff2"),
|
|
60
|
+
url("../fonts/GazpachoBold.otf") format("opentype");
|
|
50
61
|
font-weight: 700;
|
|
51
62
|
font-style: normal;
|
|
63
|
+
font-display: swap;
|
|
52
64
|
}
|
|
53
65
|
|
|
54
66
|
@font-face {
|
|
55
67
|
font-family: "Gazpacho";
|
|
56
|
-
src: url("../fonts/GazpachoBoldItalic.
|
|
68
|
+
src: url("../fonts/GazpachoBoldItalic.woff2") format("woff2"),
|
|
69
|
+
url("../fonts/GazpachoBoldItalic.otf") format("opentype");
|
|
57
70
|
font-weight: 700;
|
|
58
71
|
font-style: italic;
|
|
59
|
-
|
|
72
|
+
font-display: swap;
|
|
73
|
+
}
|
package/styles/form-shared.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import 'tailwindcss';
|
|
2
2
|
|
|
3
3
|
/*----------------------------*/
|
|
4
4
|
/* FORM */
|
|
5
5
|
/*----------------------------*/
|
|
6
6
|
|
|
7
7
|
@utility input-label {
|
|
8
|
-
@apply text-
|
|
8
|
+
@apply text-xs uppercase tracking-wider text-text-secondary font-bold font-body select-none;
|
|
9
9
|
|
|
10
10
|
&:is(label) {
|
|
11
11
|
@apply cursor-pointer;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
small {
|
|
15
|
-
@apply text-
|
|
15
|
+
@apply text-xxs;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
package/styles/shared.css
CHANGED
|
@@ -158,7 +158,7 @@ body {
|
|
|
158
158
|
@apply relative z-10;
|
|
159
159
|
}
|
|
160
160
|
&::before {
|
|
161
|
-
@apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity] duration-75 opacity-0 bg-background-brand/15 ease-out-expo;
|
|
161
|
+
@apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity,border-radius] duration-75 opacity-0 bg-background-brand/15 ease-out-expo;
|
|
162
162
|
}
|
|
163
163
|
&:hover {
|
|
164
164
|
@apply include-hover-primary-hover;
|
package/styles/surface.css
CHANGED
|
@@ -68,12 +68,15 @@
|
|
|
68
68
|
via-75%
|
|
69
69
|
from-[0.5rem]
|
|
70
70
|
to-[calc(100%-0.5rem)]
|
|
71
|
-
to-brand-default
|
|
72
71
|
from-brand-moderate
|
|
72
|
+
to-brand-default
|
|
73
|
+
dark:from-brand-default
|
|
74
|
+
dark:to-brand-moderate
|
|
73
75
|
border
|
|
74
76
|
border-brand-default
|
|
75
77
|
transition-[background-position,brightness]
|
|
76
|
-
shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-strong)
|
|
78
|
+
shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-strong)_15%,transparent)]
|
|
79
|
+
dark:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-default)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_50%,transparent)]
|
|
77
80
|
duration-75
|
|
78
81
|
ease-out-cubic;
|
|
79
82
|
|
|
@@ -81,7 +84,7 @@
|
|
|
81
84
|
&::before,
|
|
82
85
|
&::after {
|
|
83
86
|
@apply drop-shadow-[0_0.5px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_1px_color-mix(in_srgb,var(--tw-drop-shadow-color)_100%,transparent),0_1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)]
|
|
84
|
-
dark:drop-shadow-[
|
|
87
|
+
dark:drop-shadow-[0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_10%,transparent)]
|
|
85
88
|
drop-shadow-brand-strong/50;
|
|
86
89
|
}
|
|
87
90
|
}
|
|
@@ -145,7 +148,10 @@
|
|
|
145
148
|
@apply surface-brand
|
|
146
149
|
hover:brightness-105
|
|
147
150
|
hover:border-brand-strong
|
|
148
|
-
active:border-brand-default
|
|
151
|
+
active:border-brand-default
|
|
152
|
+
transition-[filter,box-shadow,border-color]
|
|
153
|
+
hover:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-1px_0_0_color-mix(in_srgb,var(--color-brand-strong)_15%,transparent)]
|
|
154
|
+
dark:hover:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-default)_100%,transparent),inset_0_-1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_50%,transparent)];
|
|
149
155
|
}
|
|
150
156
|
|
|
151
157
|
@utility surface-interactive {
|
package/styles/table.css
CHANGED
|
@@ -10,17 +10,7 @@
|
|
|
10
10
|
@apply overflow-x-auto;
|
|
11
11
|
|
|
12
12
|
/* Custom scrollbar styling */
|
|
13
|
-
|
|
14
|
-
@apply w-2 h-2;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
&::-webkit-scrollbar-track {
|
|
18
|
-
@apply rounded-full bg-core-ui-100 dark:bg-core-ui-900;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&::-webkit-scrollbar-thumb {
|
|
22
|
-
@apply rounded-full transition-colors bg-core-ui-400 dark:bg-core-ui-600 hover:bg-text-tertiary;
|
|
23
|
-
}
|
|
13
|
+
@apply scrollbar;
|
|
24
14
|
}
|
|
25
15
|
|
|
26
16
|
/* Sticky first column */
|
package/styles/timeline.css
CHANGED
|
@@ -14,8 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@utility timeline-dot {
|
|
17
|
-
@apply
|
|
18
|
-
size-(--timeline-marker-size)
|
|
17
|
+
@apply size-(--timeline-marker-size)
|
|
19
18
|
block
|
|
20
19
|
rounded-full
|
|
21
20
|
border
|
|
@@ -24,8 +23,7 @@
|
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
@utility timeline-marker {
|
|
27
|
-
@apply
|
|
28
|
-
size-(--timeline-marker-size)
|
|
26
|
+
@apply size-(--timeline-marker-size)
|
|
29
27
|
inline-flex
|
|
30
28
|
shrink-0
|
|
31
29
|
items-center
|
|
@@ -44,8 +42,7 @@
|
|
|
44
42
|
}
|
|
45
43
|
|
|
46
44
|
@utility timeline-connector {
|
|
47
|
-
@apply
|
|
48
|
-
block
|
|
45
|
+
@apply block
|
|
49
46
|
rounded-full
|
|
50
47
|
bg-line-default;
|
|
51
48
|
}
|
|
@@ -55,7 +52,7 @@
|
|
|
55
52
|
.timeline-vertical,
|
|
56
53
|
.timeline-activity {
|
|
57
54
|
> :where(li, .timeline-item) {
|
|
58
|
-
@apply relative
|
|
55
|
+
@apply relative pl-(--timeline-item-indent);
|
|
59
56
|
}
|
|
60
57
|
|
|
61
58
|
> :where(li, .timeline-item):not(:last-child)::before {
|
|
@@ -78,7 +75,7 @@
|
|
|
78
75
|
--timeline-item-indent: 1.75rem;
|
|
79
76
|
|
|
80
77
|
> :where(li, .timeline-item):not(:last-child) {
|
|
81
|
-
@apply pb-
|
|
78
|
+
@apply pb-4;
|
|
82
79
|
}
|
|
83
80
|
|
|
84
81
|
> :where(li, .timeline-item) > :where(.timeline-marker, .timeline-dot) {
|
|
@@ -96,7 +93,7 @@
|
|
|
96
93
|
--timeline-item-indent: 2.25rem;
|
|
97
94
|
|
|
98
95
|
> :where(li, .timeline-item):not(:last-child) {
|
|
99
|
-
@apply pb-
|
|
96
|
+
@apply pb-4;
|
|
100
97
|
}
|
|
101
98
|
|
|
102
99
|
> :where(li, .timeline-item) > .timeline-marker {
|
|
@@ -141,7 +138,7 @@
|
|
|
141
138
|
--timeline-item-indent: 2.25rem;
|
|
142
139
|
|
|
143
140
|
> :where(li, .timeline-item):not(:last-child) {
|
|
144
|
-
@apply pb-
|
|
141
|
+
@apply pb-4;
|
|
145
142
|
}
|
|
146
143
|
|
|
147
144
|
> :where(li, .timeline-item) > .timeline-marker {
|