claritas-web-framework 8.3.2 → 8.4.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/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 +1 -1
- package/sass/modules/_form.scss +43 -53
- package/sass/modules/_nav.scss +11 -19
- package/sass/modules/_pill.scss +4 -6
- package/sass/modules/_table.scss +3 -20
- package/sass/modules/_tabs.scss +2 -2
- package/sass/modules/_tag.scss +4 -6
- package/sass/modules/_tile.scss +3 -3
- package/sass/modules/form/_checkbox.scss +2 -4
- package/sass/modules/form/_output.scss +1 -1
- package/sass/modules/form/_progress.scss +6 -6
- package/sass/modules/form/_radio.scss +2 -4
- package/sass/modules/form/_range.scss +11 -11
- package/sass/modules/form/_text.scss +10 -10
- package/sass/modules/form/_toggle.scss +3 -5
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.4.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);
|