diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-07 12:41:59 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-07 12:41:59 +0100 |
| commit | 1b739f15d10d68c5a7f85c2c403f2897f6ddfe50 (patch) | |
| tree | 79b7bf390a28dcbc3577184c8d4f423c48470c83 | |
| parent | Improved font handling (diff) | |
| download | iro-design-1b739f15d10d68c5a7f85c2c403f2897f6ddfe50.tar.gz iro-design-1b739f15d10d68c5a7f85c2c403f2897f6ddfe50.tar.bz2 iro-design-1b739f15d10d68c5a7f85c2c403f2897f6ddfe50.zip | |
Further improved font handling
| -rw-r--r-- | src/_functions.scss | 127 | ||||
| -rw-r--r-- | src/objects/_heading.scss | 4 | ||||
| -rw-r--r-- | yarn.lock | 2 |
3 files changed, 26 insertions, 107 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 9f6a789..f15ed0c 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -1,8 +1,7 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
| 2 | 2 | ||
| 3 | @function color($key, $tree: 'colors', $default: null, $global: false) { | 3 | @function color($key, $tree: 'colors', $default: null, $global: false) { |
| 4 | $key: iro.fn-list-prepend($key, --colors); | 4 | @return iro.props-get(join(--colors, $key), $tree, $default, $global); |
| 5 | @return iro.props-get($key, $tree, $default, $global); | ||
| 6 | } | 5 | } |
| 7 | 6 | ||
| 8 | @function global-color($key, $tree: 'colors', $default: null, $global: true) { | 7 | @function global-color($key, $tree: 'colors', $default: null, $global: true) { |
| @@ -14,8 +13,7 @@ | |||
| 14 | } | 13 | } |
| 15 | 14 | ||
| 16 | @function dim($key, $tree: 'dims', $default: null, $global: false) { | 15 | @function dim($key, $tree: 'dims', $default: null, $global: false) { |
| 17 | $key: iro.fn-list-prepend($key, --dims); | 16 | @return iro.props-get(join(--dims, $key), $tree, $default, $global); |
| 18 | @return iro.props-get($key, $tree, $default, $global); | ||
| 19 | } | 17 | } |
| 20 | 18 | ||
| 21 | @function global-dim($key, $tree: 'dims', $default: null, $global: true) { | 19 | @function global-dim($key, $tree: 'dims', $default: null, $global: true) { |
| @@ -26,108 +24,27 @@ | |||
| 26 | @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global); | 24 | @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global); |
| 27 | } | 25 | } |
| 28 | 26 | ||
| 29 | @function set-font($key, $overrides: ()) { | 27 | @function font-prop($data, $overrides, $key, $prop) { |
| 30 | $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true); | 28 | @if (map-has-key($overrides, $prop)) { |
| 31 | 29 | @return map-get($overrides, $prop); | |
| 32 | $map: (); | 30 | } @else if (map-has-key($data, $prop)) { |
| 33 | 31 | @return global-dim(--font $key $prop); | |
| 34 | @if (map-has-key($overrides, --family)) { | ||
| 35 | $map: map-merge( | ||
| 36 | $map, ( | ||
| 37 | font-family: map-get($overrides, --family) | ||
| 38 | ) | ||
| 39 | ); | ||
| 40 | } @else if (map-has-key($font, --family)) { | ||
| 41 | $map: map-merge( | ||
| 42 | $map, ( | ||
| 43 | font-family: global-dim(--font $key --family) | ||
| 44 | ) | ||
| 45 | ); | ||
| 46 | } | ||
| 47 | |||
| 48 | @if (map-has-key($overrides, --size)) { | ||
| 49 | $map: map-merge( | ||
| 50 | $map, ( | ||
| 51 | font-size: map-get($overrides, --size) | ||
| 52 | ) | ||
| 53 | ); | ||
| 54 | } @else if (map-has-key($font, --size)) { | ||
| 55 | $map: map-merge( | ||
| 56 | $map, ( | ||
| 57 | font-size: global-dim(--font $key --size) | ||
| 58 | ) | ||
| 59 | ); | ||
| 60 | } | ||
| 61 | |||
| 62 | @if (map-has-key($overrides, --weight)) { | ||
| 63 | $map: map-merge( | ||
| 64 | $map, ( | ||
| 65 | font-weight: map-get($overrides, --weight) | ||
| 66 | ) | ||
| 67 | ); | ||
| 68 | } @else if (map-has-key($font, --weight)) { | ||
| 69 | $map: map-merge( | ||
| 70 | $map, ( | ||
| 71 | font-weight: global-dim(--font $key --weight) | ||
| 72 | ) | ||
| 73 | ); | ||
| 74 | } | ||
| 75 | |||
| 76 | @if (map-has-key($overrides, --style)) { | ||
| 77 | $map: map-merge( | ||
| 78 | $map, ( | ||
| 79 | font-style: map-get($overrides, --style) | ||
| 80 | ) | ||
| 81 | ); | ||
| 82 | } @else if (map-has-key($font, --style)) { | ||
| 83 | $map: map-merge( | ||
| 84 | $map, ( | ||
| 85 | font-style: global-dim(--font $key --style) | ||
| 86 | ) | ||
| 87 | ); | ||
| 88 | } | ||
| 89 | |||
| 90 | @if (map-has-key($overrides, --line-height)) { | ||
| 91 | $map: map-merge( | ||
| 92 | $map, ( | ||
| 93 | line-height: map-get($overrides, --line-height) | ||
| 94 | ) | ||
| 95 | ); | ||
| 96 | } @else if (map-has-key($font, --line-height)) { | ||
| 97 | $map: map-merge( | ||
| 98 | $map, ( | ||
| 99 | line-height: global-dim(--font $key --line-height) | ||
| 100 | ) | ||
| 101 | ); | ||
| 102 | } | 32 | } |
| 33 | @return null; | ||
| 34 | } | ||
| 103 | 35 | ||
| 104 | @if (map-has-key($overrides, --transform)) { | 36 | @function set-font($key, $overrides: ()) { |
| 105 | $map: map-merge( | 37 | $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true); |
| 106 | $map, ( | ||
| 107 | text-transform: map-get($overrides, --transform) | ||
| 108 | ) | ||
| 109 | ); | ||
| 110 | } @else if (map-has-key($font, --transform)) { | ||
| 111 | $map: map-merge( | ||
| 112 | $map, ( | ||
| 113 | text-transform: global-dim(--font $key --transform) | ||
| 114 | ) | ||
| 115 | ); | ||
| 116 | } | ||
| 117 | 38 | ||
| 118 | @if (map-has-key($overrides, --variant-alternates)) { | 39 | $map: ( |
| 119 | $map: map-merge( | 40 | font-family: font-prop($font, $overrides, $key, --family), |
| 120 | $map, ( | 41 | font-size: font-prop($font, $overrides, $key, --size), |
| 121 | font-variant-alternates: map-get($overrides, --variant-alternates) | 42 | font-weight: font-prop($font, $overrides, $key, --weight), |
| 122 | ) | 43 | font-style: font-prop($font, $overrides, $key, --style), |
| 123 | ); | 44 | line-height: font-prop($font, $overrides, $key, --line-height), |
| 124 | } @else if (map-has-key($font, --variant-alternates)) { | 45 | text-transform: font-prop($font, $overrides, $key, --transform), |
| 125 | $map: map-merge( | 46 | font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), |
| 126 | $map, ( | 47 | ); |
| 127 | font-variant-alternates: global-dim(--font $key --variant-alternates) | ||
| 128 | ) | ||
| 129 | ); | ||
| 130 | } | ||
| 131 | 48 | ||
| 132 | @return $map; | 49 | @return $map; |
| 133 | } | 50 | } |
| @@ -136,6 +53,8 @@ | |||
| 136 | $values: set-font($basis, $values); | 53 | $values: set-font($basis, $values); |
| 137 | 54 | ||
| 138 | @each $prop, $value in $values { | 55 | @each $prop, $value in $values { |
| 139 | #{$prop}: $value; | 56 | @if $value != null { |
| 57 | #{$prop}: $value; | ||
| 58 | } | ||
| 140 | } | 59 | } |
| 141 | } | 60 | } |
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 2af8e19..cd91c61 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -51,7 +51,7 @@ | |||
| 51 | } | 51 | } |
| 52 | 52 | ||
| 53 | @include iro.bem-modifier('sm') { | 53 | @include iro.bem-modifier('sm') { |
| 54 | @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height))); | 54 | @include fn.set-font(--standard, (--line-height: null)); |
| 55 | 55 | ||
| 56 | color: fn.color(--strong); | 56 | color: fn.color(--strong); |
| 57 | font-size: fn.global-dim(--font-size --md); | 57 | font-size: fn.global-dim(--font-size --md); |
| @@ -59,7 +59,7 @@ | |||
| 59 | } | 59 | } |
| 60 | 60 | ||
| 61 | @include iro.bem-modifier('xs') { | 61 | @include iro.bem-modifier('xs') { |
| 62 | @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height))); | 62 | @include fn.set-font(--standard, (--line-height: null)); |
| 63 | 63 | ||
| 64 | color: fn.color(--light); | 64 | color: fn.color(--light); |
| 65 | font-size: fn.global-dim(--font-size --xs); | 65 | font-size: fn.global-dim(--font-size --xs); |
| @@ -1260,7 +1260,7 @@ internal-slot@^1.0.3: | |||
| 1260 | 1260 | ||
| 1261 | "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": | 1261 | "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": |
| 1262 | version "1.0.2" | 1262 | version "1.0.2" |
| 1263 | resolved "git+https://git.vulpes.one/git/iro-sass.git#9f1653f2ab64ef8cb4c545416da4241baa481557" | 1263 | resolved "git+https://git.vulpes.one/git/iro-sass.git#4c9a427806b47b916849dbc98330fdbb469b659b" |
| 1264 | 1264 | ||
| 1265 | is-arrayish@^0.2.1: | 1265 | is-arrayish@^0.2.1: |
| 1266 | version "0.2.1" | 1266 | version "0.2.1" |
