npm - @webitel/styleguide - Versions diffs - 24.12.26 → 24.12.27 - Mend

@webitel/styleguide 24.12.26 → 24.12.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.26",
+  "version": "24.12.27",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",
@@ -14,7 +14,9 @@
     "./supervisor": "./src/supervisor/main.scss",
     "./workspaces": "./src/workspaces/main.scss",
     "./wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
-    "./fonts": "./src/lib/styleguide/fonts/_fonts.scss"
+    "./fonts": "./src/lib/styleguide/fonts/_fonts.scss",
+    "./component-schemes": "./src/lib/primevue/components/index.js",
+    "./semantic": "./src/lib/primevue/semantic/color-scheme/index.js"
   },
   "files": [
     "src/"

package/src/lib/primevue/components/button/colors/dark/index.js ADDED Viewed

@@ -0,0 +1,287 @@
+const darkColors = {
+  root: {
+    primary: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none'
+      }
+    },
+    secondary: {
+      background: '{surface.800}',
+      hoverBackground: '{surface.700}',
+      activeBackground: '{surface.600}',
+      borderColor: '{surface.800}',
+      hoverBorderColor: '{surface.700}',
+      activeBorderColor: '{surface.600}',
+      color: '{surface.300}',
+      hoverColor: '{surface.200}',
+      activeColor: '{surface.100}',
+      focusRing: {
+        color: '{surface.300}',
+        shadow: 'none'
+      }
+    },
+    info: {
+      background: '{sky.400}',
+      hoverBackground: '{sky.300}',
+      activeBackground: '{sky.200}',
+      borderColor: '{sky.400}',
+      hoverBorderColor: '{sky.300}',
+      activeBorderColor: '{sky.200}',
+      color: '{sky.950}',
+      hoverColor: '{sky.950}',
+      activeColor: '{sky.950}',
+      focusRing: {
+        color: '{sky.400}',
+        shadow: 'none'
+      }
+    },
+    success: {
+      background: '{green.400}',
+      hoverBackground: '{green.300}',
+      activeBackground: '{green.200}',
+      borderColor: '{green.400}',
+      hoverBorderColor: '{green.300}',
+      activeBorderColor: '{green.200}',
+      color: '{green.950}',
+      hoverColor: '{green.950}',
+      activeColor: '{green.950}',
+      focusRing: {
+        color: '{green.400}',
+        shadow: 'none'
+      }
+    },
+    warn: {
+      background: '{orange.400}',
+      hoverBackground: '{orange.300}',
+      activeBackground: '{orange.200}',
+      borderColor: '{orange.400}',
+      hoverBorderColor: '{orange.300}',
+      activeBorderColor: '{orange.200}',
+      color: '{orange.950}',
+      hoverColor: '{orange.950}',
+      activeColor: '{orange.950}',
+      focusRing: {
+        color: '{orange.400}',
+        shadow: 'none'
+      }
+    },
+    help: {
+      background: '{purple.400}',
+      hoverBackground: '{purple.300}',
+      activeBackground: '{purple.200}',
+      borderColor: '{purple.400}',
+      hoverBorderColor: '{purple.300}',
+      activeBorderColor: '{purple.200}',
+      color: '{purple.950}',
+      hoverColor: '{purple.950}',
+      activeColor: '{purple.950}',
+      focusRing: {
+        color: '{purple.400}',
+        shadow: 'none'
+      }
+    },
+    danger: {
+      background: '{red.400}',
+      hoverBackground: '{red.300}',
+      activeBackground: '{red.200}',
+      borderColor: '{red.400}',
+      hoverBorderColor: '{red.300}',
+      activeBorderColor: '{red.200}',
+      color: '{red.950}',
+      hoverColor: '{red.950}',
+      activeColor: '{red.950}',
+      focusRing: {
+        color: '{red.400}',
+        shadow: 'none'
+      }
+    },
+    contrast: {
+      background: '{surface.0}',
+      hoverBackground: '{surface.100}',
+      activeBackground: '{surface.200}',
+      borderColor: '{surface.0}',
+      hoverBorderColor: '{surface.100}',
+      activeBorderColor: '{surface.200}',
+      color: '{surface.950}',
+      hoverColor: '{surface.950}',
+      activeColor: '{surface.950}',
+      focusRing: {
+        color: '{surface.0}',
+        shadow: 'none'
+      }
+    },
+    /**
+     * TODO @Evgeniy Trahtenberg
+     * need to refactor transfer, error and job colors
+     * */
+    transfer: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none'
+      }
+    },
+    error: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none'
+      }
+    },
+    job: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none'
+      }
+    },
+    disabled: {
+      color: '{grey.darken.1}',
+      background: '{dp-surface-color.16}',
+    },
+  },
+  outlined: {
+    primary: {
+      hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
+      borderColor: '{primary.700}',
+      color: '{primary.color}'
+    },
+    secondary: {
+      hoverBackground: 'rgba(255,255,255,0.04)',
+      activeBackground: 'rgba(255,255,255,0.16)',
+      borderColor: '{surface.700}',
+      color: '{surface.400}'
+    },
+    success: {
+      hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
+      borderColor: '{green.700}',
+      color: '{green.400}'
+    },
+    info: {
+      hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
+      borderColor: '{sky.700}',
+      color: '{sky.400}'
+    },
+    warn: {
+      hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
+      borderColor: '{orange.700}',
+      color: '{orange.400}'
+    },
+    help: {
+      hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
+      borderColor: '{purple.700}',
+      color: '{purple.400}'
+    },
+    danger: {
+      hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
+      borderColor: '{red.700}',
+      color: '{red.400}'
+    },
+    contrast: {
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      borderColor: '{surface.500}',
+      color: '{surface.0}'
+    },
+    plain: {
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      borderColor: '{surface.600}',
+      color: '{surface.0}'
+    }
+  },
+  text: {
+    primary: {
+      hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
+      color: '{primary.color}'
+    },
+    secondary: {
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      color: '{surface.400}'
+    },
+    success: {
+      hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
+      color: '{green.400}'
+    },
+    info: {
+      hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
+      color: '{sky.400}'
+    },
+    warn: {
+      hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
+      color: '{orange.400}'
+    },
+    help: {
+      hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
+      color: '{purple.400}'
+    },
+    danger: {
+      hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
+      activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
+      color: '{red.400}'
+    },
+    contrast: {
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      color: '{surface.0}'
+    },
+    plain: {
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      color: '{surface.0}'
+    }
+  },
+  link: {
+    color: '{primary.color}',
+    hoverColor: '{primary.color}',
+    activeColor: '{primary.color}'
+  }
+}
+export default darkColors

package/src/lib/primevue/components/button/colors/index.js ADDED Viewed

@@ -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/button/colors/light/index.js ADDED Viewed

@@ -0,0 +1,287 @@
+const lightColors = {
+  root: {
+    primary: {
+      background: '{primary-color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none',
+      },
+    },
+    secondary: {
+      background: '{surface.100}',
+      hoverBackground: '{surface.200}',
+      activeBackground: '{surface.300}',
+      borderColor: '{surface.100}',
+      hoverBorderColor: '{surface.200}',
+      activeBorderColor: '{surface.300}',
+      color: '{surface.600}',
+      hoverColor: '{surface.700}',
+      activeColor: '{surface.800}',
+      focusRing: {
+        color: '{surface.600}',
+        shadow: 'none',
+      },
+    },
+    info: {
+      background: '{sky.500}',
+      hoverBackground: '{sky.400}',
+      activeBackground: '{sky.300}',
+      borderColor: '{sky.500}',
+      hoverBorderColor: '{sky.400}',
+      activeBorderColor: '{sky.300}',
+      color: '#ffffff',
+      hoverColor: '#ffffff',
+      activeColor: '#ffffff',
+      focusRing: {
+        color: '{sky.500}',
+        shadow: 'none',
+      },
+    },
+    success: {
+      background: '{success-color}',
+      hoverBackground: '{success-hover-color}',
+      activeBackground: '{success-hover-color}',
+      borderColor: '{green.500}',
+      hoverBorderColor: '{green.400}',
+      activeBorderColor: '{green.300}',
+      color: '#ffffff',
+      hoverColor: '#ffffff',
+      activeColor: '#ffffff',
+      focusRing: {
+        color: '{green.500}',
+        shadow: 'none',
+      },
+    },
+    warn: {
+      background: '{orange.500}',
+      hoverBackground: '{orange.400}',
+      activeBackground: '{orange.300}',
+      borderColor: '{orange.500}',
+      hoverBorderColor: '{orange.400}',
+      activeBorderColor: '{orange.300}',
+      color: '#ffffff',
+      hoverColor: '#ffffff',
+      activeColor: '#ffffff',
+      focusRing: {
+        color: '{orange.500}',
+        shadow: 'none',
+      },
+    },
+    help: {
+      background: '{purple.500}',
+      hoverBackground: '{purple.400}',
+      activeBackground: '{purple.300}',
+      borderColor: '{purple.500}',
+      hoverBorderColor: '{purple.400}',
+      activeBorderColor: '{purple.300}',
+      color: '#ffffff',
+      hoverColor: '#ffffff',
+      activeColor: '#ffffff',
+      focusRing: {
+        color: '{purple.500}',
+        shadow: 'none',
+      },
+    },
+    danger: {
+      background: '{red.500}',
+      hoverBackground: '{red.400}',
+      activeBackground: '{red.300}',
+      borderColor: '{red.500}',
+      hoverBorderColor: '{red.400}',
+      activeBorderColor: '{red.300}',
+      color: '#ffffff',
+      hoverColor: '#ffffff',
+      activeColor: '#ffffff',
+      focusRing: {
+        color: '{red.500}',
+        shadow: 'none',
+      },
+    },
+    contrast: {
+      background: '{surface.950}',
+      hoverBackground: '{surface.800}',
+      activeBackground: '{surface.700}',
+      borderColor: '{surface.950}',
+      hoverBorderColor: '{surface.800}',
+      activeBorderColor: '{surface.700}',
+      color: '{surface.0}',
+      hoverColor: '{surface.0}',
+      activeColor: '{surface.0}',
+      focusRing: {
+        color: '{surface.950}',
+        shadow: 'none',
+      },
+    },
+    /**
+     * TODO @Evgeniy Trahtenberg
+     * need to refactor transfer, error and job colors
+     * */
+    transfer: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none',
+      },
+    },
+    error: {
+      background: '{error-color}',
+      hoverBackground: '{error-hover-color}',
+      activeBackground: '{error-hover-color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none',
+      },
+    },
+    job: {
+      background: '{primary.color}',
+      hoverBackground: '{primary.hover.color}',
+      activeBackground: '{primary.active.color}',
+      borderColor: '{primary.color}',
+      hoverBorderColor: '{primary.hover.color}',
+      activeBorderColor: '{primary.active.color}',
+      color: '{primary.contrast.color}',
+      hoverColor: '{primary.contrast.color}',
+      activeColor: '{primary.contrast.color}',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none',
+      },
+    },
+    disabled: {
+      color: '{grey.darken.1}',
+      background: '{dp-surface-color.16}',
+    },
+  },
+  outlined: {
+    primary: {
+      hoverBackground: '{primary.50}',
+      activeBackground: '{primary.100}',
+      borderColor: '{primary.color}',
+      color: '{primary.color}',
+    },
+    secondary: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.600}',
+      color: '{surface.600}',
+    },
+    success: {
+      hoverBackground: '{green.50}',
+      activeBackground: '{green.100}',
+      borderColor: '{green.500}',
+      color: '{green.500}',
+    },
+    info: {
+      hoverBackground: '{sky.50}',
+      activeBackground: '{sky.100}',
+      borderColor: '{sky.500}',
+      color: '{sky.500}',
+    },
+    warn: {
+      hoverBackground: '{orange.50}',
+      activeBackground: '{orange.100}',
+      borderColor: '{orange.500}',
+      color: '{orange.500}',
+    },
+    help: {
+      hoverBackground: '{purple.50}',
+      activeBackground: '{purple.100}',
+      borderColor: '{purple.500}',
+      color: '{purple.500}',
+    },
+    danger: {
+      hoverBackground: '{red.50}',
+      activeBackground: '{red.100}',
+      borderColor: '{red.500}',
+      color: '{red.500}',
+    },
+    contrast: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.950}',
+      color: '{surface.950}',
+    },
+    plain: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      borderColor: '{surface.900}',
+      color: '{surface.900}',
+    },
+  },
+  text: {
+    primary: {
+      hoverBackground: '{primary.50}',
+      activeBackground: '{primary.100}',
+      color: '{primary.color}',
+    },
+    secondary: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.600}',
+    },
+    success: {
+      hoverBackground: '{green.50}',
+      activeBackground: '{green.100}',
+      color: '{green.500}',
+    },
+    info: {
+      hoverBackground: '{sky.50}',
+      activeBackground: '{sky.100}',
+      color: '{sky.500}',
+    },
+    warn: {
+      hoverBackground: '{orange.50}',
+      activeBackground: '{orange.100}',
+      color: '{orange.500}',
+    },
+    help: {
+      hoverBackground: '{purple.50}',
+      activeBackground: '{purple.100}',
+      color: '{purple.500}',
+    },
+    danger: {
+      hoverBackground: '{red.50}',
+      activeBackground: '{red.100}',
+      color: '{red.500}',
+    },
+    contrast: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.950}',
+    },
+    plain: {
+      hoverBackground: '{surface.50}',
+      activeBackground: '{surface.100}',
+      color: '{surface.900}',
+    },
+  },
+  link: {
+    color: '{primary.color}',
+    hoverColor: '{primary.color}',
+    activeColor: '{primary.color}',
+  },
+};
+export default lightColors;

package/src/lib/primevue/components/button/index.js ADDED Viewed

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

package/src/lib/primevue/components/button/sizes/index.js ADDED Viewed

@@ -0,0 +1,33 @@
+const sizes = {
+  borderRadius: '{form.field.border.radius}',
+  roundedBorderRadius: '2rem',
+  gap: '0.5rem',
+  paddingX: '1rem',
+  paddingY: '0.625rem',
+  iconOnlyWidth: '3rem',
+  sm: {
+    fontSize: '{form.field.sm.font.size}',
+    paddingX: '{form.field.sm.padding.x}',
+    paddingY: '{form.field.sm.padding.y}',
+    iconOnlyWidth: '2.5rem'
+  },
+  lg: {
+    fontSize: '{form.field.lg.font.size}',
+    paddingX: '{form.field.lg.padding.x}',
+    paddingY: '{form.field.lg.padding.y}',
+    iconOnlyWidth: '3.5rem'
+  },
+  label: {
+    fontWeight: '500'
+  },
+  raisedShadow: '0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)',
+  focusRing: {
+    width: '{focus.ring.width}',
+    style: '{focus.ring.style}',
+    offset: '{focus.ring.offset}'
+  },
+  badgeSize: '1rem',
+  transitionDuration: '{form.field.transition.duration}'
+}
+export default sizes

package/src/lib/primevue/components/index.js ADDED Viewed

@@ -0,0 +1,9 @@
+import ButtonScheme from './button';
+import PopoverScheme from './popover';
+import TooltipScheme from './tooltip';
+export {
+  ButtonScheme,
+  PopoverScheme,
+  TooltipScheme,
+}

package/src/lib/primevue/components/popover/colors/dark/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+const darkColors = {
+  background: '{overlay.popover.background}',
+  borderColor: '{overlay.popover.border.color}',
+  color: '{overlay.popover.color}',
+  borderRadius: '{overlay.popover.border.radius}',
+  shadow: '{overlay.popover.shadow}',
+  gutter: '10px',
+  arrowOffset: '1.25rem'
+}
+export default darkColors

package/src/lib/primevue/components/popover/colors/index.js ADDED Viewed

@@ -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/popover/colors/light/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+const lightColors = {
+  background: '{overlay.popover.background}',
+  borderColor: '{overlay.popover.border.color}',
+  color: '{overlay.popover.color}',
+  borderRadius: '{overlay.popover.border.radius}',
+  shadow: '{overlay.popover.shadow}',
+  gutter: '10px',
+  arrowOffset: '1.25rem'
+}
+export default lightColors