@acorex/styles 7.0.36 → 7.0.37

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/base/_normalize.scss +9 -7
  3. package/src/base/_theme.scss +0 -20
  4. package/src/base/index.scss +3 -15
  5. package/src/mixins/_util.scss +1 -1
  6. package/src/shared/_check-box.scss +5 -5
  7. package/src/shared/_decoration.scss +2 -2
  8. package/src/shared/_drop-down.scss +11 -11
  9. package/src/shared/_editor-container.scss +16 -16
  10. package/src/shared/_general-button.scss +4 -4
  11. package/src/shared/_list.scss +7 -7
  12. package/src/shared/_radio.scss +7 -7
  13. package/src/shared/_skeleton.scss +2 -7
  14. package/src/shared/_table.scss +8 -8
  15. package/src/shared/_utils.scss +3 -9
  16. package/src/themes/default.scss +113 -0
  17. package/src/utility/index.scss +6 -6
  18. package/src/variables/_colors.scss +0 -82
  19. package/tailwind.config.js +23 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.36",
3
+ "version": "7.0.37",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/base/_normalize.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  /* 2 */
17
17
  border-style: solid;
18
18
  /* 2 */
19
- border-color: #e5e7eb;
19
+ border-color: rgba(var(--ax-color-border-default));
20
20
  /* 2 */
21
21
  }
22
22
 
@@ -41,9 +41,10 @@ html {
41
41
  -moz-tab-size: 4;
42
42
  /* 3 */
43
43
  -o-tab-size: 4;
44
- tab-size: 4;
44
+ tab-size: 4;
45
45
  /* 3 */
46
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
46
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
47
+ sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
47
48
  /* 4 */
48
49
  font-feature-settings: normal;
49
50
  /* 5 */
@@ -82,7 +83,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
82
83
 
83
84
  abbr:where([title]) {
84
85
  -webkit-text-decoration: underline dotted;
85
- text-decoration: underline dotted;
86
+ text-decoration: underline dotted;
86
87
  }
87
88
 
88
89
  /*
@@ -126,7 +127,7 @@ code,
126
127
  kbd,
127
128
  samp,
128
129
  pre {
129
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
130
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
130
131
  /* 1 */
131
132
  font-size: 1em;
132
133
  /* 2 */
@@ -351,7 +352,8 @@ textarea {
351
352
  2. Set the default placeholder color to the user's configured gray 400 color.
352
353
  */
353
354
 
354
- input::-moz-placeholder, textarea::-moz-placeholder {
355
+ input::-moz-placeholder,
356
+ textarea::-moz-placeholder {
355
357
  opacity: 1;
356
358
  /* 1 */
357
359
  color: #9ca3af;
@@ -371,7 +373,7 @@ Set the default cursor for buttons.
371
373
  */
372
374
 
373
375
  button,
374
- [role="button"] {
376
+ [role='button'] {
375
377
  cursor: pointer;
376
378
  }
377
379
 
package/src/base/_theme.scss CHANGED
@@ -1,20 +0,0 @@
1
- @mixin light-variables() {
2
- --ax-color-background-default: 250, 250, 250;
3
- --ax-color-text-default: 18, 18, 18;
4
- --ax-color-border-default: 228, 228, 228;
5
- --ax-color-surface: 255, 255, 255;
6
- --ax-color-surface-fore: 18, 18, 18;
7
- --ax-color-on-surface: 242, 242, 242;
8
- --ax-color-on-surface-fore: 20, 20, 20;
9
- --ax-color-ghost: 30, 41, 59;
10
- --ax-color-ghost-fore: 0, 0, 0;
11
- }
12
- @mixin dark-variables() {
13
- --ax-color-background-default: 23, 32, 46;
14
- --ax-color-text-default: 224, 224, 224;
15
- --ax-color-border-default: 74, 76, 80;
16
- --ax-color-surface: 45, 50, 63;
17
- --ax-color-on-surface: 60, 68, 79;
18
- --ax-color-ghost: 255, 255, 255;
19
- --ax-color-ghost-fore: 255, 255, 255;
20
- }
package/src/base/index.scss CHANGED
@@ -3,26 +3,14 @@
3
3
  @import './theme';
4
4
 
5
5
  :root {
6
- --ax-size-default: 2.5rem;
7
- --ax-rounded-border-default: 0.375rem;
8
6
  --ax-overlay-full-width: 93;
9
- @include light-variables();
10
- @include color-variable-genterator($theme-colors);
11
- }
12
-
13
- @include darkMode() {
14
- &:root {
15
- @include dark-variables();
16
- }
17
-
18
- .cdk-overlay-neutral-backdrop {
19
- background: rgba(0, 0, 0, 0.5) !important;
20
- }
7
+ --ax-color-white: 255, 255, 255;
8
+ --ax-color-black: 0, 0, 0;
21
9
  }
22
10
 
23
11
  html,
24
12
  body {
25
- background-color: rgb(var(--ax-color-background-default));
13
+ background-color: rgba(var(--ax-color-background-default));
26
14
  color: rgba(var(--ax-color-text-default));
27
15
  height: 100%;
28
16
  }
package/src/mixins/_util.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
  }
16
16
  @mixin darkMode() {
17
- html.ax-dark {
17
+ .ax-dark {
18
18
  @content;
19
19
  }
20
20
  }
package/src/shared/_check-box.scss CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  @include darkMode() {
4
4
  .ax-checkbox {
5
- background-color: rgba(var(--ax-color-ghost), 0.05);
5
+ background-color: rgba(var(--ax-color-on-surface));
6
6
  }
7
7
  }
8
8
  .ax-checkbox {
9
- width: 1rem;
10
- height: 1rem;
9
+ width: 1.125rem;
10
+ height: 1.125rem;
11
11
  border: 1px solid;
12
- border-color: rgba(var(--ax-color-ghost), 0.3);
13
- background-color: rgb(var(--ax-color-surface));
12
+ border-color: rgba(var(--ax-color-border-default));
13
+ background-color: rgba(var(--ax-color-surface));
14
14
  border-radius: 0.2rem;
15
15
  margin: 0;
16
16
  outline: none;
package/src/shared/_decoration.scss CHANGED
@@ -32,11 +32,11 @@ ax-close-button {
32
32
  cursor: pointer;
33
33
 
34
34
  ax-icon {
35
- color: rgba(var(--ax-color-ghost), 0.5);
35
+ color: rgba(var(--ax-color-surface-fore));
36
36
  font-size: 1.25rem;
37
37
 
38
38
  &:hover {
39
- color: rgba(var(--ax-color-ghost), 0.75);
39
+ opacity: 0.5;
40
40
  }
41
41
  }
42
42
  }
package/src/shared/_drop-down.scss CHANGED
@@ -4,41 +4,41 @@
4
4
  @each $color in $color_names {
5
5
  &.ax-#{$color}-default {
6
6
  background-color: transparent;
7
- color: rgb(var(--ax-color-#{$color}-500));
7
+ color: rgba(var(--ax-color-#{$color}-500));
8
8
  border: transparent;
9
9
 
10
10
  &:hover,
11
11
  &:focus {
12
- background-color: rgba(var(--ax-color-ghost), 0.05);
13
- color: rgb(var(--ax-color-#{$color}-600));
12
+ background-color: rgba(var(--ax-color-on-surface));
13
+ color: rgba(var(--ax-color-#{$color}-600));
14
14
  }
15
15
 
16
16
  &:active {
17
- color: rgb(var(--ax-color-#{$color}-400));
17
+ color: rgba(var(--ax-color-#{$color}-400));
18
18
  }
19
19
 
20
20
  &.ax-state-selected {
21
- background-color: rgb(var(--ax-color-#{$color}-500));
22
- color: rgb(var(--ax-color-#{$color}-fore));
21
+ background-color: rgba(var(--ax-color-#{$color}-500));
22
+ color: rgba(var(--ax-color-#{$color}-fore));
23
23
  }
24
24
  }
25
25
  }
26
26
 
27
27
  &.ax-ghost-default {
28
28
  background-color: transparent;
29
- color: rgb(var(--ax-color-ghost));
29
+ color: rgba(var(--ax-color-surface-fore));
30
30
  border: transparent;
31
31
 
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
35
- background-color: rgba(var(--ax-color-ghost), 0.05);
36
- color: rgb(var(--ax-color-ghost), 0.87);
35
+ background-color: rgba(var(--ax-color-on-surface));
36
+ color: rgba(var(--ax-color-on-surface-fore));
37
37
  }
38
38
 
39
39
  &.ax-state-selected {
40
- background-color: rgb(var(--ax-color-primary-500));
41
- color: rgb(var(--ax-color-primary-fore));
40
+ background-color: rgba(var(--ax-color-primary-500));
41
+ color: rgba(var(--ax-color-primary-fore));
42
42
  }
43
43
  }
44
44
  }
package/src/shared/_editor-container.scss CHANGED
@@ -1,23 +1,23 @@
1
1
  @import '../mixins/index.scss';
2
2
  @include darkMode() {
3
3
  .ax-editor-container {
4
- background-color: rgba(var(--ax-color-ghost), 0.05);
4
+ background-color: rgba(var(--ax-color-on-surface));
5
5
  }
6
6
  }
7
7
  .ax-editor-container {
8
8
  width: 100%;
9
9
  height: var(--ax-size-default);
10
10
  display: flex;
11
- background-color: rgb(var(--ax-color-surface));
12
- color: rgb(var(--ax-color-text-default));
11
+ background-color: rgba(var(--ax-color-surface));
12
+ color: rgba(var(--ax-color-text-default));
13
13
  border: 1px solid;
14
- border-color: rgb(var(--ax-color-border-default));
14
+ border-color: rgba(var(--ax-color-border-default));
15
15
  border-radius: var(--ax-rounded-border-default);
16
16
  font-size: 1rem;
17
17
  overflow: hidden;
18
18
  &:focus-within {
19
- border-color: rgb(var(--ax-color-primary-500));
20
- box-shadow: 0px 0 0px 1px rgb(var(--ax-color-primary-500));
19
+ border-color: rgba(var(--ax-color-primary-500));
20
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-primary-500));
21
21
  }
22
22
 
23
23
  &.ax-sm {
@@ -50,7 +50,7 @@
50
50
  height: var(--ax-size-default);
51
51
  font-size: 1.25rem;
52
52
  line-height: 1.25rem;
53
- color: rgba(var(--ax-color-ghost), 0.63);
53
+ color: rgba(var(--ax-color-surface-fore));
54
54
  }
55
55
 
56
56
  &.ax-button-icon {
@@ -118,13 +118,13 @@
118
118
 
119
119
  & > ax-text {
120
120
  font-size: 0.875rem;
121
- background-color: rgba(var(--ax-color-ghost), 0.05);
121
+ background-color: rgba(var(--ax-color-surface-fore));
122
122
  display: flex;
123
123
  align-items: center;
124
124
  justify-content: center;
125
125
  padding: 0 0.5rem;
126
126
  border-inline-start: 1px solid;
127
- border-color: rgb(var(--ax-color-border-default));
127
+ border-color: rgba(var(--ax-color-border-default));
128
128
  color: rgba(var(--ax-color-ghost-fore));
129
129
  line-height: 1;
130
130
  }
@@ -145,26 +145,26 @@
145
145
  }
146
146
 
147
147
  &.ax-state-error {
148
- border-color: rgb(var(--ax-color-danger-500));
148
+ border-color: rgba(var(--ax-color-danger-500));
149
149
  &:focus-within {
150
- box-shadow: 0px 0 0px 1px rgb(var(--ax-color-danger-500));
150
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-danger-500));
151
151
  }
152
152
  .ax-input {
153
153
  &::placeholder {
154
- color: rgb(var(--ax-color-danger-500));
154
+ color: rgba(var(--ax-color-danger-500));
155
155
  }
156
156
  }
157
157
  }
158
158
 
159
159
  &.ax-state-success {
160
- outline-color: rgb(var(--ax-color-success-500));
161
- border-color: rgb(var(--ax-color-success-500));
160
+ outline-color: rgba(var(--ax-color-success-500));
161
+ border-color: rgba(var(--ax-color-success-500));
162
162
  &:focus-within {
163
- box-shadow: 0px 0 0px 1px rgb(var(--ax-color-success-500));
163
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-success-500));
164
164
  }
165
165
  .ax-input {
166
166
  &::placeholder {
167
- color: rgb(var(--ax-color-success-500));
167
+ color: rgba(var(--ax-color-success-500));
168
168
  }
169
169
  }
170
170
  }
package/src/shared/_general-button.scss CHANGED
@@ -8,15 +8,15 @@
8
8
  font-size: 0.875rem;
9
9
  cursor: pointer;
10
10
  transition: background-color 0.3s;
11
- color: rgba(var(--ax-color-ghost), 0.6);
11
+ color: rgba(var(--ax-color-surface-fore), 0.6);
12
12
 
13
13
  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
- background: rgba(var(--ax-color-ghost), 0.08);
15
- color: rgba(var(--ax-color-ghost), 0.87);
14
+ background: rgba(var(--ax-color-on-surface));
15
+ color: rgba(var(--ax-color-surface-fore), 0.87);
16
16
  }
17
17
 
18
18
  &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
19
- background-color: rgba(var(--ax-color-ghost), 0.12);
19
+ background-color: rgba(var(--ax-color-on-surface));
20
20
  outline-color: transparent;
21
21
  }
22
22
 
package/src/shared/_list.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  background-color: rgba(var(--ax-color-primary-800)) !important;
9
9
  color: rgba(var(--ax-color-primary-fore)) !important;
10
10
  .ax-selected-icon {
11
- color: rgb(var(--ax-color-primary-fore));
11
+ color: rgba(var(--ax-color-primary-fore));
12
12
  }
13
13
  }
14
14
  }
@@ -21,7 +21,7 @@
21
21
  flex-direction: column;
22
22
  overflow: hidden;
23
23
  font-size: 0.875rem;
24
- background-color: rgb(var(--ax-color-surface));
24
+ background-color: rgba(var(--ax-color-surface));
25
25
  height: 100%;
26
26
  @include media('desktop') {
27
27
  max-height: 320px;
@@ -32,8 +32,8 @@
32
32
  display: flex;
33
33
  justify-content: space-between;
34
34
  align-items: center;
35
- background-color: rgb(var(--ax-color-surface));
36
- border-color: rgb(var(--ax-color-border-default));
35
+ background-color: rgba(var(--ax-color-surface));
36
+ border-color: rgba(var(--ax-color-border-default));
37
37
  }
38
38
 
39
39
  .ax-footer {
@@ -105,7 +105,7 @@
105
105
  background-color: rgba(var(--ax-color-primary-50)) !important;
106
106
  color: rgba(var(--ax-color-primary-500)) !important;
107
107
  .ax-selected-icon {
108
- color: rgb(var(--ax-color-primary-500));
108
+ color: rgba(var(--ax-color-primary-500));
109
109
  font-size: 1.5rem;
110
110
  }
111
111
  }
@@ -122,10 +122,10 @@
122
122
 
123
123
  &:focus-visible,
124
124
  &:hover {
125
- background-color: rgba(var(--ax-color-ghost), 0.05);
125
+ background-color: rgba(var(--ax-color-on-surface));
126
126
  }
127
127
  &.ax-state-focus {
128
- background-color: rgba(var(--ax-color-ghost), 0.05);
128
+ background-color: rgba(var(--ax-color-on-surface));
129
129
  }
130
130
  }
131
131
  }
package/src/shared/_radio.scss CHANGED
@@ -1,25 +1,25 @@
1
1
  @import '../mixins/index.scss';
2
2
  @include darkMode() {
3
3
  .ax-radio {
4
- background-color: rgba(var(--ax-color-ghost), 0.05);
4
+ background-color: rgba(var(--ax-color-on-surface));
5
5
  }
6
6
  }
7
7
  .ax-radio {
8
- width: 1rem;
9
- height: 1rem;
8
+ width: 1.125rem;
9
+ height: 1.125rem;
10
10
  border: 1px solid;
11
- border-color: rgba(var(--ax-color-ghost), 0.3);
11
+ border-color: rgba(var(--ax-color-border-default));
12
12
  border-radius: 99rem;
13
- background-color: rgb(var(--ax-color-surface));
13
+ background-color: rgba(var(--ax-color-surface));
14
14
  outline: 2px solid transparent;
15
15
  outline-offset: 2px;
16
16
  vertical-align: middle;
17
17
  appearance: none;
18
18
 
19
19
  &:checked {
20
- border-color: rgb(var(--ax-color-primary-500));
20
+ border-color: rgba(var(--ax-color-primary-500));
21
21
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
22
- background-color: rgb(var(--ax-color-primary-500));
22
+ background-color: rgba(var(--ax-color-primary-500));
23
23
  background-repeat: no-repeat;
24
24
  background-size: contain;
25
25
  }
package/src/shared/_skeleton.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .ax-skeleton {
2
2
  position: relative;
3
3
  overflow: hidden;
4
- background-color: rgba(var(--ax-color-ghost), 0.15);
4
+ background-color: rgba(var(--ax-color-on-surface));
5
5
  &.ax-skeleton-animate {
6
6
  &::before {
7
7
  content: '';
@@ -11,12 +11,7 @@
11
11
  height: 100%;
12
12
  width: 14rem;
13
13
  left: -200px;
14
- background: linear-gradient(
15
- to right,
16
- transparent 0%,
17
- rgba(var(--ax-color-ghost), 0.03) 50%,
18
- transparent 100%
19
- );
14
+ background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-on-surface-fore), 0.15) 50%, transparent 100%);
20
15
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
21
16
  }
22
17
  }
package/src/shared/_table.scss CHANGED
@@ -5,18 +5,18 @@
5
5
  border-spacing: 0px;
6
6
  border-collapse: separate;
7
7
  border: 1px solid;
8
- border-color: rgb(var(--ax-color-border-default));
8
+ border-color: rgba(var(--ax-color-border-default));
9
9
  overflow: hidden;
10
10
  font-size: 0.875rem;
11
11
  td {
12
12
  border-bottom: 1px solid;
13
- border-color: rgb(var(--ax-color-border-default));
13
+ border-color: rgba(var(--ax-color-border-default));
14
14
  padding: 0.875rem 1rem;
15
15
  }
16
16
  thead {
17
- background-color: rgb(var(--ax-color-ghost), 0.05);
17
+ background-color: rgba(var(--ax-color-on-surface));
18
18
  border-bottom: 1px solid;
19
- border-color: rgb(var(--ax-color-border-default));
19
+ border-color: rgba(var(--ax-color-border-default));
20
20
  th {
21
21
  text-transform: uppercase;
22
22
  font-weight: 500;
@@ -28,7 +28,7 @@
28
28
  tbody {
29
29
  tr {
30
30
  &:nth-child(even) {
31
- background-color: rgb(var(--ax-color-ghost), 0.03);
31
+ background-color: rgba(var(--ax-color-on-surface));
32
32
  }
33
33
  }
34
34
  }
@@ -57,7 +57,7 @@
57
57
  td,
58
58
  th {
59
59
  border: 1px solid;
60
- border-color: rgb(var(--ax-color-border-default));
60
+ border-color: rgba(var(--ax-color-border-default));
61
61
  &:first-child {
62
62
  border-inline-start-width: 0px;
63
63
  }
@@ -82,7 +82,7 @@
82
82
  float: inline-start;
83
83
  width: 100%;
84
84
  clear: both;
85
- background: rgb(var(--ax-color-surface));
85
+ background: rgba(var(--ax-color-surface));
86
86
  padding: 0.375rem 0.625rem;
87
87
  box-sizing: border-box;
88
88
  &:last-child {
@@ -96,7 +96,7 @@
96
96
  }
97
97
  tr {
98
98
  border: 1px solid;
99
- border-color: rgb(var(--ax-color-border-default));
99
+ border-color: rgba(var(--ax-color-border-default));
100
100
  }
101
101
  tr,
102
102
  tbody {
package/src/shared/_utils.scss CHANGED
@@ -1,11 +1,5 @@
1
1
  @import '../variables/index.scss';
2
2
 
3
- *,
4
- ::before,
5
- ::after {
6
- border-color: rgba(var(--ax-color-border-default));
7
- }
8
-
9
3
  [class*=' ax-icon-'],
10
4
  [class^='ax-icon-'] {
11
5
  vertical-align: middle;
@@ -41,7 +35,7 @@
41
35
 
42
36
  .ax-fieldset {
43
37
  border: 1px solid;
44
- border-color: rgb(var(--ax-color-border-default));
38
+ border-color: rgba(var(--ax-color-border-default));
45
39
  padding: 0.75rem;
46
40
  border-radius: var(--ax-rounded-border-default);
47
41
  legend {
@@ -51,8 +45,8 @@
51
45
  }
52
46
 
53
47
  .ax-card {
54
- background-color: rgb(var(--ax-color-surface));
48
+ background-color: rgba(var(--ax-color-surface));
55
49
  border: 1px solid;
56
- border-color: rgb(var(--ax-color-border-default));
50
+ border-color: rgba(var(--ax-color-border-default));
57
51
  border-radius: var(--ax-rounded-border-default);
58
52
  }
package/src/themes/default.scss ADDED
@@ -0,0 +1,113 @@
1
+ :root {
2
+ --ax-size-base: 2.5rem;
3
+ --ax-size-default: var(--ax-size-base);
4
+
5
+ --ax-rounded-border-default: 0.375rem;
6
+ --ax-color-border-default: 204, 204, 204;
7
+
8
+ --ax-color-background-default: 250, 250, 250;
9
+ --ax-color-text-default: 18, 18, 18;
10
+
11
+ --ax-color-surface: 255, 255, 255;
12
+ --ax-color-surface-fore: 18, 18, 18;
13
+
14
+ --ax-color-on-surface: 242, 242, 242;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
17
+ --ax-color-ghost-fore: 30, 41, 59;
18
+ --ax-color-ghost-50: 247, 248, 250;
19
+ --ax-color-ghost-100: 235, 238, 242;
20
+ --ax-color-ghost-200: 221, 226, 233;
21
+ --ax-color-ghost-300: 207, 214, 224;
22
+ --ax-color-ghost-400: 197, 206, 217;
23
+ --ax-color-ghost-500: 187, 197, 210;
24
+ --ax-color-ghost-600: 181, 191, 205;
25
+ --ax-color-ghost-700: 172, 184, 199;
26
+ --ax-color-ghost-800: 164, 176, 193;
27
+ --ax-color-ghost-900: 150, 163, 182;
28
+
29
+ --ax-color-primary-fore: 255, 255, 255;
30
+ --ax-color-primary-50: 239, 246, 255;
31
+ --ax-color-primary-100: 219, 234, 254;
32
+ --ax-color-primary-200: 191, 219, 254;
33
+ --ax-color-primary-300: 147, 197, 253;
34
+ --ax-color-primary-400: 96, 165, 250;
35
+ --ax-color-primary-500: 59, 130, 246;
36
+ --ax-color-primary-600: 37, 99, 235;
37
+ --ax-color-primary-700: 29, 78, 216;
38
+ --ax-color-primary-800: 30, 64, 175;
39
+ --ax-color-primary-900: 30, 58, 138;
40
+
41
+ --ax-color-secondary-fore: 255, 255, 255;
42
+ --ax-color-secondary-50: 233, 234, 236;
43
+ --ax-color-secondary-100: 200, 203, 208;
44
+ --ax-color-secondary-200: 164, 169, 176;
45
+ --ax-color-secondary-300: 128, 134, 144;
46
+ --ax-color-secondary-400: 100, 108, 121;
47
+ --ax-color-secondary-500: 73, 82, 97;
48
+ --ax-color-secondary-600: 66, 75, 89;
49
+ --ax-color-secondary-700: 57, 65, 79;
50
+ --ax-color-secondary-800: 49, 56, 69;
51
+ --ax-color-secondary-900: 33, 40, 51;
52
+
53
+ --ax-color-success-fore: 255, 255, 255;
54
+ --ax-color-success-50: 236, 253, 245;
55
+ --ax-color-success-100: 209, 250, 229;
56
+ --ax-color-success-200: 167, 243, 208;
57
+ --ax-color-success-300: 110, 231, 183;
58
+ --ax-color-success-400: 52, 211, 153;
59
+ --ax-color-success-500: 16, 185, 129;
60
+ --ax-color-success-600: 5, 150, 105;
61
+ --ax-color-success-700: 4, 120, 87;
62
+ --ax-color-success-800: 6, 95, 70;
63
+ --ax-color-success-900: 6, 78, 59;
64
+
65
+ --ax-color-danger-fore: 255, 255, 255;
66
+ --ax-color-danger-50: 254, 242, 242;
67
+ --ax-color-danger-100: 254, 226, 226;
68
+ --ax-color-danger-200: 254, 202, 202;
69
+ --ax-color-danger-300: 252, 165, 165;
70
+ --ax-color-danger-400: 248, 113, 113;
71
+ --ax-color-danger-500: 239, 68, 68;
72
+ --ax-color-danger-600: 220, 38, 38;
73
+ --ax-color-danger-700: 185, 28, 28;
74
+ --ax-color-danger-800: 153, 27, 27;
75
+ --ax-color-danger-900: 127, 29, 29;
76
+
77
+ --ax-color-warning-fore: 120, 53, 15;
78
+ --ax-color-warning-50: 255, 248, 225;
79
+ --ax-color-warning-100: 255, 236, 179;
80
+ --ax-color-warning-200: 255, 224, 130;
81
+ --ax-color-warning-300: 255, 213, 79;
82
+ --ax-color-warning-400: 255, 202, 40;
83
+ --ax-color-warning-500: 255, 193, 7;
84
+ --ax-color-warning-600: 255, 179, 0;
85
+ --ax-color-warning-700: 255, 160, 0;
86
+ --ax-color-warning-800: 255, 143, 0;
87
+ --ax-color-warning-900: 255, 111, 0;
88
+ }
89
+
90
+ .ax-dark {
91
+ --ax-color-background-default: 23, 32, 46;
92
+
93
+ --ax-color-text-default: 224, 224, 224;
94
+ --ax-color-border-default: 74, 76, 80;
95
+
96
+ --ax-color-surface: 45, 50, 63;
97
+ --ax-color-surface-fore: 224, 224, 224;
98
+
99
+ --ax-color-on-surface: 60, 68, 79;
100
+ --ax-color-on-surface-fore: 224, 224, 224;
101
+
102
+ --ax-color-ghost-fore: 255, 255, 255;
103
+ --ax-color-ghost-50: 232, 233, 234;
104
+ --ax-color-ghost-100: 199, 200, 203;
105
+ --ax-color-ghost-200: 161, 163, 169;
106
+ --ax-color-ghost-300: 123, 126, 134;
107
+ --ax-color-ghost-400: 95, 99, 108;
108
+ --ax-color-ghost-500: 67, 71, 82;
109
+ --ax-color-ghost-600: 61, 64, 75;
110
+ --ax-color-ghost-700: 52, 55, 65;
111
+ --ax-color-ghost-800: 44, 47, 56;
112
+ --ax-color-ghost-900: 30, 32, 40;
113
+ }
package/src/utility/index.scss CHANGED
@@ -31,25 +31,25 @@
31
31
  // }
32
32
  // }
33
33
  .ax-xs {
34
- --ax-size-default: 2rem;
34
+ --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
35
35
  }
36
36
 
37
37
  .ax-sm {
38
- --ax-size-default: 2.25rem;
38
+ --ax-size-default: calc(var(--ax-size-base) - 0.25rem);
39
39
  }
40
40
 
41
41
  .ax-md {
42
- --ax-size-default: 2.5rem;
42
+ --ax-size-default: 2.5rem;
43
43
  }
44
44
 
45
45
  .ax-lg {
46
- --ax-size-default: 3rem;
46
+ --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
47
47
  }
48
48
 
49
49
  .ax-xl {
50
- --ax-size-default: 3.5rem;
50
+ --ax-size-default: calc(var(--ax-size-base) - 1rem);
51
51
  }
52
52
 
53
53
  .ax-filp {
54
- transform: scale(-1, 1);
54
+ transform: scale(-1, 1);
55
55
  }
package/src/variables/_colors.scss CHANGED
@@ -1,84 +1,2 @@
1
1
  $color_names: 'primary', 'secondary', 'success', 'warning', 'danger';
2
2
  $look_names: 'default', 'outline', 'blank';
3
- $theme-colors: (
4
- 'white': '255, 255, 255',
5
- 'black': '0, 0, 0',
6
- 'primary': (
7
- 'fore': '255, 255, 255',
8
- '50': '239, 246, 255',
9
- '100': '219, 234, 254',
10
- '200': '191, 219, 254',
11
- '300': '147, 197, 253',
12
- '400': '96, 165, 250',
13
- '500': '59, 130, 246',
14
- '600': '37, 99, 235',
15
- '700': '29, 78, 216',
16
- '800': '30, 64, 175',
17
- '900': '30, 58, 138',
18
- ),
19
- 'secondary': (
20
- 'fore': '255, 255, 255',
21
- '50': '233, 234, 236',
22
- '100': '200, 203, 208',
23
- '200': '164, 169, 176',
24
- '300': '128, 134, 144',
25
- '400': '100, 108, 121',
26
- '500': '73, 82, 97',
27
- '600': '66, 75, 89',
28
- '700': '57, 65, 79',
29
- '800': '49, 56, 69',
30
- '900': '33, 40, 51',
31
- ),
32
- 'success': (
33
- 'fore': '255, 255, 255',
34
- '50': '236, 253, 245',
35
- '100': '209, 250, 229',
36
- '200': '167, 243, 208',
37
- '300': '110, 231, 183',
38
- '400': '52, 211, 153',
39
- '500': '16, 185, 129',
40
- '600': '5, 150, 105',
41
- '700': '4, 120, 87',
42
- '800': '6, 95, 70',
43
- '900': '6, 78, 59',
44
- ),
45
- 'danger': (
46
- 'fore': '255, 255, 255',
47
- '50': '254, 242, 242',
48
- '100': '254, 226, 226',
49
- '200': '254, 202, 202',
50
- '300': '252, 165, 165',
51
- '400': '248, 113, 113',
52
- '500': '239, 68, 68',
53
- '600': '220, 38, 38',
54
- '700': '185, 28, 28',
55
- '800': '153, 27, 27',
56
- '900': '127, 29, 29',
57
- ),
58
- 'warning': (
59
- 'fore': '120, 53, 15',
60
- '50': '255, 248, 225',
61
- '100': '255, 236, 179',
62
- '200': '255, 224, 130',
63
- '300': '255, 213, 79',
64
- '400': '255, 202, 40',
65
- '500': '255, 193, 7',
66
- '600': '255, 179, 0',
67
- '700': '255, 160, 0',
68
- '800': '255, 143, 0',
69
- '900': '255, 111, 0',
70
- ),
71
- 'neutral': (
72
- 'fore': '24, 24, 27',
73
- '50': '250, 250, 250',
74
- '100': '244, 244, 245',
75
- '200': '228, 228, 231',
76
- '300': '212, 212, 216',
77
- '400': '161, 161, 170',
78
- '500': '113, 113, 122',
79
- '600': '82, 82, 91',
80
- '700': '63, 63, 70',
81
- '800': '39, 39, 42',
82
- '900': '24, 24, 27',
83
- ),
84
- );
package/tailwind.config.js CHANGED
@@ -10,6 +10,13 @@ function withOpacityValue(variable) {
10
10
  };
11
11
  }
12
12
 
13
+ const childSelector = plugin(function ({ addVariant }) {
14
+ addVariant('child', '& > *');
15
+ addVariant('child-hover', '& > *:hover');
16
+ addVariant('child-focus', '& > *:focus');
17
+ addVariant('child-focus-within', '& > *:focus-within');
18
+ });
19
+
13
20
  module.exports = withAnimations({
14
21
  prefix: 'ax-',
15
22
  corePlugins: {
@@ -20,8 +27,19 @@ module.exports = withAnimations({
20
27
  theme: {
21
28
  extend: {
22
29
  colors: {
23
- black: withOpacityValue('--ax-color-black'),
24
- white: withOpacityValue('--ax-color-white'),
30
+ ghost: {
31
+ DEFAULT: withOpacityValue('--ax-color-ghost-500'),
32
+ 50: withOpacityValue('--ax-color-ghost-50'),
33
+ 100: withOpacityValue('--ax-color-ghost-100'),
34
+ 200: withOpacityValue('--ax-color-ghost-200'),
35
+ 300: withOpacityValue('--ax-color-ghost-300'),
36
+ 400: withOpacityValue('--ax-color-ghost-400'),
37
+ 500: withOpacityValue('--ax-color-ghost-500'),
38
+ 600: withOpacityValue('--ax-color-ghost-600'),
39
+ 700: withOpacityValue('--ax-color-ghost-700'),
40
+ 800: withOpacityValue('--ax-color-ghost-800'),
41
+ 900: withOpacityValue('--ax-color-ghost-900'),
42
+ },
25
43
  primary: {
26
44
  DEFAULT: withOpacityValue('--ax-color-primary-500'),
27
45
  50: withOpacityValue('--ax-color-primary-50'),
@@ -89,6 +107,7 @@ module.exports = withAnimations({
89
107
  },
90
108
  },
91
109
  textColor: {
110
+ DEFAULT: withOpacityValue('--ax-color-text-default'),
92
111
  default: withOpacityValue('--ax-color-text-default'),
93
112
  'surface-fore': withOpacityValue('--ax-color-surface-fore'),
94
113
  'on-surface-fore': withOpacityValue('--ax-color-on-surface-fore'),
@@ -104,6 +123,7 @@ module.exports = withAnimations({
104
123
  'on-surface': withOpacityValue('--ax-color-on-surface'),
105
124
  },
106
125
  borderColor: {
126
+ DEFAULT: 'rgba(var(--ax-color-border-default))',
107
127
  default: 'rgba(var(--ax-color-border-default))',
108
128
  },
109
129
  maxWidth: {
@@ -157,12 +177,7 @@ module.exports = withAnimations({
157
177
  };
158
178
  addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
159
179
  }),
160
- plugin(function ({ addVariant }) {
161
- addVariant('child', '& > *');
162
- addVariant('child-hover', '& > *:hover');
163
- addVariant('child-focus', '& > *:focus');
164
- addVariant('child-focus-within', '& > *:focus-within');
165
- }),
180
+ childSelector,
166
181
  require('tailwind-auto-directions'),
167
182
  ],
168
183
  });