@uncinq/css-components 1.11.3 → 1.13.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.
- package/README.md +9 -5
- package/css/components/alert.css +1 -43
- package/css/index.css +3 -0
- package/css/utilities/scrollsnap.css +121 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ Each component file contains only CSS rules, using the tokens defined in the two
|
|
|
21
21
|
|
|
22
22
|
## CSS cascade layers
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
Component styles are declared inside `@layer components`, utilities inside `@layer utilities`:
|
|
25
25
|
|
|
26
26
|
```css
|
|
27
27
|
@layer reset, tokens, vendors, base, layouts, components, pages, utilities;
|
|
@@ -32,6 +32,7 @@ This means:
|
|
|
32
32
|
- Components never bleed into base or layout styles
|
|
33
33
|
- Project-level `@layer components` rules always win over these defaults
|
|
34
34
|
- Vendors (e.g. Splide) sit below project components but above base
|
|
35
|
+
- Utilities come last, so `.scrollsnap` wins over the grid a component declares for itself
|
|
35
36
|
|
|
36
37
|
---
|
|
37
38
|
|
|
@@ -77,8 +78,9 @@ yarn add @uncinq/css-components
|
|
|
77
78
|
@import '@uncinq/design-tokens';
|
|
78
79
|
@import '@uncinq/component-tokens';
|
|
79
80
|
@import '@uncinq/css-base';
|
|
80
|
-
@import '@uncinq/css-components/css/
|
|
81
|
-
@import '@uncinq/css-components/css/
|
|
81
|
+
@import '@uncinq/css-components/css/components/nav.css';
|
|
82
|
+
@import '@uncinq/css-components/css/components/pagination.css';
|
|
83
|
+
@import '@uncinq/css-components/css/utilities/scrollsnap.css';
|
|
82
84
|
```
|
|
83
85
|
|
|
84
86
|
### Usage — CDN (no build step)
|
|
@@ -96,8 +98,8 @@ yarn add @uncinq/css-components
|
|
|
96
98
|
|
|
97
99
|
```text
|
|
98
100
|
css/
|
|
99
|
-
index.css ← imports all component files
|
|
100
|
-
|
|
101
|
+
index.css ← imports all component and utility files
|
|
102
|
+
components/
|
|
101
103
|
alert.css ← alert / notification banner
|
|
102
104
|
badge.css ← badge / pill / tag
|
|
103
105
|
banner.css ← full-width banner strip
|
|
@@ -115,6 +117,8 @@ css/
|
|
|
115
117
|
nav-accessibility.css ← accessibility skip links / focus helpers
|
|
116
118
|
nav-title.css ← navigation bar title
|
|
117
119
|
pagination.css ← pagination control
|
|
120
|
+
utilities/
|
|
121
|
+
scrollsnap.css ← .scrollsnap[-sm|-md|-lg|-xl] — turns a grid into a snapping carousel
|
|
118
122
|
```
|
|
119
123
|
|
|
120
124
|
---
|
package/css/components/alert.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* components/alert.css */
|
|
2
2
|
@layer components {
|
|
3
3
|
.alert {
|
|
4
|
-
--color-link
|
|
4
|
+
--color-link: var(--alert-color-text);
|
|
5
5
|
background-color: var(--alert-color-background);
|
|
6
6
|
border: var(--alert-border-width) var(--alert-border-style) var(--alert-color-border);
|
|
7
7
|
border-radius: var(--alert-border-radius);
|
|
@@ -33,46 +33,4 @@
|
|
|
33
33
|
align-items: flex-start;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
/* Variants */
|
|
38
|
-
.alert-brand {
|
|
39
|
-
--alert-color-background: var(--color-brand-muted);
|
|
40
|
-
--alert-color-text: var(--color-brand-strong);
|
|
41
|
-
}
|
|
42
|
-
.alert-danger {
|
|
43
|
-
--alert-color-background: var(--color-danger-muted);
|
|
44
|
-
--alert-color-text: var(--color-danger-strong);
|
|
45
|
-
}
|
|
46
|
-
.alert-dark {
|
|
47
|
-
--alert-color-background: var(--color-dark-muted);
|
|
48
|
-
--alert-color-text: var(--color-dark-strong);
|
|
49
|
-
}
|
|
50
|
-
.alert-info {
|
|
51
|
-
--alert-color-background: var(--color-info-muted);
|
|
52
|
-
--alert-color-text: var(--color-info-strong);
|
|
53
|
-
}
|
|
54
|
-
.alert-light {
|
|
55
|
-
--alert-color-background: var(--color-light-muted);
|
|
56
|
-
--alert-color-text: var(--color-light-strong);
|
|
57
|
-
}
|
|
58
|
-
.alert-neutral {
|
|
59
|
-
--alert-color-background: var(--color-neutral-muted);
|
|
60
|
-
--alert-color-text: var(--color-neutral-strong);
|
|
61
|
-
}
|
|
62
|
-
.alert-primary {
|
|
63
|
-
--alert-color-background: var(--color-brand-muted);
|
|
64
|
-
--alert-color-text: var(--color-brand-strong);
|
|
65
|
-
}
|
|
66
|
-
.alert-secondary {
|
|
67
|
-
--alert-color-background: var(--color-neutral-muted);
|
|
68
|
-
--alert-color-text: var(--color-neutral-strong);
|
|
69
|
-
}
|
|
70
|
-
.alert-success {
|
|
71
|
-
--alert-color-background: var(--color-success-muted);
|
|
72
|
-
--alert-color-text: var(--color-success-strong);
|
|
73
|
-
}
|
|
74
|
-
.alert-warning {
|
|
75
|
-
--alert-color-background: var(--color-warning-muted);
|
|
76
|
-
--alert-color-text: var(--color-warning-strong);
|
|
77
|
-
}
|
|
78
36
|
}
|
package/css/index.css
CHANGED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/* css/utilities/scrollsnap.css */
|
|
2
|
+
/*
|
|
3
|
+
* .scrollsnap — turns a grid into a horizontal carousel with snap points:
|
|
4
|
+
* items keep their own width, the grid stops wrapping, and the row scrolls,
|
|
5
|
+
* bleeding into the gutter so the next one peeks in.
|
|
6
|
+
*
|
|
7
|
+
* .scrollsnap carousel at every width
|
|
8
|
+
* .scrollsnap-sm carousel below --sm (mobile)
|
|
9
|
+
* .scrollsnap-md carousel below --md (mobile + tablet)
|
|
10
|
+
* .scrollsnap-lg carousel below --lg
|
|
11
|
+
* .scrollsnap-xl carousel below --xl
|
|
12
|
+
*
|
|
13
|
+
* The suffix names the rung where the carousel STOPS and the grid comes back.
|
|
14
|
+
*
|
|
15
|
+
* Opt-in, on the element that owns the grid (.items, .logos…), so the same
|
|
16
|
+
* component is a carousel in one context and a plain grid in another.
|
|
17
|
+
*
|
|
18
|
+
* A utility rather than a component rule because it has to win over the grid
|
|
19
|
+
* the component declares for itself in @layer components.
|
|
20
|
+
*
|
|
21
|
+
* Item width: --items-min-width (or --max-width-item), capped by
|
|
22
|
+
* --items-carousel-max-width so the next item always peeks in.
|
|
23
|
+
*
|
|
24
|
+
* Bleed: --container-bleed, published by .container in @uncinq/css-base — one
|
|
25
|
+
* gutter while the container spans the viewport, 0 once it caps, so the row
|
|
26
|
+
* never pulls out into dead space it cannot cross. Outside a .container the
|
|
27
|
+
* fallback keeps the gutter bleed.
|
|
28
|
+
*/
|
|
29
|
+
@layer utilities {
|
|
30
|
+
.scrollsnap,
|
|
31
|
+
.scrollsnap-sm,
|
|
32
|
+
.scrollsnap-md,
|
|
33
|
+
.scrollsnap-lg,
|
|
34
|
+
.scrollsnap-xl {
|
|
35
|
+
grid-auto-columns: min(var(--items-min-width, var(--max-width-item)), var(--items-carousel-max-width, 75vw));
|
|
36
|
+
grid-auto-flow: column;
|
|
37
|
+
grid-template-columns: none;
|
|
38
|
+
justify-content: start;
|
|
39
|
+
margin-inline: calc(var(--container-bleed, var(--gutter)) * -1);
|
|
40
|
+
overflow-x: auto;
|
|
41
|
+
padding-inline: var(--container-bleed, var(--gutter));
|
|
42
|
+
scroll-snap-type: x mandatory;
|
|
43
|
+
|
|
44
|
+
> * {
|
|
45
|
+
scroll-margin-inline: var(--container-bleed, var(--gutter));
|
|
46
|
+
scroll-snap-align: start;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Above its rung a variant hands every property back to the layer below —
|
|
51
|
+
the component's own grid rules — so there is no second set of values here
|
|
52
|
+
to keep in step with the block above. */
|
|
53
|
+
@media (--sm) {
|
|
54
|
+
.scrollsnap-sm {
|
|
55
|
+
grid-auto-columns: revert-layer;
|
|
56
|
+
grid-auto-flow: revert-layer;
|
|
57
|
+
grid-template-columns: revert-layer;
|
|
58
|
+
justify-content: revert-layer;
|
|
59
|
+
margin-inline: revert-layer;
|
|
60
|
+
overflow-x: revert-layer;
|
|
61
|
+
padding-inline: revert-layer;
|
|
62
|
+
scroll-snap-type: revert-layer;
|
|
63
|
+
|
|
64
|
+
> * {
|
|
65
|
+
scroll-margin-inline: revert-layer;
|
|
66
|
+
scroll-snap-align: revert-layer;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
@media (--md) {
|
|
71
|
+
.scrollsnap-md {
|
|
72
|
+
grid-auto-columns: revert-layer;
|
|
73
|
+
grid-auto-flow: revert-layer;
|
|
74
|
+
grid-template-columns: revert-layer;
|
|
75
|
+
justify-content: revert-layer;
|
|
76
|
+
margin-inline: revert-layer;
|
|
77
|
+
overflow-x: revert-layer;
|
|
78
|
+
padding-inline: revert-layer;
|
|
79
|
+
scroll-snap-type: revert-layer;
|
|
80
|
+
|
|
81
|
+
> * {
|
|
82
|
+
scroll-margin-inline: revert-layer;
|
|
83
|
+
scroll-snap-align: revert-layer;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
@media (--lg) {
|
|
88
|
+
.scrollsnap-lg {
|
|
89
|
+
grid-auto-columns: revert-layer;
|
|
90
|
+
grid-auto-flow: revert-layer;
|
|
91
|
+
grid-template-columns: revert-layer;
|
|
92
|
+
justify-content: revert-layer;
|
|
93
|
+
margin-inline: revert-layer;
|
|
94
|
+
overflow-x: revert-layer;
|
|
95
|
+
padding-inline: revert-layer;
|
|
96
|
+
scroll-snap-type: revert-layer;
|
|
97
|
+
|
|
98
|
+
> * {
|
|
99
|
+
scroll-margin-inline: revert-layer;
|
|
100
|
+
scroll-snap-align: revert-layer;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
@media (--xl) {
|
|
105
|
+
.scrollsnap-xl {
|
|
106
|
+
grid-auto-columns: revert-layer;
|
|
107
|
+
grid-auto-flow: revert-layer;
|
|
108
|
+
grid-template-columns: revert-layer;
|
|
109
|
+
justify-content: revert-layer;
|
|
110
|
+
margin-inline: revert-layer;
|
|
111
|
+
overflow-x: revert-layer;
|
|
112
|
+
padding-inline: revert-layer;
|
|
113
|
+
scroll-snap-type: revert-layer;
|
|
114
|
+
|
|
115
|
+
> * {
|
|
116
|
+
scroll-margin-inline: revert-layer;
|
|
117
|
+
scroll-snap-align: revert-layer;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uncinq/css-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "Framework-agnostic CSS component implementations.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"exports": {
|
|
25
25
|
".": "./css/index.css",
|
|
26
26
|
"./css/index.css": "./css/index.css",
|
|
27
|
-
"./css/components/*": "./css/components/*"
|
|
27
|
+
"./css/components/*": "./css/components/*",
|
|
28
|
+
"./css/utilities/*": "./css/utilities/*"
|
|
28
29
|
},
|
|
29
30
|
"style": "./css/index.css",
|
|
30
31
|
"peerDependencies": {
|