@acorex/styles 3.0.11 → 3.0.15

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 (7) hide show
  1. package/package.json +1 -1
  2. package/scss/buttons.scss +5 -34
  3. package/scss/calendar.scss +2 -2
  4. package/scss/checkbox.scss +1 -1
  5. package/scss/forms.scss +35 -27
  6. package/scss/master.scss +110 -200
  7. package/scss/variables.scss +24 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "3.0.11",
3
+ "version": "3.0.15",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/buttons.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @import "./mixin.scss";
3
3
 
4
4
  .ax {
5
-
6
5
  &.buttons {
7
6
  display: inline-flex;
8
7
  flex-direction: row;
@@ -16,7 +15,6 @@
16
15
  border-radius: 0 !important;
17
16
  font-size: inherit !important;
18
17
  margin-inline-start: 0.25em;
19
-
20
18
  }
21
19
  }
22
20
 
@@ -24,19 +22,18 @@
24
22
  position: relative;
25
23
  cursor: pointer;
26
24
  display: inline-block;
27
- min-height: 1em;
28
25
  border: none;
29
26
  vertical-align: baseline;
30
- padding: 0.75em;
31
27
  text-transform: none;
32
28
  text-shadow: none;
33
29
  font-family: inherit;
34
30
  font-size: inherit;
31
+ font-weight: 500;
35
32
  text-align: center;
36
33
  text-decoration: none;
37
34
  overflow: hidden;
38
35
  line-height: 0.7em;
39
-
36
+
40
37
  .button-inner-content {
41
38
  display: flex;
42
39
  flex-direction: row;
@@ -45,8 +42,8 @@
45
42
  white-space: nowrap;
46
43
 
47
44
  .icon {
48
- margin-inline-end: 0.25em;
49
- margin-inline-start: 0.25em;
45
+ margin-inline-end: 0.5rem;
46
+ margin-inline-start: 0.5rem;
50
47
  }
51
48
  }
52
49
 
@@ -54,8 +51,6 @@
54
51
  pointer-events: none;
55
52
  }
56
53
 
57
-
58
-
59
54
  @include ax-border-radius(var(--ax-size-border-radius));
60
55
  -webkit-tap-highlight-color: transparent;
61
56
 
@@ -66,29 +61,5 @@
66
61
  &:focus {
67
62
  @include ax-transition-all();
68
63
  }
69
-
70
- &.disabled {
71
- background: var(--ax-light-light-color) !important;
72
- border-color: var(--ax-light-light-color) !important;
73
- color: var(--ax-gray-dark-color) !important;
74
- cursor: not-allowed;
75
-
76
- &:hover {
77
- background: var(--ax-gray-light-color) !important;
78
- border-color: var(--ax-light-light-color) !important;
79
- color: var(--ax-gray-dark-color) !important;
80
- }
81
-
82
- &:focus {
83
- background: var(--ax-gray-light-color) !important;
84
- border-color: var(--ax-light-light-color) !important;
85
- color: var(--ax-gray-dark-color) !important;
86
- }
87
-
88
- &>.icon {
89
- background-color: transparent;
90
- }
91
- }
92
-
93
64
  }
94
- }
65
+ }
package/scss/calendar.scss CHANGED
@@ -1,4 +1,4 @@
1
- .ax-calendar {
1
+ .ax-calendar-container {
2
2
  border: 1px solid var(--ax-border-color);
3
3
  border-radius: var(--ax-size-border-radius);
4
4
  .ax-calendar-header {
@@ -44,7 +44,7 @@
44
44
  background-color: rgb(241, 241, 241);
45
45
  &::before {
46
46
  content: "";
47
- padding-top: 100%;
47
+ padding-top: 50%;
48
48
  float: left;
49
49
  }
50
50
  &::after {
package/scss/checkbox.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  width: 16px;
9
9
  height: 16px;
10
10
  border: 1px solid var(--ax-border-color);
11
- border-radius: var(--ax-size-border-radius);
11
+ border-radius: 4px;
12
12
  background-color: var(--ax-white-color);
13
13
  margin: 0;
14
14
  appearance: none;
package/scss/forms.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .ax {
3
3
  &.form-control {
4
4
  &.disabled {
5
- background-color: var(--ax-light-light-color) !important;
5
+ background: var(--ax-gray-color) !important;
6
6
  }
7
7
  }
8
8
  &.items-wrapper {
@@ -16,28 +16,26 @@
16
16
  min-width: 40px;
17
17
  }
18
18
  .arrow-number {
19
+ display: flex;
20
+ flex-direction: column;
21
+ justify-content: space-between;
19
22
  position: relative;
20
- width: 40px;
21
- ax-button {
22
- position: absolute;
23
- left: 0;
24
- height: 50%;
25
- button {
26
- padding: 0;
27
- display: flex;
28
- justify-content: center;
29
- align-items: center;
23
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio));
24
+ height: 100%;
25
+ ax-button{
26
+ button{
27
+ height: 50% !important;
28
+ position: absolute;
29
+ padding: 0.4rem !important;
30
30
  }
31
- &:first-child {
32
- top: 0;
33
- button {
34
- align-items: flex-end;
31
+ &:first-child{
32
+ button{
33
+ top: 0;
35
34
  }
36
35
  }
37
- &:last-child {
38
- bottom: 0;
39
- button {
40
- align-items: flex-start;
36
+ &:last-child{
37
+ button{
38
+ bottom: 0;
41
39
  }
42
40
  }
43
41
  }
@@ -107,7 +105,7 @@
107
105
  }
108
106
  &.disabled {
109
107
  & > input {
110
- background-color: var(--ax-light-light-color) !important;
108
+ background: var(--ax-gray-color) !important;
111
109
  cursor: not-allowed !important;
112
110
  }
113
111
  }
@@ -128,13 +126,13 @@
128
126
  -webkit-appearance: none !important;
129
127
  @include ax-border-radius(var(--ax-size-border-radius));
130
128
  &::-webkit-input-placeholder {
131
- color: var(--ax-border-color) !important;
129
+ color: var(--ax-gray-dark-color) !important;
132
130
  }
133
131
  &:-ms-input-placeholder {
134
- color: var(--ax-border-color) !important;
132
+ color: var(--ax-gray-dark-color) !important;
135
133
  }
136
134
  &::placeholder {
137
- color: var(--ax-border-color) !important;
135
+ color: var(--ax-gray-dark-color) !important;
138
136
  }
139
137
  [dir="rtl"] & {
140
138
  text-align: right;
@@ -251,6 +249,8 @@
251
249
  }
252
250
  }
253
251
  }
252
+
253
+
254
254
  &.required-state {
255
255
  // position: relative;
256
256
  // &::before {
@@ -330,13 +330,20 @@
330
330
  }
331
331
  @include ax-border-radius(var(--ax-size-border-radius));
332
332
  &.disabled {
333
- background-color: var(--ax-light-light-color) !important;
333
+ background: var(--ax-gray-color) !important;
334
334
  cursor: not-allowed !important;
335
335
  }
336
336
  .readonly {
337
+ opacity: 0.4;
338
+
337
339
  input {
338
340
  cursor: no-drop;
339
341
  }
342
+ .button{
343
+ &.disabled {
344
+ background: transparent !important;
345
+ }
346
+ }
340
347
  }
341
348
 
342
349
  .form-item {
@@ -344,6 +351,7 @@
344
351
  border: none;
345
352
  box-shadow: none;
346
353
  }
354
+
347
355
  }
348
356
  .content {
349
357
  border: none;
@@ -422,7 +430,7 @@
422
430
  }
423
431
  .button {
424
432
  border-radius: 0 !important;
425
- height: 100%;
433
+ height: 100% !important;
426
434
  }
427
435
  }
428
436
  &.chips-container {
@@ -503,11 +511,11 @@
503
511
  }
504
512
  .chips-blank {
505
513
  border: none;
506
- background-color: var(--ax-gray-trans-light-color);
514
+ background-color:transparent;
507
515
  flex: unset;
508
516
  &:hover {
509
517
  border: none;
510
- background-color: var(--ax-gray-trans-light-color);
518
+ background-color: transparent;
511
519
  }
512
520
  }
513
521
  & > div {
package/scss/master.scss CHANGED
@@ -2,36 +2,31 @@
2
2
  :root {
3
3
  --ax-border-color: #d1d5db;
4
4
  --ax-border-dark-color: rgba(34, 36, 38, 0.3);
5
+ --ax-base-size: 8px;
6
+ --ax-base-ratio: 5;
5
7
  // Create Sizes
6
- @each $name,
7
- $size in $sizes {
8
- @if type-of($size)=="map" {
9
- @each $subname,
10
- $variant in $size {
11
- @if $name=="" {
8
+ @each $name, $size in $sizes {
9
+ @if type-of($size) == "map" {
10
+ @each $subname, $variant in $size {
11
+ @if $name== "" {
12
12
  --ax-size-#{$name}#{$subname}: #{$variant};
13
- }
14
- @else {
13
+ } @else {
15
14
  --ax-size-#{$name}-#{$subname}: #{$variant};
16
15
  }
17
16
  }
18
17
  }
19
18
  }
20
19
  // Create Colors
21
- @each $name,
22
- $color in $colors {
23
- @if type-of($color)=="map" {
24
- @each $subname,
25
- $variant in $color {
26
- @if $subname=="" {
20
+ @each $name, $color in $colors {
21
+ @if type-of($color) == "map" {
22
+ @each $subname, $variant in $color {
23
+ @if $subname== "" {
27
24
  --ax-#{$name}-#{$color-suffix}: #{$variant};
28
- }
29
- @else {
25
+ } @else {
30
26
  --ax-#{$name}-#{$subname}-#{$color-suffix}: #{$variant};
31
27
  }
32
28
  }
33
- }
34
- @else {
29
+ } @else {
35
30
  --ax-#{$name}-#{$color-suffix}: #{$color};
36
31
  }
37
32
  }
@@ -40,25 +35,34 @@
40
35
  // Sizes
41
36
  .ax {
42
37
  &.form-control {
43
- height: 40px;
44
- padding: 5px 15px;
38
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
39
+ padding: 1rem;
45
40
  font-size: 1rem;
46
- font-weight: 400;
41
+ font-weight: 500;
47
42
  &.sm {
48
- height: 30px;
49
- padding: 3px 6px;
50
- font-size: .875rem;
43
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
44
+ padding: 0.3rem;
45
+ font-size: 0.875rem;
46
+ &.ax-button-icon {
47
+ padding: 0.3rem;
48
+ }
51
49
  }
52
50
  &.md {
53
- height: 40px;
54
- padding: 5px 15px;
51
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
52
+ padding: 1rem;
55
53
  font-size: 1rem;
56
54
  font-weight: 500;
55
+ &.ax-button-icon {
56
+ padding: 0.7rem;
57
+ }
57
58
  }
58
59
  &.lg {
59
- height: 50px;
60
- padding: 9px 12px;
61
- font-size: 1.25rem;
60
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
61
+ padding: 1rem 0.8rem;
62
+ font-size: 1.5rem;
63
+ &.ax-button-icon {
64
+ padding: 0.9rem;
65
+ }
62
66
  }
63
67
  }
64
68
  }
@@ -78,12 +82,10 @@
78
82
  // }
79
83
  // }
80
84
  // }
81
- @each $name,
82
- $size in $sizes {
83
- @if type-of($size)=="map" {
84
- @each $subname,
85
- $variant in $size {
86
- @if $name=="" {
85
+ @each $name, $size in $sizes {
86
+ @if type-of($size) == "map" {
87
+ @each $subname, $variant in $size {
88
+ @if $name== "" {
87
89
  .ax-mrg-#{$subname} {
88
90
  margin: var(--ax-size-#{$subname}) !important;
89
91
  }
@@ -96,13 +98,11 @@ $size in $sizes {
96
98
  }
97
99
 
98
100
  // Create Classes
99
- @each $name,
100
- $color in $colors {
101
+ @each $name, $color in $colors {
101
102
  .ax {
102
- @if type-of($color)=="map" {
103
- @each $subname,
104
- $variant in $color {
105
- @if $subname=="" {
103
+ @if type-of($color) == "map" {
104
+ @each $subname, $variant in $color {
105
+ @if $subname== "" {
106
106
  &.bg-#{$name} {
107
107
  background-color: var(--ax-#{$name}-#{$color-suffix});
108
108
  }
@@ -123,179 +123,89 @@ $color in $colors {
123
123
  background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
124
124
  }
125
125
  &.#{$name} {
126
- color: var(--ax-#{$name}-fore-#{$color-suffix});
127
- background-color: var(--ax-#{$name}-#{$color-suffix});
128
- &:hover {
129
- background-color: var(--ax-#{$name}-#{$color-suffix});
126
+ @if ($name == "light") {
127
+ background: var(--ax-white-#{$color-suffix});
128
+ color: var(--ax-dark-#{$color-suffix});
129
+ } @else {
130
+ background: var(--ax-#{$name}-#{$color-suffix});
130
131
  color: var(--ax-#{$name}-fore-#{$color-suffix});
131
132
  }
132
- &.twotone {
133
- color: var(--ax-#{$name}-#{$color-suffix});
134
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
135
- &.disabled {
136
- color: var(--ax-gray-#{$color-suffix}) !important;
137
- background-color: var(--ax-gray-trans-light-color) !important;
138
- cursor: not-allowed !important;
139
- i {
140
- color: var(--ax-gray-dark-color) !important;
141
- }
142
- &:hover {
143
- background: var(--ax-light-light-color) !important;
144
- border-color: var(--ax-light-light-color) !important;
145
- color: var(--ax-gray-dark-color) !important;
146
- cursor: not-allowed !important;
147
- }
133
+ &:hover {
134
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
135
+ }
136
+ &:active {
137
+ background: var(--ax-#{$name}-light-#{$color-suffix});
138
+ }
139
+ &.disabled {
140
+ background: var(--ax-gray-color) !important;
141
+ color: var(--ax-gray-fore-color) !important;
142
+ border-color: var(--ax-gray-color) !important;
143
+ cursor: not-allowed;
144
+ &:hover,
145
+ &:active {
146
+ background: var(--ax-gray-color) !important;
147
+ color: var(--ax-gray-fore-color) !important;
148
148
  }
149
149
  }
150
- &.blank {
151
- color: var(--ax-#{$name}-#{$color-suffix});
152
- background-color: var(--ax-white-color);
153
- &.disabled {
154
- i {
155
- color: var(--ax-gray-dark-color) !important;
156
- &:hover {
157
- color: var(--ax-gray-dark-color) !important;
158
- }
159
- }
160
- &:hover {
161
- background: var(--ax-light-light-color) !important;
162
- border-color: var(--ax-light-light-color) !important;
163
- color: var(--ax-gray-dark-color) !important;
164
- i{
165
- color: var(--ax-gray-dark-color) !important;
166
-
167
- }
168
- }
150
+ &.twotone {
151
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
152
+ @if ($name == "light") {
153
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
154
+ } @else {
155
+ color: var(--ax-#{$name}-#{$color-suffix});
169
156
  }
170
- // i {
171
- // // background-color: var(--ax-#{$name}-light-#{$color-suffix}) !important;
172
- // // color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
173
- // color: var(--ax-#{$name}-dark-#{$color-suffix}) !important;
174
- // background-color: var(--ax-#{$name}-trans-light-#{$color-suffix}) !important;
175
- // border-radius: 4px;
176
- // -moz-border-radius: 4px;
177
- // -webkit-border-radius: 4px;
178
- // }
157
+
179
158
  &:hover {
180
- background-color: var(--ax-#{$name}-light-#{$color-suffix}) !important;
181
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
182
- transition: all 0.3s;
183
- i {
184
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
185
- }
159
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
160
+ }
161
+ &:active {
162
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
186
163
  }
187
164
  }
188
- &.button {
189
- color: var(--ax-#{$name}-fore-#{$color-suffix});
190
- background-color: var(--ax-#{$name}-#{$color-suffix});
191
- border-width: 1px;
192
- border-style: solid;
165
+ &.outline {
166
+ background: transparent;
167
+ border: 1px solid;
193
168
  border-color: var(--ax-#{$name}-#{$color-suffix});
194
- outline-color:var(--ax-#{$name}-#{$color-suffix});
195
- font-weight: 500;
196
- &:hover {
197
- background-color: var(--ax-#{$name}-light-#{$color-suffix});
198
- border-color: var(--ax-#{$name}-light-#{$color-suffix});
169
+ @if ($name == "light") {
170
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
171
+ } @else {
172
+ color: var(--ax-#{$name}-#{$color-suffix});
199
173
  }
200
- &:focus {
201
- background-color: var(--ax-#{$name}-dark-#{$color-suffix});
202
- border-color: var(--ax-#{$name}-dark-#{$color-suffix});
174
+
175
+ &:hover {
176
+ background: var(--ax-#{$name}-#{$color-suffix});
177
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
203
178
  }
204
- &.selected {
205
- background-color: var(--ax-#{$name}-dark-#{$color-suffix});
206
- border-color: var(--ax-#{$name}-dark-#{$color-suffix});
179
+ &:active {
180
+ background: var(--ax-#{$name}-light-#{$color-suffix});
181
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
182
+ border-color: var(--ax-#{$name}-light-#{$color-suffix});
207
183
  }
208
- &.outline {
209
- background-color: transparent !important;
210
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
211
- &:hover {
212
- background-color: var(--ax-#{$name}-#{$color-suffix}) !important;
213
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
214
- }
215
- &:focus {
216
- background-color: var(--ax-#{$name}-#{$color-suffix}) !important;
217
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
218
- }
219
- &.selected {
220
- background-color: var(--ax-#{$name}-trans-dark-#{$color-suffix}) !important;
221
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
222
- }
223
- &.disabled {
224
- background: transparent !important;
225
- border-color: var(--ax-light-light-color) !important;
226
- color: var(--ax-gray-dark-color) !important;
227
- }
228
- .icon {
229
- background-color: transparent !important;
230
- }
184
+ }
185
+ &.blank {
186
+ background: transparent;
187
+ @if ($name == "light") {
188
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
189
+ } @else {
190
+ color: var(--ax-#{$name}-#{$color-suffix});
231
191
  }
232
- &.blank {
233
- background-color: transparent !important;
234
- border: none !important;
235
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
236
- &:hover {
237
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix}) !important;
238
- border: none !important;
239
- color: var(--ax-#{$name}-dark-#{$color-suffix}) !important;
240
- .icon {
241
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
242
- }
243
- }
244
- &:focus {
245
- border: none !important;
246
- @if $name=="light" {
247
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
248
- }
249
- @else {
250
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
251
- }
252
- }
253
- &.disabled {
254
- background: var(--ax-light-light-color) !important;
255
- border: none !important;
256
- color: var(--ax-gray-dark-color) !important;
257
- &:hover {
258
- .icon {
259
- color: var(--ax-gray-dark-color) !important;
260
- }
261
- }
262
- }
263
- &.selected {
264
- background-color: var(--ax-#{$name}-trans-dark-#{$color-suffix}) !important;
265
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
266
- }
267
- .icon {
268
- background-color: transparent !important;
192
+
193
+ &:hover {
194
+ @if ($name == "light") {
195
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
196
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
197
+ } @else {
198
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
199
+ color: var(--ax-#{$name}-#{$color-suffix});
269
200
  }
270
201
  }
271
- &.twotone {
272
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix}) !important;
273
- border: none !important;
274
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
275
- &:hover {
276
- background-color: var(--ax-#{$name}-light-#{$color-suffix}) !important;
277
- border: none !important;
278
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
279
- .icon {
280
- color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
281
- }
282
- }
283
- &:focus {
284
- border: none !important;
285
- }
286
- &.disabled {
287
- background: transparent !important;
288
- border: none !important;
289
- i {
290
- color: var(--ax-gray-dark-color) !important;
291
- }
292
- }
293
- &.selected {
294
- background-color: var(--ax-#{$name}-trans-dark-#{$color-suffix}) !important;
295
- color: var(--ax-#{$name}-#{$color-suffix}) !important;
296
- }
297
- .icon {
298
- background-color: transparent !important;
202
+ &:active {
203
+ @if ($name == "light") {
204
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
205
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
206
+ } @else {
207
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
208
+ color: var(--ax-#{$name}-#{$color-suffix});
299
209
  }
300
210
  }
301
211
  }
@@ -308,4 +218,4 @@ $color in $colors {
308
218
  }
309
219
  }
310
220
  }
311
- }
221
+ }
package/scss/variables.scss CHANGED
@@ -4,7 +4,7 @@ $white: #fff;
4
4
  $black: #000;
5
5
  $primary: #3b82f6;
6
6
  $secondary: #ec4899;
7
- $gray: #6b7280;
7
+ $gray: #D1D5DB;
8
8
  $success: #10b981;
9
9
  $info: #8b5cf6;
10
10
  $warning: #f59e0b;
@@ -18,72 +18,72 @@ $colors: (
18
18
  "primary": (
19
19
  "": $primary,
20
20
  "fore": $white,
21
- "light": lighten($primary, 7%),
22
- "dark": darken($primary, 7%),
21
+ "light": lighten($primary, 10%),
22
+ "dark": darken($primary, 10%),
23
23
  "trans-dark": transparentize($primary, 0.85),
24
24
  "trans-light": transparentize($primary, 0.85),
25
25
  ),
26
26
  "secondary": (
27
27
  "": $secondary,
28
28
  "fore": $white,
29
- "light": lighten($secondary, 15%),
30
- "dark": darken($secondary, 7%),
29
+ "light": lighten($secondary, 10%),
30
+ "dark": darken($secondary, 10%),
31
31
  "trans-dark": transparentize($secondary, 0.85),
32
32
  "trans-light": transparentize($secondary, 0.85),
33
33
  ),
34
34
  "info": (
35
35
  "": $info,
36
36
  "fore": $white,
37
- "light": lighten($info, 15%),
38
- "dark": darken($info, 15%),
37
+ "light": lighten($info, 10%),
38
+ "dark": darken($info, 10%),
39
39
  "trans-dark": transparentize($info, 0.85),
40
40
  "trans-light": transparentize($info, 0.85),
41
41
  ),
42
42
  "success": (
43
43
  "": $success,
44
44
  "fore": $white,
45
- "light": lighten($success, 15%),
46
- "dark": darken($success, 15%),
45
+ "light": lighten($success, 10%),
46
+ "dark": darken($success, 10%),
47
47
  "trans-dark": transparentize($success, 0.85),
48
48
  "trans-light": transparentize($success, 0.85),
49
49
  ),
50
50
  "warning": (
51
51
  "": $warning,
52
52
  "fore": $white,
53
- "light": lighten($warning, 15%),
54
- "dark": darken($warning, 15%),
53
+ "light": lighten($warning, 10%),
54
+ "dark": darken($warning, 10%),
55
55
  "trans-dark": transparentize($warning, 0.85),
56
56
  "trans-light": transparentize($warning, 0.85),
57
57
  ),
58
58
  "danger": (
59
59
  "": $danger,
60
60
  "fore": $white,
61
- "light": lighten($danger, 15%),
62
- "dark": darken($danger, 15%),
61
+ "light": lighten($danger, 10%),
62
+ "dark": darken($danger, 10%),
63
63
  "trans-dark": transparentize($danger, 0.85),
64
64
  "trans-light": transparentize($danger, 0.85),
65
65
  ),
66
66
  "gray": (
67
67
  "": $gray,
68
68
  "fore": $black,
69
- "light": lighten($gray, 15%),
70
- "dark": darken($gray, 15%),
69
+ "light": lighten($gray, 10%),
70
+ "dark": darken($gray, 10%),
71
71
  "trans-dark": transparentize($gray, 0.85),
72
72
  "trans-light": transparentize($gray, 0.85),
73
73
  ),
74
74
  "light": (
75
- "": darken($white, 30%),
76
- "fore": $black,
77
- "light": darken($white, 10%),
78
- "dark": darken($white, 40%),
79
- "trans-dark": transparentize($white, 0.85),
80
- "trans-light": transparentize($white, 0.85),
75
+ "": darken($gray, 0%),
76
+ "fore": #6b6d70,
77
+ "light": lighten($gray, 10%),
78
+ "dark": darken($gray, 10%),
79
+ "trans-dark": transparentize($gray, 0.85),
80
+ "trans-light": transparentize($gray, 0.85),
81
81
  ),
82
82
  "dark": (
83
83
  "": $black,
84
84
  "fore": $white,
85
- "light": lighten($black, 15%),
86
- "dark": darken($black, 15%),
85
+ "light": lighten($black, 10%),
86
+ "dark": darken($black, 10%),
87
87
  "trans-dark": transparentize($black, 0.85),
88
88
  "trans-light": transparentize($black, 0.85),
89
89
  ),
@@ -100,7 +100,7 @@ $sizes: (
100
100
  ),
101
101
  "border": (
102
102
  width: 1px,
103
- radius: 4px,
103
+ radius: 8px,
104
104
  circle: 50px,
105
105
  ),
106
106
  );