claritas-web-framework 6.2.72 → 6.3.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/.stylelintrc.json +6 -8
- package/dist/index.css +1 -1
- package/dist/index.html +1 -1
- package/dist/index.js +0 -1
- package/index.html +37 -30
- package/index.js +0 -7
- package/package.json +15 -20
- package/sass/_functions.scss +18 -6
- package/sass/_mixins.scss +0 -2
- package/sass/_reboot.scss +46 -62
- package/sass/_root.scss +35 -21
- package/sass/_variables.scss +59 -301
- package/sass/helpers/_grid.scss +2 -3
- package/sass/mixins/_borderRadius.scss +2 -1
- package/sass/mixins/_boxShadow.scss +2 -2
- package/sass/mixins/_breakpoints.scss +5 -1
- package/sass/mixins/_button.scss +193 -64
- package/sass/mixins/_colors.scss +18 -9
- package/sass/mixins/_colors.temp.scss +88 -0
- package/sass/mixins/_gradient.scss +0 -1
- package/sass/mixins/_grid.scss +13 -14
- package/sass/mixins/_group.scss +1 -1
- package/sass/mixins/_list.scss +1 -1
- package/sass/mixins/_pill.scss +1 -1
- package/sass/mixins/_rfs.scss +5 -4
- package/sass/mixins/_tag.scss +46 -24
- package/sass/mixins/_transition.scss +2 -2
- package/sass/modules/_alert.scss +37 -13
- package/sass/modules/_button.old.scss +214 -0
- package/sass/modules/_button.scss +151 -161
- package/sass/modules/_card.scss +1 -2
- package/sass/modules/_close.scss +21 -22
- package/sass/modules/_details.scss +1 -1
- package/sass/modules/_dialog.scss +0 -1
- package/sass/modules/_dropdown.scss +0 -1
- package/sass/modules/_form.scss +1 -2
- package/sass/modules/_list.scss +2 -3
- package/sass/modules/_loader.scss +3 -0
- package/sass/modules/_modal.scss +0 -1
- package/sass/modules/_nav.scss +1 -2
- package/sass/modules/_pill.scss +45 -30
- package/sass/modules/_tabs.scss +2 -3
- package/sass/modules/_tag.scss +48 -36
- package/sass/modules/_tile.scss +1 -2
- package/sass/modules/_tooltip.scss +0 -1
- package/sass/modules/form/_checkbox.scss +0 -1
- package/sass/modules/form/_file.scss +0 -1
- package/sass/modules/form/_output.scss +0 -1
- package/sass/modules/form/_progress.scss +0 -1
- package/sass/modules/form/_radio.scss +0 -1
- package/sass/modules/form/_range.scss +0 -1
- package/sass/modules/form/_text.scss +0 -1
- package/sass/modules/form/_toggle.scss +0 -1
- package/sass/utilities/_align.scss +0 -1
- package/sass/utilities/_border.scss +31 -14
- package/sass/utilities/_colors.scss +6 -6
- package/sass/utilities/_display.scss +0 -1
- package/sass/utilities/_flex.scss +0 -1
- package/sass/utilities/_float.scss +0 -1
- package/sass/utilities/_order.scss +0 -1
- package/sass/utilities/_overflow.scss +0 -1
- package/sass/utilities/_pointerEvents.scss +0 -1
- package/sass/utilities/_position.scss +0 -1
- package/sass/utilities/_size.scss +0 -1
- package/sass/utilities/_spacing.scss +0 -1
- package/sass/utilities/_typography.scss +0 -1
- package/sass/utilities/_visibility.scss +0 -1
- package/sass/utilities/_zIndex.scss +0 -1
- package/.eslintrc.js +0 -21
- package/sass/mixins/_alert.scss +0 -31
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="alert"><h1>Hello</h1></div><div class="
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="alert alert--success"><h1>Hello</h1><a href="/">Click me</a></div><div class="buttons buttons--grouped"><button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button> <button type="button" class="button button--purple button--large">Click me!</button></div><div><span class="pill">99</span> <span class="pill pill--danger">99</span></div><div><span class="tag">foobar</span> <span class="tag tag--danger">foobar</span> <span class="foo">foobar</span> <span class="tag tag--light">foobar</span> <span class="tag tag--warning">foobar</span> <span class="tag tag--success">foobar</span> <span class="tag tag--primary">foobar</span> <span class="tag tag--cyan">foobar</span> <span class="tag tag--info">foobar</span> <span class="tag tag--purple">foobar</span></div><div class="switches switches--grouped flex--equal-columns"><input class="button--switch" type="radio" id="appointmenttype-1" name="appointmenttype-switch" value="1" checked="checked"/> <label class="button button--primary flex-grow--1" for="appointmenttype-1"><span class="display--none display--tablet-initial">Phone</span></label> <input class="button--switch" type="radio" id="appointmenttype-2" name="appointmenttype-switch" value="1"/> <label class="button button--primary flex-grow--1" for="appointmenttype-2"><span class="display--none display--tablet-initial">Phone</span></label></div></div></body></html>
|
package/dist/index.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(()=>{"use strict";window.openModal=async function(){document.querySelector("body").style.position="fixed",document.querySelector("dialog").showModal()}})();
|
package/index.html
CHANGED
|
@@ -9,49 +9,56 @@
|
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
11
|
<div class="container padding-y--5">
|
|
12
|
-
<div class="alert">
|
|
12
|
+
<div class="alert alert--success">
|
|
13
13
|
<h1>Hello</h1>
|
|
14
|
+
<a href="/">Click me</a>
|
|
14
15
|
</div>
|
|
16
|
+
<div class="buttons buttons--grouped">
|
|
17
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
18
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
19
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
20
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
21
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
22
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
23
|
+
<button type="button" class="button button--purple button--large">Click me!</button>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div>
|
|
27
|
+
<span class="pill">99</span>
|
|
28
|
+
<span class="pill pill--danger">99</span>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div>
|
|
32
|
+
<span class="tag">foobar</span>
|
|
33
|
+
<span class="tag tag--danger">foobar</span>
|
|
34
|
+
<span class="foo">foobar</span>
|
|
35
|
+
<span class="tag tag--light">foobar</span>
|
|
36
|
+
<span class="tag tag--warning">foobar</span>
|
|
37
|
+
<span class="tag tag--success">foobar</span>
|
|
38
|
+
<span class="tag tag--primary">foobar</span>
|
|
39
|
+
<span class="tag tag--cyan">foobar</span>
|
|
40
|
+
<span class="tag tag--info">foobar</span>
|
|
41
|
+
<span class="tag tag--purple">foobar</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
15
44
|
<div class="switches switches--grouped flex--equal-columns">
|
|
16
45
|
<input
|
|
17
46
|
class="button--switch"
|
|
18
47
|
type="radio"
|
|
19
48
|
id="appointmenttype-1"
|
|
20
49
|
name="appointmenttype-switch"
|
|
21
|
-
required
|
|
22
50
|
value="1"
|
|
51
|
+
checked
|
|
23
52
|
/>
|
|
24
|
-
<label class="button button--primary flex-grow--1" for="appointmenttype-1"
|
|
25
|
-
<span>Phone</span>
|
|
53
|
+
<label class="button button--primary flex-grow--1" for="appointmenttype-1">
|
|
54
|
+
<span class="display--none display--tablet-initial"> Phone </span>
|
|
26
55
|
</label>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
name="appointmenttype-switch"
|
|
32
|
-
required
|
|
33
|
-
value="1"
|
|
34
|
-
/>
|
|
35
|
-
<label class="button button--primary flex-grow--1" for="appointmenttype-3" title="Phone">
|
|
36
|
-
<span>Phone</span>
|
|
37
|
-
</label>
|
|
38
|
-
<input
|
|
39
|
-
class="button--switch"
|
|
40
|
-
type="radio"
|
|
41
|
-
id="appointmenttype-3"
|
|
42
|
-
name="appointmenttype-switch"
|
|
43
|
-
required
|
|
44
|
-
value="1"
|
|
45
|
-
/>
|
|
46
|
-
<label class="button button--primary flex-grow--1" for="appointmenttype-3" title="Phone">
|
|
47
|
-
<span>Phone</span>
|
|
56
|
+
|
|
57
|
+
<input class="button--switch" type="radio" id="appointmenttype-2" name="appointmenttype-switch" value="1" />
|
|
58
|
+
<label class="button button--primary flex-grow--1" for="appointmenttype-2">
|
|
59
|
+
<span class="display--none display--tablet-initial"> Phone </span>
|
|
48
60
|
</label>
|
|
49
61
|
</div>
|
|
50
|
-
<div class="buttons buttons--grouped flex--equal-columns">
|
|
51
|
-
<button type="button" class="button button--primary flex-grow--1">Hello</button>
|
|
52
|
-
<button type="button" class="button button--primary flex-grow--1">Hello</button>
|
|
53
|
-
<button type="button" class="button button--primary flex-grow--1">Hello</button>
|
|
54
|
-
</div>
|
|
55
62
|
</div>
|
|
56
63
|
</body>
|
|
57
64
|
</html>
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "6.
|
|
4
|
-
"updated": "
|
|
3
|
+
"version": "6.3.1",
|
|
4
|
+
"updated": "14/03/2023",
|
|
5
5
|
"description": "The CSS framework built for Claritas front end.",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "webpack --config webpack.config.js --mode production",
|
|
9
9
|
"start": "webpack serve --config webpack.config.js --mode development",
|
|
10
|
-
"lint": "npx eslint .",
|
|
11
|
-
"lint-fix": "npx eslint . --fix",
|
|
12
10
|
"stylelint": "npx stylelint **/*.scss",
|
|
13
11
|
"stylelint-fix": "npx stylelint **/*.scss --fix",
|
|
14
12
|
"find-unused-sass-variables": "npx find-unused-sass-variables ./sass/"
|
|
@@ -21,33 +19,30 @@
|
|
|
21
19
|
"license": "UNLICENSED",
|
|
22
20
|
"devDependencies": {
|
|
23
21
|
"@alexlafroscia/postcss-color-mod-function": "^4.0.0",
|
|
24
|
-
"@babel/eslint-plugin": "^7.19.1",
|
|
25
22
|
"css-loader": "^6.7.3",
|
|
26
|
-
"cssnano": "^5.1.
|
|
27
|
-
"eslint": "^8.33.0",
|
|
28
|
-
"eslint-config-prettier": "^8.6.0",
|
|
29
|
-
"eslint-plugin-prettier": "^4.2.1",
|
|
23
|
+
"cssnano": "^5.1.15",
|
|
30
24
|
"find-unused-sass-variables": "^4.0.5",
|
|
31
25
|
"html-webpack-plugin": "^5.5.0",
|
|
32
|
-
"mini-css-extract-plugin": "^2.7.
|
|
26
|
+
"mini-css-extract-plugin": "^2.7.3",
|
|
33
27
|
"postcss": "^8.4.21",
|
|
34
28
|
"postcss-advanced-variables": "^3.0.1",
|
|
35
29
|
"postcss-import": "^15.1.0",
|
|
36
|
-
"postcss-inline-svg": "^
|
|
30
|
+
"postcss-inline-svg": "^6.0.0",
|
|
37
31
|
"postcss-loader": "^7.0.2",
|
|
38
32
|
"postcss-preset-env": "^8.0.1",
|
|
39
33
|
"postcss-scss": "^4.0.6",
|
|
40
|
-
"prettier": "^2.8.
|
|
41
|
-
"sass": "^1.
|
|
34
|
+
"prettier": "^2.8.4",
|
|
35
|
+
"sass": "^1.59.2",
|
|
42
36
|
"sass-loader": "^13.2.0",
|
|
43
|
-
"stylelint": "^
|
|
44
|
-
"stylelint-config-
|
|
45
|
-
"stylelint-config-
|
|
46
|
-
"stylelint-
|
|
47
|
-
"
|
|
48
|
-
"stylelint-scss": "^4.3.0",
|
|
49
|
-
"webpack": "^5.75.0",
|
|
37
|
+
"stylelint": "^15.2.0",
|
|
38
|
+
"stylelint-config-standard": "^30.0.1",
|
|
39
|
+
"stylelint-config-standard-scss": "^7.0.1",
|
|
40
|
+
"stylelint-scss": "^4.4.0",
|
|
41
|
+
"webpack": "^5.76.1",
|
|
50
42
|
"webpack-cli": "^5.0.1",
|
|
51
43
|
"webpack-dev-server": "^4.11.1"
|
|
44
|
+
},
|
|
45
|
+
"dependencies": {
|
|
46
|
+
"rfs": "^9.0.6"
|
|
52
47
|
}
|
|
53
48
|
}
|
package/sass/_functions.scss
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
@use "sass:math";
|
|
4
4
|
@use "sass:list";
|
|
5
5
|
@use "sass:string";
|
|
6
|
-
|
|
7
6
|
@use "./variables" as *;
|
|
8
7
|
|
|
9
8
|
// Functions
|
|
@@ -20,8 +19,9 @@
|
|
|
20
19
|
$index: string.index($string, $search);
|
|
21
20
|
|
|
22
21
|
@if $index {
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
$new: str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
|
23
|
+
|
|
24
|
+
@return (string.slice($string, 1, $index - 1) + $replace + $new);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
@return $string;
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
// Requires the use of quotes around data URIs.
|
|
32
32
|
|
|
33
33
|
@function escape-svg($string) {
|
|
34
|
-
@if
|
|
34
|
+
@if string.index($string, "data:image/svg+xml") {
|
|
35
35
|
@each $char, $encoded in $escaped-characters {
|
|
36
36
|
// Do not escape the url brackets
|
|
37
|
-
@if
|
|
37
|
+
@if string.index($string, "url(") == 1 {
|
|
38
38
|
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
|
39
39
|
} @else {
|
|
40
40
|
$string: str-replace($string, $char, $encoded);
|
|
@@ -77,6 +77,7 @@ $luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.
|
|
|
77
77
|
|
|
78
78
|
@each $color in $foregrounds {
|
|
79
79
|
$contrast-ratio: contrast-ratio($background, $color);
|
|
80
|
+
|
|
80
81
|
@if $contrast-ratio > $min-contrast-ratio {
|
|
81
82
|
@return $color;
|
|
82
83
|
} @else if $contrast-ratio > $max-ratio {
|
|
@@ -86,7 +87,6 @@ $luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.
|
|
|
86
87
|
}
|
|
87
88
|
|
|
88
89
|
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
|
89
|
-
|
|
90
90
|
@return $max-ratio-color;
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -175,8 +175,20 @@ $luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.
|
|
|
175
175
|
"em": 1em,
|
|
176
176
|
"%": 1%,
|
|
177
177
|
);
|
|
178
|
+
|
|
178
179
|
@if $dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit) {
|
|
179
180
|
$result: $result * map.get($unit-map, $dividend-unit);
|
|
180
181
|
}
|
|
182
|
+
|
|
181
183
|
@return $result;
|
|
182
184
|
}
|
|
185
|
+
|
|
186
|
+
@function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l) {
|
|
187
|
+
$color-sum: math.max(color.lightness($value), 0%);
|
|
188
|
+
|
|
189
|
+
@if ($color-sum > $threshold) {
|
|
190
|
+
@return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) / var(--#{$key}-a));
|
|
191
|
+
} @else {
|
|
192
|
+
@return hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
|
|
193
|
+
}
|
|
194
|
+
}
|
package/sass/_mixins.scss
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@forward "./mixins/alert";
|
|
2
1
|
@forward "./mixins/borderRadius";
|
|
3
2
|
@forward "./mixins/boxShadow";
|
|
4
3
|
@forward "./mixins/breakpoints";
|
|
@@ -12,7 +11,6 @@
|
|
|
12
11
|
@forward "./mixins/group";
|
|
13
12
|
@forward "./mixins/list";
|
|
14
13
|
@forward "./mixins/pill";
|
|
15
|
-
@forward "./mixins/rfs";
|
|
16
14
|
@forward "./mixins/screenReader";
|
|
17
15
|
@forward "./mixins/tag";
|
|
18
16
|
@forward "./mixins/transition";
|
package/sass/_reboot.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
+
@use "~rfs/scss" as *;
|
|
2
3
|
@use "./variables" as *;
|
|
3
4
|
@use "./mixins" as *;
|
|
4
5
|
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
// null by default, thus nothing is generated.
|
|
22
23
|
|
|
23
24
|
:root {
|
|
24
|
-
@if $font-size-root
|
|
25
|
+
@if $font-size-root {
|
|
25
26
|
@include font-size(var(--root-font-size));
|
|
26
27
|
}
|
|
27
28
|
|
|
@@ -42,6 +43,7 @@
|
|
|
42
43
|
body {
|
|
43
44
|
margin: 0; // 1
|
|
44
45
|
font-family: var(--font-family-body);
|
|
46
|
+
|
|
45
47
|
@include font-size(var(--font-size-body));
|
|
46
48
|
|
|
47
49
|
font-weight: var(--font-weight-body);
|
|
@@ -76,73 +78,48 @@ hr {
|
|
|
76
78
|
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
|
77
79
|
// margin for easier control within type scales as it avoids margin collapsing.
|
|
78
80
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
@mixin make-heading($size) {
|
|
82
|
+
--color: #{$headings-color};
|
|
83
|
+
--font-style: #{$headings-font-style};
|
|
84
|
+
--font-weight: #{$headings-font-weight};
|
|
85
|
+
--line-height: #{$headings-line-height};
|
|
86
|
+
--font-size: var(--font-size-#{$size});
|
|
87
|
+
|
|
88
|
+
@if $headings-font-family {
|
|
89
|
+
--font-family: #{$headings-font-family};
|
|
90
|
+
font-family: var(--font-family);
|
|
91
|
+
}
|
|
85
92
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
line-height: var(--#{$prefix}line-height);
|
|
93
|
+
@if $headings-font-style {
|
|
94
|
+
--font-style: #{$headings-font-style};
|
|
95
|
+
font-style: var(--font-style);
|
|
96
|
+
}
|
|
91
97
|
|
|
98
|
+
color: var(--color);
|
|
99
|
+
font-weight: var(--font-weight);
|
|
100
|
+
font-size: var(--font-size);
|
|
101
|
+
line-height: var(--line-height);
|
|
92
102
|
margin-top: 0;
|
|
93
103
|
|
|
94
104
|
@if $enable-margins {
|
|
95
|
-
margin-bottom: calc(
|
|
105
|
+
margin-bottom: calc(var(--spacer) * 0.5);
|
|
96
106
|
} @else {
|
|
97
107
|
margin-bottom: 0;
|
|
98
108
|
}
|
|
99
109
|
}
|
|
100
110
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
h2,
|
|
108
|
-
.h2 {
|
|
109
|
-
@extend %heading;
|
|
110
|
-
@include font-size($font-size-2);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
h3,
|
|
114
|
-
.h3 {
|
|
115
|
-
@extend %heading;
|
|
116
|
-
@include font-size($font-size-3);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
h4,
|
|
120
|
-
.h4 {
|
|
121
|
-
@extend %heading;
|
|
122
|
-
@include font-size($font-size-4);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
h5,
|
|
126
|
-
.h5 {
|
|
127
|
-
@extend %heading;
|
|
128
|
-
@include font-size($font-size-5);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
h6,
|
|
132
|
-
.h6 {
|
|
133
|
-
@extend %heading;
|
|
134
|
-
@include font-size($font-size-6);
|
|
111
|
+
@each $key in (1, 2, 3, 4, 5, 6) {
|
|
112
|
+
h#{$key},
|
|
113
|
+
.h#{$key} {
|
|
114
|
+
@include make-heading($key);
|
|
115
|
+
}
|
|
135
116
|
}
|
|
136
117
|
|
|
137
|
-
// Reset margins on paragraphs
|
|
138
|
-
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
|
139
|
-
// bottom margin to use `rem` units instead of `em`.
|
|
140
|
-
|
|
141
118
|
p {
|
|
142
119
|
margin-top: 0;
|
|
143
120
|
|
|
144
121
|
@if $enable-margins {
|
|
145
|
-
margin-bottom: calc(
|
|
122
|
+
margin-bottom: calc(var(--spacer) * 0.5);
|
|
146
123
|
} @else {
|
|
147
124
|
margin-bottom: 0;
|
|
148
125
|
}
|
|
@@ -166,7 +143,7 @@ address {
|
|
|
166
143
|
line-height: inherit;
|
|
167
144
|
|
|
168
145
|
@if $enable-margins {
|
|
169
|
-
margin-bottom:
|
|
146
|
+
margin-bottom: var(--spacer);
|
|
170
147
|
} @else {
|
|
171
148
|
margin-bottom: 0;
|
|
172
149
|
}
|
|
@@ -176,7 +153,7 @@ address {
|
|
|
176
153
|
|
|
177
154
|
ol,
|
|
178
155
|
ul {
|
|
179
|
-
padding-left: calc(
|
|
156
|
+
padding-left: calc(var(--spacer) * 2);
|
|
180
157
|
}
|
|
181
158
|
|
|
182
159
|
ol,
|
|
@@ -185,7 +162,7 @@ dl {
|
|
|
185
162
|
margin-top: 0;
|
|
186
163
|
|
|
187
164
|
@if $enable-margins {
|
|
188
|
-
margin-bottom:
|
|
165
|
+
margin-bottom: var(--spacer);
|
|
189
166
|
} @else {
|
|
190
167
|
margin-bottom: 0;
|
|
191
168
|
}
|
|
@@ -205,14 +182,14 @@ dt {
|
|
|
205
182
|
// 1. Undo browser default
|
|
206
183
|
|
|
207
184
|
dd {
|
|
208
|
-
margin-bottom: calc(
|
|
185
|
+
margin-bottom: calc(var(--spacer) * 0.5);
|
|
209
186
|
margin-left: 0; // 1
|
|
210
187
|
}
|
|
211
188
|
|
|
212
189
|
// Blockquote
|
|
213
190
|
|
|
214
191
|
blockquote {
|
|
215
|
-
margin: 0 0
|
|
192
|
+
margin: 0 0 var(--spacer);
|
|
216
193
|
}
|
|
217
194
|
|
|
218
195
|
// Strong
|
|
@@ -244,6 +221,7 @@ mark {
|
|
|
244
221
|
sub,
|
|
245
222
|
sup {
|
|
246
223
|
position: relative;
|
|
224
|
+
|
|
247
225
|
@include font-size($font-size-sub-sup);
|
|
248
226
|
|
|
249
227
|
line-height: 0;
|
|
@@ -259,14 +237,13 @@ sup {
|
|
|
259
237
|
}
|
|
260
238
|
|
|
261
239
|
// Links
|
|
262
|
-
|
|
263
240
|
a {
|
|
264
|
-
color: $link-color;
|
|
265
241
|
text-decoration: $link-decoration;
|
|
242
|
+
color: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / var(--primary-a));
|
|
266
243
|
|
|
267
244
|
&:hover {
|
|
268
|
-
color: $link-hover-color;
|
|
269
245
|
text-decoration: $link-hover-decoration;
|
|
246
|
+
color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - #{$link-shade-percentage}) / var(--primary-a));
|
|
270
247
|
}
|
|
271
248
|
}
|
|
272
249
|
|
|
@@ -289,6 +266,7 @@ code,
|
|
|
289
266
|
kbd,
|
|
290
267
|
samp {
|
|
291
268
|
font-family: $font-family-monospace;
|
|
269
|
+
|
|
292
270
|
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
|
|
293
271
|
}
|
|
294
272
|
|
|
@@ -312,12 +290,13 @@ pre {
|
|
|
312
290
|
display: block;
|
|
313
291
|
margin-top: 0; // 1
|
|
314
292
|
overflow: auto; // 3
|
|
293
|
+
|
|
315
294
|
@include font-size($font-size-code);
|
|
316
295
|
|
|
317
296
|
color: $pre-color;
|
|
318
297
|
|
|
319
298
|
@if $enable-margins {
|
|
320
|
-
margin-bottom:
|
|
299
|
+
margin-bottom: var(--spacer);
|
|
321
300
|
} @else {
|
|
322
301
|
margin-bottom: 0;
|
|
323
302
|
}
|
|
@@ -333,14 +312,17 @@ pre {
|
|
|
333
312
|
|
|
334
313
|
kbd {
|
|
335
314
|
padding: $kbd-padding-y $kbd-padding-x;
|
|
315
|
+
|
|
336
316
|
@include font-size($kbd-font-size);
|
|
337
317
|
|
|
338
318
|
color: $kbd-color;
|
|
339
319
|
background-color: $kbd-background;
|
|
320
|
+
|
|
340
321
|
@include border-radius($border-radius-small);
|
|
341
322
|
|
|
342
323
|
kbd {
|
|
343
324
|
padding: 0;
|
|
325
|
+
|
|
344
326
|
@include font-size(1em);
|
|
345
327
|
}
|
|
346
328
|
}
|
|
@@ -349,7 +331,7 @@ kbd {
|
|
|
349
331
|
// Apply a consistent margin strategy (matches our type styles).
|
|
350
332
|
|
|
351
333
|
figure {
|
|
352
|
-
margin: 0 0
|
|
334
|
+
margin: 0 0 var(--spacer);
|
|
353
335
|
}
|
|
354
336
|
|
|
355
337
|
// Images and content
|
|
@@ -422,6 +404,7 @@ optgroup,
|
|
|
422
404
|
textarea {
|
|
423
405
|
margin: 0; // 1
|
|
424
406
|
font-family: inherit;
|
|
407
|
+
|
|
425
408
|
@include font-size(inherit);
|
|
426
409
|
|
|
427
410
|
line-height: inherit;
|
|
@@ -518,6 +501,7 @@ legend {
|
|
|
518
501
|
width: 100%;
|
|
519
502
|
padding: 0;
|
|
520
503
|
margin-bottom: $legend-margin-bottom;
|
|
504
|
+
|
|
521
505
|
@include font-size($legend-font-size);
|
|
522
506
|
|
|
523
507
|
font-weight: $legend-font-weight;
|
package/sass/_root.scss
CHANGED
|
@@ -1,37 +1,51 @@
|
|
|
1
|
+
@use "~rfs/scss" as *;
|
|
1
2
|
@use "./variables" as *;
|
|
3
|
+
@use "./mixins/colors" as *;
|
|
2
4
|
|
|
3
5
|
:root {
|
|
4
6
|
// Colors
|
|
5
7
|
// Generate palettes for full colors, grays, and theme colors.
|
|
6
8
|
|
|
7
|
-
@each $
|
|
8
|
-
--#{$
|
|
9
|
+
@each $key, $value in $grays {
|
|
10
|
+
--#{$key}: #{$value};
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
@each $
|
|
12
|
-
--#{$
|
|
13
|
+
@each $key, $value in $all-colors {
|
|
14
|
+
--#{$key}: #{$value};
|
|
13
15
|
}
|
|
14
16
|
|
|
15
|
-
@each $
|
|
16
|
-
|
|
17
|
+
@each $key, $value in $all-colors {
|
|
18
|
+
@include define-color-variables($key, $value);
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
21
|
+
@include define-color-variables("body-color", $body-color);
|
|
22
|
+
@include define-color-variables($title: "border-color", $color: $border-color-main);
|
|
23
|
+
|
|
24
|
+
@each $key, $value in $zindexes {
|
|
25
|
+
--zindex-#{$key}: #{$value};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@each $key, $value in $font-sizes {
|
|
29
|
+
--font-size-#{$key}: #{$value};
|
|
30
|
+
// @include rfs($font-size-#{$value}, --font-size-#{$size});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
--spacer: #{$spacer};
|
|
34
|
+
--body-color: #{$body-color};
|
|
35
|
+
--body-background: #{$body-background};
|
|
36
|
+
--font-family-body: #{$font-family-base};
|
|
37
|
+
--font-size-body: #{$font-size-base};
|
|
38
|
+
--font-size-base: #{$font-size-base};
|
|
39
|
+
--font-weight-body: #{$font-weight-base};
|
|
40
|
+
--line-height-body: #{$line-height-base};
|
|
41
|
+
--body-text-align: #{$body-text-align};
|
|
42
|
+
--headings-color: #{$headings-color};
|
|
43
|
+
|
|
44
|
+
@each $key, $value in $border-radii {
|
|
45
|
+
--border-radius-#{$key}: #{$value};
|
|
46
|
+
}
|
|
33
47
|
|
|
34
48
|
@each $name, $value in $breakpoints {
|
|
35
|
-
|
|
49
|
+
--breakpoint-#{$name}: #{$value};
|
|
36
50
|
}
|
|
37
51
|
}
|