summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_card.vars.scss')
-rw-r--r--src/objects/_card.vars.scss151
1 files changed, 36 insertions, 115 deletions
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 96f3cb9..4616c80 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,130 +1,51 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "pkg:iro-sass/props"; 2@use 'pkg:iro-sass/src/props';
3@use "../core.vars" as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; 6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
7$sub-border-width: props.def( 7$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
8 --o-card--sub-border-width, 8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
9 props.get(core.$border-width--thick) 9$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
10) !default; 10$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
11$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 11$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
12$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
13$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
14$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
15$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; 12$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
16$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; 13$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
17 14
18$hover--offset-b: props.def( 15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
19 --o-card--hover--offset-b,
20 calc(-1 * props.get(core.$size--65))
21) !default;
22 16
23$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; 17$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
24$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; 18$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
25$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; 19$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
26$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; 20$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
27 21
28$key-focus--border-width: props.def( 22$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
29 --o-card--key-focus--border-width, 23$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
30 props.get(core.$key-focus--border-width) 24$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
31) !default;
32$key-focus--border-offset: props.def(
33 --o-card--key-focus--border-offset,
34 props.get(core.$key-focus--border-offset)
35) !default;
36$key-focus--outline-width: props.def(
37 --o-card--key-focus--outline-width,
38 props.get(core.$key-focus--outline-width)
39) !default;
40 25
41$shadow-color: props.def( 26$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
42 --o-card--shadow-color, 27$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
43 props.get(core.$theme, --shadow), 28$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
44 "color" 29$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
45) !default;
46$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), "color") !default;
47$border-color: props.def(
48 --o-card--border-color,
49 props.get(core.$theme, --box, --border),
50 "color"
51) !default;
52$divider-color: props.def(
53 --o-card--divider-color,
54 props.get(core.$theme, --border-mute),
55 "color"
56) !default;
57 30
58$highlight--shadow-x: props.def( 31$highlight--shadow-x: props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default;
59 --o-card--highlight--shadow-x, 32$highlight--shadow-y: props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default;
60 props.get(core.$shadow--l2--x) 33$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
61) !default; 34$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
62$highlight--shadow-y: props.def(
63 --o-card--highlight--shadow-y,
64 props.get(core.$shadow--l2--y)
65) !default;
66$highlight--shadow-blur: props.def(
67 --o-card--highlight--shadow-blur,
68 props.get(core.$shadow--l2--blur)
69) !default;
70$highlight--shadow-grow: props.def(
71 --o-card--highlight--shadow-grow,
72 props.get(core.$shadow--l2--grow)
73) !default;
74 35
75$highlight--border-width: props.def( 36$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default;
76 --o-card--highlight--border-width, 37$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --800), 'color') !default;
77 props.get(core.$border-width--medium) 38$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default;
78) !default;
79$highlight--border-color: props.def(
80 --o-card--highlight--border-color,
81 props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700)
82 props.get(core.$theme, --accent, --800),
83 "color"
84) !default;
85$highlight--shadow-color: props.def(
86 --o-card--highlight--shadow-color,
87 props.get(core.$theme, --accent, --200),
88 "color"
89) !default;
90 39
91$hover--bg-color: props.def( 40$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
92 --o-card--hover--bg-color, 41$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
93 color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)),
94 "color"
95) !default;
96$hover--border-color: props.def(
97 --o-card--hover--border-color,
98 props.get(core.$theme, --border),
99 "color"
100) !default;
101 42
102$key-focus--label-color: props.def( 43$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
103 --o-card--key-focus--label-color, 44$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
104 props.get(core.$theme, --focus, --text), 45$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
105 "color"
106) !default;
107$key-focus--border-color: props.def(
108 --o-card--key-focus--border-color,
109 props.get(core.$theme, --focus, --border),
110 "color"
111) !default;
112$key-focus--outline-color: props.def(
113 --o-card--key-focus--outline-color,
114 props.get(core.$theme, --focus, --outline),
115 "color"
116) !default;
117 46
118$quiet--image-color: props.def( 47$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
119 --o-card--quiet--image-color, 48$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
120 props.get(core.$theme, --bg-base),
121 "color"
122) !default;
123$quiet--hover--image-color: props.def(
124 --o-card--quiet--hover--image-color,
125 props.get(core.$theme, --border),
126 "color"
127) !default;
128 49
129$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), "sm") !default; 50$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default;
130$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), "sm") !default; 51$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default;
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 18:40:36 +0000