@webitel/styleguide 24.12.64 → 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 +17 -11
  3. package/src/lib/primevue/components/table/colors/light/index.ts +16 -10
  4. package/src/lib/primevue/components/table/sizes/index.ts +1 -1
  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.64",
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: '#1F222E',
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}'
@@ -22,11 +22,11 @@ const darkColors = {
22
22
  },
23
23
  row: {
24
24
  stripedBackground: '{surface.950}',
25
- background: 'transparent',
26
- hoverBackground: '{content.hover.background}',
25
+ background: '{content.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: '#3D455C',
37
+ borderColor: '{surface.700}',
38
38
  selectedBorderColor: '{primary.900}'
39
39
  },
40
40
  footerCell: {
@@ -82,7 +82,13 @@ const darkColors = {
82
82
  sortIcon: {
83
83
  color: '{text.muted.color}',
84
84
  hoverColor: '{text.hover.muted.color}',
85
- }
85
+ },
86
+ frozenColumn: {
87
+ background: '{content.background}',
88
+ },
89
+ columnResizer: {
90
+ background: '{surface.800}'
91
+ },
86
92
  }
87
93
 
88
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: '#E0E3EB',
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: '#E0E3EB',
37
+ borderColor: '{surface.100}',
38
38
  selectedBorderColor: '{primary.100}'
39
39
  },
40
40
  footerCell: {
@@ -82,7 +82,13 @@ const lightColors = {
82
82
  sortIcon: {
83
83
  color: '{text.muted.color}',
84
84
  hoverColor: '{text.hover.muted.color}',
85
- }
85
+ },
86
+ frozenColumn: {
87
+ background: '{content.background}',
88
+ },
89
+ columnResizer: {
90
+ background: '{surface.150}'
91
+ },
86
92
  }
87
93
 
88
94
  export default lightColors
package/src/lib/primevue/components/table/sizes/index.ts CHANGED
@@ -69,7 +69,7 @@ const sizes = {
69
69
  }
70
70
  },
71
71
  columnResizer: {
72
- width: '0.5rem'
72
+ width: '1px'
73
73
  },
74
74
  resizeIndicator: {
75
75
  width: '1px',
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