noctemyth 0.2.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/css/noctemyth-skelton.css +3171 -8838
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3171 -8838
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +55988 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +55988 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +26697 -38194
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5866 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +28 -20
  16. package/src/backgrounds/gingham.scss +22 -21
  17. package/src/backgrounds/rhombus.scss +45 -22
  18. package/src/backgrounds/stripe.scss +19 -14
  19. package/src/backgrounds/zigzag.scss +34 -25
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +34 -4
  22. package/src/base/element.scss +1 -1
  23. package/src/base/index.scss +2 -0
  24. package/src/base/normalize.scss +0 -8
  25. package/src/base/root.scss +25 -0
  26. package/src/components/accordion.scss +183 -90
  27. package/src/components/aside.scss +7 -0
  28. package/src/components/badge.scss +170 -64
  29. package/src/components/blockquote.scss +52 -27
  30. package/src/components/breadcrumbs.scss +46 -16
  31. package/src/components/button.scss +177 -88
  32. package/src/components/card.scss +147 -48
  33. package/src/components/description-list.scss +46 -0
  34. package/src/components/dialogue.scss +194 -143
  35. package/src/components/div.scss +1 -1
  36. package/src/components/figure.scss +173 -0
  37. package/src/components/footer.scss +20 -6
  38. package/src/components/hamburger.scss +77 -51
  39. package/src/components/header.scss +42 -6
  40. package/src/components/heading.scss +6 -7
  41. package/src/components/image.scss +1 -1
  42. package/src/components/index.scss +3 -0
  43. package/src/components/input.scss +110 -69
  44. package/src/components/label.scss +34 -4
  45. package/src/components/link.scss +56 -12
  46. package/src/components/list.scss +39 -9
  47. package/src/components/loader.scss +10 -8
  48. package/src/components/main.scss +1 -1
  49. package/src/components/message.scss +100 -24
  50. package/src/components/modal.scss +18 -8
  51. package/src/components/nav.scss +600 -280
  52. package/src/components/paragraph.scss +1 -2
  53. package/src/components/progress.scss +42 -16
  54. package/src/components/section.scss +1 -1
  55. package/src/components/span.scss +1 -1
  56. package/src/css-variables/animation.scss +1 -1
  57. package/src/css-variables/border.scss +1 -1
  58. package/src/css-variables/color.scss +757 -468
  59. package/src/css-variables/components/dialogue.scss +2 -2
  60. package/src/css-variables/components/header.scss +1 -0
  61. package/src/css-variables/index.scss +1 -0
  62. package/src/css-variables/layout.scss +11 -0
  63. package/src/css-variables/miscellaneous.scss +4 -4
  64. package/src/css-variables/typography.scss +1 -1
  65. package/src/functions/color.scss +13 -0
  66. package/src/functions/index.scss +1 -0
  67. package/src/functions/string.scss +12 -0
  68. package/src/layouts/centering.scss +1 -1
  69. package/src/layouts/columns.scss +57 -51
  70. package/src/layouts/container.scss +33 -31
  71. package/src/mixins/color.scss +0 -32
  72. package/src/mixins/element.scss +2 -2
  73. package/src/mixins/responsive.scss +12 -11
  74. package/src/utilities/border.scss +4 -0
  75. package/src/utilities/color.scss +112 -6
  76. package/src/variables/color.scss +1169 -1084
  77. package/src/variables/components/dialogue.scss +2 -2
  78. package/src/variables/components/header.scss +1 -0
  79. package/src/variables/layout.scss +13 -11
  80. package/src/variables/miscellaneous.scss +1 -3
package/src/variables/color.scss CHANGED
@@ -1,17 +1,14 @@
1
1
  @use "sass:color";
2
+ @use "sass:list";
2
3
  @use "../functions/index.scss" as functions;
3
4
 
4
5
  //#region define color settings
5
-
6
- $color-lightness-white: 95% !default;
7
- $color-lightness-black: 14% !default;
8
-
9
- $color-lightness-50: 53% !default;
10
- $color-lightness-offset-lighter: 5% !default;
11
- $color-lightness-offset-darker: -5% !default;
6
+ $color-lightness-05: 8%;
7
+ $color-lightness-95: 98%;
12
8
 
13
9
  $color-chroma-gray: 0.04 !default;
14
- $color-chroma-colorful: 0.09 !default;
10
+
11
+ $color-chroma-colorful-50: 0.09 !default;
15
12
  $color-chroma-colorful-offset-lighter: 0 !default;
16
13
  $color-chroma-colorful-offset-darker: 0 !default;
17
14
 
@@ -29,79 +26,127 @@ $color-hue-magenta: 327 !default;
29
26
 
30
27
  //#endregion define color settings
31
28
 
32
- //#region define color shades array
33
-
34
- //#region color-light-lightness
35
-
36
29
  $color-light-lightness-fore: 5 !default;
37
30
  $color-light-lightness-back: 95 !default;
38
31
  $color-light-lightness-border: 70 !default;
39
32
  $color-light-lightness-placeholder: 70 !default;
40
33
  $color-light-lightness-shadow: 70 !default;
34
+ $color-light-lightness-scrollbar-thumb: 30 !default;
35
+ $color-light-lightness-scrollbar-track: 70 !default;
36
+
37
+ $color-dark-lightness-fore: 95 !default;
38
+ $color-dark-lightness-back: 5 !default;
39
+ $color-dark-lightness-border: 30 !default;
40
+ $color-dark-lightness-placeholder: 50 !default;
41
+ $color-dark-lightness-shadow: 50 !default;
42
+ $color-dark-lightness-scrollbar-thumb: 70 !default;
43
+ $color-dark-lightness-scrollbar-track: 30 !default;
41
44
 
42
- //#region color-light-lightness-dot
45
+ //#region color-lightness-dot
43
46
  $color-light-lightness-dot-fore: 85 !default;
44
47
  $color-light-lightness-dot-back: 95 !default;
45
- //#endregion color-light-lightness-dot
46
48
 
47
- //#region color-light-lightness-gingham
49
+ $color-dark-lightness-dot-fore: 15 !default;
50
+ $color-dark-lightness-dot-back: 5 !default;
51
+ //#endregion color-lightness-dot
52
+
53
+ //#region color-lightness-gingham
48
54
  $color-light-lightness-gingham-fore: 85 !default;
49
55
  $color-light-lightness-gingham-back: 95 !default;
50
- //#endregion color-light-lightness-gingham
51
56
 
52
- //#region color-light-lightness-rhombus
57
+ $color-dark-lightness-gingham-fore: 15 !default;
58
+ $color-dark-lightness-gingham-back: 5 !default;
59
+ //#endregion color-lightness-gingham
60
+
61
+ //#region color-lightness-rhombus
53
62
  $color-light-lightness-rhombus-fore: 85 !default;
54
63
  $color-light-lightness-rhombus-back: 95 !default;
55
- //#endregion color-light-lightness-rhombus
56
64
 
57
- //#region color-light-lightness-stripe
65
+ $color-dark-lightness-rhombus-fore: 15 !default;
66
+ $color-dark-lightness-rhombus-back: 5 !default;
67
+ //#endregion color-lightness-rhombus
68
+
69
+ //#region color-lightness-stripe
58
70
  $color-light-lightness-stripe-fore: 85 !default;
59
71
  $color-light-lightness-stripe-back: 95 !default;
60
- //#endregion color-light-lightness-stripe
61
72
 
62
- //#region color-light-lightness-zigzag
73
+ $color-dark-lightness-stripe-fore: 15 !default;
74
+ $color-dark-lightness-stripe-back: 5 !default;
75
+ //#endregion color-lightness-stripe
76
+
77
+ //#region color-lightness-zigzag
63
78
  $color-light-lightness-zigzag-fore: 85 !default;
64
79
  $color-light-lightness-zigzag-back: 95 !default;
65
- //#endregion color-light-lightness-zigzag
66
80
 
67
- //#region color-dark-lightness-accordion
81
+ $color-dark-lightness-zigzag-fore: 15 !default;
82
+ $color-dark-lightness-zigzag-back: 5 !default;
83
+ //#endregion color-lightness-zigzag
84
+
85
+ //#region color-lightness-accordion
68
86
  $color-light-lightness-accordion-fore: 5 !default;
69
87
  $color-light-lightness-accordion-back: 95 !default;
70
- $color-light-lightness-accordion-border: 70 !default;
88
+ $color-light-lightness-accordion-border: 80 !default;
71
89
  $color-light-lightness-accordion-summary-fore: 5 !default;
72
- $color-light-lightness-accordion-summary-back: 70 !default;
73
- $color-light-lightness-accordion-summary-border: 70 !default;
90
+ $color-light-lightness-accordion-summary-back: 80 !default;
91
+ $color-light-lightness-accordion-summary-border: 80 !default;
74
92
  $color-light-lightness-accordion-details-fore: 5 !default;
75
93
  $color-light-lightness-accordion-details-back: 95 !default;
76
- $color-light-lightness-accordion-details-border: 70 !default;
77
- //#endregion color-dark-lightness-accordion
94
+ $color-light-lightness-accordion-details-border: 80 !default;
95
+
96
+ $color-dark-lightness-accordion-fore: 95 !default;
97
+ $color-dark-lightness-accordion-back: 5 !default;
98
+ $color-dark-lightness-accordion-border: 20 !default;
99
+ $color-dark-lightness-accordion-summary-fore: 95 !default;
100
+ $color-dark-lightness-accordion-summary-back: 20 !default;
101
+ $color-dark-lightness-accordion-summary-border: 20 !default;
102
+ $color-dark-lightness-accordion-details-fore: 95 !default;
103
+ $color-dark-lightness-accordion-details-back: 5 !default;
104
+ $color-dark-lightness-accordion-details-border: 20 !default;
105
+ //#endregion color-lightness-accordion
78
106
 
79
- //#region color-light-lightness-button
107
+ //#region color-lightness-button
80
108
  $color-light-lightness-button-fore: 5 !default;
81
109
  $color-light-lightness-button-back: 70 !default;
82
110
  $color-light-lightness-button-border: 70 !default;
83
111
  $color-light-lightness-button-shadow: 70 !default;
84
- //#endregion color-light-lightness-button
85
112
 
86
- //#region color-light-lightness-badge
113
+ $color-dark-lightness-button-fore: 95 !default;
114
+ $color-dark-lightness-button-back: 30 !default;
115
+ $color-dark-lightness-button-border: 30 !default;
116
+ $color-dark-lightness-button-shadow: 30 !default;
117
+ //#endregion color-lightness-button
118
+
119
+ //#region color-lightness-badge
87
120
  $color-light-lightness-badge-fore: 5 !default;
88
- $color-light-lightness-badge-back: 85 !default;
121
+ $color-light-lightness-badge-back: 80 !default;
89
122
  $color-light-lightness-badge-border: 70 !default;
90
- //#endregion color-light-lightness-badge
91
123
 
92
- //#region color-light-lightness-blockquote
93
- $color-light-lightness-blockquote-fore: 50 !default;
94
- $color-light-lightness-blockquote-back: 90 !default;
95
- $color-light-lightness-blockquote-border: 50 !default;
96
- //#endregion color-light-lightness-blockquote
124
+ $color-dark-lightness-badge-fore: 95 !default;
125
+ $color-dark-lightness-badge-back: 20 !default;
126
+ $color-dark-lightness-badge-border: 30 !default;
127
+ //#endregion color-lightness-badge
128
+
129
+ //#region color-lightness-blockquote
130
+ $color-light-lightness-blockquote-fore: 30 !default;
131
+ $color-light-lightness-blockquote-back: 80 !default;
132
+ $color-light-lightness-blockquote-border: 60 !default;
133
+
134
+ $color-dark-lightness-blockquote-fore: 70 !default;
135
+ $color-dark-lightness-blockquote-back: 20 !default;
136
+ $color-dark-lightness-blockquote-border: 40 !default;
137
+ //#endregion color-lightness-blockquote
97
138
 
98
- //#region color-light-lightness-breadcrumbs
99
- $color-light-lightness-breadcrumbs-fore: 30 !default;
100
- $color-light-lightness-breadcrumb-fore: 30 !default;
101
- $color-light-lightness-breadcrumb-divider-fore: 60 !default;
102
- //#endregion color-light-lightness-breadcrumbs
139
+ //#region color-lightness-breadcrumbs
140
+ $color-light-lightness-breadcrumbs-fore: 65 !default;
141
+ $color-light-lightness-breadcrumb-fore: 65 !default;
142
+ $color-light-lightness-breadcrumb-divider-fore: 65 !default;
103
143
 
104
- //#region color-light-lightness-card
144
+ $color-dark-lightness-breadcrumbs-fore: 65 !default;
145
+ $color-dark-lightness-breadcrumb-fore: 65 !default;
146
+ $color-dark-lightness-breadcrumb-divider-fore: 65 !default;
147
+ //#endregion color-lightness-breadcrumbs
148
+
149
+ //#region color-lightness-card
105
150
  $color-light-lightness-card-fore: 5 !default;
106
151
  $color-light-lightness-card-back: 70 !default;
107
152
  $color-light-lightness-card-border: 70 !default;
@@ -112,9 +157,20 @@ $color-light-lightness-card-body-fore: 5 !default;
112
157
  $color-light-lightness-card-body-back: 90 !default;
113
158
  $color-light-lightness-card-footer-fore: 5 !default;
114
159
  $color-light-lightness-card-footer-back: 80 !default;
115
- //#endregion color-light-lightness-card
116
160
 
117
- //#region color-dark-lightness-dialogue
161
+ $color-dark-lightness-card-fore: 95 !default;
162
+ $color-dark-lightness-card-back: 5 !default;
163
+ $color-dark-lightness-card-border: 30 !default;
164
+ $color-dark-lightness-card-shadow: 30 !default;
165
+ $color-dark-lightness-card-header-fore: 95 !default;
166
+ $color-dark-lightness-card-header-back: 50 !default;
167
+ $color-dark-lightness-card-body-fore: 95 !default;
168
+ $color-dark-lightness-card-body-back: 10 !default;
169
+ $color-dark-lightness-card-footer-fore: 95 !default;
170
+ $color-dark-lightness-card-footer-back: 20 !default;
171
+ //#endregion color-lightness-card
172
+
173
+ //#region color-lightness-dialogue
118
174
  $color-light-lightness-dialogue-fore: 5 !default;
119
175
  $color-light-lightness-dialogue-back: 95 !default;
120
176
  $color-light-lightness-dialogue-border: 70 !default;
@@ -129,127 +185,7 @@ $color-light-lightness-dialogue-name-shadow: 70 !default;
129
185
  $color-light-lightness-dialogue-message-fore: 5 !default;
130
186
  $color-light-lightness-dialogue-message-back: 95 !default;
131
187
  $color-light-lightness-dialogue-message-border: 70 !default;
132
- //#endregion color-dark-lightness-dialogue
133
-
134
- //#region color-light-lightness-header
135
- $color-light-lightness-header-fore: 5 !default;
136
- $color-light-lightness-header-back: 70 !default;
137
- $color-light-lightness-header-shadow: 70 !default;
138
- //#endregion color-light-lightness-header
139
188
 
140
- //#region color-light-lightness-label
141
- $color-light-lightness-label-fore: 60 !default;
142
- //#endregion color-light-lightness-label
143
-
144
- //#region color-light-lightness-link
145
- $color-light-lightness-link-fore: 60 !default;
146
- //#endregion color-light-lightness-link
147
-
148
- //#region color-light-lightness-loader
149
- $color-light-lightness-loader-fore: 60 !default;
150
- //#endregion color-light-lightness-loader
151
-
152
- //#region color-light-lightness-message
153
- $color-light-lightness-message-fore: 5 !default;
154
- $color-light-lightness-message-back: 70 !default;
155
- $color-light-lightness-message-border: 70 !default;
156
- $color-light-lightness-message-header-fore: 5 !default;
157
- $color-light-lightness-message-header-back: 70 !default;
158
- $color-light-lightness-message-body-fore: 5 !default;
159
- $color-light-lightness-message-body-back: 90 !default;
160
- //#endregion color-light-lightness-card
161
-
162
- //#region color-light-lightness-progress
163
- $color-light-lightness-progress-fore: 70 !default;
164
- $color-light-lightness-progress-back: 95 !default;
165
- //#endregion color-light-lightness-progress
166
-
167
- //#endregion color-light-lightness
168
-
169
- //#region color-dark-lightness
170
-
171
- $color-dark-lightness-fore: 95 !default;
172
- $color-dark-lightness-back: 5 !default;
173
- $color-dark-lightness-border: 50 !default;
174
- $color-dark-lightness-placeholder: 50 !default;
175
- $color-dark-lightness-shadow: 50 !default;
176
-
177
- //#region color-dark-lightness-dot
178
- $color-dark-lightness-dot-fore: 5 !default;
179
- $color-dark-lightness-dot-back: 15 !default;
180
- //#endregion color-dark-lightness-dot
181
-
182
- //#region color-dark-lightness-gingham
183
- $color-dark-lightness-gingham-fore: 5 !default;
184
- $color-dark-lightness-gingham-back: 15 !default;
185
- //#endregion color-dark-lightness-gingham
186
-
187
- //#region color-dark-lightness-rhombus
188
- $color-dark-lightness-rhombus-fore: 5 !default;
189
- $color-dark-lightness-rhombus-back: 15 !default;
190
- //#endregion color-dark-lightness-rhombus
191
-
192
- //#region color-dark-lightness-stripe
193
- $color-dark-lightness-stripe-fore: 5 !default;
194
- $color-dark-lightness-stripe-back: 15 !default;
195
- //#endregion color-dark-lightness-stripe
196
-
197
- //#region color-dark-lightness-zigzag
198
- $color-dark-lightness-zigzag-fore: 5 !default;
199
- $color-dark-lightness-zigzag-back: 15 !default;
200
- //#endregion color-dark-lightness-zigzag
201
-
202
- //#region color-dark-lightness-accordion
203
- $color-dark-lightness-accordion-fore: 95 !default;
204
- $color-dark-lightness-accordion-back: 5 !default;
205
- $color-dark-lightness-accordion-border: 30 !default;
206
- $color-dark-lightness-accordion-summary-fore: 95 !default;
207
- $color-dark-lightness-accordion-summary-back: 30 !default;
208
- $color-dark-lightness-accordion-summary-border: 30 !default;
209
- $color-dark-lightness-accordion-details-fore: 95 !default;
210
- $color-dark-lightness-accordion-details-back: 5 !default;
211
- $color-dark-lightness-accordion-details-border: 30 !default;
212
- //#endregion color-dark-lightness-accordion
213
-
214
- //#region color-light-lightness-badge
215
- $color-dark-lightness-badge-fore: 95 !default;
216
- $color-dark-lightness-badge-back: 15 !default;
217
- $color-dark-lightness-badge-border: 30 !default;
218
- //#endregion color-light-lightness-badge
219
-
220
- //#region color-light-lightness-blockquote
221
- $color-dark-lightness-blockquote-fore: 70 !default;
222
- $color-dark-lightness-blockquote-back: 20 !default;
223
- $color-dark-lightness-blockquote-border: 70 !default;
224
- //#endregion color-light-lightness-blockquote
225
-
226
- //#region color-light-lightness-blockquote
227
- $color-dark-lightness-breadcrumbs-fore: 70 !default;
228
- $color-dark-lightness-breadcrumb-fore: 70 !default;
229
- $color-dark-lightness-breadcrumb-divider-fore: 40 !default;
230
- //#endregion color-light-lightness-blockquote
231
-
232
- //#region color-dark-lightness-button
233
- $color-dark-lightness-button-fore: 95 !default;
234
- $color-dark-lightness-button-back: 30 !default;
235
- $color-dark-lightness-button-border: 30 !default;
236
- $color-dark-lightness-button-shadow: 30 !default;
237
- //#endregion color-dark-lightness-button
238
-
239
- //#region color-dark-lightness-card
240
- $color-dark-lightness-card-fore: 95 !default;
241
- $color-dark-lightness-card-back: 5 !default;
242
- $color-dark-lightness-card-border: 30 !default;
243
- $color-dark-lightness-card-shadow: 30 !default;
244
- $color-dark-lightness-card-header-fore: 95 !default;
245
- $color-dark-lightness-card-header-back: 50 !default;
246
- $color-dark-lightness-card-body-fore: 95 !default;
247
- $color-dark-lightness-card-body-back: 10 !default;
248
- $color-dark-lightness-card-footer-fore: 95 !default;
249
- $color-dark-lightness-card-footer-back: 20 !default;
250
- //#endregion color-dark-lightness-card
251
-
252
- //#region color-dark-lightness-dialogue
253
189
  $color-dark-lightness-dialogue-fore: 95 !default;
254
190
  $color-dark-lightness-dialogue-back: 5 !default;
255
191
  $color-dark-lightness-dialogue-border: 50 !default;
@@ -264,31 +200,75 @@ $color-dark-lightness-dialogue-name-shadow: 50 !default;
264
200
  $color-dark-lightness-dialogue-message-fore: 95 !default;
265
201
  $color-dark-lightness-dialogue-message-back: 5 !default;
266
202
  $color-dark-lightness-dialogue-message-border: 50 !default;
267
- //#endregion color-dark-lightness-dialogue
203
+ //#endregion color-lightness-dialogue
204
+
205
+ //#region color-lightness-figure
206
+ $color-light-lightness-figure-fore: 5 !default;
207
+ $color-light-lightness-figure-back: 70 !default;
208
+ $color-light-lightness-figure-border: 70 !default;
209
+ $color-light-lightness-figure-content-fore: 5 !default;
210
+ $color-light-lightness-figure-content-back: 95 !default;
211
+ $color-light-lightness-figure-caption-fore: 20 !default;
212
+ $color-light-lightness-figure-caption-back: 70 !default;
213
+
214
+ $color-dark-lightness-figure-fore: 95 !default;
215
+ $color-dark-lightness-figure-back: 30 !default;
216
+ $color-dark-lightness-figure-border: 30 !default;
217
+ $color-dark-lightness-figure-content-fore: 95 !default;
218
+ $color-dark-lightness-figure-content-back: 5 !default;
219
+ $color-dark-lightness-figure-caption-fore: 80 !default;
220
+ $color-dark-lightness-figure-caption-back: 30 !default;
221
+ //#endregion color-lightness-figure
222
+
223
+ //#region color-lightness-header
224
+ $color-light-lightness-header-fore: 5 !default;
225
+ $color-light-lightness-header-back: 70 !default;
226
+ $color-light-lightness-header-shadow: 70 !default;
268
227
 
269
- //#region color-dark-lightness-header
270
228
  $color-dark-lightness-header-fore: 95 !default;
271
229
  $color-dark-lightness-header-back: 30 !default;
272
230
  $color-dark-lightness-header-shadow: 30 !default;
273
- //#endregion color-dark-lightness-header
231
+ //#endregion color-lightness-header
232
+
233
+ //#region color-lightness-input
234
+ $color-light-lightness-input-fore: 5 !default;
235
+ $color-light-lightness-input-back: 95 !default;
236
+ $color-light-lightness-input-border: 60 !default;
237
+ $color-light-lightness-input-placeholder: 60 !default;
238
+
239
+ $color-dark-lightness-input-fore: 95 !default;
240
+ $color-dark-lightness-input-back: 5 !default;
241
+ $color-dark-lightness-input-border: 40 !default;
242
+ $color-dark-lightness-input-placeholder: 40 !default;
243
+ //#endregion color-lightness-input
244
+
245
+ //#region color-lightness-label
246
+ $color-light-lightness-label-fore: 65 !default;
274
247
 
275
- //#region color-dark-lightness-label
276
- $color-dark-lightness-label-fore: 70 !default;
277
- //#endregion color-dark-lightness-label
248
+ $color-dark-lightness-label-fore: 65 !default;
249
+ //#endregion color-lightness-label
278
250
 
279
- //#region color-dark-lightness-link
280
- $color-dark-lightness-link-fore: 70 !default;
281
- //#endregion color-dark-lightness-link
251
+ //#region color-lightness-link
252
+ $color-light-lightness-link-fore: 65 !default;
282
253
 
283
- //#region color-dark-lightness-loader
284
- $color-dark-lightness-loader-fore: 70 !default;
285
- //#endregion color-dark-lightness-loader
254
+ $color-dark-lightness-link-fore: 65 !default;
255
+ //#endregion color-lightness-link
286
256
 
287
- //#region color-dark-lightness-progress
288
- $color-dark-lightness-progress-fore: 80 !default;
289
- //#endregion color-dark-lightness-progress
257
+ //#region color-lightness-loader
258
+ $color-light-lightness-loader-fore: 65 !default;
259
+
260
+ $color-dark-lightness-loader-fore: 65 !default;
261
+ //#endregion color-lightness-loader
262
+
263
+ //#region color-lightness-message
264
+ $color-light-lightness-message-fore: 5 !default;
265
+ $color-light-lightness-message-back: 70 !default;
266
+ $color-light-lightness-message-border: 70 !default;
267
+ $color-light-lightness-message-header-fore: 5 !default;
268
+ $color-light-lightness-message-header-back: 70 !default;
269
+ $color-light-lightness-message-body-fore: 5 !default;
270
+ $color-light-lightness-message-body-back: 90 !default;
290
271
 
291
- //#region color-dark-lightness-message
292
272
  $color-dark-lightness-message-fore: 95 !default;
293
273
  $color-dark-lightness-message-back: 5 !default;
294
274
  $color-dark-lightness-message-border: 30 !default;
@@ -296,19 +276,40 @@ $color-dark-lightness-message-header-fore: 95 !default;
296
276
  $color-dark-lightness-message-header-back: 50 !default;
297
277
  $color-dark-lightness-message-body-fore: 95 !default;
298
278
  $color-dark-lightness-message-body-back: 5 !default;
299
- //#endregion color-dark-lightness-card
279
+ //#endregion color-lightness-message
280
+
281
+ //#region color-lightness-nav
282
+ $color-light-lightness-nav-fore: 5 !default;
283
+ $color-light-lightness-nav-back: 95 !default;
284
+ $color-light-lightness-nav-border: 70 !default;
285
+ $color-light-lightness-nav-menu-item-fore: 05 !default;
286
+ $color-light-lightness-nav-menu-item-shadow: 80 !default;
300
287
 
301
- //#region color-light-lightness-progress
302
- $color-dark-lightness-progress-fore: 80 !default;
303
- $color-dark-lightness-progress-back: 5 !default;
304
- //#endregion color-light-lightness-progress
288
+ $color-dark-lightness-nav-fore: 95 !default;
289
+ $color-dark-lightness-nav-back: 5 !default;
290
+ $color-dark-lightness-nav-border: 30 !default;
291
+ $color-dark-lightness-nav-menu-item-fore: 95 !default;
292
+ $color-dark-lightness-nav-menu-item-shadow: 40 !default;
293
+ //#endregion color-lightness-nav
305
294
 
306
- //#endregion color-dark-lightness
295
+ //#region color-lightness-progress
296
+ $color-light-lightness-progress-fore: 65 !default;
297
+ $color-light-lightness-progress-back: 90 !default;
298
+ $color-light-lightness-progress-border: 65 !default;
299
+
300
+ $color-dark-lightness-progress-fore: 65 !default;
301
+ $color-dark-lightness-progress-back: 10 !default;
302
+ $color-dark-lightness-progress-border: 65 !default;
303
+ //#endregion color-lightness-progress
307
304
 
308
305
  //#region color-lightness-offset
309
306
 
310
307
  $color-light-lightness-offset-disabled-fore: 30 !default;
311
308
  $color-dark-lightness-offset-disabled-fore: -30 !default;
309
+ $color-light-lightness-offset-selection-fore: 0 !default;
310
+ $color-dark-lightness-offset-selection-fore: 0 !default;
311
+ $color-light-lightness-offset-selection-back: -25 !default;
312
+ $color-dark-lightness-offset-selection-back: 25 !default;
312
313
  $color-lightness-offset-disabled: 0 !default;
313
314
  $color-lightness-offset-focus: 20 !default;
314
315
  $color-lightness-offset-hover: 5 !default;
@@ -317,1060 +318,1144 @@ $color-lightness-offset-visited: 0 !default;
317
318
 
318
319
  //#endregion color-lightness-offset
319
320
 
320
- //#region colorShadesLight
321
+ //#region colorShades
321
322
 
322
- $colorShadesLight: (
323
+ $colorShades: (
323
324
  //#region plain
324
325
  (
325
326
  name: "plain",
326
- fore: functions.zeroPadding($color-light-lightness-fore, 2),
327
- back: functions.zeroPadding($color-light-lightness-back, 2),
328
- border: functions.zeroPadding($color-light-lightness-border, 2),
329
- placeholder: functions.zeroPadding($color-light-lightness-placeholder, 2),
330
- shadow: functions.zeroPadding($color-light-lightness-shadow, 2),
331
- dot: (
332
- fore: functions.zeroPadding($color-light-lightness-dot-fore, 2),
333
- back: functions.zeroPadding($color-light-lightness-dot-back, 2),
334
- ),
335
- gingham: (
336
- fore: functions.zeroPadding($color-light-lightness-gingham-fore, 2),
337
- back: functions.zeroPadding($color-light-lightness-gingham-back, 2),
338
- ),
339
- rhombus: (
340
- fore: functions.zeroPadding($color-light-lightness-rhombus-fore, 2),
341
- back: functions.zeroPadding($color-light-lightness-rhombus-back, 2),
342
- ),
343
- stripe: (
344
- fore: functions.zeroPadding($color-light-lightness-stripe-fore, 2),
345
- back: functions.zeroPadding($color-light-lightness-stripe-back, 2),
327
+ fore: (
328
+ light: $color-light-lightness-fore,
329
+ dark: $color-dark-lightness-fore,
346
330
  ),
347
- zigzag: (
348
- fore: functions.zeroPadding($color-light-lightness-zigzag-fore, 2),
349
- back: functions.zeroPadding($color-light-lightness-zigzag-back, 2),
331
+ back: (
332
+ light: $color-light-lightness-back,
333
+ dark: $color-dark-lightness-back,
350
334
  ),
351
- accordion: (
352
- fore: functions.zeroPadding($color-light-lightness-accordion-fore, 2),
353
- back: functions.zeroPadding($color-light-lightness-accordion-back, 2),
354
- border:
355
- functions.zeroPadding($color-light-lightness-accordion-border, 2),
356
- accordionSummary: (
357
- fore:
358
- functions.zeroPadding(
359
- $color-light-lightness-accordion-summary-fore,
360
- 2
361
- ),
362
- back:
363
- functions.zeroPadding(
364
- $color-light-lightness-accordion-summary-back,
365
- 2
366
- ),
367
- border:
368
- functions.zeroPadding(
369
- $color-light-lightness-accordion-summary-border,
370
- 2
371
- ),
372
- ),
373
- accordionDetails: (
374
- fore:
375
- functions.zeroPadding(
376
- $color-light-lightness-accordion-details-fore,
377
- 2
378
- ),
379
- back:
380
- functions.zeroPadding(
381
- $color-light-lightness-accordion-details-back,
382
- 2
383
- ),
384
- border:
385
- functions.zeroPadding(
386
- $color-light-lightness-accordion-details-border,
387
- 2
388
- ),
389
- ),
335
+ border: (
336
+ light: $color-light-lightness-border,
337
+ dark: $color-dark-lightness-border,
390
338
  ),
391
- badge: (
392
- fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
393
- back: functions.zeroPadding($color-light-lightness-badge-back, 2),
394
- border: functions.zeroPadding($color-light-lightness-badge-border, 2),
339
+ placeholder: (
340
+ light: $color-light-lightness-placeholder,
341
+ dark: $color-dark-lightness-placeholder,
395
342
  ),
396
- blockquote: (
397
- fore: functions.zeroPadding($color-light-lightness-blockquote-fore, 2),
398
- back: functions.zeroPadding($color-light-lightness-blockquote-back, 2),
399
- border: functions.zeroPadding($color-light-lightness-blockquote-border, 2),
343
+ shadow: (
344
+ light: $color-light-lightness-shadow,
345
+ dark: $color-dark-lightness-shadow,
400
346
  ),
401
- breadcrumbs: (
402
- fore: functions.zeroPadding($color-light-lightness-breadcrumbs-fore, 2),
403
- breadcrumb: (
404
- fore: functions.zeroPadding($color-light-lightness-breadcrumb-fore, 2),
347
+ scrollbar: (
348
+ thumb: (
349
+ light: $color-light-lightness-scrollbar-track,
350
+ dark: $color-dark-lightness-scrollbar-track,
405
351
  ),
406
- breadcrumbDivider: (
407
- fore: functions.zeroPadding($color-light-lightness-breadcrumb-divider-fore, 2),
352
+ track: (
353
+ light: $color-light-lightness-scrollbar-track,
354
+ dark: $color-dark-lightness-scrollbar-track,
408
355
  ),
409
356
  ),
410
- button: (
411
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
412
- back: functions.zeroPadding($color-light-lightness-button-back, 2),
413
- border: functions.zeroPadding($color-light-lightness-button-border, 2),
414
- shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
415
- ),
416
- card: (
417
- fore: functions.zeroPadding($color-light-lightness-card-fore, 2),
418
- back: functions.zeroPadding($color-light-lightness-card-back, 2),
419
- border: functions.zeroPadding($color-light-lightness-card-border, 2),
420
- shadow: functions.zeroPadding($color-light-lightness-card-shadow, 2),
421
- cardHeader: (
422
- fore:
423
- functions.zeroPadding($color-light-lightness-card-header-fore, 2),
424
- back:
425
- functions.zeroPadding($color-light-lightness-card-header-back, 2),
426
- ),
427
- cardBody: (
428
- fore: functions.zeroPadding($color-light-lightness-card-body-fore, 2),
429
- back: functions.zeroPadding($color-light-lightness-card-body-back, 2),
430
- ),
431
- cardFooter: (
432
- fore:
433
- functions.zeroPadding($color-light-lightness-card-footer-fore, 2),
434
- back:
435
- functions.zeroPadding($color-light-lightness-card-footer-back, 2),
357
+ selection: (
358
+ fore: (
359
+ light: $color-light-lightness-fore + $color-light-lightness-offset-selection-fore,
360
+ dark: $color-dark-lightness-fore + $color-dark-lightness-offset-selection-fore,
436
361
  ),
437
- ),
438
- dialogue: (
439
- fore: functions.zeroPadding($color-light-lightness-dialogue-fore, 2),
440
- back: functions.zeroPadding($color-light-lightness-dialogue-back, 2),
441
- border: functions.zeroPadding($color-light-lightness-dialogue-border, 2),
442
- dialogueAvatar: (
443
- fore: functions.zeroPadding($color-light-lightness-dialogue-avatar-fore, 2),
444
- back: functions.zeroPadding($color-light-lightness-dialogue-avatar-back, 2),
445
- border: functions.zeroPadding($color-light-lightness-dialogue-avatar-border, 2),
446
- ),
447
- dialogueName: (
448
- fore: functions.zeroPadding($color-light-lightness-dialogue-name-fore, 2),
449
- back: functions.zeroPadding($color-light-lightness-dialogue-name-back, 2),
450
- border: functions.zeroPadding($color-light-lightness-dialogue-name-border, 2),
451
- shadow: functions.zeroPadding($color-light-lightness-dialogue-name-shadow, 2),
452
- ),
453
- dialogueMessage: (
454
- fore: functions.zeroPadding($color-light-lightness-dialogue-message-fore, 2),
455
- back: functions.zeroPadding($color-light-lightness-dialogue-message-back, 2),
456
- border: functions.zeroPadding($color-light-lightness-dialogue-message-border, 2),
362
+ back: (
363
+ light: $color-light-lightness-back + $color-light-lightness-offset-selection-back,
364
+ dark: $color-dark-lightness-back + $color-dark-lightness-offset-selection-back,
457
365
  ),
458
366
  ),
459
- header: (
460
- fore: functions.zeroPadding($color-light-lightness-header-fore, 2),
461
- back: functions.zeroPadding($color-light-lightness-header-back, 2),
462
- shadow: functions.zeroPadding($color-light-lightness-header-shadow, 2),
463
- ),
464
- label: (
465
- fore: functions.zeroPadding($color-light-lightness-label-fore, 2),
466
- ),
467
- loader: (
468
- fore: functions.zeroPadding($color-light-lightness-loader-fore, 2),
469
- ),
470
- link: (
471
- fore: functions.zeroPadding($color-light-lightness-link-fore, 2),
472
- ),
473
- message: (
474
- fore: functions.zeroPadding($color-light-lightness-message-fore, 2),
475
- back: functions.zeroPadding($color-light-lightness-message-back, 2),
476
- border: functions.zeroPadding($color-light-lightness-message-border, 2),
477
- messageHeader: (
478
- fore:
479
- functions.zeroPadding($color-light-lightness-message-header-fore, 2),
480
- back:
481
- functions.zeroPadding($color-light-lightness-message-header-back, 2),
482
- ),
483
- messageBody: (
484
- fore:
485
- functions.zeroPadding($color-light-lightness-message-body-fore, 2),
486
- back:
487
- functions.zeroPadding($color-light-lightness-message-body-back, 2),
488
- ),
489
- ),
490
- progress: (
491
- fore: functions.zeroPadding($color-light-lightness-progress-fore, 2),
492
- back: functions.zeroPadding($color-light-lightness-progress-back, 2),
493
- ),
494
- ),
495
- //#endregion plain
496
- //#region disabled
497
- (
498
- name: "disabled",
499
- fore:
500
- functions.zeroPadding(
501
- $color-light-lightness-fore +
502
- $color-light-lightness-offset-disabled-fore,
503
- 2
367
+ //#region backgrounds
368
+ //#region dot
369
+ dot: (
370
+ fore: (
371
+ light: $color-light-lightness-dot-fore,
372
+ dark: $color-dark-lightness-dot-fore,
373
+ ),
374
+ back: (
375
+ light: $color-light-lightness-dot-back,
376
+ dark: $color-dark-lightness-dot-back,
377
+ ),
504
378
  ),
505
- back:
506
- functions.zeroPadding(
507
- $color-light-lightness-back + $color-lightness-offset-disabled,
508
- 2
379
+ //#endregion dot
380
+ //#region gingham
381
+ gingham: (
382
+ fore: (
383
+ light: $color-light-lightness-gingham-fore,
384
+ dark: $color-dark-lightness-gingham-fore,
385
+ ),
386
+ back: (
387
+ light: $color-light-lightness-gingham-back,
388
+ dark: $color-dark-lightness-gingham-back,
389
+ ),
509
390
  ),
510
- border:
511
- functions.zeroPadding(
512
- $color-light-lightness-border + $color-lightness-offset-disabled,
513
- 2
391
+ //#endregion gingham
392
+ //#region rhombus
393
+ rhombus: (
394
+ fore: (
395
+ light: $color-light-lightness-rhombus-fore,
396
+ dark: $color-dark-lightness-rhombus-fore,
397
+ ),
398
+ back: (
399
+ light: $color-light-lightness-rhombus-back,
400
+ dark: $color-dark-lightness-rhombus-back,
401
+ ),
514
402
  ),
515
- placeholder:
516
- functions.zeroPadding(
517
- $color-light-lightness-placeholder + $color-lightness-offset-disabled,
518
- 2
403
+ //#endregion rhombus
404
+ //#region stripe
405
+ stripe: (
406
+ fore: (
407
+ light: $color-light-lightness-stripe-fore,
408
+ dark: $color-dark-lightness-stripe-fore,
409
+ ),
410
+ back: (
411
+ light: $color-light-lightness-stripe-back,
412
+ dark: $color-dark-lightness-stripe-back,
413
+ ),
519
414
  ),
520
- shadow:
521
- functions.zeroPadding(
522
- $color-light-lightness-shadow + $color-lightness-offset-disabled,
523
- 2
415
+ //#endregion stripe
416
+ //#region zigzag
417
+ zigzag: (
418
+ fore: (
419
+ light: $color-light-lightness-zigzag-fore,
420
+ dark: $color-dark-lightness-zigzag-fore,
421
+ ),
422
+ back: (
423
+ light: $color-light-lightness-zigzag-back,
424
+ dark: $color-dark-lightness-zigzag-back,
425
+ ),
524
426
  ),
427
+ //#endregion zigzag
428
+ //#endregion backgrounds
429
+ //#region components
430
+ //#region accordion
525
431
  accordion: (
526
- accordionSummary: (
527
- fore:
528
- functions.zeroPadding(
529
- $color-light-lightness-accordion-summary-fore +
530
- $color-light-lightness-offset-disabled-fore,
531
- 2
432
+ fore: (
433
+ light: $color-light-lightness-accordion-fore,
434
+ dark: $color-dark-lightness-accordion-fore,
435
+ ),
436
+ back: (
437
+ light: $color-light-lightness-accordion-back,
438
+ dark: $color-dark-lightness-accordion-back,
439
+ ),
440
+ border: (
441
+ light: $color-light-lightness-accordion-border,
442
+ dark: $color-dark-lightness-accordion-border,
443
+ ),
444
+ accordionSummary: (
445
+ fore: (
446
+ light: $color-light-lightness-accordion-summary-fore,
447
+ dark: $color-dark-lightness-accordion-summary-fore,
532
448
  ),
533
- back:
534
- functions.zeroPadding(
535
- $color-light-lightness-accordion-summary-back +
536
- $color-lightness-offset-disabled,
537
- 2
449
+ back: (
450
+ light: $color-light-lightness-accordion-summary-back,
451
+ dark: $color-dark-lightness-accordion-summary-back,
452
+ ),
453
+ border: (
454
+ light: $color-light-lightness-accordion-summary-border,
455
+ dark: $color-dark-lightness-accordion-summary-border,
456
+ ),
457
+ ),
458
+ accordionDetails: (
459
+ fore: (
460
+ light: $color-light-lightness-accordion-details-fore,
461
+ dark: $color-dark-lightness-accordion-details-fore,
538
462
  ),
539
- border:
540
- functions.zeroPadding(
541
- $color-light-lightness-accordion-summary-border +
542
- $color-lightness-offset-disabled,
543
- 2
463
+ back: (
464
+ light: $color-light-lightness-accordion-details-back,
465
+ dark: $color-dark-lightness-accordion-details-back,
544
466
  ),
467
+ border: (
468
+ light: $color-light-lightness-accordion-details-border,
469
+ dark: $color-dark-lightness-accordion-details-border,
470
+ ),
471
+ ),
545
472
  ),
546
- ),
473
+ //#endregion accordion
474
+ //#region badge
547
475
  badge: (
548
- fore:
549
- functions.zeroPadding(
550
- $color-light-lightness-badge-fore +
551
- $color-light-lightness-offset-disabled-fore,
552
- 2
476
+ fore: (
477
+ light: $color-light-lightness-badge-fore,
478
+ dark: $color-dark-lightness-badge-fore,
553
479
  ),
554
- back:
555
- functions.zeroPadding(
556
- $color-light-lightness-badge-back + $color-lightness-offset-disabled,
557
- 2
480
+ back: (
481
+ light: $color-light-lightness-badge-back,
482
+ dark: $color-dark-lightness-badge-back,
558
483
  ),
559
- border:
560
- functions.zeroPadding(
561
- $color-light-lightness-badge-border +
562
- $color-lightness-offset-disabled,
563
- 2
484
+ border: (
485
+ light: $color-light-lightness-badge-border,
486
+ dark: $color-dark-lightness-badge-border,
564
487
  ),
565
- ),
488
+ ),
489
+ //#endregion badge
490
+ //#region blockquote
491
+ blockquote: (
492
+ fore: (
493
+ light: $color-light-lightness-blockquote-fore,
494
+ dark: $color-dark-lightness-blockquote-fore,
495
+ ),
496
+ back: (
497
+ light: $color-light-lightness-blockquote-back,
498
+ dark: $color-dark-lightness-blockquote-back,
499
+ ),
500
+ border: (
501
+ light: $color-light-lightness-blockquote-border,
502
+ dark: $color-dark-lightness-blockquote-border,
503
+ ),
504
+ ),
505
+ //#endregion blockquote
506
+ //#region breadcrumbs
507
+ breadcrumbs: (
508
+ fore: (
509
+ light: $color-light-lightness-breadcrumbs-fore,
510
+ dark: $color-dark-lightness-breadcrumbs-fore,
511
+ ),
512
+ breadcrumb: (
513
+ fore: (
514
+ light: $color-light-lightness-breadcrumb-fore,
515
+ dark: $color-dark-lightness-breadcrumb-fore,
516
+ ),
517
+ ),
518
+ breadcrumbDivider: (
519
+ fore: (
520
+ light: $color-light-lightness-breadcrumb-divider-fore,
521
+ dark: $color-dark-lightness-breadcrumb-divider-fore,
522
+ ),
523
+ ),
524
+ ),
525
+ //#endregion breadcrumbs
526
+ //#region button
566
527
  button: (
567
- fore:
568
- functions.zeroPadding(
569
- $color-light-lightness-button-fore +
570
- $color-light-lightness-offset-disabled-fore,
571
- 2
528
+ fore: (
529
+ light: $color-light-lightness-button-fore,
530
+ dark: $color-dark-lightness-button-fore,
572
531
  ),
573
- back:
574
- functions.zeroPadding(
575
- $color-light-lightness-button-back +
576
- $color-lightness-offset-disabled,
577
- 2
532
+ back: (
533
+ light: $color-light-lightness-button-back,
534
+ dark: $color-dark-lightness-button-back,
578
535
  ),
579
- border:
580
- functions.zeroPadding(
581
- $color-light-lightness-button-border +
582
- $color-lightness-offset-disabled,
583
- 2
536
+ border: (
537
+ light: $color-light-lightness-button-border,
538
+ dark: $color-dark-lightness-button-border,
584
539
  ),
585
- shadow:
586
- functions.zeroPadding(
587
- $color-light-lightness-button-shadow +
588
- $color-lightness-offset-disabled,
589
- 2
540
+ shadow: (
541
+ light: $color-light-lightness-button-shadow,
542
+ dark: $color-dark-lightness-button-shadow,
590
543
  ),
591
- ),
592
- ),
593
- //#endregion disabled
594
- //#region hover
595
- (
596
- name: "hover",
597
- fore:
598
- functions.zeroPadding(
599
- $color-light-lightness-fore + $color-lightness-offset-hover,
600
- 2
601
- ),
602
- back:
603
- functions.zeroPadding(
604
- $color-light-lightness-back + $color-lightness-offset-hover,
605
- 2
606
- ),
607
- border:
608
- functions.zeroPadding(
609
- $color-light-lightness-border + $color-lightness-offset-hover,
610
- 2
611
- ),
612
- placeholder:
613
- functions.zeroPadding(
614
- $color-light-lightness-placeholder + $color-lightness-offset-hover,
615
- 2
616
- ),
617
- shadow:
618
- functions.zeroPadding(
619
- $color-light-lightness-shadow + $color-lightness-offset-hover,
620
- 2
621
544
  ),
622
- accordion: (
623
- accordionSummary: (
624
- fore:
625
- functions.zeroPadding(
626
- $color-light-lightness-accordion-summary-fore,
627
- 2
545
+ //#endregion button
546
+ //#region card
547
+ card: (
548
+ fore: (
549
+ light: $color-light-lightness-card-fore,
550
+ dark: $color-dark-lightness-card-fore,
551
+ ),
552
+ back: (
553
+ light: $color-light-lightness-card-back,
554
+ dark: $color-dark-lightness-card-back,
555
+ ),
556
+ border: (
557
+ light: $color-light-lightness-card-border,
558
+ dark: $color-dark-lightness-card-border,
559
+ ),
560
+ shadow: (
561
+ light: $color-light-lightness-card-shadow,
562
+ dark: $color-dark-lightness-card-shadow,
563
+ ),
564
+ cardHeader: (
565
+ fore: (
566
+ light: $color-light-lightness-card-header-fore,
567
+ dark: $color-dark-lightness-card-header-fore,
628
568
  ),
629
- back:
630
- functions.zeroPadding(
631
- $color-light-lightness-accordion-summary-back +
632
- $color-lightness-offset-hover,
633
- 2
569
+ back: (
570
+ light: $color-light-lightness-card-header-back,
571
+ dark: $color-dark-lightness-card-header-back,
634
572
  ),
635
- ),
636
- ),
637
- badge: (
638
- fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
639
- back:
640
- functions.zeroPadding(
641
- $color-light-lightness-badge-back + $color-lightness-offset-hover,
642
- 2
643
573
  ),
644
- border:
645
- functions.zeroPadding(
646
- $color-light-lightness-badge-border + $color-lightness-offset-hover,
647
- 2
574
+ cardBody: (
575
+ fore: (
576
+ light: $color-light-lightness-card-body-fore,
577
+ dark: $color-dark-lightness-card-body-fore,
578
+ ),
579
+ back: (
580
+ light: $color-light-lightness-card-body-back,
581
+ dark: $color-dark-lightness-card-body-back,
582
+ ),
648
583
  ),
649
- ),
650
- button: (
651
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
652
- back:
653
- functions.zeroPadding(
654
- $color-light-lightness-button-back + $color-lightness-offset-hover,
655
- 2
656
- ),
657
- border:
658
- functions.zeroPadding(
659
- $color-light-lightness-button-border + $color-lightness-offset-hover,
660
- 2
661
- ),
662
- shadow: "50",
663
- ),
664
- ),
665
- //#endregion hover
666
- //#region focus
667
- (
668
- name: "focus",
669
- fore: functions.zeroPadding($color-light-lightness-fore, 2),
670
- back: functions.zeroPadding($color-light-lightness-back, 2),
671
- border:
672
- functions.zeroPadding(
673
- $color-light-lightness-border + $color-lightness-offset-focus,
674
- 2
675
- ),
676
- placeholder: functions.zeroPadding($color-light-lightness-placeholder, 2),
677
- shadow: functions.zeroPadding($color-light-lightness-shadow, 2),
678
- accordion: (
679
- accordionSummary: (
680
- fore:
681
- functions.zeroPadding(
682
- $color-light-lightness-accordion-summary-fore,
683
- 2
584
+ cardFooter: (
585
+ fore: (
586
+ light: $color-light-lightness-card-footer-fore,
587
+ dark: $color-dark-lightness-card-footer-fore,
684
588
  ),
685
- back:
686
- functions.zeroPadding(
687
- $color-light-lightness-accordion-summary-back,
688
- 2
589
+ back: (
590
+ light: $color-light-lightness-card-footer-back,
591
+ dark: $color-dark-lightness-card-footer-back,
689
592
  ),
593
+ ),
690
594
  ),
691
- ),
692
- badge: (
693
- fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
694
- back: functions.zeroPadding($color-light-lightness-badge-back, 2),
695
- border: functions.zeroPadding($color-light-lightness-badge-border, 2),
696
- ),
697
- button: (
698
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
699
- back: functions.zeroPadding($color-light-lightness-button-back, 2),
700
- border: functions.zeroPadding($color-light-lightness-button-border, 2),
701
- shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
702
- ),
703
- ),
704
- //#endregion focus
705
- //#region active
706
- (
707
- name: "active",
708
- fore:
709
- functions.zeroPadding(
710
- $color-light-lightness-fore + $color-lightness-offset-active,
711
- 2
712
- ),
713
- back:
714
- functions.zeroPadding(
715
- $color-light-lightness-back + $color-lightness-offset-active,
716
- 2
717
- ),
718
- border:
719
- functions.zeroPadding(
720
- $color-light-lightness-border + $color-lightness-offset-active,
721
- 2
722
- ),
723
- placeholder:
724
- functions.zeroPadding(
725
- $color-light-lightness-placeholder + $color-lightness-offset-active,
726
- 2
727
- ),
728
- shadow:
729
- functions.zeroPadding(
730
- $color-light-lightness-shadow + $color-lightness-offset-active,
731
- 2
732
- ),
733
- accordion: (
734
- accordionSummary: (
735
- fore:
736
- functions.zeroPadding(
737
- $color-light-lightness-accordion-summary-fore,
738
- 2
595
+ //#endregion card
596
+ //#region dialogue
597
+ dialogue: (
598
+ fore: (
599
+ light: $color-light-lightness-dialogue-fore,
600
+ dark: $color-dark-lightness-dialogue-fore,
601
+ ),
602
+ back: (
603
+ light: $color-light-lightness-dialogue-back,
604
+ dark: $color-dark-lightness-dialogue-back,
605
+ ),
606
+ border: (
607
+ light: $color-light-lightness-dialogue-border,
608
+ dark: $color-dark-lightness-dialogue-border,
609
+ ),
610
+ dialogueAvatar: (
611
+ fore: (
612
+ light: $color-light-lightness-dialogue-avatar-fore,
613
+ dark: $color-dark-lightness-dialogue-avatar-fore,
739
614
  ),
740
- back:
741
- functions.zeroPadding(
742
- $color-light-lightness-accordion-summary-back +
743
- $color-lightness-offset-active,
744
- 2
615
+ back: (
616
+ light: $color-light-lightness-dialogue-avatar-back,
617
+ dark: $color-dark-lightness-dialogue-avatar-back,
618
+ ),
619
+ border: (
620
+ light: $color-light-lightness-dialogue-avatar-border,
621
+ dark: $color-dark-lightness-dialogue-avatar-border,
745
622
  ),
746
- ),
747
- ),
748
- badge: (
749
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
750
- back:
751
- functions.zeroPadding(
752
- $color-light-lightness-badge-back + $color-lightness-offset-active,
753
- 2
754
623
  ),
755
- border:
756
- functions.zeroPadding(
757
- $color-light-lightness-badge-border + $color-lightness-offset-active,
758
- 2
624
+ dialogueName: (
625
+ fore: (
626
+ light: $color-light-lightness-dialogue-name-fore,
627
+ dark: $color-dark-lightness-dialogue-name-fore,
628
+ ),
629
+ back: (
630
+ light: $color-light-lightness-dialogue-name-back,
631
+ dark: $color-dark-lightness-dialogue-name-back,
632
+ ),
633
+ border: (
634
+ light: $color-light-lightness-dialogue-name-border,
635
+ dark: $color-dark-lightness-dialogue-name-border,
636
+ ),
637
+ shadow: (
638
+ light: $color-light-lightness-dialogue-name-shadow,
639
+ dark: $color-dark-lightness-dialogue-name-shadow,
640
+ ),
759
641
  ),
760
- ),
761
- button: (
762
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
763
- back:
764
- functions.zeroPadding(
765
- $color-light-lightness-button-back + $color-lightness-offset-active,
766
- 2
767
- ),
768
- border:
769
- functions.zeroPadding(
770
- $color-light-lightness-button-border +
771
- $color-lightness-offset-active,
772
- 2
642
+ dialogueMessage: (
643
+ fore: (
644
+ light: $color-light-lightness-dialogue-message-fore,
645
+ dark: $color-dark-lightness-dialogue-message-fore,
646
+ ),
647
+ back: (
648
+ light: $color-light-lightness-dialogue-message-back,
649
+ dark: $color-dark-lightness-dialogue-message-back,
650
+ ),
651
+ border: (
652
+ light: $color-light-lightness-dialogue-message-border,
653
+ dark: $color-dark-lightness-dialogue-message-border,
654
+ ),
773
655
  ),
774
- shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
775
- ),
776
- ),
777
- //#endregion active
778
- //#region visited
779
- (
780
- name: "visited",
781
- fore:
782
- functions.zeroPadding(
783
- $color-light-lightness-fore + $color-lightness-offset-visited,
784
- 2
785
- ),
786
- back:
787
- functions.zeroPadding(
788
- $color-light-lightness-back + $color-lightness-offset-visited,
789
- 2
790
- ),
791
- border:
792
- functions.zeroPadding(
793
- $color-light-lightness-border + $color-lightness-offset-visited,
794
- 2
795
- ),
796
- placeholder:
797
- functions.zeroPadding(
798
- $color-light-lightness-placeholder + $color-lightness-offset-visited,
799
- 2
800
- ),
801
- shadow:
802
- functions.zeroPadding(
803
- $color-light-lightness-shadow + $color-lightness-offset-visited,
804
- 2
805
- ),
806
- badge: (
807
- fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
808
- back: functions.zeroPadding($color-light-lightness-badge-back, 2),
809
- border: functions.zeroPadding($color-light-lightness-badge-border, 2),
810
- ),
811
- button: (
812
- fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
813
- back: functions.zeroPadding($color-light-lightness-button-back, 2),
814
- border: functions.zeroPadding($color-light-lightness-button-border, 2),
815
- shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
816
- ),
817
- link: (
818
- fore:
819
- functions.zeroPadding(
820
- $color-light-lightness-link-fore + $color-lightness-offset-visited,
821
- 2
822
656
  ),
823
- ),
824
- )
825
- //#endregion visited
826
- );
827
-
828
- //#endregion colorShadesLight
829
-
830
- //#region colorShadesDark
831
-
832
- $colorShadesDark: (
833
- //#region plain
834
- (
835
- name: "plain",
836
- fore: functions.zeroPadding($color-dark-lightness-fore, 2),
837
- back: functions.zeroPadding($color-dark-lightness-back, 2),
838
- border: functions.zeroPadding($color-dark-lightness-border, 2),
839
- placeholder: functions.zeroPadding($color-dark-lightness-placeholder, 2),
840
- shadow: functions.zeroPadding($color-dark-lightness-shadow, 2),
841
- dot: (
842
- fore: functions.zeroPadding($color-dark-lightness-dot-fore, 2),
843
- back: functions.zeroPadding($color-dark-lightness-dot-back, 2),
844
- ),
845
- gingham: (
846
- fore: functions.zeroPadding($color-dark-lightness-gingham-fore, 2),
847
- back: functions.zeroPadding($color-dark-lightness-gingham-back, 2),
848
- ),
849
- rhombus: (
850
- fore: functions.zeroPadding($color-dark-lightness-rhombus-fore, 2),
851
- back: functions.zeroPadding($color-dark-lightness-rhombus-back, 2),
852
- ),
853
- stripe: (
854
- fore: functions.zeroPadding($color-dark-lightness-stripe-fore, 2),
855
- back: functions.zeroPadding($color-dark-lightness-stripe-back, 2),
856
- ),
857
- zigzag: (
858
- fore: functions.zeroPadding($color-dark-lightness-zigzag-fore, 2),
859
- back: functions.zeroPadding($color-dark-lightness-zigzag-back, 2),
860
- ),
861
- accordion: (
862
- fore: functions.zeroPadding($color-dark-lightness-accordion-fore, 2),
863
- back: functions.zeroPadding($color-dark-lightness-accordion-back, 2),
864
- border: functions.zeroPadding($color-dark-lightness-accordion-border, 2),
865
- accordionSummary: (
866
- fore:
867
- functions.zeroPadding(
868
- $color-dark-lightness-accordion-summary-fore,
869
- 2
657
+ //#endregion dialogue
658
+ //#region figure
659
+ figure: (
660
+ fore: (
661
+ light: $color-light-lightness-figure-fore,
662
+ dark: $color-dark-lightness-figure-fore,
663
+ ),
664
+ back: (
665
+ light: $color-light-lightness-figure-back,
666
+ dark: $color-dark-lightness-figure-back,
667
+ ),
668
+ border: (
669
+ light: $color-light-lightness-figure-border,
670
+ dark: $color-dark-lightness-figure-border,
671
+ ),
672
+ selection: (
673
+ fore: (
674
+ light: $color-light-lightness-figure-fore + $color-light-lightness-offset-selection-fore,
675
+ dark: $color-dark-lightness-figure-fore + $color-dark-lightness-offset-selection-fore,
870
676
  ),
871
- back:
872
- functions.zeroPadding(
873
- $color-dark-lightness-accordion-summary-back,
874
- 2
677
+ back: (
678
+ light: $color-light-lightness-figure-back + $color-light-lightness-offset-selection-back,
679
+ dark: $color-dark-lightness-figure-back + $color-dark-lightness-offset-selection-back,
875
680
  ),
876
- border:
877
- functions.zeroPadding(
878
- $color-dark-lightness-accordion-summary-border,
879
- 2
681
+ ),
682
+ figureContent: (
683
+ fore: (
684
+ light: $color-light-lightness-figure-content-fore,
685
+ dark: $color-dark-lightness-figure-content-fore,
880
686
  ),
881
- ),
882
- accordionDetails: (
883
- fore:
884
- functions.zeroPadding(
885
- $color-dark-lightness-accordion-details-fore,
886
- 2
687
+ back: (
688
+ light: $color-light-lightness-figure-content-back,
689
+ dark: $color-dark-lightness-figure-content-back,
887
690
  ),
888
- back:
889
- functions.zeroPadding(
890
- $color-dark-lightness-accordion-details-back,
891
- 2
691
+ selection: (
692
+ fore: (
693
+ light: $color-light-lightness-figure-content-fore + $color-light-lightness-offset-selection-fore,
694
+ dark: $color-dark-lightness-figure-content-fore + $color-dark-lightness-offset-selection-fore,
695
+ ),
696
+ back: (
697
+ light: $color-light-lightness-figure-content-back + $color-light-lightness-offset-selection-back,
698
+ dark: $color-dark-lightness-figure-content-back + $color-dark-lightness-offset-selection-back,
699
+ ),
892
700
  ),
893
- border:
894
- functions.zeroPadding(
895
- $color-dark-lightness-accordion-details-border,
896
- 2
701
+ ),
702
+ figureCaption: (
703
+ fore: (
704
+ light: $color-light-lightness-figure-caption-fore,
705
+ dark: $color-dark-lightness-figure-caption-fore,
897
706
  ),
898
- ),
899
- ),
900
- badge: (
901
- fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
902
- back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
903
- border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
904
- ),
905
- blockquote: (
906
- fore: functions.zeroPadding($color-dark-lightness-blockquote-fore, 2),
907
- back: functions.zeroPadding($color-dark-lightness-blockquote-back, 2),
908
- border: functions.zeroPadding($color-dark-lightness-blockquote-border, 2),
707
+ back: (
708
+ light: $color-light-lightness-figure-caption-back,
709
+ dark: $color-dark-lightness-figure-caption-back,
710
+ ),
711
+ selection: (
712
+ fore: (
713
+ light: $color-light-lightness-figure-caption-fore + $color-light-lightness-offset-selection-fore,
714
+ dark: $color-dark-lightness-figure-caption-fore + $color-dark-lightness-offset-selection-fore,
715
+ ),
716
+ back: (
717
+ light: $color-light-lightness-figure-caption-back + $color-light-lightness-offset-selection-back,
718
+ dark: $color-dark-lightness-figure-caption-back + $color-dark-lightness-offset-selection-back,
719
+ ),
720
+ ),
721
+ ),
909
722
  ),
910
- breadcrumbs: (
911
- fore: functions.zeroPadding($color-dark-lightness-breadcrumbs-fore, 2),
912
- breadcrumb: (
913
- fore: functions.zeroPadding($color-dark-lightness-breadcrumb-fore, 2),
914
- ),
915
- breadcrumbDivider: (
916
- fore: functions.zeroPadding($color-dark-lightness-breadcrumb-divider-fore, 2),
723
+ //#endregion figure
724
+ //#region header
725
+ header: (
726
+ fore: (
727
+ light: $color-light-lightness-header-fore,
728
+ dark: $color-dark-lightness-header-fore,
729
+ ),
730
+ back: (
731
+ light: $color-light-lightness-header-back,
732
+ dark: $color-dark-lightness-header-back,
733
+ ),
734
+ shadow: (
735
+ light: $color-light-lightness-header-shadow,
736
+ dark: $color-dark-lightness-header-shadow,
737
+ ),
917
738
  ),
918
- ),
919
- button: (
920
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
921
- back: functions.zeroPadding($color-dark-lightness-button-back, 2),
922
- border: functions.zeroPadding($color-dark-lightness-button-border, 2),
923
- shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
924
- ),
925
- card: (
926
- fore: functions.zeroPadding($color-dark-lightness-card-fore, 2),
927
- back: functions.zeroPadding($color-dark-lightness-card-back, 2),
928
- border: functions.zeroPadding($color-dark-lightness-card-border, 2),
929
- shadow: functions.zeroPadding($color-dark-lightness-card-shadow, 2),
930
- cardHeader: (
931
- fore: functions.zeroPadding($color-dark-lightness-card-header-fore, 2),
932
- back: functions.zeroPadding($color-dark-lightness-card-header-back, 2),
933
- ),
934
- cardBody: (
935
- fore: functions.zeroPadding($color-dark-lightness-card-body-fore, 2),
936
- back: functions.zeroPadding($color-dark-lightness-card-body-back, 2),
937
- ),
938
- cardFooter: (
939
- fore: functions.zeroPadding($color-dark-lightness-card-footer-fore, 2),
940
- back: functions.zeroPadding($color-dark-lightness-card-footer-back, 2),
739
+ //#endregion header
740
+ //#region label
741
+ label: (
742
+ fore: (
743
+ light: $color-light-lightness-label-fore,
744
+ dark: $color-dark-lightness-label-fore,
745
+ ),
941
746
  ),
942
- ),
943
- dialogue: (
944
- fore: functions.zeroPadding($color-dark-lightness-dialogue-fore, 2),
945
- back: functions.zeroPadding($color-dark-lightness-dialogue-back, 2),
946
- border: functions.zeroPadding($color-dark-lightness-dialogue-border, 2),
947
- dialogueAvatar: (
948
- fore: functions.zeroPadding($color-dark-lightness-dialogue-avatar-fore, 2),
949
- back: functions.zeroPadding($color-dark-lightness-dialogue-avatar-back, 2),
950
- border: functions.zeroPadding($color-dark-lightness-dialogue-avatar-border, 2),
951
- ),
952
- dialogueName: (
953
- fore: functions.zeroPadding($color-dark-lightness-dialogue-name-fore, 2),
954
- back: functions.zeroPadding($color-dark-lightness-dialogue-name-back, 2),
955
- border: functions.zeroPadding($color-dark-lightness-dialogue-name-border, 2),
956
- shadow: functions.zeroPadding($color-dark-lightness-dialogue-name-shadow, 2),
957
- ),
958
- dialogueMessage: (
959
- fore: functions.zeroPadding($color-dark-lightness-dialogue-message-fore, 2),
960
- back: functions.zeroPadding($color-dark-lightness-dialogue-message-back, 2),
961
- border: functions.zeroPadding($color-dark-lightness-dialogue-message-border, 2),
747
+ //#endregion label
748
+ //#region loader
749
+ loader: (
750
+ fore: (
751
+ light: $color-light-lightness-loader-fore,
752
+ dark: $color-dark-lightness-loader-fore,
753
+ ),
962
754
  ),
963
- ),
964
- header: (
965
- fore: functions.zeroPadding($color-dark-lightness-header-fore, 2),
966
- back: functions.zeroPadding($color-dark-lightness-header-back, 2),
967
- shadow: functions.zeroPadding($color-dark-lightness-header-shadow, 2),
968
- ),
969
- label: (
970
- fore: functions.zeroPadding($color-dark-lightness-label-fore, 2),
971
- ),
755
+ //#endregion loader
756
+ //#region link
972
757
  link: (
973
- fore: functions.zeroPadding($color-dark-lightness-link-fore, 2),
974
- ),
975
- loader: (
976
- fore: functions.zeroPadding($color-dark-lightness-loader-fore, 2),
977
- ),
758
+ fore: (
759
+ light: $color-light-lightness-link-fore,
760
+ dark: $color-dark-lightness-link-fore,
761
+ ),
762
+ ),
763
+ //#endregion link
764
+ //#region input
765
+ input: (
766
+ fore: (
767
+ light: $color-light-lightness-input-fore,
768
+ dark: $color-dark-lightness-input-fore,
769
+ ),
770
+ back: (
771
+ light: $color-light-lightness-input-back,
772
+ dark: $color-dark-lightness-input-back,
773
+ ),
774
+ border: (
775
+ light: $color-light-lightness-input-border,
776
+ dark: $color-dark-lightness-input-border,
777
+ ),
778
+ placeholder: (
779
+ light: $color-light-lightness-input-placeholder,
780
+ dark: $color-dark-lightness-input-placeholder,
781
+ ),
782
+ ),
783
+ //#endregion input
784
+ //#region message
978
785
  message: (
979
- fore: functions.zeroPadding($color-dark-lightness-message-fore, 2),
980
- back: functions.zeroPadding($color-dark-lightness-message-back, 2),
981
- border: functions.zeroPadding($color-dark-lightness-message-border, 2),
982
- messageHeader: (
983
- fore:
984
- functions.zeroPadding($color-dark-lightness-message-header-fore, 2),
985
- back:
986
- functions.zeroPadding($color-dark-lightness-message-header-back, 2),
987
- ),
988
- messageBody: (
989
- fore:
990
- functions.zeroPadding($color-dark-lightness-message-body-fore, 2),
991
- back:
992
- functions.zeroPadding($color-dark-lightness-message-body-back, 2),
786
+ fore: (
787
+ light: $color-light-lightness-message-fore,
788
+ dark: $color-dark-lightness-message-fore,
789
+ ),
790
+ back: (
791
+ light: $color-light-lightness-message-back,
792
+ dark: $color-dark-lightness-message-back,
793
+ ),
794
+ border: (
795
+ light: $color-light-lightness-message-border,
796
+ dark: $color-dark-lightness-message-border,
797
+ ),
798
+ messageHeader: (
799
+ fore: (
800
+ light: $color-light-lightness-message-header-fore,
801
+ dark: $color-dark-lightness-message-header-fore,
802
+ ),
803
+ back: (
804
+ light: $color-light-lightness-message-header-back,
805
+ dark: $color-dark-lightness-message-header-back,
806
+ ),
807
+ ),
808
+ messageBody: (
809
+ fore: (
810
+ light: $color-light-lightness-message-body-fore,
811
+ dark: $color-dark-lightness-message-body-fore,
812
+ ),
813
+ back: (
814
+ light: $color-light-lightness-message-body-back,
815
+ dark: $color-dark-lightness-message-body-back,
816
+ ),
817
+ ),
993
818
  ),
994
- ),
819
+ //#endregion message
820
+ //#region nav
821
+ nav: (
822
+ fore: (
823
+ light: $color-light-lightness-nav-fore,
824
+ dark: $color-dark-lightness-nav-fore,
825
+ ),
826
+ back: (
827
+ light: $color-light-lightness-nav-back,
828
+ dark: $color-dark-lightness-nav-back,
829
+ ),
830
+ border: (
831
+ light: $color-light-lightness-nav-border,
832
+ dark: $color-dark-lightness-nav-border,
833
+ ),
834
+ navMenu: (
835
+ navMenuItem: (
836
+ fore: (
837
+ light: $color-light-lightness-nav-fore,
838
+ dark: $color-dark-lightness-nav-fore,
839
+ ),
840
+ shadow: (
841
+ light: $color-light-lightness-nav-menu-item-shadow,
842
+ dark: $color-dark-lightness-nav-menu-item-shadow,
843
+ ),
844
+ ),
845
+ ),
846
+ ),
847
+ //#endregion nav
995
848
  progress: (
996
- fore: functions.zeroPadding($color-dark-lightness-progress-fore, 2),
997
- back: functions.zeroPadding($color-dark-lightness-progress-back, 2),
998
- ),
849
+ fore: (
850
+ light: $color-light-lightness-progress-fore,
851
+ dark: $color-dark-lightness-progress-fore,
852
+ ),
853
+ back: (
854
+ light: $color-light-lightness-progress-back,
855
+ dark: $color-dark-lightness-progress-back,
856
+ ),
857
+ border: (
858
+ light: $color-light-lightness-progress-border,
859
+ dark: $color-dark-lightness-progress-border,
860
+ ),
861
+ ),
862
+ //#endregion components
999
863
  ),
1000
864
  //#endregion plain
1001
865
  //#region disabled
1002
866
  (
1003
867
  name: "disabled",
1004
- fore:
1005
- functions.zeroPadding(
1006
- $color-dark-lightness-fore + $color-dark-lightness-offset-disabled-fore,
1007
- 2
1008
- ),
1009
- back:
1010
- functions.zeroPadding(
1011
- $color-dark-lightness-back + $color-lightness-offset-disabled,
1012
- 2
1013
- ),
1014
- border:
1015
- functions.zeroPadding(
1016
- $color-dark-lightness-border + $color-lightness-offset-disabled,
1017
- 2
1018
- ),
1019
- placeholder:
1020
- functions.zeroPadding(
1021
- $color-dark-lightness-placeholder + $color-lightness-offset-disabled,
1022
- 2
1023
- ),
1024
- shadow:
1025
- functions.zeroPadding(
1026
- $color-dark-lightness-shadow + $color-lightness-offset-disabled,
1027
- 2
1028
- ),
868
+ fore: (
869
+ light: $color-light-lightness-fore +
870
+ $color-light-lightness-offset-disabled-fore,
871
+ dark: $color-dark-lightness-fore +
872
+ $color-dark-lightness-offset-disabled-fore,
873
+ ),
874
+ back: (
875
+ light: $color-light-lightness-back + $color-lightness-offset-disabled,
876
+ dark: $color-dark-lightness-back + $color-lightness-offset-disabled,
877
+ ),
878
+ border: (
879
+ light: $color-light-lightness-border + $color-lightness-offset-disabled,
880
+ dark: $color-dark-lightness-border + $color-lightness-offset-disabled,
881
+ ),
882
+ placeholder: (
883
+ light: $color-light-lightness-placeholder +
884
+ $color-lightness-offset-disabled,
885
+ dark: $color-dark-lightness-placeholder +
886
+ $color-lightness-offset-disabled,
887
+ ),
888
+ shadow: (
889
+ light: $color-light-lightness-shadow + $color-lightness-offset-disabled,
890
+ dark: $color-dark-lightness-shadow + $color-lightness-offset-disabled,
891
+ ),
1029
892
  accordion: (
1030
893
  accordionSummary: (
1031
- fore:
1032
- functions.zeroPadding(
1033
- $color-dark-lightness-accordion-summary-fore +
894
+ fore: (
895
+ light: $color-light-lightness-accordion-summary-fore +
896
+ $color-light-lightness-offset-disabled-fore,
897
+ dark: $color-dark-lightness-accordion-summary-fore +
1034
898
  $color-dark-lightness-offset-disabled-fore,
1035
- 2
1036
- ),
1037
- back:
1038
- functions.zeroPadding(
1039
- $color-dark-lightness-accordion-summary-back +
1040
- $color-lightness-offset-disabled,
1041
- 2
1042
- ),
1043
- border:
1044
- functions.zeroPadding(
1045
- $color-dark-lightness-accordion-summary-border +
1046
- $color-lightness-offset-disabled,
1047
- 2
1048
- ),
1049
- ),
1050
- ),
1051
- badge: (
1052
- fore:
1053
- functions.zeroPadding(
1054
- $color-dark-lightness-badge-fore +
1055
- $color-dark-lightness-offset-disabled-fore,
1056
- 2
1057
899
  ),
1058
- back:
1059
- functions.zeroPadding(
1060
- $color-dark-lightness-badge-back + $color-lightness-offset-disabled,
1061
- 2
900
+ back: (
901
+ light: $color-light-lightness-accordion-summary-back +
902
+ $color-lightness-offset-disabled,
903
+ dark: $color-dark-lightness-accordion-summary-back +
904
+ $color-lightness-offset-disabled,
1062
905
  ),
1063
- border:
1064
- functions.zeroPadding(
1065
- $color-dark-lightness-badge-border +
906
+ border: (
907
+ light: $color-light-lightness-accordion-summary-border +
908
+ $color-lightness-offset-disabled,
909
+ dark: $color-dark-lightness-accordion-summary-border +
1066
910
  $color-lightness-offset-disabled,
1067
- 2
1068
911
  ),
912
+ ),
1069
913
  ),
1070
- button: (
1071
- fore:
1072
- functions.zeroPadding(
1073
- $color-dark-lightness-button-fore +
914
+ badge: (
915
+ fore: (
916
+ light: $color-light-lightness-badge-fore +
917
+ $color-light-lightness-offset-disabled-fore,
918
+ dark: $color-dark-lightness-badge-fore +
1074
919
  $color-dark-lightness-offset-disabled-fore,
1075
- 2
920
+ ),
921
+ back: (
922
+ light: $color-light-lightness-badge-back +
923
+ $color-lightness-offset-disabled,
924
+ dark: $color-dark-lightness-badge-back +
925
+ $color-lightness-offset-disabled,
926
+ ),
927
+ border: (
928
+ light: $color-light-lightness-badge-border +
929
+ $color-lightness-offset-disabled,
930
+ dark: $color-dark-lightness-badge-border +
931
+ $color-lightness-offset-disabled,
932
+ ),
933
+ ),
934
+ //#region button
935
+ button: (
936
+ fore: (
937
+ light: $color-light-lightness-button-fore +
938
+ $color-light-lightness-offset-disabled-fore,
939
+ dark: $color-dark-lightness-button-fore +
940
+ $color-dark-lightness-offset-disabled-fore,
1076
941
  ),
1077
- back:
1078
- functions.zeroPadding(
1079
- $color-dark-lightness-button-back + $color-lightness-offset-disabled,
1080
- 2
942
+ back: (
943
+ light: $color-light-lightness-button-back +
944
+ $color-lightness-offset-disabled,
945
+ dark: $color-dark-lightness-button-back +
946
+ $color-lightness-offset-disabled,
1081
947
  ),
1082
- border:
1083
- functions.zeroPadding(
1084
- $color-dark-lightness-button-border +
948
+ border: (
949
+ light: $color-light-lightness-button-border +
950
+ $color-lightness-offset-disabled,
951
+ dark: $color-dark-lightness-button-border +
1085
952
  $color-lightness-offset-disabled,
1086
- 2
1087
953
  ),
1088
- shadow:
1089
- functions.zeroPadding(
1090
- $color-dark-lightness-button-shadow +
954
+ shadow: (
955
+ light: $color-light-lightness-button-shadow +
956
+ $color-lightness-offset-disabled,
957
+ dark: $color-dark-lightness-button-shadow +
1091
958
  $color-lightness-offset-disabled,
1092
- 2
1093
959
  ),
1094
- ),
960
+ ),
961
+ //#endregion button
962
+ //#region nav
963
+ nav: (
964
+ navMenu: (
965
+ navMenuItem: (
966
+ fore: (
967
+ light: $color-light-lightness-nav-fore +
968
+ $color-light-lightness-offset-disabled-fore,
969
+ dark: $color-dark-lightness-nav-fore +
970
+ $color-light-lightness-offset-disabled-fore,
971
+ ),
972
+ shadow: (
973
+ light: $color-light-lightness-nav-menu-item-shadow +
974
+ $color-lightness-offset-disabled,
975
+ dark: $color-dark-lightness-nav-menu-item-shadow +
976
+ $color-lightness-offset-disabled,
977
+ ),
978
+ ),
979
+ ),
980
+ ),
981
+ //#endregion nav
1095
982
  ),
1096
983
  //#endregion disabled
1097
984
  //#region hover
1098
985
  (
1099
986
  name: "hover",
1100
- fore:
1101
- functions.zeroPadding(
1102
- $color-dark-lightness-fore + $color-lightness-offset-hover,
1103
- 2
1104
- ),
1105
- back:
1106
- functions.zeroPadding(
1107
- $color-dark-lightness-back + $color-lightness-offset-hover,
1108
- 2
1109
- ),
1110
- border:
1111
- functions.zeroPadding(
1112
- $color-dark-lightness-border + $color-lightness-offset-hover,
1113
- 2
1114
- ),
1115
- placeholder:
1116
- functions.zeroPadding(
1117
- $color-dark-lightness-placeholder + $color-lightness-offset-hover,
1118
- 2
1119
- ),
1120
- shadow:
1121
- functions.zeroPadding(
1122
- $color-dark-lightness-shadow + $color-lightness-offset-hover,
1123
- 2
1124
- ),
987
+ fore: (
988
+ light: $color-light-lightness-fore + $color-lightness-offset-hover,
989
+ dark: $color-dark-lightness-fore + $color-lightness-offset-hover,
990
+ ),
991
+ back: (
992
+ light: $color-light-lightness-back + $color-lightness-offset-hover,
993
+ dark: $color-dark-lightness-back + $color-lightness-offset-hover,
994
+ ),
995
+ border: (
996
+ light: $color-light-lightness-border + $color-lightness-offset-hover,
997
+ dark: $color-dark-lightness-border + $color-lightness-offset-hover,
998
+ ),
999
+ placeholder: (
1000
+ light: $color-light-lightness-placeholder +
1001
+ $color-lightness-offset-hover,
1002
+ dark: $color-dark-lightness-placeholder + $color-lightness-offset-hover,
1003
+ ),
1004
+ shadow: (
1005
+ light: $color-light-lightness-shadow + $color-lightness-offset-hover,
1006
+ dark: $color-dark-lightness-shadow + $color-lightness-offset-hover,
1007
+ ),
1125
1008
  accordion: (
1126
1009
  accordionSummary: (
1127
- fore:
1128
- functions.zeroPadding(
1129
- $color-dark-lightness-accordion-summary-fore,
1130
- 2
1131
- ),
1132
- back:
1133
- functions.zeroPadding(
1134
- $color-dark-lightness-accordion-summary-back +
1135
- $color-lightness-offset-hover,
1136
- 2
1137
- ),
1010
+ fore: (
1011
+ light: $color-light-lightness-accordion-summary-fore +
1012
+ $color-lightness-offset-hover,
1013
+ dark: $color-dark-lightness-accordion-summary-fore +
1014
+ $color-lightness-offset-hover,
1015
+ ),
1016
+ back: (
1017
+ light: $color-light-lightness-accordion-summary-back +
1018
+ $color-lightness-offset-hover,
1019
+ dark: $color-dark-lightness-accordion-summary-back +
1020
+ $color-lightness-offset-hover,
1021
+ ),
1022
+ border: (
1023
+ light: $color-light-lightness-accordion-summary-border +
1024
+ $color-lightness-offset-hover,
1025
+ dark: $color-dark-lightness-accordion-summary-border +
1026
+ $color-lightness-offset-hover,
1027
+ ),
1138
1028
  ),
1139
1029
  ),
1140
1030
  badge: (
1141
- fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
1142
- back:
1143
- functions.zeroPadding(
1144
- $color-dark-lightness-badge-back + $color-lightness-offset-hover,
1145
- 2
1146
- ),
1147
- border:
1148
- functions.zeroPadding(
1149
- $color-dark-lightness-badge-border + $color-lightness-offset-hover,
1150
- 2
1151
- ),
1031
+ fore: (
1032
+ light: $color-light-lightness-badge-fore,
1033
+ dark: $color-dark-lightness-badge-fore + $color-lightness-offset-hover,
1034
+ ),
1035
+ back: (
1036
+ light: $color-light-lightness-badge-back +
1037
+ $color-lightness-offset-hover,
1038
+ dark: $color-dark-lightness-badge-back + $color-lightness-offset-hover,
1039
+ ),
1040
+ border: (
1041
+ light: $color-light-lightness-badge-border +
1042
+ $color-lightness-offset-hover,
1043
+ dark: $color-dark-lightness-badge-border +
1044
+ $color-lightness-offset-hover,
1045
+ ),
1152
1046
  ),
1153
1047
  button: (
1154
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
1155
- back:
1156
- functions.zeroPadding(
1157
- $color-dark-lightness-button-back + $color-lightness-offset-hover,
1158
- 2
1159
- ),
1160
- border:
1161
- functions.zeroPadding(
1162
- $color-dark-lightness-button-border + $color-lightness-offset-hover,
1163
- 2
1164
- ),
1165
- shadow: "50",
1166
- ),
1048
+ fore: (
1049
+ light: $color-light-lightness-button-fore +
1050
+ $color-lightness-offset-hover,
1051
+ dark: $color-dark-lightness-button-fore +
1052
+ $color-lightness-offset-hover,
1053
+ ),
1054
+ back: (
1055
+ light: $color-light-lightness-button-back +
1056
+ $color-lightness-offset-hover,
1057
+ dark: $color-dark-lightness-button-back +
1058
+ $color-lightness-offset-hover,
1059
+ ),
1060
+ border: (
1061
+ light: $color-light-lightness-button-border +
1062
+ $color-lightness-offset-hover,
1063
+ dark: $color-dark-lightness-button-border +
1064
+ $color-lightness-offset-hover,
1065
+ ),
1066
+ shadow: (
1067
+ light: $color-light-lightness-button-shadow +
1068
+ $color-lightness-offset-hover,
1069
+ dark: $color-dark-lightness-button-shadow +
1070
+ $color-lightness-offset-hover,
1071
+ ),
1072
+ ),
1073
+ //#region nav
1074
+ nav: (
1075
+ navMenu: (
1076
+ navMenuItem: (
1077
+ fore: (
1078
+ light: $color-light-lightness-nav-fore +
1079
+ $color-lightness-offset-hover,
1080
+ dark: $color-dark-lightness-nav-fore +
1081
+ $color-lightness-offset-hover,
1082
+ ),
1083
+ shadow: (
1084
+ light: $color-light-lightness-nav-menu-item-shadow +
1085
+ $color-lightness-offset-hover,
1086
+ dark: $color-dark-lightness-nav-menu-item-shadow +
1087
+ $color-lightness-offset-hover,
1088
+ ),
1089
+ ),
1090
+ ),
1091
+ ),
1092
+ //#endregion nav
1167
1093
  ),
1168
1094
  //#endregion hover
1169
1095
  //#region focus
1170
1096
  (
1171
1097
  name: "focus",
1172
- fore: functions.zeroPadding($color-dark-lightness-fore, 2),
1173
- back: functions.zeroPadding($color-dark-lightness-back, 2),
1174
- border:
1175
- functions.zeroPadding(
1176
- $color-dark-lightness-border + $color-lightness-offset-focus,
1177
- 2
1178
- ),
1179
- placeholder: functions.zeroPadding($color-dark-lightness-placeholder, 2),
1180
- shadow: functions.zeroPadding($color-dark-lightness-shadow, 2),
1098
+ fore: (
1099
+ light: $color-light-lightness-fore + $color-lightness-offset-focus,
1100
+ dark: $color-dark-lightness-fore + $color-lightness-offset-focus,
1101
+ ),
1102
+ back: (
1103
+ light: $color-light-lightness-back + $color-lightness-offset-focus,
1104
+ dark: $color-dark-lightness-back + $color-lightness-offset-focus,
1105
+ ),
1106
+ border: (
1107
+ light: $color-light-lightness-border + $color-lightness-offset-focus,
1108
+ dark: $color-dark-lightness-border + $color-lightness-offset-focus,
1109
+ ),
1110
+ placeholder: (
1111
+ light: $color-light-lightness-placeholder +
1112
+ $color-lightness-offset-focus,
1113
+ dark: $color-dark-lightness-placeholder + $color-lightness-offset-focus,
1114
+ ),
1115
+ shadow: (
1116
+ light: $color-light-lightness-shadow + $color-lightness-offset-focus,
1117
+ dark: $color-dark-lightness-shadow + $color-lightness-offset-focus,
1118
+ ),
1181
1119
  accordion: (
1182
1120
  accordionSummary: (
1183
- fore: "95",
1184
- back: "30",
1185
- border: "50",
1121
+ fore: (
1122
+ light: $color-light-lightness-accordion-summary-fore,
1123
+ dark: $color-dark-lightness-accordion-summary-fore,
1124
+ ),
1125
+ back: (
1126
+ light: $color-light-lightness-accordion-summary-back,
1127
+ dark: $color-dark-lightness-accordion-summary-back,
1128
+ ),
1129
+ border: (
1130
+ light: $color-light-lightness-accordion-summary-border,
1131
+ dark: $color-dark-lightness-accordion-summary-border,
1132
+ ),
1186
1133
  ),
1187
1134
  ),
1188
1135
  badge: (
1189
- fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
1190
- back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
1191
- border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
1136
+ fore: (
1137
+ light: $color-light-lightness-badge-fore,
1138
+ dark: $color-dark-lightness-badge-fore,
1139
+ ),
1140
+ back: (
1141
+ light: $color-light-lightness-badge-back,
1142
+ dark: $color-dark-lightness-badge-back,
1143
+ ),
1144
+ border: (
1145
+ light: $color-light-lightness-badge-border,
1146
+ dark: $color-dark-lightness-badge-border,
1147
+ ),
1192
1148
  ),
1193
1149
  button: (
1194
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
1195
- back: functions.zeroPadding($color-dark-lightness-button-back, 2),
1196
- border: functions.zeroPadding($color-dark-lightness-button-border, 2),
1197
- shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
1150
+ fore: (
1151
+ light: $color-light-lightness-button-fore,
1152
+ dark: $color-dark-lightness-button-fore,
1153
+ ),
1154
+ back: (
1155
+ light: $color-light-lightness-button-back,
1156
+ dark: $color-dark-lightness-button-back,
1157
+ ),
1158
+ border: (
1159
+ light: $color-light-lightness-button-border,
1160
+ dark: $color-dark-lightness-button-border,
1161
+ ),
1162
+ shadow: (
1163
+ light: $color-light-lightness-button-shadow,
1164
+ dark: $color-dark-lightness-button-shadow,
1165
+ ),
1198
1166
  ),
1167
+ //#region input
1168
+ input: (
1169
+ back: (
1170
+ light: $color-light-lightness-input-back,
1171
+ dark: $color-dark-lightness-input-back,
1172
+ ),
1173
+ border: (
1174
+ light: $color-light-lightness-input-border +
1175
+ $color-lightness-offset-focus,
1176
+ dark: $color-dark-lightness-input-border +
1177
+ $color-lightness-offset-focus,
1178
+ ),
1179
+ ),
1180
+ //#endregion input
1181
+ //#region nav
1182
+ nav: (
1183
+ navMenu: (
1184
+ navMenuItem: (
1185
+ fore: (
1186
+ light: $color-light-lightness-nav-fore,
1187
+ dark: $color-dark-lightness-nav-fore,
1188
+ ),
1189
+ shadow: (
1190
+ light: $color-light-lightness-nav-menu-item-shadow,
1191
+ dark: $color-dark-lightness-nav-menu-item-shadow,
1192
+ ),
1193
+ ),
1194
+ ),
1195
+ ),
1196
+ //#endregion nav
1199
1197
  ),
1200
1198
  //#endregion focus
1201
1199
  //#region active
1202
1200
  (
1203
1201
  name: "active",
1204
- fore:
1205
- functions.zeroPadding(
1206
- $color-dark-lightness-fore + $color-lightness-offset-active,
1207
- 2
1208
- ),
1209
- back:
1210
- functions.zeroPadding(
1211
- $color-dark-lightness-back + $color-lightness-offset-active,
1212
- 2
1213
- ),
1214
- border:
1215
- functions.zeroPadding(
1216
- $color-dark-lightness-border + $color-lightness-offset-active,
1217
- 2
1218
- ),
1219
- placeholder:
1220
- functions.zeroPadding(
1221
- $color-dark-lightness-placeholder + $color-lightness-offset-active,
1222
- 2
1223
- ),
1224
- shadow:
1225
- functions.zeroPadding(
1226
- $color-dark-lightness-shadow + $color-lightness-offset-active,
1227
- 2
1228
- ),
1202
+ fore: (
1203
+ light: $color-light-lightness-fore + $color-lightness-offset-active,
1204
+ dark: $color-dark-lightness-fore + $color-lightness-offset-active,
1205
+ ),
1206
+ back: (
1207
+ light: $color-light-lightness-back + $color-lightness-offset-active,
1208
+ dark: $color-dark-lightness-back + $color-lightness-offset-active,
1209
+ ),
1210
+ border: (
1211
+ light: $color-light-lightness-border + $color-lightness-offset-active,
1212
+ dark: $color-dark-lightness-border + $color-lightness-offset-active,
1213
+ ),
1214
+ placeholder: (
1215
+ light: $color-light-lightness-placeholder +
1216
+ $color-lightness-offset-active,
1217
+ dark: $color-dark-lightness-placeholder + $color-lightness-offset-active,
1218
+ ),
1219
+ shadow: (
1220
+ light: $color-light-lightness-shadow + $color-lightness-offset-active,
1221
+ dark: $color-dark-lightness-shadow + $color-lightness-offset-active,
1222
+ ),
1229
1223
  accordion: (
1230
1224
  accordionSummary: (
1231
- fore:
1232
- functions.zeroPadding(
1233
- $color-dark-lightness-accordion-summary-fore,
1234
- 2
1235
- ),
1236
- back:
1237
- functions.zeroPadding(
1238
- $color-dark-lightness-accordion-summary-back +
1239
- $color-lightness-offset-active,
1240
- 2
1241
- ),
1225
+ fore: (
1226
+ light: $color-light-lightness-accordion-summary-fore +
1227
+ $color-lightness-offset-active,
1228
+ dark: $color-dark-lightness-accordion-summary-fore +
1229
+ $color-lightness-offset-active,
1230
+ ),
1231
+ back: (
1232
+ light: $color-light-lightness-accordion-summary-back +
1233
+ $color-lightness-offset-active,
1234
+ dark: $color-dark-lightness-accordion-summary-back +
1235
+ $color-lightness-offset-active,
1236
+ ),
1242
1237
  ),
1243
1238
  ),
1244
1239
  badge: (
1245
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
1246
- back:
1247
- functions.zeroPadding(
1248
- $color-dark-lightness-badge-back + $color-lightness-offset-active,
1249
- 2
1250
- ),
1251
- border:
1252
- functions.zeroPadding(
1253
- $color-dark-lightness-badge-border + $color-lightness-offset-active,
1254
- 2
1255
- ),
1240
+ fore: (
1241
+ light: $color-light-lightness-badge-fore,
1242
+ dark: $color-dark-lightness-badge-fore,
1243
+ ),
1244
+ back: (
1245
+ light: $color-light-lightness-badge-back +
1246
+ $color-lightness-offset-active,
1247
+ dark: $color-dark-lightness-badge-back +
1248
+ $color-lightness-offset-active,
1249
+ ),
1250
+ border: (
1251
+ light: $color-light-lightness-badge-border +
1252
+ $color-lightness-offset-active,
1253
+ dark: $color-dark-lightness-badge-border +
1254
+ $color-lightness-offset-active,
1255
+ ),
1256
1256
  ),
1257
1257
  button: (
1258
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
1259
- back:
1260
- functions.zeroPadding(
1261
- $color-dark-lightness-button-back + $color-lightness-offset-active,
1262
- 2
1263
- ),
1264
- border:
1265
- functions.zeroPadding(
1266
- $color-dark-lightness-button-border + $color-lightness-offset-active,
1267
- 2
1268
- ),
1269
- shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
1270
- ),
1258
+ fore: (
1259
+ light: $color-light-lightness-button-fore,
1260
+ dark: $color-dark-lightness-button-fore,
1261
+ ),
1262
+ back: (
1263
+ light: $color-light-lightness-button-back +
1264
+ $color-lightness-offset-active,
1265
+ dark: $color-dark-lightness-button-back +
1266
+ $color-lightness-offset-active,
1267
+ ),
1268
+ border: (
1269
+ light: $color-light-lightness-button-border +
1270
+ $color-lightness-offset-active,
1271
+ dark: $color-dark-lightness-button-border +
1272
+ $color-lightness-offset-active,
1273
+ ),
1274
+ shadow: (
1275
+ light: $color-light-lightness-button-shadow +
1276
+ $color-lightness-offset-active,
1277
+ dark: $color-dark-lightness-button-shadow +
1278
+ $color-lightness-offset-active,
1279
+ ),
1280
+ ),
1281
+ //#region nav
1282
+ nav: (
1283
+ navMenu: (
1284
+ navMenuItem: (
1285
+ fore: (
1286
+ light: $color-light-lightness-nav-fore +
1287
+ $color-lightness-offset-active,
1288
+ dark: $color-dark-lightness-nav-fore +
1289
+ $color-lightness-offset-active,
1290
+ ),
1291
+ shadow: (
1292
+ light: $color-light-lightness-nav-menu-item-shadow +
1293
+ $color-lightness-offset-active,
1294
+ dark: $color-dark-lightness-nav-menu-item-shadow +
1295
+ $color-lightness-offset-active,
1296
+ ),
1297
+ ),
1298
+ ),
1299
+ ),
1300
+ //#endregion nav
1271
1301
  ),
1272
1302
  //#endregion active
1273
1303
  //#region visited
1274
1304
  (
1275
1305
  name: "visited",
1276
- fore:
1277
- functions.zeroPadding(
1278
- $color-dark-lightness-fore + $color-lightness-offset-visited,
1279
- 2
1280
- ),
1281
- back:
1282
- functions.zeroPadding(
1283
- $color-dark-lightness-back + $color-lightness-offset-visited,
1284
- 2
1285
- ),
1286
- border:
1287
- functions.zeroPadding(
1288
- $color-dark-lightness-border + $color-lightness-offset-visited,
1289
- 2
1290
- ),
1291
- placeholder:
1292
- functions.zeroPadding(
1293
- $color-dark-lightness-placeholder + $color-lightness-offset-visited,
1294
- 2
1295
- ),
1296
- shadow:
1297
- functions.zeroPadding(
1298
- $color-dark-lightness-shadow + $color-lightness-offset-visited,
1299
- 2
1300
- ),
1306
+ fore: (
1307
+ light: $color-light-lightness-fore + $color-lightness-offset-visited,
1308
+ dark: $color-dark-lightness-fore + $color-lightness-offset-visited,
1309
+ ),
1310
+ back: (
1311
+ light: $color-light-lightness-back + $color-lightness-offset-visited,
1312
+ dark: $color-dark-lightness-back + $color-lightness-offset-visited,
1313
+ ),
1314
+ border: (
1315
+ light: $color-light-lightness-border + $color-lightness-offset-visited,
1316
+ dark: $color-dark-lightness-border + $color-lightness-offset-visited,
1317
+ ),
1318
+ placeholder: (
1319
+ light: $color-light-lightness-placeholder +
1320
+ $color-lightness-offset-visited,
1321
+ dark: $color-dark-lightness-placeholder +
1322
+ $color-lightness-offset-visited,
1323
+ ),
1324
+ shadow: (
1325
+ light: $color-light-lightness-shadow + $color-lightness-offset-visited,
1326
+ dark: $color-dark-lightness-shadow + $color-lightness-offset-visited,
1327
+ ),
1301
1328
  badge: (
1302
- fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
1303
- back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
1304
- border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
1329
+ fore: (
1330
+ light: $color-light-lightness-badge-fore,
1331
+ dark: $color-dark-lightness-badge-fore,
1332
+ ),
1333
+ back: (
1334
+ light: $color-light-lightness-badge-back,
1335
+ dark: $color-dark-lightness-badge-back,
1336
+ ),
1337
+ border: (
1338
+ light: $color-light-lightness-badge-border,
1339
+ dark: $color-dark-lightness-badge-border,
1340
+ ),
1305
1341
  ),
1306
1342
  button: (
1307
- fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
1308
- back: functions.zeroPadding($color-dark-lightness-button-back, 2),
1309
- border: functions.zeroPadding($color-dark-lightness-button-border, 2),
1310
- shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
1343
+ fore: (
1344
+ light: $color-light-lightness-button-fore,
1345
+ dark: $color-dark-lightness-button-fore,
1346
+ ),
1347
+ back: (
1348
+ light: $color-light-lightness-button-back,
1349
+ dark: $color-dark-lightness-button-back,
1350
+ ),
1351
+ border: (
1352
+ light: $color-light-lightness-button-border,
1353
+ dark: $color-dark-lightness-button-border,
1354
+ ),
1355
+ shadow: (
1356
+ light: $color-light-lightness-button-shadow,
1357
+ dark: $color-dark-lightness-button-shadow,
1358
+ ),
1311
1359
  ),
1312
1360
  link: (
1313
- fore:
1314
- functions.zeroPadding(
1315
- $color-dark-lightness-link-fore + $color-lightness-offset-visited,
1316
- 2
1317
- ),
1361
+ fore: (
1362
+ light: $color-light-lightness-link-fore +
1363
+ $color-lightness-offset-visited,
1364
+ dark: $color-dark-lightness-link-fore +
1365
+ $color-lightness-offset-visited,
1366
+ ),
1318
1367
  ),
1319
- )
1320
- //#endregion visited
1368
+ ) //#endregion visited
1321
1369
  );
1322
1370
 
1323
- //#endregion colorShadesDark
1324
-
1325
- //#endregion define color shades array
1371
+ //#endregion colorShades
1326
1372
 
1327
1373
  //#region define colorNames array
1328
1374
 
1329
1375
  $colors: (
1330
1376
  (
1331
- "name": "gray",
1332
- "hue": $color-hue-gray,
1377
+ name: "gray",
1378
+ hue: $color-hue-gray,
1333
1379
  ),
1334
1380
  (
1335
- "name": "red",
1336
- "hue": $color-hue-red,
1381
+ name: "red",
1382
+ hue: $color-hue-red,
1337
1383
  ),
1338
1384
  (
1339
- "name": "coral",
1340
- "hue": $color-hue-coral,
1385
+ name: "coral",
1386
+ hue: $color-hue-coral,
1341
1387
  ),
1342
1388
  (
1343
- "name": "orange",
1344
- "hue": $color-hue-orange,
1389
+ name: "orange",
1390
+ hue: $color-hue-orange,
1345
1391
  ),
1346
1392
  (
1347
- "name": "yellow",
1348
- "hue": $color-hue-yellow,
1393
+ name: "yellow",
1394
+ hue: $color-hue-yellow,
1395
+ ),
1396
+ (
1397
+ name: "lime",
1398
+ hue: $color-hue-lime,
1399
+ ),
1400
+ (
1401
+ name: "green",
1402
+ hue: $color-hue-green,
1403
+ ),
1404
+ (
1405
+ name: "cyan",
1406
+ hue: $color-hue-cyan,
1407
+ ),
1408
+ (
1409
+ name: "blue",
1410
+ hue: $color-hue-blue,
1411
+ ),
1412
+ (
1413
+ name: "violet",
1414
+ hue: $color-hue-violet,
1415
+ ),
1416
+ (
1417
+ name: "magenta",
1418
+ hue: $color-hue-magenta,
1419
+ )
1420
+ ) !default;
1421
+
1422
+ $semanticColors: (
1423
+ (
1424
+ name: "primary",
1425
+ colorName: "violet",
1426
+ lightnessOffset: 0,
1349
1427
  ),
1350
1428
  (
1351
- "name": "lime",
1352
- "hue": $color-hue-lime,
1429
+ name: "secondary",
1430
+ colorName: "gray",
1431
+ lightnessOffset: -10,
1353
1432
  ),
1354
1433
  (
1355
- "name": "green",
1356
- "hue": $color-hue-green,
1434
+ name: "tertiary",
1435
+ colorName: "gray",
1436
+ lightnessOffset: -20,
1357
1437
  ),
1358
1438
  (
1359
- "name": "cyan",
1360
- "hue": $color-hue-cyan,
1439
+ name: "info",
1440
+ colorName: "blue",
1441
+ lightnessOffset: 0,
1361
1442
  ),
1362
1443
  (
1363
- "name": "blue",
1364
- "hue": $color-hue-blue,
1444
+ name: "success",
1445
+ colorName: "green",
1446
+ lightnessOffset: 0,
1365
1447
  ),
1366
1448
  (
1367
- "name": "violet",
1368
- "hue": $color-hue-violet,
1449
+ name: "warning",
1450
+ colorName: "yellow",
1451
+ lightnessOffset: 0,
1369
1452
  ),
1370
1453
  (
1371
- "name": "magenta",
1372
- "hue": $color-hue-magenta,
1454
+ name: "danger",
1455
+ colorName: "red",
1456
+ lightnessOffset: 0,
1373
1457
  )
1374
1458
  ) !default;
1375
1459
 
1460
+ $allColors: list.join($colors, $semanticColors);
1376
1461
  //#endregion define colorNames array