1 files changed, 67 insertions, 33 deletions

diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index a5625fc..737a626 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -1,51 +1,85 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
-$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
-$spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
+$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
+$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
+$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
 
-$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
+$selected--border-width: props.def(
+        --o-thumbnail--selected--border-width,
+        props.get(core.$border-width--medium)
+) !default;
 
-$key-focus--border-width:  props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-thumbnail--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-thumbnail--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-thumbnail--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$border-color: props.def(
+        --o-thumbnail--border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
 
-$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$hover--border-color: props.def(
+        --o-thumbnail--hover--border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
+$selected--border-color: props.def(
+        --o-thumbnail--selected--border-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$key-focus--border-color:  props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--border-color: props.def(
+        --o-thumbnail--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-thumbnail--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
-$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default;
+$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), "md") !default;
 
-$static-themes: props.def(--o-thumbnail, (), 'color');
+$static-themes: props.def(--o-thumbnail, (), "color");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $thumbnail-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $thumbnail-theme: (
-                        --border: props.get(core.$transparent-colors, $theme, --400),
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $thumbnail-theme: (
+                                        --border: props.get(core.$transparent-colors, $theme, --400),
+                                        --hover: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
 
-                        --hover: (
-                                --border: props.get(core.$transparent-colors, $theme, --500),
-                        ),
+                                        --selected: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
 
-                        --selected: (
-                                --border: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-
-                        --key-focus: (
-                                --border:  props.get(core.$transparent-colors, $theme, --900),
-                                --outline: props.get(core.$transparent-colors, $theme, --300),
-                        ),
+                                        --key-focus: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --900),
+                                                        --outline: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }