From 50d24a41b5656cdaf31468b28d08da765ca95763 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 10:34:53 +0200 Subject: Update --- src/_core.vars.scss | 20 +----- src/_iro-design.scss | 4 +- src/_props.scss | 10 ++- src/objects/_field-label.scss | 44 +++++------- src/objects/_field-label.vars.scss | 12 ++++ src/objects/_heading.scss | 138 +++++++++++-------------------------- src/objects/_heading.vars.scss | 122 ++++++++++++++++++++++++++++++++ src/objects/_lightbox.scss | 89 +----------------------- src/objects/_lightbox.vars.scss | 70 +++++++++++++++++++ src/scopes/_headings.scss | 130 +++++++++++----------------------- src/scopes/_headings.vars.scss | 0 src/scopes/_implicit.scss | 20 +++--- src/scopes/_implicit.vars.scss | 11 +++ 13 files changed, 337 insertions(+), 333 deletions(-) create mode 100644 src/objects/_field-label.vars.scss create mode 100644 src/objects/_heading.vars.scss create mode 100644 src/objects/_lightbox.vars.scss delete mode 100644 src/scopes/_headings.vars.scss (limited to 'src') 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, $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; $font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; +$font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default; $font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default; $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 $key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; -$heading--xxl: props.def(--heading--xxl, props.get($font-size--300)) !default; -$heading--xl: props.def(--heading--xl, props.get($font-size--200)) !default; -$heading--lg: props.def(--heading--lg, props.get($font-size--150)) !default; -$heading--md: props.def(--heading--md, props.get($font-size--100)) !default; -$heading--sm: props.def(--heading--sm, props.get($font-size--75)) !default; -$heading--xs: props.def(--heading--xs, props.get($font-size--50)) !default; -$heading--display--xxl: props.def(--heading--display--xxl, props.get($font-size--1100)) !default; -$heading--display--xl: props.def(--heading--display--xl, props.get($font-size--700)) !default; -$heading--display--lg: props.def(--heading--display--lg, props.get($font-size--300)) !default; -$heading--display--md: props.def(--heading--display--md, props.get($font-size--150)) !default; -$heading--display--sm: props.def(--heading--display--sm, props.get($font-size--75)) !default; -$heading--display--xs: props.def(--heading--display--xs, props.get($font-size--50)) !default; -$heading--display-sm--xxl: props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default; -$heading--display-sm--xl: props.def(--heading--display-sm--xl, props.get($font-size--600)) !default; -$heading--display-sm--lg: props.def(--heading--display-sm--lg, props.get($font-size--200)) !default; -$heading--display-sm--md: props.def(--heading--display-sm--md, props.get($font-size--100)) !default; -$heading--display-sm--sm: props.def(--heading--display-sm--sm, props.get($font-size--75)) !default; -$heading--display-sm--xs: props.def(--heading--display-sm--xs, props.get($font-size--50)) !default; - $list--indent: props.def(--list--indent, props.get($size--400)) !default; $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; 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: ( @forward 'scopes/implicit' as s-implicit--*; @forward 'scopes/blockquotes' as s-blockquotes--*; @forward 'scopes/code' as s-code--*; -//@use 'scopes/headings' as s-headings--*; +@forward 'scopes/headings' as s-headings--*; @forward 'scopes/links' as s-links--*; @forward 'scopes/lists' as s-lists--*; //@use 'scopes/tables' as s-tables--*; @@ -47,4 +47,6 @@ $breakpoints: ( @forward 'objects/checkbox' as o-checkbox--*; @forward 'objects/divider' as o-divider--*; @forward 'objects/emoji' as o-emoji--*; +@forward 'objects/field-label' as o-field-label--*; +@forward 'objects/heading' as o-heading--*; @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 @@ } :root { - @include iro.props-materialize($ref); + @include iro.props-materialize($ref, null); @each $breakpoint in map.keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @@ -29,7 +29,13 @@ @each $theme-name in map.keys(themes.$themes) { @if $theme-name != themes.$theme-default { @include iro.bem-theme($theme-name) { - @include iro.props-materialize($ref); + @include iro.props-materialize($ref, null); + + @each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.props-materialize($ref, $breakpoint); + } + } @media (prefers-color-scheme: dark) { @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 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use 'icon.vars' as icon; -@include iro.props-namespace('field-label') { - @include iro.props-store(( - --dims: ( - --spacing-i: fn.global-dim(--size --150), - --spacing-b: fn.global-dim(--size --85), - --label-font-size: fn.global-dim(--font-size --75), - --hint-font-size: fn.global-dim(--font-size --75), - ), - --colors: ( - --label: fn.global-color(--text-mute), - --hint: fn.global-color(--text-mute), - --error-hint: fn.global-color(--negative --900), - --disabled: fn.global-color(--text-disabled), - ), - )); +@forward 'field-label.vars'; +@use 'field-label.vars' as vars; - @include iro.bem-object(iro.props-namespace()) { +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('field-label') { display: block; @include iro.bem-elem('label') { display: block; flex: 0 0 auto; - padding-inline-end: fn.dim(--spacing-i); - font-size: fn.dim(--label-font-size); + padding-inline-end: props.get(vars.$spacing-i); + font-size: props.get(vars.$label-font-size); font-weight: 400; line-height: 1.3; - color: fn.color(--label); + color: props.get(vars.$label-color); @include iro.bem-next-elem('content') { - margin-block-start: fn.dim(--spacing-b); + margin-block-start: props.get(vars.$spacing-b); } } @@ -41,20 +33,20 @@ @include iro.bem-elem('hint') { display: block; - margin-block-start: fn.dim(--spacing-b); - font-size: fn.dim(--hint-font-size); - color: fn.color(--hint); + margin-block-start: props.get(vars.$spacing-b); + font-size: props.get(vars.$hint-font-size); + color: props.get(vars.$hint-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('hint') { - color: fn.color(--error-hint); + color: props.get(vars.$error-hint-color); } } @include iro.bem-is('disabled') { @include iro.bem-elem('label', 'hint') { - color: fn.color(--disabled); + color: props.get(vars.$disabled-color); } } 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 @@ +@use '../props'; +@use '../core.vars' as core; + +$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; +$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; +$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; +$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; + +$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default; +$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default; +$error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default; +$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 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; -@use '../config'; -@use 'include-media/dist/include-media' as media; +@use '../props'; -$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; +@forward 'heading.vars'; +@use 'heading.vars' as vars; -@include iro.props-namespace('heading') { - @include iro.props-store(( - --dims: ( - --offset: -.02em, - ), - --colors: ( - --bg: fn.global-color(--base --50), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { - @include mx.set-font(--headline); - - display: block; - margin-block-start: fn.global-dim(--heading --margin-bs); - text-transform: none; - letter-spacing: normal; - transform: translateX(fn.dim(--offset)); + @include iro.bem-object('heading') { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); + font-feature-settings: props.get(vars.$feature-settings); + line-height: props.get(vars.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(vars.$offset)); & + & { - margin-block-start: fn.global-dim(--heading --margin-bs-sibling); + margin-block-start: props.get(vars.$margin-bs-sibling); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, - transparent .05em, - fn.color(--bg) .05em, - fn.color(--bg) .5em, - transparent .5em); - } - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--xxl); - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--xl); - } - - @include iro.bem-modifier('lg') { - @include mx.heading-medium(--lg); - } - - @include iro.bem-modifier('md') { - @include mx.heading-medium(--md); - } - - @include iro.bem-modifier('sm') { - @include mx.heading-faint(--sm); - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--xs); + transparent .05em, + props.get(vars.$bg-color) .05em, + props.get(vars.$bg-color) .5em, + transparent .5em); + } + + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { + @include iro.bem-modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } } @include iro.bem-modifier('display') { - @include mx.set-font(--headline); - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--display --xxl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xxl); - } - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--display --xl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xl); - } - } - - @include iro.bem-modifier('lg') { - @include mx.heading-strong(--display --lg); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --lg); - } - } - - @include iro.bem-modifier('md') { - @include mx.heading-strong(--display --md); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --md); - } - } - - @include iro.bem-modifier('sm') { - @include mx.heading-medium(--display --sm); - - @include media.media('<=md') { - @include mx.heading-medium(--display-sm --sm); - } - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--display --xs); - - @include media.media('<=md') { - @include mx.heading-faint(--display-sm --xs); + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { + @include iro.bem-modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); } } } 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 @@ +@use '../props'; +@use '../core.vars' as core; + +$offset: props.def(--o-heading--offset, -.02em) !default; +$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; +$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; + +$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default; + +$font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default; +$line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default; +$font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default; +$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; +$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; +$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; +$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; +$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; +$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; +$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; +$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; +$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; +$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; +$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; +$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; +$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; +$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; +$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; +$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; +$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; +$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; +$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; +$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; +$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; +$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; +$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; +$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; +$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; +$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; +$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$sizes: ( + 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, + 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, + 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, + 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, + 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, + 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, +) !default; + +$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; +$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; +$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; +$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; +$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; +$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; +$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; +$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; +$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; +$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; +$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; +$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; +$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; +$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; +$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; +$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; +$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; +$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; +$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; +$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; +$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; +$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; + +$display--sizes: ( + '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, + '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, + '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, + '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, + '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, + '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, +) !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 @@ $static-themes: 'black' 'white' !default; @include iro.props-namespace('lightbox') { - @include iro.props-store(( - --dims: ( - --pad: fn.global-dim(--size --150), - - --thumbnail: ( - --size: fn.global-dim(--size --700), - --rounding: fn.global-dim(--rounding), - --spacing: fn.global-dim(--size --100), - --border: fn.global-dim(--border --thin), - - --selected: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - - --close-button: ( - --font-size: fn.global-dim(--font-size --200), - ), - - --nav-button: ( - --width: fn.global-dim(--size --2000), - --height: fn.global-dim(--size --3800), - --font-size: fn.global-dim(--font-size --200), - ), - ), - --colors: ( - --thumbnail: ( - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - - --selected: ( - --border: fn.global-color(--heading), - ), - - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --text: fn.global-color(--white-transparent --800), - --thumbnail: ( - --border: fn.global-color(--white-transparent --400), - - --hover: ( - --border: fn.global-color(--white-transparent --500), - ), - - --selected: ( - --border: fn.global-color(--white-transparent --900), - ), - - --key-focus: ( - --border: fn.global-color(--#{$theme}-transparent --900), - --outline: fn.global-color(--#{$theme}-transparent --300), - ), - ), - ) - ) - )); - } - - @include iro.props-store(( - --dims: ( - --thumbnail: ( - --size: fn.global-dim(--size --600), - ), - --nav-button: ( - --width: fn.global-dim(--size --2500), - --height: fn.global-dim(--size --2500), - ), - ), - ), 'md'); + @include iro.bem-object(iro.props-namespace()) { 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 @@ +@use '../props'; +@use '../core.vars' as core; + +$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; + +$thumbnail--size: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default; +$thumbnail--rounding: props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default; +$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; +$thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default; + +$thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; + +$thumbnail--key-focus--border-width: props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; + +$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; +$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; +$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; + +$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default; + +$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; + +$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default; + +$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; + + + +@each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--white-transparent --800), + --thumbnail: ( + --border: fn.global-color(--white-transparent --400), + + --hover: ( + --border: fn.global-color(--white-transparent --500), + ), + + --selected: ( + --border: fn.global-color(--white-transparent --900), + ), + + --key-focus: ( + --border: fn.global-color(--#{$theme}-transparent --900), + --outline: fn.global-color(--#{$theme}-transparent --300), + ), + ), + ) + ) + )); +} + +@include iro.props-store(( + --dims: ( + --thumbnail: ( + --size: fn.global-dim(--size --600), + ), + --nav-button: ( + --width: fn.global-dim(--size --2500), + --height: fn.global-dim(--size --2500), + ), + ), +), '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 @@ -@use 'include-media/dist/include-media' as media; +@use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; -@use '../mixins' as mx; @use '../props'; -@use '../core.vars' as core; +@use '../objects/heading.vars' as headings; @mixin styles { + /* stylelint-disable-next-line scss/dollar-variable-pattern */ + $-size-map: ( + xs: h6, + sm: h5, + md: h4, + lg: h3, + xl: h2, + xxl: h1, + ); + @include iro.bem-scope('headings') { h1, h2, @@ -12,102 +21,45 @@ h4, h5, h6 { - @include mx.set-font(--headline); - - display: block; - text-transform: none; - letter-spacing: normal; - transform: translateX(-.06em); - } - - - h1 { - @include mx.heading-strong(--xxl); - } - - h2 { - @include mx.heading-strong(--xl); - } - - h3 { - @include mx.heading-medium(--lg); - } - - h4 { - @include mx.heading-medium(--md); - } - - h5 { - @include mx.heading-faint(--sm); - } - - h6 { - @include mx.heading-faint(--xs); + display: block; + margin-block-start: props.get(headings.$margin-bs); + font-family: props.get(headings.$font-family); + font-weight: props.get(headings.$font-weight); + font-feature-settings: props.get(headings.$feature-settings); + line-height: props.get(headings.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(headings.$offset)); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, transparent .15em, - fn.foreign-color(--heading, --bg) .15em, - fn.foreign-color(--heading, --bg) .6em, + props.get(headings.$bg-color) .15em, + props.get(headings.$bg-color) .6em, transparent .6em); } - @include iro.bem-modifier('display') { - h1, - h2, - h3, - h4, - h5, - h6 { - @include mx.set-font(--headline); - } - - h1 { - @include mx.heading-strong(--display --xxl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xxl); - } - } - - h2 { - @include mx.heading-strong(--display --xl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xl); - } - } - - h3 { - @include mx.heading-strong(--display --lg); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --lg); - } - } - - h4 { - @include mx.heading-strong(--display --md); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --md); - } - } - - h5 { - @include mx.heading-medium(--display --sm); - - @include media.media('<=md') { - @include mx.heading-medium(--display-sm --sm); - } + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes { + #{map.get($-size-map, $mod)} { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); } + } - h6 { - @include mx.heading-faint(--display --xs); - - @include media.media('<=md') { - @include mx.heading-faint(--display-sm --xs); + @include iro.bem-modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes { + #{map.get($-size-map, $mod)} { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); } } } diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss deleted file mode 100644 index e69de29..0000000 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 @@ pre, code { - font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; - } - - pre, - code { - //@include mx.set-font(--mono, (--size: .93em)); + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); + font-feature-settings: props.get(vars.$code--feature-settings); + line-height: props.get(vars.$code--line-height); } pre { @@ -55,9 +53,11 @@ h4, h5, h6 { - //@include mx.heading-medium(--md); - - margin-block: props.get(vars.$heading--margin-bs) 0; + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-weight: props.get(vars.$heading--font-weight); + font-feature-settings: props.get(vars.$heading--feature-settings); + line-height: props.get(vars.$heading--line-height); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); @@ -77,7 +77,7 @@ } small { - font-size: props.get(core.$font-size--75); + font-size: props.get(vars.$small--font-size); } 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 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; +$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; + +$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; +$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; +$code--font-size: props.def(--s-implicit--code--font-size, .93em); +$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; + $heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; +$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default; +$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !default; +$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; +$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -- cgit v1.2.3-70-g09d2