@kth/style 0.14.1 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/scss/tokens/typography.scss +9 -6
- package/scss/utils/prose.scss +8 -44
package/package.json
CHANGED
|
@@ -39,12 +39,18 @@ $font-bold: 600;
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
// Replaces t10 (non-fluid)
|
|
42
|
-
@mixin font-lead {
|
|
42
|
+
@mixin font-lead-l {
|
|
43
43
|
font-weight: 400;
|
|
44
44
|
font-size: 1.5rem;
|
|
45
45
|
line-height: 2.25rem;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
@mixin font-lead-m {
|
|
49
|
+
font-weight: 400;
|
|
50
|
+
font-size: 1.25rem;
|
|
51
|
+
line-height: 1.75rem;
|
|
52
|
+
}
|
|
53
|
+
|
|
48
54
|
// Replaces t11, t12 (non-fluid)
|
|
49
55
|
@mixin font-default {
|
|
50
56
|
font-weight: 400;
|
|
@@ -52,8 +58,6 @@ $font-bold: 600;
|
|
|
52
58
|
line-height: 1.5rem;
|
|
53
59
|
}
|
|
54
60
|
|
|
55
|
-
/// Do we need these?
|
|
56
|
-
///
|
|
57
61
|
// Replaces t1
|
|
58
62
|
@mixin font-heading-xl-fluid {
|
|
59
63
|
@include font-heading-l;
|
|
@@ -92,11 +96,10 @@ $font-bold: 600;
|
|
|
92
96
|
|
|
93
97
|
// Replaces t10
|
|
94
98
|
@mixin font-lead-fluid {
|
|
95
|
-
font-
|
|
96
|
-
line-height: 1.5rem;
|
|
99
|
+
@include font-lead-m;
|
|
97
100
|
|
|
98
101
|
@media (min-width: $breakpoint-fluid-typography) {
|
|
99
|
-
@include font-lead;
|
|
102
|
+
@include font-lead-l;
|
|
100
103
|
}
|
|
101
104
|
}
|
|
102
105
|
|
package/scss/utils/prose.scss
CHANGED
|
@@ -7,13 +7,20 @@
|
|
|
7
7
|
/// - CSS for tags like <p>, <h1-6>, <code>, <pre>, <ul> and <li>
|
|
8
8
|
/// - CSS classes like ".lead"
|
|
9
9
|
@mixin prose {
|
|
10
|
+
code:not(pre *) {
|
|
11
|
+
font-size: 0.9rem;
|
|
12
|
+
background-color: var(--color-background-alt);
|
|
13
|
+
padding: s.$space-2 s.$space-4;
|
|
14
|
+
}
|
|
15
|
+
|
|
10
16
|
p {
|
|
11
17
|
margin-block: s.$space-20;
|
|
18
|
+
// TODO: change this to `rem` and tokenize
|
|
12
19
|
max-width: 60ch;
|
|
13
20
|
}
|
|
14
21
|
|
|
15
22
|
.lead {
|
|
16
|
-
@include t.font-lead;
|
|
23
|
+
@include t.font-lead-fluid;
|
|
17
24
|
margin-block-start: s.$space-12;
|
|
18
25
|
margin-block-end: s.$space-16;
|
|
19
26
|
}
|
|
@@ -71,47 +78,4 @@
|
|
|
71
78
|
padding-block: s.$space-16;
|
|
72
79
|
padding-inline: s.$space-24;
|
|
73
80
|
}
|
|
74
|
-
|
|
75
|
-
table {
|
|
76
|
-
@include s.theme-dense;
|
|
77
|
-
table-layout: auto;
|
|
78
|
-
text-align: left;
|
|
79
|
-
margin-block: s.$space-32;
|
|
80
|
-
border-collapse: collapse;
|
|
81
|
-
overflow-x: auto;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
thead {
|
|
85
|
-
// TODO: border
|
|
86
|
-
th {
|
|
87
|
-
@include t.font-heading-xs;
|
|
88
|
-
padding-block: var(--space-inner-block);
|
|
89
|
-
padding-inline: var(--space-inner-inline);
|
|
90
|
-
|
|
91
|
-
&:first-child {
|
|
92
|
-
padding-inline-start: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&:last-child {
|
|
96
|
-
padding-inline-end: 0;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
tbody {
|
|
102
|
-
// TODO: border
|
|
103
|
-
|
|
104
|
-
td {
|
|
105
|
-
padding-block: var(--space-inner-block);
|
|
106
|
-
padding-inline: var(--space-inner-inline);
|
|
107
|
-
|
|
108
|
-
&:first-child {
|
|
109
|
-
padding-inline-start: 0;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
&:last-child {
|
|
113
|
-
padding-inline-end: 0;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
81
|
}
|