@fikar-ai/design 1.5.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 (54) hide show
  1. package/README.md +1379 -0
  2. package/brand/apps/account.svg +4 -0
  3. package/brand/apps/chat.svg +3 -0
  4. package/brand/apps/cost-calculator.svg +12 -0
  5. package/brand/apps/crs.svg +9 -0
  6. package/brand/apps/dictionary.svg +5 -0
  7. package/brand/apps/platform.svg +11 -0
  8. package/brand/apps/super-admin.svg +9 -0
  9. package/brand/favicon/apple-touch-icon.png +0 -0
  10. package/brand/favicon/favicon-16x16.png +0 -0
  11. package/brand/favicon/favicon-32x32.png +0 -0
  12. package/brand/favicon/favicon-48x48.png +0 -0
  13. package/brand/favicon/favicon.ico +0 -0
  14. package/brand/favicon/favicon.svg +11 -0
  15. package/brand/favicon/icon-192.png +0 -0
  16. package/brand/favicon/icon-512.png +0 -0
  17. package/brand/favicon/manifest.webmanifest +8 -0
  18. package/brand/fikar-loader.svg +10 -0
  19. package/brand/fikar-logo-mono.svg +6 -0
  20. package/brand/fikar-logo-reversed.svg +9 -0
  21. package/brand/fikar-logo.svg +15 -0
  22. package/components.css +577 -0
  23. package/fonts/Charter-license.txt +3 -0
  24. package/fonts/charter_bold.woff2 +0 -0
  25. package/fonts/charter_bold_italic.woff2 +0 -0
  26. package/fonts/charter_italic.woff2 +0 -0
  27. package/fonts/charter_regular.woff2 +0 -0
  28. package/fonts.css +37 -0
  29. package/logo.css +24 -0
  30. package/package.json +68 -0
  31. package/preset.d.ts +5 -0
  32. package/preset.js +67 -0
  33. package/recipes/brand-loader.html +4 -0
  34. package/recipes/detail-panel.html +35 -0
  35. package/recipes/empty-state.html +6 -0
  36. package/recipes/entity-badge.html +6 -0
  37. package/recipes/filter-chip.html +5 -0
  38. package/recipes/launcher.html +24 -0
  39. package/recipes/list-row.html +21 -0
  40. package/recipes/search-results.html +43 -0
  41. package/recipes/search.html +18 -0
  42. package/recipes/segmented.html +7 -0
  43. package/recipes/shell-no-sidebar.html +60 -0
  44. package/recipes/shell.html +89 -0
  45. package/recipes/status-badge.html +10 -0
  46. package/recipes/theme-menu.html +21 -0
  47. package/recipes/time.html +9 -0
  48. package/recipes/user-menu.html +21 -0
  49. package/shell.js +324 -0
  50. package/templates/jinja/launcher.html +45 -0
  51. package/templates/jinja/shell.html +97 -0
  52. package/templates/jinja/theme-menu.html +27 -0
  53. package/templates/jinja/user-menu.html +55 -0
  54. package/tokens.css +122 -0
package/tokens.css ADDED
@@ -0,0 +1,122 @@
1
+ /* @fikar-ai/design — Ink design tokens. THE single source of truth.
2
+ HSL triplets (no hsl() wrapper) so consumers compose them: hsl(var(--primary) / .5).
3
+ Two parts: (1) raw --fk-* ramp (theme-independent), (2) shadcn semantic roles (:root + .dark).
4
+ docs-site (Docusaurus) imports this and aliases its own --ifm-* vars to the --fk-* ramp;
5
+ it does NOT use the .dark block (Docusaurus toggles [data-theme='dark']).
6
+ Mirrors docs/design-language.md. Direction = Ink. */
7
+
8
+ :root {
9
+ /* ── raw ramp: cool-gray neutrals (hue ~220) ── */
10
+ --fk-n0: 0 0% 100%;
11
+ --fk-n50: 220 20% 98%;
12
+ --fk-n100: 220 16% 96%;
13
+ --fk-n200: 220 14% 91%;
14
+ --fk-n300: 220 12% 84%;
15
+ --fk-n400: 220 9% 64%;
16
+ --fk-n500: 220 8% 46%;
17
+ --fk-n600: 220 11% 34%;
18
+ --fk-n700: 221 14% 24%;
19
+ --fk-n800: 222 18% 15%;
20
+ --fk-n900: 222 22% 10%;
21
+ --fk-n950: 222 26% 6%;
22
+ /* brand blue — full 10-step spec ramp (design-language.md §3.2) */
23
+ --fk-blue50: 214 100% 97%;
24
+ --fk-blue100: 214 96% 93%;
25
+ --fk-blue200: 213 95% 86%;
26
+ --fk-blue300: 212 93% 76%;
27
+ --fk-blue400: 213 90% 64%;
28
+ --fk-blue500: 214 88% 54%;
29
+ --fk-blue600: 215 88% 48%;
30
+ --fk-blue700: 216 84% 40%;
31
+ --fk-blue800: 217 78% 33%;
32
+ --fk-blue900: 217 70% 27%;
33
+ /* semantic */
34
+ --fk-success: 152 55% 38%;
35
+ --fk-warning: 33 92% 46%;
36
+ --fk-error: 2 72% 48%;
37
+ /* data viz */
38
+ --fk-chart1: 214 88% 54%;
39
+ --fk-chart2: 258 68% 62%;
40
+ --fk-chart3: 178 58% 40%;
41
+ --fk-chart4: 33 90% 52%;
42
+
43
+ /* ── shadcn semantic roles (light) — full superset the apps reference ── */
44
+ --background: var(--fk-n50);
45
+ --foreground: var(--fk-n800);
46
+ --card: var(--fk-n0);
47
+ --card-foreground: var(--fk-n800);
48
+ --popover: var(--fk-n0);
49
+ --popover-foreground: var(--fk-n800);
50
+ --primary: var(--fk-blue600);
51
+ --primary-foreground: var(--fk-n0);
52
+ --secondary: var(--fk-n100);
53
+ --secondary-foreground: var(--fk-n800);
54
+ --muted: var(--fk-n100);
55
+ --muted-foreground: var(--fk-n500);
56
+ --accent: var(--fk-blue50);
57
+ --accent-foreground: var(--fk-blue700);
58
+ --destructive: var(--fk-error);
59
+ --destructive-foreground: var(--fk-n0);
60
+ --success: var(--fk-success);
61
+ --success-foreground: var(--fk-n0);
62
+ --warning: var(--fk-warning);
63
+ --warning-foreground: var(--fk-n0);
64
+ --info: var(--fk-blue600);
65
+ --info-foreground: var(--fk-n0);
66
+ /* entity types (KAN-340): the hues of chat's Sources graph, one role each, darkened here so the 11px badge text passes AA on its own tint */
67
+ --entity-person: 260 51% 46%;
68
+ --entity-organization: 176 72% 22%;
69
+ --entity-event: 222 70% 44%;
70
+ --entity-geo: 38 80% 26%;
71
+ --border: var(--fk-n200);
72
+ --input: var(--fk-n300);
73
+ --ring: var(--fk-blue500);
74
+
75
+ /* shape — --radius is shadcn's base (lg). md = -2px = 6px controls, sm = -4px. */
76
+ --radius: 0.5rem;
77
+ --r-sm: 6px;
78
+ --r-md: 8px;
79
+ --r-lg: 12px;
80
+
81
+ /* depth + motion */
82
+ --shadow-sm: 0 2px 8px -2px hsl(var(--fk-n950) / 0.1);
83
+ --shadow-md: 0 8px 24px -6px hsl(var(--fk-n950) / 0.14);
84
+ --fast: 150ms;
85
+ --base: 200ms;
86
+ --ease: cubic-bezier(0.2, 0, 0, 1);
87
+ }
88
+
89
+ /* ── dark (Tailwind `class` strategy — the 5 apps). docs-site does NOT use this. ── */
90
+ .dark {
91
+ --background: var(--fk-n900);
92
+ --foreground: var(--fk-n50);
93
+ --card: var(--fk-n800);
94
+ --card-foreground: var(--fk-n50);
95
+ --popover: var(--fk-n800);
96
+ --popover-foreground: var(--fk-n50);
97
+ --primary: var(--fk-blue500);
98
+ --primary-foreground: var(--fk-n950);
99
+ --secondary: 222 16% 18%;
100
+ --secondary-foreground: var(--fk-n50);
101
+ --muted: 222 16% 18%;
102
+ --muted-foreground: var(--fk-n400);
103
+ --accent: 216 60% 18%;
104
+ --accent-foreground: 214 96% 93%;
105
+ --destructive: 2 78% 62%;
106
+ --destructive-foreground: var(--fk-n950);
107
+ --success: 152 50% 52%;
108
+ --success-foreground: var(--fk-n950);
109
+ --warning: 36 90% 58%;
110
+ --warning-foreground: var(--fk-n950);
111
+ --info: var(--fk-blue500);
112
+ --info-foreground: var(--fk-n950);
113
+ --entity-person: 260 51% 78%;
114
+ --entity-organization: 176 49% 55%;
115
+ --entity-event: 222 81% 76%;
116
+ --entity-geo: 38 67% 58%;
117
+ --border: 222 14% 22%;
118
+ --input: 222 14% 26%;
119
+ --ring: var(--fk-blue500);
120
+ --shadow-sm: 0 2px 10px -2px hsl(0 0% 0% / 0.45);
121
+ --shadow-md: 0 8px 28px -4px hsl(0 0% 0% / 0.5);
122
+ }