@webitel/styleguide 24.12.79 → 24.12.80

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/lib/primevue/components/galleria/colors/dark/index.ts +71 -0
  3. package/src/lib/primevue/components/galleria/colors/index.ts +9 -0
  4. package/src/lib/primevue/components/galleria/colors/light/index.ts +71 -0
  5. package/src/lib/primevue/components/galleria/index.ts +9 -0
  6. package/src/lib/primevue/components/galleria/sizes/index.ts +91 -0
  7. package/src/lib/primevue/components/index.ts +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.79",
3
+ "version": "24.12.80",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
package/src/lib/primevue/components/galleria/colors/dark/index.ts ADDED
@@ -0,0 +1,71 @@
1
+ const darkColors = {
2
+ root: {
3
+ borderColor: '{surface.850}'
4
+ },
5
+ activeImageContainer: {
6
+ background: '{black}'
7
+ },
8
+ navButton: {
9
+ background: '{button.secondary.background}',
10
+ hoverBackground: '{button.secondary.hoverBackground}',
11
+ color: '{button.secondary.color}',
12
+ hoverColor: '{button.secondary.hoverColor}',
13
+ focusRing: {
14
+ color: '{focus.ring.color}',
15
+ shadow: '{focus.ring.shadow}'
16
+ }
17
+ },
18
+ thumbnailsContent: {
19
+ background: '{surface.850}'
20
+ },
21
+ thumbnailNavButton: {
22
+ hoverBackground: '{surface.800}',
23
+ color: '{button.secondary.color}',
24
+ hoverColor: '{button.secondary.hoverColor}',
25
+ focusRing: {
26
+ color: '{focus.ring.color}',
27
+ shadow: '{focus.ring.shadow}'
28
+ }
29
+ },
30
+ caption: {
31
+ background: 'rgba(0, 0, 0, 0.5)',
32
+ color: '{surface.100}'
33
+ },
34
+ indicatorButton: {
35
+ background: '{surface.700}',
36
+ hoverBackground: '{surface.600}',
37
+ activeBackground: '{primary.color}',
38
+ focusRing: {
39
+ color: '{focus.ring.color}',
40
+ shadow: '{focus.ring.shadow}'
41
+ }
42
+ },
43
+ insetIndicatorList: {
44
+ background: 'rgba(0, 0, 0, 0.5)'
45
+ },
46
+ insetIndicatorButton: {
47
+ background: 'rgba(255, 255, 255, 0.4)',
48
+ hoverBackground: 'rgba(255, 255, 255, 0.6)',
49
+ activeBackground: 'rgba(255, 255, 255, 0.9)'
50
+ },
51
+ closeButton: {
52
+ background: 'rgba(255, 255, 255, 0.1)',
53
+ hoverBackground: 'rgba(255, 255, 255, 0.2)',
54
+ color: '{surface.50}',
55
+ hoverColor: '{surface.0}',
56
+ focusRing: {
57
+ color: '{focus.ring.color}',
58
+ shadow: '{focus.ring.shadow}'
59
+ }
60
+ },
61
+ footer: {
62
+ background: '{surface.900}',
63
+ color: '{text.color}',
64
+ },
65
+ footerIcon: {
66
+ color: '{surface.600}',
67
+ hoverColor: '{surface.450}',
68
+ }
69
+ };
70
+
71
+ export default darkColors;
package/src/lib/primevue/components/galleria/colors/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import darkColors from './dark';
2
+ import lightColors from './light';
3
+
4
+ const colorScheme = {
5
+ light: lightColors,
6
+ dark: darkColors
7
+ }
8
+
9
+ export default colorScheme;
package/src/lib/primevue/components/galleria/colors/light/index.ts ADDED
@@ -0,0 +1,71 @@
1
+ const lightColors = {
2
+ root: {
3
+ borderColor: '{surface.50}'
4
+ },
5
+ activeImageContainer: {
6
+ background: '{white}'
7
+ },
8
+ navButton: {
9
+ background: '{button.secondary.background}',
10
+ hoverBackground: '{button.secondary.hoverBackground}',
11
+ color: '{button.secondary.color}',
12
+ hoverColor: '{button.secondary.hoverColor}',
13
+ focusRing: {
14
+ color: '{focus.ring.color}',
15
+ shadow: '{focus.ring.shadow}'
16
+ }
17
+ },
18
+ thumbnailsContent: {
19
+ background: '{surface.50}'
20
+ },
21
+ thumbnailNavButton: {
22
+ hoverBackground: '{button.secondary.hoverBackground}',
23
+ color: '{button.secondary.color}',
24
+ hoverColor: '{button.secondary.hoverColor}',
25
+ focusRing: {
26
+ color: '{focus.ring.color}',
27
+ shadow: '{focus.ring.shadow}'
28
+ }
29
+ },
30
+ caption: {
31
+ background: 'rgba(0, 0, 0, 0.5)',
32
+ color: '{surface.100}'
33
+ },
34
+ indicatorButton: {
35
+ background: '{surface.200}',
36
+ hoverBackground: '{surface.300}',
37
+ activeBackground: '{primary.color}',
38
+ focusRing: {
39
+ color: '{focus.ring.color}',
40
+ shadow: '{focus.ring.shadow}'
41
+ }
42
+ },
43
+ insetIndicatorList: {
44
+ background: 'rgba(0, 0, 0, 0.5)'
45
+ },
46
+ insetIndicatorButton: {
47
+ background: 'rgba(255, 255, 255, 0.4)',
48
+ hoverBackground: 'rgba(255, 255, 255, 0.6)',
49
+ activeBackground: 'rgba(255, 255, 255, 0.9)'
50
+ },
51
+ closeButton: {
52
+ background: 'rgba(255, 255, 255, 0.1)',
53
+ hoverBackground: 'rgba(255, 255, 255, 0.2)',
54
+ color: '{surface.50}',
55
+ hoverColor: '{surface.0}',
56
+ focusRing: {
57
+ color: '{focus.ring.color}',
58
+ shadow: '{focus.ring.shadow}'
59
+ }
60
+ },
61
+ footer: {
62
+ background: '{surface.100}',
63
+ color: '{text.color}',
64
+ },
65
+ footerIcon: {
66
+ color: '{surface.600}',
67
+ hoverColor: '{surface.750}',
68
+ }
69
+ };
70
+
71
+ export default lightColors;
package/src/lib/primevue/components/galleria/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import colorScheme from './colors';
2
+ import sizes from './sizes';
3
+
4
+ const GalleriaScheme = {
5
+ colorScheme,
6
+ sizes,
7
+ }
8
+
9
+ export default GalleriaScheme
package/src/lib/primevue/components/galleria/sizes/index.ts ADDED
@@ -0,0 +1,91 @@
1
+ const sizes = {
2
+ root: {
3
+ borderWidth: '1px',
4
+ borderRadius: '{border.radius.lg}',
5
+ transitionDuration: '{transition.duration}'
6
+ },
7
+ mask: {
8
+ zIndex: '11'
9
+ },
10
+ activeImageContainer: {
11
+ width: '70vw',
12
+ height: 'calc(70vw / 16 * 9)', // 16:9 aspect ratio
13
+ },
14
+ fullscreenImage: {
15
+ maxHeight: '85vh',
16
+ maxWidth9: '100vw'
17
+ },
18
+ navButton: {
19
+ size: '2.5rem',
20
+ gutter: '1rem',
21
+ prev: {
22
+ borderRadius: '50%'
23
+ },
24
+ next: {
25
+ borderRadius: '50%'
26
+ },
27
+ focusRing: {
28
+ width: '{focus.ring.width}',
29
+ style: '{focus.ring.style}',
30
+ offset: '{focus.ring.offset}',
31
+ }
32
+ },
33
+ navIcon: {
34
+ size: '1.5rem'
35
+ },
36
+ thumbnailsContent: {
37
+ padding: '1rem 1rem'
38
+ },
39
+ thumbnailImage: {
40
+ width: '5rem',
41
+ height: '3.125rem',
42
+ },
43
+ thumbnailNavButton: {
44
+ size: '2.5rem',
45
+ borderRadius: '50%',
46
+ gutter: '0.5rem',
47
+ focusRing: {
48
+ width: '{focus.ring.width}',
49
+ style: '{focus.ring.style}',
50
+ offset: '{focus.ring.offset}',
51
+ }
52
+ },
53
+ thumbnailNavButtonIcon: {
54
+ size: '1rem'
55
+ },
56
+ caption: {
57
+ padding: '1rem'
58
+ },
59
+ indicatorList: {
60
+ gap: '0.5rem',
61
+ padding: '1rem'
62
+ },
63
+ indicatorButton: {
64
+ width: '1rem',
65
+ height: '1rem',
66
+ borderRadius: '50%',
67
+ focusRing: {
68
+ width: '{focus.ring.width}',
69
+ style: '{focus.ring.style}',
70
+ offset: '{focus.ring.offset}',
71
+ }
72
+ },
73
+ closeButton: {
74
+ size: '3rem',
75
+ gutter: '0.5rem',
76
+ borderRadius: '50%',
77
+ focusRing: {
78
+ width: '{focus.ring.width}',
79
+ style: '{focus.ring.style}',
80
+ offset: '{focus.ring.offset}',
81
+ }
82
+ },
83
+ closeButtonIcon: {
84
+ size: '1.5rem'
85
+ },
86
+ footer: {
87
+ padding: '0.5rem',
88
+ },
89
+ }
90
+
91
+ export default sizes
package/src/lib/primevue/components/index.ts CHANGED
@@ -12,6 +12,7 @@ import DividerScheme from "./divider";
12
12
  import SliderScheme from "./slider";
13
13
  import BreadcrumbScheme from "./breadcrumb";
14
14
  import RadioScheme from "./radio";
15
+ import GalleriaScheme from "./galleria";
15
16
 
16
17
  export {
17
18
  AvatarScheme,
@@ -28,4 +29,5 @@ export {
28
29
  SliderScheme,
29
30
  BreadcrumbScheme,
30
31
  RadioScheme,
32
+ GalleriaScheme,
31
33
  }