@shuriken-ui/tailwind 4.0.0-alpha.1 → 4.0.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/package.json +20 -19
  2. package/src/css/button-action.css +17 -17
  3. package/src/css/button-close.css +23 -23
  4. package/src/css/button-icon.css +22 -22
  5. package/src/index.css +6 -5
  6. package/src/theme.css +80 -0
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@shuriken-ui/tailwind",
3
- "version": "4.0.0-alpha.1",
4
- "packageManager": "pnpm@9.12.3",
3
+ "version": "4.0.0-alpha.2",
5
4
  "license": "MIT",
6
5
  "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
7
6
  "repository": "shuriken-ui/tailwind",
@@ -23,28 +22,14 @@
23
22
  "main": "./src/index.css",
24
23
  "exports": {
25
24
  ".": "./src/index.css",
25
+ "./theme.css": "./src/theme.css",
26
26
  "./*.css": "./src/css/*.css"
27
27
  },
28
28
  "files": [
29
29
  "src/index.css",
30
+ "src/theme.css",
30
31
  "src/css"
31
32
  ],
32
- "scripts": {
33
- "dev": "storybook dev -p 6006",
34
- "build": "unbuild",
35
- "build-storybook": "storybook build",
36
- "lint": "run-s lint:eslint:fix lint:prettier:fix",
37
- "lint:prettier": "prettier --check \"./**/*.(ts|css|scss|md)\"",
38
- "lint:prettier:fix": "prettier --write \"./**/*.(ts|css|scss|md)\"",
39
- "lint:eslint": "eslint -c .eslintrc.cjs --ext .ts .",
40
- "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix --ext .ts .",
41
- "test": "run-s lint:eslint lint:prettier test:vitest",
42
- "test:vitest": "vitest",
43
- "coverage": "vitest run --coverage",
44
- "release": "run-s test release:*",
45
- "release:standard-version": "standard-version",
46
- "release:publish": "git push --follow-tags origin main && npm publish"
47
- },
48
33
  "dependencies": {
49
34
  "@tailwindcss/container-queries": "^0.1.1",
50
35
  "@tailwindcss/typography": "^0.5.15",
@@ -75,5 +60,21 @@
75
60
  "unbuild": "^2.0.0",
76
61
  "vitest": "^2.1.4",
77
62
  "vitest-axe": "1.0.0-pre.2"
63
+ },
64
+ "scripts": {
65
+ "dev": "storybook dev -p 6006",
66
+ "build": "unbuild",
67
+ "build-storybook": "storybook build",
68
+ "lint": "run-s lint:eslint:fix lint:prettier:fix",
69
+ "lint:prettier": "prettier --check \"./**/*.(ts|css|scss|md)\"",
70
+ "lint:prettier:fix": "prettier --write \"./**/*.(ts|css|scss|md)\"",
71
+ "lint:eslint": "eslint -c .eslintrc.cjs --ext .ts .",
72
+ "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix --ext .ts .",
73
+ "test": "run-s lint:eslint lint:prettier test:vitest",
74
+ "test:vitest": "vitest",
75
+ "coverage": "vitest run --coverage",
76
+ "release": "run-s test release:*",
77
+ "release:standard-version": "standard-version",
78
+ "release:publish": "git push --follow-tags origin main && npm publish"
78
79
  }
79
- }
80
+ }
package/src/css/button-action.css CHANGED
@@ -7,99 +7,99 @@
7
7
  @apply disabled:opacity-60 disabled:cursor-not-allowed hover:enabled:shadow-none;
8
8
  @apply transition-all duration-300;
9
9
  }
10
- @utility nui-button-rounded-sm {
10
+ @utility nui-button-action-rounded-sm {
11
11
  @apply rounded-md;
12
12
  }
13
- @utility nui-button-rounded-md {
13
+ @utility nui-button-action-rounded-md {
14
14
  @apply rounded-lg;
15
15
  }
16
- @utility nui-button-rounded-lg {
16
+ @utility nui-button-action-rounded-lg {
17
17
  @apply rounded-xl;
18
18
  }
19
- @utility nui-button-rounded-full {
19
+ @utility nui-button-action-rounded-full {
20
20
  @apply rounded-full;
21
21
  }
22
- @utility nui-button-loading {
22
+ @utility nui-button-action-loading {
23
23
  @apply !text-transparent;
24
24
  }
25
- @utility nui-button-default {
25
+ @utility nui-button-action-default {
26
26
  @apply text-muted-700 dark:text-muted-100;
27
27
  @apply bg-white dark:bg-muted-700;
28
28
  @apply hover:enabled:bg-muted-50 dark:hover:enabled:bg-muted-600;
29
29
  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-700;
30
30
  @apply border-muted-300 dark:border-muted-600;
31
31
  }
32
- @utility nui-button-default-contrast {
32
+ @utility nui-button-action-default-contrast {
33
33
  @apply text-muted-700 dark:text-muted-100;
34
34
  @apply bg-white dark:bg-muted-950;
35
35
  @apply hover:enabled:bg-muted-50 dark:hover:enabled:bg-muted-900;
36
36
  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-950;
37
37
  @apply border-muted-300 dark:border-muted-800;
38
38
  }
39
- @utility nui-button-muted {
39
+ @utility nui-button-action-muted {
40
40
  @apply text-muted-500 dark:text-muted-100;
41
41
  @apply bg-muted-200 dark:bg-muted-700/40;
42
42
  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-700/60;
43
43
  @apply active:enabled:bg-muted-200/50 dark:active:enabled:bg-muted-800;
44
44
  @apply border-muted-200 dark:border-muted-700/40;
45
45
  }
46
- @utility nui-button-muted-contrast {
46
+ @utility nui-button-action-muted-contrast {
47
47
  @apply text-muted-500 dark:text-muted-100;
48
48
  @apply bg-muted-200 dark:bg-muted-950;
49
49
  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-900;
50
50
  @apply active:enabled:bg-muted-200/50 dark:active:enabled:bg-muted-950;
51
51
  @apply border-muted-200 dark:border-muted-800;
52
52
  }
53
- @utility nui-button-light {
53
+ @utility nui-button-action-light {
54
54
  @apply text-muted-500 dark:text-muted-100;
55
55
  @apply bg-muted-200 dark:bg-muted-700;
56
56
  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-600;
57
57
  @apply active:enabled:bg-muted-200 dark:active:enabled:bg-muted-700;
58
58
  @apply border-muted-200 dark:border-muted-700;
59
59
  }
60
- @utility nui-button-dark {
60
+ @utility nui-button-action-dark {
61
61
  @apply text-muted-100 dark:text-muted-900;
62
62
  @apply bg-muted-900 dark:bg-muted-100;
63
63
  @apply hover:enabled:bg-muted-800 dark:hover:enabled:bg-muted-50;
64
64
  @apply active:enabled:bg-muted-900 dark:active:enabled:bg-muted-100;
65
65
  @apply border-muted-900 dark:border-muted-100;
66
66
  }
67
- @utility nui-button-black {
67
+ @utility nui-button-action-black {
68
68
  @apply text-white dark:text-black;
69
69
  @apply bg-black dark:bg-white;
70
70
  @apply hover:enabled:bg-muted-800 dark:hover:enabled:bg-white/90;
71
71
  @apply active:enabled:bg-black dark:active:enabled:bg-white;
72
72
  @apply border-black dark:border-white;
73
73
  }
74
- @utility nui-button-primary {
74
+ @utility nui-button-action-primary {
75
75
  @apply text-white dark:text-white;
76
76
  @apply bg-primary-500 dark:bg-primary-500;
77
77
  @apply hover:enabled:bg-primary-400 dark:hover:enabled:bg-primary-400;
78
78
  @apply active:enabled:bg-primary-500 dark:active:enabled:bg-primary-500;
79
79
  @apply border-primary-500 dark:border-primary-500;
80
80
  }
81
- @utility nui-button-info {
81
+ @utility nui-button-action-info {
82
82
  @apply text-white dark:text-white;
83
83
  @apply bg-info-500 dark:bg-info-500;
84
84
  @apply hover:enabled:bg-info-400 dark:hover:enabled:bg-info-400;
85
85
  @apply active:enabled:bg-info-500 dark:active:enabled:bg-info-500;
86
86
  @apply border-info-500 dark:border-info-500;
87
87
  }
88
- @utility nui-button-success {
88
+ @utility nui-button-action-success {
89
89
  @apply text-white dark:text-white;
90
90
  @apply bg-success-500 dark:bg-success-500;
91
91
  @apply hover:enabled:bg-success-400 dark:hover:enabled:bg-success-400;
92
92
  @apply active:enabled:bg-success-500 dark:active:enabled:bg-success-500;
93
93
  @apply border-success-500 dark:border-success-500;
94
94
  }
95
- @utility nui-button-warning {
95
+ @utility nui-button-action-warning {
96
96
  @apply text-white dark:text-white;
97
97
  @apply bg-warning-500 dark:bg-warning-500;
98
98
  @apply hover:enabled:bg-warning-400 dark:hover:enabled:bg-warning-400;
99
99
  @apply active:enabled:bg-warning-500 dark:active:enabled:bg-warning-500;
100
100
  @apply border-warning-500 dark:border-warning-500;
101
101
  }
102
- @utility nui-button-danger {
102
+ @utility nui-button-action-danger {
103
103
  @apply text-white dark:text-white;
104
104
  @apply bg-danger-500 dark:bg-danger-500;
105
105
  @apply hover:enabled:bg-danger-400 dark:hover:enabled:bg-danger-400;
package/src/css/button-close.css CHANGED
@@ -5,110 +5,110 @@
5
5
  @apply nui-focus flex items-center justify-center disabled:opacity-30 cursor-pointer;
6
6
  @apply transition-colors duration-300;
7
7
  }
8
- @utility nui-button-xs {
8
+ @utility nui-button-close-xs {
9
9
  @apply h-6 w-6;
10
10
 
11
- .nui-button-icon {
11
+ .nui-button-close-icon {
12
12
  @apply h-3 w-3 fill-current;
13
13
  }
14
14
  }
15
- @utility nui-button-sm {
15
+ @utility nui-button-close-sm {
16
16
  @apply h-8 w-8;
17
17
 
18
- .nui-button-icon {
18
+ .nui-button-close-icon {
19
19
  @apply h-4 w-4 fill-current;
20
20
  }
21
21
  }
22
- @utility nui-button-md {
22
+ @utility nui-button-close-md {
23
23
  @apply h-10 w-10;
24
24
 
25
- .nui-button-icon {
25
+ .nui-button-close-icon {
26
26
  @apply h-4 w-4 fill-current;
27
27
  }
28
28
  }
29
- @utility nui-button-lg {
29
+ @utility nui-button-close-lg {
30
30
  @apply h-12 w-12;
31
31
 
32
- .nui-button-icon {
32
+ .nui-button-close-icon {
33
33
  @apply h-5 w-5 fill-current;
34
34
  }
35
35
  }
36
- @utility nui-button-xl {
36
+ @utility nui-button-close-xl {
37
37
  @apply h-14 w-14;
38
38
 
39
- .nui-button-icon {
39
+ .nui-button-close-icon {
40
40
  @apply h-6 w-6 fill-current;
41
41
  }
42
42
  }
43
- @utility nui-button-rounded-sm {
43
+ @utility nui-button-close-rounded-sm {
44
44
  @apply rounded;
45
45
  }
46
- @utility nui-button-rounded-md {
46
+ @utility nui-button-close-rounded-md {
47
47
  @apply rounded-md;
48
48
  }
49
- @utility nui-button-rounded-lg {
49
+ @utility nui-button-close-rounded-lg {
50
50
  @apply rounded-lg;
51
51
  }
52
- @utility nui-button-rounded-full {
52
+ @utility nui-button-close-rounded-full {
53
53
  @apply rounded-full;
54
54
  }
55
- @utility nui-button-default {
55
+ @utility nui-button-close-default {
56
56
  @apply text-muted-700 dark:text-muted-50;
57
57
  @apply bg-transparent dark:bg-transparent;
58
58
  @apply hover:bg-muted-100 dark:hover:bg-muted-700;
59
59
  @apply focus-visible:bg-muted-100 dark:focus-visible:bg-muted-700;
60
60
  @apply active:enabled:bg-transparent dark:active:enabled:bg-transparent;
61
61
  }
62
- @utility nui-button-default-contrast {
62
+ @utility nui-button-close-default-contrast {
63
63
  @apply text-muted-700 dark:text-muted-50;
64
64
  @apply bg-transparent dark:bg-transparent;
65
65
  @apply hover:bg-muted-100 dark:hover:bg-muted-900;
66
66
  @apply focus-visible:bg-muted-100 dark:focus-visible:bg-muted-900;
67
67
  @apply active:enabled:bg-transparent dark:active:enabled:bg-transparent;
68
68
  }
69
- @utility nui-button-muted {
69
+ @utility nui-button-close-muted {
70
70
  @apply text-muted-700 dark:text-muted-50;
71
71
  @apply bg-muted-100 dark:bg-muted-700;
72
72
  @apply hover:bg-muted-50 dark:hover:bg-muted-600;
73
73
  @apply focus-visible:bg-muted-50 dark:focus-visible:bg-muted-600;
74
74
  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-700;
75
75
  }
76
- @utility nui-button-muted-contrast {
76
+ @utility nui-button-close-muted-contrast {
77
77
  @apply text-muted-700 dark:text-muted-50;
78
78
  @apply bg-muted-100 dark:bg-muted-950;
79
79
  @apply hover:bg-muted-50 dark:hover:bg-muted-900;
80
80
  @apply focus-visible:bg-muted-50 dark:focus-visible:bg-muted-900;
81
81
  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-950;
82
82
  }
83
- @utility nui-button-primary {
83
+ @utility nui-button-close-primary {
84
84
  @apply text-primary-500 dark:text-primary-500;
85
85
  @apply bg-primary-500/10 dark:bg-primary-500/10;
86
86
  @apply hover:bg-primary-500/20 dark:hover:bg-primary-500/20;
87
87
  @apply focus-visible:bg-primary-500/20 dark:focus-visible:bg-primary-500/20;
88
88
  @apply active:enabled:bg-primary-500/10 dark:active:enabled:bg-primary-500/10;
89
89
  }
90
- @utility nui-button-info {
90
+ @utility nui-button-close-info {
91
91
  @apply text-info-500 dark:text-info-500;
92
92
  @apply bg-info-500/10 dark:bg-info-500/10;
93
93
  @apply hover:bg-info-500/20 dark:hover:bg-info-500/20;
94
94
  @apply focus-visible:bg-info-500/20 dark:focus-visible:bg-info-500/20;
95
95
  @apply active:enabled:bg-info-500/10 dark:active:enabled:bg-info-500/10;
96
96
  }
97
- @utility nui-button-success {
97
+ @utility nui-button-close-success {
98
98
  @apply text-success-500 dark:text-success-500;
99
99
  @apply bg-success-500/10 dark:bg-success-500/10;
100
100
  @apply hover:bg-success-500/20 dark:hover:bg-success-500/20;
101
101
  @apply focus-visible:bg-success-500/20 dark:focus-visible:bg-success-500/20;
102
102
  @apply active:enabled:bg-success-500/10 dark:active:enabled:bg-success-500/10;
103
103
  }
104
- @utility nui-button-warning {
104
+ @utility nui-button-close-warning {
105
105
  @apply text-warning-500 dark:text-warning-500;
106
106
  @apply bg-warning-500/10 dark:bg-warning-500/10;
107
107
  @apply hover:bg-warning-500/20 dark:hover:bg-warning-500/20;
108
108
  @apply focus-visible:bg-warning-500/20 dark:focus-visible:bg-warning-500/20;
109
109
  @apply active:enabled:bg-warning-500/10 dark:active:enabled:bg-warning-500/10;
110
110
  }
111
- @utility nui-button-danger {
111
+ @utility nui-button-close-danger {
112
112
  @apply text-danger-500 dark:text-danger-500;
113
113
  @apply bg-danger-500/10 dark:bg-danger-500/10;
114
114
  @apply hover:bg-danger-500/20 dark:hover:bg-danger-500/20;
package/src/css/button-icon.css CHANGED
@@ -1,96 +1,96 @@
1
1
  /* generated using "pnpm jiti scripts/generate-utilities.ts" */
2
2
  /* @utility nui-button-icon */
3
3
 
4
- @utility nui-button-icon {
4
+ @utility nui-button-icon-icon {
5
5
  @apply nui-focus relative inline-flex items-center justify-center space-x-1 leading-5 no-underline disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none;
6
6
  @apply font-sans text-sm font-normal;
7
7
  @apply transition-all duration-300;
8
8
  }
9
- @utility nui-button-sm {
9
+ @utility nui-button-icon-sm {
10
10
  @apply h-8 w-8 p-1;
11
11
  }
12
- @utility nui-button-md {
12
+ @utility nui-button-icon-md {
13
13
  @apply h-10 w-10 p-2;
14
14
  }
15
- @utility nui-button-lg {
15
+ @utility nui-button-icon-lg {
16
16
  @apply h-12 w-12 p-3;
17
17
  }
18
- @utility nui-button-xl {
18
+ @utility nui-button-icon-xl {
19
19
  @apply h-14 w-14 p-4;
20
20
  }
21
- @utility nui-button-rounded-sm {
21
+ @utility nui-button-icon-rounded-sm {
22
22
  @apply rounded;
23
23
  }
24
- @utility nui-button-rounded-md {
24
+ @utility nui-button-icon-rounded-md {
25
25
  @apply rounded-md;
26
26
  }
27
- @utility nui-button-rounded-lg {
27
+ @utility nui-button-icon-rounded-lg {
28
28
  @apply rounded-lg;
29
29
  }
30
- @utility nui-button-rounded-full {
30
+ @utility nui-button-icon-rounded-full {
31
31
  @apply rounded-full;
32
32
  }
33
- @utility nui-button-loading {
33
+ @utility nui-button-icon-loading {
34
34
  @apply !text-transparent;
35
35
  }
36
- @utility nui-button-default {
36
+ @utility nui-button-icon-default {
37
37
  @apply text-muted-700 dark:text-muted-100;
38
38
  @apply bg-white dark:bg-muted-700;
39
39
  @apply hover:bg-muted-50 dark:hover:bg-muted-600;
40
40
  @apply border border-muted-200 dark:border-muted-600;
41
41
  }
42
- @utility nui-button-default-contrast {
42
+ @utility nui-button-icon-default-contrast {
43
43
  @apply text-muted-700 dark:text-muted-100;
44
44
  @apply bg-white dark:bg-muted-950;
45
45
  @apply hover:bg-muted-50 dark:hover:bg-muted-900;
46
46
  @apply border border-muted-300 dark:border-muted-800;
47
47
  }
48
- @utility nui-button-muted {
48
+ @utility nui-button-icon-muted {
49
49
  @apply text-muted-500 dark:text-muted-100;
50
50
  @apply bg-muted-200 dark:bg-muted-700;
51
51
  @apply hover:bg-muted-100 dark:hover:bg-muted-600;
52
52
  }
53
- @utility nui-button-muted-contrast {
53
+ @utility nui-button-icon-muted-contrast {
54
54
  @apply text-muted-500 dark:text-muted-100;
55
55
  @apply bg-muted-200 dark:bg-muted-950;
56
56
  @apply hover:bg-muted-100 dark:hover:bg-muted-900;
57
57
  }
58
- @utility nui-button-light {
58
+ @utility nui-button-icon-light {
59
59
  @apply text-muted-500 dark:text-muted-100;
60
60
  @apply bg-muted-200 dark:bg-muted-700;
61
61
  @apply hover:bg-muted-100 dark:hover:bg-muted-600;
62
62
  }
63
- @utility nui-button-dark {
63
+ @utility nui-button-icon-dark {
64
64
  @apply text-muted-100 dark:text-muted-900;
65
65
  @apply bg-muted-900 dark:bg-muted-100;
66
66
  @apply hover:bg-muted-800 dark:hover:bg-muted-50;
67
67
  }
68
- @utility nui-button-black {
68
+ @utility nui-button-icon-black {
69
69
  @apply text-white dark:text-black;
70
70
  @apply bg-black dark:bg-white;
71
71
  @apply hover:bg-black/90 dark:hover:bg-white/90;
72
72
  }
73
- @utility nui-button-primary {
73
+ @utility nui-button-icon-primary {
74
74
  @apply text-primary-500 dark:text-primary-500;
75
75
  @apply bg-primary-500/20 dark:bg-primary-500/20;
76
76
  @apply hover:bg-primary-500/10 dark:hover:bg-primary-500/10;
77
77
  }
78
- @utility nui-button-info {
78
+ @utility nui-button-icon-info {
79
79
  @apply text-info-500 dark:text-info-500;
80
80
  @apply bg-info-500/20 dark:bg-info-500/20;
81
81
  @apply hover:bg-info-500/10 dark:hover:bg-info-500/10;
82
82
  }
83
- @utility nui-button-success {
83
+ @utility nui-button-icon-success {
84
84
  @apply text-success-500 dark:text-success-500;
85
85
  @apply bg-success-500/20 dark:bg-success-500/20;
86
86
  @apply hover:bg-success-500/10 dark:hover:bg-success-500/10;
87
87
  }
88
- @utility nui-button-warning {
88
+ @utility nui-button-icon-warning {
89
89
  @apply text-warning-500 dark:text-warning-500;
90
90
  @apply bg-warning-500/20 dark:bg-warning-500/20;
91
91
  @apply hover:bg-warning-500/10 dark:hover:bg-warning-500/10;
92
92
  }
93
- @utility nui-button-danger {
93
+ @utility nui-button-icon-danger {
94
94
  @apply text-danger-500 dark:text-danger-500;
95
95
  @apply bg-danger-500/20 dark:bg-danger-500/20;
96
96
  @apply hover:bg-danger-500/10 dark:hover:bg-danger-500/10;
package/src/index.css CHANGED
@@ -1,16 +1,17 @@
1
-
2
1
  @plugin '@tailwindcss/typography';
3
2
 
3
+ @import './theme.css';
4
+
4
5
  @import './css/accordion.css';
5
6
  @import './css/autocomplete.css';
6
7
  @import './css/avatar.css';
7
8
  @import './css/avatar-group.css';
8
9
  @import './css/breadcrumb.css';
9
10
  @import './css/button.css';
10
- /* @import './css/button-action.css'; */
11
- /* @import './css/button-close.css'; */
12
- /* @import './css/button-group.css'; */
13
- /* @import './css/button-icon.css'; */
11
+ @import './css/button-action.css';
12
+ @import './css/button-close.css';
13
+ @import './css/button-group.css';
14
+ @import './css/button-icon.css';
14
15
  @import './css/card.css';
15
16
  @import './css/checkbox.css';
16
17
  @import './css/dropdown.css';
package/src/theme.css ADDED
@@ -0,0 +1,80 @@
1
+ @theme {
2
+ /* --font-family-sans: 'Titillium Web', sans-serif; */
3
+ /* --font-family-mono: 'Titillium Web', sans-serif; */
4
+ --font-family-alt: var(--font-family-sans);
5
+ --font-family-heading: var(--font-family-sans);
6
+
7
+ /** Colors */
8
+ --color-muted-50: var(--color-gray-50);
9
+ --color-muted-100: var(--color-gray-100);
10
+ --color-muted-200: var(--color-gray-200);
11
+ --color-muted-300: var(--color-gray-300);
12
+ --color-muted-400: var(--color-gray-400);
13
+ --color-muted-500: var(--color-gray-500);
14
+ --color-muted-600: var(--color-gray-600);
15
+ --color-muted-700: var(--color-gray-700);
16
+ --color-muted-800: var(--color-gray-800);
17
+ --color-muted-900: var(--color-gray-900);
18
+ --color-muted-950: var(--color-gray-950);
19
+
20
+ --color-primary-invert: var(--color-white);
21
+ --color-primary-50: var(--color-purple-50);
22
+ --color-primary-100: var(--color-purple-100);
23
+ --color-primary-200: var(--color-purple-200);
24
+ --color-primary-300: var(--color-purple-300);
25
+ --color-primary-400: var(--color-purple-400);
26
+ --color-primary-500: var(--color-purple-500);
27
+ --color-primary-600: var(--color-purple-600);
28
+ --color-primary-700: var(--color-purple-700);
29
+ --color-primary-800: var(--color-purple-800);
30
+ --color-primary-900: var(--color-purple-900);
31
+ --color-primary-950: var(--color-purple-950);
32
+
33
+ --color-info-50: var(--color-sky-50);
34
+ --color-info-100: var(--color-sky-100);
35
+ --color-info-200: var(--color-sky-200);
36
+ --color-info-300: var(--color-sky-300);
37
+ --color-info-400: var(--color-sky-400);
38
+ --color-info-500: var(--color-sky-500);
39
+ --color-info-600: var(--color-sky-600);
40
+ --color-info-700: var(--color-sky-700);
41
+ --color-info-800: var(--color-sky-800);
42
+ --color-info-900: var(--color-sky-900);
43
+ --color-info-950: var(--color-sky-950);
44
+
45
+ --color-success-50: var(--color-teal-50);
46
+ --color-success-100: var(--color-teal-100);
47
+ --color-success-200: var(--color-teal-200);
48
+ --color-success-300: var(--color-teal-300);
49
+ --color-success-400: var(--color-teal-400);
50
+ --color-success-500: var(--color-teal-500);
51
+ --color-success-600: var(--color-teal-600);
52
+ --color-success-700: var(--color-teal-700);
53
+ --color-success-800: var(--color-teal-800);
54
+ --color-success-900: var(--color-teal-900);
55
+ --color-success-950: var(--color-teal-950);
56
+
57
+ --color-warning-50: var(--color-amber-50);
58
+ --color-warning-100: var(--color-amber-100);
59
+ --color-warning-200: var(--color-amber-200);
60
+ --color-warning-300: var(--color-amber-300);
61
+ --color-warning-400: var(--color-amber-400);
62
+ --color-warning-500: var(--color-amber-500);
63
+ --color-warning-600: var(--color-amber-600);
64
+ --color-warning-700: var(--color-amber-700);
65
+ --color-warning-800: var(--color-amber-800);
66
+ --color-warning-900: var(--color-amber-900);
67
+ --color-warning-950: var(--color-amber-950);
68
+
69
+ --color-danger-50: var(--color-rose-50);
70
+ --color-danger-100: var(--color-rose-100);
71
+ --color-danger-200: var(--color-rose-200);
72
+ --color-danger-300: var(--color-rose-300);
73
+ --color-danger-400: var(--color-rose-400);
74
+ --color-danger-500: var(--color-rose-500);
75
+ --color-danger-600: var(--color-rose-600);
76
+ --color-danger-700: var(--color-rose-700);
77
+ --color-danger-800: var(--color-rose-800);
78
+ --color-danger-900: var(--color-rose-900);
79
+ --color-danger-950: var(--color-rose-950);
80
+ }