@uncinq/css-components 1.16.5 → 1.17.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 (6) hide show
  1. package/css/components/badge.css +10 -10
  2. package/css/components/button.css +20 -20
  3. package/css/components/video.css +1 -0
  4. package/docs/buttons/btn.md +2 -2
  5. package/docs/embeds/video.md +1 -1
  6. package/package.json +1 -1
package/css/components/badge.css CHANGED
@@ -25,52 +25,52 @@
25
25
  /* Variants */
26
26
  .badge-brand {
27
27
  --badge-color-background: var(--color-brand);
28
- --badge-color-background-hover: var(--color-brand-strong);
28
+ --badge-color-background-hover: var(--color-brand-hover);
29
29
  --badge-color-text: var(--color-text-on-brand);
30
30
  }
31
31
  .badge-danger {
32
32
  --badge-color-background: var(--color-danger);
33
- --badge-color-background-hover: var(--color-danger-strong);
33
+ --badge-color-background-hover: var(--color-danger-hover);
34
34
  --badge-color-text: var(--color-text-on-danger);
35
35
  }
36
36
  .badge-dark {
37
37
  --badge-color-background: var(--color-dark);
38
- --badge-color-background-hover: var(--color-dark-strong);
38
+ --badge-color-background-hover: var(--color-dark-hover);
39
39
  --badge-color-text: var(--color-text-on-dark);
40
40
  }
41
41
  .badge-info {
42
42
  --badge-color-background: var(--color-info);
43
- --badge-color-background-hover: var(--color-info-strong);
43
+ --badge-color-background-hover: var(--color-info-hover);
44
44
  --badge-color-text: var(--color-text-on-info);
45
45
  }
46
46
  .badge-light {
47
47
  --badge-color-background: var(--color-light);
48
- --badge-color-background-hover: var(--color-light-strong);
48
+ --badge-color-background-hover: var(--color-light-hover);
49
49
  --badge-color-text: var(--color-text-on-light);
50
50
  }
51
51
  .badge-neutral {
52
52
  --badge-color-background: var(--color-neutral);
53
- --badge-color-background-hover: var(--color-neutral-strong);
53
+ --badge-color-background-hover: var(--color-neutral-hover);
54
54
  --badge-color-text: var(--color-text-on-neutral);
55
55
  }
56
56
  .badge-primary {
57
57
  --badge-color-background: var(--color-brand);
58
- --badge-color-background-hover: var(--color-brand-strong);
58
+ --badge-color-background-hover: var(--color-brand-hover);
59
59
  --badge-color-text: var(--color-text-on-brand);
60
60
  }
61
61
  .badge-secondary {
62
62
  --badge-color-background: var(--color-neutral);
63
- --badge-color-background-hover: var(--color-neutral-strong);
63
+ --badge-color-background-hover: var(--color-neutral-hover);
64
64
  --badge-color-text: var(--color-text-on-neutral);
65
65
  }
66
66
  .badge-success {
67
67
  --badge-color-background: var(--color-success);
68
- --badge-color-background-hover: var(--color-success-strong);
68
+ --badge-color-background-hover: var(--color-success-hover);
69
69
  --badge-color-text: var(--color-text-on-success);
70
70
  }
71
71
  .badge-warning {
72
72
  --badge-color-background: var(--color-warning);
73
- --badge-color-background-hover: var(--color-warning-strong);
73
+ --badge-color-background-hover: var(--color-warning-hover);
74
74
  --badge-color-text: var(--color-text-on-warning);
75
75
  }
76
76
  }
package/css/components/button.css CHANGED
@@ -55,9 +55,9 @@
55
55
  /* Variants */
56
56
  .btn-brand {
57
57
  --btn-color-background: var(--color-brand);
58
- --btn-color-background-hover: var(--color-brand-strong);
58
+ --btn-color-background-hover: var(--color-brand-hover);
59
59
  --btn-color-border: var(--color-brand);
60
- --btn-color-border-hover: var(--color-brand-strong);
60
+ --btn-color-border-hover: var(--color-brand-hover);
61
61
  --btn-color-text: var(--color-text-on-brand);
62
62
  }
63
63
 
@@ -72,17 +72,17 @@
72
72
 
73
73
  .btn-danger {
74
74
  --btn-color-background: var(--color-danger);
75
- --btn-color-background-hover: var(--color-danger-strong);
75
+ --btn-color-background-hover: var(--color-danger-hover);
76
76
  --btn-color-border: var(--color-danger);
77
- --btn-color-border-hover: var(--color-danger-strong);
77
+ --btn-color-border-hover: var(--color-danger-hover);
78
78
  --btn-color-text: var(--color-text-on-danger);
79
79
  }
80
80
 
81
81
  .btn-dark {
82
82
  --btn-color-background: var(--color-dark);
83
- --btn-color-background-hover: var(--color-dark-strong);
83
+ --btn-color-background-hover: var(--color-dark-hover);
84
84
  --btn-color-border: var(--color-dark);
85
- --btn-color-border-hover: var(--color-dark-strong);
85
+ --btn-color-border-hover: var(--color-dark-hover);
86
86
  --btn-color-text: var(--color-text-on-dark);
87
87
  }
88
88
 
@@ -97,17 +97,17 @@
97
97
 
98
98
  .btn-info {
99
99
  --btn-color-background: var(--color-info);
100
- --btn-color-background-hover: var(--color-info-strong);
100
+ --btn-color-background-hover: var(--color-info-hover);
101
101
  --btn-color-border: var(--color-info);
102
- --btn-color-border-hover: var(--color-info-strong);
102
+ --btn-color-border-hover: var(--color-info-hover);
103
103
  --btn-color-text: var(--color-text-on-info);
104
104
  }
105
105
 
106
106
  .btn-light {
107
107
  --btn-color-background: var(--color-light);
108
- --btn-color-background-hover: var(--color-light-strong);
108
+ --btn-color-background-hover: var(--color-light-hover);
109
109
  --btn-color-border: var(--color-light);
110
- --btn-color-border-hover: var(--color-light-strong);
110
+ --btn-color-border-hover: var(--color-light-hover);
111
111
  --btn-color-text: var(--color-text-on-light);
112
112
  }
113
113
 
@@ -129,41 +129,41 @@
129
129
 
130
130
  .btn-neutral {
131
131
  --btn-color-background: var(--color-neutral);
132
- --btn-color-background-hover: var(--color-neutral-strong);
132
+ --btn-color-background-hover: var(--color-neutral-hover);
133
133
  --btn-color-border: var(--color-neutral);
134
- --btn-color-border-hover: var(--color-neutral-strong);
134
+ --btn-color-border-hover: var(--color-neutral-hover);
135
135
  --btn-color-text: var(--color-text-on-neutral);
136
136
  }
137
137
 
138
138
  .btn-primary {
139
139
  --btn-color-background: var(--color-brand);
140
- --btn-color-background-hover: var(--color-brand-strong);
140
+ --btn-color-background-hover: var(--color-brand-hover);
141
141
  --btn-color-border: var(--color-brand);
142
- --btn-color-border-hover: var(--color-brand-strong);
142
+ --btn-color-border-hover: var(--color-brand-hover);
143
143
  --btn-color-text: var(--color-text-on-brand);
144
144
  }
145
145
 
146
146
  .btn-secondary {
147
147
  --btn-color-background: var(--color-neutral);
148
- --btn-color-background-hover: var(--color-neutral-strong);
148
+ --btn-color-background-hover: var(--color-neutral-hover);
149
149
  --btn-color-border: var(--color-neutral);
150
- --btn-color-border-hover: var(--color-neutral-strong);
150
+ --btn-color-border-hover: var(--color-neutral-hover);
151
151
  --btn-color-text: var(--color-text-on-neutral);
152
152
  }
153
153
 
154
154
  .btn-success {
155
155
  --btn-color-background: var(--color-success);
156
- --btn-color-background-hover: var(--color-success-strong);
156
+ --btn-color-background-hover: var(--color-success-hover);
157
157
  --btn-color-border: var(--color-success);
158
- --btn-color-border-hover: var(--color-success-strong);
158
+ --btn-color-border-hover: var(--color-success-hover);
159
159
  --btn-color-text: var(--color-text-on-success);
160
160
  }
161
161
 
162
162
  .btn-warning {
163
163
  --btn-color-background: var(--color-warning);
164
- --btn-color-background-hover: var(--color-warning-strong);
164
+ --btn-color-background-hover: var(--color-warning-hover);
165
165
  --btn-color-border: var(--color-warning);
166
- --btn-color-border-hover: var(--color-warning-strong);
166
+ --btn-color-border-hover: var(--color-warning-hover);
167
167
  --btn-color-text: var(--color-text-on-warning);
168
168
  }
169
169
 
package/css/components/video.css CHANGED
@@ -15,6 +15,7 @@
15
15
 
16
16
  video {
17
17
  aspect-ratio: var(--video-ratio, var(--ratio-video));
18
+ object-fit: var(--video-fit, contain);
18
19
  width: 100%;
19
20
  }
20
21
 
package/docs/buttons/btn.md CHANGED
@@ -35,9 +35,9 @@ Each sets four properties together: background, border, their hover values, and
35
35
  ```css
36
36
  .btn-danger {
37
37
  --btn-color-background: var(--color-danger);
38
- --btn-color-background-hover: var(--color-danger-strong);
38
+ --btn-color-background-hover: var(--color-danger-hover);
39
39
  --btn-color-border: var(--color-danger);
40
- --btn-color-border-hover: var(--color-danger-strong);
40
+ --btn-color-border-hover: var(--color-danger-hover);
41
41
  --btn-color-text: var(--color-text-on-danger);
42
42
  }
43
43
  ```
package/docs/embeds/video.md CHANGED
@@ -26,7 +26,7 @@ Three things:
26
26
  .video {
27
27
  position: relative;
28
28
 
29
- video { aspect-ratio: var(--video-ratio, var(--ratio-video)); width: 100%; }
29
+ video { aspect-ratio: var(--video-ratio, var(--ratio-video)); object-fit: var(--video-fit, contain); width: 100%; }
30
30
 
31
31
  .btn-toggle-video { position: absolute; inset-block-end: 0; inset-inline-end: 0; z-index: 10; }
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "1.16.5",
3
+ "version": "1.17.0",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {