minolith 0.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 (68) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +1 -0
  3. package/dist/css/minolith.css +196773 -0
  4. package/dist/css/minolith.css.map +1 -0
  5. package/dist/css/minolith.min.css +4 -0
  6. package/dist/css/minolith.min.css.map +1 -0
  7. package/package.json +46 -0
  8. package/src/animations/fade.scss +41 -0
  9. package/src/animations/index.scss +1 -0
  10. package/src/backgrounds/gingham.scss +47 -0
  11. package/src/backgrounds/index.scss +2 -0
  12. package/src/backgrounds/stripe.scss +33 -0
  13. package/src/base/index.scss +3 -0
  14. package/src/base/normalize.scss +389 -0
  15. package/src/base/tabula.scss +7 -0
  16. package/src/components/accordion.scss +115 -0
  17. package/src/components/badge.scss +95 -0
  18. package/src/components/button.scss +109 -0
  19. package/src/components/card.scss +53 -0
  20. package/src/components/footer.scss +8 -0
  21. package/src/components/hamburger.scss +152 -0
  22. package/src/components/header.scss +16 -0
  23. package/src/components/heading.scss +37 -0
  24. package/src/components/image.scss +7 -0
  25. package/src/components/index.scss +19 -0
  26. package/src/components/input.scss +220 -0
  27. package/src/components/label.scss +5 -0
  28. package/src/components/link.scss +28 -0
  29. package/src/components/list.scss +14 -0
  30. package/src/components/loader.scss +38 -0
  31. package/src/components/main.scss +5 -0
  32. package/src/components/message.scss +41 -0
  33. package/src/components/modal.scss +36 -0
  34. package/src/components/nav.scss +373 -0
  35. package/src/components/progress.scss +39 -0
  36. package/src/css-variables/animation.scss +11 -0
  37. package/src/css-variables/border.scss +16 -0
  38. package/src/css-variables/color.scss +262 -0
  39. package/src/css-variables/index.scss +6 -0
  40. package/src/css-variables/miscellaneous.scss +10 -0
  41. package/src/css-variables/typography.scss +19 -0
  42. package/src/functions/index.scss +1 -0
  43. package/src/functions/string.scss +17 -0
  44. package/src/icons/check.scss +21 -0
  45. package/src/icons/chevron.scss +30 -0
  46. package/src/icons/index.scss +2 -0
  47. package/src/layouts/container.scss +19 -0
  48. package/src/layouts/index.scss +2 -0
  49. package/src/minolith.scss +10 -0
  50. package/src/mixins/animation.scss +80 -0
  51. package/src/mixins/color.scss +33 -0
  52. package/src/mixins/index.scss +4 -0
  53. package/src/mixins/responsive.scss +220 -0
  54. package/src/utilities/border.scss +47 -0
  55. package/src/utilities/color.scss +217 -0
  56. package/src/utilities/decoration.scss +16 -0
  57. package/src/utilities/index.scss +7 -0
  58. package/src/utilities/positioning.scss +44 -0
  59. package/src/utilities/sizing.scss +109 -0
  60. package/src/utilities/spacing.scss +111 -0
  61. package/src/utilities/typography.scss +105 -0
  62. package/src/variables/animation.scss +8 -0
  63. package/src/variables/border.scss +56 -0
  64. package/src/variables/color.scss +415 -0
  65. package/src/variables/index.scss +7 -0
  66. package/src/variables/layout.scss +28 -0
  67. package/src/variables/miscellaneous.scss +10 -0
  68. package/src/variables/typography.scss +22 -0
package/src/components/input.scss ADDED
@@ -0,0 +1,220 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+
4
+ .input {
5
+ background-color: var(--#{variables.$prefix}color-default-back);
6
+ border-color: var(--#{variables.$prefix}color-default-border);
7
+ border-radius: 0.5rem;
8
+ border-style: solid;
9
+ border-width: var(--border-width-medium);
10
+ padding: 0.5rem;
11
+ &::placeholder {
12
+ color: var(--#{variables.$prefix}color-default-placeholder);
13
+ }
14
+ &:focus,
15
+ &.is-focus,
16
+ &.is-focused {
17
+ background-color: var(--#{variables.$prefix}color-default-focus-back);
18
+ border-color: var(--#{variables.$prefix}color-default-focus-border);
19
+ }
20
+ &[disabled],
21
+ fieldset[disabled],
22
+ &.is-disabled {
23
+ background-color: var(--#{variables.$prefix}color-default-disabled-back);
24
+ border-color: var(--#{variables.$prefix}color-default-disabled-border);
25
+ }
26
+ @each $color in variables.$colors {
27
+ $colorName: map.get($color, "name");
28
+ &.is-#{$colorName} {
29
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
30
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
31
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
32
+ &::placeholder {
33
+ color: var(--#{variables.$prefix}color-#{$colorName}-placeholder);
34
+ }
35
+ &:focus,
36
+ &.is-focus,
37
+ &.is-focused {
38
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-focus-back);
39
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-focus-border);
40
+ }
41
+ &[disabled],
42
+ fieldset[disabled],
43
+ &.is-disabled {
44
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-back);
45
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-border);
46
+ }
47
+ }
48
+ }
49
+ }
50
+
51
+ .input-text {
52
+ @extend .input;
53
+ }
54
+
55
+ .input-checkbox {
56
+ @extend .input;
57
+ appearance: none;
58
+ border-radius: 25%;
59
+ cursor: pointer;
60
+ height: 1rem;
61
+ line-height: 1.5;
62
+ position: relative;
63
+ vertical-align: middle;
64
+ width: 1rem;
65
+ &:after {
66
+ background-color: transparent;
67
+ border-color: transparent;
68
+ border-radius: 25%;
69
+ border-style: solid;
70
+ border-width: 0 var(--#{variables.$prefix}border-width-medium) var(--#{variables.$prefix}border-width-medium) 0;
71
+ content: "";
72
+ display: block;
73
+ height: 1rem;
74
+ left: 0.25rem;
75
+ position: absolute;
76
+ top: -0.33rem;
77
+ transform: rotate(45deg);
78
+ width: 0.5rem;
79
+ }
80
+ &:checked {
81
+ &:after {
82
+ border-color: var(--#{variables.$prefix}color-default-fore);
83
+ }
84
+ }
85
+ &[disabled],
86
+ fieldset[disabled],
87
+ &.is-disabled {
88
+ background-color: var(--#{variables.$prefix}color-default-disabled-back);
89
+ border-color: var(--#{variables.$prefix}color-default-disabled-border);
90
+ &:checked {
91
+ &:after {
92
+ border-color: var(--#{variables.$prefix}color-default-disabled-fore);
93
+ }
94
+ }
95
+ }
96
+ @each $color in variables.$colors {
97
+ $colorName: map.get($color, "name");
98
+ &.is-#{$colorName} {
99
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
100
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
101
+ &:checked {
102
+ &:after {
103
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
104
+ }
105
+ }
106
+ &[disabled],
107
+ fieldset[disabled],
108
+ &.is-disabled {
109
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-back);
110
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-border);
111
+ &:checked {
112
+ &:after {
113
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-fore);
114
+ }
115
+ }
116
+ }
117
+ }
118
+ }
119
+ }
120
+
121
+ .input-radio {
122
+ @extend .input;
123
+ appearance: none;
124
+ border-radius: 50%;
125
+ cursor: pointer;
126
+ height: 1rem;
127
+ line-height: 1.5;
128
+ position: relative;
129
+ vertical-align: middle;
130
+ width: 1rem;
131
+ &:after {
132
+ background-color: transparent;
133
+ border-color: transparent;
134
+ border-radius: 50%;
135
+ border-style: solid;
136
+ border-width: var(--border-width-medium);
137
+ content: "";
138
+ display: block;
139
+ height: 0.5rem;
140
+ left: 0.125rem;
141
+ position: absolute;
142
+ top: 0.125rem;
143
+ width: 0.5rem;
144
+ }
145
+ &:checked {
146
+ &:after {
147
+ background-color: var(--#{variables.$prefix}color-default-fore);
148
+ border-color: var(--#{variables.$prefix}color-default-fore);
149
+ }
150
+ }
151
+ &[disabled],
152
+ fieldset[disabled],
153
+ &.is-disabled {
154
+ background-color: var(--#{variables.$prefix}color-default-disabled-back);
155
+ border-color: var(--#{variables.$prefix}color-default-disabled-border);
156
+ &:checked {
157
+ &:after {
158
+ border-color: var(--#{variables.$prefix}color-default-disabled-fore);
159
+ }
160
+ }
161
+ }
162
+ @each $color in variables.$colors {
163
+ $colorName: map.get($color, "name");
164
+ &.is-#{$colorName} {
165
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
166
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
167
+ &:checked {
168
+ &:after {
169
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
170
+ }
171
+ }
172
+ &[disabled],
173
+ fieldset[disabled],
174
+ &.is-disabled {
175
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-back);
176
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-border);
177
+ &:checked {
178
+ &:after {
179
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-fore);
180
+ }
181
+ }
182
+ }
183
+ }
184
+ }
185
+ }
186
+
187
+
188
+ .input-color {
189
+ @extend .input;
190
+ cursor: pointer;
191
+ height: 2.5rem;
192
+ }
193
+
194
+ .input[type="text"],
195
+ .input[type="email"],
196
+ .input[type="number"],
197
+ .input[type="password"] {
198
+ @extend .input-text;
199
+ }
200
+
201
+ textarea{
202
+ &.input {
203
+ @extend .input-text;
204
+ min-height: min-content;
205
+ width: 100%;
206
+ field-sizing: content;
207
+ }
208
+ }
209
+
210
+ .input[type="checkbox"] {
211
+ @extend .input-checkbox;
212
+ }
213
+
214
+ .input[type="radio"] {
215
+ @extend .input-radio;
216
+ }
217
+
218
+ .input[type="color"] {
219
+ @extend .input-color;
220
+ }
package/src/components/label.scss ADDED
@@ -0,0 +1,5 @@
1
+ @use "../variables/index.scss" as variables;
2
+
3
+ .label {
4
+ font-weight: var(--#{variables.$prefix}font-weight-semibold);
5
+ }
package/src/components/link.scss ADDED
@@ -0,0 +1,28 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+
4
+ .link {
5
+ color: var(--#{variables.$prefix}color-default-fore);
6
+ text-decoration: underline;
7
+ &:hover {
8
+ text-decoration: none;
9
+ }
10
+ :focus:not(:focus-visible) {
11
+ outline: none;
12
+ }
13
+ &:visited {
14
+ color: var(--#{variables.$prefix}color-default-visited-fore);
15
+ }
16
+ @each $color in variables.$colors {
17
+ $colorName: map.get($color, "name");
18
+ &.is-#{$colorName} {
19
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
20
+ &:hover {
21
+ color: var(--#{variables.$prefix}color-#{$colorName}-hover-fore);
22
+ }
23
+ &:visited {
24
+ color: var(--#{variables.$prefix}color-#{$colorName}-visited-fore);
25
+ }
26
+ }
27
+ }
28
+ }
package/src/components/list.scss ADDED
@@ -0,0 +1,14 @@
1
+
2
+ .list {
3
+ display: block;
4
+ list-style: none;
5
+ &.is-style-decimal {
6
+ list-style: decimal;
7
+ }
8
+ &.is-style-disc {
9
+ list-style: disc;
10
+ }
11
+ .list-item {
12
+ display: list-item;
13
+ }
14
+ }
package/src/components/loader.scss ADDED
@@ -0,0 +1,38 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ .loader {
6
+ @include mixins.animation() {
7
+ animation-iteration-count: infinite;
8
+ animation-name: loader-lotate;
9
+ animation-timing-function: linear;
10
+ aspect-ratio: 1;
11
+ border-radius: 50%;
12
+ background: var(--#{variables.$prefix}color-default-border);
13
+ mask: conic-gradient(#0000 10%, var(--#{variables.$prefix}color-default-back)),
14
+ linear-gradient(var(--#{variables.$prefix}color-default-back) 0 0) content-box;
15
+ mask-composite: subtract;
16
+ width: 2rem;
17
+ padding: 0.5rem;
18
+ &.is-small {
19
+ width: 1rem;
20
+ padding: 0.25rem;
21
+ }
22
+ &.is-large {
23
+ width: 4rem;
24
+ }
25
+
26
+ @each $color in variables.$colors {
27
+ $colorName: map.get($color, "name");
28
+ &.is-#{$colorName} {
29
+ background: var(--#{variables.$prefix}color-#{$colorName}-border);
30
+ }
31
+ }
32
+ }
33
+ }
34
+ @keyframes loader-lotate {
35
+ to {
36
+ transform: rotate(1turn);
37
+ }
38
+ }
package/src/components/main.scss ADDED
@@ -0,0 +1,5 @@
1
+ .main {
2
+ position: relative;
3
+ display: block;
4
+ width: 100%;
5
+ }
package/src/components/message.scss ADDED
@@ -0,0 +1,41 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+
4
+ .message {
5
+ display: block;
6
+ background-color: var(--#{variables.$prefix}color-default-message-back);
7
+ border-radius: var(--#{variables.$prefix}border-radius-medium);
8
+ color: var(--#{variables.$prefix}color-default-messaage-fore);
9
+ .message-header {
10
+ background-color: var(--#{variables.$prefix}color-default-message-header-back);
11
+ border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
12
+ color: var(--#{variables.$prefix}color-default-message-header-fore);
13
+ padding: 0.5rem;
14
+ display: block;
15
+ font-size: var(--#{variables.$prefix}font-size-medium);
16
+ font-weight: var(--#{variables.$prefix}font-weight-semibold);
17
+ }
18
+ .message-body {
19
+ background-color: var(--#{variables.$prefix}color-default-message-body-back);
20
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
21
+ color: var(--#{variables.$prefix}color-default-message-body-fore);
22
+ padding: 0.5rem;
23
+ display: block;
24
+ }
25
+
26
+ @each $color in variables.$colors {
27
+ $colorName: map.get($color, "name");
28
+ &.is-#{$colorName} {
29
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-message-back);
30
+ color: var(--#{variables.$prefix}color-#{$colorName}-message-fore);
31
+ .message-header {
32
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-message-header-back);
33
+ color: var(--#{variables.$prefix}color-#{$colorName}-message-header-fore);
34
+ }
35
+ .message-body {
36
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-message-body-back);
37
+ color: var(--#{variables.$prefix}color-#{$colorName}-message-body-fore);
38
+ }
39
+ }
40
+ }
41
+ }
package/src/components/modal.scss ADDED
@@ -0,0 +1,36 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+
4
+ .modal {
5
+ align-items: center;
6
+ background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
7
+ display: none;
8
+ flex-direction: column;
9
+ height: 100vh;
10
+ justify-content: center;
11
+ left: 0;
12
+ overflow: hidden;
13
+ position: fixed;
14
+ top: 0;
15
+ width: 100vw;
16
+ z-index: var(--#{variables.$prefix}z-index-modal);
17
+ &.is-active {
18
+ display: flex;
19
+ }
20
+ .modal-content {
21
+ max-height: 100%;
22
+ max-width: 100%;
23
+ min-height: 2rem;
24
+ min-width: 2rem;
25
+ margin: auto;
26
+ overflow-x: hidden;
27
+ overflow-y: auto;
28
+ z-index: var(--#{variables.$prefix}z-index-modal-content);
29
+ }
30
+ @each $color in variables.$colors {
31
+ $colorName: map.get($color, "name");
32
+ &.is-#{$colorName} {
33
+ background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-back-oklch) / 0.75);
34
+ }
35
+ }
36
+ }