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

package/scss/variables/_motion.scss

@@ -0,0 +1,27 @@
+// Elevations
+@use 'sass:map';
+@use '../lib/utility/mixins' as util;
+
+$uilib-motion: (
+	'duration': (
+		'slow': 0.5s,
+		'medium': 0.35s,
+		'fast': 0.2s,
+	),
+	'timing': (
+		// EaseInOut - cubic-bezier(0.42, 0, 0.58, 1)
+		'inout': ease-in-out,
+		// EaseInSine
+		'in': cubic-bezier(0.12, 0, 0.39, 0),
+		// EaseOutSine
+		'out': cubic-bezier(0.61, 1, 0.88, 1),
+		// EaseOutBack
+		'brand': cubic-bezier(0.34, 1.56, 0.64, 1),
+	),
+) !default;
+
+@mixin uilib-motion-base-vars($motion) {
+	@each $name, $value in $motion {
+		@include util.uilib-build-css-vars('motion-#{$name}', $value);
+	}
+}

package/scss/variables/_prefix.scss

@@ -0,0 +1 @@
+$app-prefix: '' !default;

package/scss/variables/_primitives.scss

@@ -0,0 +1,100 @@
+$uilib-primitives: (
+	color-blue-100: #1b115c,
+	color-blue-90: #072d92,
+	color-blue-80: #0a3cc2,
+	color-blue-70: #0c4bf3,
+	color-blue-60: #3567f6,
+	color-blue-50: #6d93f8,
+	color-blue-40: #94b0fa,
+	color-blue-30: #b6c8fc,
+	color-blue-20: #d8e2fd,
+	color-blue-10: #ecf1fe,
+
+	color-coolblue-100: #054461,
+	color-coolblue-90: #076692,
+	color-coolblue-80: #0a88c2,
+	color-coolblue-70: #0caaf3,
+	color-coolblue-60: #38b9f5,
+	color-coolblue-50: #70cbf4,
+	color-coolblue-40: #a9dff8,
+	color-coolblue-30: #c6eafb,
+	color-coolblue-20: #e2f4fd,
+	color-coolblue-10: #f0fafe,
+
+	color-green-100: #05423d,
+	color-green-90: #246f49,
+	color-green-80: #2ba168,
+	color-green-70: #30b675,
+	color-green-60: #61c48d,
+	color-green-50: #87d2a6,
+	color-green-40: #a9e0bf,
+	color-green-30: #c5e4cd,
+	color-green-20: #dff6eb,
+	color-green-10: #effbf5,
+
+	color-red-100: #600609,
+	color-red-90: #90090e,
+	color-red-80: #c00c12,
+	color-red-70: #f00f17,
+	color-red-60: #f23a41,
+	color-red-50: #f66f74,
+	color-red-40: #f89699,
+	color-red-30: #fab7b9,
+	color-red-20: #fde2e3,
+	color-red-10: #feecec,
+
+	color-orange-100: #663d00,
+	color-orange-90: #995c00,
+	color-orange-80: #cc7a00,
+	color-orange-70: #f90,
+	color-orange-60: #ffab2e,
+	color-orange-50: #ffc266,
+	color-orange-40: #ffd28f,
+	color-orange-30: #ffe0b2,
+	color-orange-20: #ffefd6,
+	color-orange-10: #fff7eb,
+
+	color-neutral-100: #000,
+	color-neutral-90: #4c4c4c,
+	color-neutral-80: #666,
+	color-neutral-70: #737373,
+	color-neutral-60: #969696,
+	color-neutral-50: #b9b9b9,
+	color-neutral-40: #dcdcdc,
+	color-neutral-30: #ebebeb,
+	color-neutral-20: #f5f5f5,
+	color-neutral-10: #fff,
+
+	color-purple-100: #39115c,
+	color-purple-90: #510792,
+	color-purple-80: #6c0ac2,
+	color-purple-70: #870cf3,
+	color-purple-60: #9c35f6,
+	color-purple-50: #b76df8,
+	color-purple-40: #ca94fa,
+	color-purple-30: #dbb6fc,
+	color-purple-20: #ecd8fd,
+	color-purple-10: #f5ecfe,
+
+	color-brand-trip-advisor-green: #00aa6c,
+	color-brand-paypal-blue: #253b80,
+
+	// 11px
+	font-size-40: 0.6875rem,
+	// 13px
+	font-size-60: 0.8125rem,
+	// 14px
+	font-size-80: 0.875rem,
+	// 16px - baseline
+	font-size-100: 1rem,
+	// 18px
+	font-size-120: 1.125rem,
+	// 20px
+	font-size-140: 1.25rem,
+	// 23px
+	font-size-160: 1.4375rem,
+	// 26px
+	font-size-190: 1.625rem,
+	// 29px
+	font-size-220: 1.8125rem,
+);

package/scss/variables/_spacing.scss

@@ -0,0 +1,38 @@
+$uilib-spacing: (
+	'auto': auto,
+	'none': 0,
+	// 2 / 16px
+	'050': 0.125rem,
+	// 4 / 16px
+	'100': 0.25rem,
+	// 8 / 16px
+	'200': 0.5rem,
+	// 12 / 16px
+	'300': 0.75rem,
+	// 16px
+	'400': 1rem,
+	// 20 / 16px
+	'500': 1.25rem,
+	// 24 / 16px
+	'600': 1.5rem,
+	// 28 / 16px
+	'700': 1.75rem,
+	// 32 / 16px
+	'800': 2rem,
+	// 36 / 16px
+	'900': 2.25rem,
+	// 40 / 16px
+	'1000': 2.5rem,
+	// 44 / 16px
+	'1100': 2.75rem,
+	// 48 / 16px
+	'1200': 3rem,
+	// 52 / 16px
+	'1300': 3.25rem,
+	// 56 / 16px
+	'1400': 3.5rem,
+	// 60 / 16px
+	'1500': 3.75rem,
+	// 64 / 16px
+	'1600': 4rem,
+) !default;

package/scss/variables/_strokes.scss

@@ -0,0 +1,18 @@
+// Strokes
+
+// Strokes / size @16px
+$uilib-stroke-sizes: (
+	// 1 / 16px
+	'025': 0.0625rem,
+	// 2 / 16px
+	'050': 0.125rem,
+	// 3 / 16px
+	'075': 0.1875rem
+) !default;
+
+// Strokes / styles
+$uilib-stroke-styles: (
+	'none': none,
+	'solid': solid,
+	'dashed': dashed,
+) !default;

package/scss/variables/_typography.scss

@@ -0,0 +1,123 @@
+// typography
+@use 'sass:meta';
+@use 'sass:map';
+@use 'primitives' as *;
+@use '../variables/prefix' as *;
+@use '../lib/utility/mixins' as util;
+
+// font-family
+$uilib-font-family-tuitypelight:
+	#{$app-prefix}TUITypeLight,
+	#{$app-prefix}TUITypeLightFallbackFont,
+	sans-serif !default;
+
+// font-families
+$uilib-font-families: (
+	'lead': #{meta.inspect($uilib-font-family-tuitypelight)},
+	'base': #{meta.inspect($uilib-font-family-tuitypelight)},
+) !default;
+
+// Dymanic font sizes for display headings - https://utopia.fyi/type/calculator/?c=367,40,1.125,960,64,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+// Dymanic font sizes for page headings - https://utopia.fyi/type/calculator/?c=367,14,1.125,960,16,1.2,10,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+$uilib-font-styles: (
+	'display-large': var(--uilib-font-weight-bold) clamp(2.8125rem, 1.5825rem + 5.3626vw, 4.8rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'display-medium': var(--uilib-font-weight-bold) clamp(2.5rem, 1.5717rem + 4.0472vw, 4rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'display-small': var(--uilib-font-weight-bold) clamp(2.2222rem, 1.5346rem + 2.9979vw, 3.3333rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-xxlarge': var(--uilib-font-weight-bold) clamp(1.5768rem, 1.0126rem + 2.4595vw, 2.4883rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-xlarge': var(--uilib-font-weight-bold) clamp(1.4016rem, 0.9857rem + 1.8132vw, 2.0736rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-large': var(--uilib-font-weight-bold) clamp(1.2458rem, 0.9475rem + 1.3009vw, 1.728rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-medium': var(--uilib-font-weight-bold) clamp(1.1074rem, 0.9016rem + 0.8973vw, 1.44rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-small': var(--uilib-font-weight-bold) clamp(0.9844rem, 0.8509rem + 0.5818vw, 1.2rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 23 / 16px
+	'component-heading-xlarge': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-160') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xxlarge': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-220') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xxlarge-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-220') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xlarge-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-160') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 20 / 16px
+	'component-heading-large': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-140') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-140') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 18 / 16px
+	'component-heading-medium': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 16 / 16px
+	'component-heading-small': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 18 / 16px
+	'body-large': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 16 / 16px
+	'body-medium': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 14 / 16px
+	'body-small': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 18 / 16px
+	'label-large': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 16 / 16px
+	'label-medium': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 14 / 16px
+	'label-small': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 13 / 16px
+	'label-xsmall': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-xsmall-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+) !default;
+
+// font-size/scale variables
+$uilib-font-size-root: 1rem !default; // Browser default > `16px`
+
+// line-height
+$uilib-line-height: (
+	'heading': 1.3,
+	'body': 1.3,
+	'none': 1,
+) !default;
+
+// font-weight
+$uilib-font-weight: (
+	'regular': 400,
+	'semibold': 600,
+	'bold': 700,
+) !default;
+
+@mixin uilib-font-base-vars($typography: $uilib-font-styles, $line-height: $uilib-line-height, $font-weight: $uilib-font-weight) {
+	--uilib-font-size-root: #{$uilib-font-size-root};
+
+	@include util.uilib-build-css-vars('typography', $typography);
+	@include util.uilib-build-css-vars('line-height', $line-height);
+	@include util.uilib-build-css-vars('font-weight', $font-weight);
+}