summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/scopes
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquotes.scss35
-rw-r--r--src/scopes/_code.scss68
-rw-r--r--src/scopes/_links.scss75
-rw-r--r--src/scopes/_lists.scss67
-rw-r--r--src/scopes/_tables.scss114
5 files changed, 51 insertions, 308 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
deleted file mode 100644
index 5383bd7..0000000
--- a/src/scopes/_blockquotes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store((
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9
10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent),
12 ),
13 )
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --border: fn.global-color(--obj),
19 )
20 ), 'colors');
21
22 @include iro.bem-scope(iro.props-namespace()) {
23 blockquote {
24 margin: fn.dim(--margin-top) 0 0 1px;
25 padding-left: calc(fn.dim(--indent) - 3px);
26 border-left: 3px solid fn.color(--border);
27 }
28
29 @include iro.bem-modifier('compact') {
30 blockquote {
31 padding-left: calc(fn.dim(--compact --indent) - 3px);
32 }
33 }
34 }
35}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
deleted file mode 100644
index 4eb9458..0000000
--- a/src/scopes/_code.scss
+++ /dev/null
@@ -1,68 +0,0 @@
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-x: fn.global-dim(--size --50),
9 --pad-y: fn.global-dim(--size --10),
10 --rounding: 3px,
11 ),
12 --block: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 --margin-top: fn.global-dim(--paragraph --margin-top),
16 --rounding: 3px,
17 )
18 )
19 ), 'dims');
20
21 @include iro.props-store((
22 --colors: (
23 --inline: (
24 --fg: fn.global-color(--red --quiet --fg),
25 --bg: fn.global-color(--red --quiet --bg),
26 ),
27 --block: (
28 --fg: fn.global-color(--fg),
29 --bg: fn.global-color(--bg-hi2),
30 )
31 )
32 ), 'colors');
33
34 @include iro.props-store((
35 --colors: (
36 --block: (
37 --fg: fn.global-color(--fg-lo),
38 --bg: fn.global-color(--obj-hi),
39 )
40 )
41 ), 'palette-light-hi');
42
43 @include iro.bem-scope(iro.props-namespace()) {
44 code {
45 padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
46 border-radius: fn.dim(--inline --rounding);
47 background-color: fn.color(--inline --bg);
48 color: fn.color(--inline --fg);
49 }
50
51 pre {
52 margin: fn.dim(--block --margin-top) 0 0 0;
53 padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
54 border-radius: fn.dim(--block --rounding);
55 background-color: fn.color(--block --bg);
56 color: fn.color(--block --fg);
57
58 code {
59 display: inline-block;
60 margin-right: fn.dim(--block --pad-x);
61 padding: 0;
62 border-radius: 0;
63 background-color: transparent;
64 color: currentColor;
65 }
66 }
67 }
68}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 2e68952..115b199 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -3,42 +3,61 @@
3 3
4@include iro.props-namespace('links') { 4@include iro.props-namespace('links') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: (
7 --underline: fn.global-dim(--border --thin),
8
9 --hover: (
10 --underline: fn.global-dim(--border --medium),
11 )
12 ),
6 --colors: ( 13 --colors: (
7 --underline: fn.global-color(--fg-hi2), 14 --underline: fn.global-color(--text-mute-more),
8 15
9 --idle: fn.global-color(--accent --link-idle --quiet --fg), 16 --idle: (
10 --visited: fn.global-color(--accent --link-visited --quiet --fg), 17 --text: fn.global-color(--accent --1000),
11 --idle-underline: fn.global-color(--accent --link-idle --quiet --fg-hi), 18 --underline: fn.global-color(--accent --700),
12 --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi),
13 19
14 --key-focus: ( 20 --hover: (
15 --border: fn.global-color(--focus --fill), 21 --text: fn.global-color(--accent --1200),
16 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), 22 ),
17 ), 23 ),
18 )
19 ), 'colors');
20 24
21 @include iro.props-store(( 25 --visited: (
22 --colors: ( 26 --text: fn.global-color(--purple --1000),
23 --underline: fn.global-color(--fg-hi), 27 --underline: fn.global-color(--purple --700),
28
29 --hover: (
30 --text: fn.global-color(--purple --1200),
31 ),
32 ),
33
34 --focus: (
35 --bg: fn.global-color(--yellow-static --400),
36 --text: #000,
37 )
24 ) 38 )
25 ), 'colors-dark'); 39 ));
26 40
27 @include iro.bem-scope(iro.props-namespace()) { 41 @include iro.bem-scope(iro.props-namespace()) {
28 :link, 42 :link,
29 :visited { 43 :visited {
30 border-radius: .5px; 44 border-radius: .5px;
31 color: currentColor; 45 color: currentColor;
32 text-decoration: underline; 46 text-decoration: underline;
33 text-decoration-color: fn.color(--underline); 47 text-decoration-color: fn.color(--underline);
48 text-decoration-thickness: fn.dim(--underline);
34 49
35 &:hover { 50 &:hover {
36 text-decoration: underline; 51 text-decoration: underline;
52 text-decoration-thickness: fn.dim(--hover --underline);
37 } 53 }
38 54
39 @include iro.bem-at-theme('keyboard') { 55 @include iro.bem-at-theme('keyboard') {
40 &:focus { 56 &:focus {
41 box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); 57 background-color: fn.color(--focus --bg);
58 color: fn.color(--focus --text);
59 text-decoration: none;
60 border-block-end: fn.dim(--hover --underline) solid currentColor;
42 } 61 }
43 } 62 }
44 } 63 }
@@ -52,13 +71,21 @@
52 71
53 @include iro.bem-modifier('colored') { 72 @include iro.bem-modifier('colored') {
54 :link { 73 :link {
55 color: fn.color(--idle); 74 color: fn.color(--idle --text);
56 text-decoration-color: fn.color(--idle-underline); 75 text-decoration-color: fn.color(--idle --underline);
76
77 &:hover {
78 color: fn.color(--idle --hover --text);
79 }
57 } 80 }
58 81
59 :visited { 82 :visited {
60 color: fn.color(--visited); 83 color: fn.color(--visited --text);
61 text-decoration-color: fn.color(--visited-underline); 84 text-decoration-color: fn.color(--visited --underline);
85
86 &:hover {
87 color: fn.color(--visited --hover --text);
88 }
62 } 89 }
63 } 90 }
64 } 91 }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
deleted file mode 100644
index 1322f2d..0000000
--- a/src/scopes/_lists.scss
+++ /dev/null
@@ -1,67 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('lists') {
5 @include iro.props-store((
6 --dims: (
7 --indent: calc(fn.global-dim(--list --indent) + 1em),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9
10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent),
12 ),
13 )
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --border: fn.global-color(--obj-hi),
19 )
20 ), 'colors');
21
22 @include iro.bem-scope(iro.props-namespace()) {
23 ul,
24 ol {
25 margin-top: fn.dim(--margin-top);
26 padding-left: fn.dim(--indent);
27
28 ul,
29 ol {
30 margin-top: 0;
31 }
32 }
33
34 ul {
35 list-style: disc;
36 }
37
38 ol {
39 list-style: decimal;
40 }
41
42 dl {
43 margin: fn.dim(--margin-top) 0 0;
44 padding: 0;
45 }
46
47 dt {
48 color: fn.global-color(--fg-lo);
49 font-weight: bold;
50 }
51
52 dd {
53 margin: 0 0 0 fn.dim(--indent);
54 }
55
56 @include iro.bem-modifier('compact') {
57 ul,
58 ol {
59 padding-left: calc(fn.dim(--compact --indent) - 3px);
60 }
61
62 dd {
63 margin-left: calc(fn.dim(--compact --indent) - 3px);
64 }
65 }
66 }
67}
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
deleted file mode 100644
index f78e81b..0000000
--- a/src/scopes/_tables.scss
+++ /dev/null
@@ -1,114 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('tables') {
6 @include iro.props-store((
7 --dims: (
8 --pad-x: fn.global-dim(--size --175),
9 --pad-y: fn.global-dim(--size --125),
10 --rounding: 3px,
11 --margin-top: fn.global-dim(--paragraph --margin-top),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --border: fn.global-color(--obj),
18 --heading: fn.global-color(--fg-hi),
19 --box: (
20 --bg: fn.global-color(--bg-hi2),
21 )
22 )
23 ), 'colors');
24
25 @include iro.bem-scope(iro.props-namespace()) {
26 table {
27 margin-top: fn.dim(--margin-top);
28 border-spacing: 0;
29 border-collapse: separate;
30 }
31
32 th {
33 @include mx.set-font(--standard, (
34 --line-height: null,
35 --size: fn.global-dim(--font-size --50),
36 --weight: 500,
37 --transform: uppercase,
38 --spacing: .5px
39 ));
40
41 padding: fn.dim(--pad-y) fn.dim(--pad-x);
42 color: fn.color(--heading);
43 text-align: left;
44 }
45
46 td {
47 padding: fn.dim(--pad-y) fn.dim(--pad-x);
48 border-width: 1px 0 0;
49 border-style: solid;
50 border-color: fn.color(--border);
51 }
52
53 tr {
54 &:last-child {
55 td {
56 border-bottom-width: 1px;
57 }
58 }
59 }
60
61 @include iro.bem-modifier('flush') {
62 th,
63 td {
64 &:first-child {
65 padding-left: 0;
66 }
67
68 &:last-child {
69 padding-right: 0;
70 }
71 }
72 }
73
74 @include iro.bem-modifier('box') {
75 td {
76 background-color: fn.color(--box --bg);
77
78 &:first-child {
79 border-left-width: 1px;
80 }
81
82 &:last-child {
83 border-right-width: 1px;
84 }
85 }
86
87 tr {
88 &:first-child {
89 td {
90 &:first-child {
91 border-top-left-radius: fn.dim(--rounding);
92 }
93
94 &:last-child {
95 border-top-right-radius: fn.dim(--rounding);
96 }
97 }
98 }
99
100 &:last-child {
101 td {
102 &:first-child {
103 border-bottom-left-radius: fn.dim(--rounding);
104 }
105
106 &:last-child {
107 border-bottom-right-radius: fn.dim(--rounding);
108 }
109 }
110 }
111 }
112 }
113 }
114}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 09:38:25 +0000