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/card.scss CHANGED
@@ -2,87 +2,186 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .card {
5
+ :where(.card) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}card-color-fore: var(
8
+ --#{variables.$prefix}color-default-card-fore
9
+ );
10
+ --#{variables.$prefix}card-color-back: var(
11
+ --#{variables.$prefix}color-default-card-back
12
+ );
13
+ --#{variables.$prefix}card-color-border: var(
14
+ --#{variables.$prefix}color-default-card-border
15
+ );
16
+ --#{variables.$prefix}card-color-shadow: var(
17
+ --#{variables.$prefix}color-default-card-shadow
18
+ );
19
+
20
+ --#{variables.$prefix}card-color-selection-fore: var(
21
+ --#{variables.$prefix}color-default-card-selection-fore,
22
+ var(--#{variables.$prefix}color-default-selection-fore)
23
+ );
24
+ --#{variables.$prefix}card-color-selection-back: var(
25
+ --#{variables.$prefix}color-default-card-selection-back,
26
+ var(--#{variables.$prefix}color-default-selection-back)
27
+ );
28
+
29
+ --#{variables.$prefix}card-header-color-fore: var(
30
+ --#{variables.$prefix}color-default-card-header-fore
31
+ );
32
+ --#{variables.$prefix}card-header-color-back: var(
33
+ --#{variables.$prefix}color-default-card-header-back
34
+ );
35
+ --#{variables.$prefix}card-header-color-border: var(
36
+ --#{variables.$prefix}color-default-card-header-border
37
+ );
38
+
39
+ --#{variables.$prefix}card-body-color-fore: var(
40
+ --#{variables.$prefix}color-default-card-body-fore
41
+ );
42
+ --#{variables.$prefix}card-body-color-back: var(
43
+ --#{variables.$prefix}color-default-card-body-back
44
+ );
45
+ --#{variables.$prefix}card-body-color-border: var(
46
+ --#{variables.$prefix}color-default-card-body-border
47
+ );
48
+
49
+ --#{variables.$prefix}card-footer-color-fore: var(
50
+ --#{variables.$prefix}color-default-card-footer-fore
51
+ );
52
+ --#{variables.$prefix}card-footer-color-back: var(
53
+ --#{variables.$prefix}color-default-card-footer-back
54
+ );
55
+ --#{variables.$prefix}card-footer-color-border: var(
56
+ --#{variables.$prefix}color-default-card-footer-border
57
+ );
58
+
59
+ --#{variables.$prefix}card-border-width: var(
60
+ --#{variables.$prefix}border-width-thin
61
+ );
62
+ --#{variables.$prefix}card-border-radius: var(
63
+ --#{variables.$prefix}border-radius-medium
64
+ );
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
68
  display: block;
8
- background-color: var(--#{variables.$prefix}color-default-card-back);
69
+ background-color: var(--#{variables.$prefix}card-color-back);
70
+ // backdrop-filter: blur(1rem);
9
71
  border-radius: calc(
10
- var(--#{variables.$prefix}border-radius-medium) +
11
- var(--#{variables.$prefix}border-width-thin)
72
+ var(--#{variables.$prefix}card-border-radius) +
73
+ var(--#{variables.$prefix}card-border-width)
12
74
  );
13
- border-color: var(--#{variables.$prefix}color-default-card-border);
75
+ border-color: var(--#{variables.$prefix}card-color-border);
14
76
  border-style: solid;
15
- border-width: var(--#{variables.$prefix}border-width-thin);
16
- color: var(--#{variables.$prefix}color-default-card-fore);
77
+ border-width: var(--#{variables.$prefix}card-border-width);
78
+ color: var(--#{variables.$prefix}card-color-fore);
79
+
17
80
  &.has-shadow {
18
- box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-card-shadow);
81
+ box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}card-color-shadow);
82
+ }
83
+
84
+ &::selection {
85
+ color: var(--#{variables.$prefix}card-color-selection-fore);
86
+ background-color: var(--#{variables.$prefix}card-color-selection-back);
19
87
  }
20
- >.card-header {
88
+
89
+ > .card-header {
21
90
  @include mixins.element();
22
- background-color: var(--#{variables.$prefix}color-default-card-header-back);
23
- border-radius: var(--#{variables.$prefix}border-radius-medium)
24
- var(--#{variables.$prefix}border-radius-medium) 0 0;
25
- color: var(--#{variables.$prefix}color-default-card-header-fore);
91
+ background-color: var(--#{variables.$prefix}card-header-color-back);
92
+ border-radius: var(--#{variables.$prefix}card-border-radius)
93
+ var(--#{variables.$prefix}card-border-radius) 0 0;
94
+ color: var(--#{variables.$prefix}card-header-color-fore);
26
95
  padding: 0.5rem;
27
96
  display: block;
28
97
  font-size: var(--#{variables.$prefix}font-size-medium);
29
98
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
30
99
  }
31
- >.card-body {
100
+ > .card-body {
32
101
  @include mixins.element();
33
- background-color: var(--#{variables.$prefix}color-default-card-body-back);
34
- color: var(--#{variables.$prefix}color-default-card-body-fore);
102
+ background-color: var(--#{variables.$prefix}card-body-color-back);
103
+ color: var(--#{variables.$prefix}card-body-color-fore);
35
104
  padding: 0.5rem;
36
105
  display: block;
37
106
  &:first-child {
38
- border-radius: var(--#{variables.$prefix}border-radius-medium)
39
- var(--#{variables.$prefix}border-radius-medium) 0 0;
107
+ border-radius: var(--#{variables.$prefix}card-border-radius)
108
+ var(--#{variables.$prefix}card-border-radius) 0 0;
40
109
  }
41
110
  &:last-child {
42
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
43
- var(--#{variables.$prefix}border-radius-medium);
111
+ border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
112
+ var(--#{variables.$prefix}card-border-radius);
44
113
  }
45
114
  &:only-child {
46
- border-radius: var(--#{variables.$prefix}border-radius-medium);
115
+ border-radius: var(--#{variables.$prefix}card-border-radius);
47
116
  }
48
117
  }
49
- >.card-footer {
118
+ > .card-footer {
50
119
  @include mixins.element();
51
- background-color: var(--#{variables.$prefix}color-default-card-footer-back);
52
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
53
- var(--#{variables.$prefix}border-radius-medium);
54
- color: var(--#{variables.$prefix}color-default-card-footer-fore);
120
+ background-color: var(--#{variables.$prefix}card-footer-color-back);
121
+ border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
122
+ var(--#{variables.$prefix}card-border-radius);
123
+ color: var(--#{variables.$prefix}card-footer-color-fore);
55
124
  padding: 0.5rem;
56
125
  display: block;
57
126
  }
58
127
 
59
128
  @if (not variables.$is-skelton) {
60
- @each $color in variables.$colors {
129
+ @each $color in variables.$allColors {
61
130
  $colorName: map.get($color, "name");
62
131
  &.is-#{$colorName} {
63
- background-color: var(
132
+ //#region local css variables
133
+ --#{variables.$prefix}card-color-fore: var(
134
+ --#{variables.$prefix}color-#{$colorName}-card-fore
135
+ );
136
+ --#{variables.$prefix}card-color-back: var(
64
137
  --#{variables.$prefix}color-#{$colorName}-card-back
65
138
  );
66
- border-color: var(--#{variables.$prefix}color-#{$colorName}-card-border);
67
- color: var(--#{variables.$prefix}color-#{$colorName}-card-fore);
68
- >.card-header {
69
- background-color: var(
70
- --#{variables.$prefix}color-#{$colorName}-card-header-back
71
- );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-card-header-fore);
73
- }
74
- >.card-body {
75
- background-color: var(
76
- --#{variables.$prefix}color-#{$colorName}-card-body-back
77
- );
78
- color: var(--#{variables.$prefix}color-#{$colorName}-card-body-fore);
79
- }
80
- >.card-footer {
81
- background-color: var(
82
- --#{variables.$prefix}color-#{$colorName}-card-footer-back
83
- );
84
- color: var(--#{variables.$prefix}color-#{$colorName}-card-footer-fore);
85
- }
139
+ --#{variables.$prefix}card-color-border: var(
140
+ --#{variables.$prefix}color-#{$colorName}-card-border
141
+ );
142
+ --#{variables.$prefix}card-color-shadow: var(
143
+ --#{variables.$prefix}color-#{$colorName}-card-shadow
144
+ );
145
+
146
+ --#{variables.$prefix}card-color-selection-fore: var(
147
+ --#{variables.$prefix}color-#{$colorName}-card-selection-fore,
148
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
149
+ );
150
+ --#{variables.$prefix}card-color-selection-back: var(
151
+ --#{variables.$prefix}color-#{$colorName}-card-selection-back,
152
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
153
+ );
154
+
155
+ --#{variables.$prefix}card-header-color-fore: var(
156
+ --#{variables.$prefix}color-#{$colorName}-card-header-fore
157
+ );
158
+ --#{variables.$prefix}card-header-color-back: var(
159
+ --#{variables.$prefix}color-#{$colorName}-card-header-back
160
+ );
161
+ --#{variables.$prefix}card-header-color-border: var(
162
+ --#{variables.$prefix}color-#{$colorName}-card-header-border
163
+ );
164
+
165
+ --#{variables.$prefix}card-body-color-fore: var(
166
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
167
+ );
168
+ --#{variables.$prefix}card-body-color-back: var(
169
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
170
+ );
171
+ --#{variables.$prefix}card-body-color-border: var(
172
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
173
+ );
174
+
175
+ --#{variables.$prefix}card-footer-color-fore: var(
176
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
177
+ );
178
+ --#{variables.$prefix}card-footer-color-back: var(
179
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
180
+ );
181
+ --#{variables.$prefix}card-footer-color-border: var(
182
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
183
+ );
184
+ //#endregion local css variables
86
185
  }
87
186
  }
88
187
  }
package/src/components/description-list.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ :where(.description-list) {
6
+ --#{variables.$prefix}description-list-gutter-y: 1rem;
7
+ --#{variables.$prefix}description-details-indent: 2rem;
8
+ @include mixins.element();
9
+ display: grid;
10
+ gap: var(--#{variables.$prefix}description-list-gutter-y) 0;
11
+
12
+ &.has-marker {
13
+ > :where(.description-list-item) {
14
+ display: list-item;
15
+ list-style-type: disc;
16
+ margin-left: var(--#{variables.$prefix}description-details-indent);
17
+ > :where(.description-details) {
18
+ @include mixins.element();
19
+ margin-left: 0;
20
+ }
21
+ }
22
+ }
23
+
24
+ > :where(.description-list-item) {
25
+ @include mixins.element();
26
+ display: block;
27
+
28
+ &.has-separater {
29
+ > :where(.description-term) {
30
+ &::after {
31
+ content: ":";
32
+ }
33
+ }
34
+ }
35
+
36
+ > :where(.description-term) {
37
+ @include mixins.element();
38
+ font-weight: var(--#{variables.$prefix}font-weight-semibold);
39
+ }
40
+
41
+ > :where(.description-details) {
42
+ @include mixins.element();
43
+ margin-left: var(--#{variables.$prefix}description-details-indent);
44
+ }
45
+ }
46
+ }