noctemyth 0.2.0 → 1.0.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 (80) hide show
  1. package/dist/css/noctemyth-skelton.css +3171 -8838
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3171 -8838
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +55988 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +55988 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +26697 -38194
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5866 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +28 -20
  16. package/src/backgrounds/gingham.scss +22 -21
  17. package/src/backgrounds/rhombus.scss +45 -22
  18. package/src/backgrounds/stripe.scss +19 -14
  19. package/src/backgrounds/zigzag.scss +34 -25
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +34 -4
  22. package/src/base/element.scss +1 -1
  23. package/src/base/index.scss +2 -0
  24. package/src/base/normalize.scss +0 -8
  25. package/src/base/root.scss +25 -0
  26. package/src/components/accordion.scss +183 -90
  27. package/src/components/aside.scss +7 -0
  28. package/src/components/badge.scss +170 -64
  29. package/src/components/blockquote.scss +52 -27
  30. package/src/components/breadcrumbs.scss +46 -16
  31. package/src/components/button.scss +177 -88
  32. package/src/components/card.scss +147 -48
  33. package/src/components/description-list.scss +46 -0
  34. package/src/components/dialogue.scss +194 -143
  35. package/src/components/div.scss +1 -1
  36. package/src/components/figure.scss +173 -0
  37. package/src/components/footer.scss +20 -6
  38. package/src/components/hamburger.scss +77 -51
  39. package/src/components/header.scss +42 -6
  40. package/src/components/heading.scss +6 -7
  41. package/src/components/image.scss +1 -1
  42. package/src/components/index.scss +3 -0
  43. package/src/components/input.scss +110 -69
  44. package/src/components/label.scss +34 -4
  45. package/src/components/link.scss +56 -12
  46. package/src/components/list.scss +39 -9
  47. package/src/components/loader.scss +10 -8
  48. package/src/components/main.scss +1 -1
  49. package/src/components/message.scss +100 -24
  50. package/src/components/modal.scss +18 -8
  51. package/src/components/nav.scss +600 -280
  52. package/src/components/paragraph.scss +1 -2
  53. package/src/components/progress.scss +42 -16
  54. package/src/components/section.scss +1 -1
  55. package/src/components/span.scss +1 -1
  56. package/src/css-variables/animation.scss +1 -1
  57. package/src/css-variables/border.scss +1 -1
  58. package/src/css-variables/color.scss +757 -468
  59. package/src/css-variables/components/dialogue.scss +2 -2
  60. package/src/css-variables/components/header.scss +1 -0
  61. package/src/css-variables/index.scss +1 -0
  62. package/src/css-variables/layout.scss +11 -0
  63. package/src/css-variables/miscellaneous.scss +4 -4
  64. package/src/css-variables/typography.scss +1 -1
  65. package/src/functions/color.scss +13 -0
  66. package/src/functions/index.scss +1 -0
  67. package/src/functions/string.scss +12 -0
  68. package/src/layouts/centering.scss +1 -1
  69. package/src/layouts/columns.scss +57 -51
  70. package/src/layouts/container.scss +33 -31
  71. package/src/mixins/color.scss +0 -32
  72. package/src/mixins/element.scss +2 -2
  73. package/src/mixins/responsive.scss +12 -11
  74. package/src/utilities/border.scss +4 -0
  75. package/src/utilities/color.scss +112 -6
  76. package/src/variables/color.scss +1169 -1084
  77. package/src/variables/components/dialogue.scss +2 -2
  78. package/src/variables/components/header.scss +1 -0
  79. package/src/variables/layout.scss +13 -11
  80. package/src/variables/miscellaneous.scss +1 -3
package/src/components/paragraph.scss CHANGED
@@ -2,11 +2,10 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .paragraph {
5
+ :where(.paragraph) {
6
6
  @include mixins.element();
7
7
  line-height: 1.5;
8
8
  display: block;
9
- margin: 0;
10
9
  margin-block: 0.5rem;
11
10
  margin-inline: 0;
12
11
  }
package/src/components/progress.scss CHANGED
@@ -2,16 +2,33 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .progress {
5
+ :where(.progress) {
6
+ --#{variables.$prefix}progress-color-fore: var(
7
+ --#{variables.$prefix}color-default-progress-fore,
8
+ --#{variables.$prefix}color-default-fore
9
+ );
10
+ --#{variables.$prefix}progress-color-back: var(
11
+ --#{variables.$prefix}color-default-progress-back,
12
+ --#{variables.$prefix}color-default-back
13
+ );
14
+ --#{variables.$prefix}progress-color-border: var(
15
+ --#{variables.$prefix}color-default-progress-border,
16
+ --#{variables.$prefix}color-default-border
17
+ );
18
+ --#{variables.$prefix}progress-border-width: var(--#{variables.$prefix}border-width-thick);
19
+ --#{variables.$prefix}progress-border-radius: var(--#{variables.$prefix}border-radius-pill);
20
+ --#{variables.$prefix}progress-percentage: 0;
21
+
6
22
  @include mixins.element();
7
23
  @include mixins.animation() {
8
- border-radius: var(--#{variables.$prefix}border-radius-pill);
24
+ border-radius: var(--#{variables.$prefix}progress-border-radius);
9
25
  border-style: solid;
10
- border-width: var(--#{variables.$prefix}border-width-thick);
11
- background-color: var(--#{variables.$prefix}color-default-progress-back);
12
- color: var(--#{variables.$prefix}color-default-progress-fore);
26
+ border-width: var(--#{variables.$prefix}progress-border-width);
27
+ background-color: var(--#{variables.$prefix}progress-color-back);
28
+ color: var(--#{variables.$prefix}progress-color-fore);
13
29
  height: 1rem;
14
30
  position: relative;
31
+ vertical-align: baseline;
15
32
  &::before {
16
33
  content: "";
17
34
  position: absolute;
@@ -19,23 +36,32 @@
19
36
  inset: 0 100% 0 0;
20
37
  border-radius: inherit;
21
38
  background: currentColor;
39
+ inset: 0 calc((100 - var(--#{variables.$prefix}progress-percentage)) * 1%)
40
+ 0 0;
22
41
  }
23
42
 
24
- @for $p from 0 through 100 {
25
- &.is-#{$p}percent {
26
- $val: ((100 - $p) * 1%);
27
- &::before {
28
- inset: 0 $val 0 0;
43
+ @if (not variables.$is-skelton) {
44
+ @for $p from 0 through 100 {
45
+ &.is-#{$p}percent {
46
+ --#{variables.$prefix}progress-percentage: #{$p};
29
47
  }
30
48
  }
31
- }
32
49
 
33
- @if (not variables.$is-skelton) {
34
- @each $color in variables.$colors {
35
- $colorName: map.get($color, "name");
50
+ @each $color in variables.$allColors {
51
+ $colorName: map.get($color, "name");
36
52
  &.is-#{$colorName} {
37
- background-color: var(--#{variables.$prefix}color-#{$colorName}-progress-back);
38
- color: var(--#{variables.$prefix}color-#{$colorName}-progress-fore);
53
+ --#{variables.$prefix}progress-color-fore: var(
54
+ --#{variables.$prefix}color-#{$colorName}-progress-fore,
55
+ --#{variables.$prefix}color-#{$colorName}-fore
56
+ );
57
+ --#{variables.$prefix}progress-color-back: var(
58
+ --#{variables.$prefix}color-#{$colorName}-progress-back,
59
+ --#{variables.$prefix}color-#{$colorName}-back
60
+ );
61
+ --#{variables.$prefix}progress-color-border: var(
62
+ --#{variables.$prefix}color-#{$colorName}-progress-border,
63
+ --#{variables.$prefix}color-#{$colorName}-border
64
+ );
39
65
  }
40
66
  }
41
67
  }
package/src/components/section.scss CHANGED
@@ -2,6 +2,6 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .section {
5
+ :where(.section) {
6
6
  @include mixins.element();
7
7
  }
package/src/components/span.scss CHANGED
@@ -2,6 +2,6 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .span {
5
+ :where(.span) {
6
6
  @include mixins.element();
7
7
  }
package/src/css-variables/animation.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
- :root {
3
+ :where(:root) {
4
4
  --#{variables.$prefix}animation-speed-heavy: #{variables.$animation-speed-heavy};
5
5
  --#{variables.$prefix}animation-speed-slower: #{variables.$animation-speed-slower};
6
6
  --#{variables.$prefix}animation-speed-slow: #{variables.$animation-speed-slow};
package/src/css-variables/border.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
  @use "sass:map";
3
3
 
4
- :root {
4
+ :where(:root) {
5
5
  @each $borderWidth in variables.$borderWidths {
6
6
  $name: map.get($borderWidth, "name");
7
7
  $value: map.get($borderWidth, "value");