summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-07 10:56:11 +0100
committerVolpeon <git@volpeon.ink>2022-02-07 10:56:11 +0100
commitcad79b949b060cd360582c2d208b37a51578e778 (patch)
treea32f05975ce6b0c557a2c9b7d57772ad0e18e40e
parentAdded status indicator and avatar (diff)
downloadiro-design-cad79b949b060cd360582c2d208b37a51578e778.tar.gz
iro-design-cad79b949b060cd360582c2d208b37a51578e778.tar.bz2
iro-design-cad79b949b060cd360582c2d208b37a51578e778.zip
Improved font handling
-rw-r--r--src/_functions.scss122
-rw-r--r--src/_general.scss10
-rw-r--r--src/_vars.scss27
-rw-r--r--src/mixins/_typography.scss63
-rw-r--r--src/objects/_action-button.scss1
-rw-r--r--src/objects/_avatar.scss2
-rw-r--r--src/objects/_button.scss5
-rw-r--r--src/objects/_checkbox.scss4
-rw-r--r--src/objects/_heading.scss8
-rw-r--r--src/objects/_radio.scss8
-rw-r--r--src/objects/_switch.scss4
-rw-r--r--src/objects/_text-field.scss4
12 files changed, 147 insertions, 111 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}
diff --git a/src/_general.scss b/src/_general.scss
index 1e7c180..54df879 100644
--- a/src/_general.scss
+++ b/src/_general.scss
@@ -1,7 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'mixins/typography';
3@use 'functions' as fn; 2@use 'functions' as fn;
4@use 'vars';
5 3
6html, 4html,
7body { 5body {
@@ -9,7 +7,7 @@ body {
9} 7}
10 8
11body { 9body {
12 @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md))); 10 @include fn.set-font(--standard, (--size: fn.dim(--font-size --md)));
13 11
14 margin: 0; 12 margin: 0;
15 padding: 0; 13 padding: 0;
@@ -23,9 +21,9 @@ h3,
23h4, 21h4,
24h5, 22h5,
25h6 { 23h6 {
26 @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md), weight: 400)); 24 margin: 0;
27 25 font-size: fn.dim(--font-size --md);
28 margin: 0; 26 font-weight: normal;
29} 27}
30 28
31p { 29p {
diff --git a/src/_vars.scss b/src/_vars.scss
index c79b917..825ec9c 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -18,21 +18,6 @@ media.$unit-intervals: (
18 18
19// 19//
20 20
21$font--main: (
22 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
23 line-height: 1.5
24);
25
26$font--headline: (
27 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
28 line-height: 1.2,
29 weight: 700,
30);
31
32$line-height: map-get($font--main, line-height);
33
34//
35
36@include iro.props-store(( 21@include iro.props-store((
37 --dims: ( 22 --dims: (
38 --spacing: ( 23 --spacing: (
@@ -58,6 +43,18 @@ $line-height: map-get($font--main, line-height);
58 ), 43 ),
59 ), 44 ),
60 45
46 --font: (
47 --standard: (
48 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
49 --line-height: 1.5,
50 ),
51 --headline: (
52 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
53 --line-height: 1.2,
54 --weight: 700,
55 )
56 ),
57
61 --font-size: ( 58 --font-size: (
62 --xs: iro.fn-px-to-rem(11px), 59 --xs: iro.fn-px-to-rem(11px),
63 --sm: iro.fn-px-to-rem(13px), 60 --sm: iro.fn-px-to-rem(13px),
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
deleted file mode 100644
index 31e39f0..0000000
--- a/src/mixins/_typography.scss
+++ /dev/null
@@ -1,63 +0,0 @@
1@function set-font($basis, $values: ()) {
2 $font: map-merge($basis, $values);
3
4 $map: (font-family: map-get($font, 'family'));
5
6 @if (map-has-key($font, 'size')) {
7 $map: map-merge(
8 $map, (
9 font-size: map-get($font, 'size')
10 )
11 );
12 }
13
14 @if (map-has-key($font, 'weight')) {
15 $map: map-merge(
16 $map, (
17 font-weight: map-get($font, 'weight')
18 )
19 );
20 }
21
22 @if (map-has-key($font, 'style')) {
23 $map: map-merge(
24 $map, (
25 font-style: map-get($font, 'style')
26 )
27 );
28 }
29
30 @if (map-has-key($font, 'line-height')) {
31 $map: map-merge(
32 $map, (
33 line-height: map-get($font, 'line-height')
34 )
35 );
36 }
37
38 @if (map-has-key($font, 'transform')) {
39 $map: map-merge(
40 $map, (
41 text-transform: map-get($font, 'transform')
42 )
43 );
44 }
45
46 @if (map-has-key($font, 'variant-alternates')) {
47 $map: map-merge(
48 $map, (
49 font-variant-alternates: map-get($font, 'variant-alternates')
50 )
51 );
52 }
53
54 @return $map;
55}
56
57@mixin set-font($basis, $values: ()) {
58 $values: set-font($basis, $values);
59
60 @each $prop, $value in $values {
61 #{$prop}: $value;
62 }
63}
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 86c7089..19cf37b 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -94,6 +94,7 @@
94 @include iro.bem-object(iro.props-namespace()) { 94 @include iro.bem-object(iro.props-namespace()) {
95 display: inline-block; 95 display: inline-block;
96 padding: fn.dim(--pad-y) fn.dim(--pad-x); 96 padding: fn.dim(--pad-y) fn.dim(--pad-x);
97 overflow: hidden;
97 border: 1px solid fn.color(--border); 98 border: 1px solid fn.color(--border);
98 border-radius: fn.dim(--rounding); 99 border-radius: fn.dim(--rounding);
99 background-color: fn.color(--bg); 100 background-color: fn.color(--bg);
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 3bdfddc..ca0d373 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -52,6 +52,8 @@
52 color: #fff; 52 color: #fff;
53 line-height: fn.dim(--size); 53 line-height: fn.dim(--size);
54 text-align: center; 54 text-align: center;
55 object-fit: cover;
56 object-position: center center;
55 } 57 }
56 58
57 @include iro.bem-modifier('circle') { 59 @include iro.bem-modifier('circle') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f158176..6f69ee8 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,7 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../vars';
4@use '../mixins/typography';
5 3
6@mixin button-variant($variant) { 4@mixin button-variant($variant) {
7 border-color: fn.color(--#{$variant} --bg); 5 border-color: fn.color(--#{$variant} --bg);
@@ -111,12 +109,11 @@
111 ), 'colors'); 109 ), 'colors');
112 110
113 @include iro.bem-object(iro.props-namespace()) { 111 @include iro.bem-object(iro.props-namespace()) {
114 @include typography.set-font(vars.$font--main, (weight: 500));
115
116 display: inline-block; 112 display: inline-block;
117 padding: fn.dim(--pad-y) fn.dim(--pad-x); 113 padding: fn.dim(--pad-y) fn.dim(--pad-x);
118 border: 2px solid transparent; 114 border: 2px solid transparent;
119 border-radius: fn.dim(--rounding); 115 border-radius: fn.dim(--rounding);
116 font-weight: 500;
120 line-height: 1; 117 line-height: 1;
121 text-align: center; 118 text-align: center;
122 text-decoration: none; 119 text-decoration: none;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 3bda5e7..5ea2e4a 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(14px), 7 --size: iro.fn-px-to-rem(13px),
8 --label-gap: .6rem, 8 --label-gap: .6rem,
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: .3rem, 10 --pad-x: .3rem,
@@ -56,7 +56,7 @@
56 flex: 0 0 auto; 56 flex: 0 0 auto;
57 width: fn.dim(--size); 57 width: fn.dim(--size);
58 height: fn.dim(--size); 58 height: fn.dim(--size);
59 margin-top: calc(.5 * ($line-height * 1em - fn.dim(--size))); 59 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
60 border-radius: fn.dim(--border-width); 60 border-radius: fn.dim(--border-width);
61 background-color: fn.color(--box-border); 61 background-color: fn.color(--box-border);
62 62
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7d67a87..2af8e19 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,7 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../vars';
4@use '../mixins/typography';
5 3
6@include iro.props-namespace('heading') { 4@include iro.props-namespace('heading') {
7 @include iro.props-store(( 5 @include iro.props-store((
@@ -22,7 +20,7 @@
22 ), 'colors'); 20 ), 'colors');
23 21
24 @include iro.bem-object(iro.props-namespace()) { 22 @include iro.bem-object(iro.props-namespace()) {
25 @include typography.set-font(vars.$font--headline); 23 @include fn.set-font(--headline);
26 24
27 display: block; 25 display: block;
28 margin-top: fn.dim(--in-page-margin --top); 26 margin-top: fn.dim(--in-page-margin --top);
@@ -53,7 +51,7 @@
53 } 51 }
54 52
55 @include iro.bem-modifier('sm') { 53 @include iro.bem-modifier('sm') {
56 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); 54 @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height)));
57 55
58 color: fn.color(--strong); 56 color: fn.color(--strong);
59 font-size: fn.global-dim(--font-size --md); 57 font-size: fn.global-dim(--font-size --md);
@@ -61,7 +59,7 @@
61 } 59 }
62 60
63 @include iro.bem-modifier('xs') { 61 @include iro.bem-modifier('xs') {
64 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); 62 @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height)));
65 63
66 color: fn.color(--light); 64 color: fn.color(--light);
67 font-size: fn.global-dim(--font-size --xs); 65 font-size: fn.global-dim(--font-size --xs);
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 26e8c31..442034b 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('radio') { 4@include iro.props-namespace('radio') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --diameter: iro.fn-px-to-rem(15px), 7 --diameter: iro.fn-px-to-rem(14px),
8 --label-gap: .6rem, 8 --label-gap: .6rem,
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: .3rem, 10 --pad-x: .3rem,
11 --pad-y: .3rem, 11 --pad-y: .3rem,
12 --margin-right: fn.global-dim(--spacing --x --md), 12 --margin-right: fn.global-dim(--spacing --x --md),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
@@ -57,7 +57,7 @@
57 flex: 0 0 auto; 57 flex: 0 0 auto;
58 width: fn.dim(--diameter); 58 width: fn.dim(--diameter);
59 height: fn.dim(--diameter); 59 height: fn.dim(--diameter);
60 margin-top: calc(.5 * ($line-height * 1em - fn.dim(--diameter))); 60 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
61 border-radius: 2em; 61 border-radius: 2em;
62 background-color: fn.color(--circle-border); 62 background-color: fn.color(--circle-border);
63 63
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 2d70844..9911b73 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -5,7 +5,7 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --width: iro.fn-px-to-rem(26px), 7 --width: iro.fn-px-to-rem(26px),
8 --height: iro.fn-px-to-rem(15px), 8 --height: iro.fn-px-to-rem(14px),
9 --label-gap: .6rem, 9 --label-gap: .6rem,
10 --border-width: fn.global-dim(--border-width --medium), 10 --border-width: fn.global-dim(--border-width --medium),
11 --pad-x: .3rem, 11 --pad-x: .3rem,
@@ -61,7 +61,7 @@
61 flex: 0 0 auto; 61 flex: 0 0 auto;
62 width: fn.dim(--width); 62 width: fn.dim(--width);
63 height: fn.dim(--height); 63 height: fn.dim(--height);
64 margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height))); 64 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
65 transition: background-color .2s ease; 65 transition: background-color .2s ease;
66 border-radius: 2em; 66 border-radius: 2em;
67 background-color: fn.color(--track-bg); 67 background-color: fn.color(--track-bg);
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 90d4b11..b819811 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,7 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../vars';
4@use '../mixins/typography';
5 3
6@mixin invalid { 4@mixin invalid {
7 @include iro.bem-sibling-elem('bg') { 5 @include iro.bem-sibling-elem('bg') {
@@ -108,8 +106,6 @@
108 } 106 }
109 107
110 @include iro.bem-elem('native') { 108 @include iro.bem-elem('native') {
111 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
112
113 width: 100%; 109 width: 100%;
114 color: fn.color(--text); 110 color: fn.color(--text);
115 resize: none; 111 resize: none;