@ship-ui/core 0.14.22 → 0.15.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 (9) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/ship-ui-core.mjs +93 -59
  3. package/fesm2022/ship-ui-core.mjs.map +1 -1
  4. package/index.d.ts +7 -3
  5. package/package.json +1 -1
  6. package/styles/components/ship-checkbox.component.scss +2 -8
  7. package/styles/components/ship-popover.component.scss +19 -12
  8. package/styles/components/ship-radio.component.scss +16 -89
  9. package/styles/core/core/variables.scss +100 -99
package/index.d.ts CHANGED
@@ -144,7 +144,6 @@ declare class ShipCardComponent {
144
144
 
145
145
  declare class ShipCheckboxComponent {
146
146
  currentClassList: _angular_core.Signal<string>;
147
- showClasses: _angular_core.Signal<string[]>;
148
147
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipCheckboxComponent, never>;
149
148
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCheckboxComponent, "sh-checkbox", never, {}, {}, never, ["*"], true, never>;
150
149
  }
@@ -158,6 +157,7 @@ type R = number;
158
157
  type G = number;
159
158
  type B = number;
160
159
  declare class ShipColorPickerComponent {
160
+ #private;
161
161
  readonly canvasRef: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
162
162
  private canvasData;
163
163
  showDarkColors: _angular_core.InputSignal<boolean>;
@@ -410,8 +410,7 @@ declare class ShipProgressBarComponent {
410
410
  }
411
411
 
412
412
  declare class ShipRadioComponent {
413
- #private;
414
- onClick(): void;
413
+ currentClassList: _angular_core.Signal<string>;
415
414
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipRadioComponent, never>;
416
415
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRadioComponent, "sh-radio", never, {}, {}, never, ["*"], true, never>;
417
416
  }
@@ -757,10 +756,15 @@ declare class ShipTooltipWrapper {
757
756
  declare class ShipTooltipDirective implements OnDestroy {
758
757
  #private;
759
758
  shTooltip: _angular_core.InputSignal<string | TemplateRef<any> | null | undefined>;
759
+ private debounceTimer;
760
+ private readonly DEBOUNCE_DELAY;
760
761
  readonly anchorName: string;
761
762
  isOpen: _angular_core.WritableSignal<boolean>;
762
763
  onMouseEnter(): void;
764
+ onMouseLeave(): void;
763
765
  ngOnDestroy(): void;
766
+ private startCleanupTimer;
767
+ private cancelCleanupTimer;
764
768
  private showTooltip;
765
769
  private cleanupTooltip;
766
770
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTooltipDirective, never>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ship-ui/core",
3
3
  "license": "MIT",
4
- "version": "0.14.22",
4
+ "version": "0.15.0",
5
5
  "peerDependencies": {
6
6
  "@angular/common": ">=19",
7
7
  "@angular/core": ">=19"
package/styles/components/ship-checkbox.component.scss CHANGED
@@ -6,9 +6,7 @@ $shipCheckbox: true !default;
6
6
  sh-checkbox {
7
7
  .sh-sheet {
8
8
  --box-bw: #{p2r(1)};
9
- --box-c: var(--sheet-c);
10
9
  --box-bc: var(--sheet-bc);
11
- --box-bg: var(--sheet-bg);
12
10
  --sheet-s: var(--shape-1);
13
11
  }
14
12
 
@@ -20,7 +18,7 @@ $shipCheckbox: true !default;
20
18
  position: relative;
21
19
  border: 0;
22
20
 
23
- > input[type='checkbox'] {
21
+ > input {
24
22
  appearance: none;
25
23
  position: absolute;
26
24
  inset: 0;
@@ -47,11 +45,7 @@ $shipCheckbox: true !default;
47
45
  height: p2r(20);
48
46
  cursor: pointer;
49
47
  position: relative;
50
- border-radius: var(--shape-1);
51
48
  border: var(--box-bw) solid var(--box-bc);
52
- background: var(--box-bg);
53
- font-size: p2r(12);
54
- color: var(--box-c);
55
49
 
56
50
  sh-icon {
57
51
  opacity: 0;
@@ -93,7 +87,7 @@ $shipCheckbox: true !default;
93
87
  }
94
88
  }
95
89
 
96
- &:has(input[type='checkbox']:checked),
90
+ &:has(input:checked),
97
91
  &.indeterminate,
98
92
  &.active {
99
93
  .box sh-icon {
package/styles/components/ship-popover.component.scss CHANGED
@@ -10,8 +10,14 @@ $shipPopover: true !default;
10
10
 
11
11
  &.multi-layer {
12
12
  .popover {
13
- top: anchor(top);
14
- left: calc(anchor(right) - #{p2r(10)});
13
+ position-area: span-y-end right;
14
+ }
15
+
16
+ .trigger .trigger-anchor {
17
+ right: p2r(-4);
18
+ left: p2r(-4);
19
+ top: 0;
20
+ bottom: 0;
15
21
  }
16
22
  }
17
23
 
@@ -27,6 +33,15 @@ $shipPopover: true !default;
27
33
  display: inherit;
28
34
  }
29
35
  }
36
+
37
+ .trigger-anchor {
38
+ position: absolute;
39
+ top: p2r(-4);
40
+ bottom: p2r(-4);
41
+ left: 0;
42
+ right: 0;
43
+ z-index: -1;
44
+ }
30
45
  }
31
46
 
32
47
  .overlay {
@@ -50,17 +65,9 @@ $shipPopover: true !default;
50
65
 
51
66
  @supports (anchor-name: --anchor) {
52
67
  inset: unset;
53
- left: anchor(left);
54
- top: calc(anchor(bottom) + #{p2r(4)});
55
68
  position: fixed;
56
- position-try-order:
57
- flip-block,
58
- flip-inline,
59
- flip-block flip-inline;
60
- position-try-fallbacks:
61
- flip-block,
62
- flip-inline,
63
- flip-block flip-inline;
69
+ position-area: bottom span-right;
70
+ position-try-fallbacks: flip-block, flip-inline;
64
71
  }
65
72
  }
66
73
  }
package/styles/components/ship-radio.component.scss CHANGED
@@ -4,12 +4,9 @@ $shipRadio: true !default;
4
4
 
5
5
  @if $shipRadio == true {
6
6
  sh-radio {
7
- --radio-bw: #{p2r(1)};
8
- --radio-bg: var(--base-2);
9
- --radio-bc: var(--base-4);
10
- --radio-c: var(--base-8);
11
- --radiod-o: 0;
12
7
  --radiod-c: var(--base-8);
8
+ --radiod-o: 0;
9
+ --radio-bc: var(--base-4);
13
10
 
14
11
  display: flex;
15
12
  align-items: center;
@@ -18,7 +15,7 @@ $shipRadio: true !default;
18
15
  user-select: none;
19
16
  position: relative;
20
17
 
21
- > input[type='radio'] {
18
+ > input {
22
19
  appearance: none;
23
20
  position: absolute;
24
21
  inset: 0;
@@ -37,7 +34,7 @@ $shipRadio: true !default;
37
34
  cursor: initial;
38
35
  }
39
36
 
40
- &:has(input[type='radio']:checked),
37
+ &:has(input:checked),
41
38
  &.active {
42
39
  --radiod-o: 1;
43
40
  }
@@ -51,10 +48,6 @@ $shipRadio: true !default;
51
48
  cursor: pointer;
52
49
  position: relative;
53
50
  border-radius: 50%;
54
- border: var(--radio-bw) solid var(--radio-bc);
55
- background: var(--radio-bg);
56
- font-size: p2r(12);
57
- color: var(--radio-c);
58
51
 
59
52
  &:after {
60
53
  content: '';
@@ -72,110 +65,44 @@ $shipRadio: true !default;
72
65
  }
73
66
 
74
67
  &.primary {
75
- --radio-c: var(--primary-8);
76
68
  --radiod-c: var(--primary-8);
77
- --radio-bg: var(--primary-3);
78
- --radio-bc: var(--primary-4);
79
69
  }
80
70
 
81
71
  &.accent {
82
- --radio-c: var(--accent-8);
83
72
  --radiod-c: var(--accent-8);
84
- --radio-bg: var(--accent-3);
85
- --radio-bc: var(--accent-4);
86
73
  }
87
74
 
88
75
  &.warn {
89
- --radio-c: var(--warn-8);
90
76
  --radiod-c: var(--warn-8);
91
- --radio-bg: var(--warn-3);
92
- --radio-bc: var(--warn-4);
93
77
  }
94
78
 
95
79
  &.error {
96
- --radio-c: var(--error-8);
97
80
  --radiod-c: var(--error-8);
98
- --radio-bg: var(--error-3);
99
- --radio-bc: var(--error-4);
100
81
  }
101
82
 
102
83
  &.success {
103
- --radio-c: var(--success-8);
104
84
  --radiod-c: var(--success-8);
105
- --radio-bg: var(--success-3);
106
- --radio-bc: var(--success-4);
107
- }
108
-
109
- &.outlined {
110
- --radio-bg: var(--base-1);
111
-
112
- &.primary,
113
- &.accent,
114
- &.warn,
115
- &.error,
116
- &.success {
117
- --radio-bc: var(--base-4);
118
- }
119
85
  }
120
86
 
121
87
  &.flat,
122
88
  &.raised {
123
- --radio-c: #fff;
124
- --radio-bc: var(--base-4);
125
- --radio-bg: var(--base-2);
126
- --radiod-c: #fff;
127
- }
128
-
129
- &.flat:has(input[type='radio']:checked),
130
- &.flat.active {
131
- --radio-bw: 0;
132
- --radio-bg: var(--base-8);
133
89
  --radiod-c: #fff;
134
-
135
- &.primary {
136
- --radio-bg: var(--primary-8);
137
- }
138
-
139
- &.accent {
140
- --radio-bg: var(--accent-8);
141
- }
142
-
143
- &.warn {
144
- --radio-bg: var(--warn-8);
145
- }
146
-
147
- &.error {
148
- --radio-bg: var(--error-8);
149
- }
150
-
151
- &.success {
152
- --radio-bg: var(--success-8);
153
- }
154
90
  }
155
91
 
156
- &.raised:has(input[type='radio']:checked),
157
- &.raised.active {
158
- --radio-bw: 0;
159
- --radio-bg: var(--base-g2);
160
-
161
- &.primary {
162
- --radio-bg: var(--primary-g2);
163
- }
164
-
165
- &.accent {
166
- --radio-bg: var(--accent-g2);
167
- }
168
-
169
- &.warn {
170
- --radio-bg: var(--warn-g2);
171
- }
172
-
173
- &.error {
174
- --radio-bg: var(--error-g2);
92
+ &.raised,
93
+ &.flat {
94
+ &:has(input) {
95
+ &:not(:has(input:checked)) .radio {
96
+ background: transparent;
97
+ border: 1px solid var(--radio-bc);
98
+ }
175
99
  }
176
100
 
177
- &.success {
178
- --radio-bg: var(--success-g2);
101
+ &:not(:has(input)) {
102
+ .radio:not(.active) {
103
+ background: transparent;
104
+ border: 1px solid var(--radio-bc);
105
+ }
179
106
  }
180
107
  }
181
108
  }
package/styles/core/core/variables.scss CHANGED
@@ -17,99 +17,120 @@
17
17
  font-size: var(--font-size);
18
18
  }
19
19
 
20
+ html {
21
+ &.dark {
22
+ color-scheme: dark;
23
+ }
24
+
25
+ &.light {
26
+ color-scheme: light;
27
+ }
28
+ }
29
+
20
30
  html body {
21
- --ship-light: initial;
22
- --ship-dark: ;
23
- color-scheme: light dark;
24
-
25
- --primary-1: #{light-dark(hsl(217, 91%, 95%), hsl(217, 91%, 9.5%))};
26
- --primary-2: #{light-dark(hsl(217, 91%, 90%), hsl(217, 91%, 15%))};
27
- --primary-3: #{light-dark(hsl(217, 91%, 85%), hsl(217, 91%, 22.5%))};
28
- --primary-4: #{light-dark(hsl(217, 91%, 80%), hsl(217, 91%, 30%))};
29
- --primary-5: #{light-dark(hsl(217, 91%, 75%), hsl(217, 91%, 37.5%))};
30
- --primary-6: #{light-dark(hsl(217, 91%, 70%), hsl(217, 91%, 45%))};
31
- --primary-7: #{light-dark(hsl(217, 91%, 65%), hsl(217, 91%, 52.5%))};
32
- --primary-8: #{light-dark(hsl(217, 91%, 60%), hsl(217, 91%, 60%))};
33
- --primary-9: #{light-dark(hsl(217, 91%, 46.5%), hsl(217, 91%, 70%))};
34
- --primary-10: #{light-dark(hsl(217, 91%, 33%), hsl(217, 91%, 80%))};
35
- --primary-11: #{light-dark(hsl(217, 91%, 19.5%), hsl(217, 91%, 90%))};
36
- --primary-12: #{light-dark(hsl(217, 91%, 6%), hsl(217, 91%, 100%))};
37
- --primary-g2: linear-gradient(180deg, hsl(217, 91%, 70%) 0%, hsl(217, 91%, 60%) 50%);
38
- --primary-g3: linear-gradient(180deg, hsl(217, 91%, 80%) 0%, hsl(217, 91%, 60%) 50%);
39
-
40
- --accent-1: #{light-dark(hsl(258, 90%, 95.75%), hsl(258, 90%, 9.25%))};
41
- --accent-2: #{light-dark(hsl(258, 90%, 91.5%), hsl(258, 90%, 16.5%))};
42
- --accent-3: #{light-dark(hsl(258, 90%, 87.25%), hsl(258, 90%, 24.75%))};
43
- --accent-4: #{light-dark(hsl(258, 90%, 83%), hsl(258, 90%, 33%))};
44
- --accent-5: #{light-dark(hsl(258, 90%, 78.75%), hsl(258, 90%, 41.25%))};
45
- --accent-6: #{light-dark(hsl(258, 90%, 74.5%), hsl(258, 90%, 49.5%))};
46
- --accent-7: #{light-dark(hsl(258, 90%, 70.25%), hsl(258, 90%, 57.75%))};
47
- --accent-8: #{light-dark(hsl(258, 90%, 66%), hsl(258, 90%, 66%))};
48
- --accent-9: #{light-dark(hsl(258, 90%, 51.15%), hsl(258, 90%, 74.5%))};
49
- --accent-10: #{light-dark(hsl(258, 90%, 36.3%), hsl(258, 90%, 83%))};
50
- --accent-11: #{light-dark(hsl(258, 90%, 21.45%), hsl(258, 90%, 91.5%))};
51
- --accent-12: #{light-dark(hsl(258, 90%, 6.6%), hsl(258, 90%, 100%))};
31
+ --primary-1: light-dark(oklch(0.95 0.02 260), oklch(0.17 0.05 260));
32
+ --primary-2: light-dark(oklch(0.9 0.04 260), oklch(0.25 0.09 260));
33
+ --primary-3: light-dark(oklch(0.86 0.07 260), oklch(0.32 0.12 260));
34
+ --primary-4: light-dark(oklch(0.81 0.09 260), oklch(0.38 0.15 260));
35
+ --primary-5: light-dark(oklch(0.76 0.11 260), oklch(0.45 0.18 260));
36
+ --primary-6: light-dark(oklch(0.71 0.14 260), oklch(0.51 0.21 260));
37
+ --primary-7: light-dark(oklch(0.67 0.16 260), oklch(0.57 0.22 260));
38
+ --primary-8: light-dark(oklch(0.63 0.19 260), oklch(0.63 0.19 260));
39
+ --primary-9: light-dark(oklch(0.52 0.21 260), oklch(0.71 0.14 260));
40
+ --primary-10: light-dark(oklch(0.41 0.16 260), oklch(0.81 0.09 260));
41
+ --primary-11: light-dark(oklch(0.29 0.11 260), oklch(0.9 0.04 260));
42
+ --primary-12: light-dark(oklch(0.15 0.04 260), oklch(0.95 0.02 260));
43
+ --primary-g2: linear-gradient(180deg, oklch(0.71 0.14 260) 0%, oklch(0.63 0.19 260) 50%);
44
+ --primary-g3: linear-gradient(180deg, oklch(0.81 0.09 260.01) 0%, oklch(0.63 0.19 260) 50%);
45
+
46
+ // --primary-1: light-dark(hsl(217, 91%, 95%), hsl(217, 91%, 9.5%));
47
+ // --primary-2: light-dark(hsl(217, 91%, 90%), hsl(217, 91%, 15%));
48
+ // --primary-3: light-dark(hsl(217, 91%, 85%), hsl(217, 91%, 22.5%));
49
+ // --primary-4: light-dark(hsl(217, 91%, 80%), hsl(217, 91%, 30%));
50
+ // --primary-5: light-dark(hsl(217, 91%, 75%), hsl(217, 91%, 37.5%));
51
+ // --primary-6: light-dark(hsl(217, 91%, 70%), hsl(217, 91%, 45%));
52
+ // --primary-7: light-dark(hsl(217, 91%, 65%), hsl(217, 91%, 52.5%));
53
+ // --primary-8: light-dark(hsl(217, 91%, 60%), hsl(217, 91%, 60%));
54
+ // --primary-9: light-dark(hsl(217, 91%, 46.5%), hsl(217, 91%, 70%));
55
+ // --primary-10: light-dark(hsl(217, 91%, 33%), hsl(217, 91%, 80%));
56
+ // --primary-11: light-dark(hsl(217, 91%, 19.5%), hsl(217, 91%, 90%));
57
+ // --primary-12: light-dark(hsl(217, 91%, 6%), hsl(217, 91%, 100%));
58
+ // --primary-g2: linear-gradient(180deg, hsl(217, 91%, 70%) 0%, hsl(217, 91%, 60%) 50%);
59
+ // --primary-g3: linear-gradient(180deg, hsl(217, 91%, 80%) 0%, hsl(217, 91%, 60%) 50%);
60
+
61
+ --accent-1: light-dark(hsl(258, 90%, 95.75%), hsl(258, 90%, 9.25%));
62
+ --accent-2: light-dark(hsl(258, 90%, 91.5%), hsl(258, 90%, 16.5%));
63
+ --accent-3: light-dark(hsl(258, 90%, 87.25%), hsl(258, 90%, 24.75%));
64
+ --accent-4: light-dark(hsl(258, 90%, 83%), hsl(258, 90%, 33%));
65
+ --accent-5: light-dark(hsl(258, 89%, 57%), hsl(258, 90%, 41.25%));
66
+ --accent-6: light-dark(hsl(258, 90%, 74.5%), hsl(258, 90%, 49.5%));
67
+ --accent-7: light-dark(hsl(258, 90%, 70.25%), hsl(258, 90%, 57.75%));
68
+ --accent-8: light-dark(hsl(258, 90%, 66%), hsl(258, 90%, 66%));
69
+ --accent-9: light-dark(hsl(258, 90%, 51.15%), hsl(258, 90%, 74.5%));
70
+ --accent-10: light-dark(hsl(258, 90%, 36.3%), hsl(258, 90%, 83%));
71
+ --accent-11: light-dark(hsl(258, 90%, 21.45%), hsl(258, 90%, 91.5%));
72
+ --accent-12: light-dark(hsl(258, 90%, 6.6%), hsl(258, 90%, 100%));
52
73
  --accent-g2: linear-gradient(180deg, hsl(258, 90%, 74.5%) 0%, hsl(258, 90%, 66%) 50%);
53
74
  --accent-g3: linear-gradient(180deg, hsl(258, 90%, 83%) 0%, hsl(258, 90%, 66%) 50%);
54
75
 
55
- --warn-1: #{light-dark(hsl(37, 92%, 93.75%), hsl(37, 92%, 9.25%))};
56
- --warn-2: #{light-dark(hsl(37, 92%, 87.5%), hsl(37, 92%, 12.5%))};
57
- --warn-3: #{light-dark(hsl(37, 92%, 81.25%), hsl(37, 92%, 18.75%))};
58
- --warn-4: #{light-dark(hsl(37, 92%, 75%), hsl(37, 92%, 25%))};
59
- --warn-5: #{light-dark(hsl(37, 92%, 68.75%), hsl(37, 92%, 31.25%))};
60
- --warn-6: #{light-dark(hsl(37, 92%, 62.5%), hsl(37, 92%, 37.5%))};
61
- --warn-7: #{light-dark(hsl(37, 92%, 56.25%), hsl(37, 92%, 43.75%))};
62
- --warn-8: #{light-dark(hsl(37, 92%, 50%), hsl(37, 92%, 50%))};
63
- --warn-9: #{light-dark(hsl(37, 92%, 38.75%), hsl(37, 92%, 62.5%))};
64
- --warn-10: #{light-dark(hsl(37, 92%, 27.5%), hsl(37, 92%, 75%))};
65
- --warn-11: #{light-dark(hsl(37, 92%, 16.25%), hsl(37, 92%, 87.5%))};
66
- --warn-12: #{light-dark(hsl(37, 92%, 5%), hsl(37, 92%, 100%))};
76
+ --warn-1: light-dark(hsl(37, 92%, 93.75%), hsl(37, 92%, 9.25%));
77
+ --warn-2: light-dark(hsl(37, 92%, 87.5%), hsl(37, 92%, 12.5%));
78
+ --warn-3: light-dark(hsl(37, 92%, 81.25%), hsl(37, 92%, 18.75%));
79
+ --warn-4: light-dark(hsl(37, 92%, 75%), hsl(37, 92%, 25%));
80
+ --warn-5: light-dark(hsl(37, 92%, 68.75%), hsl(37, 92%, 31.25%));
81
+ --warn-6: light-dark(hsl(37, 92%, 62.5%), hsl(37, 92%, 37.5%));
82
+ --warn-7: light-dark(hsl(37, 92%, 56.25%), hsl(37, 92%, 43.75%));
83
+ --warn-8: light-dark(hsl(37, 92%, 50%), hsl(37, 92%, 50%));
84
+ --warn-9: light-dark(hsl(37, 92%, 38.75%), hsl(37, 92%, 62.5%));
85
+ --warn-10: light-dark(hsl(37, 92%, 27.5%), hsl(37, 92%, 75%));
86
+ --warn-11: light-dark(hsl(37, 92%, 16.25%), hsl(37, 92%, 87.5%));
87
+ --warn-12: light-dark(hsl(37, 92%, 5%), hsl(37, 92%, 100%));
67
88
  --warn-g2: linear-gradient(180deg, hsl(37, 92%, 62.5%) 0%, hsl(37, 92%, 50%) 50%);
68
89
  --warn-g3: linear-gradient(180deg, hsl(37, 92%, 75%) 0%, hsl(37, 92%, 50%) 50%);
69
90
 
70
- --error-1: #{light-dark(hsl(0, 84%, 95%), hsl(0, 84%, 7.5%))};
71
- --error-2: #{light-dark(hsl(0, 84%, 90%), hsl(0, 84%, 15%))};
72
- --error-3: #{light-dark(hsl(0, 84%, 85%), hsl(0, 84%, 22.5%))};
73
- --error-4: #{light-dark(hsl(0, 84%, 80%), hsl(0, 84%, 30%))};
74
- --error-5: #{light-dark(hsl(0, 84%, 75%), hsl(0, 27%, 10%))};
75
- --error-6: #{light-dark(hsl(0, 84%, 70%), hsl(0, 84%, 45%))};
76
- --error-7: #{light-dark(hsl(0, 84%, 65%), hsl(0, 84%, 52.5%))};
77
- --error-8: #{light-dark(hsl(0, 84%, 60%), hsl(0, 84%, 60%))};
78
- --error-9: #{light-dark(hsl(0, 84%, 46.5%), hsl(0, 84%, 70%))};
79
- --error-10: #{light-dark(hsl(0, 84%, 33%), hsl(0, 84%, 80%))};
80
- --error-11: #{light-dark(hsl(0, 84%, 19.5%), hsl(0, 84%, 90%))};
81
- --error-12: #{light-dark(hsl(0, 84%, 6%), hsl(0, 84%, 100%))};
91
+ --error-1: light-dark(hsl(0, 84%, 95%), hsl(0, 84%, 7.5%));
92
+ --error-2: light-dark(hsl(0, 84%, 90%), hsl(0, 84%, 15%));
93
+ --error-3: light-dark(hsl(0, 84%, 85%), hsl(0, 84%, 22.5%));
94
+ --error-4: light-dark(hsl(0, 84%, 80%), hsl(0, 84%, 30%));
95
+ --error-5: light-dark(hsl(0, 84%, 75%), hsl(0, 27%, 10%));
96
+ --error-6: light-dark(hsl(0, 84%, 70%), hsl(0, 84%, 45%));
97
+ --error-7: light-dark(hsl(0, 84%, 65%), hsl(0, 84%, 52.5%));
98
+ --error-8: light-dark(hsl(0, 84%, 60%), hsl(0, 84%, 60%));
99
+ --error-9: light-dark(hsl(0, 84%, 46.5%), hsl(0, 84%, 70%));
100
+ --error-10: light-dark(hsl(0, 84%, 33%), hsl(0, 84%, 80%));
101
+ --error-11: light-dark(hsl(0, 84%, 19.5%), hsl(0, 84%, 90%));
102
+ --error-12: light-dark(hsl(0, 84%, 6%), hsl(0, 84%, 100%));
82
103
  --error-g2: linear-gradient(180deg, hsl(0, 84%, 70%) 0%, hsl(0, 84%, 60%) 50%);
83
104
  --error-g3: linear-gradient(180deg, hsl(0, 84%, 80%) 0%, hsl(0, 84%, 60%) 50%);
84
105
 
85
- --success-1: #{light-dark(hsl(160, 84%, 92.38%), hsl(160, 84%, 7.88%))};
86
- --success-2: #{light-dark(hsl(160, 84%, 84.75%), hsl(160, 3%, 17%))};
87
- --success-3: #{light-dark(hsl(160, 84%, 77.13%), hsl(160, 84%, 14.63%))};
88
- --success-4: #{light-dark(hsl(160, 84%, 69.5%), hsl(160, 84%, 19.5%))};
89
- --success-5: #{light-dark(hsl(160, 84%, 61.88%), hsl(160, 84%, 24.38%))};
90
- --success-6: #{light-dark(hsl(160, 84%, 54.25%), hsl(160, 84%, 29.25%))};
91
- --success-7: #{light-dark(hsl(160, 84%, 46.63%), hsl(160, 84%, 34.13%))};
92
- --success-8: #{light-dark(hsl(160, 84%, 39%), hsl(160, 84%, 39%))};
93
- --success-9: #{light-dark(hsl(160, 84%, 30.23%), hsl(160, 84%, 54.25%))};
94
- --success-10: #{light-dark(hsl(160, 84%, 21.45%), hsl(160, 84%, 69.5%))};
95
- --success-11: #{light-dark(hsl(160, 84%, 12.67%), hsl(160, 84%, 84.75%))};
96
- --success-12: #{light-dark(hsl(160, 84%, 3.9%), hsl(160, 84%, 100%))};
106
+ --success-1: light-dark(hsl(160, 84%, 92.38%), hsl(160, 84%, 7.88%));
107
+ --success-2: light-dark(hsl(160, 84%, 84.75%), hsl(160, 3%, 17%));
108
+ --success-3: light-dark(hsl(160, 84%, 77.13%), hsl(160, 84%, 14.63%));
109
+ --success-4: light-dark(hsl(160, 84%, 69.5%), hsl(160, 84%, 19.5%));
110
+ --success-5: light-dark(hsl(160, 84%, 61.88%), hsl(160, 84%, 24.38%));
111
+ --success-6: light-dark(hsl(160, 84%, 54.25%), hsl(160, 84%, 29.25%));
112
+ --success-7: light-dark(hsl(160, 84%, 46.63%), hsl(160, 84%, 34.13%));
113
+ --success-8: light-dark(hsl(160, 84%, 39%), hsl(160, 84%, 39%));
114
+ --success-9: light-dark(hsl(160, 84%, 30.23%), hsl(160, 84%, 54.25%));
115
+ --success-10: light-dark(hsl(160, 84%, 21.45%), hsl(160, 84%, 69.5%));
116
+ --success-11: light-dark(hsl(160, 84%, 12.67%), hsl(160, 84%, 84.75%));
117
+ --success-12: light-dark(hsl(160, 84%, 3.9%), hsl(160, 84%, 100%));
97
118
  --success-g2: linear-gradient(180deg, hsl(160, 84%, 54.25%) 0%, hsl(160, 84%, 39%) 50%);
98
119
  --success-g3: linear-gradient(180deg, hsl(160, 84%, 69.5%) 0%, hsl(160, 84%, 39%) 50%);
99
120
 
100
121
  $darkThemeLightness: 0%;
101
- --base-1: #{light-dark(#fff, hsl(0, 0%, (5.75% + $darkThemeLightness)))};
102
- --base-2: #{light-dark(hsl(0, 0%, 98.05%), hsl(0, 0%, 8.75% + $darkThemeLightness))};
103
- --base-3: #{light-dark(hsl(0, 0%, 94.5%), hsl(0, 0%, 11.5% + $darkThemeLightness))};
104
- --base-4: #{light-dark(hsl(0, 0%, 84.75%), hsl(0, 0%, 17.25% + $darkThemeLightness))};
105
- --base-5: #{light-dark(hsl(0, 0%, 79.75%), hsl(0, 0%, 17.25% + $darkThemeLightness))};
106
- --base-6: #{light-dark(hsl(0, 0%, 66.25%), hsl(0, 0%, 28.75% + $darkThemeLightness))};
107
- --base-7: #{light-dark(hsl(0, 0%, 54.5%), hsl(0, 0%, 34.5% + $darkThemeLightness))};
108
- --base-8: #{light-dark(hsl(0, 0%, 46%), hsl(0, 0%, 54% + $darkThemeLightness))};
109
- --base-9: #{light-dark(hsl(0, 0%, 35.65%), hsl(0, 0%, 64.5% + $darkThemeLightness))};
110
- --base-10: #{light-dark(hsl(0, 0%, 25.3%), hsl(0, 0%, 73% + $darkThemeLightness))};
111
- --base-11: #{light-dark(hsl(0, 0%, 14.95%), hsl(0, 0%, 86.5% + $darkThemeLightness))};
112
- --base-12: #{light-dark(hsl(0, 0%, 4.6%), hsl(0, 0%, 100% + $darkThemeLightness))};
122
+ --base-1: light-dark(#fff, hsl(0, 0%, 5.75%));
123
+ --base-2: light-dark(hsl(0, 0%, 98.05%), hsl(0, 0%, 8.75%));
124
+ --base-3: light-dark(hsl(0, 0%, 94.5%), hsl(0, 0%, 11.5%));
125
+ --base-4: light-dark(hsl(0, 0%, 84.75%), hsl(0, 0%, 17.25%));
126
+ --base-5: light-dark(hsl(0, 0%, 79.75%), hsl(0, 0%, 17.25%));
127
+ --base-6: light-dark(hsl(0, 0%, 66.25%), hsl(0, 0%, 28.75%));
128
+ --base-7: light-dark(hsl(0, 0%, 54.5%), hsl(0, 0%, 34.5%));
129
+ --base-8: light-dark(hsl(0, 0%, 46%), hsl(0, 0%, 54%));
130
+ --base-9: light-dark(hsl(0, 0%, 35.65%), hsl(0, 0%, 64.5%));
131
+ --base-10: light-dark(hsl(0, 0%, 25.3%), hsl(0, 0%, 73%));
132
+ --base-11: light-dark(hsl(0, 0%, 14.95%), hsl(0, 0%, 86.5%));
133
+ --base-12: light-dark(hsl(0, 0%, 4.6%), hsl(0, 0%, 100%));
113
134
 
114
135
  --base-g2: linear-gradient(180deg, hsl(0, 0%, 66.25%) 0%, hsl(0, 0%, 46%) 50%);
115
136
  --base-g3: linear-gradient(180deg, hsl(0, 0%, 73%) 0%, hsl(0, 0%, 46%) 50%);
@@ -166,24 +187,4 @@ html body {
166
187
 
167
188
  --dark-text: #000;
168
189
  --light-text: #fff;
169
-
170
- &.dark {
171
- --ship-light: ;
172
- --ship-dark: initial;
173
- color-scheme: dark;
174
- }
175
-
176
- // TODO add a good way to toggle between light and dark mode served from the ui lib
177
- //
178
- // @media (prefers-color-scheme: dark) {
179
- // --ship-light: ;
180
- // --ship-dark: initial;
181
- // color-scheme: dark;
182
-
183
- // &.light {
184
- // --ship-light: initial;
185
- // --ship-dark: ;
186
- // color-scheme: light;
187
- // }
188
- // }
189
190
  }