snapshot-labs-theme 0.1.42 → 0.1.44
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.
- package/build/css/base/colors.css +16 -18
- package/build/css/semantic/colors.css +22 -17
- package/build/css/semantic/colors.dark.css +32 -27
- package/package.json +1 -1
|
@@ -3,24 +3,22 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--color-neutral-dark-surface-1: oklch(0.
|
|
7
|
-
--color-neutral-dark-surface-2: oklch(0.
|
|
8
|
-
--color-neutral-dark-surface-3: oklch(0.
|
|
9
|
-
--color-neutral-dark-surface-4: oklch(0.
|
|
10
|
-
--color-neutral-
|
|
11
|
-
--color-neutral-50: oklch(0.
|
|
12
|
-
--color-neutral-100: oklch(0.
|
|
13
|
-
--color-neutral-150: oklch(0.
|
|
14
|
-
--color-neutral-200: oklch(0.
|
|
15
|
-
--color-neutral-300: oklch(0.
|
|
16
|
-
--color-neutral-400: oklch(0.
|
|
17
|
-
--color-neutral-500: oklch(0.
|
|
18
|
-
--color-neutral-600: oklch(0.
|
|
19
|
-
--color-neutral-700: oklch(0.
|
|
20
|
-
--color-neutral-800: oklch(0.
|
|
21
|
-
--color-neutral-
|
|
22
|
-
--color-neutral-900: oklch(0.27 0 67.74);
|
|
23
|
-
--color-neutral-950: oklch(0.22 0 67.71);
|
|
6
|
+
--color-neutral-dark-surface-1: oklch(0.14 0 0);
|
|
7
|
+
--color-neutral-dark-surface-2: oklch(0.18 0 0);
|
|
8
|
+
--color-neutral-dark-surface-3: oklch(0.2 0 0);
|
|
9
|
+
--color-neutral-dark-surface-4: oklch(0.24 0 0);
|
|
10
|
+
--color-neutral-dark-surface-5: oklch(0.26 0 0);
|
|
11
|
+
--color-neutral-50: oklch(0.98 0 247.80);
|
|
12
|
+
--color-neutral-100: oklch(0.95 0.01 247.84);
|
|
13
|
+
--color-neutral-150: oklch(0.89 0.01 247.92);
|
|
14
|
+
--color-neutral-200: oklch(0.83 0.02 253.92);
|
|
15
|
+
--color-neutral-300: oklch(0.74 0.02 259.20);
|
|
16
|
+
--color-neutral-400: oklch(0.65 0.02 260.71);
|
|
17
|
+
--color-neutral-500: oklch(0.55 0.03 260.27);
|
|
18
|
+
--color-neutral-600: oklch(0.47 0.03 271.65);
|
|
19
|
+
--color-neutral-700: oklch(0.39 0.02 271.85);
|
|
20
|
+
--color-neutral-800: oklch(0.32 0.02 281.37);
|
|
21
|
+
--color-neutral-900: oklch(0.23 0.02 280.26);
|
|
24
22
|
--color-neutral-white: oklch(1 0 0);
|
|
25
23
|
--color-neutral-off-white: oklch(0.99 0 105.51);
|
|
26
24
|
--color-neutral-black: oklch(0.17 0 17.50);
|
|
@@ -13,33 +13,37 @@
|
|
|
13
13
|
--color-bg-surface-default: var(--color-neutral-white);
|
|
14
14
|
--color-bg-surface-raised: var(--color-neutral-white);
|
|
15
15
|
--color-bg-surface-overlay: var(--color-neutral-white);
|
|
16
|
-
--color-bg-surface-inverse: var(--color-neutral-
|
|
17
|
-
--color-bg-brand-
|
|
18
|
-
--color-bg-brand-
|
|
16
|
+
--color-bg-surface-inverse: var(--color-neutral-dark-surface-4);
|
|
17
|
+
--color-bg-brand-primary: var(--color-green-400);
|
|
18
|
+
--color-bg-brand-secondary: var(--color-orange-400);
|
|
19
|
+
--color-bg-brand-tertiary: var(--color-cyan-400);
|
|
19
20
|
--color-bg-neutral-default: var(--color-neutral-600);
|
|
20
21
|
--color-bg-neutral-secondary: var(--color-neutral-off-white);
|
|
21
|
-
--color-bg-neutral-tertiary: var(--color-black-alpha-
|
|
22
|
-
--color-text-contrast: var(--color-neutral-
|
|
22
|
+
--color-bg-neutral-tertiary: var(--color-black-alpha-3);
|
|
23
|
+
--color-text-contrast: var(--color-neutral-800);
|
|
23
24
|
--color-text-default: var(--color-neutral-700);
|
|
24
25
|
--color-text-subtle: var(--color-neutral-600);
|
|
25
26
|
--color-text-accent: var(--color-green-700);
|
|
26
|
-
--color-text-contrast-on-dark-bg: var(--color-neutral-
|
|
27
|
-
--color-text-default-on-dark-bg: var(--color-neutral-
|
|
27
|
+
--color-text-contrast-on-dark-bg: var(--color-neutral-100);
|
|
28
|
+
--color-text-default-on-dark-bg: var(--color-neutral-150);
|
|
28
29
|
--color-text-subtle-on-dark-bg: var(--color-neutral-200);
|
|
29
30
|
--color-border-default: var(--color-black-alpha-12);
|
|
30
31
|
--color-border-secondary: var(--color-black-alpha-8);
|
|
31
|
-
--color-action-icon-default: var(--color-green-600);
|
|
32
|
-
--color-action-icon-default-hover: var(--color-green-700);
|
|
33
|
-
--color-action-icon-active: var(--color-green-600);
|
|
34
|
-
--color-action-bg
|
|
35
|
-
--color-action-
|
|
36
|
-
--color-action-
|
|
37
|
-
--color-action-
|
|
38
|
-
--color-action-
|
|
39
|
-
--color-action-
|
|
32
|
+
--color-action-icon-brand-default: var(--color-green-600);
|
|
33
|
+
--color-action-icon-brand-default-hover: var(--color-green-700);
|
|
34
|
+
--color-action-icon-brand-active: var(--color-green-600);
|
|
35
|
+
--color-action-icon-brand-on-brand-bg: var(--color-green-600);
|
|
36
|
+
--color-action-icon-brand-on-brand-secondary: var(--color-green-600);
|
|
37
|
+
--color-action-icon-brand-on-brand-tertiary: var(--color-green-700);
|
|
38
|
+
--color-action-bg-brand-default: var(--color-neutral-700);
|
|
39
|
+
--color-action-bg-brand-default-hover: var(--color-neutral-600);
|
|
40
|
+
--color-action-bg-brand-active: var(--color-green-alpha-50);
|
|
41
|
+
--color-action-text-brand-default: var(--color-neutral-700);
|
|
42
|
+
--color-action-text-brand-secondary: var(--color-neutral-600);
|
|
43
|
+
--color-action-text-brand-active: var(--color-green-700);
|
|
40
44
|
--color-action-border-default: var(--color-neutral-700);
|
|
41
45
|
--color-action-border-secondary: var(--color-neutral-600);
|
|
42
|
-
--color-action-border-
|
|
46
|
+
--color-action-border-active: var(--color-green-600);
|
|
43
47
|
--color-feedback-negative-text: var(--color-red-700);
|
|
44
48
|
--color-feedback-negative-icon: var(--color-red-500);
|
|
45
49
|
--color-feedback-negative-bg: var(--color-red-100);
|
|
@@ -52,4 +56,5 @@
|
|
|
52
56
|
--color-feedback-informative-text: var(--color-blue-800);
|
|
53
57
|
--color-feedback-informative-icon: var(--color-blue-600);
|
|
54
58
|
--color-feedback-informative-bg: var(--color-blue-100);
|
|
59
|
+
--hue-green: var(--#4ff0b744);
|
|
55
60
|
}
|
|
@@ -8,37 +8,41 @@
|
|
|
8
8
|
--color-icon-secondary: var(--color-neutral-500);
|
|
9
9
|
--color-icon-tertiary: var(--color-neutral-600);
|
|
10
10
|
--color-bg-drag-handle: var(--color-white-alpha-16);
|
|
11
|
-
--color-bg-surface-sunken: var(--color-neutral-
|
|
12
|
-
--color-bg-surface-default: var(--color-neutral-
|
|
13
|
-
--color-bg-surface-raised: var(--color-neutral-
|
|
14
|
-
--color-bg-surface-overlay: var(--color-neutral-
|
|
15
|
-
--color-bg-surface-inverse: var(--color-neutral-
|
|
16
|
-
--color-bg-brand-
|
|
17
|
-
--color-bg-brand-
|
|
11
|
+
--color-bg-surface-sunken: var(--color-neutral-dark-surface-1);
|
|
12
|
+
--color-bg-surface-default: var(--color-neutral-dark-surface-2);
|
|
13
|
+
--color-bg-surface-raised: var(--color-neutral-dark-surface-3);
|
|
14
|
+
--color-bg-surface-overlay: var(--color-neutral-dark-surface-5);
|
|
15
|
+
--color-bg-surface-inverse: var(--color-neutral-dark-surface-4);
|
|
16
|
+
--color-bg-brand-primary: var(--color-green-500);
|
|
17
|
+
--color-bg-brand-secondary: var(--color-orange-400);
|
|
18
|
+
--color-bg-brand-tertiary: var(--color-orange-400);
|
|
18
19
|
--color-bg-neutral-default: var(--color-neutral-500);
|
|
19
20
|
--color-bg-neutral-secondary: var(--color-neutral-black);
|
|
20
|
-
--color-bg-neutral-tertiary: var(--color-white-alpha-
|
|
21
|
-
--color-text-contrast: var(--color-neutral-
|
|
22
|
-
--color-text-default: var(--color-neutral-
|
|
23
|
-
--color-text-subtle: var(--color-neutral-
|
|
24
|
-
--color-text-accent: var(--color-green-
|
|
25
|
-
--color-text-contrast-on-dark-bg: var(
|
|
26
|
-
--color-text-default-on-dark-bg: var(
|
|
27
|
-
--color-text-subtle-on-dark-bg: var(
|
|
28
|
-
--color-border-default: var(--color-white-alpha-
|
|
29
|
-
--color-border-secondary: var(--color-white-alpha-
|
|
30
|
-
--color-action-icon-default: var(--color-neutral-300);
|
|
31
|
-
--color-action-icon-default-hover: var(--color-neutral-500);
|
|
32
|
-
--color-action-icon-active: var(--color-green-500);
|
|
33
|
-
--color-action-bg
|
|
34
|
-
--color-action-
|
|
35
|
-
--color-action-
|
|
36
|
-
--color-action-
|
|
37
|
-
--color-action-
|
|
38
|
-
--color-action-
|
|
21
|
+
--color-bg-neutral-tertiary: var(--color-white-alpha-12);
|
|
22
|
+
--color-text-contrast: var(--color-neutral-off-white);
|
|
23
|
+
--color-text-default: var(--color-neutral-200);
|
|
24
|
+
--color-text-subtle: var(--color-neutral-300);
|
|
25
|
+
--color-text-accent: var(--color-green-500);
|
|
26
|
+
--color-text-contrast-on-dark-bg: var(--color-neutral-100);
|
|
27
|
+
--color-text-default-on-dark-bg: var(--color-neutral-100);
|
|
28
|
+
--color-text-subtle-on-dark-bg: var(--color-neutral-100);
|
|
29
|
+
--color-border-default: var(--color-white-alpha-16);
|
|
30
|
+
--color-border-secondary: var(--color-white-alpha-8);
|
|
31
|
+
--color-action-icon-brand-default: var(--color-neutral-300);
|
|
32
|
+
--color-action-icon-brand-default-hover: var(--color-neutral-500);
|
|
33
|
+
--color-action-icon-brand-active: var(--color-green-500);
|
|
34
|
+
--color-action-icon-brand-on-brand-bg: var(--color-green-500);
|
|
35
|
+
--color-action-icon-brand-on-brand-secondary: var(--color-green-500);
|
|
36
|
+
--color-action-icon-brand-on-brand-tertiary: var(--color-green-400);
|
|
37
|
+
--color-action-bg-brand-default: var(--color-neutral-300);
|
|
38
|
+
--color-action-bg-brand-default-hover: var(--color-neutral-500);
|
|
39
|
+
--color-action-bg-brand-active: var(--color-green-alpha-100);
|
|
40
|
+
--color-action-text-brand-default: var(--color-neutral-300);
|
|
41
|
+
--color-action-text-brand-secondary: var(--color-neutral-500);
|
|
42
|
+
--color-action-text-brand-active: var(--color-neutral-600);
|
|
39
43
|
--color-action-border-default: var(--color-neutral-300);
|
|
40
44
|
--color-action-border-secondary: var(--color-neutral-500);
|
|
41
|
-
--color-action-border-
|
|
45
|
+
--color-action-border-active: var(--color-green-500);
|
|
42
46
|
--color-feedback-negative-text: var(--color-red-500);
|
|
43
47
|
--color-feedback-negative-icon: var(--color-red-400);
|
|
44
48
|
--color-feedback-negative-bg: var(--color-red-100);
|
|
@@ -51,4 +55,5 @@
|
|
|
51
55
|
--color-feedback-informative-text: var(--color-blue-600);
|
|
52
56
|
--color-feedback-informative-icon: var(--color-blue-500);
|
|
53
57
|
--color-feedback-informative-bg: var(--color-blue-100);
|
|
58
|
+
--hue-green: var(--#4ff0b744);
|
|
54
59
|
}
|