@acorex/styles 7.0.13 → 7.0.14

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 +4 -4
  2. package/src/shared/_check-box.scss +1 -1
  3. package/src/shared/_decoration.scss +2 -13
  4. package/src/shared/_editor-container.scss +135 -110
  5. package/src/shared/_list.scss +1 -1
  6. package/src/shared/_radio.scss +1 -1
  7. package/src/utility/index.scss +45 -10
  8. package/src/variables/_colors.scss +12 -12
  9. package/tailwind.config.js +98 -84
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.13",
3
+ "version": "7.0.14",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
@@ -9,10 +9,10 @@
9
9
  "test": "echo \"Error: no test specified\" && exit 1"
10
10
  },
11
11
  "peerDependencies": {
12
- "animated-tailwindcss": "^3.3.0",
12
+ "animated-tailwindcss": "^4.0.0",
13
13
  "autoprefixer": "^10.4.13",
14
- "postcss": "^8.4.20",
14
+ "postcss": "^8.4.21",
15
15
  "tailwind-auto-directions": "^1.0.2",
16
- "tailwindcss": "^3.2.4"
16
+ "tailwindcss": "^3.2.6"
17
17
  }
18
18
  }
package/src/shared/_check-box.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
35
35
  }
36
36
 
37
- &:focus {
37
+ &:focus-visible {
38
38
  outline-offset: 2px;
39
39
  outline-width: 2px;
40
40
  outline-style: solid;
package/src/shared/_decoration.scss CHANGED
@@ -4,7 +4,6 @@ ax-footer {
4
4
  display: flex;
5
5
  justify-content: space-between;
6
6
  gap: 0.5rem;
7
- background-color: rgb(var(--ax-color-surface));
8
7
  & > ax-prefix,
9
8
  & > ax-suffix {
10
9
  display: flex;
@@ -25,18 +24,8 @@ ax-footer {
25
24
  }
26
25
  }
27
26
 
28
-
29
- ax-title,
30
- ax-icon {
31
- font-weight: 500;
32
- }
33
-
34
- ax-title {
35
- font-size: 1rem;
36
- }
37
- ax-sub-title {
38
- font-size: 0.875rem;
39
- color: rgba(var(--ax-color-ghost), 0.6);
27
+ ax-icon{
28
+ display: contents;
40
29
  }
41
30
  ax-close-button {
42
31
  width: 1.5rem;
package/src/shared/_editor-container.scss CHANGED
@@ -1,135 +1,160 @@
1
- @import "../mixins/index.scss";
1
+ @import '../mixins/index.scss';
2
2
  @include darkMode() {
3
- .ax-editor-container {
4
- background-color: rgba(var(--ax-color-ghost), 0.05);
5
- }
3
+ .ax-editor-container {
4
+ background-color: rgba(var(--ax-color-ghost), 0.05);
5
+ }
6
6
  }
7
7
  .ax-editor-container {
8
- width: 100%;
9
- height: var(--ax-size-default);
10
- display: flex;
11
- background-color: rgb(var(--ax-color-surface));
12
- color: rgb(var(--ax-color-text-default));
13
- border: 1px solid;
14
- border-color: rgb(var(--ax-color-border-default));
15
- border-radius: var(--ax-rounded-border-default);
16
- font-size: 0.875rem;
17
- overflow: hidden;
18
- .ax-editor-control {
19
- display: flex;
20
- align-items: center;
21
- justify-content: center;
22
- width: var(--ax-size-default);
23
- height: var(--ax-size-default);
24
- font-size: 1.5rem;
25
- line-height: 1.5rem;
26
- color: rgba(var(--ax-color-ghost), 0.63);
27
- }
28
- &:focus-within {
29
- outline-offset: 0px;
30
- outline-width: 1px;
31
- outline-style: solid;
32
- outline-color: rgb(var(--ax-color-primary-500));
33
- }
8
+ width: 100%;
9
+ height: var(--ax-size-default);
10
+ display: flex;
11
+ background-color: rgb(var(--ax-color-surface));
12
+ color: rgb(var(--ax-color-text-default));
13
+ border: 1px solid;
14
+ border-color: rgb(var(--ax-color-border-default));
15
+ border-radius: var(--ax-rounded-border-default);
16
+ font-size: 1rem;
17
+ overflow: hidden;
34
18
 
35
- &.ax-button-icon {
36
- padding-left: 0.5rem;
37
- padding-right: 0.5rem;
19
+ &.ax-sm {
20
+ .ax-input {
21
+ font-size: 0.875rem;
22
+ line-height: 0.875rem;
23
+ padding-inline-start: 0.5rem;
24
+ padding-inline-end: 0.375rem;
38
25
  }
39
- .ax-input,
40
- .ax-textarea {
41
- background-color: transparent;
42
- flex: 1 1 0%;
43
- border: none;
44
- text-align: inherit;
45
- font: inherit;
46
- width: 1%;
47
- &:focus {
48
- box-shadow: none;
49
- }
26
+ }
27
+ &.ax-md {
28
+ .ax-input {
29
+ font-size: 1rem;
30
+ line-height: 1rem;
50
31
  }
32
+ }
33
+ &.ax-lg {
51
34
  .ax-input {
52
- padding-inline-start: 1rem /* 16px */;
53
- padding-inline-end: 0.75rem /* 12px */;
35
+ font-size: 1.25rem;
36
+ line-height: 1.25rem;
54
37
  }
55
- .ax-textarea {
56
- padding: 0.625rem /* 10px */;
38
+ }
39
+
40
+ .ax-editor-control {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ width: var(--ax-size-default);
45
+ height: var(--ax-size-default);
46
+ font-size: 1.25rem;
47
+ line-height: 1.25rem;
48
+ color: rgba(var(--ax-color-ghost), 0.63);
49
+ }
50
+ &:focus-within {
51
+ outline-offset: 0px;
52
+ outline-width: 1px;
53
+ outline-style: solid;
54
+ outline-color: rgb(var(--ax-color-primary-500));
55
+ border-color: rgb(var(--ax-color-primary-500));
56
+ }
57
+
58
+ &.ax-button-icon {
59
+ padding-left: 0.5rem;
60
+ padding-right: 0.5rem;
61
+ }
62
+ .ax-input,
63
+ .ax-textarea {
64
+ width: 100%;
65
+ background-color: transparent;
66
+ flex: 1 1 0%;
67
+ border: none;
68
+ text-align: inherit;
69
+ font-family: inherit;
70
+ font-size: inherit;
71
+ font-weight: 400;
72
+ &:focus {
73
+ box-shadow: none;
57
74
  }
58
- & > .ax-prefix {
59
- *,
60
- .ax-button,
61
- .ax-title {
62
- border-start-start-radius: 0.25rem /* 4px */;
63
- border-end-start-radius: 0.25rem;
64
- }
75
+ }
76
+ .ax-input {
77
+ padding-inline-start: 1rem /* 16px */;
78
+ padding-inline-end: 0.75rem /* 12px */;
79
+ }
80
+ .ax-textarea {
81
+ padding: 0.625rem /* 10px */;
82
+ }
83
+ & > .ax-prefix {
84
+ *,
85
+ .ax-button,
86
+ .ax-title {
87
+ border-start-start-radius: 0.25rem /* 4px */;
88
+ border-end-start-radius: 0.25rem;
65
89
  }
90
+ }
66
91
 
67
- & > .ax-suffix {
68
- *,
69
- .ax-button,
70
- .ax-title {
71
- border-start-end-radius: 0.25rem /* 4px */;
72
- border-end-end-radius: 0.25rem;
73
- }
92
+ & > .ax-suffix {
93
+ *,
94
+ .ax-button,
95
+ .ax-title {
96
+ border-start-end-radius: 0.25rem /* 4px */;
97
+ border-end-end-radius: 0.25rem;
74
98
  }
99
+ }
75
100
 
76
- & > .ax-prefix,
77
- & > .ax-suffix {
78
- * {
79
- height: 100%;
80
- display: flex;
81
- justify-content: center;
82
- align-items: center;
83
- border-radius: 0px;
84
- }
101
+ & > .ax-prefix,
102
+ & > .ax-suffix {
103
+ * {
104
+ height: 100%;
105
+ display: flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ border-radius: 0px;
109
+ }
85
110
 
86
- .ax-icon {
87
- padding-left: 0.5rem /* 8px */;
88
- padding-right: 0.5rem;
89
- }
111
+ .ax-icon {
112
+ padding-left: 0.5rem /* 8px */;
113
+ padding-right: 0.5rem;
114
+ }
90
115
 
91
- .ax-title {
92
- padding-left: 1rem /* 16px */;
93
- padding-right: 1rem /* 16px */;
94
- }
116
+ .ax-title {
117
+ padding-left: 1rem /* 16px */;
118
+ padding-right: 1rem /* 16px */;
95
119
  }
120
+ }
96
121
 
97
- .ax-button {
98
- height: 100% !important;
99
- border-radius: 0px;
122
+ .ax-button {
123
+ height: 100% !important;
124
+ border-radius: 0px;
100
125
 
101
- &.ax-button-icon {
102
- width: var(--ax-size-default);
103
- height: var(--ax-size-default);
104
- }
126
+ &.ax-button-icon {
127
+ width: var(--ax-size-default);
128
+ height: var(--ax-size-default);
105
129
  }
130
+ }
106
131
 
107
- &.ax-state-disabled {
108
- opacity: 0.5;
109
- }
132
+ &.ax-state-disabled {
133
+ opacity: 0.5;
134
+ }
110
135
 
111
- &.ax-state-error {
112
- border-color: rgb(var(--ax-color-danger-500));
113
- &:focus-within {
114
- outline-color: rgb(var(--ax-color-danger-500));
115
- }
116
- .ax-input {
117
- &::placeholder {
118
- color: rgb(var(--ax-color-danger));
119
- }
120
- }
136
+ &.ax-state-error {
137
+ border-color: rgb(var(--ax-color-danger-500));
138
+ &:focus-within {
139
+ outline-color: rgb(var(--ax-color-danger-500));
140
+ }
141
+ .ax-input {
142
+ &::placeholder {
143
+ color: rgb(var(--ax-color-danger));
144
+ }
121
145
  }
146
+ }
122
147
 
123
- &.ax-state-success {
124
- outline-color: rgb(var(--ax-color-success-500));
125
- border-color: rgb(var(--ax-color-success-500));
126
- &:focus-within {
127
- outline-color: rgb(var(--ax-color-success-500));
128
- }
129
- .ax-input {
130
- &::placeholder {
131
- color: rgb(var(--ax-color-success));
132
- }
133
- }
148
+ &.ax-state-success {
149
+ outline-color: rgb(var(--ax-color-success-500));
150
+ border-color: rgb(var(--ax-color-success-500));
151
+ &:focus-within {
152
+ outline-color: rgb(var(--ax-color-success-500));
153
+ }
154
+ .ax-input {
155
+ &::placeholder {
156
+ color: rgb(var(--ax-color-success));
157
+ }
134
158
  }
159
+ }
135
160
  }
package/src/shared/_list.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  overflow: hidden;
7
7
  font-size: 0.875rem;
8
8
  background-color: rgb(var(--ax-color-surface));
9
-
9
+ height: 100%;
10
10
  @include media("desktop") {
11
11
  max-height: 320px;
12
12
  }
package/src/shared/_radio.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  background-size: contain;
25
25
  }
26
26
 
27
- &:focus {
27
+ &:focus-visible {
28
28
  outline-offset: 2px;
29
29
  outline-width: 2px;
30
30
  outline-style: solid;
package/src/utility/index.scss CHANGED
@@ -1,20 +1,55 @@
1
- .ax-sm {
1
+ // .ax-xs {
2
+ // --ax-size-default: 2rem;
3
+ // font-size: 0.75rem;
4
+ // * {
5
+ // font-size: 0.75rem;
6
+ // }
7
+ // }
8
+ // .ax-sm {
9
+ // --ax-size-default: 2.25rem;
10
+ // font-size: 0.875rem;
11
+ // * {
12
+ // font-size: 0.875rem;
13
+ // }
14
+ // }
15
+ // .ax-md {
16
+ // --ax-size-default: 2.5rem;
17
+ // font-size: 0.875rem;
18
+ // }
19
+ // .ax-lg {
20
+ // --ax-size-default: 3rem;
21
+ // font-size: 1rem;
22
+ // * {
23
+ // font-size: 1rem;
24
+ // }
25
+ // }
26
+ // .ax-xl {
27
+ // --ax-size-default: 3.5rem;
28
+ // font-size: 1rem;
29
+ // * {
30
+ // font-size: 1rem;
31
+ // }
32
+ // }
33
+ .ax-xs {
2
34
  --ax-size-default: 2rem;
3
- font-size: 0.75rem;
4
- * {
5
- font-size: 0.75rem;
6
- }
7
35
  }
36
+
37
+ .ax-sm {
38
+ --ax-size-default: 2.25rem;
39
+ }
40
+
8
41
  .ax-md {
9
- font-size: 0.875rem;
42
+ --ax-size-default: 2.5rem;
10
43
  }
44
+
11
45
  .ax-lg {
12
46
  --ax-size-default: 3rem;
13
- font-size: 1.25rem;
14
- * {
15
- font-size: 1.25rem;
16
- }
17
47
  }
48
+
49
+ .ax-xl {
50
+ --ax-size-default: 3.5rem;
51
+ }
52
+
18
53
  .ax-filp {
19
54
  transform: scale(-1, 1);
20
55
  }
package/src/variables/_colors.scss CHANGED
@@ -60,18 +60,18 @@ $theme-colors: (
60
60
  "900": "127, 29, 29",
61
61
  ),
62
62
  "warning": (
63
- "": "245, 158, 11",
64
- "fore": "0, 0, 0",
65
- "50": "255, 251, 235",
66
- "100": "254, 243, 199",
67
- "200": "253, 230, 138",
68
- "300": "252, 211, 77",
69
- "400": "251, 191, 36",
70
- "500": "245, 158, 11",
71
- "600": "217, 119, 6",
72
- "700": "180, 83, 9",
73
- "800": "146, 64, 14",
74
- "900": "120, 53, 15",
63
+ "": "255, 193, 7",
64
+ "fore": "120, 53, 15",
65
+ "50": "255, 248, 225",
66
+ "100": "255, 236, 179",
67
+ "200": "255, 224, 130",
68
+ "300": "255, 213, 79",
69
+ "400": "255, 202, 40",
70
+ "500": "255, 193, 7",
71
+ "600": "255, 179, 0",
72
+ "700": "255, 160, 0",
73
+ "800": "255, 143, 0",
74
+ "900": "255, 111, 0",
75
75
  ),
76
76
  "neutral": (
77
77
  "": "113, 113, 122",
package/tailwind.config.js CHANGED
@@ -1,5 +1,5 @@
1
- const plugin = require("tailwindcss/plugin");
2
- const withAnimations = require("animated-tailwindcss");
1
+ const plugin = require('tailwindcss/plugin');
2
+ const withAnimations = require('animated-tailwindcss');
3
3
 
4
4
  function withOpacityValue(variable) {
5
5
  return ({ opacityValue }) => {
@@ -11,101 +11,101 @@ function withOpacityValue(variable) {
11
11
  }
12
12
 
13
13
  module.exports = withAnimations({
14
- prefix: "ax-",
14
+ prefix: 'ax-',
15
15
  corePlugins: {
16
16
  preflight: false,
17
17
  },
18
18
  content: [
19
- "./src/**/*.{html,ts,scss}",
20
- "./projects/**/*.{html,ts,scss}",
19
+ './src/**/*.{html,ts,scss}',
20
+ './projects/**/*.{html,ts,scss}',
21
21
  // "./dist/acorex/**/*.{html,ts,scss}",
22
22
  // "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
23
23
  ],
24
- darkMode: "class", // or 'media' or 'class'
24
+ darkMode: 'class', // or 'media' or 'class'
25
25
  theme: {
26
26
  extend: {
27
27
  colors: {
28
- "black": withOpacityValue("--ax-color-black"),
29
- "white": withOpacityValue("--ax-color-white"),
30
- "surface": withOpacityValue("--ax-color-surface"),
31
- "on-surface": withOpacityValue("--ax-color-on-surface"),
32
- "border-color": "rgba(var(--ax-color-border-default))",
28
+ black: withOpacityValue('--ax-color-black'),
29
+ white: withOpacityValue('--ax-color-white'),
30
+ surface: withOpacityValue('--ax-color-surface'),
31
+ 'on-surface': withOpacityValue('--ax-color-on-surface'),
32
+ 'border-color': 'rgba(var(--ax-color-border-default))',
33
33
  primary: {
34
- "DEFAULT": withOpacityValue("--ax-color-primary-500"),
35
- fore: withOpacityValue("--ax-color-primary-fore"),
36
- 50: withOpacityValue("--ax-color-primary-50"),
37
- 100: withOpacityValue("--ax-color-primary-100"),
38
- 200: withOpacityValue("--ax-color-primary-200"),
39
- 300: withOpacityValue("--ax-color-primary-300"),
40
- 400: withOpacityValue("--ax-color-primary-400"),
41
- 500: withOpacityValue("--ax-color-primary-500"),
42
- 600: withOpacityValue("--ax-color-primary-600"),
43
- 700: withOpacityValue("--ax-color-primary-700"),
44
- 800: withOpacityValue("--ax-color-primary-800"),
45
- 900: withOpacityValue("--ax-color-primary-900"),
34
+ DEFAULT: withOpacityValue('--ax-color-primary-500'),
35
+ fore: withOpacityValue('--ax-color-primary-fore'),
36
+ 50: withOpacityValue('--ax-color-primary-50'),
37
+ 100: withOpacityValue('--ax-color-primary-100'),
38
+ 200: withOpacityValue('--ax-color-primary-200'),
39
+ 300: withOpacityValue('--ax-color-primary-300'),
40
+ 400: withOpacityValue('--ax-color-primary-400'),
41
+ 500: withOpacityValue('--ax-color-primary-500'),
42
+ 600: withOpacityValue('--ax-color-primary-600'),
43
+ 700: withOpacityValue('--ax-color-primary-700'),
44
+ 800: withOpacityValue('--ax-color-primary-800'),
45
+ 900: withOpacityValue('--ax-color-primary-900'),
46
46
  },
47
47
  secondary: {
48
- "DEFAULT": withOpacityValue("--ax-color-secondary-500"),
49
- fore: withOpacityValue("--ax-color-secondary-fore"),
50
- 50: withOpacityValue("--ax-color-secondary-50"),
51
- 100: withOpacityValue("--ax-color-secondary-100"),
52
- 200: withOpacityValue("--ax-color-secondary-200"),
53
- 300: withOpacityValue("--ax-color-secondary-300"),
54
- 400: withOpacityValue("--ax-color-secondary-400"),
55
- 500: withOpacityValue("--ax-color-secondary-500"),
56
- 600: withOpacityValue("--ax-color-secondary-600"),
57
- 700: withOpacityValue("--ax-color-secondary-700"),
58
- 800: withOpacityValue("--ax-color-secondary-800"),
59
- 900: withOpacityValue("--ax-color-secondary-900"),
48
+ DEFAULT: withOpacityValue('--ax-color-secondary-500'),
49
+ fore: withOpacityValue('--ax-color-secondary-fore'),
50
+ 50: withOpacityValue('--ax-color-secondary-50'),
51
+ 100: withOpacityValue('--ax-color-secondary-100'),
52
+ 200: withOpacityValue('--ax-color-secondary-200'),
53
+ 300: withOpacityValue('--ax-color-secondary-300'),
54
+ 400: withOpacityValue('--ax-color-secondary-400'),
55
+ 500: withOpacityValue('--ax-color-secondary-500'),
56
+ 600: withOpacityValue('--ax-color-secondary-600'),
57
+ 700: withOpacityValue('--ax-color-secondary-700'),
58
+ 800: withOpacityValue('--ax-color-secondary-800'),
59
+ 900: withOpacityValue('--ax-color-secondary-900'),
60
60
  },
61
61
  success: {
62
- "DEFAULT": withOpacityValue("--ax-color-success-500"),
63
- fore: withOpacityValue("--ax-color-success-fore"),
64
- 50: withOpacityValue("--ax-color-success-50"),
65
- 100: withOpacityValue("--ax-color-success-100"),
66
- 200: withOpacityValue("--ax-color-success-200"),
67
- 300: withOpacityValue("--ax-color-success-300"),
68
- 400: withOpacityValue("--ax-color-success-400"),
69
- 500: withOpacityValue("--ax-color-success-500"),
70
- 600: withOpacityValue("--ax-color-success-600"),
71
- 700: withOpacityValue("--ax-color-success-700"),
72
- 800: withOpacityValue("--ax-color-success-800"),
73
- 900: withOpacityValue("--ax-color-success-900"),
62
+ DEFAULT: withOpacityValue('--ax-color-success-500'),
63
+ fore: withOpacityValue('--ax-color-success-fore'),
64
+ 50: withOpacityValue('--ax-color-success-50'),
65
+ 100: withOpacityValue('--ax-color-success-100'),
66
+ 200: withOpacityValue('--ax-color-success-200'),
67
+ 300: withOpacityValue('--ax-color-success-300'),
68
+ 400: withOpacityValue('--ax-color-success-400'),
69
+ 500: withOpacityValue('--ax-color-success-500'),
70
+ 600: withOpacityValue('--ax-color-success-600'),
71
+ 700: withOpacityValue('--ax-color-success-700'),
72
+ 800: withOpacityValue('--ax-color-success-800'),
73
+ 900: withOpacityValue('--ax-color-success-900'),
74
74
  },
75
75
  danger: {
76
- "DEFAULT": withOpacityValue("--ax-color-danger-500"),
77
- fore: withOpacityValue("--ax-color-danger-fore"),
78
- 50: withOpacityValue("--ax-color-danger-50"),
79
- 100: withOpacityValue("--ax-color-danger-100"),
80
- 200: withOpacityValue("--ax-color-danger-200"),
81
- 300: withOpacityValue("--ax-color-danger-300"),
82
- 400: withOpacityValue("--ax-color-danger-400"),
83
- 500: withOpacityValue("--ax-color-danger-500"),
84
- 600: withOpacityValue("--ax-color-danger-600"),
85
- 700: withOpacityValue("--ax-color-danger-700"),
86
- 800: withOpacityValue("--ax-color-danger-800"),
87
- 900: withOpacityValue("--ax-color-danger-900"),
76
+ DEFAULT: withOpacityValue('--ax-color-danger-500'),
77
+ fore: withOpacityValue('--ax-color-danger-fore'),
78
+ 50: withOpacityValue('--ax-color-danger-50'),
79
+ 100: withOpacityValue('--ax-color-danger-100'),
80
+ 200: withOpacityValue('--ax-color-danger-200'),
81
+ 300: withOpacityValue('--ax-color-danger-300'),
82
+ 400: withOpacityValue('--ax-color-danger-400'),
83
+ 500: withOpacityValue('--ax-color-danger-500'),
84
+ 600: withOpacityValue('--ax-color-danger-600'),
85
+ 700: withOpacityValue('--ax-color-danger-700'),
86
+ 800: withOpacityValue('--ax-color-danger-800'),
87
+ 900: withOpacityValue('--ax-color-danger-900'),
88
88
  },
89
89
  warning: {
90
- "DEFAULT": withOpacityValue("--ax-color-warning-500"),
91
- fore: withOpacityValue("--ax-color-warning-fore"),
92
- 50: withOpacityValue("--ax-color-warning-50"),
93
- 100: withOpacityValue("--ax-color-warning-100"),
94
- 200: withOpacityValue("--ax-color-warning-200"),
95
- 300: withOpacityValue("--ax-color-warning-300"),
96
- 400: withOpacityValue("--ax-color-warning-400"),
97
- 500: withOpacityValue("--ax-color-warning-500"),
98
- 600: withOpacityValue("--ax-color-warning-600"),
99
- 700: withOpacityValue("--ax-color-warning-700"),
100
- 800: withOpacityValue("--ax-color-warning-800"),
101
- 900: withOpacityValue("--ax-color-warning-900"),
102
- }
90
+ DEFAULT: withOpacityValue('--ax-color-warning-500'),
91
+ fore: withOpacityValue('--ax-color-warning-fore'),
92
+ 50: withOpacityValue('--ax-color-warning-50'),
93
+ 100: withOpacityValue('--ax-color-warning-100'),
94
+ 200: withOpacityValue('--ax-color-warning-200'),
95
+ 300: withOpacityValue('--ax-color-warning-300'),
96
+ 400: withOpacityValue('--ax-color-warning-400'),
97
+ 500: withOpacityValue('--ax-color-warning-500'),
98
+ 600: withOpacityValue('--ax-color-warning-600'),
99
+ 700: withOpacityValue('--ax-color-warning-700'),
100
+ 800: withOpacityValue('--ax-color-warning-800'),
101
+ 900: withOpacityValue('--ax-color-warning-900'),
102
+ },
103
103
  },
104
104
  maxWidth: {
105
- "8xl": "90rem",
105
+ '8xl': '90rem',
106
106
  },
107
107
  borderRadius: {
108
- default: "var(--ax-rounded-border-default)",
108
+ default: 'var(--ax-rounded-border-default)',
109
109
  },
110
110
  },
111
111
  },
@@ -113,23 +113,37 @@ module.exports = withAnimations({
113
113
  plugins: [
114
114
  plugin(function ({ addUtilities }) {
115
115
  const acorexClasses = {
116
- ".animate-fast": {
117
- animationDuration: "800ms",
116
+ '.animate-fast': {
117
+ animationDuration: '800ms',
118
118
  },
119
- ".animate-faster": {
120
- animationDuration: "500ms",
119
+ '.animate-faster': {
120
+ animationDuration: '500ms',
121
121
  },
122
- ".bg-default": {
122
+ '.bg-default': {
123
123
  backgroundColor:
124
- "rgb(var(--ax-color-default-background) / var(--tw-bg-opacity))",
124
+ 'rgb(var(--ax-color-default-background) / var(--tw-bg-opacity))',
125
125
  },
126
- ".text-default": {
126
+ '.text-default': {
127
127
  backgroundColor:
128
- "rgb(var(--ax-color-default-color) / var(--tw-text-opacity))",
128
+ 'rgb(var(--ax-color-default-color) / var(--tw-text-opacity))',
129
129
  },
130
+ '.tabs-fit': {},
131
+ '.skeleton': {},
132
+ '.skeleton-animate': {},
133
+ '.xs': {},
134
+ '.sm': {},
135
+ '.md': {},
136
+ '.lg': {},
137
+ '.xl': {},
130
138
  };
131
- addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
139
+ addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
140
+ }),
141
+ plugin(function ({ addVariant }) {
142
+ addVariant('child', '& > *');
143
+ addVariant('child-hover', '& > *:hover');
144
+ addVariant('child-focus', '& > *:focus');
145
+ addVariant('child-focus-within', '& > *:focus-within');
132
146
  }),
133
- require("tailwind-auto-directions"),
147
+ require('tailwind-auto-directions'),
134
148
  ],
135
149
  });