@webitel/styleguide 24.12.59 → 24.12.61

package/package.json

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

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

@@ -2,8 +2,8 @@ const darkColors = {
   root: {
     primary: {
       background: '{primary.color}',
-      hoverBackground: '{primary.hover}',
-      activeBackground: '{primary.active}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
       borderColor: '{primary.color}',
       hoverBorderColor: '{primary.color}',
       activeBorderColor: '{primary.color}',
@@ -17,8 +17,8 @@ const darkColors = {
     },
     secondary: {
       background: '{secondary.color}',
-      hoverBackground: '{secondary.hover}',
-      activeBackground: '{secondary.active}',
+      hoverBackground: '{secondary.hover.color}',
+      activeBackground: '{secondary.active.color}',
       borderColor: '{secondary.color}',
       hoverBorderColor: '{secondary.color}',
       activeBorderColor: '{secondary.color}',
@@ -32,8 +32,8 @@ const darkColors = {
     },
     success: {
       background: '{success.color}',
-      hoverBackground: '{success.hover}',
-      activeBackground: '{success.active}',
+      hoverBackground: '{success.hover.color}',
+      activeBackground: '{success.active.color}',
       borderColor: '{success.color}',
       hoverBorderColor: '{success.color}',
       activeBorderColor: '{success.color}',
@@ -47,8 +47,8 @@ const darkColors = {
     },
     warn: {
       background: '{warn.color}',
-      hoverBackground: '{warn.hover}',
-      activeBackground: '{warn.active}',
+      hoverBackground: '{warn.hover.color}',
+      activeBackground: '{warn.active.color}',
       borderColor: '{warn.color}',
       hoverBorderColor: '{warn.color}',
       activeBorderColor: '{warn.color}',
@@ -62,8 +62,8 @@ const darkColors = {
     },
     error: {
       background: '{error.color}',
-      hoverBackground: '{error.hover}',
-      activeBackground: '{error.active}',
+      hoverBackground: '{error.hover.color}',
+      activeBackground: '{error.active.color}',
       borderColor: '{error.color}',
       hoverBorderColor: '{error.color}',
       activeBorderColor: '{error.color}',
@@ -77,8 +77,8 @@ const darkColors = {
     },
     info: {
       background: '{info.color}',
-      hoverBackground: '{info.hover}',
-      activeBackground: '{info.active}',
+      hoverBackground: '{info.hover.color}',
+      activeBackground: '{info.active.color}',
       borderColor: '{info.color}',
       hoverBorderColor: '{info.color}',
       activeBorderColor: '{info.color}',
@@ -96,8 +96,8 @@ const darkColors = {
      * */
     job: {
       background: '{task.color}',
-      hoverBackground: '{task.hover}',
-      activeBackground: '{task.active}',
+      hoverBackground: '{task.hover.color}',
+      activeBackground: '{task.active.color}',
       borderColor: '{task.color}',
       hoverBorderColor: '{task.color}',
       activeBorderColor: '{task.color}',
@@ -111,8 +111,8 @@ const darkColors = {
     },
     transfer: {
       background: '{transfer.color}',
-      hoverBackground: '{transfer.hover}',
-      activeBackground: '{transfer.active}',
+      hoverBackground: '{transfer.hover.color}',
+      activeBackground: '{transfer.active.color}',
       borderColor: '{transfer.color}',
       hoverBorderColor: '{transfer.color}',
       activeBorderColor: '{transfer.color}',

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

@@ -2,8 +2,8 @@ const lightColors = {
   root: {
     primary: {
       background: '{primary.color}',
-      hoverBackground: '{primary.hover}',
-      activeBackground: '{primary.active}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
       borderColor: '{primary.color}',
       hoverBorderColor: '{primary.color}',
       activeBorderColor: '{primary.color}',
@@ -17,8 +17,8 @@ const lightColors = {
     },
     secondary: {
       background: '{secondary.color}',
-      hoverBackground: '{secondary.hover}',
-      activeBackground: '{secondary.active}',
+      hoverBackground: '{secondary.hover.color}',
+      activeBackground: '{secondary.active.color}',
       borderColor: '{secondary.color}',
       hoverBorderColor: '{secondary.color}',
       activeBorderColor: '{secondary.color}',
@@ -32,8 +32,8 @@ const lightColors = {
     },
     success: {
       background: '{success.color}',
-      hoverBackground: '{success.hover}',
-      activeBackground: '{success.active}',
+      hoverBackground: '{success.hover.color}',
+      activeBackground: '{success.active.color}',
       borderColor: '{success.color}',
       hoverBorderColor: '{success.color}',
       activeBorderColor: '{success.color}',
@@ -47,8 +47,8 @@ const lightColors = {
     },
     warn: {
       background: '{warn.color}',
-      hoverBackground: '{warn.hover}',
-      activeBackground: '{warn.active}',
+      hoverBackground: '{warn.hover.color}',
+      activeBackground: '{warn.active.color}',
       borderColor: '{warn.color}',
       hoverBorderColor: '{warn.color}',
       activeBorderColor: '{warn.color}',
@@ -62,8 +62,8 @@ const lightColors = {
     },
     error: {
       background: '{error.color}',
-      hoverBackground: '{error.hover}',
-      activeBackground: '{error.active}',
+      hoverBackground: '{error.hover.color}',
+      activeBackground: '{error.active.color}',
       borderColor: '{error.color}',
       hoverBorderColor: '{error.color}',
       activeBorderColor: '{error.color}',
@@ -77,8 +77,8 @@ const lightColors = {
     },
     info: {
       background: '{info.color}',
-      hoverBackground: '{info.hover}',
-      activeBackground: '{info.active}',
+      hoverBackground: '{info.hover.color}',
+      activeBackground: '{info.active.color}',
       borderColor: '{info.color}',
       hoverBorderColor: '{info.color}',
       activeBorderColor: '{info.color}',
@@ -96,8 +96,8 @@ const lightColors = {
      * */
     job: {
       background: '{task.color}',
-      hoverBackground: '{task.hover}',
-      activeBackground: '{task.active}',
+      hoverBackground: '{task.hover.color}',
+      activeBackground: '{task.active.color}',
       borderColor: '{task.color}',
       hoverBorderColor: '{task.color}',
       activeBorderColor: '{task.color}',
@@ -111,8 +111,8 @@ const lightColors = {
     },
     transfer: {
       background: '{transfer.color}',
-      hoverBackground: '{transfer.hover}',
-      activeBackground: '{transfer.active}',
+      hoverBackground: '{transfer.hover.color}',
+      activeBackground: '{transfer.active.color}',
       borderColor: '{transfer.color}',
       hoverBorderColor: '{transfer.color}',
       activeBorderColor: '{transfer.color}',

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/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/dark-color.ts

@@ -2,80 +2,80 @@ const darkColor = {
 
   primary: {
     color: '{amber.500}',
-    hover: '{amber.450}',
-    active: '{amber.400}',
+    hoverColor: '{amber.450}',
+    activeColor: '{amber.400}',
     foreground: '{amber.950}',
     foregroundHover: '{amber.900}'
   },
 
   secondary: {
     color: '{gray.900}',
-    hover: '{gray.850}',
-    active: '{gray.750}',
+    hoverColor: '{gray.850}',
+    activeColor: '{gray.750}',
     foreground: '{gray.350}',
     foregroundHover: '{gray.300}'
   },
 
   success: {
     color: '{green.600}',
-    hover: '{green.550}',
-    active: '{green.500}',
+    hoverColor: '{green.550}',
+    activeColor: '{green.500}',
     foreground: '{green.950}',
     foregroundHover: '{green.900}'
   },
 
   warn: {
     color: '{orange.450}',
-    hover: '{orange.400}',
-    active: '{orange.350}',
+    hoverColor: '{orange.400}',
+    activeColor: '{orange.350}',
     foreground: '{orange.950}',
     foregroundHover: '{orange.900}'
   },
 
   error: {
     color: '{red.400}',
-    hover: '{red.350}',
-    active: '{red.300}',
+    hoverColor: '{red.350}',
+    activeColor: '{red.300}',
     foreground: '{red.950}',
     foregroundHover: '{red.900}'
   },
 
   info: {
     color: '{light-blue.500}',
-    hover: '{light-blue.450}',
-    active: '{light-blue.400}',
+    hoverColor: '{light-blue.450}',
+    activeColor: '{light-blue.400}',
     foreground: '{light-blue.950}',
     foregroundHover: '{light-blue.900}'
   },
 
   task: {
     color: '{blue.500}',
-    hover: '{blue.450}',
-    active: '{blue.400}',
+    hoverColor: '{blue.450}',
+    activeColor: '{blue.400}',
     foreground: '{blue.950}',
     foregroundHover: '{blue.900}'
   },
 
   transfer: {
     color: '{indigo.350}',
-    hover: '{indigo.300}',
-    active: '{indigo.250}',
+    hoverColor: '{indigo.300}',
+    activeColor: '{indigo.250}',
     foreground: '{indigo.950}',
     foregroundHover: '{indigo.900}'
   },
 
   chat: {
     color: '{cyan.600}',
-    hover: '{cyan.550}',
-    active: '{cyan.500}',
+    hoverColor: '{cyan.550}',
+    activeColor: '{cyan.500}',
     foreground: '{cyan.950}',
     foregroundHover: '{cyan.900}'
   },
 
   email: {
     color: '{blue.600}',
-    hover: '{blue.550}',
-    active: '{blue.500}',
+    hoverColor: '{blue.550}',
+    activeColor: '{blue.500}',
     foreground: '{blue.950}',
     foregroundHover: '{blue.900}'
   },

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/light-color.ts

@@ -2,80 +2,80 @@ const lightColor = {
 
   primary: {
     color: '{amber.500}',
-    hover: '{amber.450}',
-    active: '{amber.400}',
+    hoverColor: '{amber.450}',
+    activeColor: '{amber.400}',
     foreground: '{amber.900}',
     foregroundHover: '{amber.850}'
   },
 
   secondary: {
     color: '{gray.150}',
-    hover: '{gray.100}',
-    active: '{gray.50}',
+    hoverColor: '{gray.100}',
+    activeColor: '{gray.50}',
     foreground: '{gray.750}',
     foregroundHover: '{gray.700}'
   },
 
   success: {
     color: '{green.600}',
-    hover: '{green.550}',
-    active: '{green.500}',
+    hoverColor: '{green.550}',
+    activeColor: '{green.500}',
     foreground: '{green.50}',
     foregroundHover: '{green.100}'
   },
 
   warn: {
     color: '{orange.450}',
-    hover: '{orange.400}',
-    active: '{orange.350}',
+    hoverColor: '{orange.400}',
+    activeColor: '{orange.350}',
     foreground: '{orange.50}',
     foregroundHover: '{orange.100}'
   },
 
   error: {
     color: '{red.400}',
-    hover: '{red.350}',
-    active: '{red.300}',
+    hoverColor: '{red.350}',
+    activeColor: '{red.300}',
     foreground: '{red.50}',
     foregroundHover: '{red.100}'
   },
 
   info: {
     color: '{light-blue.500}',
-    hover: '{light-blue.450}',
-    active: '{light-blue.400}',
+    hoverColor: '{light-blue.450}',
+    activeColor: '{light-blue.400}',
     foreground: '{light-blue.50}',
     foregroundHover: '{light-blue.100}'
   },
 
   task: {
     color: '{blue.500}',
-    hover: '{blue.450}',
-    active: '{blue.400}',
+    hoverColor: '{blue.450}',
+    activeColor: '{blue.400}',
     foreground: '{blue.50}',
     foregroundHover: '{blue.100}'
   },
 
   transfer: {
     color: '{indigo.350}',
-    hover: '{indigo.300}',
-    active: '{indigo.250}',
+    hoverColor: '{indigo.300}',
+    activeColor: '{indigo.250}',
     foreground: '{indigo.50}',
     foregroundHover: '{indigo.100}'
   },
 
   chat: {
     color: '{cyan.600}',
-    hover: '{cyan.550}',
-    active: '{cyan.500}',
+    hoverColor: '{cyan.550}',
+    activeColor: '{cyan.500}',
     foreground: '{cyan.50}',
     foregroundHover: '{cyan.100}'
   },
 
   email: {
     color: '{blue.600}',
-    hover: '{blue.550}',
-    active: '{blue.500}',
+    hoverColor: '{blue.550}',
+    activeColor: '{blue.500}',
     foreground: '{blue.50}',
     foregroundHover: '{blue.100}'
   },