@bethinkpl/design-system 37.0.6 → 38.0.0

package/dist/lib/js/components/Banner/Banner.consts.d.ts

@@ -3,6 +3,7 @@ import { Value } from '../../utils/type.utils';
 export declare const BANNER_COLORS: {
     readonly DEFAULT: "default";
     readonly NEUTRAL: "neutral";
+    readonly PRIMARY: "primary";
     readonly INFO: "info";
     readonly SUCCESS: "success";
     readonly WARNING: "warning";

package/dist/lib/js/components/Banner/Banner.vue.d.ts

@@ -28,6 +28,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     size: {
         type: import('vue').PropType<string>;
     };
+    isTitleWeak: {
+        type: import('vue').PropType<boolean>;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => void;
     "button-clicked": () => void;
@@ -53,6 +56,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     size: {
         type: import('vue').PropType<string>;
     };
+    isTitleWeak: {
+        type: import('vue').PropType<boolean>;
+    };
 }>> & Readonly<{
     onClose?: (() => any) | undefined;
     "onButton-clicked"?: (() => any) | undefined;

package/dist/lib/js/components/Buttons/Button/Button.consts.d.ts

@@ -18,6 +18,7 @@ export declare const BUTTON_COLORS: {
     readonly DANGER: "danger";
     readonly SUCCESS: "success";
     readonly INVERTED: "inverted";
+    readonly MAGIC: "magic";
 };
 export type ButtonColor = Value<typeof BUTTON_COLORS>;
 export declare const BUTTON_RADIUSES: {

package/dist/lib/js/components/Buttons/Button/useMagicGradient.d.ts

@@ -0,0 +1,5 @@
+import { MaybeRefOrGetter } from 'vue';
+
+export declare const GRADIENT_MAGIC_ICON_ID = "ds-gradient-magic-icon";
+export declare const GRADIENT_MAGIC_ICON_DISABLED_ID = "ds-gradient-magic-icon-disabled";
+export declare function useMagicGradient(enabled: MaybeRefOrGetter<boolean>): void;

package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts

@@ -29,6 +29,7 @@ export declare const ICON_BUTTON_COLORS: {
     readonly INVERTED: "inverted";
     readonly WARNING: "warning";
     readonly INFO: "info";
+    readonly MAGIC: "magic";
 };
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
 export declare const ICON_BUTTON_STATES: {

package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts

@@ -1,5 +1,5 @@
-import { ButtonElevation, ButtonRadius } from '../Button';
-import { ICON_BUTTON_STATES, IconButtonColor, IconButtonColorScheme, IconButtonSize, IconButtonType } from './IconButton.consts';
+import { ButtonElevation, ButtonRadius, ButtonState } from '../Button';
+import { ICON_BUTTON_STATES, IconButtonColor, IconButtonColorScheme, IconButtonSize, IconButtonState, IconButtonType } from './IconButton.consts';
 import { Value } from '../../../utils/type.utils';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -48,6 +48,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         validator(value: Value<typeof ICON_BUTTON_STATES>): boolean;
     };
 }>, {
+    ICON_BUTTON_STATE_MAP: Record<IconButtonState, ButtonState>;
     isHovered: import('vue').Ref<boolean>;
     mouseOver: () => void;
     mouseLeave: () => void;
@@ -371,6 +372,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     BUTTON_COLORS: Readonly<{
         readonly PRIMARY: "primary";
@@ -378,6 +380,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly DANGER: "danger";
         readonly SUCCESS: "success";
         readonly INVERTED: "inverted";
+        readonly MAGIC: "magic";
     }>;
 }, {
     iconSize(): string;

package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts

@@ -693,6 +693,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../Buttons/Button').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -1016,6 +1017,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -1023,6 +1025,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts

@@ -70,6 +70,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     };
     ICON_BUTTON_SIZES: {
         readonly XX_SMALL: "xx-small";
@@ -806,6 +807,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
             readonly VERTICAL: "vertical";
@@ -1027,6 +1029,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
             };
         }>, {
+            ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../..').ButtonState>;
             isHovered: import('vue').Ref<boolean>;
             mouseOver: () => void;
             mouseLeave: () => void;
@@ -1350,6 +1353,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly INVERTED: "inverted";
                 readonly WARNING: "warning";
                 readonly INFO: "info";
+                readonly MAGIC: "magic";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";
@@ -1357,6 +1361,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly DANGER: "danger";
                 readonly SUCCESS: "success";
                 readonly INVERTED: "inverted";
+                readonly MAGIC: "magic";
             }>;
         }, {
             iconSize(): string;

package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts

@@ -58,6 +58,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -469,6 +470,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: Value<typeof ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../..').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -792,6 +794,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -799,6 +802,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts

@@ -370,6 +370,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
         readonly VERTICAL: "vertical";
@@ -591,6 +592,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../..').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -914,6 +916,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -921,6 +924,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts

@@ -104,6 +104,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly DANGER: "danger";
         readonly SUCCESS: "success";
         readonly INVERTED: "inverted";
+        readonly MAGIC: "magic";
     };
     BUTTON_ELEVATIONS: {
         readonly NONE: "none";
@@ -399,6 +400,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     };
     ICON_SIZES: {
         XXX_SMALL: string;
@@ -721,6 +723,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -1044,6 +1047,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -1051,6 +1055,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts

@@ -239,6 +239,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         };
         BUTTON_ELEVATIONS: {
             readonly NONE: "none";
@@ -534,6 +535,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         };
         ICON_SIZES: {
             XXX_SMALL: string;
@@ -856,6 +858,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 validator(value: import('../../../utils/type.utils').Value<typeof import('../../..').ICON_BUTTON_STATES>): boolean;
             };
         }>, {
+            ICON_BUTTON_STATE_MAP: Record<import('../../..').IconButtonState, ButtonState>;
             isHovered: import('vue').Ref<boolean>;
             mouseOver: () => void;
             mouseLeave: () => void;
@@ -1179,6 +1182,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly INVERTED: "inverted";
                 readonly WARNING: "warning";
                 readonly INFO: "info";
+                readonly MAGIC: "magic";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";
@@ -1186,6 +1190,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly DANGER: "danger";
                 readonly SUCCESS: "success";
                 readonly INVERTED: "inverted";
+                readonly MAGIC: "magic";
             }>;
         }, {
             iconSize(): string;

package/dist/lib/js/components/Pagination/Pagination.vue.d.ts

@@ -52,6 +52,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -423,6 +424,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../utils/type.utils').Value<typeof ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../Buttons/IconButton').IconButtonState, import('../..').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -746,6 +748,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -753,6 +756,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -307,6 +307,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     ICON_SIZES: Readonly<{
         XXX_SMALL: string;
@@ -687,6 +688,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../Buttons/Button').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -1010,6 +1012,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -1017,6 +1020,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -336,6 +336,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly INVERTED: "inverted";
         readonly WARNING: "warning";
         readonly INFO: "info";
+        readonly MAGIC: "magic";
     }>;
     BUTTON_TYPES: Readonly<{
         readonly FILLED: "filled";
@@ -659,6 +660,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
         };
     }>, {
+        ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../Buttons/Button').ButtonState>;
         isHovered: import('vue').Ref<boolean>;
         mouseOver: () => void;
         mouseLeave: () => void;
@@ -982,6 +984,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly INVERTED: "inverted";
             readonly WARNING: "warning";
             readonly INFO: "info";
+            readonly MAGIC: "magic";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -989,6 +992,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DANGER: "danger";
             readonly SUCCESS: "success";
             readonly INVERTED: "inverted";
+            readonly MAGIC: "magic";
         }>;
     }, {
         iconSize(): string;

package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts

@@ -279,6 +279,7 @@ export declare const data: () => {
     BANNER_COLORS: Readonly<{
         readonly DEFAULT: "default";
         readonly NEUTRAL: "neutral";
+        readonly PRIMARY: "primary";
         readonly INFO: "info";
         readonly SUCCESS: "success";
         readonly WARNING: "warning";
@@ -321,6 +322,9 @@ export declare const components: {
             size: {
                 type: import('vue').PropType<string>;
             };
+            isTitleWeak: {
+                type: import('vue').PropType<boolean>;
+            };
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
@@ -356,6 +360,9 @@ export declare const components: {
             size: {
                 type: import('vue').PropType<string>;
             };
+            isTitleWeak: {
+                type: import('vue').PropType<boolean>;
+            };
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
@@ -385,6 +392,9 @@ export declare const components: {
         size: {
             type: import('vue').PropType<string>;
         };
+        isTitleWeak: {
+            type: import('vue').PropType<boolean>;
+        };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onButton-clicked"?: (() => any) | undefined;

package/dist/lib/js/components/Toast/Toast.vue.d.ts

@@ -55,6 +55,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly DANGER: "danger";
         readonly SUCCESS: "success";
         readonly INVERTED: "inverted";
+        readonly MAGIC: "magic";
     }>;
     BUTTON_RADIUSES: Readonly<{
         readonly CAPSULE: "capsule";

package/lib/js/components/Banner/Banner.consts.ts

@@ -3,6 +3,7 @@ import { Value } from '../../utils/type.utils';
 export const BANNER_COLORS = {
 	DEFAULT: 'default',
 	NEUTRAL: 'neutral',
+	PRIMARY: 'primary',
 	INFO: 'info',
 	SUCCESS: 'success',
 	WARNING: 'warning',

package/lib/js/components/Banner/Banner.spec.ts

@@ -57,6 +57,10 @@ describe('Banner', () => {
 			color: BANNER_COLORS.NEUTRAL,
 			expectedClass: '-ds-neutral',
 		},
+		{
+			color: BANNER_COLORS.PRIMARY,
+			expectedClass: '-ds-primary',
+		},
 		{
 			color: BANNER_COLORS.INFO,
 			expectedClass: '-ds-info',
@@ -88,6 +92,17 @@ describe('Banner', () => {
 		expect(wrapper.find('.ds-banner__inner').classes()).toContain(expectedClass);
 	});
 
+	it('renders title with weak weight when isTitleWeak is set', () => {
+		const wrapper = mount(Banner, {
+			props: {
+				title: 'Test Banner',
+				isTitleWeak: true,
+			},
+		});
+
+		expect(wrapper.find('.ds-banner__title').classes()).toContain('-ds-titleWeak');
+	});
+
 	it('handles closable', async () => {
 		const onClose = vi.fn();
 		const wrapper = mount(Banner, {

package/lib/js/components/Banner/Banner.stories.ts

@@ -40,6 +40,7 @@ const StoryTemplate: StoryFn<typeof Banner> = (args) => {
 						:is-expanded="isExpanded"
 						:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
 						:size="size"
+						:is-title-weak="isTitleWeak"
 						@update:isExpanded="onIsExpandedUpdated"
 				>
 				<template v-if="defaultText" #defaultText><span v-html="defaultText" /></template>
@@ -61,6 +62,7 @@ const args = {
 	icon: null,
 	isIconHiddenOnMobile: false,
 	title: 'Banner Title',
+	isTitleWeak: false,
 	buttonText: '',
 	closable: false,
 	isExpanded: false,
@@ -86,6 +88,9 @@ const argTypes = {
 	title: {
 		control: 'text',
 	},
+	isTitleWeak: {
+		control: 'boolean',
+	},
 	buttonText: {
 		control: 'text',
 	},

package/lib/js/components/Banner/Banner.vue

@@ -22,7 +22,7 @@
 
 					<div class="ds-banner__textWrapper">
 						<div class="ds-banner__titleWrapper">
-							<div class="ds-banner__title">
+							<div class="ds-banner__title" :class="{ '-ds-titleWeak': isTitleWeak }">
 								<div
 									v-if="icon && size === BANNER_SIZES.SMALL"
 									class="ds-banner__iconWrapperSmall"
@@ -201,6 +201,13 @@
 			border-color: $color-accent-border-weak;
 		}
 
+		&.-ds-primary {
+			--ds-banner-title-color: #{$color-primary-text-strong};
+
+			background-color: $color-primary-background;
+			border-color: $color-primary-border-weak;
+		}
+
 		&.-ds-small {
 			#{$self}__header {
 				padding: 0;
@@ -250,6 +257,10 @@
 		color: var(--ds-banner-title-color);
 		display: flex;
 		gap: $space-3;
+
+		&.-ds-titleWeak {
+			@include heading-s-default-regular;
+		}
 	}
 
 	&__iconWrapperSmall {
@@ -338,6 +349,7 @@ const {
 	color = BANNER_COLORS.DEFAULT,
 	isIconHiddenOnMobile = false,
 	size = BANNER_SIZES.MEDIUM,
+	isTitleWeak = false,
 } = defineProps<{
 	icon?: IconItem | null;
 	buttonText?: string;
@@ -346,6 +358,7 @@ const {
 	title: string;
 	isIconHiddenOnMobile?: boolean;
 	size?: BannerSize;
+	isTitleWeak?: boolean;
 }>();
 
 defineEmits<{
@@ -360,6 +373,7 @@ const iconColor = computed(() => {
 	const colorMap: Record<BannerColor, FeatureIconColor> = {
 		[BANNER_COLORS.DEFAULT]: FEATURE_ICON_COLOR.NEUTRAL,
 		[BANNER_COLORS.NEUTRAL]: FEATURE_ICON_COLOR.NEUTRAL,
+		[BANNER_COLORS.PRIMARY]: FEATURE_ICON_COLOR.PRIMARY,
 		[BANNER_COLORS.INFO]: FEATURE_ICON_COLOR.INFO,
 		[BANNER_COLORS.SUCCESS]: FEATURE_ICON_COLOR.SUCCESS,
 		[BANNER_COLORS.WARNING]: FEATURE_ICON_COLOR.WARNING,
@@ -376,6 +390,7 @@ function useBannerClasses() {
 		const colorMap: Record<BannerColor, string> = {
 			[BANNER_COLORS.NEUTRAL]: '-ds-neutral',
 			[BANNER_COLORS.DEFAULT]: '-ds-default',
+			[BANNER_COLORS.PRIMARY]: '-ds-primary',
 			[BANNER_COLORS.FAIL]: '-ds-fail',
 			[BANNER_COLORS.INFO]: '-ds-info',
 			[BANNER_COLORS.SUCCESS]: '-ds-success',

package/lib/js/components/Buttons/Button/Button.consts.ts

@@ -22,6 +22,7 @@ export const BUTTON_COLORS = {
 	DANGER: 'danger',
 	SUCCESS: 'success',
 	INVERTED: 'inverted',
+	MAGIC: 'magic',
 } as const;
 
 export type ButtonColor = Value<typeof BUTTON_COLORS>;

package/lib/js/components/Buttons/Button/Button.spec.ts

@@ -9,6 +9,7 @@ import {
 	BUTTON_STATES,
 	BUTTON_TYPES,
 } from './Button.consts';
+import { GRADIENT_MAGIC_ICON_DISABLED_ID, GRADIENT_MAGIC_ICON_ID } from './useMagicGradient';
 import Icon, { ICONS } from '../../Icons/Icon';
 
 describe('Button', () => {
@@ -35,6 +36,12 @@ describe('Button', () => {
 		[{ props: { color: BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
 		[{ props: { color: BUTTON_COLORS.DANGER }, expectedClass: '-ds-color-danger' }],
 		[{ props: { color: BUTTON_COLORS.SUCCESS }, expectedClass: '-ds-color-success' }],
+		[
+			{
+				props: { color: BUTTON_COLORS.MAGIC, type: BUTTON_TYPES.OUTLINED },
+				expectedClass: '-ds-color-magic',
+			},
+		],
 		[{ props: { radius: BUTTON_RADIUSES.ROUNDED }, expectedClass: '-ds-rounded' }],
 		[{ props: { state: BUTTON_STATES.HOVERED }, expectedClass: '-ds-hovered' }],
 		[{ props: { state: BUTTON_STATES.FOCUSED }, expectedClass: '-ds-focused' }],
@@ -45,6 +52,34 @@ describe('Button', () => {
 		expect(outlinedButton.classes()).toContain(expectedClass);
 	});
 
+	it('magic button fills with the magic gradient', () => {
+		const component = createComponent({ color: BUTTON_COLORS.MAGIC });
+
+		expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe(
+			`url(#${GRADIENT_MAGIC_ICON_ID})`,
+		);
+	});
+
+	it('disabled magic button fills with the disabled magic gradient', () => {
+		const component = createComponent({
+			color: BUTTON_COLORS.MAGIC,
+			state: BUTTON_STATES.DISABLED,
+		});
+
+		expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe(
+			`url(#${GRADIENT_MAGIC_ICON_DISABLED_ID})`,
+		);
+	});
+
+	it('non-magic button has no magic fill style', () => {
+		const component = createComponent({
+			color: BUTTON_COLORS.PRIMARY,
+			state: BUTTON_STATES.DISABLED,
+		});
+
+		expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe('');
+	});
+
 	it('loading should have correct text container and loading icon', () => {
 		const component = createComponent({ state: BUTTON_STATES.LOADING });