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/css-variables/components/dialogue.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  --#{variables.$prefix}dialogue-name-font-size: #{variables.$dialogue-name-font-size};
9
9
  --#{variables.$prefix}dialogue-name-padding-x: #{variables.$dialogue-name-padding-x};
10
10
  --#{variables.$prefix}dialogue-name-padding-y: #{variables.$dialogue-name-padding-y};
11
- --#{variables.$prefix}dialogue-messege-arrow-width: #{variables.$dialogue-messege-arrow-width};
12
- --#{variables.$prefix}dialogue-messege-arrow-height: #{variables.$dialogue-messege-arrow-height};
11
+ --#{variables.$prefix}dialogue-message-arrow-width: #{variables.$dialogue-message-arrow-width};
12
+ --#{variables.$prefix}dialogue-message-arrow-height: #{variables.$dialogue-message-arrow-height};
13
13
  --#{variables.$prefix}dialogue-message-inner-padding-x: #{variables.$dialogue-message-inner-padding-x};
14
14
  --#{variables.$prefix}dialogue-message-inner-padding-y: #{variables.$dialogue-message-inner-padding-y};
15
15
  }
package/src/css-variables/miscellaneous.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
3
  :root {
4
- --#{variables.$prefix}z-index-tabula: #{variables.$z-index-tabula};
4
+ --#{variables.$prefix}z-index-dub: #{variables.$z-index-dub};
5
5
 
6
6
  --#{variables.$prefix}z-index-modal: #{variables.$z-index-modal};
7
7
  --#{variables.$prefix}z-index-modal-content: #{variables.$z-index-modal-content};
package/src/functions/color.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use "sass:map";
2
+
3
+ @function getColorFromColors($colors, $colorName) {
4
+ @each $color in $colors {
5
+ $name: map.get($color, "name");
6
+
7
+ @if ($name == $colorName) {
8
+ @return $color;
9
+ }
10
+ }
11
+
12
+ @return null;
13
+ }
package/src/functions/index.scss CHANGED
@@ -1 +1,2 @@
1
1
  @forward "./string.scss";
2
+ @forward "./color.scss";
package/src/functions/string.scss CHANGED
@@ -29,3 +29,15 @@
29
29
  }
30
30
  @return $str;
31
31
  }
32
+
33
+ @function colorLightnessNumberToString($num) {
34
+ @if ($num <= 5) {
35
+ @return "05";
36
+ }
37
+
38
+ @if ($num >= 95) {
39
+ @return "95";
40
+ }
41
+
42
+ @return zeroPadding($num, 2);
43
+ }
package/src/layouts/centering.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /// ⚠️`.centering` has side-effect!
2
- .centering {
2
+ :where(.centering) {
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: center;
package/src/layouts/columns.scss CHANGED
@@ -3,14 +3,15 @@
3
3
  @use "../variables/index.scss" as variables;
4
4
  @use "../functions/index.scss" as functions;
5
5
 
6
- .columns {
6
+ :where(.columns) {
7
7
  --#{variables.$prefix}gutter-x: 0rem;
8
8
  --#{variables.$prefix}gutter-y: 0rem;
9
9
  @include mixins.element();
10
10
  display: flex;
11
11
  flex-direction: row;
12
12
  flex-wrap: wrap;
13
- margin-top: calc(var(--#{variables.$prefix}gutter-y) * -1);
13
+ margin-top: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
14
+ margin-bottom: calc(var(--#{variables.$prefix}gutter-y) * -0.5);
14
15
  margin-right: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
15
16
  margin-left: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
16
17
  @for $p from 0 through 20 {
package/src/layouts/container.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "../functions/index.scss" as functions;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .container {
5
+ :where(.container) {
6
6
  --#{variables.$prefix}gutter-x: 0rem;
7
7
  --#{variables.$prefix}gutter-y: 0rem;
8
8
  @include mixins.element();
package/src/mixins/color.scss CHANGED
@@ -1,33 +1 @@
1
1
  @use "../variables/index.scss" as variables;
2
-
3
- @mixin setCssVariableColorScheme($colorScheme: "") {
4
- @if $colorScheme == "light" or $colorScheme == "dark" {
5
- @media (prefers-color-scheme: $colorScheme) {
6
- :root {
7
- @content;
8
- }
9
- }
10
- [data-color-scheme="#{$colorScheme}"] {
11
- @content;
12
- }
13
- } @else {
14
- [data-color-scheme="#{$colorScheme}"] {
15
- @content;
16
- }
17
- }
18
- }
19
-
20
- @mixin setColorScheme($colorScheme: "") {
21
- @if $colorScheme == "light" or $colorScheme == "dark" {
22
- @media (prefers-color-scheme: $colorScheme) {
23
- @content;
24
- }
25
- [data-color-scheme="#{$colorScheme}"] {
26
- @content;
27
- }
28
- } @else {
29
- [data-color-scheme="#{$colorScheme}"] {
30
- @content;
31
- }
32
- }
33
- }
package/src/mixins/element.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @mixin element() {
2
2
  box-sizing: border-box;
3
- margin: 0;
4
- padding: 0;
3
+ margin: unset;
4
+ padding: unset;
5
5
  }
package/src/mixins/responsive.scss CHANGED
@@ -216,7 +216,8 @@
216
216
  position: relative;
217
217
  width: 100%;
218
218
  max-width: 100%;
219
- padding-top: calc(var(--#{variables.$prefix}gutter-y));
219
+ padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
220
+ padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
220
221
  padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
221
222
  padding-left: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
222
223
  }
package/src/utilities/color.scss CHANGED
@@ -302,9 +302,5 @@
302
302
  }
303
303
 
304
304
  @include colorUtilities();
305
- @include mixins.setColorScheme("light") {
306
- @include colorUtilities("light");
307
- }
308
- @include mixins.setColorScheme("dark") {
309
- @include colorUtilities("dark");
310
- }
305
+ @include colorUtilities("light");
306
+ @include colorUtilities("dark");