@inc2734/unitone-css 0.81.0 → 0.82.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.css +1 -1
- package/dist/app.js +1 -1
- package/dist/library.js +1 -1
- package/package.json +1 -1
- package/src/app.js +0 -23
- package/src/foundation/_foundation.scss +4 -6
- package/src/helper/_helper.scss +0 -2
- package/src/helper/_typography.scss +4 -0
- package/src/layout-primitives/text/_text.scss +10 -1
- package/src/library.js +0 -26
- package/src/settings/_body.scss +6 -3
- package/src/settings/_root.scss +270 -203
- package/src/variables/_variables.scss +18 -15
- package/src/helper/_fluid-typography.scss +0 -15
package/src/settings/_root.scss
CHANGED
|
@@ -2,18 +2,284 @@
|
|
|
2
2
|
@use 'sass:math';
|
|
3
3
|
@use '../variables/variables' as variables;
|
|
4
4
|
|
|
5
|
+
@property --unitone--property--1em {
|
|
6
|
+
syntax: "<length>";
|
|
7
|
+
inherits: false;
|
|
8
|
+
initial-value: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@property --unitone--property--100vw {
|
|
12
|
+
syntax: "<length>";
|
|
13
|
+
inherits: false;
|
|
14
|
+
initial-value: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@function _generate-fluid-spacing($min, $max) {
|
|
18
|
+
@return clamp(
|
|
19
|
+
#{ $min },
|
|
20
|
+
#{ $min } + ((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint } * var(--unitone--base-font-size)) * (var(--unitone--result--100vw-px) - (#{ variables.$min-breakpoint } * var(--unitone--base-font-size)))),
|
|
21
|
+
#{ $max }
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@function _generate-spacing($max) {
|
|
26
|
+
$quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
|
|
27
|
+
$min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient });
|
|
28
|
+
@return _generate-fluid-spacing(#{ $min }, #{ $max });
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@function _generate-padding($max) {
|
|
32
|
+
$quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
|
|
33
|
+
$min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient } * .2);
|
|
34
|
+
@return _generate-fluid-spacing(#{ $min }, #{ $max });
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
* {
|
|
38
|
+
/**
|
|
39
|
+
* A value to get the unitless px value in trigonometric functions. (For Safari)
|
|
40
|
+
*/
|
|
41
|
+
--unitone--property--1em: 1em;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* em unitless px real value
|
|
45
|
+
*/
|
|
46
|
+
--unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Global.
|
|
51
|
+
*/
|
|
5
52
|
:root {
|
|
53
|
+
/**
|
|
54
|
+
* Box shadow
|
|
55
|
+
*/
|
|
56
|
+
--unitone--global--box-shadow: 0 5px 20px -5px rgb(0 0 0 / 20%);
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Border radius
|
|
60
|
+
*/
|
|
61
|
+
--unitone--global--border-radius: 4px;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Default gap
|
|
65
|
+
*/
|
|
66
|
+
--unitone--global--gap: var(--unitone--s2);
|
|
67
|
+
--unitone--global--text-gap: var(--unitone--s1);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Typography.
|
|
72
|
+
*/
|
|
73
|
+
:root {
|
|
74
|
+
/**
|
|
75
|
+
* A value to get the unitless px value in trigonometric functions. (For Safari)
|
|
76
|
+
*/
|
|
77
|
+
--unitone--property--100vw: 100vw;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* 100vw unitless px real value.
|
|
81
|
+
*/
|
|
82
|
+
--unitone--result--100vw-px: calc(tan(atan2(var(--unitone--property--100vw), 1px)));
|
|
83
|
+
|
|
6
84
|
/**
|
|
7
85
|
* Column width in typography.
|
|
8
86
|
*/
|
|
9
87
|
--unitone--measure: 42rem;
|
|
10
88
|
|
|
11
89
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
|
|
15
|
-
|
|
90
|
+
* Font size level.
|
|
91
|
+
* It is not recommended to override this value with :root in order to have the size determined based on 0.
|
|
92
|
+
*/
|
|
93
|
+
--unitone--font-size: 0;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* The 1rem px font size (no units).
|
|
97
|
+
*/
|
|
98
|
+
--unitone--base-font-size: 16;
|
|
99
|
+
|
|
100
|
+
--unitone--harmonic-sequence-base: 8;
|
|
101
|
+
--unitone--min-harmonic-sequence-base: 10;
|
|
102
|
+
--unitone--max-harmonic-sequence-base: var(--unitone--harmonic-sequence-base);
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Gutter provided above and below the text in a line.
|
|
106
|
+
*/
|
|
107
|
+
--unitone--half-leading: .3;
|
|
108
|
+
--unitone--min-half-leading: .05;
|
|
109
|
+
--unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading))); // Fallback.
|
|
110
|
+
--unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading)); // Fallback.
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Font family
|
|
114
|
+
*/
|
|
115
|
+
--unitone--font-family: sans-serif;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Modular scales for spaces (em based).
|
|
120
|
+
*/
|
|
121
|
+
:root {
|
|
122
|
+
--unitone--em-2: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
|
|
123
|
+
--unitone--em-1: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
|
|
124
|
+
--unitone--em0: 0em;
|
|
125
|
+
--unitone--em1: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
|
|
126
|
+
--unitone--em2: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
|
|
127
|
+
--unitone--em3: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
|
|
128
|
+
--unitone--em4: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
|
|
129
|
+
--unitone--em5: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
|
|
130
|
+
--unitone--em6: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
|
|
131
|
+
--unitone--em7: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
|
|
132
|
+
|
|
133
|
+
@supports not (top: 1lh) {
|
|
134
|
+
--unitone--em-2: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
|
|
135
|
+
--unitone--em-1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
|
|
136
|
+
--unitone--em1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
|
|
137
|
+
--unitone--em2: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
|
|
138
|
+
--unitone--em3: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
|
|
139
|
+
--unitone--em4: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
|
|
140
|
+
--unitone--em5: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
|
|
141
|
+
--unitone--em6: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
|
|
142
|
+
--unitone--em7: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Modular scales for spaces (rem based).
|
|
148
|
+
*/
|
|
149
|
+
:root {
|
|
150
|
+
--unitone--rem-2: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
|
|
151
|
+
--unitone--rem-1: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
|
|
152
|
+
--unitone--rem0: 0em;
|
|
153
|
+
--unitone--rem1: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
|
|
154
|
+
--unitone--rem2: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
|
|
155
|
+
--unitone--rem3: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
|
|
156
|
+
--unitone--rem4: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
|
|
157
|
+
--unitone--rem5: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
|
|
158
|
+
--unitone--rem6: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
|
|
159
|
+
--unitone--rem7: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
|
|
160
|
+
|
|
161
|
+
@supports not (top: 1rlh) {
|
|
162
|
+
--unitone--rem-2: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
|
|
163
|
+
--unitone--rem-1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
|
|
164
|
+
--unitone--rem1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
|
|
165
|
+
--unitone--rem2: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 4) });
|
|
166
|
+
--unitone--rem3: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 5) });
|
|
167
|
+
--unitone--rem4: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 6) });
|
|
168
|
+
--unitone--rem5: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 7) });
|
|
169
|
+
--unitone--rem6: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 8) });
|
|
170
|
+
--unitone--rem7: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Modular scales for spaces.
|
|
176
|
+
*/
|
|
177
|
+
:root {
|
|
178
|
+
--unitone--s-2: var(--unitone--em-2);
|
|
179
|
+
--unitone--s-1: var(--unitone--em-1);
|
|
180
|
+
--unitone--s0: var(--unitone--em0);
|
|
181
|
+
--unitone--s1: var(--unitone--em1);
|
|
182
|
+
--unitone--s2: #{ _generate-spacing(var(--unitone--em2)) };
|
|
183
|
+
--unitone--s3: #{ _generate-spacing(var(--unitone--em3)) };
|
|
184
|
+
--unitone--s4: #{ _generate-spacing(var(--unitone--em4)) };
|
|
185
|
+
--unitone--s5: #{ _generate-spacing(var(--unitone--em5)) };
|
|
186
|
+
--unitone--s6: #{ _generate-spacing(var(--unitone--em6)) };
|
|
187
|
+
--unitone--s7: #{ _generate-spacing(var(--unitone--em7)) };
|
|
188
|
+
|
|
189
|
+
--unitone--s1s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1)) };
|
|
190
|
+
--unitone--s2s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2)) };
|
|
191
|
+
--unitone--s3s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3)) };
|
|
192
|
+
--unitone--s4s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4)) };
|
|
193
|
+
--unitone--s5s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5)) };
|
|
194
|
+
--unitone--s6s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6)) };
|
|
195
|
+
--unitone--s7s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7)) };
|
|
196
|
+
|
|
197
|
+
--unitone--s2m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2)) };
|
|
198
|
+
--unitone--s3m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3)) };
|
|
199
|
+
--unitone--s4m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4)) };
|
|
200
|
+
--unitone--s5m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5)) };
|
|
201
|
+
--unitone--s6m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6)) };
|
|
202
|
+
--unitone--s7m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7)) };
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* Modular scales for padding.
|
|
207
|
+
*
|
|
208
|
+
* Left and right padding on mobile devices has a significant impact on readability.
|
|
209
|
+
* For this reason, we prepare special scales.
|
|
210
|
+
*/
|
|
211
|
+
:root {
|
|
212
|
+
--unitone--p-2: var(--unitone--em-2);
|
|
213
|
+
--unitone--p-1: var(--unitone--em-1);
|
|
214
|
+
--unitone--p0: var(--unitone--em0);
|
|
215
|
+
--unitone--p1: var(--unitone--em1);
|
|
216
|
+
--unitone--p2: #{ _generate-padding(var(--unitone--em2)) };
|
|
217
|
+
--unitone--p3: #{ _generate-padding(var(--unitone--em3)) };
|
|
218
|
+
--unitone--p4: #{ _generate-padding(var(--unitone--em4)) };
|
|
219
|
+
--unitone--p5: #{ _generate-padding(var(--unitone--em5)) };
|
|
220
|
+
--unitone--p6: #{ _generate-padding(var(--unitone--em6)) };
|
|
221
|
+
--unitone--p7: #{ _generate-padding(var(--unitone--em7)) };
|
|
222
|
+
|
|
223
|
+
--unitone--p1s: var(--unitone--s1s);
|
|
224
|
+
--unitone--p2s: var(--unitone--s2s);
|
|
225
|
+
--unitone--p3s: var(--unitone--s3s);
|
|
226
|
+
--unitone--p4s: var(--unitone--s4s);
|
|
227
|
+
--unitone--p5s: var(--unitone--s5s);
|
|
228
|
+
--unitone--p6s: var(--unitone--s6s);
|
|
229
|
+
--unitone--p7s: var(--unitone--s7s);
|
|
230
|
+
|
|
231
|
+
--unitone--p2m: var(--unitone--s2m);
|
|
232
|
+
--unitone--p3m: var(--unitone--s3m);
|
|
233
|
+
--unitone--p4m: var(--unitone--s4m);
|
|
234
|
+
--unitone--p5m: var(--unitone--s5m);
|
|
235
|
+
--unitone--p6m: var(--unitone--s6m);
|
|
236
|
+
--unitone--p7m: var(--unitone--s7m);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* Grids.
|
|
241
|
+
*/
|
|
242
|
+
:root {
|
|
243
|
+
/**
|
|
244
|
+
* Default gutters
|
|
245
|
+
*/
|
|
246
|
+
--unitone--global--gutters: max(min(6vw, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* Max width of the container.
|
|
250
|
+
*/
|
|
251
|
+
--unitone--container-max-width: #{ variables.$container-max-width };
|
|
252
|
+
|
|
253
|
+
--unitone--grid-columns: #{ variables.$grid-columns };
|
|
254
|
+
--unitone--grid-rows: #{ variables.$grid-rows };
|
|
255
|
+
--unitone--grid-gap: var(--unitone--global--gap);
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Grid sizes (% based).
|
|
259
|
+
*/
|
|
260
|
+
--unitone--_pg-base: calc((100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
|
|
261
|
+
--unitone--pg0: 0%;
|
|
262
|
+
@for $i from 1 through variables.$grid-columns {
|
|
263
|
+
--unitone--pg#{ $i }: calc(var(--unitone--_pg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Grid sizes (container based).
|
|
16
268
|
*/
|
|
269
|
+
--unitone--_cg-base: calc((var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
|
|
270
|
+
--unitone--cg0: 0%;
|
|
271
|
+
@for $i from 1 through variables.$grid-columns {
|
|
272
|
+
--unitone--cg#{ $i }: calc(var(--unitone--_cg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/**
|
|
277
|
+
* Colors.
|
|
278
|
+
*
|
|
279
|
+
* This color palette is based on Tailwind.
|
|
280
|
+
* @see https://tailwindcss.com/docs/customizing-colors
|
|
281
|
+
*/
|
|
282
|
+
:root {
|
|
17
283
|
--unitone--color--background: #fff;
|
|
18
284
|
--unitone--color--background-alt: #222; // Inversion color
|
|
19
285
|
--unitone--color--text: #222;
|
|
@@ -117,203 +383,4 @@
|
|
|
117
383
|
--unitone--color--pink: #f472b6;
|
|
118
384
|
--unitone--color--dark-pink: #be185d;
|
|
119
385
|
--unitone--color--heavy-pink: #500724;
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* Font size level.
|
|
123
|
-
* It is not recommended to override this value with :root in order to have the size determined based on 0.
|
|
124
|
-
*/
|
|
125
|
-
--unitone--font-size: 0;
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* The 1rem px font size (no units).
|
|
129
|
-
*/
|
|
130
|
-
--unitone--base-font-size: 16;
|
|
131
|
-
|
|
132
|
-
--unitone--harmonic-sequence-base: 8;
|
|
133
|
-
--unitone--min-harmonic-sequence-base: 10;
|
|
134
|
-
--unitone--max-harmonic-sequence-base: var(--unitone--harmonic-sequence-base);
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* Gutter provided above and below the text in a line.
|
|
138
|
-
*/
|
|
139
|
-
--unitone--half-leading: .3;
|
|
140
|
-
--unitone--min-half-leading: .05;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Font family
|
|
144
|
-
*/
|
|
145
|
-
--unitone--font-family: sans-serif;
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Box shadow
|
|
149
|
-
*/
|
|
150
|
-
--unitone--global--box-shadow: 0 5px 20px -5px rgb(0 0 0 / 20%);
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Border radius
|
|
154
|
-
*/
|
|
155
|
-
--unitone--global--border-radius: 4px;
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* Default gap
|
|
159
|
-
*/
|
|
160
|
-
--unitone--global--gap: var(--unitone--s2);
|
|
161
|
-
--unitone--global--text-gap: var(--unitone--s1);
|
|
162
|
-
|
|
163
|
-
/**
|
|
164
|
-
* Default gutters
|
|
165
|
-
*/
|
|
166
|
-
--unitone--global--gutters: max(min(6vw, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Reference value of the modular scale for space.
|
|
170
|
-
*/
|
|
171
|
-
$_space-reference-value: calc((#{ variables.$line-height }) / 3);
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* Modular scales for spaces.
|
|
175
|
-
*/
|
|
176
|
-
--unitone--ms-2: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 1) });
|
|
177
|
-
--unitone--ms-1: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 2) });
|
|
178
|
-
--unitone--ms0: 0;
|
|
179
|
-
--unitone--ms1: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 3) });
|
|
180
|
-
--unitone--ms2: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 4) });
|
|
181
|
-
--unitone--ms3: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 5) });
|
|
182
|
-
--unitone--ms4: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 6) });
|
|
183
|
-
--unitone--ms5: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 7) });
|
|
184
|
-
--unitone--ms6: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 8) });
|
|
185
|
-
--unitone--ms7: calc(#{ $_space-reference-value } * #{ list.nth(variables.$fibonacci-sequence, 9) });
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* Modular scales for spaces (em based).
|
|
189
|
-
*/
|
|
190
|
-
--unitone--em-2: calc(1em * var(--unitone--ms-2));
|
|
191
|
-
--unitone--em-1: calc(1em * var(--unitone--ms-1));
|
|
192
|
-
--unitone--em0: 0em;
|
|
193
|
-
--unitone--em1: calc(1em * var(--unitone--ms1));
|
|
194
|
-
--unitone--em2: calc(1em * var(--unitone--ms2));
|
|
195
|
-
--unitone--em3: calc(1em * var(--unitone--ms3));
|
|
196
|
-
--unitone--em4: calc(1em * var(--unitone--ms4));
|
|
197
|
-
--unitone--em5: calc(1em * var(--unitone--ms5));
|
|
198
|
-
--unitone--em6: calc(1em * var(--unitone--ms6));
|
|
199
|
-
--unitone--em7: calc(1em * var(--unitone--ms7));
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* Modular scales for spaces (rem based).
|
|
203
|
-
*/
|
|
204
|
-
--unitone--rem-2: calc(1rem * var(--unitone--ms-2));
|
|
205
|
-
--unitone--rem-1: calc(1rem * var(--unitone--ms-1));
|
|
206
|
-
--unitone--rem0: 0rem;
|
|
207
|
-
--unitone--rem1: calc(1rem * var(--unitone--ms1));
|
|
208
|
-
--unitone--rem2: calc(1rem * var(--unitone--ms2));
|
|
209
|
-
--unitone--rem3: calc(1rem * var(--unitone--ms3));
|
|
210
|
-
--unitone--rem4: calc(1rem * var(--unitone--ms4));
|
|
211
|
-
--unitone--rem5: calc(1rem * var(--unitone--ms5));
|
|
212
|
-
--unitone--rem6: calc(1rem * var(--unitone--ms6));
|
|
213
|
-
--unitone--rem7: calc(1rem * var(--unitone--ms7));
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* Modular scales for spaces.
|
|
217
|
-
*/
|
|
218
|
-
@function _generate-fluid-spacing($min, $max) {
|
|
219
|
-
$slope: calc((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint }));
|
|
220
|
-
$intercept: calc(#{ -1 * variables.$min-breakpoint } * #{ $slope } + #{ $min });
|
|
221
|
-
$preferred-spacing: calc(#{ $intercept } * 1em + #{ $slope } * 100vw);
|
|
222
|
-
@return clamp(#{ $min } * 1em, #{ $preferred-spacing }, #{ $max } * 1em);
|
|
223
|
-
}
|
|
224
|
-
@function _generate-spacing($spacing) {
|
|
225
|
-
$quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
|
|
226
|
-
$min: calc(var(--unitone--ms1) + #{ $spacing } * #{ $quotient });
|
|
227
|
-
@return _generate-fluid-spacing(#{ $min }, #{ $spacing });
|
|
228
|
-
}
|
|
229
|
-
$_quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
|
|
230
|
-
--unitone--s-2: var(--unitone--em-2);
|
|
231
|
-
--unitone--s-1: var(--unitone--em-1);
|
|
232
|
-
--unitone--s0: var(--unitone--em0);
|
|
233
|
-
--unitone--s1: var(--unitone--em1);
|
|
234
|
-
--unitone--s2: #{ _generate-spacing(var(--unitone--ms2)) };
|
|
235
|
-
--unitone--s3: #{ _generate-spacing(var(--unitone--ms3)) };
|
|
236
|
-
--unitone--s4: #{ _generate-spacing(var(--unitone--ms4)) };
|
|
237
|
-
--unitone--s5: #{ _generate-spacing(var(--unitone--ms5)) };
|
|
238
|
-
--unitone--s6: #{ _generate-spacing(var(--unitone--ms6)) };
|
|
239
|
-
--unitone--s7: #{ _generate-spacing(var(--unitone--ms7)) };
|
|
240
|
-
|
|
241
|
-
--unitone--s1s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms1)) };
|
|
242
|
-
--unitone--s2s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms2)) };
|
|
243
|
-
--unitone--s3s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms3)) };
|
|
244
|
-
--unitone--s4s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms4)) };
|
|
245
|
-
--unitone--s5s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms5)) };
|
|
246
|
-
--unitone--s6s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms6)) };
|
|
247
|
-
--unitone--s7s: #{ _generate-fluid-spacing(var(--unitone--ms-1), var(--unitone--ms7)) };
|
|
248
|
-
|
|
249
|
-
--unitone--s2m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms2)) };
|
|
250
|
-
--unitone--s3m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms3)) };
|
|
251
|
-
--unitone--s4m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms4)) };
|
|
252
|
-
--unitone--s5m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms5)) };
|
|
253
|
-
--unitone--s6m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms6)) };
|
|
254
|
-
--unitone--s7m: #{ _generate-fluid-spacing(var(--unitone--ms1), var(--unitone--ms7)) };
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Modular scales for padding.
|
|
258
|
-
*
|
|
259
|
-
* Left and right padding on mobile devices has a significant impact on readability.
|
|
260
|
-
* For this reason, we prepare special scales.
|
|
261
|
-
*/
|
|
262
|
-
@function _generate-padding($spacing) {
|
|
263
|
-
$quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
|
|
264
|
-
$min: calc(var(--unitone--ms1) + #{ $spacing } * #{ $quotient } * .2);
|
|
265
|
-
@return _generate-fluid-spacing(#{ $min }, #{ $spacing });
|
|
266
|
-
}
|
|
267
|
-
--unitone--p-2: var(--unitone--em-2);
|
|
268
|
-
--unitone--p-1: var(--unitone--em-1);
|
|
269
|
-
--unitone--p0: var(--unitone--em0);
|
|
270
|
-
--unitone--p1: var(--unitone--em1);
|
|
271
|
-
--unitone--p2: #{ _generate-padding(var(--unitone--ms2)) };
|
|
272
|
-
--unitone--p3: #{ _generate-padding(var(--unitone--ms3)) };
|
|
273
|
-
--unitone--p4: #{ _generate-padding(var(--unitone--ms4)) };
|
|
274
|
-
--unitone--p5: #{ _generate-padding(var(--unitone--ms5)) };
|
|
275
|
-
--unitone--p6: #{ _generate-padding(var(--unitone--ms6)) };
|
|
276
|
-
--unitone--p7: #{ _generate-padding(var(--unitone--ms7)) };
|
|
277
|
-
|
|
278
|
-
--unitone--p1s: var(--unitone--s1s);
|
|
279
|
-
--unitone--p2s: var(--unitone--s2s);
|
|
280
|
-
--unitone--p3s: var(--unitone--s3s);
|
|
281
|
-
--unitone--p4s: var(--unitone--s4s);
|
|
282
|
-
--unitone--p5s: var(--unitone--s5s);
|
|
283
|
-
--unitone--p6s: var(--unitone--s6s);
|
|
284
|
-
--unitone--p7s: var(--unitone--s7s);
|
|
285
|
-
|
|
286
|
-
--unitone--p2m: var(--unitone--s2m);
|
|
287
|
-
--unitone--p3m: var(--unitone--s3m);
|
|
288
|
-
--unitone--p4m: var(--unitone--s4m);
|
|
289
|
-
--unitone--p5m: var(--unitone--s5m);
|
|
290
|
-
--unitone--p6m: var(--unitone--s6m);
|
|
291
|
-
--unitone--p7m: var(--unitone--s7m);
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* Max width of the container.
|
|
295
|
-
*/
|
|
296
|
-
--unitone--container-max-width: #{ variables.$container-max-width };
|
|
297
|
-
|
|
298
|
-
--unitone--grid-columns: #{ variables.$grid-columns };
|
|
299
|
-
--unitone--grid-rows: #{ variables.$grid-rows };
|
|
300
|
-
--unitone--grid-gap: var(--unitone--global--gap);
|
|
301
|
-
|
|
302
|
-
/**
|
|
303
|
-
* Grid sizes (% based).
|
|
304
|
-
*/
|
|
305
|
-
--unitone--_pg-base: calc((100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
|
|
306
|
-
--unitone--pg0: 0%;
|
|
307
|
-
@for $i from 1 through variables.$grid-columns {
|
|
308
|
-
--unitone--pg#{ $i }: calc(var(--unitone--_pg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
/**
|
|
312
|
-
* Grid sizes (container based).
|
|
313
|
-
*/
|
|
314
|
-
--unitone--_cg-base: calc((var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
|
|
315
|
-
--unitone--cg0: 0%;
|
|
316
|
-
@for $i from 1 through variables.$grid-columns {
|
|
317
|
-
--unitone--cg#{ $i }: calc(var(--unitone--_cg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
|
|
318
|
-
}
|
|
319
386
|
}
|
|
@@ -5,10 +5,6 @@ $max-breakpoint: 80; // = 1280px
|
|
|
5
5
|
|
|
6
6
|
$root-font-size: calc(var(--unitone--base-font-size) * 1px);
|
|
7
7
|
|
|
8
|
-
$_font-size-scale: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)));
|
|
9
|
-
$font-size: calc($_font-size-scale * 1rem);
|
|
10
|
-
$font-size-em: calc($_font-size-scale * 1em);
|
|
11
|
-
|
|
12
8
|
$_max-font-size: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size)));
|
|
13
9
|
$_min-font-size: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
|
|
14
10
|
$_slope: calc((#{ $_max-font-size } - #{ $_min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
|
|
@@ -16,10 +12,6 @@ $_intercept: calc(#{-1 * $min-breakpoint } * #{ $_slope } + #{ $_min-font-size }
|
|
|
16
12
|
$_preferred-font-size: calc((#{ $_intercept } * 1rem) + (#{ $_slope } * 100vw));
|
|
17
13
|
$fluid-font-size: clamp(1rem * #{ $_min-font-size }, #{ $_preferred-font-size }, 1rem * #{ $_max-font-size });
|
|
18
14
|
|
|
19
|
-
$min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading)));
|
|
20
|
-
$max-line-height: calc(1 + 2 * var(--unitone--half-leading));
|
|
21
|
-
$max-line-height-target-font-size-ratio: 5;
|
|
22
|
-
|
|
23
15
|
/**
|
|
24
16
|
* The line-height slope. If smaller, the line-height is adjusted to a smaller value as the font size increases.
|
|
25
17
|
*
|
|
@@ -29,22 +21,33 @@ $max-line-height-target-font-size-ratio: 5;
|
|
|
29
21
|
*
|
|
30
22
|
* @see https://www.geogebra.org/graphing?lang=ja
|
|
31
23
|
*/
|
|
32
|
-
$
|
|
33
|
-
$
|
|
24
|
+
$_max-line-height-target-font-size-ratio: 5;
|
|
25
|
+
$_font-size-scale: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)));
|
|
26
|
+
$_line-height-slope: calc((var(--unitone--min-line-height) - var(--unitone--max-line-height)) / #{ $_max-line-height-target-font-size-ratio - 1 });
|
|
27
|
+
$_line-height-intercept: calc(var(--unitone--max-line-height) - #{ $_line-height-slope });
|
|
34
28
|
$line-height: clamp(
|
|
35
|
-
|
|
36
|
-
#{ $
|
|
37
|
-
|
|
29
|
+
var(--unitone--min-line-height),
|
|
30
|
+
#{ $_line-height-slope } * (var(--unitone--result--1em-px) / var(--unitone--base-font-size)) + #{ $_line-height-intercept },
|
|
31
|
+
var(--unitone--max-line-height)
|
|
38
32
|
);
|
|
39
33
|
|
|
34
|
+
$font-size: calc($_font-size-scale * 1rem);
|
|
35
|
+
$font-size-em: calc($_font-size-scale * 1em);
|
|
36
|
+
|
|
40
37
|
@mixin typography {
|
|
38
|
+
--unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading)));
|
|
39
|
+
--unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading));
|
|
40
|
+
--unitone--line-height: #{ $line-height };
|
|
41
|
+
|
|
41
42
|
font-size: #{ $font-size };
|
|
42
|
-
line-height:
|
|
43
|
+
line-height: var(--unitone--line-height);
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
@mixin typography-em {
|
|
47
|
+
--unitone--line-height: #{ $line-height };
|
|
48
|
+
|
|
46
49
|
font-size: #{ $font-size-em };
|
|
47
|
-
line-height:
|
|
50
|
+
line-height: var(--unitone--line-height);
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
$container-max-width: $max-breakpoint * 16px; // = 1280px
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
@use '../variables/variables' as variables;
|
|
2
|
-
|
|
3
|
-
@mixin fluid-typography() {
|
|
4
|
-
[data-unitone-layout~="-fluid-typography"] {
|
|
5
|
-
font-size: #{ variables.$fluid-font-size };
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:where([data-unitone-layout~="-fluid-typography"]) {
|
|
9
|
-
visibility: hidden;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:where([data-unitone-layout~="-fluid-typography"][style*="--unitone--fluid-font-size-magnification:"]) {
|
|
13
|
-
visibility: visible;
|
|
14
|
-
}
|
|
15
|
-
}
|