summaryrefslogtreecommitdiffstats
path: root/src/objects
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/objects
parentUpdate (diff)
downloadiro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.gz
iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.bz2
iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.zip
Update
Diffstat (limited to 'src/objects')
-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
6 files changed, 263 insertions, 212 deletions
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');
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 09:13:31 +0000