@webitel/styleguide 26.2.18 → 26.2.20

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@webitel/styleguide",
-	"version": "26.2.18",
+	"version": "26.2.20",
 	"main": "",
 	"files": [
 		"src/"
 	],
 	"scripts": {
 		"publish-styleguide": "npm run build && npm publish --access public",
-		"build": "tsc -p ./tsconfig.build.json",
+		"build": "tsc -b ./tsconfig.build.json",
+		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",
 		"test:unit": "node -e \"process.exit(0)\"",
@@ -16,7 +17,7 @@
 		"ci:check": "npm run biome:ci:gh && npm run test:unit"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.14",
+		"@biomejs/biome": "2.4.16",
 		"typescript": "^5.9.x"
 	},
 	"repository": {

package/src/enums/WtTypography/WtTypography.enum.ts

@@ -1,5 +1,6 @@
 export const WtTypography = {
-	Button: 'typo-button',
+	ButtonMD: 'typo-button--md',
+	ButtonSM: 'typo-button--sm',
 	Body1: 'typo-body-1',
 	Body2: 'typo-body-2',
 	Subtitle1: 'typo-subtitle-1',

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

@@ -1,6 +1,6 @@
 const darkColors = {
-	background: '{surface.100}',
-	color: '{surface.800}',
+	background: '{secondary.color}',
+	color: '{secondary.foreground}',
 	main: {
 		background: '{amber.650}',
 		color: '{amber.950}',

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

@@ -1,6 +1,6 @@
 const lightColors = {
-	background: '{surface.200}',
-	color: '{surface.800}',
+	background: '{secondary.color}',
+	color: '{secondary.foreground}',
 	main: {
 		background: '{amber.200}',
 		color: '{amber.950}',

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

@@ -1,4 +1,5 @@
 const sizes = {
+	maxWidth: '150px',
 	borderRadius: '16px',
 	paddingX: '0.5rem',
 	paddingY: '0.25rem',

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

@@ -0,0 +1,63 @@
+const darkColors = {
+	panel: {
+		background: '{content.background}',
+		borderColor: '{content.border.color}',
+		color: '{content.color}',
+	},
+	header: {
+		background: '{content.background}',
+		borderColor: '{content.border.color}',
+		color: '{content.color}',
+	},
+	dropdown: {
+		background: '{surface.800}',
+		hoverBackground: '{surface.700}',
+		activeBackground: '{surface.600}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.border.color}',
+		activeBorderColor: '{form.field.border.color}',
+		color: '{surface.300}',
+		hoverColor: '{surface.200}',
+		activeColor: '{surface.100}',
+	},
+	inputIcon: {
+		color: '{form.field.icon.color}',
+	},
+	selectMonth: {
+		hoverBackground: '{content.hover.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+	},
+	selectYear: {
+		hoverBackground: '{content.hover.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+	},
+	group: {
+		borderColor: '{content.border.color}',
+	},
+	weekDay: {
+		color: '{content.color}',
+	},
+	date: {
+		hoverBackground: '{content.hover.background}',
+		selectedBackground: '{primary.color}',
+		rangeSelectedBackground: '{highlight.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+		selectedColor: '{primary.foreground}',
+		rangeSelectedColor: '{highlight.color}',
+	},
+	today: {
+		background: '{secondary.highlightColor}',
+		color: '{secondary.foreground}',
+	},
+	buttonbar: {
+		borderColor: '{content.border.color}',
+	},
+	timePicker: {
+		borderColor: '{content.border.color}',
+	},
+};
+
+export default darkColors;

package/src/lib/primevue/components/datepicker/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/datepicker/colors/light/index.ts

@@ -0,0 +1,63 @@
+const lightColors = {
+	panel: {
+		background: '{content.background}',
+		borderColor: '{content.border.color}',
+		color: '{content.color}',
+	},
+	header: {
+		background: '{content.background}',
+		borderColor: '{content.border.color}',
+		color: '{content.color}',
+	},
+	dropdown: {
+		background: '{surface.100}',
+		hoverBackground: '{surface.200}',
+		activeBackground: '{surface.300}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.border.color}',
+		activeBorderColor: '{form.field.border.color}',
+		color: '{surface.600}',
+		hoverColor: '{surface.700}',
+		activeColor: '{surface.800}',
+	},
+	inputIcon: {
+		color: '{form.field.icon.color}',
+	},
+	selectMonth: {
+		hoverBackground: '{content.hover.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+	},
+	selectYear: {
+		hoverBackground: '{content.hover.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+	},
+	group: {
+		borderColor: '{content.border.color}',
+	},
+	weekDay: {
+		color: '{content.color}',
+	},
+	date: {
+		hoverBackground: '{content.hover.background}',
+		selectedBackground: '{primary.color}',
+		rangeSelectedBackground: '{highlight.background}',
+		color: '{content.color}',
+		hoverColor: '{content.hover.color}',
+		selectedColor: '{primary.foreground}',
+		rangeSelectedColor: '{highlight.color}',
+	},
+	today: {
+		background: '{secondary.highlightColor}',
+		color: '{secondary.foreground}',
+	},
+	buttonbar: {
+		borderColor: '{content.border.color}',
+	},
+	timePicker: {
+		borderColor: '{content.border.color}',
+	},
+};
+
+export default lightColors;

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

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

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

@@ -0,0 +1,89 @@
+const sizes = {
+	root: {
+		transitionDuration: '{transition.duration}',
+	},
+	panel: {
+		borderRadius: '{content.border.radius}',
+		shadow: '{overlay.popover.shadow}',
+		padding: '{overlay.popover.padding}',
+	},
+	header: {
+		padding: '0 0 0.5rem 0',
+	},
+	title: {
+		gap: '0.5rem',
+		fontWeight: '500',
+	},
+	dropdown: {
+		width: '2.5rem',
+		sm: {
+			width: '2rem',
+		},
+		lg: {
+			width: '3rem',
+		},
+		borderRadius: '{form.field.border.radius}',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			color: '{focus.ring.color}',
+			offset: '{focus.ring.offset}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	selectMonth: {
+		padding: '0.25rem 0.5rem',
+		borderRadius: '{content.border.radius}',
+	},
+	selectYear: {
+		padding: '0.25rem 0.5rem',
+		borderRadius: '{content.border.radius}',
+	},
+	group: {
+		gap: '{overlay.popover.padding}',
+	},
+	dayView: {
+		margin: '0.5rem 0 0 0',
+	},
+	weekDay: {
+		padding: '0.25rem',
+		fontWeight: '500',
+	},
+	date: {
+		width: '1.5rem',
+		height: '1.5rem',
+		borderRadius: '50%',
+		padding: '0.125rem',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			color: '{focus.ring.color}',
+			offset: '{focus.ring.offset}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	monthView: {
+		margin: '0.5rem 0 0 0',
+	},
+	month: {
+		padding: '0.375rem',
+		borderRadius: '{content.border.radius}',
+	},
+	yearView: {
+		margin: '0.5rem 0 0 0',
+	},
+	year: {
+		padding: '0.375rem',
+		borderRadius: '{content.border.radius}',
+	},
+	buttonbar: {
+		padding: '0.5rem 0 0 0',
+	},
+	timePicker: {
+		padding: '0.5rem 0 0 0',
+		gap: '0.5rem',
+		buttonGap: '0',
+	},
+};
+
+export default sizes;

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

@@ -4,6 +4,7 @@ import BreadcrumbScheme from './breadcrumb';
 import ButtonScheme from './button';
 import CheckboxScheme from './checkbox';
 import ChipScheme from './chip';
+import DatePickerScheme from './datepicker';
 import DividerScheme from './divider';
 import GalleriaScheme from './galleria';
 import InputGroupScheme from './input-group';
@@ -11,37 +12,44 @@ import InputNumberScheme from './input-number';
 import InputTextScheme from './input-text';
 import MenubarScheme from './menubar';
 import MessageScheme from './message';
+import MultiSelectScheme from './multiselect';
 import PasswordScheme from './password';
 import PopoverScheme from './popover';
 import RadioScheme from './radio';
+import SingleSelectScheme from './single-select';
 import SliderScheme from './slider';
 import SwitcherScheme from './switcher';
 import TableScheme from './table';
 import TextareaScheme from './textarea';
+import ToastScheme from './toast';
 import ToolbarScheme from './toolbar';
 import TooltipScheme from './tooltip';
 
 export {
 	AvatarScheme,
-	ButtonScheme,
 	BadgeScheme,
-	PopoverScheme,
-	TooltipScheme,
-	MenubarScheme,
-	ToolbarScheme,
-	ChipScheme,
+	BreadcrumbScheme,
+	ButtonScheme,
 	CheckboxScheme,
-	TableScheme,
-	TextareaScheme,
-	SwitcherScheme,
+	ChipScheme,
+	DatePickerScheme,
 	DividerScheme,
-	SliderScheme,
-	BreadcrumbScheme,
-	RadioScheme,
 	GalleriaScheme,
+	InputGroupScheme,
 	InputNumberScheme,
 	InputTextScheme,
-	PasswordScheme,
-	InputGroupScheme,
+	MenubarScheme,
 	MessageScheme,
+	MultiSelectScheme,
+	PasswordScheme,
+	PopoverScheme,
+	RadioScheme,
+	SingleSelectScheme,
+	SliderScheme,
+	SwitcherScheme,
+	TableScheme,
+	TextareaScheme,
+	ToastScheme,
+	ToolbarScheme,
+	TooltipScheme,
 };

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

@@ -0,0 +1,50 @@
+const darkColors = {
+	root: {
+		background: '{form.field.background}',
+		disabledBackground: '{form.field.disabled.background}',
+		filledBackground: '{form.field.filled.background}',
+		filledHoverBackground: '{form.field.filled.hover.background}',
+		filledFocusBackground: '{form.field.filled.focus.background}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		focusBorderColor: '{form.field.focus.border.color}',
+		invalidBorderColor: '{form.field.invalid.border.color}',
+		invalidHoverBorderColor: '{form.field.invalid.hover.border.color}',
+		color: '{form.field.color}',
+		disabledColor: '{form.field.disabled.color}',
+		placeholderColor: '{form.field.placeholder.color}',
+		invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+		shadow: '{form.field.shadow}',
+		focusRing: {
+			color: '{form.field.focus.ring.color}',
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+	dropdown: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.select.background}',
+		borderColor: '{overlay.select.border.color}',
+		color: '{overlay.select.color}',
+		shadow: '{overlay.select.shadow}',
+	},
+	option: {
+		focusBackground: '{list.option.focus.background}',
+		selectedBackground: '{list.option.selected.background}',
+		selectedFocusBackground: '{list.option.selected.focus.background}',
+		color: '{list.option.color}',
+		focusColor: '{list.option.focus.color}',
+		selectedColor: '{list.option.selected.color}',
+		selectedFocusColor: '{list.option.selected.focus.color}',
+	},
+	optionGroup: {
+		background: '{list.option.group.background}',
+		color: '{list.option.group.color}',
+	},
+	clearIcon: {
+		color: '{form.field.icon.color}',
+	},
+};
+
+export default darkColors;

package/src/lib/primevue/components/multiselect/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/multiselect/colors/light/index.ts

@@ -0,0 +1,50 @@
+const lightColors = {
+	root: {
+		background: '{form.field.background}',
+		disabledBackground: '{form.field.disabled.background}',
+		filledBackground: '{form.field.filled.background}',
+		filledHoverBackground: '{form.field.filled.hover.background}',
+		filledFocusBackground: '{form.field.filled.focus.background}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		focusBorderColor: '{form.field.focus.border.color}',
+		invalidBorderColor: '{form.field.invalid.border.color}',
+		invalidHoverBorderColor: '{form.field.invalid.hover.border.color}',
+		color: '{form.field.color}',
+		disabledColor: '{form.field.disabled.color}',
+		placeholderColor: '{form.field.placeholder.color}',
+		invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+		shadow: '{form.field.shadow}',
+		focusRing: {
+			color: '{form.field.focus.ring.color}',
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+	dropdown: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.select.background}',
+		borderColor: '{overlay.select.border.color}',
+		color: '{overlay.select.color}',
+		shadow: '{overlay.select.shadow}',
+	},
+	option: {
+		focusBackground: '{list.option.focus.background}',
+		selectedBackground: '{list.option.selected.background}',
+		selectedFocusBackground: '{list.option.selected.focus.background}',
+		color: '{list.option.color}',
+		focusColor: '{list.option.focus.color}',
+		selectedColor: '{list.option.selected.color}',
+		selectedFocusColor: '{list.option.selected.focus.color}',
+	},
+	optionGroup: {
+		background: '{list.option.group.background}',
+		color: '{list.option.group.color}',
+	},
+	clearIcon: {
+		color: '{form.field.icon.color}',
+	},
+};
+
+export default lightColors;

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

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

package/src/lib/primevue/components/multiselect/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: '{form.field.transition.duration}',
+		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}',
+		gap: '0.5rem',
+	},
+	optionGroup: {
+		fontWeight: '{list.option.group.font.weight}',
+		padding: '{list.option.group.padding}',
+	},
+	chip: {
+		borderRadius: '{border.radius.xl}',
+	},
+	emptyMessage: {
+		padding: '{list.option.padding}',
+	},
+};
+
+export default sizes;

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

@@ -1,4 +1,5 @@
 const sizes = {
+	maxWidth: '500px',
 	padding: '{overlay.popover.padding}',
 	gutter: '0.5rem',
 	arrowOffset: '1rem',

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

@@ -0,0 +1,53 @@
+const darkColors = {
+	root: {
+		background: '{form.field.background}',
+		disabledBackground: '{form.field.disabled.background}',
+		filledBackground: '{form.field.filled.background}',
+		filledHoverBackground: '{form.field.filled.hover.background}',
+		filledFocusBackground: '{form.field.filled.focus.background}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		focusBorderColor: '{form.field.focus.border.color}',
+		invalidBorderColor: '{form.field.invalid.border.color}',
+		invalidHoverBorderColor: '{form.field.invalid.hover.border.color}',
+		color: '{form.field.color}',
+		disabledColor: '{form.field.disabled.color}',
+		placeholderColor: '{form.field.placeholder.color}',
+		invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+		shadow: '{form.field.shadow}',
+		focusRing: {
+			color: '{form.field.focus.ring.color}',
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+	dropdown: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.select.background}',
+		borderColor: '{overlay.select.border.color}',
+		color: '{overlay.select.color}',
+		shadow: '{overlay.select.shadow}',
+	},
+	option: {
+		focusBackground: '{list.option.focus.background}',
+		selectedBackground: '{list.option.selected.background}',
+		selectedFocusBackground: '{list.option.selected.focus.background}',
+		color: '{list.option.color}',
+		focusColor: '{list.option.focus.color}',
+		selectedColor: '{list.option.selected.color}',
+		selectedFocusColor: '{list.option.selected.focus.color}',
+	},
+	optionGroup: {
+		background: '{list.option.group.background}',
+		color: '{list.option.group.color}',
+	},
+	clearIcon: {
+		color: '{form.field.icon.color}',
+	},
+	checkmark: {
+		color: '{list.option.color}',
+	},
+};
+
+export default darkColors;

package/src/lib/primevue/components/single-select/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/single-select/colors/light/index.ts

@@ -0,0 +1,53 @@
+const lightColors = {
+	root: {
+		background: '{form.field.background}',
+		disabledBackground: '{form.field.disabled.background}',
+		filledBackground: '{form.field.filled.background}',
+		filledHoverBackground: '{form.field.filled.hover.background}',
+		filledFocusBackground: '{form.field.filled.focus.background}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		focusBorderColor: '{form.field.focus.border.color}',
+		invalidBorderColor: '{form.field.invalid.border.color}',
+		invalidHoverBorderColor: '{form.field.invalid.hover.border.color}',
+		color: '{form.field.color}',
+		disabledColor: '{form.field.disabled.color}',
+		placeholderColor: '{form.field.placeholder.color}',
+		invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+		shadow: '{form.field.shadow}',
+		focusRing: {
+			color: '{form.field.focus.ring.color}',
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+	dropdown: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.select.background}',
+		borderColor: '{overlay.select.border.color}',
+		color: '{overlay.select.color}',
+		shadow: '{overlay.select.shadow}',
+	},
+	option: {
+		focusBackground: '{list.option.focus.background}',
+		selectedBackground: '{list.option.selected.background}',
+		selectedFocusBackground: '{list.option.selected.focus.background}',
+		color: '{list.option.color}',
+		focusColor: '{list.option.focus.color}',
+		selectedColor: '{list.option.selected.color}',
+		selectedFocusColor: '{list.option.selected.focus.color}',
+	},
+	optionGroup: {
+		background: '{list.option.group.background}',
+		color: '{list.option.group.color}',
+	},
+	clearIcon: {
+		color: '{form.field.icon.color}',
+	},
+	checkmark: {
+		color: '{list.option.color}',
+	},
+};
+
+export default lightColors;

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

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