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/link.scss CHANGED
@@ -2,27 +2,71 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .link {
5
+ :where(.link) {
6
+ --#{variables.$prefix}link-color-fore: var(
7
+ --#{variables.$prefix}color-default-link-fore,
8
+ var(--#{variables.$prefix}color-default-fore)
9
+ );
10
+ --#{variables.$prefix}link-color-visited-fore: var(
11
+ --#{variables.$prefix}color-default-link-visited-fore,
12
+ var(--#{variables.$prefix}color-default-visited-fore)
13
+ );
14
+
15
+ --#{variables.$prefix}link-color-selection-fore: var(
16
+ --#{variables.$prefix}color-default-link-selection-fore,
17
+ var(--#{variables.$prefix}color-default-selection-fore)
18
+ );
19
+ --#{variables.$prefix}link-color-selection-back: var(
20
+ --#{variables.$prefix}color-default-link-selection-back,
21
+ var(--#{variables.$prefix}color-default-selection-back)
22
+ );
23
+
6
24
  @include mixins.element();
7
- color: var(--#{variables.$prefix}color-default-link-fore);
8
- text-decoration: underline;
9
- &:hover {
10
- text-decoration: none;
25
+ color: var(--#{variables.$prefix}link-color-fore);
26
+ text-decoration: none;
27
+ touch-action: manipulation;
28
+ cursor: pointer;
29
+
30
+ &::selection {
31
+ color: var(--#{variables.$prefix}link-color-selection-fore);
32
+ background-color: var(--#{variables.$prefix}link-color-selection-back);
33
+ }
34
+
35
+ &:hover,
36
+ &.is-hover,
37
+ &.is-hovered {
38
+ text-decoration: underline;
11
39
  }
40
+
12
41
  :focus:not(:focus-visible) {
13
42
  outline: none;
14
43
  }
15
- &:visited {
16
- color: var(--#{variables.$prefix}color-default-link-visited-fore);
44
+
45
+ &:visited,
46
+ &.is-visited {
47
+ color: var(--#{variables.$prefix}link-color-visited-fore);
17
48
  }
49
+
18
50
  @if (not variables.$is-skelton) {
19
- @each $color in variables.$colors {
51
+ @each $color in variables.$allColors {
20
52
  $colorName: map.get($color, "name");
21
53
  &.is-#{$colorName} {
22
- color: var(--#{variables.$prefix}color-#{$colorName}-link-fore);
23
- &:visited {
24
- color: var(--#{variables.$prefix}color-#{$colorName}-link-visited-fore);
25
- }
54
+ --#{variables.$prefix}link-color-fore: var(
55
+ --#{variables.$prefix}color-#{$colorName}-link-fore,
56
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
57
+ );
58
+ --#{variables.$prefix}link-color-visited-fore: var(
59
+ --#{variables.$prefix}color-#{$colorName}-link-visited-fore,
60
+ var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
61
+ );
62
+ --#{variables.$prefix}link-color-selection-fore: var(
63
+ --#{variables.$prefix}color-#{$colorName}-link-selection-fore,
64
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
65
+ );
66
+ --#{variables.$prefix}link-color-selection-back: var(
67
+ --#{variables.$prefix}color-#{$colorName}-link-selection-back,
68
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
69
+ );
26
70
  }
27
71
  }
28
72
  }
package/src/components/list.scss CHANGED
@@ -1,16 +1,46 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
1
3
  @use "../mixins/index.scss" as mixins;
2
4
 
3
- .list {
5
+ @mixin base-list() {
4
6
  @include mixins.element();
5
- display: block;
6
- list-style: none;
7
- &.is-style-decimal {
8
- list-style: decimal;
7
+ display: grid;
8
+ }
9
+
10
+ @mixin base-list-item() {
11
+ @include mixins.element();
12
+ display: list-item;
13
+ }
14
+
15
+ :where(.list) {
16
+ @include base-list();
17
+ --#{variables.$prefix}list-gutter-y: 1rem;
18
+ --#{variables.$prefix}list-indent: 1.5rem;
19
+ gap: var(--#{variables.$prefix}list-gutter-y) 0;
20
+ > :where(.list-item) {
21
+ @include base-list-item();
22
+ margin-left: var(--#{variables.$prefix}list-indent);
9
23
  }
10
- &.is-style-disc {
11
- list-style: disc;
24
+ }
25
+
26
+ :where(.ordered-list) {
27
+ @include base-list();
28
+ --#{variables.$prefix}ordered-list-gutter-y: 1rem;
29
+ --#{variables.$prefix}ordered-list-indent: 1.5rem;
30
+ gap: var(--#{variables.$prefix}ordered-list-gutter-y) 0;
31
+ > :where(.ordered-list-item) {
32
+ @include base-list-item();
33
+ margin-left: var(--#{variables.$prefix}ordered-list-indent);
12
34
  }
13
- .list-item {
14
- display: list-item;
35
+ }
36
+
37
+ :where(.unordered-list) {
38
+ @include base-list();
39
+ --#{variables.$prefix}unordered-list-gutter-y: 1rem;
40
+ --#{variables.$prefix}unordered-list-indent: 1.5rem;
41
+ gap: var(--#{variables.$prefix}unordered-list-gutter-y) 0;
42
+ > :where(.unordered-list-item) {
43
+ @include base-list-item();
44
+ margin-left: var(--#{variables.$prefix}unordered-list-indent);
15
45
  }
16
46
  }
package/src/components/loader.scss CHANGED
@@ -2,7 +2,11 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .loader {
5
+ :where(.loader) {
6
+ --#{variables.$prefix}loader-color-fore: var(
7
+ --#{variables.$prefix}color-default-loader-fore
8
+ );
9
+
6
10
  @include mixins.element();
7
11
  @include mixins.animation() {
8
12
  animation-iteration-count: infinite;
@@ -10,11 +14,9 @@
10
14
  animation-timing-function: linear;
11
15
  aspect-ratio: 1;
12
16
  border-radius: 50%;
13
- background: var(--#{variables.$prefix}color-default-loader-fore);
14
- mask: conic-gradient(
15
- #0000 10%,
16
- var(--#{variables.$prefix}color-default-back)
17
- ),
17
+ background: var(--#{variables.$prefix}loader-color-fore);
18
+ mask:
19
+ conic-gradient(#0000 10%, var(--#{variables.$prefix}color-default-back)),
18
20
  linear-gradient(var(--#{variables.$prefix}color-default-back) 0 0)
19
21
  content-box;
20
22
  mask-composite: subtract;
@@ -53,10 +55,10 @@
53
55
  }
54
56
 
55
57
  @if (not variables.$is-skelton) {
56
- @each $color in variables.$colors {
58
+ @each $color in variables.$allColors {
57
59
  $colorName: map.get($color, "name");
58
60
  &.is-#{$colorName} {
59
- background: var(
61
+ --#{variables.$prefix}loader-color-fore: var(
60
62
  --#{variables.$prefix}color-#{$colorName}-loader-fore
61
63
  );
62
64
  }
package/src/components/main.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "../mixins/index.scss" as mixins;
2
2
 
3
- .main {
3
+ :where(.main) {
4
4
  @include mixins.element();
5
5
  position: relative;
6
6
  display: block;
package/src/components/message.scss CHANGED
@@ -2,51 +2,127 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .message {
5
+ :where(.message) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}message-color-fore: var(
8
+ --#{variables.$prefix}color-default-message-fore
9
+ );
10
+ --#{variables.$prefix}message-color-back: var(
11
+ --#{variables.$prefix}color-default-message-back
12
+ );
13
+ --#{variables.$prefix}message-color-border: var(
14
+ --#{variables.$prefix}color-default-message-border
15
+ );
16
+ --#{variables.$prefix}message-color-selection-fore: var(
17
+ --#{variables.$prefix}color-default-message-selection-fore,
18
+ var(--#{variables.$prefix}color-default-selection-fore)
19
+ );
20
+ --#{variables.$prefix}message-color-selection-back: var(
21
+ --#{variables.$prefix}color-default-message-selection-back,
22
+ var(--#{variables.$prefix}color-default-selection-back)
23
+ );
24
+
25
+ --#{variables.$prefix}message-header-color-fore: var(
26
+ --#{variables.$prefix}color-default-message-header-fore
27
+ );
28
+ --#{variables.$prefix}message-header-color-back: var(
29
+ --#{variables.$prefix}color-default-message-header-back
30
+ );
31
+ --#{variables.$prefix}message-header-color-border: var(
32
+ --#{variables.$prefix}color-default-message-header-border
33
+ );
34
+
35
+ --#{variables.$prefix}message-body-color-fore: var(
36
+ --#{variables.$prefix}color-default-message-body-fore
37
+ );
38
+ --#{variables.$prefix}message-body-color-back: var(
39
+ --#{variables.$prefix}color-default-message-body-back
40
+ );
41
+ --#{variables.$prefix}message-body-color-border: var(
42
+ --#{variables.$prefix}color-default-message-body-border
43
+ );
44
+ //#endregion local css variables
45
+
6
46
  @include mixins.element();
7
47
  display: block;
8
- background-color: var(--#{variables.$prefix}color-default-message-back);
9
- border-color: var(--#{variables.$prefix}color-default-message-border);
48
+ background-color: var(--#{variables.$prefix}message-color-back);
49
+ border-color: var(--#{variables.$prefix}message-color-border);
10
50
  border-radius: var(--#{variables.$prefix}border-radius-medium);
11
51
  border-style: solid;
12
52
  border-width: var(--#{variables.$prefix}border-width-thin);
13
- color: var(--#{variables.$prefix}color-default-messaage-fore);
14
- >.message-header {
53
+ color: var(--#{variables.$prefix}color-message-fore);
54
+
55
+ &::selection {
56
+ color: var(--#{variables.$prefix}message-color-selection-fore);
57
+ background-color: var(--#{variables.$prefix}message-color-selection-back);
58
+ }
59
+
60
+ > :where(.message-header) {
15
61
  @include mixins.element();
16
- background-color: var(--#{variables.$prefix}color-default-message-header-back);
17
- border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
18
- color: var(--#{variables.$prefix}color-default-message-header-fore);
62
+ background-color: var(--#{variables.$prefix}message-header-color-back);
63
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
64
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
65
+ color: var(--#{variables.$prefix}message-header-color-fore);
19
66
  display: block;
20
67
  font-size: var(--#{variables.$prefix}font-size-medium);
21
68
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
22
69
  padding: 0.5rem;
23
70
  }
24
- >.message-body {
71
+ > :where(.message-body) {
25
72
  @include mixins.element();
26
- background-color: var(--#{variables.$prefix}color-default-message-body-back);
27
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
28
- color: var(--#{variables.$prefix}color-default-message-body-fore);
73
+ background-color: var(--#{variables.$prefix}message-body-color-back);
74
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
75
+ var(--#{variables.$prefix}border-radius-medium);
76
+ color: var(--#{variables.$prefix}message-body-color-fore);
29
77
  display: block;
30
78
  padding: 0.5rem;
79
+
31
80
  &:first-child {
32
81
  border-radius: var(--#{variables.$prefix}border-radius-medium);
33
82
  }
34
83
  }
84
+
35
85
  @if (not variables.$is-skelton) {
36
- @each $color in variables.$colors {
86
+ @each $color in variables.$allColors {
37
87
  $colorName: map.get($color, "name");
38
88
  &.is-#{$colorName} {
39
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-back);
40
- border-color: var(--#{variables.$prefix}color-#{$colorName}-message-border);
41
- color: var(--#{variables.$prefix}color-#{$colorName}-message-fore);
42
- >.message-header {
43
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-header-back);
44
- color: var(--#{variables.$prefix}color-#{$colorName}-message-header-fore);
45
- }
46
- >.message-body {
47
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-body-back);
48
- color: var(--#{variables.$prefix}color-#{$colorName}-message-body-fore);
49
- }
89
+ --#{variables.$prefix}message-color-fore: var(
90
+ --#{variables.$prefix}color-#{$colorName}-message-fore
91
+ );
92
+ --#{variables.$prefix}message-color-back: var(
93
+ --#{variables.$prefix}color-#{$colorName}-message-back
94
+ );
95
+ --#{variables.$prefix}message-color-border: var(
96
+ --#{variables.$prefix}color-#{$colorName}-message-border
97
+ );
98
+ --#{variables.$prefix}message-color-selection-fore: var(
99
+ --#{variables.$prefix}color-#{$colorName}-message-selection-fore,
100
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
101
+ );
102
+ --#{variables.$prefix}message-color-selection-back: var(
103
+ --#{variables.$prefix}color-#{$colorName}-message-selection-back,
104
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
105
+ );
106
+
107
+ --#{variables.$prefix}message-header-color-fore: var(
108
+ --#{variables.$prefix}color-#{$colorName}-message-header-fore
109
+ );
110
+ --#{variables.$prefix}message-header-color-back: var(
111
+ --#{variables.$prefix}color-#{$colorName}-message-header-back
112
+ );
113
+ --#{variables.$prefix}message-header-color-border: var(
114
+ --#{variables.$prefix}color-#{$colorName}-message-header-border
115
+ );
116
+
117
+ --#{variables.$prefix}message-body-color-fore: var(
118
+ --#{variables.$prefix}color-#{$colorName}-message-body-fore
119
+ );
120
+ --#{variables.$prefix}message-body-color-back: var(
121
+ --#{variables.$prefix}color-#{$colorName}-message-body-back
122
+ );
123
+ --#{variables.$prefix}message-body-color-border: var(
124
+ --#{variables.$prefix}color-#{$colorName}-message-body-border
125
+ );
50
126
  }
51
127
  }
52
128
  }
package/src/components/modal.scss CHANGED
@@ -2,24 +2,32 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .modal {
5
+ :where(.modal) {
6
+ --#{variables.$prefix}modal-color-back: var(
7
+ --#{variables.$prefix}color-default-back
8
+ );
9
+
6
10
  @include mixins.element();
7
11
  align-items: center;
8
- background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
12
+ background-color: oklch(
13
+ from var(--#{variables.$prefix}modal-color-back) l c h / 0.75
14
+ );
15
+ border: none;
9
16
  display: none;
10
17
  flex-direction: column;
11
- height: 100vh;
18
+ height: 100%;
12
19
  justify-content: center;
13
20
  left: 0;
14
21
  overflow: hidden;
15
22
  position: fixed;
16
23
  top: 0;
17
- width: 100vw;
24
+ width: 100%;
18
25
  z-index: var(--#{variables.$prefix}z-index-modal);
26
+ overscroll-behavior-block: contain;
19
27
  &.is-active {
20
28
  display: flex;
21
29
  }
22
- >.modal-content {
30
+ > .modal-content {
23
31
  @include mixins.element();
24
32
  max-height: 100%;
25
33
  max-width: 100%;
@@ -31,10 +39,12 @@
31
39
  z-index: var(--#{variables.$prefix}z-index-modal-content);
32
40
  }
33
41
  @if (not variables.$is-skelton) {
34
- @each $color in variables.$colors {
35
- $colorName: map.get($color, "name");
42
+ @each $color in variables.$allColors {
43
+ $colorName: map.get($color, "name");
36
44
  &.is-#{$colorName} {
37
- background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-back-oklch) / 0.75);
45
+ --#{variables.$prefix}modal-color-back: var(
46
+ --#{variables.$prefix}color-#{$colorName}-back
47
+ );
38
48
  }
39
49
  }
40
50
  }