@okaapp/oka-ui-sv 0.1.0 → 0.1.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 (16) hide show
  1. package/dist/components/core/badge/Badge.svelte +3 -2
  2. package/dist/components/core/badge/badge.css +8 -2
  3. package/dist/components/core/button/Button.svelte +2 -0
  4. package/dist/components/core/select/MultiSelect.svelte +3 -2
  5. package/dist/components/core/select/MultiSelect.svelte.d.ts +2 -1
  6. package/dist/components/core/select/SingleSelect.svelte +5 -3
  7. package/dist/components/core/select/SingleSelect.svelte.d.ts +3 -1
  8. package/dist/components/core/sidebar/Sidebar.svelte +5 -7
  9. package/dist/components/core/sidebar/Types.d.ts +1 -1
  10. package/dist/components/core/sidebar/sidebar.css +1 -1
  11. package/dist/components/styling/oka-style-provider/oka-style.css +306 -574
  12. package/dist/components/styling/theme-switcher/ThemeSwitcher.svelte +1 -1
  13. package/dist/components/styling/theme-switcher/theme-switcher.css +0 -17
  14. package/dist/index.d.ts +3 -3
  15. package/dist/index.js +0 -4
  16. package/package.json +1 -1
package/dist/components/core/badge/Badge.svelte CHANGED
@@ -10,8 +10,9 @@
10
10
  } = $props();
11
11
 
12
12
  const iconSizes = {
13
- md: 24,
14
- sm: 16,
13
+ lg: 24,
14
+ md: 16,
15
+ sm: 12,
15
16
  };
16
17
  </script>
17
18
 
package/dist/components/core/badge/badge.css CHANGED
@@ -15,18 +15,24 @@
15
15
  }
16
16
 
17
17
  /* Sizes */
18
- .badge--md {
18
+ .badge--lg {
19
19
  padding: 8px 12px;
20
20
  border-radius: 12px;
21
21
  font-size: 16px;
22
22
  }
23
23
 
24
- .badge--sm {
24
+ .badge--md {
25
25
  padding: 6px 8px;
26
26
  border-radius: 8px;
27
27
  font-size: 14px;
28
28
  }
29
29
 
30
+ .badge--sm {
31
+ padding: 4px 6px;
32
+ border-radius: 6px;
33
+ font-size: 12px;
34
+ }
35
+
30
36
  /* Colors */
31
37
  .badge--success {
32
38
  color: var(--content-success);
package/dist/components/core/button/Button.svelte CHANGED
@@ -19,6 +19,8 @@
19
19
 
20
20
  const sizes = {
21
21
  lg: "height: 48px; padding: 12px; font-size: 16px;",
22
+ md: "height: 40px; padding: 8px; font-size: 16px;",
23
+ sm: "height: 36px; padding: 6px; font-size: 14px;",
22
24
  };
23
25
  </script>
24
26
 
package/dist/components/core/select/MultiSelect.svelte CHANGED
@@ -8,12 +8,13 @@
8
8
  import Checkbox from "../checkbox/Checkbox.svelte";
9
9
 
10
10
  let {
11
+ value = $bindable([]),
11
12
  items = [] as SelectItem[],
12
13
  placeholder = "Chọn ở đây",
13
14
  ...props
14
15
  } = $props();
15
16
 
16
- let value = $state<string[]>([]);
17
+ // let value = $state<string[]>([]);
17
18
  const selectedLabel = $derived(
18
19
  value.length > 0 ? `Đã chọn ${value.length}` : placeholder,
19
20
  );
@@ -36,7 +37,7 @@
36
37
  <CaretDown class="select-trigger-icon" />
37
38
  </Select.Trigger>
38
39
  <Select.Portal>
39
- <Select.Content class="select-content" sideOffset={8}>
40
+ <Select.Content class="select-content" sideOffset={12}>
40
41
  <Select.ScrollUpButton class="select-scroll-button">
41
42
  <CaretDoubleUp class="select-scroll-button-icon" />
42
43
  </Select.ScrollUpButton>
package/dist/components/core/select/MultiSelect.svelte.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import "./select.css";
2
2
  import type { SelectItem } from "./Types.js";
3
3
  declare const MultiSelect: import("svelte").Component<{
4
+ value?: any[];
4
5
  items?: SelectItem[];
5
6
  placeholder?: string;
6
- } & Record<string, any>, {}, "">;
7
+ } & Record<string, any>, {}, "value">;
7
8
  type MultiSelect = ReturnType<typeof MultiSelect>;
8
9
  export default MultiSelect;
package/dist/components/core/select/SingleSelect.svelte CHANGED
@@ -8,12 +8,14 @@
8
8
  import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
9
9
 
10
10
  let {
11
+ value = $bindable(),
11
12
  items = [] as SelectItem[],
12
13
  placeholder = "Chọn ở đây",
14
+ class: className,
13
15
  ...props
14
16
  } = $props();
15
17
 
16
- let value = $state<string>("");
18
+ // let value = $state<string>("");
17
19
  const selectedLabel = $derived(
18
20
  value ? items.find((item) => item.value === value)?.label : placeholder,
19
21
  );
@@ -26,14 +28,14 @@
26
28
  {...props}
27
29
  >
28
30
  <Select.Trigger
29
- class="select-trigger focus-override"
31
+ class={`select-trigger focus-override`}
30
32
  aria-label="Chọn ở đây"
31
33
  >
32
34
  <span class="select-trigger-text">{selectedLabel}</span>
33
35
  <CaretDown class="select-trigger-icon" />
34
36
  </Select.Trigger>
35
37
  <Select.Portal>
36
- <Select.Content class="select-content" sideOffset={8}>
38
+ <Select.Content class="select-content" sideOffset={12}>
37
39
  <Select.ScrollUpButton class="select-scroll-button">
38
40
  <CaretDoubleUp class="select-scroll-button-icon" />
39
41
  </Select.ScrollUpButton>
package/dist/components/core/select/SingleSelect.svelte.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import "./select.css";
2
2
  import type { SelectItem } from "./Types.js";
3
3
  declare const SingleSelect: import("svelte").Component<{
4
+ value?: any;
4
5
  items?: SelectItem[];
5
6
  placeholder?: string;
6
- } & Record<string, any>, {}, "">;
7
+ class: any;
8
+ } & Record<string, any>, {}, "value">;
7
9
  type SingleSelect = ReturnType<typeof SingleSelect>;
8
10
  export default SingleSelect;
package/dist/components/core/sidebar/Sidebar.svelte CHANGED
@@ -11,16 +11,14 @@
11
11
 
12
12
  let { items, class: className }: Props = $props();
13
13
 
14
- let activeItem = $state(page.url.pathname);
15
- $effect(() => {
16
- activeItem = page.url.pathname;
17
- });
14
+ let currentRoute = $derived(page.url.pathname);
18
15
  </script>
19
16
 
20
17
  <div class={`${className} sidebar`}>
21
18
  {#each items as i}
22
- <div
23
- class={`sidebar-item ${i.Route === activeItem ? "sidebar-item--active" : "sidebar-item--inactive"}`}
19
+ <a
20
+ href={i.Route}
21
+ class={`sidebar-item ${currentRoute.startsWith(i.Route) ? "sidebar-item--active" : "sidebar-item--inactive"}`}
24
22
  >
25
23
  {#if i.Icon}
26
24
  <IconContext
@@ -30,6 +28,6 @@
30
28
  </IconContext>
31
29
  {/if}
32
30
  <span class="sidebar-item__label">{i.Label}</span>
33
- </div>
31
+ </a>
34
32
  {/each}
35
33
  </div>
package/dist/components/core/sidebar/Types.d.ts CHANGED
@@ -2,6 +2,6 @@ import type { IconComponentProps } from "phosphor-svelte";
2
2
  import type { Component } from "svelte";
3
3
  export type SidebarItem = {
4
4
  Label: string;
5
- Route?: string;
5
+ Route: string;
6
6
  Icon?: Component<IconComponentProps, {}, "">;
7
7
  };
package/dist/components/core/sidebar/sidebar.css CHANGED
@@ -24,7 +24,7 @@
24
24
  .sidebar-item--active {
25
25
  background-color: var(--accent-primary-content);
26
26
  color: var(--content-inversed);
27
- font-weight: 700;
27
+ font-weight: 500;
28
28
  }
29
29
 
30
30
  .sidebar-item--inactive {
package/dist/components/styling/oka-style-provider/oka-style.css CHANGED
@@ -23,17 +23,6 @@
23
23
  }
24
24
 
25
25
  :root {
26
- --color-amber-50: #fefbea;
27
- --color-amber-100: #fef3c6;
28
- --color-amber-200: #fde585;
29
- --color-amber-300: #fed22f;
30
- --color-amber-400: #feb900;
31
- --color-amber-500: #fd9900;
32
- --color-amber-600: #e17100;
33
- --color-amber-700: #ba4c00;
34
- --color-amber-800: #963b00;
35
- --color-amber-900: #7a3206;
36
- --color-amber-950: #451901;
37
26
  --color-appta-50: #dff6ff;
38
27
  --color-appta-100: #c7eeff;
39
28
  --color-appta-200: #96dbfd;
@@ -47,519 +36,286 @@
47
36
  --color-appta-950: #02121e;
48
37
  --color-appta-primary: #58C4F5;
49
38
  --color-appta-secondary: #4750FF;
50
- --color-black: #000;
51
- --color-blue-50: #eef5fe;
52
- --color-blue-100: #daeafe;
53
- --color-blue-200: #bddafe;
54
- --color-blue-300: #8dc5fe;
55
- --color-blue-400: #50a2fe;
56
- --color-blue-500: #2b7ffe;
57
- --color-blue-600: #155cfb;
58
- --color-blue-700: #1347e5;
59
- --color-blue-800: #193bb8;
60
- --color-blue-900: #1b388e;
61
- --color-blue-950: #162455;
62
- --color-cyan-50: #ebfdfe;
63
- --color-cyan-100: #cefafe;
64
- --color-cyan-200: #a2f3fc;
65
- --color-cyan-300: #53e9fc;
66
- --color-cyan-400: #00d2f2;
67
- --color-cyan-500: #00b8da;
68
- --color-cyan-600: #0092b8;
69
- --color-cyan-700: #007594;
70
- --color-cyan-800: #005e78;
71
- --color-cyan-900: #104e64;
72
- --color-cyan-950: #053344;
73
- --color-emerald-50: #ebfcf4;
74
- --color-emerald-100: #d0fae4;
75
- --color-emerald-200: #a4f3cf;
76
- --color-emerald-300: #5ee9b4;
77
- --color-emerald-400: #00d491;
78
- --color-emerald-500: #00bc7c;
79
- --color-emerald-600: #009865;
80
- --color-emerald-700: #007955;
81
- --color-emerald-800: #006044;
82
- --color-emerald-900: #004e3a;
83
- --color-emerald-950: #002c21;
84
- --color-fuchsia-50: #fcf3fe;
85
- --color-fuchsia-100: #fae7fe;
86
- --color-fuchsia-200: #f5cffe;
87
- --color-fuchsia-300: #f3a7fe;
88
- --color-fuchsia-400: #ed6afe;
89
- --color-fuchsia-500: #e12afb;
90
- --color-fuchsia-600: #c700de;
91
- --color-fuchsia-700: #a700b7;
92
- --color-fuchsia-800: #8a0194;
93
- --color-fuchsia-900: #721377;
94
- --color-fuchsia-950: #4a004f;
95
- --color-gray-50: #f8fafb;
96
- --color-gray-100: #f2f4f6;
97
- --color-gray-200: #e5e7eb;
98
- --color-gray-300: #d0d5db;
99
- --color-gray-400: #99a1ae;
100
- --color-gray-500: #697282;
101
- --color-gray-600: #495565;
102
- --color-gray-700: #354152;
103
- --color-gray-800: #1d2838;
104
- --color-gray-900: #101727;
105
- --color-gray-950: #020712;
106
- --color-green-50: #f0fdf4;
107
- --color-green-100: #dbfbe6;
108
- --color-green-200: #b8f7cf;
109
- --color-green-300: #7af1a7;
110
- --color-green-400: #05df72;
111
- --color-green-500: #00c850;
112
- --color-green-600: #00a63d;
113
- --color-green-700: #008235;
114
- --color-green-800: #016630;
115
- --color-green-900: #0d532b;
116
- --color-green-950: #032e15;
117
- --color-indigo-50: #eef2fe;
118
- --color-indigo-100: #dfe7fe;
119
- --color-indigo-200: #c6d1fe;
120
- --color-indigo-300: #a2b3fe;
121
- --color-indigo-400: #7c86fe;
122
- --color-indigo-500: #615efe;
123
- --color-indigo-600: #4f39f6;
124
- --color-indigo-700: #432dd7;
125
- --color-indigo-800: #3629ab;
126
- --color-indigo-900: #302c85;
127
- --color-indigo-950: #1d1a4c;
128
- --color-lime-50: #f7fee7;
129
- --color-lime-100: #ebfcca;
130
- --color-lime-200: #d8f998;
131
- --color-lime-300: #baf351;
132
- --color-lime-400: #99e500;
133
- --color-lime-500: #7cce00;
134
- --color-lime-600: #5ea500;
135
- --color-lime-700: #487d00;
136
- --color-lime-800: #3c6200;
137
- --color-lime-900: #34530e;
138
- --color-lime-950: #192e02;
139
- --color-neutral-50: #f9f9f9;
140
- --color-neutral-100: #f4f4f4;
141
- --color-neutral-200: #e5e5e5;
142
- --color-neutral-300: #d4d4d4;
143
- --color-neutral-400: #a0a0a0;
144
- --color-neutral-500: #737373;
145
- --color-neutral-600: #525252;
146
- --color-neutral-700: #3f3f3f;
147
- --color-neutral-800: #262626;
148
- --color-neutral-900: #171717;
149
- --color-neutral-950: #0a0a0a;
150
- --color-orange-50: #fef7ec;
151
- --color-orange-100: #feecd4;
152
- --color-orange-200: #fed6a7;
153
- --color-orange-300: #feb869;
154
- --color-orange-400: #fe8803;
155
- --color-orange-500: #fe6800;
156
- --color-orange-600: #f44900;
157
- --color-orange-700: #c93400;
158
- --color-orange-800: #9f2d00;
159
- --color-orange-900: #7e2a0b;
160
- --color-orange-950: #431205;
161
- --color-pink-50: #fcf1f7;
162
- --color-pink-100: #fce6f3;
163
- --color-pink-200: #fbcee8;
164
- --color-pink-300: #fda4d5;
165
- --color-pink-400: #fb63b6;
166
- --color-pink-500: #f6329a;
167
- --color-pink-600: #e50076;
168
- --color-pink-700: #c6005b;
169
- --color-pink-800: #a2004c;
170
- --color-pink-900: #851042;
171
- --color-pink-950: #510323;
172
- --color-purple-50: #faf5fe;
173
- --color-purple-100: #f2e7fe;
174
- --color-purple-200: #e9d4fe;
175
- --color-purple-300: #d9b1fe;
176
- --color-purple-400: #c17afe;
177
- --color-purple-500: #ac46fe;
178
- --color-purple-600: #980ffa;
179
- --color-purple-700: #8200da;
180
- --color-purple-800: #6d10b0;
181
- --color-purple-900: #59168b;
182
- --color-purple-950: #3b0366;
183
- --color-red-50: #fef2f2;
184
- --color-red-100: #fee1e1;
185
- --color-red-200: #fec9c9;
186
- --color-red-300: #fea1a2;
187
- --color-red-400: #fe6366;
188
- --color-red-500: #fa2b36;
189
- --color-red-600: #e7000a;
190
- --color-red-700: #c10007;
191
- --color-red-800: #9e0711;
192
- --color-red-900: #811719;
193
- --color-red-950: #460808;
194
- --color-rose-50: #fef0f1;
195
- --color-rose-100: #fee3e5;
196
- --color-rose-200: #feccd2;
197
- --color-rose-300: #fea0ad;
198
- --color-rose-400: #fe637e;
199
- --color-rose-500: #fe1f56;
200
- --color-rose-600: #ec003f;
201
- --color-rose-700: #c60035;
202
- --color-rose-800: #a40035;
203
- --color-rose-900: #8a0735;
204
- --color-rose-950: #4d0218;
205
- --color-sky-50: #eff9fe;
206
- --color-sky-100: #dff1fe;
207
- --color-sky-200: #b8e6fe;
208
- --color-sky-300: #73d4fe;
209
- --color-sky-400: #00bbfe;
210
- --color-sky-500: #00a5f4;
211
- --color-sky-600: #0084d1;
212
- --color-sky-700: #0068a8;
213
- --color-sky-800: #005889;
214
- --color-sky-900: #014a70;
215
- --color-sky-950: #052e4a;
216
- --color-slate-50: #f8f9fb;
217
- --color-slate-100: #f0f4f9;
218
- --color-slate-200: #e1e8f0;
219
- --color-slate-300: #cad5e2;
220
- --color-slate-400: #90a1b8;
221
- --color-slate-500: #61738d;
222
- --color-slate-600: #45556c;
223
- --color-slate-700: #314157;
224
- --color-slate-800: #1c283c;
225
- --color-slate-900: #0e162b;
226
- --color-slate-950: #010517;
227
- --color-stone-50: #fafaf9;
228
- --color-stone-100: #f5f5f4;
229
- --color-stone-200: #e7e4e3;
230
- --color-stone-300: #d6d3d0;
231
- --color-stone-400: #a69f9b;
232
- --color-stone-500: #78706b;
233
- --color-stone-600: #57524d;
234
- --color-stone-700: #443f3b;
235
- --color-stone-800: #292423;
236
- --color-stone-900: #1b1817;
237
- --color-stone-950: #0b0a09;
238
- --color-teal-50: #f0fdfa;
239
- --color-teal-100: #cbfbf1;
240
- --color-teal-200: #95f6e4;
241
- --color-teal-300: #46ecd4;
242
- --color-teal-400: #00d4bd;
243
- --color-teal-500: #00bba6;
244
- --color-teal-600: #009689;
245
- --color-teal-700: #00776e;
246
- --color-teal-800: #005f59;
247
- --color-teal-900: #0a4e4a;
248
- --color-teal-950: #022f2e;
249
- --color-violet-50: #f4f2fe;
250
- --color-violet-100: #ece8fe;
251
- --color-violet-200: #dcd5fe;
252
- --color-violet-300: #c4b3fe;
253
- --color-violet-400: #a683fe;
254
- --color-violet-500: #8d51fe;
255
- --color-violet-600: #7f22fd;
256
- --color-violet-700: #7008e7;
257
- --color-violet-800: #5d0ec0;
258
- --color-violet-900: #4d1699;
259
- --color-violet-950: #2e0c67;
260
- --color-white: #fff;
261
- --color-yellow-50: #fdfbe8;
262
- --color-yellow-100: #fef9c1;
263
- --color-yellow-200: #feef85;
264
- --color-yellow-300: #fedf20;
265
- --color-yellow-400: #fdc700;
266
- --color-yellow-500: #f0b000;
267
- --color-yellow-600: #d08700;
268
- --color-yellow-700: #a65f00;
269
- --color-yellow-800: #884a00;
270
- --color-yellow-900: #723d0a;
271
- --color-yellow-950: #421f04;
272
- --color-zinc-50: #f9f9f9;
273
- --color-zinc-100: #f3f3f4;
274
- --color-zinc-200: #e4e4e7;
275
- --color-zinc-300: #d3d3d8;
276
- --color-zinc-400: #9e9ea9;
277
- --color-zinc-500: #70707b;
278
- --color-zinc-600: #51515c;
279
- --color-zinc-700: #3e3e46;
280
- --color-zinc-800: #26262a;
281
- --color-zinc-900: #17171a;
282
- --color-zinc-950: #09090b;
283
39
 
284
40
  /* default-light */
285
41
  --accent-primary: var(--color-appta-primary);
286
- --accent-primary-content: var(--color-sky-900);
42
+ --accent-primary-content: #014a70;
287
43
  --accent-primary-surface: var(--color-appta-50);
288
44
  --accent-secondary: var(--color-appta-secondary);
289
- --accent-secondary-content: var(--color-indigo-900);
290
- --accent-secondary-surface: var(--color-indigo-100);
291
- --action-error: var(--color-red-700);
45
+ --accent-secondary-content: #302c85;
46
+ --accent-secondary-surface: #dfe7fe;
47
+ --action-error: #c10007;
292
48
  --action-primary: var(--color-appta-700);
293
49
  --action-primary-hover: var(--color-appta-600);
294
- --action-primary-muted: var(--color-slate-300);
50
+ --action-primary-muted: #cad5e2;
295
51
  --action-primary-press: var(--color-appta-900);
296
- --action-secondary: var(--color-slate-100);
52
+ --action-secondary: #f0f4f9;
297
53
  --action-secondary-hover: var(--color-appta-50);
298
54
  --action-secondary-press: var(--color-appta-200);
299
- --content-error: var(--color-red-800);
300
- --content-inversed: var(--color-white);
301
- --content-muted: var(--color-slate-300);
55
+ --content-error: #9e0711;
56
+ --content-inversed: #fff;
57
+ --content-muted: #cad5e2;
302
58
  --content-primary: var(--color-appta-900);
303
- --content-secondary: var(--color-slate-700);
304
- --content-severe: var(--color-orange-800);
305
- --content-success: var(--color-green-800);
306
- --content-tertiary: var(--color-slate-500);
307
- --content-warning: var(--color-amber-800);
308
- --palette-blue-content: var(--color-blue-900);
309
- --palette-blue-highlight: var(--color-blue-400);
310
- --palette-blue-surface: var(--color-blue-100);
311
- --palette-cyan-content: var(--color-cyan-800);
312
- --palette-cyan-highlight: var(--color-cyan-400);
313
- --palette-cyan-surface: var(--color-cyan-100);
314
- --palette-emerald-content: var(--color-emerald-800);
315
- --palette-emerald-highlight: var(--color-emerald-400);
316
- --palette-emerald-surface: var(--color-emerald-100);
317
- --palette-fuchsia-content: var(--color-fuchsia-800);
318
- --palette-fuchsia-highlight: var(--color-fuchsia-400);
319
- --palette-fuchsia-surface: var(--color-fuchsia-100);
320
- --palette-gray-content: var(--color-gray-800);
321
- --palette-gray-highlight: var(--color-gray-400);
322
- --palette-gray-surface: var(--color-gray-100);
323
- --palette-indigo-content: var(--color-indigo-800);
324
- --palette-indigo-highlight: var(--color-indigo-400);
325
- --palette-indigo-surface: var(--color-indigo-100);
326
- --palette-lime-content: var(--color-lime-800);
327
- --palette-lime-highlight: var(--color-lime-400);
328
- --palette-lime-surface: var(--color-lime-100);
329
- --palette-pink-content: var(--color-pink-800);
330
- --palette-pink-highlight: var(--color-pink-400);
331
- --palette-pink-surface: var(--color-pink-100);
332
- --palette-purple-content: var(--color-purple-800);
333
- --palette-purple-highlight: var(--color-purple-400);
334
- --palette-purple-surface: var(--color-purple-100);
335
- --palette-rose-content: var(--color-rose-800);
336
- --palette-rose-highlight: var(--color-rose-400);
337
- --palette-rose-surface: var(--color-rose-100);
338
- --palette-sky-content: var(--color-sky-800);
339
- --palette-sky-highlight: var(--color-sky-400);
340
- --palette-sky-surface: var(--color-sky-100);
341
- --palette-teal-content: var(--color-teal-800);
342
- --palette-teal-highlight: var(--color-teal-400);
343
- --palette-teal-surface: var(--color-teal-100);
344
- --palette-violet-content: var(--color-violet-800);
345
- --palette-violet-highlight: var(--color-violet-400);
346
- --palette-violet-surface: var(--color-violet-100);
347
- --palette-yellow-content: var(--color-yellow-800);
348
- --palette-yellow-highlight: var(--color-yellow-400);
349
- --palette-yellow-surface: var(--color-yellow-100);
350
- --stroke-bold: var(--color-slate-500);
351
- --stroke-error: var(--color-red-400);
352
- --stroke-light: var(--color-slate-300);
353
- --stroke-medium: var(--color-slate-400);
354
- --stroke-muted: var(--color-slate-100);
355
- --stroke-severe: var(--color-orange-400);
356
- --stroke-success: var(--color-green-400);
357
- --stroke-warning: var(--color-amber-400);
358
- --stroke-xtrabold: var(--color-slate-600);
359
- --surface-error: var(--color-red-100);
360
- --surface-primary: var(--color-white);
361
- --surface-secondary: var(--color-slate-50);
362
- --surface-severe: var(--color-orange-100);
363
- --surface-success: var(--color-green-100);
59
+ --content-secondary: #314157;
60
+ --content-severe: #9f2d00;
61
+ --content-success: #016630;
62
+ --content-tertiary: #61738d;
63
+ --content-warning: #963b00;
64
+ --palette-blue-content: #1b388e;
65
+ --palette-blue-highlight: #50a2fe;
66
+ --palette-blue-surface: #daeafe;
67
+ --palette-cyan-content: #005e78;
68
+ --palette-cyan-highlight: #00d2f2;
69
+ --palette-cyan-surface: #cefafe;
70
+ --palette-emerald-content: #006044;
71
+ --palette-emerald-highlight: #00d491;
72
+ --palette-emerald-surface: #d0fae4;
73
+ --palette-fuchsia-content: #8a0194;
74
+ --palette-fuchsia-highlight: #ed6afe;
75
+ --palette-fuchsia-surface: #fae7fe;
76
+ --palette-gray-content: #1d2838;
77
+ --palette-gray-highlight: #99a1ae;
78
+ --palette-gray-surface: #f2f4f6;
79
+ --palette-indigo-content: #3629ab;
80
+ --palette-indigo-highlight: #7c86fe;
81
+ --palette-indigo-surface: #dfe7fe;
82
+ --palette-lime-content: #3c6200;
83
+ --palette-lime-highlight: #99e500;
84
+ --palette-lime-surface: #ebfcca;
85
+ --palette-pink-content: #a2004c;
86
+ --palette-pink-highlight: #fb63b6;
87
+ --palette-pink-surface: #fce6f3;
88
+ --palette-purple-content: #6d10b0;
89
+ --palette-purple-highlight: #c17afe;
90
+ --palette-purple-surface: #f2e7fe;
91
+ --palette-rose-content: #a40035;
92
+ --palette-rose-highlight: #fe637e;
93
+ --palette-rose-surface: #fee3e5;
94
+ --palette-sky-content: #005889;
95
+ --palette-sky-highlight: #00bbfe;
96
+ --palette-sky-surface: #dff1fe;
97
+ --palette-teal-content: #005f59;
98
+ --palette-teal-highlight: #00d4bd;
99
+ --palette-teal-surface: #cbfbf1;
100
+ --palette-violet-content: #5d0ec0;
101
+ --palette-violet-highlight: #a683fe;
102
+ --palette-violet-surface: #ece8fe;
103
+ --palette-yellow-content: #884a00;
104
+ --palette-yellow-highlight: #fdc700;
105
+ --palette-yellow-surface: #fef9c1;
106
+ --stroke-bold: #61738d;
107
+ --stroke-error: #fe6366;
108
+ --stroke-light: #cad5e2;
109
+ --stroke-medium: #90a1b8;
110
+ --stroke-muted: #f0f4f9;
111
+ --stroke-severe: #fe8803;
112
+ --stroke-success: #05df72;
113
+ --stroke-warning: #feb900;
114
+ --stroke-xtrabold: #45556c;
115
+ --surface-error: #fee1e1;
116
+ --surface-primary: #fff;
117
+ --surface-secondary: #f8f9fb;
118
+ --surface-severe: #feecd4;
119
+ --surface-success: #dbfbe6;
364
120
  --surface-tertiary: var(--color-appta-100);
365
- --surface-warning: var(--color-amber-100);
121
+ --surface-warning: #fef3c6;
366
122
  }
367
123
 
368
124
  body.default-dark {
369
125
  --accent-primary: var(--color-appta-300);
370
126
  --accent-primary-content: var(--color-appta-200);
371
127
  --accent-primary-surface: var(--color-appta-900);
372
- --accent-secondary: var(--color-indigo-300);
373
- --accent-secondary-content: var(--color-indigo-200);
374
- --accent-secondary-surface: var(--color-indigo-950);
375
- --action-error: var(--color-red-400);
128
+ --accent-secondary: #a2b3fe;
129
+ --accent-secondary-content: #c6d1fe;
130
+ --accent-secondary-surface: #1d1a4c;
131
+ --action-error: #fe6366;
376
132
  --action-primary: var(--color-appta-primary);
377
- --action-primary-hover: var(--color-white);
378
- --action-primary-muted: var(--color-slate-700);
133
+ --action-primary-hover: #fff;
134
+ --action-primary-muted: #314157;
379
135
  --action-primary-press: var(--color-appta-200);
380
- --action-secondary: var(--color-slate-800);
381
- --action-secondary-hover: var(--color-slate-700);
382
- --action-secondary-press: var(--color-slate-900);
383
- --content-error: var(--color-red-200);
384
- --content-inversed: var(--color-slate-950);
385
- --content-muted: var(--color-slate-700);
386
- --content-primary: var(--color-sky-50);
387
- --content-secondary: var(--color-slate-400);
388
- --content-severe: var(--color-orange-200);
389
- --content-success: var(--color-green-200);
390
- --content-tertiary: var(--color-slate-500);
391
- --content-warning: var(--color-amber-200);
392
- --palette-blue-content: var(--color-blue-200);
393
- --palette-blue-highlight: var(--color-blue-500);
394
- --palette-blue-surface: var(--color-blue-800);
395
- --palette-cyan-content: var(--color-cyan-200);
396
- --palette-cyan-highlight: var(--color-cyan-500);
397
- --palette-cyan-surface: var(--color-cyan-800);
398
- --palette-emerald-content: var(--color-emerald-200);
399
- --palette-emerald-highlight: var(--color-emerald-500);
400
- --palette-emerald-surface: var(--color-emerald-800);
401
- --palette-fuchsia-content: var(--color-fuchsia-200);
402
- --palette-fuchsia-highlight: var(--color-fuchsia-500);
403
- --palette-fuchsia-surface: var(--color-fuchsia-800);
404
- --palette-gray-content: var(--color-gray-200);
405
- --palette-gray-highlight: var(--color-gray-500);
406
- --palette-gray-surface: var(--color-gray-800);
407
- --palette-indigo-content: var(--color-indigo-200);
408
- --palette-indigo-highlight: var(--color-indigo-500);
409
- --palette-indigo-surface: var(--color-indigo-800);
410
- --palette-lime-content: var(--color-lime-200);
411
- --palette-lime-highlight: var(--color-lime-500);
412
- --palette-lime-surface: var(--color-lime-800);
413
- --palette-pink-content: var(--color-pink-200);
414
- --palette-pink-highlight: var(--color-pink-500);
415
- --palette-pink-surface: var(--color-pink-800);
416
- --palette-purple-content: var(--color-purple-200);
417
- --palette-purple-highlight: var(--color-purple-500);
418
- --palette-purple-surface: var(--color-purple-800);
419
- --palette-rose-content: var(--color-rose-200);
420
- --palette-rose-highlight: var(--color-rose-500);
421
- --palette-rose-surface: var(--color-rose-800);
422
- --palette-sky-content: var(--color-sky-200);
423
- --palette-sky-highlight: var(--color-sky-500);
424
- --palette-sky-surface: var(--color-sky-800);
425
- --palette-teal-content: var(--color-teal-200);
426
- --palette-teal-highlight: var(--color-teal-500);
427
- --palette-teal-surface: var(--color-teal-800);
428
- --palette-violet-content: var(--color-violet-200);
429
- --palette-violet-highlight: var(--color-violet-500);
430
- --palette-violet-surface: var(--color-violet-800);
431
- --palette-yellow-content: var(--color-yellow-200);
432
- --palette-yellow-highlight: var(--color-yellow-500);
433
- --palette-yellow-surface: var(--color-yellow-800);
434
- --stroke-bold: var(--color-slate-500);
435
- --stroke-error: var(--color-red-500);
436
- --stroke-light: var(--color-slate-700);
437
- --stroke-medium: var(--color-slate-600);
438
- --stroke-muted: var(--color-slate-800);
439
- --stroke-severe: var(--color-orange-500);
440
- --stroke-success: var(--color-green-500);
441
- --stroke-warning: var(--color-amber-500);
442
- --stroke-xtrabold: var(--color-slate-400);
443
- --surface-error: var(--color-red-800);
444
- --surface-primary: var(--color-slate-950);
445
- --surface-secondary: var(--color-slate-900);
446
- --surface-severe: var(--color-orange-800);
447
- --surface-success: var(--color-green-800);
448
- --surface-tertiary: var(--color-slate-800);
449
- --surface-warning: var(--color-amber-800);
136
+ --action-secondary: #1c283c;
137
+ --action-secondary-hover: #314157;
138
+ --action-secondary-press: #0e162b;
139
+ --content-error: #fec9c9;
140
+ --content-inversed: #010517;
141
+ --content-muted: #314157;
142
+ --content-primary: #eff9fe;
143
+ --content-secondary: #90a1b8;
144
+ --content-severe: #fed6a7;
145
+ --content-success: #b8f7cf;
146
+ --content-tertiary: #61738d;
147
+ --content-warning: #fde585;
148
+ --palette-blue-content: #bddafe;
149
+ --palette-blue-highlight: #2b7ffe;
150
+ --palette-blue-surface: #193bb8;
151
+ --palette-cyan-content: #a2f3fc;
152
+ --palette-cyan-highlight: #00b8da;
153
+ --palette-cyan-surface: #005e78;
154
+ --palette-emerald-content: #a4f3cf;
155
+ --palette-emerald-highlight: #00bc7c;
156
+ --palette-emerald-surface: #006044;
157
+ --palette-fuchsia-content: #f5cffe;
158
+ --palette-fuchsia-highlight: #e12afb;
159
+ --palette-fuchsia-surface: #8a0194;
160
+ --palette-gray-content: #e5e7eb;
161
+ --palette-gray-highlight: #697282;
162
+ --palette-gray-surface: #1d2838;
163
+ --palette-indigo-content: #c6d1fe;
164
+ --palette-indigo-highlight: #615efe;
165
+ --palette-indigo-surface: #3629ab;
166
+ --palette-lime-content: #d8f998;
167
+ --palette-lime-highlight: #7cce00;
168
+ --palette-lime-surface: #3c6200;
169
+ --palette-pink-content: #fbcee8;
170
+ --palette-pink-highlight: #f6329a;
171
+ --palette-pink-surface: #a2004c;
172
+ --palette-purple-content: #e9d4fe;
173
+ --palette-purple-highlight: #ac46fe;
174
+ --palette-purple-surface: #6d10b0;
175
+ --palette-rose-content: #feccd2;
176
+ --palette-rose-highlight: #fe1f56;
177
+ --palette-rose-surface: #a40035;
178
+ --palette-sky-content: #b8e6fe;
179
+ --palette-sky-highlight: #00a5f4;
180
+ --palette-sky-surface: #005889;
181
+ --palette-teal-content: #95f6e4;
182
+ --palette-teal-highlight: #00bba6;
183
+ --palette-teal-surface: #005f59;
184
+ --palette-violet-content: #dcd5fe;
185
+ --palette-violet-highlight: #8d51fe;
186
+ --palette-violet-surface: #5d0ec0;
187
+ --palette-yellow-content: #feef85;
188
+ --palette-yellow-highlight: #f0b000;
189
+ --palette-yellow-surface: #884a00;
190
+ --stroke-bold: #61738d;
191
+ --stroke-error: #fa2b36;
192
+ --stroke-light: #314157;
193
+ --stroke-medium: #45556c;
194
+ --stroke-muted: #1c283c;
195
+ --stroke-severe: #fe6800;
196
+ --stroke-success: #00c850;
197
+ --stroke-warning: #feb900;
198
+ --stroke-xtrabold: #90a1b8;
199
+ --surface-error: #9e0711;
200
+ --surface-primary: #010517;
201
+ --surface-secondary: #0e162b;
202
+ --surface-severe: #9f2d00;
203
+ --surface-success: #016630;
204
+ --surface-tertiary: #1c283c;
205
+ --surface-warning: #963b00;
450
206
  }
451
207
 
452
208
  body.neutral-light {
453
- --accent-primary: var(--color-zinc-500);
454
- --accent-primary-content: var(--color-zinc-800);
455
- --accent-primary-surface: var(--color-zinc-50);
209
+ --accent-primary: #70707b;
210
+ --accent-primary-content: #26262a;
211
+ --accent-primary-surface: #f9f9f9;
456
212
  --accent-secondary: var(--color-appta-primary);
457
213
  --accent-secondary-content: var(--color-appta-900);
458
214
  --accent-secondary-surface: var(--color-appta-100);
459
- --action-primary: var(--color-zinc-800);
460
- --action-primary-hover: var(--color-zinc-700);
461
- --action-primary-muted: var(--color-zinc-300);
462
- --action-primary-press: var(--color-zinc-900);
463
- --action-secondary: var(--color-zinc-200);
464
- --action-secondary-hover: var(--color-zinc-100);
465
- --action-secondary-press: var(--color-zinc-300);
466
- --content-inversed: var(--color-white);
467
- --content-muted: var(--color-zinc-300);
468
- --content-primary: var(--color-zinc-900);
469
- --content-secondary: var(--color-zinc-600);
470
- --content-tertiary: var(--color-zinc-400);
471
- --stroke-bold: var(--color-zinc-500);
472
- --stroke-light: var(--color-zinc-300);
473
- --stroke-medium: var(--color-zinc-400);
474
- --stroke-muted: var(--color-zinc-200);
475
- --stroke-xtrabold: var(--color-zinc-600);
476
- --surface-primary: var(--color-white);
477
- --surface-secondary: var(--color-zinc-50);
478
- --surface-tertiary: var(--color-zinc-100);
215
+ --action-primary: #26262a;
216
+ --action-primary-hover: #3e3e46;
217
+ --action-primary-muted: #d3d3d8;
218
+ --action-primary-press: #17171a;
219
+ --action-secondary: #e4e4e7;
220
+ --action-secondary-hover: #f3f3f4;
221
+ --action-secondary-press: #d3d3d8;
222
+ --content-inversed: #fff;
223
+ --content-muted: #d3d3d8;
224
+ --content-primary: #17171a;
225
+ --content-secondary: #51515c;
226
+ --content-tertiary: #9e9ea9;
227
+ --stroke-bold: #70707b;
228
+ --stroke-light: #d3d3d8;
229
+ --stroke-medium: #9e9ea9;
230
+ --stroke-muted: #e4e4e7;
231
+ --stroke-xtrabold: #51515c;
232
+ --surface-primary: #fff;
233
+ --surface-secondary: #f9f9f9;
234
+ --surface-tertiary: #f3f3f4;
479
235
  }
480
236
 
481
237
  body.neutral-dark {
482
- --accent-primary: var(--color-zinc-500);
483
- --accent-primary-content: var(--color-zinc-200);
484
- --accent-primary-surface: var(--color-zinc-900);
238
+ --accent-primary: #70707b;
239
+ --accent-primary-content: #e4e4e7;
240
+ --accent-primary-surface: #17171a;
485
241
  --accent-secondary: var(--color-appta-primary);
486
242
  --accent-secondary-content: var(--color-appta-200);
487
243
  --accent-secondary-surface: var(--color-appta-900);
488
- --action-error: var(--color-red-400);
489
- --action-primary: var(--color-zinc-50);
490
- --action-primary-hover: var(--color-white);
491
- --action-primary-muted: var(--color-zinc-700);
492
- --action-primary-press: var(--color-zinc-200);
493
- --action-secondary: var(--color-zinc-800);
494
- --action-secondary-hover: var(--color-zinc-700);
495
- --action-secondary-press: var(--color-zinc-900);
496
- --content-error: var(--color-red-200);
497
- --content-inversed: var(--color-zinc-950);
498
- --content-muted: var(--color-zinc-700);
499
- --content-primary: var(--color-zinc-50);
500
- --content-secondary: var(--color-zinc-400);
501
- --content-severe: var(--color-orange-200);
502
- --content-success: var(--color-green-200);
503
- --content-tertiary: var(--color-zinc-500);
504
- --content-warning: var(--color-amber-200);
505
- --palette-blue-content: var(--color-blue-200);
506
- --palette-blue-highlight: var(--color-blue-500);
507
- --palette-blue-surface: var(--color-blue-800);
508
- --palette-cyan-content: var(--color-cyan-200);
509
- --palette-cyan-highlight: var(--color-cyan-500);
510
- --palette-cyan-surface: var(--color-cyan-800);
511
- --palette-emerald-content: var(--color-emerald-200);
512
- --palette-emerald-highlight: var(--color-emerald-500);
513
- --palette-emerald-surface: var(--color-emerald-800);
514
- --palette-fuchsia-content: var(--color-fuchsia-200);
515
- --palette-fuchsia-highlight: var(--color-fuchsia-500);
516
- --palette-fuchsia-surface: var(--color-fuchsia-800);
517
- --palette-gray-content: var(--color-gray-200);
518
- --palette-gray-highlight: var(--color-gray-500);
519
- --palette-gray-surface: var(--color-gray-800);
520
- --palette-indigo-content: var(--color-indigo-200);
521
- --palette-indigo-highlight: var(--color-indigo-500);
522
- --palette-indigo-surface: var(--color-indigo-800);
523
- --palette-lime-content: var(--color-lime-200);
524
- --palette-lime-highlight: var(--color-lime-500);
525
- --palette-lime-surface: var(--color-lime-800);
526
- --palette-pink-content: var(--color-pink-200);
527
- --palette-pink-highlight: var(--color-pink-500);
528
- --palette-pink-surface: var(--color-pink-800);
529
- --palette-purple-content: var(--color-purple-200);
530
- --palette-purple-highlight: var(--color-purple-500);
531
- --palette-purple-surface: var(--color-purple-800);
532
- --palette-rose-content: var(--color-rose-200);
533
- --palette-rose-highlight: var(--color-rose-500);
534
- --palette-rose-surface: var(--color-rose-800);
535
- --palette-sky-content: var(--color-sky-200);
536
- --palette-sky-highlight: var(--color-sky-500);
537
- --palette-sky-surface: var(--color-sky-800);
538
- --palette-teal-content: var(--color-teal-200);
539
- --palette-teal-highlight: var(--color-teal-500);
540
- --palette-teal-surface: var(--color-teal-800);
541
- --palette-violet-content: var(--color-violet-200);
542
- --palette-violet-highlight: var(--color-violet-500);
543
- --palette-violet-surface: var(--color-violet-800);
544
- --palette-yellow-content: var(--color-yellow-200);
545
- --palette-yellow-highlight: var(--color-yellow-500);
546
- --palette-yellow-surface: var(--color-yellow-800);
547
- --stroke-bold: var(--color-zinc-500);
548
- --stroke-error: var(--color-red-500);
549
- --stroke-light: var(--color-zinc-700);
550
- --stroke-medium: var(--color-zinc-600);
551
- --stroke-muted: var(--color-zinc-800);
552
- --stroke-severe: var(--color-orange-500);
553
- --stroke-success: var(--color-green-500);
554
- --stroke-warning: var(--color-amber-500);
555
- --stroke-xtrabold: var(--color-zinc-400);
556
- --surface-error: var(--color-red-800);
557
- --surface-primary: var(--color-zinc-950);
558
- --surface-secondary: var(--color-zinc-900);
559
- --surface-severe: var(--color-orange-800);
560
- --surface-success: var(--color-green-800);
561
- --surface-tertiary: var(--color-zinc-800);
562
- --surface-warning: var(--color-amber-800);
244
+ --action-error: #fe6366;
245
+ --action-primary: #f9f9f9;
246
+ --action-primary-hover: #fff;
247
+ --action-primary-muted: #3e3e46;
248
+ --action-primary-press: #e4e4e7;
249
+ --action-secondary: #26262a;
250
+ --action-secondary-hover: #3e3e46;
251
+ --action-secondary-press: #17171a;
252
+ --content-error: #fec9c9;
253
+ --content-inversed: #09090b;
254
+ --content-muted: #3e3e46;
255
+ --content-primary: #f9f9f9;
256
+ --content-secondary: #9e9ea9;
257
+ --content-severe: #fed6a7;
258
+ --content-success: #b8f7cf;
259
+ --content-tertiary: #70707b;
260
+ --content-warning: #fde585;
261
+ --palette-blue-content: #bddafe;
262
+ --palette-blue-highlight: #2b7ffe;
263
+ --palette-blue-surface: #193bb8;
264
+ --palette-cyan-content: #a2f3fc;
265
+ --palette-cyan-highlight: #00b8da;
266
+ --palette-cyan-surface: #005e78;
267
+ --palette-emerald-content: #a4f3cf;
268
+ --palette-emerald-highlight: #00bc7c;
269
+ --palette-emerald-surface: #006044;
270
+ --palette-fuchsia-content: #f5cffe;
271
+ --palette-fuchsia-highlight: #e12afb;
272
+ --palette-fuchsia-surface: #8a0194;
273
+ --palette-gray-content: #e5e7eb;
274
+ --palette-gray-highlight: #697282;
275
+ --palette-gray-surface: #1d2838;
276
+ --palette-indigo-content: #c6d1fe;
277
+ --palette-indigo-highlight: #615efe;
278
+ --palette-indigo-surface: #3629ab;
279
+ --palette-lime-content: #d8f998;
280
+ --palette-lime-highlight: #7cce00;
281
+ --palette-lime-surface: #3c6200;
282
+ --palette-pink-content: #fbcee8;
283
+ --palette-pink-highlight: #f6329a;
284
+ --palette-pink-surface: #a2004c;
285
+ --palette-purple-content: #e9d4fe;
286
+ --palette-purple-highlight: #ac46fe;
287
+ --palette-purple-surface: #6d10b0;
288
+ --palette-rose-content: #feccd2;
289
+ --palette-rose-highlight: #fe1f56;
290
+ --palette-rose-surface: #a40035;
291
+ --palette-sky-content: #b8e6fe;
292
+ --palette-sky-highlight: #00a5f4;
293
+ --palette-sky-surface: #005889;
294
+ --palette-teal-content: #95f6e4;
295
+ --palette-teal-highlight: #00bba6;
296
+ --palette-teal-surface: #005f59;
297
+ --palette-violet-content: #dcd5fe;
298
+ --palette-violet-highlight: #8d51fe;
299
+ --palette-violet-surface: #5d0ec0;
300
+ --palette-yellow-content: #feef85;
301
+ --palette-yellow-highlight: #f0b000;
302
+ --palette-yellow-surface: #884a00;
303
+ --stroke-bold: #70707b;
304
+ --stroke-error: #fa2b36;
305
+ --stroke-light: #3e3e46;
306
+ --stroke-medium: #51515c;
307
+ --stroke-muted: #26262a;
308
+ --stroke-severe: #fe6800;
309
+ --stroke-success: #00c850;
310
+ --stroke-warning: #feb900;
311
+ --stroke-xtrabold: #9e9ea9;
312
+ --surface-error: #9e0711;
313
+ --surface-primary: #09090b;
314
+ --surface-secondary: #17171a;
315
+ --surface-severe: #9f2d00;
316
+ --surface-success: #016630;
317
+ --surface-tertiary: #26262a;
318
+ --surface-warning: #963b00;
563
319
  }
564
320
 
565
321
  body.nord-light {
@@ -614,48 +370,48 @@ body.nord-dark {
614
370
  --content-success: #A3BE8C;
615
371
  --content-tertiary: #B0BEC5;
616
372
  --content-warning: #EBCB8B;
617
- --palette-blue-content: var(--color-blue-200);
618
- --palette-blue-highlight: var(--color-blue-500);
619
- --palette-blue-surface: var(--color-blue-800);
620
- --palette-cyan-content: var(--color-cyan-200);
621
- --palette-cyan-highlight: var(--color-cyan-500);
622
- --palette-cyan-surface: var(--color-cyan-800);
623
- --palette-emerald-content: var(--color-emerald-200);
624
- --palette-emerald-highlight: var(--color-emerald-500);
625
- --palette-emerald-surface: var(--color-emerald-800);
626
- --palette-fuchsia-content: var(--color-fuchsia-200);
627
- --palette-fuchsia-highlight: var(--color-fuchsia-500);
628
- --palette-fuchsia-surface: var(--color-fuchsia-800);
629
- --palette-gray-content: var(--color-gray-200);
630
- --palette-gray-highlight: var(--color-gray-500);
631
- --palette-gray-surface: var(--color-gray-800);
632
- --palette-indigo-content: var(--color-indigo-200);
633
- --palette-indigo-highlight: var(--color-indigo-500);
634
- --palette-indigo-surface: var(--color-indigo-800);
635
- --palette-lime-content: var(--color-lime-200);
636
- --palette-lime-highlight: var(--color-lime-500);
637
- --palette-lime-surface: var(--color-lime-800);
638
- --palette-pink-content: var(--color-pink-200);
639
- --palette-pink-highlight: var(--color-pink-500);
640
- --palette-pink-surface: var(--color-pink-800);
641
- --palette-purple-content: var(--color-purple-200);
642
- --palette-purple-highlight: var(--color-purple-500);
643
- --palette-purple-surface: var(--color-purple-800);
644
- --palette-rose-content: var(--color-rose-200);
645
- --palette-rose-highlight: var(--color-rose-500);
646
- --palette-rose-surface: var(--color-rose-800);
647
- --palette-sky-content: var(--color-sky-200);
648
- --palette-sky-highlight: var(--color-sky-500);
649
- --palette-sky-surface: var(--color-sky-800);
650
- --palette-teal-content: var(--color-teal-200);
651
- --palette-teal-highlight: var(--color-teal-500);
652
- --palette-teal-surface: var(--color-teal-800);
653
- --palette-violet-content: var(--color-violet-200);
654
- --palette-violet-highlight: var(--color-violet-500);
655
- --palette-violet-surface: var(--color-violet-800);
656
- --palette-yellow-content: var(--color-yellow-200);
657
- --palette-yellow-highlight: var(--color-yellow-500);
658
- --palette-yellow-surface: var(--color-yellow-800);
373
+ --palette-blue-content: #bddafe;
374
+ --palette-blue-highlight: #2b7ffe;
375
+ --palette-blue-surface: #193bb8;
376
+ --palette-cyan-content: #a2f3fc;
377
+ --palette-cyan-highlight: #00b8da;
378
+ --palette-cyan-surface: #005e78;
379
+ --palette-emerald-content: #a4f3cf;
380
+ --palette-emerald-highlight: #00bc7c;
381
+ --palette-emerald-surface: #006044;
382
+ --palette-fuchsia-content: #f5cffe;
383
+ --palette-fuchsia-highlight: #e12afb;
384
+ --palette-fuchsia-surface: #8a0194;
385
+ --palette-gray-content: #e5e7eb;
386
+ --palette-gray-highlight: #697282;
387
+ --palette-gray-surface: #1d2838;
388
+ --palette-indigo-content: #c6d1fe;
389
+ --palette-indigo-highlight: #615efe;
390
+ --palette-indigo-surface: #3629ab;
391
+ --palette-lime-content: #d8f998;
392
+ --palette-lime-highlight: #7cce00;
393
+ --palette-lime-surface: #3c6200;
394
+ --palette-pink-content: #fbcee8;
395
+ --palette-pink-highlight: #f6329a;
396
+ --palette-pink-surface: #a2004c;
397
+ --palette-purple-content: #e9d4fe;
398
+ --palette-purple-highlight: #ac46fe;
399
+ --palette-purple-surface: #6d10b0;
400
+ --palette-rose-content: #feccd2;
401
+ --palette-rose-highlight: #fe1f56;
402
+ --palette-rose-surface: #a40035;
403
+ --palette-sky-content: #b8e6fe;
404
+ --palette-sky-highlight: #00a5f4;
405
+ --palette-sky-surface: #005889;
406
+ --palette-teal-content: #95f6e4;
407
+ --palette-teal-highlight: #00bba6;
408
+ --palette-teal-surface: #005f59;
409
+ --palette-violet-content: #dcd5fe;
410
+ --palette-violet-highlight: #8d51fe;
411
+ --palette-violet-surface: #5d0ec0;
412
+ --palette-yellow-content: #feef85;
413
+ --palette-yellow-highlight: #f0b000;
414
+ --palette-yellow-surface: #884a00;
659
415
  --stroke-bold: #D8DEE9;
660
416
  --stroke-light: #4C566A;
661
417
  --stroke-medium: #616E88;
@@ -664,19 +420,19 @@ body.nord-dark {
664
420
  --surface-primary: #2E3440;
665
421
  --surface-secondary: #3B4252;
666
422
  --surface-tertiary: #434C5E;
667
- --action-error: var(--color-red-400);
668
- --content-error: var(--color-red-200);
669
- --content-severe: var(--color-orange-200);
670
- --content-success: var(--color-green-200);
671
- --content-warning: var(--color-amber-200);
672
- --stroke-error: var(--color-red-500);
673
- --stroke-severe: var(--color-orange-500);
674
- --stroke-success: var(--color-green-500);
675
- --stroke-warning: var(--color-amber-500);
676
- --surface-error: var(--color-red-800);
677
- --surface-severe: var(--color-orange-800);
678
- --surface-success: var(--color-green-800);
679
- --surface-warning: var(--color-amber-800);
423
+ --action-error: #fe6366;
424
+ --content-error: #fec9c9;
425
+ --content-severe: #fed6a7;
426
+ --content-success: #b8f7cf;
427
+ --content-warning: #fde585;
428
+ --stroke-error: #fa2b36;
429
+ --stroke-severe: #fe6800;
430
+ --stroke-success: #00c850;
431
+ --stroke-warning: #feb900;
432
+ --surface-error: #9e0711;
433
+ --surface-severe: #9f2d00;
434
+ --surface-success: #016630;
435
+ --surface-warning: #963b00;
680
436
  }
681
437
 
682
438
  body.fengshui-kim {
@@ -864,8 +620,6 @@ body.fengshui-tho {
864
620
  *::before,
865
621
  *::after {
866
622
  box-sizing: border-box;
867
- margin: 0;
868
- padding: 0;
869
623
  }
870
624
 
871
625
  body {
@@ -884,7 +638,6 @@ button {
884
638
  cursor: pointer;
885
639
  font: inherit;
886
640
  line-height: inherit;
887
- padding: 0;
888
641
  }
889
642
 
890
643
  button:focus {
@@ -901,16 +654,6 @@ html {
901
654
  font-variation-settings: normal;
902
655
  scrollbar-color: var(--accent-primary);
903
656
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Oxygen, Ubuntu, sans-serif;
904
- line-height: 1.5;
905
- }
906
-
907
- h1,
908
- h2,
909
- h3,
910
- h4,
911
- h5,
912
- h6 {
913
- font-weight: normal;
914
657
  }
915
658
 
916
659
  ::selection {
@@ -925,32 +668,21 @@ h6 {
925
668
  /* Table */
926
669
  th:not(.table-override) {
927
670
  height: 48px;
928
- background: var(--color-surface-secondary);
671
+ background: var(--surface-secondary);
672
+ color: var(--content-secondary);
929
673
  overflow: hidden;
930
- display: flex;
931
- align-items: center;
932
- align-content: stretch;
933
674
  padding: 8px 16px 8px 16px;
934
- flex-direction: row;
935
- flex-wrap: nowrap;
936
675
  text-overflow: ellipsis;
937
676
  line-clamp: 1;
938
- color: var(--color-content-secondary);
939
677
  }
940
678
 
941
679
  td:not(.table-override) {
942
680
  height: 64px;
943
- background: var(--color-surface-primary);
681
+ color: var(--content-primary);
944
682
  overflow: hidden;
945
- display: flex;
946
- align-items: center;
947
- align-content: stretch;
948
683
  padding: 8px 16px 8px 16px;
949
- flex-direction: row;
950
- flex-wrap: nowrap;
951
684
  text-overflow: ellipsis;
952
685
  line-clamp: 1;
953
- color: var(--color-content-primary);
954
686
  }
955
687
 
956
688
  tbody:not(.table-override) {
package/dist/components/styling/theme-switcher/ThemeSwitcher.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  <span class="theme-switcher__label">Giao diện</span>
30
30
  </Select.Trigger>
31
31
  <Select.Portal>
32
- <Select.Content class="theme-content" sideOffset={8}>
32
+ <Select.Content class="theme-content" sideOffset={12}>
33
33
  <Select.ScrollUpButton class="theme-scroll-button">
34
34
  <CaretDoubleUp class="theme-scroll-button__icon" />
35
35
  </Select.ScrollUpButton>
package/dist/components/styling/theme-switcher/theme-switcher.css CHANGED
@@ -76,23 +76,6 @@
76
76
  animation: content-out 300ms ease;
77
77
  }
78
78
 
79
- /* Position adjustments */
80
- .theme-content[data-side="bottom"] {
81
- transform: translateY(4px);
82
- }
83
-
84
- .theme-content[data-side="left"] {
85
- transform: translateX(-4px);
86
- }
87
-
88
- .theme-content[data-side="right"] {
89
- transform: translateX(4px);
90
- }
91
-
92
- .theme-content[data-side="top"] {
93
- transform: translateY(-4px);
94
- }
95
-
96
79
  /* Viewport styles */
97
80
  .theme-viewport {
98
81
  display: flex;
package/dist/index.d.ts CHANGED
@@ -12,6 +12,6 @@ export { default as Sidebar } from './components/core/sidebar/Sidebar.svelte';
12
12
  export { default as OKAStyleProvider } from './components/styling/oka-style-provider/OKAStyleProvider.svelte';
13
13
  export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
14
14
  export { default as SVG31 } from './components/illustrations/SVG31.svelte';
15
- export * from './components/core/select/Types.js';
16
- export * from './components/core/sidebar/Types.js';
17
- export * from './components/styling/theme-switcher/Themes.js';
15
+ export type * from './components/core/select/Types.js';
16
+ export type * from './components/core/sidebar/Types.js';
17
+ export type * from './components/styling/theme-switcher/Themes.js';
package/dist/index.js CHANGED
@@ -15,7 +15,3 @@ export { default as OKAStyleProvider } from './components/styling/oka-style-prov
15
15
  export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
16
16
  // Misc
17
17
  export { default as SVG31 } from './components/illustrations/SVG31.svelte';
18
- // Types
19
- export * from './components/core/select/Types.js';
20
- export * from './components/core/sidebar/Types.js';
21
- export * from './components/styling/theme-switcher/Themes.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@okaapp/oka-ui-sv",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "OKA UI Svelte components library for the Appta software platform",
5
5
  "license": "MIT",
6
6
  "scripts": {