summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 10:34:53 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 10:34:53 +0200
commit50d24a41b5656cdaf31468b28d08da765ca95763 (patch)
tree9ca25c56dc66a02bf2ff498ed4669a097e9a9815 /src
parentUpdate (diff)
downloadiro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.gz
iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.bz2
iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_core.vars.scss20
-rw-r--r--src/_iro-design.scss4
-rw-r--r--src/_props.scss10
-rw-r--r--src/objects/_field-label.scss44
-rw-r--r--src/objects/_field-label.vars.scss12
-rw-r--r--src/objects/_heading.scss138
-rw-r--r--src/objects/_heading.vars.scss122
-rw-r--r--src/objects/_lightbox.scss89
-rw-r--r--src/objects/_lightbox.vars.scss70
-rw-r--r--src/scopes/_headings.scss130
-rw-r--r--src/scopes/_headings.vars.scss0
-rw-r--r--src/scopes/_implicit.scss20
-rw-r--r--src/scopes/_implicit.vars.scss11
13 files changed, 337 insertions, 333 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index cc11b89..abaf879 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -66,6 +66,7 @@ $font--headline--feature-settings: props.def(--font--headline--feature-settings,
66 66
67$font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; 67$font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
68$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; 68$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default;
69$font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default;
69 70
70$font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default; 71$font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default;
71$font-size--75: props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default; 72$font-size--75: props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default;
@@ -96,25 +97,6 @@ $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($bord
96$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; 97$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
97$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; 98$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
98 99
99$heading--xxl: props.def(--heading--xxl, props.get($font-size--300)) !default;
100$heading--xl: props.def(--heading--xl, props.get($font-size--200)) !default;
101$heading--lg: props.def(--heading--lg, props.get($font-size--150)) !default;
102$heading--md: props.def(--heading--md, props.get($font-size--100)) !default;
103$heading--sm: props.def(--heading--sm, props.get($font-size--75)) !default;
104$heading--xs: props.def(--heading--xs, props.get($font-size--50)) !default;
105$heading--display--xxl: props.def(--heading--display--xxl, props.get($font-size--1100)) !default;
106$heading--display--xl: props.def(--heading--display--xl, props.get($font-size--700)) !default;
107$heading--display--lg: props.def(--heading--display--lg, props.get($font-size--300)) !default;
108$heading--display--md: props.def(--heading--display--md, props.get($font-size--150)) !default;
109$heading--display--sm: props.def(--heading--display--sm, props.get($font-size--75)) !default;
110$heading--display--xs: props.def(--heading--display--xs, props.get($font-size--50)) !default;
111$heading--display-sm--xxl: props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default;
112$heading--display-sm--xl: props.def(--heading--display-sm--xl, props.get($font-size--600)) !default;
113$heading--display-sm--lg: props.def(--heading--display-sm--lg, props.get($font-size--200)) !default;
114$heading--display-sm--md: props.def(--heading--display-sm--md, props.get($font-size--100)) !default;
115$heading--display-sm--sm: props.def(--heading--display-sm--sm, props.get($font-size--75)) !default;
116$heading--display-sm--xs: props.def(--heading--display-sm--xs, props.get($font-size--50)) !default;
117
118$list--indent: props.def(--list--indent, props.get($size--400)) !default; 100$list--indent: props.def(--list--indent, props.get($size--400)) !default;
119$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; 101$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default;
120 102
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 6cda866..3abe3fa 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -32,7 +32,7 @@ $breakpoints: (
32@forward 'scopes/implicit' as s-implicit--*; 32@forward 'scopes/implicit' as s-implicit--*;
33@forward 'scopes/blockquotes' as s-blockquotes--*; 33@forward 'scopes/blockquotes' as s-blockquotes--*;
34@forward 'scopes/code' as s-code--*; 34@forward 'scopes/code' as s-code--*;
35//@use 'scopes/headings' as s-headings--*; 35@forward 'scopes/headings' as s-headings--*;
36@forward 'scopes/links' as s-links--*; 36@forward 'scopes/links' as s-links--*;
37@forward 'scopes/lists' as s-lists--*; 37@forward 'scopes/lists' as s-lists--*;
38//@use 'scopes/tables' as s-tables--*; 38//@use 'scopes/tables' as s-tables--*;
@@ -47,4 +47,6 @@ $breakpoints: (
47@forward 'objects/checkbox' as o-checkbox--*; 47@forward 'objects/checkbox' as o-checkbox--*;
48@forward 'objects/divider' as o-divider--*; 48@forward 'objects/divider' as o-divider--*;
49@forward 'objects/emoji' as o-emoji--*; 49@forward 'objects/emoji' as o-emoji--*;
50@forward 'objects/field-label' as o-field-label--*;
51@forward 'objects/heading' as o-heading--*;
50@forward 'objects/icon' as o-icon--*; 52@forward 'objects/icon' as o-icon--*;
diff --git a/src/_props.scss b/src/_props.scss
index ac1dfd5..1a0f7d0 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -13,7 +13,7 @@
13 } 13 }
14 14
15 :root { 15 :root {
16 @include iro.props-materialize($ref); 16 @include iro.props-materialize($ref, null);
17 17
18 @each $breakpoint in map.keys(media.$breakpoints) { 18 @each $breakpoint in map.keys(media.$breakpoints) {
19 @include media.media('<=#{$breakpoint}') { 19 @include media.media('<=#{$breakpoint}') {
@@ -29,7 +29,13 @@
29 @each $theme-name in map.keys(themes.$themes) { 29 @each $theme-name in map.keys(themes.$themes) {
30 @if $theme-name != themes.$theme-default { 30 @if $theme-name != themes.$theme-default {
31 @include iro.bem-theme($theme-name) { 31 @include iro.bem-theme($theme-name) {
32 @include iro.props-materialize($ref); 32 @include iro.props-materialize($ref, null);
33
34 @each $breakpoint in map.keys(media.$breakpoints) {
35 @include media.media('<=#{$breakpoint}') {
36 @include iro.props-materialize($ref, $breakpoint);
37 }
38 }
33 39
34 @media (prefers-color-scheme: dark) { 40 @media (prefers-color-scheme: dark) {
35 @include iro.props-materialize($ref, 'dark'); 41 @include iro.props-materialize($ref, 'dark');
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index ba3841a..467d30a 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,36 +1,28 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
4@use 'icon.vars' as icon;
3 5
4@include iro.props-namespace('field-label') { 6@forward 'field-label.vars';
5 @include iro.props-store(( 7@use 'field-label.vars' as vars;
6 --dims: (
7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 --colors: (
13 --label: fn.global-color(--text-mute),
14 --hint: fn.global-color(--text-mute),
15 --error-hint: fn.global-color(--negative --900),
16 --disabled: fn.global-color(--text-disabled),
17 ),
18 ));
19 8
20 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-object('field-label') {
21 display: block; 13 display: block;
22 14
23 @include iro.bem-elem('label') { 15 @include iro.bem-elem('label') {
24 display: block; 16 display: block;
25 flex: 0 0 auto; 17 flex: 0 0 auto;
26 padding-inline-end: fn.dim(--spacing-i); 18 padding-inline-end: props.get(vars.$spacing-i);
27 font-size: fn.dim(--label-font-size); 19 font-size: props.get(vars.$label-font-size);
28 font-weight: 400; 20 font-weight: 400;
29 line-height: 1.3; 21 line-height: 1.3;
30 color: fn.color(--label); 22 color: props.get(vars.$label-color);
31 23
32 @include iro.bem-next-elem('content') { 24 @include iro.bem-next-elem('content') {
33 margin-block-start: fn.dim(--spacing-b); 25 margin-block-start: props.get(vars.$spacing-b);
34 } 26 }
35 } 27 }
36 28
@@ -41,20 +33,20 @@
41 33
42 @include iro.bem-elem('hint') { 34 @include iro.bem-elem('hint') {
43 display: block; 35 display: block;
44 margin-block-start: fn.dim(--spacing-b); 36 margin-block-start: props.get(vars.$spacing-b);
45 font-size: fn.dim(--hint-font-size); 37 font-size: props.get(vars.$hint-font-size);
46 color: fn.color(--hint); 38 color: props.get(vars.$hint-color);
47 } 39 }
48 40
49 @include iro.bem-is('invalid') { 41 @include iro.bem-is('invalid') {
50 @include iro.bem-elem('hint') { 42 @include iro.bem-elem('hint') {
51 color: fn.color(--error-hint); 43 color: props.get(vars.$error-hint-color);
52 } 44 }
53 } 45 }
54 46
55 @include iro.bem-is('disabled') { 47 @include iro.bem-is('disabled') {
56 @include iro.bem-elem('label', 'hint') { 48 @include iro.bem-elem('label', 'hint') {
57 color: fn.color(--disabled); 49 color: props.get(vars.$disabled-color);
58 } 50 }
59 } 51 }
60 52
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
new file mode 100644
index 0000000..699836e
--- /dev/null
+++ b/src/objects/_field-label.vars.scss
@@ -0,0 +1,12 @@
1@use '../props';
2@use '../core.vars' as core;
3
4$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
5$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default;
6$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default;
7$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default;
8
9$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default;
10$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default;
11$error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default;
12$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 8ed3b17..b1abdf5 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,114 +1,56 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
3@use '../mixins' as mx;
4@use '../config';
5@use 'include-media/dist/include-media' as media;
6 4
7$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; 5@forward 'heading.vars';
6@use 'heading.vars' as vars;
8 7
9@include iro.props-namespace('heading') { 8@mixin styles {
10 @include iro.props-store(( 9 @include props.materialize(meta.module-variables('vars'));
11 --dims: (
12 --offset: -.02em,
13 ),
14 --colors: (
15 --bg: fn.global-color(--base --50),
16 ),
17 ));
18 10
19 @include iro.bem-object(iro.props-namespace()) { 11 @include iro.bem-object('heading') {
20 @include mx.set-font(--headline); 12 display: block;
21 13 margin-block-start: props.get(vars.$margin-bs);
22 display: block; 14 font-family: props.get(vars.$font-family);
23 margin-block-start: fn.global-dim(--heading --margin-bs); 15 font-weight: props.get(vars.$font-weight);
24 text-transform: none; 16 font-feature-settings: props.get(vars.$feature-settings);
25 letter-spacing: normal; 17 line-height: props.get(vars.$line-height);
26 transform: translateX(fn.dim(--offset)); 18 text-transform: none;
19 letter-spacing: normal;
20 transform: translateX(props.get(vars.$offset));
27 21
28 & + & { 22 & + & {
29 margin-block-start: fn.global-dim(--heading --margin-bs-sibling); 23 margin-block-start: props.get(vars.$margin-bs-sibling);
30 } 24 }
31 25
32 @include iro.bem-elem('highlight') { 26 @include iro.bem-elem('highlight') {
33 background-image: linear-gradient(to top, 27 background-image: linear-gradient(to top,
34 transparent .05em, 28 transparent .05em,
35 fn.color(--bg) .05em, 29 props.get(vars.$bg-color) .05em,
36 fn.color(--bg) .5em, 30 props.get(vars.$bg-color) .5em,
37 transparent .5em); 31 transparent .5em);
38 } 32 }
39 33
40 @include iro.bem-modifier('xxl') { 34 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
41 @include mx.heading-strong(--xxl); 35 @include iro.bem-modifier($mod) {
42 } 36 font-family: props.get($font-family);
43 37 font-size: props.get($font-size);
44 @include iro.bem-modifier('xl') { 38 font-weight: props.get($font-weight);
45 @include mx.heading-strong(--xl); 39 font-feature-settings: props.get($feature-settings);
46 } 40 line-height: props.get($line-height);
47 41 letter-spacing: props.get($letter-spacing);
48 @include iro.bem-modifier('lg') { 42 }
49 @include mx.heading-medium(--lg);
50 }
51
52 @include iro.bem-modifier('md') {
53 @include mx.heading-medium(--md);
54 }
55
56 @include iro.bem-modifier('sm') {
57 @include mx.heading-faint(--sm);
58 }
59
60 @include iro.bem-modifier('xs') {
61 @include mx.heading-faint(--xs);
62 } 43 }
63 44
64 @include iro.bem-modifier('display') { 45 @include iro.bem-modifier('display') {
65 @include mx.set-font(--headline); 46 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
66 47 @include iro.bem-modifier($mod) {
67 @include iro.bem-modifier('xxl') { 48 font-family: props.get($font-family);
68 @include mx.heading-strong(--display --xxl); 49 font-size: props.get($font-size);
69 50 font-weight: props.get($font-weight);
70 @include media.media('<=md') { 51 font-feature-settings: props.get($feature-settings);
71 @include mx.heading-strong(--display-sm --xxl); 52 line-height: props.get($line-height);
72 } 53 letter-spacing: props.get($letter-spacing);
73 }
74
75 @include iro.bem-modifier('xl') {
76 @include mx.heading-strong(--display --xl);
77
78 @include media.media('<=md') {
79 @include mx.heading-strong(--display-sm --xl);
80 }
81 }
82
83 @include iro.bem-modifier('lg') {
84 @include mx.heading-strong(--display --lg);
85
86 @include media.media('<=md') {
87 @include mx.heading-strong(--display-sm --lg);
88 }
89 }
90
91 @include iro.bem-modifier('md') {
92 @include mx.heading-strong(--display --md);
93
94 @include media.media('<=md') {
95 @include mx.heading-strong(--display-sm --md);
96 }
97 }
98
99 @include iro.bem-modifier('sm') {
100 @include mx.heading-medium(--display --sm);
101
102 @include media.media('<=md') {
103 @include mx.heading-medium(--display-sm --sm);
104 }
105 }
106
107 @include iro.bem-modifier('xs') {
108 @include mx.heading-faint(--display --xs);
109
110 @include media.media('<=md') {
111 @include mx.heading-faint(--display-sm --xs);
112 } 54 }
113 } 55 }
114 } 56 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
new file mode 100644
index 0000000..31a2406
--- /dev/null
+++ b/src/objects/_heading.vars.scss
@@ -0,0 +1,122 @@
1@use '../props';
2@use '../core.vars' as core;
3
4$offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7
8$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default;
9
10$font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default;
11$line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default;
12$font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default;
13$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
14
15$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
16$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
17$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
18$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
19$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
20$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
21
22$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
23$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
24$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
25$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
26$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
28
29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
35
36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
42
43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49
50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
55$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
56
57$sizes: (
58 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
59 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
60 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
61 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
62 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
63 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
64) !default;
65
66$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
67$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
68$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default;
69$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
70$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
71$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
72
73$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
74$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
75$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default;
76$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
77$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
78$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
79
80$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
81$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
82$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
83$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
84$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default;
85$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
86
87$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
88$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
89$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
90$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
91$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
93
94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
100
101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
106$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
107
108$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
109$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
110$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default;
111$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default;
112$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default;
113$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
114
115$display--sizes: (
116 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
117 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
118 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
119 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
120 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
121 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
122) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index edbc62a..740f4e5 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -6,94 +6,7 @@
6$static-themes: 'black' 'white' !default; 6$static-themes: 'black' 'white' !default;
7 7
8@include iro.props-namespace('lightbox') { 8@include iro.props-namespace('lightbox') {
9 @include iro.props-store(( 9
10 --dims: (
11 --pad: fn.global-dim(--size --150),
12
13 --thumbnail: (
14 --size: fn.global-dim(--size --700),
15 --rounding: fn.global-dim(--rounding),
16 --spacing: fn.global-dim(--size --100),
17 --border: fn.global-dim(--border --thin),
18
19 --selected: (
20 --border: fn.global-dim(--border --medium),
21 ),
22
23 --key-focus: (
24 --border: fn.global-dim(--key-focus --border),
25 --border-offset: fn.global-dim(--key-focus --border-offset),
26 --outline: fn.global-dim(--key-focus --outline),
27 ),
28 ),
29
30 --close-button: (
31 --font-size: fn.global-dim(--font-size --200),
32 ),
33
34 --nav-button: (
35 --width: fn.global-dim(--size --2000),
36 --height: fn.global-dim(--size --3800),
37 --font-size: fn.global-dim(--font-size --200),
38 ),
39 ),
40 --colors: (
41 --thumbnail: (
42 --border: fn.global-color(--border-strong),
43
44 --hover: (
45 --border: fn.global-color(--text-mute-more),
46 ),
47
48 --selected: (
49 --border: fn.global-color(--heading),
50 ),
51
52 --key-focus: (
53 --border: fn.global-color(--focus --border),
54 --outline: fn.global-color(--focus --outline),
55 ),
56 ),
57 ),
58 ));
59
60 @each $theme in $static-themes {
61 @include iro.props-store((
62 --colors: (
63 --static-#{$theme}: (
64 --text: fn.global-color(--white-transparent --800),
65 --thumbnail: (
66 --border: fn.global-color(--white-transparent --400),
67
68 --hover: (
69 --border: fn.global-color(--white-transparent --500),
70 ),
71
72 --selected: (
73 --border: fn.global-color(--white-transparent --900),
74 ),
75
76 --key-focus: (
77 --border: fn.global-color(--#{$theme}-transparent --900),
78 --outline: fn.global-color(--#{$theme}-transparent --300),
79 ),
80 ),
81 )
82 )
83 ));
84 }
85
86 @include iro.props-store((
87 --dims: (
88 --thumbnail: (
89 --size: fn.global-dim(--size --600),
90 ),
91 --nav-button: (
92 --width: fn.global-dim(--size --2500),
93 --height: fn.global-dim(--size --2500),
94 ),
95 ),
96 ), 'md');
97 10
98 @include iro.bem-object(iro.props-namespace()) { 11 @include iro.bem-object(iro.props-namespace()) {
99 box-sizing: border-box; 12 box-sizing: border-box;
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
new file mode 100644
index 0000000..1538cae
--- /dev/null
+++ b/src/objects/_lightbox.vars.scss
@@ -0,0 +1,70 @@
1@use '../props';
2@use '../core.vars' as core;
3
4$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
5
6$thumbnail--size: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default;
7$thumbnail--rounding: props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default;
8$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
9$thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default;
10
11$thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
12
13$thumbnail--key-focus--border-width: props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
18
19$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
20$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
21$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
22
23$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default;
24
25$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default;
26
27$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default;
28
29$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
30$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
31
32
33
34@each $theme in $static-themes {
35 @include iro.props-store((
36 --colors: (
37 --static-#{$theme}: (
38 --text: fn.global-color(--white-transparent --800),
39 --thumbnail: (
40 --border: fn.global-color(--white-transparent --400),
41
42 --hover: (
43 --border: fn.global-color(--white-transparent --500),
44 ),
45
46 --selected: (
47 --border: fn.global-color(--white-transparent --900),
48 ),
49
50 --key-focus: (
51 --border: fn.global-color(--#{$theme}-transparent --900),
52 --outline: fn.global-color(--#{$theme}-transparent --300),
53 ),
54 ),
55 )
56 )
57 ));
58}
59
60@include iro.props-store((
61 --dims: (
62 --thumbnail: (
63 --size: fn.global-dim(--size --600),
64 ),
65 --nav-button: (
66 --width: fn.global-dim(--size --2500),
67 --height: fn.global-dim(--size --2500),
68 ),
69 ),
70), 'md');
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index b4a16bd..2bf7b08 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,10 +1,19 @@
1@use 'include-media/dist/include-media' as media; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../mixins' as mx;
4@use '../props'; 3@use '../props';
5@use '../core.vars' as core; 4@use '../objects/heading.vars' as headings;
6 5
7@mixin styles { 6@mixin styles {
7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
8 $-size-map: (
9 xs: h6,
10 sm: h5,
11 md: h4,
12 lg: h3,
13 xl: h2,
14 xxl: h1,
15 );
16
8 @include iro.bem-scope('headings') { 17 @include iro.bem-scope('headings') {
9 h1, 18 h1,
10 h2, 19 h2,
@@ -12,102 +21,45 @@
12 h4, 21 h4,
13 h5, 22 h5,
14 h6 { 23 h6 {
15 @include mx.set-font(--headline); 24 display: block;
16 25 margin-block-start: props.get(headings.$margin-bs);
17 display: block; 26 font-family: props.get(headings.$font-family);
18 text-transform: none; 27 font-weight: props.get(headings.$font-weight);
19 letter-spacing: normal; 28 font-feature-settings: props.get(headings.$feature-settings);
20 transform: translateX(-.06em); 29 line-height: props.get(headings.$line-height);
21 } 30 text-transform: none;
22 31 letter-spacing: normal;
23 32 transform: translateX(props.get(headings.$offset));
24 h1 {
25 @include mx.heading-strong(--xxl);
26 }
27
28 h2 {
29 @include mx.heading-strong(--xl);
30 }
31
32 h3 {
33 @include mx.heading-medium(--lg);
34 }
35
36 h4 {
37 @include mx.heading-medium(--md);
38 }
39
40 h5 {
41 @include mx.heading-faint(--sm);
42 }
43
44 h6 {
45 @include mx.heading-faint(--xs);
46 } 33 }
47 34
48 @include iro.bem-elem('highlight') { 35 @include iro.bem-elem('highlight') {
49 background-image: linear-gradient(to top, 36 background-image: linear-gradient(to top,
50 transparent .15em, 37 transparent .15em,
51 fn.foreign-color(--heading, --bg) .15em, 38 props.get(headings.$bg-color) .15em,
52 fn.foreign-color(--heading, --bg) .6em, 39 props.get(headings.$bg-color) .6em,
53 transparent .6em); 40 transparent .6em);
54 } 41 }
55 42
56 @include iro.bem-modifier('display') { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes {
57 h1, 44 #{map.get($-size-map, $mod)} {
58 h2, 45 font-family: props.get($font-family);
59 h3, 46 font-size: props.get($font-size);
60 h4, 47 font-weight: props.get($font-weight);
61 h5, 48 font-feature-settings: props.get($feature-settings);
62 h6 { 49 line-height: props.get($line-height);
63 @include mx.set-font(--headline); 50 letter-spacing: props.get($letter-spacing);
64 }
65
66 h1 {
67 @include mx.heading-strong(--display --xxl);
68
69 @include media.media('<=md') {
70 @include mx.heading-strong(--display-sm --xxl);
71 }
72 }
73
74 h2 {
75 @include mx.heading-strong(--display --xl);
76
77 @include media.media('<=md') {
78 @include mx.heading-strong(--display-sm --xl);
79 }
80 }
81
82 h3 {
83 @include mx.heading-strong(--display --lg);
84
85 @include media.media('<=md') {
86 @include mx.heading-strong(--display-sm --lg);
87 }
88 }
89
90 h4 {
91 @include mx.heading-strong(--display --md);
92
93 @include media.media('<=md') {
94 @include mx.heading-strong(--display-sm --md);
95 }
96 }
97
98 h5 {
99 @include mx.heading-medium(--display --sm);
100
101 @include media.media('<=md') {
102 @include mx.heading-medium(--display-sm --sm);
103 }
104 } 51 }
52 }
105 53
106 h6 { 54 @include iro.bem-modifier('display') {
107 @include mx.heading-faint(--display --xs); 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes {
108 56 #{map.get($-size-map, $mod)} {
109 @include media.media('<=md') { 57 font-family: props.get($font-family);
110 @include mx.heading-faint(--display-sm --xs); 58 font-size: props.get($font-size);
59 font-weight: props.get($font-weight);
60 font-feature-settings: props.get($feature-settings);
61 line-height: props.get($line-height);
62 letter-spacing: props.get($letter-spacing);
111 } 63 }
112 } 64 }
113 } 65 }
diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss
deleted file mode 100644
index e69de29..0000000
--- a/src/scopes/_headings.vars.scss
+++ /dev/null
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index ba34039..7909943 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -31,12 +31,10 @@
31 31
32 pre, 32 pre,
33 code { 33 code {
34 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; 34 font-family: props.get(vars.$code--font-family);
35 } 35 font-size: props.get(vars.$code--font-size);
36 36 font-feature-settings: props.get(vars.$code--feature-settings);
37 pre, 37 line-height: props.get(vars.$code--line-height);
38 code {
39 //@include mx.set-font(--mono, (--size: .93em));
40 } 38 }
41 39
42 pre { 40 pre {
@@ -55,9 +53,11 @@
55 h4, 53 h4,
56 h5, 54 h5,
57 h6 { 55 h6 {
58 //@include mx.heading-medium(--md); 56 margin-block: props.get(vars.$heading--margin-bs) 0;
59 57 font-family: props.get(vars.$heading--font-family);
60 margin-block: props.get(vars.$heading--margin-bs) 0; 58 font-weight: props.get(vars.$heading--font-weight);
59 font-feature-settings: props.get(vars.$heading--feature-settings);
60 line-height: props.get(vars.$heading--line-height);
61 61
62 & + & { 62 & + & {
63 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 63 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
@@ -77,7 +77,7 @@
77 } 77 }
78 78
79 small { 79 small {
80 font-size: props.get(core.$font-size--75); 80 font-size: props.get(vars.$small--font-size);
81 } 81 }
82 82
83 ul, 83 ul,
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 34979d9..80e2f67 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -3,5 +3,16 @@
3 3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; 4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
5 5
6$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default;
7
8$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
9$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
10$code--font-size: props.def(--s-implicit--code--font-size, .93em);
11$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
12
6$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; 13$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
7$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; 14$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
15$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default;
16$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !default;
17$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
18$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 05:43:21 +0000