summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-14 18:45:32 +0100
committerVolpeon <git@volpeon.ink>2022-02-14 18:45:32 +0100
commit248a90eb5fe1f5fa624423b81d0b18df85fabe35 (patch)
treea6d112b0929f065ebf7ac6d2916550d6dc5ff469 /src
parentAdjusted spacings (diff)
downloadiro-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.scss6
-rw-r--r--src/_declare-vars.scss80
-rw-r--r--src/_utils.scss16
-rw-r--r--src/layouts/_card.scss28
-rw-r--r--src/layouts/_container.scss14
-rw-r--r--src/layouts/_form.scss6
-rw-r--r--src/objects/_action-menu.scss8
-rw-r--r--src/objects/_backdrop.scss4
-rw-r--r--src/objects/_checkbox.scss2
-rw-r--r--src/objects/_dialog.scss4
-rw-r--r--src/objects/_field-label.scss8
-rw-r--r--src/objects/_heading.scss18
-rw-r--r--src/objects/_menu.scss8
-rw-r--r--src/objects/_radio.scss2
-rw-r--r--src/objects/_rule.scss8
-rw-r--r--src/objects/_switch.scss2
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
11body { 11body {
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
20pre, 20pre,
21code { 21code {
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
25pre { 25pre {
@@ -60,7 +60,7 @@ strong {
60 60
61small { 61small {
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
66ul, 66ul,
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