@acorex/styles 5.0.7 → 5.0.11

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 (16) hide show
  1. package/dark.scss +0 -0
  2. package/index.scss +8 -1
  3. package/package.json +1 -1
  4. package/src/base/_colors.scss +12 -8
  5. package/src/base/index.scss +15 -2
  6. package/src/components/_alert.scss +1 -1
  7. package/src/components/_button.scss +4 -4
  8. package/src/components/_calendar.scss +1 -1
  9. package/src/components/_checkbox.scss +17 -3
  10. package/src/components/_editor-container.scss +3 -3
  11. package/src/components/_label.scss +4 -2
  12. package/src/components/_popup.scss +36 -2
  13. package/src/components/_radio.scss +6 -1
  14. package/src/components/_tabs.scss +28 -16
  15. package/src/utility/index.scss +180 -0
  16. package/src/variables/_colors.scss +2 -135
package/dark.scss ADDED
File without changes
package/index.scss CHANGED
@@ -1,3 +1,10 @@
1
+
1
2
  @import "./src/base/index.scss";
3
+ @import "./src/icons/style.scss";
4
+
5
+ @import "tailwindcss/base";
6
+ @import "tailwindcss/components";
2
7
  @import "./src/components/index.scss";
3
- @import "./src/icons/style.scss";
8
+
9
+ @import "tailwindcss/utilities";
10
+ @import "./src/utility/index.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.7",
3
+ "version": "5.0.11",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/_colors.scss CHANGED
@@ -1,16 +1,20 @@
1
1
  @import "../variables/colors";
2
- @mixin colors() {
3
- @each $name, $color in $theme-colors {
4
- @if (type-of($color) == "map") {
5
- @each $subname, $variant in $color {
6
- @if ($subname != "") {
2
+ @mixin colors($array) {
3
+ @each $name,
4
+ $color in $array {
5
+ @if (type-of($color)=="map") {
6
+ @each $subname,
7
+ $variant in $color {
8
+ @if ($subname !="") {
7
9
  --ax-color-#{$name}-#{$subname}: #{$variant};
8
- } @else {
10
+ }
11
+ @else {
9
12
  --ax-color-#{$name}: #{$variant};
10
13
  }
11
14
  }
12
- } @else {
15
+ }
16
+ @else {
13
17
  --ax-color-#{$name}: #{$color};
14
18
  }
15
19
  }
16
- }
20
+ }
package/src/base/index.scss CHANGED
@@ -7,5 +7,18 @@
7
7
  :root {
8
8
  --ax-base-size: 8px;
9
9
  --ax-base-ratio: 5;
10
- @include colors();
11
- }
10
+ // --ax-default-background: 240, 240, 240;
11
+ // --ax-default-color: 107, 114, 128;
12
+ @include colors($theme-colors);
13
+ }
14
+
15
+ html,
16
+ body {
17
+ background-color: rgb(var(--ax-color-default-background));
18
+ color: rgba(var(--ax-color-default-color));
19
+ }
20
+
21
+ // .ax-dark-mode,
22
+ // .ax-dark-mode * {
23
+ // @include colors($theme-dark-colors);
24
+ // }
package/src/components/_alert.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  }
64
64
  }
65
65
  &.ax-primary {
66
- @apply ax-bg-primary-50 ax-text-primary;
66
+ @apply ax-bg-primary-50 ax-text-primary dark:ax-bg-primary-500 dark:ax-text-primary-fore;
67
67
  .ax-alert-content {
68
68
  @apply ax-block ax-text-sm;
69
69
  }
package/src/components/_button.scss CHANGED
@@ -72,7 +72,7 @@
72
72
  }
73
73
  // normal
74
74
  &.ax-primary {
75
- @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
75
+ @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-danger-500;
76
76
  &:hover {
77
77
  @apply ax-bg-primary-600;
78
78
  }
@@ -271,13 +271,13 @@
271
271
  }
272
272
  }
273
273
  &.ax-dark-twotone {
274
- @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
274
+ @apply ax-bg-dark-300 ax-text-dark-fore ax-border-transparent;
275
275
  &:hover {}
276
276
  &:focus {
277
- @apply ax-bg-dark-100 ax-text-dark-700;
277
+ @apply ax-bg-dark-100;
278
278
  }
279
279
  &:active {
280
- @apply ax-bg-dark-200 ax-text-dark-700;
280
+ @apply ax-bg-dark-200;
281
281
  }
282
282
  &.ax-state-selected {
283
283
  @apply ax-bg-dark-300 ax-text-dark-fore;
package/src/components/_calendar.scss CHANGED
@@ -71,7 +71,7 @@
71
71
  }
72
72
 
73
73
  &.ax-state-today {
74
- @apply ax-bg-opacity-50 ax-bg-primary-50 ax-text-primary;
74
+ @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary;
75
75
  &:hover {
76
76
  @apply ax-text-primary;
77
77
  }
package/src/components/_checkbox.scss CHANGED
@@ -1,11 +1,19 @@
1
1
  @import "../variables/mixins";
2
2
  @layer components {
3
- .ax-checkbox-container {
4
- @apply ax-text-sm ax-font-medium ax-text-light-700;
3
+ ax-check-box {
4
+ @apply ax-justify-start ax-w-max ax-flex;
5
5
  @include respond(mobile) {
6
6
  @apply ax-text-base;
7
7
  }
8
- .ax-checkbox {
8
+ .ax-wrapper {
9
+ &.ax-state-disabled {
10
+ @apply ax-cursor-not-allowed ax-opacity-60;
11
+ input[type=checkbox] {
12
+ @apply ax-cursor-not-allowed;
13
+ }
14
+ }
15
+ }
16
+ input[type=checkbox] {
9
17
  @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
10
18
  &:checked,
11
19
  &:indeterminate {
@@ -21,5 +29,11 @@
21
29
  @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
22
30
  }
23
31
  }
32
+ ax-label {
33
+ @apply ax-items-center ax-mb-0 ax-font-semibold ax-text-sm ax-text-light-700;
34
+ label {
35
+ @apply ax-mb-0;
36
+ }
37
+ }
24
38
  }
25
39
  }
package/src/components/_editor-container.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @layer components {
3
3
  .ax-editor-container {
4
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
- @apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
5
+ @apply ax-flex ax-rounded ax-bg-white ax-bg-opacity-50 ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
6
6
  &:focus-within {
7
7
  @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
8
8
  }
@@ -38,8 +38,8 @@
38
38
  }
39
39
  }
40
40
  }
41
- .ax-suffix,
42
- .ax-prefix {
41
+ ax-suffix,
42
+ ax-prefix {
43
43
  * {
44
44
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
45
45
  }
package/src/components/_label.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @layer components {
2
- .ax-label {
3
- @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700;
2
+ ax-label {
3
+ label {
4
+ @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700;
5
+ }
4
6
  }
5
7
  }
package/src/components/_popup.scss CHANGED
@@ -1,81 +1,115 @@
1
1
  @layer components {
2
+
3
+ ax-page-footer {
4
+ @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
5
+
6
+ ax-prefix {
7
+ @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
8
+ }
9
+
10
+ ax-suffix {
11
+ @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
12
+ }
13
+ }
14
+
2
15
  .ax-popup {
3
16
  max-height: 98vh;
4
17
  min-height: fit-content;
5
18
  @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-default ax-rounded ax-outline-none ax-p-0;
19
+
6
20
  header {
7
21
  @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
8
22
  }
23
+
9
24
  main {
10
25
  @apply ax-flex-1 ax-overflow-auto;
11
26
  }
27
+
12
28
  footer {
13
29
  @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
14
- .ax-prefix {
30
+
31
+ ax-prefix {
15
32
  @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
16
33
  }
17
- .ax-suffix {
34
+
35
+ ax-suffix {
18
36
  @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
19
37
  }
20
38
  }
39
+
21
40
  header,
22
41
  footer {
23
42
  >div {
24
43
  @apply ax-flex ax-items-center;
25
44
  }
26
45
  }
46
+
27
47
  &.ax-full {
28
48
  @apply ax-w-screen ax-h-screen;
29
49
  }
50
+
30
51
  &.ax-fit {
31
52
  width: fit-content;
32
53
  }
54
+
33
55
  @media all and (min-width: 1280px) {
34
56
  &.ax-sm {
35
57
  width: 420px !important;
36
58
  }
59
+
37
60
  &.ax-md {
38
61
  width: 680px !important;
39
62
  }
63
+
40
64
  &.ax-lg {
41
65
  width: 1024px !important;
42
66
  }
43
67
  }
68
+
44
69
  @media all and (min-width: 1024px) and (max-width: 1279px) {
45
70
  &.ax-sm {
46
71
  width: 100vw;
47
72
  max-height: 100vh;
48
73
  }
74
+
49
75
  &.ax-md {
50
76
  width: 500px !important;
51
77
  }
78
+
52
79
  &.ax-lg {
53
80
  width: 900px !important;
54
81
  }
55
82
  }
83
+
56
84
  @media all and (min-width: 768px) and (max-width: 1023px) {
57
85
  &.ax-sm {
58
86
  width: 100vw;
59
87
  max-height: 100vh;
60
88
  }
89
+
61
90
  &.ax-md {
62
91
  width: 500px !important;
63
92
  }
93
+
64
94
  &.ax-lg {
65
95
  width: 700px !important;
66
96
  }
67
97
  }
98
+
68
99
  @media all and (min-width: 425px) and (max-width: 767px) {
69
100
  &.ax-sm {
70
101
  width: 100vw;
71
102
  max-height: 100vh;
72
103
  }
104
+
73
105
  &.ax-md,
74
106
  &.ax-lg {
75
107
  width: 460px !important;
76
108
  }
77
109
  }
110
+
78
111
  @media all and (min-width: 0px) and (max-width: 424px) {
112
+
79
113
  &.ax-sm,
80
114
  &.ax-md,
81
115
  &.ax-lg {
package/src/components/_radio.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import "../variables/mixins";
2
2
  @layer components {
3
- .ax-radio-container {
3
+ ax-radio {
4
4
  @apply ax-text-sm ax-font-medium ax-text-light-700;
5
5
  @include respond(mobile) {
6
6
  @apply ax-text-base;
@@ -15,5 +15,10 @@
15
15
  @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
16
16
  }
17
17
  }
18
+ ax-label {
19
+ label {
20
+ @apply ax-mb-0;
21
+ }
22
+ }
18
23
  }
19
24
  }
package/src/components/_tabs.scss CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  .ax-items-wrapper {
6
6
  @apply ax-flex;
7
+
7
8
  ax-tab-item {
8
9
  @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-font-medium ax-flex ax-items-center ax-justify-center;
9
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
10
+ min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
10
11
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
11
12
 
12
13
  &.ax-state-disabled {
@@ -18,12 +19,19 @@
18
19
  &.ax-state-active {
19
20
  @apply ax-text-black;
20
21
  }
22
+
23
+ ax-prefix {
24
+ @apply ax-flex ax-flex-row ax-pe-2;
25
+ }
26
+
27
+ ax-suffix {
28
+ @apply ax-flex ax-flex-row ax-ps-2;
29
+ }
21
30
  }
22
31
  }
23
32
 
24
33
  &.ax-tabs-fit {
25
- .ax-items-wrapper
26
- ax-tab-item {
34
+ .ax-items-wrapper ax-tab-item {
27
35
  @apply ax-flex-1;
28
36
  }
29
37
  }
@@ -33,12 +41,16 @@
33
41
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
34
42
  }
35
43
 
36
- &.ax-tabs-vertical {
44
+ &.ax-vertical {
37
45
  .ax-items-wrapper {
38
- @apply ax-flex-col
46
+ @apply ax-flex-col;
47
+
48
+ ax-tab-item {
49
+ @apply ax-text-center ax-justify-start ax-py-2;
50
+ }
39
51
  }
40
52
 
41
- &.ax-tabs-default {
53
+ &.ax-look-default {
42
54
  @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
43
55
 
44
56
  ax-tab-item {
@@ -52,7 +64,7 @@
52
64
  }
53
65
  }
54
66
 
55
- &.ax-tabs-start-line {
67
+ &.ax-look-start-line {
56
68
  ax-tab-item {
57
69
  @apply ax-border-s-2 ax-border-solid ax-border-default;
58
70
 
@@ -70,7 +82,7 @@
70
82
  }
71
83
  }
72
84
 
73
- &.ax-tabs-end-line {
85
+ &.ax-look-end-line {
74
86
  ax-tab-item {
75
87
  @apply ax-border-e-2 ax-border-solid ax-border-default;
76
88
 
@@ -88,7 +100,7 @@
88
100
  }
89
101
  }
90
102
 
91
- &.ax-tabs-pills {
103
+ &.ax-look-pills {
92
104
  ax-tab-item {
93
105
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
94
106
 
@@ -102,7 +114,7 @@
102
114
  }
103
115
  }
104
116
 
105
- &.ax-tabs-pills-color {
117
+ &.ax-look-pills-color {
106
118
  ax-tab-item {
107
119
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
108
120
 
@@ -117,8 +129,8 @@
117
129
  }
118
130
  }
119
131
 
120
- &.ax-tabs-horizontal {
121
- &.ax-tabs-default {
132
+ &.ax-horizontal {
133
+ &.ax-look-default {
122
134
  @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
123
135
 
124
136
  ax-tab-item {
@@ -141,7 +153,7 @@
141
153
  }
142
154
  }
143
155
 
144
- &.ax-tabs-start-line {
156
+ &.ax-look-start-line {
145
157
  ax-tab-item {
146
158
  @apply ax-border-t-2 ax-border-solid ax-border-default;
147
159
 
@@ -159,7 +171,7 @@
159
171
  }
160
172
  }
161
173
 
162
- &.ax-tabs-end-line {
174
+ &.ax-look-end-line {
163
175
  ax-tab-item {
164
176
  @apply ax-border-b-2 ax-border-solid ax-border-default;
165
177
 
@@ -177,7 +189,7 @@
177
189
  }
178
190
  }
179
191
 
180
- &.ax-tabs-pills {
192
+ &.ax-look-pills {
181
193
  ax-tab-item {
182
194
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
183
195
 
@@ -191,7 +203,7 @@
191
203
  }
192
204
  }
193
205
 
194
- &.ax-tabs-pills-color {
206
+ &.ax-look-pills-color {
195
207
  ax-tab-item {
196
208
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
197
209
 
package/src/utility/index.scss ADDED
@@ -0,0 +1,180 @@
1
+ @layer utilities {
2
+ @variants responsive {
3
+ .ax-vertical {
4
+ .ax-items-wrapper {
5
+ @apply ax-flex-col;
6
+
7
+ ax-tab-item {
8
+ @apply ax-text-center ax-justify-start ax-py-2;
9
+ }
10
+ }
11
+
12
+ &.ax-look-default {
13
+ @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
14
+
15
+ ax-tab-item {
16
+ @apply ax-bg-white ax-border-r ax-border-s-2 ax-border-solid ax-border-transparent;
17
+
18
+ &:hover,
19
+ &.ax-state-active {
20
+ @apply ax-font-medium;
21
+ border-inline-start-color: rgb(var(--ax-color-primary)) !important;
22
+ }
23
+ }
24
+ }
25
+
26
+ &.ax-look-start-line {
27
+ ax-tab-item {
28
+ @apply ax-border-s-2 ax-border-solid ax-border-default;
29
+
30
+ &.ax-state-active {
31
+ @apply ax-border-primary ax-text-primary;
32
+
33
+ &:hover {
34
+ @apply ax-border-primary;
35
+ }
36
+ }
37
+
38
+ &:hover {
39
+ @apply ax-border-primary-300 ax-text-primary;
40
+ }
41
+ }
42
+ }
43
+
44
+ &.ax-look-end-line {
45
+ ax-tab-item {
46
+ @apply ax-border-e-2 ax-border-solid ax-border-default;
47
+
48
+ &.ax-state-active {
49
+ @apply ax-border-primary ax-text-primary;
50
+
51
+ &:hover {
52
+ @apply ax-border-primary;
53
+ }
54
+ }
55
+
56
+ &:hover {
57
+ @apply ax-border-primary-300 ax-text-primary;
58
+ }
59
+ }
60
+ }
61
+
62
+ &.ax-look-pills {
63
+ ax-tab-item {
64
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
65
+
66
+ &:hover {
67
+ @apply ax-bg-light-300 ax-text-light-fore;
68
+ }
69
+
70
+ &.ax-state-active {
71
+ @apply ax-bg-light-300 ax-text-light-fore;
72
+ }
73
+ }
74
+ }
75
+
76
+ &.ax-look-pills-color {
77
+ ax-tab-item {
78
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
79
+
80
+ &:hover {
81
+ @apply ax-bg-primary-100 ax-text-primary;
82
+ }
83
+
84
+ &.ax-state-active {
85
+ @apply ax-bg-primary-100 ax-text-primary;
86
+ }
87
+ }
88
+ }
89
+ }
90
+
91
+ .ax-horizontal {
92
+ &.ax-look-default {
93
+ @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
94
+
95
+ ax-tab-item {
96
+ @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
97
+ border-bottom-color: transparent !important;
98
+
99
+ &:first-child {
100
+ @apply ax-rounded-l;
101
+ }
102
+
103
+ &:last-child {
104
+ @apply ax-rounded-r ax-border-r-0;
105
+ }
106
+
107
+ &:hover,
108
+ &.ax-state-active {
109
+ @apply ax-font-medium;
110
+ border-bottom-color: rgb(var(--ax-color-primary)) !important;
111
+ }
112
+ }
113
+ }
114
+
115
+ &.ax-look-start-line {
116
+ ax-tab-item {
117
+ @apply ax-border-t-2 ax-border-solid ax-border-default;
118
+
119
+ &.ax-state-active {
120
+ @apply ax-border-primary ax-text-primary;
121
+
122
+ &:hover {
123
+ @apply ax-border-primary;
124
+ }
125
+ }
126
+
127
+ &:hover {
128
+ @apply ax-border-primary-300 ax-text-primary;
129
+ }
130
+ }
131
+ }
132
+
133
+ &.ax-look-end-line {
134
+ ax-tab-item {
135
+ @apply ax-border-b-2 ax-border-solid ax-border-default;
136
+
137
+ &.ax-state-active {
138
+ @apply ax-border-primary ax-text-primary;
139
+
140
+ &:hover {
141
+ @apply ax-border-primary;
142
+ }
143
+ }
144
+
145
+ &:hover {
146
+ @apply ax-border-primary-300 ax-text-primary;
147
+ }
148
+ }
149
+ }
150
+
151
+ &.ax-look-pills {
152
+ ax-tab-item {
153
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
154
+
155
+ &:hover {
156
+ @apply ax-bg-light-300 ax-text-light-fore;
157
+ }
158
+
159
+ &.ax-state-active {
160
+ @apply ax-bg-light-300 ax-text-light-fore;
161
+ }
162
+ }
163
+ }
164
+
165
+ &.ax-look-pills-color {
166
+ ax-tab-item {
167
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
168
+
169
+ &:hover {
170
+ @apply ax-bg-primary-100 ax-text-primary;
171
+ }
172
+
173
+ &.ax-state-active {
174
+ @apply ax-bg-primary-100 ax-text-primary;
175
+ }
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
package/src/variables/_colors.scss CHANGED
@@ -1,135 +1,2 @@
1
- $theme-colors: (
2
- "white": "255, 255, 255",
3
- "black": "0, 0, 0",
4
- "placeholder": "156, 163, 175",
5
- "border": "209, 213, 219",
6
- "disabled": "224, 224, 224",
7
- "disabled-fore": "117, 117, 117",
8
- "disabled-border": "191, 191, 191",
9
- "primary": (
10
- "": "59, 130, 246",
11
- "fore": "255, 255, 255",
12
- "50": "239, 246, 255",
13
- "100": "219, 234, 254",
14
- "200": "191, 219, 254",
15
- "300": "147, 197, 253",
16
- "400": "96, 165, 250",
17
- "500": "59, 130, 246",
18
- "600": "37, 99, 235",
19
- "700": "29 ,78, 216",
20
- "800": "30, 64 ,175",
21
- "900": "30, 58, 138",
22
- ),
23
- "secondary": (
24
- "": "236, 72, 153",
25
- "fore": "255, 255, 255",
26
- "50": "253, 242, 248",
27
- "100": "252, 231, 243",
28
- "200": "251, 207, 232",
29
- "300": "249, 168, 212",
30
- "400": "244, 114, 182",
31
- "500": "236, 72, 153",
32
- "600": "219, 39, 119",
33
- "700": "190, 24, 93",
34
- "800": "157,23,77",
35
- "900": "131, 24, 67",
36
- ),
37
- "success": (
38
- "": "76, 175, 80",
39
- "fore": "255, 255, 255",
40
- "50": "236, 253, 245",
41
- "100": "209, 250, 229",
42
- "200": "167, 243, 208",
43
- "300": "110, 231, 183",
44
- "400": "52, 211, 153",
45
- "500": "16, 185, 129",
46
- "600": "5, 150, 105",
47
- "700": "4, 120, 87",
48
- "800": "6, 95, 70",
49
- "900": "6, 78, 59",
50
- ),
51
- "danger": (
52
- "": "239, 68, 68",
53
- "fore": "255, 255, 255",
54
- "50": "254, 242, 242",
55
- "100": "254, 226, 226",
56
- "200": "254, 202, 202",
57
- "300": "252, 165, 165",
58
- "400": "248, 113, 113",
59
- "500": "239, 68, 68",
60
- "600": "220, 38, 38",
61
- "700": "185, 28, 28",
62
- "800": "153, 27, 27",
63
- "900": "127, 29, 29",
64
- ),
65
- "warning": (
66
- "": "251, 191, 36",
67
- "fore": "120, 53, 15",
68
- "50": "255, 251, 235",
69
- "100": "254, 243, 199",
70
- "200": "253, 230, 138",
71
- "300": "252, 211, 77",
72
- "400": "251, 191, 36",
73
- "500": "245, 158, 11",
74
- "600": "217, 119, 6",
75
- "700": "180, 83, 9",
76
- "800": "146, 64, 14",
77
- "900": "120, 53, 15",
78
- ),
79
- "info": (
80
- "": "139, 92, 246",
81
- "fore": "255, 255, 255",
82
- "50": "245, 243, 255",
83
- "100": "237, 233, 254",
84
- "200": "221, 214,254",
85
- "300": "196, 181, 253",
86
- "400": "167, 139, 250",
87
- "500": "139, 92, 246",
88
- "600": "124, 58, 237",
89
- "700": "109, 40, 217",
90
- "800": "91, 33, 182",
91
- "900": "76, 29, 149",
92
- ),
93
- "dark": (
94
- "": "21, 21, 21",
95
- "fore": "255, 255, 255",
96
- "50": "227, 227, 227",
97
- "100": "185, 185, 185",
98
- "200": "138, 138, 138",
99
- "300": "91, 91, 91",
100
- "400": "56, 56, 56",
101
- "500": "21, 21, 21",
102
- "600": "18, 18, 18",
103
- "700": "15, 15, 15",
104
- "800": "12, 12, 12",
105
- "900": "6, 6, 6",
106
- ),
107
- "light": (
108
- "": "107, 114, 128",
109
- "fore": "17, 24, 39",
110
- "50": "249, 250, 251",
111
- "100": "243, 244, 246",
112
- "200": "229, 231, 235",
113
- "300": "209, 213, 219",
114
- "400": "156, 163, 175",
115
- "500": "107, 114, 128",
116
- "600": "75, 85, 99",
117
- "700": "55, 65, 81",
118
- "800": "31, 41, 55",
119
- "900": "17, 24, 39",
120
- ),
121
- "gray": (
122
- "": "107, 114, 128",
123
- "fore": "17, 24, 39",
124
- "50": "249, 250, 251",
125
- "100": "243, 244, 246",
126
- "200": "229, 231, 235",
127
- "300": "209, 213, 219",
128
- "400": "156, 163, 175",
129
- "500": "107, 114, 128",
130
- "600": "75, 85, 99",
131
- "700": "55, 65, 81",
132
- "800": "31, 41, 55",
133
- "900": "17, 24, 39",
134
- ),
135
- );
1
+ $theme-colors: ( "default-background":"255, 255, 255", "default-color":"79 87 94", "white": "255, 255, 255", "black": "0, 0, 0", "placeholder": "156, 163, 175", "border": "209, 213, 219", "disabled": "224, 224, 224", "disabled-fore": "117, 117, 117", "disabled-border": "191, 191, 191", "primary": ( "": "59, 130, 246", "fore": "255, 255, 255", "50": "239, 246, 255", "100": "219, 234, 254", "200": "191, 219, 254", "300": "147, 197, 253", "400": "96, 165, 250", "500": "59, 130, 246", "600": "37, 99, 235", "700": "29 ,78, 216", "800": "30, 64 ,175", "900": "30, 58, 138", ), "secondary": ( "": "236, 72, 153", "fore": "255, 255, 255", "50": "253, 242, 248", "100": "252, 231, 243", "200": "251, 207, 232", "300": "249, 168, 212", "400": "244, 114, 182", "500": "236, 72, 153", "600": "219, 39, 119", "700": "190, 24, 93", "800": "157,23,77", "900": "131, 24, 67", ), "success": ( "": "76, 175, 80", "fore": "255, 255, 255", "50": "236, 253, 245", "100": "209, 250, 229", "200": "167, 243, 208", "300": "110, 231, 183", "400": "52, 211, 153", "500": "16, 185, 129", "600": "5, 150, 105", "700": "4, 120, 87", "800": "6, 95, 70", "900": "6, 78, 59", ), "danger": ( "": "239, 68, 68", "fore": "255, 255, 255", "50": "254, 242, 242", "100": "254, 226, 226", "200": "254, 202, 202", "300": "252, 165, 165", "400": "248, 113, 113", "500": "239, 68, 68", "600": "220, 38, 38", "700": "185, 28, 28", "800": "153, 27, 27", "900": "127, 29, 29", ), "warning": ( "": "251, 191, 36", "fore": "120, 53, 15", "50": "255, 251, 235", "100": "254, 243, 199", "200": "253, 230, 138", "300": "252, 211, 77", "400": "251, 191, 36", "500": "245, 158, 11", "600": "217, 119, 6", "700": "180, 83, 9", "800": "146, 64, 14", "900": "120, 53, 15", ), "info": ( "": "139, 92, 246", "fore": "255, 255, 255", "50": "245, 243, 255", "100": "237, 233, 254", "200": "221, 214,254", "300": "196, 181, 253", "400": "167, 139, 250", "500": "139, 92, 246", "600": "124, 58, 237", "700": "109, 40, 217", "800": "91, 33, 182", "900": "76, 29, 149", ), "dark": ( "": "21, 21, 21", "fore": "255, 255, 255", "50": "227, 227, 227", "100": "185, 185, 185", "200": "138, 138, 138", "300": "91, 91, 91", "400": "56, 56, 56", "500": "21, 21, 21", "600": "18, 18, 18", "700": "15, 15, 15", "800": "12, 12, 12", "900": "6, 6, 6", ), "light": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "249, 250, 251", "100": "243, 244, 246", "200": "229, 231, 235", "300": "209, 213, 219", "400": "156, 163, 175", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), "gray": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "249, 250, 251", "100": "243, 244, 246", "200": "229, 231, 235", "300": "209, 213, 219", "400": "156, 163, 175", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), );
2
+ $theme-dark-colors: ( "default-background":"32, 32, 32", "default-color":"255, 255, 255, 0.87", "white": "32, 32, 32", "black": "255, 255, 255", "placeholder": "156, 163, 175", "border": "209, 213, 219", "disabled": "224, 224, 224", "disabled-fore": "117, 117, 117", "disabled-border": "191, 191, 191", "primary": ( "": "59, 130, 246", "fore": "255, 255, 255", "50": "59, 130, 246", "100": "30, 58, 138", "200": "30, 64 ,175", "300": "29 ,78, 216", "400": "37, 99, 235", "500": "59, 130, 246", "600": "37, 99, 235", "700": "29 ,78, 216", "800": "30, 64 ,175", "900": "30, 58, 138", ), "secondary": ( "": "236, 72, 153", "fore": "255, 255, 255", "50": "236, 72, 153", "100": "131, 24, 67", "200": "157,23,77", "300": "190, 24, 93", "400": "219, 39, 119", "500": "236, 72, 153", "600": "219, 39, 119", "700": "190, 24, 93", "800": "157,23,77", "900": "131, 24, 67", ), "success": ( "": "76, 175, 80", "fore": "255, 255, 255", "50": "16, 185, 129", "100": "6, 78, 59", "200": "6, 95, 70", "300": "4, 120, 87", "400": "5, 150, 105", "500": "16, 185, 129", "600": "5, 150, 105", "700": "4, 120, 87", "800": "6, 95, 70", "900": "6, 78, 59", ), "danger": ( "": "239, 68, 68", "fore": "255, 255, 255", "50": "239, 68, 68", "100": "127, 29, 29", "200": "153, 27, 27", "300": "185, 28, 28", "400": "220, 38, 38", "500": "239, 68, 68", "600": "220, 38, 38", "700": "185, 28, 28", "800": "153, 27, 27", "900": "127, 29, 29", ), "warning": ( "": "251, 191, 36", "fore": "120, 53, 15", "50": "245, 158, 11", "100": "120, 53, 15", "200": "146, 64, 14", "300": "180, 83, 9", "400": "217, 119, 6", "500": "245, 158, 11", "600": "217, 119, 6", "700": "180, 83, 9", "800": "146, 64, 14", "900": "120, 53, 15", ), "info": ( "": "139, 92, 246", "fore": "255, 255, 255", "50": "139, 92, 246", "100": "76, 29, 149", "200": "91, 33, 182", "300": "109, 40, 217", "400": "124, 58, 237", "500": "139, 92, 246", "600": "124, 58, 237", "700": "109, 40, 217", "800": "91, 33, 182", "900": "76, 29, 149", ), "dark": ( "": "21, 21, 21", "fore": "255, 255, 255", "50": "21, 21, 21", "100": "6, 6, 6", "200": "12, 12, 12", "300": "15, 15, 15", "400": "18, 18, 18", "500": "21, 21, 21", "600": "18, 18, 18", "700": "15, 15, 15", "800": "12, 12, 12", "900": "6, 6, 6", ), "light": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "107, 114, 128", "100": "75, 85, 99", "200": "55, 65, 81", "300": "31, 41, 55", "400": "17, 24, 39", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), "gray": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "107, 114, 128", "100": "17, 24, 39", "200": "31, 41, 55", "300": "55, 65, 81", "400": "75, 85, 99", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), );