From f441e288cb6d33e2338ab8047053022b81c9aa0b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 18 Oct 2024 20:41:38 +0200
Subject: Update
---
src/_iro-design.scss | 2 +
src/layouts/_button-group.vars.scss | 2 +-
src/layouts/_card-list.vars.scss | 2 +-
src/layouts/_container.vars.scss | 2 +-
src/layouts/_form.vars.scss | 2 +-
src/layouts/_media.vars.scss | 2 +-
src/layouts/_overflow.scss | 2 +-
src/objects/_action-button.scss | 6 +-
src/objects/_action-button.vars.scss | 7 +-
src/objects/_alert.scss | 4 +-
src/objects/_alert.vars.scss | 11 +-
src/objects/_avatar.vars.scss | 2 +-
src/objects/_backdrop.scss | 26 ++--
src/objects/_backdrop.vars.scss | 6 +
src/objects/_badge.scss | 274 ++++++++---------------------------
src/objects/_badge.vars.scss | 158 ++++++++++++++++++++
src/scopes/_blockquotes.vars.scss | 2 +-
src/scopes/_code.vars.scss | 2 +-
src/scopes/_headings.scss | 2 +-
src/scopes/_implicit.scss | 2 +-
src/scopes/_implicit.vars.scss | 2 +-
src/scopes/_links.vars.scss | 2 +-
src/scopes/_lists.scss | 2 +-
src/scopes/_lists.vars.scss | 2 +-
src/scopes/_tables.vars.scss | 2 +-
src_demo/index.scss | 2 +
26 files changed, 268 insertions(+), 260 deletions(-)
create mode 100644 src/objects/_backdrop.vars.scss
create mode 100644 src/objects/_badge.vars.scss
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 9aacc95..31be892 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -40,3 +40,5 @@ $breakpoints: (
@forward 'objects/action-button' as o-action-button--*;
@forward 'objects/alert' as o-alert--*;
@forward 'objects/avatar' as o-avatar--*;
+@forward 'objects/backdrop' as o-backdrop--*;
+@forward 'objects/badge' as o-badge--*;
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 23b09c0..f42f2d4 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,4 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index 16be23e..05204d0 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default;
$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index a80a909..74114b2 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,6 +1,6 @@
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default;
$fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default;
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index a46a337..e2cd1a9 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index 55961b8..e082d0c 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 310c7ee..d9f028f 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,6 +1,6 @@
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@mixin styles {
@include iro.bem-layout('overflow') {
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 0a65b8d..129e681 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,9 +137,9 @@
@include -apply-theme(vars.$default-theme);
- @each $theme in map.keys(props.get(vars.$static-themes)) {
+ @each $theme in map.keys(props.get(vars.$themes)) {
@include iro.bem-modifier($theme) {
- @include -apply-theme(vars.$static-themes, $theme);
+ @include -apply-theme(vars.$themes, $theme);
}
}
@@ -154,7 +154,7 @@
@each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
@include iro.bem-modifier($mod) {
- padding-block: props.get($pad-i);
+ padding-block: props.get($pad-b);
padding-inline: props.get($pad-i);
font-size: props.get($font-size);
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index d1b3a4a..4c9603c 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,6 +1,6 @@
@use 'sass:map';
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$line-height: props.def(--o-action-button--line-height, 1.4) !default;
$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
@@ -35,6 +35,8 @@ $fixed-sizes: (
'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
) !default;
+$themes: props.def(--o-action-button);
+
$default-theme-override: () !default;
$default-theme: map.deep-merge((
--bg-color: props.get(core.$theme, --base, --75),
@@ -108,11 +110,10 @@ $default-theme: map.deep-merge((
), $default-theme-override) !default;
$default-theme: props.def(--o-action-button, $default-theme);
-$static-themes: props.def(--o-action-button);
@each $theme in map.keys(props.get(core.$transparent-colors)) {
$button-theme: #{$theme}-static;
- $static-themes: props.merge($static-themes, (
+ $themes: props.merge($themes, (
$button-theme: (
--bg-color: props.get(core.$transparent-colors, $theme, --100),
--label-color: props.get(core.$transparent-colors, $theme, --900),
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 651ad23..4efacab 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -16,9 +16,9 @@
border: props.get(vars.$border-width) solid props.get(vars.$border-color);
border-radius: props.get(vars.$rounding);
- @each $mod, $theme in vars.$themes {
+ @each $mod, $theme in vars.$themes-config {
@include iro.bem-modifier($mod) {
- border-color: props.get(vars.$populated-themes, $theme, --border-color);
+ border-color: props.get(vars.$themes, $theme, --border-color);
}
}
}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 64d8f1f..e0c77d2 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
@@ -9,16 +9,17 @@ $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !defaul
$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default;
$border-color: props.def(--o-alert--bg-color, props.get(core.$theme, --text-mute-more)) !default;
-$themes: (
+$themes-config: (
accent: --accent,
positive: --positive,
negative: --negative,
warning: --warning,
) !default;
-$populated-themes: props.def(--o-alert);
-@each $theme, $key in $themes {
- $populated-themes: props.merge($populated-themes, (
+$themes: props.def(--o-alert);
+
+@each $theme, $key in $themes-config {
+ $themes: props.merge($themes, (
$key: (
--border-color: props.get(core.$theme, $key, --700),
)
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 5b97ec8..74d9677 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default;
$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9e0cc1e..82246ed 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,26 +1,22 @@
+@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
-@include iro.props-namespace('backdrop') {
- @include iro.props-store((
- --dims: (
- --z-index: 10000,
- --blur: 2em,
- ),
- --colors: (
- --bg: rgba(#000, .75),
- ),
- ));
+@forward 'backdrop.vars';
+@use 'backdrop.vars' as vars;
- @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+ @include props.materialize(meta.module-variables('vars'));
+
+ @include iro.bem-object('backdrop') {
position: fixed;
inset: 0;
- z-index: fn.dim(--z-index);
+ z-index: props.get(vars.$z-index);
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: auto;
- background-color: fn.color(--bg);
- backdrop-filter: blur(fn.dim(--blur));
+ background-color: props.get(vars.$bg-color);
+ backdrop-filter: blur(props.get(vars.$blur));
}
}
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
new file mode 100644
index 0000000..c03c263
--- /dev/null
+++ b/src/objects/_backdrop.vars.scss
@@ -0,0 +1,6 @@
+@use '../props';
+@use '../core.vars' as core;
+
+$z-index: props.def(--o-backdrop--z-index, 10000) !default;
+$blur: props.def(--o-backdrop--blur, 2em) !default;
+$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600)) !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 72d85ff..3f68873 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,140 @@
-@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
-$sizes: 'sm' 'lg' 'xl' !default;
-$themes: 'accent' 'positive' 'negative' 'warning' !default;
-$static-themes: 'black' 'white' !default;
+@forward 'badge.vars';
+@use 'badge.vars' as vars;
-@mixin theme($theme) {
- color: fn.color(--#{$theme} --label);
- background-color: fn.color(--#{$theme} --bg);
+@mixin -apply-theme($theme, $key: (), $static: false) {
+ color: props.get($theme, list.join($key, --label)...);
+ background-color: props.get($theme, list.join($key, --bg)...);
&:link,
&:visited,
&:enabled {
&:hover,
&:focus-visible {
- color: fn.color(--#{$theme} --hover --label);
- background-color: fn.color(--#{$theme} --hover --bg);
+ color: props.get($theme, list.join($key, --hover --label)...);
+ background-color: props.get($theme, list.join($key, --hover --bg)...);
}
&:active {
- color: fn.color(--#{$theme} --active --label);
- background-color: fn.color(--#{$theme} --active --bg);
+ color: props.get($theme, list.join($key, --active --label)...);
+ background-color: props.get($theme, list.join($key, --active --bg)...);
}
}
@include iro.bem-modifier('quiet') {
- color: fn.color(--#{$theme}-quiet --label);
- background-color: fn.color(--#{$theme}-quiet --bg);
+ color: props.get($theme, list.join($key, --quiet --label)...);
+ background-color: props.get($theme, list.join($key, --quiet --bg)...);
&:link,
&:visited,
&:enabled {
&:hover,
&:focus-visible {
- color: fn.color(--#{$theme}-quiet --hover --label);
- background-color: fn.color(--#{$theme}-quiet --hover --bg);
+ color: props.get($theme, list.join($key, --quiet --hover --label)...);
+ background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
}
&:active {
- color: fn.color(--#{$theme}-quiet --active --label);
- background-color: fn.color(--#{$theme}-quiet --active --bg);
+ color: props.get($theme, list.join($key, --quiet --active --label)...);
+ background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
}
}
}
- @if string.slice($theme, 1, 7) == 'static-' {
+ @if $static {
&::after {
- outline: fn.color(--#{$theme} --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(--#{$theme} --key-focus --outline);
+ outline: props.get($theme, list.join($key, --key-focus --border)...) 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($theme, list.join($key, --key-focus --outline)...);
}
}
}
-@include iro.props-namespace('badge') {
- @include iro.props-store((
- --dims: (
- --pad-b: fn.global-dim(--size --50),
- --pad-i: fn.global-dim(--size --100),
- --pad-i-pill: fn.global-dim(--size --150),
- --pad-i-label: fn.global-dim(--size --50),
- --rounding: fn.global-dim(--rounding),
- --font-size: fn.global-dim(--font-size --75),
+@mixin styles {
+ @include props.materialize(meta.module-variables('vars'));
- --sm: (
- --pad-b: fn.global-dim(--size --25),
- --pad-i: fn.global-dim(--size --75),
- --pad-i-pill: fn.global-dim(--size --125),
- --pad-i-label: fn.global-dim(--size --25),
- --font-size: fn.global-dim(--font-size --50),
- ),
- --lg: (
- --pad-b: fn.global-dim(--size --75),
- --pad-i: fn.global-dim(--size --125),
- --pad-i-pill: fn.global-dim(--size --175),
- --pad-i-label: fn.global-dim(--size --50),
- --font-size: fn.global-dim(--font-size --100),
- ),
- --xl: (
- --pad-b: fn.global-dim(--size --100),
- --pad-i: fn.global-dim(--size --150),
- --pad-i-pill: fn.global-dim(--size --225),
- --pad-i-label: fn.global-dim(--size --75),
- --font-size: fn.global-dim(--font-size --150),
- ),
-
- --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: (
- --bg: fn.global-color(--text-mute),
- --label: fn.global-color(--bg-l2),
- --hover: (
- --bg: fn.global-color(--text),
- ),
- --active: (
- --bg: fn.global-color(--heading),
- ),
- --key-focus: (
- --label: fn.global-color(--focus --text),
- --border: fn.global-color(--focus --border),
- --outline: fn.global-color(--focus --outline),
- ),
-
- --quiet: (
- --bg: fn.global-color(--border-mute),
- --label: fn.global-color(--heading),
- --hover: (
- --bg: fn.global-color(--border),
- ),
- --active: (
- --bg: fn.global-color(--border-strong),
- ),
- ),
- ),
- ));
-
- @each $theme in $themes {
- @include iro.props-store((
- --colors: (
- --#{$theme}: (
- --bg: fn.global-color(--#{$theme}-static --900),
- --label: fn.global-color(--#{$theme}-static --900-text),
- --hover: (
- --bg: fn.global-color(--#{$theme}-static --1000),
- --label: fn.global-color(--#{$theme}-static --1000-text),
- ),
- --active: (
- --bg: fn.global-color(--#{$theme}-static --1100),
- --label: fn.global-color(--#{$theme}-static --1000-text),
- ),
- ),
-
- --#{$theme}-quiet: (
- --bg: fn.global-color(--#{$theme} --200),
- --label: fn.global-color(--#{$theme} --1100),
- --hover: (
- --bg: fn.global-color(--#{$theme} --300),
- --label: fn.global-color(--#{$theme} --1200),
- ),
- --active: (
- --bg: fn.global-color(--#{$theme} --400),
- --label: fn.global-color(--#{$theme} --1300),
- ),
- )
- ),
- ));
- }
-
- @each $theme in $static-themes {
- @include iro.props-store((
- --colors: (
- --static-#{$theme}: (
- --bg: fn.global-color(--#{$theme}-transparent --800),
- --label: fn.global-color(--#{$theme}-transparent --text),
- --hover: (
- --bg: fn.global-color(--#{$theme}-transparent --900),
- --label: fn.global-color(--#{$theme}-transparent --text),
- ),
- --active: (
- --bg: fn.global-color(--#{$theme}-transparent --900),
- --label: fn.global-color(--#{$theme}-transparent --text),
- ),
- --key-focus: (
- --bg: fn.global-color(--#{$theme}-transparent --100),
- --label: fn.global-color(--#{$theme}-transparent --900),
- --border: fn.global-color(--#{$theme}-transparent --900),
- --outline: fn.global-color(--#{$theme}-transparent --300),
- ),
- ),
-
- --static-#{$theme}-quiet: (
- --bg: fn.global-color(--#{$theme}-transparent --200),
- --label: fn.global-color(--#{$theme}-transparent --900),
- --hover: (
- --bg: fn.global-color(--#{$theme}-transparent --300),
- --label: fn.global-color(--#{$theme}-transparent --900),
- ),
- --active: (
- --bg: fn.global-color(--#{$theme}-transparent --400),
- --label: fn.global-color(--#{$theme}-transparent --900),
- ),
- )
- )
- ));
- }
-
- @include iro.bem-object(iro.props-namespace()) {
+ @include iro.bem-object('badge') {
position: relative;
display: inline-block;
- padding-block: fn.dim(--pad-b);
- padding-inline: fn.dim(--pad-i);
- font-size: fn.dim(--font-size);
- line-height: fn.global-dim(--font --standard --line-height);
- color: fn.color(--label);
+ padding-block: props.get(vars.$pad-b);
+ padding-inline: props.get(vars.$pad-i);
+ font-size: props.get(vars.$font-size);
+ line-height: props.get(core.$font--standard--line-height);
text-align: center;
text-decoration: none;
- background-color: fn.color(--bg);
background-clip: padding-box;
- border-radius: fn.dim(--rounding);
+ border-radius: props.get(vars.$rounding);
&::after {
position: absolute;
- inset: calc(-1 * fn.dim(--key-focus --border-offset));
+ inset: calc(-1 * props.get(vars.$key-focus--border-offset));
z-index: 1;
display: none;
pointer-events: none;
content: '';
- border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
- 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);
+ border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+ outline: transparent solid props.get(vars.$key-focus--border-width);
}
&:link,
&:visited,
&:enabled {
- &:hover,
&:focus-visible {
- background-color: fn.color(--hover --bg);
- }
-
- &:active {
- background-color: fn.color(--active --bg);
+ &::after {
+ display: block;
+ }
}
}
@include iro.bem-elem('label') {
- margin-inline: fn.dim(--pad-i-label);
+ margin-inline: props.get(vars.$pad-i-label);
}
- @include iro.bem-modifier('quiet') {
- color: fn.color(--quiet --label);
- background-color: fn.color(--quiet --bg);
-
- &:link,
- &:visited,
- &:enabled {
- &:hover,
- &:focus-visible {
- background-color: fn.color(--quiet --hover --bg);
- }
+ @include -apply-theme(vars.$default-theme);
- &:active {
- background-color: fn.color(--quiet --active --bg);
- }
- }
- }
-
- @each $theme in $themes {
+ @each $theme in map.keys(props.get(vars.$themes)) {
@include iro.bem-modifier($theme) {
- @include theme($theme);
+ @include -apply-theme(vars.$themes, $theme);
}
}
- &:link,
- &:visited,
- &:enabled {
- &:focus-visible {
- &::after {
- display: block;
- }
- }
- }
-
- @each $theme in $static-themes {
- @include iro.bem-modifier(static-#{$theme}) {
- @include theme(static-#{$theme});
+ @each $theme in map.keys(props.get(vars.$static-themes)) {
+ @include iro.bem-modifier($theme) {
+ @include -apply-theme(vars.$static-themes, $theme, true);
}
}
@include iro.bem-modifier('pill') {
- padding-inline: fn.dim(--pad-i-pill);
+ padding-inline: props.get(vars.$pad-i-pill);
border-radius: 10em;
&::after {
border-radius: 10em;
}
}
-
- @each $size in $sizes {
- @include iro.bem-modifier($size) {
- padding-block: fn.dim(--#{$size} --pad-b);
- padding-inline: fn.dim(--#{$size} --pad-i);
- font-size: fn.dim(--#{$size} --font-size);
+
+ @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
+ @include iro.bem-modifier($mod) {
+ padding-block: props.get($pad-b);
+ padding-inline: props.get($pad-i);
+ font-size: props.get($font-size);
@include iro.bem-elem('label') {
- margin-inline: fn.dim(--#{$size} --pad-i-label);
+ margin-inline: props.get($pad-i-label);
}
@include iro.bem-modifier('pill') {
- padding-inline: fn.dim(--#{$size} --pad-i-pill);
+ padding-inline: props.get($pad-i-pill);
}
}
}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
new file mode 100644
index 0000000..6a3dd15
--- /dev/null
+++ b/src/objects/_badge.vars.scss
@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
+$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
+$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
+$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
+$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
+$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
+$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
+$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
+$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
+
+$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
+$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
+$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
+$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
+$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
+$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
+$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
+
+$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$sizes: (
+ 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
+ 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
+ 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
+) !default;
+
+$key-focus--label-color: props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+
+$default-theme-override: () !default;
+$default-theme: props.def(--o-badge, (
+ --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)),
+ --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+
+ --hover: (
+ --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)),
+ --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+ ),
+
+ --active: (
+ --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)),
+ --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+ ),
+
+ --quiet: (
+ --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)),
+ --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+
+ --hover: (
+ --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)),
+ --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+ ),
+
+ --active: (
+ --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)),
+ --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+ ),
+ )
+));
+$default-theme: props.merge(--o-badge, $default-theme-override);
+
+$static-themes: props.def(--o-badge);
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+ $badge-theme: #{$theme}-static;
+
+ $static-themes: props.merge($static-themes, (
+ $badge-theme: (
+ --bg: props.get(core.$transparent-colors, $theme, --800),
+ --label: props.get(core.$transparent-colors, $theme, --text),
+
+ --hover: (
+ --bg: props.get(core.$transparent-colors, $theme, --900),
+ --label: props.get(core.$transparent-colors, $theme, --text),
+ ),
+
+ --active: (
+ --bg: props.get(core.$transparent-colors, $theme, --900),
+ --label: props.get(core.$transparent-colors, $theme, --text),
+ ),
+
+ --key-focus: (
+ --bg: props.get(core.$transparent-colors, $theme, --100),
+ --label: props.get(core.$transparent-colors, $theme, --900),
+ --border: props.get(core.$transparent-colors, $theme, --900),
+ --outline: props.get(core.$transparent-colors, $theme, --300),
+ ),
+
+ --quiet: (
+ --bg: props.get(core.$transparent-colors, $theme, --200),
+ --label: props.get(core.$transparent-colors, $theme, --900),
+ --hover: (
+ --bg: props.get(core.$transparent-colors, $theme, --300),
+ --label: props.get(core.$transparent-colors, $theme, --900),
+ ),
+ --active: (
+ --bg: props.get(core.$transparent-colors, $theme, --400),
+ --label: props.get(core.$transparent-colors, $theme, --900),
+ ),
+ )
+ )
+ ));
+}
+
+$themes-config: (
+ accent: --accent,
+ positive: --positive,
+ negative: --negative,
+ warning: --warning,
+) !default;
+
+$themes: props.def(--o-badge);
+
+@each $theme, $key in $themes-config {
+ $themes: props.merge($themes, (
+ $key: (
+ --bg: props.get(core.$static-colors, $key, --900),
+ --label: props.get(core.$static-colors, $key, --900-text),
+
+ --hover: (
+ --bg: props.get(core.$static-colors, $key, --1000),
+ --label: props.get(core.$static-colors, $key, --1000-text),
+ ),
+
+ --active: (
+ --bg: props.get(core.$static-colors, $key, --1100),
+ --label: props.get(core.$static-colors, $key, --1000-text),
+ ),
+
+ --quiet: (
+ --bg: props.get(core.$theme, $key, --200),
+ --label: props.get(core.$theme, $key, --1100),
+ --hover: (
+ --bg: props.get(core.$theme, $key, --300),
+ --label: props.get(core.$theme, $key, --1200),
+ ),
+ --active: (
+ --bg: props.get(core.$theme, $key, --400),
+ --label: props.get(core.$theme, $key, --1300),
+ ),
+ )
+ )
+ ));
+}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 108392d..39d90bd 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@use './implicit' as implicit;
$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 7f31b8c..ee7463d 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@use './implicit' as implicit;
$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 002a392..b4a16bd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -2,7 +2,7 @@
@use 'iro-sass/src/iro-sass' as iro;
@use '../mixins' as mx;
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@mixin styles {
@include iro.bem-scope('headings') {
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index d679bdc..ba34039 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -2,7 +2,7 @@
@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@forward 'implicit.vars';
@use 'implicit.vars' as vars;
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 036ace3..34979d9 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b40cae8..4bf80c0 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,6 +1,6 @@
@use 'sass:map';
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index d5421ca..1cfe085 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,7 +1,7 @@
@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@forward 'lists.vars';
@use 'lists.vars' as vars;
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index 6dd04ac..8a7852d 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
@use './implicit' as implicit;
$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 2d7fed1..cdaca64 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,5 +1,5 @@
@use '../props';
-@use '../core';
+@use '../core.vars' as core;
$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;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 0189928..5e102a1 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -19,3 +19,5 @@
@include iro.o-action-button--styles;
@include iro.o-alert--styles;
@include iro.o-avatar--styles;
+@include iro.o-backdrop--styles;
+@include iro.o-badge--styles;
--
cgit v1.2.3-70-g09d2