From 248a90eb5fe1f5fa624423b81d0b18df85fabe35 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Feb 2022 18:45:32 +0100 Subject: Restructured size variables --- src/_base.scss | 6 ++-- src/_declare-vars.scss | 80 +++++++++++++++++++++++++++++-------------- src/_utils.scss | 16 +++------ src/layouts/_card.scss | 28 +++++++-------- src/layouts/_container.scss | 14 ++++---- src/layouts/_form.scss | 6 ++-- src/objects/_action-menu.scss | 8 ++--- src/objects/_backdrop.scss | 4 +-- src/objects/_checkbox.scss | 2 +- src/objects/_dialog.scss | 4 +-- src/objects/_field-label.scss | 8 ++--- src/objects/_heading.scss | 18 +++++----- src/objects/_menu.scss | 8 ++--- src/objects/_radio.scss | 2 +- src/objects/_rule.scss | 8 ++--- src/objects/_switch.scss | 2 +- 16 files changed, 117 insertions(+), 97 deletions(-) (limited to 'src') 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 { } body { - @include mx.set-font(--standard, (--size: fn.dim(--font-size --md))); + @include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); margin: 0; padding: 0; @@ -19,7 +19,7 @@ body { pre, code { - @include mx.set-font(--mono, (--size: fn.dim(--font-size --sm))); + @include mx.set-font(--mono, (--size: fn.dim(--font-size --75))); } pre { @@ -60,7 +60,7 @@ strong { small { color: fn.color(--fg-hi); - font-size: fn.dim(--font-size --sm); + font-size: fn.dim(--font-size --75); } 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 @@ @include iro.props-store(( --dims: ( - --spacing: ( - --base: iro.fn-px-to-rem(24px), - --factors: ( - --xxs: .125, - --xs: .25, - --sm: .5, - --md: 1, - --lg: 1.5, - --xl: 2, - --xxl: 2.5, - ), - --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)), - --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), - --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), - --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), - --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), - --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), - --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)), + --size: ( + --0: 0, + --10: iro.fn-px-to-rem(1px), + --25: iro.fn-px-to-rem(2px), + --40: iro.fn-px-to-rem(3px), + --50: iro.fn-px-to-rem(4px), + --65: iro.fn-px-to-rem(5px), + --75: iro.fn-px-to-rem(6px), + --85: iro.fn-px-to-rem(7px), + --100: iro.fn-px-to-rem(8px), + --115: iro.fn-px-to-rem(9px), + --125: iro.fn-px-to-rem(10px), + --130: iro.fn-px-to-rem(11px), + --150: iro.fn-px-to-rem(12px), + --160: iro.fn-px-to-rem(13px), + --175: iro.fn-px-to-rem(14px), + --200: iro.fn-px-to-rem(16px), + --225: iro.fn-px-to-rem(18px), + --250: iro.fn-px-to-rem(20px), + --275: iro.fn-px-to-rem(22px), + --300: iro.fn-px-to-rem(24px), + --325: iro.fn-px-to-rem(26px), + --400: iro.fn-px-to-rem(32px), + --450: iro.fn-px-to-rem(36px), + --500: iro.fn-px-to-rem(40px), + --550: iro.fn-px-to-rem(44px), + --600: iro.fn-px-to-rem(48px), + --700: iro.fn-px-to-rem(56px), + --800: iro.fn-px-to-rem(64px), + --900: iro.fn-px-to-rem(72px), + --1000: iro.fn-px-to-rem(80px), + --1200: iro.fn-px-to-rem(96px), + --1700: iro.fn-px-to-rem(136px), + --2400: iro.fn-px-to-rem(192px), + --2500: iro.fn-px-to-rem(200px), + --2600: iro.fn-px-to-rem(208px), + --2800: iro.fn-px-to-rem(224px), + --3200: iro.fn-px-to-rem(256px), + --3400: iro.fn-px-to-rem(272px), + --3500: iro.fn-px-to-rem(280px), + --3600: iro.fn-px-to-rem(288px), + --3800: iro.fn-px-to-rem(304px), + --4600: iro.fn-px-to-rem(368px), + --5000: iro.fn-px-to-rem(400px), + --6000: iro.fn-px-to-rem(480px), + --16000: iro.fn-px-to-rem(1280px), ), --font: ( @@ -42,13 +70,13 @@ ), --font-size: ( - --xs: iro.fn-px-to-rem(11px), - --sm: iro.fn-px-to-rem(13px), - --md: iro.fn-px-to-rem(14px), - --lg: iro.fn-px-to-rem(16px), - --xl: iro.fn-px-to-rem(18px), - --xxl: iro.fn-px-to-rem(22px), - --xxxl: iro.fn-px-to-rem(28px), + --50: iro.fn-px-to-rem(11px), + --75: iro.fn-px-to-rem(13px), + --100: iro.fn-px-to-rem(14px), + --150: iro.fn-px-to-rem(16px), + --200: iro.fn-px-to-rem(18px), + --300: iro.fn-px-to-rem(22px), + --400: iro.fn-px-to-rem(28px), ), --border-width: ( @@ -60,7 +88,7 @@ --focus-outline-width: 3px, --paragraph: ( - --margin-top: fn.dim(--spacing --sm, null), + --margin-top: fn.dim(--size --150, null), ), --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: ( margin#{$suffix}: auto; } - @include iro.bem-utility('m#{$dir}-0') { - margin#{$suffix}: 0; - } - - @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') { + @each $size in (0 50 100) { @include iro.bem-utility('m#{$dir}-#{$size}') { - margin#{$suffix}: fn.global-dim(--spacing --#{$size}); + margin#{$suffix}: fn.global-dim(--size --#{$size}); } } } @@ -55,13 +51,9 @@ $dirs: ( padding#{$suffix}: auto; } - @include iro.bem-utility('p#{$dir}-0') { - padding#{$suffix}: 0; - } - - @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') { + @each $size in (0 50 100) { @include iro.bem-utility('p#{$dir}-#{$size}') { - padding#{$suffix}: fn.global-dim(--spacing --#{$size}); + padding#{$suffix}: fn.global-dim(--size --#{$size}); } } } 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 @@ @include iro.props-namespace('card') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--spacing --sm), - --pad-y: fn.global-dim(--spacing --xs), - --sm: ( - --pad-x: fn.global-dim(--spacing --xs), - --pad-y: fn.global-dim(--spacing --xxs), + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + --75: ( + --pad-x: fn.global-dim(--size --100), + --pad-y: fn.global-dim(--size --50), ), - --lg: ( - --pad-x: fn.global-dim(--spacing --md), - --pad-y: fn.global-dim(--spacing --sm), + --200: ( + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --150), ) ) ), 'dims'); @@ -25,14 +25,14 @@ gap: fn.dim(--pad-x); line-height: 1.4; - @include iro.bem-modifier('sm') { - padding: fn.dim(--sm --pad-y) fn.dim(--sm --pad-x); - gap: fn.dim(--sm --pad-x); + @include iro.bem-modifier('75') { + padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); + gap: fn.dim(--75 --pad-x); } - @include iro.bem-modifier('lg') { - padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x); - gap: fn.dim(--lg --pad-x); + @include iro.bem-modifier('200') { + padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); + gap: fn.dim(--200 --pad-x); } @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 @@ --dims: ( --content-width: iro.fn-px-to-rem(700px), --sm-content-width: iro.fn-px-to-rem(360px), - --pad-x: fn.global-dim(--spacing --xl), - --pad-y: fn.global-dim(--spacing --xl), - --in-page-spacing-y: fn.global-dim(--spacing --xl), + --pad-x: fn.global-dim(--size --700), + --pad-y: fn.global-dim(--size --700), + --in-page-spacing-y: fn.global-dim(--size --700), ) ), 'dims'); @@ -17,8 +17,8 @@ overflow: hidden; @include iro.bem-elem('inner') { - margin-top: calc(-1 * fn.global-dim(--spacing --xl)); - margin-bottom: calc(-1 * fn.global-dim(--spacing --xl)); + margin-top: calc(-1 * fn.global-dim(--size --700)); + margin-bottom: calc(-1 * fn.global-dim(--size --700)); &::before, &::after { @@ -29,11 +29,11 @@ } &::before { - margin-bottom: fn.global-dim(--spacing --xl); + margin-bottom: fn.global-dim(--size --700); } &::after { - margin-top: fn.global-dim(--spacing --xl); + margin-top: fn.global-dim(--size --700); } } 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 @@ @include iro.props-namespace('form') { @include iro.props-store(( --dims: ( - --item-spacing-y: fn.global-dim(--spacing --md), - --label-spacing-x: fn.global-dim(--spacing --md), - --hint-font-size: fn.global-dim(--font-size --sm), + --item-spacing-y: fn.global-dim(--size --325), + --label-spacing-x: fn.global-dim(--size --325), + --hint-font-size: fn.global-dim(--font-size --75), ), ), 'dims'); 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), - --separator: fn.global-dim(--spacing --xs), + --pad-y: fn.global-dim(--size --85), + --separator: fn.global-dim(--size --85), --rounding: 3px, --border: 1px, --item: ( - --pad-x: fn.global-dim(--spacing --sm), - --pad-y: fn.global-dim(--spacing --xs), + --pad-x: fn.global-dim(--size --150), + --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-y: fn.global-dim(--spacing --sm), + --pad-x: fn.global-dim(--size --150), + --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-y: fn.global-dim(--spacing --xs), - --label-font-size: fn.global-dim(--font-size --sm), - --hint-font-size: fn.global-dim(--font-size --sm), + --spacing-x: fn.global-dim(--size --150), + --spacing-y: fn.global-dim(--size --85), + --label-font-size: fn.global-dim(--font-size --75), + --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-sibling: fn.global-dim(--spacing --md), - --bottom: fn.global-dim(--spacing --sm), + --top: fn.global-dim(--size --500), + --top-sibling: fn.global-dim(--size --325), + --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-y: fn.global-dim(--spacing --xs), + --pad-x: fn.global-dim(--size --150), + --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'); -- cgit v1.2.3-54-g00ecf