@webitel/styleguide 24.12.60 → 24.12.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.60",
+  "version": "24.12.62",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",

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

@@ -1,21 +1,22 @@
 export default {
   root: {
     background: '{content.border.color}',
-    color: '{content.color}',
+    color: '{text.avatar.color}',
   },
   letters: {
-    'p1-color': '{red.300}',
-    'p2-color': '{red.300}',
-    'p3-color': '{red.300}',
-    'p4-color': '{red.300}',
-    'p5-color': '{red.300}',
-    'p6-color': '{red.300}',
-    'p7-color': '{red.300}',
-    'p8-color': '{red.300}',
-    'p9-color': '{red.300}',
-    'p10-color': '{red.300}',
-    'p11-color': '{red.300}',
-    'p12-color': '{red.300}',
-    'p13-color': '{red.300}',
+    '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})',
+    'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
+    'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
+    'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
+    'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
+    'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
+    'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
+    'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
+    'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
+    'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
+    'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
+    'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
   }
 }

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

@@ -1,21 +1,22 @@
 export default {
   root: {
     background: '{content.border.color}',
-    color: '{content.color}',
+    color: '{text.avatar.color}',
   },
   letters: {
-    'p1-color': '{blue.300}',
-    'p2-color': '{blue.300}',
-    'p3-color': '{blue.300}',
-    'p4-color': '{blue.300}',
-    'p5-color': '{blue.300}',
-    'p6-color': '{blue.300}',
-    'p7-color': '{blue.300}',
-    'p8-color': '{blue.300}',
-    'p9-color': '{blue.300}',
-    'p10-color': '{blue.300}',
-    'p11-color': '{blue.300}',
-    'p12-color': '{blue.300}',
-    'p13-color': '{blue.300}',
+    '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})',
+    'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
+    'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
+    'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
+    'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
+    'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
+    'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
+    'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
+    'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
+    'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
+    'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
+    'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
   }
 }

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

@@ -4,39 +4,44 @@ const sizes = {
   fontSize: '1rem',
   borderRadius: '{content.border.radius}',
 
-  xs: {
+  '2xs': {
     width: '1rem',
     height: '1rem',
-    fontSize: '0.5rem',
+    fontSize: '0.4rem',
   },
-  sm: {
+  xs: {
     width: '1.5rem',
     height: '1.5rem',
-    fontSize: '0.75rem',
+    fontSize: '0.6rem',
   },
-  md: {
+  sm: {
     width: '2rem',
     height: '2rem',
-    fontSize: '1rem',
+    fontSize: '0.75rem',
+  },
+  md: {
+    width: '2.5rem',
+    height: '2.5rem',
+    fontSize: '0.875rem',
   },
   lg: {
-    width: '3rem',
-    height: '3rem',
-    fontSize: '1.5rem',
+    width: '3.5rem',
+    height: '3.5rem',
+    fontSize: '1.25rem',
   },
   xl: {
-    width: '4rem',
-    height: '4rem',
-    fontSize: '2rem',
+    width: '4.5rem',
+    height: '4.5rem',
+    fontSize: '1.5rem',
   },
   '2xl': {
-    width: '5rem',
-    height: '5rem',
-    fontSize: '2.5rem',
-  },
-  '3xl': {
     width: '6rem',
     height: '6rem',
+    fontSize: '2.25rem',
+  },
+  '3xl': {
+    width: '8rem',
+    height: '8rem',
     fontSize: '3rem',
   },
 };

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

@@ -7,6 +7,7 @@ import ToolbarScheme from './toolbar';
 import ChipScheme from "./chip";
 import CheckboxScheme from "./checkbox";
 import TableScheme from "./table";
+import SwitcherScheme from "./switcher";
 import DividerScheme from "./divider";
 import SliderScheme from "./slider";
 import BreadcrumbScheme from "./breadcrumb";
@@ -22,6 +23,7 @@ export {
   ChipScheme,
   CheckboxScheme,
   TableScheme,
+  SwitcherScheme,
   DividerScheme,
   SliderScheme,
   BreadcrumbScheme,

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

@@ -1,6 +1,6 @@
 export default {
-  background: '{content.background}',
-  borderColor: '{content.border.color}',
+  background: '{surface.900}',
+  borderColor: '{transparent}',
   color: '{content.color}',
   transitionDuration: '{transition.duration}'
 }

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

@@ -1,6 +1,6 @@
 export default {
-  background: '{content.background}',
-  borderColor: '{content.border.color}',
+  background: '{surface.150}',
+  borderColor: '{transparent}',
   color: '{content.color}',
   transitionDuration: '{transition.duration}'
 }

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

@@ -1,7 +1,7 @@
 const sizes = {
-  gap: '0.5rem',
-  padding: '0.5rem 0.75rem',
-  borderRadius: '{content.border.radius}',
+  gap: '1em',
+  padding: '0.5rem 1rem',
+  borderRadius: '0rem',
 };
 
 export default sizes

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

@@ -0,0 +1,32 @@
+const darkColors = {
+  root: {
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    },
+    borderColor: 'transparent',
+    hoverBorderColor: 'transparent',
+    checkedBorderColor: 'transparent',
+    checkedHoverBorderColor: 'transparent',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    background: '{surface.450}',
+    disabledBackground: '{surface.650}',
+    hoverBackground: '{surface.350}',
+    checkedBackground: '{primary.color}',
+    checkedHoverBackground: '{primary.hover.color}'
+  },
+  handle: {
+    background: '{surface.850}',
+    disabledBackground: '{surface.750}',
+    hoverBackground: '{surface.750}',
+    checkedBackground: '{surface.800}',
+    checkedHoverBackground: '{surface.700}',
+    color: '{text.muted.color}',
+    hoverColor: '{text.color}',
+    checkedColor: '{primary.color}',
+    checkedHoverColor: '{primary.hover.color}'
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,32 @@
+const lightColors = {
+  root: {
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    },
+    borderColor: 'transparent',
+    hoverBorderColor: 'transparent',
+    checkedBorderColor: 'transparent',
+    checkedHoverBorderColor: 'transparent',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    background: '{surface.650}',
+    disabledBackground: '{surface.150}',
+    hoverBackground: '{surface.550}',
+    checkedBackground: '{primary.color}',
+    checkedHoverBackground: '{primary.hover.color}'
+  },
+  handle: {
+    background: '{surface.150}',
+    disabledBackground: '{surface.300}',
+    hoverBackground: '{surface.50}',
+    checkedBackground: '{surface.750}',
+    checkedHoverBackground: '{surface.650}',
+    color: '{text.muted.color}',
+    hoverColor: '{text.color}',
+    checkedColor: '{primary.color}',
+    checkedHoverColor: '{primary.hover.color}'
+  }
+}
+
+export default lightColors

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

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

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

@@ -0,0 +1,17 @@
+const sizes = {
+  root: {
+    width: '2.5rem',
+    height: '1.5rem',
+    borderRadius: '30px',
+    gap: '0.25rem',
+    borderWidth: '1px',
+    transitionDuration: '{form.field.transition.duration}',
+    slideDuration: '0.2s'
+  },
+  handle: {
+    borderRadius: '50%',
+    size: '1rem'
+  }
+}
+
+export default sizes

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

@@ -8,7 +8,7 @@ export default {
     borderColor: '{surface.600}',
     hoverBorderColor: '{surface.500}',
     focusBorderColor: '{primary.color}',
-    invalidBorderColor: '{red.300}',
+    invalidBorderColor: '{error.color}',
     color: '{surface.0}',
     disabledColor: '{surface.400}',
     placeholderColor: '{surface.400}',

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

@@ -8,7 +8,7 @@ export default {
     borderColor: '{surface.300}',
     hoverBorderColor: '{surface.400}',
     focusBorderColor: '{primary.color}',
-    invalidBorderColor: '{red.400}',
+    invalidBorderColor: '{error.color}',
     color: '{surface.700}',
     disabledColor: '{surface.500}',
     placeholderColor: '{surface.500}',

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

@@ -3,6 +3,7 @@ export default {
     color: '{surface.100}',
     hoverColor: '{surface.50}',
     mutedColor: '{surface.400}',
-    hoverMutedColor: '{surface.300}'
+    hoverMutedColor: '{surface.300}',
+    avatarColor: '{gray.850}'
   }
 }

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

@@ -3,6 +3,7 @@ export default {
     color: '{surface.750}',
     hoverColor: '{surface.800}',
     mutedColor: '{surface.500}',
-    hoverMutedColor: '{surface.600}'
+    hoverMutedColor: '{surface.600}',
+    avatarColor: '{gray.0}'
   }
 }