@webitel/styleguide 24.12.47 → 24.12.49

package/package.json

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

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

@@ -1,30 +1,30 @@
 const darkColors = {
   root: {
-    background: '{form.field.background}',
-    checkedBackground: '{primary.color}',
-    checkedHoverBackground: '{primary.hover.color}',
-    disabledBackground: '{form.field.disabled.background}',
+    background: '{transparent}',
+    checkedBackground: '{surface.300}',
+    checkedHoverBackground: '{surface.200}',
+    disabledBackground: '{surface.650}',
     filledBackground: '{form.field.filled.background}',
-    borderColor: '{form.field.border.color}',
-    hoverBorderColor: '{form.field.hover.border.color}',
-    focusBorderColor: '{form.field.border.color}',
-    checkedBorderColor: '{primary.color}',
-    checkedHoverBorderColor: '{primary.hover.color}',
-    checkedFocusBorderColor: '{primary.color}',
-    checkedDisabledBorderColor: '{form.field.border.color}',
+    borderColor: '{surface.300}',
+    hoverBorderColor: '{surface.200}',
+    focusBorderColor: '{focus-color}',
+    checkedBorderColor: '{surface.300}',
+    checkedHoverBorderColor: '{surface.200}',
+    checkedFocusBorderColor: '{focus-color}',
+    checkedDisabledBorderColor: '{surface.650}',
     invalidBorderColor: '{form.field.invalid.border.color}',
     shadow: '{form.field.shadow}',
     focusRing: {
-        color: '{focus.ring.color}',
+        color: '{focus-color}',
         shadow: '{focus.ring.shadow}'
     },
     transitionDuration: '{form.field.transition.duration}',
   },
   icon: {
     color: '{form.field.color}',
-    checkedColor: '{primary.contrast.color}',
-    checkedHoverColor: '{primary.contrast.color}',
-    disabledColor: '{form.field.disabled.color}',
+    checkedColor: '{surface.800}',
+    checkedHoverColor: '{surface.800}',
+    disabledColor: '{surface.500}',
   }
 }
 

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

@@ -1,30 +1,30 @@
 const lightColors = {
   root: {
-    background: '{form.field.background}',
-    checkedBackground: '{primary.color}',
-    checkedHoverBackground: '{primary.hover.color}',
-    disabledBackground: '{form.field.disabled.background}',
+    background: '{transparent}',
+    checkedBackground: '{surface.700}',
+    checkedHoverBackground: '{surface.600}',
+    disabledBackground: '{surface.200}',
     filledBackground: '{form.field.filled.background}',
-    borderColor: '{form.field.border.color}',
-    hoverBorderColor: '{form.field.hover.border.color}',
-    focusBorderColor: '{form.field.border.color}',
-    checkedBorderColor: '{primary.color}',
-    checkedHoverBorderColor: '{primary.hover.color}',
-    checkedFocusBorderColor: '{primary.color}',
-    checkedDisabledBorderColor: '{form.field.border.color}',
+    borderColor: '{surface.700}',
+    hoverBorderColor: '{surface.600}',
+    focusBorderColor: '{focus-color}',
+    checkedBorderColor: '{surface.700}',
+    checkedHoverBorderColor: '{surface.600}',
+    checkedFocusBorderColor: '{focus-color}',
+    checkedDisabledBorderColor: '{surface.200}',
     invalidBorderColor: '{form.field.invalid.border.color}',
     shadow: '{form.field.shadow}',
     focusRing: {
-        color: '{focus.ring.color}',
-        shadow: '{focus.ring.shadow}'
+      color: '{focus-color}',
+      shadow: '{focus.ring.shadow}'
     },
     transitionDuration: '{form.field.transition.duration}',
   },
   icon: {
     color: '{form.field.color}',
-    checkedColor: '{primary.contrast.color}',
-    checkedHoverColor: '{primary.contrast.color}',
-    disabledColor: '{form.field.disabled.color}',
+    checkedColor: '{surface.0}',
+    checkedHoverColor: '{surface.0}',
+    disabledColor: '{surface.400}',
   }
 }
 

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

@@ -1,15 +1,15 @@
 const sizes = {
   root: {
     borderRadius: '{border.radius.sm}',
-    width: '1.25rem',
-    height: '1.25rem',
+    width: '1.125rem',
+    height: '1.125rem',
     sm: {
       width: '1rem',
       height: '1rem'
     },
     lg: {
-      width: '1.5rem',
-      height: '1.5rem'
+      width: '1.10rem',
+      height: '1.10rem'
     },
     focusRing: {
       width: '{focus.ring.width}',
@@ -18,7 +18,7 @@ const sizes = {
     }
   },
   icon: {
-    size: '0.875rem',
+    size: '0.75rem',
     sm: {
       size: '0.75rem'
     },

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

@@ -0,0 +1,9 @@
+export default {
+  content: {
+    background: '{surface.900}',
+    hoverBackground: '{surface.800}',
+    borderColor: '{surface.700}',
+    color: '{text.color}',
+    hoverColor: '{text.hover.color}'
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,9 @@
+export default {
+  content: {
+    background: '{surface.0}',
+    hoverBackground: '{surface.100}',
+    borderColor: '{surface.200}',
+    color: '{text.color}',
+    hoverColor: '{text.hover.color}'
+  }
+}

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

@@ -70,6 +70,17 @@ const darkColor = {
     foreground: '{blue.950}'
   },
 
+  highlight: {
+    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+    color: 'rgba(255,255,255,.87)',
+    focusColor: 'rgba(255,255,255,.87)'
+  },
+  mask: {
+    background: 'rgba(0,0,0,0.6)',
+    color: '{surface.200}'
+  },
+
   // Focus colors
   'focus-color': '{black}',
 

package/src/lib/primevue/semantic/color-scheme/focus-ring/index.ts

@@ -2,12 +2,6 @@ import light from './light'
 import dark from './dark'
 
 export default {
-  sizes: {
-    width: '1px',
-    style: 'solid',
-    offset: '2px',
-    shadow: 'none'
-  },
   colorScheme: {
     light,
     dark,

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

@@ -0,0 +1,23 @@
+export default {
+  formField: {
+    background: '{surface.950}',
+    disabledBackground: '{surface.700}',
+    filledBackground: '{surface.800}',
+    filledHoverBackground: '{surface.800}',
+    filledFocusBackground: '{surface.800}',
+    borderColor: '{surface.600}',
+    hoverBorderColor: '{surface.500}',
+    focusBorderColor: '{primary.color}',
+    invalidBorderColor: '{red.300}',
+    color: '{surface.0}',
+    disabledColor: '{surface.400}',
+    placeholderColor: '{surface.400}',
+    invalidPlaceholderColor: '{red.400}',
+    floatLabelColor: '{surface.400}',
+    floatLabelFocusColor: '{primary.color}',
+    floatLabelActiveColor: '{surface.400}',
+    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+    iconColor: '{surface.400}',
+    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,23 @@
+export default {
+  formField: {
+    background: '{surface.0}',
+    disabledBackground: '{surface.200}',
+    filledBackground: '{surface.50}',
+    filledHoverBackground: '{surface.50}',
+    filledFocusBackground: '{surface.50}',
+    borderColor: '{surface.300}',
+    hoverBorderColor: '{surface.400}',
+    focusBorderColor: '{primary.color}',
+    invalidBorderColor: '{red.400}',
+    color: '{surface.700}',
+    disabledColor: '{surface.500}',
+    placeholderColor: '{surface.500}',
+    invalidPlaceholderColor: '{red.600}',
+    floatLabelColor: '{surface.500}',
+    floatLabelFocusColor: '{primary.600}',
+    floatLabelActiveColor: '{surface.500}',
+    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+    iconColor: '{surface.400}',
+    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+  }
+}

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

@@ -4,6 +4,12 @@ import palette from './palette';
 import base from './base'
 import overlay from './overlay'
 import focusRing from './focus-ring'
+import text from './text'
+import formField from './form-field';
+import surface from './surface';
+import content from './content';
+import list from './list';
+import navigation from './navigation';
 
 const colorScheme = {
   light: {
@@ -12,6 +18,12 @@ const colorScheme = {
     ...base.light,
     ...focusRing.colorScheme.light,
     ...overlay.colorScheme.light,
+    ...text.colorScheme.light,
+    ...formField.colorScheme.light,
+    ...surface.colorScheme.light,
+    ...content.colorScheme.light,
+    ...list.colorScheme.light,
+    ...navigation.colorScheme.light,
   },
   dark: {
     ...palette,
@@ -19,6 +31,12 @@ const colorScheme = {
     ...base.dark,
     ...focusRing.colorScheme.dark,
     ...overlay.colorScheme.dark,
+    ...text.colorScheme.dark,
+    ...formField.colorScheme.dark,
+    ...surface.colorScheme.dark,
+    ...content.colorScheme.dark,
+    ...list.colorScheme.dark,
+    ...navigation.colorScheme.dark,
   },
 };
 

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

@@ -70,6 +70,18 @@ const lightColor = {
     foreground: '{blue.50}'
   },
 
+  highlight: {
+    background: '{primary.50}',
+    focusBackground: '{primary.100}',
+    color: '{primary.700}',
+    focusColor: '{primary.800}'
+  },
+
+  mask: {
+    background: 'rgba(0,0,0,0.4)',
+    color: '{surface.200}'
+  },
+
   // Focus colors
   'focus-color': '{black}',
 

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

@@ -0,0 +1,21 @@
+export default {
+  list: {
+    option: {
+      focusBackground: '{surface.800}',
+      selectedBackground: '{highlight.background}',
+      selectedFocusBackground: '{highlight.focus.background}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      selectedColor: '{highlight.color}',
+      selectedFocusColor: '{highlight.focus.color}',
+      icon: {
+        color: '{surface.500}',
+        focusColor: '{surface.400}'
+      }
+    },
+    optionGroup: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,21 @@
+export default {
+  list: {
+    option: {
+      focusBackground: '{surface.100}',
+      selectedBackground: '{highlight.background}',
+      selectedFocusBackground: '{highlight.focus.background}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      selectedColor: '{highlight.color}',
+      selectedFocusColor: '{highlight.focus.color}',
+      icon: {
+        color: '{surface.400}',
+        focusColor: '{surface.500}'
+      }
+    },
+    optionGroup: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+export default {
+  navigation: {
+    item: {
+      focusBackground: '{surface.800}',
+      activeBackground: '{surface.800}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      activeColor: '{text.hover.color}',
+      icon: {
+        color: '{surface.500}',
+        focusColor: '{surface.400}',
+        activeColor: '{surface.400}'
+      }
+    },
+    submenuLabel: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    },
+    submenuIcon: {
+      color: '{surface.500}',
+      focusColor: '{surface.400}',
+      activeColor: '{surface.400}'
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,25 @@
+export default {
+  navigation: {
+    item: {
+      focusBackground: '{surface.100}',
+      activeBackground: '{surface.100}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      activeColor: '{text.hover.color}',
+      icon: {
+        color: '{surface.400}',
+        focusColor: '{surface.500}',
+        activeColor: '{surface.500}'
+      }
+    },
+    submenuLabel: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    },
+    submenuIcon: {
+      color: '{surface.400}',
+      focusColor: '{surface.500}',
+      activeColor: '{surface.500}'
+    }
+  }
+}

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

@@ -2,25 +2,6 @@ import light from './light'
 import dark from './dark'
 
 export default {
-  sizes: {
-    select: {
-      borderRadius: '{border.radius.md}',
-      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-    },
-    popover: {
-      borderRadius: '1rem',
-      padding: '0.75rem',
-    },
-    modal: {
-      borderRadius: '{border.radius.xl}',
-      padding: '1.25rem',
-      shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-    },
-    navigation: {
-      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-    },
-  },
-
   colorScheme: {
     light,
     dark,

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

@@ -0,0 +1,24 @@
+export default {
+  surface: {
+    0: '{gray.0}',
+    50: '{gray.50}',
+    100: '{gray.100}',
+    150: '{gray.150}',
+    200: '{gray.200}',
+    250: '{gray.250}',
+    300: '{gray.300}',
+    350: '{gray.350}',
+    400: '{gray.400}',
+    450: '{gray.450}',
+    500: '{gray.500}',
+    550: '{gray.550}',
+    600: '{gray.600}',
+    650: '{gray.650}',
+    700: '{gray.700}',
+    750: '{gray.750}',
+    800: '{gray.800}',
+    850: '{gray.850}',
+    900: '{gray.900}',
+    950: '{gray.950}'
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,24 @@
+export default {
+  surface: {
+    0: '{gray.0}',
+    50: '{gray.50}',
+    100: '{gray.100}',
+    150: '{gray.150}',
+    200: '{gray.200}',
+    250: '{gray.250}',
+    300: '{gray.300}',
+    350: '{gray.350}',
+    400: '{gray.400}',
+    450: '{gray.450}',
+    500: '{gray.500}',
+    550: '{gray.550}',
+    600: '{gray.600}',
+    650: '{gray.650}',
+    700: '{gray.700}',
+    750: '{gray.750}',
+    800: '{gray.800}',
+    850: '{gray.850}',
+    900: '{gray.900}',
+    950: '{gray.950}'
+  }
+}

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

@@ -0,0 +1,8 @@
+export default {
+  text: {
+    color: '{surface.0}',
+    hoverColor: '{surface.0}',
+    mutedColor: '{surface.400}',
+    hoverMutedColor: '{surface.300}'
+  }
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+}

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

@@ -0,0 +1,8 @@
+export default {
+  text: {
+    color: '{surface.700}',
+    hoverColor: '{surface.800}',
+    mutedColor: '{surface.500}',
+    hoverMutedColor: '{surface.600}'
+  }
+}

package/src/lib/primevue/semantic/sizes/focus-ring/index.ts

@@ -0,0 +1,6 @@
+export default {
+  width: '1px',
+  style: 'solid',
+  offset: '2px',
+  shadow: 'none'
+}

package/src/lib/primevue/semantic/sizes/index.ts

@@ -1,8 +1,8 @@
 import formField from './form-field'
 import list from './list'
 import navigation from './navigation'
-import overlay from '../color-scheme/overlay'
-import focusRing from '../color-scheme/focus-ring'
+import overlay from './overlay'
+import focusRing from './focus-ring'
 
 export default {
   transitionDuration: '0.2s',
@@ -18,6 +18,6 @@ export default {
   formField,
   list,
   navigation,
-  overlay: overlay.sizes,
-  focusRing: focusRing.sizes,
+  overlay,
+  focusRing,
 }

package/src/lib/primevue/semantic/sizes/overlay/index.ts

@@ -0,0 +1,18 @@
+export default {
+  select: {
+    borderRadius: '{border.radius.md}',
+    shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+  },
+  popover: {
+    borderRadius: '1rem',
+    padding: '0.75rem',
+  },
+  modal: {
+    borderRadius: '{border.radius.xl}',
+    padding: '1.25rem',
+    shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
+  },
+  navigation: {
+    shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+  },
+}