@skyhook-io/radar-app 0.1.1 → 0.1.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.
- package/package.json +1 -1
- package/src/index.css +44 -2
package/package.json
CHANGED
package/src/index.css
CHANGED
|
@@ -1,13 +1,55 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
|
-
@config "../tailwind.config.js";
|
|
3
2
|
@variant dark (&:where(.dark, .dark *));
|
|
4
3
|
@import "@skyhook-io/k8s-ui/theme/variables.css";
|
|
5
4
|
@import "@skyhook-io/k8s-ui/theme/tailwind-theme.css";
|
|
6
5
|
@import "@skyhook-io/k8s-ui/theme/components.css";
|
|
7
|
-
@import "@skyhook-io/k8s-ui/
|
|
6
|
+
@import "@skyhook-io/k8s-ui/topology.css";
|
|
8
7
|
@import "@fontsource-variable/dm-sans";
|
|
9
8
|
@import "@fontsource/dm-mono";
|
|
10
9
|
|
|
10
|
+
/*
|
|
11
|
+
* Tailwind v4 theme tokens. Migrated from the legacy v3 tailwind.config.js
|
|
12
|
+
* to CSS-first @theme so library consumers (e.g. radar-hub-web) don't need
|
|
13
|
+
* to pick up radar's Node config or its `@tailwindcss/typography` plugin
|
|
14
|
+
* when they consume this package from npm.
|
|
15
|
+
*/
|
|
16
|
+
@theme {
|
|
17
|
+
/* Fonts — DM Sans for UI, DM Mono for code/metric panes. */
|
|
18
|
+
--font-sans: "DM Sans Variable", "DM Sans", system-ui, sans-serif;
|
|
19
|
+
--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
20
|
+
|
|
21
|
+
/* Breakpoints — desktop-first K8s UI; tighter than Tailwind defaults. */
|
|
22
|
+
--breakpoint-sm: 900px;
|
|
23
|
+
--breakpoint-md: 1100px;
|
|
24
|
+
--breakpoint-lg: 1280px;
|
|
25
|
+
--breakpoint-xl: 1536px;
|
|
26
|
+
|
|
27
|
+
/* Shadows (mapped to the --shadow-* CSS vars from k8s-ui/theme). */
|
|
28
|
+
--shadow-theme-sm: var(--shadow-sm);
|
|
29
|
+
--shadow-theme-md: var(--shadow-md);
|
|
30
|
+
--shadow-theme-lg: var(--shadow-lg);
|
|
31
|
+
--shadow-glow-brand-sm: var(--glow-brand-sm);
|
|
32
|
+
--shadow-glow-brand-md: var(--glow-brand-md);
|
|
33
|
+
--shadow-drawer: var(--shadow-drawer);
|
|
34
|
+
|
|
35
|
+
/* Ring (focus outline) color — follow the accent CSS var. */
|
|
36
|
+
--color-accent: var(--accent);
|
|
37
|
+
|
|
38
|
+
/* Border radius — rounder than Tailwind defaults to match the brand. */
|
|
39
|
+
--radius: 0.375rem; /* default (was 0.25rem) */
|
|
40
|
+
--radius-md: 0.5rem; /* was 0.375rem */
|
|
41
|
+
--radius-lg: 0.625rem; /* was 0.5rem */
|
|
42
|
+
--radius-xl: 0.875rem; /* was 0.75rem */
|
|
43
|
+
|
|
44
|
+
/* Custom transient toast animation used in a few spots. */
|
|
45
|
+
--animate-fade-in-out: fadeInOut 2s ease-in-out forwards;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@keyframes fadeInOut {
|
|
49
|
+
0%, 100% { opacity: 0; transform: translateY(-8px); }
|
|
50
|
+
15%, 85% { opacity: 1; transform: translateY(0); }
|
|
51
|
+
}
|
|
52
|
+
|
|
11
53
|
/* Global: pointer cursor for all interactive elements */
|
|
12
54
|
button, [role="button"], a, label, select, summary, [tabindex]:not([tabindex="-1"]) {
|
|
13
55
|
cursor: pointer;
|