claritas-web-framework 8.2.0 → 8.3.1

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 (76) hide show
  1. package/dist/index.css +6 -67
  2. package/dist/index.html +1 -1
  3. package/index.html +3 -1
  4. package/package.json +9 -15
  5. package/sass/_functions.scss +4 -15
  6. package/sass/_helpers.scss +1 -6
  7. package/sass/_mixins.scss +0 -11
  8. package/sass/_modules.scss +0 -30
  9. package/sass/_reboot.scss +8 -12
  10. package/sass/_root.scss +2 -1
  11. package/sass/_utilities.scss +0 -16
  12. package/sass/_variables.scss +9 -3
  13. package/sass/helpers/_container.scss +0 -3
  14. package/sass/helpers/_embed.scss +0 -1
  15. package/sass/helpers/_grid.scss +0 -10
  16. package/sass/helpers/_link.scss +0 -1
  17. package/sass/helpers/_rfs.scss +303 -0
  18. package/sass/helpers/_screenReader.scss +0 -2
  19. package/sass/helpers/_wrap.scss +0 -1
  20. package/sass/index.scss +2 -7
  21. package/sass/mixins/_breakpoints.scss +6 -29
  22. package/sass/mixins/_button.scss +0 -2
  23. package/sass/mixins/_caret.scss +1 -5
  24. package/sass/mixins/_clearfix.scss +0 -1
  25. package/sass/mixins/_colors.scss +3 -5
  26. package/sass/mixins/_container.scss +0 -3
  27. package/sass/mixins/_gradient.scss +0 -1
  28. package/sass/mixins/_grid.scss +3 -22
  29. package/sass/mixins/_group.scss +1 -7
  30. package/sass/mixins/_list.scss +1 -5
  31. package/sass/mixins/_screenReader.scss +0 -1
  32. package/sass/modules/_alert.scss +1 -5
  33. package/sass/modules/_breadcrumbs.scss +0 -3
  34. package/sass/modules/_button.scss +1 -11
  35. package/sass/modules/_card.scss +1 -10
  36. package/sass/modules/_close.scss +0 -1
  37. package/sass/modules/_details.scss +3 -5
  38. package/sass/modules/_dialog.scss +0 -2
  39. package/sass/modules/_dropdown.scss +0 -2
  40. package/sass/modules/_form.scss +1 -7
  41. package/sass/modules/_list.scss +2 -14
  42. package/sass/modules/_loader.scss +0 -10
  43. package/sass/modules/_modal.scss +0 -2
  44. package/sass/modules/_nav.scss +0 -4
  45. package/sass/modules/_pill.scss +1 -8
  46. package/sass/modules/_tabs.scss +1 -6
  47. package/sass/modules/_tag.scss +1 -9
  48. package/sass/modules/_tile.scss +1 -8
  49. package/sass/modules/_tooltip.scss +0 -6
  50. package/sass/modules/form/_checkbox.scss +0 -6
  51. package/sass/modules/form/_file.scss +0 -11
  52. package/sass/modules/form/_formFieldGroup.scss +0 -2
  53. package/sass/modules/form/_output.scss +0 -1
  54. package/sass/modules/form/_progress.scss +0 -2
  55. package/sass/modules/form/_radio.scss +0 -6
  56. package/sass/modules/form/_range.scss +0 -21
  57. package/sass/modules/form/_select.scss +0 -1
  58. package/sass/modules/form/_switch.scss +0 -5
  59. package/sass/modules/form/_text.scss +0 -1
  60. package/sass/modules/form/_toggle.scss +0 -4
  61. package/sass/utilities/_align.scss +0 -4
  62. package/sass/utilities/_border.scss +0 -2
  63. package/sass/utilities/_colors.scss +0 -9
  64. package/sass/utilities/_display.scss +0 -4
  65. package/sass/utilities/_flex.scss +0 -3
  66. package/sass/utilities/_float.scss +0 -3
  67. package/sass/utilities/_order.scss +0 -3
  68. package/sass/utilities/_overflow.scss +0 -3
  69. package/sass/utilities/_pointerEvents.scss +0 -3
  70. package/sass/utilities/_position.scss +0 -3
  71. package/sass/utilities/_size.scss +0 -3
  72. package/sass/utilities/_spacing.scss +0 -3
  73. package/sass/utilities/_typography.scss +0 -3
  74. package/sass/utilities/_visibility.scss +0 -3
  75. package/sass/utilities/_zIndex.scss +0 -3
  76. package/.stylelintrc.json +0 -40
package/dist/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container"><div class="grid"><div class="col--tablet-4"><div class="card"><div class="card--body">Card</div></div></div><div class="col--8"><div class="card"><div class="card--body">Card</div></div></div></div></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"><div class="grid"><div class="col--tablet-4"><div class="card"><div class="card--body">Card</div></div></div><div class="col--8"><div class="card"><div class="card--body"><button type="button" class="button button--danger">Click me</button></div></div></div></div></div></body></html>
package/index.html CHANGED
@@ -17,7 +17,9 @@
17
17
  </div>
18
18
  <div class="col--8">
19
19
  <div class="card">
20
- <div class="card--body">Card</div>
20
+ <div class="card--body">
21
+ <button type="button" class="button button--danger">Click me</button>
22
+ </div>
21
23
  </div>
22
24
  </div>
23
25
  </div>
package/package.json CHANGED
@@ -1,13 +1,11 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.2.0",
3
+ "version": "8.3.1",
4
4
  "description": "The CSS framework built for Claritas front end.",
5
5
  "main": "index.js",
6
6
  "scripts": {
7
7
  "build": "webpack --config webpack.config.js --mode production",
8
8
  "start": "webpack serve --config webpack.config.js --mode development",
9
- "stylelint": "npx stylelint **/*.scss",
10
- "stylelint-fix": "npx stylelint **/*.scss --fix",
11
9
  "find-unused-sass-variables": "npx find-unused-sass-variables ./sass/"
12
10
  },
13
11
  "repository": {
@@ -19,21 +17,17 @@
19
17
  "devDependencies": {
20
18
  "css-loader": "^7.1.2",
21
19
  "find-unused-sass-variables": "^6.0.0",
22
- "html-webpack-plugin": "^5.6.0",
23
- "mini-css-extract-plugin": "^2.9.0",
24
- "prettier": "^3.3.2",
25
- "sass-loader": "^14.2.1",
26
- "stylelint": "^16.6.1",
27
- "stylelint-config-standard": "^36.0.1",
28
- "stylelint-config-standard-scss": "^13.1.0",
29
- "stylelint-scss": "^6.4.0",
30
- "webpack": "^5.92.1",
20
+ "html-webpack-plugin": "^5.6.3",
21
+ "mini-css-extract-plugin": "^2.9.2",
22
+ "prettier": "^3.3.3",
23
+ "sass-loader": "^16.0.3",
24
+ "webpack": "^5.96.1",
31
25
  "webpack-cli": "^5.1.4",
32
- "webpack-dev-server": "^5.0.4"
26
+ "webpack-dev-server": "^5.1.0"
33
27
  },
34
28
  "dependencies": {
35
- "modern-normalize": "^2.0.0",
29
+ "modern-normalize": "^3.0.1",
36
30
  "rfs": "^10.0.0",
37
- "sass": "^1.77.7"
31
+ "sass": "^1.81.0"
38
32
  }
39
33
  }
package/sass/_functions.scss CHANGED
@@ -1,9 +1,6 @@
1
1
  @use "sass:color";
2
-
3
2
  @use "sass:math";
4
-
5
3
  @use "sass:string";
6
-
7
4
  @use "./variables" as *;
8
5
 
9
6
  // Functions
@@ -32,17 +29,13 @@
32
29
  // Requires the use of quotes around data URIs.
33
30
 
34
31
  @function escape-svg($string) {
35
-
36
32
  @if string.index($string, "data:image/svg+xml") {
37
-
38
33
  @each $char, $encoded in $escaped-characters {
39
34
  // Do not escape the url brackets
40
35
 
41
36
  @if string.index($string, "url(") == 1 {
42
- $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
43
- }
44
-
45
- @else {
37
+ $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
38
+ } @else {
46
39
  $string: str-replace($string, $char, $encoded);
47
40
  }
48
41
  }
@@ -52,15 +45,11 @@
52
45
  }
53
46
 
54
47
  @function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l, $opacity: 100%) {
55
- $color-sum: math.max(color.lightness($value), 0%);
48
+ $color-sum: math.max(color.channel($value, "lightness", $space: hsl), 0%);
56
49
 
57
50
  @if $color-sum > $threshold {
58
-
59
51
  @return hsl(var(--dark-h) var(--dark-s) var(--dark-l) / $opacity);
60
- }
61
-
62
- @else {
63
-
52
+ } @else {
64
53
  @return hsl(var(--white-h) var(--white-s) var(--white-l) / $opacity);
65
54
  }
66
55
  }
package/sass/_helpers.scss CHANGED
@@ -1,13 +1,8 @@
1
1
  @forward "./helpers/container";
2
-
3
2
  @forward "./helpers/embed";
4
-
5
3
  @forward "./helpers/grid";
6
-
7
4
  @forward "./helpers/image";
8
-
9
5
  @forward "./helpers/link";
10
-
6
+ @forward "./helpers/rfs";
11
7
  @forward "./helpers/screenReader";
12
-
13
8
  @forward "./helpers/wrap";
package/sass/_mixins.scss CHANGED
@@ -1,23 +1,12 @@
1
1
  @forward "./mixins/breakpoints";
2
-
3
2
  @forward "./mixins/button";
4
-
5
3
  @forward "./mixins/caret";
6
-
7
4
  @forward "./mixins/clearfix";
8
-
9
5
  @forward "./mixins/colors";
10
-
11
6
  @forward "./mixins/container";
12
-
13
7
  @forward "./mixins/gradient";
14
-
15
8
  @forward "./mixins/grid";
16
-
17
9
  @forward "./mixins/group";
18
-
19
10
  @forward "./mixins/list";
20
-
21
11
  @forward "./mixins/screenReader";
22
-
23
12
  @forward "./mixins/wrap";
package/sass/_modules.scss CHANGED
@@ -1,61 +1,31 @@
1
1
  @forward "./modules/alert";
2
-
3
2
  @forward "./modules/breadcrumbs";
4
-
5
3
  @forward "./modules/button";
6
-
7
4
  @forward "./modules/card";
8
-
9
5
  @forward "./modules/close";
10
-
11
6
  @forward "./modules/details";
12
-
13
7
  @forward "./modules/dialog";
14
-
15
8
  @forward "./modules/dropdown";
16
-
17
9
  @forward "./modules/form";
18
-
19
10
  @forward "./modules/form/formFieldGroup";
20
-
21
11
  @forward "./modules/form/checkbox";
22
-
23
12
  @forward "./modules/form/file";
24
-
25
13
  @forward "./modules/form/output";
26
-
27
14
  @forward "./modules/form/progress";
28
-
29
15
  @forward "./modules/form/radio";
30
-
31
16
  @forward "./modules/form/range";
32
-
33
17
  @forward "./modules/form/select";
34
-
35
18
  @forward "./modules/form/switch";
36
-
37
19
  @forward "./modules/form/text";
38
-
39
20
  @forward "./modules/form/textarea";
40
-
41
21
  @forward "./modules/form/toggle";
42
-
43
22
  @forward "./modules/list";
44
-
45
23
  @forward "./modules/loader";
46
-
47
24
  @forward "./modules/modal";
48
-
49
25
  @forward "./modules/nav";
50
-
51
26
  @forward "./modules/pill";
52
-
53
27
  @forward "./modules/table";
54
-
55
28
  @forward "./modules/tabs";
56
-
57
29
  @forward "./modules/tag";
58
-
59
30
  @forward "./modules/tile";
60
-
61
31
  @forward "./modules/tooltip";
package/sass/_reboot.scss CHANGED
@@ -1,9 +1,6 @@
1
1
  @use "sass:color";
2
-
3
- @use "rfs/scss" as *;
4
-
2
+ @use "./helpers" as *;
5
3
  @use "./variables" as *;
6
-
7
4
  @use "./mixins" as *;
8
5
 
9
6
  body {
@@ -37,7 +34,6 @@ hr {
37
34
 
38
35
  h1,
39
36
  .h1 {
40
-
41
37
  @extend %heading;
42
38
 
43
39
  font-size: var(--font-size-1);
@@ -45,7 +41,6 @@ h1,
45
41
 
46
42
  h2,
47
43
  .h2 {
48
-
49
44
  @extend %heading;
50
45
 
51
46
  font-size: var(--font-size-2);
@@ -53,7 +48,6 @@ h2,
53
48
 
54
49
  h3,
55
50
  .h3 {
56
-
57
51
  @extend %heading;
58
52
 
59
53
  font-size: var(--font-size-3);
@@ -61,7 +55,6 @@ h3,
61
55
 
62
56
  h4,
63
57
  .h4 {
64
-
65
58
  @extend %heading;
66
59
 
67
60
  font-size: var(--font-size-4);
@@ -69,7 +62,6 @@ h4,
69
62
 
70
63
  h5,
71
64
  .h5 {
72
-
73
65
  @extend %heading;
74
66
 
75
67
  font-size: var(--font-size-5);
@@ -77,7 +69,6 @@ h5,
77
69
 
78
70
  h6,
79
71
  .h6 {
80
-
81
72
  @extend %heading;
82
73
 
83
74
  font-size: var(--font-size-6);
@@ -136,7 +127,6 @@ a {
136
127
  }
137
128
 
138
129
  a:not([href], [class]) {
139
-
140
130
  &,
141
131
  &:hover {
142
132
  color: inherit;
@@ -202,7 +192,13 @@ select {
202
192
  }
203
193
  }
204
194
 
205
- [list]:not([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
195
+ [list]:not(
196
+ [type="date"],
197
+ [type="datetime-local"],
198
+ [type="month"],
199
+ [type="week"],
200
+ [type="time"]
201
+ )::-webkit-calendar-picker-indicator {
206
202
  display: none !important;
207
203
  }
208
204
 
package/sass/_root.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  @use "./variables" as *;
2
-
3
2
  @use "./mixins/colors" as *;
4
3
 
5
4
  :root {
5
+ interpolate-size: allow-keywords;
6
+
6
7
  @include define-color-variables($title: "body-color", $color: $body-color);
7
8
 
8
9
  @include define-color-variables($title: "border-color-main", $color: $border-color-main);
package/sass/_utilities.scss CHANGED
@@ -1,33 +1,17 @@
1
1
  @forward "./utilities/align";
2
-
3
2
  @forward "./utilities/border";
4
-
5
3
  @forward "./utilities/colors";
6
-
7
4
  @forward "./utilities/display";
8
-
9
5
  @forward "./utilities/flex";
10
-
11
6
  @forward "./utilities/float";
12
-
13
7
  @forward "./utilities/order";
14
-
15
8
  @forward "./utilities/overflow";
16
-
17
9
  @forward "./utilities/pointerEvents";
18
-
19
10
  @forward "./utilities/position";
20
-
21
11
  @forward "./utilities/shadow";
22
-
23
12
  @forward "./utilities/size";
24
-
25
13
  @forward "./utilities/spacing";
26
-
27
14
  @forward "./utilities/translate";
28
-
29
15
  @forward "./utilities/typography";
30
-
31
16
  @forward "./utilities/visibility";
32
-
33
17
  @forward "./utilities/zIndex";
package/sass/_variables.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  @use "sass:map";
2
-
3
2
  @use "sass:color";
4
-
5
3
  @use "sass:math";
6
4
 
7
5
  /* --------------------------------- options -------------------------------- */
@@ -420,7 +418,12 @@ $breadcrumb-color: $medium !default;
420
418
  $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;
421
419
 
422
420
  /* ---------------------------------- modal --------------------------------- */
423
- $modal-open-background: rgba(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 50%) !default;
421
+ $modal-open-background: rgba(
422
+ color.channel($dark, "red", $space: rgb),
423
+ color.channel($dark, "green", $space: rgb),
424
+ color.channel($dark, "blue", $space: rgb),
425
+ 0.5
426
+ ) !default;
424
427
  $modal-background-blur: 4px !default;
425
428
 
426
429
  /* ---------------------------------- alert --------------------------------- */
@@ -443,3 +446,6 @@ $tag-padding-x: calc($spacer * 0.5) !default;
443
446
  $tag-padding-y: calc($spacer * 0.25) !default;
444
447
  $tag-font-weight: 400 !default;
445
448
  $tag-font-size: $font-size-small !default;
449
+
450
+ /* --------------------------------- details -------------------------------- */
451
+ $details-transition: height 500ms ease;
package/sass/helpers/_container.scss CHANGED
@@ -1,14 +1,11 @@
1
1
  @use "./../variables" as *;
2
-
3
2
  @use "./../mixins/container" as *;
4
3
 
5
4
  .container,
6
5
  .container--fluid {
7
-
8
6
  @include make-container;
9
7
  }
10
8
 
11
9
  .container {
12
-
13
10
  @include make-container-max-widths($container-max-widths, $breakpoints);
14
11
  }
package/sass/helpers/_embed.scss CHANGED
@@ -29,7 +29,6 @@
29
29
 
30
30
  @each $key, $value in $embeds {
31
31
  .embed--#{$key} {
32
-
33
32
  &::before {
34
33
  padding-top: $value !important;
35
34
  }
package/sass/helpers/_grid.scss CHANGED
@@ -1,44 +1,34 @@
1
1
  @use "sass:map";
2
-
3
2
  @use "sass:math";
4
-
5
3
  @use "./../variables" as *;
6
-
7
4
  @use "./../mixins/breakpoints" as *;
8
-
9
5
  @use "./../mixins/grid" as *;
10
6
 
11
7
  // Row
12
8
  // Rows contain your columns.
13
9
 
14
10
  :root {
15
-
16
11
  @each $name, $value in $breakpoints {
17
12
  --breakpoint-#{$name}: #{$value};
18
13
  }
19
14
  }
20
15
 
21
16
  .grid {
22
-
23
17
  @include make-row;
24
18
  }
25
19
 
26
20
  .grid--tight {
27
-
28
21
  @include make-row($grid-gutter-tight);
29
22
  }
30
23
 
31
24
  .grid,
32
25
  .grid--tight {
33
-
34
26
  > * {
35
-
36
27
  @include make-col-ready;
37
28
  }
38
29
  }
39
30
 
40
31
  @if $enable-cssgrid {
41
-
42
32
  .g-grid {
43
33
  gap: var(--gap, #{$grid-gutter});
44
34
  }
package/sass/helpers/_link.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  .link--stretched {
2
-
3
2
  &::after,
4
3
  &::before {
5
4
  position: absolute;