@c8y/style 1022.6.1 → 1022.9.2

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 (12) hide show
  1. package/package.json +1 -1
  2. package/styles/_button-groups.less +1 -1
  3. package/styles/_c8y-message-banner.less +1 -1
  4. package/styles/_card.less +1 -1
  5. package/styles/_status.less +3 -3
  6. package/styles/utilities/_contextual-colors.less +3 -3
  7. package/variables/_badge-vars.less +1 -1
  8. package/variables/_color-vars.less +1 -1
  9. package/variables/_label-vars.less +1 -1
  10. package/variables/_tag-vars.less +1 -1
  11. package/variables/tokens/c8y-design-tokens-dark.less +6 -7
  12. package/variables/tokens/c8y-design-tokens.less +10 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1022.6.1",
3
+ "version": "1022.9.2",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/styles/_button-groups.less CHANGED
@@ -34,7 +34,7 @@
34
34
  // override active states inside the btn-group to match delite guidelines
35
35
  &.active {
36
36
  background-color: var(--c8y-btn-default-background-active);
37
- color: var(--c8y-brand-complementary);
37
+ color: var(--c8y-btn-default-color-active);
38
38
  }
39
39
  &:focus {
40
40
  outline: 2px solid @component-color-focus;
package/styles/_c8y-message-banner.less CHANGED
@@ -18,7 +18,7 @@
18
18
  border: 2px solid @status-info;
19
19
  }
20
20
  &.alert-warning{
21
- background-color: @status-warning-lightest;
21
+ background-color: @status-warning-light;
22
22
  border: 2px solid @status-warning;
23
23
  }
24
24
  &.alert-danger{
package/styles/_card.less CHANGED
@@ -74,7 +74,7 @@
74
74
  }
75
75
 
76
76
  &.warning {
77
- background-color: @status-warning-lightest;
77
+ background-color: @status-warning-light;
78
78
  color: @status-warning-dark;
79
79
  --c8y-component-color-text-muted: @status-warning;
80
80
  --c8y-component-border-color: rgba(black, 0.1);
package/styles/_status.less CHANGED
@@ -26,11 +26,11 @@
26
26
  color: @status-warning;
27
27
  }
28
28
  .color.minor {
29
- color: @status-warning-light;
29
+ color: @status-warning-high;
30
30
  }
31
31
  .status.minor {
32
- --c8y-icon-stroke-color: @status-warning-dark;
33
- color: @status-warning-light;
32
+ --c8y-icon-stroke-color: var(--c8y-palette-orange-10);
33
+ color: @status-warning-high;
34
34
  }
35
35
 
36
36
  .status.major {
package/styles/utilities/_contextual-colors.less CHANGED
@@ -64,8 +64,8 @@
64
64
  .text-warning-light {
65
65
  .text-emphasis-variant(@status-warning-light);
66
66
  }
67
- .text-warning-lightest {
68
- .text-emphasis-variant(@status-warning-lightest);
67
+ .text-warning-high {
68
+ .text-emphasis-variant(@status-warning-high);
69
69
  }
70
70
  .text-warning-dark {
71
71
  .text-emphasis-variant(@status-warning-dark);
@@ -198,7 +198,7 @@
198
198
  .bg-variant(@status-warning-light);
199
199
  }
200
200
  .bg-warning-lightest {
201
- .bg-variant(@status-warning-lightest);
201
+ .bg-variant(@status-warning-high);
202
202
  }
203
203
  .bg-warning-dark {
204
204
  .bg-variant(@status-warning-dark);
package/variables/_badge-vars.less CHANGED
@@ -1,6 +1,6 @@
1
1
  @badge-background-default: @gray-80;
2
2
  @badge-background-success: @status-success-light;
3
- @badge-background-warning: @status-warning-lightest;
3
+ @badge-background-warning: @status-warning-light;
4
4
  @badge-background-danger: @status-danger-light;
5
5
  @badge-background-info: @status-info-light;
6
6
  @badge-background-system: @status-system;
package/variables/_color-vars.less CHANGED
@@ -44,7 +44,7 @@
44
44
  @status-danger-dark: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
45
45
  @status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
46
46
  @status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
47
- @status-warning-lightest: var(--c8y-palette-status-warning-high);
47
+ @status-warning-high: var(--c8y-palette-status-warning-high);
48
48
  @status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
49
49
  @status-system: var(--palette-status-system, var(--c8y-palette-status-system));
50
50
 
package/variables/_label-vars.less CHANGED
@@ -16,7 +16,7 @@
16
16
  @label-background-info: @status-info-light;
17
17
  @label-color-info: @status-info-dark;
18
18
  //** Warning label background color
19
- @label-background-warning: @status-warning-lightest;
19
+ @label-background-warning: @status-warning-light;
20
20
  @label-color-warning: @status-warning-dark;
21
21
  //** Danger label background color
22
22
  @label-background-danger: @status-danger-light;
package/variables/_tag-vars.less CHANGED
@@ -17,7 +17,7 @@
17
17
  @tag--color-info: @status-info-dark;
18
18
 
19
19
  // Warning tag background color
20
- @tag--background-warning: @status-warning-lightest;
20
+ @tag--background-warning: @status-warning-light;
21
21
  @tag--color-warning: @status-warning-dark;
22
22
 
23
23
  // Danger tag background color
package/variables/tokens/c8y-design-tokens-dark.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 01 Jul 2025 20:03:54 GMT
3
+ // Generated on Thu, 10 Jul 2025 11:02:26 GMT
4
4
 
5
5
  .c8y-dark-theme {
6
6
 
@@ -31,9 +31,9 @@
31
31
  --c8y-palette-status-success-light: #007700;
32
32
  --c8y-palette-status-system: var(--c8y-palette-gray-40);
33
33
  --c8y-palette-status-warning: #E07800;
34
- --c8y-palette-status-warning-dark: #1e1f1f;
35
- --c8y-palette-status-warning-high: #fff1e0;
36
- --c8y-palette-status-warning-light: #ECBE23;
34
+ --c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
35
+ --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
36
+ --c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
37
37
 
38
38
  /* SECTION: Semantic - Brand */
39
39
  --c8y-brand-10: var(--c8y-palette-yellow-10);
@@ -47,7 +47,6 @@
47
47
  --c8y-brand-accent: var(--c8y-palette-blue-30);
48
48
  --c8y-brand-accent-dark: var(--c8y-palette-blue-10);
49
49
  --c8y-brand-accent-light: var(--c8y-palette-blue-80);
50
- --c8y-brand-complementary: var(--c8y-brand-70);
51
50
  --c8y-brand-dark: var(--c8y-brand-10);
52
51
  --c8y-brand-light: var(--c8y-brand-70);
53
52
  --c8y-brand-primary: var(--c8y-brand-60);
@@ -65,8 +64,8 @@
65
64
  --c8y-level-2: var(--c8y-palette-gray-80);
66
65
  --c8y-level-3: var(--c8y-palette-gray-70);
67
66
  --c8y-level-4: var(--c8y-palette-gray-60);
68
- --c8y-link-color: var(--c8y-brand-primary);
69
- --c8y-link-hover-color: var(--c8y-brand-primary);
67
+ --c8y-link-color: var(--link-color,var(--brand-primary, var(--c8y-brand-primary)));
68
+ --c8y-link-hover-color: var(--link-hover-color, var(--brand-primary, var(--c8y-brand-primary)));
70
69
  --c8y-text-color: var(--c8y-palette-gray-30);
71
70
  --c8y-text-muted: var(--c8y-palette-gray-40);
72
71
 
package/variables/tokens/c8y-design-tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 01 Jul 2025 20:03:54 GMT
3
+ // Generated on Thu, 10 Jul 2025 11:02:26 GMT
4
4
 
5
5
  :root, .c8y-light-theme {
6
6
 
@@ -74,8 +74,8 @@
74
74
  --c8y-palette-status-system: var(--c8y-palette-gray-40);
75
75
  --c8y-palette-status-warning: var(--c8y-palette-orange-50);
76
76
  --c8y-palette-status-warning-dark: var(--c8y-palette-orange-10);
77
- --c8y-palette-status-warning-high: var(--c8y-palette-orange-80);
78
- --c8y-palette-status-warning-light: var(--c8y-palette-yellow-60);
77
+ --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
78
+ --c8y-palette-status-warning-light: var(--c8y-palette-orange-80);
79
79
 
80
80
  /* SECTION: Primitives - Typography */
81
81
  --c8y-font-family-base: var(--c8y-font-family-sans-serif);
@@ -114,7 +114,7 @@
114
114
  --c8y-brand-dark: var(--c8y-palette-gray-20);
115
115
  --c8y-brand-light: var(--c8y-palette-green-60);
116
116
  --c8y-brand-primary: var(--c8y-palette-green-40);
117
- --c8y-brand-realtime-added: var(--c8y-palette-green-80);
117
+ --c8y-brand-realtime-added: var(--c8y-brand-80);
118
118
 
119
119
  /* SECTION: Semantic - Defaults */
120
120
  --c8y-abbr-border-color: var(--c8y-palette-gray-40);
@@ -129,8 +129,8 @@
129
129
  --c8y-level-2: var(--c8y-palette-gray-90);
130
130
  --c8y-level-3: var(--c8y-palette-gray-80);
131
131
  --c8y-level-4: var(--c8y-palette-gray-70);
132
- --c8y-link-color: var(--c8y-brand-primary);
133
- --c8y-link-hover-color: var(--c8y-brand-primary);
132
+ --c8y-link-color: var(--link-color,var(--brand-primary, var(--c8y-brand-primary)));
133
+ --c8y-link-hover-color: var(--link-hover-color, var(--brand-primary, var(--c8y-brand-primary)));
134
134
  --c8y-text-color: var(--c8y-palette-gray-10);
135
135
  --c8y-text-muted: var(--c8y-palette-gray-40);
136
136
 
@@ -221,7 +221,7 @@
221
221
  --c8y-btn-default-border-color-default: var(--brand-primary, var(--c8y-brand-primary));
222
222
  --c8y-btn-default-border-color-focus: var(--brand-primary, var(--c8y-brand-primary));
223
223
  --c8y-btn-default-border-color-hover: var(--brand-primary, var(--c8y-brand-primary));
224
- --c8y-btn-default-color-active: var(--brand-primary, var(--c8y-brand-primary));
224
+ --c8y-btn-default-color-active: var(--brand-dark, var(--c8y-brand-dark));
225
225
  --c8y-btn-default-color-default: var(--brand-primary, var(--c8y-brand-primary));
226
226
  --c8y-btn-default-color-focus: var(--brand-primary, var(--c8y-brand-primary));
227
227
  --c8y-btn-default-color-hover: var(--brand-primary, var(--c8y-brand-primary));
@@ -537,10 +537,10 @@
537
537
  --c8y-root-component-form-label-color: var(--c8y-form-label-color);
538
538
  --c8y-root-component-form-legend-color: var(--c8y-form-legend-color);
539
539
  --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
540
- --c8y-root-component-icon-dark-color-dark: var(--c8y-brand-dark);
541
- --c8y-root-component-icon-dark-color-light: var(--c8y-brand-60);
540
+ --c8y-root-component-icon-dark-color-dark: var(--brand-dark, var(--c8y-brand-dark));
541
+ --c8y-root-component-icon-dark-color-light: var(--brand-light, var(--c8y-brand-light));
542
542
  --c8y-root-component-icon-white-color-dark: var(--c8y-palette-high);
543
- --c8y-root-component-icon-white-color-light: var(--c8y-brand-60);
543
+ --c8y-root-component-icon-white-color-light: var(--brand-light, var(--c8y-brand-light));
544
544
  --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
545
545
  --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
546
546
  --c8y-root-component-scrollbar-thumb-default: rgba(57, 72, 82, .2);