From c41e16f6044548e27fbf8e4ef65ed3067278c80b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 17:14:45 +0200 Subject: Update --- package.json | 2 +- src/_config.scss | 214 ++++++++++++++++++++++++ src/_core.scss | 4 +- src/_core.vars.scss | 12 +- src/_functions.scss | 4 +- src/_iro-design.scss | 9 +- src/_props.scss | 6 +- src/_themes.scss | 283 ++++++++------------------------ src/_utils.scss | 251 ++++++++++++++++++++++++++++ src/objects/_action-button.vars.scss | 3 +- src/objects/_badge.vars.scss | 3 +- src/objects/_button.vars.scss | 3 +- src/objects/_divider.vars.scss | 7 +- src/objects/_heading.vars.scss | 12 +- src/objects/_lightbox.vars.scss | 3 +- src/objects/_palette.scss | 14 +- src/objects/_status-indicator.vars.scss | 4 +- src/objects/_switch.scss | 139 ++++++---------- src/objects/_switch.vars.scss | 37 +++++ src/objects/_table.scss | 88 ++++------ src/objects/_table.vars.scss | 25 +++ src/objects/_text-field.scss | 139 +++++----------- src/objects/_text-field.vars.scss | 38 +++++ src/scopes/_headings.scss | 22 +-- src/scopes/_implicit.scss | 15 +- src/scopes/_implicit.vars.scss | 8 +- src/scopes/_links.vars.scss | 3 +- src/scopes/_tables.scss | 57 +++---- src/scopes/_tables.vars.scss | 24 +-- src_demo/_base.scss | 4 +- src_demo/components/_box.scss | 19 +-- src_demo/components/_content.scss | 8 +- src_demo/components/_sidebar.scss | 11 +- src_demo/components/_view.scss | 11 +- src_demo/index.scss | 14 ++ src_old/objects/_badge.scss | 12 +- src_old/objects/_button.scss | 12 +- tpl/index.pug | 2 +- tpl/layouts/container.pug | 8 +- tpl/views/action-button.pug | 4 +- tpl/views/badge.pug | 2 +- tpl/views/button.pug | 4 +- tpl/views/divider.pug | 4 +- 43 files changed, 929 insertions(+), 615 deletions(-) create mode 100644 src/_config.scss create mode 100644 src/_utils.scss create mode 100644 src/objects/_switch.vars.scss create mode 100644 src/objects/_table.vars.scss create mode 100644 src/objects/_text-field.vars.scss diff --git a/package.json b/package.json index f2432e6..3b5b4ee 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "private": true, "sideEffects": false, "scripts": { - "build": "npm run build:app && npm run build:demostyle && npm run build:icons && npm run build:assets", + "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", diff --git a/src/_config.scss b/src/_config.scss new file mode 100644 index 0000000..ced2aa5 --- /dev/null +++ b/src/_config.scss @@ -0,0 +1,214 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'iro-sass/src/easing' as easing; +@use 'include-media/dist/include-media' as media; + +$palette-chroma-easing: 'ease' !default; + +$static-colors-override: () !default; +$static-colors: map.deep-merge(( + --base: hsl(0, 0%, 98%), + + --contrasts: ( + --100: math.div(0, 12) * 110 - 10, + --200: math.div(1, 12) * 110 - 10, + --300: math.div(2, 12) * 110 - 10, + --400: math.div(3, 12) * 110 - 10, + --500: math.div(4, 12) * 110 - 10, + --600: math.div(5, 12) * 110 - 10, + --700: math.div(6, 12) * 110 - 10, + --800: math.div(7, 12) * 110 - 10, + --900: math.div(8, 12) * 110 - 10, + --1000: math.div(9, 12) * 110 - 10, + --1100: math.div(10, 12) * 110 - 10, + --1200: math.div(11, 12) * 110 - 10, + --1300: math.div(12, 12) * 110 - 10, + ), + + --palettes: ( + --blue: oklch(56% .14 275.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 14.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), + ), + + --transparents: ( + --100: 0, + --200: .1, + --300: .25, + --400: .4, + --500: .55, + --600: .7, + --700: .8, + --800: .9, + --900: 1, + ), +), $static-colors-override) !default; + +$semantic-colors-common-override: () !default; +$semantic-colors-common: map.deep-merge(( + --accent: --theme --blue, + --accent-static: --static --blue, + --positive: --theme --green, + --positive-static: --static --green, + --negative: --theme --red, + --negative-static: --static --red, + --warning: --theme --yellow, + --warning-static: --static --yellow, + + --focus-raw: --theme --accent, + --focus-static: --theme --accent-static, + + --border-mute: --theme --base --200, + --border: --theme --base --300, + --border-strong: --theme --base --400, + + --text-disabled: --theme --base --500, + --text-mute-more: --theme --base --600, + --text-mute: --theme --base --700, + --text: --theme --base --800, + --heading: --theme --base --900, + + --focus: ( + --outline: --theme --focus-raw --400, + --border-mute: --theme --focus-raw --900, + --border: --theme --focus-raw --1000, + --border-text: --theme --focus-raw --1000-text, + --border-strong: --theme --focus-raw --1100, + --text: --theme --focus-raw --1100, + ), +), $semantic-colors-common-override) !default; + +$theme-light-override: () !default; +$theme-light: map.deep-merge(( + --contrasts: ( + --grays: ( + --50: -8, + --75: -4, + --100: 0, + + --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98, + --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98, + --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98, + + --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98, + --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98, + --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98, + --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98, + --900: 106, + ), + + --colors: ( + --100: math.div(0, 12) * 96 + 5, + --200: math.div(1, 12) * 96 + 5, + --300: math.div(2, 12) * 96 + 5, + --400: math.div(3, 12) * 96 + 5, + --500: math.div(4, 12) * 96 + 5, + --600: math.div(5, 12) * 96 + 5, + --700: math.div(6, 12) * 96 + 5, + --800: math.div(7, 12) * 96 + 5, + --900: math.div(8, 12) * 96 + 5, + --1000: math.div(9, 12) * 96 + 5, + --1100: math.div(10, 12) * 96 + 5, + --1200: math.div(11, 12) * 96 + 5, + --1300: math.div(12, 12) * 96 + 5, + ), + ), + + --ranges: ( + --full: .3, + --muted: .1, + ), + + --palettes: ( + --base: hsl(260, 90%, 98%) --grays --full, + --blue: oklch(56% .16 275.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 14.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-l2: --theme --base --50, + --bg-l1: --theme --base --100, + --bg-base: --theme --base --200, + )), + + --constants: ( + --shadow: rgba(#000, .15), + ), +), $theme-light-override) !default; + +$theme-dark-override: () !default; +$theme-dark: map.deep-merge(( + --contrasts: ( + --grays: ( + --50: 4.4, + --75: 2.2, + --100: 0, + + --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, + --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, + --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, + + --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, + --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, + --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, + --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, + --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, + ), + + --colors: ( + --100: math.div(0, 12) * -100 - 5, + --200: math.div(1, 12) * -100 - 5, + --300: math.div(2, 12) * -100 - 5, + --400: math.div(3, 12) * -100 - 5, + --500: math.div(4, 12) * -100 - 5, + --600: math.div(5, 12) * -100 - 5, + --700: math.div(6, 12) * -100 - 5, + --800: math.div(7, 12) * -100 - 5, + --900: math.div(8, 12) * -100 - 5, + --1000: math.div(9, 12) * -100 - 5, + --1100: math.div(10, 12) * -100 - 5, + --1200: math.div(11, 12) * -100 - 5, + --1300: math.div(12, 12) * -100 - 5, + ), + ), + + --ranges: ( + --full: 1, + --muted: .3, + ), + + --palettes: ( + --base: hsl(257, 7%, 19%) --grays --full, + --blue: oklch(56% .16 275.25) --colors --muted, + --purple: oklch(56% .16 305.58) --colors --muted, + --red: oklch(56% .16 14.69) --colors --muted, + --green: oklch(56% .16 150.48) --colors --muted, + --yellow: oklch(56% .16 84.08) --colors --muted, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-base: --theme --base --50, + --bg-l1: --theme --base --75, + --bg-l2: --theme --base --100, + )), + + --constants: ( + --shadow: rgba(#000, .5), + ), +), $theme-dark-override) !default; + +$themes-override: () !default; +$themes: map.deep-merge(( + --main: ( + light: $theme-light, + dark: $theme-dark, + ) +), $themes-override) !default; + +$theme-default: list.nth(map.keys($themes), 1) !default; diff --git a/src/_core.scss b/src/_core.scss index e1205c4..ea84f6c 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -1,14 +1,14 @@ @use 'sass:map'; @use 'sass:meta'; @use 'iro-sass/src/props'; -@use 'themes'; +@use 'config'; @use 'core.vars' as vars; @forward 'core.vars'; @mixin styles { @each $theme-name, $theme in vars.$themes { - @if $theme-name == themes.$theme-default { + @if $theme-name == config.$theme-default { :root { @include props.materialize(map.values(meta.module-variables('vars'))); diff --git a/src/_core.vars.scss b/src/_core.vars.scss index abaf879..3b23c32 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -3,7 +3,7 @@ @use 'sass:list'; @use 'iro-sass/src/iro-sass' as iro; @use 'functions' as fn; -@use 'themes'; +@use 'config'; @use 'props'; $size--0: props.def(--size--0, 0) !default; @@ -104,8 +104,8 @@ $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default $static-colors: props.def(--static-colors); -@each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { - $palette: fn.palette($palette, map.get(themes.$static-colors, --contrasts), 1, map.get(themes.$static-colors, --base)); +@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { + $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base)); $static-colors: props.merge($static-colors, ( $palette-name: $palette )); } @@ -117,7 +117,7 @@ $transparent-colors: props.def(--transparent-colors); $color: list.nth($palette, 1); $text: list.nth($palette, 2); - $palette: fn.transparent-palette($color, $text, map.get(themes.$static-colors, --transparents)); + $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); } @@ -125,7 +125,7 @@ $transparent-colors: props.def(--transparent-colors); $themes: (); -@each $theme-name, $theme in themes.$themes { +@each $theme-name, $theme in config.$themes { @each $variant-name, $variant in $theme { $compiled: props.def(--colors); @@ -182,4 +182,4 @@ $themes: (); } } -$theme: map.get($themes, themes.$theme-default, light) !default; +$theme: map.get($themes, config.$theme-default, light) !default; diff --git a/src/_functions.scss b/src/_functions.scss index ad45975..a3a9386 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -7,7 +7,7 @@ @use 'iro-sass/src/iro-sass' as iro; @use 'iro-sass/src/easing'; @use 'apca'; -@use 'themes'; +@use 'config'; @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { $base-lch: color.to-space($base-color, oklch); @@ -27,7 +27,7 @@ $chroma-inv: true; $chroma-range: -1 * $chroma-range; } - $chroma-easing: meta.get-function(themes.$palette-chroma-easing, $module: easing); + $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); $palette: (); diff --git a/src/_iro-design.scss b/src/_iro-design.scss index eac485d..64b2ec9 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -35,7 +35,7 @@ $breakpoints: ( @forward 'scopes/headings' as s-headings--*; @forward 'scopes/links' as s-links--*; @forward 'scopes/lists' as s-lists--*; -//@use 'scopes/tables' as s-tables--*; +@forward 'scopes/tables' as s-tables--*; @forward 'objects/action-button' as o-action-button--*; @forward 'objects/alert' as o-alert--*; @@ -57,3 +57,10 @@ $breakpoints: ( @forward 'objects/radio' as o-radio--*; @forward 'objects/side-nav' as o-side-nav--*; @forward 'objects/status-indicator' as o-status-indicator--*; +@forward 'objects/switch' as o-switch--*; +@forward 'objects/table' as o-table--*; +@forward 'objects/text-field' as o-text-field--*; + +@forward 'utils' as utils--*; + +@forward 'themes' as themes--*; diff --git a/src/_props.scss b/src/_props.scss index 1a0f7d0..09082a3 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -1,7 +1,7 @@ @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; -@use 'themes'; +@use 'config'; @use 'include-media/dist/include-media' as media; @use 'iro-sass/src/iro-sass' as iro; @@ -26,8 +26,8 @@ } } - @each $theme-name in map.keys(themes.$themes) { - @if $theme-name != themes.$theme-default { + @each $theme-name in map.keys(config.$themes) { + @if $theme-name != config.$theme-default { @include iro.bem-theme($theme-name) { @include iro.props-materialize($ref, null); diff --git a/src/_themes.scss b/src/_themes.scss index ced2aa5..b460baf 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -1,214 +1,73 @@ -@use 'sass:list'; @use 'sass:map'; -@use 'sass:math'; -@use 'iro-sass/src/easing' as easing; +@use 'iro-sass/src/iro-sass' as iro; @use 'include-media/dist/include-media' as media; - -$palette-chroma-easing: 'ease' !default; - -$static-colors-override: () !default; -$static-colors: map.deep-merge(( - --base: hsl(0, 0%, 98%), - - --contrasts: ( - --100: math.div(0, 12) * 110 - 10, - --200: math.div(1, 12) * 110 - 10, - --300: math.div(2, 12) * 110 - 10, - --400: math.div(3, 12) * 110 - 10, - --500: math.div(4, 12) * 110 - 10, - --600: math.div(5, 12) * 110 - 10, - --700: math.div(6, 12) * 110 - 10, - --800: math.div(7, 12) * 110 - 10, - --900: math.div(8, 12) * 110 - 10, - --1000: math.div(9, 12) * 110 - 10, - --1100: math.div(10, 12) * 110 - 10, - --1200: math.div(11, 12) * 110 - 10, - --1300: math.div(12, 12) * 110 - 10, - ), - - --palettes: ( - --blue: oklch(56% .14 275.25), - --purple: oklch(56% .14 305.58), - --red: oklch(56% .14 14.69), - --green: oklch(56% .14 150.48), - --yellow: oklch(56% .14 84.08), - ), - - --transparents: ( - --100: 0, - --200: .1, - --300: .25, - --400: .4, - --500: .55, - --600: .7, - --700: .8, - --800: .9, - --900: 1, - ), -), $static-colors-override) !default; - -$semantic-colors-common-override: () !default; -$semantic-colors-common: map.deep-merge(( - --accent: --theme --blue, - --accent-static: --static --blue, - --positive: --theme --green, - --positive-static: --static --green, - --negative: --theme --red, - --negative-static: --static --red, - --warning: --theme --yellow, - --warning-static: --static --yellow, - - --focus-raw: --theme --accent, - --focus-static: --theme --accent-static, - - --border-mute: --theme --base --200, - --border: --theme --base --300, - --border-strong: --theme --base --400, - - --text-disabled: --theme --base --500, - --text-mute-more: --theme --base --600, - --text-mute: --theme --base --700, - --text: --theme --base --800, - --heading: --theme --base --900, - - --focus: ( - --outline: --theme --focus-raw --400, - --border-mute: --theme --focus-raw --900, - --border: --theme --focus-raw --1000, - --border-text: --theme --focus-raw --1000-text, - --border-strong: --theme --focus-raw --1100, - --text: --theme --focus-raw --1100, - ), -), $semantic-colors-common-override) !default; - -$theme-light-override: () !default; -$theme-light: map.deep-merge(( - --contrasts: ( - --grays: ( - --50: -8, - --75: -4, - --100: 0, - - --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98, - --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98, - --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98, - - --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98, - --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98, - --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98, - --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98, - --900: 106, - ), - - --colors: ( - --100: math.div(0, 12) * 96 + 5, - --200: math.div(1, 12) * 96 + 5, - --300: math.div(2, 12) * 96 + 5, - --400: math.div(3, 12) * 96 + 5, - --500: math.div(4, 12) * 96 + 5, - --600: math.div(5, 12) * 96 + 5, - --700: math.div(6, 12) * 96 + 5, - --800: math.div(7, 12) * 96 + 5, - --900: math.div(8, 12) * 96 + 5, - --1000: math.div(9, 12) * 96 + 5, - --1100: math.div(10, 12) * 96 + 5, - --1200: math.div(11, 12) * 96 + 5, - --1300: math.div(12, 12) * 96 + 5, - ), - ), - - --ranges: ( - --full: .3, - --muted: .1, - ), - - --palettes: ( - --base: hsl(260, 90%, 98%) --grays --full, - --blue: oklch(56% .16 275.25) --colors --muted, - --purple: oklch(56% .16 305.58) --colors --muted, - --red: oklch(56% .16 14.69) --colors --muted, - --green: oklch(56% .16 150.48) --colors --muted, - --yellow: oklch(56% .16 84.08) --colors --muted, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-l2: --theme --base --50, - --bg-l1: --theme --base --100, - --bg-base: --theme --base --200, - )), - - --constants: ( - --shadow: rgba(#000, .15), - ), -), $theme-light-override) !default; - -$theme-dark-override: () !default; -$theme-dark: map.deep-merge(( - --contrasts: ( - --grays: ( - --50: 4.4, - --75: 2.2, - --100: 0, - - --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, - --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, - --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, - - --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, - --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, - --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, - --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, - --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, - ), - - --colors: ( - --100: math.div(0, 12) * -100 - 5, - --200: math.div(1, 12) * -100 - 5, - --300: math.div(2, 12) * -100 - 5, - --400: math.div(3, 12) * -100 - 5, - --500: math.div(4, 12) * -100 - 5, - --600: math.div(5, 12) * -100 - 5, - --700: math.div(6, 12) * -100 - 5, - --800: math.div(7, 12) * -100 - 5, - --900: math.div(8, 12) * -100 - 5, - --1000: math.div(9, 12) * -100 - 5, - --1100: math.div(10, 12) * -100 - 5, - --1200: math.div(11, 12) * -100 - 5, - --1300: math.div(12, 12) * -100 - 5, - ), - ), - - --ranges: ( - --full: 1, - --muted: .3, - ), - - --palettes: ( - --base: hsl(257, 7%, 19%) --grays --full, - --blue: oklch(56% .16 275.25) --colors --muted, - --purple: oklch(56% .16 305.58) --colors --muted, - --red: oklch(56% .16 14.69) --colors --muted, - --green: oklch(56% .16 150.48) --colors --muted, - --yellow: oklch(56% .16 84.08) --colors --muted, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-base: --theme --base --50, - --bg-l1: --theme --base --75, - --bg-l2: --theme --base --100, - )), - - --constants: ( - --shadow: rgba(#000, .5), - ), -), $theme-dark-override) !default; - -$themes-override: () !default; -$themes: map.deep-merge(( - --main: ( - light: $theme-light, - dark: $theme-dark, - ) -), $themes-override) !default; - -$theme-default: list.nth(map.keys($themes), 1) !default; +@use 'props'; + +@use 'core.vars' as vars; +@forward 'core.vars'; + +@mixin styles { + @include iro.bem-theme('base') { + background-color: props.get(vars.$theme, --bg-base); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-base); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-base); + } + } + } + + @include iro.bem-theme('l1') { + background-color: props.get(vars.$theme, --bg-l1); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-l1); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-l1); + } + } + } + + @include iro.bem-theme('l2') { + background-color: props.get(vars.$theme, --bg-l2); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-l2); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-l2); + } + } + } + + @include iro.bem-theme('50') { + background-color: props.get(vars.$theme, --base --50); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --base --50); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --base --50); + } + } + } +} diff --git a/src/_utils.scss b/src/_utils.scss new file mode 100644 index 0000000..fdec622 --- /dev/null +++ b/src/_utils.scss @@ -0,0 +1,251 @@ +@use 'sass:map'; +@use 'iro-sass/src/iro-sass' as iro; +@use 'include-media/dist/include-media' as media; +@use 'props'; + +@use 'core.vars' as vars; +@forward 'core.vars'; + +/* stylelint-disable-next-line scss/dollar-variable-pattern */ +$-dirs: ( + '': '', + 'bs': '-block-start', + 'be': '-block-end', + 'b': '-block', + 'is': '-inline-start', + 'ie': '-inline-end', + 'i': '-inline', +) !default; + +/* stylelint-disable-next-line scss/dollar-variable-pattern */ +$-sizes: ( + 0: vars.$size--0, + 10: vars.$size--10, + 50: vars.$size--50, + 75: vars.$size--75, + 100: vars.$size--100, + 125: vars.$size--125, + 200: vars.$size--200, + 400: vars.$size--400, + 700: vars.$size--700, + 800: vars.$size--800, +) !default; + +@mixin styles { + @include iro.bem-utility('d-block') { + display: block; + } + + @include iro.bem-utility('d-inline-block') { + display: inline-block; + } + + @include iro.bem-utility('d-contents') { + display: contents; + } + + @include iro.bem-utility('td-none') { + text-decoration: none; + } + + @include iro.bem-utility('d-none') { + display: none; + + @each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.bem-suffix('#{$breakpoint}-lo') { + display: none; + } + } + + @include media.media('>#{$breakpoint}') { + @include iro.bem-suffix('#{$breakpoint}-hi') { + display: none; + } + } + } + + @include iro.bem-at-theme('js') { + @include iro.bem-suffix('js') { + display: none; + } + } + + @include iro.bem-at-theme('no-js') { + @include iro.bem-suffix('no-js') { + display: none; + } + } + + @include iro.bem-suffix('empty') { + &:empty { + display: none; + } + } + } + + @include iro.bem-utility('ta-start') { + text-align: start; + } + + @include iro.bem-utility('ta-end') { + text-align: end; + } + + @include iro.bem-utility('ta-center') { + text-align: center; + } + + @include iro.bem-utility('fw-normal') { + font-weight: normal; + } + + @include iro.bem-utility('ai-center') { + align-items: center; + } + + @include iro.bem-utility('ai-start') { + align-items: flex-start; + } + + @include iro.bem-utility('ai-end') { + align-items: flex-end; + } + + @include iro.bem-utility('jc-center') { + justify-content: center; + } + + @include iro.bem-utility('jc-start') { + justify-content: flex-start; + } + + @include iro.bem-utility('jc-end') { + justify-content: flex-end; + } + + @include iro.bem-utility('c-heading') { + color: props.get(vars.$theme, --heading); + } + + @include iro.bem-utility('c-text') { + color: props.get(vars.$theme, --text); + } + + @include iro.bem-utility('c-mute') { + color: props.get(vars.$theme, --text-mute); + } + + @include iro.bem-utility('c-mute-more') { + color: props.get(vars.$theme, --text-mute-more); + } + + @each $dir, $prop in (is: inline-size, bs: block-size) { + @include iro.bem-utility('#{$dir}-100') { + #{$prop}: 100%; + } + + @include iro.bem-utility('#{$dir}-75') { + #{$prop}: 75%; + } + + @include iro.bem-utility('#{$dir}-50') { + #{$prop}: 50%; + } + + @include iro.bem-utility('#{$dir}-25') { + #{$prop}: 25%; + } + + @include iro.bem-utility('#{$dir}-1px') { + #{$prop}: 1px; + } + + @include iro.bem-utility('#{$dir}-0') { + #{$prop}: 0; + } + } + + @include iro.bem-utility('elp') { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + @include iro.bem-utility('p-static') { + position: static; + } + + @include iro.bem-utility('p-relative') { + position: relative; + } + + @include iro.bem-utility('p-fixed') { + position: fixed; + } + + @include iro.bem-utility('p-sticky-bs') { + position: sticky; + inset-block-start: 0; + } + + @each $dir, $suffix in $-dirs { + @include iro.bem-utility('m#{$dir}-auto') { + margin#{$suffix}: auto; + } + + @include iro.bem-utility('p#{$dir}-auto') { + padding#{$suffix}: auto; + } + + @each $mod, $size in $-sizes { + @include iro.bem-utility('m#{$dir}-#{$mod}') { + margin#{$suffix}: props.get($size); + } + + @include iro.bem-utility('p#{$dir}-#{$mod}') { + padding#{$suffix}: props.get($size); + } + } + + @include iro.bem-utility('b#{$dir}-0') { + border#{$suffix}: 0; + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + border#{$suffix}: 0; + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + border#{$suffix}: 0; + } + } + } + + @include iro.bem-utility('b#{$dir}-1') { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + + @include iro.bem-suffix('light') { + @media (prefers-color-scheme: light) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + } + } + + @include iro.bem-suffix('dark') { + @media (prefers-color-scheme: dark) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + } + } + } + } + + @include iro.bem-utility('mbs-neutralize') { + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } +} diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 4c9603c..9049a8f 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -111,7 +112,7 @@ $default-theme: map.deep-merge(( $default-theme: props.def(--o-action-button, $default-theme); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $themes: props.merge($themes, ( $button-theme: ( diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 9254c83..f9a4ed5 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -76,7 +77,7 @@ $default-theme: props.merge($default-theme, $default-theme-override); $static-themes: props.def(--o-badge); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $badge-theme: #{$theme}-static; + $badge-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $badge-theme: ( diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 237cb79..7640e57 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -86,7 +87,7 @@ $default-theme: props.merge($default-theme, $default-theme-override); $static-themes: props.def(--o-button); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $button-theme: ( diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 09e734f..01c4b92 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -25,7 +26,7 @@ $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$ $static-themes: props.def(--o-divider); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $button-theme: ( @@ -52,8 +53,8 @@ $themes: props.def(--o-divider); @each $theme in $themes-config { $themes: props.merge($themes, ( $theme: ( - --bg: props.get(core.$static-colors, $theme, --800), - --label: props.get(core.$static-colors, $theme, --1000), + --bg: props.get(core.$theme, $theme, --800), + --label: props.get(core.$theme, $theme, --1000), ) )); } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 31a2406..58b4d74 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -27,28 +27,28 @@ $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; +$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--headline--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; +$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--headline--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; +$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--headline--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; +$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--headline--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; @@ -92,14 +92,14 @@ $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spaci $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--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--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--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--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; diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 32324a4..3906716 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -37,7 +38,7 @@ $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, pr $static-themes: props.def(--o-lightbox); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $lightbox-theme: #{$theme}-static; + $lightbox-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $lightbox-theme: ( diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index c4f8e96..d83b297 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -2,7 +2,7 @@ @use 'sass:map'; @use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../themes'; +@use '../config'; @use '../props'; @use '../core.vars' as core; @@ -14,8 +14,8 @@ @include iro.bem-elem('item') { flex: 1 1 auto; - $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); - $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); + $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); + $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); @@ -26,8 +26,8 @@ } } - @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { - $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); + @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { + $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @@ -43,8 +43,8 @@ } @include iro.bem-modifier('static') { - @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { - $contrasts: map.get(themes.$static-colors, --contrasts); + @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { + $contrasts: map.get(config.$static-colors, --contrasts); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index 1d0a06a..d83194f 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use '../props'; -@use '../themes' as themes; +@use '../config'; @use '../core.vars' as core; $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; @@ -8,7 +8,7 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; -$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; +$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default; $themes: props.def(--o-status-indicator); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index fa903b1..5383432 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,90 +1,50 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use '../core.vars' as core; -@include iro.props-namespace('switch') { - @include iro.props-store(( - --dims: ( - --width: fn.global-dim(--size --350), - --height: fn.global-dim(--size --200), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-i: fn.global-dim(--size --65), - --pad-b: fn.global-dim(--size --65), - --rounding: fn.global-dim(--rounding), - --spacing-sibling: fn.global-dim(--size --300), +@forward 'switch.vars'; +@use 'switch.vars' as vars; - --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), - ), - ), - --colors: ( - --track-bg: fn.global-color(--border), - --handle-border: fn.global-color(--text-mute-more), - --handle-bg: fn.global-color(--base --50), - - --hover: ( - --label: fn.global-color(--heading), - --handle-border: fn.global-color(--text-mute), - ), - --accent: ( - --handle-border: fn.global-color(--accent --900), - - --hover: ( - --handle-border: fn.global-color(--accent --1000), - ), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - --track-bg: fn.global-color(--border), - --handle-border: fn.global-color(--border-strong), - --handle-bg: fn.global-color(--base --50), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('switch') { position: relative; display: inline-block; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-inline: - calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) - calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); @include iro.bem-elem('indicator') { display: inline-block; flex: 0 0 auto; - inline-size: fn.dim(--width); - block-size: fn.dim(--height); - margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); vertical-align: top; - background-color: fn.color(--track-bg); + background-color: props.get(vars.$track-bg-color); background-clip: padding-box; - border: fn.dim(--key-focus --border-offset) solid transparent; + border: props.get(vars.$key-focus--border-offset) solid transparent; border-radius: 2em; transition: background-color .2s ease; &::after { display: block; - inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); - block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); + inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); content: ''; - background-color: fn.color(--handle-bg); - border: fn.dim(--border) solid fn.color(--handle-border); - border-radius: fn.dim(--width); + background-color: props.get(vars.$handle-bg-color); + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); transition: transform .2s ease; } } @include iro.bem-elem('label') { - margin-inline-start: fn.dim(--label-gap); + margin-inline-start: props.get(vars.$label-gap); } @include iro.bem-elem('native') { @@ -98,38 +58,38 @@ margin: 0; overflow: hidden; appearance: none; - border-radius: fn.dim(--rounding); + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--hover --label); + color: props.get(vars.$hover--label-color); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: fn.color(--hover --handle-border); + border-color: props.get(vars.$hover--handle-border-color); } } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--handle-border); + background-color: props.get(vars.$handle-border-color); &::after { - border-color: fn.color(--handle-border); - transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); + border-color: props.get(vars.$handle-border-color); + transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); } } &:hover, &:focus-visible { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--hover --handle-border); + background-color: props.get(vars.$hover--handle-border-color); &::after { - border-color: fn.color(--hover --handle-border); + border-color: props.get(vars.$hover--handle-border-color); } } } @@ -137,24 +97,24 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --track-bg); + background-color: props.get(vars.$disabled--track-bg-color); &::after { - background-color: fn.color(--disabled --handle-bg); - border-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-bg-color); + border-color: props.get(vars.$disabled--handle-border-color); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-border-color); &::after { - border-color: fn.color(--disabled --handle-border); + border-color: props.get(vars.$disabled--handle-border-color); } } } @@ -162,12 +122,17 @@ &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); + color: props.get(vars.$key-focus--label-color); } @include iro.bem-sibling-elem('indicator') { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); } } } @@ -182,20 +147,20 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--accent --handle-border); + background-color: props.get(vars.$accent--handle-border-color); &::after { - border-color: fn.color(--accent --handle-border); + border-color: props.get(vars.$accent--handle-border-color); } } &:hover, &:focus-visible { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--accent --hover --handle-border); + background-color: props.get(vars.$accent--hover--handle-border-color); &::after { - border-color: fn.color(--accent --hover --handle-border); + border-color: props.get(vars.$accent--hover--handle-border-color); } } } @@ -203,15 +168,15 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-border-color); &::after { - border-color: fn.color(--disabled --handle-border); + border-color: props.get(vars.$disabled--handle-border-color); } } } diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss new file mode 100644 index 0000000..118291d --- /dev/null +++ b/src/objects/_switch.vars.scss @@ -0,0 +1,37 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; +$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; +$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; + +$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default; +$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default; +$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default; + +$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default; +$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default; + +$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default; + +$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default; + +$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default; +$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default; +$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default; + +$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; +$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; + diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 5b16d66..d5b5545 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -1,33 +1,14 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; +@use '../props'; -@include iro.props-namespace('table') { - @include iro.props-store(( - --dims: ( - --pad-i: fn.global-dim(--size --175), - --pad-b: fn.global-dim(--size --125), - --rounding: fn.global-dim(--rounding), - --border: fn.global-dim(--border --thin), +@forward 'table.vars'; +@use 'table.vars' as vars; - --sm: ( - --pad-b: fn.global-dim(--size --75), - ) - ), - --colors: ( - --border: fn.global-color(--border), - --heading: fn.global-color(--heading), - --hover: fn.global-color(--border-mute), - --active: fn.global-color(--border), - --box: ( - --bg: fn.global-color(--base --50), - --hover: fn.global-color(--bg-base), - --active: fn.global-color(--border-mute), - ) - ) - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('table') { border-spacing: 0; border-collapse: separate; @@ -36,37 +17,34 @@ } @include iro.bem-elem('head-cell') { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: bold, - --transform: uppercase, - --spacing: .5px - )); - padding-block: fn.dim(--pad-b); - - padding-inline: fn.dim(--pad-i); - color: fn.color(--heading); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + color: props.get(vars.$heading-color); text-align: start; + text-transform: props.get(vars.$heading--text-transform); + letter-spacing: props.get(vars.$heading--letter-spacing); } @include iro.bem-elem('cell') { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - border-color: fn.color(--border); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + border-color: props.get(vars.$border-color); border-style: solid; border-width: 0; - border-block-start-width: fn.dim(--border); + border-block-start-width: props.get(vars.$border-width); @include iro.bem-modifier('divider') { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(vars.$border-width); } } @include iro.bem-elem('row') { &:last-child { @include iro.bem-elem('cell') { - border-block-end-width: fn.dim(--border); + border-block-end-width: props.get(vars.$border-width); } } } @@ -85,14 +63,14 @@ @include iro.bem-modifier('box') { @include iro.bem-elem('cell') { - background-color: fn.color(--box --bg); + background-color: props.get(vars.$box--bg-color); &:first-child { - border-inline-start-width: fn.dim(--border); + border-inline-start-width: props.get(vars.$border-width); } &:last-child { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(vars.$border-width); } } @@ -100,11 +78,11 @@ &:first-child { @include iro.bem-elem('cell') { &:first-child { - border-start-start-radius: fn.dim(--rounding); + border-start-start-radius: props.get(vars.$rounding); } &:last-child { - border-start-end-radius: fn.dim(--rounding); + border-start-end-radius: props.get(vars.$rounding); } } } @@ -112,11 +90,11 @@ &:last-child { @include iro.bem-elem('cell') { &:first-child { - border-end-start-radius: fn.dim(--rounding); + border-end-start-radius: props.get(vars.$rounding); } &:last-child { - border-end-end-radius: fn.dim(--rounding); + border-end-end-radius: props.get(vars.$rounding); } } } @@ -131,13 +109,13 @@ &:hover { @include iro.bem-elem('cell') { - background-color: fn.color(--hover); + background-color: props.get(vars.$hover--bg-color); } } &:active { @include iro.bem-elem('cell') { - background-color: fn.color(--active); + background-color: props.get(vars.$active--bg-color); } } } @@ -146,13 +124,13 @@ @include iro.bem-elem('row') { &:hover { @include iro.bem-elem('cell') { - background-color: fn.color(--box --hover); + background-color: props.get(vars.$box--hover--bg-color); } } &:active { @include iro.bem-elem('cell') { - background-color: fn.color(--box --active); + background-color: props.get(vars.$box--active--bg-color); } } } @@ -161,7 +139,7 @@ @include iro.bem-modifier('sm') { @include iro.bem-elem('head-cell', 'cell') { - padding-block: fn.dim(--sm --pad-b); + padding-block: props.get(vars.$pad-b--sm); } } } diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss new file mode 100644 index 0000000..df97e17 --- /dev/null +++ b/src/objects/_table.vars.scss @@ -0,0 +1,25 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; +$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; + +$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; +$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; +$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; +$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; +$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; + +$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; + +$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default; +$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default; +$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default; +$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default; + +$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default; +$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default; +$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index cfb5a6d..793d23a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,100 +1,51 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -@mixin invalid { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@forward 'text-field.vars'; +@use 'text-field.vars' as vars; + +@mixin -invalid { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--error --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --hover --border); + border-color: props.get(vars.$error--hover--border-color); } } &:focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --focus --border); + border-color: props.get(vars.$error--focus--border-color); } } } -@mixin keyboard-focus { +@mixin -keyboard-focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--key-focus --border); - outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); - //outline-offset: fn.dim(--focus --border); + border-color: props.get(vars.$key-focus--border-color); + outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); + //outline-offset: props.get(vars.$focus --border); } } -@include iro.props-namespace('text-field') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-i: fn.global-dim(--size --125), - --pad-b: fn.global-dim(--size --125), - --border: fn.global-dim(--border --thin), - --rounding: fn.global-dim(--rounding), - - --extended: ( - --pad: fn.global-dim(--size --50), - ), - - --focus: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --bg: fn.global-color(--base --50), - --placeholder: fn.global-color(--text-mute-more), - --text: fn.global-color(--text), - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - --focus: ( - --border: fn.global-color(--focus --border), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - --error: ( - --border: fn.global-color(--negative --700), - - --hover: ( - --border: fn.global-color(--negative --900), - ), - --focus: ( - --border: fn.global-color(--negative --900), - ), - ), - --disabled: ( - --bg: fn.global-color(--border-mute), - --placeholder: fn.global-color(--text-disabled), - --text: fn.global-color(--text-disabled), - --border: fn.global-color(--border-mute), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('text-field') { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); position: relative; min-inline-size: 0; - background-color: fn.color(--bg); - border-radius: fn.dim(--rounding); + background-color: props.get(vars.$bg-color); + border-radius: props.get(vars.$rounding); @include iro.bem-elem('bg') { position: absolute; @@ -102,18 +53,18 @@ inset-inline: 0; display: block; pointer-events: none; - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); } @include iro.bem-elem('native') { box-sizing: border-box; inline-size: 100%; - padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); - padding-inline: fn.dim(--pad-i); + padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); + padding-inline: props.get(vars.$pad-i); font: inherit; - line-height: fn.dim(--line-height); - color: fn.color(--text); + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); appearance: none; resize: none; background-color: transparent; @@ -121,13 +72,13 @@ &::placeholder { font-style: italic; - color: fn.color(--placeholder); + color: props.get(vars.$placeholder-color); opacity: 1; } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--hover --border); + border-color: props.get(vars.$hover--border-color); } } @@ -137,32 +88,32 @@ @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--focus --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } } &:invalid { - @include invalid; + @include -invalid; } &:focus-visible, &:invalid:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } @include iro.bem-modifier('extended') { - padding: fn.dim(--extended --pad); + padding: props.get(vars.$extended--pad); @include iro.bem-multi('&', 'elem' 'bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } @include iro.bem-elem('native') { &:focus { @include iro.bem-sibling-elem('bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); } } } @@ -170,33 +121,33 @@ @include iro.bem-is('invalid') { @include iro.bem-elem('native') { - @include invalid; + @include -invalid; &:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } } @include iro.bem-is('disabled') { - background-color: fn.color(--disabled --bg); + background-color: props.get(vars.$disabled--bg-color); @include iro.bem-elem('native') { - color: fn.color(--disabled --text); + color: props.get(vars.$disabled--text-color); &::placeholder { - color: fn.color(--disabled --placeholder); + color: props.get(vars.$disabled--placeholder-color); } } @include iro.bem-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } @@ -204,7 +155,7 @@ @include iro.bem-elem('native') { &:invalid { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss new file mode 100644 index 0000000..3d0ef2d --- /dev/null +++ b/src/objects/_text-field.vars.scss @@ -0,0 +1,38 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$line-height: props.def(--o-text-field--line-height, 1.4) !default; +$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; +$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; +$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; +$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; + +$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; + +$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; + +$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default; + +$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default; +$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default; +$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default; +$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default; + +$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; + +$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default; + +$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; + +$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default; + +$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default; + +$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default; + +$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default; +$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default; diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 2bf7b08..f6f62c3 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; @use '../props'; -@use '../objects/heading.vars' as headings; +@use '../objects/heading.vars' as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -22,25 +22,25 @@ h5, h6 { 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); + margin-block-start: props.get(heading.$margin-bs); + font-family: props.get(heading.$font-family); + font-weight: props.get(heading.$font-weight); + font-feature-settings: props.get(heading.$feature-settings); + line-height: props.get(heading.$line-height); text-transform: none; letter-spacing: normal; - transform: translateX(props.get(headings.$offset)); + transform: translateX(props.get(heading.$offset)); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, transparent .15em, - props.get(headings.$bg-color) .15em, - props.get(headings.$bg-color) .6em, + props.get(heading.$bg-color) .15em, + props.get(heading.$bg-color) .6em, transparent .6em); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); @@ -52,7 +52,7 @@ } @include iro.bem-modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 7909943..4bb3482 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -21,12 +21,14 @@ } body { - //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); - - padding: 0; - margin: 0; - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); + font-feature-settings: props.get(vars.$body--feature-settings); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); } pre, @@ -55,6 +57,7 @@ h6 { margin-block: props.get(vars.$heading--margin-bs) 0; font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); 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); diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 80e2f67..f0eb45d 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -5,6 +5,11 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(c $small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; +$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; +$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; +$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); +$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !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); @@ -13,6 +18,7 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g $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--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; $heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; +$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index 4bf80c0..4c6cc5d 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -26,7 +27,7 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props. $static-themes: props.def(--s-links); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $link-theme: #{$theme}-static; + $link-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $link-theme: ( diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index f722864..f285207 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,49 +1,44 @@ -@use 'sass:meta'; +@use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; +@use '../props'; +@use '../objects/table.vars' as table; -@forward 'lists.vars'; -@use 'lists.vars' as vars; +@forward 'tables.vars'; +@use 'tables.vars' as vars; @mixin styles { - @include props.materialize(meta.module-variables('vars')); - @include iro.bem-scope('tables') { table { - margin-block-start: fn.dim(--margin-bs); + margin-block-start: props.get(vars.$margin-bs); border-spacing: 0; border-collapse: separate; } th { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: bold, - --transform: uppercase, - --spacing: .5px - )); - - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - color: fn.color(--heading); + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + font-family: props.get(table.$heading--font-family); + font-size: props.get(table.$heading--font-size); + font-weight: props.get(table.$heading--font-weight); + color: props.get(table.$heading-color); text-align: start; + text-transform: props.get(table.$heading--text-transform); + letter-spacing: props.get(table.$heading--letter-spacing); } td { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - border-color: fn.color(--border); + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + border-color: props.get(table.$border-color); border-style: solid; border-width: 0; - border-block-start-width: fn.dim(--border); + border-block-start-width: props.get(table.$border-width); } tr { &:last-child { td { - border-block-end-width: fn.dim(--border); + border-block-end-width: props.get(table.$border-width); } } } @@ -63,14 +58,14 @@ @include iro.bem-modifier('box') { td { - background-color: fn.color(--box --bg); + background-color: props.get(table.$box--bg-color); &:first-child { - border-inline-start-width: fn.dim(--border); + border-inline-start-width: props.get(table.$border-width); } &:last-child { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(table.$border-width); } } @@ -78,11 +73,11 @@ &:first-child { td { &:first-child { - border-start-start-radius: fn.dim(--rounding); + border-start-start-radius: props.get(table.$rounding); } &:last-child { - border-start-end-radius: fn.dim(--rounding); + border-start-end-radius: props.get(table.$rounding); } } } @@ -90,11 +85,11 @@ &:last-child { td { &:first-child { - border-end-start-radius: fn.dim(--rounding); + border-end-start-radius: props.get(table.$rounding); } &:last-child { - border-end-end-radius: fn.dim(--rounding); + border-end-end-radius: props.get(table.$rounding); } } } diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index cdaca64..17c9eb4 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,24 +1,4 @@ @use '../props'; -@use '../core.vars' as core; +@use 'implicit.vars' as implicit; -$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; -$margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default; - -$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; - -@include iro.props-store(( - --dims: ( - --pad-i: fn.foreign-dim(--table, --pad-i), - --pad-b: fn.foreign-dim(--table, --pad-b), - --rounding: fn.foreign-dim(--table, --rounding), - --border: fn.foreign-dim(--table, --border), - --margin-bs: fn.global-dim(--paragraph --margin-bs), - ), - --colors: ( - --border: fn.foreign-color(--table, --border), - --heading: fn.foreign-color(--table, --heading), - --box: ( - --bg: fn.foreign-color(--table, --box --bg), - ) - ) -)); +$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; diff --git a/src_demo/_base.scss b/src_demo/_base.scss index 129b319..67dfa06 100644 --- a/src_demo/_base.scss +++ b/src_demo/_base.scss @@ -1,13 +1,13 @@ body { display: grid; - grid-template-columns: auto 1fr; grid-template-areas: 'sidebar content'; + grid-template-columns: auto 1fr; } @font-face { font-family: 'Garet'; font-style: normal; font-weight: 50 950; - font-display: swap; src: url('/garet.woff2') format('woff2-variations'); + font-display: swap; } diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss index c746c33..ac217c0 100644 --- a/src_demo/components/_box.scss +++ b/src_demo/components/_box.scss @@ -1,16 +1,9 @@ @use 'iro-sass/src/iro-sass' as iro; -@use '../../src/functions' as fn; +@use '../../src/props'; +@use '../../src/core.vars'; -@include iro.props-namespace('box') { - @include iro.props-store(( - --colors: ( - --border: fn.global-color(--border), - ), - )); - - @include iro.bem-component(iro.props-namespace()) { - margin-block: 2em; - padding: 2em; - border: 1px solid fn.color(--border); - } +@include iro.bem-component('box') { + padding: 2em; + margin-block: 2em; + border: 1px solid props.get(core.$theme, --border); } diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index 262b116..cd38954 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss @@ -1,8 +1,6 @@ @use 'iro-sass/src/iro-sass' as iro; -@include iro.props-namespace('content') { - @include iro.bem-component(iro.props-namespace()) { - grid-area: content; - overflow: auto; - } +@include iro.bem-component('content') { + grid-area: content; + overflow: auto; } diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index b9f8730..4cce9b8 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss @@ -1,10 +1,7 @@ @use 'iro-sass/src/iro-sass' as iro; -@use '../../src/functions' as fn; -@include iro.props-namespace('sidebar') { - @include iro.bem-component(iro.props-namespace()) { - grid-area: sidebar; - min-inline-size: 15em; - min-block-size: 0; - } +@include iro.bem-component('sidebar') { + grid-area: sidebar; + min-inline-size: 15em; + min-block-size: 0; } diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss index c0547d3..9516b12 100644 --- a/src_demo/components/_view.scss +++ b/src_demo/components/_view.scss @@ -1,12 +1,9 @@ @use 'iro-sass/src/iro-sass' as iro; -@use '../../src/functions' as fn; -@include iro.props-namespace('view') { - @include iro.bem-component(iro.props-namespace()) { - display: none; +@include iro.bem-component('view') { + display: none; - &:target { - display: block; - } + &:target { + display: block; } } diff --git a/src_demo/index.scss b/src_demo/index.scss index 93fa156..7fc1d99 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss @@ -8,6 +8,7 @@ @include iro.s-headings--styles; @include iro.s-links--styles; @include iro.s-lists--styles; +@include iro.s-tables--styles; @include iro.l-button-group--styles; @include iro.l-card-list--styles; @@ -37,3 +38,16 @@ @include iro.o-radio--styles; @include iro.o-side-nav--styles; @include iro.o-status-indicator--styles; +@include iro.o-switch--styles; +@include iro.o-table--styles; +@include iro.o-text-field--styles; + +@include iro.utils--styles; + +@include iro.themes--styles; + +@import 'base'; +@import 'components/box'; +@import 'components/content'; +@import 'components/sidebar'; +@import 'components/view'; diff --git a/src_old/objects/_badge.scss b/src_old/objects/_badge.scss index 4e1662f..8619826 100644 --- a/src_old/objects/_badge.scss +++ b/src_old/objects/_badge.scss @@ -123,15 +123,15 @@ $static-themes: 'black' 'white' !default; @include iro.props-store(( --colors: ( --#{$theme}: ( - --bg: fn.global-color(--#{$theme}-static --900), - --label: fn.global-color(--#{$theme}-static --900-text), + --bg: fn.global-color(--static-#{$theme} --900), + --label: fn.global-color(--static-#{$theme} --900-text), --hover: ( - --bg: fn.global-color(--#{$theme}-static --1000), - --label: fn.global-color(--#{$theme}-static --1000-text), + --bg: fn.global-color(--static-#{$theme} --1000), + --label: fn.global-color(--static-#{$theme} --1000-text), ), --active: ( - --bg: fn.global-color(--#{$theme}-static --1100), - --label: fn.global-color(--#{$theme}-static --1000-text), + --bg: fn.global-color(--static-#{$theme} --1100), + --label: fn.global-color(--static-#{$theme} --1000-text), ), ), diff --git a/src_old/objects/_button.scss b/src_old/objects/_button.scss index 3ef4813..d195e05 100644 --- a/src_old/objects/_button.scss +++ b/src_old/objects/_button.scss @@ -148,18 +148,18 @@ $static-themes: 'black' 'white' !default; @include iro.props-store(( --colors: ( --#{$theme}: ( - --bg: fn.global-color(--#{$theme}-static --900), - --label: fn.global-color(--#{$theme}-static --900-text), + --bg: fn.global-color(--static-#{$theme} --900), + --label: fn.global-color(--static-#{$theme} --900-text), --outline-border: fn.global-color(--#{$theme} --900), --outline-label: fn.global-color(--#{$theme} --1000), --hover: ( - --bg: fn.global-color(--#{$theme}-static --1000), - --label: fn.global-color(--#{$theme}-static --1000-text), + --bg: fn.global-color(--static-#{$theme} --1000), + --label: fn.global-color(--static-#{$theme} --1000-text), ), --active: ( - --bg: fn.global-color(--#{$theme}-static --1100), - --label: fn.global-color(--#{$theme}-static --1100-text), + --bg: fn.global-color(--static-#{$theme} --1100), + --label: fn.global-color(--static-#{$theme} --1100-text), ), ), ), diff --git a/tpl/index.pug b/tpl/index.pug index c4baa64..cccfb2a 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -40,7 +40,7 @@ mixin view(id, title) - views.push({ id, title }); - +container(narrow=!attributes.wide class='u-p-700 c-view' id=id) + +container(fixed=!attributes.wide class='u-p-700 c-view' id=id) +h1-heading('xl')(class='u-mt-0')= title +divider('medium') block diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index 56c0b86..522eb1a 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug @@ -1,10 +1,10 @@ mixin container - let classes = { - 'l-container': true, - 'l-container--narrow': attributes.narrow, - 'l-container--narrow-75': attributes.narrow50, - 'u-themed': !!attributes.theme + 'l-container': true, + 'l-container--fixed': attributes.fixed, + 'l-container--fixed-75': attributes.fixed50, + 'u-themed': !!attributes.theme } if (!!attributes.theme) { classes['t-' + attributes.theme] = true diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 8fbf9ea..6fa0ce9 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug @@ -90,7 +90,7 @@ mixin view-action-button - const bg = theme.startsWith('static-black') ? 500 : 1000; - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) +action-button(theme=theme)= 'Idle' = ' ' +action-button(theme=theme selected=true)= 'Selected' @@ -99,7 +99,7 @@ mixin view-action-button = ' ' +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) +action-button(theme=theme quiet=true)= 'Idle' = ' ' +action-button(theme=theme quiet=true selected=true)= 'Selected' diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index cc1f346..90fdabe 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug @@ -59,7 +59,7 @@ mixin view-badge - const bg = theme.startsWith('static-black') ? 500 : 1000; - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) +badge(theme)(href='#')= 'new' = ' ' +badge(theme)(quiet=true href='#')= 'new' diff --git a/tpl/views/button.pug b/tpl/views/button.pug index edd8ef6..04414a4 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -58,7 +58,7 @@ mixin view-button - const bg = theme.startsWith('static-black') ? 500 : 1000; - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) .l-button-group +a-button(variant=theme)= 'Button' +a-button(variant=theme disabled=true)= 'Button' @@ -71,7 +71,7 @@ mixin view-button +a-button(variant=theme outline=true icon='trash') +a-button(variant=theme outline=true disabled=true icon='trash') - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) .l-button-group +a-button(variant=theme primary=true)= 'Button' +a-button(variant=theme primary=true disabled=true)= 'Button' diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index ee7b372..b5b6d70 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug @@ -23,7 +23,7 @@ mixin view-divider +divider('medium') +divider('faint') - each theme in ['blue', 'purple', 'red', 'green', 'yellow'] + each theme in ['accent', 'negative'] .c-box +divider('strong')(color=theme)= 'Strong' +divider('medium')(color=theme)= 'Medium' @@ -36,7 +36,7 @@ mixin view-divider - const bg = theme.startsWith('static-black') ? 500 : 1000; - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + .c-box(style=`background-color: var(--static-colors--blue--${bg});`) +divider('strong')(color=theme)= 'Strong' +divider('medium')(color=theme)= 'Medium' +divider('faint')(color=theme)= 'Faint' -- cgit v1.2.3-70-g09d2