umberto 7.0.2 → 8.0.1

package/themes/umberto/src/gloria/css/theme/_light.scss

@@ -0,0 +1,344 @@
+@layer theme {
+	:root {
+		/* Primary */
+		--color-primary-50: hsl(228, 100%, 98%);
+		--color-primary-100: hsl(263, 48%, 95%);
+		--color-primary-200: hsl(263, 60%, 92%);
+		--color-primary-300: hsl(262, 51%, 80%);
+		--color-primary-400: hsl(261, 47%, 66%);
+		--color-primary-500: hsl(263, 59%, 52%);
+		--color-primary-600: hsl(263, 59%, 40%);
+		--color-primary-700: hsl(263, 59%, 26%);
+		--color-primary-800: hsl(263, 61%, 10%);
+		--color-primary: var(--color-primary-500);
+
+		/* Secondary */
+		--color-secondary-100: hsl(210, 22%, 91%);
+		--color-secondary-200: hsl(211, 29%, 82%);
+		--color-secondary-300: hsl(203, 16%, 77%);
+		--color-secondary-400: hsl(213, 21%, 70%);
+		--color-secondary-500: hsl(212, 19%, 57%);
+		--color-secondary-600: hsl(211, 21%, 47%);
+		--color-secondary-700: hsl(211, 20%, 29%);
+		--color-secondary-800: hsl(211, 22%, 21%);
+		--color-secondary-800-alpha: hsla(211, 22%, 21%, 0.12);
+		--color-secondary: var(--color-secondary-500);
+		--color-slate: hsl(211, 22%, 21%);
+
+		/* Gray */
+		--color-gray-100: hsl(0, 0%, 100%);
+		--color-gray-200: hsl(210, 17%, 99%);
+		--color-gray-300: hsl(210, 8%, 95%);
+		--color-gray-400: hsl(210, 5%, 91%);
+		--color-gray-500: hsl(210, 3%, 85%);
+		--color-gray-600: hsl(210, 1%, 71%);
+		--color-gray-700: hsl(180, 0%, 59%);
+		--color-gray-800: hsl(210, 1%, 43%);
+		--color-gray-900: hsl(210, 2%, 24%);
+		--color-gray: var(--color-gray-500);
+
+		/* Disabled Colors */
+		--color-secondary-100-disabled: hsla(210, 22%, 91%, 0.5);
+		--color-secondary-light-disabled: hsla(213, 21%, 70%, 0.5);
+
+		/* Common */
+		--color-common-white: hsl(0, 0%, 100%);
+		--color-common-black: hsl(0, 0%, 0%);
+
+		/* Background */
+		--color-background-body: hsl(0, 0%, 100%);
+
+		/* Text */
+		--color-text-disabled: hsl(213, 21%, 70%);
+		--color-text-secondary: hsl(214, 4%, 36%);
+		--color-text-primary: hsl(220, 100%, 5%);
+
+		/* Text Contrast */
+		--color-text-contrast: hsl(0, 0%, 100%);
+
+		/* Error */
+		--color-error-50: hsl(350, 100%, 98%);
+		--color-error-100: hsl(354, 100%, 90%);
+		--color-error-200: hsl(1, 91%, 78%);
+		--color-error-light: hsl(0, 85%, 68%);
+		--color-error-400: hsl(0, 99%, 63%);
+		--color-error-500: hsl(352, 100%, 45%);
+		--color-error-600: hsl(354, 100%, 42%);
+		--color-error-700: hsl(358, 100%, 39%);
+		--color-error: var(--color-error-500);
+
+		/* Info */
+		--color-info-100: hsl(234, 100%, 96%);
+		--color-info-200: hsl(237, 95%, 92%);
+		--color-info-light: hsl(236, 66%, 85%);
+		--color-info-400: hsl(234, 66%, 75%);
+		--color-info-500: hsl(254, 39%, 55%);
+		--color-info-600: hsl(253, 43%, 47%);
+		--color-info-700: hsl(248, 48%, 42%);
+		--color-info-800: hsl(248, 50%, 35%);
+		--color-info-900: hsl(248, 50%, 25%);
+		--color-info: var(--color-info-500);
+
+		/* Success */
+		--color-success-100: hsl(136, 45%, 94%);
+		--color-success-200: hsl(132, 42%, 84%);
+		--color-success-light: hsl(134, 42%, 74%);
+		--color-success-400: hsl(135, 44%, 56%);
+		--color-success-500: hsl(136, 51%, 43%);
+		--color-success-600: hsl(137, 60%, 32%);
+		--color-success-700: hsl(136, 53%, 32%);
+		--color-success: var(--color-success-500);
+
+		/* Warning */
+		--color-warning-100: hsl(37, 100%, 96%);
+		--color-warning-200: hsl(40, 100%, 79%);
+		--color-warning-light: hsl(40, 100%, 70%);
+		--color-warning-300: hsl(40, 100%, 63%);
+		--color-warning-400: hsl(36, 78%, 56%);
+		--color-warning-500: hsl(31, 73%, 59%);
+		--color-warning-600: hsl(26, 62%, 54%);
+		--color-warning-700: hsl(31, 82%, 36%);
+		--color-warning: var(--color-warning-500);
+
+		/* Cyan */
+		--color-cyan-50: hsl(189, 57%, 91%);
+		--color-cyan-100: hsl(188, 57%, 77%);
+		--color-cyan-200: hsl(188, 56%, 62%);
+		--color-cyan-300: hsl(187, 77%, 44%);
+		--color-cyan-400: hsl(188, 100%, 36%);
+		--color-cyan-500: hsl(189, 100%, 34%);
+		--color-cyan-600: hsl(189, 100%, 31%);
+		--color-cyan-700: hsl(189, 100%, 26%);
+		--color-cyan-800: hsl(188, 100%, 21%);
+		--color-cyan-900: hsl(186, 100%, 13%);
+		--color-cyan: var(--color-cyan-500);
+
+		/* Orange */
+		--color-orange-50: hsl(13, 66%, 94%);
+		--color-orange-100: hsl(21, 92%, 86%);
+		--color-orange-200: hsl(22, 92%, 77%);
+		--color-orange-300: hsl(23, 79%, 65%);
+		--color-orange-400: hsl(24, 94%, 59%);
+		--color-orange-500: hsl(28, 100%, 49%);
+		--color-orange-600: hsl(27, 100%, 46%);
+		--color-orange-700: hsl(27, 100%, 44%);
+		--color-orange-800: hsl(27, 100%, 41%);
+		--color-orange-900: hsl(27, 100%, 33%);
+		--color-orange: var(--color-orange-500);
+
+		/* Blue */
+		--color-blue-50: hsl(201, 83%, 95%);
+		--color-blue-100: hsl(203, 100%, 89%);
+		--color-blue-200: hsl(201, 100%, 81%);
+		--color-blue-300: hsl(201, 100%, 73%);
+		--color-blue-400: hsl(200, 100%, 65%);
+		--color-blue-500: hsl(200, 100%, 58%);
+		--color-blue-600: hsl(203, 100%, 56%);
+		--color-blue-700: hsl(204, 86%, 50%);
+		--color-blue-800: hsl(205, 93%, 45%);
+		--color-blue-900: hsl(208, 100%, 37%);
+		--color-blue: var(--color-blue-500);
+
+		/* Green */
+		--color-green-50: hsl(78, 52%, 94%);
+		--color-green-100: hsl(78, 49%, 84%);
+		--color-green-200: hsl(78, 47%, 74%);
+		--color-green-300: hsl(79, 48%, 64%);
+		--color-green-400: hsl(79, 48%, 56%);
+		--color-green-500: hsl(79, 53%, 48%);
+		--color-green-600: hsl(79, 55%, 43%);
+		--color-green-700: hsl(82, 58%, 38%);
+		--color-green-800: hsl(85, 61%, 32%);
+		--color-green-900: hsl(91, 74%, 22%);
+		--color-green: var(--color-green-500);
+
+		/* Rose */
+		--color-rose-50: hsl(345, 60%, 96%);
+		--color-rose-100: hsl(348, 91%, 91%);
+		--color-rose-200: hsl(355, 76%, 80%);
+		--color-rose-300: hsl(354, 78%, 72%);
+		--color-rose-400: hsl(355, 99%, 69%);
+		--color-rose-500: hsl(358, 100%, 65%);
+		--color-rose-600: hsl(355, 93%, 63%);
+		--color-rose-700: hsl(355, 76%, 57%);
+		--color-rose-800: hsl(355, 67%, 53%);
+		--color-rose-900: hsl(355, 64%, 48%);
+		--color-rose: var(--color-rose-500);
+
+		/* API Colors */
+		--api-class: hsl(253, 43%, 47%);
+		--api-folder: hsl(204, 86%, 50%);
+		--api-interface: hsl(79, 55%, 43%);
+		--api-module: hsl(355, 67%, 53%);
+		--api-package: hsl(36, 78%, 56%);
+		--api-typedef: hsl(189, 100%, 26%);
+	}
+
+	@media (prefers-contrast: more) {
+		:root {
+			/* Primary - increased contrast */
+			--color-primary-50: hsl(228, 100%, 100%);
+			--color-primary-100: hsl(263, 70%, 97%);
+			--color-primary-200: hsl(263, 80%, 94%);
+			--color-primary-300: hsl(262, 70%, 75%);
+			--color-primary-400: hsl(261, 70%, 58%);
+			--color-primary-500: hsl(263, 80%, 40%);
+			--color-primary-600: hsl(263, 85%, 30%);
+			--color-primary-700: hsl(263, 90%, 15%);
+			--color-primary-800: hsl(263, 95%, 5%);
+			--color-primary: var(--color-primary-500);
+
+			/* Secondary - increased contrast */
+			--color-secondary-100: hsl(210, 40%, 95%);
+			--color-secondary-200: hsl(211, 50%, 85%);
+			--color-secondary-300: hsl(203, 35%, 70%);
+			--color-secondary-400: hsl(213, 40%, 60%);
+			--color-secondary-500: hsl(212, 45%, 45%);
+			--color-secondary-600: hsl(211, 50%, 35%);
+			--color-secondary-700: hsl(211, 55%, 20%);
+			--color-secondary-800: hsl(211, 60%, 10%);
+			--color-secondary-800-alpha: hsla(211, 60%, 10%, 0.25);
+			--color-secondary: var(--color-secondary-500);
+			--color-slate: hsl(211, 55%, 10%);
+
+			/* Gray - increased contrast */
+			--color-gray-100: hsl(0, 0%, 100%);
+			--color-gray-200: hsl(210, 25%, 99%);
+			--color-gray-300: hsl(210, 20%, 95%);
+			--color-gray-400: hsl(210, 15%, 85%);
+			--color-gray-500: hsl(210, 10%, 75%);
+			--color-gray-600: hsl(210, 8%, 60%);
+			--color-gray-700: hsl(180, 5%, 45%);
+			--color-gray-800: hsl(210, 8%, 30%);
+			--color-gray-900: hsl(210, 15%, 15%);
+			--color-gray: var(--color-gray-500);
+
+			/* Disabled Colors - increased contrast */
+			--color-secondary-100-disabled: hsla(210, 40%, 95%, 0.7);
+			--color-secondary-light-disabled: hsla(213, 40%, 60%, 0.7);
+
+			/* Common - increased contrast */
+			--color-common-white: hsl(0, 0%, 100%);
+			--color-common-black: hsl(0, 0%, 0%);
+
+			/* Background - increased contrast */
+			--color-background-body: hsl(0, 0%, 100%);
+
+			/* Text - increased contrast */
+			--color-text-disabled: hsl(213, 35%, 55%);
+			--color-text-secondary: hsl(214, 25%, 20%);
+			--color-text-primary: hsl(220, 100%, 0%);
+
+			/* Text Contrast - increased contrast */
+			--color-text-contrast: hsl(0, 0%, 100%);
+
+			/* Error - increased contrast */
+			--color-error-50: hsl(350, 100%, 99%);
+			--color-error-100: hsl(354, 100%, 92%);
+			--color-error-200: hsl(1, 100%, 70%);
+			--color-error-light: hsl(0, 100%, 55%);
+			--color-error-400: hsl(0, 100%, 50%);
+			--color-error-500: hsl(352, 100%, 35%);
+			--color-error-600: hsl(354, 100%, 30%);
+			--color-error-700: hsl(358, 100%, 25%);
+			--color-error: var(--color-error-500);
+
+			/* Info - increased contrast */
+			--color-info-100: hsl(234, 100%, 98%);
+			--color-info-200: hsl(237, 100%, 95%);
+			--color-info-light: hsl(236, 85%, 80%);
+			--color-info-400: hsl(234, 85%, 65%);
+			--color-info-500: hsl(254, 65%, 45%);
+			--color-info-600: hsl(253, 70%, 38%);
+			--color-info-700: hsl(248, 75%, 32%);
+			--color-info-800: hsl(248, 80%, 25%);
+			--color-info-900: hsl(248, 85%, 15%);
+			--color-info: var(--color-info-500);
+
+			/* Success - increased contrast */
+			--color-success-100: hsl(136, 65%, 96%);
+			--color-success-200: hsl(132, 62%, 80%);
+			--color-success-light: hsl(134, 65%, 65%);
+			--color-success-400: hsl(135, 70%, 45%);
+			--color-success-500: hsl(136, 80%, 33%);
+			--color-success-600: hsl(137, 90%, 23%);
+			--color-success-700: hsl(136, 85%, 20%);
+			--color-success: var(--color-success-500);
+
+			/* Warning - increased contrast */
+			--color-warning-100: hsl(37, 100%, 98%);
+			--color-warning-200: hsl(40, 100%, 70%);
+			--color-warning-light: hsl(40, 100%, 60%);
+			--color-warning-400: hsl(36, 100%, 45%);
+			--color-warning-500: hsl(31, 100%, 48%);
+			--color-warning-600: hsl(26, 100%, 42%);
+			--color-warning-700: hsl(31, 100%, 25%);
+			--color-warning: var(--color-warning-500);
+
+			/* Cyan - increased contrast */
+			--color-cyan-50: hsl(189, 75%, 95%);
+			--color-cyan-100: hsl(188, 75%, 75%);
+			--color-cyan-200: hsl(188, 80%, 55%);
+			--color-cyan-300: hsl(187, 95%, 35%);
+			--color-cyan-400: hsl(188, 100%, 28%);
+			--color-cyan-500: hsl(189, 100%, 25%);
+			--color-cyan-600: hsl(189, 100%, 22%);
+			--color-cyan-700: hsl(189, 100%, 18%);
+			--color-cyan-800: hsl(188, 100%, 14%);
+			--color-cyan-900: hsl(186, 100%, 8%);
+			--color-cyan: var(--color-cyan-500);
+
+			/* Orange - increased contrast */
+			--color-orange-50: hsl(13, 85%, 97%);
+			--color-orange-100: hsl(21, 100%, 88%);
+			--color-orange-200: hsl(22, 100%, 70%);
+			--color-orange-300: hsl(23, 100%, 55%);
+			--color-orange-400: hsl(24, 100%, 50%);
+			--color-orange-500: hsl(28, 100%, 40%);
+			--color-orange-600: hsl(27, 100%, 37%);
+			--color-orange-700: hsl(27, 100%, 33%);
+			--color-orange-800: hsl(27, 100%, 30%);
+			--color-orange-900: hsl(27, 100%, 23%);
+			--color-orange: var(--color-orange-500);
+
+			/* Blue - increased contrast */
+			--color-blue-50: hsl(201, 100%, 97%);
+			--color-blue-100: hsl(203, 100%, 90%);
+			--color-blue-200: hsl(201, 100%, 75%);
+			--color-blue-300: hsl(201, 100%, 60%);
+			--color-blue-400: hsl(200, 100%, 50%);
+			--color-blue-500: hsl(200, 100%, 45%);
+			--color-blue-600: hsl(203, 100%, 40%);
+			--color-blue-700: hsl(204, 100%, 38%);
+			--color-blue-800: hsl(205, 100%, 35%);
+			--color-blue-900: hsl(208, 100%, 28%);
+			--color-blue: var(--color-blue-500);
+
+			/* Green - increased contrast */
+			--color-green-50: hsl(78, 70%, 97%);
+			--color-green-100: hsl(78, 70%, 80%);
+			--color-green-200: hsl(78, 70%, 65%);
+			--color-green-300: hsl(79, 70%, 55%);
+			--color-green-400: hsl(79, 75%, 45%);
+			--color-green-500: hsl(79, 80%, 38%);
+			--color-green-600: hsl(79, 85%, 32%);
+			--color-green-700: hsl(82, 85%, 28%);
+			--color-green-800: hsl(85, 90%, 22%);
+			--color-green-900: hsl(91, 95%, 15%);
+			--color-green: var(--color-green-500);
+
+			/* Rose - increased contrast */
+			--color-rose-50: hsl(345, 80%, 98%);
+			--color-rose-100: hsl(348, 100%, 93%);
+			--color-rose-200: hsl(355, 95%, 75%);
+			--color-rose-300: hsl(354, 100%, 65%);
+			--color-rose-400: hsl(355, 100%, 60%);
+			--color-rose-500: hsl(358, 100%, 55%);
+			--color-rose-600: hsl(355, 100%, 50%);
+			--color-rose-700: hsl(355, 100%, 45%);
+			--color-rose-800: hsl(355, 100%, 40%);
+			--color-rose-900: hsl(355, 100%, 35%);
+			--color-rose: var(--color-rose-500);
+		}
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_animation.scss

@@ -0,0 +1,32 @@
+@layer utils {
+	:root {
+		/* Sine Variations - Gentle, natural movements */
+		--cbuc-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);		/* Subtle entry */
+		--cbuc-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);		/* Best for: subtle UI responses, placeholder text */
+		--cbuc-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);	/* Gentle, balanced movement */
+
+		/* Quad Variations - More pronounced, visible animations */
+		--cbuc-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);			/* Medium strength entry */
+		--cbuc-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);			/* Best for: hover states, dropdown items */
+		--cbuc-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);	/* Medium balanced movement */
+
+		/* Cubic Variations - Strong, confident movements */
+		--cbuc-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);	/* Strong entry */
+		--cbuc-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);		/* Best for: buttons, important UI elements */
+		--cbuc-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);	/* Strong balanced movement */
+
+		/* Smoothstep Functions - Professional, refined movements */
+		--smoothstep: cubic-bezier(0.36, 0, 0.66, 1);	/* Best for: form inputs, focus states */
+		--smootherstep: cubic-bezier(0.5, 0, 0.5, 1);	/* Best for: dignified dropdowns, modals */
+
+		/* Special Effect Easings - Attention-grabbing animations */
+		--ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);		/* Best for: dropdown appear, notifications */
+		--ease-bounce-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);	/* Complementary to bounce-out */
+
+		/* Common Duration Values */
+		--duration-ultra-fast: 100ms;	/* Instant feedback: button clicks */
+		--duration-fast: 150ms;			/* Quick feedback: hover effects */
+		--duration-normal: 300ms;		/* Standard transitions: buttons, inputs */
+		--duration-slow: 500ms;			/* Complex animations: modals, page transitions */
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_colors.scss

@@ -0,0 +1,14 @@
+@layer utils {
+	.u-color {
+		&--white { color: var(--color-common-white); }
+		&--black { color: var(--color-common-black); }
+
+		&--primary		{ color: var(--color-primary); }
+		&--secondary 	{ color: var(--color-secondary); }
+
+		&--error 	{ color: var(--color-error); }
+		&--warning 	{ color: var(--color-warning); }
+		&--info 	{ color: var(--color-info); }
+		&--success 	{ color: var(--color-success); }
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_display.scss

@@ -0,0 +1,13 @@
+@layer utils {
+	.is-hidden {
+		display: none !important;
+	}
+
+	$display-values: block, inline, contents, flex, grid, inline-block, inline-flex;
+
+	@each $value in $display-values {
+		.u-display-#{$value} {
+			display: $value;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_flex.scss

@@ -0,0 +1,33 @@
+@layer utils {
+	.u-flex-horizontal {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.u-flex-vertical {
+		display: flex;
+		flex-direction: column;
+	}
+
+	$flex-directions: row, row-reverse, column, column-reverse;
+	$align-items-values: flex-start, flex-end, center, baseline, stretch;
+	$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly;
+
+	@each $direction in $flex-directions {
+		.u-flex-direction-#{$direction} {
+			flex-direction: $direction;
+		}
+	}
+
+	@each $value in $align-items-values {
+		.u-align-items-#{$value} {
+			align-items: $value;
+		}
+	}
+
+	@each $value in $justify-content-values {
+		.u-justify-content-#{$value} {
+			justify-content: $value;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_gap.scss

@@ -0,0 +1,8 @@
+@layer utils {
+	.u-gap-1 { gap: var(--spacing-1); }
+	.u-gap-2 { gap: var(--spacing-2); }
+	.u-gap-3 { gap: var(--spacing-3); }
+	.u-gap-4 { gap: var(--spacing-4); }
+	.u-gap-5 { gap: var(--spacing-5); }
+	.u-gap-6 { gap: var(--spacing-6); }
+}

package/themes/umberto/src/gloria/css/utilities/_index.scss

@@ -0,0 +1,11 @@
+@use 'colors';
+@use 'spacing';
+@use 'gap';
+@use 'radius';
+@use 'shadows';
+@use 'display';
+@use 'flex';
+@use 'rotation';
+@use 'animation';
+@use 'stop-scrolling';
+@use 'text';

package/themes/umberto/src/gloria/css/utilities/_radius.scss

@@ -0,0 +1,21 @@
+@layer utils {
+	:root {
+		--radius-base: 0.25rem; /* 4px */
+
+		--radius-0:		0rem;							/* 0px */
+		--radius-0-5:	calc(var(--radius-base) * 0.5);	/* 0.125rem | 2px */
+		--radius-1:		calc(var(--radius-base) * 1);	/* 0.25rem | 4px */
+		--radius-1-5:	calc(var(--radius-base) * 1.5);	/* 0.375rem | 6px */
+		--radius-2:		calc(var(--radius-base) * 2);	/* 0.5rem | 8px */
+		--radius-3:		calc(var(--radius-base) * 3);	/* 0.75rem | 12px */
+		--radius-4:		calc(var(--radius-base) * 4);	/* 1rem | 16px */
+		--radius-5:		calc(var(--radius-base) * 5);	/* 1.25rem | 20px */
+		--radius-6:		calc(var(--radius-base) * 6);	/* 1.5rem | 24px */
+		--radius-8:		calc(var(--radius-base) * 8);	/* 2rem | 32px */
+		--radius-10:	calc(var(--radius-base) * 10);	/* 2.5rem | 40px */
+		--radius-12:	calc(var(--radius-base) * 12);	/* 3rem | 48px */
+		--radius-16:	calc(var(--radius-base) * 16);	/* 4rem | 64px */
+		--radius-20:	calc(var(--radius-base) * 20);	/* 5rem | 80px */
+		--radius-full:	9999px;							/* For pill/circular shapes */
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_rotation.scss

@@ -0,0 +1,8 @@
+@layer utils {
+	.u-rotate {
+		&-0		{ transform: rotate(0deg); }
+		&-90	{ transform: rotate(90deg); }
+		&-180	{ transform: rotate(180deg); }
+		&-270	{ transform: rotate(270deg); }
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_shadows.scss

@@ -0,0 +1,13 @@
+@layer utils {
+	:root {
+		--drop-shadow-color: rgb(0, 0, 0);
+	}
+
+	.u-drop-shadow {
+		box-shadow: 4px 4px 8px color-mix(in srgb, var(--drop-shadow-color) 12%, transparent);
+	}
+
+	.u-drop-shadow-1 {
+		box-shadow: 0px 0px 4px 0px color-mix(in srgb, var(--drop-shadow-color) 12%, transparent);
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_spacing.scss

@@ -0,0 +1,97 @@
+@layer utils {
+	:root {
+		--spacing-base: 0.25rem; /* 4px */
+
+		--spacing-0: 	0rem;								/* 0px */
+		--spacing-0-5:	calc(var(--spacing-base) * 0.5);	/* 0.125rem | 2px */
+		--spacing-1:	calc(var(--spacing-base) * 1);		/* 0.25rem | 4px */
+		--spacing-1-5:	calc(var(--spacing-base) * 1.5);	/* 0.375rem | 6px */
+		--spacing-2:	calc(var(--spacing-base) * 2);		/* 0.5rem | 8px */
+		--spacing-3:	calc(var(--spacing-base) * 3);		/* 0.75rem | 12px */
+		--spacing-3-5:	calc(var(--spacing-base) * 3.5);	/* 0.875rem | 14px */
+		--spacing-4:	calc(var(--spacing-base) * 4);		/* 1rem | 16px */
+		--spacing-5:	calc(var(--spacing-base) * 5);		/* 1.25rem | 20px */
+		--spacing-6:	calc(var(--spacing-base) * 6);		/* 1.5rem | 24px */
+		--spacing-7:	calc(var(--spacing-base) * 7);		/* 1.75rem | 28px */
+		--spacing-8:	calc(var(--spacing-base) * 8);		/* 2rem | 32px */
+		--spacing-9:	calc(var(--spacing-base) * 9);		/* 2.25rem | 36px */
+		--spacing-10:	calc(var(--spacing-base) * 10);		/* 2.5rem | 40px */
+		--spacing-11:	calc(var(--spacing-base) * 11);		/* 2.75rem | 44px */
+		--spacing-12:	calc(var(--spacing-base) * 12);		/* 3rem | 48px */
+		--spacing-14:	calc(var(--spacing-base) * 14);		/* 3.5rem | 56px */
+		--spacing-16:	calc(var(--spacing-base) * 16);		/* 4rem | 64px */
+		--spacing-18:	calc(var(--spacing-base) * 18);		/* 4.5rem | 72px */
+		--spacing-20:	calc(var(--spacing-base) * 20);		/* 5rem | 80px */
+	}
+
+	/* Generate margin utilities */
+	$margin-sides: (
+		"t": "top",
+		"r": "right",
+		"b": "bottom",
+		"l": "left"
+	);
+
+	$margin-sizes: (0, 1, 2, 3, 4, 6, 8, 9, 10, 12, 16, 20);
+
+	@each $abbr, $side in $margin-sides {
+		@each $size in $margin-sizes {
+			@if ($size <= 12 or ($abbr == "t" and $size <= 20)) {
+				.u-m#{$abbr}-#{$size} { margin-#{$side}: var(--spacing-#{$size}); }
+				.u-p#{$abbr}-#{$size} { margin-#{$side}: var(--spacing-#{$size}); }
+			}
+		}
+	}
+
+	/* Generate margin-x and margin-y utilities */
+	$margin-combos: (
+		"x": ("left", "right"),
+		"y": ("top", "bottom")
+	);
+
+	$margin-combo-sizes: (0, 1, 2, 3, 4, 6, 8, 10, 12);
+
+	@each $abbr, $sides in $margin-combos {
+		@each $size in $margin-combo-sizes {
+			.u-m#{$abbr}-#{$size} {
+				@each $side in $sides {
+					margin-#{$side}: var(--spacing-#{$size});
+				}
+			}
+		}
+	}
+
+	/* Generate padding utilities */
+	$padding-sides: (
+		"t": "top",
+		"r": "right",
+		"b": "bottom",
+		"l": "left"
+	);
+
+	$padding-sizes: (0, 2, 4, 6, 8);
+
+	@each $abbr, $side in $padding-sides {
+		@each $size in $padding-sizes {
+			.u-p#{$abbr}-#{$size} { padding-#{$side}: var(--spacing-#{$size}); }
+		}
+	}
+
+	/* Generate padding-x and padding-y utilities */
+	$padding-combos: (
+		"x": ("left", "right"),
+		"y": ("top", "bottom")
+	);
+
+	$padding-combo-sizes: (0, 2, 4, 6, 8);
+
+	@each $abbr, $sides in $padding-combos {
+		@each $size in $padding-combo-sizes {
+			.u-p#{$abbr}-#{$size} {
+				@each $side in $sides {
+					padding-#{$side}: var(--spacing-#{$size});
+				}
+			}
+		}
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_stop-scrolling.scss

@@ -0,0 +1,9 @@
+@layer utils {
+	body.u-stop-scrolling {
+		@media screen and (max-width: 960px) {
+			overflow: hidden;
+			position: fixed;
+			width: 100%;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/utilities/_text.scss

@@ -0,0 +1,42 @@
+@layer utils {
+	.u-text {
+		&--3xl	{ font-size: var(--font-size-3xl); }
+		&--2xl	{ font-size: var(--font-size-2xl); }
+		&--xl	{ font-size: var(--font-size-xl); }
+		&--lg	{ font-size: var(--font-size-lg); }
+		&--base	{ font-size: var(--font-size-base); }
+		&--sm	{ font-size: var(--font-size-sm); }
+		&--xs	{ font-size: var(--font-size-xs); }
+	}
+
+	.u-color-text {
+		&--primary		{ color: var(--color-text-primary); }
+		&--secondary	{ color: var(--color-text-secondary); }
+		&--disabled		{ color: var(--color-text-disabled); }
+	}
+
+	.u-text-transform {
+		&--uppercase	{ text-transform: uppercase; }
+		&--lowercase	{ text-transform: lowercase; }
+		&--capitalize	{ text-transform: capitalize; }
+	}
+
+	.u-text-align {
+		&--left		{ text-align: left; }
+		&--center	{ text-align: center; }
+		&--right	{ text-align: right; }
+	}
+
+	.u-text-decoration {
+		&--underline	{ text-decoration: var(--text-decoration-underline); }
+		&--none			{ text-decoration: var(--text-decoration-none); }
+	}
+
+	.u-font-weight {
+		&--thin		{ font-weight: var(--font-weight-thin); }
+		&--regular	{ font-weight: var(--font-weight-regular); }
+		&--semibold	{ font-weight: var(--font-weight-semibold); }
+		&--bold		{ font-weight: var(--font-weight-bold); }
+		&--bolder	{ font-weight: var(--font-weight-bolder); }
+	}
+}