@webitel/styleguide 26.2.19 → 26.2.20

package/src/lib/primevue/components/single-select/sizes/index.ts

@@ -0,0 +1,53 @@
+const sizes = {
+	root: {
+		paddingX: '{form.field.padding.x}',
+		paddingY: '{form.field.padding.y}',
+		borderRadius: '{form.field.border.radius}',
+		focusRing: {
+			width: '{form.field.focus.ring.width}',
+			style: '{form.field.focus.ring.style}',
+			offset: '{form.field.focus.ring.offset}',
+		},
+		transitionDuration: '0s',
+		sm: {
+			fontSize: '{form.field.sm.font.size}',
+			paddingX: '{form.field.sm.padding.x}',
+			paddingY: '{form.field.sm.padding.y}',
+		},
+		lg: {
+			fontSize: '{form.field.lg.font.size}',
+			paddingX: '{form.field.lg.padding.x}',
+			paddingY: '{form.field.lg.padding.y}',
+		},
+	},
+	dropdown: {
+		width: '2.5rem',
+	},
+	overlay: {
+		borderRadius: '{overlay.select.border.radius}',
+	},
+	list: {
+		padding: '{list.padding}',
+		gap: '{list.gap}',
+		header: {
+			padding: '{list.header.padding}',
+		},
+	},
+	option: {
+		padding: '{list.option.padding}',
+		borderRadius: '{list.option.border.radius}',
+	},
+	optionGroup: {
+		fontWeight: '{list.option.group.font.weight}',
+		padding: '{list.option.group.padding}',
+	},
+	checkmark: {
+		gutterStart: '-0.375rem',
+		gutterEnd: '0.375rem',
+	},
+	emptyMessage: {
+		padding: '{list.option.padding}',
+	},
+};
+
+export default sizes;

package/src/lib/primevue/components/toast/colors/dark/index.ts

@@ -0,0 +1,101 @@
+const darkColors = {
+	root: {
+		blur: '10px',
+	},
+	info: {
+		background: '{info.highlightColor}',
+		borderColor: '{info.highlightColor}',
+		color: '{info.onHighlightColor}',
+		iconColor: '{info.onHighlightColor}',
+		detailColor: '{info.onHighlightColor}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{info.onHighlightColor}',
+			focusRing: {
+				color: '{info.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	success: {
+		background: '{success.highlightColor}',
+		borderColor: '{success.highlightColor}',
+		color: '{success.onHighlightColor}',
+		iconColor: '{success.onHighlightColor}',
+		detailColor: '{success.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{success.onHighlightColor}',
+			focusRing: {
+				color: '{success.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	warn: {
+		background: '{warn.highlightColor}',
+		borderColor: '{warn.highlightColor}',
+		color: '{warn.onHighlightColor}',
+		iconColor: '{warn.onHighlightColor}',
+		detailColor: '{warn.onHighlightColor}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{warn.onHighlightColor}',
+			focusRing: {
+				color: '{warn.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	error: {
+		background: '{error.highlightColor}',
+		borderColor: '{error.highlightColor}',
+		color: '{error.onHighlightColor}',
+		iconColor: '{error.onHighlightColor}',
+		detailColor: '{error.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{error.onHighlightColor}',
+			focusRing: {
+				color: '{error.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	secondary: {
+		background: '{secondary.highlightColor}',
+		borderColor: '{secondary.highlightColor}',
+		color: '{secondary.onHighlightColor}',
+		iconColor: '{secondary.onHighlightColor}',
+		detailColor: '{secondary.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{secondary.onHighlightColor}',
+			focusRing: {
+				color: '{secondary.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	contrast: {
+		background: '{surface.0}',
+		borderColor: '{surface.100}',
+		color: '{surface.950}',
+		iconColor: '{surface.950}',
+		detailColor: '{surface.700}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{surface.100}',
+			focusRing: {
+				color: '{surface.950}',
+				shadow: 'none',
+			},
+		},
+	},
+};
+
+export default darkColors;

package/src/lib/primevue/components/toast/colors/index.ts

@@ -0,0 +1,9 @@
+import darkColors from './dark';
+import lightColors from './light';
+
+const colorScheme = {
+	light: lightColors,
+	dark: darkColors,
+};
+
+export default colorScheme;

package/src/lib/primevue/components/toast/colors/light/index.ts

@@ -0,0 +1,101 @@
+const lightColors = {
+	root: {
+		blur: '1.5px',
+	},
+	info: {
+		background: '{info.highlightColor}',
+		borderColor: '{info.highlightColor}',
+		color: '{info.onHighlightColor}',
+		iconColor: '{info.onHighlightColor}',
+		detailColor: '{info.onHighlightColor}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{info.onHighlightColor}',
+			focusRing: {
+				color: '{info.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	success: {
+		background: '{success.highlightColor}',
+		borderColor: '{success.highlightColor}',
+		color: '{success.onHighlightColor}',
+		iconColor: '{success.onHighlightColor}',
+		detailColor: '{success.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{success.onHighlightColor}',
+			focusRing: {
+				color: '{success.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	warn: {
+		background: '{warn.highlightColor}',
+		borderColor: '{warn.highlightColor}',
+		color: '{warn.onHighlightColor}',
+		iconColor: '{warn.onHighlightColor}',
+		detailColor: '{warn.onHighlightColor}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{warn.onHighlightColor}',
+			focusRing: {
+				color: '{warn.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	error: {
+		background: '{error.highlightColor}',
+		borderColor: '{error.highlightColor}',
+		color: '{error.onHighlightColor}',
+		iconColor: '{error.onHighlightColor}',
+		detailColor: '{error.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{error.onHighlightColor}',
+			focusRing: {
+				color: '{error.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	secondary: {
+		background: '{secondary.highlightColor}',
+		borderColor: '{secondary.highlightColor}',
+		color: '{secondary.onHighlightColor}',
+		iconColor: '{secondary.onHighlightColor}',
+		detailColor: '{secondary.onHighlightColor}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{secondary.onHighlightColor}',
+			focusRing: {
+				color: '{secondary.color}',
+				shadow: 'none',
+			},
+		},
+	},
+	contrast: {
+		background: '{surface.850}',
+		borderColor: '{surface.950}',
+		color: '{surface.50}',
+		iconColor: '{surface.50}',
+		detailColor: '{surface.100}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{surface.800}',
+			focusRing: {
+				color: '{surface.50}',
+				shadow: 'none',
+			},
+		},
+	},
+};
+
+export default lightColors;

package/src/lib/primevue/components/toast/index.ts

@@ -0,0 +1,9 @@
+import colorScheme from './colors';
+import sizes from './sizes';
+
+const ToastScheme = {
+	colorScheme,
+	sizes,
+};
+
+export default ToastScheme;

package/src/lib/primevue/components/toast/sizes/index.ts

@@ -0,0 +1,41 @@
+const sizes = {
+	root: {
+		width: '25rem',
+		borderRadius: '{content.border.radius}',
+		borderWidth: '1px',
+		transitionDuration: '{transition.duration}',
+	},
+	icon: {
+		size: '1.5rem',
+	},
+	content: {
+		padding: '{overlay.popover.padding}',
+		gap: '0.5rem',
+	},
+	text: {
+		gap: '0',
+	},
+	summary: {
+		fontWeight: '700',
+		fontSize: '0.875rem',
+	},
+	detail: {
+		fontWeight: '400',
+		fontSize: '0.875rem',
+	},
+	closeButton: {
+		width: '1.75rem',
+		height: '1.75rem',
+		borderRadius: '50%',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	closeIcon: {
+		size: '1rem',
+	},
+};
+
+export default sizes;

package/src/lib/primevue/semantic/color-scheme/dark-color.ts

@@ -6,6 +6,7 @@ const darkColor = {
 		foreground: '{amber.950}',
 		foregroundHover: '{amber.900}',
 		highlightColor: '{amber.850}',
+		onHighlightColor: '{amber.450}',
 	},
 
 	secondary: {
@@ -15,6 +16,7 @@ const darkColor = {
 		foreground: '{gray.350}',
 		foregroundHover: '{gray.300}',
 		highlightColor: '{gray.850}',
+		onHighlightColor: '{gray.300}',
 	},
 
 	success: {
@@ -24,6 +26,7 @@ const darkColor = {
 		foreground: '{green.950}',
 		foregroundHover: '{green.900}',
 		highlightColor: '{green.850}',
+		onHighlightColor: '{green.450}',
 	},
 
 	warn: {
@@ -33,6 +36,7 @@ const darkColor = {
 		foreground: '{orange.950}',
 		foregroundHover: '{orange.900}',
 		highlightColor: '{orange.850}',
+		onHighlightColor: '{orange.350}',
 	},
 
 	error: {
@@ -42,6 +46,7 @@ const darkColor = {
 		foreground: '{red.950}',
 		foregroundHover: '{red.900}',
 		highlightColor: '{red.850}',
+		onHighlightColor: '{red.300}',
 	},
 
 	info: {
@@ -51,6 +56,7 @@ const darkColor = {
 		foreground: '{light-blue.950}',
 		foregroundHover: '{light-blue.900}',
 		highlightColor: '{light-blue.850}',
+		onHighlightColor: '{light-blue.350}',
 	},
 
 	task: {
@@ -60,6 +66,7 @@ const darkColor = {
 		foreground: '{blue.950}',
 		foregroundHover: '{blue.900}',
 		highlightColor: '{blue.850}',
+		onHighlightColor: '{blue.350}',
 	},
 
 	transfer: {
@@ -69,6 +76,7 @@ const darkColor = {
 		foreground: '{indigo.950}',
 		foregroundHover: '{indigo.900}',
 		highlightColor: '{indigo.850}',
+		onHighlightColor: '{indigo.350}',
 	},
 
 	chat: {
@@ -78,6 +86,7 @@ const darkColor = {
 		foreground: '{cyan.950}',
 		foregroundHover: '{cyan.900}',
 		highlightColor: '{cyan.850}',
+		onHighlightColor: '{cyan.350}',
 	},
 
 	email: {
@@ -87,13 +96,14 @@ const darkColor = {
 		foreground: '{blue.950}',
 		foregroundHover: '{blue.900}',
 		highlightColor: '{blue.850}',
+		onHighlightColor: '{blue.350}',
 	},
 
 	highlight: {
-		background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-		focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-		color: 'rgba(255,255,255,.87)',
-		focusColor: 'rgba(255,255,255,.87)',
+		background: '{amber.800}',
+		focusBackground: '{amber.700}',
+		color: '{amber.300}',
+		focusColor: '{amber.200}',
 	},
 	mask: {
 		background: 'rgba(0,0,0,0.6)',

package/src/lib/primevue/semantic/color-scheme/light-color.ts

@@ -6,6 +6,7 @@ const lightColor = {
 		foreground: '{amber.900}',
 		foregroundHover: '{amber.850}',
 		highlightColor: '{amber.100}',
+		onHighlightColor: '{amber.750}',
 	},
 
 	secondary: {
@@ -15,6 +16,7 @@ const lightColor = {
 		foreground: '{gray.750}',
 		foregroundHover: '{gray.700}',
 		highlightColor: '{gray.50}',
+		onHighlightColor: '{gray.700}',
 	},
 
 	success: {
@@ -24,6 +26,7 @@ const lightColor = {
 		foreground: '{green.50}',
 		foregroundHover: '{green.100}',
 		highlightColor: '{green.100}',
+		onHighlightColor: '{green.750}',
 	},
 
 	warn: {
@@ -33,6 +36,7 @@ const lightColor = {
 		foreground: '{orange.50}',
 		foregroundHover: '{orange.100}',
 		highlightColor: '{orange.100}',
+		onHighlightColor: '{orange.650}',
 	},
 
 	error: {
@@ -42,6 +46,7 @@ const lightColor = {
 		foreground: '{red.50}',
 		foregroundHover: '{red.100}',
 		highlightColor: '{red.100}',
+		onHighlightColor: '{red.600}',
 	},
 
 	info: {
@@ -51,6 +56,7 @@ const lightColor = {
 		foreground: '{light-blue.50}',
 		foregroundHover: '{light-blue.100}',
 		highlightColor: '{light-blue.100}',
+		onHighlightColor: '{light-blue.700}',
 	},
 
 	task: {
@@ -60,6 +66,7 @@ const lightColor = {
 		foreground: '{blue.50}',
 		foregroundHover: '{blue.100}',
 		highlightColor: '{blue.100}',
+		onHighlightColor: '{blue.700}',
 	},
 
 	transfer: {
@@ -69,6 +76,7 @@ const lightColor = {
 		foreground: '{indigo.50}',
 		foregroundHover: '{indigo.100}',
 		highlightColor: '{indigo.100}',
+		onHighlightColor: '{indigo.700}',
 	},
 
 	chat: {
@@ -78,6 +86,7 @@ const lightColor = {
 		foreground: '{cyan.50}',
 		foregroundHover: '{cyan.100}',
 		highlightColor: '{cyan.100}',
+		onHighlightColor: '{cyan.700}',
 	},
 
 	email: {
@@ -87,13 +96,14 @@ const lightColor = {
 		foreground: '{blue.50}',
 		foregroundHover: '{blue.100}',
 		highlightColor: '{blue.100}',
+		onHighlightColor: '{blue.700}',
 	},
 
 	highlight: {
-		background: '{primary.50}',
-		focusBackground: '{primary.100}',
-		color: '{primary.700}',
-		focusColor: '{primary.800}',
+		background: '{amber.100}',
+		focusBackground: '{amber.200}',
+		color: '{amber.700}',
+		focusColor: '{amber.800}',
 	},
 
 	mask: {

package/src/lib/primevue/semantic/color-scheme/list/dark/index.ts

@@ -1,7 +1,7 @@
 export default {
 	list: {
 		option: {
-			focusBackground: '{surface.800}',
+			focusBackground: '{surface.850}',
 			selectedBackground: '{highlight.background}',
 			selectedFocusBackground: '{highlight.focus.background}',
 			color: '{text.color}',

package/src/lib/primevue/semantic/color-scheme/list/light/index.ts

@@ -1,7 +1,7 @@
 export default {
 	list: {
 		option: {
-			focusBackground: '{surface.100}',
+			focusBackground: '{surface.50}',
 			selectedBackground: '{highlight.background}',
 			selectedFocusBackground: '{highlight.focus.background}',
 			color: '{text.color}',

package/src/lib/primevue/semantic/sizes/list/index.ts

@@ -1,11 +1,11 @@
 export default {
-	padding: '0.25rem 0.25rem',
+	padding: '0',
 	gap: '2px',
 	header: {
 		padding: '0.5rem 1rem 0.25rem 1rem',
 	},
 	option: {
-		padding: '0.5rem 0.75rem',
+		padding: '0.5rem 0.5rem',
 		borderRadius: '{border.radius.sm}',
 	},
 	optionGroup: {

package/src/lib/primevue/semantic/sizes/typography/index.ts

@@ -68,7 +68,7 @@ export default {
 		lineHeight: '16px',
 		textTransform: 'none',
 	},
-	[WtTypography.Button]: {
+	[WtTypography.ButtonMD]: {
 		font: {
 			size: '12px',
 			weight: '500',
@@ -76,6 +76,14 @@ export default {
 		lineHeight: '24px',
 		textTransform: 'uppercase',
 	},
+	[WtTypography.ButtonSM]: {
+		font: {
+			size: '10px',
+			weight: '500',
+		},
+		lineHeight: '24px',
+		textTransform: 'uppercase',
+	},
 	[WtTypography.Caption]: {
 		font: {
 			size: '10px',

package/src/lib/styleguide/colors/colors.css

@@ -33,6 +33,13 @@
 	--content-wrapper-color: var(--p-content-background);
 	--content-wrapper-hover-color: var(--p-content-hover-background);
 
+	/* context menu */
+	--context-menu-background-color: var(--content-wrapper-color);
+	--context-menu-option-hover-color: var(--p-surface-50);
+	--context-menu-option-disabled-color: var(--p-surface-100);
+	--context-menu-option-text-color: var(--text-main-color);
+	--context-menu-option-text-disabled-color: var(--text-disabled-color);
+
 	/* success colors */
 	--success-color: var(--green-darken-4);
 	--success-hover-color: var(--green-darken-3);
@@ -203,4 +210,8 @@
 	--text-link-color: var(--info-color);
 	/* typography on colors */
 	--text-on-brand-color: var(--white);
+
+	/* context menu */
+	--context-menu-option-hover-color: var(--p-surface-900);
+	--context-menu-option-disabled-color: var(--p-surface-850);
 }

package/src/lib/styleguide/fonts/fonts.css

@@ -163,3 +163,17 @@
 	font-style: italic;
 	font-display: swap;
 }
+
+/*
+This font was added for use in wt-input-text in case we need to hide the input value,like in a password input,
+but without type="password" on input. It was added because not all brawsers are support 'text-security: disc' property,
+So this font changes text to discs in these cases
+*/
+
+@font-face {
+	font-family: "text-security-disc";
+	src: url("../../../assets/fonts/text-security-disc/text-security-disc.woff2")
+		format("woff2");
+	font-weight: 100;
+	font-style: normal;
+}

package/src/lib/styleguide/scroll.css

@@ -1,7 +1,7 @@
 :root {
-	--scrollbar-width: 5px;
-	--scrollbar-height: 5px;
-	--scrollbar-thumb-width: 5px;
+	--scrollbar-width: 10px;
+	--scrollbar-height: 10px;
+	--scrollbar-thumb-width: 10px;
 	--scrollbar-bg-color: var(--p-surface-50);
 	--scrollbar-thumb-color: var(--p-surface-150);
 	--scrollbar-hover-thumb-color: var(--p-surface-250);

package/src/lib/styleguide/typography/typography.css

@@ -108,7 +108,7 @@ NOTE:   text-transform: none; is set explicitly cause t-t is inherited from pare
 		/* 0.01em */
 	}
 
-	.typo-button {
+	.typo-button--md {
 		font-family: "Montserrat", monospace;
 		font-size: 12px;
 		font-weight: 500;
@@ -118,6 +118,16 @@ NOTE:   text-transform: none; is set explicitly cause t-t is inherited from pare
 		/* 0.06em */
 	}
 
+	.typo-button--sm {
+		font-family: "Montserrat", monospace;
+		font-size: 10px;
+		font-weight: 500;
+		line-height: 24px;
+		text-transform: uppercase;
+		/* letter-spacing: 0.96px; */
+		/* 0.06em */
+	}
+
 	.typo-caption {
 		font-family: "Montserrat", monospace;
 		font-size: 10px;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />