claritas-web-framework 7.0.1 → 8.0.0
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/dist/index.css +276 -1
- package/dist/index.html +1 -1
- package/index.html +11 -6
- package/package.json +6 -5
- package/sass/_functions.scss +3 -145
- package/sass/_mixins.scss +0 -5
- package/sass/_reboot.scss +72 -410
- package/sass/_root.scss +11 -1
- package/sass/_variables.scss +120 -219
- package/sass/helpers/_grid.scss +11 -15
- package/sass/index.scss +2 -0
- package/sass/mixins/_button.scss +124 -232
- package/sass/mixins/_caret.scss +17 -10
- package/sass/mixins/_colors.scss +1 -1
- package/sass/mixins/_gradient.scss +0 -8
- package/sass/mixins/_group.scss +2 -2
- package/sass/mixins/_list.scss +1 -1
- package/sass/modules/_alert.scss +8 -8
- package/sass/modules/_breadcrumbs.scss +3 -3
- package/sass/modules/_button.scss +72 -96
- package/sass/modules/_card.scss +41 -56
- package/sass/modules/_close.scss +20 -10
- package/sass/modules/_details.scss +7 -25
- package/sass/modules/_dialog.scss +5 -5
- package/sass/modules/_dropdown.scss +28 -56
- package/sass/modules/_form.scss +167 -39
- package/sass/modules/_list.scss +19 -17
- package/sass/modules/_loader.scss +36 -36
- package/sass/modules/_nav.scss +92 -67
- package/sass/modules/_pill.scss +9 -22
- package/sass/modules/_table.scss +4 -4
- package/sass/modules/_tabs.scss +34 -57
- package/sass/modules/_tag.scss +11 -23
- package/sass/modules/_tile.scss +7 -7
- package/sass/modules/_tooltip.scss +13 -11
- package/sass/modules/form/_checkbox.scss +20 -21
- package/sass/modules/form/_file.scss +30 -25
- package/sass/modules/form/_formFieldGroup.scss +25 -37
- package/sass/modules/form/_output.scss +1 -1
- package/sass/modules/form/_progress.scss +20 -33
- package/sass/modules/form/_radio.scss +15 -39
- package/sass/modules/form/_range.scss +76 -24
- package/sass/modules/form/_select.scss +5 -5
- package/sass/modules/form/_switch.scss +1 -1
- package/sass/modules/form/_text.scss +20 -17
- package/sass/modules/form/_textarea.scss +1 -1
- package/sass/modules/form/_toggle.scss +23 -52
- package/webpack.config.js +5 -22
- package/webpack.plugins.js +15 -0
- package/webpack.rules.js +8 -0
- package/images/block.svg +0 -3
- package/images/check.svg +0 -3
- package/images/chevron-down.svg +0 -1
- package/images/menu.svg +0 -3
- package/images/remove.svg +0 -3
- package/images/subdirectory.svg +0 -3
- package/images/upload.svg +0 -3
- package/sass/mixins/_borderRadius.scss +0 -79
- package/sass/mixins/_boxShadow.scss +0 -22
- package/sass/mixins/_colors.temp.scss +0 -89
- package/sass/mixins/_pill.scss +0 -14
- package/sass/mixins/_rfs.scss +0 -297
- package/sass/mixins/_tag.scss +0 -52
- package/sass/mixins/_transition.scss +0 -27
- package/sass/modules/_button.old.scss +0 -215
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"><button type="button" class="button button--
|
|
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="tabs--wrapper card border--red"><nav class="nav nav--tabs"><button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item active">Click me</button> <button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item">Click me</button></nav><div class="tabs--content active background--blue"><p class="color--red">hello, <a href="/">you</a></p></div></div></div></body></html>
|
package/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
@@ -9,11 +9,16 @@
|
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
11
|
<div class="container padding-y--5">
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
<div class="tabs--wrapper card border--red">
|
|
13
|
+
<nav class="nav nav--tabs">
|
|
14
|
+
<button type="button" class="nav--item">Click me</button>
|
|
15
|
+
<button type="button" class="nav--item active">Click me</button>
|
|
16
|
+
<button type="button" class="nav--item">Click me</button>
|
|
17
|
+
<button type="button" class="nav--item">Click me</button>
|
|
18
|
+
</nav>
|
|
19
|
+
<div class="tabs--content active background--blue">
|
|
20
|
+
<p class="color--red">hello, <a href="/">you</a></p>
|
|
21
|
+
</div>
|
|
17
22
|
</div>
|
|
18
23
|
</div>
|
|
19
24
|
</body>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "
|
|
4
|
-
"updated": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
|
+
"updated": "27/07/2023",
|
|
5
5
|
"description": "The CSS framework built for Claritas front end.",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
@@ -23,17 +23,18 @@
|
|
|
23
23
|
"html-webpack-plugin": "^5.5.3",
|
|
24
24
|
"mini-css-extract-plugin": "^2.7.6",
|
|
25
25
|
"prettier": "^3.0.0",
|
|
26
|
-
"sass": "^1.
|
|
26
|
+
"sass": "^1.64.1",
|
|
27
27
|
"sass-loader": "^13.3.2",
|
|
28
|
-
"stylelint": "^15.10.
|
|
28
|
+
"stylelint": "^15.10.2",
|
|
29
29
|
"stylelint-config-standard": "^34.0.0",
|
|
30
30
|
"stylelint-config-standard-scss": "^10.0.0",
|
|
31
31
|
"stylelint-scss": "^5.0.1",
|
|
32
|
-
"webpack": "^5.88.
|
|
32
|
+
"webpack": "^5.88.2",
|
|
33
33
|
"webpack-cli": "^5.1.4",
|
|
34
34
|
"webpack-dev-server": "^4.15.1"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
+
"modern-normalize": "^2.0.0",
|
|
37
38
|
"rfs": "^10.0.0"
|
|
38
39
|
}
|
|
39
40
|
}
|
package/sass/_functions.scss
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
1
|
@use "sass:color";
|
|
3
2
|
@use "sass:math";
|
|
4
|
-
@use "sass:list";
|
|
5
3
|
@use "sass:string";
|
|
6
4
|
@use "./variables" as *;
|
|
7
5
|
|
|
8
6
|
// Functions
|
|
9
|
-
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
|
10
7
|
|
|
11
8
|
// Replace `$search` with `$replace` in `$string`
|
|
12
9
|
// Used on our SVG icon backgrounds for custom forms.
|
|
@@ -29,7 +26,6 @@
|
|
|
29
26
|
|
|
30
27
|
// See https://codepen.io/kevinweber/pen/dXWoRw
|
|
31
28
|
// Requires the use of quotes around data URIs.
|
|
32
|
-
|
|
33
29
|
@function escape-svg($string) {
|
|
34
30
|
@if string.index($string, "data:image/svg+xml") {
|
|
35
31
|
@each $char, $encoded in $escaped-characters {
|
|
@@ -45,150 +41,12 @@
|
|
|
45
41
|
@return $string;
|
|
46
42
|
}
|
|
47
43
|
|
|
48
|
-
// Color contrast
|
|
49
|
-
|
|
50
|
-
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
|
|
51
|
-
$luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044
|
|
52
|
-
0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137
|
|
53
|
-
0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296
|
|
54
|
-
0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529
|
|
55
|
-
0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844
|
|
56
|
-
0.0865 0.0887 0.0908 0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248
|
|
57
|
-
0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746
|
|
58
|
-
0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346
|
|
59
|
-
0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305
|
|
60
|
-
0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864
|
|
61
|
-
0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
|
|
62
|
-
0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841
|
|
63
|
-
0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011
|
|
64
|
-
0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308
|
|
65
|
-
0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734
|
|
66
|
-
0.9823 0.9911 1;
|
|
67
|
-
|
|
68
|
-
@function color-contrast(
|
|
69
|
-
$background,
|
|
70
|
-
$color-contrast-dark: $color-contrast-dark,
|
|
71
|
-
$color-contrast-light: $color-contrast-light,
|
|
72
|
-
$min-contrast-ratio: $min-contrast-ratio
|
|
73
|
-
) {
|
|
74
|
-
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
|
75
|
-
$max-ratio: 0;
|
|
76
|
-
$max-ratio-color: null;
|
|
77
|
-
|
|
78
|
-
@each $color in $foregrounds {
|
|
79
|
-
$contrast-ratio: contrast-ratio($background, $color);
|
|
80
|
-
|
|
81
|
-
@if $contrast-ratio > $min-contrast-ratio {
|
|
82
|
-
@return $color;
|
|
83
|
-
} @else if $contrast-ratio > $max-ratio {
|
|
84
|
-
$max-ratio: $contrast-ratio;
|
|
85
|
-
$max-ratio-color: $color;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
|
90
|
-
@return $max-ratio-color;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
|
94
|
-
$l1: luminance($background);
|
|
95
|
-
$l2: luminance(opaque($background, $foreground));
|
|
96
|
-
|
|
97
|
-
@return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Return WCAG2.0 relative luminance
|
|
101
|
-
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
|
102
|
-
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
103
|
-
@function luminance($color) {
|
|
104
|
-
$rgb: (
|
|
105
|
-
"r": color.red($color),
|
|
106
|
-
"g": color.green($color),
|
|
107
|
-
"b": color.blue($color),
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
@each $name, $value in $rgb {
|
|
111
|
-
$value: if(divide($value, 255) < 0.0393, divide(divide($value, 255), 12.92), list.nth($luminance-list, $value + 1));
|
|
112
|
-
$rgb: map.merge(
|
|
113
|
-
$rgb,
|
|
114
|
-
(
|
|
115
|
-
$name: $value,
|
|
116
|
-
)
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@return (map.get($rgb, "r") * 0.2126) + (map.get($rgb, "g") * 0.7152) + (map.get($rgb, "b") * 0.0722);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// Return opaque color
|
|
124
|
-
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
|
125
|
-
@function opaque($background, $foreground) {
|
|
126
|
-
@return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
// Shade the color if the weight is positive, else tint it
|
|
130
|
-
@function shift-color($color, $weight) {
|
|
131
|
-
@return if($weight > 0%, color.mix(black, $color, $weight), color.mix(white, $color, -$weight));
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
@function divide($dividend, $divisor, $precision: 10) {
|
|
135
|
-
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
|
136
|
-
$dividend: math.abs($dividend);
|
|
137
|
-
$divisor: math.abs($divisor);
|
|
138
|
-
|
|
139
|
-
@if $dividend == 0 {
|
|
140
|
-
@return 0;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
@if $divisor == 0 {
|
|
144
|
-
@error "Cannot divide by 0";
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
$remainder: $dividend;
|
|
148
|
-
$result: 0;
|
|
149
|
-
$factor: 10;
|
|
150
|
-
|
|
151
|
-
@while $remainder > 0 and $precision >= 0 {
|
|
152
|
-
$quotient: 0;
|
|
153
|
-
|
|
154
|
-
@while $remainder >= $divisor {
|
|
155
|
-
$remainder: $remainder - $divisor;
|
|
156
|
-
$quotient: $quotient + 1;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
$result: $result * 10 + $quotient;
|
|
160
|
-
$factor: $factor * 0.1;
|
|
161
|
-
$remainder: $remainder * 10;
|
|
162
|
-
$precision: $precision - 1;
|
|
163
|
-
|
|
164
|
-
@if $precision < 0 and $remainder >= $divisor * 5 {
|
|
165
|
-
$result: $result + 1;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
$result: $result * $factor * $sign;
|
|
170
|
-
$dividend-unit: math.unit($dividend);
|
|
171
|
-
$divisor-unit: math.unit($divisor);
|
|
172
|
-
$unit-map: (
|
|
173
|
-
"px": 1px,
|
|
174
|
-
"rem": 1rem,
|
|
175
|
-
"em": 1em,
|
|
176
|
-
"%": 1%,
|
|
177
|
-
);
|
|
178
|
-
|
|
179
|
-
@if $dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit) {
|
|
180
|
-
$result: $result * map.get($unit-map, $dividend-unit);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
@return $result;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
44
|
@function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l) {
|
|
187
45
|
$color-sum: math.max(color.lightness($value), 0%);
|
|
188
46
|
|
|
189
|
-
@if
|
|
190
|
-
@return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) /
|
|
47
|
+
@if $color-sum > $threshold {
|
|
48
|
+
@return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) / 100%);
|
|
191
49
|
} @else {
|
|
192
|
-
@return hsl(var(--white-h) var(--white-s) var(--white-l) /
|
|
50
|
+
@return hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
|
|
193
51
|
}
|
|
194
52
|
}
|
package/sass/_mixins.scss
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@forward "./mixins/borderRadius";
|
|
2
|
-
@forward "./mixins/boxShadow";
|
|
3
1
|
@forward "./mixins/breakpoints";
|
|
4
2
|
@forward "./mixins/button";
|
|
5
3
|
@forward "./mixins/caret";
|
|
@@ -10,8 +8,5 @@
|
|
|
10
8
|
@forward "./mixins/grid";
|
|
11
9
|
@forward "./mixins/group";
|
|
12
10
|
@forward "./mixins/list";
|
|
13
|
-
@forward "./mixins/pill";
|
|
14
11
|
@forward "./mixins/screenReader";
|
|
15
|
-
@forward "./mixins/tag";
|
|
16
|
-
@forward "./mixins/transition";
|
|
17
12
|
@forward "./mixins/wrap";
|