@c8y/style 1021.80.1 → 1022.3.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 (81) hide show
  1. package/branding-login.less +11 -0
  2. package/img/alarms/alarm-list-widget.png +0 -0
  3. package/img/dashboard-details-advanced-tab.png +0 -0
  4. package/img/data-points-table-widget.png +0 -0
  5. package/img/html-widget-pr.png +0 -0
  6. package/img/html-widget-preview.png +0 -0
  7. package/img/info-gauge-widget-pr.png +0 -0
  8. package/img/linear-gauge-widget-pr.png +0 -0
  9. package/img/map-widget-pr.png +0 -0
  10. package/img/markdown-widget.png +0 -0
  11. package/img/quick-links-widget.png +0 -0
  12. package/login.less +3 -0
  13. package/markdown-files/dashboard-details-import-export-tab.md +84 -0
  14. package/markdown-files/html-widget-preview.md +58 -0
  15. package/package.json +1 -1
  16. package/styles/_alerts.less +2 -1
  17. package/styles/_app-switcher.less +1 -0
  18. package/styles/_badges.less +11 -4
  19. package/styles/_bottom-drawer.less +7 -6
  20. package/styles/_boxed-label.less +21 -0
  21. package/styles/_buttons.less +20 -5
  22. package/styles/_c8y-action-bar.less +2 -2
  23. package/styles/_c8y-asset-selector-miller.less +3 -0
  24. package/styles/_c8y-asset-selector.less +12 -1
  25. package/styles/_c8y-child-assets-selector.less +2 -1
  26. package/styles/_c8y-countdown-interval.less +2 -2
  27. package/styles/_c8y-dashboard-style.less +9 -2
  28. package/styles/_c8y-empty-state.less +4 -0
  29. package/styles/_c8y-icons.less +7 -2
  30. package/styles/_c8y-list-group.less +25 -2
  31. package/styles/_c8y-pulse.less +2 -2
  32. package/styles/_c8y-right-drawer.less +1 -1
  33. package/styles/_c8y-selectize.less +5 -5
  34. package/styles/_c8y-utils.less +5 -3
  35. package/styles/_card.less +1 -2
  36. package/styles/_cards-layout.less +13 -12
  37. package/styles/_code.less +14 -6
  38. package/styles/_dashboard-widgets.less +4 -1
  39. package/styles/_data-grid.less +96 -5
  40. package/styles/_dropdowns.less +131 -26
  41. package/styles/_forms.less +1 -12
  42. package/styles/_input-groups.less +19 -5
  43. package/styles/_layouts.less +24 -5
  44. package/styles/_list-group.less +0 -3
  45. package/styles/_main-header.less +3 -1
  46. package/styles/_markdown-content.less +5 -0
  47. package/styles/_modals.less +11 -1
  48. package/styles/_navbar.less +0 -1
  49. package/styles/_navigator.less +2 -3
  50. package/styles/_page-tabs.less +1 -0
  51. package/styles/_popovers.less +1 -2
  52. package/styles/_quick-links-widget.less +38 -0
  53. package/styles/_smartrules.less +7 -6
  54. package/styles/_spinner-snake.less +2 -1
  55. package/styles/_split-view.less +7 -1
  56. package/styles/_static-assets-file-picker.less +1 -1
  57. package/styles/_tabs.less +10 -4
  58. package/styles/_tag.less +5 -0
  59. package/styles/index.less +3 -0
  60. package/styles/login-app.less +34 -0
  61. package/styles/mixins/c8y-scrollbar.less +1 -4
  62. package/styles/utilities/_icon-utils.less +1 -1
  63. package/styles/utilities/_position.less +61 -0
  64. package/styles/utilities.less +3 -0
  65. package/styles/welcome-widget.less +2 -2
  66. package/variables/_alert-vars.less +1 -1
  67. package/variables/_badge-vars.less +1 -1
  68. package/variables/_brand-vars.less +2 -0
  69. package/variables/_color-vars.less +7 -3
  70. package/variables/_components-vars.less +1 -1
  71. package/variables/dashboard-themes/_branded-dashboard.less +2 -2
  72. package/variables/login-vars.less +48 -0
  73. package/variables/tokens/c8y-design-tokens-dark.less +314 -273
  74. package/variables/tokens/c8y-design-tokens.less +567 -451
  75. package/img/applications-widget-pr.png +0 -0
  76. package/img/cockpit-welcome-image.svg +0 -571
  77. package/img/dm-welcome-widget-pr.png +0 -0
  78. package/img/help-and-service-widget-pr.png +0 -0
  79. package/img/logo-white.svg +0 -69
  80. package/img/logo.svg +0 -136
  81. /package/img/{widget-plugin-pr.png → sample-plugin-pr.png} +0 -0
package/variables/_color-vars.less CHANGED
@@ -46,6 +46,7 @@
46
46
  @status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
47
47
  @status-warning-lightest: var(--c8y-palette-status-warning-high);
48
48
  @status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
49
+ @status-system: var(--palette-status-system, var(--c8y-palette-status-system));
49
50
 
50
51
  @state-success-text: @text-color;
51
52
  @state-success-bg: transparent;
@@ -100,7 +101,7 @@
100
101
  @drawer-separator-color: var(--c8y-right-drawer-separator-color);
101
102
  @drawer-background-active: var(--c8y-right-drawer-background-active);
102
103
  @drawer-border-selected: var(--c8y-right-drawer-border-selected);
103
- @drawer-legend: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-muted));
104
+ @drawer-legend: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));
104
105
 
105
106
  /* change the used icons. Available options are:
106
107
  -'white'for using the same colors as .c8y-icon-white
@@ -144,10 +145,11 @@
144
145
  @component-background-expanded-gradient: var(--c8y-component-background-expanded-gradient, var(--c8y-root-component-background-expanded-gradient));
145
146
  @component-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
146
147
  @component-background-hover: var(--c8y-component-background-hover, var(--c8y-root-component-background-hover));
148
+
147
149
  @component-border-color: var(--c8y-component-border-color, var(--c8y-root-component-border-color));
150
+
148
151
  @component-color-actions: var(--c8y-component-color-actions, var(--c8y-root-component-color-actions));
149
152
  @component-color-actions-hover: var(--c8y-component-color-actions-hover, var(--c8y-root-component-color-actions-hover));
150
- @component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));
151
153
  @component-color-active: var(--c8y-component-color-active, var(--c8y-root-component-color-active));
152
154
  @component-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
153
155
  @component-color-expanded: var(--c8y-component-color-expanded, var(--c8y-root-component-color-expanded));
@@ -161,6 +163,8 @@
161
163
  @component-color-focus: var(--c8y-component-color-focus, var(--c8y-root-component-color-focus));
162
164
  @component-background-focus: var(--c8y-component-background-focus, var(--c8y-root-component-background-focus));
163
165
 
166
+ @component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));
167
+
164
168
  @component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-root-component-form-label-color));
165
169
  @component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-root-component-form-legend-color));
166
170
 
@@ -174,7 +178,7 @@
174
178
  @component-pulse-color: var(--c8y-component-pulse-color, var(--c8y-root-component-pulse-color));
175
179
  @component-spinner-color: var(--c8y-component-spinner-color, var(--c8y-root-component-spinner-color));
176
180
 
177
- @component-disabled-opacity: var(--c8y-component-disabled-opacity, var(--c8y-root-component-disabled-opacity));
181
+ @component-disabled-opacity: var(--c8y-component-disabled-opacity, var(--c8y-root-component-opacity-disabled));
178
182
 
179
183
  @component-icon-white-color-light: var(--c8y-component-icon-white-color-light, var(--c8y-root-component-icon-white-color-light, @brand-primary-light));
180
184
  @component-icon-white-color-dark: var(--c8y-component-icon-white-color-dark, var(--c8y-root-component-icon-white-color-dark, @palette-high));
package/variables/_components-vars.less CHANGED
@@ -15,5 +15,5 @@
15
15
  @component-padding-small-vertical: var(--c8y-component-padding-small-vertical, var(--c8y-root-component-padding-small-vertical));
16
16
  @component-padding-xs-horizontal: var(--c8y-component-padding-xs-horizontal, var(--c8y-root-component-padding-xs-horizontal));
17
17
  @component-padding-xs-vertical: var(--c8y-component-padding-xs-vertical, var(--c8y-root-component-padding-small-vertical));
18
- @component-padding: var(--c8y-component-padding, var(--c8y-root-component-padding));
18
+ @component-padding: var(--c8y-component-padding, var(--c8y-root-component-padding-default));
19
19
  @component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));
package/variables/dashboard-themes/_branded-dashboard.less CHANGED
@@ -14,7 +14,7 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
14
14
  --c8y-action-bar-color-default: var(--c8y-palette-high);
15
15
  --c8y-action-bar-color-focus: var(--c8y-brand-80);
16
16
  --c8y-action-bar-color-text-muted: var(--c8y-brand-80);
17
- --c8y-action-bar-disabled-opacity: var(--c8y-root-component-disabled-opacity);
17
+ --c8y-action-bar-disabled-opacity: var(--c8y-root-component-opacity-disabled);
18
18
  --c8y-action-bar-icon-color: var(--v8y-brand-80);
19
19
 
20
20
 
@@ -236,7 +236,7 @@ c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
236
236
  --c8y-root-component-color-link: var(--c8y-link-color);
237
237
  --c8y-root-component-color-odd: var(--c8y-text-color);
238
238
  --c8y-root-component-color-text-muted: var(--c8y-text-muted);
239
- --c8y-root-component-disabled-opacity: var(--c8y-global-disabled-opacity);
239
+ --c8y-root-component-opacity-disabled: var(--c8y-global-disabled-opacity);
240
240
  --c8y-root-component-form-control-background-default: var(--c8y-form-control-background-default);
241
241
  --c8y-root-component-form-control-background-disabled: var(--c8y-form-control-background-disabled);
242
242
  --c8y-root-component-form-control-background-focus: var(--c8y-form-control-background-focus);
package/variables/login-vars.less ADDED
@@ -0,0 +1,48 @@
1
+ @import 'tokens/c8y-design-tokens.less';
2
+ @import 'tokens/c8y-design-tokens-dark.less';
3
+
4
+ .c8y-system-theme{
5
+ @media(prefers-color-scheme: dark) {
6
+ .c8y-dark-theme();
7
+ }
8
+ }
9
+
10
+ @import '_brand-vars.less';
11
+ @import '_color-vars.less';
12
+
13
+ @import '_typography-vars.less';
14
+ @import '_components-vars.less';
15
+ @import '_navigator.less';
16
+ @import '_dlt-c8y-icons-vars.less';
17
+ @import '_c8y-icon-vars.less';
18
+
19
+ @import '_alert-vars.less';
20
+ @import '_badge-vars.less';
21
+ // @import '_breadcrumbs-vars.less';
22
+ @import '_buttons-vars.less';
23
+
24
+ @import '_code-vars.less';
25
+ @import '_forms-vars.less';
26
+ // @import '_label-vars.less'; /* TODO: Remove after Codex launch. will be replaced by Tag */
27
+ @import '_tag-vars.less';
28
+ @import '_layout-vars.less';
29
+ // @import '_map-vars.less';
30
+
31
+ @import '_c8y-action-bar-vars.less';
32
+ @import '_modal-vars.less';
33
+
34
+ @import '_navbar-vars.less';
35
+ // @import '_pagination-vars.less';
36
+ // @import '_panel-vars.less';
37
+ // @import '_popover-vars.less';
38
+ @import '_progress-bars-vars.less';
39
+ @import '_scaffolding.less';
40
+ // @import '_tables-vars.less';
41
+ @import '_thumbnail-vars.less';
42
+ @import '_tooltip-vars.less';
43
+ // @import '_selectize-vars.less';
44
+ // @import '_page-sticky-header.less';
45
+
46
+ @import 'shadows.less';
47
+
48
+