diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/.old/objects/_alert.scss | 55 | ||||
-rw-r--r-- | src/.old/objects/_list-group.scss | 60 | ||||
-rw-r--r-- | src/_base.scss | 9 | ||||
-rw-r--r-- | src/_declare-vars.scss | 9 | ||||
-rw-r--r-- | src/_mixins.scss | 10 | ||||
-rw-r--r-- | src/_objects.scss | 7 | ||||
-rw-r--r-- | src/objects/_alert.scss | 43 | ||||
-rw-r--r-- | src/objects/_backdrop.scss (renamed from src/.old/objects/_backdrop.scss) | 11 | ||||
-rw-r--r-- | src/objects/_card.scss | 88 | ||||
-rw-r--r-- | src/objects/_heading.scss | 20 | ||||
-rw-r--r-- | src/objects/_list-group.scss | 61 | ||||
-rw-r--r-- | src/objects/_menu.scss | 29 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 2 | ||||
-rw-r--r-- | src/objects/_table.scss | 25 | ||||
-rw-r--r-- | src/scopes/_headings.scss | 19 |
15 files changed, 273 insertions, 175 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, | |||
49 | h4, | 49 | h4, |
50 | h5, | 50 | h5, |
51 | h6 { | 51 | h6 { |
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, |