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

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 (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
+ }