@webitel/styleguide 24.12.51 → 24.12.53

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/lib/primevue/components/chip/colors/dark/index.ts +23 -16
  3. package/src/lib/primevue/components/chip/colors/light/index.ts +24 -17
  4. package/src/lib/primevue/components/chip/sizes/index.ts +2 -2
  5. package/src/lib/primevue/semantic/color-scheme/dark-color.ts +20 -10
  6. package/src/lib/primevue/semantic/color-scheme/light-color.ts +20 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.51",
3
+ "version": "24.12.53",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
package/src/lib/primevue/components/chip/colors/dark/index.ts CHANGED
@@ -1,45 +1,52 @@
1
1
  const darkColors = {
2
2
  background: '{surface.100}',
3
3
  color: '{surface.800}',
4
- /**
5
- * @author Yehor Hlukhov
6
- *
7
- * referred to Evgeniy Trahtenberg
8
- * need to add colors for main
9
- * */
10
4
  main: {
11
- background: '{red.400}',
12
- color: '{red.50}'
5
+ background: '{amber.650}',
6
+ color: '{amber.950}',
7
+ iconColor: '{amber.900}',
8
+ iconHoverColor: '{amber.950}'
13
9
  },
14
10
  primary: {
15
11
  background: '{primary.color}',
16
- color: '{primary.foreground}'
12
+ color: '{primary.foreground}',
13
+ iconColor: '{primary.foreground}',
14
+ iconHoverColor: '{primary.foregroundHover}'
17
15
  },
18
16
  secondary: {
19
17
  background: '{secondary.color}',
20
- color: '{secondary.foreground}'
18
+ color: '{secondary.foreground}',
19
+ iconColor: '{secondary.foreground}',
20
+ iconHoverColor: '{secondary.foregroundHover}'
21
21
  },
22
22
  success: {
23
23
  background: '{success.color}',
24
- color: '{success.foreground}'
24
+ color: '{success.foreground}',
25
+ iconColor: '{success.foreground}',
26
+ iconHoverColor: '{success.foregroundHover}'
25
27
  },
26
28
  warning: {
27
29
  background: '{warn.color}',
28
- color: '{warn.foreground}'
30
+ color: '{warn.foreground}',
31
+ iconColor: '{warn.foreground}',
32
+ iconHoverColor: '{warn.foregroundHover}'
29
33
  },
30
34
  error: {
31
35
  background: '{error.color}',
32
- color: '{error.foreground}'
36
+ color: '{error.foreground}',
37
+ iconColor: '{error.foreground}',
38
+ iconHoverColor: '{error.foregroundHover}'
33
39
  },
34
40
  transfer: {
35
41
  background: '{transfer.color}',
36
- color: '{transfer.foreground}'
42
+ color: '{transfer.foreground}',
43
+ iconColor: '{transfer.foreground}',
44
+ iconHoverColor: '{transfer.foregroundHover}'
37
45
  },
38
46
  removeIcon: {
39
47
  focusRing: {
40
- color: '{focus.ring.color}',
41
48
  shadow: '{form.field.focus.ring.shadow}'
42
- }
49
+ },
43
50
  }
44
51
  }
45
52
 
package/src/lib/primevue/components/chip/colors/light/index.ts CHANGED
@@ -1,45 +1,52 @@
1
1
  const lightColors = {
2
- background: '{surface.100}',
2
+ background: '{surface.200}',
3
3
  color: '{surface.800}',
4
- /**
5
- * @author Yehor Hlukhov
6
- *
7
- * referred to Evgeniy Trahtenberg
8
- * need to add colors for main
9
- * */
10
4
  main: {
11
- background: '{red.400}',
12
- color: '{red.50}'
5
+ background: '{amber.200}',
6
+ color: '{amber.950}',
7
+ iconColor: '{amber.800}',
8
+ iconHoverColor: '{amber.850}'
13
9
  },
14
10
  primary: {
15
11
  background: '{primary.color}',
16
- color: '{primary.foreground}'
12
+ color: '{primary.foreground}',
13
+ iconColor: '{primary.foreground}',
14
+ iconHoverColor: '{primary.foregroundHover}'
17
15
  },
18
16
  secondary: {
19
17
  background: '{secondary.color}',
20
- color: '{secondary.foreground}'
18
+ color: '{secondary.foreground}',
19
+ iconColor: '{secondary.foreground}',
20
+ iconHoverColor: '{secondary.foregroundHover}'
21
21
  },
22
22
  success: {
23
23
  background: '{success.color}',
24
- color: '{success.foreground}'
24
+ color: '{success.foreground}',
25
+ iconColor: '{success.foreground}',
26
+ iconHoverColor: '{success.foregroundHover}'
25
27
  },
26
28
  warning: {
27
29
  background: '{warn.color}',
28
- color: '{warn.foreground}'
30
+ color: '{warn.foreground}',
31
+ iconColor: '{warn.foreground}',
32
+ iconHoverColor: '{warn.foregroundHover}'
29
33
  },
30
34
  error: {
31
35
  background: '{error.color}',
32
- color: '{error.foreground}'
36
+ color: '{error.foreground}',
37
+ iconColor: '{error.foreground}',
38
+ iconHoverColor: '{error.foregroundHover}'
33
39
  },
34
40
  transfer: {
35
41
  background: '{transfer.color}',
36
- color: '{transfer.foreground}'
42
+ color: '{transfer.foreground}',
43
+ iconColor: '{transfer.foreground}',
44
+ iconHoverColor: '{transfer.foregroundHover}'
37
45
  },
38
46
  removeIcon: {
39
47
  focusRing: {
40
- color: '{focus.ring.color}',
41
48
  shadow: '{form.field.focus.ring.shadow}'
42
- }
49
+ },
43
50
  }
44
51
  }
45
52
 
package/src/lib/primevue/components/chip/sizes/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  const sizes = {
2
2
  borderRadius: '16px',
3
- paddingX: '0.75rem',
4
- paddingY: '0.5rem',
3
+ paddingX: '0.5rem',
4
+ paddingY: '0.25rem',
5
5
  gap: '0.5rem',
6
6
  transitionDuration: '{transition.duration}',
7
7
  removeIcon: {
package/src/lib/primevue/semantic/color-scheme/dark-color.ts CHANGED
@@ -4,70 +4,80 @@ const darkColor = {
4
4
  color: '{amber.500}',
5
5
  hover: '{amber.450}',
6
6
  active: '{amber.400}',
7
- foreground: '{amber.950}'
7
+ foreground: '{amber.950}',
8
+ foregroundHover: '{amber.900}'
8
9
  },
9
10
 
10
11
  secondary: {
11
12
  color: '{gray.900}',
12
13
  hover: '{gray.850}',
13
14
  active: '{gray.750}',
14
- foreground: '{gray.450}'
15
+ foreground: '{gray.450}',
16
+ foregroundHover: '{gray.400}'
15
17
  },
16
18
 
17
19
  success: {
18
20
  color: '{green.600}',
19
21
  hover: '{green.550}',
20
22
  active: '{green.500}',
21
- foreground: '{green.950}'
23
+ foreground: '{green.950}',
24
+ foregroundHover: '{green.900}'
22
25
  },
23
26
 
24
27
  warn: {
25
28
  color: '{orange.450}',
26
29
  hover: '{orange.400}',
27
30
  active: '{orange.350}',
28
- foreground: '{orange.950}'
31
+ foreground: '{orange.950}',
32
+ foregroundHover: '{orange.900}'
29
33
  },
30
34
 
31
35
  error: {
32
36
  color: '{red.400}',
33
37
  hover: '{red.350}',
34
38
  active: '{red.300}',
35
- foreground: '{red.950}'
39
+ foreground: '{red.950}',
40
+ foregroundHover: '{red.900}'
36
41
  },
37
42
 
38
43
  info: {
39
44
  color: '{light-blue.500}',
40
45
  hover: '{light-blue.450}',
41
46
  active: '{light-blue.400}',
42
- foreground: '{light-blue.950}'
47
+ foreground: '{light-blue.950}',
48
+ foregroundHover: '{light-blue.900}'
43
49
  },
44
50
 
45
51
  task: {
46
52
  color: '{blue.500}',
47
53
  hover: '{blue.450}',
48
54
  active: '{blue.400}',
49
- foreground: '{blue.950}'
55
+ foreground: '{blue.950}',
56
+ foregroundHover: '{blue.900}'
50
57
  },
51
58
 
52
59
  transfer: {
53
60
  color: '{indigo.350}',
54
61
  hover: '{indigo.300}',
55
62
  active: '{indigo.250}',
56
- foreground: '{indigo.950}'
63
+ foreground: '{indigo.950}',
64
+ foregroundHover: '{indigo.900}'
57
65
  },
58
66
 
59
67
  chat: {
60
68
  color: '{cyan.600}',
61
69
  hover: '{cyan.550}',
62
70
  active: '{cyan.500}',
63
- foreground: '{cyan.950}'
71
+ foreground: '{cyan.950}',
72
+ foregroundHover: '{cyan.900}'
64
73
  },
65
74
 
66
75
  email: {
67
76
  color: '{blue.600}',
68
77
  hover: '{blue.550}',
69
78
  active: '{blue.500}',
70
- foreground: '{blue.950}'
79
+ foreground: '{blue.950}',
80
+ foregroundHover: '{blue.900}'
71
81
  },
72
82
 
73
83
  highlight: {
package/src/lib/primevue/semantic/color-scheme/light-color.ts CHANGED
@@ -4,70 +4,80 @@ const lightColor = {
4
4
  color: '{amber.500}',
5
5
  hover: '{amber.450}',
6
6
  active: '{amber.400}',
7
- foreground: '{amber.900}'
7
+ foreground: '{amber.900}',
8
+ foregroundHover: '{amber.850}'
8
9
  },
9
10
 
10
11
  secondary: {
11
12
  color: '{gray.150}',
12
13
  hover: '{gray.100}',
13
14
  active: '{gray.50}',
14
- foreground: '{gray.750}'
15
+ foreground: '{gray.750}',
16
+ foregroundHover: '{gray.700}'
15
17
  },
16
18
 
17
19
  success: {
18
20
  color: '{green.600}',
19
21
  hover: '{green.550}',
20
22
  active: '{green.500}',
21
- foreground: '{green.50}'
23
+ foreground: '{green.50}',
24
+ foregroundHover: '{green.100}'
22
25
  },
23
26
 
24
27
  warn: {
25
28
  color: '{orange.450}',
26
29
  hover: '{orange.400}',
27
30
  active: '{orange.350}',
28
- foreground: '{orange.50}'
31
+ foreground: '{orange.50}',
32
+ foregroundHover: '{orange.100}'
29
33
  },
30
34
 
31
35
  error: {
32
36
  color: '{red.400}',
33
37
  hover: '{red.350}',
34
38
  active: '{red.300}',
35
- foreground: '{red.50}'
39
+ foreground: '{red.50}',
40
+ foregroundHover: '{red.100}'
36
41
  },
37
42
 
38
43
  info: {
39
44
  color: '{light-blue.500}',
40
45
  hover: '{light-blue.450}',
41
46
  active: '{light-blue.400}',
42
- foreground: '{light-blue.50}'
47
+ foreground: '{light-blue.50}',
48
+ foregroundHover: '{light-blue.100}'
43
49
  },
44
50
 
45
51
  task: {
46
52
  color: '{blue.500}',
47
53
  hover: '{blue.450}',
48
54
  active: '{blue.400}',
49
- foreground: '{blue.50}'
55
+ foreground: '{blue.50}',
56
+ foregroundHover: '{blue.100}'
50
57
  },
51
58
 
52
59
  transfer: {
53
60
  color: '{indigo.350}',
54
61
  hover: '{indigo.300}',
55
62
  active: '{indigo.250}',
56
- foreground: '{indigo.50}'
63
+ foreground: '{indigo.50}',
64
+ foregroundHover: '{indigo.100}'
57
65
  },
58
66
 
59
67
  chat: {
60
68
  color: '{cyan.600}',
61
69
  hover: '{cyan.550}',
62
70
  active: '{cyan.500}',
63
- foreground: '{cyan.50}'
71
+ foreground: '{cyan.50}',
72
+ foregroundHover: '{cyan.100}'
64
73
  },
65
74
 
66
75
  email: {
67
76
  color: '{blue.600}',
68
77
  hover: '{blue.550}',
69
78
  active: '{blue.500}',
70
- foreground: '{blue.50}'
79
+ foreground: '{blue.50}',
80
+ foregroundHover: '{blue.100}'
71
81
  },
72
82
 
73
83
  highlight: {