claritas-web-framework 8.0.36 → 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 +11 -27
  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 +45 -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/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
  }
package/sass/modules/form/_progress.scss CHANGED
@@ -17,7 +17,7 @@ progress {
17
17
  overflow: hidden;
18
18
 
19
19
  &::-webkit-progress-bar {
20
- background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
20
+ background-color: hsl(var(--body-color-h) var(--body-color-s) 95%);
21
21
  }
22
22
 
23
23
  &::-webkit-progress-value {
@@ -26,7 +26,7 @@ progress {
26
26
  }
27
27
 
28
28
  &::-moz-progress-bar {
29
- background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
29
+ background-color: hsl(var(--body-color-h) var(--body-color-s) 95%);
30
30
  }
31
31
 
32
32
  &::-moz-progress-value {
@@ -45,11 +45,11 @@ progress {
45
45
  }
46
46
 
47
47
  &::-webkit-progress-value {
48
- background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
48
+ background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
49
49
  }
50
50
 
51
51
  &::-moz-progress-value {
52
- background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
52
+ background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
53
53
  }
54
54
  }
55
55
  }
package/sass/modules/form/_radio.scss CHANGED
@@ -49,8 +49,10 @@
49
49
  @each $key, $value in $theme-colors {
50
50
  &.input--#{$key} {
51
51
  &:checked {
52
- --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
53
- --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
52
+ --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
53
+ --input-disabled-detail-background: hsl(
54
+ var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
55
+ );
54
56
  }
55
57
  }
56
58
  }
package/sass/modules/form/_range.scss CHANGED
@@ -50,7 +50,7 @@ input[type="range"] {
50
50
  --input-active-box-shadow: none;
51
51
  --input-disabled-box-shadow: none;
52
52
 
53
- --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
53
+ --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
54
54
 
55
55
  --input-padding-x: 0;
56
56
  --input-small-padding-x: 0;
@@ -91,7 +91,7 @@ input[type="range"] {
91
91
  &:disabled,
92
92
  &.disabled,
93
93
  &[aria-disabled="true"] {
94
- --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%) / 100%);
94
+ --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%));
95
95
 
96
96
  &::-webkit-slider-runnable-track {
97
97
  @include make-track;
@@ -112,7 +112,7 @@ input[type="range"] {
112
112
 
113
113
  @each $key, $value in $theme-colors {
114
114
  &.input--#{$key} {
115
- --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%) / 100%);
115
+ --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%));
116
116
 
117
117
  &::-moz-range-thumb {
118
118
  @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
package/sass/modules/form/_toggle.scss CHANGED
@@ -57,11 +57,13 @@
57
57
 
58
58
  @each $key, $value in $theme-colors {
59
59
  &.input--#{$key} {
60
- --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
60
+ --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha});
61
61
 
62
62
  &:checked {
63
- --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
64
- --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
63
+ --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
64
+ --input-disabled-detail-background: hsl(
65
+ var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
66
+ );
65
67
  }
66
68
  }
67
69
  }
package/sass/utilities/_border.scss CHANGED
@@ -6,46 +6,27 @@
6
6
  .border {
7
7
  border-width: 1px !important;
8
8
  border-style: solid !important;
9
- border-color: hsl(
10
- var(--border-color-h) var(--border-color-s) var(--border-color-l) /
11
- calc(var(--border-color-a) * #{$border-opacity-value})
12
- ) !important;
9
+ border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
13
10
  }
14
11
 
15
12
  .border--top,
16
13
  .border-top {
17
- border-top: 1px solid
18
- hsl(
19
- var(--border-color-h) var(--border-color-s) var(--border-color-l) /
20
- calc(var(--border-color-a) * #{$border-opacity-value})
21
- ) !important;
14
+ border-top: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
22
15
  }
23
16
 
24
17
  .border--right,
25
18
  .border-right {
26
- border-right: 1px solid
27
- hsl(
28
- var(--border-color-h) var(--border-color-s) var(--border-color-l) /
29
- calc(var(--border-color-a) * #{$border-opacity-value})
30
- ) !important;
19
+ border-right: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
31
20
  }
32
21
 
33
22
  .border--bottom,
34
23
  .border-bottom {
35
- border-bottom: 1px solid
36
- hsl(
37
- var(--border-color-h) var(--border-color-s) var(--border-color-l) /
38
- calc(var(--border-color-a) * #{$border-opacity-value})
39
- ) !important;
24
+ border-bottom: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
40
25
  }
41
26
 
42
27
  .border--left,
43
28
  .border-left {
44
- border-left: 1px solid
45
- hsl(
46
- var(--border-color-h) var(--border-color-s) var(--border-color-l) /
47
- calc(var(--border-color-a) * #{$border-opacity-value})
48
- ) !important;
29
+ border-left: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
49
30
  }
50
31
 
51
32
  .border--none {
package/sass/utilities/_colors.scss CHANGED
@@ -4,27 +4,65 @@
4
4
  @each $key, $value in $all-colors {
5
5
  .color--#{$key} {
6
6
  @include make-color($key);
7
+ color: var(--color) !important;
8
+ }
9
+
10
+ button.color--#{$key},
11
+ a.color--#{$key} {
12
+ @include make-color($key);
13
+ color: var(--color) !important;
14
+
15
+ &:hover,
16
+ &:focus {
17
+ color: var(--color-hover) !important;
18
+ }
19
+
20
+ &:disabled,
21
+ &.disabled {
22
+ color: var(--color-disabled) !important;
23
+ }
7
24
  }
8
25
 
9
26
  .background--#{$key} {
10
27
  @include make-background-color($key);
28
+ background-color: var(--background-color) !important;
11
29
  }
12
30
 
13
31
  .border--#{$key} {
14
32
  @include make-border-color($key);
33
+ border-color: var(--border-color) !important;
15
34
  }
16
35
  }
17
36
 
18
37
  @each $key, $value in $grays {
19
38
  .color--#{$key} {
20
39
  @include make-color($key);
40
+ color: var(--color) !important;
41
+ }
42
+
43
+ button.color--#{$key},
44
+ a.color--#{$key} {
45
+ @include make-color($key);
46
+ color: var(--color) !important;
47
+
48
+ &:hover,
49
+ &:focus {
50
+ color: var(--color-hover) !important;
51
+ }
52
+
53
+ &:disabled,
54
+ &.disabled {
55
+ color: var(--color-disabled) !important;
56
+ }
21
57
  }
22
58
 
23
59
  .background--#{$key} {
24
60
  @include make-background-color($key);
61
+ background-color: var(--background-color) !important;
25
62
  }
26
63
 
27
64
  .border--#{$key} {
28
65
  @include make-border-color($key);
66
+ border-color: var(--border-color) !important;
29
67
  }
30
68
  }