From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/objects/_divider.vars.scss | 181 +++++++++++++++++++++++++++++------------ 1 file changed, 127 insertions(+), 54 deletions(-) (limited to 'src/objects/_divider.vars.scss') diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index a8b0f9f..38224d4 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,80 +1,153 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; -$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; -$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; -$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; +$vertical--border-width: props.def( + --o-divider--vertical--width, + props.get(core.$border-width--thin) +) !default; +$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; +$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; -$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; -$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; +$strong--border-width: props.def( + --o-divider--strong--border-width, + props.get(core.$border-width--thick) +) !default; +$strong--label-font-size: props.def( + --o-divider--strong--label-font-size, + props.get(core.$font-size--100) +) !default; -$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; -$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; +$medium--border-width: props.def( + --o-divider--medium--border-width, + props.get(core.$border-width--medium) +) !default; +$medium--label-font-size: props.def( + --o-divider--medium--label-font-size, + props.get(core.$font-size--75) +) !default; -$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; -$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; +$quiet--border-width: props.def( + --o-divider--quiet--border-width, + props.get(core.$border-width--thin) +) !default; +$quiet--label-font-size: props.def( + --o-divider--quiet--label-font-size, + props.get(core.$font-size--50) +) !default; -$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; -$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; +$faint--border-width: props.def( + --o-divider--faint--border-width, + props.get(core.$border-width--thin) +) !default; +$faint--label-font-size: props.def( + --o-divider--faint--label-font-size, + props.get(core.$font-size--50) +) !default; -$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; -$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; +$strong--bg-color: props.def( + --o-divider--strong--bg-color, + props.get(core.$theme, --text), + "color" +) !default; +$strong--label-color: props.def( + --o-divider--strong--label-color, + props.get(core.$theme, --text), + "color" +) !default; -$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; -$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; +$medium--bg-color: props.def( + --o-divider--medium--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$medium--label-color: props.def( + --o-divider--medium--label-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; -$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$quiet--bg-color: props.def( + --o-divider--quiet--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$quiet--label-color: props.def( + --o-divider--quiet--label-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$faint--bg-color: props.def( + --o-divider--faint--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$faint--label-color: props.def( + --o-divider--faint--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$vertical--quiet--bg-color: props.def( + --o-divider--vertical--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$dot--quiet--bg-color: props.def( + --o-divider--dot--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$static-themes: props.def(--o-divider, (), 'color'); +$static-themes: props.def(--o-divider, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $button-theme: ( - --strong: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - --medium: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --quiet: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --faint: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --400), - ), + $static-themes: props.merge( + $static-themes, + ( + $button-theme: ( + --strong: ( + --bg: props.get(core.$transparent-colors, $theme, --800), + --label: props.get(core.$transparent-colors, $theme, --900), + ), + --medium: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --quiet: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --faint: ( + --bg: props.get(core.$transparent-colors, $theme, --200), + --label: props.get(core.$transparent-colors, $theme, --400), + ), + ), ) - )); + ); } $themes-config: ( - accent: --accent, + accent: --accent, negative: --negative, ) !default; -$themes: props.def(--o-divider, (), 'color'); +$themes: props.def(--o-divider, (), "color"); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg: props.get(core.$theme, $key, --800), - --label: props.get(core.$theme, $key, --1000), + $themes: props.merge( + $themes, + ( + --#{$theme}: ( + --bg: props.get(core.$theme, $key, --800), + --label: props.get(core.$theme, $key, --1000), + ) ) - )); + ); } -- cgit v1.3.1