@box/blueprint-web-assets 4.4.2 → 4.6.0

package/icons/Fill/Link.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgLink: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLink;

package/icons/Fill/Link.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgLink = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#909090', d: "M7.873 3.881a3.003 3.003 0 1 1 4.246 4.246l-.58.58a1.001 1.001 0 0 0 1.415 1.416l.58-.58a5.004 5.004 0 1 0-7.077-7.077l-.58.58a1 1 0 0 0 1.415 1.415l.58-.58ZM3.881 7.873a3.003 3.003 0 1 0 4.246 4.246l.58-.58a1.001 1.001 0 0 1 1.416 1.415l-.58.58a5.004 5.004 0 1 1-7.077-7.077l.58-.58a1 1 0 0 1 1.415 1.415l-.58.58Z" }), _jsx("path", { fill: props.color || '#909090', d: "M5.29 9.294a1 1 0 0 0 1.416 1.415l4.003-4.003a1 1 0 0 0-1.415-1.415L5.29 9.294Z" })] }));
+export default SvgLink;

package/icons/Fill/LinkBroken.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgLinkBroken: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLinkBroken;

package/icons/Fill/LinkBroken.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgLinkBroken = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#909090', d: "M7.873 3.881a2.998 2.998 0 0 1 4.243 0 3.004 3.004 0 0 1 0 4.246l-.705.705-1.97-.859h.001L1.75 4.628a.6.6 0 0 0-.39 1.132l1.258.548-.148.148a5.007 5.007 0 0 0 0 7.077 4.997 4.997 0 0 0 7.072 0l.58-.58a1.001 1.001 0 0 0-1.415-1.415l-.58.58a2.998 2.998 0 0 1-4.242 0 3.004 3.004 0 0 1 0-4.246l.704-.705 1.97.859-1.266 1.267a1.001 1.001 0 0 0 1.414 1.415L8.53 8.886l5.631 2.455a.6.6 0 1 0 .48-1.101L13.38 9.69l.149-.149a5.007 5.007 0 0 0 0-7.076 4.997 4.997 0 0 0-7.071 0l-.58.58a1.001 1.001 0 0 0 1.414 1.415l.58-.58Z" }), _jsx("path", { fill: props.color || '#909090', d: "m8.612 5.972 1.972.858.123-.124a1.001 1.001 0 0 0-1.414-1.415l-.681.681Z" })] }));
+export default SvgLinkBroken;

package/icons/Fill/Metadata.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgMetadata: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgMetadata;

package/icons/Fill/Metadata.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgMetadata = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsx("path", { fill: props.color || '#909090', fillRule: "evenodd", d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM6.832 5.445a1 1 0 0 0-1.802.312l-1 4a1 1 0 1 0 1.94.486l.452-1.807.746 1.119a1 1 0 0 0 1.664 0l.746-1.12.452 1.807a1 1 0 1 0 1.94-.485l-1-4a1 1 0 0 0-1.802-.312L8 7.197 6.832 5.445Z", clipRule: "evenodd" }) }));
+export default SvgMetadata;

package/icons/Fill/Rocket.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgRocket: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgRocket;

package/icons/Fill/Rocket.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgRocket = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: _jsx("path", { fill: props.color || '#909090', fillRule: "evenodd", d: "M14 1a1 1 0 0 1 1 1v.93a5.464 5.464 0 0 1-1.61 3.891L11.5 8.705V12.5a.497.497 0 0 1-.19.39l-2.5 2a.5.5 0 0 1-.804-.319l-.427-3.037c0 .011.002-.033 0 0-.13.01-.27.031-.391.031-.883 0-1.567-.239-2.041-.71-.535-.536-.783-1.359-.711-2.42.01.001-.011 0 0 0h-.001l-3.004-.43a.499.499 0 0 1-.32-.809l2-2.5A.502.502 0 0 1 3.5 4.5h3.795L9.18 2.611A5.46 5.46 0 0 1 13.07 1H14ZM5.29 13.001a.5.5 0 0 1 .707.707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707Zm-2-1a.5.5 0 0 1 .707.707l-1.414 1.414a.5.5 0 0 1-.707-.707l1.414-1.414Zm-1-2a.5.5 0 0 1 .707.707l-.707.707a.5.5 0 0 1-.707-.707l.707-.707Zm5.71-3A1 1 0 1 1 8.002 9a1 1 0 0 1 0-2Z", clipRule: "evenodd" }) }));
+export default SvgRocket;

package/icons/Fill/index.d.ts

@@ -123,6 +123,8 @@ export { default as InfoDoc } from './InfoDoc';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
 export { default as Letters } from './Letters';
+export { default as Link } from './Link';
+export { default as LinkBroken } from './LinkBroken';
 export { default as List } from './List';
 export { default as ListBullet } from './ListBullet';
 export { default as ListCheck } from './ListCheck';
@@ -130,6 +132,7 @@ export { default as ListNumber } from './ListNumber';
 export { default as Loader } from './Loader';
 export { default as LoaderBadge } from './LoaderBadge';
 export { default as Lock } from './Lock';
+export { default as Metadata } from './Metadata';
 export { default as Minus } from './Minus';
 export { default as Move } from './Move';
 export { default as Numbers } from './Numbers';
@@ -155,6 +158,7 @@ export { default as Region } from './Region';
 export { default as Relay } from './Relay';
 export { default as RelayClassic } from './RelayClassic';
 export { default as RibbonStar } from './RibbonStar';
+export { default as Rocket } from './Rocket';
 export { default as Scribble } from './Scribble';
 export { default as Search } from './Search';
 export { default as Settings } from './Settings';

package/icons/Fill/index.js

@@ -123,6 +123,8 @@ export { default as InfoDoc } from './InfoDoc';
 export { default as Keyboard } from './Keyboard';
 export { default as LargeList } from './LargeList';
 export { default as Letters } from './Letters';
+export { default as Link } from './Link';
+export { default as LinkBroken } from './LinkBroken';
 export { default as List } from './List';
 export { default as ListBullet } from './ListBullet';
 export { default as ListCheck } from './ListCheck';
@@ -130,6 +132,7 @@ export { default as ListNumber } from './ListNumber';
 export { default as Loader } from './Loader';
 export { default as LoaderBadge } from './LoaderBadge';
 export { default as Lock } from './Lock';
+export { default as Metadata } from './Metadata';
 export { default as Minus } from './Minus';
 export { default as Move } from './Move';
 export { default as Numbers } from './Numbers';
@@ -155,6 +158,7 @@ export { default as Region } from './Region';
 export { default as Relay } from './Relay';
 export { default as RelayClassic } from './RelayClassic';
 export { default as RibbonStar } from './RibbonStar';
+export { default as Rocket } from './Rocket';
 export { default as Scribble } from './Scribble';
 export { default as Search } from './Search';
 export { default as Settings } from './Settings';

package/icons/Line/Card.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgCard: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgCard;

package/icons/Line/Card.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgCard = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", role: "img", ...props, children: [_jsx("path", { fill: props.color || '#222222', d: "M3.5 6a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9ZM3 9.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5ZM11.5 9a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z" }), _jsx("path", { fill: props.color || '#222222', fillRule: "evenodd", d: "M1 3.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3.5ZM2 12V4h12v8H2Z", clipRule: "evenodd" })] }));
+export default SvgCard;

package/icons/Line/index.d.ts

@@ -39,6 +39,7 @@ export { default as Buildings } from './Buildings';
 export { default as Calendar } from './Calendar';
 export { default as CalendarPause } from './CalendarPause';
 export { default as CalendarRecurring } from './CalendarRecurring';
+export { default as Card } from './Card';
 export { default as Checkmark } from './Checkmark';
 export { default as CheckmarkBadge } from './CheckmarkBadge';
 export { default as CheckmarkBubble } from './CheckmarkBubble';

package/icons/Line/index.js

@@ -39,6 +39,7 @@ export { default as Buildings } from './Buildings';
 export { default as Calendar } from './Calendar';
 export { default as CalendarPause } from './CalendarPause';
 export { default as CalendarRecurring } from './CalendarRecurring';
+export { default as Card } from './Card';
 export { default as Checkmark } from './Checkmark';
 export { default as CheckmarkBadge } from './CheckmarkBadge';
 export { default as CheckmarkBubble } from './CheckmarkBubble';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.4.2",
+    "version": "4.6.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -100,5 +100,5 @@
     "devDependencies": {
         "chalk": "4.1.2"
     },
-    "gitHead": "4c855a7338cbcd04aa6d8b3f5ec2fa4d00c6bb02"
+    "gitHead": "1adafa29c6413d2968bee66ba80f70ce366b6064"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 06 Feb 2024 23:50:03 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 export const BackgroundBackground: string;
@@ -217,6 +217,8 @@ export const SurfaceCtaSurfacePromoHover: string;
 export const SurfaceCtaSurfacePromoPressed: string;
 export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
+export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
+export const SurfaceContentswitcherSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -281,6 +283,9 @@ export const BorderFilterchipBorderMultiOn: string;
 export const BorderCollapsibleBorder: string;
 export const BorderBadgeBorder: string;
 export const BorderToggleBorder: string;
+export const BorderCardBorderAi: string;
+export const BorderCtaBorderAi: string;
+export const BorderContentbuttonBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 06 Feb 2024 23:50:03 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -142,11 +142,11 @@ export const SurfaceInputchipSurface = '#e8e8e8';
 export const SurfaceInputchipSurfaceHover = '#e8e8e8';
 export const SurfaceInputchipSurfaceError = '#fdebee';
 export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
 export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
 export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
 export const SurfaceFilterchipSurfaceSingleOnHover = '#0061d5';
 export const SurfaceSlidertrackSurface = '#6F6F6F';
@@ -217,6 +217,8 @@ export const SurfaceCtaSurfacePromoHover = '#4826c2';
 export const SurfaceCtaSurfacePromoPressed = '#3a1e9b';
 export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
+export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
+export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -281,6 +283,9 @@ export const BorderFilterchipBorderMultiOn = '#91c2fd';
 export const BorderCollapsibleBorder = '#d3d3d3';
 export const BorderBadgeBorder = '#ffffff';
 export const BorderToggleBorder = '#bcbcbc';
+export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderContentbuttonBorderSelected = '#909090';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';

package/tokens/tokens-css-vars.scss

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Tue, 06 Feb 2024 23:50:03 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 :root {
-    --notification-default-paragraph-indent: 0;
+    --notification-default-paragraph-indent: 0rem;
     --notification-default-paragraph-spacing: 0;
     --notification-default-text-case: none;
     --notification-default-text-decoration: none;
@@ -92,7 +92,7 @@
     --radius-1: 0.25rem;
     --radius-05: 0.125rem;
     --link-default-text-case: none;
-    --link-default-paragraph-indent: 0;
+    --link-default-paragraph-indent: 0rem;
     --link-default-paragraph-spacing: 0;
     --link-default-letter-spacing: 0.01875rem;
     --link-default-font-size: 0.875rem;
@@ -304,11 +304,11 @@
     --box-blue-30: #b2cff2;
     --box-blue-20: #ccdff7;
     --box-blue-10: #e5effa;
-    --gray-white: #fff;
-    --gray-black: #000;
+    --gray-white: #ffffff;
+    --gray-black: #000000;
     --gray-05: #f4f4f4;
     --gray-02: #fbfbfb;
-    --gray-100: #222;
+    --gray-100: #222222;
     --gray-90: #383838;
     --gray-80: #4e4e4e;
     --gray-65: #6f6f6f;
@@ -317,6 +317,8 @@
     --gray-30: #bcbcbc;
     --gray-20: #d3d3d3;
     --gray-10: #e8e8e8;
+    --border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
+    --border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
     --surface-badge-video-surface: #009aed;
     --surface-badge-keynote-surface: #0a84ff;
     --surface-badge-pages-surface: #ff9500;
@@ -413,6 +415,7 @@
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-contentbutton-border-selected: var(--gray-50);
     --border-toggle-border: var(--gray-30);
     --border-badge-border: var(--gray-white);
     --border-collapsible-border: var(--gray-20);
@@ -477,6 +480,8 @@
     --border-cta-border-secondary-hover: var(--gray-30);
     --border-cta-border-secondary-pressed: var(--gray-30);
     --border-cta-border-secondary: var(--gray-30);
+    --surface-contentswitcher-surface: var(--gray-10);
+    --surface-contentbutton-surface-surface-selected: var(--gray-white);
     --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
     --surface-cta-surface-promo-focus: var(--grimace-100);
     --surface-cta-surface-promo-pressed: var(--grimace-120);
@@ -541,11 +546,11 @@
     --surface-slidertrack-surface: var(--gray-65);
     --surface-filterchip-surface-single-on-hover: var(--box-blue-100);
     --surface-filterchip-surface-single-on: var(--box-blue-100);
-    --surface-filterchip-surface-single-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-single-hover: var(--black-opacity-08);
     --surface-filterchip-surface-single: var(--black-opacity-04);
     --surface-filterchip-surface-multi-on-hover: var(--box-blue-10);
     --surface-filterchip-surface-multi-on: var(--box-blue-10);
-    --surface-filterchip-surface-multi-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-multi-hover: var(--black-opacity-08);
     --surface-filterchip-surface-multi: var(--black-opacity-04);
     --surface-inputchip-surface-error: var(--watermelon-red-10);
     --surface-inputchip-surface-hover: var(--gray-10);

package/tokens/tokens.d.ts

@@ -212,6 +212,8 @@ export const SurfaceCtaSurfacePromoHover: string;
 export const SurfaceCtaSurfacePromoPressed: string;
 export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
+export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
+export const SurfaceContentswitcherSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -276,6 +278,9 @@ export const BorderFilterchipBorderMultiOn: string;
 export const BorderCollapsibleBorder: string;
 export const BorderBadgeBorder: string;
 export const BorderToggleBorder: string;
+export const BorderCardBorderAi: string;
+export const BorderCtaBorderAi: string;
+export const BorderContentbuttonBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;

package/tokens/tokens.js

@@ -137,11 +137,11 @@ export const SurfaceInputchipSurface = '#e8e8e8';
 export const SurfaceInputchipSurfaceHover = '#e8e8e8';
 export const SurfaceInputchipSurfaceError = '#fdebee';
 export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
 export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
 export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
 export const SurfaceFilterchipSurfaceSingleOnHover = '#0061d5';
 export const SurfaceSlidertrackSurface = '#6F6F6F';
@@ -212,6 +212,8 @@ export const SurfaceCtaSurfacePromoHover = '#4826c2';
 export const SurfaceCtaSurfacePromoPressed = '#3a1e9b';
 export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
+export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
+export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -276,6 +278,9 @@ export const BorderFilterchipBorderMultiOn = '#91c2fd';
 export const BorderCollapsibleBorder = '#d3d3d3';
 export const BorderBadgeBorder = '#ffffff';
 export const BorderToggleBorder = '#bcbcbc';
+export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderContentbuttonBorderSelected = '#909090';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';

package/tokens/tokens.json

@@ -138,11 +138,11 @@
     "SurfaceInputchipSurfaceHover": "#e8e8e8",
     "SurfaceInputchipSurfaceError": "#fdebee",
     "SurfaceFilterchipSurfaceMulti": "rgba(0,0,0,0.04)",
-    "SurfaceFilterchipSurfaceMultiHover": "rgba(0,0,0,0.04)",
+    "SurfaceFilterchipSurfaceMultiHover": "rgba(0,0,0,0.08)",
     "SurfaceFilterchipSurfaceMultiOn": "#e5effa",
     "SurfaceFilterchipSurfaceMultiOnHover": "#e5effa",
     "SurfaceFilterchipSurfaceSingle": "rgba(0,0,0,0.04)",
-    "SurfaceFilterchipSurfaceSingleHover": "rgba(0,0,0,0.04)",
+    "SurfaceFilterchipSurfaceSingleHover": "rgba(0,0,0,0.08)",
     "SurfaceFilterchipSurfaceSingleOn": "#0061d5",
     "SurfaceFilterchipSurfaceSingleOnHover": "#0061d5",
     "SurfaceSlidertrackSurface": "#6F6F6F",
@@ -213,6 +213,8 @@
     "SurfaceCtaSurfacePromoPressed": "#3a1e9b",
     "SurfaceCtaSurfacePromoFocus": "#4826c2",
     "SurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
+    "SurfaceContentbuttonSurfaceSurfaceSelected": "#ffffff",
+    "SurfaceContentswitcherSurface": "#e8e8e8",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -277,6 +279,9 @@
     "BorderCollapsibleBorder": "#d3d3d3",
     "BorderBadgeBorder": "#ffffff",
     "BorderToggleBorder": "#bcbcbc",
+    "BorderCardBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderCtaBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderContentbuttonBorderSelected": "#909090",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",

package/tokens/tokens.scss

@@ -137,11 +137,11 @@ $surface-inputchip-surface: #e8e8e8 !default;
 $surface-inputchip-surface-hover: #e8e8e8 !default;
 $surface-inputchip-surface-error: #fdebee !default;
 $surface-filterchip-surface-multi: rgba(0, 0, 0, 0.04) !default;
-$surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.04) !default;
+$surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.08) !default;
 $surface-filterchip-surface-multi-on: #e5effa !default;
 $surface-filterchip-surface-multi-on-hover: #e5effa !default;
 $surface-filterchip-surface-single: rgba(0, 0, 0, 0.04) !default;
-$surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.04) !default;
+$surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.08) !default;
 $surface-filterchip-surface-single-on: #0061d5 !default;
 $surface-filterchip-surface-single-on-hover: #0061d5 !default;
 $surface-slidertrack-surface: #6f6f6f !default;
@@ -212,6 +212,8 @@ $surface-cta-surface-promo-hover: #4826c2 !default;
 $surface-cta-surface-promo-pressed: #3a1e9b !default;
 $surface-cta-surface-promo-focus: #4826c2 !default;
 $surface-cta-surface-promo-focus-pressed: #3a1e9b !default;
+$surface-contentbutton-surface-surface-selected: #ffffff !default;
+$surface-contentswitcher-surface: #e8e8e8 !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -276,6 +278,9 @@ $border-filterchip-border-multi-on: #91c2fd !default;
 $border-collapsible-border: #d3d3d3 !default;
 $border-badge-border: #ffffff !default;
 $border-toggle-border: #bcbcbc !default;
+$border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-contentbutton-border-selected: #909090 !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -910,6 +915,8 @@ $tokens: (
         'cta-surface-promo-pressed': $surface-cta-surface-promo-pressed,
         'cta-surface-promo-focus': $surface-cta-surface-promo-focus,
         'cta-surface-promo-focus-pressed': $surface-cta-surface-promo-focus-pressed,
+        'contentbutton-surface-surface-selected': $surface-contentbutton-surface-surface-selected,
+        'contentswitcher-surface': $surface-contentswitcher-surface,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -976,6 +983,9 @@ $tokens: (
         'collapsible-border': $border-collapsible-border,
         'badge-border': $border-badge-border,
         'toggle-border': $border-toggle-border,
+        'card-border-ai': $border-card-border-ai,
+        'cta-border-ai': $border-cta-border-ai,
+        'contentbutton-border-selected': $border-contentbutton-border-selected,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,