claritas-web-framework 6.0.9 → 6.1.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.
Files changed (29) hide show
  1. package/index.html +27 -3
  2. package/package.json +6 -6
  3. package/sass/_functions.scss +2 -2
  4. package/sass/_index.scss +4 -76
  5. package/sass/_mixins.scss +1 -0
  6. package/sass/_modules.scss +1 -0
  7. package/sass/_reboot.scss +3 -3
  8. package/sass/_root.scss +23 -12
  9. package/sass/_variables.scss +60 -25
  10. package/sass/mixins/_button.scss +255 -147
  11. package/sass/mixins/_gradient.scss +1 -1
  12. package/sass/mixins/_group.scss +6 -4
  13. package/sass/mixins/_pill.scss +1 -1
  14. package/sass/mixins/_tag.scss +4 -4
  15. package/sass/modules/_breadcrumbs.scss +1 -1
  16. package/sass/modules/_button.scss +182 -73
  17. package/sass/modules/_close.scss +1 -1
  18. package/sass/modules/_form.scss +1 -1
  19. package/sass/modules/_nav.scss +4 -4
  20. package/sass/modules/_pill.scss +1 -1
  21. package/sass/modules/_tabs.scss +1 -1
  22. package/sass/modules/_tag.scss +1 -1
  23. package/sass/modules/form/_checkbox.scss +57 -55
  24. package/sass/modules/form/_file.scss +2 -2
  25. package/sass/modules/form/_radio.scss +53 -51
  26. package/sass/modules/form/_switch.scss +10 -0
  27. package/sass/modules/form/_text.scss +1 -1
  28. package/sass/modules/form/_toggle.scss +60 -58
  29. package/webpack.config.js +3 -0
package/index.html CHANGED
@@ -8,9 +8,33 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
- <div class="container">
12
- <div class="card">
13
- <div class="card--body background--gray-2">Hello</div>
11
+ <div class="container padding-y--5">
12
+ <div class="grid">
13
+ <div class="col--12">
14
+ <div class="card">
15
+ <div class="card--body">
16
+ <div class="buttons">
17
+ <button type="button" class="button button--primary">Click me</button>
18
+ <button type="button" class="button button--danger button--outline">Click me</button>
19
+ <button type="button" class="button button--warning button--link">Click me</button>
20
+ <button type="button" class="button button--success button--unstyled">Click me</button>
21
+
22
+ <input class="button--switch" type="checkbox" id="check1" name="check1" />
23
+ <label class="button button--primary" for="check1">Check me</label>
24
+
25
+ <input class="button--switch" type="checkbox" id="check2" name="check2" checked />
26
+ <label class="button button--primary" for="check2">Check me</label>
27
+
28
+ <div class="buttons buttons--grouped">
29
+ <input class="button--switch" type="radio" id="radio1" name="radio1" />
30
+ <label class="button button--success" for="radio1">Check me</label>
31
+ <input class="button--switch" type="radio" id="radio2" name="radio1" />
32
+ <label class="button button--success" for="radio2">Check me</label>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </div>
14
38
  </div>
15
39
  </div>
16
40
  </body>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "6.0.9",
4
- "updated": "13/10/2022",
3
+ "version": "6.1.0",
4
+ "updated": "04/11/2022",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
7
7
  "scripts": {
@@ -22,7 +22,7 @@
22
22
  "@alexlafroscia/postcss-color-mod-function": "^4.0.0",
23
23
  "@babel/eslint-plugin": "^7.19.1",
24
24
  "css-loader": "^6.7.1",
25
- "cssnano": "^5.1.13",
25
+ "cssnano": "^5.1.14",
26
26
  "eslint": "^8.26.0",
27
27
  "eslint-config-prettier": "^8.5.0",
28
28
  "eslint-plugin-prettier": "^4.2.1",
@@ -37,9 +37,9 @@
37
37
  "postcss-preset-env": "^7.8.2",
38
38
  "postcss-scss": "^4.0.5",
39
39
  "prettier": "^2.7.1",
40
- "sass": "^1.55.0",
40
+ "sass": "^1.56.0",
41
41
  "sass-loader": "^13.1.0",
42
- "stylelint": "^14.14.0",
42
+ "stylelint": "^14.14.1",
43
43
  "stylelint-config-prettier": "^9.0.3",
44
44
  "stylelint-config-prettier-scss": "^0.0.1",
45
45
  "stylelint-config-standard": "^29.0.0",
@@ -49,4 +49,4 @@
49
49
  "webpack-cli": "^4.10.0",
50
50
  "webpack-dev-server": "^4.11.1"
51
51
  }
52
- }
52
+ }
package/sass/_functions.scss CHANGED
@@ -123,12 +123,12 @@ $luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.
123
123
  // Return opaque color
124
124
  // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
125
125
  @function opaque($background, $foreground) {
126
- @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
126
+ @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
127
127
  }
128
128
 
129
129
  // Shade the color if the weight is positive, else tint it
130
130
  @function shift-color($color, $weight) {
131
- @return if($weight > 0, color.mix(black, $color, $weight), color.mix(white, $color, -$weight));
131
+ @return if($weight > 0%, color.mix(black, $color, $weight), color.mix(white, $color, -$weight));
132
132
  }
133
133
 
134
134
  @function divide($dividend, $divisor, $precision: 10) {
package/sass/_index.scss CHANGED
@@ -1,80 +1,8 @@
1
1
  @forward "./variables";
2
2
  @forward "./functions";
3
-
4
- @forward "./mixins/alert";
5
- @forward "./mixins/boxShadow";
6
- @forward "./mixins/breakpoints";
7
- @forward "./mixins/button";
8
- @forward "./mixins/caret";
9
- @forward "./mixins/clearfix";
10
- @forward "./mixins/colors";
11
- @forward "./mixins/container";
12
- @forward "./mixins/gradient";
13
- @forward "./mixins/grid";
14
- @forward "./mixins/group";
15
- @forward "./mixins/list";
16
- @forward "./mixins/pill";
17
- @forward "./mixins/rfs";
18
- @forward "./mixins/screenReader";
19
- @forward "./mixins/tag";
20
- @forward "./mixins/transition";
21
- @forward "./mixins/wrap";
22
-
23
- @forward "./helpers/container";
24
- @forward "./helpers/embed";
25
- @forward "./helpers/grid";
26
- @forward "./helpers/image";
27
- @forward "./helpers/link";
28
- @forward "./helpers/screenReader";
29
- @forward "./helpers/wrap";
30
-
31
- @forward "./utilities/align";
32
- @forward "./utilities/border";
33
- @forward "./utilities/colors";
34
- @forward "./utilities/display";
35
- @forward "./utilities/flex";
36
- @forward "./utilities/float";
37
- @forward "./utilities/order";
38
- @forward "./utilities/overflow";
39
- @forward "./utilities/pointerEvents";
40
- @forward "./utilities/position";
41
- @forward "./utilities/shadow";
42
- @forward "./utilities/size";
43
- @forward "./utilities/spacing";
44
- @forward "./utilities/translate";
45
- @forward "./utilities/typography";
46
- @forward "./utilities/visibility";
47
- @forward "./utilities/zIndex";
48
-
49
- @forward "./modules/alert";
50
- @forward "./modules/breadcrumbs";
51
- @forward "./modules/button";
52
- @forward "./modules/card";
53
- @forward "./modules/close";
54
- @forward "./modules/details";
55
- @forward "./modules/dialog";
56
- @forward "./modules/dropdown";
57
- @forward "./modules/form";
58
- @forward "./modules/form/formFieldGroup";
59
- @forward "./modules/form/checkbox";
60
- @forward "./modules/form/file";
61
- @forward "./modules/form/output";
62
- @forward "./modules/form/progress";
63
- @forward "./modules/form/radio";
64
- @forward "./modules/form/range";
65
- @forward "./modules/form/select";
66
- @forward "./modules/form/text";
67
- @forward "./modules/form/textarea";
68
- @forward "./modules/form/toggle";
69
- @forward "./modules/list";
70
- @forward "./modules/loader";
71
- @forward "./modules/nav";
72
- @forward "./modules/pill";
73
- @forward "./modules/tabs";
74
- @forward "./modules/tag";
75
- @forward "./modules/tile";
76
- @forward "./modules/table";
77
- @forward "./modules/tooltip";
78
-
3
+ @forward "./mixins";
4
+ @forward "./helpers";
5
+ @forward "./utilities";
6
+ @forward "./modules";
79
7
  @forward "./reboot";
80
8
  @forward "./root";
package/sass/_mixins.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @forward "./mixins/alert";
2
+ @forward "./mixins/borderRadius";
2
3
  @forward "./mixins/boxShadow";
3
4
  @forward "./mixins/breakpoints";
4
5
  @forward "./mixins/button";
package/sass/_modules.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  @forward "./modules/form/radio";
16
16
  @forward "./modules/form/range";
17
17
  @forward "./modules/form/select";
18
+ @forward "./modules/form/switch";
18
19
  @forward "./modules/form/text";
19
20
  @forward "./modules/form/textarea";
20
21
  @forward "./modules/form/toggle";
package/sass/_reboot.scss CHANGED
@@ -222,7 +222,7 @@ small {
222
222
 
223
223
  mark {
224
224
  padding: $mark-padding;
225
- background-color: var(--highlight-bg);
225
+ background-color: var(--highlight-background);
226
226
  }
227
227
 
228
228
  // Sub and Sup
@@ -253,7 +253,7 @@ a {
253
253
  text-decoration: $link-decoration;
254
254
 
255
255
  &:hover {
256
- color: $link-color-hover;
256
+ color: $link-hover-color;
257
257
  text-decoration: $link-hover-decoration;
258
258
  }
259
259
  }
@@ -324,7 +324,7 @@ kbd {
324
324
  @include font-size($kbd-font-size);
325
325
 
326
326
  color: $kbd-color;
327
- background-color: $kbd-bg;
327
+ background-color: $kbd-background;
328
328
  @include border-radius($border-radius-small);
329
329
 
330
330
  kbd {
package/sass/_root.scss CHANGED
@@ -5,24 +5,35 @@
5
5
  // Generate palettes for full colors, grays, and theme colors.
6
6
 
7
7
  @each $color, $value in $grays {
8
- --gray-#{$color}: #{$value};
8
+ --#{$prefix}gray-#{$color}: #{$value};
9
9
  }
10
10
 
11
11
  @each $color, $value in $all-colors {
12
- --#{$color}: #{$value};
12
+ --#{$prefix}#{$color}: #{$value};
13
13
  }
14
14
 
15
15
  @each $zindex, $value in $zindexes {
16
- --zindex-#{$zindex}: #{$value};
16
+ --#{$prefix}zindex-#{$zindex}: #{$value};
17
17
  }
18
18
 
19
- --spacer: #{$spacer};
20
- --body-color: #{$body-color};
21
- --body-background: #{$body-background};
22
- --font-family-body: #{$font-family-base};
23
- --font-size-body: #{$font-size-base};
24
- --font-weight-body: #{$font-weight-base};
25
- --line-height-body: #{$line-height-base};
26
- --body-text-align: #{$body-text-align};
27
- --headings-color: #{$headings-color};
19
+ --#{$prefix}spacer: #{$spacer};
20
+ --#{$prefix}body-color: #{$body-color};
21
+ --#{$prefix}body-background: #{$body-background};
22
+ --#{$prefix}font-family-body: #{$font-family-base};
23
+ --#{$prefix}font-size-body: #{$font-size-base};
24
+ --#{$prefix}font-weight-body: #{$font-weight-base};
25
+ --#{$prefix}line-height-body: #{$line-height-base};
26
+ --#{$prefix}body-text-align: #{$body-text-align};
27
+ --#{$prefix}headings-color: #{$headings-color};
28
+
29
+ --#{$prefix}border-width: #{$border-width};
30
+ --#{$prefix}border-style: #{$border-style};
31
+ --#{$prefix}border-color: #{$border-color-main};
32
+
33
+ --#{$prefix}link-color: #{$link-color};
34
+ --#{$prefix}link-hover-color: #{$link-hover-color};
35
+
36
+ @each $name, $value in $breakpoints {
37
+ --#{$prefix}breakpoint-#{$name}: #{$value};
38
+ }
28
39
  }
package/sass/_variables.scss CHANGED
@@ -11,6 +11,8 @@ $enable-rfs: true !default;
11
11
  $enable-smooth-scroll: true !default;
12
12
  $enable-margins: true !default;
13
13
 
14
+ $prefix: "" !default;
15
+
14
16
  // Color system
15
17
  $white: #fff !default;
16
18
  $gray-1: #f6f6f7 !default;
@@ -328,7 +330,7 @@ $spacers: (
328
330
 
329
331
  $link-color: $primary !default;
330
332
  $link-shade-percentage: 20% !default;
331
- $link-color-hover: color.mix(black, $link-color, $link-shade-percentage) !default;
333
+ $link-hover-color: color.mix(black, $link-color, $link-shade-percentage) !default;
332
334
  $link-decoration: none !default;
333
335
  $link-hover-decoration: underline !default;
334
336
 
@@ -443,9 +445,10 @@ $headings-line-height: 1.2 !default;
443
445
  $headings-color: $body-color !default;
444
446
 
445
447
  $border-color-main: $black !default;
446
- $border-opacity-unfocus: 10% !default;
448
+ $border-unfocus-opacity: 10% !default;
447
449
  $border-opacity: 20% !default;
448
- $border-opacity-hover: 30% !default;
450
+ $border-hover-opacity: 30% !default;
451
+ $border-active-opacity: 40% !default;
449
452
  $border-width: 1px !default;
450
453
  $border-style: solid !default;
451
454
  $border-radius-small: calc($spacer * 0.15) !default;
@@ -459,7 +462,7 @@ $hr-margin-y: $spacer !default;
459
462
  $hr-color: inherit !default;
460
463
 
461
464
  // fusv-disable
462
- $hr-bg-color: null !default; // Deprecated in v5.2.0
465
+ $hr-background-color: null !default; // Deprecated in v5.2.0
463
466
  $hr-height: null !default; // Deprecated in v5.2.0
464
467
  // fusv-enable
465
468
 
@@ -480,8 +483,8 @@ $pre-color: null !default;
480
483
  $kbd-padding-y: 0.1875rem !default;
481
484
  $kbd-padding-x: 0.375rem !default;
482
485
  $kbd-font-size: $font-size-code !default;
483
- $kbd-color: var(--body-bg) !default;
484
- $kbd-bg: var(--body-color) !default;
486
+ $kbd-color: var(--body-background) !default;
487
+ $kbd-background: var(--body-color) !default;
485
488
 
486
489
  $table-cell-padding-y: calc(($spacer * 0.625) - 1px) !default;
487
490
  $table-cell-padding-x: calc($spacer * 0.5) !default;
@@ -536,6 +539,9 @@ $box-shadows: (
536
539
  "large": $box-shadow-large,
537
540
  ) !default;
538
541
 
542
+ $component-active-color: $white !default;
543
+ $component-active-background: $primary !default;
544
+
539
545
  $embeds: (
540
546
  "32by9": 28.125%,
541
547
  "21by9": 42.8571%,
@@ -553,9 +559,9 @@ $list-nested-indicator-color: rgba($body-color, 25%) !default;
553
559
  $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;
554
560
 
555
561
  $form-file-indicator-color: rgba($body-color, 25%) !default;
556
- $form-file-indicator-color-hover: rgba($body-color, 50%) !default;
562
+ $form-file-indicator-hover-color: rgba($body-color, 50%) !default;
557
563
  $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;
558
- $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-color-hover}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
564
+ $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;
559
565
 
560
566
  $form-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
561
567
  box-shadow 0.15s ease-in-out;
@@ -572,15 +578,19 @@ $label-color: $body-color !default;
572
578
  $input-button-border-width: $border-width !default;
573
579
  $input-button-border-style: $border-style !default;
574
580
  $input-button-border-color: rgba($border-color-main, $border-opacity) !default;
575
- $input-button-border-color-hover: rgba($border-color-main, $border-opacity-hover) !default;
581
+ $input-button-hover-border-color: rgba($border-color-main, $border-hover-opacity) !default;
582
+ $input-button-active-border-color: rgba($border-color-main, $border-active-opacity) !default;
576
583
  $input-button-border-radius: $border-radius-default !default;
577
584
  $input-button-border-radius-large: $border-radius-large !default;
578
585
  $input-button-border-radius-small: $border-radius-small !default;
579
586
 
580
587
  $input-button-background-color: $white !default;
581
588
 
589
+ $input-button-font-size: $font-size-base !default;
582
590
  $input-button-font-size-large: $font-size-large !default;
583
591
  $input-button-font-size-small: $font-size-small !default;
592
+ $input-button-font-family: $font-family-sans-serif !default;
593
+ $input-button-line-height: $line-height-base !default;
584
594
 
585
595
  $input-button-padding-y: calc($spacer * 0.375) !default;
586
596
  $input-button-padding-x: calc($spacer * 0.75) !default;
@@ -589,16 +599,26 @@ $input-button-padding-x-large: calc($spacer * 1.25) !default;
589
599
  $input-button-padding-y-small: calc($spacer * 0.25) !default;
590
600
  $input-button-padding-x-small: calc($spacer * 0.5) !default;
591
601
 
592
- $input-button-focus-box-shadow: 0 0 0 calc($spacer * 0.25) $input-button-border-color !default;
593
- $input-button-disabled-opacity: 65% !default;
602
+ // $input-button-focus-box-shadow: 0 0 0 calc($spacer * 0.25) $input-button-border-color !default;
603
+ // $input-button-focus-box-shadow: 0 0 $input-button-focus-blur $input-button-focus-width $input-button-focus-color !default;
604
+
605
+ $input-button-focus-width: 0.25rem !default;
606
+ $input-button-focus-color-opacity: 0.25 !default;
607
+ $input-button-focus-color: rgba($component-active-background, $input-button-focus-color-opacity) !default;
608
+ $input-button-focus-blur: 0 !default;
609
+ $input-button-focus-box-shadow: 0 0 $input-button-focus-blur $input-button-focus-width $input-button-focus-color !default;
594
610
 
611
+ $input-button-disabled-opacity: 65% !default;
595
612
  $input-button-detail-color: $primary !default;
596
613
 
597
614
  // Input
615
+ $input-font-weight: $font-weight-normal !default;
616
+ $input-line-height: $input-button-line-height !default;
598
617
  $input-border-width: $input-button-border-width !default;
599
618
  $input-border-style: $input-button-border-style !default;
600
619
  $input-border-color: $input-button-border-color !default;
601
- $input-border-color-hover: $input-button-border-color-hover !default;
620
+ $input-hover-border-color: $input-button-hover-border-color !default;
621
+ $input-active-border-color: $input-button-active-border-color !default;
602
622
  $input-border-radius: $input-button-border-radius !default;
603
623
  $input-border-radius-large: $input-button-border-radius-large !default;
604
624
  $input-border-radius-small: $input-button-border-radius-small !default;
@@ -612,8 +632,10 @@ $input-padding-x-large: $input-button-padding-x-large !default;
612
632
  $input-padding-y-small: $input-button-padding-y-small !default;
613
633
  $input-padding-x-small: $input-button-padding-x-small !default;
614
634
 
635
+ $input-font-size: $input-button-font-size !default;
615
636
  $input-font-size-large: $input-button-font-size-large !default;
616
637
  $input-font-size-small: $input-button-font-size-small !default;
638
+ $input-font-family: $input-button-font-family !default;
617
639
 
618
640
  $input-focus-box-shadow: $input-button-focus-box-shadow !default;
619
641
 
@@ -622,13 +644,24 @@ $input-size: calc(($font-size-base * $line-height-base + ($input-padding-y * 2))
622
644
  $input-detail-color: $input-button-detail-color !default;
623
645
 
624
646
  // Button
647
+ $button-font-weight: $font-weight-normal !default;
648
+ $button-line-height: $input-button-line-height !default;
625
649
  $button-border-width: $input-button-border-width !default;
626
650
  $button-border-style: $input-button-border-style !default;
627
651
  $button-border-color: $input-button-border-color !default;
628
- $button-border-color-hover: $input-button-border-color-hover !default;
652
+ $button-hover-border-color: $input-button-hover-border-color !default;
653
+ $button-active-border-color: $input-button-active-border-color !default;
654
+
629
655
  $button-border-radius: $input-button-border-radius !default;
630
656
  $button-border-radius-large: $input-button-border-radius-large !default;
631
657
  $button-border-radius-small: $input-button-border-radius-small !default;
658
+ $button-white-space: null !default;
659
+ $button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
660
+ box-shadow 0.15s ease-in-out !default;
661
+
662
+ $button-link-color: var(--#{$prefix}link-color) !default;
663
+ $button-link-hover-color: var(--#{$prefix}link-hover-color) !default;
664
+ $button-link-disabled-color: $gray-6 !default;
632
665
 
633
666
  $button-background-color: $input-button-background-color !default;
634
667
  $button-outline-background-color: $input-button-background-color !default;
@@ -640,18 +673,20 @@ $button-padding-x-large: $input-button-padding-x-large !default;
640
673
  $button-padding-y-small: $input-button-padding-y-small !default;
641
674
  $button-padding-x-small: $input-button-padding-x-small !default;
642
675
 
676
+ $button-font-size: $input-button-font-size !default;
643
677
  $button-font-size-large: $input-button-font-size-large !default;
644
678
  $button-font-size-small: $input-button-font-size-small !default;
679
+ $button-font-family: $input-button-font-family !default;
645
680
 
646
681
  $button-focus-box-shadow: $input-button-focus-box-shadow !default;
647
682
  $button-disabled-opacity: $input-button-disabled-opacity !default;
648
683
 
649
- $button-hover-bg-shade-amount: 15% !default;
650
- $button-hover-bg-tint-amount: 15% !default;
684
+ $button-hover-background-shade-amount: 15% !default;
685
+ $button-hover-background-tint-amount: 15% !default;
651
686
  $button-hover-border-shade-amount: 20% !default;
652
687
  $button-hover-border-tint-amount: 10% !default;
653
- $button-active-bg-shade-amount: 20% !default;
654
- $button-active-bg-tint-amount: 20% !default;
688
+ $button-active-background-shade-amount: 20% !default;
689
+ $button-active-background-tint-amount: 20% !default;
655
690
  $button-active-border-shade-amount: 25% !default;
656
691
  $button-active-border-tint-amount: 10% !default;
657
692
 
@@ -665,7 +700,7 @@ $button-active-box-shadow: inset 0 3px 5px rgba($black, 12.5%) !default;
665
700
  $button-close-indicator-color: $white !default;
666
701
  $button-close-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$button-close-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
667
702
  $button-close-background-color: rgba($border-color-main, $border-opacity) !default;
668
- $button-close-background-color-hover: rgba($border-color-main, $border-opacity-hover) !default;
703
+ $button-close-hover-background-color: rgba($border-color-main, $border-hover-opacity) !default;
669
704
  $button-close-height: calc($spacer * 1.5) !default;
670
705
  $button-close-width: calc($spacer * 1.5) !default;
671
706
  $button-close-height-small: calc($spacer * 1) !default;
@@ -687,7 +722,7 @@ $tag-background: $light !default;
687
722
  $tag-border-color: rgba($border-color-main, $border-opacity) !default;
688
723
  $tag-border-radius: $border-radius-default !default;
689
724
  $tag-color: $body-color !default;
690
- $tag-bg-scale: 0% !default;
725
+ $tag-background-scale: 0% !default;
691
726
  $tag-color-scale: 80% !default;
692
727
  $tag-padding-y: calc(($spacer * 0.25) - 1px) !default;
693
728
  $tag-padding-x: calc(($spacer * 0.5) - 1px) !default;
@@ -696,7 +731,7 @@ $tag-padding-x: calc(($spacer * 0.5) - 1px) !default;
696
731
  $pill-background: $light !default;
697
732
  $pill-border-color: rgba($border-color-main, $border-opacity) !default;
698
733
  $pill-color: $body-color !default;
699
- $pill-bg-scale: 0% !default;
734
+ $pill-background-scale: 0% !default;
700
735
  $pill-color-scale: 90% !default;
701
736
 
702
737
  // Nav
@@ -711,19 +746,19 @@ $nav-item-padding-y: $input-button-padding-y !default;
711
746
  $nav-item-padding-x: $input-button-padding-x !default;
712
747
  $nav-item-color: $body-color !default;
713
748
  $nav-item-color-disabled: rgba($nav-item-color, 75%) !default;
714
- $nav-item-color-hover: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
715
- $nav-item-color-active: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
749
+ $nav-item-hover-color: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
750
+ $nav-item-active-color: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
716
751
  $nav-item-background-color: transparent !default;
717
752
  $nav-item-background-color-opacity: 5% !default;
718
- $nav-item-background-color-hover: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
719
- $nav-item-background-color-active: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
753
+ $nav-item-hover-background-color: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
754
+ $nav-item-active-background-color: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
720
755
  $nav-tab-item-padding: calc(($input-button-padding-y) - 1.5px) $input-button-padding-x !default;
721
756
  $nav-tab-card-item-padding: calc(($input-button-padding-y) - 1px) $input-button-padding-x !default;
722
757
 
723
758
  // Breadcrumbs
724
759
  $breadcrumb-color: $medium !default;
725
760
  $breadcrumb-link-color: $medium !default;
726
- $breadcrumb-link-color-hover: color.mix(black, $breadcrumb-link-color, $link-shade-percentage) !default;
761
+ $breadcrumb-link-hover-color: color.mix(black, $breadcrumb-link-color, $link-shade-percentage) !default;
727
762
  $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;
728
763
 
729
764
  // Details