@webitel/styleguide 24.12.63 → 24.12.65

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/lib/primevue/components/table/colors/dark/index.ts +48 -10
  3. package/src/lib/primevue/components/table/colors/light/index.ts +48 -10
  4. package/src/lib/primevue/components/table/sizes/index.ts +29 -5
  5. package/src/lib/primevue/semantic/color-scheme/content/dark/index.ts +2 -2
  6. package/src/lib/primevue/semantic/color-scheme/content/light/index.ts +2 -2
  7. package/src/lib/primevue/semantic/color-scheme/index.ts +3 -0
  8. package/src/lib/primevue/semantic/color-scheme/table/dark/index.ts +8 -0
  9. package/src/lib/primevue/semantic/color-scheme/table/index.ts +9 -0
  10. package/src/lib/primevue/semantic/color-scheme/table/light/index.ts +8 -0
  11. package/src/lib/styleguide/colors/_colors.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.63",
3
+ "version": "24.12.65",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
package/src/lib/primevue/components/table/colors/dark/index.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  const darkColors = {
2
2
  root: {
3
- borderColor: '{surface.800}'
3
+ borderColor: '{content.borderColor}'
4
4
  },
5
5
  header: {
6
6
  background: '{content.background}',
@@ -8,13 +8,13 @@ const darkColors = {
8
8
  color: '{content.color}',
9
9
  },
10
10
  headerCell: {
11
- background: '{content.background}',
12
- hoverBackground: '{content.hover.background}',
13
- selectedBackground: '{highlight.background}',
11
+ background: '{surface.850}',
12
+ hoverBackground: '{surface.800}',
13
+ selectedBackground: '{surface.900}',
14
14
  borderColor: '{datatable.border.color}',
15
15
  color: '{content.color}',
16
- hoverColor: '{content.hover.color}',
17
- selectedColor: '{highlight.color}',
16
+ hoverColor: '{content.hoverColor}',
17
+ selectedColor: '{content.color}',
18
18
  focusRing: {
19
19
  color: '{focus.ring.color}',
20
20
  shadow: '{focus.ring.shadow}'
@@ -23,10 +23,10 @@ const darkColors = {
23
23
  row: {
24
24
  stripedBackground: '{surface.950}',
25
25
  background: '{content.background}',
26
- hoverBackground: '{content.hover.background}',
26
+ hoverBackground: '{content.hoverBackground}',
27
27
  selectedBackground: '{highlight.background}',
28
28
  color: '{content.color}',
29
- hoverColor: '{content.hover.color}',
29
+ hoverColor: '{content.hoverColor}',
30
30
  selectedColor: '{highlight.color}',
31
31
  focusRing: {
32
32
  color: '{focus.ring.color}',
@@ -34,7 +34,7 @@ const darkColors = {
34
34
  }
35
35
  },
36
36
  bodyCell: {
37
- borderColor: '{datatable.border.color}',
37
+ borderColor: '{surface.700}',
38
38
  selectedBorderColor: '{primary.900}'
39
39
  },
40
40
  footerCell: {
@@ -47,10 +47,48 @@ 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}',
53
- }
85
+ },
86
+ frozenColumn: {
87
+ background: '{content.background}',
88
+ },
89
+ columnResizer: {
90
+ background: '{surface.800}'
91
+ },
54
92
  }
55
93
 
56
94
  export default darkColors
package/src/lib/primevue/components/table/colors/light/index.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  const lightColors = {
2
2
  root: {
3
- borderColor: '{content.border.color}'
3
+ borderColor: '{content.borderColor}'
4
4
  },
5
5
  header: {
6
6
  background: '{content.background}',
@@ -8,13 +8,13 @@ const lightColors = {
8
8
  color: '{content.color}',
9
9
  },
10
10
  headerCell: {
11
- background: '{content.background}',
12
- hoverBackground: '{content.hover.background}',
13
- selectedBackground: '{highlight.background}',
11
+ background: '{surface.100}',
12
+ hoverBackground: '{surface.50}',
13
+ selectedBackground: '{surface.150}',
14
14
  borderColor: '{datatable.border.color}',
15
15
  color: '{content.color}',
16
- hoverColor: '{content.hover.color}',
17
- selectedColor: '{highlight.color}',
16
+ hoverColor: '{content.hoverColor}',
17
+ selectedColor: '{content.color}',
18
18
  focusRing: {
19
19
  color: '{focus.ring.color}',
20
20
  shadow: '{focus.ring.shadow}'
@@ -23,10 +23,10 @@ const lightColors = {
23
23
  row: {
24
24
  stripedBackground: '{surface.50}',
25
25
  background: '{content.background}',
26
- hoverBackground: '{content.hover.background}',
26
+ hoverBackground: '{content.hoverBackground}',
27
27
  selectedBackground: '{highlight.background}',
28
28
  color: '{content.color}',
29
- hoverColor: '{content.hover.color}',
29
+ hoverColor: '{content.hoverColor}',
30
30
  selectedColor: '{highlight.color}',
31
31
  focusRing: {
32
32
  color: '{focus.ring.color}',
@@ -34,7 +34,7 @@ const lightColors = {
34
34
  }
35
35
  },
36
36
  bodyCell: {
37
- borderColor: '{datatable.border.color}',
37
+ borderColor: '{surface.100}',
38
38
  selectedBorderColor: '{primary.100}'
39
39
  },
40
40
  footerCell: {
@@ -47,10 +47,48 @@ 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}',
53
- }
85
+ },
86
+ frozenColumn: {
87
+ background: '{content.background}',
88
+ },
89
+ columnResizer: {
90
+ background: '{surface.150}'
91
+ },
54
92
  }
55
93
 
56
94
  export default lightColors
package/src/lib/primevue/components/table/sizes/index.ts CHANGED
@@ -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: '1px'
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
  }
package/src/lib/primevue/semantic/color-scheme/content/dark/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export default {
2
2
  content: {
3
- background: '{surface.900}',
4
- hoverBackground: '{surface.800}',
3
+ background: '{surface.800}',
4
+ hoverBackground: '{surface.750}',
5
5
  borderColor: '{surface.700}',
6
6
  color: '{text.color}',
7
7
  hoverColor: '{text.hoverColor}',
package/src/lib/primevue/semantic/color-scheme/content/light/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export default {
2
2
  content: {
3
3
  background: '{surface.0}',
4
- hoverBackground: '{surface.100}',
5
- borderColor: '{surface.200}',
4
+ hoverBackground: '{surface.50}',
5
+ borderColor: '{surface.100}',
6
6
  color: '{text.color}',
7
7
  hoverColor: '{text.hoverColor}',
8
8
  hoverMutedColor: '{text.hoverMutedColor}'
package/src/lib/primevue/semantic/color-scheme/index.ts CHANGED
@@ -10,6 +10,7 @@ import surface from './surface';
10
10
  import content from './content';
11
11
  import list from './list';
12
12
  import navigation from './navigation';
13
+ import table from './table';
13
14
 
14
15
  const colorScheme = {
15
16
  light: {
@@ -24,6 +25,7 @@ const colorScheme = {
24
25
  ...content.colorScheme.light,
25
26
  ...list.colorScheme.light,
26
27
  ...navigation.colorScheme.light,
28
+ ...table.colorScheme.light,
27
29
  },
28
30
  dark: {
29
31
  ...palette,
@@ -37,6 +39,7 @@ const colorScheme = {
37
39
  ...content.colorScheme.dark,
38
40
  ...list.colorScheme.dark,
39
41
  ...navigation.colorScheme.dark,
42
+ ...table.colorScheme.dark,
40
43
  },
41
44
  };
42
45
 
package/src/lib/primevue/semantic/color-scheme/table/dark/index.ts ADDED
@@ -0,0 +1,8 @@
1
+ export default {
2
+ datatable: {
3
+ border: {
4
+ borderColor: '{surface.700}',
5
+ color: '{surface.700}'
6
+ }
7
+ }
8
+ }
package/src/lib/primevue/semantic/color-scheme/table/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import light from "./light";
2
+ import dark from "./dark";
3
+
4
+ export default {
5
+ colorScheme: {
6
+ light,
7
+ dark,
8
+ },
9
+ };
package/src/lib/primevue/semantic/color-scheme/table/light/index.ts ADDED
@@ -0,0 +1,8 @@
1
+ export default {
2
+ datatable: {
3
+ border: {
4
+ borderColor: '{surface.100}',
5
+ color: '{surface.100}'
6
+ }
7
+ }
8
+ }
package/src/lib/styleguide/colors/_colors.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  --dp-1-surface-color: hsl(225, 20%, 77%);
31
31
 
32
32
  // content wrapper
33
- --content-wrapper-color: var(--dp-20-surface-color);
33
+ --content-wrapper-color: var(--p-content-background);
34
34
  --content-wrapper-hover-color: var(--dp-24-surface-color);
35
35
 
36
36
  // success colors