@geotab/zenith 3.14.0-beta.1 → 3.14.0-beta.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 (17) hide show
  1. package/dist/commonStyles/caption/caption.less +5 -3
  2. package/dist/commonStyles/colors/colors.less +19 -4
  3. package/dist/commonStyles/columnsList.less +0 -1
  4. package/dist/commonStyles/common.less +2 -1
  5. package/dist/commonStyles/ellipsis.less +1 -1
  6. package/dist/commonStyles/fonts/roboto.less +7 -7
  7. package/dist/commonStyles/link/link.less +1 -1
  8. package/dist/commonStyles/notSelectable.less +4 -0
  9. package/dist/commonStyles/pillStyles/pillContent.less +2 -6
  10. package/dist/commonStyles/pillStyles/pillStyles.less +1 -1
  11. package/dist/commonStyles/pillStyles/pillTextContent.less +0 -3
  12. package/dist/commonStyles/pillStyles/pillTypes.less +0 -10
  13. package/dist/commonStyles/rangeFieldMixin.less +6 -3
  14. package/dist/commonStyles/shadows/shadows.less +3 -3
  15. package/dist/commonStyles/typography/typography.less +4 -4
  16. package/dist/index.css +476 -359
  17. package/package.json +1 -10
package/dist/commonStyles/caption/caption.less CHANGED
@@ -1,5 +1,6 @@
1
1
  .zen-caption {
2
2
  @button-line-height: 16px;
3
+
3
4
  display: inline-flex;
4
5
  align-items: center;
5
6
  overflow: hidden;
@@ -9,7 +10,7 @@
9
10
  justify-content: center;
10
11
 
11
12
  .zen-caption__content {
12
- margin-inline-end: 0;
13
+ margin-right: 0;
13
14
  }
14
15
  }
15
16
 
@@ -21,7 +22,8 @@
21
22
  line-height: @button-line-height;
22
23
  font-weight: 400;
23
24
  white-space: nowrap;
24
- margin-inline: 0 auto;
25
+ margin-left: 0;
26
+ margin-right: auto;
25
27
  }
26
28
 
27
29
  &--hidden {
@@ -31,7 +33,7 @@
31
33
  &--wrapped {
32
34
  .zen-caption__content {
33
35
  white-space: normal;
34
- overflow-wrap: break-word;
36
+ word-wrap: break-word;
35
37
  }
36
38
  }
37
39
  }
package/dist/commonStyles/colors/colors.less CHANGED
@@ -7,11 +7,11 @@
7
7
  --text-nav-highlight: #0069bf;
8
8
  --text-error-message: #c51a11;
9
9
  --text-button-disabled: #c0ccd8;
10
- --text-reverse-primary: #fff;
10
+ --text-reverse-primary: #ffffff;
11
11
  --text-reverse-primary-button: var(--text-reverse-primary);
12
12
 
13
13
  // backgrounds
14
- --backgrounds-main: #fff;
14
+ --backgrounds-main: #ffffff;
15
15
  --backgrounds-content-0: #f9fafb;
16
16
  --backgrounds-content-1: #f2f5f7;
17
17
  --backgrounds-content-2: #d9e1e8;
@@ -36,22 +36,28 @@
36
36
  --action-primary--default: #0078d3;
37
37
  --action-primary--hover: #005aa8;
38
38
  --action-primary--active: #004080;
39
+
39
40
  --action-secondary--default: #4e677e;
40
41
  --action-secondary--hover: #3e5265;
41
42
  --action-secondary--active: #2f3d4c;
43
+
42
44
  --action-destructive--default: #c51a11;
43
45
  --action-destructive--hover: #b11810;
44
46
  --action-destructive--active: #a01f0e;
47
+
45
48
  --action-tertiary--hover: #e6ebef;
46
49
  --action-tertiary--active: #3e5265;
47
50
 
48
51
  // accents
49
52
  --accents-warning--main: #fef7ed;
50
53
  --accents-warning--detail: #59480d;
54
+
51
55
  --accents-error--main: #ffeceb;
52
56
  --accents-error--detail: #a01f0e;
57
+
53
58
  --accents-success--main: #edfef2;
54
59
  --accents-success--detail: #2b6436;
60
+
55
61
  --accents-general--main: #ebf6ff;
56
62
  --accents-general--detail: #25477b;
57
63
 
@@ -59,11 +65,13 @@
59
65
  --chart-sequential-green-1: #4aa75e;
60
66
  --chart-divergent-red-blue-3: #b72931;
61
67
  --chart-sequential-blue-5: #0c74c3;
68
+
62
69
  --duty-status-workday: #faad41;
63
70
  --duty-status-cycle: #c0c1c6;
64
71
  --duty-status-rest: #fe6867;
65
72
  --duty-status-drive: #49c649;
66
73
  --duty-status-exemption: #4e677e;
74
+
67
75
  --data--categorical-light-blue: #3ccde5;
68
76
  --data--categorical-blue: #428aff;
69
77
  --data--categorical-purple: #8256e5;
@@ -76,7 +84,7 @@
76
84
 
77
85
  .zen-dark {
78
86
  // text
79
- --text-primary: #fff;
87
+ --text-primary: #ffffff;
80
88
  --text-secondary: #c0ccd8;
81
89
  --text-placeholder: #a6b8c9;
82
90
  --text-hyperlink: #ebf6ff;
@@ -96,7 +104,7 @@
96
104
  --backgrounds-overlay: rgba(31, 40, 51, 0.4);
97
105
  --backgrounds-primary-brand: #4cb2ff;
98
106
  --backgrounds-reverse-2: #5282cb;
99
- --backgrounds-reverse-1: #fff;
107
+ --backgrounds-reverse-1: #ffffff;
100
108
  --backgrounds-reverse-0: #f2f5f7;
101
109
 
102
110
  // borders
@@ -111,22 +119,28 @@
111
119
  --action-primary--default: #4cb2ff;
112
120
  --action-primary--hover: #9ed5ff;
113
121
  --action-primary--active: #ebf6ff;
122
+
114
123
  --action-secondary--default: #e6ebef;
115
124
  --action-secondary--hover: #f2f5f7;
116
125
  --action-secondary--active: #f9fafb;
126
+
117
127
  --action-destructive--default: #f7a1a2;
118
128
  --action-destructive--hover: #fac7c7;
119
129
  --action-destructive--active: #ffeceb;
130
+
120
131
  --action-tertiary--hover: rgba(31, 40, 51, 0.07);
121
132
  --action-tertiary--active: rgba(31, 40, 51, 0.14);
122
133
 
123
134
  // accents
124
135
  --accents-warning--main: #a17a18;
125
136
  --accents-warning--detail: #fef7ed;
137
+
126
138
  --accents-error--main: #c51a11;
127
139
  --accents-error--detail: #ffeceb;
140
+
128
141
  --accents-success--main: #46af55;
129
142
  --accents-success--detail: #edfef2;
143
+
130
144
  --accents-general--main: #396dbc;
131
145
  --accents-general--detail: #eff4fa;
132
146
 
@@ -134,6 +148,7 @@
134
148
  --chart-sequential-green-1: #4aa75e;
135
149
  --chart-divergent-red-blue-3: #b72931;
136
150
  --chart-sequential-blue-5: #0c74c3;
151
+
137
152
  --duty-status-workday: #59480d;
138
153
  --duty-status-cycle: #3e5265;
139
154
  --duty-status-rest: #a01f0e;
package/dist/commonStyles/columnsList.less CHANGED
@@ -36,7 +36,6 @@
36
36
  padding: (2 / @rem) (8 / @rem);
37
37
  display: flex;
38
38
  justify-content: flex-end;
39
-
40
39
  .zen-columns-list__reset:focus {
41
40
  outline: none;
42
41
  border: 1px solid var(--borders-form-field--active);
package/dist/commonStyles/common.less CHANGED
@@ -9,6 +9,7 @@
9
9
  @rem: 16rem;
10
10
 
11
11
  @import "typography/typography.less";
12
+
12
13
  @import "colors/colors.less";
13
14
  @import "caption/caption.less";
14
15
  @import "ellipsis.less";
@@ -38,6 +39,7 @@
38
39
  }
39
40
 
40
41
  .zen-visually-hidden {
42
+ clip: rect(0 0 0 0);
41
43
  clip-path: inset(50%);
42
44
  height: 1px;
43
45
  overflow: hidden;
@@ -49,7 +51,6 @@
49
51
  // Styles reset
50
52
  .box-sizing() {
51
53
  box-sizing: border-box;
52
-
53
54
  * {
54
55
  box-sizing: border-box;
55
56
  }
package/dist/commonStyles/ellipsis.less CHANGED
@@ -2,5 +2,5 @@
2
2
  overflow: hidden;
3
3
  text-overflow: ellipsis;
4
4
  white-space: nowrap;
5
- overflow-wrap: normal;
5
+ word-wrap: normal;
6
6
  }
package/dist/commonStyles/fonts/roboto.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @font-face {
2
- font-family: Roboto;
2
+ font-family: "Roboto";
3
3
  font-style: normal;
4
4
  font-weight: 300;
5
5
  src:
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  @font-face {
11
- font-family: Roboto;
11
+ font-family: "Roboto";
12
12
  font-style: normal;
13
13
  font-weight: 400;
14
14
  src:
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @font-face {
20
- font-family: Roboto;
20
+ font-family: "Roboto";
21
21
  font-style: normal;
22
22
  font-weight: 500;
23
23
  src:
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  @font-face {
29
- font-family: Roboto;
29
+ font-family: "Roboto";
30
30
  font-style: normal;
31
31
  font-weight: 700;
32
32
  src:
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  @font-face {
38
- font-family: Roboto;
38
+ font-family: "Roboto";
39
39
  font-style: italic;
40
40
  font-weight: 300;
41
41
  src:
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  @font-face {
47
- font-family: Roboto;
47
+ font-family: "Roboto";
48
48
  font-style: italic;
49
49
  font-weight: 400;
50
50
  src:
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  @font-face {
56
- font-family: Roboto;
56
+ font-family: "Roboto";
57
57
  font-style: italic;
58
58
  font-weight: 700;
59
59
  src:
package/dist/commonStyles/link/link.less CHANGED
@@ -7,7 +7,7 @@
7
7
  cursor: pointer;
8
8
  background: none;
9
9
  border: none;
10
- overflow-wrap: break-word;
10
+ word-wrap: break-word;
11
11
 
12
12
  &:hover,
13
13
  &:focus,
package/dist/commonStyles/notSelectable.less CHANGED
@@ -1,4 +1,8 @@
1
1
  .zen-not-selectable {
2
2
  -webkit-touch-callout: none;
3
+ -webkit-user-select: none;
4
+ -khtml-user-select: none;
5
+ -moz-user-select: none;
6
+ -ms-user-select: none;
3
7
  user-select: none;
4
8
  }
package/dist/commonStyles/pillStyles/pillContent.less CHANGED
@@ -10,12 +10,14 @@
10
10
  @pill-height--mobile: 34px;
11
11
 
12
12
  .zen-body-s-400();
13
+ display: flex;
13
14
  align-items: center;
14
15
  justify-content: space-between;
15
16
  border-radius: (30 / @rem);
16
17
  height: @pill-height;
17
18
  display: grid;
18
19
  grid-auto-flow: column;
20
+
19
21
  gap: (8 / @rem);
20
22
 
21
23
  &--icon-left {
@@ -42,11 +44,9 @@
42
44
  &--hidden {
43
45
  gap: (4 / @rem);
44
46
  }
45
-
46
47
  &.zen-pill-new-content--drive,
47
48
  &.zen-pill-new-content--drive-tablet {
48
49
  height: @pill-height--drive;
49
-
50
50
  .zen-pill-non-actionable__icon {
51
51
  min-width: (16 / @rem);
52
52
  max-width: 16px;
@@ -70,11 +70,9 @@
70
70
  }
71
71
  }
72
72
  }
73
-
74
73
  &.zen-pill-new-content--mobile {
75
74
  height: @pill-height--mobile;
76
75
  .zen-body-m-400-short();
77
-
78
76
  .zen-pill-non-actionable__icon {
79
77
  min-width: (16 / @rem);
80
78
  max-width: 16px;
@@ -98,11 +96,9 @@
98
96
  }
99
97
  }
100
98
  }
101
-
102
99
  &.zen-pill-new-content--drive {
103
100
  .zen-body-s-400-drive();
104
101
  }
105
-
106
102
  &.zen-pill-new-content--drive-tablet {
107
103
  .zen-body-s-400-drive();
108
104
  }
package/dist/commonStyles/pillStyles/pillStyles.less CHANGED
@@ -6,7 +6,7 @@
6
6
  color: var(--text-primary);
7
7
  align-items: center;
8
8
  justify-content: space-between;
9
- padding: (4 / @rem) (12 / @rem);
9
+ padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
10
10
  border-radius: (30 / @rem);
11
11
  background: var(--backgrounds-content-1);
12
12
  }
package/dist/commonStyles/pillStyles/pillTextContent.less CHANGED
@@ -7,16 +7,13 @@
7
7
  &--hidden {
8
8
  visibility: hidden;
9
9
  }
10
-
11
10
  &.zen-pill-text-content--drive,
12
11
  &.zen-pill-text-content--drive-tablet {
13
12
  height: 20px;
14
13
  }
15
-
16
14
  &.zen-pill-text-content--drive {
17
15
  .zen-body-s-400-drive();
18
16
  }
19
-
20
17
  &.zen-pill-text-content--drive-tablet {
21
18
  .zen-body-s-400-drive();
22
19
  }
package/dist/commonStyles/pillStyles/pillTypes.less CHANGED
@@ -5,10 +5,8 @@
5
5
  background: var(--backgrounds-content-1);
6
6
  color: var(--text-primary);
7
7
  fill: var(--text-primary);
8
-
9
8
  .zen-pill-non-actionable__close-button {
10
9
  fill: var(--text-primary);
11
-
12
10
  &:active .zen-pill-non-actionable__close-icon,
13
11
  &:hover .zen-pill-non-actionable__close-icon,
14
12
  &:focus .zen-pill-non-actionable__close-icon {
@@ -23,10 +21,8 @@
23
21
  color: var(--accents-success--detail);
24
22
  background-color: var(--accents-success--main);
25
23
  fill: var(--accents-success--detail);
26
-
27
24
  .zen-pill-non-actionable__close-button {
28
25
  fill: var(--accents-success--detail);
29
-
30
26
  &:active .zen-pill-non-actionable__close-icon,
31
27
  &:hover .zen-pill-non-actionable__close-icon,
32
28
  &:focus .zen-pill-non-actionable__close-icon {
@@ -41,10 +37,8 @@
41
37
  background-color: var(--accents-error--main);
42
38
  color: var(--accents-error--detail);
43
39
  fill: var(--accents-error--detail);
44
-
45
40
  .zen-pill-non-actionable__close-button {
46
41
  fill: var(--accents-error--detail);
47
-
48
42
  &:active .zen-pill-non-actionable__close-icon,
49
43
  &:hover .zen-pill-non-actionable__close-icon,
50
44
  &:focus .zen-pill-non-actionable__close-icon {
@@ -59,10 +53,8 @@
59
53
  background-color: var(--accents-warning--main);
60
54
  color: var(--accents-warning--detail);
61
55
  fill: var(--accents-warning--detail);
62
-
63
56
  .zen-pill-non-actionable__close-button {
64
57
  fill: var(--accents-warning--detail);
65
-
66
58
  &:active .zen-pill-non-actionable__close-icon,
67
59
  &:hover .zen-pill-non-actionable__close-icon,
68
60
  &:focus .zen-pill-non-actionable__close-icon {
@@ -77,10 +69,8 @@
77
69
  background-color: var(--accents-general--main);
78
70
  color: var(--accents-general--detail);
79
71
  fill: var(--accents-general--detail);
80
-
81
72
  .zen-pill-non-actionable__close-button {
82
73
  fill: var(--accents-general--detail);
83
-
84
74
  &:active .zen-pill-non-actionable__close-icon,
85
75
  &:hover .zen-pill-non-actionable__close-icon,
86
76
  &:focus .zen-pill-non-actionable__close-icon {
package/dist/commonStyles/rangeFieldMixin.less CHANGED
@@ -3,12 +3,14 @@
3
3
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
4
4
  grid-template-rows: auto auto;
5
5
  gap: (4 / @rem) (8 / @rem);
6
- place-items: center start;
6
+ align-items: center;
7
+ justify-items: start;
7
8
  }
8
9
 
9
10
  .zen-range-field-wrapper-row {
10
11
  display: grid;
11
- place-items: center start;
12
+ align-items: center;
13
+ justify-items: start;
12
14
  grid-template-columns:
13
15
  minmax((24 / @rem), (32 / @rem))
14
16
  minmax((64 / @rem), (64 / @rem))
@@ -16,5 +18,6 @@
16
18
  minmax((24 / @rem), (32 / @rem))
17
19
  minmax((64 / @rem), (64 / @rem))
18
20
  minmax((24 / @rem), (32 / @rem));
19
- gap: (4 / @rem) (8 / @rem);
21
+ row-gap: (4 / @rem);
22
+ column-gap: (8 / @rem);
20
23
  }
package/dist/commonStyles/shadows/shadows.less CHANGED
@@ -1,11 +1,11 @@
1
1
  .zen-shadow-dropdown-default {
2
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
2
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
3
3
  }
4
4
 
5
5
  .zen-card-shadow {
6
- box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
6
+ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
7
7
  }
8
8
 
9
9
  .zen-chip-shadow {
10
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
10
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
11
11
  }
package/dist/commonStyles/typography/typography.less CHANGED
@@ -548,10 +548,10 @@
548
548
  }
549
549
 
550
550
  :root {
551
- --main-font: roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
552
- --main-font-data: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
553
- --data-font-drive: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
554
- --arabic-font-family: "Noto Sans Arabic", roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
551
+ --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
552
+ --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
553
+ --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
554
+ --arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
555
555
  }
556
556
 
557
557
  // Labels