diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_field-label.scss | 44 | ||||
-rw-r--r-- | src/objects/_field-label.vars.scss | 12 | ||||
-rw-r--r-- | src/objects/_heading.scss | 138 | ||||
-rw-r--r-- | src/objects/_heading.vars.scss | 122 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 89 | ||||
-rw-r--r-- | src/objects/_lightbox.vars.scss | 70 |
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'); | ||