@uncinq/css-components 1.7.8 → 1.7.9

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 (3) hide show
  1. package/css/components/alert.css +4 -1
  2. package/css/components/banner.css +53 -54
  3. package/package.json +1 -1
package/css/components/alert.css CHANGED
@@ -2,6 +2,7 @@
2
2
  @layer components {
3
3
  .alert {
4
4
  --color-link-default: var(--alert-color-text);
5
+ align-items: var(--alert-align);
5
6
  background-color: var(--alert-color-background);
6
7
  border: var(--alert-border-width) var(--alert-border-style) var(--alert-color-border);
7
8
  border-radius: var(--alert-border-radius);
@@ -11,7 +12,9 @@
11
12
  font-size: var(--alert-font-size);
12
13
  gap: var(--alert-gap);
13
14
  margin: var(--alert-margin);
14
- padding: var(--alert-padding);
15
+ padding-block: var(--alert-padding-block);
16
+ padding-inline: var(--alert-padding-inline);
17
+ text-align: var(--alert-align);
15
18
 
16
19
  > * {
17
20
  margin: 0;
package/css/components/banner.css CHANGED
@@ -1,62 +1,61 @@
1
1
  /* components/banner.css */
2
2
  @layer components {
3
3
  .banner {
4
- --color-link: var(--alert-color-text);
5
- background-color: var(--alert-color-background);
6
- border-radius: var(--alert-border-radius);
7
- color: var(--alert-color-text);
8
- display: flex;
9
- flex-direction: column;
10
- font-size: var(--alert-font-size);
11
- gap: var(--alert-gap);
12
- padding: var(--alert-padding);
13
- padding-inline: 0;
14
- text-align: center;
15
-
4
+ --alert-align: center;
5
+
16
6
  p {
17
- margin: 0 auto;
7
+ margin-block: 0;
18
8
  }
19
- }
20
9
 
21
- /* Variants */
22
- .banner-brand {
23
- --alert-color-background: var(--color-brand-muted);
24
- --alert-color-text: var(--color-brand-strong);
25
- }
26
- .banner-danger {
27
- --alert-color-background: var(--color-danger-muted);
28
- --alert-color-text: var(--color-danger-strong);
29
- }
30
- .banner-dark {
31
- --alert-color-background: var(--color-dark-muted);
32
- --alert-color-text: var(--color-dark-strong);
33
- }
34
- .banner-info {
35
- --alert-color-background: var(--color-info-muted);
36
- --alert-color-text: var(--color-info-strong);
37
- }
38
- .banner-light {
39
- --alert-color-background: var(--color-light-muted);
40
- --alert-color-text: var(--color-light-strong);
41
- }
42
- .banner-neutral {
43
- --alert-color-background: var(--color-neutral-muted);
44
- --alert-color-text: var(--color-neutral-strong);
45
- }
46
- .banner-primary {
47
- --alert-color-background: var(--color-brand-muted);
48
- --alert-color-text: var(--color-brand-strong);
49
- }
50
- .banner-secondary {
51
- --alert-color-background: var(--color-neutral-muted);
52
- --alert-color-text: var(--color-neutral-strong);
53
- }
54
- .banner-success {
55
- --alert-color-background: var(--color-success-muted);
56
- --alert-color-text: var(--color-success-strong);
57
- }
58
- .banner-warning {
59
- --alert-color-background: var(--color-warning-muted);
60
- --alert-color-text: var(--color-warning-strong);
10
+ /* Variants */
11
+ .alert-accent {
12
+ --alert-color-background: var(--color-accent-strong);
13
+ --alert-color-text: var(--color-accent-muted);
14
+ }
15
+ .alert-brand {
16
+ --alert-color-background: var(--color-brand-strong);
17
+ --alert-color-text: var(--color-brand-muted);
18
+ }
19
+ .alert-danger {
20
+ --alert-color-background: var(--color-danger-strong);
21
+ --alert-color-text: var(--color-danger-muted);
22
+ }
23
+ .alert-dark {
24
+ --alert-color-background: var(--color-dark-strong);
25
+ --alert-color-text: var(--color-dark-muted);
26
+ }
27
+ .alert-info {
28
+ --alert-color-background: var(--color-info-strong);
29
+ --alert-color-text: var(--color-info-muted);
30
+ }
31
+ .alert-highlight {
32
+ --alert-color-background: var(--color-highlight-muted);
33
+ --alert-color-text: var(--color-highlight-strong);
34
+ }
35
+ .alert-light {
36
+ --alert-color-background: var(--color-light-muted);
37
+ --alert-color-text: var(--color-light-strong);
38
+ }
39
+ .alert-neutral {
40
+ --alert-color-background: var(--color-neutral-strong);
41
+ --alert-color-text: var(--color-neutral-muted);
42
+ }
43
+ .alert-primary {
44
+ --alert-color-background: var(--color-brand-strong);
45
+ --alert-color-text: var(--color-brand-muted);
46
+ }
47
+ .alert-secondary {
48
+ --alert-color-background: var(--color-neutral-strong);
49
+ --alert-color-text: var(--color-neutral-muted);
50
+ }
51
+ .alert-success {
52
+ --alert-color-background: var(--color-success-strong);
53
+ --alert-color-text: var(--color-success-muted);
54
+ }
55
+ .alert-warning {
56
+ --alert-color-background: var(--color-warning-strong);
57
+ --alert-color-text: var(--color-warning-muted);
58
+ }
61
59
  }
60
+
62
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "1.7.8",
3
+ "version": "1.7.9",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {