@acorex/styles 7.1.36 → 7.1.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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/shared/_drop-down.scss +1 -1
  3. package/src/themes/blue.scss +130 -0
  4. package/src/themes/default.scss +57 -37
  5. package/src/themes/green.scss +130 -0
  6. package/src/themes/indigo.scss +130 -0
  7. package/src/themes/orange.scss +130 -0
  8. package/src/themes/red.scss +130 -0
  9. package/tailwind-base.js +42 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.1.36",
3
+ "version": "7.1.37",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/shared/_drop-down.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
  }
26
26
 
27
- &.ax-ghost-default {
27
+ &.ax-default-default {
28
28
  background-color: transparent;
29
29
  color: rgba(var(--ax-color-surface-fore));
30
30
  border: transparent;
package/src/themes/blue.scss ADDED
@@ -0,0 +1,130 @@
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: 224, 224, 224;
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: 244, 244, 244;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
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;
31
+
32
+ --ax-color-primary-fore: 255, 255, 255;
33
+ --ax-color-primary-50: 239, 246, 255;
34
+ --ax-color-primary-100: 219, 234, 254;
35
+ --ax-color-primary-200: 191, 219, 254;
36
+ --ax-color-primary-300: 147, 197, 253;
37
+ --ax-color-primary-400: 96, 165, 250;
38
+ --ax-color-primary-500: 59, 130, 246;
39
+ --ax-color-primary-600: 37, 99, 235;
40
+ --ax-color-primary-700: 29, 78, 216;
41
+ --ax-color-primary-800: 30, 64, 175;
42
+ --ax-color-primary-900: 30, 58, 138;
43
+
44
+ --ax-color-secondary-fore: 255, 255, 255;
45
+ --ax-color-secondary-50: 233, 234, 236;
46
+ --ax-color-secondary-100: 200, 203, 208;
47
+ --ax-color-secondary-200: 164, 169, 176;
48
+ --ax-color-secondary-300: 128, 134, 144;
49
+ --ax-color-secondary-400: 100, 108, 121;
50
+ --ax-color-secondary-500: 73, 82, 97;
51
+ --ax-color-secondary-600: 66, 75, 89;
52
+ --ax-color-secondary-700: 57, 65, 79;
53
+ --ax-color-secondary-800: 49, 56, 69;
54
+ --ax-color-secondary-900: 33, 40, 51;
55
+
56
+ --ax-color-success-fore: 255, 255, 255;
57
+ --ax-color-success-50: 236, 253, 245;
58
+ --ax-color-success-100: 209, 250, 229;
59
+ --ax-color-success-200: 167, 243, 208;
60
+ --ax-color-success-300: 110, 231, 183;
61
+ --ax-color-success-400: 52, 211, 153;
62
+ --ax-color-success-500: 16, 185, 129;
63
+ --ax-color-success-600: 5, 150, 105;
64
+ --ax-color-success-700: 4, 120, 87;
65
+ --ax-color-success-800: 6, 95, 70;
66
+ --ax-color-success-900: 6, 78, 59;
67
+
68
+ --ax-color-danger-fore: 255, 255, 255;
69
+ --ax-color-danger-50: 254, 242, 242;
70
+ --ax-color-danger-100: 254, 226, 226;
71
+ --ax-color-danger-200: 254, 202, 202;
72
+ --ax-color-danger-300: 252, 165, 165;
73
+ --ax-color-danger-400: 248, 113, 113;
74
+ --ax-color-danger-500: 239, 68, 68;
75
+ --ax-color-danger-600: 220, 38, 38;
76
+ --ax-color-danger-700: 185, 28, 28;
77
+ --ax-color-danger-800: 153, 27, 27;
78
+ --ax-color-danger-900: 127, 29, 29;
79
+
80
+ --ax-color-warning-fore: 120, 53, 15;
81
+ --ax-color-warning-50: 255, 248, 225;
82
+ --ax-color-warning-100: 255, 236, 179;
83
+ --ax-color-warning-200: 255, 224, 130;
84
+ --ax-color-warning-300: 255, 213, 79;
85
+ --ax-color-warning-400: 255, 202, 40;
86
+ --ax-color-warning-500: 255, 193, 7;
87
+ --ax-color-warning-600: 255, 179, 0;
88
+ --ax-color-warning-700: 255, 160, 0;
89
+ --ax-color-warning-800: 255, 143, 0;
90
+ --ax-color-warning-900: 255, 111, 0;
91
+
92
+ --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;
103
+ }
104
+
105
+ .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;
109
+
110
+ --ax-color-surface: 23, 32, 46;
111
+ --ax-color-surface-fore: 224, 224, 224;
112
+
113
+ --ax-color-on-surface: 24 36 54;
114
+ --ax-color-on-surface-fore: 224, 224, 224;
115
+
116
+ --ax-color-input-surface: 42, 53, 70;
117
+ --ax-color-input-surface-fore: 224, 224, 224;
118
+
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
+ }
package/src/themes/default.scss CHANGED
@@ -5,29 +5,42 @@
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-surface-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-on-surface: 237, 239, 242;
15
+ --ax-color-on-surface-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-ghost-fore: 44, 44, 44;
21
+ --ax-color-ghost-50: 253, 253, 253;
22
+ --ax-color-ghost-100: 250, 250, 251;
23
+ --ax-color-ghost-200: 246, 247, 249;
24
+ --ax-color-ghost-300: 242, 244, 246;
25
+ --ax-color-ghost-400: 240, 241, 244;
26
+ --ax-color-ghost-500: 237, 239, 242;
27
+ --ax-color-ghost-600: 235, 237, 240;
28
+ --ax-color-ghost-700: 232, 235, 238;
29
+ --ax-color-ghost-800: 229, 232, 236;
30
+ --ax-color-ghost-900: 224, 228, 232;
31
+ --ax-color-ghost-950: 215, 218, 221;
32
+
33
+ // --ax-color-ghost-fore: 15, 23, 42;
34
+ // --ax-color-ghost-50: 248, 250, 252;
35
+ // --ax-color-ghost-100: 241, 245, 249;
36
+ // --ax-color-ghost-200: 226, 232, 240;
37
+ // --ax-color-ghost-300: 203, 213, 225;
38
+ // --ax-color-ghost-400: 148, 163, 184;
39
+ // --ax-color-ghost-500: 100, 116, 139;
40
+ // --ax-color-ghost-600: 71, 85, 105;
41
+ // --ax-color-ghost-700: 51, 65, 85;
42
+ // --ax-color-ghost-800: 30, 41, 59;
43
+ // --ax-color-ghost-900: 15, 23, 42;
31
44
 
32
45
  --ax-color-primary-fore: 255, 255, 255;
33
46
  --ax-color-primary-50: 239, 246, 255;
@@ -40,6 +53,7 @@
40
53
  --ax-color-primary-700: 29, 78, 216;
41
54
  --ax-color-primary-800: 30, 64, 175;
42
55
  --ax-color-primary-900: 30, 58, 138;
56
+ --ax-color-primary-950: 23, 37, 84;
43
57
 
44
58
  --ax-color-secondary-fore: 255, 255, 255;
45
59
  --ax-color-secondary-50: 233, 234, 236;
@@ -52,6 +66,7 @@
52
66
  --ax-color-secondary-700: 57, 65, 79;
53
67
  --ax-color-secondary-800: 49, 56, 69;
54
68
  --ax-color-secondary-900: 33, 40, 51;
69
+ --ax-color-secondary-950: 22, 27, 35;
55
70
 
56
71
  --ax-color-success-fore: 255, 255, 255;
57
72
  --ax-color-success-50: 236, 253, 245;
@@ -64,6 +79,7 @@
64
79
  --ax-color-success-700: 4, 120, 87;
65
80
  --ax-color-success-800: 6, 95, 70;
66
81
  --ax-color-success-900: 6, 78, 59;
82
+ --ax-color-success-950: 2, 44, 34;
67
83
 
68
84
  --ax-color-danger-fore: 255, 255, 255;
69
85
  --ax-color-danger-50: 254, 242, 242;
@@ -76,8 +92,9 @@
76
92
  --ax-color-danger-700: 185, 28, 28;
77
93
  --ax-color-danger-800: 153, 27, 27;
78
94
  --ax-color-danger-900: 127, 29, 29;
95
+ --ax-color-danger-950: 69, 10, 10;
79
96
 
80
- --ax-color-warning-fore: 120, 53, 15;
97
+ --ax-color-warning-fore: 48, 26, 10;
81
98
  --ax-color-warning-50: 255, 248, 225;
82
99
  --ax-color-warning-100: 255, 236, 179;
83
100
  --ax-color-warning-200: 255, 224, 130;
@@ -88,32 +105,35 @@
88
105
  --ax-color-warning-700: 255, 160, 0;
89
106
  --ax-color-warning-800: 255, 143, 0;
90
107
  --ax-color-warning-900: 255, 111, 0;
108
+ --ax-color-warning-950: 72, 40, 15;
91
109
 
92
110
  --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;
111
+ --ax-color-info-50: 238, 242, 255;
112
+ --ax-color-info-100: 224, 231, 255;
113
+ --ax-color-info-200: 199, 210, 254;
114
+ --ax-color-info-300: 165, 180, 252;
115
+ --ax-color-info-400: 129, 140, 248;
116
+ --ax-color-info-500: 99, 102, 241;
117
+ --ax-color-info-600: 79, 70, 229;
118
+ --ax-color-info-700: 67, 56, 202;
119
+ --ax-color-info-800: 55, 48, 163;
120
+ --ax-color-info-900: 49, 46, 129;
121
+ --ax-color-info-950: 30, 27, 75;
103
122
  }
104
123
 
105
124
  .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;
125
+ --ax-color-border-default: 75, 85, 99;
109
126
 
110
- --ax-color-surface: 23, 32, 46;
111
- --ax-color-surface-fore: 224, 224, 224;
127
+ --ax-color-background-default: 23, 23, 23;
128
+ --ax-color-text-default: 255, 255, 255;
112
129
 
113
- --ax-color-on-surface: 24 36 54;
114
- --ax-color-on-surface-fore: 224, 224, 224;
130
+ --ax-color-surface: 31, 41, 55;
131
+ --ax-color-surface-fore: 255, 255, 255;
115
132
 
116
- --ax-color-input-surface: 42, 53, 70;
133
+ --ax-color-on-surface: 55, 65, 81;
134
+ --ax-color-on-surface-fore: 255, 255, 255;
135
+
136
+ --ax-color-input-surface: 38, 45, 57;
117
137
  --ax-color-input-surface-fore: 224, 224, 224;
118
138
 
119
139
  --ax-color-ghost-fore: 255, 255, 255;
package/src/themes/green.scss ADDED
@@ -0,0 +1,130 @@
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: 224, 224, 224;
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: 244, 244, 244;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
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;
31
+
32
+ --ax-color-primary-fore: 255, 255, 255;
33
+ --ax-color-primary-50: 236, 253, 245;
34
+ --ax-color-primary-100: 209, 250, 229;
35
+ --ax-color-primary-200: 167, 243, 208;
36
+ --ax-color-primary-300: 110, 231, 183;
37
+ --ax-color-primary-400: 52, 211, 153;
38
+ --ax-color-primary-500: 16, 185, 129;
39
+ --ax-color-primary-600: 5, 150, 105;
40
+ --ax-color-primary-700: 4, 120, 87;
41
+ --ax-color-primary-800: 6, 95, 70;
42
+ --ax-color-primary-900: 6, 78, 59;
43
+
44
+ --ax-color-secondary-fore: 255, 255, 255;
45
+ --ax-color-secondary-50: 233, 234, 236;
46
+ --ax-color-secondary-100: 200, 203, 208;
47
+ --ax-color-secondary-200: 164, 169, 176;
48
+ --ax-color-secondary-300: 128, 134, 144;
49
+ --ax-color-secondary-400: 100, 108, 121;
50
+ --ax-color-secondary-500: 73, 82, 97;
51
+ --ax-color-secondary-600: 66, 75, 89;
52
+ --ax-color-secondary-700: 57, 65, 79;
53
+ --ax-color-secondary-800: 49, 56, 69;
54
+ --ax-color-secondary-900: 33, 40, 51;
55
+
56
+ --ax-color-success-fore: 255, 255, 255;
57
+ --ax-color-success-50: 236, 253, 245;
58
+ --ax-color-success-100: 209, 250, 229;
59
+ --ax-color-success-200: 167, 243, 208;
60
+ --ax-color-success-300: 110, 231, 183;
61
+ --ax-color-success-400: 52, 211, 153;
62
+ --ax-color-success-500: 16, 185, 129;
63
+ --ax-color-success-600: 5, 150, 105;
64
+ --ax-color-success-700: 4, 120, 87;
65
+ --ax-color-success-800: 6, 95, 70;
66
+ --ax-color-success-900: 6, 78, 59;
67
+
68
+ --ax-color-danger-fore: 255, 255, 255;
69
+ --ax-color-danger-50: 254, 242, 242;
70
+ --ax-color-danger-100: 254, 226, 226;
71
+ --ax-color-danger-200: 254, 202, 202;
72
+ --ax-color-danger-300: 252, 165, 165;
73
+ --ax-color-danger-400: 248, 113, 113;
74
+ --ax-color-danger-500: 239, 68, 68;
75
+ --ax-color-danger-600: 220, 38, 38;
76
+ --ax-color-danger-700: 185, 28, 28;
77
+ --ax-color-danger-800: 153, 27, 27;
78
+ --ax-color-danger-900: 127, 29, 29;
79
+
80
+ --ax-color-warning-fore: 120, 53, 15;
81
+ --ax-color-warning-50: 255, 248, 225;
82
+ --ax-color-warning-100: 255, 236, 179;
83
+ --ax-color-warning-200: 255, 224, 130;
84
+ --ax-color-warning-300: 255, 213, 79;
85
+ --ax-color-warning-400: 255, 202, 40;
86
+ --ax-color-warning-500: 255, 193, 7;
87
+ --ax-color-warning-600: 255, 179, 0;
88
+ --ax-color-warning-700: 255, 160, 0;
89
+ --ax-color-warning-800: 255, 143, 0;
90
+ --ax-color-warning-900: 255, 111, 0;
91
+
92
+ --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;
103
+ }
104
+
105
+ .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;
109
+
110
+ --ax-color-surface: 23, 32, 46;
111
+ --ax-color-surface-fore: 224, 224, 224;
112
+
113
+ --ax-color-on-surface: 24 36 54;
114
+ --ax-color-on-surface-fore: 224, 224, 224;
115
+
116
+ --ax-color-input-surface: 42, 53, 70;
117
+ --ax-color-input-surface-fore: 224, 224, 224;
118
+
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
+ }
package/src/themes/indigo.scss ADDED
@@ -0,0 +1,130 @@
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: 224, 224, 224;
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: 244, 244, 244;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
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;
31
+
32
+ --ax-color-primary-fore: 255, 255, 255;
33
+ --ax-color-primary-50: 238, 242, 255;
34
+ --ax-color-primary-100: 224, 231, 255;
35
+ --ax-color-primary-200: 199, 210, 254;
36
+ --ax-color-primary-300: 165, 180, 252;
37
+ --ax-color-primary-400: 129, 140, 248;
38
+ --ax-color-primary-500: 99, 102, 241;
39
+ --ax-color-primary-600: 79, 70, 229;
40
+ --ax-color-primary-700: 67, 56, 202;
41
+ --ax-color-primary-800: 55, 48, 163;
42
+ --ax-color-primary-900: 49, 46, 129;
43
+
44
+ --ax-color-secondary-fore: 255, 255, 255;
45
+ --ax-color-secondary-50: 233, 234, 236;
46
+ --ax-color-secondary-100: 200, 203, 208;
47
+ --ax-color-secondary-200: 164, 169, 176;
48
+ --ax-color-secondary-300: 128, 134, 144;
49
+ --ax-color-secondary-400: 100, 108, 121;
50
+ --ax-color-secondary-500: 73, 82, 97;
51
+ --ax-color-secondary-600: 66, 75, 89;
52
+ --ax-color-secondary-700: 57, 65, 79;
53
+ --ax-color-secondary-800: 49, 56, 69;
54
+ --ax-color-secondary-900: 33, 40, 51;
55
+
56
+ --ax-color-success-fore: 255, 255, 255;
57
+ --ax-color-success-50: 236, 253, 245;
58
+ --ax-color-success-100: 209, 250, 229;
59
+ --ax-color-success-200: 167, 243, 208;
60
+ --ax-color-success-300: 110, 231, 183;
61
+ --ax-color-success-400: 52, 211, 153;
62
+ --ax-color-success-500: 16, 185, 129;
63
+ --ax-color-success-600: 5, 150, 105;
64
+ --ax-color-success-700: 4, 120, 87;
65
+ --ax-color-success-800: 6, 95, 70;
66
+ --ax-color-success-900: 6, 78, 59;
67
+
68
+ --ax-color-danger-fore: 255, 255, 255;
69
+ --ax-color-danger-50: 254, 242, 242;
70
+ --ax-color-danger-100: 254, 226, 226;
71
+ --ax-color-danger-200: 254, 202, 202;
72
+ --ax-color-danger-300: 252, 165, 165;
73
+ --ax-color-danger-400: 248, 113, 113;
74
+ --ax-color-danger-500: 239, 68, 68;
75
+ --ax-color-danger-600: 220, 38, 38;
76
+ --ax-color-danger-700: 185, 28, 28;
77
+ --ax-color-danger-800: 153, 27, 27;
78
+ --ax-color-danger-900: 127, 29, 29;
79
+
80
+ --ax-color-warning-fore: 120, 53, 15;
81
+ --ax-color-warning-50: 255, 248, 225;
82
+ --ax-color-warning-100: 255, 236, 179;
83
+ --ax-color-warning-200: 255, 224, 130;
84
+ --ax-color-warning-300: 255, 213, 79;
85
+ --ax-color-warning-400: 255, 202, 40;
86
+ --ax-color-warning-500: 255, 193, 7;
87
+ --ax-color-warning-600: 255, 179, 0;
88
+ --ax-color-warning-700: 255, 160, 0;
89
+ --ax-color-warning-800: 255, 143, 0;
90
+ --ax-color-warning-900: 255, 111, 0;
91
+
92
+ --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;
103
+ }
104
+
105
+ .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;
109
+
110
+ --ax-color-surface: 23, 32, 46;
111
+ --ax-color-surface-fore: 224, 224, 224;
112
+
113
+ --ax-color-on-surface: 24 36 54;
114
+ --ax-color-on-surface-fore: 224, 224, 224;
115
+
116
+ --ax-color-input-surface: 42, 53, 70;
117
+ --ax-color-input-surface-fore: 224, 224, 224;
118
+
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
+ }
package/src/themes/orange.scss ADDED
@@ -0,0 +1,130 @@
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: 224, 224, 224;
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: 244, 244, 244;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
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;
31
+
32
+ --ax-color-primary-fore: 120, 53, 15;
33
+ --ax-color-primary-50: 255, 248, 225;
34
+ --ax-color-primary-100: 255, 236, 179;
35
+ --ax-color-primary-200: 255, 224, 130;
36
+ --ax-color-primary-300: 255, 213, 79;
37
+ --ax-color-primary-400: 255, 202, 40;
38
+ --ax-color-primary-500: 255, 193, 7;
39
+ --ax-color-primary-600: 255, 179, 0;
40
+ --ax-color-primary-700: 255, 160, 0;
41
+ --ax-color-primary-800: 255, 143, 0;
42
+ --ax-color-primary-900: 255, 111, 0;
43
+
44
+ --ax-color-secondary-fore: 255, 255, 255;
45
+ --ax-color-secondary-50: 233, 234, 236;
46
+ --ax-color-secondary-100: 200, 203, 208;
47
+ --ax-color-secondary-200: 164, 169, 176;
48
+ --ax-color-secondary-300: 128, 134, 144;
49
+ --ax-color-secondary-400: 100, 108, 121;
50
+ --ax-color-secondary-500: 73, 82, 97;
51
+ --ax-color-secondary-600: 66, 75, 89;
52
+ --ax-color-secondary-700: 57, 65, 79;
53
+ --ax-color-secondary-800: 49, 56, 69;
54
+ --ax-color-secondary-900: 33, 40, 51;
55
+
56
+ --ax-color-success-fore: 255, 255, 255;
57
+ --ax-color-success-50: 236, 253, 245;
58
+ --ax-color-success-100: 209, 250, 229;
59
+ --ax-color-success-200: 167, 243, 208;
60
+ --ax-color-success-300: 110, 231, 183;
61
+ --ax-color-success-400: 52, 211, 153;
62
+ --ax-color-success-500: 16, 185, 129;
63
+ --ax-color-success-600: 5, 150, 105;
64
+ --ax-color-success-700: 4, 120, 87;
65
+ --ax-color-success-800: 6, 95, 70;
66
+ --ax-color-success-900: 6, 78, 59;
67
+
68
+ --ax-color-danger-fore: 255, 255, 255;
69
+ --ax-color-danger-50: 254, 242, 242;
70
+ --ax-color-danger-100: 254, 226, 226;
71
+ --ax-color-danger-200: 254, 202, 202;
72
+ --ax-color-danger-300: 252, 165, 165;
73
+ --ax-color-danger-400: 248, 113, 113;
74
+ --ax-color-danger-500: 239, 68, 68;
75
+ --ax-color-danger-600: 220, 38, 38;
76
+ --ax-color-danger-700: 185, 28, 28;
77
+ --ax-color-danger-800: 153, 27, 27;
78
+ --ax-color-danger-900: 127, 29, 29;
79
+
80
+ --ax-color-warning-fore: 120, 53, 15;
81
+ --ax-color-warning-50: 255, 248, 225;
82
+ --ax-color-warning-100: 255, 236, 179;
83
+ --ax-color-warning-200: 255, 224, 130;
84
+ --ax-color-warning-300: 255, 213, 79;
85
+ --ax-color-warning-400: 255, 202, 40;
86
+ --ax-color-warning-500: 255, 193, 7;
87
+ --ax-color-warning-600: 255, 179, 0;
88
+ --ax-color-warning-700: 255, 160, 0;
89
+ --ax-color-warning-800: 255, 143, 0;
90
+ --ax-color-warning-900: 255, 111, 0;
91
+
92
+ --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;
103
+ }
104
+
105
+ .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;
109
+
110
+ --ax-color-surface: 23, 32, 46;
111
+ --ax-color-surface-fore: 224, 224, 224;
112
+
113
+ --ax-color-on-surface: 24 36 54;
114
+ --ax-color-on-surface-fore: 224, 224, 224;
115
+
116
+ --ax-color-input-surface: 42, 53, 70;
117
+ --ax-color-input-surface-fore: 224, 224, 224;
118
+
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
+ }
package/src/themes/red.scss ADDED
@@ -0,0 +1,130 @@
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: 224, 224, 224;
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: 244, 244, 244;
15
+ --ax-color-on-surface-fore: 20, 20, 20;
16
+
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;
31
+
32
+ --ax-color-primary-fore: 255, 255, 255;
33
+ --ax-color-primary-50: 254, 242, 242;
34
+ --ax-color-primary-100: 254, 226, 226;
35
+ --ax-color-primary-200: 254, 202, 202;
36
+ --ax-color-primary-300: 252, 165, 165;
37
+ --ax-color-primary-400: 248, 113, 113;
38
+ --ax-color-primary-500: 239, 68, 68;
39
+ --ax-color-primary-600: 220, 38, 38;
40
+ --ax-color-primary-700: 185, 28, 28;
41
+ --ax-color-primary-800: 153, 27, 27;
42
+ --ax-color-primary-900: 127, 29, 29;
43
+
44
+ --ax-color-secondary-fore: 255, 255, 255;
45
+ --ax-color-secondary-50: 233, 234, 236;
46
+ --ax-color-secondary-100: 200, 203, 208;
47
+ --ax-color-secondary-200: 164, 169, 176;
48
+ --ax-color-secondary-300: 128, 134, 144;
49
+ --ax-color-secondary-400: 100, 108, 121;
50
+ --ax-color-secondary-500: 73, 82, 97;
51
+ --ax-color-secondary-600: 66, 75, 89;
52
+ --ax-color-secondary-700: 57, 65, 79;
53
+ --ax-color-secondary-800: 49, 56, 69;
54
+ --ax-color-secondary-900: 33, 40, 51;
55
+
56
+ --ax-color-success-fore: 255, 255, 255;
57
+ --ax-color-success-50: 236, 253, 245;
58
+ --ax-color-success-100: 209, 250, 229;
59
+ --ax-color-success-200: 167, 243, 208;
60
+ --ax-color-success-300: 110, 231, 183;
61
+ --ax-color-success-400: 52, 211, 153;
62
+ --ax-color-success-500: 16, 185, 129;
63
+ --ax-color-success-600: 5, 150, 105;
64
+ --ax-color-success-700: 4, 120, 87;
65
+ --ax-color-success-800: 6, 95, 70;
66
+ --ax-color-success-900: 6, 78, 59;
67
+
68
+ --ax-color-danger-fore: 255, 255, 255;
69
+ --ax-color-danger-50: 254, 242, 242;
70
+ --ax-color-danger-100: 254, 226, 226;
71
+ --ax-color-danger-200: 254, 202, 202;
72
+ --ax-color-danger-300: 252, 165, 165;
73
+ --ax-color-danger-400: 248, 113, 113;
74
+ --ax-color-danger-500: 239, 68, 68;
75
+ --ax-color-danger-600: 220, 38, 38;
76
+ --ax-color-danger-700: 185, 28, 28;
77
+ --ax-color-danger-800: 153, 27, 27;
78
+ --ax-color-danger-900: 127, 29, 29;
79
+
80
+ --ax-color-warning-fore: 120, 53, 15;
81
+ --ax-color-warning-50: 255, 248, 225;
82
+ --ax-color-warning-100: 255, 236, 179;
83
+ --ax-color-warning-200: 255, 224, 130;
84
+ --ax-color-warning-300: 255, 213, 79;
85
+ --ax-color-warning-400: 255, 202, 40;
86
+ --ax-color-warning-500: 255, 193, 7;
87
+ --ax-color-warning-600: 255, 179, 0;
88
+ --ax-color-warning-700: 255, 160, 0;
89
+ --ax-color-warning-800: 255, 143, 0;
90
+ --ax-color-warning-900: 255, 111, 0;
91
+
92
+ --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;
103
+ }
104
+
105
+ .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;
109
+
110
+ --ax-color-surface: 23, 32, 46;
111
+ --ax-color-surface-fore: 224, 224, 224;
112
+
113
+ --ax-color-on-surface: 24 36 54;
114
+ --ax-color-on-surface-fore: 224, 224, 224;
115
+
116
+ --ax-color-input-surface: 42, 53, 70;
117
+ --ax-color-input-surface-fore: 224, 224, 224;
118
+
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
+ }
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,6 +95,7 @@ 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: {
@@ -116,7 +108,6 @@ module.exports = withAnimations({
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,7 +115,6 @@ 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'),
@@ -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-on-surface), 0.15)',
207
233
  },
208
234
  '.skeleton-animate': {},
209
235
  '.xs': {