summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.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/_card.vars.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/objects/_card.vars.scss')
-rw-r--r--src/objects/_card.vars.scss151
1 files changed, 115 insertions, 36 deletions
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 4616c80..96f3cb9 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,51 +1,130 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'pkg:iro-sass/src/props'; 2@use "pkg:iro-sass/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(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default; 7$sub-border-width: props.def(
8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 8 --o-card--sub-border-width,
9$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 9 props.get(core.$border-width--thick)
10$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 10) !default;
11$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; 11$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !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;
12$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; 15$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
13$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; 16$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
14 17
15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; 18$hover--offset-b: props.def(
19 --o-card--hover--offset-b,
20 calc(-1 * props.get(core.$size--65))
21) !default;
16 22
17$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; 23$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
18$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; 24$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
19$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; 25$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
20$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; 26$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
21 27
22$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 28$key-focus--border-width: props.def(
23$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 29 --o-card--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; 30 props.get(core.$key-focus--border-width)
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;
25 40
26$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; 41$shadow-color: props.def(
27$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 42 --o-card--shadow-color,
28$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; 43 props.get(core.$theme, --shadow),
29$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 44 "color"
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;
30 57
31$highlight--shadow-x: props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default; 58$highlight--shadow-x: props.def(
32$highlight--shadow-y: props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default; 59 --o-card--highlight--shadow-x,
33$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default; 60 props.get(core.$shadow--l2--x)
34$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default; 61) !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;
35 74
36$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default; 75$highlight--border-width: props.def(
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; 76 --o-card--highlight--border-width,
38$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default; 77 props.get(core.$border-width--medium)
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;
39 90
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; 91$hover--bg-color: props.def(
41$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; 92 --o-card--hover--bg-color,
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;
42 101
43$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 102$key-focus--label-color: props.def(
44$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 103 --o-card--key-focus--label-color,
45$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 104 props.get(core.$theme, --focus, --text),
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;
46 117
47$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; 118$quiet--image-color: props.def(
48$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; 119 --o-card--quiet--image-color,
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;
49 128
50$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default; 129$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), "sm") !default;
51$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default; 130$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 15:25:39 +0000