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" |