summaryrefslogtreecommitdiffstats
path: root/src_old/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src_old/scopes')
-rw-r--r--src_old/scopes/_blockquotes.scss34
-rw-r--r--src_old/scopes/_code.scss59
-rw-r--r--src_old/scopes/_headings.scss116
-rw-r--r--src_old/scopes/_links.scss143
-rw-r--r--src_old/scopes/_lists.scss66
-rw-r--r--src_old/scopes/_tables.scss115
6 files changed, 533 insertions, 0 deletions
diff --git a/src_old/scopes/_blockquotes.scss b/src_old/scopes/_blockquotes.scss
new file mode 100644
index 0000000..f6a13fe
--- /dev/null
+++ b/src_old/scopes/_blockquotes.scss
@@ -0,0 +1,34 @@
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-bs: fn.global-dim(--paragraph --margin-bs),
9 --border: fn.global-dim(--border --thick),
10
11 --compact: (
12 --indent: fn.global-dim(--list --compact-indent),
13 ),
14 ),
15 --colors: (
16 --border: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-scope(iro.props-namespace()) {
21 blockquote {
22 margin-block: fn.dim(--margin-bs);
23 margin-inline: 1px 0;
24 padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
25 border-inline-start: fn.dim(--border) solid fn.color(--border);
26 }
27
28 @include iro.bem-modifier('compact') {
29 blockquote {
30 padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
31 }
32 }
33 }
34}
diff --git a/src_old/scopes/_code.scss b/src_old/scopes/_code.scss
new file mode 100644
index 0000000..4df711b
--- /dev/null
+++ b/src_old/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 --1200),
22 --bg: fn.global-color(--red --200),
23 ),
24 --block: (
25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--base --50),
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_old/scopes/_headings.scss b/src_old/scopes/_headings.scss
new file mode 100644
index 0000000..9593792
--- /dev/null
+++ b/src_old/scopes/_headings.scss
@@ -0,0 +1,116 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4@use 'include-media/dist/include-media' as media;
5
6@include iro.props-namespace('headings') {
7 @include iro.bem-scope(iro.props-namespace()) {
8 h1,
9 h2,
10 h3,
11 h4,
12 h5,
13 h6 {
14 @include mx.set-font(--headline);
15
16 display: block;
17 transform: translateX(-.06em);
18 letter-spacing: normal;
19 text-transform: none;
20 }
21
22
23 h1 {
24 @include mx.heading-strong(--xxl);
25 }
26
27 h2 {
28 @include mx.heading-strong(--xl);
29 }
30
31 h3 {
32 @include mx.heading-medium(--lg);
33 }
34
35 h4 {
36 @include mx.heading-medium(--md);
37 }
38
39 h5 {
40 @include mx.heading-faint(--sm);
41 }
42
43 h6 {
44 @include mx.heading-faint(--xs);
45 }
46
47 @include iro.bem-elem('highlight') {
48 background-image: linear-gradient(
49 to top,
50 transparent .15em,
51 fn.foreign-color(--heading, --bg) .15em,
52 fn.foreign-color(--heading, --bg) .6em,
53 transparent .6em
54 );
55 }
56
57 @include iro.bem-modifier('display') {
58 h1,
59 h2,
60 h3,
61 h4,
62 h5,
63 h6 {
64 @include mx.set-font(--headline);
65 }
66
67 h1 {
68 @include mx.heading-strong(--display --xxl);
69
70 @include media.media('<=md') {
71 @include mx.heading-strong(--display-sm --xxl);
72 }
73 }
74
75 h2 {
76 @include mx.heading-strong(--display --xl);
77
78 @include media.media('<=md') {
79 @include mx.heading-strong(--display-sm --xl);
80 }
81 }
82
83 h3 {
84 @include mx.heading-strong(--display --lg);
85
86 @include media.media('<=md') {
87 @include mx.heading-strong(--display-sm --lg);
88 }
89 }
90
91 h4 {
92 @include mx.heading-strong(--display --md);
93
94 @include media.media('<=md') {
95 @include mx.heading-strong(--display-sm --md);
96 }
97 }
98
99 h5 {
100 @include mx.heading-medium(--display --sm);
101
102 @include media.media('<=md') {
103 @include mx.heading-medium(--display-sm --sm);
104 }
105 }
106
107 h6 {
108 @include mx.heading-faint(--display --xs);
109
110 @include media.media('<=md') {
111 @include mx.heading-faint(--display-sm --xs);
112 }
113 }
114 }
115 }
116}
diff --git a/src_old/scopes/_links.scss b/src_old/scopes/_links.scss
new file mode 100644
index 0000000..d47c406
--- /dev/null
+++ b/src_old/scopes/_links.scss
@@ -0,0 +1,143 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$static-themes: 'black' 'white' !default;
5
6@include iro.props-namespace('links') {
7 @include iro.props-store((
8 --dims: (
9 --rounding: fn.global-dim(--rounding),
10 --underline: fn.global-dim(--border --thin),
11
12 --hover: (
13 --underline: fn.global-dim(--border --medium),
14 ),
15
16 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --border),
20 ),
21 ),
22 --colors: (
23 --underline: fn.global-color(--text-mute-more),
24
25 --colored: (
26 --text: fn.global-color(--accent --1100),
27 --underline: fn.global-color(--accent --600),
28
29 --hover: (
30 --text: fn.global-color(--accent --1300),
31 ),
32
33 --visited: (
34 --text: fn.global-color(--purple --1100),
35 --underline: fn.global-color(--purple --600),
36
37 --hover: (
38 --text: fn.global-color(--purple --1300),
39 ),
40 ),
41 ),
42
43 --key-focus: (
44 --text: fn.global-color(--focus --text),
45 --border: fn.global-color(--focus --border),
46 --outline: fn.global-color(--focus --outline),
47 ),
48 ),
49 ));
50
51 @each $theme in $static-themes {
52 @include iro.props-store((
53 --colors: (
54 --static-#{$theme}: (
55 --text: fn.global-color(--#{$theme}-transparent --800),
56 --underline: fn.global-color(--#{$theme}-transparent --500),
57
58 --hover: (
59 --text: fn.global-color(--#{$theme}-transparent --900),
60 ),
61
62 --key-focus: (
63 --text: fn.global-color(--#{$theme}-transparent --900),
64 --border: fn.global-color(--#{$theme}-transparent --900),
65 --outline: fn.global-color(--#{$theme}-transparent --300),
66 ),
67 )
68 )
69 ));
70 }
71
72 @include iro.bem-scope(iro.props-namespace()) {
73 :link,
74 :visited {
75 border-radius: fn.dim(--rounding);
76 color: currentColor;
77 text-decoration: underline;
78 text-decoration-color: fn.color(--underline);
79 text-decoration-thickness: fn.dim(--underline);
80 box-decoration-break: clone;
81
82 &:hover {
83 text-decoration: underline;
84 text-decoration-thickness: fn.dim(--hover --underline);
85 text-decoration-skip-ink: none;
86 }
87
88 &:focus-visible {
89 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
90 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
91 color: fn.color(--key-focus --text);
92 text-decoration: none;
93 }
94 }
95
96 @include iro.bem-modifier('invisible') {
97 :link,
98 :visited {
99 text-decoration: none;
100 }
101 }
102
103 @include iro.bem-modifier('colored') {
104 :link {
105 color: fn.color(--colored --text);
106 text-decoration-color: fn.color(--colored --underline);
107
108 &:hover {
109 color: fn.color(--colored --hover --text);
110 }
111 }
112
113 :visited {
114 color: fn.color(--colored --visited --text);
115 text-decoration-color: fn.color(--colored --visited --underline);
116
117 &:hover {
118 color: fn.color(--colored --visited --hover --text);
119 }
120 }
121 }
122
123 @each $theme in $static-themes {
124 @include iro.bem-modifier(static-#{$theme}) {
125 :link,
126 :visited {
127 color: fn.color(--static-#{$theme} --text);
128 text-decoration-color: fn.color(--static-#{$theme} --underline);
129
130 &:hover {
131 color: fn.color(--static-#{$theme} --hover --text);
132 }
133
134 &:focus-visible {
135 outline-color: fn.color(--static-#{$theme} --key-focus --border);
136 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
137 color: fn.color(--static-#{$theme} --key-focus --text);
138 }
139 }
140 }
141 }
142 }
143}
diff --git a/src_old/scopes/_lists.scss b/src_old/scopes/_lists.scss
new file mode 100644
index 0000000..bad9731
--- /dev/null
+++ b/src_old/scopes/_lists.scss
@@ -0,0 +1,66 @@
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-bs: fn.global-dim(--paragraph --margin-bs),
9
10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent),
12 ),
13 ),
14 --colors: (
15 --border: fn.global-color(--border-mute),
16 )
17 ));
18
19 @include iro.bem-scope(iro.props-namespace()) {
20 ul,
21 ol {
22 margin-block-start: fn.dim(--margin-bs);
23 padding-inline-start: fn.dim(--indent);
24
25 ul,
26 ol {
27 margin-block-start: 0;
28 }
29 }
30
31 ul {
32 list-style: disc;
33 }
34
35 ol {
36 list-style: decimal;
37 }
38
39 dl {
40 margin-block: fn.dim(--margin-bs) 0;
41 margin-inline: 0;
42 padding: 0;
43 }
44
45 dt {
46 color: fn.global-color(--heading);
47 font-weight: bold;
48 }
49
50 dd {
51 margin-block: 0;
52 margin-inline: fn.dim(--indent) 0;
53 }
54
55 @include iro.bem-modifier('compact') {
56 ul,
57 ol {
58 padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
59 }
60
61 dd {
62 margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
63 }
64 }
65 }
66}
diff --git a/src_old/scopes/_tables.scss b/src_old/scopes/_tables.scss
new file mode 100644
index 0000000..9b2124d
--- /dev/null
+++ b/src_old/scopes/_tables.scss
@@ -0,0 +1,115 @@
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-i: fn.foreign-dim(--table, --pad-i),
9 --pad-b: fn.foreign-dim(--table, --pad-b),
10 --rounding: fn.foreign-dim(--table, --rounding),
11 --border: fn.foreign-dim(--table, --border),
12 --margin-bs: fn.global-dim(--paragraph --margin-bs),
13 ),
14 --colors: (
15 --border: fn.foreign-color(--table, --border),
16 --heading: fn.foreign-color(--table, --heading),
17 --box: (
18 --bg: fn.foreign-color(--table, --box --bg),
19 )
20 )
21 ));
22
23 @include iro.bem-scope(iro.props-namespace()) {
24 table {
25 margin-block-start: fn.dim(--margin-bs);
26 border-spacing: 0;
27 border-collapse: separate;
28 }
29
30 th {
31 @include mx.set-font(--standard, (
32 --line-height: null,
33 --size: fn.global-dim(--font-size --50),
34 --weight: bold,
35 --transform: uppercase,
36 --spacing: .5px
37 ));
38
39 padding-block: fn.dim(--pad-b);
40 padding-inline: fn.dim(--pad-i);
41 color: fn.color(--heading);
42 text-align: start;
43 }
44
45 td {
46 padding-block: fn.dim(--pad-b);
47 padding-inline: fn.dim(--pad-i);
48 border-width: 0;
49 border-block-start-width: fn.dim(--border);
50 border-style: solid;
51 border-color: fn.color(--border);
52 }
53
54 tr {
55 &:last-child {
56 td {
57 border-block-end-width: fn.dim(--border);
58 }
59 }
60 }
61
62 @include iro.bem-modifier('flush') {
63 th,
64 td {
65 &:first-child {
66 padding-inline-start: 0;
67 }
68
69 &:last-child {
70 padding-inline-end: 0;
71 }
72 }
73 }
74
75 @include iro.bem-modifier('box') {
76 td {
77 background-color: fn.color(--box --bg);
78
79 &:first-child {
80 border-inline-start-width: fn.dim(--border);
81 }
82
83 &:last-child {
84 border-inline-end-width: fn.dim(--border);
85 }
86 }
87
88 tr {
89 &:first-child {
90 td {
91 &:first-child {
92 border-start-start-radius: fn.dim(--rounding);
93 }
94
95 &:last-child {
96 border-start-end-radius: fn.dim(--rounding);
97 }
98 }
99 }
100
101 &:last-child {
102 td {
103 &:first-child {
104 border-end-start-radius: fn.dim(--rounding);
105 }
106
107 &:last-child {
108 border-end-end-radius: fn.dim(--rounding);
109 }
110 }
111 }
112 }
113 }
114 }
115}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:28:44 +0000