@graupl/graupl 1.0.0-alpha.5 → 1.0.0-alpha.6
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/CHANGELOG.md +24 -0
- package/dist/base/form/form.css +1 -1
- package/dist/base/form/form.css.map +1 -1
- package/dist/base/link/link.css.map +1 -1
- package/dist/component/button/button.css +1 -1
- package/dist/component/button/button.css.map +1 -1
- package/dist/graupl.css +1 -1
- package/dist/graupl.css.map +1 -1
- package/dist/layout/columns/columns.css +1 -1
- package/dist/layout/columns/columns.css.map +1 -1
- package/dist/layout/container/container.css +1 -1
- package/dist/layout/container/container.css.map +1 -1
- package/dist/state/focus/focus.css.map +1 -1
- package/dist/theme/color/color.css +2 -0
- package/dist/theme/color/color.css.map +1 -0
- package/dist/theme/typography/typography.css +2 -0
- package/dist/theme/typography/typography.css.map +1 -0
- package/dist/utilities/colors/colors.css.map +1 -1
- package/dist/utilities/spacing/spacing.css +2 -0
- package/dist/utilities/spacing/spacing.css.map +1 -0
- package/dist/utilities/typography/typography.css +2 -0
- package/dist/utilities/typography/typography.css.map +1 -0
- package/package.json +3 -3
- package/scss/_defaults.scss +14 -9
- package/scss/_variables.scss +10 -20
- package/scss/base/form/_variables.scss +5 -4
- package/scss/component/button/_index.scss +2 -2
- package/scss/component/button/_variables.scss +4 -3
- package/scss/functions/_theme.scss +2 -2
- package/scss/layout/columns/_index.scss +2 -5
- package/scss/layout/columns/_variables.scss +18 -4
- package/scss/layout/container/_variables.scss +2 -1
- package/scss/theme/_index.scss +3 -43
- package/scss/theme/{_defaults.scss → color/_defaults.scss} +0 -13
- package/scss/theme/color/_index.scss +42 -0
- package/scss/theme/{_variables.scss → color/_variables.scss} +5 -15
- package/scss/theme/color/color.scss +3 -0
- package/scss/theme/typography/_defaults.scss +41 -0
- package/scss/theme/typography/_index.scss +111 -0
- package/scss/theme/typography/_variables.scss +224 -0
- package/scss/theme/typography/typography.scss +3 -0
- package/scss/utilities/_index.scss +2 -0
- package/scss/utilities/colors/_index.scss +2 -2
- package/scss/utilities/spacing/_defaults.scss +25 -0
- package/scss/utilities/spacing/_index.scss +64 -0
- package/scss/utilities/spacing/_variables.scss +3 -0
- package/scss/utilities/spacing/spacing.scss +3 -0
- package/scss/utilities/typography/_defaults.scss +5 -0
- package/scss/utilities/typography/_index.scss +92 -0
- package/scss/utilities/typography/_variables.scss +3 -0
- package/scss/utilities/typography/typography.scss +3 -0
- package/dist/theme/theme.css +0 -2
- package/dist/theme/theme.css.map +0 -1
- package/scss/theme/theme.scss +0 -3
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
// Typography theme styles.
|
|
2
|
+
|
|
3
|
+
@use "variables" as *;
|
|
4
|
+
@use "../../mixins/layer" as *;
|
|
5
|
+
@use "sass:map";
|
|
6
|
+
|
|
7
|
+
@include layer(base) {
|
|
8
|
+
p {
|
|
9
|
+
margin: $paragraph-margin;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
small {
|
|
13
|
+
margin: $small-margin;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h1 {
|
|
17
|
+
margin: $h1-margin;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h2 {
|
|
21
|
+
margin: $h2-margin;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h3 {
|
|
25
|
+
margin: $h3-margin;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h4 {
|
|
29
|
+
margin: $h4-margin;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h5 {
|
|
33
|
+
margin: $h5-margin;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h6 {
|
|
37
|
+
margin: $h6-margin;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@include layer(theme) {
|
|
42
|
+
:root {
|
|
43
|
+
font-family: $root-font-family;
|
|
44
|
+
font-size: $root-font-size;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
b,
|
|
48
|
+
strong {
|
|
49
|
+
font-weight: $bold-font-weight;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
body {
|
|
53
|
+
font-size: $body-font-size;
|
|
54
|
+
font-weight: $body-font-weight;
|
|
55
|
+
line-height: $body-line-height;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
p {
|
|
59
|
+
font-size: $paragraph-font-size;
|
|
60
|
+
font-weight: $paragraph-font-weight;
|
|
61
|
+
line-height: $paragraph-line-height;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
small {
|
|
65
|
+
font-size: $small-font-size;
|
|
66
|
+
font-weight: $small-font-weight;
|
|
67
|
+
line-height: $small-line-height;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
h1 {
|
|
71
|
+
font-family: $h1-font-family;
|
|
72
|
+
font-size: $h1-font-size;
|
|
73
|
+
font-weight: $h1-font-weight;
|
|
74
|
+
line-height: $h1-line-height;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
h2 {
|
|
78
|
+
font-family: $h2-font-family;
|
|
79
|
+
font-size: $h2-font-size;
|
|
80
|
+
font-weight: $h2-font-weight;
|
|
81
|
+
line-height: $h2-line-height;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
h3 {
|
|
85
|
+
font-family: $h3-font-family;
|
|
86
|
+
font-size: $h3-font-size;
|
|
87
|
+
font-weight: $h3-font-weight;
|
|
88
|
+
line-height: $h3-line-height;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
h4 {
|
|
92
|
+
font-family: $h4-font-family;
|
|
93
|
+
font-size: $h4-font-size;
|
|
94
|
+
font-weight: $h4-font-weight;
|
|
95
|
+
line-height: $h4-line-height;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
h5 {
|
|
99
|
+
font-family: $h5-font-family;
|
|
100
|
+
font-size: $h5-font-size;
|
|
101
|
+
font-weight: $h5-font-weight;
|
|
102
|
+
line-height: $h5-line-height;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
h6 {
|
|
106
|
+
font-family: $h6-font-family;
|
|
107
|
+
font-size: $h6-font-size;
|
|
108
|
+
font-weight: $h6-font-weight;
|
|
109
|
+
line-height: $h6-line-height;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
// Variables referencing custom properties.
|
|
2
|
+
|
|
3
|
+
@use "defaults";
|
|
4
|
+
@use "../../defaults" as root-defaults;
|
|
5
|
+
@use "../../variables" as root-variables;
|
|
6
|
+
@use "sass:map";
|
|
7
|
+
|
|
8
|
+
// Font properties.
|
|
9
|
+
$font-size: var(--#{root-defaults.$prefix}-font-base, #{defaults.$font-size});
|
|
10
|
+
$line-height: var(
|
|
11
|
+
--#{root-defaults.$prefix}-line-height,
|
|
12
|
+
#{defaults.$line-height}
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
// Generate all of the font-size-x custom properties.
|
|
16
|
+
$font-sizes: ();
|
|
17
|
+
|
|
18
|
+
@each $key, $value in defaults.$font-size-multipliers {
|
|
19
|
+
$size: var(
|
|
20
|
+
--#{root-defaults.$prefix}-font-#{$key},
|
|
21
|
+
calc(#{$value} * #{$font-size})
|
|
22
|
+
);
|
|
23
|
+
$font-sizes: map.set($font-sizes, $key, $size);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
$font-weights: ();
|
|
27
|
+
|
|
28
|
+
@each $key, $value in defaults.$font-weights {
|
|
29
|
+
$weight: var(--#{root-defaults.$prefix}-font-weight-#{$key}, $value);
|
|
30
|
+
$font-weights: map.set($font-weights, $key, $weight);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
$bold-font-weight: var(
|
|
34
|
+
--#{root-defaults.$prefix}-font-weight-bold,
|
|
35
|
+
#{map.get($font-weights, bold)}
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
// Root properties.
|
|
39
|
+
$root-font-family: var(
|
|
40
|
+
--#{root-defaults.$prefix}-root-font-family,
|
|
41
|
+
#{defaults.$root-font-family}
|
|
42
|
+
);
|
|
43
|
+
$root-font-size: var(
|
|
44
|
+
--#{root-defaults.$prefix}-root-font-size,
|
|
45
|
+
#{defaults.$root-font-size}
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
// Typography properties.
|
|
49
|
+
$body-font-size: var(
|
|
50
|
+
--#{root-defaults.$prefix}-body-font-size,
|
|
51
|
+
#{map.get($font-sizes, base)}
|
|
52
|
+
);
|
|
53
|
+
$body-line-height: var(
|
|
54
|
+
--#{root-defaults.$prefix}-body-line-height,
|
|
55
|
+
#{$line-height}
|
|
56
|
+
);
|
|
57
|
+
$body-font-weight: var(
|
|
58
|
+
--#{root-defaults.$prefix}-body-font-weight,
|
|
59
|
+
#{map.get($font-weights, normal)}
|
|
60
|
+
);
|
|
61
|
+
$paragraph-font-size: var(
|
|
62
|
+
--#{root-defaults.$prefix}-paragraph-font-size,
|
|
63
|
+
#{$body-font-size}
|
|
64
|
+
);
|
|
65
|
+
$paragraph-line-height: var(
|
|
66
|
+
--#{root-defaults.$prefix}-paragraph-line-height,
|
|
67
|
+
#{$body-line-height}
|
|
68
|
+
);
|
|
69
|
+
$paragraph-margin: var(
|
|
70
|
+
--#{root-defaults.$prefix}-paragraph-margin,
|
|
71
|
+
0 0 #{map.get(root-variables.$spacers, 2)} 0
|
|
72
|
+
);
|
|
73
|
+
$paragraph-font-weight: var(
|
|
74
|
+
--#{root-defaults.$prefix}-paragraph-font-weight,
|
|
75
|
+
#{$body-font-weight}
|
|
76
|
+
);
|
|
77
|
+
$small-font-size: var(
|
|
78
|
+
--#{root-defaults.$prefix}-small-font-size,
|
|
79
|
+
#{map.get($font-sizes, small)}
|
|
80
|
+
);
|
|
81
|
+
$small-line-height: var(
|
|
82
|
+
--#{root-defaults.$prefix}-small-line-height,
|
|
83
|
+
#{$line-height}
|
|
84
|
+
);
|
|
85
|
+
$small-margin: var(
|
|
86
|
+
--#{root-defaults.$prefix}-small-margin,
|
|
87
|
+
0 0 #{map.get(root-variables.$spacers, 2)} 0
|
|
88
|
+
);
|
|
89
|
+
$small-font-weight: var(
|
|
90
|
+
--#{root-defaults.$prefix}-small-font-weight,
|
|
91
|
+
#{$body-font-weight}
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
// Headings properties.
|
|
95
|
+
$heading-font-family: var(
|
|
96
|
+
--#{root-defaults.$prefix}-heading-font-family,
|
|
97
|
+
$root-font-family
|
|
98
|
+
);
|
|
99
|
+
$heading-line-height: var(
|
|
100
|
+
--#{root-defaults.$prefix}-heading-line-height,
|
|
101
|
+
#{$line-height}
|
|
102
|
+
);
|
|
103
|
+
$heading-margin: var(
|
|
104
|
+
--#{root-defaults.$prefix}-heading-margin,
|
|
105
|
+
0 0 #{map.get(root-variables.$spacers, 2)} 0
|
|
106
|
+
);
|
|
107
|
+
$heading-font-weight: var(
|
|
108
|
+
--#{root-defaults.$prefix}-heading-font-weight,
|
|
109
|
+
#{$bold-font-weight}
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
// H1 properties.
|
|
113
|
+
$h1-font-size: var(
|
|
114
|
+
--#{root-defaults.$prefix}-h1-font-size,
|
|
115
|
+
#{map.get($font-sizes, 5xl)}
|
|
116
|
+
);
|
|
117
|
+
$h1-line-height: var(
|
|
118
|
+
--#{root-defaults.$prefix}-h1-line-height,
|
|
119
|
+
#{$heading-line-height}
|
|
120
|
+
);
|
|
121
|
+
$h1-margin: var(--#{root-defaults.$prefix}-h1-margin, #{$heading-margin});
|
|
122
|
+
$h1-font-family: var(
|
|
123
|
+
--#{root-defaults.$prefix}-h1-font-family,
|
|
124
|
+
$heading-font-family
|
|
125
|
+
);
|
|
126
|
+
$h1-font-weight: var(
|
|
127
|
+
--#{root-defaults.$prefix}-h1-font-weight,
|
|
128
|
+
$heading-font-weight
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
// H2 properties.
|
|
132
|
+
$h2-font-size: var(
|
|
133
|
+
--#{root-defaults.$prefix}-h2-font-size,
|
|
134
|
+
#{map.get($font-sizes, 4xl)}
|
|
135
|
+
);
|
|
136
|
+
$h2-line-height: var(
|
|
137
|
+
--#{root-defaults.$prefix}-h2-line-height,
|
|
138
|
+
#{$heading-line-height}
|
|
139
|
+
);
|
|
140
|
+
$h2-margin: var(--#{root-defaults.$prefix}-h2-margin, #{$heading-margin});
|
|
141
|
+
$h2-font-family: var(
|
|
142
|
+
--#{root-defaults.$prefix}-h2-font-family,
|
|
143
|
+
$heading-font-family
|
|
144
|
+
);
|
|
145
|
+
$h2-font-weight: var(
|
|
146
|
+
--#{root-defaults.$prefix}-h2-font-weight,
|
|
147
|
+
$heading-font-weight
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
// H3 properties.
|
|
151
|
+
$h3-font-size: var(
|
|
152
|
+
--#{root-defaults.$prefix}-h3-font-size,
|
|
153
|
+
#{map.get($font-sizes, 3xl)}
|
|
154
|
+
);
|
|
155
|
+
$h3-line-height: var(
|
|
156
|
+
--#{root-defaults.$prefix}-h3-line-height,
|
|
157
|
+
#{$heading-line-height}
|
|
158
|
+
);
|
|
159
|
+
$h3-margin: var(--#{root-defaults.$prefix}-h3-margin, #{$heading-margin});
|
|
160
|
+
$h3-font-family: var(
|
|
161
|
+
--#{root-defaults.$prefix}-h3-font-family,
|
|
162
|
+
$heading-font-family
|
|
163
|
+
);
|
|
164
|
+
$h3-font-weight: var(
|
|
165
|
+
--#{root-defaults.$prefix}-h3-font-weight,
|
|
166
|
+
$heading-font-weight
|
|
167
|
+
);
|
|
168
|
+
|
|
169
|
+
// H4 properties.
|
|
170
|
+
$h4-font-size: var(
|
|
171
|
+
--#{root-defaults.$prefix}-h4-font-size,
|
|
172
|
+
#{map.get($font-sizes, 2xl)}
|
|
173
|
+
);
|
|
174
|
+
$h4-line-height: var(
|
|
175
|
+
--#{root-defaults.$prefix}-h4-line-height,
|
|
176
|
+
#{$heading-line-height}
|
|
177
|
+
);
|
|
178
|
+
$h4-margin: var(--#{root-defaults.$prefix}-h4-margin, #{$heading-margin});
|
|
179
|
+
$h4-font-family: var(
|
|
180
|
+
--#{root-defaults.$prefix}-h4-font-family,
|
|
181
|
+
$heading-font-family
|
|
182
|
+
);
|
|
183
|
+
$h4-font-weight: var(
|
|
184
|
+
--#{root-defaults.$prefix}-h4-font-weight,
|
|
185
|
+
$heading-font-weight
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
// H5 properties.
|
|
189
|
+
$h5-font-size: var(
|
|
190
|
+
--#{root-defaults.$prefix}-h5-font-size,
|
|
191
|
+
#{map.get($font-sizes, xl)}
|
|
192
|
+
);
|
|
193
|
+
$h5-line-height: var(
|
|
194
|
+
--#{root-defaults.$prefix}-h5-line-height,
|
|
195
|
+
#{$heading-line-height}
|
|
196
|
+
);
|
|
197
|
+
$h5-margin: var(--#{root-defaults.$prefix}-h5-margin, #{$heading-margin});
|
|
198
|
+
$h5-font-family: var(
|
|
199
|
+
--#{root-defaults.$prefix}-h5-font-family,
|
|
200
|
+
$heading-font-family
|
|
201
|
+
);
|
|
202
|
+
$h5-font-weight: var(
|
|
203
|
+
--#{root-defaults.$prefix}-h5-font-weight,
|
|
204
|
+
$heading-font-weight
|
|
205
|
+
);
|
|
206
|
+
|
|
207
|
+
// H6 properties.
|
|
208
|
+
$h6-font-size: var(
|
|
209
|
+
--#{root-defaults.$prefix}-h6-font-size,
|
|
210
|
+
#{map.get($font-sizes, lg)}
|
|
211
|
+
);
|
|
212
|
+
$h6-line-height: var(
|
|
213
|
+
--#{root-defaults.$prefix}-h6-line-height,
|
|
214
|
+
#{$heading-line-height}
|
|
215
|
+
);
|
|
216
|
+
$h6-margin: var(--#{root-defaults.$prefix}-h6-margin, #{$heading-margin});
|
|
217
|
+
$h6-font-family: var(
|
|
218
|
+
--#{root-defaults.$prefix}-h6-font-family,
|
|
219
|
+
$heading-font-family
|
|
220
|
+
);
|
|
221
|
+
$h6-font-weight: var(
|
|
222
|
+
--#{root-defaults.$prefix}-h6-font-weight,
|
|
223
|
+
$heading-font-weight
|
|
224
|
+
);
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
@use "variables" as *;
|
|
4
4
|
@use "../../mixins/layer" as *;
|
|
5
5
|
@use "../../functions/important";
|
|
6
|
-
@use "../../theme/variables" as
|
|
6
|
+
@use "../../theme/color/variables" as color;
|
|
7
7
|
|
|
8
8
|
@include layer(utilities) {
|
|
9
|
-
@each $color, $map in
|
|
9
|
+
@each $color, $map in color.$theme-active {
|
|
10
10
|
@each $shade, $value in $map {
|
|
11
11
|
$name: #{$color}-#{$shade};
|
|
12
12
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Default values for Graupl.
|
|
2
|
+
//
|
|
3
|
+
// Generally, these should not be used directly when styling components.
|
|
4
|
+
// They are mainly used to provide default fallbacks for custom properties
|
|
5
|
+
// which can be found in the `variables.scss` file.
|
|
6
|
+
|
|
7
|
+
$spacing-properties: (
|
|
8
|
+
g: gap,
|
|
9
|
+
rg: row-gap,
|
|
10
|
+
cg: column-gap,
|
|
11
|
+
p: padding,
|
|
12
|
+
pt: padding-top,
|
|
13
|
+
pr: padding-right,
|
|
14
|
+
pb: padding-bottom,
|
|
15
|
+
pl: padding-left,
|
|
16
|
+
px: padding-left padding-right,
|
|
17
|
+
py: padding-top padding-bottom,
|
|
18
|
+
m: margin,
|
|
19
|
+
mt: margin-top,
|
|
20
|
+
mr: margin-right,
|
|
21
|
+
mb: margin-bottom,
|
|
22
|
+
ml: margin-left,
|
|
23
|
+
mx: margin-left margin-right,
|
|
24
|
+
my: margin-top margin-bottom,
|
|
25
|
+
) !default;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// Graupl spacing utilities.
|
|
2
|
+
|
|
3
|
+
@use "variables" as *;
|
|
4
|
+
@use "defaults" as defaults;
|
|
5
|
+
@use "../../mixins/layer" as *;
|
|
6
|
+
@use "../../functions/important";
|
|
7
|
+
@use "../../variables" as root-variables;
|
|
8
|
+
@use "../../defaults" as root-defaults;
|
|
9
|
+
|
|
10
|
+
@include layer(utilities) {
|
|
11
|
+
// For each spacing property, create a utility class.
|
|
12
|
+
@each $name, $property in defaults.$spacing-properties {
|
|
13
|
+
@each $key, $value in root-variables.$spacers {
|
|
14
|
+
.#{$name}-#{$key} {
|
|
15
|
+
// If we're dealing with gap, column-gap, or row-gap inside of .columns, we should update
|
|
16
|
+
// the columns-column-gap property instead of the raw property.
|
|
17
|
+
@if $name == "g" {
|
|
18
|
+
&.columns {
|
|
19
|
+
--#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
|
|
20
|
+
$value
|
|
21
|
+
)};
|
|
22
|
+
--#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
|
|
23
|
+
$value
|
|
24
|
+
)};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:not(.columns) {
|
|
28
|
+
@each $prop in $property {
|
|
29
|
+
#{$prop}: important.insert($value);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
} @else if $name == "cg" {
|
|
33
|
+
&.columns {
|
|
34
|
+
--#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
|
|
35
|
+
$value
|
|
36
|
+
)};
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:not(.columns) {
|
|
40
|
+
@each $prop in $property {
|
|
41
|
+
#{$prop}: important.insert($value);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
} @else if $name == "rg" {
|
|
45
|
+
&.columns {
|
|
46
|
+
--#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
|
|
47
|
+
$value
|
|
48
|
+
)};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:not(.columns) {
|
|
52
|
+
@each $prop in $property {
|
|
53
|
+
#{$prop}: important.insert($value);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
} @else {
|
|
57
|
+
@each $prop in $property {
|
|
58
|
+
#{$prop}: important.insert($value);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// Graupl typography utilities.
|
|
2
|
+
|
|
3
|
+
@use "variables" as *;
|
|
4
|
+
@use "../../mixins/layer" as *;
|
|
5
|
+
@use "../../functions/important";
|
|
6
|
+
@use "../../theme/typography/variables" as typography;
|
|
7
|
+
|
|
8
|
+
@include layer(utilities) {
|
|
9
|
+
@each $size, $value in typography.$font-sizes {
|
|
10
|
+
.text-#{$size} {
|
|
11
|
+
font-size: important.insert($value);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.text-paragraph {
|
|
16
|
+
margin: important.insert(typography.$paragraph-margin);
|
|
17
|
+
font-size: important.insert(typography.$paragraph-font-size);
|
|
18
|
+
font-weight: important.insert(typography.$paragraph-font-weight);
|
|
19
|
+
line-height: important.insert(typography.$paragraph-line-height);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.text-small {
|
|
23
|
+
margin: important.insert(typography.$small-margin);
|
|
24
|
+
font-size: important.insert(typography.$small-font-size);
|
|
25
|
+
font-weight: important.insert(typography.$small-font-weight);
|
|
26
|
+
line-height: important.insert(typography.$small-line-height);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text-h1 {
|
|
30
|
+
margin: important.insert(typography.$h1-margin);
|
|
31
|
+
font-family: important.insert(typography.$h1-font-family);
|
|
32
|
+
font-size: important.insert(typography.$h1-font-size);
|
|
33
|
+
font-weight: important.insert(typography.$h1-font-weight);
|
|
34
|
+
line-height: important.insert(typography.$h1-line-height);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.text-h2 {
|
|
38
|
+
margin: important.insert(typography.$h2-margin);
|
|
39
|
+
font-family: important.insert(typography.$h2-font-family);
|
|
40
|
+
font-size: important.insert(typography.$h2-font-size);
|
|
41
|
+
font-weight: important.insert(typography.$h2-font-weight);
|
|
42
|
+
line-height: important.insert(typography.$h2-line-height);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.text-h3 {
|
|
46
|
+
margin: important.insert(typography.$h3-margin);
|
|
47
|
+
font-family: important.insert(typography.$h3-font-family);
|
|
48
|
+
font-size: important.insert(typography.$h3-font-size);
|
|
49
|
+
font-weight: important.insert(typography.$h3-font-weight);
|
|
50
|
+
line-height: important.insert(typography.$h3-line-height);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text-h4 {
|
|
54
|
+
margin: important.insert(typography.$h4-margin);
|
|
55
|
+
font-family: important.insert(typography.$h4-font-family);
|
|
56
|
+
font-size: important.insert(typography.$h4-font-size);
|
|
57
|
+
font-weight: important.insert(typography.$h4-font-weight);
|
|
58
|
+
line-height: important.insert(typography.$h4-line-height);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.text-h5 {
|
|
62
|
+
margin: important.insert(typography.$h5-margin);
|
|
63
|
+
font-family: important.insert(typography.$h5-font-family);
|
|
64
|
+
font-size: important.insert(typography.$h5-font-size);
|
|
65
|
+
font-weight: important.insert(typography.$h5-font-weight);
|
|
66
|
+
line-height: important.insert(typography.$h5-line-height);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.text-h6 {
|
|
70
|
+
margin: important.insert(typography.$h6-margin);
|
|
71
|
+
font-family: important.insert(typography.$h6-font-family);
|
|
72
|
+
font-size: important.insert(typography.$h6-font-size);
|
|
73
|
+
font-weight: important.insert(typography.$h6-font-weight);
|
|
74
|
+
line-height: important.insert(typography.$h6-line-height);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Font weight utilities.
|
|
78
|
+
@each $size, $value in typography.$font-weights {
|
|
79
|
+
.font-#{$size} {
|
|
80
|
+
font-weight: important.insert($value);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Font style utilities.
|
|
85
|
+
.font-italic {
|
|
86
|
+
font-style: important.insert(italic);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.font-not-italic {
|
|
90
|
+
font-style: important.insert(normal);
|
|
91
|
+
}
|
|
92
|
+
}
|
package/dist/theme/theme.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
@layer graupl.theme{:root{background:var(--graupl-global-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-global-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-global-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-global-font-size,clamp(.85rem,.8rem + .5vw,1.25rem));--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412))}.dark-mode{--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}.light-mode{--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}}
|
|
2
|
-
/*# sourceMappingURL=theme.css.map */
|
package/dist/theme/theme.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI,oBCAF,MACE,8JCqHgB,CDpHhB,yJCgHgB,CD/GhB,uICqGiB,CDpGjB,2ECwGe,CDpGX,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHEiBN,CFXA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBEkCF,CF9BA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBEqDF,CACF","file":"theme.css"}
|
package/scss/theme/theme.scss
DELETED