nk_jtb 0.28.2 → 0.28.3
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/dev.html +79 -0
- package/docs/jtb-status.md +9 -5
- package/docs/utilities/position.md +67 -27
- package/index.html +896 -281
- package/jtb-conversion-notes.md +3 -2
- package/package.json +1 -1
- package/scripts/jtb-nav.json +4 -0
- package/src/base/_root.scss +14 -4
- package/src/components/_button.scss +16 -0
- package/src/maps_and_variables/_colors.scss +4 -0
- package/src/maps_and_variables/_value-maps.scss +2 -0
- package/src/play.scss +15 -13
- package/src/utilities/_backgrounds.scss +14 -0
- package/src/utilities/_border.scss +18 -0
- package/src/utilities/_layout.scss +13 -4
- package/src/utilities/_themes.scss +19 -0
- package/src/utilities/_typography.scss +15 -0
- package/todo.md +3 -0
package/dev.html
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
8
8
|
<title>DEV</title>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
|
|
9
11
|
<!-- order matters, make sure the plugin comes before alpine.js -->
|
|
10
12
|
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
|
|
11
13
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
@@ -13,6 +15,83 @@
|
|
|
13
15
|
|
|
14
16
|
<body class="container py-5 bg-gray-200">
|
|
15
17
|
|
|
18
|
+
<style>
|
|
19
|
+
/* ============================================================
|
|
20
|
+
Local helpers — JTB gaps documented in jtb-conversion-notes.md
|
|
21
|
+
============================================================ */
|
|
22
|
+
|
|
23
|
+
:root {
|
|
24
|
+
--primary: #7c0442;
|
|
25
|
+
--box-border-radius: 0.75rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Positional border-color not generated — known gap */
|
|
29
|
+
.bdr-l-brand { border-inline-start-color: var(--primary); }
|
|
30
|
+
</style>
|
|
31
|
+
|
|
32
|
+
<div class="flex-col gap-3">
|
|
33
|
+
|
|
34
|
+
<p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option A — soft pattern</p>
|
|
35
|
+
|
|
36
|
+
<div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
|
|
37
|
+
<svg class="absolute -top-1.5 -right-1.5 opacity-10" width="120" height="120" viewBox="0 0 120 120">
|
|
38
|
+
<circle cx="60" cy="60" r="50" fill="#7c0442"/>
|
|
39
|
+
<circle cx="60" cy="60" r="35" fill="none" stroke="#7c0442" stroke-width="2"/>
|
|
40
|
+
<circle cx="60" cy="60" r="20" fill="none" stroke="#7c0442" stroke-width="2"/>
|
|
41
|
+
</svg>
|
|
42
|
+
<svg class="absolute -bottom-1 -left-1 opacity-10" width="80" height="80" viewBox="0 0 80 80">
|
|
43
|
+
<circle cx="40" cy="40" r="35" fill="#7c0442"/>
|
|
44
|
+
</svg>
|
|
45
|
+
<p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
|
|
46
|
+
<p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
|
|
47
|
+
<p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
|
|
48
|
+
<a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option B — brand colour + corner shapes</p>
|
|
52
|
+
|
|
53
|
+
<div class="bx primary relative overflow-hidden max-w-384px">
|
|
54
|
+
<svg class="absolute -top-1.5 -right-1.5 opacity-10" width="100" height="100" viewBox="0 0 100 100">
|
|
55
|
+
<rect x="10" y="10" width="80" height="80" rx="8" fill="white"/>
|
|
56
|
+
<rect x="25" y="25" width="50" height="50" rx="4" fill="none" stroke="white" stroke-width="2"/>
|
|
57
|
+
</svg>
|
|
58
|
+
<svg class="absolute -bottom-1.5 -left-1.5 opacity-10" width="90" height="90" viewBox="0 0 90 90">
|
|
59
|
+
<circle cx="45" cy="45" r="40" fill="white"/>
|
|
60
|
+
<circle cx="45" cy="45" r="25" fill="none" stroke="white" stroke-width="2"/>
|
|
61
|
+
</svg>
|
|
62
|
+
<p class="txt-xs font-medium uppercase tracking-widest txt-rose-200 opacity-80">Also available as</p>
|
|
63
|
+
<p class="font-serif txt-base font-medium">Part of a program</p>
|
|
64
|
+
<p class="txt-sm txt-rose-200 opacity-90">Save with a bundle discount when you enrol in the full program.</p>
|
|
65
|
+
<a href="#" class="txt-sm font-medium inline-flex items-center gap-025">View program →</a>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option C — left border accent</p>
|
|
69
|
+
|
|
70
|
+
<div class="bx relative overflow-hidden max-w-384px bdr-l-3 bdr-l-brand">
|
|
71
|
+
<p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
|
|
72
|
+
<p class="font-serif txt-base font-medium">Part of a program</p>
|
|
73
|
+
<p class="txt-sm txt-muted">Save with a bundle discount when you enrol in the full program.</p>
|
|
74
|
+
<a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option D — diagonal shape bleed</p>
|
|
78
|
+
|
|
79
|
+
<div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
|
|
80
|
+
<svg class="absolute top-0 right-0" width="120" height="120" viewBox="0 0 120 120">
|
|
81
|
+
<polygon points="120,0 120,120 0,0" fill="#7c0442" opacity="0.08"/>
|
|
82
|
+
<polygon points="120,0 120,80 40,0" fill="#7c0442" opacity="0.08"/>
|
|
83
|
+
</svg>
|
|
84
|
+
<svg class="absolute bottom-0 left-0" width="70" height="70" viewBox="0 0 70 70">
|
|
85
|
+
<polygon points="0,70 70,70 0,0" fill="#7c0442" opacity="0.06"/>
|
|
86
|
+
</svg>
|
|
87
|
+
<p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
|
|
88
|
+
<p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
|
|
89
|
+
<p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
|
|
90
|
+
<a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
</div>
|
|
94
|
+
|
|
16
95
|
<script type="module" src="/main.js"></script>
|
|
17
96
|
</body>
|
|
18
97
|
|
package/docs/jtb-status.md
CHANGED
|
@@ -128,11 +128,15 @@ a doc is confirmed accurate or a utility is completed.
|
|
|
128
128
|
| `overflow-y` | review | ❌ | |
|
|
129
129
|
| `position` | review | Review | |
|
|
130
130
|
| `z-index` | review | Review | |
|
|
131
|
-
| `top`
|
|
132
|
-
| `bottom`
|
|
133
|
-
| `left`
|
|
134
|
-
| `right`
|
|
135
|
-
| `inset`
|
|
131
|
+
| `top` | review | Review | Offset utilities |
|
|
132
|
+
| `bottom` | review | Review | Offset utilities |
|
|
133
|
+
| `left` | review | Review | Offset utilities |
|
|
134
|
+
| `right` | review | Review | Offset utilities |
|
|
135
|
+
| `inset` | review | Review | |
|
|
136
|
+
| `-top-*` | ✅ | Review | Negative offset utilities |
|
|
137
|
+
| `-bottom-*` | ✅ | Review | Negative offset utilities |
|
|
138
|
+
| `-left-*` | ✅ | Review | Negative offset utilities |
|
|
139
|
+
| `-right-*` | ✅ | Review | Negative offset utilities |
|
|
136
140
|
|
|
137
141
|
### Magic Classes (review)
|
|
138
142
|
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
```html +demo-folded class="bx"
|
|
6
6
|
<div class="grid gap lg:cols-3 tac">
|
|
7
|
-
<div class="bdr
|
|
7
|
+
<div class="bdr pxy-1">
|
|
8
8
|
<code>static</code><br> Normal flow
|
|
9
9
|
</div>
|
|
10
|
-
<div class="bdr
|
|
10
|
+
<div class="bdr pxy-1 relative">
|
|
11
11
|
<code>relative</code><br> Positioned normally
|
|
12
12
|
</div>
|
|
13
|
-
<div class="bdr
|
|
13
|
+
<div class="bdr pxy-1 sticky top-0">
|
|
14
14
|
<code>sticky</code><br> Sticks on scroll
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
|
|
19
19
|
```html +demo-folded class="bx"
|
|
20
20
|
<div class="grid gap lg:cols-2 tac">
|
|
21
|
-
<div class="bdr
|
|
22
|
-
<div class="absolute top-0 right-0 bdr
|
|
21
|
+
<div class="bdr pxy-1 relative" style="height: 80px;">
|
|
22
|
+
<div class="absolute top-0 right-0 bdr pxy-1">
|
|
23
23
|
<code>absolute</code><br> Fixed to parent
|
|
24
24
|
</div>
|
|
25
25
|
</div>
|
|
26
|
-
<div class="bdr
|
|
26
|
+
<div class="bdr pxy-1 fixed" style="left: 50%; transform: translateX(-50%);">
|
|
27
27
|
<code>fixed</code><br> Fixed to viewport
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
@@ -32,42 +32,54 @@
|
|
|
32
32
|
## Z-Index (review)
|
|
33
33
|
|
|
34
34
|
```html +demo-folded class="bx"
|
|
35
|
-
<div class="grid gap lg:cols-
|
|
36
|
-
<div class="bdr
|
|
37
|
-
<code>z-0</code
|
|
35
|
+
<div class="grid gap lg:cols-4 tac">
|
|
36
|
+
<div class="bdr pxy-1 z-0">
|
|
37
|
+
<code>z-0</code>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="bdr pxy-1 z-above">
|
|
40
|
+
<code>z-above</code>
|
|
38
41
|
</div>
|
|
39
|
-
<div class="bdr
|
|
40
|
-
<code>z-
|
|
42
|
+
<div class="bdr pxy-1 z-high">
|
|
43
|
+
<code>z-high</code>
|
|
41
44
|
</div>
|
|
42
|
-
<div class="bdr
|
|
43
|
-
<code>z-
|
|
45
|
+
<div class="bdr pxy-1 z-highest">
|
|
46
|
+
<code>z-highest</code>
|
|
44
47
|
</div>
|
|
45
48
|
</div>
|
|
46
49
|
```
|
|
47
50
|
|
|
51
|
+
| Class | Value |
|
|
52
|
+
| ----- | ----- |
|
|
53
|
+
| `z-0` | 0 |
|
|
54
|
+
| `z-above` | 10 |
|
|
55
|
+
| `z-high` | 100 |
|
|
56
|
+
| `z-higher` | 200 |
|
|
57
|
+
| `z-highest` | 999 |
|
|
58
|
+
| `z-auto` | auto |
|
|
59
|
+
|
|
48
60
|
## Offset (review)
|
|
49
61
|
|
|
50
|
-
Control distance from edges
|
|
62
|
+
Control distance from edges. Offset utilities set logical properties internally — `top-*` sets `inset-block-start`, `left-*` sets `inset-inline-start`, and so on.
|
|
51
63
|
|
|
52
64
|
```html +demo-folded class="bx"
|
|
53
65
|
<div class="grid gap lg:cols-4 tac">
|
|
54
|
-
<div class="bdr
|
|
55
|
-
<div class="absolute top-0 bdr
|
|
66
|
+
<div class="bdr pxy-1 relative" style="height: 60px;">
|
|
67
|
+
<div class="absolute top-0 bdr pxy-1">
|
|
56
68
|
<code>top-0</code>
|
|
57
69
|
</div>
|
|
58
70
|
</div>
|
|
59
|
-
<div class="bdr
|
|
60
|
-
<div class="absolute bottom-0 bdr
|
|
71
|
+
<div class="bdr pxy-1 relative" style="height: 60px;">
|
|
72
|
+
<div class="absolute bottom-0 bdr pxy-1">
|
|
61
73
|
<code>bottom-0</code>
|
|
62
74
|
</div>
|
|
63
75
|
</div>
|
|
64
|
-
<div class="bdr
|
|
65
|
-
<div class="absolute left-0 bdr
|
|
76
|
+
<div class="bdr pxy-1 relative" style="height: 60px;">
|
|
77
|
+
<div class="absolute left-0 bdr pxy-1">
|
|
66
78
|
<code>left-0</code>
|
|
67
79
|
</div>
|
|
68
80
|
</div>
|
|
69
|
-
<div class="bdr
|
|
70
|
-
<div class="absolute right-0 bdr
|
|
81
|
+
<div class="bdr pxy-1 relative" style="height: 60px;">
|
|
82
|
+
<div class="absolute right-0 bdr pxy-1">
|
|
71
83
|
<code>right-0</code>
|
|
72
84
|
</div>
|
|
73
85
|
</div>
|
|
@@ -77,8 +89,8 @@ Control distance from edges:
|
|
|
77
89
|
### Inset Shorthand (review)
|
|
78
90
|
|
|
79
91
|
```html +demo-folded class="bx"
|
|
80
|
-
<div class="bdr
|
|
81
|
-
<div class="absolute inset-0 bdr
|
|
92
|
+
<div class="bdr pxy-1 relative" style="height: 100px;">
|
|
93
|
+
<div class="absolute inset-0 bdr pxy-1">
|
|
82
94
|
<code>inset-0</code><br> Fills parent
|
|
83
95
|
</div>
|
|
84
96
|
</div>
|
|
@@ -88,16 +100,44 @@ Control distance from edges:
|
|
|
88
100
|
|
|
89
101
|
| Class | Value |
|
|
90
102
|
| ----- | ----- |
|
|
91
|
-
| `*-0` |
|
|
92
|
-
| `*-
|
|
103
|
+
| `*-0` | 0 |
|
|
104
|
+
| `*-025` | 0.25rem |
|
|
105
|
+
| `*-05` | 0.5rem |
|
|
93
106
|
| `*-1` | 1rem |
|
|
107
|
+
| `*-1.5` | 1.5rem |
|
|
94
108
|
| `*-2` | 2rem |
|
|
109
|
+
| `*-3` | 3rem |
|
|
110
|
+
| `*-4` | 4rem |
|
|
95
111
|
| `*-auto` | auto |
|
|
112
|
+
| `*-full` | 100% |
|
|
113
|
+
|
|
114
|
+
## Negative Offset (review)
|
|
115
|
+
|
|
116
|
+
Prefix any offset utility with `-` to pull an element outside its containing boundary. Useful for decorative elements that bleed off a card or panel edge.
|
|
117
|
+
|
|
118
|
+
```html +demo-folded class="bx"
|
|
119
|
+
<div class="relative overflow-hidden bdr" style="height: 80px;">
|
|
120
|
+
<div class="absolute -top-1 -right-1 wh-4 bg-primary opacity-20 rounded-full"></div>
|
|
121
|
+
<p class="pxy-1">Card with bleed decoration</p>
|
|
122
|
+
</div>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Values (review)
|
|
126
|
+
|
|
127
|
+
| Class | Value |
|
|
128
|
+
| ----- | ----- |
|
|
129
|
+
| `*-0.25` | -0.25rem |
|
|
130
|
+
| `*-0.5` | -0.5rem |
|
|
131
|
+
| `*-1` | -1rem |
|
|
132
|
+
| `*-1.5` | -1.5rem |
|
|
133
|
+
| `*-2` | -2rem |
|
|
134
|
+
| `*-3` | -3rem |
|
|
135
|
+
| `*-4` | -4rem |
|
|
96
136
|
|
|
97
137
|
## Responsive (review)
|
|
98
138
|
|
|
99
139
|
```html +demo-folded class="bx"
|
|
100
|
-
<div class="bdr
|
|
140
|
+
<div class="bdr pxy-1">
|
|
101
141
|
<code>md:fixed lg:top-0</code><br>
|
|
102
142
|
Fixed on medium, top on large
|
|
103
143
|
</div>
|