npm - @bethinkpl/design-system - Versions diffs - 26.4.0 → 26.5.0 - Mend

@bethinkpl/design-system 26.4.0 → 26.5.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 (77) hide show

package/docs/iframe.html CHANGED Viewed

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
-    <script type="module" crossorigin src="./assets/iframe-DuOsjH1S.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-Di5TkTnR.js"></script>
   </head>
   <body>

package/docs/project.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"generatedAt":~~1736879743634~~,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
1	+ {"generatedAt":1738667213172,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue CHANGED Viewed

@@ -25,6 +25,7 @@
 				:interactive="isInteractive"
 				:additional-text="additionalText"
 				:color="color as TileColors"
+				:border-color="borderColor"
 				:state="state as TileStates"
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
@@ -139,7 +140,7 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
-import DsTile from '../../Tile';
+import DsTile, { TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import DatePickerBox from '../DatePickerBox';
@@ -286,6 +287,22 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		borderColor() {
+			return {
+				[DATE_PICKER_COLORS.NEUTRAL]: this.isInteractive
+					? TILE_BORDER_COLORS.PRIMARY
+					: TILE_BORDER_COLORS.NEUTRAL_WEAK,
+				[DATE_PICKER_COLORS.NEUTRAL_WEAK]: this.isInteractive
+					? TILE_BORDER_COLORS.PRIMARY
+					: TILE_BORDER_COLORS.NEUTRAL_WEAK,
+				[DATE_PICKER_COLORS.DANGER]: this.isInteractive
+					? TILE_BORDER_COLORS.DANGER
+					: TILE_BORDER_COLORS.DANGER_WEAK,
+				[DATE_PICKER_COLORS.WARNING]: this.isInteractive
+					? TILE_BORDER_COLORS.WARNING
+					: TILE_BORDER_COLORS.WARNING_WEAK,
+			}[this.color];
+		},
 		eyebrowText() {
 			if (!this.date) {
 				return '';

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue CHANGED Viewed

@@ -116,6 +116,7 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 			left: initial;
 			position: initial;
 			top: initial;
+			z-index: initial;
 			&.-ds-desktopVisible {
 				display: initial;

package/lib/js/components/Outline/OutlineItem/OutlineItem.vue CHANGED Viewed

@@ -270,7 +270,8 @@ export default defineComponent({
 		},
 		label: {
 			type: String,
-			required: true,
+			// Label can be passed either as a prop or in a slot
+			default: '',
 		},
 		isLabelUppercase: {
 			type: Boolean,

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts CHANGED Viewed

@@ -84,6 +84,9 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		supportingTextEllipsis: {
 			control: 'boolean',
 		},
+		isSupportingTextTooltipEnabled: {
+			control: 'boolean',
+		},
 		metadata: {
 			control: 'text',
 		},
@@ -131,6 +134,7 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		textEllipsis: false,
 		supportingText: 'null',
 		supportingTextEllipsis: false,
+		isSupportingTextTooltipEnabled: false,
 		metadata: 'Metadata Slot',
 		actions: 'ACS',
@@ -191,6 +195,7 @@ const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 			:text-ellipsis="textEllipsis"
 			:supporting-text="supportingText === 'null' ? null : supportingText"
 			:supporting-text-ellipsis="supportingTextEllipsis"
+			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 			:background-color="backgroundColor"
 			:elevation="elevation"
 			:has-draggable-handler="hasDraggableHandler"
@@ -251,6 +256,7 @@ const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 				:text-ellipsis="textEllipsis"
 				:supporting-text="supportingText === 'null' ? null : supportingText"
 				:supporting-text-ellipsis="supportingTextEllipsis"
+				:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 				:background-color="backgroundColor"
 				:elevation="elevation"
 				:has-draggable-handler="hasDraggableHandler"

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue CHANGED Viewed

@@ -44,6 +44,7 @@
 					:supporting-text-ellipsis="supportingTextEllipsis"
 					:size="textGroupSize"
 					:state="textGroupState"
+					:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 				/>
 			</div>
 		</template>
@@ -218,6 +219,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isSupportingTextTooltipEnabled: {
+			type: Boolean,
+			default: false,
+		},
 		backgroundColor: {
 			type: String as PropType<RichListItemBackgroundColor>,
 			default: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,

package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue CHANGED Viewed

@@ -12,7 +12,7 @@
 			:state="state"
 			:eyebrow-ellipsis="eyebrowEllipsis"
 			:text-ellipsis="textEllipsis"
-			:has-border="hasBorder"
+			:border-color="borderColor"
 		/>
 	</div>
 </template>

package/lib/js/components/TextGroup/TextGroup.stories.ts CHANGED Viewed

@@ -33,6 +33,10 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 			:skeleton-loading-size="skeletonLoadingSize"
 			:is-selected="isSelected"
 			:state="state"
+			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
+			:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
+			:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
+			:supporting-text-tooltip-content="supportingTextTooltipContent"
 		/>
 		<div style="margin-top: 100px; color: #888">
 			<ds-divider />
@@ -57,6 +61,10 @@ Interactive.args = {
 	skeletonLoadingSize: TEXT_GROUP_LOADING_SIZES.LARGE,
 	isSelected: false,
 	state: TEXT_GROUP_STATES.DEFAULT,
+	isSupportingTextTooltipEnabled: false,
+	isSupportingTextTooltipEnabledOnMobile: true,
+	isSupportingTextTooltipAutoFilledWithContent: true,
+	supportingTextTooltipContent: '',
 } as Args;
 Interactive.argTypes = {
@@ -103,6 +111,18 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_STATES),
 	},
+	isSupportingTextTooltipEnabled: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipEnabledOnMobile: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipAutoFilledWithContent: {
+		control: 'boolean',
+	},
+	supportingTextTooltipContent: {
+		control: 'text',
+	},
 } as ArgTypes;
 Interactive.parameters = {

package/lib/js/components/TextGroup/TextGroup.vue CHANGED Viewed

@@ -43,18 +43,33 @@
 			<span v-else-if="mainText === ''">&nbsp;</span>
 			<span v-else>{{ mainText }}</span>
 		</div>
-		<div
-			v-if="supportingText !== null"
-			class="ds-textGroup__supporting"
-			:class="{
-				'-ds-ellipsis': supportingTextEllipsis,
-			}"
-		>
+		<div v-if="supportingText !== null" class="ds-textGroup__supportingWrapper">
 			<div v-if="isLoading" class="ds-textGroup__skeletonWrapper">
 				<ds-skeleton width="100%" height="100%" />
 			</div>
 			<span v-else-if="supportingText === ''">&nbsp;</span>
-			<span v-else v-html="supportingText" />
+			<template v-else>
+				<ds-tooltip
+					class="ds-textGroup__supportingTooltip"
+					:text="
+						isSupportingTextTooltipAutoFilledWithContent
+							? supportingText
+							: supportingTextTooltipContent
+					"
+					:is-disabled="!isSupportingTextTooltipEnabled"
+					:is-hidden-on-mobile="!isSupportingTextTooltipEnabledOnMobile"
+					inline
+				>
+					<div
+						class="ds-textGroup__supporting"
+						:class="{
+							'-ds-ellipsis': supportingTextEllipsis,
+						}"
+					>
+						<span v-html="supportingText" />
+					</div>
+				</ds-tooltip>
+			</template>
 		</div>
 	</div>
 </template>
@@ -172,6 +187,16 @@ $text-group-colors: (
 		@include text-m-compact-bold;
 	}
+	&__supportingWrapper {
+		display: flex;
+	}
+	&__supportingTooltip {
+		display: inline-flex;
+		max-width: 100%;
+		overflow: hidden;
+	}
 	&__supporting {
 		@include text-s-compact-regular;
 	}
@@ -251,11 +276,13 @@ import {
 	TextGroupSize,
 	TextGroupState,
 } from './TextGroup.consts';
+import DsTooltip from '../Tooltip';
 export default defineComponent({
 	name: 'TextGroup',
 	components: {
 		DsSkeleton,
+		DsTooltip,
 	},
 	props: {
 		size: {
@@ -310,6 +337,22 @@ export default defineComponent({
 			type: String as PropType<TextGroupState>,
 			default: TEXT_GROUP_STATES.DEFAULT,
 		},
+		isSupportingTextTooltipEnabled: {
+			type: Boolean,
+			default: false,
+		},
+		isSupportingTextTooltipEnabledOnMobile: {
+			type: Boolean,
+			default: true,
+		},
+		isSupportingTextTooltipAutoFilledWithContent: {
+			type: Boolean,
+			default: true,
+		},
+		supportingTextTooltipContent: {
+			type: [String, null],
+			default: null,
+		},
 	},
 	data() {
 		return {

package/lib/js/components/Tile/Tile.consts.ts CHANGED Viewed

@@ -20,3 +20,22 @@ export const TILE_STATES = {
 } as const;
 export type TileStates = Value<typeof TILE_STATES>;
+export const TILE_BORDER_COLORS = {
+	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	SUCCESS: 'success',
+	SUCCESS_WEAK: 'successWeak',
+	FAIL: 'fail',
+	FAIL_WEAK: 'failWeak',
+	DANGER: 'danger',
+	DANGER_WEAK: 'dangerWeak',
+	WARNING: 'warning',
+	WARNING_WEAK: 'warningWeak',
+	INFO: 'info',
+	INFO_WEAK: 'infoWeak',
+} as const;
+export type TileBorderColors = Value<typeof TILE_BORDER_COLORS>;

package/lib/js/components/Tile/Tile.sb.shared.ts CHANGED Viewed

@@ -1,8 +1,10 @@
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_BORDER_COLORS, TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { Args, ArgTypes } from '@storybook/vue3';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 export const template = (componentTag: string) => `
+<div style="display: flex; row-gap: 16px; flex-direction: column">
 		<${componentTag}
 			:additional-text="additionalText"
 			:color="color"
@@ -16,17 +18,45 @@ export const template = (componentTag: string) => `
 			:state="state"
 			:text-ellipsis="textEllipsis"
 			:text="text"
-			:has-border="hasBorder"
-		/>`;
+			:border-color="borderColor"
+		/>
+		<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja koloru komponentu z kolorem bordera jest niezgodna z design systemem!" v-if="borderColor && !allowedColorsToBorderColorsMap[color].includes(borderColor)" />
+</div>
+`;
 export const data = () => ({
 	ICONS: Object.freeze(ICONS),
+	BANNER_COLORS: Object.freeze(BANNER_COLORS),
+	allowedColorsToBorderColorsMap: {
+		[TILE_COLORS.NEUTRAL]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.NEUTRAL_WEAK]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.PRIMARY]: [TILE_BORDER_COLORS.PRIMARY, TILE_BORDER_COLORS.PRIMARY_WEAK],
+		[TILE_COLORS.SUCCESS]: [TILE_BORDER_COLORS.SUCCESS, TILE_BORDER_COLORS.SUCCESS_WEAK],
+		[TILE_COLORS.FAIL]: [TILE_BORDER_COLORS.FAIL, TILE_BORDER_COLORS.FAIL_WEAK],
+		[TILE_COLORS.DANGER]: [TILE_BORDER_COLORS.DANGER, TILE_BORDER_COLORS.DANGER_WEAK],
+		[TILE_COLORS.WARNING]: [TILE_BORDER_COLORS.WARNING, TILE_BORDER_COLORS.WARNING_WEAK],
+		[TILE_COLORS.INFO]: [TILE_BORDER_COLORS.INFO, TILE_BORDER_COLORS.INFO_WEAK],
+	},
 });
+export const components = {
+	DsBanner,
+};
 export const args = {
 	interactive: true,
 	color: TILE_COLORS.NEUTRAL,
-	hasBorder: false,
+	borderColor: null,
 	iconLeft: null,
 	iconRight: null,
 	isIconRightHiddenOnMobile: false,
@@ -52,6 +82,10 @@ export const argTypes = {
 		control: 'select',
 		options: [...Object.values(TILE_COLORS)],
 	},
+	borderColor: {
+		control: 'select',
+		options: [null, ...Object.values(TILE_BORDER_COLORS)],
+	},
 	state: {
 		control: 'select',
 		options: [...Object.values(TILE_STATES)],

package/lib/js/components/Tile/Tile.shared.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES, TileColors, TileStates } from './Tile.consts';
+import { TILE_COLORS, TILE_STATES, TileBorderColors, TileColors, TileStates } from './Tile.consts';
 import { Value } from '../../utils/type.utils';
 export const props = {
@@ -64,8 +64,8 @@ export const props = {
 		type: Boolean,
 		default: true,
 	},
-	hasBorder: {
-		type: Boolean,
-		default: false,
+	borderColor: {
+		type: String as PropType<TileBorderColors>,
+		default: null,
 	},
 };

package/lib/js/components/Tile/Tile.stories.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import Tile from './Tile.vue';
 import { TILE_STATES } from './Tile.consts';
 import type { Args, Meta, StoryObj } from '@storybook/vue3';
-import { args, argTypes, data, template } from './Tile.sb.shared';
+import { args, argTypes, components, data, template } from './Tile.sb.shared';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -15,7 +15,7 @@ const meta: Meta<TileProps> = {
 	component: Tile,
 	decorators: [withActions],
 	render: (args) => ({
-		components: { Tile },
+		components: { ...components, Tile },
 		setup() {
 			return args;
 		},

package/lib/js/components/Tile/Tile.vue CHANGED Viewed

@@ -3,7 +3,10 @@
 		:class="[
 			tileColor,
 			tileState,
-			{ '-ds-interactive': interactive, '-ds-hasBorder': hasBorder },
+			{
+				'-ds-interactive': interactive,
+				[`-ds-border-${borderColor}`]: borderColor !== null,
+			},
 		]"
 		class="ds-tile"
 	>
@@ -54,21 +57,76 @@
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/typography/tokens';
+$tile-border-colors: (
+	'neutral': (
+		'default': $color-neutral-border,
+		'disabled': $color-neutral-border-disabled,
+	),
+	'neutralWeak': (
+		'default': $color-neutral-border-weak,
+		'disabled': $color-neutral-border-weak-disabled,
+	),
+	'primary': (
+		'default': $color-primary-border,
+		'disabled': $color-primary-border-disabled,
+	),
+	'primaryWeak': (
+		'default': $color-primary-border-weak,
+		'disabled': $color-primary-border-weak-disabled,
+	),
+	'success': (
+		'default': $color-success-border,
+		'disabled': $color-success-border-disabled,
+	),
+	'successWeak': (
+		'default': $color-success-border-weak,
+		'disabled': $color-success-border-weak-disabled,
+	),
+	'fail': (
+		'default': $color-fail-border,
+		'disabled': $color-fail-border-disabled,
+	),
+	'failWeak': (
+		'default': $color-fail-border-weak,
+		'disabled': $color-fail-border-weak-disabled,
+	),
+	'danger': (
+		'default': $color-danger-border,
+		'disabled': $color-danger-border-disabled,
+	),
+	'dangerWeak': (
+		'default': $color-danger-border-weak,
+		'disabled': $color-danger-border-weak-disabled,
+	),
+	'warning': (
+		'default': $color-warning-border,
+		'disabled': $color-warning-border-disabled,
+	),
+	'warningWeak': (
+		'default': $color-warning-border-weak,
+		'disabled': $color-warning-border-weak-disabled,
+	),
+	'info': (
+		'default': $color-info-border,
+		'disabled': $color-info-border-disabled,
+	),
+	'infoWeak': (
+		'default': $color-info-border-weak,
+		'disabled': $color-info-border-weak-disabled,
+	),
+);
 $tile-colors: (
 	'neutral': (
 		'default': (
 			'background': $color-neutral-background,
 			'background-hover': $color-neutral-background-hovered,
-			'border': $color-neutral-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-neutral-text-weak,
 			'icon': $color-neutral-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-neutral-background-disabled,
-			'border': $color-neutral-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-neutral-text-weak-disabled,
 			'icon': $color-neutral-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -78,16 +136,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-neutral-background-weak,
 			'background-hover': $color-neutral-background-weak-hovered,
-			'border': $color-neutral-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-neutral-text-weak,
 			'icon': $color-neutral-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-neutral-background-weak-disabled,
-			'border': $color-neutral-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-neutral-text-weak-disabled,
 			'icon': $color-neutral-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -97,16 +151,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-primary-background,
 			'background-hover': $color-primary-background-hovered,
-			'border': $color-primary-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-primary-text,
 			'icon': $color-primary-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-primary-background-disabled,
-			'border': $color-primary-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-primary-text-disabled,
 			'icon': $color-primary-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -116,16 +166,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-success-background,
 			'background-hover': $color-success-background-hovered,
-			'border': $color-success-border,
-			'border-interactive': $color-success-border,
 			'eyebrow-text': $color-success-text,
 			'icon': $color-success-icon,
 			'icon-interactive': $color-success-icon,
 		),
 		'disabled': (
 			'background': $color-success-background-disabled,
-			'border': $color-success-border-disabled,
-			'border-interactive': $color-success-border-disabled,
 			'eyebrow-text': $color-success-text-disabled,
 			'icon': $color-success-icon-disabled,
 			'icon-interactive': $color-success-icon-disabled,
@@ -135,16 +181,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-fail-background,
 			'background-hover': $color-fail-background-hovered,
-			'border': $color-fail-border,
-			'border-interactive': $color-fail-border,
 			'eyebrow-text': $color-fail-text,
 			'icon': $color-fail-icon,
 			'icon-interactive': $color-fail-icon,
 		),
 		'disabled': (
 			'background': $color-fail-background-disabled,
-			'border': $color-fail-border-disabled,
-			'border-interactive': $color-fail-border-disabled,
 			'eyebrow-text': $color-fail-text-disabled,
 			'icon': $color-fail-icon-disabled,
 			'icon-interactive': $color-fail-icon-disabled,
@@ -154,16 +196,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-danger-background,
 			'background-hover': $color-danger-background-hovered,
-			'border': $color-danger-border,
-			'border-interactive': $color-danger-border,
 			'eyebrow-text': $color-danger-text,
 			'icon': $color-danger-icon,
 			'icon-interactive': $color-danger-icon,
 		),
 		'disabled': (
 			'background': $color-danger-background-disabled,
-			'border': $color-danger-border-disabled,
-			'border-interactive': $color-danger-border-disabled,
 			'eyebrow-text': $color-danger-text-disabled,
 			'icon': $color-danger-icon-disabled,
 			'icon-interactive': $color-danger-icon-disabled,
@@ -173,16 +211,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-warning-background,
 			'background-hover': $color-warning-background-hovered,
-			'border': $color-warning-border,
-			'border-interactive': $color-warning-border,
 			'eyebrow-text': $color-warning-text,
 			'icon': $color-warning-icon,
 			'icon-interactive': $color-warning-icon,
 		),
 		'disabled': (
 			'background': $color-warning-background-disabled,
-			'border': $color-warning-border-disabled,
-			'border-interactive': $color-warning-border-disabled,
 			'eyebrow-text': $color-warning-text-disabled,
 			'icon': $color-warning-icon-disabled,
 			'icon-interactive': $color-warning-icon-disabled,
@@ -192,16 +226,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-info-background,
 			'background-hover': $color-info-background-hovered,
-			'border': $color-info-border,
-			'border-interactive': $color-info-border,
 			'eyebrow-text': $color-info-text,
 			'icon': $color-info-icon,
 			'icon-interactive': $color-info-icon,
 		),
 		'disabled': (
 			'background': $color-info-background-disabled,
-			'border': $color-info-border-disabled,
-			'border-interactive': $color-info-border-disabled,
 			'eyebrow-text': $color-info-text-disabled,
 			'icon': $color-info-icon-disabled,
 			'icon-interactive': $color-info-icon-disabled,
@@ -212,10 +242,6 @@ $tile-colors: (
 @mixin setColors($root, $color-map) {
 	background-color: map-get($color-map, 'background');
-	&.-ds-hasBorder {
-		outline: $border-xs solid map-get($color-map, 'border');
-	}
 	#{$root}__eyebrowText {
 		color: map-get($color-map, 'eyebrow-text');
 	}
@@ -226,10 +252,6 @@ $tile-colors: (
 	}
 	&.-ds-interactive {
-		&.-ds-hasBorder {
-			outline: $border-xs solid map-get($color-map, 'border-interactive');
-		}
 		#{$root}__iconRight {
 			color: map-get($color-map, 'icon-interactive');
 		}
@@ -255,6 +277,15 @@ $tile-colors: (
 		}
 	}
+	@each $border-color-name, $border-color-map in $tile-border-colors {
+		&.-ds-border-#{$border-color-name} {
+			outline: $border-xs solid map-get($border-color-map, 'default');
+			&.-ds-disabled {
+				outline: $border-xs solid map-get($border-color-map, 'disabled');
+			}
+		}
+	}
 	align-items: center;
 	border-radius: $radius-s;
 	display: flex;