@webitel/styleguide 24.12.62 → 24.12.64

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.62",
3
+ "version": "24.12.64",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
@@ -8,7 +8,7 @@ const darkColors = {
8
8
  color: '{content.color}',
9
9
  },
10
10
  headerCell: {
11
- background: '{content.background}',
11
+ background: '#1F222E',
12
12
  hoverBackground: '{content.hover.background}',
13
13
  selectedBackground: '{highlight.background}',
14
14
  borderColor: '{datatable.border.color}',
@@ -22,7 +22,7 @@ const darkColors = {
22
22
  },
23
23
  row: {
24
24
  stripedBackground: '{surface.950}',
25
- background: '{content.background}',
25
+ background: 'transparent',
26
26
  hoverBackground: '{content.hover.background}',
27
27
  selectedBackground: '{highlight.background}',
28
28
  color: '{content.color}',
@@ -34,7 +34,7 @@ const darkColors = {
34
34
  }
35
35
  },
36
36
  bodyCell: {
37
- borderColor: '{datatable.border.color}',
37
+ borderColor: '#3D455C',
38
38
  selectedBorderColor: '{primary.900}'
39
39
  },
40
40
  footerCell: {
@@ -47,6 +47,38 @@ const darkColors = {
47
47
  borderColor: '{datatable.border.color}',
48
48
  color: '{content.color}',
49
49
  },
50
+ resizeIndicator: {
51
+ color: '{primary.color}'
52
+ },
53
+ filter: {
54
+ overlaySelect: {
55
+ background: '{overlay.select.background}',
56
+ borderColor: '{overlay.select.border.color}',
57
+ color: '{overlay.select.color}',
58
+ shadow: '{overlay.select.shadow}'
59
+ },
60
+ overlayPopover: {
61
+ background: '{overlay.popover.background}',
62
+ borderColor: '{overlay.popover.border.color}',
63
+ color: '{overlay.popover.color}',
64
+ shadow: '{overlay.popover.shadow}',
65
+ },
66
+ rule: {
67
+ borderColor: '{content.border.color}'
68
+ },
69
+ constraint: {
70
+ focusBackground: '{list.option.focus.background}',
71
+ selectedBackground: '{list.option.selected.background}',
72
+ selectedFocusBackground: '{list.option.selected.focus.background}',
73
+ color: '{list.option.color}',
74
+ focusColor: '{list.option.focus.color}',
75
+ selectedColor: '{list.option.selected.color}',
76
+ selectedFocusColor: '{list.option.selected.focus.color}',
77
+ separator: {
78
+ borderColor: '{content.border.color}'
79
+ },
80
+ }
81
+ },
50
82
  sortIcon: {
51
83
  color: '{text.muted.color}',
52
84
  hoverColor: '{text.hover.muted.color}',
@@ -8,7 +8,7 @@ const lightColors = {
8
8
  color: '{content.color}',
9
9
  },
10
10
  headerCell: {
11
- background: '{content.background}',
11
+ background: '#E0E3EB',
12
12
  hoverBackground: '{content.hover.background}',
13
13
  selectedBackground: '{highlight.background}',
14
14
  borderColor: '{datatable.border.color}',
@@ -34,7 +34,7 @@ const lightColors = {
34
34
  }
35
35
  },
36
36
  bodyCell: {
37
- borderColor: '{datatable.border.color}',
37
+ borderColor: '#E0E3EB',
38
38
  selectedBorderColor: '{primary.100}'
39
39
  },
40
40
  footerCell: {
@@ -47,6 +47,38 @@ const lightColors = {
47
47
  borderColor: '{datatable.border.color}',
48
48
  color: '{content.color}',
49
49
  },
50
+ resizeIndicator: {
51
+ color: '{primary.color}'
52
+ },
53
+ filter: {
54
+ overlaySelect: {
55
+ background: '{overlay.select.background}',
56
+ borderColor: '{overlay.select.border.color}',
57
+ color: '{overlay.select.color}',
58
+ shadow: '{overlay.select.shadow}'
59
+ },
60
+ overlayPopover: {
61
+ background: '{overlay.popover.background}',
62
+ borderColor: '{overlay.popover.border.color}',
63
+ color: '{overlay.popover.color}',
64
+ shadow: '{overlay.popover.shadow}',
65
+ },
66
+ rule: {
67
+ borderColor: '{content.border.color}'
68
+ },
69
+ constraint: {
70
+ focusBackground: '{list.option.focus.background}',
71
+ selectedBackground: '{list.option.selected.background}',
72
+ selectedFocusBackground: '{list.option.selected.focus.background}',
73
+ color: '{list.option.color}',
74
+ focusColor: '{list.option.focus.color}',
75
+ selectedColor: '{list.option.selected.color}',
76
+ selectedFocusColor: '{list.option.selected.focus.color}',
77
+ separator: {
78
+ borderColor: '{content.border.color}'
79
+ },
80
+ }
81
+ },
50
82
  sortIcon: {
51
83
  color: '{text.muted.color}',
52
84
  hoverColor: '{text.hover.muted.color}',
@@ -4,7 +4,7 @@ const sizes = {
4
4
  },
5
5
  header: {
6
6
  borderWidth: '0 0 1px 0',
7
- padding: '0.75rem 1rem',
7
+ padding: '0.5rem',
8
8
  sm: {
9
9
  padding: '0.375rem 0.5rem'
10
10
  },
@@ -14,7 +14,7 @@ const sizes = {
14
14
  },
15
15
  headerCell: {
16
16
  gap: '0.5rem',
17
- padding: '0.75rem 1rem',
17
+ padding: '0.5rem',
18
18
  focusRing: {
19
19
  width: '{focus.ring.width}',
20
20
  style: '{focus.ring.style}',
@@ -38,7 +38,7 @@ const sizes = {
38
38
  }
39
39
  },
40
40
  bodyCell: {
41
- padding: '0.75rem 1rem',
41
+ padding: '0.5rem',
42
42
  sm: {
43
43
  padding: '0.375rem 0.5rem'
44
44
  },
@@ -47,7 +47,7 @@ const sizes = {
47
47
  }
48
48
  },
49
49
  footerCell: {
50
- padding: '0.75rem 1rem',
50
+ padding: '0.5rem',
51
51
  sm: {
52
52
  padding: '0.375rem 0.5rem'
53
53
  },
@@ -60,7 +60,7 @@ const sizes = {
60
60
  },
61
61
  footer: {
62
62
  borderWidth: '0 0 1px 0',
63
- padding: '0.75rem 1rem',
63
+ padding: '0.5rem',
64
64
  sm: {
65
65
  padding: '0.375rem 0.5rem'
66
66
  },
@@ -68,6 +68,30 @@ const sizes = {
68
68
  padding: '1rem 1.25rem'
69
69
  }
70
70
  },
71
+ columnResizer: {
72
+ width: '0.5rem'
73
+ },
74
+ resizeIndicator: {
75
+ width: '1px',
76
+ },
77
+ filter: {
78
+ inlineGap: '0.5rem',
79
+ overlaySelect: {
80
+ borderRadius: '{overlay.select.border.radius}',
81
+ },
82
+ overlayPopover: {
83
+ padding: '{overlay.popover.padding}',
84
+ gap: '0.5rem'
85
+ },
86
+ constraintList: {
87
+ padding: '{list.padding}',
88
+ gap: '{list.gap}'
89
+ },
90
+ constraint: {
91
+ padding: '{list.option.padding}',
92
+ borderRadius: '{list.option.border.radius}'
93
+ }
94
+ },
71
95
  sortIcon: {
72
96
  size: '0.875rem'
73
97
  }