summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-27 09:56:02 +0200
committerVolpeon <git@volpeon.ink>2024-06-27 09:56:02 +0200
commitd23a2cf25ccc33f49d73ee3da2f775c0d4fa0784 (patch)
tree19e9a649bcf6ca6559ed7ad46b0fd2c23e664521 /src/objects
parentUpdate (diff)
downloadiro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.gz
iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.bz2
iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_alert.scss43
-rw-r--r--src/objects/_backdrop.scss26
-rw-r--r--src/objects/_card.scss88
-rw-r--r--src/objects/_heading.scss20
-rw-r--r--src/objects/_list-group.scss61
-rw-r--r--src/objects/_menu.scss29
-rw-r--r--src/objects/_status-indicator.scss2
-rw-r--r--src/objects/_table.scss25
8 files changed, 267 insertions, 27 deletions
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
new file mode 100644
index 0000000..067c00c
--- /dev/null
+++ b/src/objects/_alert.scss
@@ -0,0 +1,43 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
6@include iro.props-namespace('alert') {
7 @include iro.props-store((
8 --dims: (
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --250),
11 --pad-b: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--text-mute-more),
17 ),
18 ));
19
20 @each $theme in $themes {
21 @include iro.props-store((
22 --colors: (
23 --#{$theme}: (
24 --border: fn.global-color(--#{$theme} --700),
25 ),
26 ),
27 ));
28 }
29
30 @include iro.bem-object(iro.props-namespace()) {
31 padding-block: fn.dim(--pad-b);
32 padding-inline: fn.dim(--pad-i);
33 border: fn.dim(--border) solid fn.color(--border);
34 border-radius: fn.dim(--rounding);
35 background-color: fn.color(--bg);
36
37 @each $theme in $themes {
38 @include iro.bem-modifier($theme) {
39 border-color: fn.color(--#{$theme} --border);
40 }
41 }
42 }
43}
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
new file mode 100644
index 0000000..d0eaf52
--- /dev/null
+++ b/src/objects/_backdrop.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('backdrop') {
5 @include iro.props-store((
6 --dims: (
7 --z-index: 10000,
8 --blur: 2em,
9 ),
10 --colors: (
11 --bg: rgba(#000, .75),
12 ),
13 ));
14
15 @include iro.bem-object(iro.props-namespace()) {
16 display: flex;
17 position: fixed;
18 z-index: fn.dim(--z-index);
19 inset: 0;
20 box-sizing: border-box;
21 flex-direction: column;
22 overflow: auto;
23 background-color: fn.color(--bg);
24 backdrop-filter: blur(fn.dim(--blur));
25 }
26}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
new file mode 100644
index 0000000..07256cb
--- /dev/null
+++ b/src/objects/_card.scss
@@ -0,0 +1,88 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('card') {
5 @include iro.props-store((
6 --dims: (
7 --border: fn.global-dim(--border --thin),
8 --divider: fn.global-dim(--border --thin),
9 --pad-i: fn.global-dim(--size --300),
10 --pad-b: fn.global-dim(--size --250),
11 --spacing: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13
14 --key-focus: (
15 --border: fn.global-dim(--key-focus --border),
16 --border-offset: fn.global-dim(--key-focus --border-offset),
17 --outline: fn.global-dim(--key-focus --outline),
18 ),
19 ),
20 --colors: (
21 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute),
24
25 --hover: (
26 --border: fn.global-color(--border),
27 ),
28 --key-focus: (
29 --label: fn.global-color(--focus --text),
30 --border: fn.global-color(--focus --border),
31 --outline: fn.global-color(--focus --outline),
32 ),
33 ),
34 ));
35
36 @include iro.bem-object(iro.props-namespace()) {
37 display: block;
38 border: fn.dim(--border) solid fn.color(--border);
39 border-radius: fn.dim(--rounding);
40 background-color: fn.color(--bg);
41
42 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
43 &:hover,
44 &:focus-visible,
45 &:active {
46 border-color: fn.color(--hover --border);
47 }
48
49 &:focus-visible {
50 border-color: fn.color(--key-focus --border);
51 outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
52 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
53 }
54 }
55
56 @include iro.bem-elem('thumbnail') {
57 position: relative;
58 width: 100%;
59 height: 100%;
60 }
61
62 @include iro.bem-elem('thumbnail-img') {
63 display: block;
64 object-fit: cover;
65 width: 100%;
66 height: 100%;
67 }
68
69 @include iro.bem-elem('body') {
70 padding-block: fn.dim(--pad-b);
71 padding-inline: fn.dim(--pad-i);
72 }
73
74 @include iro.bem-elem('footer') {
75 padding-block: 0 fn.dim(--pad-b);
76 padding-inline: fn.dim(--pad-i);
77 margin-block-start: calc(-1 * fn.dim(--pad-b));
78
79 &::before {
80 content: '';
81 display: block;
82 height: fn.dim(--divider);
83 margin-block: fn.dim(--spacing);
84 background-color: fn.color(--divider);
85 }
86 }
87 }
88}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6dcf7e9..41b33e6 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -4,15 +4,15 @@
4@use '../config'; 4@use '../config';
5@use 'include-media/dist/include-media' as media; 5@use 'include-media/dist/include-media' as media;
6 6
7$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
8
7@include iro.props-namespace('heading') { 9@include iro.props-namespace('heading') {
8 @include iro.props-store(( 10 @include iro.props-store((
9 --dims: ( 11 --dims: (
10 --offset: -.02em, 12 --offset: -.02em,
11 ), 13 ),
12 --colors: ( 14 --colors: (
13 --light: fn.global-color(--text-mute), 15 --bg: fn.global-color(--bg-l2),
14 --strong: fn.global-color(--heading),
15 --bg: fn.global-color(--bg-l2),
16 ), 16 ),
17 )); 17 ));
18 18
@@ -44,10 +44,22 @@
44 } 44 }
45 45
46 @include iro.bem-modifier('xl') { 46 @include iro.bem-modifier('xl') {
47 @include mx.heading-strong(--md);
48 }
49
50 @include iro.bem-modifier('lg') {
47 @include mx.heading-medium(--md); 51 @include mx.heading-medium(--md);
48 } 52 }
49 53
50 @include iro.bem-modifier('lg', 'md', 'sm', 'xs') { 54 @include iro.bem-modifier('md') {
55 @include mx.heading-medium(--md);
56 }
57
58 @include iro.bem-modifier('sm') {
59 @include mx.heading-faint(--sm);
60 }
61
62 @include iro.bem-modifier('xs') {
51 @include mx.heading-faint(--sm); 63 @include mx.heading-faint(--sm);
52 } 64 }
53 65
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src/objects/_list-group.scss
@@ -0,0 +1,61 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('list-group') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: fn.global-dim(--size --175),
8 --pad-b: fn.global-dim(--size --125),
9 --rounding: fn.global-dim(--rounding),
10 --border: fn.global-dim(--border --thin),
11 ),
12 --colors: (
13 --bg: fn.global-color(--base --75),
14 --border: fn.global-color(--border),
15 --hover: fn.global-color(--border-mute),
16 --active: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 border: fn.dim(--border) solid fn.color(--border);
22 border-radius: fn.dim(--rounding);
23 background-color: fn.color(--bg);
24
25 @include iro.bem-elem('item') {
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28
29 @include iro.bem-next-twin-elem {
30 border-width: 0;
31 border-block-start-width: fn.dim(--border);
32 border-style: solid;
33 border-color: fn.color(--border);
34 }
35
36 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
37 &:hover,
38 &:focus-visible {
39 background-color: fn.color(--hover);
40 }
41
42 &:active {
43 background-color: fn.color(--active);
44 }
45 }
46 }
47
48 @include iro.bem-modifier('horizontal') {
49 display: flex;
50
51 @include iro.bem-elem('item') {
52 flex: 1 0 auto;
53
54 @include iro.bem-next-twin-elem {
55 border-block-start-width: 0;
56 border-inline-start-width: fn.dim(--border);
57 }
58 }
59 }
60 }
61}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index b1350ba..0f691a2 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,3 +1,5 @@
1/* stylelint-disable length-zero-no-unit */
2
1@use 'iro-sass/src/index' as iro; 3@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 4@use '../functions' as fn;
3 5
@@ -15,12 +17,12 @@
15 --pad-i: fn.global-dim(--size --150), 17 --pad-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100), 18 --pad-b: fn.global-dim(--size --100),
17 --rounding: 0em, 19 --rounding: 0em,
18 ),
19 20
20 --key-focus: ( 21 --key-focus: (
21 --border: fn.global-dim(--key-focus --border), 22 --border: fn.global-dim(--key-focus --border),
22 --border-offset: fn.global-dim(--key-focus --border-offset), 23 --border-offset: fn.global-dim(--key-focus --border-offset),
23 --outline: fn.global-dim(--key-focus --outline), 24 --outline: fn.global-dim(--key-focus --outline),
25 ),
24 ), 26 ),
25 ), 27 ),
26 --colors: ( 28 --colors: (
@@ -68,11 +70,13 @@
68 } 70 }
69 71
70 @include iro.bem-elem('item') { 72 @include iro.bem-elem('item') {
71 padding-block: calc(fn.dim(--item --pad-b) - 2px); 73 padding-block: fn.dim(--item --pad-b);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px); 74 padding-inline: fn.dim(--item --pad-i);
73 border: 2px solid transparent; 75 margin: calc(-1 * fn.dim(--item --key-focus --outline));
74 border-radius: fn.dim(--item --rounding); 76 border: fn.dim(--item --key-focus --outline) solid transparent;
75 color: fn.color(--item --disabled --label); 77 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
78 color: fn.color(--item --disabled --label);
79 background-clip: padding-box;
76 80
77 &:link, 81 &:link,
78 &:visited, 82 &:visited,
@@ -88,6 +92,11 @@
88 background-color: fn.color(--item --active --bg); 92 background-color: fn.color(--item --active --bg);
89 color: fn.color(--item --active --label); 93 color: fn.color(--item --active --label);
90 } 94 }
95
96 &:focus-visible {
97 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
98 box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
99 }
91 } 100 }
92 101
93 @include iro.bem-next-elem('header') { 102 @include iro.bem-next-elem('header') {
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 4c5305e..cadd395 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -17,7 +17,7 @@ $themes: 'accent' 'positive' 'negative' 'warning' !default;
17 @each $theme in $themes { 17 @each $theme in $themes {
18 @include iro.props-store(( 18 @include iro.props-store((
19 --colors: ( 19 --colors: (
20 --#{$theme}: fn.global-color(--#{$theme}-static --800), 20 --#{$theme}: fn.global-color(--#{$theme} --700),
21 ), 21 ),
22 )); 22 ));
23 } 23 }
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index cccf956..ea243a2 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -9,19 +9,20 @@
9 --pad-b: fn.global-dim(--size --125), 9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding), 10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin), 11 --border: fn.global-dim(--border --thin),
12 --50: ( 12
13 --sm: (
13 --pad-b: fn.global-dim(--size --75), 14 --pad-b: fn.global-dim(--size --75),
14 ) 15 )
15 ), 16 ),
16 --colors: ( 17 --colors: (
17 --border: fn.global-color(--border), 18 --border: fn.global-color(--border),
18 --heading: fn.global-color(--heading), 19 --heading: fn.global-color(--heading),
19 --hover: fn.global-color(--border-mute), 20 --hover: fn.global-color(--border-mute),
20 --press: fn.global-color(--border), 21 --active: fn.global-color(--border),
21 --box: ( 22 --box: (
22 --bg: fn.global-color(--base --50), 23 --bg: fn.global-color(--base --50),
23 --hover: fn.global-color(--bg-base), 24 --hover: fn.global-color(--bg-base),
24 --press: fn.global-color(--border-mute), 25 --active: fn.global-color(--border-mute),
25 ) 26 )
26 ) 27 )
27 )); 28 ));
@@ -136,7 +137,7 @@
136 137
137 &:active { 138 &:active {
138 @include iro.bem-elem('cell') { 139 @include iro.bem-elem('cell') {
139 background-color: fn.color(--press); 140 background-color: fn.color(--active);
140 } 141 }
141 } 142 }
142 } 143 }
@@ -151,16 +152,16 @@
151 152
152 &:active { 153 &:active {
153 @include iro.bem-elem('cell') { 154 @include iro.bem-elem('cell') {
154 background-color: fn.color(--box --press); 155 background-color: fn.color(--box --active);
155 } 156 }
156 } 157 }
157 } 158 }
158 } 159 }
159 } 160 }
160 161
161 @include iro.bem-modifier('50') { 162 @include iro.bem-modifier('sm') {
162 @include iro.bem-elem('head-cell', 'cell') { 163 @include iro.bem-elem('head-cell', 'cell') {
163 padding-block: fn.dim(--50 --pad-b); 164 padding-block: fn.dim(--sm --pad-b);
164 } 165 }
165 } 166 }
166 } 167 }
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 10:31:13 +0000