@box/blueprint-web-assets 4.27.0 → 4.28.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 (11) hide show
  1. package/icons/Fill/BoxApps.js +1 -1
  2. package/icons/Line/BoxApps.js +1 -1
  3. package/icons/Logo/BoxApps.js +1 -1
  4. package/package.json +3 -3
  5. package/tokens/px-tokens.d.ts +16 -1
  6. package/tokens/px-tokens.js +16 -1
  7. package/tokens/tokens-css-vars.scss +18 -3
  8. package/tokens/tokens.d.ts +15 -0
  9. package/tokens/tokens.js +15 -0
  10. package/tokens/tokens.json +15 -0
  11. package/tokens/tokens.scss +32 -0
package/icons/Fill/BoxApps.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#909090', children: [_jsx("path", { d: "M10.17 5.826a.447.447 0 0 1-.006-.697l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L13.205 7.79a.428.428 0 0 1-.52-.005L10.17 5.826Z" }), _jsx("path", { fillRule: "evenodd", d: "M.454 9.037a1.192 1.192 0 0 1-.016-1.86l6.704-5.421a1.142 1.142 0 0 1 1.423-.014l2.141 1.663-1.17.946a1.447 1.447 0 0 0 .02 2.264l2.514 1.958a1.428 1.428 0 0 0 1.734.017l1.82-1.36c.533.494.499 1.375-.096 1.82l-6.98 5.221c-.415.31-.981.305-1.39-.014L.454 9.037Zm4.716 1.79a.447.447 0 0 1-.006-.698l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L8.205 12.79a.428.428 0 0 1-.52-.005L5.17 10.826Z", clipRule: "evenodd" }), _jsx("path", { d: "m11.517 4.035 3.29 2.556-1.602 1.198a.428.428 0 0 1-.52-.005L10.17 5.826a.447.447 0 0 1-.006-.697l1.353-1.094Z" })] }) }));
2
+ const SvgBoxApps = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#909090', d: "M5.413 12.689a5.109 5.109 0 0 1-.138-.085l-3.938-2.482c-.1-.063-.234-.026-.272.086-.301.876.511 1.312 1.172 1.728l4.093 2.58a3.13 3.13 0 0 0 3.342 0l4.093-2.58c.662-.417 1.468-.852 1.172-1.73-.038-.113-.173-.15-.273-.088l-1.405.886a1.253 1.253 0 0 1-.05.034l-4.094 2.58c-.681.43-1.546.43-2.228 0l-1.474-.93Z" }), _jsx("path", { fill: props.color || '#909090', fillRule: "evenodd", d: "m6.397.485-5.355 3.53c-1.39.917-1.39 3.053 0 3.97l5.355 3.53c.98.647 2.225.647 3.206 0l5.355-3.53c1.39-.917 1.39-3.053 0-3.97L9.603.486a2.891 2.891 0 0 0-3.206 0ZM4.814 6.991a.6.6 0 0 0 0 1.018L7.682 9.8a.6.6 0 0 0 .636 0l2.868-1.792a.6.6 0 0 0 0-1.018L8.318 5.2a.6.6 0 0 0-.636 0L4.814 6.99Z", clipRule: "evenodd" })] }));
3
3
  export default SvgBoxApps;
package/icons/Line/BoxApps.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#222222', children: [_jsx("path", { d: "M1.067 7.955 7.77 2.533a.142.142 0 0 1 .18-.002l1.653 1.284a.5.5 0 0 0 .614-.79L8.565 1.742a1.142 1.142 0 0 0-1.423.014L.438 7.177a1.192 1.192 0 0 0 .016 1.86l6.704 5.22c.409.319.975.324 1.39.014l6.98-5.22c.622-.467.63-1.411.016-1.888a.425.425 0 0 0-.527.004l-.092.074a.453.453 0 0 0 .006.712.18.18 0 0 1 .069.149.18.18 0 0 1-.071.147l-6.98 5.221a.142.142 0 0 1-.176-.002l-6.704-5.22A.18.18 0 0 1 1 8.102c0-.063.024-.113.067-.147Z" }), _jsx("path", { d: "M9.67 5.826a.447.447 0 0 1-.006-.697l2.514-2.033a.428.428 0 0 1 .534-.005l2.617 2.033a.447.447 0 0 1-.006.707L12.705 7.79a.428.428 0 0 1-.52-.005L9.67 5.826Z" }), _jsx("path", { fillRule: "evenodd", d: "m6.337 8.967 1.618 1.26 1.686-1.26-1.685-1.31-1.62 1.31Zm-1.173-.338a.447.447 0 0 0 .006.697l2.514 1.958c.154.12.366.121.521.005l2.618-1.958a.447.447 0 0 0 .006-.707L8.212 6.59a.428.428 0 0 0-.534.005L5.164 8.629Z", clipRule: "evenodd" })] }) }));
2
+ const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsxs("g", { fill: props.color || '#222222', children: [_jsx("path", { d: "M5.413 12.689a5.109 5.109 0 0 1-.138-.085l-3.938-2.482c-.1-.063-.234-.026-.272.086-.301.876.511 1.312 1.172 1.728l4.093 2.58a3.13 3.13 0 0 0 3.342 0l4.093-2.58c.662-.417 1.468-.852 1.172-1.73-.038-.113-.173-.15-.273-.088l-1.405.886a1.253 1.253 0 0 1-.05.034l-4.094 2.58c-.681.43-1.546.43-2.228 0l-1.474-.93Z" }), _jsx("path", { fillRule: "evenodd", d: "M1.042 4.016 6.397.485a2.891 2.891 0 0 1 3.206 0l5.355 3.53c1.39.917 1.39 3.053 0 3.97l-5.355 3.53a2.891 2.891 0 0 1-3.206 0l-5.355-3.53c-1.39-.917-1.39-3.053 0-3.97Zm.535.902c-.758.5-.758 1.664 0 2.164l5.354 3.531a1.927 1.927 0 0 0 2.138 0l5.354-3.53c.758-.5.758-1.665 0-2.165L9.07 1.387a1.927 1.927 0 0 0-2.138 0l-5.354 3.53Z", clipRule: "evenodd" }), _jsx("path", { d: "M5.5 7.333a.4.4 0 0 1 0-.666l2.278-1.52a.4.4 0 0 1 .444 0l2.279 1.52a.4.4 0 0 1 0 .666l-2.28 1.52a.4.4 0 0 1-.443 0L5.5 7.332Z" })] }) }));
3
3
  export default SvgBoxApps;
package/icons/Logo/BoxApps.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- const SvgBoxApps = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: _jsxs("g", { children: [_jsx("path", { fill: "#2486FC", d: "M26 0H6a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" }), _jsx("path", { fill: "#12437E", d: "m8.84 15.75 6.219 4.756a1.323 1.323 0 0 0 1.587.016l6.437-4.73 1.837 1.402a1.374 1.374 0 0 1-.02 2.2l-8.279 6.083a1.374 1.374 0 0 1-1.648-.016L7.02 19.378a1.374 1.374 0 0 1-.02-2.167l1.84-1.462Z" }), _jsx("path", { fill: "#12437E", d: "M12.522 16.449a.5.5 0 0 1-.007-.794l3.103-2.42a.5.5 0 0 1 .607-.006l3.23 2.42a.5.5 0 0 1-.007.805l-3.23 2.33a.5.5 0 0 1-.593-.005l-3.103-2.33Z" }), _jsx("path", { fill: "#12437E", fillRule: "evenodd", d: "m19.895 10.791 2.286 1.717 2.38-1.717-2.38-1.782-2.286 1.782Zm-1.13-.386a.5.5 0 0 0 .007.794l3.103 2.33a.5.5 0 0 0 .593.006l3.23-2.33a.5.5 0 0 0 .008-.806l-3.23-2.42a.5.5 0 0 0-.608.006l-3.103 2.42Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", fillRule: "evenodd", d: "M7.383 12.562a1.323 1.323 0 0 0 .019 2.086l7.657 5.858a1.323 1.323 0 0 0 1.587.016l7.973-5.858c.71-.523.72-1.583.019-2.118l-.389-.296-1.781 1.285a.5.5 0 0 1-.593-.006l-3.103-2.33a.5.5 0 0 1-.007-.794l1.517-1.183-3.616-2.76a1.323 1.323 0 0 0-1.626.017l-7.657 6.083Zm5.132 3.093a.5.5 0 0 0 .007.794l3.103 2.33a.5.5 0 0 0 .593.006l3.23-2.33a.5.5 0 0 0 .008-.806l-3.23-2.42a.5.5 0 0 0-.608.006l-3.103 2.42Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", d: "m19.895 10.791 2.286 1.717 2.38-1.717-2.38-1.782-2.286 1.782Z" })] }) }));
2
+ const SvgBoxApps = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsxs("g", { children: [_jsx("path", { fill: "#376DCC", d: "M26 0H6a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" }), _jsxs("g", { clipPath: "url(#BoxApps_svg__b)", children: [_jsx("path", { fill: "black", fillRule: "evenodd", d: "m5.564 16.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297c2.085 1.374 2.085 4.578 0 5.952l-8.032 5.297a4.337 4.337 0 0 1-4.808 0l-8.032-5.297c-2.085-1.374-2.085-4.578 0-5.952Z", clipRule: "evenodd" }), _jsx("path", { fill: "#E2E2E2", fillRule: "evenodd", d: "m5.564 12.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297C26.84 12.29 28 13 28 13s.003 1.308 0 2.014c-.004 1.14-.526 2.278-1.564 2.962l-8.032 5.297a4.337 4.337 0 0 1-4.808 0l-8.032-5.297c-1.05-.692-1.571-1.847-1.564-3C4.004 14.284 4 13 4 13s1.16-.71 1.564-.976Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", fillRule: "evenodd", d: "m5.564 10.024 8.032-5.297a4.337 4.337 0 0 1 4.808 0l8.032 5.297c2.085 1.374 2.085 4.578 0 5.952l-8.032 5.296a4.337 4.337 0 0 1-4.808 0l-8.032-5.296c-2.085-1.374-2.085-4.578 0-5.952Z", clipRule: "evenodd" }), _jsx("g", { filter: "url(#BoxApps_svg__c)", children: _jsx("path", { fill: "#0DB6FF", d: "M11.357 16.098a1 1 0 0 1 0-1.696l4.113-2.57a1 1 0 0 1 1.06 0l4.113 2.57a1 1 0 0 1 0 1.696l-4.113 2.57a1 1 0 0 1-1.06 0l-4.113-2.57Z" }) })] })] }), _jsxs("defs", { children: [_jsx("clipPath", { id: "BoxApps_svg__b", children: _jsx("path", { fill: "white", d: "M0 0h24v24H0z", transform: "matrix(1 0 0 -1 4 28)" }) }), _jsxs("filter", { id: "BoxApps_svg__c", width: 10.226, height: 7.942, x: 10.887, y: 11.679, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", children: [_jsx("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feOffset", { dy: 0.8 }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { values: "0 0 0 0 0.0512048 0 0 0 0 0.506949 0 0 0 0 0.703809 0 0 0 1 0" }), _jsx("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_19850_116" }), _jsx("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_19850_116", result: "shape" })] })] })] }));
3
3
  export default SvgBoxApps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web-assets",
3
- "version": "4.27.0",
3
+ "version": "4.28.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "scripts": {
6
6
  "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -98,12 +98,12 @@
98
98
  }
99
99
  },
100
100
  "devDependencies": {
101
- "@box/storybook-utils": "^0.6.1",
101
+ "@box/storybook-utils": "^0.7.0",
102
102
  "@types/react": "^18.0.0",
103
103
  "@types/react-dom": "^18.0.0",
104
104
  "chalk": "4.1.2",
105
105
  "react": "^18.3.0",
106
106
  "react-dom": "^18.3.0"
107
107
  },
108
- "gitHead": "8f6549b0a207fd05f099b465c43e533f17031184"
108
+ "gitHead": "36614341a1bf61c7180c7f08e3cd523db717fa3d"
109
109
  }
package/tokens/px-tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Oct 2024 08:55:42 GMT
3
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
4
4
  */
5
5
 
6
6
  export const BackgroundBackground: string;
@@ -233,6 +233,12 @@ export const SurfaceRadiotileSurfaceSelected: string;
233
233
  export const SurfaceToggletextSurfaceOn: string;
234
234
  export const SurfaceToggletextSurfaceOnHover: string;
235
235
  export const SurfaceToggletextSurfaceOnPressed: string;
236
+ export const SurfaceToggletextSurfaceOnAi: string;
237
+ export const SurfaceToggletextSurfaceOnAiHover: string;
238
+ export const SurfaceToggletextSurfaceOnAiPressed: string;
239
+ export const SurfaceToggletextSurfaceOffAi: string;
240
+ export const SurfaceToggletextSurfaceOffAiHover: string;
241
+ export const SurfaceToggletextSurfaceOffAiPressed: string;
236
242
  export const BorderCtaBorderSecondary: string;
237
243
  export const BorderCtaBorderSecondaryPressed: string;
238
244
  export const BorderCtaBorderSecondaryHover: string;
@@ -313,6 +319,12 @@ export const BorderToggletextBorderOffPressed: string;
313
319
  export const BorderToggletextBorderOn: string;
314
320
  export const BorderToggletextBorderOnHover: string;
315
321
  export const BorderToggletextBorderOnPressed: string;
322
+ export const BorderToggletextBorderOnAi: string;
323
+ export const BorderToggletextBorderOnAiHover: string;
324
+ export const BorderToggletextBorderOnAiPressed: string;
325
+ export const BorderToggletextBorderOffAi: string;
326
+ export const BorderToggletextBorderOffAiHover: string;
327
+ export const BorderToggletextBorderOffAiPressed: string;
316
328
  export const IconIconOnLight: string;
317
329
  export const IconIconOnLightSecondary: string;
318
330
  export const IconIconOnLightTertiary: string;
@@ -378,6 +390,9 @@ export const BrandDocgenTertiary: string;
378
390
  export const BrandSignPrimary: string;
379
391
  export const BrandSignSecondary: string;
380
392
  export const BrandSignTertiary: string;
393
+ export const BrandBoxAi100: string;
394
+ export const BrandBoxAi120: string;
395
+ export const BrandBoxAi140: string;
381
396
  export const Gray10: string;
382
397
  export const Gray20: string;
383
398
  export const Gray30: string;
package/tokens/px-tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Oct 2024 08:55:42 GMT
3
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
4
4
  */
5
5
 
6
6
  export const BackgroundBackground = '#ffffff';
@@ -233,6 +233,12 @@ export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
233
233
  export const SurfaceToggletextSurfaceOn = '#f2f7fd';
234
234
  export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
235
235
  export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
236
+ export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
237
+ export const SurfaceToggletextSurfaceOnAiHover = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
238
+ export const SurfaceToggletextSurfaceOnAiPressed = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
239
+ export const SurfaceToggletextSurfaceOffAi = '#ffffff';
240
+ export const SurfaceToggletextSurfaceOffAiHover = '#f4f4f4';
241
+ export const SurfaceToggletextSurfaceOffAiPressed = '#e8e8e8';
236
242
  export const BorderCtaBorderSecondary = '#bcbcbc';
237
243
  export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
238
244
  export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -313,6 +319,12 @@ export const BorderToggletextBorderOffPressed = '#6F6F6F';
313
319
  export const BorderToggletextBorderOn = '#f2f7fd';
314
320
  export const BorderToggletextBorderOnHover = '#ccdff7';
315
321
  export const BorderToggletextBorderOnPressed = '#b2cff2';
322
+ export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
323
+ export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
324
+ export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
325
+ export const BorderToggletextBorderOffAi = '#bcbcbc';
326
+ export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
327
+ export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
316
328
  export const IconIconOnLight = '#222222';
317
329
  export const IconIconOnLightSecondary = '#6F6F6F';
318
330
  export const IconIconOnLightTertiary = '#909090';
@@ -378,6 +390,9 @@ export const BrandDocgenTertiary = '#ece9f8';
378
390
  export const BrandSignPrimary = '#003c84';
379
391
  export const BrandSignSecondary = '#ccd8e6';
380
392
  export const BrandSignTertiary = '#e5ebf2';
393
+ export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
394
+ export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
395
+ export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
381
396
  export const Gray10 = '#e8e8e8';
382
397
  export const Gray20 = '#d3d3d3';
383
398
  export const Gray30 = '#bcbcbc';
package/tokens/tokens-css-vars.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Oct 2024 08:55:42 GMT
3
+ * Generated on Fri, 18 Oct 2024 08:39:49 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -323,9 +323,10 @@
323
323
  --gray-30: #bcbcbc;
324
324
  --gray-20: #d3d3d3;
325
325
  --gray-10: #e8e8e8;
326
+ --brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);
327
+ --brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);
328
+ --brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
326
329
  --border-cta-border-outline-disabled: #646464;
327
- --border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
328
- --border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
329
330
  --surface-badge-video-surface: #009aed;
330
331
  --surface-badge-keynote-surface: #0a84ff;
331
332
  --surface-badge-pages-surface: #ff9500;
@@ -438,6 +439,12 @@
438
439
  --icon-icon-on-light-tertiary: var(--gray-50);
439
440
  --icon-icon-on-light-secondary: var(--gray-65);
440
441
  --icon-icon-on-light: var(--gray-100);
442
+ --border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);
443
+ --border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);
444
+ --border-toggletext-border-off-ai: var(--gray-30);
445
+ --border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);
446
+ --border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);
447
+ --border-toggletext-border-on-ai: var(--brand-box-ai-100);
441
448
  --border-toggletext-border-on-pressed: var(--box-blue-30);
442
449
  --border-toggletext-border-on-hover: var(--box-blue-20);
443
450
  --border-toggletext-border-on: var(--box-blue-05);
@@ -450,6 +457,8 @@
450
457
  --border-cta-border-secondary-disabled: var(--gray-10);
451
458
  --border-toggle-border-on: var(--box-blue-40);
452
459
  --border-contentbutton-border-selected: var(--gray-50);
460
+ --border-cta-border-ai: var(--brand-box-ai-100);
461
+ --border-card-border-ai: var(--brand-box-ai-100);
453
462
  --border-toggle-border: var(--gray-30);
454
463
  --border-badge-border: var(--gray-white);
455
464
  --border-collapsible-border: var(--gray-20);
@@ -515,6 +524,12 @@
515
524
  --border-cta-border-secondary-hover: var(--gray-30);
516
525
  --border-cta-border-secondary-pressed: var(--gray-30);
517
526
  --border-cta-border-secondary: var(--gray-30);
527
+ --surface-toggletext-surface-off-ai-pressed: var(--gray-10);
528
+ --surface-toggletext-surface-off-ai-hover: var(--gray-05);
529
+ --surface-toggletext-surface-off-ai: var(--gray-white);
530
+ --surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);
531
+ --surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);
532
+ --surface-toggletext-surface-on-ai: var(--brand-box-ai-100);
518
533
  --surface-toggletext-surface-on-pressed: var(--box-blue-30);
519
534
  --surface-toggletext-surface-on-hover: var(--box-blue-20);
520
535
  --surface-toggletext-surface-on: var(--box-blue-05);
package/tokens/tokens.d.ts CHANGED
@@ -228,6 +228,12 @@ export const SurfaceRadiotileSurfaceSelected: string;
228
228
  export const SurfaceToggletextSurfaceOn: string;
229
229
  export const SurfaceToggletextSurfaceOnHover: string;
230
230
  export const SurfaceToggletextSurfaceOnPressed: string;
231
+ export const SurfaceToggletextSurfaceOnAi: string;
232
+ export const SurfaceToggletextSurfaceOnAiHover: string;
233
+ export const SurfaceToggletextSurfaceOnAiPressed: string;
234
+ export const SurfaceToggletextSurfaceOffAi: string;
235
+ export const SurfaceToggletextSurfaceOffAiHover: string;
236
+ export const SurfaceToggletextSurfaceOffAiPressed: string;
231
237
  export const BorderCtaBorderSecondary: string;
232
238
  export const BorderCtaBorderSecondaryPressed: string;
233
239
  export const BorderCtaBorderSecondaryHover: string;
@@ -308,6 +314,12 @@ export const BorderToggletextBorderOffPressed: string;
308
314
  export const BorderToggletextBorderOn: string;
309
315
  export const BorderToggletextBorderOnHover: string;
310
316
  export const BorderToggletextBorderOnPressed: string;
317
+ export const BorderToggletextBorderOnAi: string;
318
+ export const BorderToggletextBorderOnAiHover: string;
319
+ export const BorderToggletextBorderOnAiPressed: string;
320
+ export const BorderToggletextBorderOffAi: string;
321
+ export const BorderToggletextBorderOffAiHover: string;
322
+ export const BorderToggletextBorderOffAiPressed: string;
311
323
  export const IconIconOnLight: string;
312
324
  export const IconIconOnLightSecondary: string;
313
325
  export const IconIconOnLightTertiary: string;
@@ -373,6 +385,9 @@ export const BrandDocgenTertiary: string;
373
385
  export const BrandSignPrimary: string;
374
386
  export const BrandSignSecondary: string;
375
387
  export const BrandSignTertiary: string;
388
+ export const BrandBoxAi100: string;
389
+ export const BrandBoxAi120: string;
390
+ export const BrandBoxAi140: string;
376
391
  export const Gray10: string;
377
392
  export const Gray20: string;
378
393
  export const Gray30: string;
package/tokens/tokens.js CHANGED
@@ -228,6 +228,12 @@ export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
228
228
  export const SurfaceToggletextSurfaceOn = '#f2f7fd';
229
229
  export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
230
230
  export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
231
+ export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
232
+ export const SurfaceToggletextSurfaceOnAiHover = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
233
+ export const SurfaceToggletextSurfaceOnAiPressed = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
234
+ export const SurfaceToggletextSurfaceOffAi = '#ffffff';
235
+ export const SurfaceToggletextSurfaceOffAiHover = '#f4f4f4';
236
+ export const SurfaceToggletextSurfaceOffAiPressed = '#e8e8e8';
231
237
  export const BorderCtaBorderSecondary = '#bcbcbc';
232
238
  export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
233
239
  export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -308,6 +314,12 @@ export const BorderToggletextBorderOffPressed = '#6F6F6F';
308
314
  export const BorderToggletextBorderOn = '#f2f7fd';
309
315
  export const BorderToggletextBorderOnHover = '#ccdff7';
310
316
  export const BorderToggletextBorderOnPressed = '#b2cff2';
317
+ export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
318
+ export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
319
+ export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
320
+ export const BorderToggletextBorderOffAi = '#bcbcbc';
321
+ export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
322
+ export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
311
323
  export const IconIconOnLight = '#222222';
312
324
  export const IconIconOnLightSecondary = '#6F6F6F';
313
325
  export const IconIconOnLightTertiary = '#909090';
@@ -373,6 +385,9 @@ export const BrandDocgenTertiary = '#ece9f8';
373
385
  export const BrandSignPrimary = '#003c84';
374
386
  export const BrandSignSecondary = '#ccd8e6';
375
387
  export const BrandSignTertiary = '#e5ebf2';
388
+ export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
389
+ export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
390
+ export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
376
391
  export const Gray10 = '#e8e8e8';
377
392
  export const Gray20 = '#d3d3d3';
378
393
  export const Gray30 = '#bcbcbc';
package/tokens/tokens.json CHANGED
@@ -229,6 +229,12 @@
229
229
  "SurfaceToggletextSurfaceOn": "#f2f7fd",
230
230
  "SurfaceToggletextSurfaceOnHover": "#ccdff7",
231
231
  "SurfaceToggletextSurfaceOnPressed": "#b2cff2",
232
+ "SurfaceToggletextSurfaceOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
233
+ "SurfaceToggletextSurfaceOnAiHover": "linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)",
234
+ "SurfaceToggletextSurfaceOnAiPressed": "linear-gradient(135deg, #980284 0%, #174F96 100%)",
235
+ "SurfaceToggletextSurfaceOffAi": "#ffffff",
236
+ "SurfaceToggletextSurfaceOffAiHover": "#f4f4f4",
237
+ "SurfaceToggletextSurfaceOffAiPressed": "#e8e8e8",
232
238
  "BorderCtaBorderSecondary": "#bcbcbc",
233
239
  "BorderCtaBorderSecondaryPressed": "#bcbcbc",
234
240
  "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -309,6 +315,12 @@
309
315
  "BorderToggletextBorderOn": "#f2f7fd",
310
316
  "BorderToggletextBorderOnHover": "#ccdff7",
311
317
  "BorderToggletextBorderOnPressed": "#b2cff2",
318
+ "BorderToggletextBorderOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
319
+ "BorderToggletextBorderOnAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
320
+ "BorderToggletextBorderOnAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
321
+ "BorderToggletextBorderOffAi": "#bcbcbc",
322
+ "BorderToggletextBorderOffAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
323
+ "BorderToggletextBorderOffAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
312
324
  "IconIconOnLight": "#222222",
313
325
  "IconIconOnLightSecondary": "#6F6F6F",
314
326
  "IconIconOnLightTertiary": "#909090",
@@ -374,6 +386,9 @@
374
386
  "BrandSignPrimary": "#003c84",
375
387
  "BrandSignSecondary": "#ccd8e6",
376
388
  "BrandSignTertiary": "#e5ebf2",
389
+ "BrandBoxAi100": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
390
+ "BrandBoxAi120": "linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)",
391
+ "BrandBoxAi140": "linear-gradient(135deg, #980284 0%, #174F96 100%)",
377
392
  "Gray10": "#e8e8e8",
378
393
  "Gray20": "#d3d3d3",
379
394
  "Gray30": "#bcbcbc",
package/tokens/tokens.scss CHANGED
@@ -228,6 +228,12 @@ $surface-radiotile-surface-selected: #f2f7fd !default;
228
228
  $surface-toggletext-surface-on: #f2f7fd !default;
229
229
  $surface-toggletext-surface-on-hover: #ccdff7 !default;
230
230
  $surface-toggletext-surface-on-pressed: #b2cff2 !default;
231
+ $surface-toggletext-surface-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
232
+ $surface-toggletext-surface-on-ai-hover: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;
233
+ $surface-toggletext-surface-on-ai-pressed: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;
234
+ $surface-toggletext-surface-off-ai: #ffffff !default;
235
+ $surface-toggletext-surface-off-ai-hover: #f4f4f4 !default;
236
+ $surface-toggletext-surface-off-ai-pressed: #e8e8e8 !default;
231
237
  $border-cta-border-secondary: #bcbcbc !default;
232
238
  $border-cta-border-secondary-pressed: #bcbcbc !default;
233
239
  $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -308,6 +314,12 @@ $border-toggletext-border-off-pressed: #6f6f6f !default;
308
314
  $border-toggletext-border-on: #f2f7fd !default;
309
315
  $border-toggletext-border-on-hover: #ccdff7 !default;
310
316
  $border-toggletext-border-on-pressed: #b2cff2 !default;
317
+ $border-toggletext-border-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
318
+ $border-toggletext-border-on-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
319
+ $border-toggletext-border-on-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
320
+ $border-toggletext-border-off-ai: #bcbcbc !default;
321
+ $border-toggletext-border-off-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
322
+ $border-toggletext-border-off-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
311
323
  $icon-icon-on-light: #222222 !default;
312
324
  $icon-icon-on-light-secondary: #6f6f6f !default;
313
325
  $icon-icon-on-light-tertiary: #909090 !default;
@@ -373,6 +385,9 @@ $brand-docgen-tertiary: #ece9f8 !default;
373
385
  $brand-sign-primary: #003c84 !default;
374
386
  $brand-sign-secondary: #ccd8e6 !default;
375
387
  $brand-sign-tertiary: #e5ebf2 !default;
388
+ $brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
389
+ $brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;
390
+ $brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;
376
391
  $gray-10: #e8e8e8 !default;
377
392
  $gray-20: #d3d3d3 !default;
378
393
  $gray-30: #bcbcbc !default;
@@ -980,6 +995,12 @@ $tokens: (
980
995
  'toggletext-surface-on': $surface-toggletext-surface-on,
981
996
  'toggletext-surface-on-hover': $surface-toggletext-surface-on-hover,
982
997
  'toggletext-surface-on-pressed': $surface-toggletext-surface-on-pressed,
998
+ 'toggletext-surface-on-ai': $surface-toggletext-surface-on-ai,
999
+ 'toggletext-surface-on-ai-hover': $surface-toggletext-surface-on-ai-hover,
1000
+ 'toggletext-surface-on-ai-pressed': $surface-toggletext-surface-on-ai-pressed,
1001
+ 'toggletext-surface-off-ai': $surface-toggletext-surface-off-ai,
1002
+ 'toggletext-surface-off-ai-hover': $surface-toggletext-surface-off-ai-hover,
1003
+ 'toggletext-surface-off-ai-pressed': $surface-toggletext-surface-off-ai-pressed,
983
1004
  ),
984
1005
  'Border': (
985
1006
  'cta-border-secondary': $border-cta-border-secondary,
@@ -1062,6 +1083,12 @@ $tokens: (
1062
1083
  'toggletext-border-on': $border-toggletext-border-on,
1063
1084
  'toggletext-border-on-hover': $border-toggletext-border-on-hover,
1064
1085
  'toggletext-border-on-pressed': $border-toggletext-border-on-pressed,
1086
+ 'toggletext-border-on-ai': $border-toggletext-border-on-ai,
1087
+ 'toggletext-border-on-ai-hover': $border-toggletext-border-on-ai-hover,
1088
+ 'toggletext-border-on-ai-pressed': $border-toggletext-border-on-ai-pressed,
1089
+ 'toggletext-border-off-ai': $border-toggletext-border-off-ai,
1090
+ 'toggletext-border-off-ai-hover': $border-toggletext-border-off-ai-hover,
1091
+ 'toggletext-border-off-ai-pressed': $border-toggletext-border-off-ai-pressed,
1065
1092
  ),
1066
1093
  'Icon': (
1067
1094
  'icon-on-light': $icon-icon-on-light,
@@ -1137,6 +1164,11 @@ $tokens: (
1137
1164
  'sign-primary': $brand-sign-primary,
1138
1165
  'sign-secondary': $brand-sign-secondary,
1139
1166
  'sign-tertiary': $brand-sign-tertiary,
1167
+ 'BoxAI': (
1168
+ '100': $brand-box-ai-100,
1169
+ '120': $brand-box-ai-120,
1170
+ '140': $brand-box-ai-140,
1171
+ ),
1140
1172
  ),
1141
1173
  'Gray': (
1142
1174
  '10': $gray-10,