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

package/scss/lib/utility/_index.scss

@@ -0,0 +1,109 @@
+// utility / index
+@use 'mixins' as *;
+@use '../../variables/breakpoints' as *;
+@use '../../variables/spacing' as *;
+@use '../../variables/display-values' as *;
+@use '../../variables/directions' as *;
+
+.uilib-visually-hidden {
+	@include uilib-visually-hidden;
+}
+
+.uilib-text-truncate {
+	@include uilib-text-truncate;
+}
+
+// Display utilities (wrapped in html selector to increase selector weight)
+html {
+	// Generate display utility classes
+	@each $display-key, $display-value in $uilib-display-values {
+		.uilib-show-#{$display-key} {
+			@include uilib-show($display-value);
+		}
+	}
+
+	// Responsive display utilities
+	@each $breakpoint-key, $breakpoint-value in $uilib-breakpoints {
+		// Show on breakpoint and above with different display values
+		@each $display-key, $display-value in $uilib-display-values {
+			.uilib-show-on-#{$breakpoint-key}-#{$display-key} {
+				@include uilib-show-on($breakpoint-key, $display-value);
+			}
+		}
+
+		// Show until breakpoint with different display values
+		@each $display-key, $display-value in $uilib-display-values {
+			.uilib-show-until-#{$breakpoint-key}-#{$display-key} {
+				@include uilib-show-until($breakpoint-key, $display-value);
+			}
+		}
+
+		// Hide on breakpoint and above
+		.uilib-hide-on-#{$breakpoint-key} {
+			@include uilib-hide-on($breakpoint-key);
+		}
+
+		// Hide until breakpoint
+		.uilib-hide-until-#{$breakpoint-key} {
+			@include uilib-hide-until($breakpoint-key);
+		}
+	}
+
+	.uilib-hide {
+		@include uilib-hide;
+	}
+}
+
+// Margin reset utilities
+.uilib-m-0 {
+	@include uilib-margin;
+}
+
+// Generate margin reset utilities for specific sides
+@each $side-key, $side-value in $uilib-sides {
+	.uilib-m#{$side-key}-0 {
+		@include uilib-margin($side-value);
+	}
+}
+
+// Padding reset utilities
+.uilib-p-0 {
+	@include uilib-padding;
+}
+
+// Generate padding reset utilities for specific sides
+@each $side-key, $side-value in $uilib-sides {
+	.uilib-p#{$side-key}-0 {
+		@include uilib-padding($side-value);
+	}
+}
+
+// Responsive margin reset utilities
+@each $breakpoint-key, $breakpoint-value in $uilib-breakpoints {
+	// Specific sides
+	@each $side-key, $side-value in $uilib-sides {
+		.uilib-m#{$side-key}-#{$breakpoint-key}-0 {
+			@include uilib-margin-responsive($breakpoint-key, $side-value);
+		}
+	}
+
+	// All sides
+	.uilib-m-#{$breakpoint-key}-0 {
+		@include uilib-margin-responsive($breakpoint-key);
+	}
+}
+
+// Responsive padding reset utilities
+@each $breakpoint-key, $breakpoint-value in $uilib-breakpoints {
+	// Specific sides
+	@each $side-key, $side-value in $uilib-sides {
+		.uilib-p#{$side-key}-#{$breakpoint-key}-0 {
+			@include uilib-padding-responsive($breakpoint-key, $side-value);
+		}
+	}
+
+	// All sides
+	.uilib-p-#{$breakpoint-key}-0 {
+		@include uilib-padding-responsive($breakpoint-key);
+	}
+}

package/scss/lib/utility/_mixins.scss

@@ -0,0 +1,198 @@
+@use 'sass:map';
+@use '../../functions' as *;
+@use '../../variables/breakpoints' as *;
+@use '../../variables/spacing' as *;
+
+@mixin uilib-build-css-vars($type, $values) {
+	@each $name, $value in $values {
+		--uilib-#{$type}-#{$name}: #{$value};
+	}
+}
+
+@mixin uilib-build-css-props($values) {
+	@each $prop, $value in $values {
+		#{$prop}: #{$value};
+	}
+}
+
+// Visually hidden (accessible for screen readers but hidden visually)
+@mixin uilib-visually-hidden {
+	position: absolute;
+
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+
+	white-space: nowrap;
+
+	border: 0;
+
+	overflow: hidden;
+
+	clip-path: inset(0 0 0 0);
+}
+
+@mixin uilib-text-truncate {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	overflow: hidden;
+}
+
+// Basic display utilities
+@mixin uilib-hide {
+	display: none;
+}
+
+@mixin uilib-show($display: block) {
+	display: #{$display};
+}
+
+// Responsive display utilities - show/hide at specific breakpoints
+@mixin uilib-hide-on($breakpoint, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (min-width: map.get($breakpoints, $breakpoint)) {
+			@include uilib-hide;
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+@mixin uilib-show-on($breakpoint, $display: block, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (min-width: map.get($breakpoints, $breakpoint)) {
+			@include uilib-show($display);
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+@mixin uilib-hide-until($breakpoint, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (max-width: (map.get($breakpoints, $breakpoint) - 0.01rem)) {
+			@include uilib-hide;
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+@mixin uilib-show-until($breakpoint, $display: block, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (max-width: (map.get($breakpoints, $breakpoint) - 0.01rem)) {
+			@include uilib-show($display);
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+// Spacing reset utilities - only for zeroing out margins and paddings
+@mixin uilib-margin($sides: null) {
+	// Only support resetting margins (zero value)
+	@if not $sides {
+		margin: 0;
+	} @else {
+		@each $side in $sides {
+			@if $side == 'top' {
+				margin-top: 0;
+			} @else if $side == 'right' {
+				margin-right: 0;
+			} @else if $side == 'bottom' {
+				margin-bottom: 0;
+			} @else if $side == 'left' {
+				margin-left: 0;
+			} @else if $side == 'x' {
+				margin-right: 0;
+				margin-left: 0;
+			} @else if $side == 'y' {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+
+@mixin uilib-padding($sides: null) {
+	// Only support resetting paddings (zero value)
+	@if not $sides {
+		padding: 0;
+	} @else {
+		@each $side in $sides {
+			@if $side == 'top' {
+				padding-top: 0;
+			} @else if $side == 'right' {
+				padding-right: 0;
+			} @else if $side == 'bottom' {
+				padding-bottom: 0;
+			} @else if $side == 'left' {
+				padding-left: 0;
+			} @else if $side == 'x' {
+				padding-right: 0;
+				padding-left: 0;
+			} @else if $side == 'y' {
+				padding-top: 0;
+				padding-bottom: 0;
+			}
+		}
+	}
+}
+
+// Responsive margin/padding reset utilities
+@mixin uilib-margin-responsive($breakpoint, $sides: null, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (min-width: map.get($breakpoints, $breakpoint)) {
+			@include uilib-margin($sides);
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+@mixin uilib-padding-responsive($breakpoint, $sides: null, $breakpoints: $uilib-breakpoints) {
+	// Validate breakpoint exists
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media (min-width: map.get($breakpoints, $breakpoint)) {
+			@include uilib-padding($sides);
+		}
+	} @else {
+		@warn "Breakpoint '#{$breakpoint}' not found in $uilib-breakpoints map.";
+	}
+}
+
+@mixin uilib-focus() {
+	position: relative;
+
+	overflow: visible;
+
+	&::before {
+		--size: calc(100% + calc(var(--uilib-focus-gap) * 2));
+		--position: calc(var(--uilib-focus-gap) * -1);
+
+		position: absolute;
+		top: var(--position);
+		left: var(--position);
+		content: '';
+		z-index: var(--uilib-layer-top);
+
+		display: block;
+
+		width: var(--size);
+		height: var(--size);
+		box-sizing: border-box;
+
+		border-radius: inherit;
+
+		box-shadow: var(--uilib-focus-default);
+
+		pointer-events: none;
+	}
+}

package/scss/mixins.scss

@@ -0,0 +1,44 @@
+// mixins
+@forward 'lib/accordion/mixins';
+@forward 'lib/active-tag/mixins';
+@forward 'lib/breadcrumb/mixins';
+@forward 'lib/alert/mixins';
+@forward 'lib/button/mixins';
+@forward 'lib/cards/card/mixins';
+@forward 'lib/cards/search/mixins';
+@forward 'lib/divider/mixins';
+@forward 'lib/flight-details/mixins';
+@forward 'lib/flyout-dropdown/mixins';
+@forward 'lib/forms/form-row/mixins';
+@forward 'lib/forms/input-checkbox/mixins';
+@forward 'lib/forms/input-chip/mixins';
+@forward 'lib/forms/input-count/mixins';
+@forward 'lib/forms/input-radio/mixins';
+@forward 'lib/forms/input-slider/mixins';
+@forward 'lib/forms/input-switch/mixins';
+@forward 'lib/forms/input-text/mixins';
+@forward 'lib/grid/mixins';
+@forward 'lib/hero/mixins';
+@forward 'lib/icon/mixins';
+@forward 'lib/icon-button/mixins';
+@forward 'lib/image/mixins';
+@forward 'lib/info-tag/mixins';
+@forward 'lib/link/mixins';
+@forward 'lib/list/mixins';
+@forward 'lib/loader/mixins';
+@forward 'lib/media-button/mixins';
+@forward 'lib/pagination/mixins';
+@forward 'lib/price/mixins';
+@forward 'lib/promo-tag/mixins';
+@forward 'lib/ratings-reviews/numerical/mixins';
+@forward 'lib/ratings-reviews/percentage/mixins';
+@forward 'lib/ratings-reviews/range-bar/mixins';
+@forward 'lib/ratings-reviews/range-icons/mixins';
+@forward 'lib/ratings-reviews/range-icons-group/mixins';
+@forward 'lib/richtext/mixins';
+@forward 'lib/scroller/mixins';
+@forward 'lib/show-more-less/mixins';
+@forward 'lib/skeleton/mixins';
+@forward 'lib/tooltip/mixins';
+@forward 'lib/typography/mixins';
+@forward 'lib/utility/mixins';

package/scss/reset.scss

@@ -0,0 +1,168 @@
+@use 'mixins' as *;
+
+:root {
+	// stylelint-disable-next-line property-no-unknown
+	interpolate-size: allow-keywords;
+}
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+
+	vertical-align: baseline;
+
+	border: 0;
+
+	outline: none;
+}
+
+/* Add default focus style to all interactive elements after removing outline */
+*:focus-visible {
+	@include uilib-focus;
+}
+
+/* Add default focus style to all interactive elements after removing outline */
+*:active {
+	-webkit-tap-highlight-color: transparent;
+}
+
+/* Prevent font size inflation */
+html {
+	font-size: 100%;
+	-moz-text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Remove list styles on ul, ol elements with a class, which suggests default styling will be removed */
+ul,
+ol {
+	list-style: none;
+}
+
+/* Set core body defaults */
+body {
+	min-height: 100dvh;
+	margin: 0 auto;
+
+	color: var(--uilib-color-text-body);
+	font: var(--uilib-typography-body-medium);
+	text-shadow: none;
+
+	background-color: var(--uilib-color-canvas-default);
+	text-rendering: optimizelegibility;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+button,
+input,
+label {
+	line-height: var(--uilib-line-height-heading);
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4,
+h5 {
+	text-wrap: balance;
+}
+
+sup {
+	vertical-align: super;
+}
+
+sub {
+	vertical-align: sub;
+}
+
+a {
+	text-decoration-skip-ink: auto;
+
+	color: currentcolor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+	display: block;
+
+	max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+	min-height: 10em;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+	background-color: transparent;
+
+	-webkit-box-shadow: none;
+	-webkit-text-fill-color: var(--uilib-color-text-body);
+}
+
+/* Remove spinner arrows from number input */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button,
+input::-webkit-search-cancel-button {
+	margin: 0;
+
+	-webkit-appearance: none;
+}
+
+/* Remove search and clear */
+input::-ms-reveal,
+input::-ms-clear {
+	display: none;
+}
+
+input[type='number'] {
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+	scroll-margin-block: 5ex;
+}
+
+/* Disable all transitions and animations if reduced motion selected */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		transition-duration: 0ms !important;
+		animation-duration: 0ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+	}
+}

package/scss/themes/crystalski/_colors.scss

@@ -0,0 +1,48 @@
+// crystalski / colors
+@use 'sass:map';
+@use 'sass:color';
+@use 'primitives' as *;
+
+$uilib-color-semantic-crystalski: (
+	core-interaction: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	core-brand: map.get($uilib-crystalski-primitives, 'color-green-70'),
+	core-brand-strong: map.get($uilib-crystalski-primitives, 'color-blue-90'),
+	core-surface: map.get($uilib-crystalski-primitives, 'color-green-10'),
+	core-neutral: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	text-strong: map.get($uilib-crystalski-primitives, 'color-blue-90'),
+	text-body: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
+	text-link: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	text-link-visited: map.get($uilib-crystalski-primitives, 'color-purple-100'),
+	text-link-visited-inverse: map.get($uilib-crystalski-primitives, 'color-purple-40'),
+	text-inverse: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	text-promotion: map.get($uilib-crystalski-primitives, 'color-red-70'),
+	text-danger: map.get($uilib-crystalski-primitives, 'color-red-80'),
+	status-success-surface: map.get($uilib-crystalski-primitives, 'color-green-20'),
+	status-danger-surface: map.get($uilib-crystalski-primitives, 'color-red-20'),
+	status-warning-surface: map.get($uilib-crystalski-primitives, 'color-yellow-20'),
+	status-info-surface: map.get($uilib-crystalski-primitives, 'color-purple-20'),
+	status-success-icon: map.get($uilib-crystalski-primitives, 'color-green-80'),
+	status-danger-icon: map.get($uilib-crystalski-primitives, 'color-red-80'),
+	status-warning-icon: map.get($uilib-crystalski-primitives, 'color-yellow-80'),
+	status-info-icon: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	canvas-default: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	canvas-contrast: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
+	canvas-footer: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
+	border-interaction: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	border-brand: map.get($uilib-crystalski-primitives, 'color-green-70'),
+	border-brand-strong: map.get($uilib-crystalski-primitives, 'color-blue-90'),
+	border-input: map.get($uilib-crystalski-primitives, 'color-neutral-70'),
+	border-card: map.get($uilib-crystalski-primitives, 'color-neutral-30'),
+	border-danger: map.get($uilib-crystalski-primitives, 'color-red-70'),
+	border-inverse: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	border-divider: map.get($uilib-crystalski-primitives, 'color-neutral-30'),
+	border-dashed: var(--uilib-color-border-divider),
+	promotion: map.get($uilib-crystalski-primitives, 'color-red-70'),
+	other-disabled-soft: map.get($uilib-crystalski-primitives, 'color-neutral-40'),
+	other-disabled-strong: map.get($uilib-crystalski-primitives, 'color-neutral-70'),
+	other-active-state-tint: color.scale(map.get($uilib-crystalski-primitives, 'color-blue-20'), $alpha: -70%),
+	other-button-hover-state: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
+	other-secondary-button-hover-state: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	other-skeleton-loading: map.get($uilib-crystalski-primitives, 'color-neutral-30'),
+	other-scroll-handle: map.get($uilib-crystalski-primitives, 'color-neutral-50'),
+) !default;