From 64a841c69ead262666dd0754218585d0f05cf735 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 23 Jun 2024 19:05:33 +0200 Subject: WIP: New color calculations --- src/objects/_badge.scss | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'src/objects/_badge.scss') diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 23ae305..6001564 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -6,29 +6,33 @@ $themes: accent positive negative warning; @include iro.props-namespace('badge') { @include iro.props-store(( --dims: ( - --pad-b: fn.global-dim(--size --100), + --pad-b: fn.global-dim(--size --50), --pad-i: fn.global-dim(--size --150), --pad-i-pill: fn.global-dim(--size --200), --rounding: fn.global-dim(--rounding), - --font-size: fn.global-dim(--font-size --100), + --font-size: fn.global-dim(--font-size --75), --sm: ( - --pad-b: fn.global-dim(--size --50), + --pad-b: fn.global-dim(--size --25), --pad-i: fn.global-dim(--size --115), --pad-i-pill: fn.global-dim(--size --150), - --font-size: fn.global-dim(--font-size --75), + --font-size: fn.global-dim(--font-size --50), ), --lg: ( - --pad-b: fn.global-dim(--size --125), + --pad-b: fn.global-dim(--size --75), --pad-i: fn.global-dim(--size --175), --pad-i-pill: fn.global-dim(--size --225), - --font-size: fn.global-dim(--font-size --150), + --font-size: fn.global-dim(--font-size --100), ), --xl: ( - --pad-b: fn.global-dim(--size --160), + --pad-b: fn.global-dim(--size --100), --pad-i: fn.global-dim(--size --225), --pad-i-pill: fn.global-dim(--size --300), - --font-size: fn.global-dim(--font-size --200), + --font-size: fn.global-dim(--font-size --150), + ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), ), ), --colors: ( @@ -43,7 +47,7 @@ $themes: accent positive negative warning; --key-focus: ( --bg: fn.global-color(--base --50), --label: fn.global-color(--heading), - --border: fn.global-color(--yellow-static --400), + --border: fn.global-color(--focus-static --400), ), --quiet: ( @@ -63,13 +67,13 @@ $themes: accent positive negative warning; @include iro.props-store(( --colors: ( --#{$theme}: ( - --bg: fn.global-color(--#{$theme} --800), - --label: fn.global-color(--#{$theme} --800-text), + --bg: fn.global-color(--#{$theme}-static --800), + --label: fn.global-color(--#{$theme}-static --800-text), --hover: ( - --bg: fn.global-color(--#{$theme} --900), + --bg: fn.global-color(--#{$theme}-static --900), ), --active: ( - --bg: fn.global-color(--#{$theme} --900), + --bg: fn.global-color(--#{$theme}-static --900), ), ), @@ -169,7 +173,7 @@ $themes: accent positive negative warning; &:enabled { &:focus-visible { background-color: fn.color(--key-focus --bg); - box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border); + box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border); color: fn.color(--key-focus --label); } } -- cgit v1.2.3-70-g09d2