@webitel/styleguide 24.12.50 → 24.12.52

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.50",
3
+ "version": "24.12.52",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
@@ -3,7 +3,7 @@ const sizes = {
3
3
  roundedBorderRadius: '2rem',
4
4
  gap: '0.5rem',
5
5
  paddingX: '1rem',
6
- paddingY: '0.625rem',
6
+ paddingY: '0.5rem',
7
7
  iconOnlyWidth: '3rem',
8
8
  sm: {
9
9
  fontSize: '{form.field.sm.font.size}',
@@ -1,7 +1,7 @@
1
1
  const sizes = {
2
2
  padding: '{overlay.popover.padding}',
3
3
  gutter: '0.5rem',
4
- arrowOffset: '1.25rem',
4
+ arrowOffset: '1rem',
5
5
  borderRadius: '{overlay.popover.borderRadius}',
6
6
  shadow: '{shadow.xs}',
7
7
  };
@@ -1,6 +1,6 @@
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
5
  borderRadius: '{overlay.popover.border.radius}',
6
6
  shadow: '{shadow.xs}',
@@ -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: {
@@ -4,70 +4,80 @@ const lightColor = {
4
4
  color: '{amber.500}',
5
5
  hover: '{amber.450}',
6
6
  active: '{amber.400}',
7
- foreground: '{amber.50}'
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: {
@@ -3,8 +3,8 @@ export default {
3
3
  paddingY: '0.5rem',
4
4
  sm: {
5
5
  fontSize: '0.875rem',
6
- paddingX: '0.625rem',
7
- paddingY: '0.375rem'
6
+ paddingX: '0.5rem',
7
+ paddingY: '0.25rem'
8
8
  },
9
9
  lg: {
10
10
  fontSize: '1.125rem',
@@ -4,7 +4,7 @@ export default {
4
4
  shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
5
5
  },
6
6
  popover: {
7
- borderRadius: '1rem',
7
+ borderRadius: '0.5rem',
8
8
  padding: '0.75rem',
9
9
  },
10
10
  modal: {