@castlabs/ui 7.2.1 → 7.3.0

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 (29) hide show
  1. package/dist/castlabs-ui.common.js +1 -1
  2. package/dist/castlabs-ui.css +2 -2
  3. package/dist/castlabs-ui.umd.js +6 -6
  4. package/package.json +1 -1
  5. package/src/components/ClAlert/style.scss +7 -4
  6. package/src/components/ClBadge/style.variables.scss +8 -6
  7. package/src/components/ClBlockquote/style.variables.scss +2 -2
  8. package/src/components/ClButton/style.scss +5 -1
  9. package/src/components/form/ClField/style.scss +8 -1
  10. package/src/components/form/ClFieldCheck/style.scss +6 -6
  11. package/src/components/form/ClFieldFile/style.scss +2 -2
  12. package/src/components/form/ClFieldGroup/style.scss +1 -1
  13. package/src/components/form/ClForm/style.scss +3 -3
  14. package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss +7 -9
  15. package/src/components/navigation/ClNavTop/style.scss +1 -1
  16. package/src/components/section/ClSectionForm/style.scss +1 -2
  17. package/src/components/text/ClLinkExternal/style.scss +1 -1
  18. package/src/styles/abstracts/app.scss +2 -1
  19. package/src/styles/abstracts/color.scss +153 -79
  20. package/src/styles/abstracts/fontawesome.scss +1 -1
  21. package/src/styles/abstracts/form.scss +15 -4
  22. package/src/styles/layout/color.scss +23 -1
  23. package/src/styles/layout/helper.scss +13 -0
  24. package/src/styles/layout/section.scss +5 -2
  25. package/src/styles/ui.scss +0 -12
  26. package/dist/assets/DMMono/index.scss +0 -41
  27. package/dist/assets/FontAwesome5/LICENSE.txt +0 -34
  28. package/dist/assets/FontAwesome5/index.scss +0 -6124
  29. package/dist/assets/NonNaturalGroteskInktrap/index.scss +0 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castlabs/ui",
3
- "version": "7.2.1",
3
+ "version": "7.3.0",
4
4
  "repository": "https://github.com/castlabs/ui-styleguide",
5
5
  "private": false,
6
6
  "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
package/src/components/ClAlert/style.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  &::after {
20
20
  @include cl-fontawesome('\f05a');
21
21
 
22
- color: $color-ci-clay;
22
+ color: $color-ci-steel;
23
23
  left: -$alert-indent;
24
24
  position: absolute;
25
25
  text-align: center;
@@ -34,15 +34,17 @@
34
34
  }
35
35
 
36
36
  &.cl-alert-danger {
37
+ color: $color-error;
38
+
37
39
  &::after {
38
- color: $color-attention;
40
+ color: $color-error;
39
41
  content: '\f057';
40
42
  }
41
43
  }
42
44
 
43
45
  &.cl-alert-warning {
44
46
  &::after {
45
- color: $color-ci-petrol;
47
+ color: $color-ci-honey;
46
48
  content: '\f06a';
47
49
  }
48
50
  }
@@ -61,6 +63,7 @@
61
63
 
62
64
  &.cl-alert-check {
63
65
  &::after {
66
+ color: $color-ci-leaf;
64
67
  content: '\f058';
65
68
  }
66
69
  }
@@ -85,7 +88,7 @@
85
88
  &::after {
86
89
  @include cl-fontawesome($icon);
87
90
 
88
- color: $color-ci-clay;
91
+ color: $color-ci-steel;
89
92
  left: -$alert-indent;
90
93
  position: absolute;
91
94
  text-align: left;
package/src/components/ClBadge/style.variables.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use '../../styles/global' as *;
2
2
 
3
- $badge-color-fg: $color-ci-white;
4
- $badge-color-bg: $color-dark;
3
+ // $badge-color-fg: $color-ci-white;
4
+ // $badge-color-bg: $color-dark;
5
5
  $badge-padding: px(4) px(8);
6
6
  $badge-min-height: 1.642857143em; // 23px @ 14pt
7
7
 
@@ -12,6 +12,7 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
12
12
  }
13
13
 
14
14
  %cl-badge {
15
+ @include cl-colors-secondary;
15
16
  @extend %cl-p-tag;
16
17
 
17
18
  background-color: var(--cl-color-background);
@@ -26,10 +27,11 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
26
27
  white-space: nowrap;
27
28
 
28
29
  &:not([class*='cl-color-']) {
29
- #{'--cl-color-background'}: $color-ci-clay;
30
- #{'--cl-color-border'}: $color-ci-clay;
31
- #{'--cl-color-text'}: $color-ci-night;
32
- #{'--cl-color-accent'}: $color-ci-night;
30
+ // default color
31
+ #{'--cl-color-background'}: $color-ci-steel;
32
+ #{'--cl-color-border'}: $color-ci-steel;
33
+ #{'--cl-color-text'}: $color-ci-eggshell;
34
+ #{'--cl-color-accent'}: $color-ci-eggshell;
33
35
  }
34
36
 
35
37
  &.cl-badge-sm {
package/src/components/ClBlockquote/style.variables.scss CHANGED
@@ -10,6 +10,6 @@
10
10
  %cl-blockquote {
11
11
  @include cl-accent;
12
12
 
13
- border-left: $bar-ui-width solid var(--cl-color-accent);
14
- padding-left: calc($spacing-indent - $bar-ui-width);
13
+ border-left: $brand-bar-width solid var(--cl-color-accent);
14
+ padding-left: calc($spacing-indent - $brand-bar-width);
15
15
  }
package/src/components/ClButton/style.scss CHANGED
@@ -43,6 +43,10 @@
43
43
  overflow: hidden;
44
44
  padding: px(7) $spacing-medium;
45
45
  }
46
+
47
+ &.cl-color-sea {
48
+ @extend %cl-color-sea;
49
+ }
46
50
  }
47
51
 
48
52
  .cl-btn-quickaction {
@@ -60,7 +64,7 @@
60
64
  padding: 0;
61
65
 
62
66
  &:not(:hover) {
63
- opacity: 0.25;
67
+ color: $color-ci-steel;
64
68
  }
65
69
  }
66
70
 
package/src/components/form/ClField/style.scss CHANGED
@@ -10,7 +10,13 @@
10
10
 
11
11
  [invalid],
12
12
  .invalid {
13
- border-color: $color-attention !important;
13
+ border-color: $color-error !important;
14
+ color: $color-error;
15
+
16
+ &::selection {
17
+ background: $color-error;
18
+ color: $color-ci-eggshell;
19
+ }
14
20
 
15
21
  + * + .invalid-feedback,
16
22
  + .invalid-feedback {
@@ -33,6 +39,7 @@
33
39
  textarea[disabled],
34
40
  input[disabled],
35
41
  select[disabled] {
42
+ background-color: $color-ci-haze;
36
43
  color: $color-disabled;
37
44
  cursor: not-allowed;
38
45
  }
package/src/components/form/ClFieldCheck/style.scss CHANGED
@@ -35,15 +35,15 @@ $form-check-background: $color-ci-eggshell;
35
35
  margin-top: 0.2em;
36
36
 
37
37
  &:checked {
38
- background-color: $color-selected;
38
+ background-color: $color-ci-night;
39
39
  background-image: url('#{$cl-url-prefix}checked.svg#{$cl-url-postfix}');
40
40
  border: 0;
41
41
  }
42
42
 
43
43
  &:indeterminate {
44
- background-color: $color-selected;
44
+ background-color: $color-ci-night;
45
45
  background-image: none;
46
- border-color: $color-selected;
46
+ border-color: $color-ci-night;
47
47
  box-shadow: 0 0 0 px(2) $form-check-background inset !important;
48
48
 
49
49
  &:disabled,
@@ -60,9 +60,9 @@ $form-check-background: $color-ci-eggshell;
60
60
  margin-top: 0.2em;
61
61
 
62
62
  &:checked {
63
- background-color: $color-selected;
63
+ background-color: $color-ci-night;
64
64
  background-image: none; // remove BS dot
65
- border-color: $color-selected;
65
+ border-color: $color-ci-night;
66
66
 
67
67
  &.disabled,
68
68
  &:disabled {
@@ -72,7 +72,7 @@ $form-check-background: $color-ci-eggshell;
72
72
  }
73
73
 
74
74
  &:focus-visible {
75
- @include cl-color-focus-outline($color-selected, 2px);
75
+ @include cl-color-focus-outline($color-ci-night, 2px);
76
76
  }
77
77
 
78
78
  &.disabled,
package/src/components/form/ClFieldFile/style.scss CHANGED
@@ -39,8 +39,8 @@
39
39
 
40
40
  &[invalid] + .cl-file-companion,
41
41
  &.invalid + .cl-file-companion {
42
- border-color: $color-attention;
43
- color: $color-attention;
42
+ border-color: $color-error;
43
+ color: $color-error;
44
44
 
45
45
  + * + .invalid-feedback,
46
46
  + .invalid-feedback {
package/src/components/form/ClFieldGroup/style.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  &.invalid {
48
- box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
48
+ box-shadow: -$brand-line-width 0 0 $color-error !important; // sass-lint:disable-line no-important
49
49
  }
50
50
  }
51
51
  }
package/src/components/form/ClForm/style.scss CHANGED
@@ -59,7 +59,7 @@
59
59
  margin-top: $spacing-micro;
60
60
 
61
61
  &::before {
62
- color: $color-ci-clay;
62
+ color: $color-ci-steel;
63
63
  content: '\f05a';
64
64
  display: inline-block;
65
65
  font-family: 'Font Awesome 5 Free';
@@ -70,11 +70,11 @@
70
70
  }
71
71
 
72
72
  .invalid-feedback {
73
- // color: $color-attention;
73
+ color: $color-error;
74
74
  display: none;
75
75
 
76
76
  &::before {
77
- color: $color-attention;
77
+ color: $color-error; // fontawesome
78
78
  content: '\f057';
79
79
  }
80
80
  }
package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss CHANGED
@@ -8,9 +8,6 @@
8
8
  @use 'sass:color';
9
9
  @use '../../../../styles/global' as *;
10
10
 
11
- $sidenav-background: $color-ci-eggshell;
12
- $sidenav-color-text: $color-ci-night;
13
- $sidenav-color-background: $color-ci-eggshell;
14
11
  $sidenav-color-separator: rgba(#fff, 0.25);
15
12
 
16
13
  $sidenav-color-account: $color-ci-night;
@@ -39,8 +36,10 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
39
36
  // --- drawer ----------------------------------------------------------------
40
37
 
41
38
  .cl-nav-drawer {
42
- background-color: $sidenav-color-background;
43
- color: $sidenav-color-text;
39
+ #{'--cl-color-background'}: $color-ci-eggshell;
40
+ #{'--cl-color-text'}: $color-ci-night;
41
+ background-color: var(--cl-color-background);
42
+ color: var(--cl-color-text);
44
43
  }
45
44
 
46
45
  // --- meta/common -----------------------------------------------------------
@@ -245,7 +244,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
245
244
  position: absolute;
246
245
  right: 0;
247
246
  top: 0;
248
- width: $bar-ui-width;
247
+ width: $brand-bar-width;
249
248
  }
250
249
  }
251
250
 
@@ -277,7 +276,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
277
276
  // ------------------------------------------------------------
278
277
  @extend %cl-p-nav;
279
278
 
280
- @include typography-link($sidenav-color-text, $sidenav-color-text, 0);
279
+ @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
281
280
  @include cl-color-focus-outline;
282
281
 
283
282
  display: inline-block;
@@ -314,7 +313,6 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
314
313
  &.active {
315
314
  @include typography-link($color-ci-red, $color-ci-red, 0);
316
315
 
317
- // color: $color-ci-red;
318
316
  display: inline-block;
319
317
  padding: $spacing-tiny $spacing-small;
320
318
  position: relative;
@@ -328,7 +326,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
328
326
  position: absolute;
329
327
  right: 0;
330
328
  top: 0;
331
- width: $bar-ui-width;
329
+ width: $brand-bar-width;
332
330
  }
333
331
  }
334
332
 
package/src/components/navigation/ClNavTop/style.scss CHANGED
@@ -166,7 +166,7 @@ $sidenav-z-index: $layer-z-sidenav;
166
166
  position: absolute;
167
167
  right: 0;
168
168
  top: 0;
169
- width: $bar-ui-width;
169
+ width: $brand-bar-width;
170
170
  }
171
171
  }
172
172
  }
package/src/components/section/ClSectionForm/style.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  @use '../../../styles/global' as *;
2
2
 
3
3
  .cl-section-form {
4
- border-bottom: $brand-line-width solid $color-ci-clay;
5
- border-top: $brand-line-width solid $color-ci-clay;
4
+ background-color: $color-ci-haze;
6
5
  padding-top: $spacing-tiny;
7
6
 
8
7
  &,
package/src/components/text/ClLinkExternal/style.scss CHANGED
@@ -69,7 +69,7 @@ a.cl-a-none:not(.btn) {
69
69
  text-decoration: none;
70
70
 
71
71
  &:not(:hover) {
72
- color: $color-ci-clay;
72
+ color: $color-ci-steel;
73
73
  }
74
74
  }
75
75
 
package/src/styles/abstracts/app.scss CHANGED
@@ -9,7 +9,8 @@
9
9
  @use './tools' as *;
10
10
 
11
11
  $brand-border-radius: px(20);
12
- $brand-line-width: px(1);
12
+ $brand-line-width: 1px;
13
+ $brand-bar-width: px(4);
13
14
 
14
15
  $grid-spacing: $spacing-small;
15
16
 
package/src/styles/abstracts/color.scss CHANGED
@@ -24,42 +24,51 @@ $color-ci-white: $color-ci-eggshell;
24
24
  $color-ci-sand: #fdf5cf;
25
25
  $color-ci-backdrop: rgba($color-ci-night, 0.5);
26
26
 
27
+ // secondary palette
28
+ $color-ci-brick: #ba4f4f; // #A34040;
29
+ $color-ci-honey: #dc9404;
30
+ $color-ci-leaf: #53965d; // #43894E;
31
+ $color-ci-sea: #5d9dd1; // #5D9FC0; // #3F81A2; 5d9dd1
32
+ $color-ci-orchid: #b271bf;
33
+ $color-ci-steel: #a0a0a0;
34
+ $color-ci-haze: #eeece6;
35
+
36
+ $color-primary: $color-ci-sea;
37
+ $color-secondary: $color-ci-night;
38
+
27
39
  // legacy color mappings
28
- $color-primary: $color-ci-red;
29
- $color-secondary: $color-ci-sky;
30
- $color-ci-blue: $color-ci-sky;
31
- $color-ci-dusk: $color-ci-night;
32
- $color-ci-dim: $color-ci-ash;
33
- $color-ci-cloud: $color-ci-ash;
34
- $color-ci-silver: $color-ci-clay;
35
- $color-ci-smoke: $color-ci-clay;
36
- $color-ci-haze: $color-ci-eggshell;
37
- $color-dark: $color-ci-ash;
40
+ // $color-primary: $color-ci-red;
41
+ // $color-secondary: $color-ci-night;
42
+ // $color-ci-blue: $color-ci-sea;
43
+ // $color-ci-dusk: $color-ci-night;
44
+ // $color-ci-dim: $color-ci-ash;
45
+ // $color-ci-cloud: $color-ci-ash;
46
+ // $color-ci-silver: $color-ci-clay;
47
+ // $color-ci-smoke: $color-ci-clay;
48
+ // $color-ci-haze: $color-ci-eggshell;
49
+ // $color-dark: $color-ci-ash;
38
50
 
39
51
  // additional non-official colors
40
- $color-ci-green: #338450;
41
- $color-ci-orange: #eca72c; // fec671; //f18f01;
52
+ // $color-ci-green: #338450;
53
+ // $color-ci-orange: #eca72c; // fec671; //f18f01;
42
54
 
43
55
  $color-hover-opacity: 0.75;
44
56
 
45
- $color-positive: $color-ci-night;
46
- $color-negative: $color-ci-sky;
57
+ $color-positive: $color-ci-leaf;
58
+ $color-negative: $color-ci-brick;
47
59
  $color-neutral: $color-ci-night;
48
60
 
49
- $color-attention: $color-ci-sky;
50
- $color-disabled: $color-ci-clay;
61
+ $color-error: $color-ci-brick; // error color
62
+ $color-focus: $color-ci-sea;
63
+ $color-disabled: $color-ci-steel; // $color-ci-clay;
51
64
 
52
65
  $color-text: $color-ci-night;
53
66
  $color-selected: $color-ci-red;
54
67
  $color-accent: $color-ci-petrol;
55
- $color-focus: $color-ci-petrol;
56
68
  $color-background: $color-ci-white;
57
69
  $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
58
70
 
59
71
  $color-line: $color-ci-clay;
60
- $color-line-focus: $color-ci-clay;
61
-
62
- $bar-ui-width: px(4);
63
72
 
64
73
  @mixin cl-color-focus-outline-raw($color: var(--cl-color-focus), $offset: -3px) {
65
74
  box-shadow: none; // disable BS outlines
@@ -132,6 +141,32 @@ $bar-ui-width: px(4);
132
141
  }
133
142
  }
134
143
 
144
+ @mixin cl-colors-secondary {
145
+ &.cl-color-brick {
146
+ @extend %cl-color-brick;
147
+ }
148
+
149
+ &.cl-color-leaf {
150
+ @extend %cl-color-leaf;
151
+ }
152
+
153
+ &.cl-color-sea {
154
+ @extend %cl-color-sea;
155
+ }
156
+
157
+ &.cl-color-honey {
158
+ @extend %cl-color-honey;
159
+ }
160
+
161
+ &.cl-color-orchid {
162
+ @extend %cl-color-orchid;
163
+ }
164
+
165
+ &.cl-color-steel {
166
+ @extend %cl-color-steel;
167
+ }
168
+ }
169
+
135
170
  %cl-color-root {
136
171
  // default colors = outline-night
137
172
  #{'--cl-color-background'}: $color-ci-eggshell;
@@ -140,12 +175,12 @@ $bar-ui-width: px(4);
140
175
  #{'--cl-color-line'}: $color-ci-clay;
141
176
  #{'--cl-color-accent'}: $color-accent;
142
177
  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
143
- #{'--cl-color-link'}: $color-ci-berry;
178
+ #{'--cl-color-link'}: inherit; // $color-ci-berry;
144
179
  #{'--cl-color-active'}: $color-ci-berry;
145
180
  #{'--cl-color-hover'}: $color-ci-red;
146
181
  #{'--cl-color-focus'}: $color-ci-night;
147
- #{'--cl-color-disabled-background'}: $color-ci-clay;
148
- #{'--cl-color-disabled-border'}: $color-ci-clay;
182
+ #{'--cl-color-disabled-background'}: $color-disabled;
183
+ #{'--cl-color-disabled-border'}: $color-disabled;
149
184
  #{'--cl-color-disabled-text'}: $color-ci-eggshell;
150
185
  }
151
186
 
@@ -157,57 +192,65 @@ $bar-ui-width: px(4);
157
192
  #{'--cl-color-line'}: $color-ci-clay;
158
193
  #{'--cl-color-accent'}: $color-ci-night;
159
194
  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
160
- #{'--cl-color-link'}: $color-ci-berry;
195
+ #{'--cl-color-link'}: inherit; // $color-ci-berry;
161
196
  #{'--cl-color-focus'}: $color-ci-night;
162
197
  #{'--cl-color-disabled-background'}: transparent;
163
- #{'--cl-color-disabled-border'}: $color-ci-clay;
164
- #{'--cl-color-disabled-text'}: $color-ci-clay;
198
+ #{'--cl-color-disabled-border'}: $color-disabled;
199
+ #{'--cl-color-disabled-text'}: $color-disabled;
165
200
  }
166
201
 
167
- %cl-color-red {
168
- #{'--cl-color-background'}: $color-ci-red;
169
- #{'--cl-color-border'}: $color-ci-red;
202
+ %cl-color-text-light {
203
+ // for backgrounds that require 'white' text
170
204
  #{'--cl-color-text'}: $color-ci-eggshell;
171
205
  #{'--cl-color-line'}: $color-ci-eggshell;
172
206
  #{'--cl-color-accent'}: $color-ci-eggshell;
173
207
  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
174
- #{'--cl-color-link'}: $color-ci-eggshell;
208
+ #{'--cl-color-link'}: inherit;
175
209
  #{'--cl-color-focus'}: $color-ci-eggshell;
176
210
  }
177
211
 
212
+ %cl-color-text-dark {
213
+ // for backgrounds that require 'black' text
214
+ #{'--cl-color-text'}: $color-ci-night;
215
+ #{'--cl-color-line'}: $color-ci-night;
216
+ #{'--cl-color-accent'}: $color-ci-night;
217
+ #{'--cl-color-highlight'}: rgba(#fff, 0.1);
218
+ #{'--cl-color-link'}: inherit;
219
+ #{'--cl-color-focus'}: $color-ci-night;
220
+ }
221
+
222
+ %cl-color-red {
223
+ @extend %cl-color-text-light;
224
+
225
+ #{'--cl-color-background'}: $color-ci-red;
226
+ #{'--cl-color-border'}: $color-ci-red;
227
+ }
228
+
178
229
  %cl-color-red-outline {
179
230
  #{'--cl-color-border'}: $color-ci-red;
180
231
  #{'--cl-color-text'}: $color-ci-red;
181
232
  #{'--cl-color-line'}: $color-ci-clay;
182
233
  #{'--cl-color-accent'}: $color-ci-red;
183
234
  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
184
- #{'--cl-color-link'}: $color-ci-berry;
235
+ #{'--cl-color-link'}: inherit; // $color-ci-berry;
185
236
  #{'--cl-color-focus'}: $color-ci-red;
186
237
  #{'--cl-color-disabled-background'}: transparent;
187
- #{'--cl-color-disabled-border'}: $color-ci-clay;
188
- #{'--cl-color-disabled-text'}: $color-ci-clay;
238
+ #{'--cl-color-disabled-border'}: $color-disabled;
239
+ #{'--cl-color-disabled-text'}: $color-disabled;
189
240
  }
190
241
 
191
242
  %cl-color-sky {
243
+ @extend %cl-color-text-dark;
244
+
192
245
  #{'--cl-color-background'}: $color-ci-sky;
193
246
  #{'--cl-color-border'}: $color-ci-sky;
194
- #{'--cl-color-text'}: $color-ci-night;
195
- #{'--cl-color-line'}: $color-ci-night;
196
- #{'--cl-color-accent'}: $color-ci-night;
197
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
198
- #{'--cl-color-link'}: $color-ci-night;
199
- #{'--cl-color-focus'}: $color-ci-night;
200
247
  }
201
248
 
202
249
  %cl-color-night {
250
+ @extend %cl-color-text-light;
251
+
203
252
  #{'--cl-color-background'}: $color-ci-night;
204
253
  #{'--cl-color-border'}: $color-ci-night;
205
- #{'--cl-color-text'}: $color-ci-eggshell;
206
- #{'--cl-color-line'}: $color-ci-eggshell;
207
- #{'--cl-color-accent'}: $color-ci-eggshell;
208
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
209
- #{'--cl-color-link'}: $color-ci-eggshell;
210
- #{'--cl-color-focus'}: $color-ci-eggshell;
211
254
  }
212
255
 
213
256
  %cl-color-eggshell {
@@ -217,63 +260,96 @@ $bar-ui-width: px(4);
217
260
  #{'--cl-color-line'}: $color-ci-clay;
218
261
  #{'--cl-color-accent'}: $color-ci-night;
219
262
  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
220
- #{'--cl-color-link'}: $color-ci-berry;
263
+ #{'--cl-color-link'}: inherit; // $color-ci-berry;
221
264
  #{'--cl-color-focus'}: $color-ci-night;
222
265
  }
223
266
 
224
- %cl-color-clay {
225
- #{'--cl-color-background'}: $color-ci-clay;
226
- #{'--cl-color-border'}: $color-ci-clay;
267
+ %cl-color-eggshell-alternate {
268
+ #{'--cl-color-background'}: $color-ci-haze;
269
+ #{'--cl-color-border'}: $color-ci-haze;
227
270
  #{'--cl-color-text'}: $color-ci-night;
228
- #{'--cl-color-line'}: $color-ci-night;
271
+ #{'--cl-color-line'}: $color-ci-clay;
229
272
  #{'--cl-color-accent'}: $color-ci-night;
230
273
  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
231
- #{'--cl-color-link'}: $color-ci-night;
274
+ #{'--cl-color-link'}: inherit; // $color-ci-berry;
232
275
  #{'--cl-color-focus'}: $color-ci-night;
233
276
  }
234
277
 
278
+ %cl-color-clay {
279
+ @extend %cl-color-text-dark;
280
+
281
+ #{'--cl-color-background'}: $color-ci-clay;
282
+ #{'--cl-color-border'}: $color-ci-clay;
283
+ }
284
+
235
285
  %cl-color-ash {
286
+ @extend %cl-color-text-light;
287
+
236
288
  #{'--cl-color-background'}: $color-ci-ash;
237
289
  #{'--cl-color-border'}: $color-ci-ash;
238
- #{'--cl-color-text'}: $color-ci-eggshell;
239
- #{'--cl-color-line'}: $color-ci-eggshell;
240
- #{'--cl-color-accent'}: $color-ci-eggshell;
241
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
242
- #{'--cl-color-link'}: $color-ci-eggshell;
243
- #{'--cl-color-focus'}: $color-ci-eggshell;
244
290
  }
245
291
 
246
292
  %cl-color-petrol {
293
+ @extend %cl-color-text-light;
294
+
247
295
  #{'--cl-color-background'}: $color-ci-petrol;
248
296
  #{'--cl-color-border'}: $color-ci-petrol;
249
- #{'--cl-color-text'}: $color-ci-eggshell;
250
- #{'--cl-color-line'}: $color-ci-eggshell;
251
- #{'--cl-color-accent'}: $color-ci-eggshell;
252
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
253
- #{'--cl-color-link'}: $color-ci-eggshell;
254
- #{'--cl-color-focus'}: $color-ci-eggshell;
255
297
  }
256
298
 
257
299
  %cl-color-berry {
300
+ @extend %cl-color-text-light;
301
+
258
302
  #{'--cl-color-background'}: $color-ci-berry;
259
303
  #{'--cl-color-border'}: $color-ci-berry;
260
- #{'--cl-color-text'}: $color-ci-eggshell;
261
- #{'--cl-color-line'}: $color-ci-eggshell;
262
- #{'--cl-color-accent'}: $color-ci-eggshell;
263
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
264
- #{'--cl-color-link'}: $color-ci-eggshell;
265
- #{'--cl-color-focus'}: $color-ci-eggshell;
304
+ }
305
+
306
+ %cl-color-brick {
307
+ @extend %cl-color-text-light;
308
+
309
+ #{'--cl-color-background'}: $color-ci-brick;
310
+ #{'--cl-color-border'}: $color-ci-brick;
311
+ }
312
+
313
+ %cl-color-honey {
314
+ @extend %cl-color-text-light;
315
+
316
+ #{'--cl-color-background'}: $color-ci-honey;
317
+ #{'--cl-color-border'}: $color-ci-honey;
318
+ }
319
+
320
+ %cl-color-leaf {
321
+ @extend %cl-color-text-light;
322
+
323
+ #{'--cl-color-background'}: $color-ci-leaf;
324
+ #{'--cl-color-border'}: $color-ci-leaf;
325
+ }
326
+
327
+ %cl-color-sea {
328
+ @extend %cl-color-text-light;
329
+
330
+ #{'--cl-color-background'}: $color-ci-sea;
331
+ #{'--cl-color-border'}: $color-ci-sea;
332
+ }
333
+
334
+ %cl-color-orchid {
335
+ @extend %cl-color-text-light;
336
+
337
+ #{'--cl-color-background'}: $color-ci-orchid;
338
+ #{'--cl-color-border'}: $color-ci-orchid;
339
+ }
340
+
341
+ %cl-color-steel {
342
+ @extend %cl-color-text-light;
343
+
344
+ #{'--cl-color-background'}: $color-ci-steel;
345
+ #{'--cl-color-border'}: $color-ci-steel;
266
346
  }
267
347
 
268
348
  %cl-color-transparent {
349
+ @extend %cl-color-text-light;
350
+
269
351
  #{'--cl-color-background'}: transparent;
270
352
  #{'--cl-color-border'}: $color-ci-eggshell;
271
- #{'--cl-color-text'}: $color-ci-eggshell;
272
- #{'--cl-color-line'}: $color-ci-eggshell;
273
- #{'--cl-color-accent'}: $color-ci-eggshell;
274
- #{'--cl-color-highlight'}: rgba(#fff, 0.1);
275
- #{'--cl-color-link'}: $color-ci-eggshell;
276
- #{'--cl-color-focus'}: $color-ci-eggshell;
277
353
  }
278
354
 
279
355
  %cl-color-disabled {
@@ -283,7 +359,7 @@ $bar-ui-width: px(4);
283
359
  #{'--cl-color-line'}: $color-disabled;
284
360
  #{'--cl-color-accent'}: $color-disabled;
285
361
  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
286
- #{'--cl-color-link'}: $color-disabled;
362
+ #{'--cl-color-link'}: inherit; // $color-disabled;
287
363
  #{'--cl-color-focus'}: $color-ci-eggshell;
288
364
  }
289
365
 
@@ -294,7 +370,7 @@ $bar-ui-width: px(4);
294
370
  #{'--cl-color-line'}: $color-ci-ash;
295
371
  #{'--cl-color-accent'}: $color-ci-ash;
296
372
  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
297
- #{'--cl-color-link'}: $color-ci-ash;
373
+ #{'--cl-color-link'}: inherit; // $color-ci-ash;
298
374
  #{'--cl-color-focus'}: $color-ci-ash;
299
375
  }
300
376
 
@@ -305,5 +381,3 @@ $bar-ui-width: px(4);
305
381
  #{'--cl-color-link'}: $color-ci-eggshell;
306
382
  #{'--cl-color-focus'}: $color-ci-eggshell;
307
383
  }
308
-
309
- // ----------------------------------------------