@trineui/cli 0.2.0 → 0.4.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.
@@ -7,47 +7,47 @@ export const buttonSkin = cva(
7
7
  'font-medium leading-none',
8
8
  'select-none',
9
9
  '[&:has(>.sr-only)]:gap-0 [&:has(>.sr-only)]:px-0',
10
- 'rounded-[var(--trine-radius-md)] border',
11
- 'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--trine-duration-base)] ease-[var(--trine-ease-default)]',
12
- 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--trine-color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--trine-color-bg)]',
13
- 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-[var(--trine-color-text-disabled)] disabled:shadow-none',
10
+ 'rounded-md border',
11
+ 'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--duration-base)] ease-[var(--ease-default)]',
12
+ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
13
+ 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-muted-foreground disabled:shadow-none',
14
14
  ],
15
15
  {
16
16
  variants: {
17
17
  variant: {
18
18
  primary: [
19
- 'bg-[var(--trine-color-primary-default)]',
20
- 'border-[var(--trine-color-primary-default)]',
21
- 'text-[var(--trine-color-primary-fg)]',
22
- 'shadow-[var(--trine-shadow-sm)]',
23
- 'hover:bg-[var(--trine-color-primary-hover)] hover:border-[var(--trine-color-primary-hover)]',
24
- 'active:bg-[var(--trine-color-primary-active)] active:border-[var(--trine-color-primary-active)] active:translate-y-px active:shadow-none',
25
- 'disabled:border-[var(--trine-color-primary-subtle)] disabled:bg-[var(--trine-color-primary-subtle)]',
19
+ 'bg-primary',
20
+ 'border-primary',
21
+ 'text-primary-foreground',
22
+ 'shadow-[var(--shadow-sm)]',
23
+ 'hover:bg-primary-hover hover:border-primary-hover',
24
+ 'active:bg-primary-active active:border-primary-active active:translate-y-px active:shadow-none',
25
+ 'disabled:border-primary-subtle disabled:bg-primary-subtle',
26
26
  ],
27
27
  secondary: [
28
- 'bg-[var(--trine-color-neutral-subtle)]',
29
- 'border-[var(--trine-color-border)]',
30
- 'text-[var(--trine-color-text)]',
31
- 'hover:bg-[var(--trine-color-neutral-hover)] hover:border-[var(--trine-color-border-strong)]',
32
- 'active:bg-[var(--trine-color-neutral-active)] active:border-[var(--trine-color-border-strong)] active:translate-y-px',
33
- 'disabled:border-[var(--trine-color-border)] disabled:bg-[var(--trine-color-neutral-subtle)]',
28
+ 'bg-secondary',
29
+ 'border-border',
30
+ 'text-secondary-foreground',
31
+ 'hover:bg-secondary-hover hover:border-border-strong',
32
+ 'active:bg-secondary-active active:border-border-strong active:translate-y-px',
33
+ 'disabled:border-border disabled:bg-muted',
34
34
  ],
35
35
  ghost: [
36
36
  'bg-transparent',
37
37
  'border-transparent',
38
- 'text-[var(--trine-color-primary-default)]',
39
- 'hover:bg-[var(--trine-color-primary-subtle)] hover:text-[var(--trine-color-primary-hover)]',
40
- 'active:bg-[var(--trine-color-primary-subtle)] active:text-[var(--trine-color-primary-active)] active:translate-y-px',
41
- 'disabled:bg-transparent disabled:border-transparent disabled:text-[var(--trine-color-text-disabled)]',
38
+ 'text-primary',
39
+ 'hover:bg-accent hover:text-accent-foreground',
40
+ 'active:bg-accent active:text-accent-foreground active:translate-y-px',
41
+ 'disabled:bg-transparent disabled:border-transparent',
42
42
  ],
43
43
  danger: [
44
- 'bg-[var(--trine-color-danger-default)]',
45
- 'border-[var(--trine-color-danger-default)]',
46
- 'text-[var(--trine-color-danger-fg)]',
47
- 'shadow-[var(--trine-shadow-sm)]',
48
- 'hover:bg-[var(--trine-color-danger-hover)] hover:border-[var(--trine-color-danger-hover)]',
49
- 'active:bg-[var(--trine-color-danger-active)] active:border-[var(--trine-color-danger-active)] active:translate-y-px active:shadow-none',
50
- 'disabled:border-[var(--trine-color-danger-subtle)] disabled:bg-[var(--trine-color-danger-subtle)]',
44
+ 'bg-destructive',
45
+ 'border-destructive',
46
+ 'text-destructive-foreground',
47
+ 'shadow-[var(--shadow-sm)]',
48
+ 'hover:bg-destructive-hover hover:border-destructive-hover',
49
+ 'active:bg-destructive-active active:border-destructive-active active:translate-y-px active:shadow-none',
50
+ 'disabled:border-destructive-subtle disabled:bg-destructive-subtle',
51
51
  ],
52
52
  },
53
53
  size: {
@@ -65,19 +65,19 @@ export const buttonSkin = cva(
65
65
  variant: 'primary',
66
66
  loading: true,
67
67
  class: [
68
- '[&[aria-busy=true]]:border-[var(--trine-color-primary-default)]',
69
- '[&[aria-busy=true]]:bg-[var(--trine-color-primary-default)]',
70
- '[&[aria-busy=true]]:text-[var(--trine-color-primary-fg)]',
71
- '[&[aria-busy=true]]:shadow-[var(--trine-shadow-sm)]',
68
+ '[&[aria-busy=true]]:border-primary',
69
+ '[&[aria-busy=true]]:bg-primary',
70
+ '[&[aria-busy=true]]:text-primary-foreground',
71
+ '[&[aria-busy=true]]:shadow-[var(--shadow-sm)]',
72
72
  ],
73
73
  },
74
74
  {
75
75
  variant: 'secondary',
76
76
  loading: true,
77
77
  class: [
78
- '[&[aria-busy=true]]:border-[var(--trine-color-border)]',
79
- '[&[aria-busy=true]]:bg-[var(--trine-color-neutral-subtle)]',
80
- '[&[aria-busy=true]]:text-[var(--trine-color-text)]',
78
+ '[&[aria-busy=true]]:border-border',
79
+ '[&[aria-busy=true]]:bg-secondary',
80
+ '[&[aria-busy=true]]:text-secondary-foreground',
81
81
  ],
82
82
  },
83
83
  {
@@ -85,18 +85,18 @@ export const buttonSkin = cva(
85
85
  loading: true,
86
86
  class: [
87
87
  '[&[aria-busy=true]]:border-transparent',
88
- '[&[aria-busy=true]]:bg-[var(--trine-color-primary-subtle)]',
89
- '[&[aria-busy=true]]:text-[var(--trine-color-primary-default)]',
88
+ '[&[aria-busy=true]]:bg-accent',
89
+ '[&[aria-busy=true]]:text-accent-foreground',
90
90
  ],
91
91
  },
92
92
  {
93
93
  variant: 'danger',
94
94
  loading: true,
95
95
  class: [
96
- '[&[aria-busy=true]]:border-[var(--trine-color-danger-default)]',
97
- '[&[aria-busy=true]]:bg-[var(--trine-color-danger-default)]',
98
- '[&[aria-busy=true]]:text-[var(--trine-color-danger-fg)]',
99
- '[&[aria-busy=true]]:shadow-[var(--trine-shadow-sm)]',
96
+ '[&[aria-busy=true]]:border-destructive',
97
+ '[&[aria-busy=true]]:bg-destructive',
98
+ '[&[aria-busy=true]]:text-destructive-foreground',
99
+ '[&[aria-busy=true]]:shadow-[var(--shadow-sm)]',
100
100
  ],
101
101
  },
102
102
  ],
@@ -0,0 +1,125 @@
1
+ @import 'tailwindcss';
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ @theme inline {
6
+ --color-background: var(--background);
7
+ --color-foreground: var(--foreground);
8
+ --color-card: var(--card);
9
+ --color-card-foreground: var(--card-foreground);
10
+ --color-popover: var(--popover);
11
+ --color-popover-foreground: var(--popover-foreground);
12
+ --color-primary: var(--primary);
13
+ --color-primary-foreground: var(--primary-foreground);
14
+ --color-primary-hover: var(--primary-hover);
15
+ --color-primary-active: var(--primary-active);
16
+ --color-primary-subtle: var(--primary-subtle);
17
+ --color-secondary: var(--secondary);
18
+ --color-secondary-foreground: var(--secondary-foreground);
19
+ --color-secondary-hover: var(--secondary-hover);
20
+ --color-secondary-active: var(--secondary-active);
21
+ --color-muted: var(--muted);
22
+ --color-muted-foreground: var(--muted-foreground);
23
+ --color-accent: var(--accent);
24
+ --color-accent-foreground: var(--accent-foreground);
25
+ --color-destructive: var(--destructive);
26
+ --color-destructive-foreground: var(--destructive-foreground);
27
+ --color-destructive-hover: var(--destructive-hover);
28
+ --color-destructive-active: var(--destructive-active);
29
+ --color-destructive-subtle: var(--destructive-subtle);
30
+ --color-border: var(--border);
31
+ --color-border-strong: var(--border-strong);
32
+ --color-input: var(--input);
33
+ --color-ring: var(--ring);
34
+ }
35
+
36
+ :root {
37
+ --background: oklch(0.9702 0.0015 253.83);
38
+ --foreground: oklch(0.2103 0.0015 253.83);
39
+
40
+ --card: oklch(1 0.0008 253.83);
41
+ --card-foreground: oklch(0.2103 0.0015 253.83);
42
+
43
+ --popover: oklch(1 0.0004 253.83 / 0.82);
44
+ --popover-foreground: oklch(0.2103 0.0015 253.83);
45
+
46
+ --primary: oklch(0.6204 0.195 253.83);
47
+ --primary-foreground: oklch(0.9911 0 0);
48
+ --primary-hover: oklch(0.5804 0.195 253.83);
49
+ --primary-active: oklch(0.5404 0.195 253.83);
50
+ --primary-subtle: oklch(0.9524 0.02 253.83);
51
+
52
+ --secondary: oklch(0.94 0.0015 253.83);
53
+ --secondary-foreground: oklch(0.2103 0.0015 253.83);
54
+ --secondary-hover: oklch(0.9373 0.0012 253.83);
55
+ --secondary-active: oklch(0.92 0.0015 253.83);
56
+
57
+ --muted: oklch(0.94 0.0015 253.83);
58
+ --muted-foreground: oklch(0.5517 0.003 253.83);
59
+
60
+ --accent: oklch(0.9524 0.02 253.83);
61
+ --accent-foreground: oklch(0.6204 0.195 253.83);
62
+
63
+ --destructive: oklch(0.6532 0.2335 25.74);
64
+ --destructive-foreground: oklch(0.9911 0 0);
65
+ --destructive-hover: oklch(0.6132 0.2335 25.74);
66
+ --destructive-active: oklch(0.5732 0.2335 25.74);
67
+ --destructive-subtle: oklch(0.9524 0.025 25.74);
68
+
69
+ --border: oklch(0.9 0.0015 253.83);
70
+ --border-strong: oklch(0.871 0.0015 253.83);
71
+ --input: oklch(0.9 0.0015 253.83);
72
+ --ring: oklch(0.6204 0.195 253.83);
73
+
74
+ --radius: 0.5rem;
75
+
76
+ --shadow-sm: 0 1px 2px 0 oklch(0.16 0.01 258 / 0.12);
77
+ --shadow-md: 0 10px 20px -10px oklch(0.16 0.01 258 / 0.22);
78
+ --shadow-lg: 0 20px 40px -20px oklch(0.16 0.01 258 / 0.28);
79
+
80
+ --duration-fast: 120ms;
81
+ --duration-base: 180ms;
82
+ --duration-slow: 280ms;
83
+ --ease-default: cubic-bezier(0.2, 0, 0, 1);
84
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
85
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
86
+ }
87
+
88
+ .dark {
89
+ --background: oklch(0.12 0.0015 253.83);
90
+ --foreground: oklch(0.9911 0.0015 253.83);
91
+
92
+ --card: oklch(0.2103 0.003 253.83);
93
+ --card-foreground: oklch(0.9911 0.0015 253.83);
94
+
95
+ --popover: oklch(0.2103 0.003 253.83 / 0.82);
96
+ --popover-foreground: oklch(0.9911 0.0015 253.83);
97
+
98
+ --primary: oklch(0.6204 0.195 253.83);
99
+ --primary-foreground: oklch(0.9911 0 0);
100
+ --primary-hover: oklch(0.6704 0.195 253.83);
101
+ --primary-active: oklch(0.5804 0.195 253.83);
102
+ --primary-subtle: oklch(0.274 0.02 253.83);
103
+
104
+ --secondary: oklch(0.274 0.0015 253.83);
105
+ --secondary-foreground: oklch(0.9911 0.0015 253.83);
106
+ --secondary-hover: oklch(0.3964 0.0015 253.83);
107
+ --secondary-active: oklch(0.257 0.0023 253.83);
108
+
109
+ --muted: oklch(0.274 0.0015 253.83);
110
+ --muted-foreground: oklch(0.705 0.003 253.83);
111
+
112
+ --accent: oklch(0.274 0.02 253.83);
113
+ --accent-foreground: oklch(0.6204 0.195 253.83);
114
+
115
+ --destructive: oklch(0.594 0.1973 24.63);
116
+ --destructive-foreground: oklch(0.9911 0 0);
117
+ --destructive-hover: oklch(0.634 0.1973 24.63);
118
+ --destructive-active: oklch(0.554 0.1973 24.63);
119
+ --destructive-subtle: oklch(0.257 0.02 24.63);
120
+
121
+ --border: oklch(0.28 0.0015 253.83);
122
+ --border-strong: oklch(0.3964 0.0015 253.83);
123
+ --input: oklch(0.28 0.0015 253.83);
124
+ --ring: oklch(0.6204 0.195 253.83);
125
+ }
@@ -1,102 +0,0 @@
1
- :root {
2
- --trine-color-primary-default: oklch(0.6204 0.195 253.83);
3
- --trine-color-primary-hover: oklch(0.5804 0.195 253.83);
4
- --trine-color-primary-active: oklch(0.5404 0.195 253.83);
5
- --trine-color-primary-subtle: oklch(0.9524 0.02 253.83);
6
- --trine-color-primary-fg: oklch(0.9911 0 0);
7
-
8
- --trine-color-danger-default: oklch(0.6532 0.2335 25.74);
9
- --trine-color-danger-hover: oklch(0.6132 0.2335 25.74);
10
- --trine-color-danger-active: oklch(0.5732 0.2335 25.74);
11
- --trine-color-danger-subtle: oklch(0.9524 0.025 25.74);
12
- --trine-color-danger-fg: oklch(0.9911 0 0);
13
-
14
- --trine-color-success-default: oklch(0.7329 0.1941 150.81);
15
- --trine-color-success-hover: oklch(0.6929 0.1941 150.81);
16
- --trine-color-success-active: oklch(0.6529 0.1941 150.81);
17
- --trine-color-success-subtle: oklch(0.9524 0.02 150.81);
18
- --trine-color-success-fg: oklch(0.2103 0.0059 150.81);
19
-
20
- --trine-color-warning-default: oklch(0.7819 0.159 72.33);
21
- --trine-color-warning-hover: oklch(0.7419 0.159 72.33);
22
- --trine-color-warning-active: oklch(0.7019 0.159 72.33);
23
- --trine-color-warning-subtle: oklch(0.9524 0.02 72.33);
24
- --trine-color-warning-fg: oklch(0.2103 0.0059 72.33);
25
-
26
- --trine-color-neutral-default: oklch(0.5517 0.003 253.83);
27
- --trine-color-neutral-hover: oklch(0.9373 0.0012 253.83);
28
- --trine-color-neutral-active: oklch(0.92 0.0015 253.83);
29
- --trine-color-neutral-subtle: oklch(0.94 0.0015 253.83);
30
- --trine-color-neutral-fg: oklch(0.2103 0.0059 253.83);
31
-
32
- --trine-color-bg: oklch(0.9702 0.0015 253.83);
33
- --trine-color-bg-elevated: oklch(1 0.0008 253.83);
34
- --trine-color-bg-overlay: oklch(1 0.0004 253.83 / 0.82);
35
- --trine-color-border: oklch(0.9 0.0015 253.83);
36
- --trine-color-border-strong: oklch(0.871 0.0015 253.83);
37
- --trine-color-ring: oklch(0.6204 0.195 253.83);
38
- --trine-color-text: oklch(0.2103 0.0015 253.83);
39
- --trine-color-text-subtle: oklch(0.5517 0.003 253.83);
40
- --trine-color-text-disabled: oklch(0.5517 0.003 253.83);
41
-
42
- --trine-radius-none: 0;
43
- --trine-radius-sm: 0.375rem;
44
- --trine-radius-md: 0.5rem;
45
- --trine-radius-lg: 0.75rem;
46
- --trine-radius-xl: 1rem;
47
- --trine-radius-2xl: 1.25rem;
48
- --trine-radius-full: 9999px;
49
-
50
- --trine-shadow-sm: 0 1px 2px 0 oklch(0.16 0.01 258 / 0.12);
51
- --trine-shadow-md: 0 10px 20px -10px oklch(0.16 0.01 258 / 0.22);
52
- --trine-shadow-lg: 0 20px 40px -20px oklch(0.16 0.01 258 / 0.28);
53
-
54
- --trine-duration-fast: 120ms;
55
- --trine-duration-base: 180ms;
56
- --trine-duration-slow: 280ms;
57
- --trine-ease-default: cubic-bezier(0.2, 0, 0, 1);
58
- --trine-ease-in: cubic-bezier(0.4, 0, 1, 1);
59
- --trine-ease-out: cubic-bezier(0, 0, 0.2, 1);
60
- }
61
-
62
- html.dark {
63
- --trine-color-primary-default: oklch(0.6204 0.195 253.83);
64
- --trine-color-primary-hover: oklch(0.6704 0.195 253.83);
65
- --trine-color-primary-active: oklch(0.5804 0.195 253.83);
66
- --trine-color-primary-subtle: oklch(0.274 0.02 253.83);
67
- --trine-color-primary-fg: oklch(0.9911 0 0);
68
-
69
- --trine-color-danger-default: oklch(0.594 0.1973 24.63);
70
- --trine-color-danger-hover: oklch(0.634 0.1973 24.63);
71
- --trine-color-danger-active: oklch(0.554 0.1973 24.63);
72
- --trine-color-danger-subtle: oklch(0.257 0.02 24.63);
73
- --trine-color-danger-fg: oklch(0.9911 0 0);
74
-
75
- --trine-color-success-default: oklch(0.7329 0.1941 150.81);
76
- --trine-color-success-hover: oklch(0.7729 0.1941 150.81);
77
- --trine-color-success-active: oklch(0.6929 0.1941 150.81);
78
- --trine-color-success-subtle: oklch(0.257 0.02 150.81);
79
- --trine-color-success-fg: oklch(0.2103 0.0059 150.81);
80
-
81
- --trine-color-warning-default: oklch(0.8203 0.1392 76.34);
82
- --trine-color-warning-hover: oklch(0.8603 0.1392 76.34);
83
- --trine-color-warning-active: oklch(0.7803 0.1392 76.34);
84
- --trine-color-warning-subtle: oklch(0.2721 0.02 76.34);
85
- --trine-color-warning-fg: oklch(0.2103 0.0059 76.34);
86
-
87
- --trine-color-neutral-default: oklch(0.705 0.003 253.83);
88
- --trine-color-neutral-hover: oklch(0.3964 0.0015 253.83);
89
- --trine-color-neutral-active: oklch(0.257 0.0023 253.83);
90
- --trine-color-neutral-subtle: oklch(0.274 0.0015 253.83);
91
- --trine-color-neutral-fg: oklch(0.9911 0.0015 253.83);
92
-
93
- --trine-color-bg: oklch(0.12 0.0015 253.83);
94
- --trine-color-bg-elevated: oklch(0.2103 0.003 253.83);
95
- --trine-color-bg-overlay: oklch(0.2103 0.003 253.83 / 0.82);
96
- --trine-color-border: oklch(0.28 0.0015 253.83);
97
- --trine-color-border-strong: oklch(0.3964 0.0015 253.83);
98
- --trine-color-ring: oklch(0.6204 0.195 253.83);
99
- --trine-color-text: oklch(0.9911 0.0015 253.83);
100
- --trine-color-text-subtle: oklch(0.705 0.003 253.83);
101
- --trine-color-text-disabled: oklch(0.705 0.003 253.83);
102
- }
@@ -1,58 +0,0 @@
1
- /* Consumer-safe styling/bootstrap baseline for copy-paste ownership delivery. */
2
- @import './tokens.css';
3
- @import 'tailwindcss';
4
-
5
- @source '../app';
6
-
7
- @theme {
8
- --color-trine-primary: var(--trine-color-primary-default);
9
- --color-trine-primary-hover: var(--trine-color-primary-hover);
10
- --color-trine-primary-active: var(--trine-color-primary-active);
11
- --color-trine-primary-subtle: var(--trine-color-primary-subtle);
12
- --color-trine-primary-fg: var(--trine-color-primary-fg);
13
-
14
- --color-trine-danger: var(--trine-color-danger-default);
15
- --color-trine-danger-hover: var(--trine-color-danger-hover);
16
- --color-trine-danger-active: var(--trine-color-danger-active);
17
- --color-trine-danger-subtle: var(--trine-color-danger-subtle);
18
- --color-trine-danger-fg: var(--trine-color-danger-fg);
19
-
20
- --color-trine-success: var(--trine-color-success-default);
21
- --color-trine-success-hover: var(--trine-color-success-hover);
22
- --color-trine-success-active: var(--trine-color-success-active);
23
- --color-trine-success-subtle: var(--trine-color-success-subtle);
24
- --color-trine-success-fg: var(--trine-color-success-fg);
25
-
26
- --color-trine-warning: var(--trine-color-warning-default);
27
- --color-trine-warning-hover: var(--trine-color-warning-hover);
28
- --color-trine-warning-active: var(--trine-color-warning-active);
29
- --color-trine-warning-subtle: var(--trine-color-warning-subtle);
30
- --color-trine-warning-fg: var(--trine-color-warning-fg);
31
-
32
- --color-trine-neutral: var(--trine-color-neutral-default);
33
- --color-trine-neutral-hover: var(--trine-color-neutral-hover);
34
- --color-trine-neutral-active: var(--trine-color-neutral-active);
35
- --color-trine-neutral-subtle: var(--trine-color-neutral-subtle);
36
- --color-trine-neutral-fg: var(--trine-color-neutral-fg);
37
-
38
- --color-trine-bg: var(--trine-color-bg);
39
- --color-trine-bg-elevated: var(--trine-color-bg-elevated);
40
- --color-trine-bg-overlay: var(--trine-color-bg-overlay);
41
- --color-trine-border: var(--trine-color-border);
42
- --color-trine-border-strong: var(--trine-color-border-strong);
43
- --color-trine-text: var(--trine-color-text);
44
- --color-trine-text-subtle: var(--trine-color-text-subtle);
45
- --color-trine-text-disabled: var(--trine-color-text-disabled);
46
-
47
- --radius-trine-none: var(--trine-radius-none);
48
- --radius-trine-sm: var(--trine-radius-sm);
49
- --radius-trine-md: var(--trine-radius-md);
50
- --radius-trine-lg: var(--trine-radius-lg);
51
- --radius-trine-xl: var(--trine-radius-xl);
52
- --radius-trine-2xl: var(--trine-radius-2xl);
53
- --radius-trine-full: var(--trine-radius-full);
54
-
55
- --shadow-trine-sm: var(--trine-shadow-sm);
56
- --shadow-trine-md: var(--trine-shadow-md);
57
- --shadow-trine-lg: var(--trine-shadow-lg);
58
- }