@box/blueprint-web 12.102.0 → 12.103.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 (4) hide show
  1. package/dist/lib-esm/actionable-inline-notice/types.d.ts +1 -1
  2. package/dist/lib-esm/index.css +55 -27
  3. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
  4. package/package.json +1 -1
package/dist/lib-esm/actionable-inline-notice/types.d.ts CHANGED
@@ -5,7 +5,7 @@ export type ActionableInlineNoticeProps = {
5
5
  /** Governs background color for inline notice
6
6
  * @default backgroundBlue
7
7
  */
8
- backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple'>;
8
+ backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple' | 'backgroundRed'>;
9
9
  /** Text for the body of the inline notice */
10
10
  text: string;
11
11
  /** Optional children buttons for the inline notice CTA. Specify either PrimaryAction OR both TertiaryAction and PrimaryAction. */
package/dist/lib-esm/index.css CHANGED
@@ -49,7 +49,7 @@
49
49
  background-color:var(--ghost-background-color);
50
50
  }
51
51
  }
52
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=false]{
52
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false]{
53
53
  --notice-radius:var(--radius-2);
54
54
  --notice-gap:var(--space-3);
55
55
  --notice-padding-block:var(--space-3);
@@ -66,11 +66,15 @@
66
66
  --notice-btn-surface-promo-focus:var(--surface-cta-surface-promo-focus);
67
67
  --notice-btn-surface-promo-hover:var(--surface-cta-surface-promo-hover);
68
68
  --notice-btn-surface-promo-focus-pressed:var(--surface-cta-surface-promo-focus-pressed);
69
+ --notice-btn-text-error:var(--text-text-error-on-light);
70
+ --notice-btn-surface-error:var(--watermelon-red-110);
71
+ --notice-btn-surface-error-hover:var(--watermelon-red-100);
72
+ --notice-btn-surface-error-pressed:var(--watermelon-red-120);
69
73
  --notice-content-text-color:var(--text-text-on-light);
70
74
  --notice-content-align:center;
71
75
  --notice-icon-padding-top:0;
72
76
  }
73
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=false] .bp_base_inline_notice_module_content--52c77{
77
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false] .bp_base_inline_notice_module_content--ee8cc{
74
78
  font-family:var(--body-default-font-family);
75
79
  font-size:var(--body-default-font-size);
76
80
  font-weight:var(--body-default-font-weight);
@@ -80,7 +84,7 @@
80
84
  text-decoration:var(--body-default-text-decoration);
81
85
  text-transform:var(--body-default-text-case);
82
86
  }
83
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=false] .bp_base_inline_notice_module_title--52c77{
87
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=false] .bp_base_inline_notice_module_title--ee8cc{
84
88
  font-family:var(--body-default-bold-font-family);
85
89
  font-size:var(--body-default-bold-font-size);
86
90
  font-weight:var(--body-default-bold-font-weight);
@@ -91,7 +95,7 @@
91
95
  text-transform:var(--body-default-bold-text-case);
92
96
  }
93
97
 
94
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=true]{
98
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true]{
95
99
  --notice-radius:var(--bp-radius-10);
96
100
  --notice-gap:var(--bp-space-030);
97
101
  --notice-padding-block:var(--bp-space-030);
@@ -108,95 +112,119 @@
108
112
  --notice-btn-surface-promo-focus:var(--bp-surface-cta-surface-promo-focus);
109
113
  --notice-btn-surface-promo-hover:var(--bp-surface-cta-surface-promo-hover);
110
114
  --notice-btn-surface-promo-focus-pressed:var(--bp-surface-cta-surface-promo-focus-pressed);
115
+ --notice-btn-text-error:var(--bp-text-text-error-on-light);
116
+ --notice-btn-surface-error:var(--bp-watermelon-red-110);
117
+ --notice-btn-surface-error-hover:var(--bp-watermelon-red-100);
118
+ --notice-btn-surface-error-pressed:var(--bp-watermelon-red-120);
111
119
  --notice-content-text-color:var(--bp-text-text-on-light);
112
120
  --notice-content-align:top;
113
121
  --notice-icon-padding-top:var(--bp-space-005);
114
122
  }
115
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=true] .bp_base_inline_notice_module_content--52c77{
123
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_content--ee8cc{
116
124
  font-weight:var(--bp-font-weight-regular);
117
125
  }
118
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=true] .bp_base_inline_notice_module_content--52c77,.bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=true] .bp_base_inline_notice_module_title--52c77{
126
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_content--ee8cc,.bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_title--ee8cc{
119
127
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
120
128
  font-size:var(--bp-font-size-05);
121
129
  font-style:normal;
122
130
  letter-spacing:var(--bp-font-letter-spacing-01);
123
131
  line-height:var(--bp-font-line-height-04);
124
132
  }
125
- .bp_base_inline_notice_module_noticeWrapper--52c77[data-modern=true] .bp_base_inline_notice_module_title--52c77{
133
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc[data-modern=true] .bp_base_inline_notice_module_title--ee8cc{
126
134
  font-weight:var(--bp-font-weight-bold);
127
135
  }
128
136
 
129
- .bp_base_inline_notice_module_noticeWrapper--52c77{
137
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc{
130
138
  border-radius:var(--notice-radius);
131
139
  display:flex;
132
140
  gap:var(--notice-gap);
133
141
  justify-content:space-between;
134
142
  padding:var(--notice-padding-block) var(--notice-padding-inline);
135
143
  }
136
- .bp_base_inline_notice_module_noticeWrapper--52c77 .bp_base_inline_notice_module_actions--52c77{
144
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_actions--ee8cc{
137
145
  align-self:center;
138
146
  display:flex;
139
147
  gap:var(--notice-gap);
140
148
  justify-content:flex-end;
141
149
  }
142
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundYellow--52c77{
150
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundYellow--ee8cc{
143
151
  background:var(--notice-surface-warning);
144
152
  }
145
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundBlue--52c77{
153
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundBlue--ee8cc{
146
154
  background:var(--notice-surface-info);
147
155
  }
148
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundRed--52c77{
156
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc{
149
157
  background:var(--notice-surface-error);
150
158
  }
151
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundGreen--52c77{
159
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonTertiary--ee8cc{
160
+ color:var(--notice-btn-text-error);
161
+ }
162
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc{
163
+ background:var(--notice-btn-surface-error);
164
+ border-color:var(--notice-btn-surface-error);
165
+ }
166
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:active{
167
+ background:var(--notice-btn-surface-error-pressed);
168
+ }
169
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc[data-focus-visible]{
170
+ background:var(--notice-btn-surface-error-hover);
171
+ }
172
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover{
173
+ background:var(--notice-btn-surface-error-hover);
174
+ border-color:var(--notice-btn-surface-error-hover);
175
+ }
176
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:focus:active,.bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundRed--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover:active{
177
+ background:var(--notice-btn-surface-error-pressed);
178
+ }
179
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundGreen--ee8cc{
152
180
  background:var(--notice-surface-success);
153
181
  }
154
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77{
182
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc{
155
183
  background:var(--notice-surface-promo);
156
184
  }
157
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonTertiary--52c77{
185
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonTertiary--ee8cc{
158
186
  color:var(--notice-btn-text-promo);
159
187
  }
160
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77{
188
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc{
161
189
  background:var(--notice-btn-surface-promo);
162
190
  border-color:var(--notice-btn-surface-promo);
163
191
  }
164
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77:active{
192
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:active{
165
193
  background:var(--notice-btn-surface-promo-pressed);
166
194
  }
167
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77[data-focus-visible]{
195
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc[data-focus-visible]{
168
196
  background:var(--notice-btn-surface-promo-focus);
169
197
  }
170
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77:hover{
198
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover{
171
199
  background:var(--notice-btn-surface-promo-hover);
172
200
  border-color:var(--notice-btn-surface-promo-hover);
173
201
  }
174
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77:focus:active{
202
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:focus:active{
175
203
  background:var(--notice-btn-surface-promo-focus-pressed);
176
204
  }
177
- .bp_base_inline_notice_module_noticeWrapper--52c77.bp_base_inline_notice_module_backgroundPurple--52c77 .bp_base_inline_notice_module_actionButtonPrimary--52c77:hover:active{
205
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc.bp_base_inline_notice_module_backgroundPurple--ee8cc .bp_base_inline_notice_module_actionButtonPrimary--ee8cc:hover:active{
178
206
  background:var(--notice-btn-surface-promo-pressed);
179
207
  }
180
- .bp_base_inline_notice_module_noticeWrapper--52c77 .bp_base_inline_notice_module_contentContainer--52c77{
208
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_contentContainer--ee8cc{
181
209
  align-items:var(--notice-content-align);
182
210
  display:flex;
183
211
  gap:var(--notice-gap);
184
212
  }
185
- .bp_base_inline_notice_module_noticeWrapper--52c77 .bp_base_inline_notice_module_content--52c77{
213
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_content--ee8cc{
186
214
  color:var(--notice-content-text-color);
187
215
  }
188
- .bp_base_inline_notice_module_noticeWrapper--52c77 .bp_base_inline_notice_module_icon--52c77{
216
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc .bp_base_inline_notice_module_icon--ee8cc{
189
217
  padding-top:var(--notice-icon-padding-top);
190
218
  }
191
- .bp_base_inline_notice_module_noticeWrapper--52c77 svg{
219
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc svg{
192
220
  display:block;
193
221
  }
194
222
 
195
223
  @media (max-width: 1023px){
196
- .bp_base_inline_notice_module_actions--52c77{
224
+ .bp_base_inline_notice_module_actions--ee8cc{
197
225
  margin-top:var(--notice-space-3);
198
226
  }
199
- .bp_base_inline_notice_module_noticeWrapper--52c77{
227
+ .bp_base_inline_notice_module_noticeWrapper--ee8cc{
200
228
  display:block;
201
229
  }
202
230
  }
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--52c77","content":"bp_base_inline_notice_module_content--52c77","title":"bp_base_inline_notice_module_title--52c77","actions":"bp_base_inline_notice_module_actions--52c77","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--52c77","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--52c77","backgroundRed":"bp_base_inline_notice_module_backgroundRed--52c77","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--52c77","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--52c77","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--52c77","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--52c77","contentContainer":"bp_base_inline_notice_module_contentContainer--52c77","icon":"bp_base_inline_notice_module_icon--52c77"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--ee8cc","content":"bp_base_inline_notice_module_content--ee8cc","title":"bp_base_inline_notice_module_title--ee8cc","actions":"bp_base_inline_notice_module_actions--ee8cc","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--ee8cc","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--ee8cc","backgroundRed":"bp_base_inline_notice_module_backgroundRed--ee8cc","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--ee8cc","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--ee8cc","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--ee8cc","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--ee8cc","contentContainer":"bp_base_inline_notice_module_contentContainer--ee8cc","icon":"bp_base_inline_notice_module_icon--ee8cc"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.102.0",
3
+ "version": "12.103.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {