minolith 1.1.7 → 1.2.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "1.1.7",
3
+ "version": "1.2.0",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
@@ -4,7 +4,7 @@
4
4
 
5
5
  :where(.zigzag) {
6
6
  --#{variables.$prefix}zigzag-size: 1rem;
7
- --#{variables.$prefix}zigzag-color-fore: oklch(
7
+ --#{variables.$prefix}zigzag-color-line: oklch(
8
8
  from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
9
9
  0.5
10
10
  );
@@ -18,22 +18,22 @@
18
18
  background-image:
19
19
  linear-gradient(
20
20
  calc(45deg * 3),
21
- var(--#{variables.$prefix}zigzag-color-fore) 25%,
21
+ var(--#{variables.$prefix}zigzag-color-line) 25%,
22
22
  transparent 25%
23
23
  ),
24
24
  linear-gradient(
25
25
  calc(45deg * 5),
26
- var(--#{variables.$prefix}zigzag-color-fore) 25%,
26
+ var(--#{variables.$prefix}zigzag-color-line) 25%,
27
27
  transparent 25%
28
28
  ),
29
29
  linear-gradient(
30
30
  45deg,
31
- var(--#{variables.$prefix}zigzag-color-fore) 25%,
31
+ var(--#{variables.$prefix}zigzag-color-line) 25%,
32
32
  transparent 25%
33
33
  ),
34
34
  linear-gradient(
35
35
  calc(45deg * 7),
36
- var(--#{variables.$prefix}zigzag-color-fore) 25%,
36
+ var(--#{variables.$prefix}zigzag-color-line) 25%,
37
37
  var(--#{variables.$prefix}zigzag-color-back) 25%
38
38
  );
39
39
  background-position:
@@ -64,7 +64,7 @@
64
64
  @each $color in variables.$allColors {
65
65
  $colorName: map.get($color, "name");
66
66
  &.is-#{$colorName} {
67
- --#{variables.$prefix}zigzag-color-fore: oklch(
67
+ --#{variables.$prefix}zigzag-color-line: oklch(
68
68
  from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
69
69
  l
70
70
  c
@@ -0,0 +1,173 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../icons/index.scss" as icons;
4
+ @use "../mixins/index.scss" as mixins;
5
+
6
+ :where(.figure) {
7
+ --#{variables.$prefix}figure-color-fore: var(
8
+ --#{variables.$prefix}color-default-figure-fore,
9
+ var(--#{variables.$prefix}color-default-fore)
10
+ );
11
+ --#{variables.$prefix}figure-color-back: var(
12
+ --#{variables.$prefix}color-default-figure-back,
13
+ var(--#{variables.$prefix}color-default-back)
14
+ );
15
+ --#{variables.$prefix}figure-color-border: var(
16
+ --#{variables.$prefix}color-default-figure-border,
17
+ var(--#{variables.$prefix}color-default-border)
18
+ );
19
+
20
+ --#{variables.$prefix}figure-color-selection-fore: var(
21
+ --#{variables.$prefix}color-default-figure-selection-fore,
22
+ var(--#{variables.$prefix}color-default-selection-fore)
23
+ );
24
+ --#{variables.$prefix}figure-color-selection-back: var(
25
+ --#{variables.$prefix}color-default-figure-selection-back,
26
+ var(--#{variables.$prefix}color-default-selection-back)
27
+ );
28
+
29
+ --#{variables.$prefix}figure-content-color-fore: var(
30
+ --#{variables.$prefix}color-default-figure-content-fore,
31
+ var(--#{variables.$prefix}color-default-fore)
32
+ );
33
+ --#{variables.$prefix}figure-content-color-back: var(
34
+ --#{variables.$prefix}color-default-figure-content-back,
35
+ var(--#{variables.$prefix}color-default-back)
36
+ );
37
+ --#{variables.$prefix}figure-content-color-selection-fore: var(
38
+ --#{variables.$prefix}color-default-figure-content-selection-fore,
39
+ var(--#{variables.$prefix}color-default-fore)
40
+ );
41
+ --#{variables.$prefix}figure-content-color-selection-back: var(
42
+ --#{variables.$prefix}color-default-figure-content-selection-back,
43
+ var(--#{variables.$prefix}color-default-back)
44
+ );
45
+
46
+ --#{variables.$prefix}figure-caption-color-fore: var(
47
+ --#{variables.$prefix}color-default-figure-caption-fore,
48
+ var(--#{variables.$prefix}color-default-fore)
49
+ );
50
+ --#{variables.$prefix}figure-caption-color-back: var(
51
+ --#{variables.$prefix}color-default-figure-caption-back,
52
+ var(--#{variables.$prefix}color-default-back)
53
+ );
54
+ --#{variables.$prefix}figure-caption-color-selection-fore: var(
55
+ --#{variables.$prefix}color-default-figure-caption-selection-fore,
56
+ var(--#{variables.$prefix}color-default-fore)
57
+ );
58
+ --#{variables.$prefix}figure-caption-color-selection-back: var(
59
+ --#{variables.$prefix}color-default-figure-caption-selection-back,
60
+ var(--#{variables.$prefix}color-default-back)
61
+ );
62
+
63
+ @include mixins.element();
64
+ background-color: var(--#{variables.$prefix}figure-color-back);
65
+ border-color: var(--#{variables.$prefix}figure-color-border);
66
+ border-style: none;
67
+ border-width: var(--#{variables.$prefix}border-width-medium);
68
+ color: var(--#{variables.$prefix}figure-color-fore);
69
+ display: flex;
70
+ flex-flow: column;
71
+ width: 100%;
72
+ padding: 0.25rem;
73
+
74
+ &::selection {
75
+ color: var(--#{variables.$prefix}figure-color-selection-fore);
76
+ background-color: var(--#{variables.$prefix}figure-color-selection-back);
77
+ }
78
+
79
+ > :where(.figure-content) {
80
+ @include mixins.element();
81
+ background-color: var(--#{variables.$prefix}figure-content-color-back);
82
+ color: var(--#{variables.$prefix}figure-content-color-fore);
83
+ display: block;
84
+ width: 100%;
85
+ height: auto;
86
+ &::selection {
87
+ color: var(--#{variables.$prefix}figure-content-color-selection-fore);
88
+ background-color: var(--#{variables.$prefix}figure-content-color-selection-back);
89
+ }
90
+ }
91
+
92
+ > :where(.figure-caption) {
93
+ @include mixins.element();
94
+ display: block;
95
+ background-color: var(--#{variables.$prefix}figure-caption-color-back);
96
+ color: var(--#{variables.$prefix}figure-caption-color-fore);
97
+ font-size: var(--#{variables.$prefix}font-size-small);
98
+ width: 100%;
99
+ &:first-child {
100
+ padding-bottom: 0.25rem;
101
+ }
102
+ &:last-child {
103
+ padding-top: 0.25rem;
104
+ }
105
+ &::selection {
106
+ color: var(--#{variables.$prefix}figure-caption-color-selection-fore);
107
+ background-color: var(--#{variables.$prefix}figure-caption-color-selection-back);
108
+ }
109
+ }
110
+
111
+ @if (not variables.$is-skelton) {
112
+ @each $color in variables.$allColors {
113
+ $colorName: map.get($color, "name");
114
+ &.is-#{$colorName} {
115
+ --#{variables.$prefix}figure-color-fore: var(
116
+ --#{variables.$prefix}color-#{$colorName}-figure-fore,
117
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
118
+ );
119
+ --#{variables.$prefix}figure-color-back: var(
120
+ --#{variables.$prefix}color-#{$colorName}-figure-back,
121
+ var(--#{variables.$prefix}color-#{$colorName}-back)
122
+ );
123
+ --#{variables.$prefix}figure-color-border: var(
124
+ --#{variables.$prefix}color-#{$colorName}-figure-border,
125
+ var(--#{variables.$prefix}color-#{$colorName}-border)
126
+ );
127
+
128
+ --#{variables.$prefix}figure-color-selection-fore: var(
129
+ --#{variables.$prefix}color-#{$colorName}-figure-selection-fore,
130
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
131
+ );
132
+ --#{variables.$prefix}figure-color-selection-back: var(
133
+ --#{variables.$prefix}color-#{$colorName}-figure-selection-back,
134
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
135
+ );
136
+
137
+ --#{variables.$prefix}figure-content-color-fore: var(
138
+ --#{variables.$prefix}color-#{$colorName}-figure-content-fore,
139
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
140
+ );
141
+ --#{variables.$prefix}figure-content-color-back: var(
142
+ --#{variables.$prefix}color-#{$colorName}-figure-content-back,
143
+ var(--#{variables.$prefix}color-#{$colorName}-back)
144
+ );
145
+ --#{variables.$prefix}figure-content-color-selection-fore: var(
146
+ --#{variables.$prefix}color-#{$colorName}-figure-content-selection-fore,
147
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
148
+ );
149
+ --#{variables.$prefix}figure-content-color-selection-back: var(
150
+ --#{variables.$prefix}color-#{$colorName}-figure-content-selection-back,
151
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
152
+ );
153
+
154
+ --#{variables.$prefix}figure-caption-color-fore: var(
155
+ --#{variables.$prefix}color-#{$colorName}-figure-caption-fore,
156
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
157
+ );
158
+ --#{variables.$prefix}figure-caption-color-back: var(
159
+ --#{variables.$prefix}color-#{$colorName}-figure-caption-back,
160
+ var(--#{variables.$prefix}color-#{$colorName}-back)
161
+ );
162
+ --#{variables.$prefix}figure-caption-color-selection-fore: var(
163
+ --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-fore,
164
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
165
+ );
166
+ --#{variables.$prefix}figure-caption-color-selection-back: var(
167
+ --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-back,
168
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
169
+ );
170
+ }
171
+ }
172
+ }
173
+ }
@@ -6,6 +6,7 @@
6
6
  @forward "./card.scss";
7
7
  @forward "./dialogue.scss";
8
8
  @forward "./div.scss";
9
+ @forward "./figure.scss";
9
10
  @forward "./footer.scss";
10
11
  @forward "./hamburger.scss";
11
12
  @forward "./header.scss";
@@ -379,6 +379,68 @@
379
379
  }
380
380
  //#endregion dialogue
381
381
 
382
+ //#region figure
383
+ $figure: map.get($colorShade, "figure");
384
+ @if ($figure != null) {
385
+ @include setColor(
386
+ $figure,
387
+ $lightnessOffset,
388
+ $srcColorName,
389
+ $destColorName,
390
+ $name,
391
+ "figure"
392
+ );
393
+
394
+ $figureContent: map.get($figure, "figureContent");
395
+ @if ($figureContent != null) {
396
+ @include setColor(
397
+ $figureContent,
398
+ $lightnessOffset,
399
+ $srcColorName,
400
+ $destColorName,
401
+ $name,
402
+ "figure-content"
403
+ );
404
+
405
+ $figureContentSelection: map.get($figureContent, "selection");
406
+ @if ($figureContentSelection != null) {
407
+ @include setColor(
408
+ $figureContentSelection,
409
+ $lightnessOffset,
410
+ $srcColorName,
411
+ $destColorName,
412
+ $name,
413
+ "figure-content-selection"
414
+ );
415
+ }
416
+ }
417
+
418
+ $figureCaption: map.get($figure, "figureCaption");
419
+ @if ($figureCaption != null) {
420
+ @include setColor(
421
+ $figureCaption,
422
+ $lightnessOffset,
423
+ $srcColorName,
424
+ $destColorName,
425
+ $name,
426
+ "figure-caption"
427
+ );
428
+
429
+ $figureCaptionSelection: map.get($figureCaption, "selection");
430
+ @if ($figureCaptionSelection != null) {
431
+ @include setColor(
432
+ $figureCaptionSelection,
433
+ $lightnessOffset,
434
+ $srcColorName,
435
+ $destColorName,
436
+ $name,
437
+ "figure-caption-selection"
438
+ );
439
+ }
440
+ }
441
+ }
442
+ //#endregion figure
443
+
382
444
  //#region footer
383
445
  $footer: map.get($colorShade, "footer");
384
446
  @if ($footer != null) {
@@ -14,27 +14,29 @@
14
14
  margin-left: auto;
15
15
  width: auto;
16
16
 
17
- @for $p from 0 through 20 {
18
- $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
19
- &.has-gutter-#{$escapedQuarter}rem {
20
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
21
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
22
- }
23
- &.has-gutter-x-#{$escapedQuarter}rem {
24
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
25
- }
26
- &.has-gutter-y-#{$escapedQuarter}rem {
27
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
28
- }
29
- @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
30
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
31
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
32
- }
33
- @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
34
- --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
35
- }
36
- @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
37
- --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
17
+ @if (not variables.$is-skelton) {
18
+ @for $p from 0 through 20 {
19
+ $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
20
+ &.has-gutter-#{$escapedQuarter}rem {
21
+ --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
22
+ --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
23
+ }
24
+ &.has-gutter-x-#{$escapedQuarter}rem {
25
+ --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
26
+ }
27
+ &.has-gutter-y-#{$escapedQuarter}rem {
28
+ --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
29
+ }
30
+ @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
31
+ --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
32
+ --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
33
+ }
34
+ @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
35
+ --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
36
+ }
37
+ @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
38
+ --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
39
+ }
38
40
  }
39
41
  }
40
42
 
@@ -38,9 +38,6 @@ $color-light-lightness-border: 70 !default;
38
38
  $color-light-lightness-placeholder: 70 !default;
39
39
  $color-light-lightness-shadow: 70 !default;
40
40
 
41
- $color-light-lightness-selection-fore: 5 !default;
42
- $color-light-lightness-selection-back: 70 !default;
43
-
44
41
  //#region color-light-lightness-dot
45
42
  $color-light-lightness-dot-fore: 85 !default;
46
43
  $color-light-lightness-dot-back: 95 !default;
@@ -133,6 +130,16 @@ $color-light-lightness-dialogue-message-back: 95 !default;
133
130
  $color-light-lightness-dialogue-message-border: 70 !default;
134
131
  //#endregion color-light-lightness-dialogue
135
132
 
133
+ //#region color-dark-lightness-figure
134
+ $color-light-lightness-figure-fore: 5 !default;
135
+ $color-light-lightness-figure-back: 70 !default;
136
+ $color-light-lightness-figure-border: 70 !default;
137
+ $color-light-lightness-figure-content-fore: 5 !default;
138
+ $color-light-lightness-figure-content-back: 95 !default;
139
+ $color-light-lightness-figure-caption-fore: 20 !default;
140
+ $color-light-lightness-figure-caption-back: 70 !default;
141
+ //#endregion color-dark-lightness-figure
142
+
136
143
  //#region color-light-lightness-header
137
144
  $color-light-lightness-header-fore: 5 !default;
138
145
  $color-light-lightness-header-back: 70 !default;
@@ -191,9 +198,6 @@ $color-dark-lightness-border: 50 !default;
191
198
  $color-dark-lightness-placeholder: 50 !default;
192
199
  $color-dark-lightness-shadow: 50 !default;
193
200
 
194
- $color-dark-lightness-selection-fore: 95 !default;
195
- $color-dark-lightness-selection-back: 30 !default;
196
-
197
201
  //#region color-dark-lightness-dot
198
202
  $color-dark-lightness-dot-fore: 5 !default;
199
203
  $color-dark-lightness-dot-back: 15 !default;
@@ -286,6 +290,16 @@ $color-dark-lightness-dialogue-message-back: 5 !default;
286
290
  $color-dark-lightness-dialogue-message-border: 50 !default;
287
291
  //#endregion color-dark-lightness-dialogue
288
292
 
293
+ //#region color-dark-lightness-figure
294
+ $color-dark-lightness-figure-fore: 95 !default;
295
+ $color-dark-lightness-figure-back: 30 !default;
296
+ $color-dark-lightness-figure-border: 30 !default;
297
+ $color-dark-lightness-figure-content-fore: 95 !default;
298
+ $color-dark-lightness-figure-content-back: 5 !default;
299
+ $color-dark-lightness-figure-caption-fore: 80 !default;
300
+ $color-dark-lightness-figure-caption-back: 30 !default;
301
+ //#endregion color-dark-lightness-figure
302
+
289
303
  //#region color-dark-lightness-header
290
304
  $color-dark-lightness-header-fore: 95 !default;
291
305
  $color-dark-lightness-header-back: 30 !default;
@@ -344,6 +358,10 @@ $color-dark-lightness-progress-back: 5 !default;
344
358
 
345
359
  $color-light-lightness-offset-disabled-fore: 30 !default;
346
360
  $color-dark-lightness-offset-disabled-fore: -30 !default;
361
+ $color-light-lightness-offset-selection-fore: 0 !default;
362
+ $color-dark-lightness-offset-selection-fore: 0 !default;
363
+ $color-light-lightness-offset-selection-back: -25 !default;
364
+ $color-dark-lightness-offset-selection-back: 25 !default;
347
365
  $color-lightness-offset-disabled: 0 !default;
348
366
  $color-lightness-offset-focus: 20 !default;
349
367
  $color-lightness-offset-hover: 5 !default;
@@ -380,12 +398,12 @@ $colorShades: (
380
398
  ),
381
399
  selection: (
382
400
  fore: (
383
- light: $color-light-lightness-selection-fore,
384
- dark: $color-dark-lightness-selection-fore,
401
+ light: $color-light-lightness-fore + $color-light-lightness-offset-selection-fore,
402
+ dark: $color-dark-lightness-fore + $color-dark-lightness-offset-selection-fore,
385
403
  ),
386
404
  back: (
387
- light: $color-light-lightness-selection-back,
388
- dark: $color-dark-lightness-selection-back,
405
+ light: $color-light-lightness-back + $color-light-lightness-offset-selection-back,
406
+ dark: $color-dark-lightness-back + $color-dark-lightness-offset-selection-back,
389
407
  ),
390
408
  ),
391
409
  //#region backgrounds
@@ -679,6 +697,72 @@ $colorShades: (
679
697
  ),
680
698
  ),
681
699
  //#endregion dialogue
700
+ //#region figure
701
+ figure: (
702
+ fore: (
703
+ light: $color-light-lightness-figure-fore,
704
+ dark: $color-dark-lightness-figure-fore,
705
+ ),
706
+ back: (
707
+ light: $color-light-lightness-figure-back,
708
+ dark: $color-dark-lightness-figure-back,
709
+ ),
710
+ border: (
711
+ light: $color-light-lightness-figure-border,
712
+ dark: $color-dark-lightness-figure-border,
713
+ ),
714
+ selection: (
715
+ fore: (
716
+ light: $color-light-lightness-figure-fore + $color-light-lightness-offset-selection-fore,
717
+ dark: $color-dark-lightness-figure-fore + $color-dark-lightness-offset-selection-fore,
718
+ ),
719
+ back: (
720
+ light: $color-light-lightness-figure-back + $color-light-lightness-offset-selection-back,
721
+ dark: $color-dark-lightness-figure-back + $color-dark-lightness-offset-selection-back,
722
+ ),
723
+ ),
724
+ figureContent: (
725
+ fore: (
726
+ light: $color-light-lightness-figure-content-fore,
727
+ dark: $color-dark-lightness-figure-content-fore,
728
+ ),
729
+ back: (
730
+ light: $color-light-lightness-figure-content-back,
731
+ dark: $color-dark-lightness-figure-content-back,
732
+ ),
733
+ selection: (
734
+ fore: (
735
+ light: $color-light-lightness-figure-content-fore + $color-light-lightness-offset-selection-fore,
736
+ dark: $color-dark-lightness-figure-content-fore + $color-dark-lightness-offset-selection-fore,
737
+ ),
738
+ back: (
739
+ light: $color-light-lightness-figure-content-back + $color-light-lightness-offset-selection-back,
740
+ dark: $color-dark-lightness-figure-content-back + $color-dark-lightness-offset-selection-back,
741
+ ),
742
+ ),
743
+ ),
744
+ figureCaption: (
745
+ fore: (
746
+ light: $color-light-lightness-figure-caption-fore,
747
+ dark: $color-dark-lightness-figure-caption-fore,
748
+ ),
749
+ back: (
750
+ light: $color-light-lightness-figure-caption-back,
751
+ dark: $color-dark-lightness-figure-caption-back,
752
+ ),
753
+ selection: (
754
+ fore: (
755
+ light: $color-light-lightness-figure-caption-fore + $color-light-lightness-offset-selection-fore,
756
+ dark: $color-dark-lightness-figure-caption-fore + $color-dark-lightness-offset-selection-fore,
757
+ ),
758
+ back: (
759
+ light: $color-light-lightness-figure-caption-back + $color-light-lightness-offset-selection-back,
760
+ dark: $color-dark-lightness-figure-caption-back + $color-dark-lightness-offset-selection-back,
761
+ ),
762
+ ),
763
+ ),
764
+ ),
765
+ //#endregion figure
682
766
  //#region header
683
767
  header: (
684
768
  fore: (