@webitel/styleguide 26.2.2 → 26.2.3

package/package.json

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

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

@@ -15,6 +15,11 @@ import TableScheme from "./table";
 import TextareaScheme from "./textarea";
 import ToolbarScheme from './toolbar';
 import TooltipScheme from './tooltip';
+import InputNumberScheme from "./input-number";
+import InputTextScheme from "./input-text";
+import PasswordScheme from "./password";
+import InputGroupScheme from "./input-group";
+import MessageScheme from "./message";
 
 export {
   AvatarScheme,
@@ -34,4 +39,9 @@ export {
   BreadcrumbScheme,
   RadioScheme,
   GalleriaScheme,
+  InputNumberScheme,
+  InputTextScheme,
+  PasswordScheme,
+  InputGroupScheme,
+  MessageScheme,
 }

package/src/lib/primevue/components/input-group/colors/dark/index.ts

@@ -0,0 +1,9 @@
+const darkColors = {
+  addon: {
+    background: '{form.field.background}',
+    borderColor: '{form.field.border.color}',
+    color: '{form.field.icon.color}'
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,9 @@
+const lightColors = {
+  addon: {
+    background: '{form.field.background}',
+    borderColor: '{form.field.border.color}',
+    color: '{form.field.icon.color}'
+  }
+}
+
+export default lightColors

package/src/lib/primevue/components/input-group/index.ts

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

package/src/lib/primevue/components/input-group/sizes/index.ts

@@ -0,0 +1,9 @@
+const sizes = {
+  addon: {
+    borderRadius: '{form.field.border.radius}',
+    padding: '0.5rem',
+    minWidth: '2.5rem'
+  }
+}
+
+export default sizes

package/src/lib/primevue/components/input-number/colors/dark/index.ts

@@ -0,0 +1,15 @@
+const darkColors = {
+  button: {
+    background: 'transparent',
+    hoverBackground: '{surface.700}',
+    activeBackground: '{surface.750}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    activeBorderColor: '{form.field.border.color}',
+    color: '{surface.400}',
+    hoverColor: '{surface.300}',
+    activeColor: '{surface.200}'
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,15 @@
+const lightColors = {
+  button: {
+    background: 'transparent',
+    hoverBackground: '{surface.50}',
+    activeBackground: '{surface.100}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    activeBorderColor: '{form.field.border.color}',
+    color: '{surface.400}',
+    hoverColor: '{surface.500}',
+    activeColor: '{surface.600}'
+  }
+}
+
+export default lightColors

package/src/lib/primevue/components/input-number/index.ts

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

package/src/lib/primevue/components/input-number/sizes/index.ts

@@ -0,0 +1,12 @@
+const sizes = {
+  root: {
+    transitionDuration: '{transition.duration}'
+  },
+  button: {
+    width: '2rem',
+    borderRadius: '{form.field.border.radius}',
+    verticalPadding: '{form.field.padding.y}'
+  }
+}
+
+export default sizes

package/src/lib/primevue/components/input-text/colors/dark/index.ts

@@ -0,0 +1,24 @@
+const darkColors = {
+  root: {
+    background: '{form.field.background}',
+    disabledBackground: '{form.field.disabled.background}',
+    filledBackground: '{form.field.filled.background}',
+    filledHoverBackground: '{form.field.filled.hover.background}',
+    filledFocusBackground: '{form.field.filled.focus.background}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    focusBorderColor: '{form.field.focus.border.color}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    color: '{form.field.color}',
+    disabledColor: '{form.field.disabled.color}',
+    placeholderColor: '{form.field.placeholder.color}',
+    invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{form.field.focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    }
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,24 @@
+const lightColors = {
+  root: {
+    background: '{form.field.background}',
+    disabledBackground: '{form.field.disabled.background}',
+    filledBackground: '{form.field.filled.background}',
+    filledHoverBackground: '{form.field.filled.hover.background}',
+    filledFocusBackground: '{form.field.filled.focus.background}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    focusBorderColor: '{form.field.focus.border.color}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    color: '{form.field.color}',
+    disabledColor: '{form.field.disabled.color}',
+    placeholderColor: '{form.field.placeholder.color}',
+    invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{form.field.focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    }
+  }
+}
+
+export default lightColors

package/src/lib/primevue/components/input-text/index.ts

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

package/src/lib/primevue/components/input-text/sizes/index.ts

@@ -0,0 +1,25 @@
+const sizes = {
+  root: {
+    paddingX: '{form.field.padding.x}',
+    paddingY: '{form.field.padding.y}',
+    borderRadius: '{form.field.border.radius}',
+    focusRing: {
+      width: '{form.field.focus.ring.width}',
+      style: '{form.field.focus.ring.style}',
+      offset: '{form.field.focus.ring.offset}'
+    },
+    transitionDuration: '{form.field.transition.duration}',
+    sm: {
+      fontSize: '{form.field.sm.font.size}',
+      paddingX: '{form.field.sm.padding.x}',
+      paddingY: '{form.field.sm.padding.y}'
+    },
+    lg: {
+      fontSize: '{form.field.lg.font.size}',
+      paddingX: '{form.field.lg.padding.x}',
+      paddingY: '{form.field.lg.padding.y}'
+    }
+  }
+}
+
+export default sizes

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

@@ -0,0 +1,142 @@
+const darkColors = {
+  info: {
+    background: '{info.highlightColor}',
+    borderColor: '{info.color}',
+    color: '{info.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{info.foreground}',
+      focusRing: {
+        color: '{info.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{info.color}',
+      borderColor: '{info.color}',
+      closeButton: {
+        hoverBackground: '{info.foreground}',
+      }
+    },
+    simple: {
+      color: '{info.color}'
+    }
+  },
+  success: {
+    background: '{success.highlightColor}',
+    borderColor: '{success.color}',
+    color: '{success.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{success.foreground}',
+      focusRing: {
+        color: '{success.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{success.color}',
+      borderColor: '{success.color}',
+      closeButton: {
+        hoverBackground: '{success.foreground}',
+      }
+    },
+    simple: {
+      color: '{success.color}'
+    }
+  },
+  warn: {
+    background: '{warn.highlightColor}',
+    borderColor: '{warn.color}',
+    color: '{warn.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{warn.foreground}',
+      focusRing: {
+        color: '{warn.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{warn.color}',
+      borderColor: '{warn.color}',
+      closeButton: {
+        hoverBackground: '{warn.foreground}',
+      }
+    },
+    simple: {
+      color: '{warn.color}'
+    }
+  },
+  error: {
+    background: '{error.highlightColor}',
+    borderColor: '{error.color}',
+    color: '{error.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{error.foreground}',
+      focusRing: {
+        color: '{error.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{error.color}',
+      borderColor: '{error.color}',
+      closeButton: {
+        hoverBackground: '{error.foreground}',
+      }
+    },
+    simple: {
+      color: '{error.color}'
+    }
+  },
+  secondary: {
+    background: '{secondary.highlightColor}',
+    borderColor: '{secondary.color}',
+    color: '{secondary.foreground}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{secondary.color}',
+      focusRing: {
+        color: '{secondary.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{secondary.foreground}',
+      borderColor: '{secondary.color}',
+      closeButton: {
+        hoverBackground: '{secondary.highlightColor}',
+      }
+    },
+    simple: {
+      color: '{secondary.foreground}'
+    }
+  },
+  contrast: {
+    background: '{surface.0}',
+    borderColor: '{surface.100}',
+    color: '{surface.950}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{surface.100}',
+      focusRing: {
+        color: '{surface.950}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{surface.0}',
+      borderColor: '{surface.0}',
+      closeButton: {
+        hoverBackground: '{surface.850}',
+      }
+    },
+    simple: {
+      color: '{surface.0}'
+    }
+  }
+};
+
+export default darkColors;

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

@@ -0,0 +1,9 @@
+import lightColors from './light';
+import darkColors from './dark';
+
+const colorScheme = {
+  light: lightColors,
+  dark: darkColors,
+};
+
+export default colorScheme;

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

@@ -0,0 +1,142 @@
+const lightColors = {
+  info: {
+    background: '{info.highlightColor}',
+    borderColor: '{info.color}',
+    color: '{info.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{info.foreground}',
+      focusRing: {
+        color: '{info.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{info.color}',
+      borderColor: '{info.color}',
+      closeButton: {
+        hoverBackground: '{info.foreground}',
+      }
+    },
+    simple: {
+      color: '{info.color}'
+    }
+  },
+  success: {
+    background: '{success.highlightColor}',
+    borderColor: '{success.color}',
+    color: '{success.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{success.foreground}',
+      focusRing: {
+        color: '{success.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{success.color}',
+      borderColor: '{success.color}',
+      closeButton: {
+        hoverBackground: '{success.foreground}',
+      }
+    },
+    simple: {
+      color: '{success.color}'
+    }
+  },
+  warn: {
+    background: '{warn.highlightColor}',
+    borderColor: '{warn.color}',
+    color: '{warn.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{warn.foreground}',
+      focusRing: {
+        color: '{warn.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{warn.color}',
+      borderColor: '{warn.color}',
+      closeButton: {
+        hoverBackground: '{warn.foreground}',
+      }
+    },
+    simple: {
+      color: '{warn.color}'
+    }
+  },
+  error: {
+    background: '{error.highlightColor}',
+    borderColor: '{error.color}',
+    color: '{error.color}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{error.foreground}',
+      focusRing: {
+        color: '{error.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{error.color}',
+      borderColor: '{error.color}',
+      closeButton: {
+        hoverBackground: '{error.foreground}',
+      }
+    },
+    simple: {
+      color: '{error.color}'
+    }
+  },
+  secondary: {
+    background: '{secondary.highlightColor}',
+    borderColor: '{secondary.color}',
+    color: '{secondary.foreground}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{secondary.color}',
+      focusRing: {
+        color: '{secondary.color}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{secondary.foreground}',
+      borderColor: '{secondary.color}',
+      closeButton: {
+        hoverBackground: '{secondary.highlightColor}',
+      }
+    },
+    simple: {
+      color: '{secondary.foreground}'
+    }
+  },
+  contrast: {
+    background: '{surface.850}',
+    borderColor: '{surface.950}',
+    color: '{surface.50}',
+    shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+    closeButton: {
+      hoverBackground: '{surface.800}',
+      focusRing: {
+        color: '{surface.50}',
+        shadow: 'none'
+      }
+    },
+    outlined: {
+      color: '{surface.950}',
+      borderColor: '{surface.950}',
+      closeButton: {
+        hoverBackground: '{surface.50}',
+      }
+    },
+    simple: {
+      color: '{surface.950}'
+    }
+  }
+};
+
+export default lightColors;

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

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

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

@@ -0,0 +1,67 @@
+const sizes = {
+  root: {
+    borderRadius: '{content.border.radius}',
+    borderWidth: '1px',
+    transitionDuration: '{transition.duration}'
+  },
+  content: {
+    padding: '0.5rem 0.75rem',
+    gap: '0.5rem',
+    sm: {
+      padding: '0.375rem 0.625rem'
+    },
+    lg: {
+      padding: '0.625rem 0.875rem'
+    }
+  },
+  text: {
+    fontSize: '1rem',
+    fontWeight: '500',
+    sm: {
+      fontSize: '0.75rem'
+    },
+    lg: {
+      fontSize: '1.125rem'
+    }
+  },
+  icon: {
+    size: '1.5rem',
+    sm: {
+      size: '1rem'
+    },
+    lg: {
+      size: '2rem'
+    }
+  },
+  closeButton: {
+    width: '1.75rem',
+    height: '1.75rem',
+    borderRadius: '50%',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}'
+    }
+  },
+  closeIcon: {
+    size: '1rem',
+    sm: {
+      size: '0.875rem'
+    },
+    lg: {
+      size: '1.125rem'
+    }
+  },
+  outlined: {
+    root: {
+      borderWidth: '1px'
+    }
+  },
+  simple: {
+    content: {
+      padding: '0.25rem 0.5rem',
+    }
+  }
+};
+
+export default sizes;

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

@@ -0,0 +1,21 @@
+const darkColors = {
+  meter: {
+    background: '{content.border.color}'
+  },
+  icon: {
+    color: '{form.field.icon.color}'
+  },
+  overlay: {
+    background: '{overlay.popover.background}',
+    borderColor: '{overlay.popover.border.color}',
+    color: '{overlay.popover.color}',
+    shadow: '{overlay.popover.shadow}'
+  },
+  strength: {
+    weakBackground: '{error.color}',
+    mediumBackground: '{warn.color}',
+    strongBackground: '{success.color}'
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,21 @@
+const lightColors = {
+  meter: {
+    background: '{content.border.color}'
+  },
+  icon: {
+    color: '{form.field.icon.color}'
+  },
+  overlay: {
+    background: '{overlay.popover.background}',
+    borderColor: '{overlay.popover.border.color}',
+    color: '{overlay.popover.color}',
+    shadow: '{overlay.popover.shadow}'
+  },
+  strength: {
+    weakBackground: '{error.color}',
+    mediumBackground: '{warn.color}',
+    strongBackground: '{success.color}'
+  }
+}
+
+export default lightColors

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

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

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

@@ -0,0 +1,15 @@
+const sizes = {
+  meter: {
+    borderRadius: '{content.border.radius}',
+    height: '0.75rem'
+  },
+  overlay: {
+    borderRadius: '{overlay.popover.border.radius}',
+    padding: '{overlay.popover.padding}'
+  },
+  content: {
+    gap: '0.5rem'
+  }
+}
+
+export default sizes

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

@@ -1,23 +1,23 @@
 export default {
   formField: {
-    background: '{content.background}',
+    background: '{transparent}',
     disabledBackground: '{surface.750}',
     filledBackground: '{surface.800}',
     filledHoverBackground: '{surface.800}',
     filledFocusBackground: '{surface.800}',
-    borderColor: '{surface.600}',
-    hoverBorderColor: '{surface.500}',
+    borderColor: '{surface.450}',
+    hoverBorderColor: '{surface.250}',
     focusBorderColor: '{primary.color}',
     invalidBorderColor: '{error.color}',
     color: '{surface.0}',
     disabledColor: '{surface.400}',
     placeholderColor: '{surface.400}',
-    invalidPlaceholderColor: '{error.color}',
+    invalidPlaceholderColor: '{red.400}',
     floatLabelColor: '{surface.400}',
     floatLabelFocusColor: '{primary.color}',
     floatLabelActiveColor: '{surface.400}',
     floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
-    iconColor: '{text.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/light/index.ts

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