@webitel/styleguide 24.12.39 → 24.12.40

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/lib/primevue/components/button/colors/dark/index.ts +74 -74
  3. package/src/lib/primevue/components/button/colors/light/index.ts +74 -74
  4. package/src/lib/primevue/components/popover/colors/dark/index.ts +1 -1
  5. package/src/lib/primevue/components/popover/colors/light/index.ts +2 -2
  6. package/src/lib/primevue/components/popover/sizes/index.js +7 -0
  7. package/src/lib/primevue/components/popover/sizes/index.ts +2 -2
  8. package/src/lib/primevue/components/tooltip/colors/dark/index.js +7 -0
  9. package/src/lib/primevue/components/tooltip/colors/light/index.js +7 -0
  10. package/src/lib/primevue/components/tooltip/sizes/index.ts +2 -2
  11. package/src/lib/primevue/semantic/color-scheme/dark-color.ts +60 -175
  12. package/src/lib/primevue/semantic/color-scheme/focus-ring/dark/index.ts +3 -1
  13. package/src/lib/primevue/semantic/color-scheme/focus-ring/light/index.ts +3 -1
  14. package/src/lib/primevue/semantic/color-scheme/index.ts +1 -0
  15. package/src/lib/primevue/semantic/color-scheme/light-color.ts +60 -175
  16. package/src/lib/primevue/semantic/color-scheme/overlay/dark/index.ts +17 -14
  17. package/src/lib/primevue/semantic/color-scheme/overlay/index.ts +2 -2
  18. package/src/lib/primevue/semantic/color-scheme/overlay/light/index.ts +16 -14
  19. package/src/lib/primevue/semantic/color-scheme/palette.ts +156 -496
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.39",
3
+ "version": "24.12.40",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
package/src/lib/primevue/components/button/colors/dark/index.ts CHANGED
@@ -1,90 +1,90 @@
1
1
  const darkColors = {
2
2
  root: {
3
3
  primary: {
4
- background: '{primary-color}',
5
- hoverBackground: '{primary-hover-color}',
6
- activeBackground: '{primary-active-color}',
7
- borderColor: '{primary-color}',
8
- hoverBorderColor: '{primary-hover-color}',
9
- activeBorderColor: '{primary-active-color}',
10
- color: '{primary-on-color}',
11
- hoverColor: '{primary-on-color}',
12
- activeColor: '{primary-on-color}',
4
+ background: '{primary.color}',
5
+ hoverBackground: '{primary.hover}',
6
+ activeBackground: '{primary.active}',
7
+ borderColor: '{primary.color}',
8
+ hoverBorderColor: '{primary.color}',
9
+ activeBorderColor: '{primary.color}',
10
+ color: '{primary.foreground}',
11
+ hoverColor: '{primary.foreground}',
12
+ activeColor: '{primary.foreground}',
13
13
  focusRing: {
14
14
  color: '{focus-color}',
15
15
  shadow: 'none',
16
16
  },
17
17
  },
18
18
  secondary: {
19
- background: '{secondary-color}',
20
- hoverBackground: '{secondary-hover-color}',
21
- activeBackground: '{secondary-active-color}',
22
- borderColor: '{secondary-color}',
23
- hoverBorderColor: '{secondary-hover-color}',
24
- activeBorderColor: '{secondary-active-color}',
25
- color: '{secondary-on-color}',
26
- hoverColor: '{secondary-on-color}',
27
- activeColor: '{secondary-on-color}',
19
+ background: '{secondary.color}',
20
+ hoverBackground: '{secondary.hover}',
21
+ activeBackground: '{secondary.active}',
22
+ borderColor: '{secondary.color}',
23
+ hoverBorderColor: '{secondary.color}',
24
+ activeBorderColor: '{secondary.color}',
25
+ color: '{secondary.foreground}',
26
+ hoverColor: '{secondary.foreground}',
27
+ activeColor: '{secondary.foreground}',
28
28
  focusRing: {
29
29
  color: '{focus-color}',
30
30
  shadow: 'none',
31
31
  },
32
32
  },
33
33
  success: {
34
- background: '{success-color}',
35
- hoverBackground: '{success-hover-color}',
36
- activeBackground: '{success-active-color}',
37
- borderColor: '{success-color}',
38
- hoverBorderColor: '{success-hover-color}',
39
- activeBorderColor: '{success-active-color}',
40
- color: '{success-on-color}',
41
- hoverColor: '{success-on-color}',
42
- activeColor: '{success-on-color}',
34
+ background: '{success.color}',
35
+ hoverBackground: '{success.hover}',
36
+ activeBackground: '{success.active}',
37
+ borderColor: '{success.color}',
38
+ hoverBorderColor: '{success.color}',
39
+ activeBorderColor: '{success.color}',
40
+ color: '{success.foreground}',
41
+ hoverColor: '{success.foreground}',
42
+ activeColor: '{success.foreground}',
43
43
  focusRing: {
44
44
  color: '{focus-color}',
45
45
  shadow: 'none',
46
46
  },
47
47
  },
48
48
  warn: {
49
- background: '{warning-color}',
50
- hoverBackground: '{warning-hover-color}',
51
- activeBackground: '{warning-active-color}',
52
- borderColor: '{warning-color}',
53
- hoverBorderColor: '{warning-hover-color}',
54
- activeBorderColor: '{warning-active-color}',
55
- color: '{warning-on-color}',
56
- hoverColor: '{warning-on-color}',
57
- activeColor: '{warning-on-color}',
49
+ background: '{warn.color}',
50
+ hoverBackground: '{warn.hover}',
51
+ activeBackground: '{warn.active}',
52
+ borderColor: '{warn.color}',
53
+ hoverBorderColor: '{warn.color}',
54
+ activeBorderColor: '{warn.color}',
55
+ color: '{warn.foreground}',
56
+ hoverColor: '{warn.foreground}',
57
+ activeColor: '{warn.foreground}',
58
58
  focusRing: {
59
59
  color: '{focus-color}',
60
60
  shadow: 'none',
61
61
  },
62
62
  },
63
63
  error: {
64
- background: '{error-color}',
65
- hoverBackground: '{error-hover-color}',
66
- activeBackground: '{error-active-color}',
67
- borderColor: '{error-color}',
68
- hoverBorderColor: '{error-hover-color}',
69
- activeBorderColor: '{error-active-color}',
70
- color: '{error-on-color}',
71
- hoverColor: '{error-on-color}',
72
- activeColor: '{error-on-color}',
64
+ background: '{error.color}',
65
+ hoverBackground: '{error.hover}',
66
+ activeBackground: '{error.active}',
67
+ borderColor: '{error.color}',
68
+ hoverBorderColor: '{error.color}',
69
+ activeBorderColor: '{error.color}',
70
+ color: '{error.foreground}',
71
+ hoverColor: '{error.foreground}',
72
+ activeColor: '{error.foreground}',
73
73
  focusRing: {
74
74
  color: '{focus-color}',
75
75
  shadow: 'none',
76
76
  },
77
77
  },
78
78
  info: {
79
- background: '{info-color}',
80
- hoverBackground: '{info-hover-color}',
81
- activeBackground: '{info-active-color}',
82
- borderColor: '{info-color}',
83
- hoverBorderColor: '{info-hover-color}',
84
- activeBorderColor: '{info-active-color}',
85
- color: '{info-on-color}',
86
- hoverColor: '{info-on-color}',
87
- activeColor: '{info-on-color}',
79
+ background: '{info.color}',
80
+ hoverBackground: '{info.hover}',
81
+ activeBackground: '{info.active}',
82
+ borderColor: '{info.color}',
83
+ hoverBorderColor: '{info.color}',
84
+ activeBorderColor: '{info.color}',
85
+ color: '{info.foreground}',
86
+ hoverColor: '{info.foreground}',
87
+ activeColor: '{info.foreground}',
88
88
  focusRing: {
89
89
  color: '{focus-color}',
90
90
  shadow: 'none',
@@ -95,38 +95,38 @@ const darkColors = {
95
95
  * need to replace name "job" to "task",
96
96
  * */
97
97
  job: {
98
- background: '{task-color}',
99
- hoverBackground: '{task-hover-color}',
100
- activeBackground: '{task-active-color}',
101
- borderColor: '{task-color}',
102
- hoverBorderColor: '{task-hover-color}',
103
- activeBorderColor: '{task-active-color}',
104
- color: '{task-on-color}',
105
- hoverColor: '{task-on-color}',
106
- activeColor: '{task-on-color}',
98
+ background: '{task.color}',
99
+ hoverBackground: '{task.hover}',
100
+ activeBackground: '{task.active}',
101
+ borderColor: '{task.color}',
102
+ hoverBorderColor: '{task.color}',
103
+ activeBorderColor: '{task.color}',
104
+ color: '{task.foreground}',
105
+ hoverColor: '{task.foreground}',
106
+ activeColor: '{task.foreground}',
107
107
  focusRing: {
108
108
  color: '{focus-color}',
109
109
  shadow: 'none',
110
110
  },
111
111
  },
112
112
  transfer: {
113
- background: '{transfer-color}',
114
- hoverBackground: '{transfer-hover-color}',
115
- activeBackground: '{transfer-active-color}',
116
- borderColor: '{transfer-color}',
117
- hoverBorderColor: '{transfer-hover-color}',
118
- activeBorderColor: '{transfer-active-color}',
119
- color: '{transfer-on-color}',
120
- hoverColor: '{transfer-on-color}',
121
- activeColor: '{transfer-on-color}',
113
+ background: '{transfer.color}',
114
+ hoverBackground: '{transfer.hover}',
115
+ activeBackground: '{transfer.active}',
116
+ borderColor: '{transfer.color}',
117
+ hoverBorderColor: '{transfer.color}',
118
+ activeBorderColor: '{transfer.color}',
119
+ color: '{transfer.foreground}',
120
+ hoverColor: '{transfer.foreground}',
121
+ activeColor: '{transfer.foreground}',
122
122
  focusRing: {
123
123
  color: '{focus-color}',
124
124
  shadow: 'none',
125
125
  },
126
126
  },
127
127
  disabled: {
128
- color: '{grey-lighten-1}',
129
- background: '{dp-surface-color-16}',
128
+ color: '{gray.600}',
129
+ background: '{gray.950}',
130
130
  },
131
131
  },
132
132
  outlined: {
package/src/lib/primevue/components/button/colors/light/index.ts CHANGED
@@ -1,90 +1,90 @@
1
1
  const lightColors = {
2
2
  root: {
3
3
  primary: {
4
- background: '{primary-color}',
5
- hoverBackground: '{primary-hover-color}',
6
- activeBackground: '{primary-active-color}',
7
- borderColor: '{primary-color}',
8
- hoverBorderColor: '{primary-hover-color}',
9
- activeBorderColor: '{primary-active-color}',
10
- color: '{primary-on-color}',
11
- hoverColor: '{primary-on-color}',
12
- activeColor: '{primary-on-color}',
4
+ background: '{primary.color}',
5
+ hoverBackground: '{primary.hover}',
6
+ activeBackground: '{primary.active}',
7
+ borderColor: '{primary.color}',
8
+ hoverBorderColor: '{primary.color}',
9
+ activeBorderColor: '{primary.color}',
10
+ color: '{primary.foreground}',
11
+ hoverColor: '{primary.foreground}',
12
+ activeColor: '{primary.foreground}',
13
13
  focusRing: {
14
14
  color: '{focus-color}',
15
15
  shadow: 'none',
16
16
  },
17
17
  },
18
18
  secondary: {
19
- background: '{secondary-color}',
20
- hoverBackground: '{secondary-hover-color}',
21
- activeBackground: '{secondary-active-color}',
22
- borderColor: '{secondary-color}',
23
- hoverBorderColor: '{secondary-hover-color}',
24
- activeBorderColor: '{secondary-active-color}',
25
- color: '{secondary-on-color}',
26
- hoverColor: '{secondary-on-color}',
27
- activeColor: '{secondary-on-color}',
19
+ background: '{secondary.color}',
20
+ hoverBackground: '{secondary.hover}',
21
+ activeBackground: '{secondary.active}',
22
+ borderColor: '{secondary.color}',
23
+ hoverBorderColor: '{secondary.color}',
24
+ activeBorderColor: '{secondary.color}',
25
+ color: '{secondary.foreground}',
26
+ hoverColor: '{secondary.foreground}',
27
+ activeColor: '{secondary.foreground}',
28
28
  focusRing: {
29
29
  color: '{focus-color}',
30
30
  shadow: 'none',
31
31
  },
32
32
  },
33
33
  success: {
34
- background: '{success-color}',
35
- hoverBackground: '{success-hover-color}',
36
- activeBackground: '{success-active-color}',
37
- borderColor: '{success-color}',
38
- hoverBorderColor: '{success-hover-color}',
39
- activeBorderColor: '{success-active-color}',
40
- color: '{success-on-color}',
41
- hoverColor: '{success-on-color}',
42
- activeColor: '{success-on-color}',
34
+ background: '{success.color}',
35
+ hoverBackground: '{success.hover}',
36
+ activeBackground: '{success.active}',
37
+ borderColor: '{success.color}',
38
+ hoverBorderColor: '{success.color}',
39
+ activeBorderColor: '{success.color}',
40
+ color: '{success.foreground}',
41
+ hoverColor: '{success.foreground}',
42
+ activeColor: '{success.foreground}',
43
43
  focusRing: {
44
44
  color: '{focus-color}',
45
45
  shadow: 'none',
46
46
  },
47
47
  },
48
48
  warn: {
49
- background: '{warning-color}',
50
- hoverBackground: '{warning-hover-color}',
51
- activeBackground: '{warning-active-color}',
52
- borderColor: '{warning-color}',
53
- hoverBorderColor: '{warning-hover-color}',
54
- activeBorderColor: '{warning-active-color}',
55
- color: '{warning-on-color}',
56
- hoverColor: '{warning-on-color}',
57
- activeColor: '{warning-on-color}',
49
+ background: '{warn.color}',
50
+ hoverBackground: '{warn.hover}',
51
+ activeBackground: '{warn.active}',
52
+ borderColor: '{warn.color}',
53
+ hoverBorderColor: '{warn.color}',
54
+ activeBorderColor: '{warn.color}',
55
+ color: '{warn.foreground}',
56
+ hoverColor: '{warn.foreground}',
57
+ activeColor: '{warn.foreground}',
58
58
  focusRing: {
59
59
  color: '{focus-color}',
60
60
  shadow: 'none',
61
61
  },
62
62
  },
63
63
  error: {
64
- background: '{error-color}',
65
- hoverBackground: '{error-hover-color}',
66
- activeBackground: '{error-active-color}',
67
- borderColor: '{error-color}',
68
- hoverBorderColor: '{error-hover-color}',
69
- activeBorderColor: '{error-active-color}',
70
- color: '{error-on-color}',
71
- hoverColor: '{error-on-color}',
72
- activeColor: '{error-on-color}',
64
+ background: '{error.color}',
65
+ hoverBackground: '{error.hover}',
66
+ activeBackground: '{error.active}',
67
+ borderColor: '{error.color}',
68
+ hoverBorderColor: '{error.color}',
69
+ activeBorderColor: '{error.color}',
70
+ color: '{error.foreground}',
71
+ hoverColor: '{error.foreground}',
72
+ activeColor: '{error.foreground}',
73
73
  focusRing: {
74
74
  color: '{focus-color}',
75
75
  shadow: 'none',
76
76
  },
77
77
  },
78
78
  info: {
79
- background: '{info-color}',
80
- hoverBackground: '{info-hover-color}',
81
- activeBackground: '{info-active-color}',
82
- borderColor: '{info-color}',
83
- hoverBorderColor: '{info-hover-color}',
84
- activeBorderColor: '{info-active-color}',
85
- color: '{info-on-color}',
86
- hoverColor: '{info-on-color}',
87
- activeColor: '{info-on-color}',
79
+ background: '{info.color}',
80
+ hoverBackground: '{info.hover}',
81
+ activeBackground: '{info.active}',
82
+ borderColor: '{info.color}',
83
+ hoverBorderColor: '{info.color}',
84
+ activeBorderColor: '{info.color}',
85
+ color: '{info.foreground}',
86
+ hoverColor: '{info.foreground}',
87
+ activeColor: '{info.foreground}',
88
88
  focusRing: {
89
89
  color: '{focus-color}',
90
90
  shadow: 'none',
@@ -95,38 +95,38 @@ const lightColors = {
95
95
  * need to replace name "job" to "task",
96
96
  * */
97
97
  job: {
98
- background: '{task-color}',
99
- hoverBackground: '{task-hover-color}',
100
- activeBackground: '{task-active-color}',
101
- borderColor: '{task-color}',
102
- hoverBorderColor: '{task-hover-color}',
103
- activeBorderColor: '{task-active-color}',
104
- color: '{task-on-color}',
105
- hoverColor: '{task-on-color}',
106
- activeColor: '{task-on-color}',
98
+ background: '{task.color}',
99
+ hoverBackground: '{task.hover}',
100
+ activeBackground: '{task.active}',
101
+ borderColor: '{task.color}',
102
+ hoverBorderColor: '{task.color}',
103
+ activeBorderColor: '{task.color}',
104
+ color: '{task.foreground}',
105
+ hoverColor: '{task.foreground}',
106
+ activeColor: '{task.foreground}',
107
107
  focusRing: {
108
108
  color: '{focus-color}',
109
109
  shadow: 'none',
110
110
  },
111
111
  },
112
112
  transfer: {
113
- background: '{transfer-color}',
114
- hoverBackground: '{transfer-hover-color}',
115
- activeBackground: '{transfer-active-color}',
116
- borderColor: '{transfer-color}',
117
- hoverBorderColor: '{transfer-hover-color}',
118
- activeBorderColor: '{transfer-active-color}',
119
- color: '{transfer-on-color}',
120
- hoverColor: '{transfer-on-color}',
121
- activeColor: '{transfer-on-color}',
113
+ background: '{transfer.color}',
114
+ hoverBackground: '{transfer.hover}',
115
+ activeBackground: '{transfer.active}',
116
+ borderColor: '{transfer.color}',
117
+ hoverBorderColor: '{transfer.color}',
118
+ activeBorderColor: '{transfer.color}',
119
+ color: '{transfer.foreground}',
120
+ hoverColor: '{transfer.foreground}',
121
+ activeColor: '{transfer.foreground}',
122
122
  focusRing: {
123
123
  color: '{focus-color}',
124
124
  shadow: 'none',
125
125
  },
126
126
  },
127
127
  disabled: {
128
- color: '{grey-darken-1}',
129
- background: '{dp-surface-color-16}',
128
+ color: '{gray.600}',
129
+ background: '{gray.200}',
130
130
  },
131
131
  },
132
132
  outlined: {
package/src/lib/primevue/components/popover/colors/dark/index.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  const darkColors = {
2
2
  background: '{overlay.popover.background}',
3
- borderColor: '{overlay.popover.border.color}',
3
+ borderColor: '{overlay.popover.borderColor}',
4
4
  color: '{overlay.popover.color}',
5
5
  shadow: '{overlay.popover.shadow}',
6
6
  }
package/src/lib/primevue/components/popover/colors/light/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  const lightColors = {
2
2
  background: '{overlay.popover.background}',
3
- borderColor: '{overlay.popover.border.color}',
3
+ borderColor: '{overlay.popover.borderColor}',
4
4
  color: '{overlay.popover.color}',
5
- shadow: '{overlay.popover.shadow}'
5
+ shadow: '{overlay.popover.shadow}',
6
6
  }
7
7
 
8
8
  export default lightColors
package/src/lib/primevue/components/popover/sizes/index.js ADDED
@@ -0,0 +1,7 @@
1
+ const sizes = {
2
+ fontSize: " ",
3
+ gap: '100rem',
4
+
5
+ };
6
+
7
+ export default sizes
package/src/lib/primevue/components/popover/sizes/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  const sizes = {
2
2
  padding: '{overlay.popover.padding}',
3
- gutter: '10px',
3
+ gutter: '0.5rem',
4
4
  arrowOffset: '1.25rem',
5
- borderRadius: '{overlay.popover.border.radius}',
5
+ borderRadius: '{overlay.popover.borderRadius}',
6
6
  };
7
7
 
8
8
  export default sizes
package/src/lib/primevue/components/tooltip/colors/dark/index.js ADDED
@@ -0,0 +1,7 @@
1
+ const darkColors = {
2
+ background: '{accent.color}',
3
+ color: '{accent.foreground}',
4
+ shadow: '{overlay.popover.shadow}',
5
+ };
6
+
7
+ export default darkColors
package/src/lib/primevue/components/tooltip/colors/light/index.js ADDED
@@ -0,0 +1,7 @@
1
+ const lightColors = {
2
+ background: '{accent.color}',
3
+ color: '{accent.foreground}',
4
+ shadow: '{overlay.popover.shadow}',
5
+ };
6
+
7
+ export default lightColors
package/src/lib/primevue/components/tooltip/sizes/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  const sizes = {
2
2
  maxWidth: '12.5rem',
3
- gutter: '0.25rem',
3
+ gutter: '0.5rem',
4
4
  padding: '0.5rem 0.75rem',
5
- borderRadius: '{overlay.popover.border.radius}'
5
+ borderRadius: '0.5rem',
6
6
  };
7
7
 
8
8
  export default sizes