@uncinq/css-components 1.5.2 → 1.5.4

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/alert.css +12 -4
  2. package/css/components/badge.css +16 -6
  3. package/css/components/banner.css +12 -4
  4. package/css/components/breadcrumb.css +1 -0
  5. package/css/components/button.css +21 -5
  6. package/package.json +1 -1
package/css/components/alert.css CHANGED
@@ -32,6 +32,10 @@
32
32
  }
33
33
 
34
34
  /* Variants */
35
+ .alert-brand {
36
+ --alert-color-background: var(--color-brand-muted);
37
+ --alert-color-text: var(--color-brand-strong);
38
+ }
35
39
  .alert-danger {
36
40
  --alert-color-background: var(--color-danger-muted);
37
41
  --alert-color-text: var(--color-danger-strong);
@@ -48,13 +52,17 @@
48
52
  --alert-color-background: var(--color-light-muted);
49
53
  --alert-color-text: var(--color-light-strong);
50
54
  }
55
+ .alert-neutral {
56
+ --alert-color-background: var(--color-neutral-muted);
57
+ --alert-color-text: var(--color-neutral-strong);
58
+ }
51
59
  .alert-primary {
52
- --alert-color-background: var(--color-primary-muted);
53
- --alert-color-text: var(--color-primary-strong);
60
+ --alert-color-background: var(--color-brand-muted);
61
+ --alert-color-text: var(--color-brand-strong);
54
62
  }
55
63
  .alert-secondary {
56
- --alert-color-background: var(--color-secondary-muted);
57
- --alert-color-text: var(--color-secondary-strong);
64
+ --alert-color-background: var(--color-neutral-muted);
65
+ --alert-color-text: var(--color-neutral-strong);
58
66
  }
59
67
  .alert-success {
60
68
  --alert-color-background: var(--color-success-muted);
package/css/components/badge.css CHANGED
@@ -21,6 +21,11 @@
21
21
  }
22
22
 
23
23
  /* Variants */
24
+ .badge-brand {
25
+ --badge-color-background: var(--color-brand);
26
+ --badge-color-background-hover: var(--color-brand-strong);
27
+ --badge-color-text: var(--color-text-on-brand);
28
+ }
24
29
  .badge-danger {
25
30
  --badge-color-background: var(--color-danger);
26
31
  --badge-color-background-hover: var(--color-danger-strong);
@@ -41,15 +46,20 @@
41
46
  --badge-color-background-hover: var(--color-light-strong);
42
47
  --badge-color-text: var(--color-text-on-light);
43
48
  }
49
+ .badge-neutral {
50
+ --badge-color-background: var(--color-neutral);
51
+ --badge-color-background-hover: var(--color-neutral-strong);
52
+ --badge-color-text: var(--color-text-on-neutral);
53
+ }
44
54
  .badge-primary {
45
- --badge-color-background: var(--color-primary);
46
- --badge-color-background-hover: var(--color-primary-strong);
47
- --badge-color-text: var(--color-text-on-primary);
55
+ --badge-color-background: var(--color-brand);
56
+ --badge-color-background-hover: var(--color-brand-strong);
57
+ --badge-color-text: var(--color-text-on-brand);
48
58
  }
49
59
  .badge-secondary {
50
- --badge-color-background: var(--color-secondary);
51
- --badge-color-background-hover: var(--color-secondary-strong);
52
- --badge-color-text: var(--color-text-on-secondary);
60
+ --badge-color-background: var(--color-neutral);
61
+ --badge-color-background-hover: var(--color-neutral-strong);
62
+ --badge-color-text: var(--color-text-on-neutral);
53
63
  }
54
64
  .badge-success {
55
65
  --badge-color-background: var(--color-success);
package/css/components/banner.css CHANGED
@@ -19,6 +19,10 @@
19
19
  }
20
20
 
21
21
  /* Variants */
22
+ .banner-brand {
23
+ --alert-color-background: var(--color-brand-muted);
24
+ --alert-color-text: var(--color-brand-strong);
25
+ }
22
26
  .banner-danger {
23
27
  --alert-color-background: var(--color-danger-muted);
24
28
  --alert-color-text: var(--color-danger-strong);
@@ -35,13 +39,17 @@
35
39
  --alert-color-background: var(--color-light-muted);
36
40
  --alert-color-text: var(--color-light-strong);
37
41
  }
42
+ .banner-neutral {
43
+ --alert-color-background: var(--color-neutral-muted);
44
+ --alert-color-text: var(--color-neutral-strong);
45
+ }
38
46
  .banner-primary {
39
- --alert-color-background: var(--color-primary-muted);
40
- --alert-color-text: var(--color-primary-strong);
47
+ --alert-color-background: var(--color-brand-muted);
48
+ --alert-color-text: var(--color-brand-strong);
41
49
  }
42
50
  .banner-secondary {
43
- --alert-color-background: var(--color-secondary-muted);
44
- --alert-color-text: var(--color-secondary-strong);
51
+ --alert-color-background: var(--color-neutral-muted);
52
+ --alert-color-text: var(--color-neutral-strong);
45
53
  }
46
54
  .banner-success {
47
55
  --alert-color-background: var(--color-success-muted);
package/css/components/breadcrumb.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* components/breadcrumb.css */
2
2
  @layer components {
3
3
  .breadcrumb-wrapper {
4
+ background: var(--breadcrumb-color-background);
4
5
  border-block: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
5
6
  overflow-x: auto;
6
7
  padding-block: var(--breadcrumb-padding-block);
package/css/components/button.css CHANGED
@@ -50,6 +50,14 @@
50
50
  }
51
51
 
52
52
  /* Variants */
53
+ .btn-brand {
54
+ --btn-color-background: var(--color-brand);
55
+ --btn-color-background-hover: var(--color-brand-strong);
56
+ --btn-color-border: var(--color-brand);
57
+ --btn-color-border-hover: var(--color-brand-strong);
58
+ --btn-color-text: var(--color-text-on-brand);
59
+ }
60
+
53
61
  .btn-control {
54
62
  --btn-color-background: var(--btn-control-color-background);
55
63
  --btn-color-background-hover: var(--btn-control-color-background-hover);
@@ -116,6 +124,14 @@
116
124
  }
117
125
  }
118
126
 
127
+ .btn-neutral {
128
+ --btn-color-background: var(--color-neutral);
129
+ --btn-color-background-hover: var(--color-neutral-strong);
130
+ --btn-color-border: var(--color-neutral);
131
+ --btn-color-border-hover: var(--color-neutral-strong);
132
+ --btn-color-text: var(--color-text-on-neutral);
133
+ }
134
+
119
135
  .btn-primary {
120
136
  --btn-color-background: var(--color-brand);
121
137
  --btn-color-background-hover: var(--color-brand-strong);
@@ -125,11 +141,11 @@
125
141
  }
126
142
 
127
143
  .btn-secondary {
128
- --btn-color-background: var(--color-secondary);
129
- --btn-color-background-hover: var(--color-secondary-strong);
130
- --btn-color-border: var(--color-secondary);
131
- --btn-color-border-hover: var(--color-secondary-strong);
132
- --btn-color-text: var(--color-text-on-secondary);
144
+ --btn-color-background: var(--color-neutral);
145
+ --btn-color-background-hover: var(--color-neutral-strong);
146
+ --btn-color-border: var(--color-neutral);
147
+ --btn-color-border-hover: var(--color-neutral-strong);
148
+ --btn-color-text: var(--color-text-on-neutral);
133
149
  }
134
150
 
135
151
  .btn-success {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "1.5.2",
3
+ "version": "1.5.4",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {