minolith 0.0.5 → 0.0.7

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 (26) hide show
  1. package/dist/css/minolith.css +11854 -5276
  2. package/dist/css/minolith.css.map +1 -1
  3. package/dist/css/minolith.min.css +3 -3
  4. package/dist/css/minolith.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/accordion.scss +94 -35
  7. package/src/components/badge.scss +54 -46
  8. package/src/components/button.scss +17 -10
  9. package/src/components/card.scss +34 -6
  10. package/src/components/header.scss +8 -0
  11. package/src/components/input.scss +6 -2
  12. package/src/components/label.scss +7 -0
  13. package/src/components/link.scss +7 -7
  14. package/src/components/loader.scss +2 -2
  15. package/src/components/message.scss +6 -3
  16. package/src/components/progress.scss +4 -3
  17. package/src/css-variables/color.scss +97 -5
  18. package/src/functions/string.scss +12 -0
  19. package/src/icons/check.scss +3 -3
  20. package/src/icons/chevron.scss +2 -2
  21. package/src/layouts/index.scss +2 -1
  22. package/src/mixins/responsive.scss +40 -10
  23. package/src/utilities/sizing.scss +44 -10
  24. package/src/utilities/typography.scss +4 -0
  25. package/src/variables/border.scss +8 -3
  26. package/src/variables/color.scss +1024 -301
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/components/accordion.scss CHANGED
@@ -6,11 +6,21 @@
6
6
  color: var(--#{variables.$prefix}color-default-accordion-fore);
7
7
  background-color: var(--#{variables.$prefix}color-default-accordion-back);
8
8
  border-color: var(--#{variables.$prefix}color-default-accordion-border);
9
- border-width: var(--#{variables.$prefix}border-width-thin);
9
+ border-radius: calc(var(--#{variables.$prefix}border-radius-medium) + var(--#{variables.$prefix}border-width-thin));
10
10
  border-style: solid;
11
+ border-width: var(--#{variables.$prefix}border-width-thin);
12
+ border-collapse: collapse;
11
13
  .accordion-summary {
12
- background-color: var(--#{variables.$prefix}color-default-accordion-summary-back);
13
- border-color: var(--#{variables.$prefix}color-default-accordion-summary-border);
14
+ background-color: var(
15
+ --#{variables.$prefix}color-default-accordion-summary-back
16
+ );
17
+ border-color: var(
18
+ --#{variables.$prefix}color-default-accordion-summary-border
19
+ );
20
+ border-radius: calc(
21
+ var(--#{variables.$prefix}border-radius-medium) +
22
+ var(--#{variables.$prefix}border-width-thin)
23
+ );
14
24
  cursor: pointer;
15
25
  display: block;
16
26
  padding: 1rem;
@@ -28,28 +38,44 @@
28
38
  top: calc(50% - 0.25rem);
29
39
  }
30
40
  }
31
- &:hover,
32
- &.is-hovered,
33
- &.is-hovered {
34
- background-color: var(--#{variables.$prefix}color-default-accordion-summary-hover-back);
35
- border-color: var(--#{variables.$prefix}color-default-accordion-summary-hover-border);
36
- }
37
41
  &:focus,
38
42
  &.is-focus,
39
43
  &.is-focused {
40
- background-color: var(--#{variables.$prefix}color-default-accordion-summary-focus-back);
41
- border-color: var(--#{variables.$prefix}color-default-accordion-summary-focus-border);
44
+ background-color: var(
45
+ --#{variables.$prefix}color-default-accordion-summary-focus-back
46
+ );
47
+ border-color: var(
48
+ --#{variables.$prefix}color-default-accordion-summary-focus-border
49
+ );
50
+ }
51
+ &:hover,
52
+ &.is-hovered,
53
+ &.is-hovered {
54
+ background-color: var(
55
+ --#{variables.$prefix}color-default-accordion-summary-hover-back
56
+ );
57
+ border-color: var(
58
+ --#{variables.$prefix}color-default-accordion-summary-hover-border
59
+ );
42
60
  }
43
61
  &:active,
44
62
  &.is-active {
45
- background-color: var(--#{variables.$prefix}color-default-accordion-summary-active-back);
46
- border-color: var(--#{variables.$prefix}color-default-accordion-summary-active-border);
63
+ background-color: var(
64
+ --#{variables.$prefix}color-default-accordion-summary-active-back
65
+ );
66
+ border-color: var(
67
+ --#{variables.$prefix}color-default-accordion-summary-active-border
68
+ );
47
69
  }
48
70
  &[disabled],
49
71
  fieldset[disabled],
50
72
  &.is-disabled {
51
- background-color: var(--#{variables.$prefix}color-default-accordion-summary-disabled-back);
52
- border-color: var(--#{variables.$prefix}color-default-accordion-summary-disabled-border);
73
+ background-color: var(
74
+ --#{variables.$prefix}color-default-accordion-summary-disabled-back
75
+ );
76
+ border-color: var(
77
+ --#{variables.$prefix}color-default-accordion-summary-disabled-border
78
+ );
53
79
  }
54
80
  }
55
81
  .accordion-details {
@@ -57,9 +83,15 @@
57
83
  height: 0;
58
84
  display: none;
59
85
  padding: 1rem;
86
+ border-radius: 0 0
87
+ var(--#{variables.$prefix}border-radius-medium)
88
+ var(--#{variables.$prefix}border-radius-medium);
60
89
  }
61
- &[open],is-open {
90
+ &[open],
91
+ is-open {
62
92
  .accordion-summary {
93
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
94
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
63
95
  &:after {
64
96
  transform: rotate(180deg);
65
97
  }
@@ -74,41 +106,68 @@
74
106
  $colorName: map.get($color, "name");
75
107
  &.is-#{$colorName} {
76
108
  color: var(--#{variables.$prefix}color-#{$colorName}-accordion-fore);
77
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-back);
78
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-border);
109
+ background-color: var(
110
+ --#{variables.$prefix}color-#{$colorName}-accordion-back
111
+ );
112
+ border-color: var(
113
+ --#{variables.$prefix}color-#{$colorName}-accordion-border
114
+ );
79
115
  .accordion-summary {
80
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-back);
81
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-border);
116
+ background-color: var(
117
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
118
+ );
119
+ border-color: var(
120
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
121
+ );
82
122
  &:after {
83
- background: var(--#{variables.$prefix}color-#{$colorName}-accordion-fore);
84
- }
85
- &:hover,
86
- &.is-hovered,
87
- &.is-hovered {
88
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back);
89
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border);
123
+ background: var(
124
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
125
+ );
90
126
  }
91
127
  &:focus,
92
128
  &.is-focus,
93
129
  &.is-focused {
94
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back);
95
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border);
130
+ background-color: var(
131
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
132
+ );
133
+ border-color: var(
134
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
135
+ );
136
+ }
137
+ &:hover,
138
+ &.is-hovered,
139
+ &.is-hovered {
140
+ background-color: var(
141
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
142
+ );
143
+ border-color: var(
144
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
145
+ );
96
146
  }
97
147
  &:active,
98
148
  &.is-active {
99
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back);
100
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border);
149
+ background-color: var(
150
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
151
+ );
152
+ border-color: var(
153
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
154
+ );
101
155
  }
102
156
  &[disabled],
103
157
  fieldset[disabled],
104
158
  &.is-disabled {
105
- background-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back);
106
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border);
159
+ background-color: var(
160
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
161
+ );
162
+ border-color: var(
163
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
164
+ );
107
165
  }
108
166
  }
109
167
  .accordion-details {
110
- width: 100%;
111
- border-color: var(--#{variables.$prefix}color-#{$colorName}-accordion-summary-border);
168
+ border-color: var(
169
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
170
+ );
112
171
  }
113
172
  }
114
173
  }
package/src/components/badge.scss CHANGED
@@ -3,12 +3,12 @@
3
3
 
4
4
  .badge {
5
5
  align-items: center;
6
- background-color: var(--#{variables.$prefix}color-default-back);
7
- border-color: var(--#{variables.$prefix}color-default-border);
8
- border-radius: 0.5rem;
6
+ background-color: var(--#{variables.$prefix}color-default-badge-back);
7
+ border-color: var(--#{variables.$prefix}color-default-badge-border);
8
+ border-radius: var(--#{variables.$prefix}border-radius-medium);
9
9
  border-style: solid;
10
10
  border-width: var(--#{variables.$prefix}border-width-thin);
11
- color: var(--#{variables.$prefix}color-default-fore);
11
+ color: var(--#{variables.$prefix}color-default-badge-fore);
12
12
  display: inline-flex;
13
13
  font-size: var(--#{variables.$prefix}font-size-small);
14
14
  justify-content: center;
@@ -24,69 +24,77 @@
24
24
  @each $color in variables.$colors {
25
25
  $colorName: map.get($color, "name");
26
26
  &.is-#{$colorName} {
27
- background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
28
- border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
29
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
27
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
28
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
29
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
30
30
  }
31
31
  }
32
32
 
33
33
  &.is-clickable {
34
- background-color: var(--#{variables.$prefix}color-default-button-back);
35
- border-color: var(--#{variables.$prefix}color-default-button-border);
36
34
  user-select: none;
37
35
  cursor: pointer;
38
- &:hover,
39
- &.is-hovered,
40
- &.is-hovered {
41
- background-color: var(--#{variables.$prefix}color-default-hover-button-back);
42
- border-color: var(--#{variables.$prefix}color-default-hover-button-border);
43
- }
44
36
  &:focus,
45
37
  &.is-focus,
46
38
  &.is-focused {
47
- background-color: var(--#{variables.$prefix}color-default-focus-button-back);
48
- border-color: var(--#{variables.$prefix}color-default-focus-button-border);
39
+ background-color: var(--#{variables.$prefix}color-default-badge-focus-back);
40
+ border-color: var(--#{variables.$prefix}color-default-badge-focus-border);
41
+ color: var(--#{variables.$prefix}color-default-badge-focus-fore);
42
+ }
43
+ &:hover,
44
+ &.is-hovered,
45
+ &.is-hovered {
46
+ background-color: var(--#{variables.$prefix}color-default-badge-hover-back);
47
+ border-color: var(--#{variables.$prefix}color-default-badge-hover-border);
48
+ color: var(--#{variables.$prefix}color-default-badge-hover-fore);
49
49
  }
50
50
  &:active,
51
51
  &.is-active {
52
- background-color: var(--#{variables.$prefix}color-default-active-button-back);
53
- border-color: var(--#{variables.$prefix}color-default-active-button-border);
52
+ background-color: var(--#{variables.$prefix}color-default-badge-active-back);
53
+ border-color: var(--#{variables.$prefix}color-default-badge-active-border);
54
+ color: var(--#{variables.$prefix}color-default-badge-active-fore);
54
55
  }
55
56
  &[disabled],
56
57
  fieldset[disabled],
57
58
  &.is-disabled {
58
- background-color: var(--#{variables.$prefix}color-default-disabled-button-back);
59
- border-color: var(--#{variables.$prefix}color-default-disabled-button-border);
59
+ background-color: var(--#{variables.$prefix}color-default-badge-disabled-back);
60
+ border-color: var(--#{variables.$prefix}color-default-badge-disabled-border);
61
+ color: var(--#{variables.$prefix}color-default-badge-disabled-fore);
60
62
  }
61
63
 
62
64
  @each $color in variables.$colors {
63
65
  $colorName: map.get($color, "name");
64
66
  &.is-#{$colorName} {
65
- background-color: var(--#{variables.$prefix}color-#{$colorName}-button-back);
66
- border-color: var(--#{variables.$prefix}color-#{$colorName}-button-border);
67
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
68
- &:hover,
69
- &.is-hover,
70
- &.is-hovered {
71
- background-color: var(--#{variables.$prefix}color-#{$colorName}-hover-button-back);
72
- border-color: var(--#{variables.$prefix}color-#{$colorName}-hover-button-border);
73
- }
74
- &:focus,
75
- &.is-focus,
76
- &.is-focused {
77
- background-color: var(--#{variables.$prefix}color-#{$colorName}-focus-button-back);
78
- border-color: var(--#{variables.$prefix}color-#{$colorName}-focus-button-border);
79
- }
80
- &:active,
81
- &.is-active {
82
- background-color: var(--#{variables.$prefix}color-#{$colorName}-active-button-back);
83
- border-color: var(--#{variables.$prefix}color-#{$colorName}-active-button-border);
84
- }
85
- &[disabled],
86
- fieldset[disabled],
87
- &.is-disabled {
88
- background-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-button-back);
89
- border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-button-border);
67
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
68
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
69
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
70
+ &.is-clickable {
71
+ &:focus,
72
+ &.is-focus,
73
+ &.is-focused {
74
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-back);
75
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-border);
76
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-fore);
77
+ }
78
+ &:hover,
79
+ &.is-hover,
80
+ &.is-hovered {
81
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-back);
82
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-border);
83
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-fore);
84
+ }
85
+ &:active,
86
+ &.is-active {
87
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-back);
88
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-border);
89
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-fore);
90
+ }
91
+ &[disabled],
92
+ fieldset[disabled],
93
+ &.is-disabled {
94
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-back);
95
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-border);
96
+ color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-fore);
97
+ }
90
98
  }
91
99
  }
92
100
  }
package/src/components/button.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  .button {
5
5
  background-color: var(--#{variables.$prefix}color-default-button-back);
6
6
  border-color: var(--#{variables.$prefix}color-default-button-border);
7
- border-radius: var(--#{variables.$prefix}border-radius-large);
7
+ border-radius: var(--#{variables.$prefix}border-radius-medium);
8
8
  border-style: solid;
9
9
  box-sizing: border-box;
10
10
  color: var(--#{variables.$prefix}color-default-button-fore);
@@ -51,28 +51,31 @@
51
51
  &:hover,
52
52
  &.is-hovered,
53
53
  &.is-hovered {
54
+ outline: none;
54
55
  background-color: var(--#{variables.$prefix}color-default-button-hover-back);
55
56
  border-color: var(--#{variables.$prefix}color-default-button-hover-border);
57
+ color: var(--#{variables.$prefix}color-default-button-hover-fore);
56
58
  }
57
59
  &:focus,
58
60
  &.is-focus,
59
61
  &.is-focused {
62
+ outline: none;
60
63
  background-color: var(--#{variables.$prefix}color-default-button-focus-back);
61
64
  border-color: var(--#{variables.$prefix}color-default-button-focus-border);
62
- }
63
- :focus:not(:focus-visible) {
64
- outline: none;
65
+ color: var(--#{variables.$prefix}color-default-button-focus-fore);
65
66
  }
66
67
  &:active,
67
68
  &.is-active {
68
69
  background-color: var(--#{variables.$prefix}color-default-button-active-back);
69
70
  border-color: var(--#{variables.$prefix}color-default-button-active-border);
71
+ color: var(--#{variables.$prefix}color-default-button-active-fore);
70
72
  }
71
73
  &[disabled],
72
74
  fieldset[disabled],
73
75
  &.is-disabled {
74
76
  background-color: var(--#{variables.$prefix}color-default-button-disabled-back);
75
77
  border-color: var(--#{variables.$prefix}color-default-button-disabled-border);
78
+ color: var(--#{variables.$prefix}color-default-button-disabled-fore);
76
79
  }
77
80
 
78
81
  @each $color in variables.$colors {
@@ -81,28 +84,32 @@
81
84
  background-color: var(--#{variables.$prefix}color-#{$colorName}-button-back);
82
85
  border-color: var(--#{variables.$prefix}color-#{$colorName}-button-border);
83
86
  color: var(--#{variables.$prefix}color-#{$colorName}-button-fore);
84
- &:hover,
85
- &.is-hover,
86
- &.is-hovered {
87
- background-color: var(--#{variables.$prefix}color-#{$colorName}-button-hover-back);
88
- border-color: var(--#{variables.$prefix}color-#{$colorName}-button-hover-border);
89
- }
90
87
  &:focus,
91
88
  &.is-focus,
92
89
  &.is-focused {
93
90
  background-color: var(--#{variables.$prefix}color-#{$colorName}-button-focus-back);
94
91
  border-color: var(--#{variables.$prefix}color-#{$colorName}-button-focus-border);
92
+ color: var(--#{variables.$prefix}color-#{$colorName}-button-focus-fore);
93
+ }
94
+ &:hover,
95
+ &.is-hover,
96
+ &.is-hovered {
97
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-button-hover-back);
98
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-button-hover-border);
99
+ color: var(--#{variables.$prefix}color-#{$colorName}-button-hover-fore);
95
100
  }
96
101
  &:active,
97
102
  &.is-active {
98
103
  background-color: var(--#{variables.$prefix}color-#{$colorName}-button-active-back);
99
104
  border-color: var(--#{variables.$prefix}color-#{$colorName}-button-active-border);
105
+ color: var(--#{variables.$prefix}color-#{$colorName}-button-active-fore);
100
106
  }
101
107
  &[disabled],
102
108
  fieldset[disabled],
103
109
  &.is-disabled {
104
110
  background-color: var(--#{variables.$prefix}color-#{$colorName}-button-disabled-back);
105
111
  border-color: var(--#{variables.$prefix}color-#{$colorName}-button-disabled-border);
112
+ color: var(--#{variables.$prefix}color-#{$colorName}-button-disabled-fore);
106
113
  }
107
114
  }
108
115
  }
package/src/components/card.scss CHANGED
@@ -4,7 +4,10 @@
4
4
  .card {
5
5
  display: block;
6
6
  background-color: var(--#{variables.$prefix}color-default-card-back);
7
- border-radius: 0.25rem;
7
+ border-radius: calc(
8
+ var(--#{variables.$prefix}border-radius-medium) +
9
+ var(--#{variables.$prefix}border-width-thin)
10
+ );
8
11
  border-color: var(--#{variables.$prefix}color-default-card-border);
9
12
  border-style: solid;
10
13
  border-width: var(--#{variables.$prefix}border-width-thin);
@@ -14,7 +17,8 @@
14
17
  }
15
18
  .card-header {
16
19
  background-color: var(--#{variables.$prefix}color-default-card-header-back);
17
- border-radius: 0.25rem;
20
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
21
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
18
22
  color: var(--#{variables.$prefix}color-default-card-header-fore);
19
23
  padding: 0.5rem;
20
24
  display: block;
@@ -26,10 +30,22 @@
26
30
  color: var(--#{variables.$prefix}color-default-card-body-fore);
27
31
  padding: 0.5rem;
28
32
  display: block;
33
+ &:first-child {
34
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
35
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
36
+ }
37
+ &:last-child {
38
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
39
+ var(--#{variables.$prefix}border-radius-medium);
40
+ }
41
+ &:only-child {
42
+ border-radius: var(--#{variables.$prefix}border-radius-medium);
43
+ }
29
44
  }
30
45
  .card-footer {
31
46
  background-color: var(--#{variables.$prefix}color-default-card-footer-back);
32
- border-radius: 0.25rem;
47
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
48
+ var(--#{variables.$prefix}border-radius-medium);
33
49
  color: var(--#{variables.$prefix}color-default-card-footer-fore);
34
50
  padding: 0.5rem;
35
51
  display: block;
@@ -37,17 +53,29 @@
37
53
  @each $color in variables.$colors {
38
54
  $colorName: map.get($color, "name");
39
55
  &.is-#{$colorName} {
40
- background-color: var(--#{variables.$prefix}color-#{$colorName}-card-back);
56
+ background-color: var(
57
+ --#{variables.$prefix}color-#{$colorName}-card-back
58
+ );
41
59
  border-color: var(--#{variables.$prefix}color-#{$colorName}-card-border);
42
60
  color: var(--#{variables.$prefix}color-#{$colorName}-card-fore);
43
61
  .card-header {
44
- background-color: var(--#{variables.$prefix}color-#{$colorName}-card-header-back);
62
+ background-color: var(
63
+ --#{variables.$prefix}color-#{$colorName}-card-header-back
64
+ );
45
65
  color: var(--#{variables.$prefix}color-#{$colorName}-card-header-fore);
46
66
  }
47
67
  .card-body {
48
- background-color: var(--#{variables.$prefix}color-#{$colorName}-card-body-back);
68
+ background-color: var(
69
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
70
+ );
49
71
  color: var(--#{variables.$prefix}color-#{$colorName}-card-body-fore);
50
72
  }
73
+ .card-footer {
74
+ background-color: var(
75
+ --#{variables.$prefix}color-#{$colorName}-card-footer-back
76
+ );
77
+ color: var(--#{variables.$prefix}color-#{$colorName}-card-footer-fore);
78
+ }
51
79
  }
52
80
  }
53
81
  }
package/src/components/header.scss CHANGED
@@ -13,4 +13,12 @@
13
13
  width: 100%;
14
14
  z-index: var(--#{variables.$prefix}z-index-header-is-sticky);
15
15
  }
16
+ @each $color in variables.$colors {
17
+ $colorName: map.get($color, "name");
18
+ &.is-#{$colorName} {
19
+ background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-header-back-oklch) / 0.5);
20
+ box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-#{$colorName}-shadow);
21
+ color: var(--#{variables.$prefix}color-#{$colorName}-header-fore);
22
+ }
23
+ }
16
24
  }
package/src/components/input.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  .input {
5
5
  background-color: var(--#{variables.$prefix}color-default-back);
6
6
  border-color: var(--#{variables.$prefix}color-default-border);
7
- border-radius: 0.5rem;
7
+ border-radius: var(--#{variables.$prefix}border-radius-medium);
8
8
  border-style: solid;
9
9
  border-width: var(--border-width-medium);
10
10
  padding: 0.5rem;
@@ -14,6 +14,7 @@
14
14
  &:focus,
15
15
  &.is-focus,
16
16
  &.is-focused {
17
+ outline: none;
17
18
  background-color: var(--#{variables.$prefix}color-default-focus-back);
18
19
  border-color: var(--#{variables.$prefix}color-default-focus-border);
19
20
  }
@@ -133,7 +134,7 @@
133
134
  border-color: transparent;
134
135
  border-radius: 50%;
135
136
  border-style: solid;
136
- border-width: var(--border-width-medium);
137
+ border-width: var(--#{variables.$prefix}border-width-medium);
137
138
  content: "";
138
139
  display: block;
139
140
  height: 0.5rem;
@@ -167,6 +168,7 @@
167
168
  &:checked {
168
169
  &:after {
169
170
  border-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
171
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
170
172
  }
171
173
  }
172
174
  &[disabled],
@@ -177,6 +179,7 @@
177
179
  &:checked {
178
180
  &:after {
179
181
  border-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-fore);
182
+ background-color: var(--#{variables.$prefix}color-#{$colorName}-disabled-fore);
180
183
  }
181
184
  }
182
185
  }
@@ -202,6 +205,7 @@ textarea{
202
205
  &.input {
203
206
  @extend .input-text;
204
207
  min-height: min-content;
208
+ max-width: 100%;
205
209
  width: 100%;
206
210
  field-sizing: content;
207
211
  }
package/src/components/label.scss CHANGED
@@ -1,5 +1,12 @@
1
+ @use "sass:map";
1
2
  @use "../variables/index.scss" as variables;
2
3
 
3
4
  .label {
4
5
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
6
+ @each $color in variables.$colors {
7
+ $colorName: map.get($color, "name");
8
+ &.is-#{$colorName} {
9
+ color: var(--#{variables.$prefix}color-#{$colorName}-label-fore);
10
+ }
11
+ }
5
12
  }
package/src/components/link.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
 
4
4
  .link {
5
- color: var(--#{variables.$prefix}color-default-fore);
5
+ color: var(--#{variables.$prefix}color-default-link-fore);
6
6
  text-decoration: underline;
7
7
  &:hover {
8
8
  text-decoration: none;
@@ -11,17 +11,17 @@
11
11
  outline: none;
12
12
  }
13
13
  &:visited {
14
- color: var(--#{variables.$prefix}color-default-visited-fore);
14
+ color: var(--#{variables.$prefix}color-default-link-visited-fore);
15
15
  }
16
16
  @each $color in variables.$colors {
17
17
  $colorName: map.get($color, "name");
18
18
  &.is-#{$colorName} {
19
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
20
- &:hover {
21
- color: var(--#{variables.$prefix}color-#{$colorName}-hover-fore);
22
- }
19
+ color: var(--#{variables.$prefix}color-#{$colorName}-link-fore);
20
+ // &:hover {
21
+ // color: var(--#{variables.$prefix}color-#{$colorName}-hover-fore);
22
+ // }
23
23
  &:visited {
24
- color: var(--#{variables.$prefix}color-#{$colorName}-visited-fore);
24
+ color: var(--#{variables.$prefix}color-#{$colorName}-link-visited-fore);
25
25
  }
26
26
  }
27
27
  }
package/src/components/loader.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  animation-timing-function: linear;
10
10
  aspect-ratio: 1;
11
11
  border-radius: 50%;
12
- background: var(--#{variables.$prefix}color-default-border);
12
+ background: var(--#{variables.$prefix}color-default-loader-fore);
13
13
  mask: conic-gradient(#0000 10%, var(--#{variables.$prefix}color-default-back)),
14
14
  linear-gradient(var(--#{variables.$prefix}color-default-back) 0 0) content-box;
15
15
  mask-composite: subtract;
@@ -26,7 +26,7 @@
26
26
  @each $color in variables.$colors {
27
27
  $colorName: map.get($color, "name");
28
28
  &.is-#{$colorName} {
29
- background: var(--#{variables.$prefix}color-#{$colorName}-border);
29
+ background: var(--#{variables.$prefix}color-#{$colorName}-loader-fore);
30
30
  }
31
31
  }
32
32
  }
package/src/components/message.scss CHANGED
@@ -4,29 +4,32 @@
4
4
  .message {
5
5
  display: block;
6
6
  background-color: var(--#{variables.$prefix}color-default-message-back);
7
+ border-color: var(--#{variables.$prefix}color-default-message-border);
7
8
  border-radius: var(--#{variables.$prefix}border-radius-medium);
9
+ border-style: solid;
10
+ border-width: var(--#{variables.$prefix}border-width-thin);
8
11
  color: var(--#{variables.$prefix}color-default-messaage-fore);
9
12
  .message-header {
10
13
  background-color: var(--#{variables.$prefix}color-default-message-header-back);
11
14
  border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
12
15
  color: var(--#{variables.$prefix}color-default-message-header-fore);
13
- padding: 0.5rem;
14
16
  display: block;
15
17
  font-size: var(--#{variables.$prefix}font-size-medium);
16
18
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
19
+ padding: 0.5rem;
17
20
  }
18
21
  .message-body {
19
22
  background-color: var(--#{variables.$prefix}color-default-message-body-back);
20
23
  border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
21
24
  color: var(--#{variables.$prefix}color-default-message-body-fore);
22
- padding: 0.5rem;
23
25
  display: block;
26
+ padding: 0.5rem;
24
27
  }
25
-
26
28
  @each $color in variables.$colors {
27
29
  $colorName: map.get($color, "name");
28
30
  &.is-#{$colorName} {
29
31
  background-color: var(--#{variables.$prefix}color-#{$colorName}-message-back);
32
+ border-color: var(--#{variables.$prefix}color-#{$colorName}-message-border);
30
33
  color: var(--#{variables.$prefix}color-#{$colorName}-message-fore);
31
34
  .message-header {
32
35
  background-color: var(--#{variables.$prefix}color-#{$colorName}-message-header-back);