@bethinkpl/design-system 34.1.0 → 34.1.4

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/lib/js/icons/fontawesome.ts

@@ -138,6 +138,7 @@ import { faPartyHorn } from '@fortawesome/pro-regular-svg-icons/faPartyHorn';
 import { faPencil } from '@fortawesome/pro-regular-svg-icons/faPencil';
 import { faPenCircle } from '@fortawesome/pro-regular-svg-icons/faPenCircle';
 import { faPenField } from '@fortawesome/pro-regular-svg-icons/faPenField';
+import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare';
 import { faPlay } from '@fortawesome/pro-regular-svg-icons/faPlay';
 import { faPlus } from '@fortawesome/pro-regular-svg-icons/faPlus';
 import { faPresentationScreen } from '@fortawesome/pro-regular-svg-icons/faPresentationScreen';
@@ -453,6 +454,7 @@ export const FONTAWESOME_ICONS = {
 	FA_PARTY_HORN: faPartyHorn,
 	FA_PEN_CIRCLE: faPenCircle,
 	FA_PEN_FIELD: faPenField,
+	FA_PEN_TO_SQUARE: faPenToSquare,
 	FA_PENCIL: faPencil,
 	FA_PLAY: faPlay,
 	FA_PLUS: faPlus,

package/package.json

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