@acorex/styles 7.4.7 → 7.5.0

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/index.scss +0 -4
  2. package/package.json +1 -1
  3. package/src/animations/index.scss +5 -5
  4. package/src/mixins/_appearance.scss +1 -0
  5. package/src/shared/_decoration.scss +2 -1
  6. package/src/shared/_drop-down.scss +3 -3
  7. package/src/shared/_table.scss +92 -86
  8. package/src/themes/default.scss +14 -1
  9. package/tailwind-base.js +15 -0
package/index.scss CHANGED
@@ -1,9 +1,5 @@
1
1
  @import '@angular/cdk/overlay-prebuilt.css';
2
2
 
3
- @tailwind base;
4
- @tailwind components;
5
- @tailwind utilities;
6
-
7
3
  @import './src/variables/colors';
8
4
  @import './src/icons/style.scss';
9
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.4.7",
3
+ "version": "7.5.0",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/src/animations/index.scss CHANGED
@@ -1,3 +1,8 @@
1
+ .ax-animate-fadeIn {
2
+ animation-name: ax-fadeIn;
3
+ animation-duration: 1s;
4
+ animation-duration: 1000ms;
5
+ }
1
6
  .ax-animate-bounceIn {
2
7
  animation: 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both ax-bounceIn;
3
8
  }
@@ -6,11 +11,6 @@
6
11
  animation-duration: 500ms;
7
12
  }
8
13
 
9
- .ax-animate-fadeIn {
10
- animation-name: ax-fadeIn;
11
- animation-duration: 1s;
12
- animation-duration: 1000ms;
13
- }
14
14
  .ax-animate-zoomIn {
15
15
  animation-name: ax-zoomIn;
16
16
  }
package/src/mixins/_appearance.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  border: 1px solid;
4
4
  border-color: rgba(var(--ax-color-border-default));
5
5
  border-radius: var(--ax-rounded-border-default);
6
+
6
7
  &:focus-within {
7
8
  border-color: rgba(var(--ax-color-primary-500));
8
9
  box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
package/src/shared/_decoration.scss CHANGED
@@ -55,6 +55,7 @@ ax-sub-title {
55
55
  }
56
56
  ax-form-hint {
57
57
  font-size: 0.875rem;
58
- color: rgba(var(--ax-color-text-default));
58
+ color: rgba(var(--ax-color-text-default), 0.75);
59
59
  margin-top: 0.5rem;
60
+ display: block;
60
61
  }
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-default), 0.5);
12
+ background-color: rgba(var(--ax-color-gray-200));
13
13
  color: rgba(var(--ax-color-#{$color}-600));
14
14
  }
15
15
 
@@ -26,13 +26,13 @@
26
26
 
27
27
  &.ax-default-default {
28
28
  background-color: transparent;
29
- color: rgba(var(--ax-color-default-fore));
29
+ color: rgba(var(--ax-color-text-default));
30
30
  border: transparent;
31
31
 
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
35
- background-color: rgba(var(--ax-color-default), 0.5);
35
+ background-color: rgba(var(--ax-color-default));
36
36
  color: rgba(var(--ax-color-default-fore));
37
37
  }
38
38
 
package/src/shared/_table.scss CHANGED
@@ -1,111 +1,117 @@
1
- @layer components {
1
+ @import '../mixins/index.scss';
2
+ @include darkMode() {
2
3
  .ax-table {
3
- width: 100%;
4
- border-radius: var(--ax-rounded-border-default);
5
- border-spacing: 0px;
6
- border-collapse: collapse;
7
- border: 1px solid;
4
+ thead {
5
+ background-color: rgba(var(--ax-color-gray-900));
6
+ }
7
+ }
8
+ }
9
+ .ax-table {
10
+ width: 100%;
11
+ border-radius: var(--ax-rounded-border-default);
12
+ border-spacing: 0px;
13
+ border-collapse: collapse;
14
+ border: 1px solid;
15
+ border-color: rgba(var(--ax-color-border-default));
16
+ overflow: hidden;
17
+ font-size: 0.875rem;
18
+ td {
19
+ border-bottom: 1px solid;
8
20
  border-color: rgba(var(--ax-color-border-default));
9
- overflow: hidden;
10
- font-size: 0.875rem;
11
- td {
12
- border-bottom: 1px solid;
13
- border-color: rgba(var(--ax-color-border-default));
21
+ padding: 0.875rem 1rem;
22
+ }
23
+ thead {
24
+ background-color: rgba(var(--ax-color-gray-200));
25
+ border-bottom: 1px solid;
26
+ border-color: rgba(var(--ax-color-border-default));
27
+ th {
28
+ text-transform: uppercase;
29
+ font-weight: 500;
30
+ text-align: start;
14
31
  padding: 0.875rem 1rem;
15
32
  }
33
+ }
34
+ &.ax-table-alternate {
35
+ tbody {
36
+ tr {
37
+ &:nth-child(even) {
38
+ background-color: rgba(var(--ax-color-gray-200));
39
+ }
40
+ }
41
+ }
42
+ }
43
+ &.ax-table-bordered {
16
44
  thead {
17
- background-color: rgba(var(--ax-color-default));
18
- border-bottom: 1px solid;
19
- border-color: rgba(var(--ax-color-border-default));
20
45
  th {
21
- text-transform: uppercase;
22
- font-weight: 500;
23
- text-align: start;
24
- padding: 0.875rem 1rem;
46
+ border-top: 0 !important;
25
47
  }
26
48
  }
27
- &.ax-table-alternate {
28
- tbody {
29
- tr {
30
- &:nth-child(even) {
31
- background-color: rgba(var(--ax-color-default));
49
+ tbody {
50
+ tr {
51
+ &:last-child {
52
+ td {
53
+ border-bottom: 0 !important;
32
54
  }
33
55
  }
34
- }
35
- }
36
- &.ax-table-bordered {
37
- thead {
38
- th {
39
- border-top: 0 !important;
40
- }
41
- }
42
- tbody {
43
- tr {
56
+ td {
44
57
  &:last-child {
45
- td {
46
- border-bottom: 0 !important;
47
- }
48
- }
49
- td {
50
- &:last-child {
51
- border-bottom: 0 !important;
52
- }
58
+ border-bottom: 0 !important;
53
59
  }
54
60
  }
55
61
  }
62
+ }
56
63
 
57
- td,
58
- th {
59
- border: 1px solid;
60
- border-color: rgba(var(--ax-color-border-default));
61
- &:first-child {
62
- border-inline-start-width: 0px;
63
- }
64
- &:last-child {
65
- border-inline-end-width: 0px;
66
- }
64
+ td,
65
+ th {
66
+ border: 1px solid;
67
+ border-color: rgba(var(--ax-color-border-default));
68
+ &:first-child {
69
+ border-inline-start-width: 0px;
70
+ }
71
+ &:last-child {
72
+ border-inline-end-width: 0px;
67
73
  }
68
74
  }
69
- @media screen and (max-width: 601px) {
70
- &.ax-table-responsive {
71
- overflow-wrap: break-word;
72
- display: block;
73
- border: 0px;
74
- thead {
75
- position: absolute;
76
- inset-inline-start: -100%;
77
- top: -100%;
78
- }
75
+ }
76
+ @media screen and (max-width: 601px) {
77
+ &.ax-table-responsive {
78
+ overflow-wrap: break-word;
79
+ display: block;
80
+ border: 0px;
81
+ thead {
82
+ position: absolute;
83
+ inset-inline-start: -100%;
84
+ top: -100%;
85
+ }
79
86
 
80
- td {
81
- display: block;
82
- float: inline-start;
83
- width: 100%;
84
- clear: both;
85
- background: rgba(var(--ax-color-surface));
86
- padding: 0.375rem 0.625rem;
87
- box-sizing: border-box;
88
- &:last-child {
89
- border: 0;
90
- }
91
- &:before {
92
- content: attr(data-label);
93
- display: block;
94
- font-weight: bold;
95
- }
96
- }
97
- tr {
98
- border: 1px solid;
99
- border-color: rgba(var(--ax-color-border-default));
87
+ td {
88
+ display: block;
89
+ float: inline-start;
90
+ width: 100%;
91
+ clear: both;
92
+ background: rgba(var(--ax-color-surface));
93
+ padding: 0.375rem 0.625rem;
94
+ box-sizing: border-box;
95
+ &:last-child {
96
+ border: 0;
100
97
  }
101
- tr,
102
- tbody {
98
+ &:before {
99
+ content: attr(data-label);
103
100
  display: block;
104
- width: 100%;
105
- float: inline-start;
106
- margin-bottom: 0.625rem;
101
+ font-weight: bold;
107
102
  }
108
103
  }
104
+ tr {
105
+ border: 1px solid;
106
+ border-color: rgba(var(--ax-color-border-default));
107
+ }
108
+ tr,
109
+ tbody {
110
+ display: block;
111
+ width: 100%;
112
+ float: inline-start;
113
+ margin-bottom: 0.625rem;
114
+ }
109
115
  }
110
116
  }
111
117
  }
package/src/themes/default.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  --ax-size-base: 2.5rem;
3
3
  --ax-size-default: var(--ax-size-base);
4
4
 
5
- --ax-rounded-border-default: 0.375rem;
5
+ --ax-rounded-border-default: 0.5rem;
6
6
  --ax-color-border-default: 224, 224, 224;
7
7
 
8
8
  --ax-color-background-default: 246, 247, 249;
@@ -101,6 +101,19 @@
101
101
  --ax-color-info-800: 55, 48, 163;
102
102
  --ax-color-info-900: 49, 46, 129;
103
103
  --ax-color-info-950: 30, 27, 75;
104
+
105
+ --ax-color-gray-fore: 3, 7, 18;
106
+ --ax-color-gray-50: 249, 250, 251;
107
+ --ax-color-gray-100: 243, 244, 246;
108
+ --ax-color-gray-200: 229, 231, 235;
109
+ --ax-color-gray-300: 209, 213, 219;
110
+ --ax-color-gray-400: 156, 163, 175;
111
+ --ax-color-gray-500: 107, 114, 128;
112
+ --ax-color-gray-600: 75, 85, 99;
113
+ --ax-color-gray-700: 55, 65, 81;
114
+ --ax-color-gray-800: 31, 41, 55;
115
+ --ax-color-gray-900: 17, 24, 39;
116
+ --ax-color-gray-950: 3, 7, 18;
104
117
  }
105
118
 
106
119
  .ax-dark {
package/tailwind-base.js CHANGED
@@ -117,6 +117,21 @@ module.exports = withAnimations({
117
117
  900: withOpacityValue('--ax-color-info-900'),
118
118
  950: withOpacityValue('--ax-color-info-950'),
119
119
  },
120
+ gray: {
121
+ DEFAULT: withOpacityValue('--ax-color-gray-500'),
122
+ fore: withOpacityValue('--ax-color-gray-fore'),
123
+ 50: withOpacityValue('--ax-color-gray-50'),
124
+ 100: withOpacityValue('--ax-color-gray-100'),
125
+ 200: withOpacityValue('--ax-color-gray-200'),
126
+ 300: withOpacityValue('--ax-color-gray-300'),
127
+ 400: withOpacityValue('--ax-color-gray-400'),
128
+ 500: withOpacityValue('--ax-color-gray-500'),
129
+ 600: withOpacityValue('--ax-color-gray-600'),
130
+ 700: withOpacityValue('--ax-color-gray-700'),
131
+ 800: withOpacityValue('--ax-color-gray-800'),
132
+ 900: withOpacityValue('--ax-color-gray-900'),
133
+ 950: withOpacityValue('--ax-color-gray-950'),
134
+ },
120
135
  },
121
136
  textColor: {
122
137
  DEFAULT: withOpacityValue('--ax-color-text-default'),