@webitel/styleguide 26.2.12 → 26.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/styleguide",
-	"version": "26.2.12",
+	"version": "26.2.15",
 	"main": "",
 	"files": [
 		"src/"
@@ -8,7 +8,12 @@
 	"scripts": {
 		"publish-styleguide": "npm run build && npm publish --access public",
 		"build": "tsc -p ./tsconfig.build.json",
-		"lint:fix": "npx biome check --write ./src"
+		"lint:fix": "npx biome check --write ./src",
+		"biome:ci:gh": "biome ci ./src --reporter=github",
+		"test:unit": "node -e \"process.exit(0)\"",
+		"lint": "biome ci ./src",
+		"test": "npm run test:unit",
+		"ci:check": "npm run biome:ci:gh && npm run test:unit"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.14",

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

@@ -4,8 +4,8 @@ export default {
 		color: '{text.avatar.color}',
 	},
 	letters: {
-		'na-color': '{gray.650}',
-		'na-background': '{gray.350}',
+		'na-color': '{gray.350}',
+		'na-background': '{gray.650}',
 		'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
 		'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
 		'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
@@ -21,4 +21,8 @@ export default {
 		'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
 		'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
 	},
+	bot: {
+		color: '{gray.350}',
+		background: '{gray.650}',
+	},
 };

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

@@ -4,8 +4,8 @@ export default {
 		color: '{text.avatar.color}',
 	},
 	letters: {
-		'na-color': '{gray.50}',
-		'na-background': '{gray.350}',
+		'na-color': '{gray.350}',
+		'na-background': '{gray.50}',
 		'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
 		'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
 		'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
@@ -21,4 +21,8 @@ export default {
 		'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
 		'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
 	},
+	bot: {
+		color: '{gray.350}',
+		background: '{gray.50}',
+	},
 };

package/src/lib/styleguide/elevations/elevations.css

@@ -1,13 +1,13 @@
 :root {
 	--_elevation-color: hsla(0, 0%, 0%, 0.08);
-	--elevation-1: 0px 0px 2px 1px var(--_elevation-color);
-	--elevation-2: 0px 0px 4px 2px var(--_elevation-color);
-	--elevation-3: 0px 0px 6px 3px var(--_elevation-color);
-	--elevation-4: 0px 0px 8px 4px var(--_elevation-color);
-	--elevation-5: 0px 0px 10px 5px var(--_elevation-color);
-	--elevation-6: 0px 0px 12px 6px var(--_elevation-color);
-	--elevation-7: 0px 0px 14px 7px var(--_elevation-color);
-	--elevation-8: 0px 0px 16px 8px var(--_elevation-color);
-	--elevation-9: 0px 0px 18px 9px var(--_elevation-color);
-	--elevation-10: 0px 0px 20px 10px var(--_elevation-color);
+	--elevation-1: 0px 0px 4px 1px var(--_elevation-color);
+	--elevation-2: 0px 0px 6px 2px var(--_elevation-color);
+	--elevation-3: 0px 0px 8px 3px var(--_elevation-color);
+	--elevation-4: 0px 0px 10px 4px var(--_elevation-color);
+	--elevation-5: 0px 0px 12px 5px var(--_elevation-color);
+	--elevation-6: 0px 0px 14px 6px var(--_elevation-color);
+	--elevation-7: 0px 0px 16px 7px var(--_elevation-color);
+	--elevation-8: 0px 0px 18px 8px var(--_elevation-color);
+	--elevation-9: 0px 0px 20px 9px var(--_elevation-color);
+	--elevation-10: 0px 0px 22px 10px var(--_elevation-color);
 }

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

@@ -1,143 +1,165 @@
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Thin.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Thin.woff2")
+		format("woff2");
 	font-weight: 100;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-ThinItalic.woff2")
+		format("woff2");
 	font-weight: 100;
 	font-style: italic;
+	font-display: swap;
+	font-display: swap;
+	font-display: swap;
+	font-display: swap;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraLight.woff2")
+		format("woff2");
 	font-weight: 200;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.woff2")
+		format("woff2");
 	font-weight: 200;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Light.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Light.woff2")
+		format("woff2");
 	font-weight: 300;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-LightItalic.woff2")
+		format("woff2");
 	font-weight: 300;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Regular.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Regular.woff2")
+		format("woff2");
 	font-weight: 400;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Italic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Italic.woff2")
+		format("woff2");
 	font-weight: 400;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Medium.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Medium.woff2")
+		format("woff2");
 	font-weight: 500;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-MediumItalic.woff2")
+		format("woff2");
 	font-weight: 500;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-SemiBold.woff2")
+		format("woff2");
 	font-weight: 600;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.woff2")
+		format("woff2");
 	font-weight: 600;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Bold.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Bold.woff2")
+		format("woff2");
 	font-weight: 700;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-BoldItalic.woff2")
+		format("woff2");
 	font-weight: 700;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraBold.woff2")
+		format("woff2");
 	font-weight: 800;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2")
+		format("woff2");
 	font-weight: 800;
 	font-style: italic;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-Black.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-Black.woff2")
+		format("woff2");
 	font-weight: 900;
 	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Montserrat";
-	src: url("../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf")
-		format("truetype");
+	src: url("../../../assets/fonts/Montserrat/Montserrat-BlackItalic.woff2")
+		format("woff2");
 	font-weight: 900;
 	font-style: italic;
+	font-display: swap;
 }

package/src/lib/styleguide/scroll.css

@@ -9,9 +9,9 @@
 }
 
 :root.theme--dark {
-	--scrollbar-bg-color: var(--p-surface-750);
-	--scrollbar-thumb-color: var(--p-surface-850);
-	--scrollbar-hover-thumb-color: var(--p-surface-950);
+	--scrollbar-bg-color: var(--p-surface-850);
+	--scrollbar-thumb-color: var(--p-surface-700);
+	--scrollbar-hover-thumb-color: var(--p-surface-800);
 }
 
 .wt-scrollbar {
@@ -38,9 +38,6 @@
 	background-color: var(--scrollbar-hover-thumb-color);
 }
 
-.wt-distant-scrollbar {
-}
-
 .wt-distant-scrollbar::-webkit-scrollbar {
 	width: 14px;
 	height: 18px;