@bethinkpl/design-system 34.1.3 → 34.1.4

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

@@ -8,6 +8,7 @@ export declare const BANNER_COLORS: {
     readonly WARNING: "warning";
     readonly FAIL: "fail";
     readonly DANGER: "danger";
+    readonly ACCENT: "accent";
 };
 export type BannerColor = Value<typeof BANNER_COLORS>;
 export declare const BANNER_SIZES: {

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

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

package/dist/lib/js/components/Icons/FeatureIcon/FeatureIcon.consts.d.ts

@@ -17,5 +17,6 @@ export declare const FEATURE_ICON_COLOR: {
     readonly SUCCESS: "success";
     readonly WARNING: "warning";
     readonly FAIL: "fail";
+    readonly ACCENT: "accent";
 };
 export type FeatureIconColor = Value<typeof FEATURE_ICON_COLOR>;

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

@@ -278,6 +278,7 @@ export declare const data: () => {
         readonly WARNING: "warning";
         readonly FAIL: "fail";
         readonly DANGER: "danger";
+        readonly ACCENT: "accent";
     }>;
     allowedColorsToBorderColorsMap: {
         neutral: ("primary" | "neutral" | "neutralWeak" | "primaryWeak")[];
@@ -314,9 +315,6 @@ export declare const components: {
             size: {
                 type: import('vue').PropType<string>;
             };
-            titleInColor: {
-                type: import('vue').PropType<boolean>;
-            };
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
@@ -352,9 +350,6 @@ export declare const components: {
             size: {
                 type: import('vue').PropType<string>;
             };
-            titleInColor: {
-                type: import('vue').PropType<boolean>;
-            };
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
@@ -384,9 +379,6 @@ export declare const components: {
         size: {
             type: import('vue').PropType<string>;
         };
-        titleInColor: {
-            type: import('vue').PropType<boolean>;
-        };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onButton-clicked"?: (() => any) | undefined;

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

@@ -8,6 +8,7 @@ export const BANNER_COLORS = {
 	WARNING: 'warning',
 	FAIL: 'fail',
 	DANGER: 'danger',
+	ACCENT: 'accent',
 } as const;
 
 export type BannerColor = Value<typeof BANNER_COLORS>;

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

@@ -40,7 +40,6 @@ const StoryTemplate: StoryFn<typeof Banner> = (args) => {
 						:is-expanded="isExpanded"
 						:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
 						:size="size"
-						:title-in-color="titleInColor"
 						@update:isExpanded="onIsExpandedUpdated"
 				>
 				<template v-if="defaultText" #defaultText><span v-html="defaultText" /></template>
@@ -62,7 +61,6 @@ const args = {
 	icon: null,
 	isIconHiddenOnMobile: false,
 	title: 'Banner Title',
-	titleInColor: false,
 	buttonText: '',
 	closable: false,
 	isExpanded: false,
@@ -107,9 +105,6 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(BANNER_SIZES),
 	},
-	titleInColor: {
-		control: 'boolean',
-	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -6,7 +6,6 @@
 				colorClass,
 				sizeClass,
 				{
-					'-ds-titleInColor': titleInColor,
 					'-ds-iconHiddenOnMobile': isIconHiddenOnMobile,
 				},
 			]"
@@ -104,8 +103,6 @@
 	width: 100%;
 
 	&__inner {
-		--ds-banner-title-color: #{$color-neutral-text-strong};
-
 		border-radius: $radius-m;
 		border-style: solid;
 		border-width: 1px;
@@ -149,58 +146,59 @@
 		}
 
 		&.-ds-warning {
+			--ds-banner-title-color: #{$color-warning-text-strong};
+
 			background-color: $color-warning-background;
 			border-color: $color-warning-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-warning-text};
-			}
 		}
 
 		&.-ds-success {
+			--ds-banner-title-color: #{$color-success-text-strong};
+
 			background-color: $color-success-background;
 			border-color: $color-success-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-success-text};
-			}
 		}
 
 		&.-ds-info {
+			--ds-banner-title-color: #{$color-info-text-strong};
+
 			background-color: $color-info-background;
 			border-color: $color-info-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-info-text};
-			}
 		}
 
 		&.-ds-fail {
+			--ds-banner-title-color: #{$color-fail-text-strong};
+
 			background-color: $color-fail-background;
 			border-color: $color-fail-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-fail-text};
-			}
 		}
 
 		&.-ds-neutral {
+			--ds-banner-title-color: #{$color-neutral-text-strong};
+
 			background-color: $color-neutral-background;
 			border-color: $color-neutral-border-weak;
 		}
 
 		&.-ds-default {
+			--ds-banner-title-color: #{$color-neutral-text-strong};
+
 			background-color: $color-default-background;
 			border-color: $color-neutral-border-weak;
 		}
 
 		&.-ds-danger {
+			--ds-banner-title-color: #{$color-danger-text-strong};
+
 			background-color: $color-danger-background;
 			border-color: $color-danger-border-weak;
+		}
 
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-danger-text};
-			}
+		&.-ds-accent {
+			--ds-banner-title-color: #{$color-accent-text-strong};
+
+			background-color: $color-accent-background;
+			border-color: $color-accent-border-weak;
 		}
 
 		&.-ds-small {
@@ -340,7 +338,6 @@ const {
 	color = BANNER_COLORS.DEFAULT,
 	isIconHiddenOnMobile = false,
 	size = BANNER_SIZES.MEDIUM,
-	titleInColor = false,
 } = defineProps<{
 	icon?: IconItem | null;
 	buttonText?: string;
@@ -349,7 +346,6 @@ const {
 	title: string;
 	isIconHiddenOnMobile?: boolean;
 	size?: BannerSize;
-	titleInColor?: boolean;
 }>();
 
 defineEmits<{
@@ -369,6 +365,7 @@ const iconColor = computed(() => {
 		[BANNER_COLORS.WARNING]: FEATURE_ICON_COLOR.WARNING,
 		[BANNER_COLORS.FAIL]: FEATURE_ICON_COLOR.FAIL,
 		[BANNER_COLORS.DANGER]: FEATURE_ICON_COLOR.DANGER,
+		[BANNER_COLORS.ACCENT]: FEATURE_ICON_COLOR.ACCENT,
 	};
 
 	return colorMap[color];
@@ -384,6 +381,7 @@ function useBannerClasses() {
 			[BANNER_COLORS.SUCCESS]: '-ds-success',
 			[BANNER_COLORS.WARNING]: '-ds-warning',
 			[BANNER_COLORS.DANGER]: '-ds-danger',
+			[BANNER_COLORS.ACCENT]: '-ds-accent',
 		};
 
 		return colorMap[color];

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.consts.ts

@@ -19,6 +19,7 @@ export const FEATURE_ICON_COLOR = {
 	SUCCESS: 'success',
 	WARNING: 'warning',
 	FAIL: 'fail',
+	ACCENT: 'accent',
 } as const;
 
 export type FeatureIconColor = Value<typeof FEATURE_ICON_COLOR>;

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue

@@ -11,6 +11,7 @@
 			'-ds-primary': color === FEATURE_ICON_COLOR.PRIMARY,
 			'-ds-success': color === FEATURE_ICON_COLOR.SUCCESS,
 			'-ds-warning': color === FEATURE_ICON_COLOR.WARNING,
+			'-ds-accent': color === FEATURE_ICON_COLOR.ACCENT,
 			'-ds-xSmall': size === FEATURE_ICON_SIZES.X_SMALL,
 			'-ds-small': size === FEATURE_ICON_SIZES.SMALL,
 			'-ds-medium': size === FEATURE_ICON_SIZES.MEDIUM,
@@ -68,6 +69,11 @@ $feature-icon-colors: (
 		'border': $color-info-background,
 		'icon': $color-info-icon,
 	),
+	'accent': (
+		'background': $color-accent-background-medium,
+		'border': $color-accent-background,
+		'icon': $color-accent-icon,
+	),
 );
 
 $feature-icon-padding-large: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "34.1.3",
+  "version": "34.1.4",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",