@awsmbiz/inbis-ui 0.1.0 → 0.2.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.
Files changed (6) hide show
  1. package/README.md +58 -5
  2. package/dist/index.d.ts +44 -5
  3. package/dist/index.js +308 -65
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -3
  6. package/styles/globals.css +176 -111
package/styles/globals.css CHANGED
@@ -6,131 +6,196 @@
6
6
  /* This package's compiled components. Apps add @source for their own code (and other packages' dist). */
7
7
  @source "../dist";
8
8
 
9
+ /* Inbis UI design system tokens (docs/design/inbis-ui/tokens.json). Token names are
10
+ shadcn's own, so every shadcn component picks up the theme. Contrast of every text and
11
+ indicator pair is checked against WCAG 2.2 AA in test/theme-contrast.test.ts. */
12
+
9
13
  @theme inline {
14
+ /* Inter first. The package never fetches fonts: apps load Inter (see README) either as
15
+ the "Inter" family or through a --font-inter variable (e.g. next/font). */
16
+ --font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
10
17
  --font-heading: var(--font-sans);
11
- --color-sidebar-ring: var(--sidebar-ring);
12
- --color-sidebar-border: var(--sidebar-border);
13
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14
- --color-sidebar-accent: var(--sidebar-accent);
15
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16
- --color-sidebar-primary: var(--sidebar-primary);
17
- --color-sidebar-foreground: var(--sidebar-foreground);
18
- --color-sidebar: var(--sidebar);
19
- --color-chart-5: var(--chart-5);
20
- --color-chart-4: var(--chart-4);
21
- --color-chart-3: var(--chart-3);
22
- --color-chart-2: var(--chart-2);
23
- --color-chart-1: var(--chart-1);
24
- --color-ring: var(--ring);
25
- --color-input: var(--input);
26
- --color-border: var(--border);
27
- --color-destructive: var(--destructive);
28
- --color-accent-foreground: var(--accent-foreground);
29
- --color-accent: var(--accent);
30
- --color-muted-foreground: var(--muted-foreground);
31
- --color-muted: var(--muted);
32
- --color-secondary-foreground: var(--secondary-foreground);
33
- --color-secondary: var(--secondary);
34
- --color-primary-foreground: var(--primary-foreground);
35
- --color-primary: var(--primary);
36
- --color-popover-foreground: var(--popover-foreground);
37
- --color-popover: var(--popover);
38
- --color-card-foreground: var(--card-foreground);
39
- --color-card: var(--card);
40
- --color-foreground: var(--foreground);
41
- --color-background: var(--background);
42
- --radius-sm: calc(var(--radius) * 0.6);
43
- --radius-md: calc(var(--radius) * 0.8);
44
- --radius-lg: var(--radius);
45
- --radius-xl: calc(var(--radius) * 1.4);
46
- --radius-2xl: calc(var(--radius) * 1.8);
47
- --radius-3xl: calc(var(--radius) * 2.2);
18
+ --radius-sm: calc(var(--radius) - 4px); /* 8px */
19
+ --radius-md: var(--radius); /* 12px: fields, popovers, alerts, icon tiles */
20
+ --radius-lg: calc(var(--radius) + 4px); /* 16px: cards, tables, toasts */
21
+ --radius-xl: calc(var(--radius) + 10px); /* 22px: dialogs, large panels */
22
+ --radius-2xl: calc(var(--radius) + 4px); /* 16px, = radius-lg (shadcn's rounded-2xl cards) */
23
+ --radius-3xl: calc(var(--radius) + 10px); /* 22px, = radius-xl */
48
24
  --radius-4xl: calc(var(--radius) * 2.6);
49
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
25
+ --color-background: var(--background);
26
+ --color-foreground: var(--foreground);
27
+ --color-card: var(--card);
28
+ --color-card-foreground: var(--card-foreground);
29
+ --color-popover: var(--popover);
30
+ --color-popover-foreground: var(--popover-foreground);
31
+ --color-primary: var(--primary);
32
+ --color-primary-foreground: var(--primary-foreground);
33
+ --color-secondary: var(--secondary);
34
+ --color-secondary-foreground: var(--secondary-foreground);
35
+ --color-muted: var(--muted);
36
+ --color-muted-foreground: var(--muted-foreground);
37
+ --color-accent: var(--accent);
38
+ --color-accent-foreground: var(--accent-foreground);
39
+ --color-destructive: var(--destructive);
40
+ --color-destructive-foreground: var(--destructive-foreground);
41
+ --color-border: var(--border);
42
+ --color-input: var(--input);
43
+ --color-ring: var(--ring);
44
+ --color-surface-raised: var(--surface-raised);
45
+ --color-panel: var(--panel);
46
+ --color-night: var(--night);
47
+ --color-on-night: var(--on-night);
48
+ --color-on-night-muted: var(--on-night-muted);
49
+ --color-success: var(--success);
50
+ --color-success-soft: var(--success-soft);
51
+ --color-success-soft-foreground: var(--success-soft-foreground);
52
+ --color-warning-soft: var(--warning-soft);
53
+ --color-warning-soft-foreground: var(--warning-soft-foreground);
54
+ --color-info-soft: var(--info-soft);
55
+ --color-info-soft-foreground: var(--info-soft-foreground);
56
+ --color-destructive-soft: var(--destructive-soft);
57
+ --color-destructive-soft-foreground: var(--destructive-soft-foreground);
58
+ --color-app-green: var(--app-green);
59
+ --color-app-purple: var(--app-purple);
60
+ --color-app-orange: var(--app-orange);
61
+ --color-app-rose: var(--app-rose);
62
+ --color-app-blue: var(--app-blue);
63
+ --color-rating: var(--rating);
64
+ --color-chart-1: var(--chart-1);
65
+ --color-chart-2: var(--chart-2);
66
+ --color-chart-3: var(--chart-3);
67
+ --color-chart-4: var(--chart-4);
68
+ --color-chart-5: var(--chart-5);
69
+ --color-sidebar: var(--sidebar);
70
+ --color-sidebar-foreground: var(--sidebar-foreground);
71
+ --color-sidebar-primary: var(--sidebar-primary);
72
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
73
+ --color-sidebar-accent: var(--sidebar-accent);
74
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
75
+ --color-sidebar-border: var(--sidebar-border);
76
+ --color-sidebar-ring: var(--sidebar-ring);
50
77
  }
51
78
 
52
79
  :root {
53
- --background: oklch(1 0 0);
54
- --foreground: oklch(0.145 0 0);
55
- --card: oklch(1 0 0);
56
- --card-foreground: oklch(0.145 0 0);
57
- --popover: oklch(1 0 0);
58
- --popover-foreground: oklch(0.145 0 0);
59
- --primary: oklch(0.205 0 0);
60
- --primary-foreground: oklch(0.985 0 0);
61
- --secondary: oklch(0.97 0 0);
62
- --secondary-foreground: oklch(0.205 0 0);
63
- --muted: oklch(0.97 0 0);
64
- /* Departures from shadcn's neutral tokens for WCAG 2.2 AA (test/theme-contrast.test.ts):
65
- muted text darker (4.5:1 on --muted too); --input, --ring and --sidebar-ring
66
- darker, because input borders, unchecked switch tracks and focus rings must reach 3:1. */
67
- --muted-foreground: oklch(0.5 0 0);
68
- --accent: oklch(0.97 0 0);
69
- --accent-foreground: oklch(0.205 0 0);
70
- /* red-800, not shadcn's red-600: destructive text (alerts at 90% opacity, destructive
71
- buttons and badges on their 10%/20% hover tint) must reach 4.5:1. */
72
- --destructive: oklch(0.444 0.177 26.899);
73
- --border: oklch(0.922 0 0);
74
- --input: oklch(0.64 0 0);
75
- --ring: oklch(0.6 0 0);
76
- --chart-1: oklch(0.87 0 0);
77
- --chart-2: oklch(0.556 0 0);
78
- --chart-3: oklch(0.439 0 0);
79
- --chart-4: oklch(0.371 0 0);
80
- --chart-5: oklch(0.269 0 0);
81
- --radius: 0.625rem;
82
- --sidebar: oklch(0.985 0 0);
83
- --sidebar-foreground: oklch(0.145 0 0);
84
- --sidebar-primary: oklch(0.205 0 0);
85
- --sidebar-primary-foreground: oklch(0.985 0 0);
86
- --sidebar-accent: oklch(0.97 0 0);
87
- --sidebar-accent-foreground: oklch(0.205 0 0);
88
- --sidebar-border: oklch(0.922 0 0);
89
- --sidebar-ring: oklch(0.6 0 0);
80
+ --radius: 0.75rem;
81
+ --background: #f3f1ec;
82
+ --foreground: #121614;
83
+ --card: #f8f7f3;
84
+ --card-foreground: var(--foreground);
85
+ --popover: #ffffff;
86
+ --popover-foreground: var(--foreground);
87
+ --primary: #121614;
88
+ --primary-foreground: #ffffff;
89
+ --secondary: #e9e6e0;
90
+ --secondary-foreground: var(--foreground);
91
+ --muted: #e8e3dd;
92
+ --muted-foreground: #5c5953;
93
+ --accent: #e9e6e0;
94
+ --accent-foreground: var(--foreground);
95
+ --destructive: #b42318;
96
+ --destructive-foreground: #ffffff;
97
+ --border: #e2dfd8;
98
+ --input: #8a857c;
99
+ --ring: #121614;
100
+ --surface-raised: #ffffff;
101
+ --panel: #e8e3dd;
102
+ --night: #152227;
103
+ --on-night: #ffffff;
104
+ --on-night-muted: #a9b5b8;
105
+ --success: #2e8f45;
106
+ --success-soft: #dcefdf;
107
+ --success-soft-foreground: #1c5f2f;
108
+ --warning-soft: #fcefc6;
109
+ --warning-soft-foreground: #7a4b00;
110
+ --info-soft: #e0eafb;
111
+ --info-soft-foreground: #1d4a9e;
112
+ --destructive-soft: #fbe4e1;
113
+ --destructive-soft-foreground: #8f1d13;
114
+ /* Generic identity palette for app tiles and charts. Which app uses which colour is the
115
+ app's choice (AdminConfig.app.tileColor), never the platform's. */
116
+ --app-green: #22553a;
117
+ --app-purple: #7451d2;
118
+ --app-orange: #c05f18;
119
+ --app-rose: #c03a62;
120
+ --app-blue: #2e66d0;
121
+ --rating: #e98a14;
122
+ --chart-1: var(--app-green);
123
+ --chart-2: var(--app-blue);
124
+ --chart-3: var(--app-orange);
125
+ --chart-4: var(--app-purple);
126
+ --chart-5: var(--app-rose);
127
+ --sidebar: #f8f7f3;
128
+ --sidebar-foreground: var(--foreground);
129
+ --sidebar-primary: var(--primary);
130
+ --sidebar-primary-foreground: var(--primary-foreground);
131
+ --sidebar-accent: #e9e6e0;
132
+ --sidebar-accent-foreground: var(--foreground);
133
+ --sidebar-border: var(--border);
134
+ --sidebar-ring: var(--ring);
135
+ /* Shadows: use as shadow-(--shadow-card) / shadow-(--shadow-popover) / shadow-(--shadow-float). */
136
+ --shadow-card: 0 1px 2px rgba(18, 22, 20, 0.05);
137
+ --shadow-popover: 0 8px 24px rgba(18, 22, 20, 0.12);
138
+ --shadow-float: 0 16px 40px rgba(18, 22, 20, 0.14);
90
139
  }
91
140
 
92
141
  .dark {
93
- --background: oklch(0.145 0 0);
94
- --foreground: oklch(0.985 0 0);
95
- --card: oklch(0.205 0 0);
96
- --card-foreground: oklch(0.985 0 0);
97
- --popover: oklch(0.205 0 0);
98
- --popover-foreground: oklch(0.985 0 0);
99
- --primary: oklch(0.922 0 0);
100
- --primary-foreground: oklch(0.205 0 0);
101
- --secondary: oklch(0.269 0 0);
102
- --secondary-foreground: oklch(0.985 0 0);
103
- --muted: oklch(0.269 0 0);
104
- --muted-foreground: oklch(0.708 0 0);
105
- --accent: oklch(0.269 0 0);
106
- --accent-foreground: oklch(0.985 0 0);
107
- /* red-300, not red-400: destructive text on its 20%/30% hover tint reaches 4.5:1. */
108
- --destructive: oklch(0.808 0.114 19.571);
109
- --border: oklch(1 0 0 / 10%);
110
- /* Opaque, not shadcn's 15% white: input borders and switch tracks need 3:1 (see :root). */
111
- --input: oklch(0.556 0 0);
112
- --ring: oklch(0.556 0 0);
113
- --chart-1: oklch(0.87 0 0);
114
- --chart-2: oklch(0.556 0 0);
115
- --chart-3: oklch(0.439 0 0);
116
- --chart-4: oklch(0.371 0 0);
117
- --chart-5: oklch(0.269 0 0);
118
- --sidebar: oklch(0.205 0 0);
119
- --sidebar-foreground: oklch(0.985 0 0);
120
- --sidebar-primary: oklch(0.488 0.243 264.376);
121
- --sidebar-primary-foreground: oklch(0.985 0 0);
122
- --sidebar-accent: oklch(0.269 0 0);
123
- --sidebar-accent-foreground: oklch(0.985 0 0);
124
- --sidebar-border: oklch(1 0 0 / 10%);
125
- --sidebar-ring: oklch(0.556 0 0);
142
+ --background: #101a1e;
143
+ --foreground: #f3f1ec;
144
+ --card: #152227;
145
+ --card-foreground: var(--foreground);
146
+ --popover: #1a2a30;
147
+ --popover-foreground: var(--foreground);
148
+ --primary: #f3f1ec;
149
+ --primary-foreground: #121614;
150
+ --secondary: #22343a;
151
+ --secondary-foreground: var(--foreground);
152
+ --muted: #1f3037;
153
+ --muted-foreground: #a9b5b8;
154
+ --accent: #22343a;
155
+ --accent-foreground: var(--foreground);
156
+ --destructive: #f0716a;
157
+ --destructive-foreground: #1b0a09;
158
+ --border: #2a3c42;
159
+ --input: #687e84;
160
+ --ring: #f3f1ec;
161
+ --surface-raised: #1a2a30;
162
+ --panel: #1f3037;
163
+ --night: #0b1316;
164
+ --on-night: #f3f1ec;
165
+ --on-night-muted: #a9b5b8;
166
+ --success: #4cbf6b;
167
+ --success-soft: #183a26;
168
+ --success-soft-foreground: #8fd6a6;
169
+ --warning-soft: #3d2e0c;
170
+ --warning-soft-foreground: #f3c66b;
171
+ --info-soft: #172c4f;
172
+ --info-soft-foreground: #9dbcf5;
173
+ --destructive-soft: #3f1714;
174
+ --destructive-soft-foreground: #f7a39c;
175
+ --chart-1: #3f9b68;
176
+ --chart-2: #6b97ea;
177
+ --chart-3: #e08a45;
178
+ --chart-4: #9b80e6;
179
+ --chart-5: #e0698d;
180
+ --sidebar: #152227;
181
+ --sidebar-foreground: var(--foreground);
182
+ --sidebar-primary: var(--primary);
183
+ --sidebar-primary-foreground: var(--primary-foreground);
184
+ --sidebar-accent: #22343a;
185
+ --sidebar-accent-foreground: var(--foreground);
186
+ --sidebar-border: var(--border);
187
+ --sidebar-ring: var(--ring);
188
+ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
189
+ --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
190
+ --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
126
191
  }
127
192
 
128
193
  @layer base {
129
194
  * {
130
- @apply border-border outline-ring/50;
195
+ @apply border-border outline-ring;
131
196
  }
132
197
  body {
133
- @apply bg-background text-foreground;
198
+ @apply bg-background text-foreground font-sans antialiased;
134
199
  }
135
200
  }
136
201
 
@@ -146,4 +211,4 @@
146
211
  transition-duration: 0.01ms !important;
147
212
  scroll-behavior: auto !important;
148
213
  }
149
- }
214
+ }