@kjaniec-dev/design 0.1.0 → 0.3.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.
- package/package.json +30 -19
- package/src/tailwind.css +22 -0
- package/src/theme.css +24 -0
package/package.json
CHANGED
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
2
|
+
"name": "@kjaniec-dev/design",
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "Design tokens and Tailwind v4 theme for the KJ Product Kit",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "kjaniec-dev",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/kjaniec-dev/ui-kit.git",
|
|
10
|
+
"directory": "packages/design"
|
|
11
|
+
},
|
|
12
|
+
"publishConfig": {
|
|
13
|
+
"access": "public"
|
|
14
|
+
},
|
|
15
|
+
"exports": {
|
|
16
|
+
"./theme.css": {
|
|
17
|
+
"style": "./theme.css",
|
|
18
|
+
"default": "./theme.css"
|
|
19
|
+
},
|
|
20
|
+
"./tailwind.css": {
|
|
21
|
+
"style": "./tailwind.css",
|
|
22
|
+
"default": "./tailwind.css"
|
|
23
|
+
},
|
|
24
|
+
"./tokens.json": "./tokens.json"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"theme.css",
|
|
28
|
+
"tailwind.css",
|
|
29
|
+
"tokens.json",
|
|
30
|
+
"src"
|
|
31
|
+
]
|
|
21
32
|
}
|
package/src/tailwind.css
CHANGED
|
@@ -9,9 +9,31 @@
|
|
|
9
9
|
--color-primary: var(--kj-primary);
|
|
10
10
|
--color-primary-hover: var(--kj-primary-hover);
|
|
11
11
|
--color-primary-foreground: var(--kj-primary-foreground);
|
|
12
|
+
--color-primary-50: var(--kj-primary-50);
|
|
13
|
+
--color-primary-100: var(--kj-primary-100);
|
|
14
|
+
--color-primary-200: var(--kj-primary-200);
|
|
15
|
+
--color-primary-300: var(--kj-primary-300);
|
|
16
|
+
--color-primary-400: var(--kj-primary-400);
|
|
17
|
+
--color-primary-500: var(--kj-primary-500);
|
|
18
|
+
--color-primary-600: var(--kj-primary-600);
|
|
19
|
+
--color-primary-700: var(--kj-primary-700);
|
|
20
|
+
--color-primary-800: var(--kj-primary-800);
|
|
21
|
+
--color-primary-900: var(--kj-primary-900);
|
|
22
|
+
--color-primary-950: var(--kj-primary-950);
|
|
12
23
|
--color-secondary: var(--kj-secondary);
|
|
13
24
|
--color-secondary-hover: var(--kj-secondary-hover);
|
|
14
25
|
--color-secondary-foreground: var(--kj-secondary-foreground);
|
|
26
|
+
--color-secondary-50: var(--kj-secondary-50);
|
|
27
|
+
--color-secondary-100: var(--kj-secondary-100);
|
|
28
|
+
--color-secondary-200: var(--kj-secondary-200);
|
|
29
|
+
--color-secondary-300: var(--kj-secondary-300);
|
|
30
|
+
--color-secondary-400: var(--kj-secondary-400);
|
|
31
|
+
--color-secondary-500: var(--kj-secondary-500);
|
|
32
|
+
--color-secondary-600: var(--kj-secondary-600);
|
|
33
|
+
--color-secondary-700: var(--kj-secondary-700);
|
|
34
|
+
--color-secondary-800: var(--kj-secondary-800);
|
|
35
|
+
--color-secondary-900: var(--kj-secondary-900);
|
|
36
|
+
--color-secondary-950: var(--kj-secondary-950);
|
|
15
37
|
--color-muted: var(--kj-muted);
|
|
16
38
|
--color-muted-foreground: var(--kj-muted-foreground);
|
|
17
39
|
--color-border: var(--kj-border);
|
package/src/theme.css
CHANGED
|
@@ -7,9 +7,33 @@
|
|
|
7
7
|
--kj-card-foreground: #09090b;
|
|
8
8
|
--kj-primary: #f59e0b;
|
|
9
9
|
--kj-primary-hover: #d97706;
|
|
10
|
+
/* Primary (amber) scale */
|
|
11
|
+
--kj-primary-50: #fffbeb;
|
|
12
|
+
--kj-primary-100: #fef3c7;
|
|
13
|
+
--kj-primary-200: #fde68a;
|
|
14
|
+
--kj-primary-300: #fcd34d;
|
|
15
|
+
--kj-primary-400: #fbbf24;
|
|
16
|
+
--kj-primary-500: #f59e0b;
|
|
17
|
+
--kj-primary-600: #d97706;
|
|
18
|
+
--kj-primary-700: #b45309;
|
|
19
|
+
--kj-primary-800: #92400e;
|
|
20
|
+
--kj-primary-900: #78350f;
|
|
21
|
+
--kj-primary-950: #451a03;
|
|
10
22
|
--kj-primary-foreground: #09090b;
|
|
11
23
|
--kj-secondary: #14b8a6;
|
|
12
24
|
--kj-secondary-hover: #0d9488;
|
|
25
|
+
/* Secondary (teal) scale */
|
|
26
|
+
--kj-secondary-50: #f0fdfa;
|
|
27
|
+
--kj-secondary-100: #ccfbf1;
|
|
28
|
+
--kj-secondary-200: #99f6e4;
|
|
29
|
+
--kj-secondary-300: #5eead4;
|
|
30
|
+
--kj-secondary-400: #2dd4bf;
|
|
31
|
+
--kj-secondary-500: #14b8a6;
|
|
32
|
+
--kj-secondary-600: #0d9488;
|
|
33
|
+
--kj-secondary-700: #0f766e;
|
|
34
|
+
--kj-secondary-800: #115e59;
|
|
35
|
+
--kj-secondary-900: #134e4a;
|
|
36
|
+
--kj-secondary-950: #042f2e;
|
|
13
37
|
--kj-secondary-foreground: #ffffff;
|
|
14
38
|
--kj-muted: #f4f4f5;
|
|
15
39
|
--kj-muted-foreground: #71717a;
|