@box/blueprint-web 13.3.2 → 13.4.1
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.
package/dist/lib-esm/index.css
CHANGED
|
@@ -2143,7 +2143,7 @@
|
|
|
2143
2143
|
.bp_base_badge_module_numericBadgeMoreDigits--8f782{
|
|
2144
2144
|
padding:1px 3px;
|
|
2145
2145
|
}
|
|
2146
|
-
.bp_icon_button_module_iconButton--
|
|
2146
|
+
.bp_icon_button_module_iconButton--a2d49[data-modern=false]{
|
|
2147
2147
|
--icon-button-radius:var(--radius-2);
|
|
2148
2148
|
--icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
|
|
2149
2149
|
--icon-button-gray:var(--gray-50);
|
|
@@ -2164,12 +2164,18 @@
|
|
|
2164
2164
|
--icon-button-icon-utility-hover:var(--icon-cta-icon-utility-hover);
|
|
2165
2165
|
--icon-button-surface-utility-pressed:var(--surface-cta-surface-icon-utility-pressed);
|
|
2166
2166
|
--icon-button-icon-utility-pressed:var(--icon-cta-icon-utility-pressed);
|
|
2167
|
+
--icon-button-surface-on-dark:var(--bp-surface-cta-surface-icon-on-dark);
|
|
2168
|
+
--icon-button-surface-on-dark-hover:var(--bp-surface-cta-surface-icon-on-dark-hover);
|
|
2169
|
+
--icon-button-surface-on-dark-pressed:var(--bp-surface-cta-surface-icon-on-dark-pressed);
|
|
2170
|
+
--icon-button-icon-on-dark:var(--bp-icon-cta-icon-on-dark);
|
|
2171
|
+
--icon-button-icon-on-dark-hover:var(--bp-icon-cta-icon-on-dark-hover);
|
|
2172
|
+
--icon-button-icon-on-dark-pressed:var(--bp-icon-cta-icon-on-dark-pressed);
|
|
2167
2173
|
--icon-button-size-large:var(--size-10);
|
|
2168
2174
|
--icon-button-size-small:var(--size-8);
|
|
2169
2175
|
--icon-button-size-x-small:var(--size-6);
|
|
2170
2176
|
}
|
|
2171
2177
|
|
|
2172
|
-
.bp_icon_button_module_iconButton--
|
|
2178
|
+
.bp_icon_button_module_iconButton--a2d49[data-modern=true]{
|
|
2173
2179
|
--icon-button-radius:var(--bp-radius-10);
|
|
2174
2180
|
--icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
|
|
2175
2181
|
--icon-button-gray:var(--bp-gray-50);
|
|
@@ -2190,12 +2196,18 @@
|
|
|
2190
2196
|
--icon-button-icon-utility-hover:var(--bp-icon-cta-icon-utility-hover);
|
|
2191
2197
|
--icon-button-surface-utility-pressed:var(--bp-surface-cta-surface-icon-utility-pressed);
|
|
2192
2198
|
--icon-button-icon-utility-pressed:var(--bp-icon-cta-icon-utility-pressed);
|
|
2199
|
+
--icon-button-surface-on-dark:var(--bp-surface-cta-surface-icon-on-dark);
|
|
2200
|
+
--icon-button-surface-on-dark-hover:var(--bp-surface-cta-surface-icon-on-dark-hover);
|
|
2201
|
+
--icon-button-surface-on-dark-pressed:var(--bp-surface-cta-surface-icon-on-dark-pressed);
|
|
2202
|
+
--icon-button-icon-on-dark:var(--bp-icon-cta-icon-on-dark);
|
|
2203
|
+
--icon-button-icon-on-dark-hover:var(--bp-icon-cta-icon-on-dark-hover);
|
|
2204
|
+
--icon-button-icon-on-dark-pressed:var(--bp-icon-cta-icon-on-dark-pressed);
|
|
2193
2205
|
--icon-button-size-large:var(--bp-size-100);
|
|
2194
2206
|
--icon-button-size-small:var(--bp-size-080);
|
|
2195
2207
|
--icon-button-size-x-small:var(--bp-size-060);
|
|
2196
2208
|
}
|
|
2197
2209
|
|
|
2198
|
-
.bp_icon_button_module_iconButton--
|
|
2210
|
+
.bp_icon_button_module_iconButton--a2d49{
|
|
2199
2211
|
align-items:center;
|
|
2200
2212
|
border-radius:var(--icon-button-radius);
|
|
2201
2213
|
border-style:none;
|
|
@@ -2205,91 +2217,109 @@
|
|
|
2205
2217
|
justify-content:center;
|
|
2206
2218
|
padding:0;
|
|
2207
2219
|
}
|
|
2208
|
-
.bp_icon_button_module_iconButton--
|
|
2220
|
+
.bp_icon_button_module_iconButton--a2d49[aria-disabled=true]{
|
|
2209
2221
|
background:var(--icon-button-surface-disabled);
|
|
2210
2222
|
opacity:.3;
|
|
2211
2223
|
}
|
|
2212
|
-
.bp_icon_button_module_iconButton--
|
|
2224
|
+
.bp_icon_button_module_iconButton--a2d49[aria-disabled=true] .bp_icon_button_module_icon--a2d49 *{
|
|
2213
2225
|
fill:var(--icon-button-gray);
|
|
2214
2226
|
}
|
|
2215
|
-
.bp_icon_button_module_iconButton--
|
|
2227
|
+
.bp_icon_button_module_iconButton--a2d49:focus-visible{
|
|
2216
2228
|
outline:none;
|
|
2217
2229
|
}
|
|
2218
|
-
.bp_icon_button_module_iconButton--
|
|
2230
|
+
.bp_icon_button_module_iconButton--a2d49[data-focus-visible]{
|
|
2219
2231
|
outline:var(--icon-button-border) solid var(--icon-button-outline);
|
|
2220
2232
|
}
|
|
2221
|
-
.bp_icon_button_module_iconButton--
|
|
2233
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49{
|
|
2222
2234
|
background:var(--icon-button-surface);
|
|
2223
2235
|
}
|
|
2224
|
-
.bp_icon_button_module_iconButton--
|
|
2236
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49 .bp_icon_button_module_icon--a2d49 *{
|
|
2225
2237
|
fill:var(--icon-button-icon);
|
|
2226
2238
|
}
|
|
2227
|
-
.bp_icon_button_module_iconButton--
|
|
2239
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-focus-visible]{
|
|
2228
2240
|
background:var(--icon-button-surface-hover);
|
|
2229
2241
|
}
|
|
2230
|
-
.bp_icon_button_module_iconButton--
|
|
2242
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
|
|
2231
2243
|
fill:var(--icon-button-icon-hover);
|
|
2232
2244
|
}
|
|
2233
|
-
.bp_icon_button_module_iconButton--
|
|
2245
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-active]{
|
|
2234
2246
|
background:var(--icon-button-surface-pressed);
|
|
2235
2247
|
}
|
|
2236
|
-
.bp_icon_button_module_iconButton--
|
|
2248
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
|
|
2237
2249
|
fill:var(--icon-button-icon-pressed);
|
|
2238
2250
|
}
|
|
2239
|
-
.bp_icon_button_module_iconButton--
|
|
2251
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49{
|
|
2240
2252
|
background:var(--icon-button-surface);
|
|
2241
2253
|
}
|
|
2242
|
-
.bp_icon_button_module_iconButton--
|
|
2254
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49[data-focus-visible]{
|
|
2243
2255
|
background:var(--icon-button-surface-hover);
|
|
2244
2256
|
}
|
|
2245
|
-
.bp_icon_button_module_iconButton--
|
|
2257
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49[data-active]{
|
|
2246
2258
|
background:var(--icon-button-surface-pressed);
|
|
2247
2259
|
}
|
|
2248
|
-
.bp_icon_button_module_iconButton--
|
|
2260
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49{
|
|
2249
2261
|
background:var(--icon-button-surface);
|
|
2250
2262
|
}
|
|
2251
|
-
.bp_icon_button_module_iconButton--
|
|
2263
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49 .bp_icon_button_module_icon--a2d49 *{
|
|
2252
2264
|
fill:var(--icon-button-icon-high-contrast);
|
|
2253
2265
|
}
|
|
2254
|
-
.bp_icon_button_module_iconButton--
|
|
2266
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-focus-visible]{
|
|
2255
2267
|
background:var(--icon-button-surface-hover);
|
|
2256
2268
|
}
|
|
2257
|
-
.bp_icon_button_module_iconButton--
|
|
2269
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
|
|
2258
2270
|
fill:var(--icon-button-icon-high-contrast-hover);
|
|
2259
2271
|
}
|
|
2260
|
-
.bp_icon_button_module_iconButton--
|
|
2272
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-active]{
|
|
2261
2273
|
background:var(--icon-button-surface-pressed);
|
|
2262
2274
|
}
|
|
2263
|
-
.bp_icon_button_module_iconButton--
|
|
2275
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
|
|
2264
2276
|
fill:var(--icon-button-icon-high-contrast-pressed);
|
|
2265
2277
|
}
|
|
2266
|
-
.bp_icon_button_module_iconButton--
|
|
2278
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49{
|
|
2279
|
+
background:var(--icon-button-surface-on-dark);
|
|
2280
|
+
}
|
|
2281
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49 .bp_icon_button_module_icon--a2d49 *{
|
|
2282
|
+
fill:var(--icon-button-icon-on-dark);
|
|
2283
|
+
}
|
|
2284
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-focus-visible]{
|
|
2285
|
+
background:var(--icon-button-surface-on-dark-hover);
|
|
2286
|
+
}
|
|
2287
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
|
|
2288
|
+
fill:var(--icon-button-icon-on-dark-hover);
|
|
2289
|
+
}
|
|
2290
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-active]{
|
|
2291
|
+
background:var(--icon-button-surface-on-dark-pressed);
|
|
2292
|
+
}
|
|
2293
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
|
|
2294
|
+
fill:var(--icon-button-icon-on-dark-pressed);
|
|
2295
|
+
}
|
|
2296
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49{
|
|
2267
2297
|
background:var(--icon-button-surface-utility);
|
|
2268
2298
|
}
|
|
2269
|
-
.bp_icon_button_module_iconButton--
|
|
2299
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49 .bp_icon_button_module_icon--a2d49 *{
|
|
2270
2300
|
fill:var(--icon-button-icon-utility);
|
|
2271
2301
|
}
|
|
2272
|
-
.bp_icon_button_module_iconButton--
|
|
2302
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-focus-visible]{
|
|
2273
2303
|
background:var(--icon-button-surface-utility-hover);
|
|
2274
2304
|
}
|
|
2275
|
-
.bp_icon_button_module_iconButton--
|
|
2305
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
|
|
2276
2306
|
fill:var(--icon-button-icon-utility-hover);
|
|
2277
2307
|
}
|
|
2278
|
-
.bp_icon_button_module_iconButton--
|
|
2308
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-active]{
|
|
2279
2309
|
background:var(--icon-button-surface-utility-pressed);
|
|
2280
2310
|
}
|
|
2281
|
-
.bp_icon_button_module_iconButton--
|
|
2311
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
|
|
2282
2312
|
fill:var(--icon-button-icon-utility-pressed);
|
|
2283
2313
|
}
|
|
2284
|
-
.bp_icon_button_module_iconButton--
|
|
2314
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_large--a2d49{
|
|
2285
2315
|
height:var(--icon-button-size-large);
|
|
2286
2316
|
width:var(--icon-button-size-large);
|
|
2287
2317
|
}
|
|
2288
|
-
.bp_icon_button_module_iconButton--
|
|
2318
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small--a2d49{
|
|
2289
2319
|
height:var(--icon-button-size-small);
|
|
2290
2320
|
width:var(--icon-button-size-small);
|
|
2291
2321
|
}
|
|
2292
|
-
.bp_icon_button_module_iconButton--
|
|
2322
|
+
.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_x-small--a2d49{
|
|
2293
2323
|
height:var(--icon-button-size-x-small);
|
|
2294
2324
|
width:var(--icon-button-size-x-small);
|
|
2295
2325
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"iconButton":"bp_icon_button_module_iconButton--
|
|
2
|
+
var styles = {"iconButton":"bp_icon_button_module_iconButton--a2d49","icon":"bp_icon_button_module_icon--a2d49","default":"bp_icon_button_module_default--a2d49","icon-logo":"bp_icon_button_module_icon-logo--a2d49","high-contrast":"bp_icon_button_module_high-contrast--a2d49","on-dark":"bp_icon_button_module_on-dark--a2d49","small-utility":"bp_icon_button_module_small-utility--a2d49","large":"bp_icon_button_module_large--a2d49","small":"bp_icon_button_module_small--a2d49","x-small":"bp_icon_button_module_x-small--a2d49"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -12,7 +12,7 @@ interface IconButtonCommonProps extends AriakitButtonProps {
|
|
|
12
12
|
*/
|
|
13
13
|
icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
|
|
14
14
|
}
|
|
15
|
-
export declare const IconButtonVariants: readonly ["default", "high-contrast", "icon-logo", "small-utility"];
|
|
15
|
+
export declare const IconButtonVariants: readonly ["default", "high-contrast", "icon-logo", "small-utility", "on-dark"];
|
|
16
16
|
export type IconButtonVariant = (typeof IconButtonVariants)[number];
|
|
17
17
|
export interface IconButtonVariantsProps extends IconButtonCommonProps {
|
|
18
18
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.4.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.101.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.101.18",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.16.
|
|
80
|
+
"@box/storybook-utils": "^0.16.55",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|