diff options
author | Volpeon <git@volpeon.ink> | 2022-02-14 18:45:32 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-14 18:45:32 +0100 |
commit | 248a90eb5fe1f5fa624423b81d0b18df85fabe35 (patch) | |
tree | a6d112b0929f065ebf7ac6d2916550d6dc5ff469 /src | |
parent | Adjusted spacings (diff) | |
download | iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.gz iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.bz2 iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.zip |
Restructured size variables
Diffstat (limited to 'src')
-rw-r--r-- | src/_base.scss | 6 | ||||
-rw-r--r-- | src/_declare-vars.scss | 80 | ||||
-rw-r--r-- | src/_utils.scss | 16 | ||||
-rw-r--r-- | src/layouts/_card.scss | 28 | ||||
-rw-r--r-- | src/layouts/_container.scss | 14 | ||||
-rw-r--r-- | src/layouts/_form.scss | 6 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 8 | ||||
-rw-r--r-- | src/objects/_backdrop.scss | 4 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 2 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 4 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 8 | ||||
-rw-r--r-- | src/objects/_heading.scss | 18 | ||||
-rw-r--r-- | src/objects/_menu.scss | 8 | ||||
-rw-r--r-- | src/objects/_radio.scss | 2 | ||||
-rw-r--r-- | src/objects/_rule.scss | 8 | ||||
-rw-r--r-- | src/objects/_switch.scss | 2 |
16 files changed, 117 insertions, 97 deletions
diff --git a/src/_base.scss b/src/_base.scss index 61dae42..a0f785c 100644 --- a/src/_base.scss +++ b/src/_base.scss | |||
@@ -9,7 +9,7 @@ body { | |||
9 | } | 9 | } |
10 | 10 | ||
11 | body { | 11 | body { |
12 | @include mx.set-font(--standard, (--size: fn.dim(--font-size --md))); | 12 | @include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); |
13 | 13 | ||
14 | margin: 0; | 14 | margin: 0; |
15 | padding: 0; | 15 | padding: 0; |
@@ -19,7 +19,7 @@ body { | |||
19 | 19 | ||
20 | pre, | 20 | pre, |
21 | code { | 21 | code { |
22 | @include mx.set-font(--mono, (--size: fn.dim(--font-size --sm))); | 22 | @include mx.set-font(--mono, (--size: fn.dim(--font-size --75))); |
23 | } | 23 | } |
24 | 24 | ||
25 | pre { | 25 | pre { |
@@ -60,7 +60,7 @@ strong { | |||
60 | 60 | ||
61 | small { | 61 | small { |
62 | color: fn.color(--fg-hi); | 62 | color: fn.color(--fg-hi); |
63 | font-size: fn.dim(--font-size --sm); | 63 | font-size: fn.dim(--font-size --75); |
64 | } | 64 | } |
65 | 65 | ||
66 | ul, | 66 | ul, |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 6b3cb4f..3f1320a 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -5,24 +5,52 @@ | |||
5 | 5 | ||
6 | @include iro.props-store(( | 6 | @include iro.props-store(( |
7 | --dims: ( | 7 | --dims: ( |
8 | --spacing: ( | 8 | --size: ( |
9 | --base: iro.fn-px-to-rem(24px), | 9 | --0: 0, |
10 | --factors: ( | 10 | --10: iro.fn-px-to-rem(1px), |
11 | --xxs: .125, | 11 | --25: iro.fn-px-to-rem(2px), |
12 | --xs: .25, | 12 | --40: iro.fn-px-to-rem(3px), |
13 | --sm: .5, | 13 | --50: iro.fn-px-to-rem(4px), |
14 | --md: 1, | 14 | --65: iro.fn-px-to-rem(5px), |
15 | --lg: 1.5, | 15 | --75: iro.fn-px-to-rem(6px), |
16 | --xl: 2, | 16 | --85: iro.fn-px-to-rem(7px), |
17 | --xxl: 2.5, | 17 | --100: iro.fn-px-to-rem(8px), |
18 | ), | 18 | --115: iro.fn-px-to-rem(9px), |
19 | --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)), | 19 | --125: iro.fn-px-to-rem(10px), |
20 | --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), | 20 | --130: iro.fn-px-to-rem(11px), |
21 | --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), | 21 | --150: iro.fn-px-to-rem(12px), |
22 | --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), | 22 | --160: iro.fn-px-to-rem(13px), |
23 | --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), | 23 | --175: iro.fn-px-to-rem(14px), |
24 | --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), | 24 | --200: iro.fn-px-to-rem(16px), |
25 | --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)), | 25 | --225: iro.fn-px-to-rem(18px), |
26 | --250: iro.fn-px-to-rem(20px), | ||
27 | --275: iro.fn-px-to-rem(22px), | ||
28 | --300: iro.fn-px-to-rem(24px), | ||
29 | --325: iro.fn-px-to-rem(26px), | ||
30 | --400: iro.fn-px-to-rem(32px), | ||
31 | --450: iro.fn-px-to-rem(36px), | ||
32 | --500: iro.fn-px-to-rem(40px), | ||
33 | --550: iro.fn-px-to-rem(44px), | ||
34 | --600: iro.fn-px-to-rem(48px), | ||
35 | --700: iro.fn-px-to-rem(56px), | ||
36 | --800: iro.fn-px-to-rem(64px), | ||
37 | --900: iro.fn-px-to-rem(72px), | ||
38 | --1000: iro.fn-px-to-rem(80px), | ||
39 | --1200: iro.fn-px-to-rem(96px), | ||
40 | --1700: iro.fn-px-to-rem(136px), | ||
41 | --2400: iro.fn-px-to-rem(192px), | ||
42 | --2500: iro.fn-px-to-rem(200px), | ||
43 | --2600: iro.fn-px-to-rem(208px), | ||
44 | --2800: iro.fn-px-to-rem(224px), | ||
45 | --3200: iro.fn-px-to-rem(256px), | ||
46 | --3400: iro.fn-px-to-rem(272px), | ||
47 | --3500: iro.fn-px-to-rem(280px), | ||
48 | --3600: iro.fn-px-to-rem(288px), | ||
49 | --3800: iro.fn-px-to-rem(304px), | ||
50 | --4600: iro.fn-px-to-rem(368px), | ||
51 | --5000: iro.fn-px-to-rem(400px), | ||
52 | --6000: iro.fn-px-to-rem(480px), | ||
53 | --16000: iro.fn-px-to-rem(1280px), | ||
26 | ), | 54 | ), |
27 | 55 | ||
28 | --font: ( | 56 | --font: ( |
@@ -42,13 +70,13 @@ | |||
42 | ), | 70 | ), |
43 | 71 | ||
44 | --font-size: ( | 72 | --font-size: ( |
45 | --xs: iro.fn-px-to-rem(11px), | 73 | --50: iro.fn-px-to-rem(11px), |
46 | --sm: iro.fn-px-to-rem(13px), | 74 | --75: iro.fn-px-to-rem(13px), |
47 | --md: iro.fn-px-to-rem(14px), | 75 | --100: iro.fn-px-to-rem(14px), |
48 | --lg: iro.fn-px-to-rem(16px), | 76 | --150: iro.fn-px-to-rem(16px), |
49 | --xl: iro.fn-px-to-rem(18px), | 77 | --200: iro.fn-px-to-rem(18px), |
50 | --xxl: iro.fn-px-to-rem(22px), | 78 | --300: iro.fn-px-to-rem(22px), |
51 | --xxxl: iro.fn-px-to-rem(28px), | 79 | --400: iro.fn-px-to-rem(28px), |
52 | ), | 80 | ), |
53 | 81 | ||
54 | --border-width: ( | 82 | --border-width: ( |
@@ -60,7 +88,7 @@ | |||
60 | --focus-outline-width: 3px, | 88 | --focus-outline-width: 3px, |
61 | 89 | ||
62 | --paragraph: ( | 90 | --paragraph: ( |
63 | --margin-top: fn.dim(--spacing --sm, null), | 91 | --margin-top: fn.dim(--size --150, null), |
64 | ), | 92 | ), |
65 | 93 | ||
66 | --list: ( | 94 | --list: ( |
diff --git a/src/_utils.scss b/src/_utils.scss index 99c751c..89aabd2 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
@@ -39,13 +39,9 @@ $dirs: ( | |||
39 | margin#{$suffix}: auto; | 39 | margin#{$suffix}: auto; |
40 | } | 40 | } |
41 | 41 | ||
42 | @include iro.bem-utility('m#{$dir}-0') { | 42 | @each $size in (0 50 100) { |
43 | margin#{$suffix}: 0; | ||
44 | } | ||
45 | |||
46 | @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') { | ||
47 | @include iro.bem-utility('m#{$dir}-#{$size}') { | 43 | @include iro.bem-utility('m#{$dir}-#{$size}') { |
48 | margin#{$suffix}: fn.global-dim(--spacing --#{$size}); | 44 | margin#{$suffix}: fn.global-dim(--size --#{$size}); |
49 | } | 45 | } |
50 | } | 46 | } |
51 | } | 47 | } |
@@ -55,13 +51,9 @@ $dirs: ( | |||
55 | padding#{$suffix}: auto; | 51 | padding#{$suffix}: auto; |
56 | } | 52 | } |
57 | 53 | ||
58 | @include iro.bem-utility('p#{$dir}-0') { | 54 | @each $size in (0 50 100) { |
59 | padding#{$suffix}: 0; | ||
60 | } | ||
61 | |||
62 | @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') { | ||
63 | @include iro.bem-utility('p#{$dir}-#{$size}') { | 55 | @include iro.bem-utility('p#{$dir}-#{$size}') { |
64 | padding#{$suffix}: fn.global-dim(--spacing --#{$size}); | 56 | padding#{$suffix}: fn.global-dim(--size --#{$size}); |
65 | } | 57 | } |
66 | } | 58 | } |
67 | } | 59 | } |
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index a0220c3..6b66a35 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss | |||
@@ -5,15 +5,15 @@ | |||
5 | @include iro.props-namespace('card') { | 5 | @include iro.props-namespace('card') { |
6 | @include iro.props-store(( | 6 | @include iro.props-store(( |
7 | --dims: ( | 7 | --dims: ( |
8 | --pad-x: fn.global-dim(--spacing --sm), | 8 | --pad-x: fn.global-dim(--size --150), |
9 | --pad-y: fn.global-dim(--spacing --xs), | 9 | --pad-y: fn.global-dim(--size --85), |
10 | --sm: ( | 10 | --75: ( |
11 | --pad-x: fn.global-dim(--spacing --xs), | 11 | --pad-x: fn.global-dim(--size --100), |
12 | --pad-y: fn.global-dim(--spacing --xxs), | 12 | --pad-y: fn.global-dim(--size --50), |
13 | ), | 13 | ), |
14 | --lg: ( | 14 | --200: ( |
15 | --pad-x: fn.global-dim(--spacing --md), | 15 | --pad-x: fn.global-dim(--size --300), |
16 | --pad-y: fn.global-dim(--spacing --sm), | 16 | --pad-y: fn.global-dim(--size --150), |
17 | ) | 17 | ) |
18 | ) | 18 | ) |
19 | ), 'dims'); | 19 | ), 'dims'); |
@@ -25,14 +25,14 @@ | |||
25 | gap: fn.dim(--pad-x); | 25 | gap: fn.dim(--pad-x); |
26 | line-height: 1.4; | 26 | line-height: 1.4; |
27 | 27 | ||
28 | @include iro.bem-modifier('sm') { | 28 | @include iro.bem-modifier('75') { |
29 | padding: fn.dim(--sm --pad-y) fn.dim(--sm --pad-x); | 29 | padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); |
30 | gap: fn.dim(--sm --pad-x); | 30 | gap: fn.dim(--75 --pad-x); |
31 | } | 31 | } |
32 | 32 | ||
33 | @include iro.bem-modifier('lg') { | 33 | @include iro.bem-modifier('200') { |
34 | padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x); | 34 | padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); |
35 | gap: fn.dim(--lg --pad-x); | 35 | gap: fn.dim(--200 --pad-x); |
36 | } | 36 | } |
37 | 37 | ||
38 | @include iro.bem-modifier('flush') { | 38 | @include iro.bem-modifier('flush') { |
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index d3ecb5f..b8fc879 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss | |||
@@ -7,9 +7,9 @@ | |||
7 | --dims: ( | 7 | --dims: ( |
8 | --content-width: iro.fn-px-to-rem(700px), | 8 | --content-width: iro.fn-px-to-rem(700px), |
9 | --sm-content-width: iro.fn-px-to-rem(360px), | 9 | --sm-content-width: iro.fn-px-to-rem(360px), |
10 | --pad-x: fn.global-dim(--spacing --xl), | 10 | --pad-x: fn.global-dim(--size --700), |
11 | --pad-y: fn.global-dim(--spacing --xl), | 11 | --pad-y: fn.global-dim(--size --700), |
12 | --in-page-spacing-y: fn.global-dim(--spacing --xl), | 12 | --in-page-spacing-y: fn.global-dim(--size --700), |
13 | ) | 13 | ) |
14 | ), 'dims'); | 14 | ), 'dims'); |
15 | 15 | ||
@@ -17,8 +17,8 @@ | |||
17 | overflow: hidden; | 17 | overflow: hidden; |
18 | 18 | ||
19 | @include iro.bem-elem('inner') { | 19 | @include iro.bem-elem('inner') { |
20 | margin-top: calc(-1 * fn.global-dim(--spacing --xl)); | 20 | margin-top: calc(-1 * fn.global-dim(--size --700)); |
21 | margin-bottom: calc(-1 * fn.global-dim(--spacing --xl)); | 21 | margin-bottom: calc(-1 * fn.global-dim(--size --700)); |
22 | 22 | ||
23 | &::before, | 23 | &::before, |
24 | &::after { | 24 | &::after { |
@@ -29,11 +29,11 @@ | |||
29 | } | 29 | } |
30 | 30 | ||
31 | &::before { | 31 | &::before { |
32 | margin-bottom: fn.global-dim(--spacing --xl); | 32 | margin-bottom: fn.global-dim(--size --700); |
33 | } | 33 | } |
34 | 34 | ||
35 | &::after { | 35 | &::after { |
36 | margin-top: fn.global-dim(--spacing --xl); | 36 | margin-top: fn.global-dim(--size --700); |
37 | } | 37 | } |
38 | } | 38 | } |
39 | 39 | ||
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index a8308af..8228c44 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss | |||
@@ -6,9 +6,9 @@ | |||
6 | @include iro.props-namespace('form') { | 6 | @include iro.props-namespace('form') { |
7 | @include iro.props-store(( | 7 | @include iro.props-store(( |
8 | --dims: ( | 8 | --dims: ( |
9 | --item-spacing-y: fn.global-dim(--spacing --md), | 9 | --item-spacing-y: fn.global-dim(--size --325), |
10 | --label-spacing-x: fn.global-dim(--spacing --md), | 10 | --label-spacing-x: fn.global-dim(--size --325), |
11 | --hint-font-size: fn.global-dim(--font-size --sm), | 11 | --hint-font-size: fn.global-dim(--font-size --75), |
12 | ), | 12 | ), |
13 | ), 'dims'); | 13 | ), 'dims'); |
14 | 14 | ||
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index e69b381..f122417 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -5,13 +5,13 @@ | |||
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: 0, | 7 | --pad-x: 0, |
8 | --pad-y: fn.global-dim(--spacing --xs), | 8 | --pad-y: fn.global-dim(--size --85), |
9 | --separator: fn.global-dim(--spacing --xs), | 9 | --separator: fn.global-dim(--size --85), |
10 | --rounding: 3px, | 10 | --rounding: 3px, |
11 | --border: 1px, | 11 | --border: 1px, |
12 | --item: ( | 12 | --item: ( |
13 | --pad-x: fn.global-dim(--spacing --sm), | 13 | --pad-x: fn.global-dim(--size --150), |
14 | --pad-y: fn.global-dim(--spacing --xs), | 14 | --pad-y: fn.global-dim(--size --85), |
15 | ), | 15 | ), |
16 | ), | 16 | ), |
17 | ), 'dims'); | 17 | ), 'dims'); |
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index ddf4ea0..5957ffa 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
@@ -5,8 +5,8 @@ | |||
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --z-index: 10000, | 7 | --z-index: 10000, |
8 | --pad-x: fn.global-dim(--spacing --sm), | 8 | --pad-x: fn.global-dim(--size --150), |
9 | --pad-y: fn.global-dim(--spacing --sm), | 9 | --pad-y: fn.global-dim(--size --150), |
10 | ), | 10 | ), |
11 | ), 'dims'); | 11 | ), 'dims'); |
12 | 12 | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index b7762d2..107d7ad 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | --border-width: fn.global-dim(--border-width --medium), | 9 | --border-width: fn.global-dim(--border-width --medium), |
10 | --pad-x: iro.fn-px-to-rem(5px), | 10 | --pad-x: iro.fn-px-to-rem(5px), |
11 | --pad-y: iro.fn-px-to-rem(5px), | 11 | --pad-y: iro.fn-px-to-rem(5px), |
12 | --margin-right: fn.global-dim(--spacing --md), | 12 | --margin-right: fn.global-dim(--size --325), |
13 | ), | 13 | ), |
14 | ), 'dims'); | 14 | ), 'dims'); |
15 | 15 | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 050b7ca..bf0defb 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -10,7 +10,7 @@ | |||
10 | --width-md: iro.fn-px-to-rem(800px), | 10 | --width-md: iro.fn-px-to-rem(800px), |
11 | --width-lg: iro.fn-px-to-rem(1100px), | 11 | --width-lg: iro.fn-px-to-rem(1100px), |
12 | --rounding: 3px, | 12 | --rounding: 3px, |
13 | --title-body-spacing: fn.global-dim(--spacing --sm), | 13 | --title-body-spacing: fn.global-dim(--size --150), |
14 | ), | 14 | ), |
15 | ), 'dims'); | 15 | ), 'dims'); |
16 | 16 | ||
@@ -53,7 +53,7 @@ | |||
53 | position: absolute; | 53 | position: absolute; |
54 | top: iro.fn-px-to-rem(12px); | 54 | top: iro.fn-px-to-rem(12px); |
55 | right: iro.fn-px-to-rem(12px); | 55 | right: iro.fn-px-to-rem(12px); |
56 | font-size: fn.global-dim(--font-size --lg); | 56 | font-size: fn.global-dim(--font-size --150); |
57 | } | 57 | } |
58 | 58 | ||
59 | @include iro.bem-elem('rule') { | 59 | @include iro.bem-elem('rule') { |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index a42be1d..e990568 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -4,10 +4,10 @@ | |||
4 | @include iro.props-namespace('field-label') { | 4 | @include iro.props-namespace('field-label') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --spacing-x: fn.global-dim(--spacing --sm), | 7 | --spacing-x: fn.global-dim(--size --150), |
8 | --spacing-y: fn.global-dim(--spacing --xs), | 8 | --spacing-y: fn.global-dim(--size --85), |
9 | --label-font-size: fn.global-dim(--font-size --sm), | 9 | --label-font-size: fn.global-dim(--font-size --75), |
10 | --hint-font-size: fn.global-dim(--font-size --sm), | 10 | --hint-font-size: fn.global-dim(--font-size --75), |
11 | ), | 11 | ), |
12 | ), 'dims'); | 12 | ), 'dims'); |
13 | 13 | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index b5f02d8..48088ba 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -6,9 +6,9 @@ | |||
6 | @include iro.props-store(( | 6 | @include iro.props-store(( |
7 | --dims: ( | 7 | --dims: ( |
8 | --in-page-margin: ( | 8 | --in-page-margin: ( |
9 | --top: fn.global-dim(--spacing --lg), | 9 | --top: fn.global-dim(--size --500), |
10 | --top-sibling: fn.global-dim(--spacing --md), | 10 | --top-sibling: fn.global-dim(--size --325), |
11 | --bottom: fn.global-dim(--spacing --sm), | 11 | --bottom: fn.global-dim(--size --150), |
12 | ), | 12 | ), |
13 | ), | 13 | ), |
14 | ), 'dims'); | 14 | ), 'dims'); |
@@ -33,28 +33,28 @@ | |||
33 | 33 | ||
34 | @include iro.bem-modifier('xxl') { | 34 | @include iro.bem-modifier('xxl') { |
35 | color: fn.color(--strong); | 35 | color: fn.color(--strong); |
36 | font-size: fn.global-dim(--font-size --xxxl); | 36 | font-size: fn.global-dim(--font-size --400); |
37 | } | 37 | } |
38 | 38 | ||
39 | @include iro.bem-modifier('xl') { | 39 | @include iro.bem-modifier('xl') { |
40 | color: fn.color(--strong); | 40 | color: fn.color(--strong); |
41 | font-size: fn.global-dim(--font-size --xxl); | 41 | font-size: fn.global-dim(--font-size --300); |
42 | } | 42 | } |
43 | 43 | ||
44 | @include iro.bem-modifier('lg') { | 44 | @include iro.bem-modifier('lg') { |
45 | color: fn.color(--strong); | 45 | color: fn.color(--strong); |
46 | font-size: fn.global-dim(--font-size --xl); | 46 | font-size: fn.global-dim(--font-size --200); |
47 | } | 47 | } |
48 | 48 | ||
49 | @include iro.bem-modifier('md') { | 49 | @include iro.bem-modifier('md') { |
50 | color: fn.color(--strong); | 50 | color: fn.color(--strong); |
51 | font-size: fn.global-dim(--font-size --lg); | 51 | font-size: fn.global-dim(--font-size --150); |
52 | } | 52 | } |
53 | 53 | ||
54 | @include iro.bem-modifier('sm') { | 54 | @include iro.bem-modifier('sm') { |
55 | @include mx.set-font(--standard, ( | 55 | @include mx.set-font(--standard, ( |
56 | --line-height: null, | 56 | --line-height: null, |
57 | --size: fn.global-dim(--font-size --md), | 57 | --size: fn.global-dim(--font-size --100), |
58 | --weight: 500 | 58 | --weight: 500 |
59 | )); | 59 | )); |
60 | 60 | ||
@@ -64,7 +64,7 @@ | |||
64 | @include iro.bem-modifier('xs') { | 64 | @include iro.bem-modifier('xs') { |
65 | @include mx.set-font(--standard, ( | 65 | @include mx.set-font(--standard, ( |
66 | --line-height: null, | 66 | --line-height: null, |
67 | --size: fn.global-dim(--font-size --xs), | 67 | --size: fn.global-dim(--font-size --50), |
68 | --weight: 500, | 68 | --weight: 500, |
69 | --transform: uppercase, | 69 | --transform: uppercase, |
70 | --spacing: .5px | 70 | --spacing: .5px |
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 851e32a..869b367 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -4,10 +4,10 @@ | |||
4 | @include iro.props-namespace('menu') { | 4 | @include iro.props-namespace('menu') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --separator: fn.global-dim(--spacing --xs), | 7 | --separator: fn.global-dim(--size --85), |
8 | --item: ( | 8 | --item: ( |
9 | --pad-x: fn.global-dim(--spacing --sm), | 9 | --pad-x: fn.global-dim(--size --150), |
10 | --pad-y: fn.global-dim(--spacing --xs), | 10 | --pad-y: fn.global-dim(--size --85), |
11 | ), | 11 | ), |
12 | ), | 12 | ), |
13 | ), 'dims'); | 13 | ), 'dims'); |
@@ -42,7 +42,7 @@ | |||
42 | fn.dim(--item --pad-x) | 42 | fn.dim(--item --pad-x) |
43 | calc(.5 * fn.dim(--item --pad-y)); | 43 | calc(.5 * fn.dim(--item --pad-y)); |
44 | color: fn.color(--header --label); | 44 | color: fn.color(--header --label); |
45 | font-size: fn.global-dim(--font-size --xs); | 45 | font-size: fn.global-dim(--font-size --50); |
46 | font-weight: 500; | 46 | font-weight: 500; |
47 | letter-spacing: .5px; | 47 | letter-spacing: .5px; |
48 | text-transform: uppercase; | 48 | text-transform: uppercase; |
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 7346a74..96a5174 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | --border-width: fn.global-dim(--border-width --medium), | 9 | --border-width: fn.global-dim(--border-width --medium), |
10 | --pad-x: iro.fn-px-to-rem(5px), | 10 | --pad-x: iro.fn-px-to-rem(5px), |
11 | --pad-y: iro.fn-px-to-rem(5px), | 11 | --pad-y: iro.fn-px-to-rem(5px), |
12 | --margin-right: fn.global-dim(--spacing --md), | 12 | --margin-right: fn.global-dim(--size --325), |
13 | ), | 13 | ), |
14 | ), 'dims'); | 14 | ), 'dims'); |
15 | 15 | ||
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index 1892a3d..777e864 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss | |||
@@ -4,19 +4,19 @@ | |||
4 | @include iro.props-namespace('rule') { | 4 | @include iro.props-namespace('rule') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --margin-y: fn.global-dim(--spacing --xs), | 7 | --margin-y: fn.global-dim(--size --85), |
8 | 8 | ||
9 | --strong: ( | 9 | --strong: ( |
10 | --border-width: fn.global-dim(--border-width --thick), | 10 | --border-width: fn.global-dim(--border-width --thick), |
11 | --label-font-size: fn.global-dim(--font-size --md), | 11 | --label-font-size: fn.global-dim(--font-size --100), |
12 | ), | 12 | ), |
13 | --medium: ( | 13 | --medium: ( |
14 | --border-width: fn.global-dim(--border-width --medium), | 14 | --border-width: fn.global-dim(--border-width --medium), |
15 | --label-font-size: fn.global-dim(--font-size --sm), | 15 | --label-font-size: fn.global-dim(--font-size --75), |
16 | ), | 16 | ), |
17 | --faint: ( | 17 | --faint: ( |
18 | --border-width: fn.global-dim(--border-width --thin), | 18 | --border-width: fn.global-dim(--border-width --thin), |
19 | --label-font-size: fn.global-dim(--font-size --xs), | 19 | --label-font-size: fn.global-dim(--font-size --50), |
20 | ), | 20 | ), |
21 | ), | 21 | ), |
22 | ), 'dims'); | 22 | ), 'dims'); |
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 06b5540..b5aa839 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
@@ -10,7 +10,7 @@ | |||
10 | --border-width: fn.global-dim(--border-width --medium), | 10 | --border-width: fn.global-dim(--border-width --medium), |
11 | --pad-x: iro.fn-px-to-rem(5px), | 11 | --pad-x: iro.fn-px-to-rem(5px), |
12 | --pad-y: iro.fn-px-to-rem(5px), | 12 | --pad-y: iro.fn-px-to-rem(5px), |
13 | --margin-right: fn.global-dim(--spacing --md), | 13 | --margin-right: fn.global-dim(--size --325), |
14 | ), | 14 | ), |
15 | ), 'dims'); | 15 | ), 'dims'); |
16 | 16 | ||