claritas-web-framework 8.3.2 → 8.5.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 +1 -1
- package/dist/index.html +1 -1
- package/index.html +8 -1
- package/package.json +7 -7
- package/sass/_functions.scss +2 -2
- package/sass/_reboot.scss +2 -2
- package/sass/_root.scss +0 -13
- package/sass/_variables.scss +13 -19
- package/sass/helpers/_screenReader.scss +4 -0
- package/sass/mixins/_button.scss +42 -73
- package/sass/mixins/_caret.scss +2 -2
- package/sass/mixins/_colors.scss +5 -5
- package/sass/mixins/_gradient.scss +17 -7
- package/sass/modules/_alert.scss +9 -13
- package/sass/modules/_breadcrumbs.scss +1 -1
- package/sass/modules/_button.scss +16 -22
- package/sass/modules/_card.scss +10 -10
- package/sass/modules/_details.scss +1 -1
- package/sass/modules/_dropdown.scss +1 -1
- package/sass/modules/_form.scss +54 -64
- package/sass/modules/_list.scss +1 -1
- package/sass/modules/_modal.scss +1 -1
- package/sass/modules/_nav.scss +20 -41
- package/sass/modules/_pill.scss +4 -6
- package/sass/modules/_table.scss +3 -20
- package/sass/modules/_tabs.scss +6 -6
- package/sass/modules/_tag.scss +4 -6
- package/sass/modules/_tile.scss +10 -10
- package/sass/modules/form/_checkbox.scss +3 -5
- package/sass/modules/form/_file.scss +6 -6
- package/sass/modules/form/_formFieldGroup.scss +3 -3
- package/sass/modules/form/_output.scss +1 -1
- package/sass/modules/form/_progress.scss +6 -6
- package/sass/modules/form/_radio.scss +3 -5
- package/sass/modules/form/_range.scss +11 -11
- package/sass/modules/form/_text.scss +10 -10
- package/sass/modules/form/_toggle.scss +4 -6
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"></div></body></html>
|
|
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">hello <button type="button" class="button button--primary">Hello</button> <button type="button" class="button button--primary button--outline">Hello</button> <button type="button" class="button button--primary button--outline" disabled="disabled">Hello</button> <button type="button" class="button button--danger" disabled="disabled">Hello</button><div class="alert alert--primary">Hello <a href="/">Click me</a></div></div></body></html>
|
package/index.html
CHANGED
|
@@ -8,6 +8,13 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
|
-
<div class="container"
|
|
11
|
+
<div class="container">
|
|
12
|
+
hello
|
|
13
|
+
<button type="button" class="button button--primary">Hello</button>
|
|
14
|
+
<button type="button" class="button button--primary button--outline">Hello</button>
|
|
15
|
+
<button type="button" class="button button--primary button--outline" disabled>Hello</button>
|
|
16
|
+
<button type="button" class="button button--danger" disabled>Hello</button>
|
|
17
|
+
<div class="alert alert--primary">Hello <a href="/">Click me</a></div>
|
|
18
|
+
</div>
|
|
12
19
|
</body>
|
|
13
20
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.5.0",
|
|
4
4
|
"description": "The CSS framework built for Claritas front end.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
"license": "UNLICENSED",
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"css-loader": "^7.1.2",
|
|
19
|
-
"find-unused-sass-variables": "^6.
|
|
19
|
+
"find-unused-sass-variables": "^6.1.0",
|
|
20
20
|
"html-webpack-plugin": "^5.6.3",
|
|
21
21
|
"mini-css-extract-plugin": "^2.9.2",
|
|
22
|
-
"prettier": "^3.5.
|
|
23
|
-
"sass-loader": "^16.0.
|
|
24
|
-
"webpack": "^5.
|
|
22
|
+
"prettier": "^3.5.3",
|
|
23
|
+
"sass-loader": "^16.0.5",
|
|
24
|
+
"webpack": "^5.99.8",
|
|
25
25
|
"webpack-cli": "^6.0.1",
|
|
26
|
-
"webpack-dev-server": "^5.2.
|
|
26
|
+
"webpack-dev-server": "^5.2.1"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"modern-normalize": "^3.0.1",
|
|
30
30
|
"rfs": "^10.0.0",
|
|
31
|
-
"sass": "^1.
|
|
31
|
+
"sass": "^1.88.0"
|
|
32
32
|
}
|
|
33
33
|
}
|
package/sass/_functions.scss
CHANGED
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
$color-sum: math.max(color.channel($value, "lightness", $space: hsl), 0%);
|
|
49
49
|
|
|
50
50
|
@if $color-sum > $threshold {
|
|
51
|
-
@return hsl(var(--dark
|
|
51
|
+
@return hsl(from var(--dark) h s l / $opacity);
|
|
52
52
|
} @else {
|
|
53
|
-
@return hsl(var(--white
|
|
53
|
+
@return hsl(from var(--white) h s l / $opacity);
|
|
54
54
|
}
|
|
55
55
|
}
|
package/sass/_reboot.scss
CHANGED
|
@@ -117,11 +117,11 @@ dd {
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
a {
|
|
120
|
-
color:
|
|
120
|
+
color: var(--primary);
|
|
121
121
|
text-decoration: $link-decoration;
|
|
122
122
|
|
|
123
123
|
&:hover {
|
|
124
|
-
color:
|
|
124
|
+
color: color-mix(in oklab, var(--primary), #000 #{$link-shade-percentage});
|
|
125
125
|
text-decoration: $link-hover-decoration;
|
|
126
126
|
}
|
|
127
127
|
}
|
package/sass/_root.scss
CHANGED
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
@use "./variables" as *;
|
|
2
|
-
@use "./mixins/colors" as *;
|
|
3
2
|
|
|
4
3
|
:root {
|
|
5
4
|
interpolate-size: allow-keywords;
|
|
6
5
|
|
|
7
|
-
@include define-color-variables($title: "body-color", $color: $body-color);
|
|
8
|
-
|
|
9
|
-
@include define-color-variables($title: "border-color-main", $color: $border-color-main);
|
|
10
|
-
|
|
11
6
|
--spacer: #{$spacer};
|
|
12
7
|
--body-color: #{$body-color};
|
|
13
8
|
--body-background: #{$body-background};
|
|
@@ -36,14 +31,6 @@
|
|
|
36
31
|
--#{$key}: #{$value};
|
|
37
32
|
}
|
|
38
33
|
|
|
39
|
-
@each $key, $value in $grays {
|
|
40
|
-
@include define-color-variables($key, $value);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@each $key, $value in $all-colors {
|
|
44
|
-
@include define-color-variables($key, $value);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
34
|
@each $key, $value in $zindexes {
|
|
48
35
|
--zindex-#{$key}: #{$value};
|
|
49
36
|
}
|
package/sass/_variables.scss
CHANGED
|
@@ -216,8 +216,8 @@ $headings-color: $body-color !default;
|
|
|
216
216
|
/* --------------------------------- border --------------------------------- */
|
|
217
217
|
$border-color-main: $gray-5 !default;
|
|
218
218
|
$border-color-hover-main: $gray-6 !default;
|
|
219
|
-
$border-shade:
|
|
220
|
-
$border-shade-hover:
|
|
219
|
+
$border-shade-percentage: 20% !default;
|
|
220
|
+
$border-shade-hover-percentage: 20% !default;
|
|
221
221
|
$border-radius-none: 0 !default;
|
|
222
222
|
$border-radius-small: calc($spacer * 0.15) !default;
|
|
223
223
|
$border-radius-medium: calc($spacer * 0.275) !default;
|
|
@@ -273,9 +273,9 @@ $zindexes: (
|
|
|
273
273
|
) !default;
|
|
274
274
|
|
|
275
275
|
/* --------------------------------- shadow --------------------------------- */
|
|
276
|
-
$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25)
|
|
277
|
-
$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75)
|
|
278
|
-
$box-shadow-large: 0 $spacer calc($spacer * 2.5)
|
|
276
|
+
$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) hsl(from var(--dark) h s l / 7.5%) !default;
|
|
277
|
+
$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) hsl(from var(--dark) h s l / 15%) !default;
|
|
278
|
+
$box-shadow-large: 0 $spacer calc($spacer * 2.5) hsl(from var(--dark) h s l / 17.5%) !default;
|
|
279
279
|
$box-shadows: (
|
|
280
280
|
"small": $box-shadow-small,
|
|
281
281
|
"medium": $box-shadow-medium,
|
|
@@ -294,10 +294,10 @@ $embeds: (
|
|
|
294
294
|
/* ---------------------------------- forms --------------------------------- */
|
|
295
295
|
$form-select-indicator-color: $body-color !default;
|
|
296
296
|
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
|
|
297
|
-
$list-nested-indicator-color:
|
|
297
|
+
$list-nested-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
|
|
298
298
|
$list-nested-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$list-nested-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/></svg>") !default;
|
|
299
|
-
$form-file-indicator-color:
|
|
300
|
-
$form-file-indicator-hover-color:
|
|
299
|
+
$form-file-indicator-color: hsl(from var(--body-color) h s l / 25%) !default;
|
|
300
|
+
$form-file-indicator-hover-color: hsl(from var(--body-color) h s l / 50%) !default;
|
|
301
301
|
$form-file-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
|
|
302
302
|
$form-file-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-hover-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
|
|
303
303
|
$form-transition:
|
|
@@ -371,8 +371,7 @@ $button-small-border-radius: $input-button-small-border-radius !default;
|
|
|
371
371
|
$button-round-border-radius: $input-button-round-border-radius !default;
|
|
372
372
|
$button-color-flip-threshold: 60% !default;
|
|
373
373
|
$button-color-flip-l: 35% !default;
|
|
374
|
-
$button-disabled-border-alpha:
|
|
375
|
-
$button-disabled-background-alpha: $color-disabled-alpha !default;
|
|
374
|
+
$button-disabled-border-alpha: 50% !default;
|
|
376
375
|
$button-hover-background-alpha: 10% !default;
|
|
377
376
|
|
|
378
377
|
/* ---------------------------------- close --------------------------------- */
|
|
@@ -418,18 +417,13 @@ $breadcrumb-color: $medium !default;
|
|
|
418
417
|
$breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;
|
|
419
418
|
|
|
420
419
|
/* ---------------------------------- modal --------------------------------- */
|
|
421
|
-
$modal-open-background:
|
|
422
|
-
color.channel($dark, "red", $space: rgb),
|
|
423
|
-
color.channel($dark, "green", $space: rgb),
|
|
424
|
-
color.channel($dark, "blue", $space: rgb),
|
|
425
|
-
0.5
|
|
426
|
-
) !default;
|
|
420
|
+
$modal-open-background: hsl(from var(--dark) h s l / 50%) !default;
|
|
427
421
|
$modal-background-blur: 4px !default;
|
|
428
422
|
|
|
429
423
|
/* ---------------------------------- alert --------------------------------- */
|
|
430
|
-
$alert-color-l:
|
|
431
|
-
$alert-background-l:
|
|
432
|
-
$alert-border-l:
|
|
424
|
+
$alert-color-l: 20% !default;
|
|
425
|
+
$alert-background-l: 80% !default;
|
|
426
|
+
$alert-border-l: 20% !default;
|
|
433
427
|
|
|
434
428
|
/* ---------------------------------- pills --------------------------------- */
|
|
435
429
|
$pill-color-flip-threshold: 54% !default;
|
package/sass/mixins/_button.scss
CHANGED
|
@@ -13,96 +13,67 @@
|
|
|
13
13
|
--button-focus-color: #{$color};
|
|
14
14
|
--button-active-color: #{$color};
|
|
15
15
|
--button-disabled-color: #{$color-disabled};
|
|
16
|
-
--button-border-color:
|
|
17
|
-
|
|
18
|
-
);
|
|
19
|
-
--button-
|
|
20
|
-
|
|
21
|
-
);
|
|
22
|
-
--button-
|
|
23
|
-
|
|
24
|
-
);
|
|
25
|
-
--button-
|
|
26
|
-
|
|
27
|
-
);
|
|
28
|
-
--button-
|
|
29
|
-
|
|
30
|
-
);
|
|
31
|
-
--button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
|
|
32
|
-
--button-hover-background: hsl(
|
|
33
|
-
var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100)
|
|
34
|
-
);
|
|
35
|
-
--button-focus-background: hsl(
|
|
36
|
-
var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100)
|
|
37
|
-
);
|
|
38
|
-
--button-active-background: hsl(
|
|
39
|
-
var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100)
|
|
40
|
-
);
|
|
41
|
-
--button-disabled-background: hsl(
|
|
42
|
-
var(--#{$main}-h) var(--#{$main}-s) calc(calc(var(--#{$main}-l) / 100) * #{$border-shade} * 100) / #{$button-disabled-background-alpha}
|
|
43
|
-
);
|
|
44
|
-
--button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
|
|
45
|
-
--button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
|
|
46
|
-
--button-focus-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 20%);
|
|
47
|
-
--button-active-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 20%);
|
|
48
|
-
--button-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
|
|
16
|
+
--button-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
|
|
17
|
+
--button-hover-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
|
|
18
|
+
--button-focus-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
|
|
19
|
+
--button-active-border-color: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-hover-percentage});
|
|
20
|
+
--button-disabled-border-color: color-mix(in oklab, var(--#{$main}), hsl(0 0% 0% / 5%) #{$border-shade-percentage});
|
|
21
|
+
--button-background: var(--#{$main});
|
|
22
|
+
--button-hover-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
|
|
23
|
+
--button-focus-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
|
|
24
|
+
--button-active-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
|
|
25
|
+
--button-disabled-background: hsl(from var(--#{$main}) h s l / #{$button-disabled-border-alpha});
|
|
26
|
+
--button-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
27
|
+
--button-hover-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
28
|
+
--button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
|
|
29
|
+
--button-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
|
|
30
|
+
--button-disabled-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
49
31
|
}
|
|
50
32
|
|
|
51
33
|
@mixin button-variant-outline(
|
|
52
34
|
$main,
|
|
53
35
|
$value,
|
|
54
36
|
$color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l),
|
|
55
|
-
$border-color:
|
|
56
|
-
$border-color-disabled:
|
|
57
|
-
hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{calc(20% * #{$border-shade-hover})})
|
|
37
|
+
$border-color: var(--#{$main}),
|
|
38
|
+
$border-color-disabled: color-mix(in oklab, var(--#{$main}), hsl(0 0% 0% / 5%) #{$border-shade-percentage})
|
|
58
39
|
) {
|
|
59
|
-
--button-color:
|
|
40
|
+
--button-color: var(--#{$main});
|
|
60
41
|
--button-hover-color: #{$color};
|
|
61
42
|
--button-focus-color: #{$color};
|
|
62
43
|
--button-active-color: #{$color};
|
|
63
|
-
--button-disabled-color: hsl(var(--#{$main}
|
|
44
|
+
--button-disabled-color: hsl(from var(--#{$main}) h s l / #{$button-disabled-border-alpha});
|
|
64
45
|
--button-border-color: #{$border-color};
|
|
65
46
|
--button-hover-border-color: #{$border-color};
|
|
66
47
|
--button-focus-border-color: #{$border-color};
|
|
67
48
|
--button-active-border-color: #{$border-color};
|
|
68
49
|
--button-disabled-border-color: #{$border-color-disabled};
|
|
69
|
-
--button-background: hsl(var(--#{$main}
|
|
70
|
-
--button-hover-background:
|
|
71
|
-
--button-focus-background:
|
|
72
|
-
--button-active-background:
|
|
73
|
-
|
|
74
|
-
);
|
|
75
|
-
--button-
|
|
76
|
-
--button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}
|
|
77
|
-
--button-
|
|
78
|
-
--button-
|
|
79
|
-
--button-active-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 20%);
|
|
80
|
-
--button-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
|
|
50
|
+
--button-background: hsl(from var(--#{$main}) h s l / 0%);
|
|
51
|
+
--button-hover-background: var(--#{$main});
|
|
52
|
+
--button-focus-background: var(--#{$main});
|
|
53
|
+
--button-active-background: color-mix(in oklab, var(--#{$main}), #000 #{$border-shade-percentage});
|
|
54
|
+
--button-disabled-background: hsl(from var(--#{$main}) h s l / 0%);
|
|
55
|
+
--button-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
56
|
+
--button-hover-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
57
|
+
--button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
|
|
58
|
+
--button-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 20%);
|
|
59
|
+
--button-disabled-box-shadow: 0 0 0 0.125em hsl(from var(--#{$main}) h s l / 0%);
|
|
81
60
|
}
|
|
82
61
|
|
|
83
62
|
@mixin button-variant-link($color) {
|
|
84
|
-
--button-color:
|
|
85
|
-
--button-hover-color:
|
|
86
|
-
--button-focus-color:
|
|
87
|
-
--button-active-color:
|
|
88
|
-
|
|
89
|
-
);
|
|
90
|
-
--button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
|
|
63
|
+
--button-color: var(--#{$color});
|
|
64
|
+
--button-hover-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
65
|
+
--button-focus-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
66
|
+
--button-active-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
67
|
+
--button-disabled-color: hsl(from var(--#{$color}) h s l / #{$color-disabled-alpha});
|
|
91
68
|
--button-border-color: transparent;
|
|
92
69
|
--button-hover-border-color: transparent;
|
|
93
70
|
--button-focus-border-color: transparent;
|
|
94
71
|
--button-active-border-color: transparent;
|
|
95
72
|
--button-disabled-border-color: transparent;
|
|
96
73
|
--button-background: transparent;
|
|
97
|
-
--button-hover-background: hsl(
|
|
98
|
-
|
|
99
|
-
);
|
|
100
|
-
--button-focus-background: hsl(
|
|
101
|
-
var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
|
|
102
|
-
);
|
|
103
|
-
--button-active-background: hsl(
|
|
104
|
-
var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
|
|
105
|
-
);
|
|
74
|
+
--button-hover-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
|
|
75
|
+
--button-focus-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
|
|
76
|
+
--button-active-background: hsl(from var(--#{$color}) h s l / #{$button-hover-background-alpha});
|
|
106
77
|
--button-disabled-background: transparent;
|
|
107
78
|
--button-box-shadow: none;
|
|
108
79
|
--button-hover-box-shadow: none;
|
|
@@ -112,13 +83,11 @@
|
|
|
112
83
|
}
|
|
113
84
|
|
|
114
85
|
@mixin button-variant-unstyled($color) {
|
|
115
|
-
--button-color:
|
|
116
|
-
--button-hover-color:
|
|
117
|
-
--button-focus-color:
|
|
118
|
-
--button-active-color:
|
|
119
|
-
|
|
120
|
-
);
|
|
121
|
-
--button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
|
|
86
|
+
--button-color: var(--#{$color});
|
|
87
|
+
--button-hover-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
88
|
+
--button-focus-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
89
|
+
--button-active-color: color-mix(in oklab, var(--#{$color}), #000 #{$link-shade-percentage});
|
|
90
|
+
--button-disabled-color: hsl(from var(--#{$color}) h s l / #{$color-disabled-alpha});
|
|
122
91
|
--button-border-color: transparent;
|
|
123
92
|
--button-hover-border-color: transparent;
|
|
124
93
|
--button-focus-border-color: transparent;
|
package/sass/mixins/_caret.scss
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
&::after {
|
|
29
29
|
border-bottom: 0;
|
|
30
|
-
border-top: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}
|
|
30
|
+
border-top: calc(var(--spacer) * 0.25) solid hsl(from var(--#{$color}) h s l);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -36,6 +36,6 @@
|
|
|
36
36
|
|
|
37
37
|
&::after {
|
|
38
38
|
border-top: 0;
|
|
39
|
-
border-bottom: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}
|
|
39
|
+
border-bottom: calc(var(--spacer) * 0.25) solid hsl(from var(--#{$color}) h s l);
|
|
40
40
|
}
|
|
41
41
|
}
|
package/sass/mixins/_colors.scss
CHANGED
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@mixin make-color($title) {
|
|
12
|
-
--color:
|
|
13
|
-
--color-hover:
|
|
14
|
-
--color-disabled: hsl(var(--#{$title}
|
|
12
|
+
--color: var(--#{$title});
|
|
13
|
+
--color-hover: color-mix(in oklab, var(--#{$title}), #000 #{$link-shade-percentage});
|
|
14
|
+
--color-disabled: hsl(from var(--#{$title}) h s l / #{$color-disabled-alpha});
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@mixin make-background-color($title) {
|
|
18
|
-
--background-color:
|
|
18
|
+
--background-color: var(--#{$title});
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@mixin make-border-color($title) {
|
|
22
|
-
--border-color:
|
|
22
|
+
--border-color: var(--#{$title});
|
|
23
23
|
}
|
|
@@ -4,34 +4,44 @@
|
|
|
4
4
|
// Horizontal gradient, from left to right
|
|
5
5
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
6
6
|
|
|
7
|
-
@mixin gradient-x($start-color:
|
|
7
|
+
@mixin gradient-x($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: 0%, $end-percent: 100%) {
|
|
8
8
|
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
// Vertical gradient, from top to bottom
|
|
12
12
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
13
13
|
|
|
14
|
-
@mixin gradient-y($start-color:
|
|
14
|
+
@mixin gradient-y($start-color: var(--gray-7), $end-color: var(--gray-8), $start-percent: null, $end-percent: null) {
|
|
15
15
|
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
@mixin gradient-directional($start-color:
|
|
18
|
+
@mixin gradient-directional($start-color: var(--gray-7), $end-color: var(--gray-8), $deg: 45deg) {
|
|
19
19
|
background-image: linear-gradient($deg, $start-color, $end-color);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
@mixin gradient-x-three-colors(
|
|
22
|
+
@mixin gradient-x-three-colors(
|
|
23
|
+
$start-color: var(--blue),
|
|
24
|
+
$mid-color: var(--purple),
|
|
25
|
+
$color-stop: 50%,
|
|
26
|
+
$end-color: var(--red)
|
|
27
|
+
) {
|
|
23
28
|
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
|
24
29
|
}
|
|
25
30
|
|
|
26
|
-
@mixin gradient-y-three-colors(
|
|
31
|
+
@mixin gradient-y-three-colors(
|
|
32
|
+
$start-color: var(--blue),
|
|
33
|
+
$mid-color: var(--purple),
|
|
34
|
+
$color-stop: 50%,
|
|
35
|
+
$end-color: var(--red)
|
|
36
|
+
) {
|
|
27
37
|
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
|
28
38
|
}
|
|
29
39
|
|
|
30
|
-
@mixin gradient-radial($inner-color:
|
|
40
|
+
@mixin gradient-radial($inner-color: var(--gray-7), $outer-color: var(--gray-8)) {
|
|
31
41
|
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
|
32
42
|
}
|
|
33
43
|
|
|
34
|
-
@mixin gradient-striped($color:
|
|
44
|
+
@mixin gradient-striped($color: hsl(var(--white) h s l / 15%), $angle: 45deg) {
|
|
35
45
|
background-image: linear-gradient(
|
|
36
46
|
$angle,
|
|
37
47
|
$color 25%,
|
package/sass/modules/_alert.scss
CHANGED
|
@@ -8,12 +8,10 @@
|
|
|
8
8
|
--alert-border-style: solid;
|
|
9
9
|
--alert-border-color: var(--border-color-main);
|
|
10
10
|
--alert-border-radius: var(--border-radius-default);
|
|
11
|
-
--alert-background:
|
|
12
|
-
--alert-color:
|
|
13
|
-
--alert-link-color:
|
|
14
|
-
--alert-link-hover-color:
|
|
15
|
-
var(--body-color-h) var(--body-color-s) calc(#{$alert-color-l} - #{$link-shade-percentage})
|
|
16
|
-
);
|
|
11
|
+
--alert-background: color-mix(in oklab, var(--body-color), #fff #{$alert-background-l});
|
|
12
|
+
--alert-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
|
|
13
|
+
--alert-link-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l});
|
|
14
|
+
--alert-link-hover-color: color-mix(in oklab, var(--body-color), #000 #{$alert-color-l + $link-shade-percentage});
|
|
17
15
|
|
|
18
16
|
color: var(--alert-color);
|
|
19
17
|
border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
|
|
@@ -55,12 +53,10 @@
|
|
|
55
53
|
|
|
56
54
|
@each $key, $value in $all-colors {
|
|
57
55
|
.alert--#{$key} {
|
|
58
|
-
--alert-border-color:
|
|
59
|
-
--alert-background:
|
|
60
|
-
--alert-color:
|
|
61
|
-
--alert-link-color:
|
|
62
|
-
--alert-link-hover-color:
|
|
63
|
-
var(--#{$key}-h) var(--#{$key}-s) calc(#{$alert-color-l} - #{$link-shade-percentage})
|
|
64
|
-
);
|
|
56
|
+
--alert-border-color: color-mix(in oklab, var(--#{$key}), #fff #{$alert-border-l});
|
|
57
|
+
--alert-background: color-mix(in oklab, var(--#{$key}), #fff #{$alert-background-l});
|
|
58
|
+
--alert-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
|
|
59
|
+
--alert-link-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
|
|
60
|
+
--alert-link-hover-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l + $link-shade-percentage});
|
|
65
61
|
}
|
|
66
62
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
.breadcrumbs {
|
|
6
6
|
--breadcrumb-color: var(--medium);
|
|
7
|
-
--breadcrumb-hover-color:
|
|
7
|
+
--breadcrumb-hover-color: color-mix(in oklab, var(--medium), #000 #{$link-shade-percentage});
|
|
8
8
|
|
|
9
9
|
@include make-list-unstyled;
|
|
10
10
|
|
|
@@ -4,32 +4,26 @@
|
|
|
4
4
|
|
|
5
5
|
.button {
|
|
6
6
|
// Changing
|
|
7
|
-
--button-color:
|
|
8
|
-
--button-hover-color:
|
|
9
|
-
--button-focus-color:
|
|
10
|
-
|
|
11
|
-
);
|
|
12
|
-
--button-active-color: hsl(
|
|
13
|
-
var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
|
|
14
|
-
);
|
|
15
|
-
--button-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha});
|
|
7
|
+
--button-color: var(--body-color);
|
|
8
|
+
--button-hover-color: var(--body-color);
|
|
9
|
+
--button-focus-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
|
|
10
|
+
--button-active-color: color-mix(in oklab, var(--body-color), #000 #{$link-shade-percentage});
|
|
11
|
+
--button-disabled-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
|
|
16
12
|
--button-border-color: var(--border-color-main);
|
|
17
13
|
--button-hover-border-color: var(--border-color-hover-main);
|
|
18
14
|
--button-focus-border-color: var(--border-color-hover-main);
|
|
19
15
|
--button-active-border-color: var(--border-color-hover-main);
|
|
20
|
-
--button-disabled-border-color: hsl(
|
|
21
|
-
|
|
22
|
-
);
|
|
23
|
-
--button-background:
|
|
24
|
-
--button-
|
|
25
|
-
--button-
|
|
26
|
-
--button-
|
|
27
|
-
--button-
|
|
28
|
-
--button-box-shadow: 0 0 0 0.125em hsl(var(--body-color
|
|
29
|
-
--button-
|
|
30
|
-
--button-
|
|
31
|
-
--button-active-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 20%);
|
|
32
|
-
--button-disabled-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
|
|
16
|
+
--button-disabled-border-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
|
|
17
|
+
--button-background: var(--white);
|
|
18
|
+
--button-hover-background: var(--white);
|
|
19
|
+
--button-focus-background: var(--white);
|
|
20
|
+
--button-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
|
|
21
|
+
--button-disabled-background: hsl(from var(--white) h s l / #{$color-disabled-alpha});
|
|
22
|
+
--button-box-shadow: 0 0 0 0.125em transparent;
|
|
23
|
+
--button-hover-box-shadow: 0 0 0 0.125em transparent;
|
|
24
|
+
--button-focus-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
|
|
25
|
+
--button-active-box-shadow: 0 0 0 0.125em hsl(from var(--body-color) h s l / 20%);
|
|
26
|
+
--button-disabled-box-shadow: 0 0 0 0.125em transparent;
|
|
33
27
|
|
|
34
28
|
// Static
|
|
35
29
|
--button-padding-x: #{$button-padding-x};
|
package/sass/modules/_card.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
.card {
|
|
6
6
|
--card-background: var(--white);
|
|
7
|
-
--card-hover-background:
|
|
7
|
+
--card-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
|
|
8
8
|
--card-border-width: 1px;
|
|
9
9
|
--card-border-style: solid;
|
|
10
10
|
--card-border-color: var(--border-color-main);
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
& .
|
|
46
|
-
& .
|
|
45
|
+
& .card__header,
|
|
46
|
+
& .card__footer {
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-flow: row wrap;
|
|
49
49
|
align-items: normal;
|
|
@@ -54,26 +54,26 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
& .
|
|
57
|
+
& .card__header {
|
|
58
58
|
border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
& .
|
|
61
|
+
& .card__footer {
|
|
62
62
|
margin-top: auto;
|
|
63
63
|
border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
& .
|
|
66
|
+
& .card__body {
|
|
67
67
|
flex: 1 1 auto;
|
|
68
68
|
width: 100%;
|
|
69
69
|
padding: var(--card-body-padding-y) var(--card-body-padding-x);
|
|
70
70
|
|
|
71
|
-
& + .
|
|
71
|
+
& + .card__body {
|
|
72
72
|
border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
& .
|
|
76
|
+
& .card__image {
|
|
77
77
|
flex: 1 0 100%;
|
|
78
78
|
overflow: hidden;
|
|
79
79
|
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
details.card {
|
|
88
|
-
& .
|
|
88
|
+
& .card__header {
|
|
89
89
|
border-bottom-color: transparent;
|
|
90
90
|
|
|
91
91
|
&:hover {
|
|
@@ -94,7 +94,7 @@ details.card {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&[open] {
|
|
97
|
-
& .
|
|
97
|
+
& .card__header {
|
|
98
98
|
border-bottom-color: var(--card-border-color);
|
|
99
99
|
}
|
|
100
100
|
}
|