@webitel/styleguide 24.12.43 → 24.12.45

package/package.json

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

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

@@ -0,0 +1,21 @@
+export default {
+  root: {
+    background: '{content.border.color}',
+    color: '{content.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}',
+  }
+}

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

@@ -0,0 +1,21 @@
+export default {
+  root: {
+    background: '{content.border.color}',
+    color: '{content.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}',
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+const sizes = {
+  width: '2rem',
+  height: '2rem',
+  fontSize: '1rem',
+  borderRadius: '{content.border.radius}',
+
+  xs: {
+    width: '1rem',
+    height: '1rem',
+    fontSize: '0.5rem',
+  },
+  sm: {
+    width: '1.5rem',
+    height: '1.5rem',
+    fontSize: '0.75rem',
+  },
+  md: {
+    width: '2rem',
+    height: '2rem',
+    fontSize: '1rem',
+  },
+  lg: {
+    width: '3rem',
+    height: '3rem',
+    fontSize: '1.5rem',
+  },
+  xl: {
+    width: '4rem',
+    height: '4rem',
+    fontSize: '2rem',
+  },
+  '2xl': {
+    width: '5rem',
+    height: '5rem',
+    fontSize: '2.5rem',
+  },
+  '3xl': {
+    width: '6rem',
+    height: '6rem',
+    fontSize: '3rem',
+  },
+};
+
+export default sizes

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

@@ -0,0 +1,31 @@
+const darkColors = {
+  root: {
+    background: '{form.field.background}',
+    checkedBackground: '{primary.color}',
+    checkedHoverBackground: '{primary.hover.color}',
+    disabledBackground: '{form.field.disabled.background}',
+    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}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+        color: '{focus.ring.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}',
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,31 @@
+const lightColors = {
+  root: {
+    background: '{form.field.background}',
+    checkedBackground: '{primary.color}',
+    checkedHoverBackground: '{primary.hover.color}',
+    disabledBackground: '{form.field.disabled.background}',
+    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}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+        color: '{focus.ring.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}',
+  }
+}
+
+export default lightColors

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

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

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

@@ -0,0 +1,31 @@
+const sizes = {
+  root: {
+    borderRadius: '{border.radius.sm}',
+    width: '1.25rem',
+    height: '1.25rem',
+    sm: {
+      width: '1rem',
+      height: '1rem'
+    },
+    lg: {
+      width: '1.5rem',
+      height: '1.5rem'
+    },
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  icon: {
+    size: '0.875rem',
+    sm: {
+      size: '0.75rem'
+    },
+    lg: {
+      size: '1rem'
+    }
+  }
+}
+
+export default sizes

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

@@ -1,9 +1,17 @@
+import AvatarScheme from "./avatar";
 import ButtonScheme from './button';
 import PopoverScheme from './popover';
 import TooltipScheme from './tooltip';
+import MenubarScheme from './menubar';
+import ToolbarScheme from './toolbar';
+import CheckboxScheme from "./checkbox";
 
 export {
+  AvatarScheme,
   ButtonScheme,
   PopoverScheme,
   TooltipScheme,
+  MenubarScheme,
+  ToolbarScheme,
+  CheckboxScheme,
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
 const sizes = {
   maxWidth: '12.5rem',
-  gutter: '0.5rem',
+  gutter: '0.25rem',
   padding: '0.5rem 0.75rem',
-  borderRadius: '0.5rem',
+  borderRadius: '{overlay.popover.border.radius}',
   shadow: '{shadow.xs}',
 };