From dd1ade8acc17d74a45240d255cb862009129b0ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 16:53:07 +0200 Subject: Update --- src/.old/objects/_action-menu.scss | 122 -------------------------- src/.old/objects/_avatar.scss | 146 ------------------------------- src/.old/objects/_status-indicator.scss | 35 -------- src/_config.scss | 3 - src/_objects.scss | 6 +- src/objects/_action-menu.scss | 111 +++++++++++++++++++++++ src/objects/_avatar.scss | 150 ++++++++++++++++++++++++++++++++ src/objects/_status-indicator.scss | 39 +++++++++ 8 files changed, 303 insertions(+), 309 deletions(-) delete mode 100644 src/.old/objects/_action-menu.scss delete mode 100644 src/.old/objects/_avatar.scss delete mode 100644 src/.old/objects/_status-indicator.scss create mode 100644 src/objects/_action-menu.scss create mode 100644 src/objects/_avatar.scss create mode 100644 src/objects/_status-indicator.scss (limited to 'src') diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss deleted file mode 100644 index 12e3b5f..0000000 --- a/src/.old/objects/_action-menu.scss +++ /dev/null @@ -1,122 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('action-menu') { - @include iro.props-store(( - --dims: ( - --pad-x: 0, - --pad-y: fn.global-dim(--size --85), - --separator: fn.global-dim(--size --85), - --rounding: 3px, - --border: 1px, - --item: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - ), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --shadow: 0 .2em .5em rgba(#000, .1), - --border: fn.global-color(--border --stable-lo), - --separator: fn.global-color(--obj), - --icon: fn.global-color(--fg-hi), - --item: ( - --hover: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), - ), - --disabled: ( - --label: fn.global-color(--fg-hi3), - ), - --key-focus: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), - --border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), - ), - ), - ), 'colors'); - - @include iro.props-store(( - --colors: ( - --shadow: 0 .2em .5em rgba(#000, .5), - ), - ), 'colors-dark'); - - @include iro.bem-object(iro.props-namespace()) { - position: absolute; - z-index: 10000; - top: 0; - left: 0; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - transform: translate(var(--x), var(--y)); - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); - background-clip: padding-box; - background-color: fn.global-color(--bg); - box-shadow: fn.color(--shadow); - color: fn.global-color(--fg); - - @include iro.bem-modifier('up-left') { - transform: translate(var(--x), calc(var(--y) - 100%)); - } - - @include iro.bem-modifier('up-right') { - transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); - } - - @include iro.bem-modifier('down-right') { - transform: translate(calc(var(--x) - 100%), var(--y)); - } - - @include iro.bem-elem('item') { - display: block; - box-sizing: border-box; - width: 100%; - padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); - border: 2px solid transparent; - color: fn.color(--item --disabled --label); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - &:hover, - &:active { - background-color: fn.color(--item --hover --bg); - color: fn.color(--item --hover --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - border-radius: calc(fn.dim(--rounding) - 1px); - border-color: fn.color(--item --key-focus --border); - background-color: fn.color(--item --key-focus --bg); - box-shadow: fn.color(--item --key-focus --shadow); - color: fn.color(--item --key-focus --label); - } - } - } - } - - @include iro.bem-elem('separator') { - height: 1px; - margin: fn.dim(--separator) 0; - background-color: fn.color(--separator); - } - - @include iro.bem-elem('slot') { - padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); - } - - @include iro.bem-elem('icon-slot') { - display: flex; - justify-content: center; - width: fn.foreign-dim(--icon, --size); - } - } -} diff --git a/src/.old/objects/_avatar.scss b/src/.old/objects/_avatar.scss deleted file mode 100644 index 4be780e..0000000 --- a/src/.old/objects/_avatar.scss +++ /dev/null @@ -1,146 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@mixin status($size) { - @include iro.bem-elem('status') { - width: fn.dim(--#{$size} --indicator-size); - height: fn.dim(--#{$size} --indicator-size); - - @include iro.bem-next-elem('content') { - mask-image: radial-gradient( - circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at - calc(100% - .5 * fn.dim(--#{$size} --indicator-size)) - calc(100% - .5 * fn.dim(--#{$size} --indicator-size)), - transparent 95%, - #fff - ); - } - } -} - -@include iro.props-namespace('avatar') { - @include iro.props-store(( - --dims: ( - --400: ( - --size: fn.global-dim(--size --1600), - --font-size: fn.global-dim(--font-size --800), - --indicator-size: fn.global-dim(--size --400), - ), - --300: ( - --size: fn.global-dim(--size --1200), - --font-size: fn.global-dim(--font-size --600), - --indicator-size: fn.global-dim(--size --300), - ), - --200: ( - --size: fn.global-dim(--size --800), - --font-size: fn.global-dim(--font-size --300), - --indicator-size: fn.global-dim(--size --225), - ), - --150: ( - --size: fn.global-dim(--size --650), - --font-size: fn.global-dim(--font-size --200), - --indicator-size: fn.global-dim(--size --175), - ), - --100: ( - --size: fn.global-dim(--size --500), - --font-size: fn.global-dim(--font-size --100), - --indicator-size: fn.global-dim(--size --150), - ), - --75: ( - --size: fn.global-dim(--size --375), - --font-size: fn.global-dim(--font-size --75), - --indicator-size: fn.global-dim(--size --125), - ), - --50: ( - --size: fn.global-dim(--size --250), - --font-size: fn.global-dim(--font-size --50), - --indicator-size: fn.global-dim(--size --100), - ), - --indicator-spacing: fn.global-dim(--size --40), - --rounding: 25%, - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --h: 354, - --s: 44%, - --l: 45%, - - --key-focus: ( - --border: fn.global-color(--focus --fill), - --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo), - ), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - position: relative; - border-radius: fn.dim(--rounding); - font-size: fn.dim(--100 --font-size); - font-style: normal; - vertical-align: .05em; - - @include iro.bem-elem('status') { - position: absolute; - right: 0; - bottom: 0; - } - - @include status(100); - - @include iro.bem-elem('content') { - display: block; - width: fn.dim(--100 --size); - height: fn.dim(--100 --size); - border-radius: fn.dim(--rounding); - line-height: fn.dim(--100 --size); - text-align: center; - object-fit: cover; - object-position: center center; - } - - @include iro.bem-modifier('circle') { - border-radius: 100%; - - @include iro.bem-elem('content') { - border-radius: 100%; - } - } - - @include iro.bem-modifier('placeholder') { - @include iro.bem-elem('content') { - background-color: hsl(0, 0%, fn.color(--l)); - } - } - - @include iro.bem-modifier('colored') { - @include iro.bem-elem('content') { - background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); - color: #fff; - } - } - - @each $size in 50 75 150 200 300 400 { - @include iro.bem-modifier($size) { - font-size: fn.dim(--#{$size} --font-size); - - @include status($size); - - @include iro.bem-elem('content') { - width: fn.dim(--#{$size} --size); - height: fn.dim(--#{$size} --size); - line-height: fn.dim(--#{$size} --size); - } - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - outline: 2px solid fn.color(--key-focus --border); - box-shadow: fn.color(--key-focus --shadow); - } - } - } -} diff --git a/src/.old/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss deleted file mode 100644 index d8ea9ef..0000000 --- a/src/.old/objects/_status-indicator.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('status-indicator') { - @include iro.props-store(( - --dims: ( - --size: fn.global-dim(--size --125), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --default: fn.global-color(--obj-lo), - --primary: fn.global-color(--fg), - --green: fn.global-color(--green --solid --bg-hi), - --yellow: fn.global-color(--yellow --solid --bg-hi), - --red: fn.global-color(--red --solid --bg-hi), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - width: fn.dim(--size); - height: fn.dim(--size); - border-radius: 10em; - background-color: fn.color(--default); - vertical-align: middle; - - @each $color in 'primary' 'green' 'yellow' 'red' { - @include iro.bem-is($color) { - background-color: fn.color(--#{$color}); - } - } - } -} diff --git a/src/_config.scss b/src/_config.scss index f4f43fd..56a74e1 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -82,9 +82,6 @@ $semantic-colors-common: ( --focus-raw: --accent, --focus-static: --accent-static, - --light: --white-transparent, - --shadow: --black-transparent, - --border-mute: --base --200, --border: --base --300, --border-strong: --base --400, diff --git a/src/_objects.scss b/src/_objects.scss index b1872c9..0973920 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -11,10 +11,10 @@ @use 'objects/switch'; @use 'objects/action-button'; // @use 'objects/overflow-button'; -// @use 'objects/status-indicator'; -// @use 'objects/avatar'; +@use 'objects/status-indicator'; +@use 'objects/avatar'; // @use 'objects/message'; -// @use 'objects/action-menu'; +@use 'objects/action-menu'; // @use 'objects/menu'; // @use 'objects/icon-nav'; // @use 'objects/backdrop'; diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss new file mode 100644 index 0000000..2a74834 --- /dev/null +++ b/src/objects/_action-menu.scss @@ -0,0 +1,111 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('action-menu') { + @include iro.props-store(( + --dims: ( + --pad-i: 0, + --pad-b: fn.global-dim(--size --85), + --separator: fn.global-dim(--size --85), + --rounding: fn.global-dim(--rounding), + --border: fn.global-dim(--border --thin), + --item: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --85), + ), + ), + --colors: ( + --bg: fn.global-color(--bg-l2), + --text: fn.global-color(--text), + --shadow: 0 .2em .5em rgba(#000, .1), + --border: fn.global-color(--border), + --separator: fn.global-color(--border), + --icon: fn.global-color(--text-mute), + --item: ( + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + ), + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + position: absolute; + z-index: 10000; + inset-block-start: 0; + inset-inline-start: 0; + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + transform: translate(var(--x), var(--y)); + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-clip: padding-box; + background-color: fn.color(--bg); + box-shadow: fn.color(--shadow); + color: fn.color(--text); + + @include iro.bem-modifier('up-left') { + transform: translate(var(--x), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('up-right') { + transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('down-right') { + transform: translate(calc(var(--x) - 100%), var(--y)); + } + + @include iro.bem-elem('item') { + display: block; + box-sizing: border-box; + inline-size: 100%; + padding-block: calc(fn.dim(--item --pad-b) - 2px); + padding-inline: calc(fn.dim(--item --pad-i) - 2px); + border: 2px solid transparent; + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + &:hover, + &:active, + &:focus-visible { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + &:focus-visible { + border-color: fn.color(--item --key-focus --border); + } + } + } + + @include iro.bem-elem('separator') { + block-size: 1px; + margin-block: fn.dim(--separator); + background-color: fn.color(--separator); + } + + @include iro.bem-elem('slot') { + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: fn.foreign-dim(--icon, --size); + } + } +} diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss new file mode 100644 index 0000000..e6fa74e --- /dev/null +++ b/src/objects/_avatar.scss @@ -0,0 +1,150 @@ +@use 'sass:list'; +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; + +@mixin status($size: ()) { + @include iro.bem-elem('status') { + width: fn.dim(list.join($size, --indicator-size)); + height: fn.dim(list.join($size, --indicator-size)); + + @include iro.bem-next-elem('content') { + mask-image: radial-gradient( + circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at + calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) + calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), + transparent 95%, + #fff + ); + } + } +} + +@include iro.props-namespace('avatar') { + @include iro.props-store(( + --dims: ( + --size: fn.global-dim(--size --500), + --font-size: fn.global-dim(--font-size --100), + --indicator-size: fn.global-dim(--size --150), + + --xxxl: ( + --size: fn.global-dim(--size --1600), + --font-size: fn.global-dim(--font-size --800), + --indicator-size: fn.global-dim(--size --400), + ), + --xxl: ( + --size: fn.global-dim(--size --1200), + --font-size: fn.global-dim(--font-size --600), + --indicator-size: fn.global-dim(--size --300), + ), + --xl: ( + --size: fn.global-dim(--size --800), + --font-size: fn.global-dim(--font-size --300), + --indicator-size: fn.global-dim(--size --225), + ), + --lg: ( + --size: fn.global-dim(--size --650), + --font-size: fn.global-dim(--font-size --200), + --indicator-size: fn.global-dim(--size --175), + ), + --sm: ( + --size: fn.global-dim(--size --375), + --font-size: fn.global-dim(--font-size --75), + --indicator-size: fn.global-dim(--size --125), + ), + --xs: ( + --size: fn.global-dim(--size --250), + --font-size: fn.global-dim(--font-size --50), + --indicator-size: fn.global-dim(--size --100), + ), + --indicator-spacing: fn.global-dim(--size --40), + --rounding: 25%, + + --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: ( + --h: 354, + --s: 44%, + --l: 45%, + + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + position: relative; + border: fn.dim(--key-focus --border) solid transparent; + border-radius: fn.dim(--rounding); + font-size: fn.dim(--font-size); + font-style: normal; + vertical-align: .05em; + + @include iro.bem-elem('status') { + position: absolute; + inset-inline-end: 0; + inset-block-end: 0; + } + + @include status; + + @include iro.bem-elem('content') { + display: block; + inline-size: fn.dim(--size); + block-size: fn.dim(--size); + border-radius: fn.dim(--rounding); + line-height: fn.dim(--size); + text-align: center; + object-fit: cover; + object-position: center center; + } + + @include iro.bem-modifier('circle') { + border-radius: 100%; + + @include iro.bem-elem('content') { + border-radius: 100%; + } + } + + @include iro.bem-modifier('placeholder') { + @include iro.bem-elem('content') { + background-color: hsl(0, 0%, fn.color(--l)); + } + } + + @include iro.bem-modifier('colored') { + @include iro.bem-elem('content') { + background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); + color: #fff; + } + } + + @each $size in $sizes { + @include iro.bem-modifier($size) { + font-size: fn.dim(--#{$size} --font-size); + + @include status(--#{$size}); + + @include iro.bem-elem('content') { + inline-size: fn.dim(--#{$size} --size); + block-size: fn.dim(--#{$size} --size); + line-height: fn.dim(--#{$size} --size); + } + } + } + + &:focus-visible { + 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); + } + } +} diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss new file mode 100644 index 0000000..4c5305e --- /dev/null +++ b/src/objects/_status-indicator.scss @@ -0,0 +1,39 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +$themes: 'accent' 'positive' 'negative' 'warning' !default; + +@include iro.props-namespace('status-indicator') { + @include iro.props-store(( + --dims: ( + --size: fn.global-dim(--size --125), + ), + --colors: ( + --default: fn.global-color(--border-strong), + --primary: fn.global-color(--text), + ), + )); + + @each $theme in $themes { + @include iro.props-store(( + --colors: ( + --#{$theme}: fn.global-color(--#{$theme}-static --800), + ), + )); + } + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + width: fn.dim(--size); + height: fn.dim(--size); + border-radius: 10em; + background-color: fn.color(--default); + vertical-align: middle; + + @each $theme in $themes { + @include iro.bem-is($theme) { + background-color: fn.color(--#{$theme}); + } + } + } +} -- cgit v1.2.3-54-g00ecf