summaryrefslogtreecommitdiffstats
path: root/src/objects/_thumbnail.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_thumbnail.vars.scss
parentUpdate _index.scss (diff)
downloadiro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
PathsHEADmaster
Diffstat (limited to 'src/objects/_thumbnail.vars.scss')
-rw-r--r--src/objects/_thumbnail.vars.scss100
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 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/props";
4@use '../core.vars' as core; 4@use "../core.vars" as core;
5 5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; 6$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; 7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; 8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; 9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
10 10
11$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; 11$selected--border-width: props.def(
12 --o-thumbnail--selected--border-width,
13 props.get(core.$border-width--medium)
14) !default;
12 15
13$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 16$key-focus--border-width: props.def(
14$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 17 --o-thumbnail--key-focus--border-width,
15$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 18 props.get(core.$key-focus--border-width)
19) !default;
20$key-focus--border-offset: props.def(
21 --o-thumbnail--key-focus--border-offset,
22 props.get(core.$key-focus--border-offset)
23) !default;
24$key-focus--outline-width: props.def(
25 --o-thumbnail--key-focus--outline-width,
26 props.get(core.$key-focus--outline-width)
27) !default;
16 28
17$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; 29$border-color: props.def(
30 --o-thumbnail--border-color,
31 props.get(core.$theme, --border-strong),
32 "color"
33) !default;
18 34
19$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; 35$hover--border-color: props.def(
36 --o-thumbnail--hover--border-color,
37 props.get(core.$theme, --text-mute-more),
38 "color"
39) !default;
20 40
21$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; 41$selected--border-color: props.def(
42 --o-thumbnail--selected--border-color,
43 props.get(core.$theme, --heading),
44 "color"
45) !default;
22 46
23$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 47$key-focus--border-color: props.def(
24$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 48 --o-thumbnail--key-focus--border-color,
49 props.get(core.$theme, --focus, --border),
50 "color"
51) !default;
52$key-focus--outline-color: props.def(
53 --o-thumbnail--key-focus--outline-color,
54 props.get(core.$theme, --focus, --outline),
55 "color"
56) !default;
25 57
26$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; 58$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), "md") !default;
27 59
28$static-themes: props.def(--o-thumbnail, (), 'color'); 60$static-themes: props.def(--o-thumbnail, (), "color");
29 61
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 62@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $thumbnail-theme: --static-#{string.slice($theme, 3)}; 63 $thumbnail-theme: --static-#{string.slice($theme, 3)};
32 64
33 $static-themes: props.merge($static-themes, ( 65 $static-themes: props.merge(
34 $thumbnail-theme: ( 66 $static-themes,
35 --border: props.get(core.$transparent-colors, $theme, --400), 67 (
68 $thumbnail-theme: (
69 --border: props.get(core.$transparent-colors, $theme, --400),
70 --hover: (
71 --border: props.get(core.$transparent-colors, $theme, --500),
72 ),
36 73
37 --hover: ( 74 --selected: (
38 --border: props.get(core.$transparent-colors, $theme, --500), 75 --border: props.get(core.$transparent-colors, $theme, --900),
39 ), 76 ),
40 77
41 --selected: ( 78 --key-focus: (
42 --border: props.get(core.$transparent-colors, $theme, --900), 79 --border: props.get(core.$transparent-colors, $theme, --900),
43 ), 80 --outline: props.get(core.$transparent-colors, $theme, --300),
44 81 ),
45 --key-focus: ( 82 ),
46 --border: props.get(core.$transparent-colors, $theme, --900),
47 --outline: props.get(core.$transparent-colors, $theme, --300),
48 ),
49 ) 83 )
50 )); 84 );
51} 85}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 10:52:16 +0000