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

package/scss/themes/crystalski/_overrides.scss

@@ -0,0 +1,276 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables' as *;
+@forward '../../variables';
+@use 'colors' as *;
+@use 'primitives' as *;
+@use 'typography' as *;
+
+// typography
+$uilib-crystalski-font-families: map.merge(
+	$uilib-font-families,
+	(
+		'lead': $uilib-font-family-brandon,
+		'base': $uilib-font-family-brandon,
+	)
+);
+$uilib-crystalski-font-weight: map.merge(
+	$uilib-font-weight,
+	(
+		'semibold': 400,
+		'bold': 600,
+	)
+);
+
+// focus
+$uilib-crystalski-focus-default:
+	0 0 0 0.125rem map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	0 0 0 0.25rem map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	0 0 0 0.375rem color.scale(map.get($uilib-crystalski-primitives, 'color-purple-80'), $alpha: -60%);
+$uilib-crystalski-focus: map.merge(
+	$uilib-focus-base,
+	(
+		default: $uilib-crystalski-focus-default,
+	)
+);
+
+// Accordion
+$uilib-crystalski-accordion-variables: map.merge(
+	$uilib-accordion-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-down.svg'),
+	)
+);
+
+// Alert
+$uilib-crystalski-alert-variables: map.merge(
+	$uilib-alert-variables,
+	(
+		icon-info-bg: var(--uilib-color-status-info-icon),
+		icon-info-mask: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/letter-i-circled-filled.svg'),
+		icon-error-bg: var(--uilib-color-status-danger-icon),
+		icon-error-mask: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/exclamation-mark-circled-filled.svg'),
+		icon-warning-bg: var(--uilib-color-status-warning-icon),
+		icon-warning-mask: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/warning-filled.svg'),
+		icon-success-bg: var(--uilib-color-status-success-icon),
+		icon-success-mask: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/checkmark-circled-filled.svg'),
+		text-color: var(--uilib-color-text-body),
+	)
+);
+
+// Breadcrumb
+$uilib-crystalski-breadcrumb-variables: map.merge(
+	$uilib-breadcrumb-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
+	)
+);
+
+// Button
+$uilib-crystalski-button-variables: map.merge(
+	$uilib-button-variables,
+	(
+		primary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		secondary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				80%
+			),
+		tertiary-color: var(--uilib-color-text-inverse),
+		tertiary-bg-color: var(--uilib-color-core-brand-strong),
+		tertiary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-brand-strong'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		promotion-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'promotion'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		search-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-brand-strong'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+	)
+);
+
+// Card - search
+$uilib-crystalski-card-search-variables: map.merge(
+	$uilib-card-search-variables,
+	(
+		highlights-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-down.svg'),
+	)
+);
+
+// Form row
+$uilib-crystalski-form-row-variables: map.merge(
+	$uilib-form-row-variables,
+	(
+		label-font: var(--uilib-typography-label-medium-strong),
+		icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/exclamation-mark-circled-filled.svg'),
+	)
+);
+
+// Form input checkbox
+$uilib-crystalski-input-checkbox-variables: map.merge(
+	$uilib-input-checkbox-variables,
+	(
+		icon-checked: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/checkmark.svg'),
+		icon-indeterminate: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/minus.svg'),
+		text-color-strong: var(--uilib-color-text-body),
+	)
+);
+
+// Form input radio
+$uilib-crystalski-input-radio-variables: map.merge(
+	$uilib-input-radio-variables,
+	(
+		text-color-strong: var(--uilib-color-text-body),
+	)
+);
+
+// Form input stepper
+$uilib-crystalski-input-stepper-variables: map.merge(
+	$uilib-input-stepper-variables,
+	(
+		icon-increment: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/plus.svg'),
+		icon-decrement: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/minus.svg'),
+	)
+);
+
+// Form input text
+$uilib-crystalski-input-text-variables: map.merge(
+	$uilib-input-text-variables,
+	(
+		icon-clear: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
+		icon-show: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/view.svg'),
+		icon-hide: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/view-hidden.svg'),
+		icon-calendar: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/calendar.svg'),
+	)
+);
+
+// Icon button
+$uilib-crystalski-icon-button-variables: map.merge(
+	$uilib-icon-button-variables,
+	(
+		ghost-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				80%
+			),
+		primary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		secondary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				80%
+			),
+		control-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				map.get($uilib-color-semantic-crystalski, 'core-interaction'),
+				80%
+			),
+		promotion-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'promotion'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		search-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-brand-strong'),
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				80%
+			),
+		shortlist-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-crystalski, 'core-neutral'),
+				map.get($uilib-color-semantic-crystalski, 'promotion'),
+				90%
+			),
+	)
+);
+
+// Info tag
+$uilib-crystalski-info-tag-variables: map.merge(
+	$uilib-info-tag-variables,
+	(
+		text-color: var(--uilib-color-text-body),
+		local-product-bg-color: var(--uilib-color-canvas-contrast),
+	)
+);
+
+// List
+$uilib-crystalski-list-variables: map.merge(
+	$uilib-list-variables,
+	(
+		bullet-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/list-item.svg'),
+	)
+);
+
+// Loader
+$uilib-crystalski-loader-variables: map.merge(
+	$uilib-loader-variables,
+	(
+		image: url('#{$uilib-assets-base-url}v3/motion/crystalski/loader.svg'),
+	)
+);
+
+// Pagination
+$uilib-crystalski-pagination-variables: map.merge(
+	$uilib-pagination-variables,
+	(
+		icon-prev: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-left.svg'),
+		icon-next: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
+	)
+);
+
+// Ratings and Reviews - Numerical
+$uilib-crystalski-ratings-numerical-variables: map.merge(
+	$uilib-ratings-numerical-variables,
+	(
+		brand-color: var(--uilib-color-text-body),
+		brand-logo: url('#{$uilib-assets-base-url}v3/favicons/crystalski/favicon.svg'),
+		alt-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/star-filled.svg'),
+	)
+);
+
+// Ratings and Reviews - Percentage
+$uilib-crystalski-ratings-percentage-variables: map.merge(
+	$uilib-ratings-percentage-variables,
+	(
+		leading-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/thumbs-up.svg'),
+	)
+);
+
+// Ratings and Reviews - Range Icons
+$uilib-crystalski-ratings-range-icons-variables: map.merge(
+	$uilib-ratings-range-icons-variables,
+	(
+		star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/crystalski-mountain-unchecked.svg'),
+		star-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/crystalski-mountain-checked.svg'),
+	)
+);
+
+// Show more/less
+$uilib-crystalski-show-more-less-variables: map.merge(
+	$uilib-show-more-less-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-down.svg'),
+	)
+);
+
+// Skeleton
+$uilib-crystalski-skeleton-variables: map.merge(
+	$uilib-skeleton-variables,
+	(
+		color: map.get($uilib-color-semantic-crystalski, 'other-skeleton-loading'),
+		shimmer-color: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
+	)
+);

package/scss/themes/crystalski/_primitives.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use '../../variables/primitives' as *;
+
+$uilib-crystalski-primitives: map.merge(
+	$uilib-primitives,
+	(
+		color-green-100: #00543f,
+		color-green-90: #007c5e,
+		color-green-80: #00a57c,
+		color-green-70: #00ce9b,
+		color-green-60: #16f7bf,
+		color-green-50: #40ffd0,
+		color-green-40: #6affda,
+		color-green-30: #94ffe4,
+		color-green-20: #beffef,
+		color-green-10: #e8fff9,
+
+		color-blue-100: #0e4d4f,
+		color-blue-90: #1c6f71,
+		color-blue-80: #2f9193,
+		color-blue-70: #46b2b5,
+		color-blue-60: #62d4d7,
+		color-blue-50: #83f6f9,
+		color-blue-40: #a1fdff,
+		color-blue-30: #bcfdff,
+		color-blue-20: #d7feff,
+		color-blue-10: #f3feff,
+
+		color-red-100: #460016,
+		color-red-90: #6e0023,
+		color-red-80: #970030,
+		color-red-70: #c0023e,
+		color-red-60: #e9175a,
+		color-red-50: #ff437e,
+		color-red-40: #ff6c9a,
+		color-red-30: #ff95b7,
+		color-red-20: #ffbfd3,
+		color-red-10: #ffe8ef,
+
+		color-purple-100: #481257,
+		color-purple-90: #662079,
+		color-purple-80: #84329b,
+		color-purple-70: #a348bd,
+		color-purple-60: #c361df,
+		color-purple-50: #e27dff,
+		color-purple-40: #e99aff,
+		color-purple-30: #efb7ff,
+		color-purple-20: #f6d5ff,
+		color-purple-10: #fcf2ff,
+
+		color-yellow-100: #554605,
+		color-yellow-90: #77630c,
+		color-yellow-80: #998117,
+		color-yellow-70: #bba025,
+		color-yellow-60: #ddbe36,
+		color-yellow-50: #ffde4a,
+		color-yellow-40: #ffe573,
+		color-yellow-30: #ffed9b,
+		color-yellow-20: #fff4c4,
+		color-yellow-10: #fffbed,
+
+		color-neutral-100: #000,
+		color-neutral-90: #252a32,
+		color-neutral-80: #666,
+		color-neutral-70: #707070,
+		color-neutral-60: #8f8f8f,
+		color-neutral-50: #a3a3a3,
+		color-neutral-40: #bcbcbc,
+		color-neutral-30: #d8d8d8,
+		color-neutral-20: #f5f5f5,
+		color-neutral-10: #fff,
+	)
+);

package/scss/themes/crystalski/_typography.scss

@@ -0,0 +1,12 @@
+// crystalski / typography
+@use '../../variables/prefix' as *;
+
+// import font f-mod fallbacks
+@forward '../../variables/fonts/brandon-fallback';
+
+// font-family
+$uilib-font-family-brandon:
+	#{$app-prefix}Brandon,
+	#{$app-prefix}BrandonFallbackFont,
+	verdana,
+	sans-serif;

package/scss/themes/crystalski/fonts.json

@@ -0,0 +1,30 @@
+[
+	{
+		"family": "Brandon",
+		"path": "v3/fonts/brandon-medium-italic.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "italic"
+	},
+	{
+		"family": "Brandon",
+		"path": "v3/fonts/brandon-medium.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "normal"
+	},
+	{
+		"family": "Brandon",
+		"path": "v3/fonts/brandon-regular-italic.subset.woff2",
+		"display": "swap",
+		"weight": "400",
+		"style": "italic"
+	},
+	{
+		"family": "Brandon",
+		"path": "v3/fonts/brandon-regular.subset.woff2",
+		"display": "swap",
+		"weight": "400",
+		"style": "normal"
+	}
+]

package/scss/themes/crystalski/fonts.scss

@@ -0,0 +1,5 @@
+// fonts
+@forward '../../variables/fonts/brandon-medium';
+@forward '../../variables/fonts/brandon-medium-italic';
+@forward '../../variables/fonts/brandon-regular';
+@forward '../../variables/fonts/brandon-regular-italic';

package/scss/themes/crystalski/index.scss

@@ -0,0 +1,157 @@
+// import theme variables
+@use 'sass:list';
+@use 'colors' as *;
+@use 'overrides' as *;
+@use 'typography' as *;
+@use '../../lib/utility/mixins' as util;
+
+:root[data-theme='crystalski'],
+:host([data-theme='crystalski']),
+[data-theme='crystalski'],
+.theme-crystalski {
+	// Theme-name
+	--uilib-theme-name: 'crystalski';
+
+	// Aspect ratios
+	@include util.uilib-build-css-vars('aspect-ratio', $uilib-aspect-ratios);
+
+	// Border radius
+	@include util.uilib-build-css-vars('border-radius', $uilib-radius);
+
+	// Breakpoints
+	@include util.uilib-build-css-vars('breakpoints', $uilib-breakpoints);
+
+	// Colors / light
+	@include uilib-color-palette-base-vars($uilib-color-semantic-crystalski);
+
+	// Elevations
+	@include uilib-elevation-base-vars;
+
+	// Focus
+	@include util.uilib-build-css-vars('focus', $uilib-crystalski-focus);
+
+	// Grid
+	@include uilib-grid-base-vars;
+
+	// Icon
+	@include uilib-icon-base-vars($uilib-icon-sizes);
+
+	// Layers
+	@include uilib-layers-base-vars();
+
+	// Motion
+	@include uilib-motion-base-vars($uilib-motion);
+
+	// Spacing
+	@include util.uilib-build-css-vars('spacing', $uilib-spacing);
+
+	// Strokes
+	@include util.uilib-build-css-vars('stroke-size', $uilib-stroke-sizes);
+	@include util.uilib-build-css-vars('stroke-style', $uilib-stroke-styles);
+
+	// Typography / font-family
+	@include util.uilib-build-css-vars('font-family', $uilib-crystalski-font-families);
+
+	// Typography / font-weight and line-height
+	@include uilib-font-base-vars($font-weight: $uilib-crystalski-font-weight);
+
+	// COMPONENTS
+	// Accordion
+	@include util.uilib-build-css-vars('accordion', $uilib-crystalski-accordion-variables);
+
+	// Active tag
+	@include util.uilib-build-css-vars('active-tag', $uilib-active-tag-variables);
+
+	// Alert
+	@include util.uilib-build-css-vars('alert', $uilib-crystalski-alert-variables);
+
+	// Breadcrumb
+	@include util.uilib-build-css-vars('breadcrumb', $uilib-crystalski-breadcrumb-variables);
+
+	// Button
+	@include util.uilib-build-css-vars('button', $uilib-crystalski-button-variables);
+
+	// Card - search
+	@include util.uilib-build-css-vars('card-search', $uilib-crystalski-card-search-variables);
+
+	// Form row
+	@include util.uilib-build-css-vars('form-row', $uilib-crystalski-form-row-variables);
+
+	// Form input checkbox
+	@include util.uilib-build-css-vars('input-checkbox', $uilib-crystalski-input-checkbox-variables);
+
+	// Form input chip
+	@include util.uilib-build-css-vars('input-chip', $uilib-input-chip-variables);
+
+	// Form input count
+	@include util.uilib-build-css-vars('input-count', $uilib-input-count-variables);
+
+	// Form input radio
+	@include util.uilib-build-css-vars('input-radio', $uilib-crystalski-input-radio-variables);
+
+	// Form input stepper
+	@include util.uilib-build-css-vars('input-stepper', $uilib-crystalski-input-stepper-variables);
+
+	// Form input slider
+	@include util.uilib-build-css-vars('input-slider', $uilib-input-slider-variables);
+
+	// Form input text
+	@include util.uilib-build-css-vars('input-text', $uilib-crystalski-input-text-variables);
+
+	// Icon button
+	@include util.uilib-build-css-vars('icon-button', $uilib-crystalski-icon-button-variables);
+
+	// Image
+	@include util.uilib-build-css-vars('image', $uilib-image-variables);
+
+	// Info tag
+	@include util.uilib-build-css-vars('info-tag', $uilib-crystalski-info-tag-variables);
+
+	// Link
+	@include util.uilib-build-css-vars('link', $uilib-link-variables);
+
+	// List
+	@include util.uilib-build-css-vars('list', $uilib-crystalski-list-variables);
+
+	// Loader
+	@include util.uilib-build-css-vars('loader', $uilib-crystalski-loader-variables);
+
+	// Media button
+	@include util.uilib-build-css-vars('media-button', $uilib-media-button-variables);
+
+	// Modal
+	@include util.uilib-build-css-vars('modal', $uilib-modal-variables);
+
+	// Pagination
+	@include util.uilib-build-css-vars('pagination', $uilib-crystalski-pagination-variables);
+
+	// Price
+	@include util.uilib-build-css-vars('price', $uilib-price-variables);
+
+	// Promo tag
+	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
+
+	// Ratings and Reviews - Numerical
+	@include util.uilib-build-css-vars('ratings-numerical', $uilib-crystalski-ratings-numerical-variables);
+
+	// Ratings and Reviews - Percentage
+	@include util.uilib-build-css-vars('ratings-percentage', $uilib-crystalski-ratings-percentage-variables);
+
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-crystalski-ratings-range-icons-variables);
+
+	// Ratings and Reviews - Range bar
+	@include util.uilib-build-css-vars('ratings-range-bar', $uilib-ratings-range-bar-variables);
+
+	// Scroller
+	@include util.uilib-build-css-vars('scroller', $uilib-scroller-variables);
+
+	// Show more/less
+	@include util.uilib-build-css-vars('show-more-less', $uilib-crystalski-show-more-less-variables);
+
+	// Skeleton
+	@include util.uilib-build-css-vars('skeleton', $uilib-crystalski-skeleton-variables);
+
+	// Tooltip
+	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+}