claritas-web-framework 8.0.27 → 8.0.29

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 (72) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/index.html +29 -1
  4. package/package.json +2 -2
  5. package/sass/_functions.scss +2 -1
  6. package/sass/_helpers.scss +7 -7
  7. package/sass/_mixins.scss +12 -12
  8. package/sass/_modules.scss +31 -31
  9. package/sass/_reboot.scss +3 -2
  10. package/sass/_root.scss +2 -2
  11. package/sass/_utilities.scss +17 -17
  12. package/sass/helpers/_container.scss +2 -2
  13. package/sass/helpers/_embed.scss +1 -1
  14. package/sass/helpers/_grid.scss +4 -3
  15. package/sass/helpers/_screenReader.scss +1 -1
  16. package/sass/helpers/_wrap.scss +1 -1
  17. package/sass/index.scss +8 -8
  18. package/sass/mixins/_breakpoints.scss +2 -1
  19. package/sass/mixins/_button.scss +3 -2
  20. package/sass/mixins/_caret.scss +1 -1
  21. package/sass/mixins/_colors.scss +3 -2
  22. package/sass/mixins/_container.scss +2 -2
  23. package/sass/mixins/_gradient.scss +2 -1
  24. package/sass/mixins/_grid.scss +3 -2
  25. package/sass/mixins/_group.scss +6 -12
  26. package/sass/mixins/_list.scss +2 -2
  27. package/sass/modules/_alert.scss +2 -1
  28. package/sass/modules/_breadcrumbs.scss +5 -6
  29. package/sass/modules/_button.scss +3 -2
  30. package/sass/modules/_card.scss +3 -2
  31. package/sass/modules/_close.scss +2 -2
  32. package/sass/modules/_details.scss +2 -2
  33. package/sass/modules/_dialog.scss +2 -1
  34. package/sass/modules/_dropdown.scss +2 -3
  35. package/sass/modules/_form.scss +5 -3
  36. package/sass/modules/_list.scss +4 -3
  37. package/sass/modules/_loader.scss +1 -1
  38. package/sass/modules/_modal.scss +2 -1
  39. package/sass/modules/_nav.scss +3 -2
  40. package/sass/modules/_pill.scss +5 -3
  41. package/sass/modules/_table.scss +1 -1
  42. package/sass/modules/_tabs.scss +2 -1
  43. package/sass/modules/_tag.scss +6 -4
  44. package/sass/modules/_tile.scss +3 -2
  45. package/sass/modules/_tooltip.scss +2 -1
  46. package/sass/modules/form/_checkbox.scss +3 -2
  47. package/sass/modules/form/_file.scss +3 -2
  48. package/sass/modules/form/_formFieldGroup.scss +1 -1
  49. package/sass/modules/form/_output.scss +2 -1
  50. package/sass/modules/form/_progress.scss +2 -1
  51. package/sass/modules/form/_radio.scss +3 -2
  52. package/sass/modules/form/_range.scss +2 -1
  53. package/sass/modules/form/_select.scss +2 -2
  54. package/sass/modules/form/_switch.scss +3 -2
  55. package/sass/modules/form/_text.scss +2 -1
  56. package/sass/modules/form/_toggle.scss +3 -2
  57. package/sass/utilities/_align.scss +3 -2
  58. package/sass/utilities/_border.scss +23 -18
  59. package/sass/utilities/_colors.scss +2 -2
  60. package/sass/utilities/_display.scss +3 -2
  61. package/sass/utilities/_flex.scss +3 -2
  62. package/sass/utilities/_float.scss +3 -2
  63. package/sass/utilities/_order.scss +3 -2
  64. package/sass/utilities/_overflow.scss +3 -2
  65. package/sass/utilities/_pointerEvents.scss +3 -2
  66. package/sass/utilities/_position.scss +3 -2
  67. package/sass/utilities/_shadow.scss +1 -1
  68. package/sass/utilities/_size.scss +3 -2
  69. package/sass/utilities/_spacing.scss +3 -2
  70. package/sass/utilities/_typography.scss +3 -2
  71. package/sass/utilities/_visibility.scss +3 -2
  72. package/sass/utilities/_zIndex.scss +3 -2
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><button type="button" class="button button--primary button--outline">Click me</button></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"><div class="grid"><div class="col--desktop-3"><div class="card"><div class="card--body">Col</div></div></div><div class="col--desktop-3"><div class="card"><div class="card--body">Col</div></div></div><div class="col--desktop-3"><div class="card"><div class="card--body">Col</div></div></div><div class="col--desktop-3"><div class="card"><div class="card--body">Col</div></div></div><div class="col--desktop-3"><div class="card"><div class="card--body">Col</div></div></div></div></div></body></html>
package/index.html CHANGED
@@ -8,6 +8,34 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
- <button type="button" class="button button--primary button--outline">Click me</button>
11
+ <div class="container">
12
+ <div class="grid">
13
+ <div class="col--desktop-3">
14
+ <div class="card">
15
+ <div class="card--body">Col</div>
16
+ </div>
17
+ </div>
18
+ <div class="col--desktop-3">
19
+ <div class="card">
20
+ <div class="card--body">Col</div>
21
+ </div>
22
+ </div>
23
+ <div class="col--desktop-3">
24
+ <div class="card">
25
+ <div class="card--body">Col</div>
26
+ </div>
27
+ </div>
28
+ <div class="col--desktop-3">
29
+ <div class="card">
30
+ <div class="card--body">Col</div>
31
+ </div>
32
+ </div>
33
+ <div class="col--desktop-3">
34
+ <div class="card">
35
+ <div class="card--body">Col</div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </div>
12
40
  </body>
13
41
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.0.27",
3
+ "version": "8.0.29",
4
4
  "description": "The CSS framework built for Claritas front end.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -21,7 +21,7 @@
21
21
  "find-unused-sass-variables": "^5.0.0",
22
22
  "html-webpack-plugin": "^5.5.3",
23
23
  "mini-css-extract-plugin": "^2.7.6",
24
- "prettier": "^3.0.2",
24
+ "prettier": "^3.0.3",
25
25
  "sass": "^1.66.1",
26
26
  "sass-loader": "^13.3.2",
27
27
  "stylelint": "^15.10.3",
package/sass/_functions.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @use "sass:color";
2
2
  @use "sass:math";
3
3
  @use "sass:string";
4
- @use "./variables" as *;
4
+
5
+ @use "~/sass/variables" as *;
5
6
 
6
7
  // Functions
7
8
 
package/sass/_helpers.scss CHANGED
@@ -1,7 +1,7 @@
1
- @forward "./helpers/container";
2
- @forward "./helpers/embed";
3
- @forward "./helpers/grid";
4
- @forward "./helpers/image";
5
- @forward "./helpers/link";
6
- @forward "./helpers/screenReader";
7
- @forward "./helpers/wrap";
1
+ @forward "~/sass/helpers/container";
2
+ @forward "~/sass/helpers/embed";
3
+ @forward "~/sass/helpers/grid";
4
+ @forward "~/sass/helpers/image";
5
+ @forward "~/sass/helpers/link";
6
+ @forward "~/sass/helpers/screenReader";
7
+ @forward "~/sass/helpers/wrap";
package/sass/_mixins.scss CHANGED
@@ -1,12 +1,12 @@
1
- @forward "./mixins/breakpoints";
2
- @forward "./mixins/button";
3
- @forward "./mixins/caret";
4
- @forward "./mixins/clearfix";
5
- @forward "./mixins/colors";
6
- @forward "./mixins/container";
7
- @forward "./mixins/gradient";
8
- @forward "./mixins/grid";
9
- @forward "./mixins/group";
10
- @forward "./mixins/list";
11
- @forward "./mixins/screenReader";
12
- @forward "./mixins/wrap";
1
+ @forward "~/sass/mixins/breakpoints";
2
+ @forward "~/sass/mixins/button";
3
+ @forward "~/sass/mixins/caret";
4
+ @forward "~/sass/mixins/clearfix";
5
+ @forward "~/sass/mixins/colors";
6
+ @forward "~/sass/mixins/container";
7
+ @forward "~/sass/mixins/gradient";
8
+ @forward "~/sass/mixins/grid";
9
+ @forward "~/sass/mixins/group";
10
+ @forward "~/sass/mixins/list";
11
+ @forward "~/sass/mixins/screenReader";
12
+ @forward "~/sass/mixins/wrap";
package/sass/_modules.scss CHANGED
@@ -1,31 +1,31 @@
1
- @forward "./modules/alert";
2
- @forward "./modules/breadcrumbs";
3
- @forward "./modules/button";
4
- @forward "./modules/card";
5
- @forward "./modules/close";
6
- @forward "./modules/details";
7
- @forward "./modules/dialog";
8
- @forward "./modules/dropdown";
9
- @forward "./modules/form";
10
- @forward "./modules/form/formFieldGroup";
11
- @forward "./modules/form/checkbox";
12
- @forward "./modules/form/file";
13
- @forward "./modules/form/output";
14
- @forward "./modules/form/progress";
15
- @forward "./modules/form/radio";
16
- @forward "./modules/form/range";
17
- @forward "./modules/form/select";
18
- @forward "./modules/form/switch";
19
- @forward "./modules/form/text";
20
- @forward "./modules/form/textarea";
21
- @forward "./modules/form/toggle";
22
- @forward "./modules/list";
23
- @forward "./modules/loader";
24
- @forward "./modules/modal";
25
- @forward "./modules/nav";
26
- @forward "./modules/pill";
27
- @forward "./modules/tabs";
28
- @forward "./modules/tag";
29
- @forward "./modules/tile";
30
- @forward "./modules/table";
31
- @forward "./modules/tooltip";
1
+ @forward "~/sass/modules/alert";
2
+ @forward "~/sass/modules/breadcrumbs";
3
+ @forward "~/sass/modules/button";
4
+ @forward "~/sass/modules/card";
5
+ @forward "~/sass/modules/close";
6
+ @forward "~/sass/modules/details";
7
+ @forward "~/sass/modules/dialog";
8
+ @forward "~/sass/modules/dropdown";
9
+ @forward "~/sass/modules/form";
10
+ @forward "~/sass/modules/form/formFieldGroup";
11
+ @forward "~/sass/modules/form/checkbox";
12
+ @forward "~/sass/modules/form/file";
13
+ @forward "~/sass/modules/form/output";
14
+ @forward "~/sass/modules/form/progress";
15
+ @forward "~/sass/modules/form/radio";
16
+ @forward "~/sass/modules/form/range";
17
+ @forward "~/sass/modules/form/select";
18
+ @forward "~/sass/modules/form/switch";
19
+ @forward "~/sass/modules/form/text";
20
+ @forward "~/sass/modules/form/textarea";
21
+ @forward "~/sass/modules/form/toggle";
22
+ @forward "~/sass/modules/list";
23
+ @forward "~/sass/modules/loader";
24
+ @forward "~/sass/modules/modal";
25
+ @forward "~/sass/modules/nav";
26
+ @forward "~/sass/modules/pill";
27
+ @forward "~/sass/modules/tabs";
28
+ @forward "~/sass/modules/tag";
29
+ @forward "~/sass/modules/tile";
30
+ @forward "~/sass/modules/table";
31
+ @forward "~/sass/modules/tooltip";
package/sass/_reboot.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @use "sass:color";
2
+
2
3
  @use "~rfs/scss" as *;
3
- @use "./variables" as *;
4
- @use "./mixins" as *;
4
+ @use "~/sass/variables" as *;
5
+ @use "~/sass/mixins" as *;
5
6
 
6
7
  body {
7
8
  font-family: var(--font-family-body);
package/sass/_root.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./variables" as *;
2
- @use "./mixins/colors" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/colors" as *;
3
3
 
4
4
  :root {
5
5
  @if $font-size-root {
package/sass/_utilities.scss CHANGED
@@ -1,17 +1,17 @@
1
- @forward "./utilities/align";
2
- @forward "./utilities/border";
3
- @forward "./utilities/colors";
4
- @forward "./utilities/display";
5
- @forward "./utilities/flex";
6
- @forward "./utilities/float";
7
- @forward "./utilities/order";
8
- @forward "./utilities/overflow";
9
- @forward "./utilities/pointerEvents";
10
- @forward "./utilities/position";
11
- @forward "./utilities/shadow";
12
- @forward "./utilities/size";
13
- @forward "./utilities/spacing";
14
- @forward "./utilities/translate";
15
- @forward "./utilities/typography";
16
- @forward "./utilities/visibility";
17
- @forward "./utilities/zIndex";
1
+ @forward "~/sass/utilities/align";
2
+ @forward "~/sass/utilities/border";
3
+ @forward "~/sass/utilities/colors";
4
+ @forward "~/sass/utilities/display";
5
+ @forward "~/sass/utilities/flex";
6
+ @forward "~/sass/utilities/float";
7
+ @forward "~/sass/utilities/order";
8
+ @forward "~/sass/utilities/overflow";
9
+ @forward "~/sass/utilities/pointerEvents";
10
+ @forward "~/sass/utilities/position";
11
+ @forward "~/sass/utilities/shadow";
12
+ @forward "~/sass/utilities/size";
13
+ @forward "~/sass/utilities/spacing";
14
+ @forward "~/sass/utilities/translate";
15
+ @forward "~/sass/utilities/typography";
16
+ @forward "~/sass/utilities/visibility";
17
+ @forward "~/sass/utilities/zIndex";
package/sass/helpers/_container.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./../variables" as *;
2
- @use "./../mixins/container" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/container" as *;
3
3
 
4
4
  .container,
5
5
  .container--fluid {
package/sass/helpers/_embed.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../variables" as *;
1
+ @use "~/sass/variables" as *;
2
2
 
3
3
  .embed--32by9,
4
4
  .embed--21by9,
package/sass/helpers/_grid.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  @use "sass:map";
2
2
  @use "sass:math";
3
- @use "./../variables" as *;
4
- @use "./../mixins/breakpoints" as *;
5
- @use "./../mixins/grid" as *;
3
+
4
+ @use "~/sass/variables" as *;
5
+ @use "~/sass/mixins/breakpoints" as *;
6
+ @use "~/sass/mixins/grid" as *;
6
7
 
7
8
  // Row
8
9
  // Rows contain your columns.
package/sass/helpers/_screenReader.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../mixins/screenReader" as *;
1
+ @use "~/sass/mixins/screenReader" as *;
2
2
 
3
3
  .screen-reader {
4
4
  @include make-screen-reader(false);
package/sass/helpers/_wrap.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../mixins/wrap" as *;
1
+ @use "~/sass/mixins/wrap" as *;
2
2
 
3
3
  .wrap--overflow {
4
4
  @include make-wrap-overflow;
package/sass/index.scss CHANGED
@@ -1,10 +1,10 @@
1
- @forward "./variables";
2
- @forward "./functions";
3
- @forward "./mixins";
4
- @forward "./helpers";
5
- @forward "./utilities";
6
- @forward "./modules";
7
- @forward "./reboot";
8
- @forward "./root";
1
+ @forward "~/sass/variables";
2
+ @forward "~/sass/functions";
3
+ @forward "~/sass/mixins";
4
+ @forward "~/sass/helpers";
5
+ @forward "~/sass/utilities";
6
+ @forward "~/sass/modules";
7
+ @forward "~/sass/reboot";
8
+ @forward "~/sass/root";
9
9
 
10
10
  @import "~modern-normalize/modern-normalize.css";
package/sass/mixins/_breakpoints.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @use "./../variables" as *;
3
+
4
+ @use "~/sass/variables" as *;
4
5
 
5
6
  // Breakpoint viewport sizes and media queries.
6
7
  // Breakpoints are defined as a map of (name: minimum width), order from small to large:
package/sass/mixins/_button.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../functions" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/functions" as *;
4
5
 
5
6
  @mixin button-variant(
6
7
  $main,
package/sass/mixins/_caret.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../variables" as *;
1
+ @use "~/sass/variables" as *;
2
2
 
3
3
  @mixin make-caret($left: false, $position: calc(var(--spacer) * 0.5)) {
4
4
  position: relative;
package/sass/mixins/_colors.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../functions" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/functions" as *;
4
5
 
5
6
  @mixin define-color-variables($title, $color) {
6
7
  --#{$title}-h: #{color.hue($color)};
package/sass/mixins/_container.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./../variables" as *;
2
- @use "./../mixins/breakpoints" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/breakpoints" as *;
3
3
 
4
4
  @mixin make-container() {
5
5
  --gutter-x: #{$grid-gutter};
package/sass/mixins/_gradient.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
2
+
3
+ @use "~/sass/variables" as *;
3
4
 
4
5
  // Horizontal gradient, from left to right
5
6
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
package/sass/mixins/_grid.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  @use "sass:map";
2
2
  @use "sass:math";
3
3
  @use "sass:meta";
4
- @use "./../variables" as *;
5
- @use "./../mixins/breakpoints" as *;
4
+
5
+ @use "~/sass/variables" as *;
6
+ @use "~/sass/mixins/breakpoints" as *;
6
7
 
7
8
  // Grid system
8
9
  // Generate semantic grid columns with these mixins.
package/sass/mixins/_group.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../variables" as *;
1
+ @use "~/sass/variables" as *;
2
2
 
3
3
  @mixin make-group() {
4
4
  margin: 0;
@@ -19,25 +19,18 @@
19
19
  @include make-group;
20
20
 
21
21
  flex-direction: column;
22
-
23
- & > * {
24
- &:not(:last-child) {
25
- margin-bottom: $gap;
26
- }
27
- }
22
+ gap: $gap;
28
23
  }
29
24
 
30
25
  @mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
31
26
  @include make-group;
32
27
 
33
- & > * {
34
- &:not(:last-child) {
35
- margin-right: $gap;
36
- }
37
- }
28
+ gap: $gap;
38
29
  }
39
30
 
40
31
  @mixin make-grouped-column() {
32
+ gap: 0;
33
+
41
34
  & > * {
42
35
  &:not(:last-child) {
43
36
  border-bottom-right-radius: 0;
@@ -57,6 +50,7 @@
57
50
  $selector: if($element, $element, "*");
58
51
 
59
52
  flex-wrap: nowrap;
53
+ gap: 0;
60
54
 
61
55
  & > #{$selector} {
62
56
  &:not(:last-child) {
package/sass/mixins/_list.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./../variables" as *;
2
- @use "./../mixins/group" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/group" as *;
3
3
 
4
4
  @mixin make-list-unstyled() {
5
5
  list-style: none;
package/sass/modules/_alert.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
2
+
3
+ @use "~/sass/variables" as *;
3
4
 
4
5
  .alert {
5
6
  --alert-padding-x: var(--spacer);
package/sass/modules/_breadcrumbs.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use "./../variables" as *;
2
- @use "./../functions" as *;
3
- @use "./../mixins/list" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/functions" as *;
3
+ @use "~/sass/mixins/list" as *;
4
4
 
5
5
  .breadcrumbs {
6
6
  --breadcrumb-color: var(--medium);
@@ -13,13 +13,12 @@
13
13
  display: flex;
14
14
  flex-wrap: wrap;
15
15
  color: var(--breadcrumb-color);
16
+ gap: 1em;
16
17
 
17
18
  & li {
18
19
  position: relative;
19
20
 
20
21
  &:not(:last-child) {
21
- padding-right: 1em;
22
-
23
22
  &::after {
24
23
  content: "";
25
24
  position: absolute;
@@ -39,7 +38,7 @@
39
38
  color: var(--breadcrumb-color);
40
39
 
41
40
  &:hover {
42
- color: (--breadcrumb-hover-color);
41
+ color: var(--breadcrumb-hover-color);
43
42
  }
44
43
  }
45
44
  }
package/sass/modules/_button.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "~rfs/scss" as *;
2
- @use "./../variables" as *;
3
- @use "./../mixins" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/mixins" as *;
4
5
 
5
6
  .button {
6
7
  // Changing
package/sass/modules/_card.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../mixins/group" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/mixins/group" as *;
4
5
 
5
6
  .card {
6
7
  --card-background: var(--white);
package/sass/modules/_close.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./../variables" as *;
2
- @use "./../functions" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/functions" as *;
3
3
 
4
4
  .close {
5
5
  --close-border-radius: #{$close-border-radius};
package/sass/modules/_details.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "./../variables" as *;
2
- @use "./../mixins/caret" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/caret" as *;
3
3
 
4
4
  details {
5
5
  @if $enable-margins {
package/sass/modules/_dialog.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
2
+
3
+ @use "~/sass/variables" as *;
3
4
 
4
5
  .dialog {
5
6
  padding: var(--spacer);
package/sass/modules/_dropdown.scss CHANGED
@@ -1,6 +1,5 @@
1
- // @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../mixins/caret" as *;
1
+ @use "~/sass/variables" as *;
2
+ @use "~/sass/mixins/caret" as *;
4
3
 
5
4
  .dropdown {
6
5
  display: inline-flex;
package/sass/modules/_form.scss CHANGED
@@ -1,8 +1,10 @@
1
1
  @use "sass:color";
2
+
2
3
  @use "~rfs/scss" as *;
3
- @use "./../variables" as *;
4
- @use "./../functions" as *;
5
- @use "./../mixins/breakpoints" as *;
4
+
5
+ @use "~/sass/variables" as *;
6
+ @use "~/sass/functions" as *;
7
+ @use "~/sass/mixins/breakpoints" as *;
6
8
 
7
9
  ::placeholder {
8
10
  color: var(--gray-3);
package/sass/modules/_list.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../functions" as *;
4
- @use "./../mixins/list" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/functions" as *;
5
+ @use "~/sass/mixins/list" as *;
5
6
 
6
7
  .list--unstyled {
7
8
  @include make-list-unstyled;
package/sass/modules/_loader.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../variables" as *;
1
+ @use "~/sass/variables" as *;
2
2
 
3
3
  .loader {
4
4
  width: var(--spacer);
package/sass/modules/_modal.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
2
+
3
+ @use "~/sass/variables" as *;
3
4
 
4
5
  .modal {
5
6
  padding: 0;
package/sass/modules/_nav.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
3
- @use "./../mixins/list" as *;
2
+
3
+ @use "~/sass/variables" as *;
4
+ @use "~/sass/mixins/list" as *;
4
5
 
5
6
  .nav,
6
7
  .nav > ul {
package/sass/modules/_pill.scss CHANGED
@@ -1,8 +1,10 @@
1
1
  @use "sass:color";
2
+
2
3
  @use "~rfs/scss" as *;
3
- @use "./../variables" as *;
4
- @use "./../functions" as *;
5
- @use "./../mixins/group" as *;
4
+
5
+ @use "~/sass/variables" as *;
6
+ @use "~/sass/functions" as *;
7
+ @use "~/sass/mixins/group" as *;
6
8
 
7
9
  .pill {
8
10
  --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
package/sass/modules/_table.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./../variables" as *;
1
+ @use "~/sass/variables" as *;
2
2
 
3
3
  .table {
4
4
  width: 100%;
package/sass/modules/_tabs.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:color";
2
- @use "./../variables" as *;
2
+
3
+ @use "~/sass/variables" as *;
3
4
 
4
5
  .tabs--wrapper {
5
6
  --tabs-border-width: 1px;
package/sass/modules/_tag.scss CHANGED
@@ -1,9 +1,11 @@
1
1
  @use "sass:color";
2
+
2
3
  @use "~rfs/scss" as *;
3
- @use "./../variables" as *;
4
- @use "./../functions" as *;
5
- @use "./../mixins/colors" as *;
6
- @use "./../mixins/group" as *;
4
+
5
+ @use "~/sass/variables" as *;
6
+ @use "~/sass/functions" as *;
7
+ @use "~/sass/mixins/colors" as *;
8
+ @use "~/sass/mixins/group" as *;
7
9
 
8
10
  .tag {
9
11
  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);