@webitel/styleguide 24.12.46 → 24.12.48

package/package.json

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

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

@@ -6,6 +6,7 @@ import MenubarScheme from './menubar';
 import ToolbarScheme from './toolbar';
 import ChipScheme from "./chip";
 import CheckboxScheme from "./checkbox";
+import TableScheme from "./table";
 
 export {
   AvatarScheme,
@@ -16,4 +17,5 @@ export {
   ToolbarScheme,
   ChipScheme,
   CheckboxScheme,
+  TableScheme
 }

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

@@ -0,0 +1,56 @@
+const darkColors = {
+  root: {
+    borderColor: '{surface.800}'
+  },
+  header: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.borderColor}',
+    color: '{content.color}',
+  },
+  headerCell: {
+    background: '{content.background}',
+    hoverBackground: '{content.hover.background}',
+    selectedBackground: '{highlight.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+    hoverColor: '{content.hover.color}',
+    selectedColor: '{highlight.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  row: {
+    stripedBackground: '{surface.950}',
+    background: '{content.background}',
+    hoverBackground: '{content.hover.background}',
+    selectedBackground: '{highlight.background}',
+    color: '{content.color}',
+    hoverColor: '{content.hover.color}',
+    selectedColor: '{highlight.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  bodyCell: {
+    borderColor: '{datatable.border.color}',
+    selectedBorderColor: '{primary.900}'
+  },
+  footerCell: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+  },
+  footer: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+  },
+  sortIcon: {
+    color: '{text.muted.color}',
+    hoverColor: '{text.hover.muted.color}',
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,56 @@
+const lightColors = {
+  root: {
+    borderColor: '{content.border.color}'
+  },
+  header: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.borderColor}',
+    color: '{content.color}',
+  },
+  headerCell: {
+    background: '{content.background}',
+    hoverBackground: '{content.hover.background}',
+    selectedBackground: '{highlight.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+    hoverColor: '{content.hover.color}',
+    selectedColor: '{highlight.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  row: {
+    stripedBackground: '{surface.50}',
+    background: '{content.background}',
+    hoverBackground: '{content.hover.background}',
+    selectedBackground: '{highlight.background}',
+    color: '{content.color}',
+    hoverColor: '{content.hover.color}',
+    selectedColor: '{highlight.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  bodyCell: {
+    borderColor: '{datatable.border.color}',
+    selectedBorderColor: '{primary.100}'
+  },
+  footerCell: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+  },
+  footer: {
+    background: '{content.background}',
+    borderColor: '{datatable.border.color}',
+    color: '{content.color}',
+  },
+  sortIcon: {
+    color: '{text.muted.color}',
+    hoverColor: '{text.hover.muted.color}',
+  }
+}
+
+export default lightColors

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

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

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

@@ -0,0 +1,76 @@
+const sizes = {
+  root: {
+    transitionDuration: '{transition.duration}'
+  },
+  header: {
+    borderWidth: '0 0 1px 0',
+    padding: '0.75rem 1rem',
+    sm: {
+      padding: '0.375rem 0.5rem'
+    },
+    lg: {
+      padding: '1rem 1.25rem'
+    }
+  },
+  headerCell: {
+    gap: '0.5rem',
+    padding: '0.75rem 1rem',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '-1px',
+    },
+    sm: {
+      padding: '0.375rem 0.5rem'
+    },
+    lg: {
+      padding: '1rem 1.25rem'
+    }
+  },
+  columnWeight: {
+    fontWeight: '600'
+  },
+  row: {
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '-1px',
+    }
+  },
+  bodyCell: {
+    padding: '0.75rem 1rem',
+    sm: {
+      padding: '0.375rem 0.5rem'
+    },
+    lg: {
+      padding: '1rem 1.25rem'
+    }
+  },
+  footerCell: {
+    padding: '0.75rem 1rem',
+    sm: {
+      padding: '0.375rem 0.5rem'
+    },
+    lg: {
+      padding: '1rem 1.25rem'
+    }
+  },
+  columnFooter: {
+    fontWeight: '600'
+  },
+  footer: {
+    borderWidth: '0 0 1px 0',
+    padding: '0.75rem 1rem',
+    sm: {
+      padding: '0.375rem 0.5rem'
+    },
+    lg: {
+      padding: '1rem 1.25rem'
+    }
+  },
+  sortIcon: {
+    size: '0.875rem'
+  }
+}
+
+export default sizes

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,16 @@
+export default {
+  surface: {
+    0: '#ffffff',
+    50: '{zinc.50}',
+    100: '{zinc.100}',
+    200: '{zinc.200}',
+    300: '{zinc.300}',
+    400: '{zinc.400}',
+    500: '{zinc.500}',
+    600: '{zinc.600}',
+    700: '{zinc.700}',
+    800: '{zinc.800}',
+    900: '{zinc.900}',
+    950: '{zinc.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,16 @@
+export default {
+  surface: {
+    0: '#ffffff',
+    50: '{slate.50}',
+    100: '{slate.100}',
+    200: '{slate.200}',
+    300: '{slate.300}',
+    400: '{slate.400}',
+    500: '{slate.500}',
+    600: '{slate.600}',
+    700: '{slate.700}',
+    800: '{slate.800}',
+    900: '{slate.900}',
+    950: '{slate.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)'
+  },
+}