summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_code.scss59
-rw-r--r--src/scopes/_links.scss5
2 files changed, 62 insertions, 2 deletions
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..a6905a3
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('code') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-i: fn.global-dim(--size --50),
9 --pad-b: fn.global-dim(--size --10),
10 --rounding: fn.global-dim(--rounding),
11 ),
12 --block: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 --rounding: fn.global-dim(--rounding),
17 )
18 ),
19 --colors: (
20 --inline: (
21 --fg: fn.global-color(--red --1100),
22 --bg: fn.global-color(--red --200),
23 ),
24 --block: (
25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--bg-l2),
27 )
28 )
29 ));
30
31 @include iro.bem-scope(iro.props-namespace()) {
32 code {
33 padding-block: fn.dim(--inline --pad-b);
34 padding-inline: fn.dim(--inline --pad-i);
35 border-radius: fn.dim(--inline --rounding);
36 background-color: fn.color(--inline --bg);
37 color: fn.color(--inline --fg);
38 }
39
40 pre {
41 margin-block: fn.dim(--block --margin-bs) 0;
42 margin-inline: 0;
43 padding-block: fn.dim(--block --pad-b);
44 padding-inline: fn.dim(--block --pad-i);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-inline-end: fn.dim(--block --pad-i);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 115b199..d0c47ef 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -15,7 +15,7 @@
15 15
16 --idle: ( 16 --idle: (
17 --text: fn.global-color(--accent --1000), 17 --text: fn.global-color(--accent --1000),
18 --underline: fn.global-color(--accent --700), 18 --underline: fn.global-color(--accent --1000),
19 19
20 --hover: ( 20 --hover: (
21 --text: fn.global-color(--accent --1200), 21 --text: fn.global-color(--accent --1200),
@@ -24,7 +24,7 @@
24 24
25 --visited: ( 25 --visited: (
26 --text: fn.global-color(--purple --1000), 26 --text: fn.global-color(--purple --1000),
27 --underline: fn.global-color(--purple --700), 27 --underline: fn.global-color(--purple --1000),
28 28
29 --hover: ( 29 --hover: (
30 --text: fn.global-color(--purple --1200), 30 --text: fn.global-color(--purple --1200),
@@ -50,6 +50,7 @@
50 &:hover { 50 &:hover {
51 text-decoration: underline; 51 text-decoration: underline;
52 text-decoration-thickness: fn.dim(--hover --underline); 52 text-decoration-thickness: fn.dim(--hover --underline);
53 text-decoration-skip-ink: none;
53 } 54 }
54 55
55 @include iro.bem-at-theme('keyboard') { 56 @include iro.bem-at-theme('keyboard') {