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/blockquote.scss CHANGED
@@ -3,24 +3,48 @@
3
3
  @use "../icons/index.scss" as icons;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .blockquote {
6
+ :where(.blockquote) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}blockquote-color-fore: var(
9
+ --#{variables.$prefix}color-default-blockquote-fore
10
+ );
11
+ --#{variables.$prefix}blockquote-color-back: var(
12
+ --#{variables.$prefix}color-default-blockquote-back
13
+ );
14
+ --#{variables.$prefix}blockquote-color-border: var(
15
+ --#{variables.$prefix}color-default-blockquote-border
16
+ );
17
+ --#{variables.$prefix}blockquote-color-selection-fore: var(
18
+ --#{variables.$prefix}color-default-blockquote-selection-fore,
19
+ var(--#{variables.$prefix}color-default-selection-fore)
20
+ );
21
+ --#{variables.$prefix}blockquote-color-selection-back: var(
22
+ --#{variables.$prefix}color-default-blockquote-selection-back,
23
+ var(--#{variables.$prefix}color-default-selection-back)
24
+ );
25
+
7
26
  --#{variables.$prefix}blockquote-icon-font-size: var(
8
27
  --#{variables.$prefix}font-size-xxxlarge
9
28
  );
10
29
  --#{variables.$prefix}blockquote-border-left-width: var(
11
30
  --#{variables.$prefix}border-width-thick
12
31
  );
32
+ //#endregion local css variables
33
+
13
34
  @include mixins.element();
14
35
  position: relative;
15
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
16
- background-color: var(--#{variables.$prefix}color-default-blockquote-back);
17
- border-left-color: var(--#{variables.$prefix}color-default-blockquote-border);
36
+ color: var(--#{variables.$prefix}blockquote-color-fore);
37
+ background-color: var(--#{variables.$prefix}blockquote-color-back);
38
+ border-left-color: var(--#{variables.$prefix}blockquote-color-border);
18
39
  border-left-style: solid;
19
40
  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
20
- margin: 0;
21
41
  margin-block: unset;
22
42
  margin-inline: unset;
23
43
  padding: 0.5rem;
44
+ &::selection {
45
+ color: var(--#{variables.$prefix}blockquote-color-selection-fore);
46
+ background-color: var(--#{variables.$prefix}blockquote-color-selection-back);
47
+ }
24
48
  &.is-italic {
25
49
  font-style: italic;
26
50
  }
@@ -38,8 +62,9 @@
38
62
  content: open-quote;
39
63
  display: block;
40
64
  max-width: 100%;
41
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
65
+ color: var(--#{variables.$prefix}blockquote-color-fore);
42
66
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
67
+ line-height: 1;
43
68
  }
44
69
  }
45
70
  &.has-quote,
@@ -56,36 +81,36 @@
56
81
  content: close-quote;
57
82
  display: block;
58
83
  max-width: 100%;
59
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
84
+ color: var(--#{variables.$prefix}blockquote-color-fore);
60
85
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
86
+ line-height: 1;
61
87
  }
62
88
  }
63
89
 
64
90
  @if (not variables.$is-skelton) {
65
- @each $color in variables.$colors {
91
+ @each $color in variables.$allColors {
66
92
  $colorName: map.get($color, "name");
67
93
  &.is-#{$colorName} {
68
- background-color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-back);
69
- border-left-color: var(
94
+
95
+ //#region local css variables
96
+ --#{variables.$prefix}blockquote-color-fore: var(
97
+ --#{variables.$prefix}color-#{$colorName}-blockquote-fore
98
+ );
99
+ --#{variables.$prefix}blockquote-color-back: var(
100
+ --#{variables.$prefix}color-#{$colorName}-blockquote-back
101
+ );
102
+ --#{variables.$prefix}blockquote-color-border: var(
70
103
  --#{variables.$prefix}color-#{$colorName}-blockquote-border
71
104
  );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-fore);
73
- &.has-quote,
74
- &.has-quote-before {
75
- &::before {
76
- color: var(
77
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
78
- );
79
- }
80
- }
81
- &.has-quote,
82
- &.has-quote-after {
83
- &::after {
84
- color: var(
85
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
86
- );
87
- }
88
- }
105
+ --#{variables.$prefix}blockquote-color-selection-fore: var(
106
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-fore,
107
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
108
+ );
109
+ --#{variables.$prefix}blockquote-color-selection-back: var(
110
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-back,
111
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
112
+ );
113
+ //#endregion local css variables
89
114
  }
90
115
  }
91
116
  }
package/src/components/breadcrumbs.scss CHANGED
@@ -3,45 +3,75 @@
3
3
  @use "../variables/index.scss" as variables;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .breadcrumbs {
6
+ :where(.breadcrumbs) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}breadcrumb-color-fore: var(
9
+ --#{variables.$prefix}color-default-breadcrumb-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
11
+ );
12
+ --#{variables.$prefix}breadcrumb-color-selection-fore: var(
13
+ --#{variables.$prefix}color-default-breadcrumb-selection-fore,
14
+ var(--#{variables.$prefix}color-default-selection-fore)
15
+ );
16
+ --#{variables.$prefix}breadcrumb-color-selection-back: var(
17
+ --#{variables.$prefix}color-default-breadcrumb-selection-back,
18
+ var(--#{variables.$prefix}color-default-selection-back)
19
+ );
20
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
21
+ --#{variables.$prefix}color-default-breadcrumb-divider-fore
22
+ );
23
+ //#endregion local css variables
24
+
7
25
  @include mixins.element();
8
26
  display: flex;
9
27
  flex-wrap: wrap;
10
28
  list-style: none;
11
- > .breadcrumb {
29
+ > :where(.breadcrumb) {
12
30
  @include mixins.element();
13
31
  text-wrap: wrap;
14
- color: var(--#{variables.$prefix}color-default-breadcrumb-fore);
32
+ color: var(--#{variables.$prefix}breadcrumb-color-fore);
33
+ &::selection {
34
+ color: var(--#{variables.$prefix}breadcrumb-color-selection-fore);
35
+ background-color: var(
36
+ --#{variables.$prefix}breadcrumb-color-selection-back
37
+ );
38
+ }
15
39
  &:has(~ .breadcrumb) {
16
40
  &::after {
17
41
  @include mixins.element();
18
42
  content: var(--#{variables.$prefix}breadcrumb-divider);
19
43
  margin: 0 0.5rem;
20
- color: var(--#{variables.$prefix}color-default-breadcrumb-divider-fore);
44
+ color: var(--#{variables.$prefix}breadcrumb-divider-color-fore);
21
45
  user-select: none;
22
46
  }
23
47
  }
24
48
  }
25
49
 
26
50
  @if (not variables.$is-skelton) {
27
- @each $color in variables.$colors {
51
+ @each $color in variables.$allColors {
28
52
  $colorName: map.get($color, "name");
29
53
  &.is-#{$colorName} {
30
- > .breadcrumb {
31
- color: var(--#{variables.$prefix}color-#{$colorName}-breadcrumb-fore);
32
- &:has(~ .breadcrumb) {
33
- &::after {
34
- color: var(
35
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
36
- );
37
- }
38
- }
39
- }
54
+ //#region local css variables
55
+ --#{variables.$prefix}breadcrumb-color-fore: var(
56
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
57
+ );
58
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
59
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
60
+ );
61
+ --#{variables.$prefix}breadcrumb-color-selection-fore: var(
62
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-fore,
63
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
64
+ );
65
+ --#{variables.$prefix}breadcrumb-color-selection-back: var(
66
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-back,
67
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
68
+ );
69
+ //#endregion local css variables
40
70
  }
41
71
  }
42
72
  }
43
73
  }
44
74
 
45
- .breadcrumbs-nav {
75
+ :where(.breadcrumbs-nav) {
46
76
  @include mixins.element();
47
77
  }
package/src/components/button.scss CHANGED
@@ -2,13 +2,89 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .button {
5
+ :where(.button) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}button-color-fore: var(
8
+ --#{variables.$prefix}color-default-button-fore,
9
+ var(--#{variables.$prefix}color-default-fore)
10
+ );
11
+ --#{variables.$prefix}button-color-back: var(
12
+ --#{variables.$prefix}color-default-button-back,
13
+ var(--#{variables.$prefix}color-default-back)
14
+ );
15
+ --#{variables.$prefix}button-color-border: var(
16
+ --#{variables.$prefix}color-default-button-border,
17
+ var(--#{variables.$prefix}color-default-border)
18
+ );
19
+
20
+ //#region focus
21
+ --#{variables.$prefix}button-focus-color-fore: var(
22
+ --#{variables.$prefix}color-default-button-focus-fore,
23
+ var(--#{variables.$prefix}color-default-focus-fore)
24
+ );
25
+ --#{variables.$prefix}button-focus-color-back: var(
26
+ --#{variables.$prefix}color-default-button-focus-back,
27
+ var(--#{variables.$prefix}color-default-focus-back)
28
+ );
29
+ --#{variables.$prefix}button-focus-color-border: var(
30
+ --#{variables.$prefix}color-default-button-focus-border,
31
+ var(--#{variables.$prefix}color-default-focus-border)
32
+ );
33
+ //#endregion focus
34
+
35
+ //#region hover
36
+ --#{variables.$prefix}button-hover-color-fore: var(
37
+ --#{variables.$prefix}color-default-button-hover-fore,
38
+ var(--#{variables.$prefix}color-default-hover-fore)
39
+ );
40
+ --#{variables.$prefix}button-hover-color-back: var(
41
+ --#{variables.$prefix}color-default-button-hover-back,
42
+ var(--#{variables.$prefix}color-default-hover-back)
43
+ );
44
+ --#{variables.$prefix}button-hover-color-border: var(
45
+ --#{variables.$prefix}color-default-button-hover-border,
46
+ var(--#{variables.$prefix}color-default-hover-border)
47
+ );
48
+ //#endregion hover
49
+
50
+ //#region active
51
+ --#{variables.$prefix}button-active-color-fore: var(
52
+ --#{variables.$prefix}color-default-button-active-fore,
53
+ var(--#{variables.$prefix}color-default-active-fore)
54
+ );
55
+ --#{variables.$prefix}button-active-color-back: var(
56
+ --#{variables.$prefix}color-default-button-active-back,
57
+ var(--#{variables.$prefix}color-default-active-back)
58
+ );
59
+ --#{variables.$prefix}button-active-color-border: var(
60
+ --#{variables.$prefix}color-default-button-active-border,
61
+ var(--#{variables.$prefix}color-default-active-border)
62
+ );
63
+ //#endregion active
64
+
65
+ //#region disabled
66
+ --#{variables.$prefix}button-disabled-color-fore: var(
67
+ --#{variables.$prefix}color-default-button-disabled-fore,
68
+ var(--#{variables.$prefix}color-default-disabled-fore)
69
+ );
70
+ --#{variables.$prefix}button-disabled-color-back: var(
71
+ --#{variables.$prefix}color-default-button-disabled-back,
72
+ var(--#{variables.$prefix}color-default-disabled-back)
73
+ );
74
+ --#{variables.$prefix}button-disabled-color-border: var(
75
+ --#{variables.$prefix}color-default-button-disabled-border,
76
+ var(--#{variables.$prefix}color-default-disabled-border)
77
+ );
78
+ //#endregion disabled
79
+
80
+ //#endregion local css variables
81
+
6
82
  @include mixins.element();
7
- background-color: var(--#{variables.$prefix}color-default-button-back);
8
- border-color: var(--#{variables.$prefix}color-default-button-border);
83
+ background-color: var(--#{variables.$prefix}button-color-back);
84
+ border-color: var(--#{variables.$prefix}button-color-border);
9
85
  border-radius: var(--#{variables.$prefix}border-radius-medium);
10
86
  border-style: solid;
11
- color: var(--#{variables.$prefix}color-default-button-fore);
87
+ color: var(--#{variables.$prefix}button-color-fore);
12
88
  cursor: pointer;
13
89
  display: inline-block;
14
90
  height: auto;
@@ -20,6 +96,7 @@
20
96
  user-select: none;
21
97
  vertical-align: top;
22
98
  word-spacing: 0px;
99
+
23
100
  &.is-circle {
24
101
  border-radius: 50%;
25
102
  text-align: center;
@@ -49,108 +126,120 @@
49
126
  width: 5rem;
50
127
  }
51
128
  }
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
- }
129
+
62
130
  &:focus,
63
131
  &.is-focus,
64
132
  &.is-focused {
65
133
  outline: none;
66
- background-color: var(
67
- --#{variables.$prefix}color-default-button-focus-back
68
- );
69
- border-color: var(--#{variables.$prefix}color-default-button-focus-border);
70
- color: var(--#{variables.$prefix}color-default-button-focus-fore);
134
+ background-color: var(--#{variables.$prefix}button-focus-color-back);
135
+ border-color: var(--#{variables.$prefix}button-focus-color-border);
136
+ color: var(--#{variables.$prefix}button-focus-color-fore);
71
137
  }
138
+
139
+ &:hover,
140
+ &.is-hover,
141
+ &.is-hovered {
142
+ outline: none;
143
+ background-color: var(--#{variables.$prefix}button-hover-color-back);
144
+ border-color: var(--#{variables.$prefix}button-hover-color-border);
145
+ color: var(--#{variables.$prefix}button-hover-color-fore);
146
+ }
147
+
72
148
  &:active,
73
149
  &.is-active {
74
- background-color: var(
75
- --#{variables.$prefix}color-default-button-active-back
76
- );
77
- border-color: var(--#{variables.$prefix}color-default-button-active-border);
78
- color: var(--#{variables.$prefix}color-default-button-active-fore);
150
+ background-color: var(--#{variables.$prefix}button-active-color-back);
151
+ border-color: var(--#{variables.$prefix}button-active-color-border);
152
+ color: var(--#{variables.$prefix}button-active-color-fore);
79
153
  }
154
+
80
155
  &[disabled],
81
156
  fieldset[disabled],
82
157
  &.is-disabled {
83
- background-color: var(
84
- --#{variables.$prefix}color-default-button-disabled-back
85
- );
86
- border-color: var(
87
- --#{variables.$prefix}color-default-button-disabled-border
88
- );
89
- color: var(--#{variables.$prefix}color-default-button-disabled-fore);
158
+ background-color: var(--#{variables.$prefix}button-disabled-color-back);
159
+ border-color: var(--#{variables.$prefix}button-disabled-color-border);
160
+ color: var(--#{variables.$prefix}button-disabled-color-fore);
90
161
  }
91
162
 
92
163
  @if (not variables.$is-skelton) {
93
- @each $color in variables.$colors {
164
+ @each $color in variables.$allColors {
94
165
  $colorName: map.get($color, "name");
95
166
  &.is-#{$colorName} {
96
- background-color: var(
97
- --#{variables.$prefix}color-#{$colorName}-button-back
167
+ //#region local css variables
168
+ //#region local css variables
169
+ --#{variables.$prefix}button-color-fore: var(
170
+ --#{variables.$prefix}color-#{$colorName}-button-fore,
171
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
98
172
  );
99
- border-color: var(
100
- --#{variables.$prefix}color-#{$colorName}-button-border
173
+ --#{variables.$prefix}button-color-back: var(
174
+ --#{variables.$prefix}color-#{$colorName}-button-back,
175
+ var(--#{variables.$prefix}color-#{$colorName}-back)
101
176
  );
102
- color: var(--#{variables.$prefix}color-#{$colorName}-button-fore);
103
- &:focus,
104
- &.is-focus,
105
- &.is-focused {
106
- background-color: var(
107
- --#{variables.$prefix}color-#{$colorName}-button-focus-back
108
- );
109
- border-color: var(
110
- --#{variables.$prefix}color-#{$colorName}-button-focus-border
111
- );
112
- color: var(
113
- --#{variables.$prefix}color-#{$colorName}-button-focus-fore
114
- );
115
- }
116
- &:hover,
117
- &.is-hover,
118
- &.is-hovered {
119
- background-color: var(
120
- --#{variables.$prefix}color-#{$colorName}-button-hover-back
121
- );
122
- border-color: var(
123
- --#{variables.$prefix}color-#{$colorName}-button-hover-border
124
- );
125
- color: var(
126
- --#{variables.$prefix}color-#{$colorName}-button-hover-fore
127
- );
128
- }
129
- &:active,
130
- &.is-active {
131
- background-color: var(
132
- --#{variables.$prefix}color-#{$colorName}-button-active-back
133
- );
134
- border-color: var(
135
- --#{variables.$prefix}color-#{$colorName}-button-active-border
136
- );
137
- color: var(
138
- --#{variables.$prefix}color-#{$colorName}-button-active-fore
139
- );
140
- }
141
- &[disabled],
142
- fieldset[disabled],
143
- &.is-disabled {
144
- background-color: var(
145
- --#{variables.$prefix}color-#{$colorName}-button-disabled-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}color-#{$colorName}-button-disabled-border
149
- );
150
- color: var(
151
- --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
152
- );
153
- }
177
+ --#{variables.$prefix}button-color-border: var(
178
+ --#{variables.$prefix}color-#{$colorName}-button-border,
179
+ var(--#{variables.$prefix}color-#{$colorName}-border)
180
+ );
181
+
182
+ //#region focus
183
+ --#{variables.$prefix}button-focus-color-fore: var(
184
+ --#{variables.$prefix}color-#{$colorName}-button-focus-fore,
185
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
186
+ );
187
+ --#{variables.$prefix}button-focus-color-back: var(
188
+ --#{variables.$prefix}color-#{$colorName}-button-focus-back,
189
+ var(--#{variables.$prefix}color-#{$colorName}-focus-back)
190
+ );
191
+ --#{variables.$prefix}button-focus-color-border: var(
192
+ --#{variables.$prefix}color-#{$colorName}-button-focus-border,
193
+ var(--#{variables.$prefix}color-#{$colorName}-focus-border)
194
+ );
195
+ //#endregion focus
196
+
197
+ //#region hover
198
+ --#{variables.$prefix}button-hover-color-fore: var(
199
+ --#{variables.$prefix}color-#{$colorName}-button-hover-fore,
200
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
201
+ );
202
+ --#{variables.$prefix}button-hover-color-back: var(
203
+ --#{variables.$prefix}color-#{$colorName}-button-hover-back,
204
+ var(--#{variables.$prefix}color-#{$colorName}-hover-back)
205
+ );
206
+ --#{variables.$prefix}button-hover-color-border: var(
207
+ --#{variables.$prefix}color-#{$colorName}-button-hover-border,
208
+ var(--#{variables.$prefix}color-#{$colorName}-hover-border)
209
+ );
210
+ //#endregion hover
211
+
212
+ //#region active
213
+ --#{variables.$prefix}button-active-color-fore: var(
214
+ --#{variables.$prefix}color-#{$colorName}-button-active-fore,
215
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
216
+ );
217
+ --#{variables.$prefix}button-active-color-back: var(
218
+ --#{variables.$prefix}color-#{$colorName}-button-active-back,
219
+ var(--#{variables.$prefix}color-#{$colorName}-active-back)
220
+ );
221
+ --#{variables.$prefix}button-active-color-border: var(
222
+ --#{variables.$prefix}color-#{$colorName}-button-active-border,
223
+ var(--#{variables.$prefix}color-#{$colorName}-active-border)
224
+ );
225
+ //#endregion active
226
+
227
+ //#region disabled
228
+ --#{variables.$prefix}button-disabled-color-fore: var(
229
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-fore,
230
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
231
+ );
232
+ --#{variables.$prefix}button-disabled-color-back: var(
233
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-back,
234
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-back)
235
+ );
236
+ --#{variables.$prefix}button-disabled-color-border: var(
237
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-border,
238
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-border)
239
+ );
240
+ //#endregion disabled
241
+
242
+ //#endregion local css variables
154
243
  }
155
244
  }
156
245
  }