unit.gl 0.0.40 → 0.1.2
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/README.md +2 -3
- package/css/unit.gl.css +54 -42
- package/css/unit.gl.min.css +1 -1
- package/package.json +7 -7
- package/scss/_reset.scss +20 -12
- package/scss/classes/_guide.scss +35 -40
- package/scss/classes/_guides.scss +141 -0
- package/scss/classes/_index.scss +3 -5
- package/scss/classes/_ratio.scss +3 -5
- package/scss/dev/_banner.scss +4 -7
- package/scss/dev/_index.scss +7 -0
- package/scss/functions/_color.scss +8 -11
- package/scss/functions/_index.scss +18 -11
- package/scss/functions/_layer.scss +6 -10
- package/scss/functions/_ratio.scss +13 -16
- package/scss/functions/_scale.scss +20 -18
- package/scss/functions/_sequence.scss +64 -72
- package/scss/functions/_view.scss +6 -9
- package/scss/functions/math/_arithmetic.scss +21 -30
- package/scss/functions/math/_index.scss +4 -7
- package/scss/functions/unit/_index.scss +8 -7
- package/scss/functions/unit/_unit_conversion.scss +42 -29
- package/scss/functions/unit/_unit_functions.scss +55 -43
- package/scss/index.scss +0 -1
- package/scss/maps/_color.scss +14 -14
- package/scss/maps/_index.scss +26 -0
- package/scss/mixins/_device.scss +9 -10
- package/scss/mixins/_display.scss +52 -57
- package/scss/mixins/_guide.scss +59 -81
- package/scss/mixins/_helper.scss +74 -92
- package/scss/mixins/_index.scss +12 -14
- package/scss/mixins/_paper.scss +10 -11
- package/scss/mixins/_ratio.scss +172 -76
- package/scss/mixins/_unit.scss +33 -23
- package/scss/mixins/_view.scss +47 -54
- package/scss/{_global.scss → tags/_global.scss} +12 -11
- package/scss/tags/_index.scss +5 -6
- package/scss/tags/_unit.scss +4 -11
- package/scss/variables/_color.scss +18 -20
- package/scss/variables/_device.scss +179 -73
- package/scss/variables/_index.scss +21 -22
- package/scss/variables/_layer.scss +26 -35
- package/scss/variables/_paper.scss +1022 -241
- package/scss/variables/_ratio.scss +148 -90
- package/scss/variables/_scale.scss +141 -115
- package/scss/variables/_unit.scss +20 -35
- package/scss/variables/_view.scss +54 -57
- package/ts/AspectRatio.ts +27 -6
- package/ts/Border.ts +35 -4
- package/ts/BoxModel.ts +32 -4
- package/ts/FlexContainer.ts +36 -9
- package/ts/Grid.ts +28 -3
- package/ts/GridContainer.ts +29 -3
- package/ts/Layout.ts +37 -7
- package/ts/Position.ts +29 -4
- package/ts/Rectangle.ts +26 -3
- package/ts/ResponsiveImage.ts +22 -3
- package/ts/ResponsiveScale.ts +25 -2
- package/ts/Size.ts +25 -3
- package/ts/Spacing.ts +45 -7
- package/ts/Transform.ts +37 -4
- package/ts/Typography.ts +40 -6
- package/ts/Unit.ts +34 -10
- package/ts/Viewport.ts +31 -3
- package/ts/index.ts +1 -16
- package/scss/utilities/_guides.scss +0 -103
- package/scss/utilities/_index.scss +0 -6
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
// ============================================================================
|
|
4
4
|
|
|
5
5
|
////
|
|
6
|
-
///
|
|
6
|
+
///
|
|
7
7
|
/// Ratio Variables Module
|
|
8
8
|
/// ===========================================================================
|
|
9
|
-
///
|
|
9
|
+
///
|
|
10
10
|
/// @group Ratio
|
|
11
11
|
/// @author Scape Agency
|
|
12
12
|
/// @link https://unit.gl
|
|
13
13
|
/// @since 0.1.0 initial release
|
|
14
14
|
/// @todo None
|
|
15
15
|
/// @access public
|
|
16
|
-
///
|
|
16
|
+
///
|
|
17
17
|
////
|
|
18
18
|
|
|
19
19
|
|
|
@@ -21,24 +21,22 @@
|
|
|
21
21
|
// Use
|
|
22
22
|
// ============================================================================
|
|
23
23
|
|
|
24
|
-
|
|
25
24
|
// ============================================================================
|
|
26
25
|
// Variables
|
|
27
26
|
// ============================================================================
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
///
|
|
28
|
+
///
|
|
31
29
|
/// A map of common ratios used for modular scale calculations, organized by
|
|
32
30
|
/// categories such as musical intervals, mathematical constants, and special
|
|
33
31
|
/// ratios used in design and architecture.
|
|
34
|
-
/// This map defines a variety of ratios used in modular scale calculations for
|
|
35
|
-
/// responsive typography, layout design, and other scaling needs. These ratios
|
|
32
|
+
/// This map defines a variety of ratios used in modular scale calculations for
|
|
33
|
+
/// responsive typography, layout design, and other scaling needs. These ratios
|
|
36
34
|
/// are drawn from musical intervals, mathematical constants, and design
|
|
37
35
|
/// principles.
|
|
38
|
-
///
|
|
36
|
+
///
|
|
39
37
|
/// @name $ratio_map
|
|
40
38
|
/// @type Map
|
|
41
|
-
///
|
|
39
|
+
///
|
|
42
40
|
/// @prop {Number} minor_second [1.067] - Minor second interval.
|
|
43
41
|
/// @prop {Number} minor_third [1.2] - Minor third interval.
|
|
44
42
|
/// @prop {Number} minor_fourth [1.334] - Minor fourth interval (also known as diminished fifth).
|
|
@@ -95,7 +93,7 @@
|
|
|
95
93
|
/// @prop {Number} bronze_ratio [1.927] - Analogous to silver and golden ratios.
|
|
96
94
|
/// @prop {Number} phi [1.618] - Another name for the golden ratio.
|
|
97
95
|
/// @prop {Number} pi [3.142] - Mathematical Pi value.
|
|
98
|
-
/// @prop {Number} euler [2.718] - Euler
|
|
96
|
+
/// @prop {Number} euler [2.718] - Euler"s number.
|
|
99
97
|
/// @prop {Number} pythagorean [1.732] - Pythagorean constant, square root of 3.
|
|
100
98
|
/// @prop {Number} square [1.414] - Square root of 2.
|
|
101
99
|
/// @prop {Number} fibonacci [1.618] - Fibonacci sequence ratio.
|
|
@@ -105,120 +103,180 @@
|
|
|
105
103
|
/// @prop {Number} cosmic_ratio [1.273] - Based on cosmic geometry.
|
|
106
104
|
/// @prop {Number} egyptian_fraction [1.571] - Ancient Egyptian architecture ratio.
|
|
107
105
|
/// @prop {Number} harmonic_mean [1.455] - Harmonic mean, a type of average.
|
|
108
|
-
/// @prop {Number} gauss_constant [0.834] - Gauss
|
|
106
|
+
/// @prop {Number} gauss_constant [0.834] - Gauss"s constant related to the arithmetic-geometric mean.
|
|
109
107
|
/// @prop {Number} super_golden [2.058] - Super golden ratio, a higher order of the golden ratio.
|
|
110
108
|
/// @prop {Number} parthenon_ratio [1.618] - Ratio used in the architecture of the Parthenon.
|
|
111
109
|
/// @prop {Number} le_corbusier [1.618] - Le Corbusier’s modulor ratio, used in modernist architecture.
|
|
112
110
|
/// @prop {Number} vesica_piscis [1.732] - Ratio derived from the vesica piscis shape, often used in sacred geometry.
|
|
113
111
|
$ratio_map: (
|
|
114
|
-
|
|
115
112
|
// Musical Intervals
|
|
116
113
|
// ========================================================================
|
|
117
114
|
// Commonly used in creating harmonious designs based on musical theory.
|
|
118
|
-
|
|
119
115
|
// Musical Minor Interval
|
|
120
116
|
// ------------------------------------------------------------------------
|
|
121
|
-
"minor_second":
|
|
122
|
-
|
|
123
|
-
"
|
|
124
|
-
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
"
|
|
117
|
+
"minor_second": 1.067,
|
|
118
|
+
// Minor second interval
|
|
119
|
+
"minor_third": 1.2,
|
|
120
|
+
// Minor third interval
|
|
121
|
+
"minor_fourth": 1.334,
|
|
122
|
+
// Minor fourth interval (also known as diminished fifth)
|
|
123
|
+
"minor_fifth": 1.5,
|
|
124
|
+
// Minor fifth interval
|
|
125
|
+
"minor_sixth": 1.6,
|
|
126
|
+
// Minor sixth interval
|
|
127
|
+
"minor_seventh": 1.778,
|
|
128
|
+
// Minor seventh interval
|
|
129
|
+
"minor_octave": 2,
|
|
128
130
|
|
|
131
|
+
// Minor octave interval
|
|
129
132
|
// Musical Major Interval
|
|
130
133
|
// ------------------------------------------------------------------------
|
|
131
|
-
"major_second":
|
|
132
|
-
|
|
133
|
-
"
|
|
134
|
-
|
|
135
|
-
"
|
|
136
|
-
|
|
137
|
-
"
|
|
134
|
+
"major_second": 1.125,
|
|
135
|
+
// Major second interval
|
|
136
|
+
"major_third": 1.25,
|
|
137
|
+
// Major third interval
|
|
138
|
+
"major_fourth": 1.333,
|
|
139
|
+
// Major fourth interval (perfect fourth)
|
|
140
|
+
"major_fifth": 1.5,
|
|
141
|
+
// Major fifth interval (perfect fifth)
|
|
142
|
+
"major_sixth": 1.667,
|
|
143
|
+
// Major sixth interval
|
|
144
|
+
"major_seventh": 1.875,
|
|
145
|
+
// Major seventh interval
|
|
146
|
+
"major_octave": 2,
|
|
138
147
|
|
|
148
|
+
// Major octave interval (perfect octave)
|
|
139
149
|
// Musical Perfect Interval
|
|
140
150
|
// ------------------------------------------------------------------------
|
|
141
|
-
"perfect_unison":
|
|
142
|
-
|
|
143
|
-
"
|
|
144
|
-
|
|
145
|
-
"
|
|
146
|
-
|
|
147
|
-
"
|
|
148
|
-
|
|
149
|
-
"
|
|
150
|
-
|
|
151
|
-
"
|
|
152
|
-
|
|
153
|
-
"
|
|
154
|
-
|
|
155
|
-
"
|
|
156
|
-
|
|
157
|
-
"
|
|
151
|
+
"perfect_unison": 1,
|
|
152
|
+
// Perfect unison, the same note
|
|
153
|
+
"perfect_second": 1.125,
|
|
154
|
+
// Perfect second interval
|
|
155
|
+
"perfect_third": 1.25,
|
|
156
|
+
// Perfect third interval
|
|
157
|
+
"perfect_fourth": 1.333,
|
|
158
|
+
// Perfect fourth interval
|
|
159
|
+
"perfect_fifth": 1.5,
|
|
160
|
+
// Perfect fifth interval
|
|
161
|
+
"perfect_sixth": 1.667,
|
|
162
|
+
// Perfect sixth interval
|
|
163
|
+
"perfect_seventh": 1.875,
|
|
164
|
+
// Perfect seventh interval
|
|
165
|
+
"perfect_octave": 2,
|
|
166
|
+
// Perfect octave, double the frequency
|
|
167
|
+
"perfect_ninth": 2.25,
|
|
168
|
+
// Perfect ninth interval
|
|
169
|
+
"perfect_tenth": 2.5,
|
|
170
|
+
// Perfect tenth interval
|
|
171
|
+
"perfect_eleventh": 2.667,
|
|
172
|
+
// Perfect eleventh interval
|
|
173
|
+
"perfect_twelfth": 3,
|
|
174
|
+
// Perfect twelfth interval
|
|
175
|
+
"perfect_thirteenth": 3.333,
|
|
176
|
+
// Perfect thirteenth interval
|
|
177
|
+
"perfect_fourteenth": 3.667,
|
|
178
|
+
// Perfect fourteenth interval
|
|
179
|
+
"perfect_fifteenth": 4,
|
|
180
|
+
// Perfect fifteenth interval, double octave
|
|
181
|
+
"double_octave": 4,
|
|
182
|
+
// Twice the frequency of the perfect octave
|
|
183
|
+
"triple_octave": 8,
|
|
158
184
|
|
|
185
|
+
// Three times the frequency of the perfect octave
|
|
159
186
|
// Musical Augmented Interval
|
|
160
187
|
// ------------------------------------------------------------------------
|
|
161
|
-
"augmented_unison":
|
|
162
|
-
|
|
163
|
-
"
|
|
164
|
-
|
|
165
|
-
"
|
|
166
|
-
|
|
167
|
-
"
|
|
168
|
-
|
|
188
|
+
"augmented_unison": 1.059,
|
|
189
|
+
// Slightly higher than perfect unison
|
|
190
|
+
"augmented_second": 1.122,
|
|
191
|
+
// Slightly higher than major second
|
|
192
|
+
"augmented_third": 1.189,
|
|
193
|
+
// Slightly higher than major third
|
|
194
|
+
"augmented_fourth": 1.414,
|
|
195
|
+
// Augmented fourth, also known as tritone
|
|
196
|
+
"augmented_fifth": 1.587,
|
|
197
|
+
// Slightly higher than perfect fifth
|
|
198
|
+
"augmented_sixth": 1.682,
|
|
199
|
+
// Slightly higher than major sixth
|
|
200
|
+
"augmented_seventh": 1.782,
|
|
201
|
+
// Slightly higher than major seventh
|
|
202
|
+
"augmented_octave": 2.059,
|
|
169
203
|
|
|
204
|
+
// Slightly higher than perfect octave
|
|
170
205
|
// Musical Diminished Interval
|
|
171
206
|
// ------------------------------------------------------------------------
|
|
172
|
-
"diminished_unison":
|
|
173
|
-
|
|
174
|
-
"
|
|
175
|
-
|
|
176
|
-
"
|
|
177
|
-
|
|
178
|
-
"
|
|
179
|
-
|
|
180
|
-
|
|
207
|
+
"diminished_unison": 0.943,
|
|
208
|
+
// A diminished unison, slightly less than a perfect unison
|
|
209
|
+
"diminished_second": 1.053,
|
|
210
|
+
// Diminished second interval, slightly less than a minor second
|
|
211
|
+
"diminished_third": 1.122,
|
|
212
|
+
// Diminished third interval, slightly less than a minor third
|
|
213
|
+
"diminished_fourth": 1.26,
|
|
214
|
+
// Diminished fourth, slightly less than a perfect fourth
|
|
215
|
+
"diminished_fifth": 1.414,
|
|
216
|
+
// Tritone, halfway between a perfect fourth and perfect fifth
|
|
217
|
+
"diminished_sixth": 1.587,
|
|
218
|
+
// Diminished sixth interval, slightly less than a major sixth
|
|
219
|
+
"diminished_seventh": 1.782,
|
|
220
|
+
// Diminished seventh interval, slightly less than a major seventh
|
|
221
|
+
"diminished_octave": 1.961,
|
|
181
222
|
|
|
223
|
+
// A diminished octave, slightly less than a perfect octave
|
|
182
224
|
// Mathematical Constants
|
|
183
225
|
// ========================================================================
|
|
184
226
|
// These ratios are derived from important mathematical constants.
|
|
185
|
-
|
|
186
227
|
// Root
|
|
187
228
|
// ------------------------------------------------------------------------
|
|
188
|
-
"root_two":
|
|
189
|
-
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
"
|
|
193
|
-
|
|
194
|
-
"
|
|
195
|
-
|
|
196
|
-
"
|
|
197
|
-
"
|
|
229
|
+
"root_two": 1.414,
|
|
230
|
+
// Square root of 2
|
|
231
|
+
"root_three": 1.732,
|
|
232
|
+
// Square root of 3
|
|
233
|
+
"root_four": 2,
|
|
234
|
+
// Square root of 4
|
|
235
|
+
"root_five": 2.236,
|
|
236
|
+
// Square root of 5
|
|
237
|
+
"golden_ratio": 1.618,
|
|
238
|
+
"silver_ratio": 2.414,
|
|
239
|
+
// Analogous to the golden ratio
|
|
240
|
+
"bronze_ratio": 1.927,
|
|
241
|
+
// Analogous to silver and golden ratios
|
|
242
|
+
"phi": 1.618,
|
|
243
|
+
// Another name for the golden ratio
|
|
244
|
+
"pi": 3.142,
|
|
245
|
+
// Mathematical Pi value
|
|
246
|
+
"euler": 2.718,
|
|
198
247
|
|
|
248
|
+
// Euler"s number
|
|
199
249
|
// Special Ratios
|
|
200
250
|
// ========================================================================
|
|
201
251
|
// Unique ratios derived from specific design, architectural, or theoretical contexts.
|
|
202
|
-
|
|
203
252
|
// Special
|
|
204
253
|
// ------------------------------------------------------------------------
|
|
205
|
-
"pythagorean":
|
|
206
|
-
|
|
207
|
-
"
|
|
208
|
-
|
|
209
|
-
"
|
|
210
|
-
|
|
211
|
-
"
|
|
212
|
-
|
|
213
|
-
"
|
|
214
|
-
|
|
215
|
-
"
|
|
254
|
+
"pythagorean": 1.732,
|
|
255
|
+
// Pythagorean constant, square root of 3
|
|
256
|
+
"square": 1.414,
|
|
257
|
+
// Square root of 2
|
|
258
|
+
"fibonacci": 1.618,
|
|
259
|
+
// Fibonacci sequence ratio
|
|
260
|
+
"plastic_number": 1.324,
|
|
261
|
+
// Plastic constant, another unique irrational number
|
|
262
|
+
"feigenbaum": 4.669,
|
|
263
|
+
// Feigenbaum constant in chaos theory
|
|
264
|
+
"apollonian": 1.306,
|
|
265
|
+
// Apollonian gasket, related to circle packing
|
|
266
|
+
"cosmic_ratio": 1.273,
|
|
267
|
+
// Based on cosmic geometry
|
|
268
|
+
"egyptian_fraction": 1.571,
|
|
269
|
+
// Ancient Egyptian architecture ratio
|
|
270
|
+
"harmonic_mean": 1.455,
|
|
271
|
+
// Harmonic mean, a type of average
|
|
272
|
+
"gauss_constant": 0.834,
|
|
273
|
+
// Gauss"s constant related to the arithmetic-geometric mean
|
|
274
|
+
"super_golden": 2.058,
|
|
216
275
|
|
|
276
|
+
// Super golden ratio, a higher order of the golden ratio
|
|
217
277
|
// Design & Architecture Ratios
|
|
218
278
|
// ------------------------------------------------------------------------
|
|
219
|
-
|
|
220
|
-
"
|
|
221
|
-
"
|
|
222
|
-
"vesica_piscis": 1.732
|
|
223
|
-
|
|
279
|
+
"parthenon_ratio": 1.618,
|
|
280
|
+
"le_corbusier": 1.618,
|
|
281
|
+
"vesica_piscis": 1.732
|
|
224
282
|
) !default;
|