noctemyth 0.2.0 → 0.3.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 (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/src/components/paragraph.scss CHANGED
@@ -2,7 +2,7 @@
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;
package/src/components/progress.scss CHANGED
@@ -2,14 +2,30 @@
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;
15
31
  &::before {
@@ -19,23 +35,32 @@
19
35
  inset: 0 100% 0 0;
20
36
  border-radius: inherit;
21
37
  background: currentColor;
38
+ inset: 0 calc((100 - var(--#{variables.$prefix}progress-percentage)) * 1%)
39
+ 0 0;
22
40
  }
23
41
 
24
- @for $p from 0 through 100 {
25
- &.is-#{$p}percent {
26
- $val: ((100 - $p) * 1%);
27
- &::before {
28
- inset: 0 $val 0 0;
42
+ @if (not variables.$is-skelton) {
43
+ @for $p from 0 through 100 {
44
+ &.is-#{$p}percent {
45
+ --#{variables.$prefix}progress-percentage: #{$p};
29
46
  }
30
47
  }
31
- }
32
48
 
33
- @if (not variables.$is-skelton) {
34
49
  @each $color in variables.$colors {
35
- $colorName: map.get($color, "name");
50
+ $colorName: map.get($color, "name");
36
51
  &.is-#{$colorName} {
37
- background-color: var(--#{variables.$prefix}color-#{$colorName}-progress-back);
38
- color: var(--#{variables.$prefix}color-#{$colorName}-progress-fore);
52
+ --#{variables.$prefix}progress-color-fore: var(
53
+ --#{variables.$prefix}color-#{$colorName}-progress-fore,
54
+ --#{variables.$prefix}color-#{$colorName}-fore
55
+ );
56
+ --#{variables.$prefix}progress-color-back: var(
57
+ --#{variables.$prefix}color-#{$colorName}-progress-back,
58
+ --#{variables.$prefix}color-#{$colorName}-back
59
+ );
60
+ --#{variables.$prefix}progress-color-border: var(
61
+ --#{variables.$prefix}color-#{$colorName}-progress-border,
62
+ --#{variables.$prefix}color-#{$colorName}-border
63
+ );
39
64
  }
40
65
  }
41
66
  }
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
  }