claritas-web-framework 8.0.37 → 8.0.38

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.
Files changed (26) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/index.html +10 -2
  4. package/package.json +1 -1
  5. package/sass/_reboot.scss +2 -2
  6. package/sass/_variables.scss +6 -1
  7. package/sass/mixins/_button.scss +40 -38
  8. package/sass/mixins/_caret.scss +2 -2
  9. package/sass/mixins/_colors.scss +5 -22
  10. package/sass/modules/_alert.scss +8 -8
  11. package/sass/modules/_breadcrumbs.scss +1 -3
  12. package/sass/modules/_button.scss +10 -10
  13. package/sass/modules/_form.scss +26 -24
  14. package/sass/modules/_nav.scss +45 -29
  15. package/sass/modules/_pill.scss +3 -3
  16. package/sass/modules/_tabs.scss +1 -1
  17. package/sass/modules/_tag.scss +3 -3
  18. package/sass/modules/_tile.scss +1 -1
  19. package/sass/modules/form/_checkbox.scss +4 -2
  20. package/sass/modules/form/_output.scss +2 -1
  21. package/sass/modules/form/_progress.scss +4 -4
  22. package/sass/modules/form/_radio.scss +4 -2
  23. package/sass/modules/form/_range.scss +3 -3
  24. package/sass/modules/form/_toggle.scss +5 -3
  25. package/sass/utilities/_border.scss +5 -24
  26. package/sass/utilities/_colors.scss +38 -0
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"><a href="./tasks.html" class="button button--small button--unstyled"><span data-i18n="view-tasks">View tasks</span></a></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"><nav class="nav"><a href="./tasks.html" class="nav--item color--danger"><span data-i18n="view-tasks">View tasks</span> </a><button type="button" class="nav--item color--danger"><span data-i18n="view-tasks">View tasks</span></button></nav><span class="color--danger"><span data-i18n="view-tasks">View tasks</span></span></div></body></html>
package/index.html CHANGED
@@ -9,9 +9,17 @@
9
9
 
10
10
  <body>
11
11
  <div class="container">
12
- <a href="./tasks.html" class="button button--small button--unstyled">
12
+ <nav class="nav">
13
+ <a href="./tasks.html" class="nav--item color--danger">
14
+ <span data-i18n="view-tasks">View tasks</span>
15
+ </a>
16
+ <button type="button" class="nav--item color--danger">
17
+ <span data-i18n="view-tasks">View tasks</span>
18
+ </button>
19
+ </nav>
20
+ <span class="color--danger">
13
21
  <span data-i18n="view-tasks">View tasks</span>
14
- </a>
22
+ </span>
15
23
  </div>
16
24
  </body>
17
25
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.0.37",
3
+ "version": "8.0.38",
4
4
  "description": "The CSS framework built for Claritas front end.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/_reboot.scss CHANGED
@@ -110,11 +110,11 @@ dd {
110
110
  }
111
111
 
112
112
  a {
113
- color: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 100%);
113
+ color: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
114
114
  text-decoration: $link-decoration;
115
115
 
116
116
  &:hover {
117
- color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - #{$link-shade-percentage}) / 100%);
117
+ color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - #{$link-shade-percentage}));
118
118
  text-decoration: $link-hover-decoration;
119
119
  }
120
120
  }
package/sass/_variables.scss CHANGED
@@ -85,6 +85,8 @@ $all-colors: map.merge($colors, $theme-colors) !default;
85
85
  $color-flip-threshold: 50% !default;
86
86
  $color-flip-l: 35% !default;
87
87
 
88
+ $color-disabled-alpha: 65% !default;
89
+
88
90
  /* ---------------------------------- Misc ---------------------------------- */
89
91
  $escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;
90
92
 
@@ -228,7 +230,6 @@ $headings-color: $body-color !default;
228
230
  /* --------------------------------- border --------------------------------- */
229
231
  $border-color-main: $black !default;
230
232
  $border-opacity: 20% !default;
231
- $border-opacity-value: 0.2 !default;
232
233
  $border-hover-opacity: 30% !default;
233
234
  $border-radius-none: 0 !default;
234
235
  $border-radius-small: calc($spacer * 0.15) !default;
@@ -387,6 +388,10 @@ $button-round-border-radius: $input-button-round-border-radius !default;
387
388
  $button-color-flip-threshold: 60% !default;
388
389
  $button-color-flip-l: 35% !default;
389
390
 
391
+ $button-disabled-border-alpha: 35% !default;
392
+ $button-disabled-background-alpha: $color-disabled-alpha !default;
393
+ $button-hover-background-alpha: 10% !default;
394
+
390
395
  /* ---------------------------------- close --------------------------------- */
391
396
  $close-indicator-color: $white !default;
392
397
  $close-indicator-color-light: $dark !default;
package/sass/mixins/_button.scss CHANGED
@@ -16,32 +16,34 @@
16
16
  --button-disabled-color: #{$color-disabled};
17
17
 
18
18
  --button-border-color: hsl(
19
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
19
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
20
20
  );
21
21
  --button-hover-border-color: hsl(
22
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
22
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
23
23
  );
24
24
  --button-focus-border-color: hsl(
25
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
25
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
26
26
  );
27
27
  --button-active-border-color: hsl(
28
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
28
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
29
29
  );
30
30
  --button-disabled-border-color: hsl(
31
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 35%
31
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / #{$button-disabled-border-alpha}
32
32
  );
33
33
 
34
- --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
34
+ --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
35
35
  --button-hover-background: hsl(
36
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
36
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
37
37
  );
38
38
  --button-focus-background: hsl(
39
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
39
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
40
40
  );
41
41
  --button-active-background: hsl(
42
- var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness}) / 100%
42
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) * #{$input-button-border-darkness})
43
+ );
44
+ --button-disabled-background: hsl(
45
+ var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{$button-disabled-background-alpha}
43
46
  );
44
- --button-disabled-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 65%);
45
47
 
46
48
  --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
47
49
  --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
@@ -56,14 +58,14 @@
56
58
  $main,
57
59
  $value,
58
60
  $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l),
59
- $border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%),
60
- $border-color-disabled: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 35%)
61
+ $border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l)),
62
+ $border-color-disabled: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{calc($border-opacity * 0.65)})
61
63
  ) {
62
- --button-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
64
+ --button-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
63
65
  --button-hover-color: #{$color};
64
66
  --button-focus-color: #{$color};
65
67
  --button-active-color: #{$color};
66
- --button-disabled-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 65%);
68
+ --button-disabled-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{$color-disabled-alpha});
67
69
 
68
70
  --button-border-color: #{$border-color};
69
71
  --button-hover-border-color: #{$border-color};
@@ -72,9 +74,11 @@
72
74
  --button-disabled-border-color: #{$border-color-disabled};
73
75
 
74
76
  --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
75
- --button-hover-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
76
- --button-focus-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
77
- --button-active-background: hsl(var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - 10%) / 100%);
77
+ --button-hover-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
78
+ --button-focus-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l));
79
+ --button-active-background: hsl(
80
+ var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - #{$button-hover-background-alpha})
81
+ );
78
82
  --button-disabled-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
79
83
 
80
84
  --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
@@ -87,17 +91,13 @@
87
91
  }
88
92
 
89
93
  @mixin button-variant-link($color) {
90
- --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
91
- --button-hover-color: hsl(
92
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
93
- );
94
- --button-focus-color: hsl(
95
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
96
- );
94
+ --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l));
95
+ --button-hover-color: hsl(var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}));
96
+ --button-focus-color: hsl(var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}));
97
97
  --button-active-color: hsl(
98
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
98
+ var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage})
99
99
  );
100
- --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
100
+ --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
101
101
 
102
102
  --button-border-color: transparent;
103
103
  --button-hover-border-color: transparent;
@@ -106,9 +106,15 @@
106
106
  --button-disabled-border-color: transparent;
107
107
 
108
108
  --button-background: transparent;
109
- --button-hover-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
110
- --button-focus-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
111
- --button-active-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
109
+ --button-hover-background: hsl(
110
+ var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
111
+ );
112
+ --button-focus-background: hsl(
113
+ var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
114
+ );
115
+ --button-active-background: hsl(
116
+ var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$button-hover-background-alpha}
117
+ );
112
118
  --button-disabled-background: transparent;
113
119
 
114
120
  --button-box-shadow: none;
@@ -119,17 +125,13 @@
119
125
  }
120
126
 
121
127
  @mixin button-variant-unstyled($color) {
122
- --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
123
- --button-hover-color: hsl(
124
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
125
- );
126
- --button-focus-color: hsl(
127
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
128
- );
128
+ --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l));
129
+ --button-hover-color: hsl(var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}));
130
+ --button-focus-color: hsl(var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}));
129
131
  --button-active-color: hsl(
130
- var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
132
+ var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage})
131
133
  );
132
- --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
134
+ --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$color-disabled-alpha});
133
135
 
134
136
  --button-border-color: transparent;
135
137
  --button-hover-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}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
30
+ border-top: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-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}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
39
+ border-bottom: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l));
40
40
  }
41
41
  }
package/sass/mixins/_colors.scss CHANGED
@@ -7,35 +7,18 @@
7
7
  --#{$title}-h: #{color.hue($color)};
8
8
  --#{$title}-s: #{color.saturation($color)};
9
9
  --#{$title}-l: #{color.lightness($color)};
10
- --#{$title}-a: #{calc(color.alpha($color) * 100%)};
11
10
  }
12
11
 
13
12
  @mixin make-color($title) {
14
- --color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a));
15
- --color-hover: hsl(
16
- var(--#{$title}-h) var(--#{$title}-s) calc(var(--#{$title}-l) * #{$link-shade-percentage}) / var(--#{$title}-a)
17
- );
18
-
19
- color: var(--color) !important;
20
-
21
- & a:not(.button) {
22
- color: var(--color) !important;
23
-
24
- &:hover,
25
- &:focus {
26
- color: var(--color-hover) !important;
27
- }
28
- }
13
+ --color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l));
14
+ --color-hover: hsl(var(--#{$title}-h) var(--#{$title}-s) calc(var(--#{$title}-l) - #{$link-shade-percentage}));
15
+ --color-disabled: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / #{$color-disabled-alpha});
29
16
  }
30
17
 
31
18
  @mixin make-background-color($title) {
32
- --background-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a));
33
-
34
- background-color: var(--background-color) !important;
19
+ --background-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l));
35
20
  }
36
21
 
37
22
  @mixin make-border-color($title) {
38
- --border-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a));
39
-
40
- border-color: var(--border-color) !important;
23
+ --border-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l));
41
24
  }
package/sass/modules/_alert.scss CHANGED
@@ -9,11 +9,11 @@
9
9
  --alert-border-style: solid;
10
10
  --alert-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
11
11
  --alert-border-radius: var(--border-radius-default);
12
- --alert-background: hsl(var(--body-color-h) var(--body-color-s) #{$alert-background-l} / var(--body-color-a));
13
- --alert-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l} / var(--body-color-a));
14
- --alert-link-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l} / var(--body-color-a));
12
+ --alert-background: hsl(var(--body-color-h) var(--body-color-s) #{$alert-background-l});
13
+ --alert-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l});
14
+ --alert-link-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l});
15
15
  --alert-link-hover-color: hsl(
16
- var(--body-color-h) var(--body-color-s) calc(#{$alert-color-l} - #{$link-shade-percentage}) / var(--body-color-a)
16
+ var(--body-color-h) var(--body-color-s) calc(#{$alert-color-l} - #{$link-shade-percentage})
17
17
  );
18
18
 
19
19
  color: var(--alert-color);
@@ -57,11 +57,11 @@
57
57
  @each $key, $value in $all-colors {
58
58
  .alert--#{$key} {
59
59
  --alert-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$border-opacity});
60
- --alert-background: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-background-l} / var(--#{$key}-a));
61
- --alert-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l} / var(--#{$key}-a));
62
- --alert-link-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l} / var(--#{$key}-a));
60
+ --alert-background: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-background-l});
61
+ --alert-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l});
62
+ --alert-link-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l});
63
63
  --alert-link-hover-color: hsl(
64
- var(--#{$key}-h) var(--#{$key}-s) calc(#{$alert-color-l} - #{$link-shade-percentage}) / var(--#{$key}-a)
64
+ var(--#{$key}-h) var(--#{$key}-s) calc(#{$alert-color-l} - #{$link-shade-percentage})
65
65
  );
66
66
  }
67
67
  }
package/sass/modules/_breadcrumbs.scss CHANGED
@@ -4,9 +4,7 @@
4
4
 
5
5
  .breadcrumbs {
6
6
  --breadcrumb-color: var(--medium);
7
- --breadcrumb-hover-color: hsl(
8
- var(--medium-h) var(--medium-s) calc(var(--medium-l) - #{$link-shade-percentage}) / 100%
9
- );
7
+ --breadcrumb-hover-color: hsl(var(--medium-h) var(--medium-s) calc(var(--medium-l) - #{$link-shade-percentage}));
10
8
 
11
9
  @include make-list-unstyled;
12
10
 
package/sass/modules/_button.scss CHANGED
@@ -5,15 +5,15 @@
5
5
 
6
6
  .button {
7
7
  // Changing
8
- --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
9
- --button-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
8
+ --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
9
+ --button-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
10
10
  --button-focus-color: hsl(
11
- var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
11
+ var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
12
12
  );
13
13
  --button-active-color: hsl(
14
- var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
14
+ var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
15
15
  );
16
- --button-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
16
+ --button-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha});
17
17
 
18
18
  --button-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
19
19
  --button-hover-border-color: hsl(
@@ -29,11 +29,11 @@
29
29
  var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{calc($border-opacity * 0.65)}
30
30
  );
31
31
 
32
- --button-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
33
- --button-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
34
- --button-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
35
- --button-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
36
- --button-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 65%);
32
+ --button-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
33
+ --button-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
34
+ --button-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
35
+ --button-active-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
36
+ --button-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / #{$color-disabled-alpha});
37
37
 
38
38
  --button-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
39
39
  --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
package/sass/modules/_form.scss CHANGED
@@ -22,11 +22,11 @@
22
22
  }
23
23
 
24
24
  %input {
25
- --input-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
26
- --input-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
27
- --input-focus-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
28
- --input-active-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
29
- --input-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
25
+ --input-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
26
+ --input-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
27
+ --input-focus-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
28
+ --input-active-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
29
+ --input-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha});
30
30
 
31
31
  --input-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
32
32
  --input-hover-border-color: hsl(
@@ -42,14 +42,16 @@
42
42
  var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{calc($border-opacity * 0.65)}
43
43
  );
44
44
 
45
- --input-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
46
- --input-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
47
- --input-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
48
- --input-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
45
+ --input-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
46
+ --input-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
47
+ --input-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
48
+ --input-active-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
49
49
  --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 5%);
50
50
 
51
- --input-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 100%);
52
- --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 65%);
51
+ --input-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
52
+ --input-disabled-detail-background: hsl(
53
+ var(--primary-h) var(--primary-s) var(--primary-l) / #{$color-disabled-alpha}
54
+ );
53
55
 
54
56
  --input-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
55
57
  --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
@@ -177,30 +179,30 @@
177
179
 
178
180
  @each $key, $value in $all-colors {
179
181
  &.input--#{$key} {
180
- --input-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
181
- --input-hover-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
182
- --input-focus-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
183
- --input-active-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
184
- --input-disabled-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
182
+ --input-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
183
+ --input-hover-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
184
+ --input-focus-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
185
+ --input-active-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
186
+ --input-disabled-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha});
185
187
 
186
- --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
188
+ --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
187
189
  --input-hover-border-color: hsl(
188
- var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
190
+ var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage})
189
191
  );
190
192
  --input-focus-border-color: hsl(
191
- var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
193
+ var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage})
192
194
  );
193
195
  --input-active-border-color: hsl(
194
- var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
196
+ var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage})
195
197
  );
196
198
  --input-disabled-border-color: hsl(
197
199
  var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{calc($border-opacity * 0.65)}
198
200
  );
199
201
 
200
- --input-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
201
- --input-hover-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
202
- --input-focus-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
203
- --input-active-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
202
+ --input-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
203
+ --input-hover-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
204
+ --input-focus-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
205
+ --input-active-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100%);
204
206
  --input-disabled-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
205
207
 
206
208
  --input-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
package/sass/modules/_nav.scss CHANGED
@@ -2,38 +2,10 @@
2
2
 
3
3
  @use "./../variables" as *;
4
4
  @use "./../mixins/list" as *;
5
+ @use "./../mixins/colors" as *;
5
6
 
6
7
  .nav,
7
8
  .nav > ul {
8
- --nav-item-border-width: 1px;
9
- --nav-item-border-style: solid;
10
- --nav-item-border-color: transparent;
11
- --nav-item-active-border-color: transparent;
12
- --nav-item-border-radius: 0;
13
- --nav-item-line-height: #{$nav-item-line-height};
14
-
15
- --nav-item-padding-x: #{$nav-item-padding-x};
16
- --nav-item-padding-y: #{$nav-item-padding-y};
17
-
18
- --nav-item-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
19
- --nav-item-hover-color: hsl(
20
- var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
21
- );
22
- --nav-item-focus-color: hsl(
23
- var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
24
- );
25
- --nav-item-active-color: hsl(
26
- var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
27
- );
28
- --nav-item-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
29
- --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l) / 100%);
30
-
31
- --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
32
- --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
33
- --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
34
- --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 20%);
35
- --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
36
-
37
9
  display: flex;
38
10
  flex-wrap: wrap;
39
11
  list-style: none;
@@ -62,6 +34,37 @@
62
34
  & .nav--label,
63
35
  & .nav--title,
64
36
  & .nav--item {
37
+ --nav-item-border-width: 1px;
38
+ --nav-item-border-style: solid;
39
+ --nav-item-border-color: transparent;
40
+ --nav-item-active-border-color: transparent;
41
+ --nav-item-border-radius: 0;
42
+ --nav-item-line-height: #{$nav-item-line-height};
43
+
44
+ --nav-item-padding-x: #{$nav-item-padding-x};
45
+ --nav-item-padding-y: #{$nav-item-padding-y};
46
+
47
+ --nav-item-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
48
+ --nav-item-hover-color: hsl(
49
+ var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
50
+ );
51
+ --nav-item-focus-color: hsl(
52
+ var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
53
+ );
54
+ --nav-item-active-color: hsl(
55
+ var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage})
56
+ );
57
+ --nav-item-disabled-color: hsl(
58
+ var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$color-disabled-alpha}
59
+ );
60
+ --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l));
61
+
62
+ --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
63
+ --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
64
+ --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
65
+ --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 20%);
66
+ --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
67
+
65
68
  border-width: var(--nav-item-border-width);
66
69
  border-style: var(--nav-item-border-style);
67
70
  border-color: var(--nav-item-border-color);
@@ -77,6 +80,19 @@
77
80
  justify-content: center;
78
81
  vertical-align: middle;
79
82
  flex-shrink: 0;
83
+
84
+ // @each $key, $value in $all-colors {
85
+ // & .color--#{$key} {
86
+ // @include make-color($key);
87
+
88
+ // --nav-item-color: var(--color);
89
+ // --nav-item-hover-color: var(--color-hover);
90
+ // --nav-item-focus-color: var(--color-hover);
91
+ // --nav-item-active-color: var(--color-hover);
92
+ // --nav-item-disabled-color: var(--color-disbaled);
93
+ // --nav-label-hover-color: var(--color-hover);
94
+ // }
95
+ // }
80
96
  }
81
97
 
82
98
  & .nav--label {
package/sass/modules/_pill.scss CHANGED
@@ -7,9 +7,9 @@
7
7
  @use "./../mixins/group" as *;
8
8
 
9
9
  .pill {
10
- --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
10
+ --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
11
11
  --pill-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
12
- --pill-background: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
12
+ --pill-background: hsl(var(--white-h) var(--white-s) var(--white-l));
13
13
 
14
14
  // Static
15
15
  --pill-padding-x: #{$pill-padding-x};
@@ -42,7 +42,7 @@
42
42
  @each $key, $value in $all-colors {
43
43
  .pill--#{$key} {
44
44
  --pill-color: #{color-flip($key, $value, $pill-color-flip-threshold, $pill-color-flip-l)};
45
- --pill-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
45
+ --pill-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
46
46
  }
47
47
  }
48
48
 
package/sass/modules/_tabs.scss CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  &.card {
74
74
  & .nav--tabs {
75
- --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
75
+ --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
76
76
  --nav-item-border-radius: 0;
77
77
 
78
78
  & .nav--item {
package/sass/modules/_tag.scss CHANGED
@@ -8,9 +8,9 @@
8
8
  @use "./../mixins/group" as *;
9
9
 
10
10
  .tag {
11
- --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
11
+ --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
12
12
  --tag-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
13
- --tag-background: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
13
+ --tag-background: hsl(var(--white-h) var(--white-s) var(--white-l));
14
14
 
15
15
  // Static
16
16
  --tag-padding-x: #{$tag-padding-x};
@@ -53,7 +53,7 @@
53
53
  @each $key, $value in $all-colors {
54
54
  .tag--#{$key} {
55
55
  --tag-color: #{color-flip($key, $value, $tag-color-flip-threshold, $tag-color-flip-l)};
56
- --tag-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
56
+ --tag-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
57
57
  }
58
58
  }
59
59
 
package/sass/modules/_tile.scss CHANGED
@@ -99,6 +99,6 @@
99
99
 
100
100
  @each $key, $value in $all-colors {
101
101
  .tile--#{$key} {
102
- --border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
102
+ --border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
103
103
  }
104
104
  }
package/sass/modules/form/_checkbox.scss CHANGED
@@ -70,8 +70,10 @@
70
70
  @each $key, $value in $all-colors {
71
71
  &.input--#{$key} {
72
72
  &:checked {
73
- --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
74
- --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
73
+ --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
74
+ --input-disabled-detail-background: hsl(
75
+ var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
76
+ );
75
77
  }
76
78
  }
77
79
  }
package/sass/modules/form/_output.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use "./../../variables" as *;
4
4
 
5
5
  output {
6
- --input-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
6
+ --input-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
7
+
7
8
  pointer-events: none;
8
9
  }