@webitel/styleguide 24.12.75 → 24.12.77

package/package.json

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

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

@@ -131,111 +131,100 @@ const darkColors = {
   },
   outlined: {
     primary: {
-      hoverBackground: '{primary.50}',
-      activeBackground: '{primary.100}',
+      hoverBackground: '{primary.highlight.color}',
+      activeBackground: '{primary.active.color}',
       borderColor: '{primary.color}',
       color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.600}',
-      color: '{surface.600}',
+      hoverBackground: '{secondary.highlight.color}',
+      activeBackground: '{secondary.active.color}',
+      borderColor: '{secondary.color}',
+      color: '{secondary.foreground}',
     },
     success: {
-      hoverBackground: '{green.50}',
-      activeBackground: '{green.100}',
-      borderColor: '{green.500}',
-      color: '{green.500}',
+      hoverBackground: '{success.highlight.color}',
+      activeBackground: '{success.active.color}',
+      borderColor: '{success.color}',
+      color: '{success.color}',
     },
     info: {
-      hoverBackground: '{sky.50}',
-      activeBackground: '{sky.100}',
-      borderColor: '{sky.500}',
-      color: '{sky.500}',
+      hoverBackground: '{info.highlight.color}',
+      activeBackground: '{info.active.color}',
+      borderColor: '{info.color}',
+      color: '{info.color}',
     },
     warn: {
-      hoverBackground: '{orange.50}',
-      activeBackground: '{orange.100}',
-      borderColor: '{orange.500}',
-      color: '{orange.500}',
-    },
-    help: {
-      hoverBackground: '{purple.50}',
-      activeBackground: '{purple.100}',
-      borderColor: '{purple.500}',
-      color: '{purple.500}',
-    },
-    danger: {
-      hoverBackground: '{red.50}',
-      activeBackground: '{red.100}',
-      borderColor: '{red.500}',
-      color: '{red.500}',
-    },
-    contrast: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.950}',
-      color: '{surface.950}',
-    },
-    plain: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.900}',
-      color: '{surface.900}',
+      hoverBackground: '{warn.highlight.color}',
+      activeBackground: '{warn.active.color}',
+      borderColor: '{warn.color}',
+      color: '{warn.color}',
+    },
+    error: {
+      hoverBackground: '{error.highlight.color}',
+      activeBackground: '{error.active.color}',
+      borderColor: '{error.color}',
+      color: '{error.color}',
+    },
+    transfer: {
+      hoverBackground: '{transfer.highlight.color}',
+      activeBackground: '{transfer.active.color}',
+      borderColor: '{transfer.color}',
+      color: '{transfer.color}',
+    },
+    job: {
+      hoverBackground: '{task.highlight.color}',
+      activeBackground: '{task.active.color}',
+      borderColor: '{task.color}',
+      color: '{task.color}',
     },
   },
   text: {
     primary: {
-      hoverBackground: '{primary.50}',
-      activeBackground: '{primary.100}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
       color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.600}',
+      hoverBackground: '{secondary.hover.color}',
+      activeBackground: '{secondary.active.color}',
+      color: '{secondary.foreground}',
     },
     success: {
-      hoverBackground: '{green.50}',
-      activeBackground: '{green.100}',
-      color: '{green.500}',
+      hoverBackground: '{success.hover.color}',
+      activeBackground: '{success.active.color}',
+      color: '{success.color}',
     },
     info: {
-      hoverBackground: '{sky.50}',
-      activeBackground: '{sky.100}',
-      color: '{sky.500}',
+      hoverBackground: '{info.hover.color}',
+      activeBackground: '{info.active.color}',
+      color: '{info.color}',
     },
     warn: {
-      hoverBackground: '{orange.50}',
-      activeBackground: '{orange.100}',
-      color: '{orange.500}',
-    },
-    help: {
-      hoverBackground: '{purple.50}',
-      activeBackground: '{purple.100}',
-      color: '{purple.500}',
-    },
-    danger: {
-      hoverBackground: '{red.50}',
-      activeBackground: '{red.100}',
-      color: '{red.500}',
-    },
-    contrast: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.950}',
-    },
-    plain: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.900}',
+      hoverBackground: '{warn.hover.color}',
+      activeBackground: '{warn.active.color}',
+      color: '{warn.color}',
+    },
+    job: {
+      hoverBackground: '{task.hover.color}',
+      activeBackground: '{task.active.color}',
+      color: '{task.color}',
+    },
+    error: {
+      hoverBackground: '{error.hover.color}',
+      activeBackground: '{error.active.color}',
+      color: '{error.color}',
+    },
+    transfer: {
+      hoverBackground: '{transfer.hover.color}',
+      activeBackground: '{transfer.active.color}',
+      color: '{transfer.color}',
     },
   },
   link: {
-    color: '{primary.color}',
-    hoverColor: '{primary.color}',
-    activeColor: '{primary.color}',
+    color: '{info.color}',
+    hoverColor: '{info.hover.color}',
+    activeColor: '{info.active.color}',
   },
 };
 

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

@@ -131,111 +131,100 @@ const lightColors = {
   },
   outlined: {
     primary: {
-      hoverBackground: '{primary.50}',
-      activeBackground: '{primary.100}',
+      hoverBackground: '{primary.highlight.color}',
+      activeBackground: '{primary.active.color}',
       borderColor: '{primary.color}',
       color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.600}',
-      color: '{surface.600}',
+      hoverBackground: '{secondary.highlight.color}',
+      activeBackground: '{secondary.active.color}',
+      borderColor: '{secondary.color}',
+      color: '{secondary.foreground}',
     },
     success: {
-      hoverBackground: '{green.50}',
-      activeBackground: '{green.100}',
-      borderColor: '{green.500}',
-      color: '{green.500}',
+      hoverBackground: '{success.highlight.color}',
+      activeBackground: '{success.active.color}',
+      borderColor: '{success.color}',
+      color: '{success.color}',
     },
     info: {
-      hoverBackground: '{sky.50}',
-      activeBackground: '{sky.100}',
-      borderColor: '{sky.500}',
-      color: '{sky.500}',
+      hoverBackground: '{info.highlight.color}',
+      activeBackground: '{info.active.color}',
+      borderColor: '{info.color}',
+      color: '{info.color}',
     },
     warn: {
-      hoverBackground: '{orange.50}',
-      activeBackground: '{orange.100}',
-      borderColor: '{orange.500}',
-      color: '{orange.500}',
-    },
-    help: {
-      hoverBackground: '{purple.50}',
-      activeBackground: '{purple.100}',
-      borderColor: '{purple.500}',
-      color: '{purple.500}',
-    },
-    danger: {
-      hoverBackground: '{red.50}',
-      activeBackground: '{red.100}',
-      borderColor: '{red.500}',
-      color: '{red.500}',
-    },
-    contrast: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.950}',
-      color: '{surface.950}',
-    },
-    plain: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      borderColor: '{surface.900}',
-      color: '{surface.900}',
+      hoverBackground: '{warn.highlight.color}',
+      activeBackground: '{warn.active.color}',
+      borderColor: '{warn.color}',
+      color: '{warn.color}',
+    },
+    job: {
+      hoverBackground: '{task.highlight.color}',
+      activeBackground: '{task.active.color}',
+      borderColor: '{task.color}',
+      color: '{task.color}',
+    },
+    error: {
+      hoverBackground: '{error.highlight.color}',
+      activeBackground: '{error.active.color}',
+      borderColor: '{error.color}',
+      color: '{error.color}',
+    },
+    transfer: {
+      hoverBackground: '{transfer.highlight.color}',
+      activeBackground: '{transfer.active.color}',
+      borderColor: '{transfer.color}',
+      color: '{transfer.color}',
     },
   },
   text: {
     primary: {
-      hoverBackground: '{primary.50}',
-      activeBackground: '{primary.100}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
       color: '{primary.color}',
     },
     secondary: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.600}',
+      hoverBackground: '{secondary.hover.color}',
+      activeBackground: '{secondary.active.color}',
+      color: '{secondary.foreground}',
     },
     success: {
-      hoverBackground: '{green.50}',
-      activeBackground: '{green.100}',
-      color: '{green.500}',
+      hoverBackground: '{success.hover.color}',
+      activeBackground: '{success.active.color}',
+      color: '{success.color}',
     },
     info: {
-      hoverBackground: '{sky.50}',
-      activeBackground: '{sky.100}',
-      color: '{sky.500}',
+      hoverBackground: '{info.hover.color}',
+      activeBackground: '{info.active.color}',
+      color: '{info.color}',
     },
     warn: {
-      hoverBackground: '{orange.50}',
-      activeBackground: '{orange.100}',
-      color: '{orange.500}',
-    },
-    help: {
-      hoverBackground: '{purple.50}',
-      activeBackground: '{purple.100}',
-      color: '{purple.500}',
-    },
-    danger: {
-      hoverBackground: '{red.50}',
-      activeBackground: '{red.100}',
-      color: '{red.500}',
-    },
-    contrast: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.950}',
-    },
-    plain: {
-      hoverBackground: '{surface.50}',
-      activeBackground: '{surface.100}',
-      color: '{surface.900}',
+      hoverBackground: '{warn.hover.color}',
+      activeBackground: '{warn.active.color}',
+      color: '{warn.color}',
+    },
+    job: {
+      hoverBackground: '{task.hover.color}',
+      activeBackground: '{task.active.color}',
+      color: '{task.color}',
+    },
+    error: {
+      hoverBackground: '{error.hover.color}',
+      activeBackground: '{error.active.color}',
+      color: '{error.color}',
+    },
+    transfer: {
+      hoverBackground: '{transfer.hover.color}',
+      activeBackground: '{transfer.active.color}',
+      color: '{transfer.color}',
     },
   },
   link: {
-    color: '{primary.color}',
-    hoverColor: '{primary.color}',
-    activeColor: '{primary.color}',
+    color: '{info.color}',
+    hoverColor: '{info.hover.color}',
+    activeColor: '{info.active.color}',
   },
 };
 

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

@@ -17,6 +17,17 @@ const sizes = {
     paddingY: '{form.field.lg.padding.y}',
     iconOnlyWidth: '3.5rem'
   },
+  icon: {
+    xs: {
+      padding: '0.25rem',
+    },
+    sm: {
+      padding: '0.5rem',
+    },
+    md: {
+      padding: '0.5rem',
+    },
+  },
   label: {
     fontWeight: '500'
   },

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

@@ -5,7 +5,8 @@ const darkColor = {
     hoverColor: '{amber.450}',
     activeColor: '{amber.400}',
     foreground: '{amber.950}',
-    foregroundHover: '{amber.900}'
+    foregroundHover: '{amber.900}',
+    highlightColor: '{amber.850}'
   },
 
   secondary: {
@@ -13,7 +14,8 @@ const darkColor = {
     hoverColor: '{gray.850}',
     activeColor: '{gray.750}',
     foreground: '{gray.350}',
-    foregroundHover: '{gray.300}'
+    foregroundHover: '{gray.300}',
+    highlightColor: '{gray.850}'
   },
 
   success: {
@@ -21,7 +23,8 @@ const darkColor = {
     hoverColor: '{green.550}',
     activeColor: '{green.500}',
     foreground: '{green.950}',
-    foregroundHover: '{green.900}'
+    foregroundHover: '{green.900}',
+    highlightColor: '{green.850}'
   },
 
   warn: {
@@ -29,7 +32,8 @@ const darkColor = {
     hoverColor: '{orange.400}',
     activeColor: '{orange.350}',
     foreground: '{orange.950}',
-    foregroundHover: '{orange.900}'
+    foregroundHover: '{orange.900}',
+    highlightColor: '{orange.850}'
   },
 
   error: {
@@ -37,7 +41,8 @@ const darkColor = {
     hoverColor: '{red.350}',
     activeColor: '{red.300}',
     foreground: '{red.950}',
-    foregroundHover: '{red.900}'
+    foregroundHover: '{red.900}',
+    highlightColor: '{red.850}'
   },
 
   info: {
@@ -45,7 +50,8 @@ const darkColor = {
     hoverColor: '{light-blue.450}',
     activeColor: '{light-blue.400}',
     foreground: '{light-blue.950}',
-    foregroundHover: '{light-blue.900}'
+    foregroundHover: '{light-blue.900}',
+    highlightColor: '{light-blue.850}'
   },
 
   task: {
@@ -53,7 +59,8 @@ const darkColor = {
     hoverColor: '{blue.450}',
     activeColor: '{blue.400}',
     foreground: '{blue.950}',
-    foregroundHover: '{blue.900}'
+    foregroundHover: '{blue.900}',
+    highlightColor: '{blue.850}'
   },
 
   transfer: {
@@ -61,7 +68,8 @@ const darkColor = {
     hoverColor: '{indigo.300}',
     activeColor: '{indigo.250}',
     foreground: '{indigo.950}',
-    foregroundHover: '{indigo.900}'
+    foregroundHover: '{indigo.900}',
+    highlightColor: '{indigo.850}'
   },
 
   chat: {
@@ -69,7 +77,8 @@ const darkColor = {
     hoverColor: '{cyan.550}',
     activeColor: '{cyan.500}',
     foreground: '{cyan.950}',
-    foregroundHover: '{cyan.900}'
+    foregroundHover: '{cyan.900}',
+    highlightColor: '{cyan.850}'
   },
 
   email: {
@@ -77,7 +86,8 @@ const darkColor = {
     hoverColor: '{blue.550}',
     activeColor: '{blue.500}',
     foreground: '{blue.950}',
-    foregroundHover: '{blue.900}'
+    foregroundHover: '{blue.900}',
+    highlightColor: '{blue.850}'
   },
 
   highlight: {

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

@@ -5,7 +5,8 @@ const lightColor = {
     hoverColor: '{amber.450}',
     activeColor: '{amber.400}',
     foreground: '{amber.900}',
-    foregroundHover: '{amber.850}'
+    foregroundHover: '{amber.850}',
+    highlightColor: '{amber.100}'
   },
 
   secondary: {
@@ -13,7 +14,8 @@ const lightColor = {
     hoverColor: '{gray.100}',
     activeColor: '{gray.50}',
     foreground: '{gray.750}',
-    foregroundHover: '{gray.700}'
+    foregroundHover: '{gray.700}',
+    highlightColor: '{gray.50}'
   },
 
   success: {
@@ -21,7 +23,8 @@ const lightColor = {
     hoverColor: '{green.550}',
     activeColor: '{green.500}',
     foreground: '{green.50}',
-    foregroundHover: '{green.100}'
+    foregroundHover: '{green.100}',
+    highlightColor: '{green.100}'
   },
 
   warn: {
@@ -29,7 +32,8 @@ const lightColor = {
     hoverColor: '{orange.400}',
     activeColor: '{orange.350}',
     foreground: '{orange.50}',
-    foregroundHover: '{orange.100}'
+    foregroundHover: '{orange.100}',
+    highlightColor: '{orange.100}'
   },
 
   error: {
@@ -37,7 +41,8 @@ const lightColor = {
     hoverColor: '{red.350}',
     activeColor: '{red.300}',
     foreground: '{red.50}',
-    foregroundHover: '{red.100}'
+    foregroundHover: '{red.100}',
+    highlightColor: '{red.100}'
   },
 
   info: {
@@ -45,7 +50,9 @@ const lightColor = {
     hoverColor: '{light-blue.450}',
     activeColor: '{light-blue.400}',
     foreground: '{light-blue.50}',
-    foregroundHover: '{light-blue.100}'
+    foregroundHover: '{light-blue.100}',
+    highlightColor: '{light-blue.100}'
+
   },
 
   task: {
@@ -53,7 +60,8 @@ const lightColor = {
     hoverColor: '{blue.450}',
     activeColor: '{blue.400}',
     foreground: '{blue.50}',
-    foregroundHover: '{blue.100}'
+    foregroundHover: '{blue.100}',
+    highlightColor: '{blue.100}'
   },
 
   transfer: {
@@ -61,7 +69,8 @@ const lightColor = {
     hoverColor: '{indigo.300}',
     activeColor: '{indigo.250}',
     foreground: '{indigo.50}',
-    foregroundHover: '{indigo.100}'
+    foregroundHover: '{indigo.100}',
+    highlightColor: '{indigo.100}'
   },
 
   chat: {
@@ -69,7 +78,8 @@ const lightColor = {
     hoverColor: '{cyan.550}',
     activeColor: '{cyan.500}',
     foreground: '{cyan.50}',
-    foregroundHover: '{cyan.100}'
+    foregroundHover: '{cyan.100}',
+    highlightColor: '{cyan.100}'
   },
 
   email: {
@@ -77,7 +87,8 @@ const lightColor = {
     hoverColor: '{blue.550}',
     activeColor: '{blue.500}',
     foreground: '{blue.50}',
-    foregroundHover: '{blue.100}'
+    foregroundHover: '{blue.100}',
+    highlightColor: '{blue.100}'
   },
 
   highlight: {

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

@@ -1,23 +1,25 @@
 export default {
-  counter: {
-    background: '{content.background}',
-    color: '{content.color}',
-  },
-  wrapper: {
-    background: '{surface.900}',
-    overlayColor: 'rgba(0,0,0,0.8)',
-    color: '{white}',
-  },
-  headLine: {
-    background: '{transparent}',
-    hoverBackground: 'rgba(0,0,0,0.5)',
-    iconColor: '{white}',
-    color: '{white}',
-    blur: '10px'
-  },
-  controlBar: {
-    background: '{content.background}',
-    iconColor: '{content.color}',
-    color: '{content.color}',
-  },
+  player: {
+    counter: {
+      background: '{content.background}',
+      color: '{content.color}',
+    },
+    wrapper: {
+      background: '{surface.900}',
+      overlayColor: 'rgba(0,0,0,0.8)',
+      color: '{white}',
+    },
+    headLine: {
+      background: '{transparent}',
+      hoverBackground: 'rgba(0,0,0,0.5)',
+      iconColor: '{white}',
+      color: '{white}',
+      blur: '10px'
+    },
+    controlBar: {
+      background: '{content.background}',
+      iconColor: '{content.color}',
+      color: '{content.color}',
+    },
+  }
 }

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

@@ -1,23 +1,25 @@
 export default {
-  counter: {
-    background: '{content.background}',
-    color: '{content.color}',
-  },
-  wrapper: {
-    background: '{surface.900}',
-    overlayColor: 'rgba(0,0,0,0.8)',
-    color: '{white}',
-  },
-  headLine: {
-    background: '{transparent}',
-    hoverBackground: 'rgba(0,0,0,0.5)',
-    iconColor: '{white}',
-    color: '{white}',
-    blur: '10px'
-  },
-  controlBar: {
-    background: '{content.background}',
-    iconColor: '{content.color}',
-    color: '{content.color}',
-  },
+  player: {
+    counter: {
+      background: '{content.background}',
+      color: '{content.color}',
+    },
+    wrapper: {
+      background: '{surface.900}',
+      overlayColor: 'rgba(0,0,0,0.8)',
+      color: '{white}',
+    },
+    headLine: {
+      background: '{transparent}',
+      hoverBackground: 'rgba(0,0,0,0.5)',
+      iconColor: '{white}',
+      color: '{white}',
+      blur: '10px'
+    },
+    controlBar: {
+      background: '{content.background}',
+      iconColor: '{content.color}',
+      color: '{content.color}',
+    },
+  }
 }

package/src/lib/primevue/semantic/sizes/form-field/index.ts

@@ -2,7 +2,7 @@ export default {
   paddingX: '0.75rem',
   paddingY: '0.5rem',
   sm: {
-    fontSize: '0.875rem',
+    fontSize: '0.625rem',
     paddingX: '0.5rem',
     paddingY: '0.25rem'
   },