@webitel/styleguide 24.12.44 → 24.12.46

package/package.json

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

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/chip/colors/dark/index.ts

@@ -0,0 +1,46 @@
+const darkColors = {
+  background: '{surface.100}',
+  color: '{surface.800}',
+  /**
+   * @author Yehor Hlukhov
+   * 
+   * referred to Evgeniy Trahtenberg
+   * need to add colors for main
+   * */
+  main: {
+    background: '{red.400}',
+    color: '{red.50}'
+  },
+  primary: {
+    background: '{primary.color}',
+    color: '{primary.foreground}'
+  },
+  secondary: {
+    background: '{secondary.color}',
+    color: '{secondary.foreground}'
+  },
+  success: {
+    background: '{success.color}',
+    color: '{success.foreground}'
+  },
+  warning: {
+    background: '{warn.color}',
+    color: '{warn.foreground}'
+  },
+  error: {
+    background: '{error.color}',
+    color: '{error.foreground}'
+  },
+  transfer: {
+    background: '{transfer.color}',
+    color: '{transfer.foreground}'
+  },
+  removeIcon: {
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    }
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,46 @@
+const lightColors = {
+  background: '{surface.100}',
+  color: '{surface.800}',
+  /**
+   * @author Yehor Hlukhov
+   * 
+   * referred to Evgeniy Trahtenberg
+   * need to add colors for main
+   * */
+  main: {
+    background: '{red.400}',
+    color: '{red.50}'
+  },
+  primary: {
+    background: '{primary.color}',
+    color: '{primary.foreground}'
+  },
+  secondary: {
+    background: '{secondary.color}',
+    color: '{secondary.foreground}'
+  },
+  success: {
+    background: '{success.color}',
+    color: '{success.foreground}'
+  },
+  warning: {
+    background: '{warn.color}',
+    color: '{warn.foreground}'
+  },
+  error: {
+    background: '{error.color}',
+    color: '{error.foreground}'
+  },
+  transfer: {
+    background: '{transfer.color}',
+    color: '{transfer.foreground}'
+  },
+  removeIcon: {
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    }
+  }
+}
+
+export default lightColors

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

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

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

@@ -0,0 +1,17 @@
+const sizes = {
+  borderRadius: '16px',
+  paddingX: '0.75rem',
+  paddingY: '0.5rem',
+  gap: '0.5rem',
+  transitionDuration: '{transition.duration}',
+  removeIcon: {
+    size: '1rem',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  }
+}
+
+export default sizes

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

@@ -4,6 +4,8 @@ import PopoverScheme from './popover';
 import TooltipScheme from './tooltip';
 import MenubarScheme from './menubar';
 import ToolbarScheme from './toolbar';
+import ChipScheme from "./chip";
+import CheckboxScheme from "./checkbox";
 
 export {
   AvatarScheme,
@@ -12,4 +14,6 @@ export {
   TooltipScheme,
   MenubarScheme,
   ToolbarScheme,
+  ChipScheme,
+  CheckboxScheme,
 }