summaryrefslogtreecommitdiffstats
path: root/src/_vars.scss
blob: c315438f18d25e3cf5d47fa7eb3b0974b6525795 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
@use 'iro-sass/src/index' as iro;
@use 'include-media/dist/include-media' as media;

iro.$vars-root-size: 16px;

media.$breakpoints: (
    md: 40rem,
    sm: 28rem
);

media.$unit-intervals: (
    'px':  1,
    'em':  .01,
    'rem': .01,
    '':    0
);

//

$font--main: (
    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
    line-height: 1.5
);

$font--headline: (
    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
    line-height: 1.2,
    weight:      700,
);

$line-height: map-get($font--main, line-height);

//

@include iro.fn-execute {
    $primary-accent-base: hsl(222, 49.8%, 52.4%);
    $error-accent-base:   hsl(352, 49.8%, 52.4%);
    $success-accent-base: hsl(113, 49.8%, 39.6%);

    @include iro.props-store((
        --dims: (
            --spacing: (
                --base: 1.6rem,
                --factors: (
                    --xs: .25,
                    --sm: .5,
                    --md: 1,
                    --lg: 1.5,
                    --xl: 2,
                ),
                --x: (
                    --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
                    --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
                    --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
                ),
                --y: (
                    --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)),
                    --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
                    --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
                    --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
                    --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)),
                ),
            ),

            --font-size: (
                --xs:   iro.fn-px-to-rem(11px),
                --sm:   iro.fn-px-to-rem(13px),
                --md:   iro.fn-px-to-rem(14px),
                --lg:   iro.fn-px-to-rem(16px),
                --xl:   iro.fn-px-to-rem(18px),
                --xxl:  iro.fn-px-to-rem(22px),
                --xxxl: iro.fn-px-to-rem(28px),
            ),

            --border-width: (
                --thick:  4px,
                --medium: 2px,
                --thin:   1px,
            ),

            --focus-outline-width: 3px,

            --paragraph: (
                --margin-top: iro.props-get(--dims --spacing --y --sm, null),
            ),

            --list: (
                --indent: 3rem,
            ),
        ),
        
        --colors: (
            --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
            --bg-hi:  iro.props-get(--colors --gray2, null), // Lighter background
            --bg:     iro.props-get(--colors --gray3, null), // Background

            --obj-hi: iro.props-get(--colors --gray4, null),
            --obj:    iro.props-get(--colors --gray5, null),
            --obj-lo: iro.props-get(--colors --gray6, null),

            --fg-hi3: iro.props-get(--colors --gray7, null),  // Disabled text
            --fg-hi2: iro.props-get(--colors --gray8, null),  // Placeholder text
            --fg-hi:  iro.props-get(--colors --gray9, null),  // Faint text
            --fg:     iro.props-get(--colors --gray10, null), // Text
            --fg-lo:  iro.props-get(--colors --gray11, null), // Strong text

            --accent: (
                --primary-const-hi:        scale-color($primary-accent-base, $lightness: 15%),
                --primary-const:           $primary-accent-base,
                --primary-const-lo:        scale-color($primary-accent-base, $lightness: -15%),
                --primary-const-lo2:       scale-color($primary-accent-base, $lightness: -25%),
                --primary-const-semi:      rgba($primary-accent-base, .4),
                --primary-const-selection: rgba($primary-accent-base, .99),
                --primary-const-fg:        #fff,

                --primary-hi:   iro.props-get(--colors --accent --primary-const-hi, null),
                --primary:      iro.props-get(--colors --accent --primary-const, null),
                --primary-lo:   iro.props-get(--colors --accent --primary-const-lo, null),
                --primary-lo2:  iro.props-get(--colors --accent --primary-const-lo2, null),
                --primary-fg:   iro.props-get(--colors --accent --primary-const-fg, null),

                --error-hi:   scale-color($error-accent-base, $lightness: 15%),
                --error:      $error-accent-base,
                --error-lo:   scale-color($error-accent-base, $lightness: -15%),
                --error-lo2:  scale-color($error-accent-base, $lightness: -25%),
                --error-fg:   #fff,

                --success-hi:   scale-color($success-accent-base, $lightness: 15%),
                --success:      $success-accent-base,
                --success-lo:   scale-color($success-accent-base, $lightness: -15%),
                --success-lo2:  scale-color($success-accent-base, $lightness: -25%),
                --success-fg:   #fff,
            ),

            --grayscale-accent: (
                --primary-hi:  iro.props-get(--colors --fg-hi2, null),
                --primary:     iro.props-get(--colors --fg-hi, null),
                --primary-lo:  iro.props-get(--colors --fg, null),
                --primary-lo2: iro.props-get(--colors --fg-lo, null),
                --primary-fg:  #fff,
            ),

            --selection: (
                --bg:     iro.props-get(--colors --accent --primary-const-selection, null),
                --bg-img: iro.props-get(--colors --accent --primary-const-semi, null),
                --fg:     iro.props-get(--colors --accent --primary-const-fg, null),
            ),

            --focus: (
                --shadow:    0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null),
                --fill:      iro.props-get(--colors --accent --primary-const, null),
                --text:      iro.props-get(--colors --accent --primary-const-lo, null),
                --fill-text: iro.props-get(--colors --accent --primary-const-fg, null),
            ),
        ),
    ));

    @include iro.props-store((
        --colors: (
            --gray1:  hsl(210, 0%, 100%), // 1.11
            --gray2:  hsl(210, 0%, 98%),  // 1.07
            --gray3:  hsl(210, 0%, 95%),  // 1
            --gray4:  hsl(210, 0%, 90%),  // 1.11
            --gray5:  hsl(210, 0%, 87%),  // 1.2
            --gray6:  hsl(210, 0%, 78%),  // 1.51
            --gray7:  hsl(210, 0%, 69%),  // 1.93
            --gray8:  hsl(210, 0%, 55%),  // 3
            --gray9:  hsl(210, 0%, 38%),  // 5.53
            --gray10: hsl(210, 0%, 19%),  // 11.78
            --gray11: hsl(210, 0%, 0%),   // 18.75
        )
    ), 'light-palette');

    @include iro.props-store((
        --colors: (
            --gray1:  hsl(210, 0%, 100%), // 1
            --gray2:  hsl(210, 0%, 100%), // 1
            --gray3:  hsl(210, 0%, 100%), // 1
            --gray4:  hsl(210, 0%, 95%),  // 1.11
            --gray5:  hsl(210, 0%, 92%),  // 1.19
            --gray6:  hsl(210, 0%, 82%),  // 1.52
            --gray7:  hsl(210, 0%, 73%),  // 1.94
            --gray8:  hsl(210, 0%, 58%),  // 3.03
            --gray9:  hsl(210, 0%, 41%),  // 5.48
            --gray10: hsl(210, 0%, 22%),  // 11.72
            --gray11: hsl(210, 0%, 0%),   // 21
        )
    ), 'light-raised-palette');
}

//

@include iro.fn-execute {
    @include iro.fn-execute {
        @include iro.props-store((
            --colors: ()
        ), 'dark');
    }

    @include iro.fn-execute {
        @include iro.props-store((
            --colors: ()
        ), 'dark-palette');
    }
    
    @include iro.fn-execute {
        @include iro.props-store((
            --colors: ()
        ), 'dark-raised-palette');
    }
}

//

@each $breakpoint in map-keys(media.$breakpoints) {
    @include media.media('<=#{$breakpoint}') {
        @include iro.props-store((
            --colors: ()
        ), $breakpoint);
    }
}