summaryrefslogtreecommitdiffstats
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
parentUpdate (diff)
downloadiro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.gz
iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.bz2
iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.zip
Update
Diffstat
-rw-r--r--src/.old/objects/_alert.scss55
-rw-r--r--src/.old/objects/_list-group.scss60
-rw-r--r--src/_base.scss9
-rw-r--r--src/_declare-vars.scss9
-rw-r--r--src/_mixins.scss10
-rw-r--r--src/_objects.scss7
-rw-r--r--src/objects/_alert.scss43
-rw-r--r--src/objects/_backdrop.scss (renamed from src/.old/objects/_backdrop.scss)11
-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
-rw-r--r--src/scopes/_headings.scss19
-rw-r--r--tpl/index.pug3
-rw-r--r--tpl/objects/card.pug29
-rw-r--r--tpl/objects/table.pug2
-rw-r--r--tpl/views/alert.pug6
-rw-r--r--tpl/views/card.pug9
-rw-r--r--tpl/views/table.pug2
21 files changed, 319 insertions, 180 deletions
diff --git a/src/.old/objects/_alert.scss b/src/.old/objects/_alert.scss
deleted file mode 100644
index 289ef10..0000000
--- a/src/.old/objects/_alert.scss
+++ /dev/null
@@ -1,55 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('alert') {
5 @include iro.props-store((
6 --dims: (
7 --border: 1px,
8 --pad-x: fn.global-dim(--size --250),
9 --pad-y: fn.global-dim(--size --200),
10 --rounding: 4px,
11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi2),
17 --border: fn.global-color(--fg-hi2),
18 --border-primary: fn.global-color(--accent --primary --solid --bg-hi),
19 --border-error: fn.global-color(--accent --error --solid --bg-hi),
20 --border-success: fn.global-color(--accent --success --solid --bg-hi),
21 --border-warning: fn.global-color(--accent --warning --solid --bg-hi),
22 ),
23 ), 'colors');
24
25 @include iro.props-store((
26 --dims: (
27 --pad-x: fn.global-dim(--size --200),
28 --pad-y: fn.global-dim(--size --150),
29 ),
30 ), 'sm');
31
32 @include iro.bem-object(iro.props-namespace()) {
33 padding: fn.dim(--pad-y) fn.dim(--pad-x);
34 border: fn.dim(--border) solid fn.color(--border);
35 border-radius: fn.dim(--rounding);
36 background-color: fn.color(--bg);
37 color: fn.global-color(--fg);
38
39 @include iro.bem-modifier('primary') {
40 border-color: fn.color(--border-primary);
41 }
42
43 @include iro.bem-modifier('error') {
44 border-color: fn.color(--border-error);
45 }
46
47 @include iro.bem-modifier('success') {
48 border-color: fn.color(--border-success);
49 }
50
51 @include iro.bem-modifier('warning') {
52 border-color: fn.color(--border-warning);
53 }
54 }
55}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
deleted file mode 100644
index d46722e..0000000
--- a/src/.old/objects/_list-group.scss
+++ /dev/null
@@ -1,60 +0,0 @@
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-x: fn.global-dim(--size --175),
8 --pad-y: fn.global-dim(--size --125),
9 --rounding: 3px,
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --bg: fn.global-color(--bg-hi2),
16 --border: fn.global-color(--obj),
17 --hover: fn.global-color(--bg),
18 --press: fn.global-color(--obj-hi),
19 )
20 ), 'colors');
21
22 @include iro.bem-object(iro.props-namespace()) {
23 border: 1px solid fn.color(--border);
24 border-radius: fn.dim(--rounding);
25 background-color: fn.color(--bg);
26
27 @include iro.bem-elem('item') {
28 padding: fn.dim(--pad-y) fn.dim(--pad-x);
29
30 @include iro.bem-next-twin-elem {
31 border-width: 1px 0 0;
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 background-color: fn.color(--hover);
39 }
40
41 &:active {
42 background-color: fn.color(--press);
43 }
44 }
45 }
46
47 @include iro.bem-modifier('horizontal') {
48 display: flex;
49
50 @include iro.bem-elem('item') {
51 flex: 1 0 auto;
52
53 @include iro.bem-next-twin-elem {
54 border-top-width: 0;
55 border-left-width: 1px;
56 }
57 }
58 }
59 }
60}
diff --git a/src/_base.scss b/src/_base.scss
index ce1198d..4932235 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -49,12 +49,9 @@ h3,
49h4, 49h4,
50h5, 50h5,
51h6 { 51h6 {
52 margin-block: fn.dim(--heading --margin-bs) 0; 52 @include mx.heading-medium(--md);
53 color: fn.color(--heading); 53
54 font-size: fn.dim(--font-size --75); 54 margin-block: fn.dim(--heading --margin-bs) 0;
55 font-weight: bold;
56 letter-spacing: 1px;
57 text-transform: uppercase;
58 55
59 & + & { 56 & + & {
60 margin-block-start: fn.dim(--heading --margin-bs-sibling); 57 margin-block-start: fn.dim(--heading --margin-bs-sibling);
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index a38fb8c..23ee4d4 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -117,9 +117,12 @@
117 --margin-bs: fn.dim(--size --700, null), 117 --margin-bs: fn.dim(--size --700, null),
118 --margin-bs-sibling: fn.dim(--size --325, null), 118 --margin-bs-sibling: fn.dim(--size --325, null),
119 119
120 --lg: fn.dim(--font-size --400, null), 120 --xxl: fn.dim(--font-size --300, null),
121 --md: fn.dim(--font-size --75, null), 121 --xl: fn.dim(--font-size --200, null),
122 --sm: fn.dim(--font-size --50, null), 122 --lg: fn.dim(--font-size --150, null),
123 --md: fn.dim(--font-size --100, null),
124 --sm: fn.dim(--font-size --75, null),
125 --xs: fn.dim(--font-size --50, null),
123 126
124 --display: ( 127 --display: (
125 --xxl: fn.dim(--font-size --1100, null), 128 --xxl: fn.dim(--font-size --1100, null),
diff --git a/src/_mixins.scss b/src/_mixins.scss
index dc62870..29d792b 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -12,7 +12,7 @@
12} 12}
13 13
14@mixin heading-strong($size) { 14@mixin heading-strong($size) {
15 color: fn.foreign-color(--heading, --strong); 15 color: fn.global-color(--heading);
16 font-size: fn.global-dim(list.join(--heading, $size)); 16 font-size: fn.global-dim(list.join(--heading, $size));
17} 17}
18 18
@@ -21,12 +21,10 @@
21 --line-height: null, 21 --line-height: null,
22 --size: fn.global-dim(list.join(--heading, $size)), 22 --size: fn.global-dim(list.join(--heading, $size)),
23 --weight: bold, 23 --weight: bold,
24 --transform: uppercase,
25 --spacing: 1px 24 --spacing: 1px
26 )); 25 ));
27 26
28 transform: none; 27 color: fn.global-color(--heading);
29 color: fn.foreign-color(--heading, --strong);
30} 28}
31 29
32@mixin heading-faint($size) { 30@mixin heading-faint($size) {
@@ -34,10 +32,8 @@
34 --line-height: null, 32 --line-height: null,
35 --size: fn.global-dim(list.join(--heading, $size)), 33 --size: fn.global-dim(list.join(--heading, $size)),
36 --weight: 500, 34 --weight: 500,
37 --transform: uppercase,
38 --spacing: 1px 35 --spacing: 1px
39 )); 36 ));
40 37
41 transform: none; 38 color: fn.global-color(--text-mute);
42 color: fn.foreign-color(--heading, --light);
43} 39}
diff --git a/src/_objects.scss b/src/_objects.scss
index 0497fe0..fc6e556 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -17,11 +17,12 @@
17@use 'objects/side-nav'; 17@use 'objects/side-nav';
18@use 'objects/popover'; 18@use 'objects/popover';
19@use 'objects/menu'; 19@use 'objects/menu';
20@use 'objects/card';
20// @use 'objects/icon-nav'; 21// @use 'objects/icon-nav';
21// @use 'objects/backdrop'; 22@use 'objects/backdrop';
22// @use 'objects/dialog'; 23// @use 'objects/dialog';
23// @use 'objects/lightbox'; 24// @use 'objects/lightbox';
24// @use 'objects/list-group'; 25@use 'objects/list-group';
25@use 'objects/table'; 26@use 'objects/table';
26// @use 'objects/alert'; 27@use 'objects/alert';
27@use 'objects/palette'; 28@use 'objects/palette';
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/.old/objects/_backdrop.scss b/src/objects/_backdrop.scss
index ac23d63..d0eaf52 100644
--- a/src/.old/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,27 +7,20 @@
7 --z-index: 10000, 7 --z-index: 10000,
8 --blur: 2em, 8 --blur: 2em,
9 ), 9 ),
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: ( 10 --colors: (
14 --bg: rgba(#000, .75), 11 --bg: rgba(#000, .75),
15 ), 12 ),
16 ), 'colors'); 13 ));
17 14
18 @include iro.bem-object(iro.props-namespace()) { 15 @include iro.bem-object(iro.props-namespace()) {
19 display: flex; 16 display: flex;
20 position: fixed; 17 position: fixed;
21 z-index: fn.dim(--z-index); 18 z-index: fn.dim(--z-index);
22 top: 0; 19 inset: 0;
23 right: 0;
24 bottom: 0;
25 left: 0;
26 box-sizing: border-box; 20 box-sizing: border-box;
27 flex-direction: column; 21 flex-direction: column;
28 overflow: auto; 22 overflow: auto;
29 background-color: fn.color(--bg); 23 background-color: fn.color(--bg);
30 color: fn.global-color(--fg);
31 backdrop-filter: blur(fn.dim(--blur)); 24 backdrop-filter: blur(fn.dim(--blur));
32 } 25 }
33} 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 }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c5033e8..9593792 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -21,20 +21,29 @@
21 21
22 22
23 h1 { 23 h1 {
24 @include mx.heading-strong(--lg); 24 @include mx.heading-strong(--xxl);
25 } 25 }
26 26
27 h2 { 27 h2 {
28 @include mx.heading-strong(--xl);
29 }
30
31 h3 {
32 @include mx.heading-medium(--lg);
33 }
34
35 h4 {
28 @include mx.heading-medium(--md); 36 @include mx.heading-medium(--md);
29 } 37 }
30 38
31 h3, 39 h5 {
32 h4,
33 h5,
34 h6 {
35 @include mx.heading-faint(--sm); 40 @include mx.heading-faint(--sm);
36 } 41 }
37 42
43 h6 {
44 @include mx.heading-faint(--xs);
45 }
46
38 @include iro.bem-elem('highlight') { 47 @include iro.bem-elem('highlight') {
39 background-image: linear-gradient( 48 background-image: linear-gradient(
40 to top, 49 to top,
diff --git a/tpl/index.pug b/tpl/index.pug
index d3e9daf..b6af02b 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,6 +21,7 @@ include objects/action-button.pug
21include objects/overflow-button.pug 21include objects/overflow-button.pug
22include objects/status-indicator.pug 22include objects/status-indicator.pug
23include objects/avatar.pug 23include objects/avatar.pug
24include objects/card.pug
24include objects/popover.pug 25include objects/popover.pug
25include objects/menu.pug 26include objects/menu.pug
26include objects/side-nav.pug 27include objects/side-nav.pug
@@ -72,6 +73,7 @@ include views/action-button.pug
72include views/overflow-button.pug 73include views/overflow-button.pug
73include views/status-indicator.pug 74include views/status-indicator.pug
74include views/avatar.pug 75include views/avatar.pug
76include views/card.pug
75include views/popover.pug 77include views/popover.pug
76include views/menu.pug 78include views/menu.pug
77include views/side-nav.pug 79include views/side-nav.pug
@@ -118,6 +120,7 @@ html
118 +view-overflow-button 120 +view-overflow-button
119 +view-status-indicator 121 +view-status-indicator
120 +view-avatar 122 +view-avatar
123 +view-card
121 +view-side-nav 124 +view-side-nav
122 +view-popover 125 +view-popover
123 +view-menu 126 +view-menu
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
new file mode 100644
index 0000000..d6516be
--- /dev/null
+++ b/tpl/objects/card.pug
@@ -0,0 +1,29 @@
1mixin card
2 - const slots = {}
3
4 mixin slot(key)
5 - slots[key] = block
6
7 -
8 block ? block() : undefined
9
10 let classes = {
11 'o-card': true,
12 }
13
14 if attributes.href
15 a(href=attributes.href class=classes)
16 if slots.body
17 .o-card__body
18 - slots.body()
19 if slots.footer
20 .o-card__footer
21 - slots.footer()
22 else
23 div(class=classes)
24 if slots.body
25 .o-card__body
26 - slots.body()
27 if slots.footer
28 .o-card__footer
29 - slots.footer()
diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug
index e635589..c8ff17e 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -5,7 +5,7 @@ mixin table
5 'o-table--flush': attributes.flush, 5 'o-table--flush': attributes.flush,
6 'o-table--box': attributes.box, 6 'o-table--box': attributes.box,
7 'o-table--interactive': attributes.interactive, 7 'o-table--interactive': attributes.interactive,
8 'o-table--50': attributes.size50, 8 'o-table--sm': attributes.sm,
9 } 9 }
10 10
11 table(class=classes) 11 table(class=classes)
diff --git a/tpl/views/alert.pug b/tpl/views/alert.pug
index c176279..02cf508 100644
--- a/tpl/views/alert.pug
+++ b/tpl/views/alert.pug
@@ -3,10 +3,10 @@ mixin view-alert
3 .c-box 3 .c-box
4 +alert= loremIpsum 4 +alert= loremIpsum
5 br 5 br
6 +alert('primary')= loremIpsum 6 +alert('accent')= loremIpsum
7 br 7 br
8 +alert('error')= loremIpsum 8 +alert('negative')= loremIpsum
9 br 9 br
10 +alert('success')= loremIpsum 10 +alert('positive')= loremIpsum
11 br 11 br
12 +alert('warning')= loremIpsum 12 +alert('warning')= loremIpsum
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
new file mode 100644
index 0000000..0b88b0e
--- /dev/null
+++ b/tpl/views/card.pug
@@ -0,0 +1,9 @@
1mixin view-card
2 +view('card', 'Card')
3 .c-box
4 +card(href='#')
5 +slot('body')
6 h1= 'XS Heading'
7 p= loremIpsum
8 +slot('footer')
9 = 'Footer'
diff --git a/tpl/views/table.pug b/tpl/views/table.pug
index f74a4cd..6ed7263 100644
--- a/tpl/views/table.pug
+++ b/tpl/views/table.pug
@@ -76,7 +76,7 @@ mixin view-table
76 +table-cell= 'Row 4,3' 76 +table-cell= 'Row 4,3'
77 77
78 .c-box 78 .c-box
79 +table(box=true, size50=true) 79 +table(box=true sm=true)
80 +table-head 80 +table-head
81 +table-row 81 +table-row
82 +table-head-cell= 'Title' 82 +table-head-cell= 'Title'
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 05:46:18 +0000