diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-07 10:56:11 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-07 10:56:11 +0100 |
| commit | cad79b949b060cd360582c2d208b37a51578e778 (patch) | |
| tree | a32f05975ce6b0c557a2c9b7d57772ad0e18e40e /src/_functions.scss | |
| parent | Added status indicator and avatar (diff) | |
| download | iro-design-cad79b949b060cd360582c2d208b37a51578e778.tar.gz iro-design-cad79b949b060cd360582c2d208b37a51578e778.tar.bz2 iro-design-cad79b949b060cd360582c2d208b37a51578e778.zip | |
Improved font handling
Diffstat (limited to 'src/_functions.scss')
| -rw-r--r-- | src/_functions.scss | 122 |
1 files changed, 116 insertions, 6 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index a11d5f4..9f6a789 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
| @@ -10,9 +10,7 @@ | |||
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | @function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) { | 12 | @function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) { |
| 13 | $key: iro.fn-list-prepend($key, --colors); | 13 | @return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global); |
| 14 | $key: iro.fn-list-prepend($key, $foreign-key); | ||
| 15 | @return iro.props-get($key, $tree, $default, $global); | ||
| 16 | } | 14 | } |
| 17 | 15 | ||
| 18 | @function dim($key, $tree: 'dims', $default: null, $global: false) { | 16 | @function dim($key, $tree: 'dims', $default: null, $global: false) { |
| @@ -25,7 +23,119 @@ | |||
| 25 | } | 23 | } |
| 26 | 24 | ||
| 27 | @function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) { | 25 | @function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) { |
| 28 | $key: iro.fn-list-prepend($key, --dims); | 26 | @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global); |
| 29 | $key: iro.fn-list-prepend($key, $foreign-key); | 27 | } |
| 30 | @return iro.props-get($key, $tree, $default, $global); | 28 | |
| 29 | @function set-font($key, $overrides: ()) { | ||
| 30 | $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true); | ||
| 31 | |||
| 32 | $map: (); | ||
| 33 | |||
| 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 | } | ||
| 103 | |||
| 104 | @if (map-has-key($overrides, --transform)) { | ||
| 105 | $map: map-merge( | ||
| 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 | |||
| 118 | @if (map-has-key($overrides, --variant-alternates)) { | ||
| 119 | $map: map-merge( | ||
| 120 | $map, ( | ||
| 121 | font-variant-alternates: map-get($overrides, --variant-alternates) | ||
| 122 | ) | ||
| 123 | ); | ||
| 124 | } @else if (map-has-key($font, --variant-alternates)) { | ||
| 125 | $map: map-merge( | ||
| 126 | $map, ( | ||
| 127 | font-variant-alternates: global-dim(--font $key --variant-alternates) | ||
| 128 | ) | ||
| 129 | ); | ||
| 130 | } | ||
| 131 | |||
| 132 | @return $map; | ||
| 133 | } | ||
| 134 | |||
| 135 | @mixin set-font($basis, $values: ()) { | ||
| 136 | $values: set-font($basis, $values); | ||
| 137 | |||
| 138 | @each $prop, $value in $values { | ||
| 139 | #{$prop}: $value; | ||
| 140 | } | ||
| 31 | } | 141 | } |
