@webitel/styleguide 24.12.58 → 24.12.60

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.58",
3
+ "version": "24.12.60",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
@@ -2,8 +2,8 @@ const darkColors = {
2
2
  root: {
3
3
  primary: {
4
4
  background: '{primary.color}',
5
- hoverBackground: '{primary.hover}',
6
- activeBackground: '{primary.active}',
5
+ hoverBackground: '{primary.hover.color}',
6
+ activeBackground: '{primary.active.color}',
7
7
  borderColor: '{primary.color}',
8
8
  hoverBorderColor: '{primary.color}',
9
9
  activeBorderColor: '{primary.color}',
@@ -17,8 +17,8 @@ const darkColors = {
17
17
  },
18
18
  secondary: {
19
19
  background: '{secondary.color}',
20
- hoverBackground: '{secondary.hover}',
21
- activeBackground: '{secondary.active}',
20
+ hoverBackground: '{secondary.hover.color}',
21
+ activeBackground: '{secondary.active.color}',
22
22
  borderColor: '{secondary.color}',
23
23
  hoverBorderColor: '{secondary.color}',
24
24
  activeBorderColor: '{secondary.color}',
@@ -32,8 +32,8 @@ const darkColors = {
32
32
  },
33
33
  success: {
34
34
  background: '{success.color}',
35
- hoverBackground: '{success.hover}',
36
- activeBackground: '{success.active}',
35
+ hoverBackground: '{success.hover.color}',
36
+ activeBackground: '{success.active.color}',
37
37
  borderColor: '{success.color}',
38
38
  hoverBorderColor: '{success.color}',
39
39
  activeBorderColor: '{success.color}',
@@ -47,8 +47,8 @@ const darkColors = {
47
47
  },
48
48
  warn: {
49
49
  background: '{warn.color}',
50
- hoverBackground: '{warn.hover}',
51
- activeBackground: '{warn.active}',
50
+ hoverBackground: '{warn.hover.color}',
51
+ activeBackground: '{warn.active.color}',
52
52
  borderColor: '{warn.color}',
53
53
  hoverBorderColor: '{warn.color}',
54
54
  activeBorderColor: '{warn.color}',
@@ -62,8 +62,8 @@ const darkColors = {
62
62
  },
63
63
  error: {
64
64
  background: '{error.color}',
65
- hoverBackground: '{error.hover}',
66
- activeBackground: '{error.active}',
65
+ hoverBackground: '{error.hover.color}',
66
+ activeBackground: '{error.active.color}',
67
67
  borderColor: '{error.color}',
68
68
  hoverBorderColor: '{error.color}',
69
69
  activeBorderColor: '{error.color}',
@@ -77,8 +77,8 @@ const darkColors = {
77
77
  },
78
78
  info: {
79
79
  background: '{info.color}',
80
- hoverBackground: '{info.hover}',
81
- activeBackground: '{info.active}',
80
+ hoverBackground: '{info.hover.color}',
81
+ activeBackground: '{info.active.color}',
82
82
  borderColor: '{info.color}',
83
83
  hoverBorderColor: '{info.color}',
84
84
  activeBorderColor: '{info.color}',
@@ -96,8 +96,8 @@ const darkColors = {
96
96
  * */
97
97
  job: {
98
98
  background: '{task.color}',
99
- hoverBackground: '{task.hover}',
100
- activeBackground: '{task.active}',
99
+ hoverBackground: '{task.hover.color}',
100
+ activeBackground: '{task.active.color}',
101
101
  borderColor: '{task.color}',
102
102
  hoverBorderColor: '{task.color}',
103
103
  activeBorderColor: '{task.color}',
@@ -111,8 +111,8 @@ const darkColors = {
111
111
  },
112
112
  transfer: {
113
113
  background: '{transfer.color}',
114
- hoverBackground: '{transfer.hover}',
115
- activeBackground: '{transfer.active}',
114
+ hoverBackground: '{transfer.hover.color}',
115
+ activeBackground: '{transfer.active.color}',
116
116
  borderColor: '{transfer.color}',
117
117
  hoverBorderColor: '{transfer.color}',
118
118
  activeBorderColor: '{transfer.color}',
@@ -2,8 +2,8 @@ const lightColors = {
2
2
  root: {
3
3
  primary: {
4
4
  background: '{primary.color}',
5
- hoverBackground: '{primary.hover}',
6
- activeBackground: '{primary.active}',
5
+ hoverBackground: '{primary.hover.color}',
6
+ activeBackground: '{primary.active.color}',
7
7
  borderColor: '{primary.color}',
8
8
  hoverBorderColor: '{primary.color}',
9
9
  activeBorderColor: '{primary.color}',
@@ -17,8 +17,8 @@ const lightColors = {
17
17
  },
18
18
  secondary: {
19
19
  background: '{secondary.color}',
20
- hoverBackground: '{secondary.hover}',
21
- activeBackground: '{secondary.active}',
20
+ hoverBackground: '{secondary.hover.color}',
21
+ activeBackground: '{secondary.active.color}',
22
22
  borderColor: '{secondary.color}',
23
23
  hoverBorderColor: '{secondary.color}',
24
24
  activeBorderColor: '{secondary.color}',
@@ -32,8 +32,8 @@ const lightColors = {
32
32
  },
33
33
  success: {
34
34
  background: '{success.color}',
35
- hoverBackground: '{success.hover}',
36
- activeBackground: '{success.active}',
35
+ hoverBackground: '{success.hover.color}',
36
+ activeBackground: '{success.active.color}',
37
37
  borderColor: '{success.color}',
38
38
  hoverBorderColor: '{success.color}',
39
39
  activeBorderColor: '{success.color}',
@@ -47,8 +47,8 @@ const lightColors = {
47
47
  },
48
48
  warn: {
49
49
  background: '{warn.color}',
50
- hoverBackground: '{warn.hover}',
51
- activeBackground: '{warn.active}',
50
+ hoverBackground: '{warn.hover.color}',
51
+ activeBackground: '{warn.active.color}',
52
52
  borderColor: '{warn.color}',
53
53
  hoverBorderColor: '{warn.color}',
54
54
  activeBorderColor: '{warn.color}',
@@ -62,8 +62,8 @@ const lightColors = {
62
62
  },
63
63
  error: {
64
64
  background: '{error.color}',
65
- hoverBackground: '{error.hover}',
66
- activeBackground: '{error.active}',
65
+ hoverBackground: '{error.hover.color}',
66
+ activeBackground: '{error.active.color}',
67
67
  borderColor: '{error.color}',
68
68
  hoverBorderColor: '{error.color}',
69
69
  activeBorderColor: '{error.color}',
@@ -77,8 +77,8 @@ const lightColors = {
77
77
  },
78
78
  info: {
79
79
  background: '{info.color}',
80
- hoverBackground: '{info.hover}',
81
- activeBackground: '{info.active}',
80
+ hoverBackground: '{info.hover.color}',
81
+ activeBackground: '{info.active.color}',
82
82
  borderColor: '{info.color}',
83
83
  hoverBorderColor: '{info.color}',
84
84
  activeBorderColor: '{info.color}',
@@ -96,8 +96,8 @@ const lightColors = {
96
96
  * */
97
97
  job: {
98
98
  background: '{task.color}',
99
- hoverBackground: '{task.hover}',
100
- activeBackground: '{task.active}',
99
+ hoverBackground: '{task.hover.color}',
100
+ activeBackground: '{task.active.color}',
101
101
  borderColor: '{task.color}',
102
102
  hoverBorderColor: '{task.color}',
103
103
  activeBorderColor: '{task.color}',
@@ -111,8 +111,8 @@ const lightColors = {
111
111
  },
112
112
  transfer: {
113
113
  background: '{transfer.color}',
114
- hoverBackground: '{transfer.hover}',
115
- activeBackground: '{transfer.active}',
114
+ hoverBackground: '{transfer.hover.color}',
115
+ activeBackground: '{transfer.active.color}',
116
116
  borderColor: '{transfer.color}',
117
117
  hoverBorderColor: '{transfer.color}',
118
118
  activeBorderColor: '{transfer.color}',
@@ -2,80 +2,80 @@ const darkColor = {
2
2
 
3
3
  primary: {
4
4
  color: '{amber.500}',
5
- hover: '{amber.450}',
6
- active: '{amber.400}',
5
+ hoverColor: '{amber.450}',
6
+ activeColor: '{amber.400}',
7
7
  foreground: '{amber.950}',
8
8
  foregroundHover: '{amber.900}'
9
9
  },
10
10
 
11
11
  secondary: {
12
12
  color: '{gray.900}',
13
- hover: '{gray.850}',
14
- active: '{gray.750}',
13
+ hoverColor: '{gray.850}',
14
+ activeColor: '{gray.750}',
15
15
  foreground: '{gray.350}',
16
16
  foregroundHover: '{gray.300}'
17
17
  },
18
18
 
19
19
  success: {
20
20
  color: '{green.600}',
21
- hover: '{green.550}',
22
- active: '{green.500}',
21
+ hoverColor: '{green.550}',
22
+ activeColor: '{green.500}',
23
23
  foreground: '{green.950}',
24
24
  foregroundHover: '{green.900}'
25
25
  },
26
26
 
27
27
  warn: {
28
28
  color: '{orange.450}',
29
- hover: '{orange.400}',
30
- active: '{orange.350}',
29
+ hoverColor: '{orange.400}',
30
+ activeColor: '{orange.350}',
31
31
  foreground: '{orange.950}',
32
32
  foregroundHover: '{orange.900}'
33
33
  },
34
34
 
35
35
  error: {
36
36
  color: '{red.400}',
37
- hover: '{red.350}',
38
- active: '{red.300}',
37
+ hoverColor: '{red.350}',
38
+ activeColor: '{red.300}',
39
39
  foreground: '{red.950}',
40
40
  foregroundHover: '{red.900}'
41
41
  },
42
42
 
43
43
  info: {
44
44
  color: '{light-blue.500}',
45
- hover: '{light-blue.450}',
46
- active: '{light-blue.400}',
45
+ hoverColor: '{light-blue.450}',
46
+ activeColor: '{light-blue.400}',
47
47
  foreground: '{light-blue.950}',
48
48
  foregroundHover: '{light-blue.900}'
49
49
  },
50
50
 
51
51
  task: {
52
52
  color: '{blue.500}',
53
- hover: '{blue.450}',
54
- active: '{blue.400}',
53
+ hoverColor: '{blue.450}',
54
+ activeColor: '{blue.400}',
55
55
  foreground: '{blue.950}',
56
56
  foregroundHover: '{blue.900}'
57
57
  },
58
58
 
59
59
  transfer: {
60
60
  color: '{indigo.350}',
61
- hover: '{indigo.300}',
62
- active: '{indigo.250}',
61
+ hoverColor: '{indigo.300}',
62
+ activeColor: '{indigo.250}',
63
63
  foreground: '{indigo.950}',
64
64
  foregroundHover: '{indigo.900}'
65
65
  },
66
66
 
67
67
  chat: {
68
68
  color: '{cyan.600}',
69
- hover: '{cyan.550}',
70
- active: '{cyan.500}',
69
+ hoverColor: '{cyan.550}',
70
+ activeColor: '{cyan.500}',
71
71
  foreground: '{cyan.950}',
72
72
  foregroundHover: '{cyan.900}'
73
73
  },
74
74
 
75
75
  email: {
76
76
  color: '{blue.600}',
77
- hover: '{blue.550}',
78
- active: '{blue.500}',
77
+ hoverColor: '{blue.550}',
78
+ activeColor: '{blue.500}',
79
79
  foreground: '{blue.950}',
80
80
  foregroundHover: '{blue.900}'
81
81
  },
@@ -2,80 +2,80 @@ const lightColor = {
2
2
 
3
3
  primary: {
4
4
  color: '{amber.500}',
5
- hover: '{amber.450}',
6
- active: '{amber.400}',
5
+ hoverColor: '{amber.450}',
6
+ activeColor: '{amber.400}',
7
7
  foreground: '{amber.900}',
8
8
  foregroundHover: '{amber.850}'
9
9
  },
10
10
 
11
11
  secondary: {
12
12
  color: '{gray.150}',
13
- hover: '{gray.100}',
14
- active: '{gray.50}',
13
+ hoverColor: '{gray.100}',
14
+ activeColor: '{gray.50}',
15
15
  foreground: '{gray.750}',
16
16
  foregroundHover: '{gray.700}'
17
17
  },
18
18
 
19
19
  success: {
20
20
  color: '{green.600}',
21
- hover: '{green.550}',
22
- active: '{green.500}',
21
+ hoverColor: '{green.550}',
22
+ activeColor: '{green.500}',
23
23
  foreground: '{green.50}',
24
24
  foregroundHover: '{green.100}'
25
25
  },
26
26
 
27
27
  warn: {
28
28
  color: '{orange.450}',
29
- hover: '{orange.400}',
30
- active: '{orange.350}',
29
+ hoverColor: '{orange.400}',
30
+ activeColor: '{orange.350}',
31
31
  foreground: '{orange.50}',
32
32
  foregroundHover: '{orange.100}'
33
33
  },
34
34
 
35
35
  error: {
36
36
  color: '{red.400}',
37
- hover: '{red.350}',
38
- active: '{red.300}',
37
+ hoverColor: '{red.350}',
38
+ activeColor: '{red.300}',
39
39
  foreground: '{red.50}',
40
40
  foregroundHover: '{red.100}'
41
41
  },
42
42
 
43
43
  info: {
44
44
  color: '{light-blue.500}',
45
- hover: '{light-blue.450}',
46
- active: '{light-blue.400}',
45
+ hoverColor: '{light-blue.450}',
46
+ activeColor: '{light-blue.400}',
47
47
  foreground: '{light-blue.50}',
48
48
  foregroundHover: '{light-blue.100}'
49
49
  },
50
50
 
51
51
  task: {
52
52
  color: '{blue.500}',
53
- hover: '{blue.450}',
54
- active: '{blue.400}',
53
+ hoverColor: '{blue.450}',
54
+ activeColor: '{blue.400}',
55
55
  foreground: '{blue.50}',
56
56
  foregroundHover: '{blue.100}'
57
57
  },
58
58
 
59
59
  transfer: {
60
60
  color: '{indigo.350}',
61
- hover: '{indigo.300}',
62
- active: '{indigo.250}',
61
+ hoverColor: '{indigo.300}',
62
+ activeColor: '{indigo.250}',
63
63
  foreground: '{indigo.50}',
64
64
  foregroundHover: '{indigo.100}'
65
65
  },
66
66
 
67
67
  chat: {
68
68
  color: '{cyan.600}',
69
- hover: '{cyan.550}',
70
- active: '{cyan.500}',
69
+ hoverColor: '{cyan.550}',
70
+ activeColor: '{cyan.500}',
71
71
  foreground: '{cyan.50}',
72
72
  foregroundHover: '{cyan.100}'
73
73
  },
74
74
 
75
75
  email: {
76
76
  color: '{blue.600}',
77
- hover: '{blue.550}',
78
- active: '{blue.500}',
77
+ hoverColor: '{blue.550}',
78
+ activeColor: '{blue.500}',
79
79
  foreground: '{blue.50}',
80
80
  foregroundHover: '{blue.100}'
81
81
  },
@@ -5,7 +5,7 @@ export default {
5
5
  },
6
6
  popover: {
7
7
  borderRadius: '0.5rem',
8
- padding: '0.75rem',
8
+ padding: '0.5rem',
9
9
  },
10
10
  modal: {
11
11
  borderRadius: '{border.radius.xl}',