@tui/design-system 5.0.0-beta.1 → 5.0.0-beta.5

package/scss/lib/alert/_mixins.scss

@@ -0,0 +1,135 @@
+// Alert / _mixins
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds alert
+@mixin uilib-alert() {
+	.uilib-alert {
+		position: relative;
+
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-icon-size-small));
+		margin: var(--uilib-spacing-200) 0;
+		padding: var(--uilib-spacing-300);
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-spacing-200) + var(--uilib-icon-size-small));
+
+		color: var(--uilib-alert-text-color);
+
+		border-color: var(--uilib-color-status-info-icon);
+		border-radius: var(--uilib-alert-radius);
+
+		background: var(--uilib-color-status-info-surface);
+
+		&::before {
+			position: absolute;
+			top: var(--uilib-spacing-300);
+			left: var(--uilib-spacing-300);
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-icon-size-small);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-alert-icon-info-bg);
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: cover;
+			-webkit-mask-repeat: no-repeat;
+			mask-repeat: no-repeat;
+			-webkit-mask-position: center;
+			mask-position: center;
+			-webkit-mask-size: cover;
+			mask-size: cover;
+
+			-webkit-mask-image: var(--uilib-alert-icon-info-mask);
+			mask-image: var(--uilib-alert-icon-info-mask);
+		}
+	}
+
+	.uilib-alert--error {
+		border-color: var(--uilib-color-status-danger-icon);
+
+		background: var(--uilib-color-status-danger-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-error-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-error-mask);
+			mask-image: var(--uilib-alert-icon-error-mask);
+		}
+	}
+
+	.uilib-alert--warning {
+		border-color: var(--uilib-color-status-warning-icon);
+
+		background: var(--uilib-color-status-warning-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-warning-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-warning-mask);
+			mask-image: var(--uilib-alert-icon-warning-mask);
+		}
+	}
+
+	.uilib-alert--success {
+		border-color: var(--uilib-color-status-success-icon);
+
+		background: var(--uilib-color-status-success-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-success-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-success-mask);
+			mask-image: var(--uilib-alert-icon-success-mask);
+		}
+	}
+
+	.uilib-alert__heading {
+		font: var(--uilib-typography-component-heading-small-strong);
+		text-wrap: initial;
+	}
+
+	.uilib-alert__message {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-300);
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.uilib-alert--list {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-300);
+
+		border-left-width: var(--uilib-spacing-100);
+		border-left-style: var(--uilib-stroke-style-solid);
+
+		.uilib-alert__message {
+			margin-left: calc(calc(var(--uilib-spacing-100) + var(--uilib-icon-size-small)) * -1);
+		}
+	}
+
+	.uilib-alert__link:not(:first-child) {
+		margin-top: calc(var(--uilib-spacing-300) * -1);
+	}
+
+	.uilib-alert--close {
+		padding-right: calc(var(--uilib-spacing-300) + var(--uilib-spacing-200) + var(--uilib-icon-size-xsmall));
+	}
+
+	// Extra specificity required to ensure positioning
+	.uilib-alert .uilib-alert__close {
+		position: absolute;
+		top: var(--uilib-spacing-100);
+		right: var(--uilib-spacing-100);
+
+		&:focus-visible {
+			position: absolute;
+		}
+	}
+}

package/scss/lib/alert/_variables.scss

@@ -0,0 +1,15 @@
+@use '../../variables/env-variables' as *;
+
+// alert specific variables to allow theming
+$uilib-alert-variables: (
+	icon-info-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/letter-i-circled-filled.svg'),
+	icon-info-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/letter-i-circled-filled.svg'),
+	icon-error-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/exclamation-mark-circled-filled.svg'),
+	icon-error-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/exclamation-mark-circled-filled.svg'),
+	icon-warning-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/warning.svg'),
+	icon-warning-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/warning.svg'),
+	icon-success-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/checkmark-circled-filled.svg'),
+	icon-success-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/checkmark-circled-filled.svg'),
+	radius: var(--uilib-border-radius-100),
+	text-color: var(--uilib-color-text-strong),
+) !default;

package/scss/lib/breadcrumb/_index.scss

@@ -0,0 +1,3 @@
+// breadcrumb / index
+@use 'mixins' as *;
+@include uilib-breadcrumb;

package/scss/lib/breadcrumb/_mixins.scss

@@ -0,0 +1,58 @@
+// breadcrumb / _mixins
+// Builds breadcrumb
+@mixin uilib-breadcrumb() {
+	.uilib-breadcrumb {
+		&__list {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100);
+
+			margin: var(--uilib-spacing-400) 0;
+			padding: 0;
+		}
+
+		&__item {
+			position: relative;
+
+			&:not(:last-child)::after {
+				position: relative;
+				content: '';
+
+				display: inline-block;
+
+				width: var(--uilib-icon-size-xsmall);
+
+				vertical-align: middle;
+
+				background-color: currentcolor;
+				background-position: center center;
+				background-size: cover;
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+				-webkit-mask-repeat: no-repeat;
+				mask-repeat: no-repeat;
+				-webkit-mask-position: center;
+				mask-position: center;
+				-webkit-mask-size: cover;
+				mask-size: cover;
+				-webkit-mask-image: var(--uilib-breadcrumb-icon);
+				mask-image: var(--uilib-breadcrumb-icon);
+			}
+		}
+
+		// Extra specificity required to ensure styling overide for link
+		& .uilib-breadcrumb__link:visited {
+			color: var(--uilib-color-text-link);
+		}
+
+		&__item--current .uilib-breadcrumb__link {
+			color: var(--uilib-color-text-body);
+			text-decoration: none;
+
+			pointer-events: none;
+
+			&:visited {
+				color: var(--uilib-color-text-body);
+			}
+		}
+	}
+}

package/scss/lib/breadcrumb/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../variables/env-variables' as *;
+
+// Breadcrumb specific variables to allow theming
+$uilib-breadcrumb-variables: (
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/button/_index.scss

@@ -0,0 +1,4 @@
+// button / index
+@use 'mixins' as *;
+@include uilib-button;
+@include uilib-button-list;

package/scss/lib/button/_mixins.scss

@@ -0,0 +1,193 @@
+// button / _mixins
+@use 'variables' as *;
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds button
+@mixin uilib-button() {
+	.uilib-button {
+		position: relative;
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		width: 100%;
+		min-height: var(--uilib-spacing-1000); /* 40px */
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-500); /* 8px 20px */
+
+		color: var(--uilib-button-primary-color);
+		font: var(--uilib-typography-label-medium);
+		text-align: center;
+		text-decoration: none;
+
+		border-radius: var(--uilib-button-radius);
+
+		background: var(--uilib-button-primary-bg-color);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		@include uilib-breakpoint(xs) {
+			width: auto;
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition:
+				border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+		}
+
+		&::after {
+			position: absolute;
+			inset: -1px 0;
+			content: '';
+
+			display: block;
+		}
+
+		&:hover:not(:disabled, .uilib-button--disabled),
+		a:hover &:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-primary-hover-bg-color);
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&:active:not(:disabled, .uilib-button--disabled),
+		a:active &:not(:disabled, .uilib-button--disabled) {
+			transform: scale(0.96);
+		}
+	}
+
+	.uilib-button__icon {
+		flex-shrink: 0;
+	}
+
+	.uilib-button__content {
+		flex-grow: 1;
+	}
+
+	.uilib-button--secondary {
+		padding: calc(var(--uilib-spacing-200) - var(--uilib-stroke-size-050)) calc(var(--uilib-spacing-500) - var(--uilib-stroke-size-050)); /* 6px 18px */
+
+		color: var(--uilib-button-secondary-color);
+
+		border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-button-secondary-color);
+
+		background: var(--uilib-button-secondary-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled),
+		a:hover &:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-secondary-hover-bg-color);
+		}
+	}
+
+	.uilib-button--tertiary {
+		color: var(--uilib-button-tertiary-color);
+
+		background: var(--uilib-button-tertiary-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled),
+		a:hover &:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-tertiary-hover-bg-color);
+		}
+	}
+
+	.uilib-button--promotion {
+		color: var(--uilib-button-promotion-color);
+
+		background: var(--uilib-button-promotion-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled),
+		a:hover &:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-promotion-hover-bg-color);
+		}
+	}
+
+	.uilib-button--search {
+		color: var(--uilib-button-search-color);
+
+		background: var(--uilib-button-search-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled),
+		a:hover &:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-search-hover-bg-color);
+		}
+	}
+
+	.uilib-button:disabled,
+	.uilib-button--disabled {
+		color: var(--uilib-button-disabled-color);
+
+		border-color: var(--uilib-button-disabled-bg-color);
+
+		background: var(--uilib-button-disabled-bg-color);
+
+		cursor: default;
+	}
+
+	.uilib-button--large {
+		min-height: var(--uilib-spacing-1200); /* 48px */
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-600); /* 8px 24px */
+
+		font: var(--uilib-typography-label-large);
+
+		&::after {
+			inset: 0;
+		}
+	}
+
+	.uilib-button--large.uilib-button--secondary {
+		padding: calc(var(--uilib-spacing-200) - var(--uilib-stroke-size-050)) calc(var(--uilib-spacing-600) - var(--uilib-stroke-size-050)); /* 6px 22px */
+	}
+
+	.uilib-button--width-restrict {
+		width: auto;
+	}
+}
+
+@mixin uilib-button-list() {
+	.uilib-button-list {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-200);
+
+		margin: var(--uilib-spacing-200) 0;
+		padding: 0;
+
+		list-style: none;
+
+		@include uilib-breakpoint(xs) {
+			flex-flow: row wrap;
+		}
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		& > li {
+			margin: 0;
+			padding: 0;
+
+			list-style: none;
+		}
+
+		&.uilib-button-list--center {
+			justify-content: center;
+		}
+
+		&.uilib-button-list--right {
+			justify-content: flex-end;
+		}
+	}
+}

package/scss/lib/button/_variables.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables/colors' as *;
+
+// Button specific variables to allow theming
+$uilib-button-variables: (
+	radius: var(--uilib-border-radius-pill),
+	primary-color: var(--uilib-color-text-inverse),
+	primary-bg-color: var(--uilib-color-core-interaction),
+	primary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-interaction'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	secondary-color: var(--uilib-color-core-interaction),
+	secondary-bg-color: var(--uilib-color-core-neutral),
+	secondary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	tertiary-color: var(--uilib-color-text-strong),
+	tertiary-bg-color: var(--uilib-color-core-brand),
+	tertiary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-brand'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	promotion-color: var(--uilib-color-text-inverse),
+	promotion-bg-color: var(--uilib-color-promotion),
+	promotion-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'promotion'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	search-color: var(--uilib-color-text-inverse),
+	search-bg-color: var(--uilib-color-core-brand-strong),
+	search-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-brand-strong'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	disabled-color: var(--uilib-color-other-disabled-strong),
+	disabled-bg-color: var(--uilib-color-other-disabled-soft),
+) !default;

package/scss/lib/cards/card/_index.scss

@@ -0,0 +1,3 @@
+// Card / index
+@use 'mixins' as *;
+@include uilib-card;

package/scss/lib/cards/card/_mixins.scss

@@ -0,0 +1,37 @@
+// Card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+
+// Builds card
+@mixin uilib-card() {
+	.uilib-card {
+		border-radius: var(--uilib-border-radius-400);
+
+		box-shadow: var(--uilib-elevation-100);
+
+		&--link:has(a:focus-visible, button:focus-visible) {
+			@include uilib-focus;
+
+			a {
+				box-shadow: none;
+			}
+
+			a::before,
+			button::before {
+				display: none;
+			}
+		}
+
+		&__content-container {
+			padding: var(--uilib-spacing-400);
+
+			background: var(--uilib-color-canvas-default);
+		}
+
+		&__supplementary-container {
+			padding: var(--uilib-spacing-200);
+
+			background: var(--uilib-color-canvas-contrast);
+		}
+	}
+}

package/scss/lib/cards/card/_variables.scss

@@ -0,0 +1,2 @@
+// Card specific variables to allow theming
+$uilib-card-variables: () !default;

package/scss/lib/cards/search/_index.scss

@@ -0,0 +1,3 @@
+// Search card / index
+@use 'mixins' as *;
+@include uilib-card-search;