@byline/ui 3.4.0 → 3.5.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 (3) hide show
  1. package/dist/components/notifications/alert_module.css +27 -18
  2. package/package.json +2 -2
  3. package/src/components/notifications/alert.module.css +32 -18
package/dist/components/notifications/alert_module.css CHANGED
@@ -1,12 +1,14 @@
1
1
  @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
2
2
 
3
3
  @layer byline-components {
4
- :is(.alert-dXimWG, .byline-alert) {
4
+ :is(.alert-dXimWG, .infonomic-alert) {
5
5
  align-items: start;
6
6
  gap: var(--gap-2);
7
7
  border-radius: var(--border-radius-md);
8
8
  border: 1px solid var(--alert-border);
9
- background-color: var(--alert-background);
9
+ --alert-background-opacity: .5;
10
+ background-color: oklch(from var(--alert-background) l c h /
11
+ calc(alpha * var(--alert-background-opacity)));
10
12
  width: 100%;
11
13
  color: var(--foreground);
12
14
  margin-bottom: 1rem;
@@ -17,13 +19,13 @@
17
19
  display: flex;
18
20
  }
19
21
 
20
- :is(.alert-with-title-SylcSu, .byline-alert-with-title) {
22
+ :is(.alert-with-title-SylcSu, .infonomic-alert-with-title) {
21
23
  flex-direction: column;
22
24
  width: 100%;
23
25
  display: flex;
24
26
  }
25
27
 
26
- :is(.icon-RcHAGq, .byline-alert-icon) {
28
+ :is(.icon-RcHAGq, .infonomic-alert-icon) {
27
29
  justify-content: center;
28
30
  align-items: center;
29
31
  width: 24px;
@@ -33,7 +35,7 @@
33
35
  display: flex;
34
36
  }
35
37
 
36
- :is(.close-BUVZO7, .byline-alert-close) {
38
+ :is(.close-BUVZO7, .infonomic-alert-close) {
37
39
  border-radius: 100%;
38
40
  justify-content: center;
39
41
  align-items: center;
@@ -47,12 +49,12 @@
47
49
  display: flex;
48
50
  }
49
51
 
50
- :is(.fade-VGuhOJ, .byline-alert-fade) {
52
+ :is(.fade-VGuhOJ, .infonomic-alert-fade) {
51
53
  opacity: 0;
52
54
  transition: opacity .4s ease-in-out;
53
55
  }
54
56
 
55
- :is(.header-y_AKgG, .byline-alert-header) {
57
+ :is(.header-y_AKgG, .infonomic-alert-header) {
56
58
  width: 100%;
57
59
  margin-bottom: var(--spacing-8);
58
60
  align-items: start;
@@ -60,7 +62,7 @@
60
62
  display: flex;
61
63
  }
62
64
 
63
- :is(.title-M6aCqW, .byline-alert-title) {
65
+ :is(.title-M6aCqW, .infonomic-alert-title) {
64
66
  padding-top: 1px;
65
67
  font-size: 1.2rem;
66
68
  font-weight: bold;
@@ -68,50 +70,57 @@
68
70
  display: flex;
69
71
  }
70
72
 
71
- :is(.content-oyoXMS, .byline-alert-content) {
72
- font-size: var(--font-size-sm);
73
+ :is(.content-oyoXMS, .infonomic-alert-content) {
73
74
  padding-top: 1px;
75
+ font-size: 1.1rem;
76
+ }
77
+
78
+ @media (min-width: 40rem) {
79
+ :is(.content-oyoXMS, .infonomic-alert-content) {
80
+ padding-top: 1px;
81
+ font-size: 1rem;
82
+ }
74
83
  }
75
84
 
76
85
  .content-oyoXMS:first-child {
77
86
  margin-top: 0;
78
87
  }
79
88
 
80
- .byline-alert-content:first-child {
89
+ .infonomic-alert-content:first-child {
81
90
  margin-top: 0;
82
91
  }
83
92
 
84
- :is(.primary-Y1uhvt, .byline-alert-primary) {
93
+ :is(.primary-Y1uhvt, .infonomic-alert-primary) {
85
94
  --alert-border: var(--stroke-primary);
86
95
  --alert-background: var(--fill-primary-weak);
87
96
  }
88
97
 
89
- :is(.secondary-A_6wDq, .byline-alert-secondary) {
98
+ :is(.secondary-A_6wDq, .infonomic-alert-secondary) {
90
99
  --alert-border: var(--stroke-secondary);
91
100
  --alert-background: var(--fill-secondary-weak);
92
101
  }
93
102
 
94
- :is(.noeffect-4mzRDQ, .byline-alert-noeffect) {
103
+ :is(.noeffect-4mzRDQ, .infonomic-alert-noeffect) {
95
104
  --alert-border: var(--stroke-noeffect);
96
105
  --alert-background: var(--fill-noeffect-weak);
97
106
  }
98
107
 
99
- :is(.success-FCgDMo, .byline-alert-success) {
108
+ :is(.success-FCgDMo, .infonomic-alert-success) {
100
109
  --alert-border: var(--stroke-success);
101
110
  --alert-background: var(--fill-success-weak);
102
111
  }
103
112
 
104
- :is(.info-KZnWBW, .byline-alert-info) {
113
+ :is(.info-KZnWBW, .infonomic-alert-info) {
105
114
  --alert-border: var(--stroke-info);
106
115
  --alert-background: var(--fill-info-weak);
107
116
  }
108
117
 
109
- :is(.warning-UtouDH, .byline-alert-warning) {
118
+ :is(.warning-UtouDH, .infonomic-alert-warning) {
110
119
  --alert-border: var(--stroke-warning);
111
120
  --alert-background: var(--fill-warning-weak);
112
121
  }
113
122
 
114
- :is(.danger-QFtDqI, .byline-alert-danger) {
123
+ :is(.danger-QFtDqI, .infonomic-alert-danger) {
115
124
  --alert-border: var(--stroke-danger);
116
125
  --alert-background: var(--fill-danger-weak);
117
126
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "private": false,
4
4
  "type": "module",
5
5
  "license": "MPL-2.0",
6
- "version": "3.4.0",
6
+ "version": "3.5.0",
7
7
  "engines": {
8
8
  "node": ">=20.9.0"
9
9
  },
@@ -62,7 +62,7 @@
62
62
  "npm-run-all": "^4.1.5",
63
63
  "react-day-picker": "^10.0.1",
64
64
  "zod": "^4.4.3",
65
- "@byline/core": "3.4.0"
65
+ "@byline/core": "3.5.0"
66
66
  },
67
67
  "peerDependencies": {
68
68
  "react": "^19.0.0",
package/src/components/notifications/alert.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  @layer byline-components {
13
13
  .alert,
14
- :global(.byline-alert) {
14
+ :global(.infonomic-alert) {
15
15
  display: flex;
16
16
  align-items: start;
17
17
  width: 100%;
@@ -22,20 +22,26 @@
22
22
  font-weight: normal;
23
23
  transition: all 0.3s ease-in-out;
24
24
  border: 1px solid var(--alert-border);
25
- background-color: var(--alert-background);
25
+ /* Multiply the fill token's existing alpha channel to layer on additional
26
+ transparency, without altering the --fill-<intent>-weak color primitives. */
27
+ --alert-background-opacity: 0.5;
28
+ background-color: oklch(
29
+ from var(--alert-background) l c h /
30
+ calc(alpha * var(--alert-background-opacity))
31
+ );
26
32
  color: var(--foreground);
27
33
  margin-bottom: 1rem;
28
34
  }
29
35
 
30
36
  .alert-with-title,
31
- :global(.byline-alert-with-title) {
37
+ :global(.infonomic-alert-with-title) {
32
38
  display: flex;
33
39
  flex-direction: column;
34
40
  width: 100%;
35
41
  }
36
42
 
37
43
  .icon,
38
- :global(.byline-alert-icon) {
44
+ :global(.infonomic-alert-icon) {
39
45
  display: flex;
40
46
  align-items: center;
41
47
  justify-content: center;
@@ -46,7 +52,7 @@
46
52
  }
47
53
 
48
54
  .close,
49
- :global(.byline-alert-close) {
55
+ :global(.infonomic-alert-close) {
50
56
  display: flex;
51
57
  align-items: center;
52
58
  justify-content: center;
@@ -61,13 +67,13 @@
61
67
  }
62
68
 
63
69
  .fade,
64
- :global(.byline-alert-fade) {
70
+ :global(.infonomic-alert-fade) {
65
71
  opacity: 0;
66
72
  transition: opacity 0.4s ease-in-out;
67
73
  }
68
74
 
69
75
  .header,
70
- :global(.byline-alert-header) {
76
+ :global(.infonomic-alert-header) {
71
77
  display: flex;
72
78
  align-items: start;
73
79
  width: 100%;
@@ -76,7 +82,7 @@
76
82
  }
77
83
 
78
84
  .title,
79
- :global(.byline-alert-title) {
85
+ :global(.infonomic-alert-title) {
80
86
  display: flex;
81
87
  font-weight: bold;
82
88
  font-size: 1.2rem;
@@ -85,55 +91,63 @@
85
91
  }
86
92
 
87
93
  .content,
88
- :global(.byline-alert-content) {
94
+ :global(.infonomic-alert-content) {
89
95
  padding-top: 1px;
90
- font-size: var(--font-size-sm);
96
+ font-size: 1.1rem;
97
+ }
98
+
99
+ @media (min-width: 40rem) {
100
+ .content,
101
+ :global(.infonomic-alert-content) {
102
+ padding-top: 1px;
103
+ font-size: 1rem;
104
+ }
91
105
  }
92
106
 
93
107
  .content:first-child,
94
- :global(.byline-alert-content:first-child) {
108
+ :global(.infonomic-alert-content:first-child) {
95
109
  margin-top: 0;
96
110
  }
97
111
 
98
112
  /* Intents */
99
113
  .primary,
100
- :global(.byline-alert-primary) {
114
+ :global(.infonomic-alert-primary) {
101
115
  --alert-border: var(--stroke-primary);
102
116
  --alert-background: var(--fill-primary-weak);
103
117
  }
104
118
 
105
119
  .secondary,
106
- :global(.byline-alert-secondary) {
120
+ :global(.infonomic-alert-secondary) {
107
121
  --alert-border: var(--stroke-secondary);
108
122
  --alert-background: var(--fill-secondary-weak);
109
123
  }
110
124
 
111
125
  .noeffect,
112
- :global(.byline-alert-noeffect) {
126
+ :global(.infonomic-alert-noeffect) {
113
127
  --alert-border: var(--stroke-noeffect);
114
128
  --alert-background: var(--fill-noeffect-weak);
115
129
  }
116
130
 
117
131
  .success,
118
- :global(.byline-alert-success) {
132
+ :global(.infonomic-alert-success) {
119
133
  --alert-border: var(--stroke-success);
120
134
  --alert-background: var(--fill-success-weak);
121
135
  }
122
136
 
123
137
  .info,
124
- :global(.byline-alert-info) {
138
+ :global(.infonomic-alert-info) {
125
139
  --alert-border: var(--stroke-info);
126
140
  --alert-background: var(--fill-info-weak);
127
141
  }
128
142
 
129
143
  .warning,
130
- :global(.byline-alert-warning) {
144
+ :global(.infonomic-alert-warning) {
131
145
  --alert-border: var(--stroke-warning);
132
146
  --alert-background: var(--fill-warning-weak);
133
147
  }
134
148
 
135
149
  .danger,
136
- :global(.byline-alert-danger) {
150
+ :global(.infonomic-alert-danger) {
137
151
  --alert-border: var(--stroke-danger);
138
152
  --alert-background: var(--fill-danger-weak);
139
153
  }