summaryrefslogtreecommitdiffstats
path: root/src/_vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
commit3524f1bac11c8a9d1640bfeac5ceb063ff96d623 (patch)
tree52907b3161045c2d24bba18442c1ece9c12986a6 /src/_vars.scss
parentUpdated action button (diff)
downloadiro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.gz
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.bz2
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.zip
Improved variable structure
Diffstat (limited to 'src/_vars.scss')
-rw-r--r--src/_vars.scss191
1 files changed, 95 insertions, 96 deletions
diff --git a/src/_vars.scss b/src/_vars.scss
index c315438..c79b917 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,5 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use 'functions' as fn;
3 4
4iro.$vars-root-size: 16px; 5iro.$vars-root-size: 16px;
5 6
@@ -32,77 +33,81 @@ $line-height: map-get($font--main, line-height);
32 33
33// 34//
34 35
35@include iro.fn-execute { 36@include iro.props-store((
36 $primary-accent-base: hsl(222, 49.8%, 52.4%); 37 --dims: (
37 $error-accent-base: hsl(352, 49.8%, 52.4%); 38 --spacing: (
38 $success-accent-base: hsl(113, 49.8%, 39.6%); 39 --base: 1.6rem,
39 40 --factors: (
40 @include iro.props-store(( 41 --xs: .25,
41 --dims: ( 42 --sm: .5,
42 --spacing: ( 43 --md: 1,
43 --base: 1.6rem, 44 --lg: 1.5,
44 --factors: ( 45 --xl: 2,
45 --xs: .25,
46 --sm: .5,
47 --md: 1,
48 --lg: 1.5,
49 --xl: 2,
50 ),
51 --x: (
52 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
53 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
54 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
55 ),
56 --y: (
57 --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)),
58 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
59 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
60 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
61 --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)),
62 ),
63 ), 46 ),
64 47 --x: (
65 --font-size: ( 48 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
66 --xs: iro.fn-px-to-rem(11px), 49 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
67 --sm: iro.fn-px-to-rem(13px), 50 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
68 --md: iro.fn-px-to-rem(14px),
69 --lg: iro.fn-px-to-rem(16px),
70 --xl: iro.fn-px-to-rem(18px),
71 --xxl: iro.fn-px-to-rem(22px),
72 --xxxl: iro.fn-px-to-rem(28px),
73 ), 51 ),
74 52 --y: (
75 --border-width: ( 53 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
76 --thick: 4px, 54 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
77 --medium: 2px, 55 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
78 --thin: 1px, 56 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
57 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
79 ), 58 ),
59 ),
60
61 --font-size: (
62 --xs: iro.fn-px-to-rem(11px),
63 --sm: iro.fn-px-to-rem(13px),
64 --md: iro.fn-px-to-rem(14px),
65 --lg: iro.fn-px-to-rem(16px),
66 --xl: iro.fn-px-to-rem(18px),
67 --xxl: iro.fn-px-to-rem(22px),
68 --xxxl: iro.fn-px-to-rem(28px),
69 ),
80 70
81 --focus-outline-width: 3px, 71 --border-width: (
72 --thick: 4px,
73 --medium: 2px,
74 --thin: 1px,
75 ),
82 76
83 --paragraph: ( 77 --focus-outline-width: 3px,
84 --margin-top: iro.props-get(--dims --spacing --y --sm, null),
85 ),
86 78
87 --list: ( 79 --paragraph: (
88 --indent: 3rem, 80 --margin-top: fn.dim(--spacing --y --sm, null),
89 ), 81 ),
82
83 --list: (
84 --indent: 3rem,
90 ), 85 ),
91 86 ),
87), 'dims');
88
89//
90
91@include iro.fn-execute {
92 $primary-accent-base: hsl(222, 49.8%, 52.4%);
93 $error-accent-base: hsl(352, 49.8%, 52.4%);
94 $success-accent-base: hsl(113, 49.8%, 39.6%);
95
96 @include iro.props-store((
92 --colors: ( 97 --colors: (
93 --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background 98 --bg-hi2: fn.color(--gray1, null), // Lightest background
94 --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background 99 --bg-hi: fn.color(--gray2, null), // Lighter background
95 --bg: iro.props-get(--colors --gray3, null), // Background 100 --bg: fn.color(--gray3, null), // Background
96 101
97 --obj-hi: iro.props-get(--colors --gray4, null), 102 --obj-hi: fn.color(--gray4, null),
98 --obj: iro.props-get(--colors --gray5, null), 103 --obj: fn.color(--gray5, null),
99 --obj-lo: iro.props-get(--colors --gray6, null), 104 --obj-lo: fn.color(--gray6, null),
100 105
101 --fg-hi3: iro.props-get(--colors --gray7, null), // Disabled text 106 --fg-hi3: fn.color(--gray7, null), // Disabled text
102 --fg-hi2: iro.props-get(--colors --gray8, null), // Placeholder text 107 --fg-hi2: fn.color(--gray8, null), // Placeholder text
103 --fg-hi: iro.props-get(--colors --gray9, null), // Faint text 108 --fg-hi: fn.color(--gray9, null), // Faint text
104 --fg: iro.props-get(--colors --gray10, null), // Text 109 --fg: fn.color(--gray10, null), // Text
105 --fg-lo: iro.props-get(--colors --gray11, null), // Strong text 110 --fg-lo: fn.color(--gray11, null), // Strong text
106 111
107 --accent: ( 112 --accent: (
108 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), 113 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%),
@@ -113,11 +118,11 @@ $line-height: map-get($font--main, line-height);
113 --primary-const-selection: rgba($primary-accent-base, .99), 118 --primary-const-selection: rgba($primary-accent-base, .99),
114 --primary-const-fg: #fff, 119 --primary-const-fg: #fff,
115 120
116 --primary-hi: iro.props-get(--colors --accent --primary-const-hi, null), 121 --primary-hi: fn.color(--accent --primary-const-hi, null),
117 --primary: iro.props-get(--colors --accent --primary-const, null), 122 --primary: fn.color(--accent --primary-const, null),
118 --primary-lo: iro.props-get(--colors --accent --primary-const-lo, null), 123 --primary-lo: fn.color(--accent --primary-const-lo, null),
119 --primary-lo2: iro.props-get(--colors --accent --primary-const-lo2, null), 124 --primary-lo2: fn.color(--accent --primary-const-lo2, null),
120 --primary-fg: iro.props-get(--colors --accent --primary-const-fg, null), 125 --primary-fg: fn.color(--accent --primary-const-fg, null),
121 126
122 --error-hi: scale-color($error-accent-base, $lightness: 15%), 127 --error-hi: scale-color($error-accent-base, $lightness: 15%),
123 --error: $error-accent-base, 128 --error: $error-accent-base,
@@ -133,27 +138,27 @@ $line-height: map-get($font--main, line-height);
133 ), 138 ),
134 139
135 --grayscale-accent: ( 140 --grayscale-accent: (
136 --primary-hi: iro.props-get(--colors --fg-hi2, null), 141 --primary-hi: fn.color(--fg-hi2, null),
137 --primary: iro.props-get(--colors --fg-hi, null), 142 --primary: fn.color(--fg-hi, null),
138 --primary-lo: iro.props-get(--colors --fg, null), 143 --primary-lo: fn.color(--fg, null),
139 --primary-lo2: iro.props-get(--colors --fg-lo, null), 144 --primary-lo2: fn.color(--fg-lo, null),
140 --primary-fg: #fff, 145 --primary-fg: #fff,
141 ), 146 ),
142 147
143 --selection: ( 148 --selection: (
144 --bg: iro.props-get(--colors --accent --primary-const-selection, null), 149 --bg: fn.color(--accent --primary-const-selection, null),
145 --bg-img: iro.props-get(--colors --accent --primary-const-semi, null), 150 --bg-img: fn.color(--accent --primary-const-semi, null),
146 --fg: iro.props-get(--colors --accent --primary-const-fg, null), 151 --fg: fn.color(--accent --primary-const-fg, null),
147 ), 152 ),
148 153
149 --focus: ( 154 --focus: (
150 --shadow: 0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null), 155 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null),
151 --fill: iro.props-get(--colors --accent --primary-const, null), 156 --fill: fn.color(--accent --primary-const, null),
152 --text: iro.props-get(--colors --accent --primary-const-lo, null), 157 --text: fn.color(--accent --primary-const-lo, null),
153 --fill-text: iro.props-get(--colors --accent --primary-const-fg, null), 158 --fill-text: fn.color(--accent --primary-const-fg, null),
154 ), 159 ),
155 ), 160 ),
156 )); 161 ), 'colors');
157 162
158 @include iro.props-store(( 163 @include iro.props-store((
159 --colors: ( 164 --colors: (
@@ -169,7 +174,7 @@ $line-height: map-get($font--main, line-height);
169 --gray10: hsl(210, 0%, 19%), // 11.78 174 --gray10: hsl(210, 0%, 19%), // 11.78
170 --gray11: hsl(210, 0%, 0%), // 18.75 175 --gray11: hsl(210, 0%, 0%), // 18.75
171 ) 176 )
172 ), 'light-palette'); 177 ), 'palette-light');
173 178
174 @include iro.props-store(( 179 @include iro.props-store((
175 --colors: ( 180 --colors: (
@@ -185,29 +190,23 @@ $line-height: map-get($font--main, line-height);
185 --gray10: hsl(210, 0%, 22%), // 11.72 190 --gray10: hsl(210, 0%, 22%), // 11.72
186 --gray11: hsl(210, 0%, 0%), // 21 191 --gray11: hsl(210, 0%, 0%), // 21
187 ) 192 )
188 ), 'light-raised-palette'); 193 ), 'palette-light-raised');
189} 194}
190 195
191// 196//
192 197
193@include iro.fn-execute { 198@include iro.fn-execute {
194 @include iro.fn-execute { 199 @include iro.props-store((
195 @include iro.props-store(( 200 --colors: ()
196 --colors: () 201 ), 'colors-dark');
197 ), 'dark');
198 }
199
200 @include iro.fn-execute {
201 @include iro.props-store((
202 --colors: ()
203 ), 'dark-palette');
204 }
205 202
206 @include iro.fn-execute { 203 @include iro.props-store((
207 @include iro.props-store(( 204 --colors: ()
208 --colors: () 205 ), 'palette-dark');
209 ), 'dark-raised-palette'); 206
210 } 207 @include iro.props-store((
208 --colors: ()
209 ), 'palette-dark-raised');
211} 210}
212 211
213// 212//
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 12:45:40 +0000