@acorex/styles 7.1.36 → 7.1.38

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/shared/_decoration.scss +1 -1
  3. package/src/shared/_drop-down.scss +5 -5
  4. package/src/shared/_editor-container.scss +2 -2
  5. package/src/shared/_general-button.scss +4 -4
  6. package/src/shared/_list.scss +4 -4
  7. package/src/shared/_radio.scss +1 -1
  8. package/src/shared/_skeleton.scss +2 -2
  9. package/src/shared/_table.scss +2 -2
  10. package/src/themes/default.scss +50 -48
  11. package/tailwind-base.js +45 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.1.36",
3
+ "version": "7.1.38",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/shared/_decoration.scss CHANGED
@@ -32,7 +32,7 @@ ax-close-button {
32
32
  cursor: pointer;
33
33
 
34
34
  ax-icon {
35
- color: rgba(var(--ax-color-surface-fore));
35
+ color: rgba(var(--ax-color-default-fore));
36
36
  font-size: 1.25rem;
37
37
 
38
38
  &:hover {
package/src/shared/_drop-down.scss CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  &:hover,
11
11
  &:focus {
12
- background-color: rgba(var(--ax-color-on-surface));
12
+ background-color: rgba(var(--ax-color-default));
13
13
  color: rgba(var(--ax-color-#{$color}-600));
14
14
  }
15
15
 
@@ -24,16 +24,16 @@
24
24
  }
25
25
  }
26
26
 
27
- &.ax-ghost-default {
27
+ &.ax-default-default {
28
28
  background-color: transparent;
29
- color: rgba(var(--ax-color-surface-fore));
29
+ color: rgba(var(--ax-color-default-fore));
30
30
  border: transparent;
31
31
 
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
35
- background-color: rgba(var(--ax-color-on-surface));
36
- color: rgba(var(--ax-color-on-surface-fore));
35
+ background-color: rgba(var(--ax-color-default));
36
+ color: rgba(var(--ax-color-default-fore));
37
37
  }
38
38
 
39
39
  &.ax-state-selected {
package/src/shared/_editor-container.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import '../mixins/index.scss';
2
2
  // @include darkMode() {
3
3
  // .ax-editor-container {
4
- // background-color: rgba(var(--ax-color-on-surface));
4
+ // background-color: rgba(var(--ax-color-default));
5
5
  // }
6
6
  // }
7
7
  .ax-editor-container {
@@ -50,7 +50,7 @@
50
50
  height: 100%;
51
51
  font-size: 1.25rem;
52
52
  line-height: 1.25rem;
53
- color: rgba(var(--ax-color-surface-fore));
53
+ color: rgba(var(--ax-color-default-fore));
54
54
  }
55
55
 
56
56
  &.ax-button-icon {
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-surface-fore), 0.6);
11
+ color: rgba(var(--ax-color-default-fore), 0.6);
12
12
 
13
13
  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
- background: rgba(var(--ax-color-on-surface));
15
- color: rgba(var(--ax-color-surface-fore), 0.87);
14
+ background: rgba(var(--ax-color-default));
15
+ color: rgba(var(--ax-color-default-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-on-surface));
19
+ background-color: rgba(var(--ax-color-default));
20
20
  outline-color: transparent;
21
21
  }
22
22
 
package/src/shared/_list.scss CHANGED
@@ -96,8 +96,8 @@
96
96
  }
97
97
  }
98
98
  &.ax-state-selected {
99
- background-color: rgba(var(--ax-color-on-surface)) !important;
100
- color: rgba(var(--ax-color-on-surface-fore)) !important;
99
+ background-color: rgba(var(--ax-color-default)) !important;
100
+ color: rgba(var(--ax-color-default-fore)) !important;
101
101
  .ax-selected-icon {
102
102
  color: rgba(var(--ax-color-primary-500));
103
103
  font-size: 1.5rem;
@@ -116,10 +116,10 @@
116
116
 
117
117
  &:focus-visible,
118
118
  &:hover {
119
- background-color: rgba(var(--ax-color-on-surface));
119
+ background-color: rgba(var(--ax-color-default));
120
120
  }
121
121
  &.ax-state-focus {
122
- background-color: rgba(var(--ax-color-on-surface));
122
+ background-color: rgba(var(--ax-color-default));
123
123
  }
124
124
  }
125
125
  }
package/src/shared/_radio.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import '../mixins/index.scss';
2
2
  // @include darkMode() {
3
3
  // .ax-radio {
4
- // background-color: rgba(var(--ax-color-on-surface));
4
+ // background-color: rgba(var(--ax-color-default));
5
5
  // }
6
6
  // }
7
7
  .ax-radio {
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-on-surface));
4
+ background-color: rgba(var(--ax-color-default));
5
5
  &.ax-skeleton-animate {
6
6
  &::before {
7
7
  content: '';
@@ -11,7 +11,7 @@
11
11
  height: 100%;
12
12
  width: 14rem;
13
13
  left: -200px;
14
- background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-on-surface-fore), 0.15) 50%, transparent 100%);
14
+ background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-default-fore), 0.15) 50%, transparent 100%);
15
15
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
16
16
  }
17
17
  }
package/src/shared/_table.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  padding: 0.875rem 1rem;
15
15
  }
16
16
  thead {
17
- background-color: rgba(var(--ax-color-on-surface));
17
+ background-color: rgba(var(--ax-color-default));
18
18
  border-bottom: 1px solid;
19
19
  border-color: rgba(var(--ax-color-border-default));
20
20
  th {
@@ -28,7 +28,7 @@
28
28
  tbody {
29
29
  tr {
30
30
  &:nth-child(even) {
31
- background-color: rgba(var(--ax-color-on-surface));
31
+ background-color: rgba(var(--ax-color-default));
32
32
  }
33
33
  }
34
34
  }
package/src/themes/default.scss CHANGED
@@ -5,29 +5,33 @@
5
5
  --ax-rounded-border-default: 0.375rem;
6
6
  --ax-color-border-default: 224, 224, 224;
7
7
 
8
- --ax-color-background-default: 250, 250, 250;
9
- --ax-color-text-default: 18, 18, 18;
8
+ --ax-color-background-default: 246, 247, 249;
9
+ --ax-color-text-default: 28, 33, 39;
10
10
 
11
11
  --ax-color-surface: 255, 255, 255;
12
- --ax-color-surface-fore: 18, 18, 18;
12
+ --ax-color-default-fore: 22, 22, 22;
13
13
 
14
- --ax-color-on-surface: 244, 244, 244;
15
- --ax-color-on-surface-fore: 20, 20, 20;
14
+ --ax-color-default: 237, 239, 242;
15
+ --ax-color-default-fore: 22, 22, 22;
16
16
 
17
17
  --ax-color-input-surface: 255, 255, 255;
18
- --ax-color-input-surface-fore: 18, 18, 18;
19
-
20
- --ax-color-ghost-fore: 15, 23, 42;
21
- --ax-color-ghost-50: 248, 250, 252;
22
- --ax-color-ghost-100: 241, 245, 249;
23
- --ax-color-ghost-200: 226, 232, 240;
24
- --ax-color-ghost-300: 203, 213, 225;
25
- --ax-color-ghost-400: 148, 163, 184;
26
- --ax-color-ghost-500: 100, 116, 139;
27
- --ax-color-ghost-600: 71, 85, 105;
28
- --ax-color-ghost-700: 51, 65, 85;
29
- --ax-color-ghost-800: 30, 41, 59;
30
- --ax-color-ghost-900: 15, 23, 42;
18
+ --ax-color-input-surface-fore: 22, 22, 22;
19
+
20
+ --ax-color-default: 237, 239, 242;
21
+ --ax-color-default-fore: 22, 22, 22;
22
+
23
+ --ax-color-ghost-fore: 44, 44, 44;
24
+ --ax-color-ghost-50: 253, 253, 253;
25
+ --ax-color-ghost-100: 250, 250, 251;
26
+ --ax-color-ghost-200: 246, 247, 249;
27
+ --ax-color-ghost-300: 242, 244, 246;
28
+ --ax-color-ghost-400: 240, 241, 244;
29
+ --ax-color-ghost-500: 237, 239, 242;
30
+ --ax-color-ghost-600: 235, 237, 240;
31
+ --ax-color-ghost-700: 232, 235, 238;
32
+ --ax-color-ghost-800: 229, 232, 236;
33
+ --ax-color-ghost-900: 224, 228, 232;
34
+ --ax-color-ghost-950: 215, 218, 221;
31
35
 
32
36
  --ax-color-primary-fore: 255, 255, 255;
33
37
  --ax-color-primary-50: 239, 246, 255;
@@ -40,6 +44,7 @@
40
44
  --ax-color-primary-700: 29, 78, 216;
41
45
  --ax-color-primary-800: 30, 64, 175;
42
46
  --ax-color-primary-900: 30, 58, 138;
47
+ --ax-color-primary-950: 23, 37, 84;
43
48
 
44
49
  --ax-color-secondary-fore: 255, 255, 255;
45
50
  --ax-color-secondary-50: 233, 234, 236;
@@ -52,6 +57,7 @@
52
57
  --ax-color-secondary-700: 57, 65, 79;
53
58
  --ax-color-secondary-800: 49, 56, 69;
54
59
  --ax-color-secondary-900: 33, 40, 51;
60
+ --ax-color-secondary-950: 22, 27, 35;
55
61
 
56
62
  --ax-color-success-fore: 255, 255, 255;
57
63
  --ax-color-success-50: 236, 253, 245;
@@ -64,6 +70,7 @@
64
70
  --ax-color-success-700: 4, 120, 87;
65
71
  --ax-color-success-800: 6, 95, 70;
66
72
  --ax-color-success-900: 6, 78, 59;
73
+ --ax-color-success-950: 2, 44, 34;
67
74
 
68
75
  --ax-color-danger-fore: 255, 255, 255;
69
76
  --ax-color-danger-50: 254, 242, 242;
@@ -76,8 +83,9 @@
76
83
  --ax-color-danger-700: 185, 28, 28;
77
84
  --ax-color-danger-800: 153, 27, 27;
78
85
  --ax-color-danger-900: 127, 29, 29;
86
+ --ax-color-danger-950: 69, 10, 10;
79
87
 
80
- --ax-color-warning-fore: 120, 53, 15;
88
+ --ax-color-warning-fore: 48, 26, 10;
81
89
  --ax-color-warning-50: 255, 248, 225;
82
90
  --ax-color-warning-100: 255, 236, 179;
83
91
  --ax-color-warning-200: 255, 224, 130;
@@ -88,43 +96,37 @@
88
96
  --ax-color-warning-700: 255, 160, 0;
89
97
  --ax-color-warning-800: 255, 143, 0;
90
98
  --ax-color-warning-900: 255, 111, 0;
99
+ --ax-color-warning-950: 72, 40, 15;
91
100
 
92
101
  --ax-color-info-fore: 255, 255, 255;
93
- --ax-color-info-50: 226, 244, 252;
94
- --ax-color-info-100: 183, 228, 248;
95
- --ax-color-info-200: 135, 210, 244;
96
- --ax-color-info-300: 86, 192, 240;
97
- --ax-color-info-400: 50, 179, 236;
98
- --ax-color-info-500: 14, 165, 233;
99
- --ax-color-info-600: 12, 157, 230;
100
- --ax-color-info-700: 10, 147, 227;
101
- --ax-color-info-800: 8, 138, 223;
102
- --ax-color-info-900: 4, 121, 217;
102
+ --ax-color-info-50: 238, 242, 255;
103
+ --ax-color-info-100: 224, 231, 255;
104
+ --ax-color-info-200: 199, 210, 254;
105
+ --ax-color-info-300: 165, 180, 252;
106
+ --ax-color-info-400: 129, 140, 248;
107
+ --ax-color-info-500: 99, 102, 241;
108
+ --ax-color-info-600: 79, 70, 229;
109
+ --ax-color-info-700: 67, 56, 202;
110
+ --ax-color-info-800: 55, 48, 163;
111
+ --ax-color-info-900: 49, 46, 129;
112
+ --ax-color-info-950: 30, 27, 75;
103
113
  }
104
114
 
105
115
  .ax-dark {
106
- --ax-color-background-default: 27, 27, 37;
107
- --ax-color-text-default: 224, 224, 224;
108
- --ax-color-border-default: 41, 49, 62;
116
+ --ax-color-border-default: 75, 85, 99;
109
117
 
110
- --ax-color-surface: 23, 32, 46;
111
- --ax-color-surface-fore: 224, 224, 224;
118
+ --ax-color-background-default: 23, 23, 23;
119
+ --ax-color-text-default: 255, 255, 255;
112
120
 
113
- --ax-color-on-surface: 24 36 54;
114
- --ax-color-on-surface-fore: 224, 224, 224;
121
+ --ax-color-surface: 31, 41, 55;
122
+ --ax-color-default-fore: 255, 255, 255;
115
123
 
116
- --ax-color-input-surface: 42, 53, 70;
124
+ --ax-color-default: 55, 65, 81;
125
+ --ax-color-default-fore: 255, 255, 255;
126
+
127
+ --ax-color-input-surface: 38, 45, 57;
117
128
  --ax-color-input-surface-fore: 224, 224, 224;
118
129
 
119
- --ax-color-ghost-fore: 255, 255, 255;
120
- --ax-color-ghost-50: 232, 233, 234;
121
- --ax-color-ghost-100: 199, 200, 203;
122
- --ax-color-ghost-200: 161, 163, 169;
123
- --ax-color-ghost-300: 123, 126, 134;
124
- --ax-color-ghost-400: 95, 99, 108;
125
- --ax-color-ghost-500: 67, 71, 82;
126
- --ax-color-ghost-600: 61, 64, 75;
127
- --ax-color-ghost-700: 52, 55, 65;
128
- --ax-color-ghost-800: 44, 47, 56;
129
- --ax-color-ghost-900: 30, 32, 40;
130
+ --ax-color-default: 77, 91, 113;
131
+ --ax-color-default-fore: 255, 255, 255;
130
132
  }
package/tailwind-base.js CHANGED
@@ -27,19 +27,6 @@ module.exports = withAnimations({
27
27
  theme: {
28
28
  extend: {
29
29
  colors: {
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
- },
43
30
  primary: {
44
31
  DEFAULT: withOpacityValue('--ax-color-primary-500'),
45
32
  50: withOpacityValue('--ax-color-primary-50'),
@@ -52,6 +39,7 @@ module.exports = withAnimations({
52
39
  700: withOpacityValue('--ax-color-primary-700'),
53
40
  800: withOpacityValue('--ax-color-primary-800'),
54
41
  900: withOpacityValue('--ax-color-primary-900'),
42
+ 900: withOpacityValue('--ax-color-primary-950'),
55
43
  },
56
44
  secondary: {
57
45
  DEFAULT: withOpacityValue('--ax-color-secondary-500'),
@@ -65,6 +53,7 @@ module.exports = withAnimations({
65
53
  700: withOpacityValue('--ax-color-secondary-700'),
66
54
  800: withOpacityValue('--ax-color-secondary-800'),
67
55
  900: withOpacityValue('--ax-color-secondary-900'),
56
+ 900: withOpacityValue('--ax-color-secondary-950'),
68
57
  },
69
58
  success: {
70
59
  DEFAULT: withOpacityValue('--ax-color-success-500'),
@@ -78,6 +67,7 @@ module.exports = withAnimations({
78
67
  700: withOpacityValue('--ax-color-success-700'),
79
68
  800: withOpacityValue('--ax-color-success-800'),
80
69
  900: withOpacityValue('--ax-color-success-900'),
70
+ 900: withOpacityValue('--ax-color-success-950'),
81
71
  },
82
72
  danger: {
83
73
  DEFAULT: withOpacityValue('--ax-color-danger-500'),
@@ -91,6 +81,7 @@ module.exports = withAnimations({
91
81
  700: withOpacityValue('--ax-color-danger-700'),
92
82
  800: withOpacityValue('--ax-color-danger-800'),
93
83
  900: withOpacityValue('--ax-color-danger-900'),
84
+ 900: withOpacityValue('--ax-color-danger-950'),
94
85
  },
95
86
  warning: {
96
87
  DEFAULT: withOpacityValue('--ax-color-warning-500'),
@@ -104,19 +95,19 @@ module.exports = withAnimations({
104
95
  700: withOpacityValue('--ax-color-warning-700'),
105
96
  800: withOpacityValue('--ax-color-warning-800'),
106
97
  900: withOpacityValue('--ax-color-warning-900'),
98
+ 900: withOpacityValue('--ax-color-warning-950'),
107
99
  },
108
100
  },
109
101
  textColor: {
110
102
  DEFAULT: withOpacityValue('--ax-color-text-default'),
111
103
  default: withOpacityValue('--ax-color-text-default'),
112
- 'surface-fore': withOpacityValue('--ax-color-surface-fore'),
113
- 'on-surface-fore': withOpacityValue('--ax-color-on-surface-fore'),
104
+ 'surface-fore': withOpacityValue('--ax-color-default-fore'),
105
+ 'on-surface-fore': withOpacityValue('--ax-color-default-fore'),
114
106
  'primary-fore': withOpacityValue('--ax-color-primary-fore'),
115
107
  'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
116
108
  'success-fore': withOpacityValue('--ax-color-success-fore'),
117
109
  'warning-fore': withOpacityValue('--ax-color-warning-fore'),
118
110
  'danger-fore': withOpacityValue('--ax-color-danger-fore'),
119
- 'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
120
111
  },
121
112
  fill: {
122
113
  'primary-fore': withOpacityValue('--ax-color-primary-fore'),
@@ -124,12 +115,11 @@ module.exports = withAnimations({
124
115
  'success-fore': withOpacityValue('--ax-color-success-fore'),
125
116
  'warning-fore': withOpacityValue('--ax-color-warning-fore'),
126
117
  'danger-fore': withOpacityValue('--ax-color-danger-fore'),
127
- 'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
128
118
  },
129
119
  backgroundColor: {
130
120
  default: withOpacityValue('--ax-color-background-default'),
131
121
  surface: withOpacityValue('--ax-color-surface'),
132
- 'on-surface': withOpacityValue('--ax-color-on-surface'),
122
+ 'on-surface': withOpacityValue('--ax-color-default'),
133
123
  },
134
124
  borderColor: {
135
125
  DEFAULT: 'rgba(var(--ax-color-border-default))',
@@ -155,6 +145,42 @@ module.exports = withAnimations({
155
145
  plugins: [
156
146
  plugin(function ({ addUtilities }) {
157
147
  const acorexClasses = {
148
+ '.h1': {
149
+ 'font-size': '3rem',
150
+ 'font-weight': '800',
151
+ 'line-hight': '3rem',
152
+ 'margin-bottom': '1.5rem',
153
+ },
154
+ '.h2': {
155
+ 'font-size': '2.5rem',
156
+ 'font-weight': '700',
157
+ 'line-hight': '2.5rem',
158
+ 'margin-bottom': '1.25rem',
159
+ },
160
+ '.h3': {
161
+ 'font-size': '1.875rem',
162
+ 'font-weight': '700',
163
+ 'line-hight': '1.875rem',
164
+ 'margin-bottom': '1rem',
165
+ },
166
+ '.h4': {
167
+ 'font-size': '1.5rem',
168
+ 'font-weight': '700',
169
+ 'line-hight': '1.5rem',
170
+ 'margin-bottom': '0.75rem',
171
+ },
172
+ '.h5': {
173
+ 'font-size': '1.25rem',
174
+ 'font-weight': '700',
175
+ 'line-hight': '1.25rem',
176
+ 'margin-bottom': '0.625rem',
177
+ },
178
+ '.h6': {
179
+ 'font-size': '1.125rem',
180
+ 'font-weight': '700',
181
+ 'line-hight': '1.125rem',
182
+ 'margin-bottom': '0.5rem',
183
+ },
158
184
  '.heading': {
159
185
  width: '100%',
160
186
  'border-bottom': '1px solid',
@@ -203,7 +229,7 @@ module.exports = withAnimations({
203
229
  '.skeleton': {
204
230
  position: 'relative',
205
231
  overflow: 'hidden',
206
- backgroundColor: 'rgba(var(--ax-color-ghost), 0.15)',
232
+ backgroundColor: 'rgba(var(--ax-color-default), 0.15)',
207
233
  },
208
234
  '.skeleton-animate': {},
209
235
  '.xs': {