@webitel/styleguide 24.12.52 → 24.12.54

package/package.json

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

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

@@ -1,45 +1,52 @@
 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}'
+    background: '{amber.650}',
+    color: '{amber.950}',
+    iconColor: '{amber.900}',
+    iconHoverColor: '{amber.950}'
   },
   primary: {
     background: '{primary.color}',
-    color: '{primary.foreground}'
+    color: '{primary.foreground}',
+    iconColor: '{primary.foreground}',
+    iconHoverColor: '{primary.foregroundHover}'
   },
   secondary: {
     background: '{secondary.color}',
-    color: '{secondary.foreground}'
+    color: '{secondary.foreground}',
+    iconColor: '{secondary.foreground}',
+    iconHoverColor: '{secondary.foregroundHover}'
   },
   success: {
     background: '{success.color}',
-    color: '{success.foreground}'
+    color: '{success.foreground}',
+    iconColor: '{success.foreground}',
+    iconHoverColor: '{success.foregroundHover}'
   },
   warning: {
     background: '{warn.color}',
-    color: '{warn.foreground}'
+    color: '{warn.foreground}',
+    iconColor: '{warn.foreground}',
+    iconHoverColor: '{warn.foregroundHover}'
   },
   error: {
     background: '{error.color}',
-    color: '{error.foreground}'
+    color: '{error.foreground}',
+    iconColor: '{error.foreground}',
+    iconHoverColor: '{error.foregroundHover}'
   },
   transfer: {
     background: '{transfer.color}',
-    color: '{transfer.foreground}'
+    color: '{transfer.foreground}',
+    iconColor: '{transfer.foreground}',
+    iconHoverColor: '{transfer.foregroundHover}'
   },
   removeIcon: {
     focusRing: {
-      color: '{focus.ring.color}',
       shadow: '{form.field.focus.ring.shadow}'
-    }
+    },
   }
 }
 

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

@@ -1,45 +1,52 @@
 const lightColors = {
-  background: '{surface.100}',
+  background: '{surface.200}',
   color: '{surface.800}',
-  /**
-   * @author Yehor Hlukhov
-   * 
-   * referred to Evgeniy Trahtenberg
-   * need to add colors for main
-   * */
   main: {
-    background: '{red.400}',
-    color: '{red.50}'
+    background: '{amber.200}',
+    color: '{amber.950}',
+    iconColor: '{amber.800}',
+    iconHoverColor: '{amber.850}'
   },
   primary: {
     background: '{primary.color}',
-    color: '{primary.foreground}'
+    color: '{primary.foreground}',
+    iconColor: '{primary.foreground}',
+    iconHoverColor: '{primary.foregroundHover}'
   },
   secondary: {
     background: '{secondary.color}',
-    color: '{secondary.foreground}'
+    color: '{secondary.foreground}',
+    iconColor: '{secondary.foreground}',
+    iconHoverColor: '{secondary.foregroundHover}'
   },
   success: {
     background: '{success.color}',
-    color: '{success.foreground}'
+    color: '{success.foreground}',
+    iconColor: '{success.foreground}',
+    iconHoverColor: '{success.foregroundHover}'
   },
   warning: {
     background: '{warn.color}',
-    color: '{warn.foreground}'
+    color: '{warn.foreground}',
+    iconColor: '{warn.foreground}',
+    iconHoverColor: '{warn.foregroundHover}'
   },
   error: {
     background: '{error.color}',
-    color: '{error.foreground}'
+    color: '{error.foreground}',
+    iconColor: '{error.foreground}',
+    iconHoverColor: '{error.foregroundHover}'
   },
   transfer: {
     background: '{transfer.color}',
-    color: '{transfer.foreground}'
+    color: '{transfer.foreground}',
+    iconColor: '{transfer.foreground}',
+    iconHoverColor: '{transfer.foregroundHover}'
   },
   removeIcon: {
     focusRing: {
-      color: '{focus.ring.color}',
       shadow: '{form.field.focus.ring.shadow}'
-    }
+    },
   }
 }
 

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

@@ -1,7 +1,7 @@
 const sizes = {
   borderRadius: '16px',
-  paddingX: '0.75rem',
-  paddingY: '0.5rem',
+  paddingX: '0.5rem',
+  paddingY: '0.25rem',
   gap: '0.5rem',
   transitionDuration: '{transition.duration}',
   removeIcon: {

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

@@ -7,6 +7,7 @@ import ToolbarScheme from './toolbar';
 import ChipScheme from "./chip";
 import CheckboxScheme from "./checkbox";
 import TableScheme from "./table";
+import RadioScheme from "./radio";
 
 export {
   AvatarScheme,
@@ -17,5 +18,6 @@ export {
   ToolbarScheme,
   ChipScheme,
   CheckboxScheme,
-  TableScheme
+  TableScheme,
+  RadioScheme,
 }

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

@@ -0,0 +1,29 @@
+const darkColors = {
+  root: {
+    background: '{transparent}',
+    checkedBackground: '{surface.300}',
+    checkedHoverBackground: '{surface.200}',
+    disabledBackground: '{surface.650}',
+    filledBackground: '{form.field.filled.background}',
+    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-color}',
+      shadow: '{focus.ring.shadow}'
+    },
+  },
+  icon: {
+    checkedColor: '{surface.800}',
+    checkedHoverColor: '{surface.800}',
+    disabledColor: '{surface.500}',
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,29 @@
+const lightColors = {
+  root: {
+    background: '{transparent}',
+    checkedBackground: '{surface.700}',
+    checkedHoverBackground: '{surface.600}',
+    disabledBackground: '{surface.200}',
+    filledBackground: '{form.field.filled.background}',
+    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-color}',
+      shadow: '{focus.ring.shadow}'
+    },
+  },
+  icon: {
+    checkedColor: '{surface.0}',
+    checkedHoverColor: '{surface.0}',
+    disabledColor: '{surface.400}',
+  }
+}
+
+export default lightColors

package/src/lib/primevue/components/radio/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/radio/sizes/index.ts

@@ -0,0 +1,33 @@
+const sizes = {
+  root: {
+    width: '1.125rem',
+    height: '1.125rem',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    },
+    transitionDuration: '{form.field.transition.duration}',
+    sm: {
+        width: '1rem',
+        height: '1rem'
+    },
+    lg: {
+        width: '1.5rem',
+        height: '1.5rem'
+    },
+    wrapperWidth: '1.5rem',
+    wrapperHeight: '1.5rem',
+  },
+  icon: {
+    size: '0.5rem',
+    sm: {
+      size: '0.5rem'
+    },
+    lg: {
+        size: '1rem'
+    }
+  }
+}
+
+export default sizes