summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 09:36:00 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 09:36:00 +0100
commit62c3ca9a9f51a8bbca93e5e003d5feb052806a2f (patch)
treeaa67b5f409be9e318a6b55b12250699848bc2ae0 /src
downloadiro-design-62c3ca9a9f51a8bbca93e5e003d5feb052806a2f.tar.gz
iro-design-62c3ca9a9f51a8bbca93e5e003d5feb052806a2f.tar.bz2
iro-design-62c3ca9a9f51a8bbca93e5e003d5feb052806a2f.zip
Init
Diffstat (limited to 'src')
-rw-r--r--src/_vars.scss202
-rw-r--r--src/index.scss19
2 files changed, 221 insertions, 0 deletions
diff --git a/src/_vars.scss b/src/_vars.scss
new file mode 100644
index 0000000..5a6c1d0
--- /dev/null
+++ b/src/_vars.scss
@@ -0,0 +1,202 @@
1@use 'iro-sass/src/index' as iro;
2
3iro.$vars-root-size: 16px;
4
5$breakpoints: (
6 md: 40rem,
7 sm: 28rem
8);
9
10$unit-intervals: (
11 'px': 1,
12 'em': .01,
13 'rem': .01,
14 '': 0
15);
16
17//
18
19$font--main: (
20 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
21 line-height: 1.5
22);
23
24$font--headline: (
25 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
26 line-height: 1.2,
27 weight: 700,
28);
29
30$line-height: map-get($font--main, line-height);
31
32//
33
34$theme-light: (
35 --gray1: hsl(210, 0%, 100%), // 1.11
36 --gray2: hsl(210, 0%, 98%), // 1.07
37 --gray3: hsl(210, 0%, 95%), // 1
38 --gray4: hsl(210, 0%, 90%), // 1.11
39 --gray5: hsl(210, 0%, 87%), // 1.2
40 --gray6: hsl(210, 0%, 78%), // 1.51
41 --gray7: hsl(210, 0%, 69%), // 1.93
42 --gray8: hsl(210, 0%, 55%), // 3
43 --gray9: hsl(210, 0%, 38%), // 5.53
44 --gray10: hsl(210, 0%, 19%), // 11.78
45 --gray11: hsl(210, 0%, 0%), // 18.75
46);
47
48$theme-lighter: (
49 --gray1: hsl(210, 0%, 100%), // 1
50 --gray2: hsl(210, 0%, 100%), // 1
51 --gray3: hsl(210, 0%, 100%), // 1
52 --gray4: hsl(210, 0%, 95%), // 1.11
53 --gray5: hsl(210, 0%, 92%), // 1.19
54 --gray6: hsl(210, 0%, 82%), // 1.52
55 --gray7: hsl(210, 0%, 73%), // 1.94
56 --gray8: hsl(210, 0%, 58%), // 3.03
57 --gray9: hsl(210, 0%, 41%), // 5.48
58 --gray10: hsl(210, 0%, 22%), // 11.72
59 --gray11: hsl(210, 0%, 0%), // 21
60);
61
62//
63
64@include iro.fn-execute {
65 $primary-accent-base: hsl(222, 49.8%, 52.4%);
66 $error-accent-base: hsl(352, 49.8%, 52.4%);
67 $success-accent-base: hsl(113, 49.8%, 39.6%);
68
69 @include iro.props-store((
70 --dims: (
71 --spacing: (
72 --base: 1.6rem,
73 --factors: (
74 --xs: .25,
75 --sm: .5,
76 --md: 1,
77 --lg: 1.5,
78 --xl: 2,
79 ),
80 --x: (
81 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
82 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
83 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
84 ),
85 --y: (
86 --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)),
87 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
88 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
89 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
90 --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)),
91 ),
92 ),
93
94 --font-size: (
95 --xs: iro.fn-px-to-rem(11px),
96 --sm: iro.fn-px-to-rem(13px),
97 --md: iro.fn-px-to-rem(14px),
98 --lg: iro.fn-px-to-rem(16px),
99 --xl: iro.fn-px-to-rem(18px),
100 --xxl: iro.fn-px-to-rem(22px),
101 --xxxl: iro.fn-px-to-rem(28px),
102 ),
103
104 --border-width: (
105 --thick: 4px,
106 --medium: 2px,
107 --thin: 1px,
108 ),
109
110 --focus-outline-width: 3px,
111
112 --paragraph: (
113 --margin-top: iro.props-get(--dims --spacing --y --sm, null),
114 ),
115
116 --list: (
117 --indent: 3rem,
118 ),
119 ),
120
121 --colors: (
122 --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
123 --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background
124 --bg: iro.props-get(--colors --gray3, null), // Background
125
126 --obj-hi: iro.props-get(--colors --gray4, null),
127 --obj: iro.props-get(--colors --gray5, null),
128 --obj-lo: iro.props-get(--colors --gray6, null),
129
130 --fg-hi3: iro.props-get(--colors --gray7, null), // Disabled text
131 --fg-hi2: iro.props-get(--colors --gray8, null), // Placeholder text
132 --fg-hi: iro.props-get(--colors --gray9, null), // Faint text
133 --fg: iro.props-get(--colors --gray10, null), // Text
134 --fg-lo: iro.props-get(--colors --gray11, null), // Strong text
135
136 --accent: (
137 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%),
138 --primary-const: $primary-accent-base,
139 --primary-const-lo: scale-color($primary-accent-base, $lightness: -15%),
140 --primary-const-lo2: scale-color($primary-accent-base, $lightness: -25%),
141 --primary-const-semi: rgba($primary-accent-base, .4),
142 --primary-const-selection: rgba($primary-accent-base, .99),
143 --primary-const-fg: #fff,
144
145 --primary-hi: iro.props-get(--colors --accent --primary-const-hi, null),
146 --primary: iro.props-get(--colors --accent --primary-const, null),
147 --primary-lo: iro.props-get(--colors --accent --primary-const-lo, null),
148 --primary-lo2: iro.props-get(--colors --accent --primary-const-lo2, null),
149 --primary-fg: iro.props-get(--colors --accent --primary-const-fg, null),
150
151 --error-hi: scale-color($error-accent-base, $lightness: 15%),
152 --error: $error-accent-base,
153 --error-lo: scale-color($error-accent-base, $lightness: -15%),
154 --error-lo2: scale-color($error-accent-base, $lightness: -25%),
155 --error-fg: #fff,
156
157 --success-hi: scale-color($success-accent-base, $lightness: 15%),
158 --success: $success-accent-base,
159 --success-lo: scale-color($success-accent-base, $lightness: -15%),
160 --success-lo2: scale-color($success-accent-base, $lightness: -25%),
161 --success-fg: #fff,
162 ),
163
164 --grayscale-accent: (
165 --primary-hi: iro.props-get(--colors --fg-hi2, null),
166 --primary: iro.props-get(--colors --fg-hi, null),
167 --primary-lo: iro.props-get(--colors --fg, null),
168 --primary-lo2: iro.props-get(--colors --fg-lo, null),
169 --primary-fg: #fff,
170 ),
171
172 --selection: (
173 --bg: iro.props-get(--colors --accent --primary-const-selection, null),
174 --bg-img: iro.props-get(--colors --accent --primary-const-semi, null),
175 --fg: iro.props-get(--colors --accent --primary-const-fg, null),
176 ),
177
178 --focus: (
179 --shadow: 0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null),
180 --fill: iro.props-get(--colors --accent --primary-const, null),
181 --text: iro.props-get(--colors --accent --primary-const-lo, null),
182 --fill-text: iro.props-get(--colors --accent --primary-const-fg, null),
183 ),
184 ),
185 ));
186}
187
188//
189
190@include iro.fn-execute {
191 @include iro.props-store((), 'dark');
192}
193
194//
195
196@each $breakpoint in map-keys($breakpoints) {
197 @include media('<=#{$breakpoint}') {
198 @include iro.props-store((
199 --colors: ()
200 ), $breakpoint);
201 }
202}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..dc71caa
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,19 @@
1@use 'iro-sass/src/props';
2
3@import 'include-media/dist/include-media';
4
5@import 'vars';
6
7:root {
8 @include props.assign;
9
10 @each $breakpoint in map-keys($breakpoints) {
11 @include media('<=#{$breakpoint}') {
12 @include props.assign($breakpoint);
13 }
14 }
15
16 @media (prefers-color-scheme: dark) {
17 @include props.assign('dark');
18 }
19}