@tui/design-system 0.1.0

package/scss/themes/firstchoice/_primitives.scss

@@ -0,0 +1,106 @@
+@use 'sass:map';
+@use '../../variables/primitives' as *;
+
+$uilib-firstchoice-primitives: map.merge(
+	$uilib-primitives,
+	(
+		color-pink-100: #55031b,
+		color-pink-90: #770a2a,
+		color-pink-80: #99143b,
+		color-pink-70: #d61d5f,
+		color-pink-60: #ff467c,
+		color-pink-50: #ff7ea3,
+		color-pink-40: #ffa3be,
+		color-pink-30: #ffd4e4,
+		color-pink-20: #ffecf2,
+		color-pink-10: #fff9fb,
+
+		color-red-100: #610d07,
+		color-red-90: #80170b,
+		color-red-80: #a5261c,
+		color-red-70: #c7372c,
+		color-red-60: #e94b3f,
+		color-red-50: #ff5e52,
+		color-red-40: #ff8279,
+		color-red-30: #ffa6a0,
+		color-red-20: #fbdbd9,
+		color-red-10: #ffefed,
+
+		color-orange-100: #5c3d00,
+		color-orange-90: #855800,
+		color-orange-80: #ad7400,
+		color-orange-70: #d68f00,
+		color-orange-60: #fa0,
+		color-orange-50: #ffb92e,
+		color-orange-40: #ffc85c,
+		color-orange-30: #ffd88a,
+		color-orange-20: #fec,
+		color-orange-10: #fff6e5,
+
+		color-sand-100: #4a453c,
+		color-sand-90: #615a50,
+		color-sand-80: #8e877b,
+		color-sand-70: #bbb4a9,
+		color-sand-60: #d2ccc1,
+		color-sand-50: #e9e3da,
+		color-sand-40: #f2eee4,
+		color-sand-30: #faf5ed,
+		color-sand-20: #fdfbf8,
+		color-sand-10: #fffefe,
+
+		color-purple-100: #212042,
+		color-purple-90: #32305f,
+		color-purple-80: #44427c,
+		color-purple-70: #57559a,
+		color-purple-60: #6c69b7,
+		color-purple-50: #827fd4,
+		color-purple-40: #8380f7,
+		color-purple-30: #9996f1,
+		color-purple-20: #d6d5f9,
+		color-purple-10: #f5f5ff,
+
+		color-neutral-100: #000,
+		color-neutral-90: #3b4641,
+		color-neutral-80: #4e5b55,
+		color-neutral-70: #616f69,
+		color-neutral-60: #8a9892,
+		color-neutral-50: #9faca7,
+		color-neutral-40: #b5c1bc,
+		color-neutral-30: #ccd5d1,
+		color-neutral-20: #e3e9e7,
+		color-neutral-10: #fff,
+
+		color-greenpalm-100: #002f17,
+		color-greenpalm-90: #335945,
+		color-greenpalm-80: #668274,
+		color-greenpalm-70: #7d9c8c,
+		color-greenpalm-60: #95b5a5,
+		color-greenpalm-50: #99aca2,
+		color-greenpalm-40: #b6d1c9,
+		color-greenpalm-30: #cee8e0,
+		color-greenpalm-20: #f5fff9,
+		color-greenpalm-10: #fefffe,
+
+		color-greenjade-100: #115a2e,
+		color-greenjade-90: #1e7c43,
+		color-greenjade-80: #2e9e5b,
+		color-greenjade-70: #42c074,
+		color-greenjade-60: #59e28f,
+		color-greenjade-50: #71ffa9,
+		color-greenjade-40: #91ffbc,
+		color-greenjade-30: #b1ffd0,
+		color-greenjade-20: #d1ffe3,
+		color-greenjade-10: #f8fffc,
+
+		color-greenmoss-100: #35560e,
+		color-greenmoss-90: #4d781a,
+		color-greenmoss-80: #669a29,
+		color-greenmoss-70: #81bc3c,
+		color-greenmoss-60: #95c75b,
+		color-greenmoss-50: #a9d27a,
+		color-greenmoss-40: #bedc9a,
+		color-greenmoss-30: #d8eabe,
+		color-greenmoss-20: #e6f2d8,
+		color-greenmoss-10: #f8fff0,
+	)
+);

package/scss/themes/firstchoice/_typography.scss

@@ -0,0 +1,14 @@
+// firstchoice / typography
+@use '../../variables/prefix' as *;
+
+// font-family
+$uilib-font-family-pastichegrotesque:
+	#{$app-prefix}PasticheGrotesque,
+	#{$app-prefix}PasticheGrotesqueFallbackFont,
+	'arial black',
+	sans-serif;
+$uilib-font-family-rondelle:
+	#{$app-prefix}Rondelle,
+	#{$app-prefix}RondelleFallbackFont,
+	verdana,
+	sans-serif;

package/scss/themes/firstchoice/fonts.json

@@ -0,0 +1,50 @@
+[
+	{
+		"family": "PasticheGrotesque",
+		"path": "v3/fonts/pastiche-grotesque-black.subset.woff2",
+		"display": "swap",
+		"weight": "400 700",
+		"style": "normal"
+	},
+	{
+		"family": "Rondelle",
+		"path": "v3/fonts/rondelle-black.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "normal"
+	},
+	{
+		"family": "Rondelle",
+		"path": "v3/fonts/rondelle-book.subset.woff2",
+		"display": "swap",
+		"weight": "400",
+		"style": "normal"
+	},
+	{
+		"weight": "400 900",
+		"family": "PasticheGrotesqueFallbackFont",
+		"src": "local('arial black')",
+		"sizeAdjust": "92%",
+		"ascentOverride": "95.5%",
+		"descentOverride": "22.6%",
+		"lineGapOverride": "12.7%"
+	},
+	{
+		"weight": "400",
+		"family": "RondelleFallbackFont",
+		"src": "local('verdana')",
+		"sizeAdjust": "95%",
+		"ascentOverride": "81.6%",
+		"descentOverride": "23.2%",
+		"lineGapOverride": "24%"
+	},
+	{
+		"weight": "700 900",
+		"family": "RondelleFallbackFont",
+		"src": "local('arial black')",
+		"sizeAdjust": "90%",
+		"ascentOverride": "81.5%",
+		"descentOverride": "30.1%",
+		"lineGapOverride": "25.3%"
+	}
+]

package/scss/themes/firstchoice/fonts.scss

@@ -0,0 +1,8 @@
+// fonts
+@forward '../../variables/fonts/pastiche-grotesque-black';
+@forward '../../variables/fonts/rondelle-black';
+@forward '../../variables/fonts/rondelle-book';
+
+// import font f-mod fallbacks
+@forward '../../variables/fonts/pastiche-grotesque-fallback';
+@forward '../../variables/fonts/rondelle-fallback';

package/scss/themes/firstchoice/index.scss

@@ -0,0 +1,166 @@
+// import theme variables
+@use 'sass:list';
+@use 'colors' as *;
+@use 'overrides' as *;
+@use 'typography' as *;
+@use '../../lib/utility/mixins' as util;
+
+:root[data-theme='firstchoice'],
+:host([data-theme='firstchoice']),
+[data-theme='firstchoice'],
+.theme-firstchoice {
+	// Theme-name
+	--uilib-theme-name: 'firstchoice';
+
+	// 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-firstchoice);
+
+	// Elevations
+	@include uilib-elevation-base-vars;
+
+	// Focus
+	@include util.uilib-build-css-vars('focus', $uilib-firstchoice-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-firstchoice-font-families);
+
+	// Typography / font-weight and line-height
+	@include uilib-font-base-vars($typography: $uilib-firstchoice-font-styles, $font-weight: $uilib-firstchoice-font-weight);
+
+	// COMPONENTS
+	// Accordion
+	@include util.uilib-build-css-vars('accordion', $uilib-firstchoice-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-firstchoice-alert-variables);
+
+	// Breadcrumb
+	@include util.uilib-build-css-vars('breadcrumb', $uilib-firstchoice-breadcrumb-variables);
+
+	// Button
+	@include util.uilib-build-css-vars('button', $uilib-firstchoice-button-variables);
+
+	// Card - search
+	@include util.uilib-build-css-vars('card-search', $uilib-firstchoice-card-search-variables);
+
+	// Flight details
+	@include util.uilib-build-css-vars('flight-details', $uilib-firstchoice-flight-details-variables);
+
+	// Form row
+	@include util.uilib-build-css-vars('form-row', $uilib-firstchoice-form-row-variables);
+
+	// Form input checkbox
+	@include util.uilib-build-css-vars('input-checkbox', $uilib-firstchoice-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-input-radio-variables);
+
+	// Form input stepper
+	@include util.uilib-build-css-vars('input-stepper', $uilib-input-stepper-variables);
+
+	// Form input slider
+	@include util.uilib-build-css-vars('input-slider', $uilib-firstchoice-input-slider-variables);
+
+	// Form input switch
+	@include util.uilib-build-css-vars('input-switch', $uilib-input-switch-variables);
+
+	// Form input text
+	@include util.uilib-build-css-vars('input-text', $uilib-firstchoice-input-text-variables);
+
+	// Hero
+	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
+
+	// Icon button
+	@include util.uilib-build-css-vars('icon-button', $uilib-firstchoice-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-firstchoice-info-tag-variables);
+
+	// Link
+	@include util.uilib-build-css-vars('link', $uilib-link-variables);
+
+	// List
+	@include util.uilib-build-css-vars('list', $uilib-firstchoice-list-variables);
+
+	// Loader
+	@include util.uilib-build-css-vars('loader', $uilib-firstchoice-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-firstchoice-pagination-variables);
+
+	// Price
+	@include util.uilib-build-css-vars('price', $uilib-firstchoice-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-firstchoice-ratings-numerical-variables);
+
+	// Ratings and Reviews - Percentage
+	@include util.uilib-build-css-vars('ratings-percentage', $uilib-firstchoice-ratings-percentage-variables);
+
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-firstchoice-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-firstchoice-show-more-less-variables);
+
+	// Skeleton
+	@include util.uilib-build-css-vars('skeleton', $uilib-firstchoice-skeleton-variables);
+
+	// Tooltip
+	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+}

package/scss/themes/firstchoice/theme.json

@@ -0,0 +1,323 @@
+{
+	"colors": {
+		"core": {
+			"tokens": {
+				"color-core-interaction": {
+					"primitive": "color-pink-70"
+				},
+				"color-core-brand": {
+					"primitive": "color-pink-60"
+				},
+				"color-core-brand-strong": {
+					"primitive": "color-greenpalm-100"
+				},
+				"color-core-surface": {
+					"primitive": "color-sand-30"
+				},
+				"color-core-neutral": {
+					"primitive": "color-neutral-10"
+				}
+			}
+		},
+		"text": {
+			"tokens": {
+				"color-text-strong": {
+					"primitive": "color-greenpalm-100"
+				},
+				"color-text-body": {
+					"primitive": "color-greenpalm-100"
+				},
+				"color-text-link": {
+					"primitive": "color-pink-70"
+				},
+				"color-text-link-visited": {
+					"primitive": "color-purple-60"
+				},
+				"color-text-link-visited-inverse": {
+					"primitive": "color-purple-30"
+				},
+				"color-text-inverse": {
+					"primitive": "color-sand-10"
+				},
+				"color-text-promotion": {
+					"primitive": "color-greenpalm-100"
+				},
+				"color-text-danger": {
+					"primitive": "color-red-80"
+				},
+				"color-text-tooltip": {
+					"primitive": "color-greenpalm-100",
+					"title": "Text tooltip",
+					"darkColor": true
+				}
+			}
+		},
+		"status": {
+			"tokens": {
+				"color-status-success-surface": {
+					"primitive": "color-greenmoss-20"
+				},
+				"color-status-danger-surface": {
+					"primitive": "color-red-20"
+				},
+				"color-status-warning-surface": {
+					"primitive": "color-orange-20"
+				},
+				"color-status-info-surface": {
+					"primitive": "color-sand-30"
+				},
+				"color-status-success-icon": {
+					"primitive": "color-greenmoss-70",
+					"lowContrast": false
+				},
+				"color-status-danger-icon": {
+					"primitive": "color-red-80"
+				},
+				"color-status-warning-icon": {
+					"primitive": "color-orange-60",
+					"lowContrast": false
+				},
+				"color-status-info-icon": {
+					"primitive": "color-greenpalm-100"
+				}
+			}
+		},
+		"canvas": {
+			"tokens": {
+				"color-canvas-default": {
+					"primitive": "color-neutral-10"
+				},
+				"color-canvas-contrast": {
+					"primitive": "color-sand-30"
+				}
+			}
+		},
+		"border": {
+			"tokens": {
+				"color-border-interaction": {
+					"primitive": "color-pink-70"
+				},
+				"color-border-brand-strong": {
+					"primitive": "color-greenpalm-100"
+				},
+				"color-border-input": {
+					"primitive": "color-neutral-70"
+				},
+				"color-border-card": {
+					"primitive": "color-sand-50"
+				},
+				"color-border-inverse": {
+					"primitive": "color-neutral-10"
+				},
+				"color-border-divider": {
+					"primitive": "color-sand-50"
+				},
+				"color-border-danger": {
+					"primitive": "color-red-70"
+				},
+				"color-border-insider": {
+					"primitive": "color-purple-40",
+					"title": "Border insider"
+				}
+			}
+		},
+		"promotion": {
+			"tokens": {
+				"color-promotion": {
+					"primitive": "color-pink-30",
+					"darkColor": false
+				},
+				"color-promotion-free-kids": {
+					"primitive": "color-greenpalm-30",
+					"title": "Promotion free kids"
+				},
+				"color-promotion-insider-soft": {
+					"primitive": "color-purple-20",
+					"title": "Promotion insider soft"
+				},
+				"color-promotion-insider-strong": {
+					"primitive": "color-purple-40",
+					"title": "Promotion insider strong"
+				}
+			}
+		},
+		"sustainability": {
+			"tokens": {
+				"color-sustainability": {
+					"primitive": "color-greenjade-70",
+					"title": "Sustainability",
+					"lowContrast": false
+				},
+				"color-sustainability-soft": {
+					"primitive": "color-greenmoss-30",
+					"title": "Sustainability soft"
+				}
+			}
+		},
+		"other": {
+			"tokens": {
+				"color-other-disabled-soft": {
+					"primitive": "color-neutral-30"
+				},
+				"color-other-disabled-strong": {
+					"primitive": "color-neutral-70"
+				},
+				"color-other-active-state-tint": {
+					"primitive": "color-pink-20"
+				},
+				"color-other-button-hover-state": {
+					"primitive": "color-pink-30"
+				},
+				"color-other-secondary-button-hover-state": {
+					"primitive": "color-sand-30"
+				},
+				"color-other-skeleton-loading": {
+					"primitive": "color-neutral-20"
+				}
+			}
+		}
+	},
+	"focus": {
+		"tokens": {
+			"focus-default": {
+				"primitive": "2px color-neutral-10, 4px color-greenpalm-100, 6px color-greenpalm-100 40%"
+			}
+		}
+	},
+	"alert": {
+		"tokens": {
+			"alert-icon-info-bg": {
+				"primitive": "uilib-color-status-info-icon"
+			},
+			"alert-icon-error-bg": {
+				"primitive": "uilib-color-status-error-icon"
+			},
+			"alert-icon-warning-bg": {
+				"primitive": "uilib-color-status-warning-icon"
+			},
+			"alert-icon-success-bg": {
+				"primitive": "uilib-color-status-success-icon"
+			}
+		}
+	},
+	"button": {
+		"tokens": {
+			"button-radius": {
+				"primitive": "uilib-border-radius-200"
+			},
+			"button-secondary-color": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"button-secondary-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-text-strong"
+			},
+			"button-tertiary-color": {
+				"primitive": "uilib-color-text-inverse"
+			},
+			"button-tertiary-bg-color": {
+				"primitive": "uilib-color-core-brand-strong"
+			},
+			"button-tertiary-hover-bg-color": {
+				"primitive": "uilib-color-core-brand-strong + 20% uilib-color-core-neutral"
+			},
+			"button-promotion-bg-color": {
+				"primitive": "uilib-color-core-interaction"
+			},
+			"button-promotion-hover-bg-color": {
+				"primitive": "uilib-color-core-interaction + 20% uilib-color-core-neutral"
+			}
+		}
+	},
+	"card-search": {
+		"tokens": {
+			"card-search-radius": {
+				"primitive": "uilib-border-radius-200"
+			},
+			"card-search-radius-spacing": {
+				"primitive": "uilib-border-spacing-200"
+			}
+		}
+	},
+	"form-row": {
+		"tokens": {
+			"form-row-label-font": {
+				"primitive": "uilib-typography-label-medium-strong"
+			}
+		}
+	},
+	"icon-button": {
+		"tokens": {
+			"icon-button-radius": {
+				"primitive": "uilib-border-radius-200"
+			},
+			"icon-button-ghost-color": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"icon-button-ghost-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-text-strong"
+			},
+			"icon-button-secondary-color": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"icon-button-secondary-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-text-strong"
+			},
+			"icon-button-control-color": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"icon-button-control-bg-color": {
+				"primitive": "uilib-color-core-neutral"
+			},
+			"icon-button-control-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-text-strong"
+			},
+			"icon-button-promotion-bg-color": {
+				"primitive": "uilib-color-core-interaction"
+			},
+			"icon-button-promotion-hover-bg-color": {
+				"primitive": "uilib-color-core-interaction + 20% uilib-color-core-neutral"
+			},
+			"icon-button-shortlist-color": {
+				"primitive": "uilib-color-core-interaction"
+			},
+			"icon-button-shortlist-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 10% uilib-color-core-interaction"
+			}
+		}
+	},
+	"info-tag": {
+		"tokens": {
+			"info-tag-local-product-bg-color": {
+				"primitive": "uilib-color-canvas-contrast"
+			}
+		}
+	},
+	"pagination": {
+		"tokens": {
+			"pagination-icon-color": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"pagination-selected-bg": {
+				"primitive": "uilib-color-text-strong"
+			},
+			"pagination-hover-bg": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-text-strong"
+			}
+		}
+	},
+	"price": {
+		"displayType": "color",
+		"tokens": {
+			"price-discount-color": {
+				"primitive": "uilib-color-text-danger"
+			}
+		}
+	},
+	"ratings-numerical": {
+		"tokens": {
+			"ratings-numerical-brand-radius": {
+				"primitive": "uilib-border-radius-100"
+			}
+		}
+	}
+}