mtrl 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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mtrl",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A functional JavaScript component library with composable architecture based on Material Design 3",
|
|
5
5
|
"keywords": ["component", "library", "ui", "user interface", "functional", "composable"],
|
|
6
6
|
"main": "index.js",
|
package/src/core/layout/index.js
CHANGED
|
@@ -41,7 +41,9 @@ const createLayout = (schema, container, structure = {}, level = 0, components =
|
|
|
41
41
|
options = schema[i + 2]
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
if (
|
|
44
|
+
if (options.id) {
|
|
45
|
+
name = options.id
|
|
46
|
+
} else if (typeof schema[i + 1] === 'string') {
|
|
45
47
|
name = schema[i + 1]
|
|
46
48
|
if (!schema[i].isElement && !schema[i].isComponent) {
|
|
47
49
|
options.name = name
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
// src/styles/themes/_autumn.scss
|
|
2
|
+
@use '../abstract/base' as *;
|
|
3
|
+
@use 'base-theme' as *;
|
|
4
|
+
|
|
5
|
+
@include create-theme('autumn') {
|
|
6
|
+
// Key colors with brown as primary and red as secondary
|
|
7
|
+
--#{$prefix}-sys-color-primary: #795548; // Rich brown as primary color
|
|
8
|
+
--#{$prefix}-sys-color-on-primary: #FFFFFF;
|
|
9
|
+
--#{$prefix}-sys-color-primary-container: #FFDCC7;
|
|
10
|
+
--#{$prefix}-sys-color-on-primary-container: #2C1500;
|
|
11
|
+
|
|
12
|
+
--#{$prefix}-sys-color-secondary: #A02A2A; // Autumn red as secondary
|
|
13
|
+
--#{$prefix}-sys-color-on-secondary: #FFFFFF;
|
|
14
|
+
--#{$prefix}-sys-color-secondary-container: #FFDAD4;
|
|
15
|
+
--#{$prefix}-sys-color-on-secondary-container: #410001;
|
|
16
|
+
|
|
17
|
+
--#{$prefix}-sys-color-tertiary: #4D6642; // Dark green like evergreen trees
|
|
18
|
+
--#{$prefix}-sys-color-on-tertiary: #FFFFFF;
|
|
19
|
+
--#{$prefix}-sys-color-tertiary-container: #CFE9BE;
|
|
20
|
+
--#{$prefix}-sys-color-on-tertiary-container: #0A2008;
|
|
21
|
+
|
|
22
|
+
--#{$prefix}-sys-color-quaternary: #8B6500; // Golden yellow like autumn leaves
|
|
23
|
+
--#{$prefix}-sys-color-on-quaternary: #FFFFFF;
|
|
24
|
+
--#{$prefix}-sys-color-quaternary-container: #FFDF8A;
|
|
25
|
+
--#{$prefix}-sys-color-on-quaternary-container: #2C1F00;
|
|
26
|
+
|
|
27
|
+
// Neutral colors with warm, earthy undertones
|
|
28
|
+
--#{$prefix}-sys-color-surface: #FFFBF7;
|
|
29
|
+
--#{$prefix}-sys-color-surface-dim: #EAD7CE;
|
|
30
|
+
--#{$prefix}-sys-color-surface-bright: #FFFBF7;
|
|
31
|
+
--#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
|
|
32
|
+
--#{$prefix}-sys-color-surface-container-low: #FFF0EA;
|
|
33
|
+
--#{$prefix}-sys-color-surface-container: #F5E1D7;
|
|
34
|
+
--#{$prefix}-sys-color-surface-container-high: #EFDBD1;
|
|
35
|
+
--#{$prefix}-sys-color-surface-container-highest: #E9D5CB;
|
|
36
|
+
|
|
37
|
+
--#{$prefix}-sys-color-on-surface: #201A17;
|
|
38
|
+
--#{$prefix}-sys-color-on-surface-variant: #53433C;
|
|
39
|
+
|
|
40
|
+
--#{$prefix}-sys-color-outline: #85736C;
|
|
41
|
+
--#{$prefix}-sys-color-outline-variant: #D7C1BA;
|
|
42
|
+
|
|
43
|
+
&[data-theme-mode="dark"] {
|
|
44
|
+
// Key colors
|
|
45
|
+
--#{$prefix}-sys-color-primary: #DDB995; // Softer brown
|
|
46
|
+
--#{$prefix}-sys-color-on-primary: #422B09;
|
|
47
|
+
--#{$prefix}-sys-color-primary-container: #5D3F1C;
|
|
48
|
+
--#{$prefix}-sys-color-on-primary-container: #FFDCC7;
|
|
49
|
+
|
|
50
|
+
--#{$prefix}-sys-color-secondary: #FFB4AB; // Vibrant red
|
|
51
|
+
--#{$prefix}-sys-color-on-secondary: #690004;
|
|
52
|
+
--#{$prefix}-sys-color-secondary-container: #93000A;
|
|
53
|
+
--#{$prefix}-sys-color-on-secondary-container: #FFDAD4;
|
|
54
|
+
|
|
55
|
+
--#{$prefix}-sys-color-tertiary: #B4CCA4; // Muted green
|
|
56
|
+
--#{$prefix}-sys-color-on-tertiary: #213515;
|
|
57
|
+
--#{$prefix}-sys-color-tertiary-container: #384F2B;
|
|
58
|
+
--#{$prefix}-sys-color-on-tertiary-container: #CFE9BE;
|
|
59
|
+
|
|
60
|
+
--#{$prefix}-sys-color-quaternary: #FFC147;
|
|
61
|
+
--#{$prefix}-sys-color-on-quaternary: #463300;
|
|
62
|
+
--#{$prefix}-sys-color-quaternary-container: #644900;
|
|
63
|
+
--#{$prefix}-sys-color-on-quaternary-container: #FFDF8A;
|
|
64
|
+
|
|
65
|
+
// Neutral colors
|
|
66
|
+
--#{$prefix}-sys-color-surface: #201A17;
|
|
67
|
+
--#{$prefix}-sys-color-surface-dim: #17120F;
|
|
68
|
+
--#{$prefix}-sys-color-surface-bright: #3D3631;
|
|
69
|
+
--#{$prefix}-sys-color-surface-container-lowest: #130E0B;
|
|
70
|
+
--#{$prefix}-sys-color-surface-container-low: #201A17;
|
|
71
|
+
--#{$prefix}-sys-color-surface-container: #241E1A;
|
|
72
|
+
--#{$prefix}-sys-color-surface-container-high: #2E2723;
|
|
73
|
+
--#{$prefix}-sys-color-surface-container-highest: #39322D;
|
|
74
|
+
|
|
75
|
+
--#{$prefix}-sys-color-on-surface: #EDE0D9;
|
|
76
|
+
--#{$prefix}-sys-color-on-surface-variant: #D7C1BA;
|
|
77
|
+
|
|
78
|
+
--#{$prefix}-sys-color-outline: #A08C85;
|
|
79
|
+
--#{$prefix}-sys-color-outline-variant: #53433C;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -3,69 +3,69 @@
|
|
|
3
3
|
@use 'base-theme' as *;
|
|
4
4
|
|
|
5
5
|
@include create-theme('forest') {
|
|
6
|
-
// Key colors generated from seed color #
|
|
7
|
-
--#{$prefix}-sys-color-primary: #
|
|
6
|
+
// Key colors generated from seed color #4B5D3A (earthy forest green-brown)
|
|
7
|
+
--#{$prefix}-sys-color-primary: #3F4F2F;
|
|
8
8
|
--#{$prefix}-sys-color-on-primary: #FFFFFF;
|
|
9
|
-
--#{$prefix}-sys-color-primary-container: #
|
|
10
|
-
--#{$prefix}-sys-color-on-primary-container: #
|
|
9
|
+
--#{$prefix}-sys-color-primary-container: #C1D1A8;
|
|
10
|
+
--#{$prefix}-sys-color-on-primary-container: #121D04;
|
|
11
11
|
|
|
12
|
-
--#{$prefix}-sys-color-secondary: #
|
|
12
|
+
--#{$prefix}-sys-color-secondary: #5D5242;
|
|
13
13
|
--#{$prefix}-sys-color-on-secondary: #FFFFFF;
|
|
14
|
-
--#{$prefix}-sys-color-secondary-container: #
|
|
15
|
-
--#{$prefix}-sys-color-on-secondary-container: #
|
|
14
|
+
--#{$prefix}-sys-color-secondary-container: #E1D6C4;
|
|
15
|
+
--#{$prefix}-sys-color-on-secondary-container: #201A10;
|
|
16
16
|
|
|
17
|
-
--#{$prefix}-sys-color-tertiary: #
|
|
17
|
+
--#{$prefix}-sys-color-tertiary: #486446;
|
|
18
18
|
--#{$prefix}-sys-color-on-tertiary: #FFFFFF;
|
|
19
|
-
--#{$prefix}-sys-color-tertiary-container: #
|
|
20
|
-
--#{$prefix}-sys-color-on-tertiary-container: #
|
|
19
|
+
--#{$prefix}-sys-color-tertiary-container: #CAE7C3;
|
|
20
|
+
--#{$prefix}-sys-color-on-tertiary-container: #0A2010;
|
|
21
21
|
|
|
22
|
-
// Neutral colors
|
|
23
|
-
--#{$prefix}-sys-color-surface: #
|
|
24
|
-
--#{$prefix}-sys-color-surface-dim: #
|
|
25
|
-
--#{$prefix}-sys-color-surface-bright: #
|
|
22
|
+
// Neutral colors with earthy undertones
|
|
23
|
+
--#{$prefix}-sys-color-surface: #FAF9F2;
|
|
24
|
+
--#{$prefix}-sys-color-surface-dim: #E0DFD5;
|
|
25
|
+
--#{$prefix}-sys-color-surface-bright: #FAF9F2;
|
|
26
26
|
--#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
|
|
27
|
-
--#{$prefix}-sys-color-surface-container-low: #
|
|
28
|
-
--#{$prefix}-sys-color-surface-container: #
|
|
29
|
-
--#{$prefix}-sys-color-surface-container-high: #
|
|
30
|
-
--#{$prefix}-sys-color-surface-container-highest: #
|
|
27
|
+
--#{$prefix}-sys-color-surface-container-low: #F4F3EC;
|
|
28
|
+
--#{$prefix}-sys-color-surface-container: #EEEDDE;
|
|
29
|
+
--#{$prefix}-sys-color-surface-container-high: #E8E7D8;
|
|
30
|
+
--#{$prefix}-sys-color-surface-container-highest: #E2E1D2;
|
|
31
31
|
|
|
32
|
-
--#{$prefix}-sys-color-on-surface: #
|
|
33
|
-
--#{$prefix}-sys-color-on-surface-variant: #
|
|
32
|
+
--#{$prefix}-sys-color-on-surface: #1B1C17;
|
|
33
|
+
--#{$prefix}-sys-color-on-surface-variant: #464840;
|
|
34
34
|
|
|
35
|
-
--#{$prefix}-sys-color-outline: #
|
|
36
|
-
--#{$prefix}-sys-color-outline-variant: #
|
|
35
|
+
--#{$prefix}-sys-color-outline: #767B6F;
|
|
36
|
+
--#{$prefix}-sys-color-outline-variant: #C9CCB7;
|
|
37
37
|
|
|
38
38
|
&[data-theme-mode="dark"] {
|
|
39
39
|
// Key colors
|
|
40
|
-
--#{$prefix}-sys-color-primary: #
|
|
41
|
-
--#{$prefix}-sys-color-on-primary: #
|
|
42
|
-
--#{$prefix}-sys-color-primary-container: #
|
|
43
|
-
--#{$prefix}-sys-color-on-primary-container: #
|
|
40
|
+
--#{$prefix}-sys-color-primary: #A5B58D;
|
|
41
|
+
--#{$prefix}-sys-color-on-primary: #213516;
|
|
42
|
+
--#{$prefix}-sys-color-primary-container: #324B23;
|
|
43
|
+
--#{$prefix}-sys-color-on-primary-container: #C1D1A8;
|
|
44
44
|
|
|
45
|
-
--#{$prefix}-sys-color-secondary: #
|
|
46
|
-
--#{$prefix}-sys-color-on-secondary: #
|
|
47
|
-
--#{$prefix}-sys-color-secondary-container: #
|
|
48
|
-
--#{$prefix}-sys-color-on-secondary-container: #
|
|
45
|
+
--#{$prefix}-sys-color-secondary: #C5BAAB;
|
|
46
|
+
--#{$prefix}-sys-color-on-secondary: #362F21;
|
|
47
|
+
--#{$prefix}-sys-color-secondary-container: #4A4231;
|
|
48
|
+
--#{$prefix}-sys-color-on-secondary-container: #E1D6C4;
|
|
49
49
|
|
|
50
|
-
--#{$prefix}-sys-color-tertiary: #
|
|
51
|
-
--#{$prefix}-sys-color-on-tertiary: #
|
|
52
|
-
--#{$prefix}-sys-color-tertiary-container: #
|
|
53
|
-
--#{$prefix}-sys-color-on-tertiary-container: #
|
|
50
|
+
--#{$prefix}-sys-color-tertiary: #AECBA8;
|
|
51
|
+
--#{$prefix}-sys-color-on-tertiary: #123623;
|
|
52
|
+
--#{$prefix}-sys-color-tertiary-container: #2C4D34;
|
|
53
|
+
--#{$prefix}-sys-color-on-tertiary-container: #CAE7C3;
|
|
54
54
|
|
|
55
55
|
// Neutral colors
|
|
56
|
-
--#{$prefix}-sys-color-surface: #
|
|
57
|
-
--#{$prefix}-sys-color-surface-dim: #
|
|
58
|
-
--#{$prefix}-sys-color-surface-bright: #
|
|
59
|
-
--#{$prefix}-sys-color-surface-container-lowest: #
|
|
60
|
-
--#{$prefix}-sys-color-surface-container-low: #
|
|
61
|
-
--#{$prefix}-sys-color-surface-container: #
|
|
62
|
-
--#{$prefix}-sys-color-surface-container-high: #
|
|
63
|
-
--#{$prefix}-sys-color-surface-container-highest: #
|
|
56
|
+
--#{$prefix}-sys-color-surface: #1B1C17;
|
|
57
|
+
--#{$prefix}-sys-color-surface-dim: #13140F;
|
|
58
|
+
--#{$prefix}-sys-color-surface-bright: #383932;
|
|
59
|
+
--#{$prefix}-sys-color-surface-container-lowest: #0F100B;
|
|
60
|
+
--#{$prefix}-sys-color-surface-container-low: #1B1C17;
|
|
61
|
+
--#{$prefix}-sys-color-surface-container: #1F201B;
|
|
62
|
+
--#{$prefix}-sys-color-surface-container-high: #292A25;
|
|
63
|
+
--#{$prefix}-sys-color-surface-container-highest: #34352F;
|
|
64
64
|
|
|
65
|
-
--#{$prefix}-sys-color-on-surface: #
|
|
66
|
-
--#{$prefix}-sys-color-on-surface-variant: #
|
|
65
|
+
--#{$prefix}-sys-color-on-surface: #E3E3DC;
|
|
66
|
+
--#{$prefix}-sys-color-on-surface-variant: #C9CCB7;
|
|
67
67
|
|
|
68
|
-
--#{$prefix}-sys-color-outline: #
|
|
69
|
-
--#{$prefix}-sys-color-outline-variant: #
|
|
68
|
+
--#{$prefix}-sys-color-outline: #929688;
|
|
69
|
+
--#{$prefix}-sys-color-outline-variant: #464840;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// src/styles/themes/_spring.scss
|
|
2
|
+
@use '../abstract/base' as *;
|
|
3
|
+
@use 'base-theme' as *;
|
|
4
|
+
|
|
5
|
+
@include create-theme('spring') {
|
|
6
|
+
// Key colors generated from seed color #76D275 (fresh spring green)
|
|
7
|
+
--#{$prefix}-sys-color-primary: #006E2B;
|
|
8
|
+
--#{$prefix}-sys-color-on-primary: #FFFFFF;
|
|
9
|
+
--#{$prefix}-sys-color-primary-container: #95F99A;
|
|
10
|
+
--#{$prefix}-sys-color-on-primary-container: #002108;
|
|
11
|
+
|
|
12
|
+
--#{$prefix}-sys-color-secondary: #526350;
|
|
13
|
+
--#{$prefix}-sys-color-on-secondary: #FFFFFF;
|
|
14
|
+
--#{$prefix}-sys-color-secondary-container: #D5E8CF;
|
|
15
|
+
--#{$prefix}-sys-color-on-secondary-container: #101F10;
|
|
16
|
+
|
|
17
|
+
--#{$prefix}-sys-color-tertiary: #386667;
|
|
18
|
+
--#{$prefix}-sys-color-on-tertiary: #FFFFFF;
|
|
19
|
+
--#{$prefix}-sys-color-tertiary-container: #BBECEE;
|
|
20
|
+
--#{$prefix}-sys-color-on-tertiary-container: #002021;
|
|
21
|
+
|
|
22
|
+
// Neutral colors
|
|
23
|
+
--#{$prefix}-sys-color-surface: #F8FFF3;
|
|
24
|
+
--#{$prefix}-sys-color-surface-dim: #D9E8D3;
|
|
25
|
+
--#{$prefix}-sys-color-surface-bright: #F8FFF3;
|
|
26
|
+
--#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
|
|
27
|
+
--#{$prefix}-sys-color-surface-container-low: #F2FAED;
|
|
28
|
+
--#{$prefix}-sys-color-surface-container: #ECF4E7;
|
|
29
|
+
--#{$prefix}-sys-color-surface-container-high: #E6EEE1;
|
|
30
|
+
--#{$prefix}-sys-color-surface-container-highest: #E0E8DB;
|
|
31
|
+
|
|
32
|
+
--#{$prefix}-sys-color-on-surface: #191D19;
|
|
33
|
+
--#{$prefix}-sys-color-on-surface-variant: #424940;
|
|
34
|
+
|
|
35
|
+
--#{$prefix}-sys-color-outline: #727970;
|
|
36
|
+
--#{$prefix}-sys-color-outline-variant: #C1C9BE;
|
|
37
|
+
|
|
38
|
+
&[data-theme-mode="dark"] {
|
|
39
|
+
// Key colors
|
|
40
|
+
--#{$prefix}-sys-color-primary: #79DC80;
|
|
41
|
+
--#{$prefix}-sys-color-on-primary: #003914;
|
|
42
|
+
--#{$prefix}-sys-color-primary-container: #00531F;
|
|
43
|
+
--#{$prefix}-sys-color-on-primary-container: #95F99A;
|
|
44
|
+
|
|
45
|
+
--#{$prefix}-sys-color-secondary: #B9CCB3;
|
|
46
|
+
--#{$prefix}-sys-color-on-secondary: #263424;
|
|
47
|
+
--#{$prefix}-sys-color-secondary-container: #3C4B3A;
|
|
48
|
+
--#{$prefix}-sys-color-on-secondary-container: #D5E8CF;
|
|
49
|
+
|
|
50
|
+
--#{$prefix}-sys-color-tertiary: #A0D0D2;
|
|
51
|
+
--#{$prefix}-sys-color-on-tertiary: #003738;
|
|
52
|
+
--#{$prefix}-sys-color-tertiary-container: #1F4E4F;
|
|
53
|
+
--#{$prefix}-sys-color-on-tertiary-container: #BBECEE;
|
|
54
|
+
|
|
55
|
+
// Neutral colors
|
|
56
|
+
--#{$prefix}-sys-color-surface: #121711;
|
|
57
|
+
--#{$prefix}-sys-color-surface-dim: #0D120C;
|
|
58
|
+
--#{$prefix}-sys-color-surface-bright: #2D3229;
|
|
59
|
+
--#{$prefix}-sys-color-surface-container-lowest: #0A0F09;
|
|
60
|
+
--#{$prefix}-sys-color-surface-container-low: #121711;
|
|
61
|
+
--#{$prefix}-sys-color-surface-container: #161B15;
|
|
62
|
+
--#{$prefix}-sys-color-surface-container-high: #20251E;
|
|
63
|
+
--#{$prefix}-sys-color-surface-container-highest: #2A2F27;
|
|
64
|
+
|
|
65
|
+
--#{$prefix}-sys-color-on-surface: #D9E3D4;
|
|
66
|
+
--#{$prefix}-sys-color-on-surface-variant: #C1C9BE;
|
|
67
|
+
|
|
68
|
+
--#{$prefix}-sys-color-outline: #8B9388;
|
|
69
|
+
--#{$prefix}-sys-color-outline-variant: #424940;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// src/styles/themes/_summer.scss
|
|
2
|
+
@use '../abstract/base' as *;
|
|
3
|
+
@use 'base-theme' as *;
|
|
4
|
+
|
|
5
|
+
@include create-theme('summer') {
|
|
6
|
+
// Key colors inspired by Chuck Jones' Road Runner desert palette
|
|
7
|
+
--#{$prefix}-sys-color-primary: #4196CB; // Bright desert sky blue
|
|
8
|
+
--#{$prefix}-sys-color-on-primary: #FFFFFF;
|
|
9
|
+
--#{$prefix}-sys-color-primary-container: #D1E4FF;
|
|
10
|
+
--#{$prefix}-sys-color-on-primary-container: #001D36;
|
|
11
|
+
|
|
12
|
+
--#{$prefix}-sys-color-secondary: #F3C649; // Desert sand/yellow
|
|
13
|
+
--#{$prefix}-sys-color-on-secondary: #3E2E00;
|
|
14
|
+
--#{$prefix}-sys-color-secondary-container: #FFF4D5;
|
|
15
|
+
--#{$prefix}-sys-color-on-secondary-container: #291F00;
|
|
16
|
+
|
|
17
|
+
--#{$prefix}-sys-color-tertiary: #A75B39; // Mesa rock orange-brown
|
|
18
|
+
--#{$prefix}-sys-color-on-tertiary: #FFFFFF;
|
|
19
|
+
--#{$prefix}-sys-color-tertiary-container: #FFDBC8;
|
|
20
|
+
--#{$prefix}-sys-color-on-tertiary-container: #3A1600;
|
|
21
|
+
|
|
22
|
+
// Accent colors for more variety
|
|
23
|
+
--#{$prefix}-sys-color-accent: #6B4596; // Road Runner purple
|
|
24
|
+
--#{$prefix}-sys-color-on-accent: #FFFFFF;
|
|
25
|
+
--#{$prefix}-sys-color-accent-container: #EBDCFF;
|
|
26
|
+
--#{$prefix}-sys-color-on-accent-container: #25005C;
|
|
27
|
+
|
|
28
|
+
// Neutral colors with desert warmth
|
|
29
|
+
--#{$prefix}-sys-color-surface: #FFFBF8;
|
|
30
|
+
--#{$prefix}-sys-color-surface-dim: #EAE2D9;
|
|
31
|
+
--#{$prefix}-sys-color-surface-bright: #FFFBF8;
|
|
32
|
+
--#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
|
|
33
|
+
--#{$prefix}-sys-color-surface-container-low: #FEF5ED;
|
|
34
|
+
--#{$prefix}-sys-color-surface-container: #F7EFE7;
|
|
35
|
+
--#{$prefix}-sys-color-surface-container-high: #F1E9E1;
|
|
36
|
+
--#{$prefix}-sys-color-surface-container-highest: #EBE3DB;
|
|
37
|
+
|
|
38
|
+
--#{$prefix}-sys-color-on-surface: #1F1B16;
|
|
39
|
+
--#{$prefix}-sys-color-on-surface-variant: #50453B;
|
|
40
|
+
|
|
41
|
+
--#{$prefix}-sys-color-outline: #827568;
|
|
42
|
+
--#{$prefix}-sys-color-outline-variant: #D5C8B9;
|
|
43
|
+
|
|
44
|
+
&[data-theme-mode="dark"] {
|
|
45
|
+
// Key colors - darker but still vibrant
|
|
46
|
+
--#{$prefix}-sys-color-primary: #9ECAFF;
|
|
47
|
+
--#{$prefix}-sys-color-on-primary: #003258;
|
|
48
|
+
--#{$prefix}-sys-color-primary-container: #00497D;
|
|
49
|
+
--#{$prefix}-sys-color-on-primary-container: #D1E4FF;
|
|
50
|
+
|
|
51
|
+
--#{$prefix}-sys-color-secondary: #DBC054;
|
|
52
|
+
--#{$prefix}-sys-color-on-secondary: #3E2E00;
|
|
53
|
+
--#{$prefix}-sys-color-secondary-container: #584400;
|
|
54
|
+
--#{$prefix}-sys-color-on-secondary-container: #FFF4D5;
|
|
55
|
+
|
|
56
|
+
--#{$prefix}-sys-color-tertiary: #FFB694;
|
|
57
|
+
--#{$prefix}-sys-color-on-tertiary: #5C2900;
|
|
58
|
+
--#{$prefix}-sys-color-tertiary-container: #803D15;
|
|
59
|
+
--#{$prefix}-sys-color-on-tertiary-container: #FFDBC8;
|
|
60
|
+
|
|
61
|
+
--#{$prefix}-sys-color-accent: #D0BCFF;
|
|
62
|
+
--#{$prefix}-sys-color-on-accent: #381E72;
|
|
63
|
+
--#{$prefix}-sys-color-accent-container: #503396;
|
|
64
|
+
--#{$prefix}-sys-color-on-accent-container: #EBDCFF;
|
|
65
|
+
|
|
66
|
+
// Neutral colors
|
|
67
|
+
--#{$prefix}-sys-color-surface: #1F1B16;
|
|
68
|
+
--#{$prefix}-sys-color-surface-dim: #16130F;
|
|
69
|
+
--#{$prefix}-sys-color-surface-bright: #3B362F;
|
|
70
|
+
--#{$prefix}-sys-color-surface-container-lowest: #130F0B;
|
|
71
|
+
--#{$prefix}-sys-color-surface-container-low: #1F1B16;
|
|
72
|
+
--#{$prefix}-sys-color-surface-container: #231F19;
|
|
73
|
+
--#{$prefix}-sys-color-surface-container-high: #2D2921;
|
|
74
|
+
--#{$prefix}-sys-color-surface-container-highest: #38332B;
|
|
75
|
+
|
|
76
|
+
--#{$prefix}-sys-color-on-surface: #EAE1D9;
|
|
77
|
+
--#{$prefix}-sys-color-on-surface-variant: #D5C8B9;
|
|
78
|
+
|
|
79
|
+
--#{$prefix}-sys-color-outline: #9E8F80;
|
|
80
|
+
--#{$prefix}-sys-color-outline-variant: #50453B;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// src/styles/themes/_winter.scss
|
|
2
|
+
@use '../abstract/base' as *;
|
|
3
|
+
@use 'base-theme' as *;
|
|
4
|
+
|
|
5
|
+
@include create-theme('winter') {
|
|
6
|
+
// Key colors generated from seed color #546E7A (winter blue-gray)
|
|
7
|
+
--#{$prefix}-sys-color-primary: #406374;
|
|
8
|
+
--#{$prefix}-sys-color-on-primary: #FFFFFF;
|
|
9
|
+
--#{$prefix}-sys-color-primary-container: #C1E8FC;
|
|
10
|
+
--#{$prefix}-sys-color-on-primary-container: #001F29;
|
|
11
|
+
|
|
12
|
+
--#{$prefix}-sys-color-secondary: #4A626E;
|
|
13
|
+
--#{$prefix}-sys-color-on-secondary: #FFFFFF;
|
|
14
|
+
--#{$prefix}-sys-color-secondary-container: #CDE6F5;
|
|
15
|
+
--#{$prefix}-sys-color-on-secondary-container: #061E28;
|
|
16
|
+
|
|
17
|
+
--#{$prefix}-sys-color-tertiary: #5D5B7D;
|
|
18
|
+
--#{$prefix}-sys-color-on-tertiary: #FFFFFF;
|
|
19
|
+
--#{$prefix}-sys-color-tertiary-container: #E2DFFF;
|
|
20
|
+
--#{$prefix}-sys-color-on-tertiary-container: #191836;
|
|
21
|
+
|
|
22
|
+
// Neutral colors
|
|
23
|
+
--#{$prefix}-sys-color-surface: #FAFCFF;
|
|
24
|
+
--#{$prefix}-sys-color-surface-dim: #DAE4E9;
|
|
25
|
+
--#{$prefix}-sys-color-surface-bright: #FAFCFF;
|
|
26
|
+
--#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
|
|
27
|
+
--#{$prefix}-sys-color-surface-container-low: #F5F8FB;
|
|
28
|
+
--#{$prefix}-sys-color-surface-container: #EFF3F6;
|
|
29
|
+
--#{$prefix}-sys-color-surface-container-high: #E9EDF0;
|
|
30
|
+
--#{$prefix}-sys-color-surface-container-highest: #E3E7EA;
|
|
31
|
+
|
|
32
|
+
--#{$prefix}-sys-color-on-surface: #191C1E;
|
|
33
|
+
--#{$prefix}-sys-color-on-surface-variant: #40484C;
|
|
34
|
+
|
|
35
|
+
--#{$prefix}-sys-color-outline: #70787D;
|
|
36
|
+
--#{$prefix}-sys-color-outline-variant: #C0C8CC;
|
|
37
|
+
|
|
38
|
+
&[data-theme-mode="dark"] {
|
|
39
|
+
// Key colors
|
|
40
|
+
--#{$prefix}-sys-color-primary: #73D0EE;
|
|
41
|
+
--#{$prefix}-sys-color-on-primary: #003545;
|
|
42
|
+
--#{$prefix}-sys-color-primary-container: #224C5B;
|
|
43
|
+
--#{$prefix}-sys-color-on-primary-container: #C1E8FC;
|
|
44
|
+
|
|
45
|
+
--#{$prefix}-sys-color-secondary: #B1CAD9;
|
|
46
|
+
--#{$prefix}-sys-color-on-secondary: #1D343F;
|
|
47
|
+
--#{$prefix}-sys-color-secondary-container: #334B56;
|
|
48
|
+
--#{$prefix}-sys-color-on-secondary-container: #CDE6F5;
|
|
49
|
+
|
|
50
|
+
--#{$prefix}-sys-color-tertiary: #C6C3EB;
|
|
51
|
+
--#{$prefix}-sys-color-on-tertiary: #2E2D4D;
|
|
52
|
+
--#{$prefix}-sys-color-tertiary-container: #454364;
|
|
53
|
+
--#{$prefix}-sys-color-on-tertiary-container: #E2DFFF;
|
|
54
|
+
|
|
55
|
+
// Neutral colors
|
|
56
|
+
--#{$prefix}-sys-color-surface: #191C1E;
|
|
57
|
+
--#{$prefix}-sys-color-surface-dim: #101416;
|
|
58
|
+
--#{$prefix}-sys-color-surface-bright: #35393C;
|
|
59
|
+
--#{$prefix}-sys-color-surface-container-lowest: #0D0E10;
|
|
60
|
+
--#{$prefix}-sys-color-surface-container-low: #191C1E;
|
|
61
|
+
--#{$prefix}-sys-color-surface-container: #1D2022;
|
|
62
|
+
--#{$prefix}-sys-color-surface-container-high: #272A2D;
|
|
63
|
+
--#{$prefix}-sys-color-surface-container-highest: #323539;
|
|
64
|
+
|
|
65
|
+
--#{$prefix}-sys-color-on-surface: #E1E3E5;
|
|
66
|
+
--#{$prefix}-sys-color-on-surface-variant: #C0C8CC;
|
|
67
|
+
|
|
68
|
+
--#{$prefix}-sys-color-outline: #8A9297;
|
|
69
|
+
--#{$prefix}-sys-color-outline-variant: #40484C;
|
|
70
|
+
}
|
|
71
|
+
}
|