minolith 0.1.2 → 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 (23) hide show
  1. package/dist/css/minolith-skelton.css +502 -2847
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +502 -2847
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +5611 -33017
  6. package/dist/css/minolith.css.map +1 -1
  7. package/dist/css/minolith.min.css +66 -22984
  8. package/dist/css/minolith.min.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/backgrounds/dot.scss +12 -4
  11. package/src/backgrounds/gingham.scss +4 -2
  12. package/src/backgrounds/rhombus.scss +35 -8
  13. package/src/backgrounds/stripe.scss +7 -2
  14. package/src/backgrounds/zigzag.scss +14 -5
  15. package/src/components/button.scss +10 -10
  16. package/src/components/dialogue.scss +1 -0
  17. package/src/components/header.scss +11 -2
  18. package/src/components/image.scss +1 -0
  19. package/src/components/link.scss +1 -0
  20. package/src/components/modal.scss +14 -4
  21. package/src/css-variables/color.scss +57 -36
  22. package/src/mixins/responsive.scss +2 -1
  23. package/src/variables/color.scss +1054 -780
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "0.1.2",
3
+ "version": "1.0.0",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/backgrounds/dot.scss CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  .dot {
6
6
  --#{variables.$prefix}dot-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-dot-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-dot-fore) l c h /
8
+ calc(alpha - 0.5)
8
9
  );
9
10
  --#{variables.$prefix}dot-color-back: var(
10
11
  --#{variables.$prefix}color-default-dot-back
@@ -13,7 +14,8 @@
13
14
 
14
15
  @include mixins.element();
15
16
  background-color: var(--#{variables.$prefix}dot-color-back);
16
- background-image: radial-gradient(
17
+ background-image:
18
+ radial-gradient(
17
19
  var(--#{variables.$prefix}dot-color-fore)
18
20
  var(--#{variables.$prefix}dot-size),
19
21
  transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
@@ -23,7 +25,9 @@
23
25
  var(--#{variables.$prefix}dot-size),
24
26
  transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
25
27
  );
26
- background-position: 0 0, 1rem 1rem;
28
+ background-position:
29
+ 0 0,
30
+ 1rem 1rem;
27
31
  background-repeat: repeat;
28
32
  background-size: 2rem 2rem;
29
33
 
@@ -44,7 +48,11 @@
44
48
  $colorName: map.get($color, "name");
45
49
  &.is-#{$colorName} {
46
50
  --#{variables.$prefix}dot-color-fore: oklch(
47
- var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5
51
+ from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
52
+ l
53
+ c
54
+ h /
55
+ calc(alpha - 0.5)
48
56
  );
49
57
  --#{variables.$prefix}dot-color-back: var(
50
58
  --#{variables.$prefix}color-#{$colorName}-dot-back
package/src/backgrounds/gingham.scss CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  .gingham {
6
6
  --#{variables.$prefix}gingham-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-gingham-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-gingham-fore) l c h /
8
+ calc(alpha - 0.5)
8
9
  );
9
10
  --#{variables.$prefix}gingham-color-back: var(
10
11
  --#{variables.$prefix}color-default-gingham-back
@@ -45,7 +46,8 @@
45
46
  $colorName: map.get($color, "name");
46
47
  &.is-#{$colorName} {
47
48
  --#{variables.$prefix}gingham-color-fore: oklch(
48
- var(--#{variables.$prefix}color-#{$colorName}-gingham-fore-oklch) / 0.5
49
+ from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore) l c h /
50
+ calc(alpha - 0.5)
49
51
  );
50
52
  --#{variables.$prefix}gingham-color-back: var(
51
53
  --#{variables.$prefix}color-#{$colorName}-gingham-back
package/src/backgrounds/rhombus.scss CHANGED
@@ -7,7 +7,8 @@
7
7
 
8
8
  .rhombus {
9
9
  --#{variables.$prefix}rhombus-color-fore: oklch(
10
- var(--#{variables.$prefix}color-default-rhombus-fore-oklch) / 0.5
10
+ from var(--#{variables.$prefix}color-default-rhombus-fore) l c h /
11
+ calc(alpha - 0.5)
11
12
  );
12
13
  --#{variables.$prefix}rhombus-color-back: var(
13
14
  --#{variables.$prefix}color-default-rhombus-back
@@ -17,12 +18,34 @@
17
18
  @include mixins.element();
18
19
 
19
20
  background-color: var(--#{variables.$prefix}rhombus-color-back);
20
- background-image: linear-gradient(135deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
21
- linear-gradient(225deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
22
- linear-gradient(45deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
23
- linear-gradient(315deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, var(--#{variables.$prefix}rhombus-color-back) 25%);
24
- background-position: var(--#{variables.$prefix}rhombus-size) 0, var(--#{variables.$prefix}rhombus-size) 0, 0 0, 0 0;
25
- background-size: var(--#{variables.$prefix}rhombus-size) var(--#{variables.$prefix}rhombus-size);
21
+ background-image:
22
+ linear-gradient(
23
+ 135deg,
24
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
25
+ transparent 25%
26
+ ),
27
+ linear-gradient(
28
+ 225deg,
29
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
30
+ transparent 25%
31
+ ),
32
+ linear-gradient(
33
+ 45deg,
34
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
35
+ transparent 25%
36
+ ),
37
+ linear-gradient(
38
+ 315deg,
39
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
40
+ var(--#{variables.$prefix}rhombus-color-back) 25%
41
+ );
42
+ background-position:
43
+ var(--#{variables.$prefix}rhombus-size) 0,
44
+ var(--#{variables.$prefix}rhombus-size) 0,
45
+ 0 0,
46
+ 0 0;
47
+ background-size: var(--#{variables.$prefix}rhombus-size)
48
+ var(--#{variables.$prefix}rhombus-size);
26
49
  background-repeat: repeat;
27
50
 
28
51
  &.is-small {
@@ -38,7 +61,11 @@
38
61
  $colorName: map.get($color, "name");
39
62
  &.is-#{$colorName} {
40
63
  --#{variables.$prefix}rhombus-color-fore: oklch(
41
- var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore-oklch) / 0.5
64
+ from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
65
+ l
66
+ c
67
+ h /
68
+ calc(alpha - 0.5)
42
69
  );
43
70
  --#{variables.$prefix}rhombus-color-back: var(
44
71
  --#{variables.$prefix}color-#{$colorName}-rhombus-back
package/src/backgrounds/stripe.scss CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  .stripe {
6
6
  --#{variables.$prefix}stripe-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-stripe-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-stripe-fore) l c h /
8
+ calc(alpha - 0.5)
8
9
  );
9
10
  --#{variables.$prefix}stripe-color-back: var(
10
11
  --#{variables.$prefix}color-default-stripe-back
@@ -34,7 +35,11 @@
34
35
  $colorName: map.get($color, "name");
35
36
  &.is-#{$colorName} {
36
37
  --#{variables.$prefix}stripe-color-fore: oklch(
37
- var(--#{variables.$prefix}color-#{$colorName}-stripe-fore-oklch) / 0.5
38
+ from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
39
+ l
40
+ c
41
+ h /
42
+ calc(alpha - 0.5)
38
43
  );
39
44
  --#{variables.$prefix}stripe-color-back: var(
40
45
  --#{variables.$prefix}color-#{$colorName}-stripe-back
package/src/backgrounds/zigzag.scss CHANGED
@@ -5,7 +5,8 @@
5
5
  .zigzag {
6
6
  --#{variables.$prefix}zigzag-size: 1rem;
7
7
  --#{variables.$prefix}zigzag-color-fore: oklch(
8
- var(--#{variables.$prefix}color-default-zigzag-fore-oklch) / 0.5
8
+ from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
9
+ calc(alpha - 0.5)
9
10
  );
10
11
  --#{variables.$prefix}zigzag-color-back: var(
11
12
  --#{variables.$prefix}color-default-zigzag-back
@@ -14,7 +15,8 @@
14
15
  @include mixins.element();
15
16
 
16
17
  background-color: var(--#{variables.$prefix}zigzag-color-back);
17
- background-image: linear-gradient(
18
+ background-image:
19
+ linear-gradient(
18
20
  calc(45deg * 3),
19
21
  var(--#{variables.$prefix}zigzag-color-fore) 25%,
20
22
  transparent 25%
@@ -34,8 +36,11 @@
34
36
  var(--#{variables.$prefix}zigzag-color-fore) 25%,
35
37
  var(--#{variables.$prefix}zigzag-color-back) 25%
36
38
  );
37
- background-position: var(--#{variables.$prefix}zigzag-size) 0,
38
- var(--#{variables.$prefix}zigzag-size) 0, 0 0, 0 0;
39
+ background-position:
40
+ var(--#{variables.$prefix}zigzag-size) 0,
41
+ var(--#{variables.$prefix}zigzag-size) 0,
42
+ 0 0,
43
+ 0 0;
39
44
  background-size: calc(var(--#{variables.$prefix}zigzag-size) * 2)
40
45
  calc(var(--#{variables.$prefix}zigzag-size) * 2);
41
46
  background-repeat: repeat;
@@ -60,7 +65,11 @@
60
65
  $colorName: map.get($color, "name");
61
66
  &.is-#{$colorName} {
62
67
  --#{variables.$prefix}zigzag-color-fore: oklch(
63
- var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore-oklch) / 0.5
68
+ from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
69
+ l
70
+ c
71
+ h /
72
+ calc(alpha - 0.5)
64
73
  );
65
74
  --#{variables.$prefix}zigzag-color-back: var(
66
75
  --#{variables.$prefix}color-#{$colorName}-zigzag-back
package/src/components/button.scss CHANGED
@@ -49,16 +49,6 @@
49
49
  width: 5rem;
50
50
  }
51
51
  }
52
- &:hover,
53
- &.is-hovered,
54
- &.is-hovered {
55
- outline: none;
56
- background-color: var(
57
- --#{variables.$prefix}color-default-button-hover-back
58
- );
59
- border-color: var(--#{variables.$prefix}color-default-button-hover-border);
60
- color: var(--#{variables.$prefix}color-default-button-hover-fore);
61
- }
62
52
  &:focus,
63
53
  &.is-focus,
64
54
  &.is-focused {
@@ -69,6 +59,16 @@
69
59
  border-color: var(--#{variables.$prefix}color-default-button-focus-border);
70
60
  color: var(--#{variables.$prefix}color-default-button-focus-fore);
71
61
  }
62
+ &:hover,
63
+ &.is-hovered,
64
+ &.is-hovered {
65
+ outline: none;
66
+ background-color: var(
67
+ --#{variables.$prefix}color-default-button-hover-back
68
+ );
69
+ border-color: var(--#{variables.$prefix}color-default-button-hover-border);
70
+ color: var(--#{variables.$prefix}color-default-button-hover-fore);
71
+ }
72
72
  &:active,
73
73
  &.is-active {
74
74
  background-color: var(
package/src/components/dialogue.scss CHANGED
@@ -87,6 +87,7 @@
87
87
  border-style: solid;
88
88
  border-width: var(--#{variables.$prefix}dialogue-border-width);
89
89
  border-radius: var(--#{variables.$prefix}border-radius-circle);
90
+ user-select: none;
90
91
  }
91
92
  }
92
93
  }
package/src/components/header.scss CHANGED
@@ -29,8 +29,17 @@
29
29
  @each $color in variables.$colors {
30
30
  $colorName: map.get($color, "name");
31
31
  &.is-#{$colorName} {
32
- background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-header-back-oklch) / 0.5);
33
- box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-#{$colorName}-header-shadow);
32
+ background-color: oklch(
33
+ from var(--#{variables.$prefix}color-#{$colorName}-header-back)
34
+ l
35
+ c
36
+ h /
37
+ calc(alpha - 0.5)
38
+ );
39
+ box-shadow: 0
40
+ 0
41
+ 0.5rem
42
+ var(--#{variables.$prefix}color-#{$colorName}-header-shadow);
34
43
  color: var(--#{variables.$prefix}color-#{$colorName}-header-fore);
35
44
  }
36
45
  }
package/src/components/image.scss CHANGED
@@ -7,4 +7,5 @@
7
7
  width: 100%;
8
8
  height: auto;
9
9
  margin: 0;
10
+ user-select: none;
10
11
  }
package/src/components/link.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  @include mixins.element();
7
7
  color: var(--#{variables.$prefix}color-default-link-fore);
8
8
  text-decoration: underline;
9
+ cursor: pointer;
9
10
  &:hover {
10
11
  text-decoration: none;
11
12
  }
package/src/components/modal.scss CHANGED
@@ -5,7 +5,11 @@
5
5
  .modal {
6
6
  @include mixins.element();
7
7
  align-items: center;
8
- background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
8
+ background-color: oklch(
9
+ from var(--#{variables.$prefix}color-default-back) l c h /
10
+ calc(alpha - 0.25)
11
+ );
12
+ border: none;
9
13
  display: none;
10
14
  flex-direction: column;
11
15
  height: 100vh;
@@ -19,7 +23,7 @@
19
23
  &.is-active {
20
24
  display: flex;
21
25
  }
22
- >.modal-content {
26
+ > .modal-content {
23
27
  @include mixins.element();
24
28
  max-height: 100%;
25
29
  max-width: 100%;
@@ -32,9 +36,15 @@
32
36
  }
33
37
  @if (not variables.$is-skelton) {
34
38
  @each $color in variables.$colors {
35
- $colorName: map.get($color, "name");
39
+ $colorName: map.get($color, "name");
36
40
  &.is-#{$colorName} {
37
- background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-back-oklch) / 0.75);
41
+ background-color: oklch(
42
+ from var(--#{variables.$prefix}color-#{$colorName}-back)
43
+ l
44
+ c
45
+ h /
46
+ calc(alpha - 0.25)
47
+ );
38
48
  }
39
49
  }
40
50
  }
package/src/css-variables/color.scss CHANGED
@@ -36,7 +36,6 @@
36
36
 
37
37
  $oklch: #{$lightness} #{$chroma} #{$hue};
38
38
 
39
- --#{variables.$prefix}color-#{$name}-#{$p}-oklch: #{$oklch};
40
39
  --#{variables.$prefix}color-#{$name}-#{$p}: oklch(#{$oklch});
41
40
  }
42
41
  }
@@ -60,43 +59,62 @@
60
59
 
61
60
  $fore: map.get($colorShade, "fore");
62
61
  @if ($fore != null) {
63
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: var(
64
- --#{variables.$prefix}color-#{$srcColorName}-#{$fore}
65
- );
66
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore-oklch: var(
67
- --#{variables.$prefix}color-#{$srcColorName}-#{$fore}-oklch
68
- );
62
+ $light: map.get($fore, "light");
63
+ $dark: map.get($fore, "dark");
64
+ @if ($light != null and $dark != null) {
65
+ --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: light-dark(
66
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$light}),
67
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$dark})
68
+ );
69
+ }
69
70
  }
70
71
 
71
72
  $back: map.get($colorShade, "back");
72
73
  @if ($back != null) {
73
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: var(
74
- --#{variables.$prefix}color-#{$srcColorName}-#{$back}
75
- );
76
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back-oklch: var(
77
- --#{variables.$prefix}color-#{$srcColorName}-#{$back}-oklch
78
- );
74
+ $light: map.get($back, "light");
75
+ $dark: map.get($back, "dark");
76
+ @if ($light != null and $dark != null) {
77
+ --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: light-dark(
78
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$light}),
79
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$dark})
80
+ );
81
+ }
79
82
  }
80
83
 
81
84
  $border: map.get($colorShade, "border");
82
85
  @if ($border != null) {
83
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: var(
84
- --#{variables.$prefix}color-#{$srcColorName}-#{$border}
85
- );
86
+ $light: map.get($border, "light");
87
+ $dark: map.get($border, "dark");
88
+ @if ($light != null and $dark != null) {
89
+ --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: light-dark(
90
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$light}),
91
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$dark})
92
+ );
93
+ }
86
94
  }
87
95
 
88
96
  $placeholder: map.get($colorShade, "placeholder");
89
97
  @if ($placeholder != null) {
90
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: var(
91
- --#{variables.$prefix}color-#{$srcColorName}-#{$placeholder}
92
- );
98
+ $light: map.get($placeholder, "light");
99
+ $dark: map.get($placeholder, "dark");
100
+ @if ($light != null and $dark != null) {
101
+ --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: light-dark(
102
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$light}),
103
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$dark})
104
+ );
105
+ }
93
106
  }
94
107
 
95
108
  $shadow: map.get($colorShade, "shadow");
96
109
  @if ($shadow != null) {
97
- --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: var(
98
- --#{variables.$prefix}color-#{$srcColorName}-#{$shadow}
99
- );
110
+ $light: map.get($shadow, "light");
111
+ $dark: map.get($shadow, "dark");
112
+ @if ($light != null and $dark != null) {
113
+ --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: light-dark(
114
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$light}),
115
+ var(--#{variables.$prefix}color-#{$srcColorName}-#{$dark})
116
+ );
117
+ }
100
118
  }
101
119
  }
102
120
 
@@ -562,16 +580,6 @@
562
580
  }
563
581
  }
564
582
 
565
- @mixin setColorLight() {
566
- @include setColorShades(variables.$colorShadesLight);
567
- color-scheme: light;
568
- }
569
-
570
- @mixin setColorDark() {
571
- @include setColorShades(variables.$colorShadesDark);
572
- color-scheme: dark;
573
- }
574
-
575
583
  :root {
576
584
  color-scheme: light dark;
577
585
  @each $color in variables.$colors {
@@ -582,12 +590,25 @@
582
590
  @include setColorVariables($color);
583
591
  }
584
592
  }
593
+ @include setColorShades(variables.$colorShades);
585
594
  }
586
595
 
587
- @include mixins.setCssVariableColorScheme("light") {
588
- @include setColorLight();
596
+ @media (prefers-color-scheme: light) {
597
+ :root {
598
+ color-scheme: light;
599
+ }
589
600
  }
590
601
 
591
- @include mixins.setCssVariableColorScheme("dark") {
592
- @include setColorDark();
602
+ @media (prefers-color-scheme: dark) {
603
+ :root {
604
+ color-scheme: dark;
605
+ }
606
+ }
607
+
608
+ [data-color-scheme="light"] {
609
+ color-scheme: light;
610
+ }
611
+
612
+ [data-color-scheme="dark"] {
613
+ color-scheme: dark;
593
614
  }
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
  }