@webitel/styleguide 24.12.79 → 24.12.81

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.79",
+  "version": "24.12.81",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",
-    "./typography": "./src/lib/styleguide/typography/typography.scss",
+    "./typography": "./src/lib/styleguide/typography/_typography.scss",
+    "./_typography": "./src/lib/styleguide/typography/_typography.scss",
     "./scroll": "./src/lib/styleguide/scroll.scss",
-    "./viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/viewport-breakpoints.scss",
+    "./_scroll": "./src/lib/styleguide/scroll.scss",
+    "./viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
+    "./_viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
     "./auditor": "./src/auditor/main.scss",
+    "./_auditor": "./src/auditor/main.scss",
     "./client": "./src/client/main.scss",
+    "./_client": "./src/client/main.scss",
     "./crm": "./src/crm/main.scss",
+    "./_crm": "./src/crm/main.scss",
     "./history": "./src/history/main.scss",
+    "./_history": "./src/history/main.scss",
     "./supervisor": "./src/supervisor/main.scss",
+    "./_supervisor": "./src/supervisor/main.scss",
     "./workspaces": "./src/workspaces/main.scss",
+    "./_workspaces": "./src/workspaces/main.scss",
     "./wt-flow-diagram": "./src/wt-flow-diagram/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": {
       "import": "./src/lib/primevue/components/index.js"
     },

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

@@ -0,0 +1,71 @@
+const darkColors = {
+  root: {
+    borderColor: '{surface.850}'
+  },
+  activeImageContainer: {
+    background: '{black}'
+  },
+  navButton: {
+    background: '{button.secondary.background}',
+    hoverBackground: '{button.secondary.hoverBackground}',
+    color: '{button.secondary.color}',
+    hoverColor: '{button.secondary.hoverColor}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  thumbnailsContent: {
+    background: '{surface.850}'
+  },
+  thumbnailNavButton: {
+    hoverBackground: '{surface.800}',
+    color: '{button.secondary.color}',
+    hoverColor: '{button.secondary.hoverColor}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  caption: {
+    background: 'rgba(0, 0, 0, 0.5)',
+    color: '{surface.100}'
+  },
+  indicatorButton: {
+    background: '{surface.700}',
+    hoverBackground: '{surface.600}',
+    activeBackground: '{primary.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  insetIndicatorList: {
+    background: 'rgba(0, 0, 0, 0.5)'
+  },
+  insetIndicatorButton: {
+    background: 'rgba(255, 255, 255, 0.4)',
+    hoverBackground: 'rgba(255, 255, 255, 0.6)',
+    activeBackground: 'rgba(255, 255, 255, 0.9)'
+  },
+  closeButton: {
+    background: 'rgba(255, 255, 255, 0.1)',
+    hoverBackground: 'rgba(255, 255, 255, 0.2)',
+    color: '{surface.50}',
+    hoverColor: '{surface.0}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  footer: {
+    background: '{surface.900}',
+    color: '{text.color}',
+  },
+  footerIcon: {
+    color: '{surface.600}',
+    hoverColor: '{surface.450}',
+  }
+};
+
+export default darkColors;

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

@@ -0,0 +1,71 @@
+const lightColors = {
+  root: {
+    borderColor: '{surface.50}'
+  },
+  activeImageContainer: {
+    background: '{white}'
+  },
+  navButton: {
+    background: '{button.secondary.background}',
+    hoverBackground: '{button.secondary.hoverBackground}',
+    color: '{button.secondary.color}',
+    hoverColor: '{button.secondary.hoverColor}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  thumbnailsContent: {
+    background: '{surface.50}'
+  },
+  thumbnailNavButton: {
+    hoverBackground: '{button.secondary.hoverBackground}',
+    color: '{button.secondary.color}',
+    hoverColor: '{button.secondary.hoverColor}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  caption: {
+    background: 'rgba(0, 0, 0, 0.5)',
+    color: '{surface.100}'
+  },
+  indicatorButton: {
+    background: '{surface.200}',
+    hoverBackground: '{surface.300}',
+    activeBackground: '{primary.color}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  insetIndicatorList: {
+    background: 'rgba(0, 0, 0, 0.5)'
+  },
+  insetIndicatorButton: {
+    background: 'rgba(255, 255, 255, 0.4)',
+    hoverBackground: 'rgba(255, 255, 255, 0.6)',
+    activeBackground: 'rgba(255, 255, 255, 0.9)'
+  },
+  closeButton: {
+    background: 'rgba(255, 255, 255, 0.1)',
+    hoverBackground: 'rgba(255, 255, 255, 0.2)',
+    color: '{surface.50}',
+    hoverColor: '{surface.0}',
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  footer: {
+    background: '{surface.100}',
+    color: '{text.color}',
+  },
+  footerIcon: {
+    color: '{surface.600}',
+    hoverColor: '{surface.750}',
+  }
+};
+
+export default lightColors;

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

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

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

@@ -0,0 +1,91 @@
+const sizes = {
+  root: {
+    borderWidth: '1px',
+    borderRadius: '{border.radius.lg}',
+    transitionDuration: '{transition.duration}'
+  },
+  mask: {
+    zIndex: '11'
+  },
+  activeImageContainer: {
+    width: '70vw',
+    height: 'calc(70vw / 16 * 9)',    // 16:9 aspect ratio
+  },
+  fullscreenImage: {
+    maxHeight: '85vh',
+    maxWidth9: '100vw'
+  },
+  navButton: {
+    size: '2.5rem',
+    gutter: '1rem',
+    prev: {
+      borderRadius: '50%'
+    },
+    next: {
+      borderRadius: '50%'
+    },
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  navIcon: {
+    size: '1.5rem'
+  },
+  thumbnailsContent: {
+    padding: '1rem 1rem'
+  },
+  thumbnailImage: {
+    width: '5rem',
+    height: '3.125rem',
+  },
+  thumbnailNavButton: {
+    size: '2.5rem',
+    borderRadius: '50%',
+    gutter: '0.5rem',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  thumbnailNavButtonIcon: {
+    size: '1rem'
+  },
+  caption: {
+    padding: '1rem'
+  },
+  indicatorList: {
+    gap: '0.5rem',
+    padding: '1rem'
+  },
+  indicatorButton: {
+    width: '1rem',
+    height: '1rem',
+    borderRadius: '50%',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  closeButton: {
+    size: '3rem',
+    gutter: '0.5rem',
+    borderRadius: '50%',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  closeButtonIcon: {
+    size: '1.5rem'
+  },
+  footer: {
+    padding: '0.5rem',
+  },
+}
+
+export default sizes

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

@@ -12,6 +12,7 @@ import DividerScheme from "./divider";
 import SliderScheme from "./slider";
 import BreadcrumbScheme from "./breadcrumb";
 import RadioScheme from "./radio";
+import GalleriaScheme from "./galleria";
 
 export {
   AvatarScheme,
@@ -28,4 +29,5 @@ export {
   SliderScheme,
   BreadcrumbScheme,
   RadioScheme,
+  GalleriaScheme,
 }