diff options
Diffstat (limited to 'src/index.scss')
-rw-r--r-- | src/index.scss | 84 |
1 files changed, 19 insertions, 65 deletions
diff --git a/src/index.scss b/src/index.scss index 813764c..24b8d72 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -1,71 +1,25 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'functions'; |
2 | @use 'include-media/dist/include-media' as media; | ||
3 | 2 | ||
4 | @import 'vars'; | 3 | @use 'vars'; |
5 | @import 'general'; | ||
6 | 4 | ||
7 | @import 'layouts/card'; | 5 | @use 'base'; |
8 | @import 'layouts/container'; | ||
9 | 6 | ||
10 | @import 'objects/icon'; | 7 | @use 'layouts/card'; |
11 | @import 'objects/heading'; | 8 | @use 'layouts/container'; |
12 | @import 'objects/rule'; | ||
13 | @import 'objects/button'; | ||
14 | @import 'objects/text-field'; | ||
15 | @import 'objects/field-label'; | ||
16 | @import 'objects/radio'; | ||
17 | @import 'objects/checkbox'; | ||
18 | @import 'objects/switch'; | ||
19 | @import 'objects/action-button'; | ||
20 | @import 'objects/status-indicator'; | ||
21 | @import 'objects/avatar'; | ||
22 | 9 | ||
23 | @import 'layouts/form'; | 10 | @use 'objects/icon'; |
11 | @use 'objects/heading'; | ||
12 | @use 'objects/rule'; | ||
13 | @use 'objects/button'; | ||
14 | @use 'objects/text-field'; | ||
15 | @use 'objects/field-label'; | ||
16 | @use 'objects/radio'; | ||
17 | @use 'objects/checkbox'; | ||
18 | @use 'objects/switch'; | ||
19 | @use 'objects/action-button'; | ||
20 | @use 'objects/status-indicator'; | ||
21 | @use 'objects/avatar'; | ||
24 | 22 | ||
25 | :root { | 23 | @use 'layouts/form'; |
26 | @include iro.props-assign('dims'); | ||
27 | 24 | ||
28 | @each $breakpoint in map-keys(media.$breakpoints) { | 25 | @use 'apply-vars'; |
29 | @include media.media('<=#{$breakpoint}') { | ||
30 | @include iro.props-assign($breakpoint); | ||
31 | } | ||
32 | } | ||
33 | |||
34 | @include iro.props-assign('colors'); | ||
35 | @include iro.props-assign('palette-light'); | ||
36 | |||
37 | @media (prefers-color-scheme: dark) { | ||
38 | @include iro.props-assign('palette-dark'); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | @include iro.bem-theme('raised') { | ||
43 | @include iro.props-assign('colors'); | ||
44 | @include iro.props-assign('palette-light-raised'); | ||
45 | |||
46 | @media (prefers-color-scheme: dark) { | ||
47 | @include iro.props-assign('palette-dark-raised'); | ||
48 | } | ||
49 | } | ||
50 | |||
51 | @include iro.bem-theme('grayscale') { | ||
52 | @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); | ||
53 | } | ||
54 | |||
55 | /*@media (prefers-color-scheme: dark) { | ||
56 | @include iro.props-assign('dark'); | ||
57 | @include iro.props-assign('dark-palette'); | ||
58 | |||
59 | @include iro.bem-theme('grayscale') { | ||
60 | @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); | ||
61 | } | ||
62 | |||
63 | @include iro.bem-theme('raised') { | ||
64 | @include iro.props-assign('dark-raised-palette'); | ||
65 | @include iro.props-assign('dark'); | ||
66 | |||
67 | @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { | ||
68 | @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); | ||
69 | } | ||
70 | } | ||
71 | }*/ | ||