summaryrefslogtreecommitdiffstats
path: root/src/_vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 11:58:14 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 11:58:14 +0100
commit55ec90a5c6ad6f652c73f6d73869300eb1aceb8c (patch)
treea5d6d986cda03cead1b728fa8311710e79c83aaf /src/_vars.scss
parentColor adjustments (diff)
downloadiro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.gz
iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.bz2
iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.zip
Restructuring
Diffstat (limited to 'src/_vars.scss')
-rw-r--r--src/_vars.scss221
1 files changed, 0 insertions, 221 deletions
diff --git a/src/_vars.scss b/src/_vars.scss
deleted file mode 100644
index d2fbc10..0000000
--- a/src/_vars.scss
+++ /dev/null
@@ -1,221 +0,0 @@
1@use 'sass:map';
2@use 'iro-sass/src/index' as iro;
3@use 'include-media/dist/include-media' as media;
4@use '@oddbird/blend';
5@use 'functions' as fn;
6
7iro.$vars-root-size: 16px;
8
9media.$breakpoints: (
10 md: 40rem,
11 sm: 28rem
12);
13
14media.$unit-intervals: (
15 'px': 1,
16 'em': .01,
17 'rem': .01,
18 '': 0
19);
20
21$grays: ();
22
23@for $i from 0 through 100 {
24 $grays: append($grays, blend.lch($i * 1% 0 0));
25}
26
27$wanted-grays: (
28 -1.25,
29 -1.1,
30 1,
31 1.15,
32 1.37,
33 1.73,
34 2.4,
35 3.26,
36 5,
37 11,
38 21,
39);
40
41@function accent-palette($base, $dir: 1) {
42 @return (
43 --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
44 --main: $base,
45 --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
46 --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
47 --semi: rgba($base, .4),
48 --selection: rgba($base, .99),
49 --fg: blend.contrast($base),
50 );
51}
52
53@function gray-palette($lightness) {
54 $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays);
55
56 $palette: ();
57
58 @for $i from 1 through length($colors) {
59 $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i))));
60 }
61
62 @return $palette;
63}
64
65//
66
67@include iro.props-store((
68 --dims: (
69 --spacing: (
70 --base: iro.fn-px-to-rem(24px),
71 --factors: (
72 --xxs: .125,
73 --xs: .25,
74 --sm: .5,
75 --md: 1,
76 --lg: 1.5,
77 --xl: 2,
78 --xxl: 2.5,
79 ),
80 --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
81 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
82 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
83 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
84 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
85 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
86 --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
87 ),
88
89 --font: (
90 --standard: (
91 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
92 --line-height: 1.5,
93 ),
94 --headline: (
95 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
96 --line-height: 1.2,
97 --weight: 700,
98 )
99 ),
100
101 --font-size: (
102 --xs: iro.fn-px-to-rem(11px),
103 --sm: iro.fn-px-to-rem(13px),
104 --md: iro.fn-px-to-rem(14px),
105 --lg: iro.fn-px-to-rem(16px),
106 --xl: iro.fn-px-to-rem(18px),
107 --xxl: iro.fn-px-to-rem(22px),
108 --xxxl: iro.fn-px-to-rem(28px),
109 ),
110
111 --border-width: (
112 --thick: 4px,
113 --medium: 2px,
114 --thin: 1px,
115 ),
116
117 --focus-outline-width: 3px,
118
119 --paragraph: (
120 --margin-top: fn.dim(--spacing --sm, null),
121 ),
122
123 --list: (
124 --indent: 3rem,
125 ),
126 ),
127), 'dims');
128
129//
130
131@include iro.fn-execute {
132 @include iro.props-store((
133 --colors: (
134 --gray-h: 220,
135 --gray-s: 5%,
136
137 --bg-hi2: fn.color(--gray1, null), // Lightest background
138 --bg-hi: fn.color(--gray2, null), // Lighter background
139 --bg: fn.color(--gray3, null), // Background
140
141 --obj-hi: fn.color(--gray4, null),
142 --obj: fn.color(--gray5, null),
143 --obj-lo: fn.color(--gray6, null),
144
145 --fg-hi3: fn.color(--gray7, null), // Disabled text
146 --fg-hi2: fn.color(--gray8, null), // Placeholder text
147 --fg-hi: fn.color(--gray9, null), // Faint text
148 --fg: fn.color(--gray10, null), // Text
149 --fg-lo: fn.color(--gray11, null), // Strong text
150
151 --accent: (
152 --blue: accent-palette(blend.lch(48% 50 279)),
153 --red: accent-palette(blend.lch(48% 50 23)),
154 --green: accent-palette(blend.lch(58% 50 141)),
155 --yellow: accent-palette(blend.lch(73% 50 90)),
156
157 --primary: iro.props-ref('colors', --colors --accent --blue),
158 --error: iro.props-ref('colors', --colors --accent --red),
159 --success: iro.props-ref('colors', --colors --accent --green),
160 ),
161
162 --selection: (
163 --bg: fn.color(--accent --primary --selection, null),
164 --bg-img: fn.color(--accent --primary --semi, null),
165 --fg: fn.color(--accent --primary --fg, null),
166 ),
167
168 --focus: (
169 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
170 --fill: fn.color(--accent --primary --main, null),
171 --text: fn.color(--accent --primary --lo, null),
172 --fill-text: fn.color(--accent --primary --fg, null),
173 ),
174 ),
175 ), 'colors');
176
177 @include iro.props-store((
178 --colors: gray-palette(94%)
179 ), 'palette-light');
180
181 @include iro.props-store((
182 --colors: gray-palette(100%)
183 ), 'palette-light-raised');
184}
185
186//
187
188@include iro.fn-execute {
189 @include iro.props-store((
190 --colors: (
191 --accent: (
192 --blue: accent-palette(blend.lch(58% 60 279), -1),
193 --red: accent-palette(blend.lch(58% 60 23), -1),
194 --green: accent-palette(blend.lch(68% 60 141), -1),
195 --yellow: accent-palette(blend.lch(83% 60 90), -1),
196
197 --primary: iro.props-ref('colors-dark', --colors --accent --blue),
198 --error: iro.props-ref('colors-dark', --colors --accent --red),
199 --success: iro.props-ref('colors-dark', --colors --accent --green),
200 ),
201 )
202 ), 'colors-dark');
203
204 @include iro.props-store((
205 --colors: gray-palette(9%)
206 ), 'palette-dark');
207
208 @include iro.props-store((
209 --colors: gray-palette(16%)
210 ), 'palette-dark-raised');
211}
212
213//
214
215@each $breakpoint in map-keys(media.$breakpoints) {
216 @include media.media('<=#{$breakpoint}') {
217 @include iro.props-store((
218 --colors: ()
219 ), $breakpoint);
220 }
221}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 03:10:53 +0000