Restructured size variables

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/objects
parent: Adjusted spacings (diff)
download: iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.gz
iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.bz2
iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.zip
10 files changed, 32 insertions, 32 deletions
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 @@
    @include iro.props-store((
        --dims: (
            --pad-x:     0,
-            --pad-y:     fn.global-dim(--spacing --xs),
+            --pad-y:     fn.global-dim(--size --85),
-            --separator: fn.global-dim(--spacing --xs),
+            --separator: fn.global-dim(--size --85),
            --rounding:  3px,
            --border:    1px,
            --item: (
-                --pad-x: fn.global-dim(--spacing --sm),
+                --pad-x: fn.global-dim(--size --150),
-                --pad-y: fn.global-dim(--spacing --xs),
+                --pad-y: fn.global-dim(--size --85),
            ),
        ),
    ), '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 @@
    @include iro.props-store((
        --dims: (
            --z-index: 10000,
-            --pad-x:   fn.global-dim(--spacing --sm),
+            --pad-x:   fn.global-dim(--size --150),
-            --pad-y:   fn.global-dim(--spacing --sm),
+            --pad-y:   fn.global-dim(--size --150),
        ),
    ), 'dims');
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 @@
            --border-width: fn.global-dim(--border-width --medium),
            --pad-x:        iro.fn-px-to-rem(5px),
            --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
        ),
    ), 'dims');
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 @@
            --width-md:           iro.fn-px-to-rem(800px),
            --width-lg:           iro.fn-px-to-rem(1100px),
            --rounding:           3px,
-            --title-body-spacing: fn.global-dim(--spacing --sm),
+            --title-body-spacing: fn.global-dim(--size --150),
        ),
    ), 'dims');
@@ -53,7 +53,7 @@
            position:  absolute;
            top:       iro.fn-px-to-rem(12px);
            right:     iro.fn-px-to-rem(12px);
-            font-size: fn.global-dim(--font-size --lg);
+            font-size: fn.global-dim(--font-size --150);
        }
        @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 @@
 @include iro.props-namespace('field-label') {
    @include iro.props-store((
        --dims: (
-            --spacing-x:       fn.global-dim(--spacing --sm),
+            --spacing-x:       fn.global-dim(--size --150),
-            --spacing-y:       fn.global-dim(--spacing --xs),
+            --spacing-y:       fn.global-dim(--size --85),
-            --label-font-size: fn.global-dim(--font-size --sm),
+            --label-font-size: fn.global-dim(--font-size --75),
-            --hint-font-size:  fn.global-dim(--font-size --sm),
+            --hint-font-size:  fn.global-dim(--font-size --75),
        ),
    ), 'dims');
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 @@
    @include iro.props-store((
        --dims: (
            --in-page-margin: (
-                --top:         fn.global-dim(--spacing --lg),
+                --top:         fn.global-dim(--size --500),
-                --top-sibling: fn.global-dim(--spacing --md),
+                --top-sibling: fn.global-dim(--size --325),
-                --bottom:      fn.global-dim(--spacing --sm),
+                --bottom:      fn.global-dim(--size --150),
            ),
        ),
    ), 'dims');
@@ -33,28 +33,28 @@
        @include iro.bem-modifier('xxl') {
            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xxxl);
+            font-size: fn.global-dim(--font-size --400);
        }
        @include iro.bem-modifier('xl') {
            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xxl);
+            font-size: fn.global-dim(--font-size --300);
        }
        @include iro.bem-modifier('lg') {
            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xl);
+            font-size: fn.global-dim(--font-size --200);
        }
        @include iro.bem-modifier('md') {
            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --lg);
+            font-size: fn.global-dim(--font-size --150);
        }
        @include iro.bem-modifier('sm') {
            @include mx.set-font(--standard, (
                --line-height: null,
-                --size: fn.global-dim(--font-size --md),
+                --size: fn.global-dim(--font-size --100),
                --weight: 500
            ));
@@ -64,7 +64,7 @@
        @include iro.bem-modifier('xs') {
            @include mx.set-font(--standard, (
                --line-height: null,
-                --size:        fn.global-dim(--font-size --xs),
+                --size:        fn.global-dim(--font-size --50),
                --weight:      500,
                --transform:   uppercase,
                --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 @@
 @include iro.props-namespace('menu') {
    @include iro.props-store((
        --dims: (
-            --separator: fn.global-dim(--spacing --xs),
+            --separator: fn.global-dim(--size --85),
            --item: (
-                --pad-x: fn.global-dim(--spacing --sm),
+                --pad-x: fn.global-dim(--size --150),
-                --pad-y: fn.global-dim(--spacing --xs),
+                --pad-y: fn.global-dim(--size --85),
            ),
        ),
    ), 'dims');
@@ -42,7 +42,7 @@
                fn.dim(--item --pad-x)
                calc(.5 * fn.dim(--item --pad-y));
            color:          fn.color(--header --label);
-            font-size:      fn.global-dim(--font-size --xs);
+            font-size:      fn.global-dim(--font-size --50);
            font-weight:    500;
            letter-spacing: .5px;
            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 @@
            --border-width: fn.global-dim(--border-width --medium),
            --pad-x:        iro.fn-px-to-rem(5px),
            --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
        ),
    ), 'dims');
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 @@
 @include iro.props-namespace('rule') {
    @include iro.props-store((
        --dims: (
-            --margin-y: fn.global-dim(--spacing --xs),
+            --margin-y: fn.global-dim(--size --85),
    
            --strong: (
                --border-width:    fn.global-dim(--border-width --thick),
-                --label-font-size: fn.global-dim(--font-size --md),
+                --label-font-size: fn.global-dim(--font-size --100),
            ),
            --medium: (
                --border-width:    fn.global-dim(--border-width --medium),
-                --label-font-size: fn.global-dim(--font-size --sm),
+                --label-font-size: fn.global-dim(--font-size --75),
            ),
            --faint: (
                --border-width:    fn.global-dim(--border-width --thin),
-                --label-font-size: fn.global-dim(--font-size --xs),
+                --label-font-size: fn.global-dim(--font-size --50),
            ),
        ),
    ), '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 @@
            --border-width: fn.global-dim(--border-width --medium),
            --pad-x:        iro.fn-px-to-rem(5px),
            --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
        ),
    ), 'dims');
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/objects
parent	Adjusted spacings (diff)
download	iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.gz iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.tar.bz2 iro-design-248a90eb5fe1f5fa624423b81d0b18df85fabe35.zip

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