invensys-ng 21.0.1 → 21.3.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/README.md +13 -13
- package/fesm2022/invensys-ng.mjs +102 -102
- package/fesm2022/invensys-ng.mjs.map +1 -1
- package/package.json +4 -3
- package/src/lib/themes/_variables.scss +8 -8
- package/src/lib/themes/color-palette.scss +158 -158
- package/src/lib/themes/color-variables.scss +38 -38
- package/src/lib/themes/colors.theme.scss +87 -87
- package/src/lib/themes/get-color.scss +15 -15
- package/src/lib/themes/scrollbar-mixins.scss +104 -104
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "invensys-ng",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.3.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
|
-
"url": "
|
|
6
|
+
"url": "https://github.com/ulbrichFrauendorf/invensys-ng"
|
|
7
7
|
},
|
|
8
8
|
"peerDependencies": {
|
|
9
9
|
"@angular/common": "^21.2.12",
|
|
@@ -25,5 +25,6 @@
|
|
|
25
25
|
"types": "./types/invensys-ng.d.ts",
|
|
26
26
|
"default": "./fesm2022/invensys-ng.mjs"
|
|
27
27
|
}
|
|
28
|
-
}
|
|
28
|
+
},
|
|
29
|
+
"type": "module"
|
|
29
30
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/* General */
|
|
2
|
-
$scale: 14px; /* main font size */
|
|
3
|
-
$borderRadius: 8px; /* border radius of layout element e.g. card, sidebar */
|
|
4
|
-
$componentBorderRadius: 4px; /* border radius of components e.g. buttons, inputs */
|
|
5
|
-
$transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
|
6
|
-
/* Standardized component input height (useful for input-text, chips, select triggers)
|
|
7
|
-
Set this to match the visual height of inputs across the library. */
|
|
8
|
-
$component-input-height: 42px; /* default: matches float-label input (14px font + 14px padding top+bottom) */
|
|
1
|
+
/* General */
|
|
2
|
+
$scale: 14px; /* main font size */
|
|
3
|
+
$borderRadius: 8px; /* border radius of layout element e.g. card, sidebar */
|
|
4
|
+
$componentBorderRadius: 4px; /* border radius of components e.g. buttons, inputs */
|
|
5
|
+
$transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
|
6
|
+
/* Standardized component input height (useful for input-text, chips, select triggers)
|
|
7
|
+
Set this to match the visual height of inputs across the library. */
|
|
8
|
+
$component-input-height: 42px; /* default: matches float-label input (14px font + 14px padding top+bottom) */
|
|
@@ -1,158 +1,158 @@
|
|
|
1
|
-
// This file contains the color variables used throughout the application.
|
|
2
|
-
$colors: (
|
|
3
|
-
"blue": (
|
|
4
|
-
50: #f5f9ff,
|
|
5
|
-
100: #d0e1fd,
|
|
6
|
-
200: #abc9fb,
|
|
7
|
-
300: #85b2f9,
|
|
8
|
-
400: #609af8,
|
|
9
|
-
500: #3b82f6,
|
|
10
|
-
600: #326fd1,
|
|
11
|
-
700: #295bac,
|
|
12
|
-
800: #204887,
|
|
13
|
-
900: #183462,
|
|
14
|
-
),
|
|
15
|
-
"green": (
|
|
16
|
-
50: #f4fcf7,
|
|
17
|
-
100: #caf1d8,
|
|
18
|
-
200: #a0e6ba,
|
|
19
|
-
300: #76db9b,
|
|
20
|
-
400: #4cd07d,
|
|
21
|
-
500: #22c55e,
|
|
22
|
-
600: #1da750,
|
|
23
|
-
700: #188a42,
|
|
24
|
-
800: #136c34,
|
|
25
|
-
900: #0e4f26,
|
|
26
|
-
),
|
|
27
|
-
"yellow": (
|
|
28
|
-
50: #fefbf3,
|
|
29
|
-
100: #faedc4,
|
|
30
|
-
200: #f6de95,
|
|
31
|
-
300: #f2d066,
|
|
32
|
-
400: #eec137,
|
|
33
|
-
500: #eab308,
|
|
34
|
-
600: #c79807,
|
|
35
|
-
700: #a47d06,
|
|
36
|
-
800: #816204,
|
|
37
|
-
900: #5e4803,
|
|
38
|
-
),
|
|
39
|
-
"cyan": (
|
|
40
|
-
50: #f3fbfd,
|
|
41
|
-
100: #c3edf5,
|
|
42
|
-
200: #94e0ed,
|
|
43
|
-
300: #65d2e4,
|
|
44
|
-
400: #35c4dc,
|
|
45
|
-
500: #06b6d4,
|
|
46
|
-
600: #059bb4,
|
|
47
|
-
700: #047f94,
|
|
48
|
-
800: #036475,
|
|
49
|
-
900: #024955,
|
|
50
|
-
),
|
|
51
|
-
"pink": (
|
|
52
|
-
50: #fef6fa,
|
|
53
|
-
100: #fad3e7,
|
|
54
|
-
200: #f7b0d3,
|
|
55
|
-
300: #f38ec0,
|
|
56
|
-
400: #f06bac,
|
|
57
|
-
500: #ec4899,
|
|
58
|
-
600: #c93d82,
|
|
59
|
-
700: #a5326b,
|
|
60
|
-
800: #822854,
|
|
61
|
-
900: #5e1d3d,
|
|
62
|
-
),
|
|
63
|
-
"indigo": (
|
|
64
|
-
50: #f7f7fe,
|
|
65
|
-
100: #dadafc,
|
|
66
|
-
200: #bcbdf9,
|
|
67
|
-
300: #9ea0f6,
|
|
68
|
-
400: #8183f4,
|
|
69
|
-
500: #6366f1,
|
|
70
|
-
600: #5457cd,
|
|
71
|
-
700: #4547a9,
|
|
72
|
-
800: #363885,
|
|
73
|
-
900: #282960,
|
|
74
|
-
),
|
|
75
|
-
"teal": (
|
|
76
|
-
50: #f3fbfb,
|
|
77
|
-
100: #c7eeea,
|
|
78
|
-
200: #9ae0d9,
|
|
79
|
-
300: #6dd3c8,
|
|
80
|
-
400: #41c5b7,
|
|
81
|
-
500: #14b8a6,
|
|
82
|
-
600: #119c8d,
|
|
83
|
-
700: #0e8174,
|
|
84
|
-
800: #0b655b,
|
|
85
|
-
900: #084a42,
|
|
86
|
-
),
|
|
87
|
-
"orange": (
|
|
88
|
-
50: #fff7ed,
|
|
89
|
-
100: #ffedd5,
|
|
90
|
-
200: #fed7aa,
|
|
91
|
-
300: #fdba74,
|
|
92
|
-
400: #fb923c,
|
|
93
|
-
500: #f59e0b,
|
|
94
|
-
600: #d97706,
|
|
95
|
-
700: #b45309,
|
|
96
|
-
800: #92400e,
|
|
97
|
-
900: #78350f,
|
|
98
|
-
),
|
|
99
|
-
"bluegray": (
|
|
100
|
-
50: #f7f8f9,
|
|
101
|
-
100: #dadee3,
|
|
102
|
-
200: #bcc3cd,
|
|
103
|
-
300: #9fa9b7,
|
|
104
|
-
400: #818ea1,
|
|
105
|
-
500: #64748b,
|
|
106
|
-
600: #556376,
|
|
107
|
-
700: #465161,
|
|
108
|
-
800: #37404c,
|
|
109
|
-
900: #282e38,
|
|
110
|
-
),
|
|
111
|
-
"purple": (
|
|
112
|
-
50: #fbf7ff,
|
|
113
|
-
100: #ead6fd,
|
|
114
|
-
200: #dab6fc,
|
|
115
|
-
300: #c996fa,
|
|
116
|
-
400: #b975f9,
|
|
117
|
-
500: #a855f7,
|
|
118
|
-
600: #8f48d2,
|
|
119
|
-
700: #763cad,
|
|
120
|
-
800: #5c2f88,
|
|
121
|
-
900: #432263,
|
|
122
|
-
),
|
|
123
|
-
"red": (
|
|
124
|
-
50: #fff5f5,
|
|
125
|
-
100: #ffd0ce,
|
|
126
|
-
200: #ffaca7,
|
|
127
|
-
300: #ff8780,
|
|
128
|
-
400: #ff6259,
|
|
129
|
-
500: #ff3d32,
|
|
130
|
-
600: #d9342b,
|
|
131
|
-
700: #b32b23,
|
|
132
|
-
800: #8c221c,
|
|
133
|
-
900: #661814,
|
|
134
|
-
),
|
|
135
|
-
"sky": (
|
|
136
|
-
base: #38bdf8,
|
|
137
|
-
dark: #0ea5e9,
|
|
138
|
-
darker: #0369a1,
|
|
139
|
-
light: #7dd3fc,
|
|
140
|
-
lighter: #e0f2fe,
|
|
141
|
-
contrast: #fff,
|
|
142
|
-
contrast-dark: #0f172a,
|
|
143
|
-
),
|
|
144
|
-
"gray": (
|
|
145
|
-
0: #ffffff,
|
|
146
|
-
50: #f8fafc,
|
|
147
|
-
100: #f1f5f9,
|
|
148
|
-
200: #e2e8f0,
|
|
149
|
-
300: #cbd5e1,
|
|
150
|
-
400: #94a3b8,
|
|
151
|
-
500: #64748b,
|
|
152
|
-
600: #475569,
|
|
153
|
-
700: #334155,
|
|
154
|
-
800: #1e293b,
|
|
155
|
-
900: #111827,
|
|
156
|
-
950: #020617,
|
|
157
|
-
),
|
|
158
|
-
);
|
|
1
|
+
// This file contains the color variables used throughout the application.
|
|
2
|
+
$colors: (
|
|
3
|
+
"blue": (
|
|
4
|
+
50: #f5f9ff,
|
|
5
|
+
100: #d0e1fd,
|
|
6
|
+
200: #abc9fb,
|
|
7
|
+
300: #85b2f9,
|
|
8
|
+
400: #609af8,
|
|
9
|
+
500: #3b82f6,
|
|
10
|
+
600: #326fd1,
|
|
11
|
+
700: #295bac,
|
|
12
|
+
800: #204887,
|
|
13
|
+
900: #183462,
|
|
14
|
+
),
|
|
15
|
+
"green": (
|
|
16
|
+
50: #f4fcf7,
|
|
17
|
+
100: #caf1d8,
|
|
18
|
+
200: #a0e6ba,
|
|
19
|
+
300: #76db9b,
|
|
20
|
+
400: #4cd07d,
|
|
21
|
+
500: #22c55e,
|
|
22
|
+
600: #1da750,
|
|
23
|
+
700: #188a42,
|
|
24
|
+
800: #136c34,
|
|
25
|
+
900: #0e4f26,
|
|
26
|
+
),
|
|
27
|
+
"yellow": (
|
|
28
|
+
50: #fefbf3,
|
|
29
|
+
100: #faedc4,
|
|
30
|
+
200: #f6de95,
|
|
31
|
+
300: #f2d066,
|
|
32
|
+
400: #eec137,
|
|
33
|
+
500: #eab308,
|
|
34
|
+
600: #c79807,
|
|
35
|
+
700: #a47d06,
|
|
36
|
+
800: #816204,
|
|
37
|
+
900: #5e4803,
|
|
38
|
+
),
|
|
39
|
+
"cyan": (
|
|
40
|
+
50: #f3fbfd,
|
|
41
|
+
100: #c3edf5,
|
|
42
|
+
200: #94e0ed,
|
|
43
|
+
300: #65d2e4,
|
|
44
|
+
400: #35c4dc,
|
|
45
|
+
500: #06b6d4,
|
|
46
|
+
600: #059bb4,
|
|
47
|
+
700: #047f94,
|
|
48
|
+
800: #036475,
|
|
49
|
+
900: #024955,
|
|
50
|
+
),
|
|
51
|
+
"pink": (
|
|
52
|
+
50: #fef6fa,
|
|
53
|
+
100: #fad3e7,
|
|
54
|
+
200: #f7b0d3,
|
|
55
|
+
300: #f38ec0,
|
|
56
|
+
400: #f06bac,
|
|
57
|
+
500: #ec4899,
|
|
58
|
+
600: #c93d82,
|
|
59
|
+
700: #a5326b,
|
|
60
|
+
800: #822854,
|
|
61
|
+
900: #5e1d3d,
|
|
62
|
+
),
|
|
63
|
+
"indigo": (
|
|
64
|
+
50: #f7f7fe,
|
|
65
|
+
100: #dadafc,
|
|
66
|
+
200: #bcbdf9,
|
|
67
|
+
300: #9ea0f6,
|
|
68
|
+
400: #8183f4,
|
|
69
|
+
500: #6366f1,
|
|
70
|
+
600: #5457cd,
|
|
71
|
+
700: #4547a9,
|
|
72
|
+
800: #363885,
|
|
73
|
+
900: #282960,
|
|
74
|
+
),
|
|
75
|
+
"teal": (
|
|
76
|
+
50: #f3fbfb,
|
|
77
|
+
100: #c7eeea,
|
|
78
|
+
200: #9ae0d9,
|
|
79
|
+
300: #6dd3c8,
|
|
80
|
+
400: #41c5b7,
|
|
81
|
+
500: #14b8a6,
|
|
82
|
+
600: #119c8d,
|
|
83
|
+
700: #0e8174,
|
|
84
|
+
800: #0b655b,
|
|
85
|
+
900: #084a42,
|
|
86
|
+
),
|
|
87
|
+
"orange": (
|
|
88
|
+
50: #fff7ed,
|
|
89
|
+
100: #ffedd5,
|
|
90
|
+
200: #fed7aa,
|
|
91
|
+
300: #fdba74,
|
|
92
|
+
400: #fb923c,
|
|
93
|
+
500: #f59e0b,
|
|
94
|
+
600: #d97706,
|
|
95
|
+
700: #b45309,
|
|
96
|
+
800: #92400e,
|
|
97
|
+
900: #78350f,
|
|
98
|
+
),
|
|
99
|
+
"bluegray": (
|
|
100
|
+
50: #f7f8f9,
|
|
101
|
+
100: #dadee3,
|
|
102
|
+
200: #bcc3cd,
|
|
103
|
+
300: #9fa9b7,
|
|
104
|
+
400: #818ea1,
|
|
105
|
+
500: #64748b,
|
|
106
|
+
600: #556376,
|
|
107
|
+
700: #465161,
|
|
108
|
+
800: #37404c,
|
|
109
|
+
900: #282e38,
|
|
110
|
+
),
|
|
111
|
+
"purple": (
|
|
112
|
+
50: #fbf7ff,
|
|
113
|
+
100: #ead6fd,
|
|
114
|
+
200: #dab6fc,
|
|
115
|
+
300: #c996fa,
|
|
116
|
+
400: #b975f9,
|
|
117
|
+
500: #a855f7,
|
|
118
|
+
600: #8f48d2,
|
|
119
|
+
700: #763cad,
|
|
120
|
+
800: #5c2f88,
|
|
121
|
+
900: #432263,
|
|
122
|
+
),
|
|
123
|
+
"red": (
|
|
124
|
+
50: #fff5f5,
|
|
125
|
+
100: #ffd0ce,
|
|
126
|
+
200: #ffaca7,
|
|
127
|
+
300: #ff8780,
|
|
128
|
+
400: #ff6259,
|
|
129
|
+
500: #ff3d32,
|
|
130
|
+
600: #d9342b,
|
|
131
|
+
700: #b32b23,
|
|
132
|
+
800: #8c221c,
|
|
133
|
+
900: #661814,
|
|
134
|
+
),
|
|
135
|
+
"sky": (
|
|
136
|
+
base: #38bdf8,
|
|
137
|
+
dark: #0ea5e9,
|
|
138
|
+
darker: #0369a1,
|
|
139
|
+
light: #7dd3fc,
|
|
140
|
+
lighter: #e0f2fe,
|
|
141
|
+
contrast: #fff,
|
|
142
|
+
contrast-dark: #0f172a,
|
|
143
|
+
),
|
|
144
|
+
"gray": (
|
|
145
|
+
0: #ffffff,
|
|
146
|
+
50: #f8fafc,
|
|
147
|
+
100: #f1f5f9,
|
|
148
|
+
200: #e2e8f0,
|
|
149
|
+
300: #cbd5e1,
|
|
150
|
+
400: #94a3b8,
|
|
151
|
+
500: #64748b,
|
|
152
|
+
600: #475569,
|
|
153
|
+
700: #334155,
|
|
154
|
+
800: #1e293b,
|
|
155
|
+
900: #111827,
|
|
156
|
+
950: #020617,
|
|
157
|
+
),
|
|
158
|
+
);
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
$color-white: #ffffff;
|
|
2
|
-
$color-black: #000000;
|
|
3
|
-
$color-primary: var(--color-primary);
|
|
4
|
-
$color-secondary: var(--color-secondary);
|
|
5
|
-
$color-tertiary: var(--color-tertiary);
|
|
6
|
-
$color-success: var(--color-success);
|
|
7
|
-
$color-info: var(--color-info);
|
|
8
|
-
$color-warning: var(--color-warning);
|
|
9
|
-
$color-danger: var(--color-danger);
|
|
10
|
-
$color-contrast: var(--color-contrast);
|
|
11
|
-
$color-contrast-inverse: var(--color-contrast-inverse);
|
|
12
|
-
|
|
13
|
-
$color-overlay-background: rgba(0, 0, 0, 0.4);
|
|
14
|
-
$color-component-background: var(--color-component-background);
|
|
15
|
-
$color-component-background-secondary: var(
|
|
16
|
-
--color-component-background-secondary
|
|
17
|
-
);
|
|
18
|
-
$color-component-background-solid: var(--color-component-background-solid);
|
|
19
|
-
$color-disabled-background: var(--color-disabled-background);
|
|
20
|
-
$color-disabled-border: var(--color-disabled-border);
|
|
21
|
-
|
|
22
|
-
$color-surface-ground: var(--surface-ground);
|
|
23
|
-
$color-surface-elevated: var(--surface-elevated);
|
|
24
|
-
$color-surface-section: var(--surface-section);
|
|
25
|
-
$color-surface-card: var(--surface-card);
|
|
26
|
-
$color-surface-overlay: var(--surface-overlay);
|
|
27
|
-
$color-surface-border: var(--surface-border);
|
|
28
|
-
$color-surface-hover: var(--surface-hover);
|
|
29
|
-
|
|
30
|
-
$color-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
31
|
-
|
|
32
|
-
$color-text-primary: var(--color-text-primary);
|
|
33
|
-
$color-text-contrast: var(--color-text-contrast);
|
|
34
|
-
$color-text-secondary: var(--color-text-secondary);
|
|
35
|
-
$color-text-tertiary: var(--color-text-tertiary);
|
|
36
|
-
$color-text-disabled: var(--color-text-disabled);
|
|
37
|
-
|
|
38
|
-
$color-border: var(--color-border);
|
|
1
|
+
$color-white: #ffffff;
|
|
2
|
+
$color-black: #000000;
|
|
3
|
+
$color-primary: var(--color-primary);
|
|
4
|
+
$color-secondary: var(--color-secondary);
|
|
5
|
+
$color-tertiary: var(--color-tertiary);
|
|
6
|
+
$color-success: var(--color-success);
|
|
7
|
+
$color-info: var(--color-info);
|
|
8
|
+
$color-warning: var(--color-warning);
|
|
9
|
+
$color-danger: var(--color-danger);
|
|
10
|
+
$color-contrast: var(--color-contrast);
|
|
11
|
+
$color-contrast-inverse: var(--color-contrast-inverse);
|
|
12
|
+
|
|
13
|
+
$color-overlay-background: rgba(0, 0, 0, 0.4);
|
|
14
|
+
$color-component-background: var(--color-component-background);
|
|
15
|
+
$color-component-background-secondary: var(
|
|
16
|
+
--color-component-background-secondary
|
|
17
|
+
);
|
|
18
|
+
$color-component-background-solid: var(--color-component-background-solid);
|
|
19
|
+
$color-disabled-background: var(--color-disabled-background);
|
|
20
|
+
$color-disabled-border: var(--color-disabled-border);
|
|
21
|
+
|
|
22
|
+
$color-surface-ground: var(--surface-ground);
|
|
23
|
+
$color-surface-elevated: var(--surface-elevated);
|
|
24
|
+
$color-surface-section: var(--surface-section);
|
|
25
|
+
$color-surface-card: var(--surface-card);
|
|
26
|
+
$color-surface-overlay: var(--surface-overlay);
|
|
27
|
+
$color-surface-border: var(--surface-border);
|
|
28
|
+
$color-surface-hover: var(--surface-hover);
|
|
29
|
+
|
|
30
|
+
$color-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
31
|
+
|
|
32
|
+
$color-text-primary: var(--color-text-primary);
|
|
33
|
+
$color-text-contrast: var(--color-text-contrast);
|
|
34
|
+
$color-text-secondary: var(--color-text-secondary);
|
|
35
|
+
$color-text-tertiary: var(--color-text-tertiary);
|
|
36
|
+
$color-text-disabled: var(--color-text-disabled);
|
|
37
|
+
|
|
38
|
+
$color-border: var(--color-border);
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "./color-variables.scss" as vars;
|
|
3
|
-
@use "./get-color.scss" as color;
|
|
4
|
-
|
|
5
|
-
@mixin define-color-palette($mode: light) {
|
|
6
|
-
@if $mode == light {
|
|
7
|
-
.light {
|
|
8
|
-
--color-primary: #{color.get-color("orange", 500)};
|
|
9
|
-
--color-secondary: #{color.get-color("gray", 700)};
|
|
10
|
-
--color-tertiary: #{color.get-color("bluegray", 500)};
|
|
11
|
-
--color-success: #{color.get-color("green", 500)};
|
|
12
|
-
--color-info: #{color.get-color("sky", "dark")};
|
|
13
|
-
--color-warning: #{color.get-color("yellow", 500)};
|
|
14
|
-
--color-danger: #{color.get-color("red", 500)};
|
|
15
|
-
--color-contrast: #000;
|
|
16
|
-
--color-contrast-inverse: #fff;
|
|
17
|
-
|
|
18
|
-
// Text colors
|
|
19
|
-
--color-text-primary: #{color.get-color("gray", 700)};
|
|
20
|
-
--color-text-contrast: #ffffffde;
|
|
21
|
-
--color-text-secondary: #{color.get-color("gray", 600)};
|
|
22
|
-
--color-text-tertiary: #{color.get-color("bluegray", 500)};
|
|
23
|
-
|
|
24
|
-
// Background colors
|
|
25
|
-
--color-component-background: #ffffff;
|
|
26
|
-
--color-component-background-secondary: #ffffff;
|
|
27
|
-
--color-component-background-solid: #{color.get-color("bluegray", 900)};
|
|
28
|
-
|
|
29
|
-
// Border colors
|
|
30
|
-
--color-border: #{color.get-color("gray", 300)};
|
|
31
|
-
|
|
32
|
-
// Disabled state colors
|
|
33
|
-
--color-disabled-background: #f5f5f5;
|
|
34
|
-
--color-disabled-border: #e2e8f0;
|
|
35
|
-
--color-text-disabled: #{color.get-color("gray", 700)};
|
|
36
|
-
|
|
37
|
-
// Surface colors
|
|
38
|
-
--surface-ground: #f8fafc;
|
|
39
|
-
--surface-elevated: #ffffff;
|
|
40
|
-
--surface-section: #ffffff;
|
|
41
|
-
--surface-card: #ffffff;
|
|
42
|
-
--surface-overlay: #ffffff;
|
|
43
|
-
--surface-border: #e2e8f0;
|
|
44
|
-
--surface-hover: #f1f5f9;
|
|
45
|
-
}
|
|
46
|
-
} @else if $mode == dark {
|
|
47
|
-
.dark {
|
|
48
|
-
--color-primary: #{color.get-color("yellow", 500)};
|
|
49
|
-
--color-secondary: #{color.get-color("gray", 300)};
|
|
50
|
-
--color-tertiary: #{color.get-color("bluegray", 500)};
|
|
51
|
-
--color-success: #{color.get-color("green", 400)};
|
|
52
|
-
--color-info: #{color.get-color("sky", "base")};
|
|
53
|
-
--color-warning: #{color.get-color("yellow", 400)};
|
|
54
|
-
--color-danger: #{color.get-color("red", 400)};
|
|
55
|
-
--color-contrast: #ffffff;
|
|
56
|
-
--color-contrast-inverse: #000;
|
|
57
|
-
|
|
58
|
-
// Text colors
|
|
59
|
-
--color-text-primary: #ffffffde;
|
|
60
|
-
--color-text-contrast: #ffffffde;
|
|
61
|
-
--color-text-secondary: #{color.get-color("gray", 300)};
|
|
62
|
-
--color-text-tertiary: #{color.get-color("bluegray", 500)};
|
|
63
|
-
|
|
64
|
-
// Background colors
|
|
65
|
-
--color-component-background: #0b121c;
|
|
66
|
-
--color-component-background-secondary: #000510;
|
|
67
|
-
--color-component-background-solid: #{color.get-color("bluegray", 900)};
|
|
68
|
-
|
|
69
|
-
// Border colors
|
|
70
|
-
--color-border: #5e564b;
|
|
71
|
-
|
|
72
|
-
// Disabled state colors
|
|
73
|
-
--color-disabled-background: #1f2937;
|
|
74
|
-
--color-disabled-border: #4b4e50;
|
|
75
|
-
--color-text-disabled: #ffffffde;
|
|
76
|
-
|
|
77
|
-
// Surface colors
|
|
78
|
-
--surface-ground: #000510;
|
|
79
|
-
--surface-elevated: #1f2937;
|
|
80
|
-
--surface-section: #111827;
|
|
81
|
-
--surface-card: #0b121c;
|
|
82
|
-
--surface-overlay: #0b121c;
|
|
83
|
-
--surface-border: #4b4e50; //625a4e
|
|
84
|
-
--surface-hover: rgba(255, 255, 255, 0.03);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./color-variables.scss" as vars;
|
|
3
|
+
@use "./get-color.scss" as color;
|
|
4
|
+
|
|
5
|
+
@mixin define-color-palette($mode: light) {
|
|
6
|
+
@if $mode == light {
|
|
7
|
+
.light {
|
|
8
|
+
--color-primary: #{color.get-color("orange", 500)};
|
|
9
|
+
--color-secondary: #{color.get-color("gray", 700)};
|
|
10
|
+
--color-tertiary: #{color.get-color("bluegray", 500)};
|
|
11
|
+
--color-success: #{color.get-color("green", 500)};
|
|
12
|
+
--color-info: #{color.get-color("sky", "dark")};
|
|
13
|
+
--color-warning: #{color.get-color("yellow", 500)};
|
|
14
|
+
--color-danger: #{color.get-color("red", 500)};
|
|
15
|
+
--color-contrast: #000;
|
|
16
|
+
--color-contrast-inverse: #fff;
|
|
17
|
+
|
|
18
|
+
// Text colors
|
|
19
|
+
--color-text-primary: #{color.get-color("gray", 700)};
|
|
20
|
+
--color-text-contrast: #ffffffde;
|
|
21
|
+
--color-text-secondary: #{color.get-color("gray", 600)};
|
|
22
|
+
--color-text-tertiary: #{color.get-color("bluegray", 500)};
|
|
23
|
+
|
|
24
|
+
// Background colors
|
|
25
|
+
--color-component-background: #ffffff;
|
|
26
|
+
--color-component-background-secondary: #ffffff;
|
|
27
|
+
--color-component-background-solid: #{color.get-color("bluegray", 900)};
|
|
28
|
+
|
|
29
|
+
// Border colors
|
|
30
|
+
--color-border: #{color.get-color("gray", 300)};
|
|
31
|
+
|
|
32
|
+
// Disabled state colors
|
|
33
|
+
--color-disabled-background: #f5f5f5;
|
|
34
|
+
--color-disabled-border: #e2e8f0;
|
|
35
|
+
--color-text-disabled: #{color.get-color("gray", 700)};
|
|
36
|
+
|
|
37
|
+
// Surface colors
|
|
38
|
+
--surface-ground: #f8fafc;
|
|
39
|
+
--surface-elevated: #ffffff;
|
|
40
|
+
--surface-section: #ffffff;
|
|
41
|
+
--surface-card: #ffffff;
|
|
42
|
+
--surface-overlay: #ffffff;
|
|
43
|
+
--surface-border: #e2e8f0;
|
|
44
|
+
--surface-hover: #f1f5f9;
|
|
45
|
+
}
|
|
46
|
+
} @else if $mode == dark {
|
|
47
|
+
.dark {
|
|
48
|
+
--color-primary: #{color.get-color("yellow", 500)};
|
|
49
|
+
--color-secondary: #{color.get-color("gray", 300)};
|
|
50
|
+
--color-tertiary: #{color.get-color("bluegray", 500)};
|
|
51
|
+
--color-success: #{color.get-color("green", 400)};
|
|
52
|
+
--color-info: #{color.get-color("sky", "base")};
|
|
53
|
+
--color-warning: #{color.get-color("yellow", 400)};
|
|
54
|
+
--color-danger: #{color.get-color("red", 400)};
|
|
55
|
+
--color-contrast: #ffffff;
|
|
56
|
+
--color-contrast-inverse: #000;
|
|
57
|
+
|
|
58
|
+
// Text colors
|
|
59
|
+
--color-text-primary: #ffffffde;
|
|
60
|
+
--color-text-contrast: #ffffffde;
|
|
61
|
+
--color-text-secondary: #{color.get-color("gray", 300)};
|
|
62
|
+
--color-text-tertiary: #{color.get-color("bluegray", 500)};
|
|
63
|
+
|
|
64
|
+
// Background colors
|
|
65
|
+
--color-component-background: #0b121c;
|
|
66
|
+
--color-component-background-secondary: #000510;
|
|
67
|
+
--color-component-background-solid: #{color.get-color("bluegray", 900)};
|
|
68
|
+
|
|
69
|
+
// Border colors
|
|
70
|
+
--color-border: #5e564b;
|
|
71
|
+
|
|
72
|
+
// Disabled state colors
|
|
73
|
+
--color-disabled-background: #1f2937;
|
|
74
|
+
--color-disabled-border: #4b4e50;
|
|
75
|
+
--color-text-disabled: #ffffffde;
|
|
76
|
+
|
|
77
|
+
// Surface colors
|
|
78
|
+
--surface-ground: #000510;
|
|
79
|
+
--surface-elevated: #1f2937;
|
|
80
|
+
--surface-section: #111827;
|
|
81
|
+
--surface-card: #0b121c;
|
|
82
|
+
--surface-overlay: #0b121c;
|
|
83
|
+
--surface-border: #4b4e50; //625a4e
|
|
84
|
+
--surface-hover: rgba(255, 255, 255, 0.03);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use './color-palette.scss' as colors;
|
|
3
|
-
|
|
4
|
-
@function get-color($name, $shade) {
|
|
5
|
-
$shades: map.get(colors.$colors, $name);
|
|
6
|
-
@if $shades == null {
|
|
7
|
-
@error "Color `#{$name}` not found in \$colors map.";
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
$value: map.get($shades, $shade);
|
|
11
|
-
@if $value == null {
|
|
12
|
-
@error "Shade `#{$shade}` not found in `#{$name}` color.";
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@return $value;
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use './color-palette.scss' as colors;
|
|
3
|
+
|
|
4
|
+
@function get-color($name, $shade) {
|
|
5
|
+
$shades: map.get(colors.$colors, $name);
|
|
6
|
+
@if $shades == null {
|
|
7
|
+
@error "Color `#{$name}` not found in \$colors map.";
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
$value: map.get($shades, $shade);
|
|
11
|
+
@if $value == null {
|
|
12
|
+
@error "Shade `#{$shade}` not found in `#{$name}` color.";
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@return $value;
|
|
16
16
|
}
|