@trinityui/design-system 2.1.3 → 2.2.1

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 (220) hide show
  1. package/CHANGELOG.md +628 -1
  2. package/MIGRATION.md +118 -0
  3. package/README.md +546 -136
  4. package/dist/Legend.js +873 -868
  5. package/dist/app-shell.js +5705 -5757
  6. package/dist/charts.js +2399 -2407
  7. package/dist/components/AI/AIActions.d.ts +3 -3
  8. package/dist/components/AI/AIActions.d.ts.map +1 -1
  9. package/dist/components/AI/AIAvatar.d.ts +1 -1
  10. package/dist/components/AI/AIAvatar.d.ts.map +1 -1
  11. package/dist/components/AI/AIChainOfThought.d.ts +63 -188
  12. package/dist/components/AI/AIChainOfThought.d.ts.map +1 -1
  13. package/dist/components/AI/AIChainOfThought.types.d.ts +195 -0
  14. package/dist/components/AI/AIChainOfThought.types.d.ts.map +1 -0
  15. package/dist/components/AI/AIChainOfThought.utils.d.ts +20 -0
  16. package/dist/components/AI/AIChainOfThought.utils.d.ts.map +1 -0
  17. package/dist/components/AI/AIChat.d.ts +5 -5
  18. package/dist/components/AI/AIChat.d.ts.map +1 -1
  19. package/dist/components/AI/AIContainer.d.ts +3 -3
  20. package/dist/components/AI/AIContainer.d.ts.map +1 -1
  21. package/dist/components/AI/AIExplainability.d.ts +1 -1
  22. package/dist/components/AI/AIExplainability.d.ts.map +1 -1
  23. package/dist/components/AI/AILabel.d.ts +1 -1
  24. package/dist/components/AI/AILabel.d.ts.map +1 -1
  25. package/dist/components/AI/AIMessage.d.ts +15 -2
  26. package/dist/components/AI/AIMessage.d.ts.map +1 -1
  27. package/dist/components/AI/AIRelatedQuestions.d.ts +1 -1
  28. package/dist/components/AI/AIRelatedQuestions.d.ts.map +1 -1
  29. package/dist/components/AI/AIResponseRenderer.d.ts +33 -26
  30. package/dist/components/AI/AIResponseRenderer.d.ts.map +1 -1
  31. package/dist/components/AI/AISources.d.ts +2 -2
  32. package/dist/components/AI/AISources.d.ts.map +1 -1
  33. package/dist/components/AI/AISourcesPanel.d.ts +2 -2
  34. package/dist/components/AI/AISourcesPanel.d.ts.map +1 -1
  35. package/dist/components/AI/AITextBlock.d.ts +59 -19
  36. package/dist/components/AI/AITextBlock.d.ts.map +1 -1
  37. package/dist/components/AI/AIVisuals.d.ts +4 -4
  38. package/dist/components/AI/AIVisuals.d.ts.map +1 -1
  39. package/dist/components/AI/AIVoiceInput.d.ts +2 -2
  40. package/dist/components/AI/AIVoiceInput.d.ts.map +1 -1
  41. package/dist/components/AI/ChatHeader.d.ts +1 -1
  42. package/dist/components/AI/ChatHeader.d.ts.map +1 -1
  43. package/dist/components/AI/ChatHistoryList.d.ts +1 -1
  44. package/dist/components/AI/ChatHistoryList.d.ts.map +1 -1
  45. package/dist/components/AI/ChatThread.d.ts +21 -1
  46. package/dist/components/AI/ChatThread.d.ts.map +1 -1
  47. package/dist/components/AI/InsightEngine.d.ts +29 -1
  48. package/dist/components/AI/InsightEngine.d.ts.map +1 -1
  49. package/dist/components/AI/InsightEngineInput.d.ts +1 -1
  50. package/dist/components/AI/InsightEngineInput.d.ts.map +1 -1
  51. package/dist/components/AI/QueryInput.d.ts +1 -1
  52. package/dist/components/AI/QueryInput.d.ts.map +1 -1
  53. package/dist/components/AI/UserAvatar.d.ts +1 -1
  54. package/dist/components/AI/UserAvatar.d.ts.map +1 -1
  55. package/dist/components/AI/UserMessage.d.ts +1 -1
  56. package/dist/components/AI/UserMessage.d.ts.map +1 -1
  57. package/dist/components/AI/tokens.d.ts +120 -10
  58. package/dist/components/AI/tokens.d.ts.map +1 -1
  59. package/dist/components/AppLayout/AIFab.d.ts +1 -1
  60. package/dist/components/AppLayout/AIFab.d.ts.map +1 -1
  61. package/dist/components/AppLayout/AIFabLayout.deprecated.d.ts +3 -2
  62. package/dist/components/AppLayout/AIFabLayout.deprecated.d.ts.map +1 -1
  63. package/dist/components/AppLayout/AppLayout.d.ts +45 -1
  64. package/dist/components/AppLayout/AppLayout.d.ts.map +1 -1
  65. package/dist/components/AppLayout/InsightEnginePanel.d.ts +1 -1
  66. package/dist/components/AppLayout/InsightEnginePanel.d.ts.map +1 -1
  67. package/dist/components/AppLayout/ResizablePanel.d.ts +1 -1
  68. package/dist/components/AppLayout/ResizablePanel.d.ts.map +1 -1
  69. package/dist/components/AppLayout/ThreadHistorySidebar.d.ts +1 -1
  70. package/dist/components/AppLayout/ThreadHistorySidebar.d.ts.map +1 -1
  71. package/dist/components/Autocomplete/Autocomplete.d.ts +10 -1
  72. package/dist/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  73. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +57 -0
  74. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
  75. package/dist/components/Breadcrumbs/index.d.ts +3 -0
  76. package/dist/components/Breadcrumbs/index.d.ts.map +1 -0
  77. package/dist/components/Carousel/Carousel.d.ts +26 -1
  78. package/dist/components/Carousel/Carousel.d.ts.map +1 -1
  79. package/dist/components/Carousel/index.d.ts +1 -1
  80. package/dist/components/Carousel/index.d.ts.map +1 -1
  81. package/dist/components/Charts/AreaChart.d.ts +1 -1
  82. package/dist/components/Charts/AreaChart.d.ts.map +1 -1
  83. package/dist/components/Charts/BarChart.d.ts +1 -1
  84. package/dist/components/Charts/BarChart.d.ts.map +1 -1
  85. package/dist/components/Charts/ChartWrapper.d.ts +1 -1
  86. package/dist/components/Charts/ChartWrapper.d.ts.map +1 -1
  87. package/dist/components/Charts/ComposedChart.d.ts +1 -1
  88. package/dist/components/Charts/ComposedChart.d.ts.map +1 -1
  89. package/dist/components/Charts/CustomLegend.d.ts +6 -8
  90. package/dist/components/Charts/CustomLegend.d.ts.map +1 -1
  91. package/dist/components/Charts/CustomTooltip.d.ts +4 -3
  92. package/dist/components/Charts/CustomTooltip.d.ts.map +1 -1
  93. package/dist/components/Charts/LineChart.d.ts +1 -1
  94. package/dist/components/Charts/LineChart.d.ts.map +1 -1
  95. package/dist/components/Charts/PieChart.d.ts +1 -1
  96. package/dist/components/Charts/PieChart.d.ts.map +1 -1
  97. package/dist/components/Charts/RadialChart.d.ts +2 -2
  98. package/dist/components/Charts/RadialChart.d.ts.map +1 -1
  99. package/dist/components/Charts/ScatterChart.d.ts +1 -1
  100. package/dist/components/Charts/ScatterChart.d.ts.map +1 -1
  101. package/dist/components/Charts/Sparkline.d.ts +1 -1
  102. package/dist/components/Charts/Sparkline.d.ts.map +1 -1
  103. package/dist/components/Charts/highchartsUtils.d.ts.map +1 -1
  104. package/dist/components/ChipsInput/ChipsInput.d.ts +1 -1
  105. package/dist/components/ChipsInput/ChipsInput.d.ts.map +1 -1
  106. package/dist/components/ClearableTextField/ClearableTextField.d.ts +7 -1
  107. package/dist/components/ClearableTextField/ClearableTextField.d.ts.map +1 -1
  108. package/dist/components/Combobox/Combobox.d.ts +1 -1
  109. package/dist/components/Combobox/Combobox.d.ts.map +1 -1
  110. package/dist/components/CommandPalette/CommandPalette.d.ts +10 -1
  111. package/dist/components/CommandPalette/CommandPalette.d.ts.map +1 -1
  112. package/dist/components/Cron/Cron.d.ts +1 -1
  113. package/dist/components/Cron/Cron.d.ts.map +1 -1
  114. package/dist/components/DataCard/DataCard.d.ts +1 -1
  115. package/dist/components/DataCard/DataCard.d.ts.map +1 -1
  116. package/dist/components/DiffViewer/DiffViewer.d.ts +1 -1
  117. package/dist/components/DiffViewer/DiffViewer.d.ts.map +1 -1
  118. package/dist/components/DockLayout/DockLayout.d.ts +1 -1
  119. package/dist/components/DockLayout/DockLayout.d.ts.map +1 -1
  120. package/dist/components/DocumentCard/DocumentCard.d.ts +77 -0
  121. package/dist/components/DocumentCard/DocumentCard.d.ts.map +1 -0
  122. package/dist/components/DocumentCard/index.d.ts +3 -0
  123. package/dist/components/DocumentCard/index.d.ts.map +1 -0
  124. package/dist/components/FileUpload/FileUpload.d.ts +1 -1
  125. package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
  126. package/dist/components/FilterBar/FilterBar.d.ts +42 -1
  127. package/dist/components/FilterBar/FilterBar.d.ts.map +1 -1
  128. package/dist/components/Footer.d.ts +17 -2
  129. package/dist/components/Footer.d.ts.map +1 -1
  130. package/dist/components/GoToTop/GoToTop.d.ts +1 -1
  131. package/dist/components/GoToTop/GoToTop.d.ts.map +1 -1
  132. package/dist/components/HtmlToMui/HtmlToMui.d.ts +39 -0
  133. package/dist/components/HtmlToMui/HtmlToMui.d.ts.map +1 -0
  134. package/dist/components/HtmlToMui/StreamingHtmlToMui.d.ts +35 -0
  135. package/dist/components/HtmlToMui/StreamingHtmlToMui.d.ts.map +1 -0
  136. package/dist/components/HtmlToMui/index.d.ts +4 -0
  137. package/dist/components/HtmlToMui/index.d.ts.map +1 -0
  138. package/dist/components/IllustratedMessage.d.ts +2 -2
  139. package/dist/components/IllustratedMessage.d.ts.map +1 -1
  140. package/dist/components/LandingPage/LandingPage.d.ts +1 -1
  141. package/dist/components/LandingPage/LandingPage.d.ts.map +1 -1
  142. package/dist/components/MentionsInput/MentionsInput.d.ts +1 -1
  143. package/dist/components/MentionsInput/MentionsInput.d.ts.map +1 -1
  144. package/dist/components/Modal/Modal.d.ts +1 -1
  145. package/dist/components/Modal/Modal.d.ts.map +1 -1
  146. package/dist/components/NestedMenu/NestedMenu.d.ts +6 -0
  147. package/dist/components/NestedMenu/NestedMenu.d.ts.map +1 -1
  148. package/dist/components/OverflowTooltip/OverflowTooltip.d.ts +7 -3
  149. package/dist/components/OverflowTooltip/OverflowTooltip.d.ts.map +1 -1
  150. package/dist/components/PageHeader/PageHeader.d.ts +23 -5
  151. package/dist/components/PageHeader/PageHeader.d.ts.map +1 -1
  152. package/dist/components/Popper/Popper.d.ts +1 -1
  153. package/dist/components/Popper/Popper.d.ts.map +1 -1
  154. package/dist/components/PredictiveTextInput/PredictiveTextInput.d.ts +1 -1
  155. package/dist/components/PredictiveTextInput/PredictiveTextInput.d.ts.map +1 -1
  156. package/dist/components/SandboxedIframeRenderer/SandboxedIframeRenderer.d.ts +62 -0
  157. package/dist/components/SandboxedIframeRenderer/SandboxedIframeRenderer.d.ts.map +1 -0
  158. package/dist/components/SandboxedIframeRenderer/index.d.ts +3 -0
  159. package/dist/components/SandboxedIframeRenderer/index.d.ts.map +1 -0
  160. package/dist/components/SearchInput/SearchInput.d.ts +1 -1
  161. package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
  162. package/dist/components/SimpleTable/SimpleTable.d.ts +7 -2
  163. package/dist/components/SimpleTable/SimpleTable.d.ts.map +1 -1
  164. package/dist/components/SplitPane/SplitPane.d.ts +51 -7
  165. package/dist/components/SplitPane/SplitPane.d.ts.map +1 -1
  166. package/dist/components/SplitPane/index.d.ts +1 -1
  167. package/dist/components/SplitPane/index.d.ts.map +1 -1
  168. package/dist/components/StatusIndicator/StatusIndicator.d.ts +1 -1
  169. package/dist/components/StatusIndicator/StatusIndicator.d.ts.map +1 -1
  170. package/dist/components/Timeline/Timeline.d.ts +1 -1
  171. package/dist/components/Timeline/Timeline.d.ts.map +1 -1
  172. package/dist/components/Toast/Toast.d.ts +1 -1
  173. package/dist/components/Toast/Toast.d.ts.map +1 -1
  174. package/dist/components/TopNavHeader.d.ts +14 -2
  175. package/dist/components/TopNavHeader.d.ts.map +1 -1
  176. package/dist/components/TopNavWithSidebar.d.ts +34 -4
  177. package/dist/components/TopNavWithSidebar.d.ts.map +1 -1
  178. package/dist/components/Tour/Tour.d.ts +1 -1
  179. package/dist/components/Tour/Tour.d.ts.map +1 -1
  180. package/dist/components/TransferList/TransferList.d.ts +1 -1
  181. package/dist/components/TransferList/TransferList.d.ts.map +1 -1
  182. package/dist/components/TreeView/TreeView.d.ts +1 -1
  183. package/dist/components/TreeView/TreeView.d.ts.map +1 -1
  184. package/dist/components/index.d.ts +2 -2
  185. package/dist/components/index.d.ts.map +1 -1
  186. package/dist/components/navigation/components.d.ts +5 -5
  187. package/dist/components/navigation/components.d.ts.map +1 -1
  188. package/dist/components/shared/NavBar.styles.d.ts +65 -0
  189. package/dist/components/shared/NavBar.styles.d.ts.map +1 -0
  190. package/dist/components/shared/useResizable.d.ts +82 -0
  191. package/dist/components/shared/useResizable.d.ts.map +1 -0
  192. package/dist/components/shared/warnDeprecated.d.ts +30 -0
  193. package/dist/components/shared/warnDeprecated.d.ts.map +1 -0
  194. package/dist/components/templates/Dashboard/DashboardTemplate.d.ts +1 -1
  195. package/dist/components/templates/Dashboard/DashboardTemplate.d.ts.map +1 -1
  196. package/dist/components/templates/ListDetail/ListDetailTemplate.d.ts +1 -1
  197. package/dist/components/templates/ListDetail/ListDetailTemplate.d.ts.map +1 -1
  198. package/dist/components/templates/Settings/SettingsTemplate.d.ts +1 -1
  199. package/dist/components/templates/Settings/SettingsTemplate.d.ts.map +1 -1
  200. package/dist/data-table2.js +18194 -15721
  201. package/dist/data.js +116 -114
  202. package/dist/essentials.js +91 -89
  203. package/dist/form.d.ts.map +1 -1
  204. package/dist/forms.js +358 -45092
  205. package/dist/index.d.ts +44 -11
  206. package/dist/index.d.ts.map +1 -1
  207. package/dist/index.js +30203 -29843
  208. package/dist/theme.d.ts +4 -1
  209. package/dist/theme.d.ts.map +1 -1
  210. package/dist/theme.js +188 -161
  211. package/dist/tokens.d.ts +16 -0
  212. package/dist/tokens.d.ts.map +1 -1
  213. package/dist/tokens.js +1 -1
  214. package/dist/trinity.css +862 -1014
  215. package/package.json +69 -27
  216. package/dist/assets/design-system.css +0 -1
  217. package/dist/components/RichTextEditor/RichTextEditor.d.ts +0 -39
  218. package/dist/components/RichTextEditor/RichTextEditor.d.ts.map +0 -1
  219. package/dist/components/RichTextEditor/index.d.ts +0 -3
  220. package/dist/components/RichTextEditor/index.d.ts.map +0 -1
package/dist/trinity.css CHANGED
@@ -1,35 +1,25 @@
1
1
  /**
2
- * Trinity Design System - Comprehensive CSS Theme
3
- *
4
- * Complete CSS custom properties including:
5
- * - Brand Colors (with full shade scales)
6
- * - Semantic Colors (text, background, border, interactive, status)
7
- * - Semantic Effects (overlays, onDark, shadows, focus, states)
8
- * - Full Typography (display, heading, body, label, micro, data)
9
- * - Spacing (base scale, inline, stack, density)
10
- * - Border Radius (base scale + semantic assignments)
11
- * - Icon Sizes
12
- * - Component Tokens (button, input, card, avatar, badge, chip, tooltip, modal, switch, navigation)
13
- * - Shadows and Elevation
14
- * - Motion (duration, easing)
15
- * - Z-Index Scale
16
- * - Dark Mode Support
17
- *
18
- * Usage:
19
- * <link rel="stylesheet" href="path/to/trinity.css">
20
- * OR
21
- * @import "@trinityui/design-system/css";
22
- *
23
- * Dark mode: Add data-theme="dark" to <html> or <body>
2
+ * Trinity Design System — Generated CSS Variables
3
+ *
4
+ * AUTO-GENERATED FILE — do not edit.
5
+ * Source: src/tokens.ts + scripts/generate-css-from-tokens.ts
6
+ * Generated from tokens.ts on 2026-04-27T18:32:15.403Z
7
+ *
8
+ * This file is the canonical CSS surface shipped in
9
+ * `@trinityui/design-system-css`. It supersedes the hand-maintained
10
+ * `trinity.css` which is retired.
11
+ *
12
+ * Regenerate:
13
+ * npm run build:css:sync
14
+ *
15
+ * Dark mode:
16
+ * <html data-theme="dark"> → overrides active
17
+ * <html data-theme="light"> → light mode locked
18
+ * (none) → follows @media (prefers-color-scheme: dark)
24
19
  */
25
20
 
26
21
  :root {
27
- /* ============================================
28
- BRAND COLOR SCALES
29
- Full shade scales for each brand color
30
- ============================================ */
31
-
32
- /* Navy Scale */
22
+ /* Base color scales */
33
23
  --trinity-navy-50: #E8E8F0;
34
24
  --trinity-navy-100: #C5C6D9;
35
25
  --trinity-navy-200: #9FA1C0;
@@ -40,8 +30,6 @@
40
30
  --trinity-navy-700: #30316E;
41
31
  --trinity-navy-800: #282964;
42
32
  --trinity-navy-900: #050742;
43
-
44
- /* Purple Scale */
45
33
  --trinity-purple-50: #F3EAFA;
46
34
  --trinity-purple-100: #E1CBF2;
47
35
  --trinity-purple-200: #CDA8EA;
@@ -52,8 +40,6 @@
52
40
  --trinity-purple-700: #7841C9;
53
41
  --trinity-purple-800: #6939B5;
54
42
  --trinity-purple-900: #4E2A97;
55
-
56
- /* Indigo Scale */
57
43
  --trinity-indigo-50: #EDE7FD;
58
44
  --trinity-indigo-100: #D2C3FA;
59
45
  --trinity-indigo-200: #B49CF6;
@@ -65,8 +51,6 @@
65
51
  --trinity-indigo-800: #4A24E5;
66
52
  --trinity-indigo-900: #3816A0;
67
53
  --trinity-indigo-electric: #6B12ED;
68
-
69
- /* Coral Scale */
70
54
  --trinity-coral-50: #FFEFEE;
71
55
  --trinity-coral-100: #FFD7D4;
72
56
  --trinity-coral-200: #FFBCB7;
@@ -77,8 +61,6 @@
77
61
  --trinity-coral-700: #FF665C;
78
62
  --trinity-coral-800: #FF6150;
79
63
  --trinity-coral-900: #FF5241;
80
-
81
- /* Azure Scale */
82
64
  --trinity-azure-50: #E5F5FC;
83
65
  --trinity-azure-100: #BEE5F7;
84
66
  --trinity-azure-200: #93D4F2;
@@ -89,8 +71,6 @@
89
71
  --trinity-azure-700: #1D8DD8;
90
72
  --trinity-azure-800: #177ED3;
91
73
  --trinity-azure-900: #0E62CA;
92
-
93
- /* Gray/Neutral Scale */
94
74
  --trinity-gray-0: #FFFFFF;
95
75
  --trinity-gray-50: #FAFAFA;
96
76
  --trinity-gray-100: #F4F4F5;
@@ -103,40 +83,34 @@
103
83
  --trinity-gray-800: #18181B;
104
84
  --trinity-gray-900: #09090B;
105
85
 
106
- /* ============================================
107
- SEMANTIC BRAND COLORS
108
- ============================================ */
86
+ /* Brand color aliases */
109
87
  --trinity-brand-primary: #050742;
88
+ --trinity-brand-primary-light: #7841C9;
89
+ --trinity-brand-primary-dark: #3816A0;
110
90
  --trinity-brand-secondary: #7841C9;
111
- --trinity-brand-tertiary: #3816A0;
91
+ --trinity-brand-secondary-light: #27AAE1;
92
+ --trinity-brand-secondary-dark: #6B12ED;
112
93
  --trinity-brand-accent: #FF6150;
113
-
114
- /* Shorthand Aliases */
94
+ --trinity-brand-tertiary: #3816A0;
115
95
  --trinity-primary: #050742;
116
96
  --trinity-primary-light: #7841C9;
117
97
  --trinity-primary-dark: #3816A0;
118
- --trinity-secondary: #FF6150;
98
+ --trinity-secondary: #7841C9;
119
99
  --trinity-secondary-light: #27AAE1;
120
100
  --trinity-secondary-dark: #6B12ED;
121
101
 
122
- /* ============================================
123
- SEMANTIC TEXT COLORS
124
- ============================================ */
125
- --trinity-text-primary: #18181B;
102
+ /* Semantic colors (flat) */
103
+ --trinity-text-primary: #09090B;
126
104
  --trinity-text-secondary: #6B7280;
127
105
  --trinity-text-tertiary: #9CA3AF;
128
- --trinity-text-disabled: #D4D4D8;
106
+ --trinity-text-disabled: #6B7280;
129
107
  --trinity-text-inverse: #FFFFFF;
130
108
  --trinity-text-brand: #050742;
131
- --trinity-text-link: #27AAE1;
109
+ --trinity-text-link: #0E62CA;
132
110
  --trinity-text-link-hover: #1D8DD8;
133
111
  --trinity-text-error: #DC2626;
134
- --trinity-text-success: #16A34A;
135
- --trinity-text-warning: #D97706;
136
-
137
- /* ============================================
138
- SEMANTIC BACKGROUND COLORS
139
- ============================================ */
112
+ --trinity-text-success: #15803D;
113
+ --trinity-text-warning: #B45309;
140
114
  --trinity-bg-primary: #FFFFFF;
141
115
  --trinity-bg-secondary: #FAFAFA;
142
116
  --trinity-bg-tertiary: #F4F4F5;
@@ -145,8 +119,6 @@
145
119
  --trinity-bg-brand-subtle: #E8E8F0;
146
120
  --trinity-bg-accent: #FF6150;
147
121
  --trinity-bg-accent-subtle: #FFEFEE;
148
-
149
- /* Surface Colors (elevated/sunken elements) */
150
122
  --trinity-surface-elevated: #FFFFFF;
151
123
  --trinity-surface-sunken: #F4F4F5;
152
124
  --trinity-surface-overlay: rgba(0, 0, 0, 0.5);
@@ -154,70 +126,119 @@
154
126
  --trinity-surface-error: #FEF2F2;
155
127
  --trinity-surface-warning: #FFFBEB;
156
128
  --trinity-surface-info: #E5F5FC;
157
-
158
- /* ============================================
159
- SEMANTIC BORDER COLORS
160
- ============================================ */
161
- --trinity-border-default: #E5E7EB;
162
- --trinity-border-subtle: #F4F4F5;
163
- --trinity-border-strong: #9CA3AF;
129
+ --trinity-border-default: #D4D4D8;
130
+ --trinity-border-subtle: #E5E7EB;
131
+ --trinity-border-strong: #6B7280;
164
132
  --trinity-border-focus: #7841C9;
165
133
  --trinity-border-error: #DC2626;
166
134
  --trinity-border-success: #16A34A;
167
-
168
- /* ============================================
169
- INTERACTIVE COLORS
170
- ============================================ */
171
135
  --trinity-interactive-default: #050742;
172
136
  --trinity-interactive-hover: #FF6150;
173
137
  --trinity-interactive-active: #3816A0;
174
138
  --trinity-interactive-disabled: #D4D4D8;
175
139
  --trinity-interactive-focus: #7841C9;
176
-
177
- /* Focus Ring */
178
- --trinity-focus-ring: #050742;
140
+ --trinity-focus-ring: 0 0 0 3px rgba(120, 65, 201, 0.25);
179
141
  --trinity-focus-ring-offset: #FFFFFF;
180
-
181
- /* Selection */
182
- --trinity-selection-bg: #BEE5F7;
183
- --trinity-selection-text: #18181B;
184
-
185
- /* ============================================
186
- STATUS COLORS
187
- ============================================ */
188
- /* Error */
142
+ --trinity-selection-background: #BEE5F7;
143
+ --trinity-selection-text: #09090B;
189
144
  --trinity-status-error-text: #DC2626;
190
- --trinity-status-error-bg: #FEF2F2;
145
+ --trinity-status-error-background: #FEF2F2;
191
146
  --trinity-status-error-border: #FECACA;
192
-
193
- /* Warning */
194
- --trinity-status-warning-text: #D97706;
195
- --trinity-status-warning-bg: #FFFBEB;
147
+ --trinity-status-warning-text: #B45309;
148
+ --trinity-status-warning-background: #FFFBEB;
196
149
  --trinity-status-warning-border: #FDE68A;
197
-
198
- /* Success */
199
- --trinity-status-success-text: #16A34A;
200
- --trinity-status-success-bg: #F0FDF4;
150
+ --trinity-status-success-text: #15803D;
151
+ --trinity-status-success-background: #F0FDF4;
201
152
  --trinity-status-success-border: #BBF7D0;
202
-
203
- /* Info */
204
- --trinity-status-info-text: #27AAE1;
205
- --trinity-status-info-bg: #E5F5FC;
153
+ --trinity-status-info-text: #0E62CA;
154
+ --trinity-status-info-background: #E5F5FC;
206
155
  --trinity-status-info-border: #93D4F2;
156
+ --trinity-indicator-error-fg: #FFFFFF;
157
+ --trinity-indicator-error-bg: #FF6150;
158
+ --trinity-indicator-critical-fg: #FFFFFF;
159
+ --trinity-indicator-critical-bg: #DA1E28;
160
+ --trinity-indicator-failed-fg: #FFFFFF;
161
+ --trinity-indicator-failed-bg: #FF6150;
162
+ --trinity-indicator-rejected-fg: #FFFFFF;
163
+ --trinity-indicator-rejected-bg: #FF6150;
164
+ --trinity-indicator-warning-fg: #000000;
165
+ --trinity-indicator-warning-bg: #F1C21B;
166
+ --trinity-indicator-warning-outline: #8E6A00;
167
+ --trinity-indicator-caution-fg: #000000;
168
+ --trinity-indicator-caution-bg: #FF832B;
169
+ --trinity-indicator-caution-outline: #BA4E00;
170
+ --trinity-indicator-pending-fg: #000000;
171
+ --trinity-indicator-pending-bg: #F1C21B;
172
+ --trinity-indicator-pending-outline: #8E6A00;
173
+ --trinity-indicator-in-progress-fg: #FFFFFF;
174
+ --trinity-indicator-in-progress-bg: #050742;
175
+ --trinity-indicator-running-fg: #FFFFFF;
176
+ --trinity-indicator-running-bg: #050742;
177
+ --trinity-indicator-success-fg: #FFFFFF;
178
+ --trinity-indicator-success-bg: #24A148;
179
+ --trinity-indicator-complete-fg: #FFFFFF;
180
+ --trinity-indicator-complete-bg: #24A148;
181
+ --trinity-indicator-approved-fg: #FFFFFF;
182
+ --trinity-indicator-approved-bg: #24A148;
183
+ --trinity-indicator-active-fg: #FFFFFF;
184
+ --trinity-indicator-active-bg: #24A148;
185
+ --trinity-indicator-enabled-fg: #FFFFFF;
186
+ --trinity-indicator-enabled-bg: #24A148;
187
+ --trinity-indicator-info-fg: #FFFFFF;
188
+ --trinity-indicator-info-bg: #0043CE;
189
+ --trinity-indicator-new-fg: #FFFFFF;
190
+ --trinity-indicator-new-bg: #0043CE;
191
+ --trinity-indicator-updated-fg: #FFFFFF;
192
+ --trinity-indicator-updated-bg: #0043CE;
193
+ --trinity-indicator-neutral-fg: #FFFFFF;
194
+ --trinity-indicator-neutral-bg: #6F6F6F;
195
+ --trinity-indicator-draft-fg: #FFFFFF;
196
+ --trinity-indicator-draft-bg: #6F6F6F;
197
+ --trinity-indicator-inactive-fg: #FFFFFF;
198
+ --trinity-indicator-inactive-bg: #6F6F6F;
199
+ --trinity-indicator-disabled-fg: #FFFFFF;
200
+ --trinity-indicator-disabled-bg: #6F6F6F;
201
+ --trinity-indicator-cancelled-fg: #FFFFFF;
202
+ --trinity-indicator-cancelled-bg: #6F6F6F;
203
+ --trinity-indicator-unknown-fg: #FFFFFF;
204
+ --trinity-indicator-unknown-bg: #6F6F6F;
205
+ --trinity-indicator-beta-fg: #FFFFFF;
206
+ --trinity-indicator-beta-bg: #8A3FFC;
207
+ --trinity-indicator-experimental-fg: #FFFFFF;
208
+ --trinity-indicator-experimental-bg: #8A3FFC;
209
+ --trinity-avatar-backgrounds: #5F33EB,#8D49CE,#FF7167,#239DDD,#30316E,#6739ED,#9950D3,#FF796F;
210
+ --trinity-avatar-online: #44b700;
211
+ --trinity-avatar-offline: #9CA3AF;
212
+ --trinity-avatar-busy: #FF7167;
213
+ --trinity-avatar-away: #FFA726;
214
+ --trinity-gradients-primary: linear-gradient(135deg, #5F33EB 0%, #8D49CE 100%);
215
+ --trinity-gradients-secondary: linear-gradient(135deg, #FF796F 0%, #FF665C 100%);
216
+ --trinity-gradients-accent: linear-gradient(135deg, #47B6E9 0%, #239DDD 100%);
217
+ --trinity-gradients-avatar-primary: linear-gradient(135deg, #6739ED 0%, #8D49CE 100%);
218
+ --trinity-gradients-avatar-warm: linear-gradient(135deg, #FF8D85 0%, #FF7167 100%);
219
+ --trinity-gradients-avatar-cool: linear-gradient(135deg, #47B6E9 0%, #6739ED 100%);
220
+ --trinity-gradients-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
221
+ --trinity-focus-ring-default: 0 0 0 3px rgba(120, 65, 201, 0.25);
222
+ --trinity-selection-bg: #BEE5F7;
223
+ --trinity-status-error-bg: #FEF2F2;
224
+ --trinity-status-warning-bg: #FFFBEB;
225
+ --trinity-status-success-bg: #F0FDF4;
226
+ --trinity-status-info-bg: #E5F5FC;
227
+ --trinity-gradient-primary: linear-gradient(135deg, #5F33EB 0%, #8D49CE 100%);
228
+ --trinity-gradient-secondary: linear-gradient(135deg, #FF796F 0%, #FF665C 100%);
229
+ --trinity-gradient-accent: linear-gradient(135deg, #47B6E9 0%, #239DDD 100%);
230
+ --trinity-gradient-avatar-primary: linear-gradient(135deg, #6739ED 0%, #8D49CE 100%);
231
+ --trinity-gradient-avatar-warm: linear-gradient(135deg, #FF8D85 0%, #FF7167 100%);
232
+ --trinity-gradient-avatar-cool: linear-gradient(135deg, #47B6E9 0%, #6739ED 100%);
233
+ --trinity-gradient-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
207
234
 
208
- /* ============================================
209
- SEMANTIC EFFECTS - OVERLAYS
210
- ============================================ */
235
+ /* Semantic effects */
211
236
  --trinity-overlay-scrim: rgba(0, 0, 0, 0.5);
212
237
  --trinity-overlay-hover: rgba(0, 0, 0, 0.08);
213
238
  --trinity-overlay-hover-subtle: rgba(0, 0, 0, 0.04);
214
239
  --trinity-overlay-pressed: rgba(0, 0, 0, 0.12);
215
240
  --trinity-overlay-selected: rgba(0, 0, 0, 0.08);
216
241
  --trinity-overlay-disabled: rgba(0, 0, 0, 0.38);
217
-
218
- /* ============================================
219
- SEMANTIC EFFECTS - ON DARK (white opacities)
220
- ============================================ */
221
242
  --trinity-on-dark-primary: rgba(255, 255, 255, 0.87);
222
243
  --trinity-on-dark-secondary: rgba(255, 255, 255, 0.7);
223
244
  --trinity-on-dark-tertiary: rgba(255, 255, 255, 0.5);
@@ -226,36 +247,15 @@
226
247
  --trinity-on-dark-divider: rgba(255, 255, 255, 0.24);
227
248
  --trinity-on-dark-emphasis: rgba(255, 255, 255, 0.8);
228
249
  --trinity-on-dark-contrast: rgba(255, 255, 255, 0.95);
229
-
230
- /* ============================================
231
- SEMANTIC EFFECTS - SHADOWS
232
- ============================================ */
250
+ --trinity-on-dark-hover: rgba(255, 255, 255, 0.15);
251
+ --trinity-on-dark-strong-emphasis: rgba(255, 255, 255, 0.9);
233
252
  --trinity-shadow-surface: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
234
253
  --trinity-shadow-raised: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
235
254
  --trinity-shadow-floating: 0 4px 20px rgba(0, 0, 0, 0.15);
236
255
  --trinity-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
237
256
  --trinity-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
238
-
239
- /* Base Shadow Scale */
240
- --trinity-shadow-none: none;
241
- --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
242
- --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
243
- --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
244
- --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
245
- --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
246
- --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
247
- --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
248
-
249
- /* ============================================
250
- SEMANTIC EFFECTS - FOCUS RINGS
251
- ============================================ */
252
- --trinity-focus-ring-default: 0 0 0 3px rgba(120, 65, 201, 0.25);
253
257
  --trinity-focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.3);
254
- --trinity-focus-ring-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
255
-
256
- /* ============================================
257
- SEMANTIC EFFECTS - STATE INDICATORS
258
- ============================================ */
258
+ --trinity-focus-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
259
259
  --trinity-state-error-subtle: rgba(218, 30, 40, 0.05);
260
260
  --trinity-state-error-emphasis: rgba(218, 30, 40, 0.3);
261
261
  --trinity-state-warning-subtle: rgba(241, 194, 27, 0.1);
@@ -265,97 +265,282 @@
265
265
  --trinity-state-info-subtle: rgba(0, 67, 206, 0.05);
266
266
  --trinity-state-info-emphasis: rgba(0, 67, 206, 0.3);
267
267
 
268
- /* ============================================
269
- SPACING SCALE (Base)
270
- ============================================ */
271
- --trinity-space-0: 0;
272
- --trinity-space-0-5: 2px;
273
- --trinity-space-1: 4px;
274
- --trinity-space-1-5: 6px;
275
- --trinity-space-2: 8px;
276
- --trinity-space-2-5: 10px;
277
- --trinity-space-3: 12px;
278
- --trinity-space-4: 16px;
279
- --trinity-space-5: 20px;
280
- --trinity-space-6: 24px;
281
- --trinity-space-7: 28px;
282
- --trinity-space-8: 32px;
283
- --trinity-space-9: 36px;
284
- --trinity-space-10: 40px;
285
- --trinity-space-12: 48px;
286
- --trinity-space-14: 56px;
287
- --trinity-space-16: 64px;
288
- --trinity-space-20: 80px;
289
- --trinity-space-24: 96px;
290
- --trinity-space-32: 128px;
268
+ /* Semantic typography */
269
+ --trinity-display-large-font-size: 3rem;
270
+ --trinity-display-large-font-weight: 700;
271
+ --trinity-display-large-line-height: 1.25;
272
+ --trinity-display-large-letter-spacing: -0.025em;
273
+ --trinity-display-medium-font-size: 2.25rem;
274
+ --trinity-display-medium-font-weight: 700;
275
+ --trinity-display-medium-line-height: 1.25;
276
+ --trinity-display-medium-letter-spacing: -0.025em;
277
+ --trinity-display-small-font-size: 1.875rem;
278
+ --trinity-display-small-font-weight: 600;
279
+ --trinity-display-small-line-height: 1.375;
280
+ --trinity-display-small-letter-spacing: 0em;
281
+ --trinity-h1-font-size: 1.875rem;
282
+ --trinity-h1-font-weight: 700;
283
+ --trinity-h1-line-height: 1.25;
284
+ --trinity-h2-font-size: 1.5rem;
285
+ --trinity-h2-font-weight: 600;
286
+ --trinity-h2-line-height: 1.375;
287
+ --trinity-h3-font-size: 1.25rem;
288
+ --trinity-h3-font-weight: 600;
289
+ --trinity-h3-line-height: 1.375;
290
+ --trinity-h4-font-size: 1.125rem;
291
+ --trinity-h4-font-weight: 600;
292
+ --trinity-h4-line-height: 1.5;
293
+ --trinity-h5-font-size: 1rem;
294
+ --trinity-h5-font-weight: 600;
295
+ --trinity-h5-line-height: 1.5;
296
+ --trinity-h6-font-size: 0.875rem;
297
+ --trinity-h6-font-weight: 600;
298
+ --trinity-h6-line-height: 1.5;
299
+ --trinity-body-large-font-size: 1.125rem;
300
+ --trinity-body-large-font-weight: 400;
301
+ --trinity-body-large-line-height: 1.625;
302
+ --trinity-body-medium-font-size: 1rem;
303
+ --trinity-body-medium-font-weight: 400;
304
+ --trinity-body-medium-line-height: 1.5;
305
+ --trinity-body-small-font-size: 0.875rem;
306
+ --trinity-body-small-font-weight: 400;
307
+ --trinity-body-small-line-height: 1.5;
308
+ --trinity-label-large-font-size: 1rem;
309
+ --trinity-label-large-font-weight: 500;
310
+ --trinity-label-large-line-height: 1.25;
311
+ --trinity-label-medium-font-size: 0.875rem;
312
+ --trinity-label-medium-font-weight: 500;
313
+ --trinity-label-medium-line-height: 1.25;
314
+ --trinity-label-small-font-size: 0.75rem;
315
+ --trinity-label-small-font-weight: 500;
316
+ --trinity-label-small-line-height: 1.25;
317
+ --trinity-micro-xs-font-size: 0.625rem;
318
+ --trinity-micro-xs-font-weight: 500;
319
+ --trinity-micro-xs-line-height: 1.25;
320
+ --trinity-micro-xs-letter-spacing: 0.025em;
321
+ --trinity-micro-sm-font-size: 0.6875rem;
322
+ --trinity-micro-sm-font-weight: 500;
323
+ --trinity-micro-sm-line-height: 1.25;
324
+ --trinity-micro-sm-letter-spacing: 0em;
325
+ --trinity-dense-badge: 0.625rem;
326
+ --trinity-dense-text: 0.75rem;
327
+ --trinity-data-numeric-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
328
+ --trinity-data-numeric-font-weight: 400;
329
+ --trinity-data-numeric-font-feature-settings: "tnum" 1;
330
+ --trinity-data-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
331
+ --trinity-data-code-font-size: 0.875rem;
332
+ --trinity-data-code-font-weight: 400;
333
+ --trinity-data-code-line-height: 1.625;
334
+ --trinity-display-large-font: 3rem;
335
+ --trinity-display-large-size: 3rem;
336
+ --trinity-display-lg-font-size: 3rem;
337
+ --trinity-display-large-weight: 700;
338
+ --trinity-display-lg-font-weight: 700;
339
+ --trinity-display-large-leading: 1.25;
340
+ --trinity-display-lg-line-height: 1.25;
341
+ --trinity-display-large-tracking: -0.025em;
342
+ --trinity-display-lg-letter-spacing: -0.025em;
343
+ --trinity-display-medium-font: 2.25rem;
344
+ --trinity-display-medium-size: 2.25rem;
345
+ --trinity-display-md-font-size: 2.25rem;
346
+ --trinity-display-medium-weight: 700;
347
+ --trinity-display-md-font-weight: 700;
348
+ --trinity-display-medium-leading: 1.25;
349
+ --trinity-display-md-line-height: 1.25;
350
+ --trinity-display-medium-tracking: -0.025em;
351
+ --trinity-display-md-letter-spacing: -0.025em;
352
+ --trinity-display-small-font: 1.875rem;
353
+ --trinity-display-small-size: 1.875rem;
354
+ --trinity-display-sm-font-size: 1.875rem;
355
+ --trinity-display-small-weight: 600;
356
+ --trinity-display-sm-font-weight: 600;
357
+ --trinity-display-small-leading: 1.375;
358
+ --trinity-display-sm-line-height: 1.375;
359
+ --trinity-display-small-tracking: 0em;
360
+ --trinity-display-sm-letter-spacing: 0em;
361
+ --trinity-h1-font: 1.875rem;
362
+ --trinity-h1-size: 1.875rem;
363
+ --trinity-h1-weight: 700;
364
+ --trinity-h1-leading: 1.25;
365
+ --trinity-h2-font: 1.5rem;
366
+ --trinity-h2-size: 1.5rem;
367
+ --trinity-h2-weight: 600;
368
+ --trinity-h2-leading: 1.375;
369
+ --trinity-h3-font: 1.25rem;
370
+ --trinity-h3-size: 1.25rem;
371
+ --trinity-h3-weight: 600;
372
+ --trinity-h3-leading: 1.375;
373
+ --trinity-h4-font: 1.125rem;
374
+ --trinity-h4-size: 1.125rem;
375
+ --trinity-h4-weight: 600;
376
+ --trinity-h4-leading: 1.5;
377
+ --trinity-h5-font: 1rem;
378
+ --trinity-h5-size: 1rem;
379
+ --trinity-h5-weight: 600;
380
+ --trinity-h5-leading: 1.5;
381
+ --trinity-h6-font: 0.875rem;
382
+ --trinity-h6-size: 0.875rem;
383
+ --trinity-h6-weight: 600;
384
+ --trinity-h6-leading: 1.5;
385
+ --trinity-body-large-font: 1.125rem;
386
+ --trinity-body-large-size: 1.125rem;
387
+ --trinity-body-lg-font-size: 1.125rem;
388
+ --trinity-body-large-weight: 400;
389
+ --trinity-body-lg-font-weight: 400;
390
+ --trinity-body-large-leading: 1.625;
391
+ --trinity-body-lg-line-height: 1.625;
392
+ --trinity-body-medium-font: 1rem;
393
+ --trinity-body-medium-size: 1rem;
394
+ --trinity-body-md-font-size: 1rem;
395
+ --trinity-body-medium-weight: 400;
396
+ --trinity-body-md-font-weight: 400;
397
+ --trinity-body-medium-leading: 1.5;
398
+ --trinity-body-md-line-height: 1.5;
399
+ --trinity-body-small-font: 0.875rem;
400
+ --trinity-body-small-size: 0.875rem;
401
+ --trinity-body-sm-font-size: 0.875rem;
402
+ --trinity-body-small-weight: 400;
403
+ --trinity-body-sm-font-weight: 400;
404
+ --trinity-body-small-leading: 1.5;
405
+ --trinity-body-sm-line-height: 1.5;
406
+ --trinity-label-large-font: 1rem;
407
+ --trinity-label-large-size: 1rem;
408
+ --trinity-label-lg-font-size: 1rem;
409
+ --trinity-label-large-weight: 500;
410
+ --trinity-label-lg-font-weight: 500;
411
+ --trinity-label-large-leading: 1.25;
412
+ --trinity-label-lg-line-height: 1.25;
413
+ --trinity-label-medium-font: 0.875rem;
414
+ --trinity-label-medium-size: 0.875rem;
415
+ --trinity-label-md-font-size: 0.875rem;
416
+ --trinity-label-medium-weight: 500;
417
+ --trinity-label-md-font-weight: 500;
418
+ --trinity-label-medium-leading: 1.25;
419
+ --trinity-label-md-line-height: 1.25;
420
+ --trinity-label-small-font: 0.75rem;
421
+ --trinity-label-small-size: 0.75rem;
422
+ --trinity-label-sm-font-size: 0.75rem;
423
+ --trinity-label-small-weight: 500;
424
+ --trinity-label-sm-font-weight: 500;
425
+ --trinity-label-small-leading: 1.25;
426
+ --trinity-label-sm-line-height: 1.25;
427
+ --trinity-micro-xs-font: 0.625rem;
428
+ --trinity-micro-xs-size: 0.625rem;
429
+ --trinity-micro-xs-weight: 500;
430
+ --trinity-micro-xs-leading: 1.25;
431
+ --trinity-micro-xs-tracking: 0.025em;
432
+ --trinity-micro-sm-font: 0.6875rem;
433
+ --trinity-micro-sm-size: 0.6875rem;
434
+ --trinity-micro-sm-weight: 500;
435
+ --trinity-micro-sm-leading: 1.25;
436
+ --trinity-micro-sm-tracking: 0em;
437
+ --trinity-data-numeric-weight: 400;
438
+ --trinity-data-code-font: 0.875rem;
439
+ --trinity-data-code-size: 0.875rem;
440
+ --trinity-data-code-weight: 400;
441
+ --trinity-data-code-leading: 1.625;
442
+ --trinity-display-lg-font: 3rem;
443
+ --trinity-display-lg-size: 3rem;
444
+ --trinity-display-lg-weight: 700;
445
+ --trinity-display-lg-leading: 1.25;
446
+ --trinity-display-lg-tracking: -0.025em;
447
+ --trinity-display-md-font: 2.25rem;
448
+ --trinity-display-md-size: 2.25rem;
449
+ --trinity-display-md-weight: 700;
450
+ --trinity-display-md-leading: 1.25;
451
+ --trinity-display-md-tracking: -0.025em;
452
+ --trinity-display-sm-font: 1.875rem;
453
+ --trinity-display-sm-size: 1.875rem;
454
+ --trinity-display-sm-weight: 600;
455
+ --trinity-display-sm-leading: 1.375;
456
+ --trinity-display-sm-tracking: 0em;
457
+ --trinity-body-lg-font: 1.125rem;
458
+ --trinity-body-lg-size: 1.125rem;
459
+ --trinity-body-lg-weight: 400;
460
+ --trinity-body-lg-leading: 1.625;
461
+ --trinity-body-md-font: 1rem;
462
+ --trinity-body-md-size: 1rem;
463
+ --trinity-body-md-weight: 400;
464
+ --trinity-body-md-leading: 1.5;
465
+ --trinity-body-sm-font: 0.875rem;
466
+ --trinity-body-sm-size: 0.875rem;
467
+ --trinity-body-sm-weight: 400;
468
+ --trinity-body-sm-leading: 1.5;
469
+ --trinity-label-lg-font: 1rem;
470
+ --trinity-label-lg-size: 1rem;
471
+ --trinity-label-lg-weight: 500;
472
+ --trinity-label-lg-leading: 1.25;
473
+ --trinity-label-md-font: 0.875rem;
474
+ --trinity-label-md-size: 0.875rem;
475
+ --trinity-label-md-weight: 500;
476
+ --trinity-label-md-leading: 1.25;
477
+ --trinity-label-sm-font: 0.75rem;
478
+ --trinity-label-sm-size: 0.75rem;
479
+ --trinity-label-sm-weight: 500;
480
+ --trinity-label-sm-leading: 1.25;
481
+
482
+ /* Icon sizes */
483
+ --trinity-icon-inline: 14px;
484
+ --trinity-icon-control: 16px;
485
+ --trinity-icon-navigation: 20px;
486
+ --trinity-icon-prominent: 24px;
487
+ --trinity-icon-hero: 28px;
488
+ --trinity-icon-display: 36px;
489
+ --trinity-icon-size-inline: 14px;
490
+ --trinity-icon-size-control: 16px;
491
+ --trinity-icon-size-navigation: 20px;
492
+ --trinity-icon-size-prominent: 24px;
493
+ --trinity-icon-size-hero: 28px;
494
+ --trinity-icon-size-display: 36px;
495
+
496
+ /* Semantic spacing */
497
+ --trinity-component-padding-xs: 4px;
498
+ --trinity-component-padding-sm: 8px;
499
+ --trinity-component-padding-md: 16px;
500
+ --trinity-component-padding-lg: 24px;
501
+ --trinity-component-padding-xl: 32px;
502
+ --trinity-component-gap-xs: 4px;
503
+ --trinity-component-gap-sm: 8px;
504
+ --trinity-component-gap-md: 16px;
505
+ --trinity-component-gap-lg: 24px;
506
+ --trinity-layout-page-padding: 24px;
507
+ --trinity-layout-section-gap: 48px;
508
+ --trinity-layout-container-max-width: 1280px;
509
+ --trinity-layout-header-height: 64px;
510
+ --trinity-layout-sidebar-width-expanded: 200px;
511
+ --trinity-layout-sidebar-width-collapsed: 56px;
512
+ --trinity-layout-ai-panel-width: 420px;
513
+ --trinity-layout-gutter: 24px;
514
+ --trinity-layout-content-padding: 64px;
291
515
 
292
- /* ============================================
293
- INTENT-BASED INLINE SPACING (Horizontal)
294
- ============================================ */
516
+ /* Semantic inline / stack / density */
295
517
  --trinity-inline-tight: 4px;
296
518
  --trinity-inline-compact: 8px;
297
519
  --trinity-inline-snug: 12px;
298
520
  --trinity-inline-comfortable: 16px;
299
521
  --trinity-inline-relaxed: 20px;
300
522
  --trinity-inline-spacious: 24px;
301
-
302
- /* ============================================
303
- INTENT-BASED STACK SPACING (Vertical)
304
- ============================================ */
305
523
  --trinity-stack-tight: 4px;
306
524
  --trinity-stack-compact: 8px;
307
525
  --trinity-stack-snug: 12px;
308
526
  --trinity-stack-comfortable: 16px;
309
527
  --trinity-stack-relaxed: 20px;
310
528
  --trinity-stack-spacious: 24px;
311
-
312
- /* ============================================
313
- DENSITY CONTEXTS
314
- ============================================ */
315
- /* Compact Density */
529
+ --trinity-stack-related: 4px;
530
+ --trinity-stack-grouped: 8px;
531
+ --trinity-stack-separated: 16px;
532
+ --trinity-stack-distinct: 32px;
316
533
  --trinity-density-compact-row-height: 36px;
317
534
  --trinity-density-compact-cell-padding: 6px;
318
535
  --trinity-density-compact-gap: 4px;
319
-
320
- /* Standard Density */
321
536
  --trinity-density-standard-row-height: 48px;
322
537
  --trinity-density-standard-cell-padding: 12px;
323
538
  --trinity-density-standard-gap: 8px;
324
-
325
- /* Comfortable Density */
326
539
  --trinity-density-comfortable-row-height: 64px;
327
540
  --trinity-density-comfortable-cell-padding: 16px;
328
541
  --trinity-density-comfortable-gap: 12px;
329
542
 
330
- /* ============================================
331
- LAYOUT SPACING
332
- ============================================ */
333
- --trinity-layout-page-padding: 24px;
334
- --trinity-layout-section-gap: 48px;
335
- --trinity-layout-container-max-width: 1280px;
336
- --trinity-layout-header-height: 64px;
337
- --trinity-layout-sidebar-width-expanded: 200px;
338
- --trinity-layout-sidebar-width-collapsed: 56px;
339
- --trinity-layout-ai-panel-width: 420px;
340
- --trinity-layout-gutter: 24px;
341
- --trinity-layout-content-padding: 64px;
342
-
343
- /* ============================================
344
- BORDER RADIUS (Base Scale)
345
- ============================================ */
346
- --trinity-radius-none: 0;
347
- --trinity-radius-xs: 4px;
348
- --trinity-radius-sm: 6px;
349
- --trinity-radius-md: 8px;
350
- --trinity-radius-lg: 12px;
351
- --trinity-radius-xl: 16px;
352
- --trinity-radius-2xl: 20px;
353
- --trinity-radius-3xl: 24px;
354
- --trinity-radius-full: 9999px;
355
-
356
- /* ============================================
357
- SEMANTIC BORDER RADIUS (Component-Specific)
358
- ============================================ */
543
+ /* Semantic borders */
359
544
  --trinity-radius-button: 9999px;
360
545
  --trinity-radius-input: 6px;
361
546
  --trinity-radius-card: 12px;
@@ -368,95 +553,128 @@
368
553
  --trinity-radius-menu: 12px;
369
554
  --trinity-radius-tooltip: 8px;
370
555
  --trinity-radius-icon-container: 4px;
371
- --trinity-radius-skeleton: 4px;
372
- --trinity-radius-table-cell: 0;
373
-
374
- /* Intent-Based Radius */
556
+ --trinity-radius-none: 0px;
375
557
  --trinity-radius-subtle: 4px;
376
558
  --trinity-radius-soft: 6px;
377
559
  --trinity-radius-rounded: 8px;
378
560
  --trinity-radius-pill: 9999px;
379
561
  --trinity-radius-circle: 50%;
380
-
381
- /* ============================================
382
- BORDER WIDTH
383
- ============================================ */
384
- --trinity-border-width-0: 0;
385
- --trinity-border-width-1: 1px;
386
- --trinity-border-width-2: 2px;
387
- --trinity-border-width-4: 4px;
388
- --trinity-border-width-8: 8px;
389
-
390
- /* Semantic Border Width */
562
+ --trinity-radius-skeleton: 4px;
563
+ --trinity-radius-table-cell: 0px;
564
+ --trinity-radius-px-none: 0px;
565
+ --trinity-radius-px-xs: 4px;
566
+ --trinity-radius-px-sm: 6px;
567
+ --trinity-radius-px-md: 8px;
568
+ --trinity-radius-px-lg: 12px;
569
+ --trinity-radius-px-xl: 16px;
570
+ --trinity-radius-px-2xl: 20px;
571
+ --trinity-radius-px-3xl: 24px;
572
+ --trinity-radius-px-full: 9999px;
391
573
  --trinity-border-width-default: 1px;
392
574
  --trinity-border-width-focus: 2px;
393
575
  --trinity-border-width-thick: 4px;
576
+ --trinity-radius-modal-lg: 16px;
394
577
 
395
- /* ============================================
396
- ICON SIZES
397
- ============================================ */
398
- --trinity-icon-inline: 14px;
399
- --trinity-icon-control: 16px;
400
- --trinity-icon-navigation: 20px;
401
- --trinity-icon-prominent: 24px;
402
- --trinity-icon-hero: 28px;
403
- --trinity-icon-display: 36px;
404
-
405
- /* Legacy Icon Scale */
406
- --trinity-icon-xs: 12px;
407
- --trinity-icon-sm: 16px;
408
- --trinity-icon-md: 20px;
409
- --trinity-icon-lg: 24px;
410
- --trinity-icon-xl: 32px;
411
- --trinity-icon-2xl: 40px;
412
-
413
- /* ============================================
414
- TYPOGRAPHY - FONT FAMILY
415
- ============================================ */
416
- --trinity-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
417
- --trinity-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
578
+ /* Font families */
579
+ --trinity-font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
580
+ --trinity-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
418
581
 
419
- /* ============================================
420
- TYPOGRAPHY - FONT SIZES
421
- ============================================ */
582
+ /* Base spacing */
583
+ --trinity-space-0: 0px;
584
+ --trinity-space-1: 4px;
585
+ --trinity-space-2: 8px;
586
+ --trinity-space-3: 12px;
587
+ --trinity-space-4: 16px;
588
+ --trinity-space-5: 20px;
589
+ --trinity-space-6: 24px;
590
+ --trinity-space-7: 28px;
591
+ --trinity-space-8: 32px;
592
+ --trinity-space-9: 36px;
593
+ --trinity-space-10: 40px;
594
+ --trinity-space-12: 48px;
595
+ --trinity-space-14: 56px;
596
+ --trinity-space-16: 64px;
597
+ --trinity-space-20: 80px;
598
+ --trinity-space-24: 96px;
599
+ --trinity-space-32: 128px;
600
+ --trinity-space-0.5: 2px;
601
+ --trinity-space-1.5: 6px;
602
+ --trinity-space-2.5: 10px;
603
+
604
+ /* Font sizes */
605
+ --trinity-font-size-xs: 0.75rem;
606
+ --trinity-font-size-sm: 0.875rem;
607
+ --trinity-font-size-base: 1rem;
608
+ --trinity-font-size-lg: 1.125rem;
609
+ --trinity-font-size-xl: 1.25rem;
610
+ --trinity-font-size-2xl: 1.5rem;
611
+ --trinity-font-size-3xl: 1.875rem;
612
+ --trinity-font-size-4xl: 2.25rem;
613
+ --trinity-font-size-5xl: 3rem;
614
+ --trinity-font-size-6xl: 3.75rem;
615
+ --trinity-font-xs: 0.75rem;
616
+ --trinity-size-xs: 0.75rem;
422
617
  --trinity-text-xs: 0.75rem;
618
+ --trinity-font-sm: 0.875rem;
619
+ --trinity-size-sm: 0.875rem;
423
620
  --trinity-text-sm: 0.875rem;
621
+ --trinity-font-base: 1rem;
622
+ --trinity-size-base: 1rem;
424
623
  --trinity-text-base: 1rem;
624
+ --trinity-font-lg: 1.125rem;
625
+ --trinity-size-lg: 1.125rem;
425
626
  --trinity-text-lg: 1.125rem;
627
+ --trinity-font-xl: 1.25rem;
628
+ --trinity-size-xl: 1.25rem;
426
629
  --trinity-text-xl: 1.25rem;
630
+ --trinity-font-2xl: 1.5rem;
631
+ --trinity-size-2xl: 1.5rem;
427
632
  --trinity-text-2xl: 1.5rem;
633
+ --trinity-font-3xl: 1.875rem;
634
+ --trinity-size-3xl: 1.875rem;
428
635
  --trinity-text-3xl: 1.875rem;
636
+ --trinity-font-4xl: 2.25rem;
637
+ --trinity-size-4xl: 2.25rem;
429
638
  --trinity-text-4xl: 2.25rem;
639
+ --trinity-font-5xl: 3rem;
640
+ --trinity-size-5xl: 3rem;
430
641
  --trinity-text-5xl: 3rem;
642
+ --trinity-font-6xl: 3.75rem;
643
+ --trinity-size-6xl: 3.75rem;
431
644
  --trinity-text-6xl: 3.75rem;
432
645
 
433
- /* Micro Typography (for dense UI) */
434
- --trinity-text-micro-xs: 0.625rem;
435
- --trinity-text-micro-sm: 0.6875rem;
436
-
437
- /* ============================================
438
- TYPOGRAPHY - FONT WEIGHTS
439
- ============================================ */
646
+ /* Font weights */
647
+ --trinity-font-weight-light: 300;
648
+ --trinity-font-weight-regular: 400;
649
+ --trinity-font-weight-medium: 500;
650
+ --trinity-font-weight-semibold: 600;
651
+ --trinity-font-weight-bold: 700;
652
+ --trinity-font-weight-extrabold: 800;
653
+ --trinity-weight-light: 300;
440
654
  --trinity-font-light: 300;
655
+ --trinity-weight-regular: 400;
441
656
  --trinity-font-regular: 400;
657
+ --trinity-weight-medium: 500;
442
658
  --trinity-font-medium: 500;
659
+ --trinity-font-weight-md: 500;
660
+ --trinity-weight-semibold: 600;
443
661
  --trinity-font-semibold: 600;
662
+ --trinity-weight-bold: 700;
444
663
  --trinity-font-bold: 700;
664
+ --trinity-weight-extrabold: 800;
445
665
  --trinity-font-extrabold: 800;
446
-
447
- /* ============================================
448
- TYPOGRAPHY - LINE HEIGHTS
449
- ============================================ */
450
- --trinity-leading-none: 1;
451
- --trinity-leading-tight: 1.25;
452
- --trinity-leading-snug: 1.375;
453
- --trinity-leading-normal: 1.5;
454
- --trinity-leading-relaxed: 1.625;
455
- --trinity-leading-loose: 2;
456
-
457
- /* ============================================
458
- TYPOGRAPHY - LETTER SPACING
459
- ============================================ */
666
+ --trinity-weight-md: 500;
667
+ --trinity-font-md: 500;
668
+
669
+ /* Line heights */
670
+ --trinity-leading-none: 1px;
671
+ --trinity-leading-tight: 1.25px;
672
+ --trinity-leading-snug: 1.375px;
673
+ --trinity-leading-normal: 1.5px;
674
+ --trinity-leading-relaxed: 1.625px;
675
+ --trinity-leading-loose: 2px;
676
+
677
+ /* Letter spacing */
460
678
  --trinity-tracking-tighter: -0.05em;
461
679
  --trinity-tracking-tight: -0.025em;
462
680
  --trinity-tracking-normal: 0em;
@@ -464,157 +682,81 @@
464
682
  --trinity-tracking-wider: 0.05em;
465
683
  --trinity-tracking-widest: 0.1em;
466
684
 
467
- /* ============================================
468
- TYPOGRAPHY - DISPLAY STYLES
469
- ============================================ */
470
- --trinity-display-large-size: 3rem;
471
- --trinity-display-large-weight: 700;
472
- --trinity-display-large-line-height: 1.1;
473
- --trinity-display-large-tracking: -0.02em;
474
-
475
- --trinity-display-medium-size: 2.25rem;
476
- --trinity-display-medium-weight: 700;
477
- --trinity-display-medium-line-height: 1.15;
478
- --trinity-display-medium-tracking: -0.01em;
479
-
480
- --trinity-display-small-size: 1.875rem;
481
- --trinity-display-small-weight: 600;
482
- --trinity-display-small-line-height: 1.2;
483
- --trinity-display-small-tracking: 0;
685
+ /* Border radius scale */
686
+ --trinity-radius-xs: 4px;
687
+ --trinity-radius-sm: 6px;
688
+ --trinity-radius-md: 8px;
689
+ --trinity-radius-lg: 12px;
690
+ --trinity-radius-xl: 16px;
691
+ --trinity-radius-2xl: 20px;
692
+ --trinity-radius-3xl: 24px;
693
+ --trinity-radius-full: 9999px;
484
694
 
485
- /* ============================================
486
- TYPOGRAPHY - HEADING STYLES
487
- ============================================ */
488
- --trinity-h1-size: 1.875rem;
489
- --trinity-h1-weight: 700;
490
- --trinity-h1-line-height: 1.25;
695
+ /* Border widths */
696
+ --trinity-border-width-0: 0px;
697
+ --trinity-border-width-1: 1px;
698
+ --trinity-border-width-2: 2px;
699
+ --trinity-border-width-4: 4px;
700
+ --trinity-border-width-8: 8px;
491
701
 
492
- --trinity-h2-size: 1.5rem;
493
- --trinity-h2-weight: 600;
494
- --trinity-h2-line-height: 1.3;
702
+ /* Shadow scale */
703
+ --trinity-shadow-none: none;
704
+ --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
705
+ --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
706
+ --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
707
+ --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
708
+ --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
709
+ --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
710
+ --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
495
711
 
496
- --trinity-h3-size: 1.25rem;
497
- --trinity-h3-weight: 600;
498
- --trinity-h3-line-height: 1.35;
712
+ /* Z-index scale */
713
+ --trinity-z-0: 0px;
714
+ --trinity-z-10: 10px;
715
+ --trinity-z-20: 20px;
716
+ --trinity-z-30: 30px;
717
+ --trinity-z-40: 40px;
718
+ --trinity-z-50: 50px;
719
+ --trinity-z-auto: auto;
720
+ --trinity-z-dropdown: 1000px;
721
+ --trinity-z-sticky: 1020px;
722
+ --trinity-z-fixed: 1030px;
723
+ --trinity-z-modal-backdrop: 1040px;
724
+ --trinity-z-modal: 1050px;
725
+ --trinity-z-popover: 1060px;
726
+ --trinity-z-tooltip: 1070px;
727
+
728
+ /* Duration */
729
+ --trinity-duration-fastest: 50ms;
730
+ --trinity-duration-faster: 100ms;
731
+ --trinity-duration-fast: 150ms;
732
+ --trinity-duration-normal: 200ms;
733
+ --trinity-duration-slow: 300ms;
734
+ --trinity-duration-slower: 400ms;
735
+ --trinity-duration-slowest: 500ms;
499
736
 
500
- --trinity-h4-size: 1.125rem;
501
- --trinity-h4-weight: 600;
502
- --trinity-h4-line-height: 1.4;
737
+ /* Easing */
738
+ --trinity-easing-linear: linear;
739
+ --trinity-easing-in: cubic-bezier(0.4, 0, 1, 1);
740
+ --trinity-easing-out: cubic-bezier(0, 0, 0.2, 1);
741
+ --trinity-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
742
+ --trinity-easing-smooth: cubic-bezier(0.45, 0, 0.55, 1);
743
+ --trinity-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
744
+ --trinity-easing-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
503
745
 
504
- --trinity-h5-size: 1rem;
505
- --trinity-h5-weight: 600;
506
- --trinity-h5-line-height: 1.45;
746
+ /* Semantic motion */
747
+ --trinity-motion-duration-instant: 50ms;
748
+ --trinity-motion-duration-fast: 150ms;
749
+ --trinity-motion-duration-normal: 200ms;
750
+ --trinity-motion-duration-slow: 300ms;
751
+ --trinity-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
752
+ --trinity-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
753
+ --trinity-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
754
+ --trinity-motion-instant: 50ms;
755
+ --trinity-motion-fast: 150ms;
756
+ --trinity-motion-normal: 200ms;
757
+ --trinity-motion-slow: 300ms;
507
758
 
508
- --trinity-h6-size: 0.875rem;
509
- --trinity-h6-weight: 600;
510
- --trinity-h6-line-height: 1.5;
511
-
512
- /* ============================================
513
- TYPOGRAPHY - BODY STYLES
514
- ============================================ */
515
- --trinity-body-large-size: 1.125rem;
516
- --trinity-body-large-weight: 400;
517
- --trinity-body-large-line-height: 1.6;
518
-
519
- --trinity-body-medium-size: 1rem;
520
- --trinity-body-medium-weight: 400;
521
- --trinity-body-medium-line-height: 1.5;
522
-
523
- --trinity-body-small-size: 0.875rem;
524
- --trinity-body-small-weight: 400;
525
- --trinity-body-small-line-height: 1.5;
526
-
527
- /* ============================================
528
- TYPOGRAPHY - LABEL STYLES
529
- ============================================ */
530
- --trinity-label-large-size: 1rem;
531
- --trinity-label-large-weight: 500;
532
- --trinity-label-large-line-height: 1.25;
533
-
534
- --trinity-label-medium-size: 0.875rem;
535
- --trinity-label-medium-weight: 500;
536
- --trinity-label-medium-line-height: 1.25;
537
-
538
- --trinity-label-small-size: 0.75rem;
539
- --trinity-label-small-weight: 500;
540
- --trinity-label-small-line-height: 1.25;
541
-
542
- /* ============================================
543
- TYPOGRAPHY - MICRO STYLES (Dense UI)
544
- ============================================ */
545
- --trinity-micro-xs-size: 0.625rem;
546
- --trinity-micro-xs-weight: 500;
547
- --trinity-micro-xs-line-height: 1.25;
548
- --trinity-micro-xs-tracking: 0.025em;
549
-
550
- --trinity-micro-sm-size: 0.6875rem;
551
- --trinity-micro-sm-weight: 500;
552
- --trinity-micro-sm-line-height: 1.25;
553
- --trinity-micro-sm-tracking: 0;
554
-
555
- /* Dense Typography */
556
- --trinity-dense-badge: 0.625rem;
557
- --trinity-dense-text: 0.75rem;
558
-
559
- /* ============================================
560
- TYPOGRAPHY - DATA STYLES
561
- ============================================ */
562
- --trinity-data-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
563
- --trinity-data-numeric-feature: 'tnum' 1;
564
-
565
- /* ============================================
566
- TRANSITIONS - DURATION
567
- ============================================ */
568
- --trinity-duration-fastest: 50ms;
569
- --trinity-duration-faster: 100ms;
570
- --trinity-duration-fast: 150ms;
571
- --trinity-duration-normal: 200ms;
572
- --trinity-duration-slow: 300ms;
573
- --trinity-duration-slower: 400ms;
574
- --trinity-duration-slowest: 500ms;
575
-
576
- /* Semantic Duration */
577
- --trinity-motion-instant: 50ms;
578
- --trinity-motion-fast: 150ms;
579
- --trinity-motion-normal: 200ms;
580
- --trinity-motion-slow: 300ms;
581
-
582
- /* ============================================
583
- TRANSITIONS - EASING
584
- ============================================ */
585
- --trinity-easing-linear: linear;
586
- --trinity-easing-in: cubic-bezier(0.4, 0, 1, 1);
587
- --trinity-easing-out: cubic-bezier(0, 0, 0.2, 1);
588
- --trinity-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
589
- --trinity-easing-smooth: cubic-bezier(0.45, 0, 0.55, 1);
590
- --trinity-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
591
- --trinity-easing-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
592
-
593
- /* Semantic Easing */
594
- --trinity-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
595
- --trinity-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
596
- --trinity-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
597
-
598
- /* ============================================
599
- Z-INDEX SCALE
600
- ============================================ */
601
- --trinity-z-0: 0;
602
- --trinity-z-10: 10;
603
- --trinity-z-20: 20;
604
- --trinity-z-30: 30;
605
- --trinity-z-40: 40;
606
- --trinity-z-50: 50;
607
- --trinity-z-dropdown: 1000;
608
- --trinity-z-sticky: 1020;
609
- --trinity-z-fixed: 1030;
610
- --trinity-z-modal-backdrop: 1040;
611
- --trinity-z-modal: 1050;
612
- --trinity-z-popover: 1060;
613
- --trinity-z-tooltip: 1070;
614
-
615
- /* ============================================
616
- OPACITY SCALE
617
- ============================================ */
759
+ /* Opacity */
618
760
  --trinity-opacity-0: 0;
619
761
  --trinity-opacity-5: 0.05;
620
762
  --trinity-opacity-10: 0.1;
@@ -631,222 +773,318 @@
631
773
  --trinity-opacity-95: 0.95;
632
774
  --trinity-opacity-100: 1;
633
775
 
634
- /* ============================================
635
- BREAKPOINTS
636
- ============================================ */
637
- --trinity-breakpoint-xs: 0px;
638
- --trinity-breakpoint-sm: 600px;
639
- --trinity-breakpoint-md: 900px;
640
- --trinity-breakpoint-lg: 1200px;
641
- --trinity-breakpoint-xl: 1536px;
642
-
643
- /* ============================================
644
- COMPONENT TOKENS - BUTTON
645
- ============================================ */
646
- /* Button Heights */
776
+ /* Component tokens */
777
+ --trinity-button-height-small: 32px;
778
+ --trinity-button-height-medium: 40px;
779
+ --trinity-button-height-large: 48px;
780
+ --trinity-button-padding-small-x: 16px;
781
+ --trinity-button-padding-small-y: 8px;
782
+ --trinity-button-padding-medium-x: 20px;
783
+ --trinity-button-padding-medium-y: 10px;
784
+ --trinity-button-padding-large-x: 24px;
785
+ --trinity-button-padding-large-y: 12px;
786
+ --trinity-button-font-size-small: 0.875rem;
787
+ --trinity-button-font-size-medium: 1rem;
788
+ --trinity-button-font-size-large: 1.125rem;
789
+ --trinity-button-border-radius: 9999px;
790
+ --trinity-button-primary-background: #050742;
791
+ --trinity-button-primary-background-hover: #FF6150;
792
+ --trinity-button-primary-text: #FFFFFF;
793
+ --trinity-button-secondary-background: #3816A0;
794
+ --trinity-button-secondary-background-hover: #FF6150;
795
+ --trinity-button-secondary-text: #FFFFFF;
796
+ --trinity-button-outlined-background: transparent;
797
+ --trinity-button-outlined-background-hover: #FF6150;
798
+ --trinity-button-outlined-border: #050742;
799
+ --trinity-button-outlined-text: #050742;
800
+ --trinity-button-outlined-text-hover: #FFFFFF;
801
+ --trinity-input-height-small: 36px;
802
+ --trinity-input-height-medium: 44px;
803
+ --trinity-input-height-large: 52px;
804
+ --trinity-input-padding-small-x: 12px;
805
+ --trinity-input-padding-small-y: 8px;
806
+ --trinity-input-padding-medium-x: 14px;
807
+ --trinity-input-padding-medium-y: 10px;
808
+ --trinity-input-padding-large-x: 16px;
809
+ --trinity-input-padding-large-y: 12px;
810
+ --trinity-input-font-size-small: 0.875rem;
811
+ --trinity-input-font-size-medium: 1rem;
812
+ --trinity-input-font-size-large: 1.125rem;
813
+ --trinity-input-border-radius: 6px;
814
+ --trinity-input-border-color-default: #D4D4D8;
815
+ --trinity-input-border-color-hover: #6B7280;
816
+ --trinity-input-border-color-focus: #7841C9;
817
+ --trinity-input-border-color-error: #DC2626;
818
+ --trinity-input-background-default: #FFFFFF;
819
+ --trinity-input-background-disabled: #F4F4F5;
820
+ --trinity-card-padding-small: 16px;
821
+ --trinity-card-padding-medium: 24px;
822
+ --trinity-card-padding-large: 32px;
823
+ --trinity-card-border-radius: 12px;
824
+ --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
825
+ --trinity-card-background: #FFFFFF;
826
+ --trinity-card-border: #E5E7EB;
827
+ --trinity-avatar-size-xs: 24px;
828
+ --trinity-avatar-size-sm: 32px;
829
+ --trinity-avatar-size-md: 40px;
830
+ --trinity-avatar-size-lg: 48px;
831
+ --trinity-avatar-size-xl: 64px;
832
+ --trinity-avatar-size-2xl: 96px;
833
+ --trinity-avatar-border-radius: 9999px;
834
+ --trinity-avatar-font-size-xs: 0.75rem;
835
+ --trinity-avatar-font-size-sm: 0.75rem;
836
+ --trinity-avatar-font-size-md: 0.875rem;
837
+ --trinity-avatar-font-size-lg: 1rem;
838
+ --trinity-avatar-font-size-xl: 1.25rem;
839
+ --trinity-avatar-font-size-2xl: 1.5rem;
840
+ --trinity-badge-padding-x: 8px;
841
+ --trinity-badge-padding-y: 2px;
842
+ --trinity-badge-border-radius: 9999px;
843
+ --trinity-badge-font-size: 0.75rem;
844
+ --trinity-badge-font-weight: 500;
845
+ --trinity-chip-height-small: 24px;
846
+ --trinity-chip-height-medium: 32px;
847
+ --trinity-chip-padding-small-x: 8px;
848
+ --trinity-chip-padding-small-y: 4px;
849
+ --trinity-chip-padding-medium-x: 12px;
850
+ --trinity-chip-padding-medium-y: 6px;
851
+ --trinity-chip-border-radius: 6px;
852
+ --trinity-chip-font-size-small: 0.75rem;
853
+ --trinity-chip-font-size-medium: 0.875rem;
854
+ --trinity-tooltip-padding-x: 12px;
855
+ --trinity-tooltip-padding-y: 8px;
856
+ --trinity-tooltip-border-radius: 6px;
857
+ --trinity-tooltip-font-size: 0.875rem;
858
+ --trinity-tooltip-background: #18181B;
859
+ --trinity-tooltip-text: #FFFFFF;
860
+ --trinity-modal-padding: 24px;
861
+ --trinity-modal-border-radius: 16px;
862
+ --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
863
+ --trinity-modal-backdrop-opacity: 0.5;
864
+ --trinity-modal-width-small: 400px;
865
+ --trinity-modal-width-medium: 560px;
866
+ --trinity-modal-width-large: 720px;
867
+ --trinity-modal-width-full-width: 90vw;
868
+ --trinity-switch-width-small: 36px;
869
+ --trinity-switch-width-medium: 48px;
870
+ --trinity-switch-height-small: 20px;
871
+ --trinity-switch-height-medium: 28px;
872
+ --trinity-switch-thumb-small: 16px;
873
+ --trinity-switch-thumb-medium: 24px;
874
+ --trinity-switch-track-off: #E5E7EB;
875
+ --trinity-switch-track-on: #050742;
876
+ --trinity-navigation-header-height: 64px;
877
+ --trinity-navigation-header-background: #050742;
878
+ --trinity-navigation-header-text: #FFFFFF;
879
+ --trinity-navigation-sidebar-width: 240px;
880
+ --trinity-navigation-sidebar-collapsed-width: 64px;
881
+ --trinity-navigation-sidebar-background: #050742;
882
+ --trinity-navigation-item-height: 44px;
883
+ --trinity-navigation-item-padding-x: 16px;
884
+ --trinity-navigation-item-padding-y: 12px;
885
+ --trinity-navigation-item-border-radius: 8px;
886
+ --trinity-navigation-footer-height: 40px;
887
+ --trinity-navigation-footer-padding-x: 24px;
888
+ --trinity-navigation-footer-padding-y: 8px;
889
+ --trinity-navigation-footer-light-background: #F4F4F5;
890
+ --trinity-navigation-footer-light-text: #6B7280;
891
+ --trinity-navigation-footer-light-divider: #D4D4D8;
892
+ --trinity-navigation-footer-light-link-hover: #7841C9;
893
+ --trinity-navigation-footer-dark-background: #050742;
894
+ --trinity-navigation-footer-dark-text: rgba(255, 255, 255, 0.7);
895
+ --trinity-navigation-footer-dark-divider: rgba(255, 255, 255, 0.24);
896
+ --trinity-navigation-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
647
897
  --trinity-button-height-sm: 32px;
648
898
  --trinity-button-height-md: 40px;
649
899
  --trinity-button-height-lg: 48px;
650
-
651
- /* Button Padding */
652
900
  --trinity-button-padding-sm-x: 16px;
653
901
  --trinity-button-padding-sm-y: 8px;
654
902
  --trinity-button-padding-md-x: 20px;
655
903
  --trinity-button-padding-md-y: 10px;
656
904
  --trinity-button-padding-lg-x: 24px;
657
905
  --trinity-button-padding-lg-y: 12px;
658
-
659
- /* Button Font Sizes */
660
- --trinity-button-font-sm: 0.875rem;
661
- --trinity-button-font-md: 1rem;
662
- --trinity-button-font-lg: 1.125rem;
663
-
664
- /* Button Colors - Primary */
906
+ --trinity-button-font-small: 0.875rem;
907
+ --trinity-button-size-small: 0.875rem;
908
+ --trinity-button-font-size-sm: 0.875rem;
909
+ --trinity-button-font-medium: 1rem;
910
+ --trinity-button-size-medium: 1rem;
911
+ --trinity-button-font-size-md: 1rem;
912
+ --trinity-button-font-large: 1.125rem;
913
+ --trinity-button-size-large: 1.125rem;
914
+ --trinity-button-font-size-lg: 1.125rem;
665
915
  --trinity-button-primary-bg: #050742;
666
916
  --trinity-button-primary-bg-hover: #FF6150;
667
- --trinity-button-primary-bg-active: #282964;
668
- --trinity-button-primary-text: #FFFFFF;
669
-
670
- /* Button Colors - Secondary */
671
917
  --trinity-button-secondary-bg: #3816A0;
672
- --trinity-button-secondary-bg-hover: #4A24E5;
673
- --trinity-button-secondary-bg-active: #542CE8;
674
- --trinity-button-secondary-text: #FFFFFF;
675
-
676
- /* Button Colors - Outlined */
918
+ --trinity-button-secondary-bg-hover: #FF6150;
677
919
  --trinity-button-outlined-bg: transparent;
678
920
  --trinity-button-outlined-bg-hover: #FF6150;
679
- --trinity-button-outlined-bg-active: #282964;
680
- --trinity-button-outlined-border: #050742;
681
- --trinity-button-outlined-text: #050742;
682
- --trinity-button-outlined-text-hover: #FFFFFF;
683
-
684
- /* Button Colors - Disabled */
685
- --trinity-button-disabled-bg: #E5E7EB;
686
- --trinity-button-disabled-text: #9CA3AF;
687
-
688
- /* ============================================
689
- COMPONENT TOKENS - INPUT
690
- ============================================ */
691
- /* Input Heights */
692
921
  --trinity-input-height-sm: 36px;
693
922
  --trinity-input-height-md: 44px;
694
923
  --trinity-input-height-lg: 52px;
695
-
696
- /* Input Padding */
697
924
  --trinity-input-padding-sm-x: 12px;
698
925
  --trinity-input-padding-sm-y: 8px;
699
926
  --trinity-input-padding-md-x: 14px;
700
927
  --trinity-input-padding-md-y: 10px;
701
928
  --trinity-input-padding-lg-x: 16px;
702
929
  --trinity-input-padding-lg-y: 12px;
703
-
704
- /* Input Font Sizes */
705
- --trinity-input-font-sm: 0.875rem;
706
- --trinity-input-font-md: 1rem;
707
- --trinity-input-font-lg: 1.125rem;
708
-
709
- /* Input Border Colors */
710
- --trinity-input-border-default: #E5E7EB;
711
- --trinity-input-border-hover: #9CA3AF;
712
- --trinity-input-border-focus: #7841C9;
713
- --trinity-input-border-error: #DC2626;
714
-
715
- /* Input Background */
930
+ --trinity-input-font-small: 0.875rem;
931
+ --trinity-input-size-small: 0.875rem;
932
+ --trinity-input-font-size-sm: 0.875rem;
933
+ --trinity-input-font-medium: 1rem;
934
+ --trinity-input-size-medium: 1rem;
935
+ --trinity-input-font-size-md: 1rem;
936
+ --trinity-input-font-large: 1.125rem;
937
+ --trinity-input-size-large: 1.125rem;
938
+ --trinity-input-font-size-lg: 1.125rem;
716
939
  --trinity-input-bg-default: #FFFFFF;
717
940
  --trinity-input-bg-disabled: #F4F4F5;
718
-
719
- /* ============================================
720
- COMPONENT TOKENS - CARD
721
- ============================================ */
722
941
  --trinity-card-padding-sm: 16px;
723
942
  --trinity-card-padding-md: 24px;
724
943
  --trinity-card-padding-lg: 32px;
725
- --trinity-card-border-radius: 12px;
726
- --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
727
944
  --trinity-card-bg: #FFFFFF;
728
- --trinity-card-border: #E5E7EB;
729
-
730
- /* ============================================
731
- COMPONENT TOKENS - AVATAR
732
- ============================================ */
733
- --trinity-avatar-size-xs: 24px;
734
- --trinity-avatar-size-sm: 32px;
735
- --trinity-avatar-size-md: 40px;
736
- --trinity-avatar-size-lg: 48px;
737
- --trinity-avatar-size-xl: 64px;
738
- --trinity-avatar-size-2xl: 96px;
739
-
740
945
  --trinity-avatar-font-xs: 0.75rem;
741
946
  --trinity-avatar-font-sm: 0.75rem;
742
947
  --trinity-avatar-font-md: 0.875rem;
743
948
  --trinity-avatar-font-lg: 1rem;
744
949
  --trinity-avatar-font-xl: 1.25rem;
745
950
  --trinity-avatar-font-2xl: 1.5rem;
746
-
747
- /* ============================================
748
- COMPONENT TOKENS - BADGE
749
- ============================================ */
750
- --trinity-badge-padding-x: 8px;
751
- --trinity-badge-padding-y: 2px;
752
- --trinity-badge-border-radius: 9999px;
753
- --trinity-badge-font-size: 0.75rem;
754
- --trinity-badge-font-weight: 500;
755
-
756
- /* ============================================
757
- COMPONENT TOKENS - CHIP
758
- ============================================ */
951
+ --trinity-badge-font: 0.75rem;
952
+ --trinity-badge-size: 0.75rem;
953
+ --trinity-badge-weight: 500;
759
954
  --trinity-chip-height-sm: 24px;
760
955
  --trinity-chip-height-md: 32px;
761
956
  --trinity-chip-padding-sm-x: 8px;
762
957
  --trinity-chip-padding-sm-y: 4px;
763
958
  --trinity-chip-padding-md-x: 12px;
764
959
  --trinity-chip-padding-md-y: 6px;
765
- --trinity-chip-border-radius: 6px;
766
- --trinity-chip-font-sm: 0.75rem;
767
- --trinity-chip-font-md: 0.875rem;
768
-
769
- /* ============================================
770
- COMPONENT TOKENS - TOOLTIP
771
- ============================================ */
772
- --trinity-tooltip-padding-x: 12px;
773
- --trinity-tooltip-padding-y: 8px;
774
- --trinity-tooltip-border-radius: 6px;
775
- --trinity-tooltip-font-size: 0.875rem;
960
+ --trinity-chip-font-small: 0.75rem;
961
+ --trinity-chip-size-small: 0.75rem;
962
+ --trinity-chip-font-size-sm: 0.75rem;
963
+ --trinity-chip-font-medium: 0.875rem;
964
+ --trinity-chip-size-medium: 0.875rem;
965
+ --trinity-chip-font-size-md: 0.875rem;
966
+ --trinity-tooltip-font: 0.875rem;
967
+ --trinity-tooltip-size: 0.875rem;
776
968
  --trinity-tooltip-bg: #18181B;
777
- --trinity-tooltip-text: #FFFFFF;
778
-
779
- /* ============================================
780
- COMPONENT TOKENS - MODAL
781
- ============================================ */
782
- --trinity-modal-padding: 24px;
783
- --trinity-modal-border-radius: 16px;
784
- --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
785
- --trinity-modal-backdrop-opacity: 0.5;
786
969
  --trinity-modal-width-sm: 400px;
787
970
  --trinity-modal-width-md: 560px;
788
971
  --trinity-modal-width-lg: 720px;
789
- --trinity-modal-width-full: 90vw;
790
-
791
- /* ============================================
792
- COMPONENT TOKENS - SWITCH
793
- ============================================ */
794
- --trinity-switch-width-sm: 40px;
795
- --trinity-switch-width-md: 52px;
796
- --trinity-switch-height-sm: 24px;
797
- --trinity-switch-height-md: 32px;
798
- --trinity-switch-thumb-sm: 12px;
799
- --trinity-switch-thumb-md: 16px;
800
- --trinity-switch-thumb-checked-sm: 18px;
801
- --trinity-switch-thumb-checked-md: 24px;
802
- --trinity-switch-track-off: #E5E7EB;
803
- --trinity-switch-track-on: #050742;
804
- --trinity-switch-track-border: #D4D4D8;
805
-
806
- /* ============================================
807
- COMPONENT TOKENS - NAVIGATION
808
- ============================================ */
809
- /* Header */
972
+ --trinity-switch-width-sm: 36px;
973
+ --trinity-switch-width-md: 48px;
974
+ --trinity-switch-height-sm: 20px;
975
+ --trinity-switch-height-md: 28px;
976
+ --trinity-switch-thumb-sm: 16px;
977
+ --trinity-switch-thumb-md: 24px;
810
978
  --trinity-nav-header-height: 64px;
811
- --trinity-nav-appbar-height: 56px;
812
- --trinity-nav-header-bg: #050742;
979
+ --trinity-navigation-header-bg: #050742;
980
+ --trinity-nav-header-background: #050742;
813
981
  --trinity-nav-header-text: #FFFFFF;
814
-
815
- /* Sidebar */
816
982
  --trinity-nav-sidebar-width: 240px;
817
- --trinity-nav-sidebar-width-expanded: 200px;
818
- --trinity-nav-sidebar-collapsed-width: 56px;
819
- --trinity-nav-sidebar-bg: #050742;
820
- --trinity-nav-sidebar-bg-light: #FFFFFF;
821
- --trinity-nav-sidebar-border: #E5E7EB;
822
-
823
- /* Nav Items */
983
+ --trinity-nav-sidebar-collapsed-width: 64px;
984
+ --trinity-navigation-sidebar-bg: #050742;
985
+ --trinity-nav-sidebar-background: #050742;
824
986
  --trinity-nav-item-height: 44px;
825
- --trinity-nav-item-min-height: 40px;
826
987
  --trinity-nav-item-padding-x: 16px;
827
988
  --trinity-nav-item-padding-y: 12px;
828
- --trinity-nav-item-padding-collapsed: 8px;
829
989
  --trinity-nav-item-border-radius: 8px;
830
- --trinity-nav-item-gap: 12px;
831
-
832
- /* Nav Item States */
833
- --trinity-nav-item-bg-default: transparent;
834
- --trinity-nav-item-bg-hover: rgba(0, 0, 0, 0.04);
835
- --trinity-nav-item-bg-active: #050742;
836
- --trinity-nav-item-bg-selected: #050742;
837
- --trinity-nav-item-text-default: #18181B;
838
- --trinity-nav-item-text-hover: #18181B;
839
- --trinity-nav-item-text-active: #FFFFFF;
840
- --trinity-nav-item-text-selected: #FFFFFF;
841
- --trinity-nav-item-icon-default: #7841C9;
842
- --trinity-nav-item-icon-selected: #FFFFFF;
843
-
844
- /* Nav Special Item (Gradient) */
845
- --trinity-nav-item-special-gradient: linear-gradient(135deg, #FF6150 0%, #7841C9 100%);
846
- --trinity-nav-item-special-text: #FFFFFF;
847
- --trinity-nav-item-special-icon: #FF6150;
848
-
849
- /* Search Component (on dark header) */
990
+ --trinity-nav-footer-height: 40px;
991
+ --trinity-nav-footer-padding-x: 24px;
992
+ --trinity-nav-footer-padding-y: 8px;
993
+ --trinity-navigation-footer-light-bg: #F4F4F5;
994
+ --trinity-nav-footer-light-background: #F4F4F5;
995
+ --trinity-nav-footer-light-text: #6B7280;
996
+ --trinity-nav-footer-light-divider: #D4D4D8;
997
+ --trinity-nav-footer-light-link-hover: #7841C9;
998
+ --trinity-navigation-footer-dark-bg: #050742;
999
+ --trinity-nav-footer-dark-background: #050742;
1000
+ --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
1001
+ --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
1002
+ --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
1003
+ --trinity-button-font-sm: 0.875rem;
1004
+ --trinity-button-size-sm: 0.875rem;
1005
+ --trinity-button-font-md: 1rem;
1006
+ --trinity-button-size-md: 1rem;
1007
+ --trinity-button-font-lg: 1.125rem;
1008
+ --trinity-button-size-lg: 1.125rem;
1009
+ --trinity-input-font-sm: 0.875rem;
1010
+ --trinity-input-size-sm: 0.875rem;
1011
+ --trinity-input-font-md: 1rem;
1012
+ --trinity-input-size-md: 1rem;
1013
+ --trinity-input-font-lg: 1.125rem;
1014
+ --trinity-input-size-lg: 1.125rem;
1015
+ --trinity-chip-font-sm: 0.75rem;
1016
+ --trinity-chip-size-sm: 0.75rem;
1017
+ --trinity-chip-font-md: 0.875rem;
1018
+ --trinity-chip-size-md: 0.875rem;
1019
+ --trinity-nav-header-bg: #050742;
1020
+ --trinity-nav-sidebar-bg: #050742;
1021
+ --trinity-nav-footer-light-bg: #F4F4F5;
1022
+ --trinity-nav-footer-dark-bg: #050742;
1023
+
1024
+ /* Breakpoints */
1025
+ --trinity-breakpoint-xs: 0px;
1026
+ --trinity-breakpoint-sm: 600px;
1027
+ --trinity-breakpoint-md: 900px;
1028
+ --trinity-breakpoint-lg: 1200px;
1029
+ --trinity-breakpoint-xl: 1536px;
1030
+
1031
+ /* Touch targets */
1032
+ --trinity-touch-target-minimum: 44px;
1033
+ --trinity-touch-target-spacious: 48px;
1034
+
1035
+ /* Shirt-size icon scale */
1036
+ --trinity-icon-xs: 12px;
1037
+ --trinity-icon-sm: 14px;
1038
+ --trinity-icon-md: 16px;
1039
+ --trinity-icon-lg: 20px;
1040
+ --trinity-icon-xl: 24px;
1041
+ --trinity-icon-2xl: 32px;
1042
+ --trinity-icon-size-xs: 12px;
1043
+ --trinity-icon-size-sm: 14px;
1044
+ --trinity-icon-size-md: 16px;
1045
+ --trinity-icon-size-lg: 20px;
1046
+ --trinity-icon-size-xl: 24px;
1047
+
1048
+ /* Legacy compatibility tokens */
1049
+ --trinity-button-disabled-bg: #E5E7EB;
1050
+ --trinity-button-disabled-text: #9CA3AF;
1051
+ --trinity-button-primary-bg-active: #282964;
1052
+ --trinity-button-secondary-bg-active: #542CE8;
1053
+ --trinity-button-outlined-bg-active: #282964;
1054
+ --trinity-input-border-default: #E5E7EB;
1055
+ --trinity-input-border-hover: #9CA3AF;
1056
+ --trinity-input-border-focus: #7841C9;
1057
+ --trinity-input-border-error: #DC2626;
1058
+ --trinity-modal-bg: #1C1C1F;
1059
+ --trinity-modal-width-full: 90vw;
1060
+ --trinity-data-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
1061
+ --trinity-data-numeric-feature: 'tnum' 1;
1062
+ --trinity-text-micro-xs: 0.625rem;
1063
+ --trinity-text-micro-sm: 0.6875rem;
1064
+ --trinity-focus-ring-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
1065
+ --trinity-shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1066
+ --trinity-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1067
+ --trinity-shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1068
+ --trinity-shadow-input: none;
1069
+ --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1070
+ --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1071
+ --trinity-space-0-5: 2px;
1072
+ --trinity-space-1-5: 6px;
1073
+ --trinity-space-2-5: 10px;
1074
+ --trinity-switch-track-border: #D4D4D8;
1075
+ --trinity-switch-thumb-checked-sm: 18px;
1076
+ --trinity-switch-thumb-checked-md: 24px;
1077
+ --trinity-touch-target-comfortable: 48px;
1078
+ --trinity-nav-appbar-height: 56px;
1079
+ --trinity-nav-divider-on-dark: rgba(255, 255, 255, 0.3);
1080
+ --trinity-nav-divider-light: #E5E7EB;
1081
+ --trinity-nav-client-bg: rgba(255, 255, 255, 0.12);
1082
+ --trinity-nav-client-bg-hover: rgba(255, 255, 255, 0.15);
1083
+ --trinity-nav-client-text: #FFFFFF;
1084
+ --trinity-nav-client-radius: 12px;
1085
+ --trinity-nav-client-padding-x: 12px;
1086
+ --trinity-nav-client-padding-y: 6px;
1087
+ --trinity-nav-client-min-width: 180px;
850
1088
  --trinity-nav-search-bg: rgba(255, 255, 255, 0.12);
851
1089
  --trinity-nav-search-bg-hover: rgba(255, 255, 255, 0.15);
852
1090
  --trinity-nav-search-bg-focus: #FFFFFF;
@@ -859,488 +1097,98 @@
859
1097
  --trinity-nav-search-radius: 12px;
860
1098
  --trinity-nav-search-min-width: 300px;
861
1099
  --trinity-nav-search-max-width: 400px;
862
-
863
- /* Client Selector (on dark header) */
864
- --trinity-nav-client-bg: rgba(255, 255, 255, 0.12);
865
- --trinity-nav-client-bg-hover: rgba(255, 255, 255, 0.15);
866
- --trinity-nav-client-text: #FFFFFF;
867
- --trinity-nav-client-radius: 12px;
868
- --trinity-nav-client-min-width: 180px;
869
- --trinity-nav-client-padding-x: 12px;
870
- --trinity-nav-client-padding-y: 6px;
871
-
872
- /* Dividers on dark backgrounds */
873
- --trinity-nav-divider-on-dark: rgba(255, 255, 255, 0.3);
874
- --trinity-nav-divider-light: #E5E7EB;
875
-
876
- /* Header Icons */
1100
+ --trinity-nav-item-bg-default: transparent;
1101
+ --trinity-nav-item-bg-hover: rgba(0, 0, 0, 0.04);
1102
+ --trinity-nav-item-bg-selected: #050742;
1103
+ --trinity-nav-item-bg-active: #050742;
1104
+ --trinity-nav-item-text-default: #18181B;
1105
+ --trinity-nav-item-text-hover: #18181B;
1106
+ --trinity-nav-item-text-selected: #FFFFFF;
1107
+ --trinity-nav-item-text-active: #FFFFFF;
1108
+ --trinity-nav-item-icon-default: #7841C9;
1109
+ --trinity-nav-item-icon-selected: #FFFFFF;
1110
+ --trinity-nav-item-min-height: 40px;
1111
+ --trinity-nav-item-gap: 12px;
1112
+ --trinity-nav-item-padding-collapsed: 8px;
1113
+ --trinity-nav-item-special-gradient: linear-gradient(135deg, #FF6150 0%, #7841C9 100%);
1114
+ --trinity-nav-item-special-text: #FFFFFF;
1115
+ --trinity-nav-item-special-icon: #FF6150;
1116
+ --trinity-nav-footer-bg: #F3F4F6;
1117
+ --trinity-nav-footer-text: #6B7280;
1118
+ --trinity-nav-footer-link-hover: #050742;
1119
+ --trinity-nav-footer-divider: #E5E7EB;
877
1120
  --trinity-nav-icon-color: rgba(255, 255, 255, 0.7);
878
1121
  --trinity-nav-icon-hover: #FFFFFF;
879
1122
  --trinity-nav-icon-hover-bg: rgba(255, 255, 255, 0.12);
880
-
881
- /* Menu Dropdown */
882
1123
  --trinity-nav-menu-radius: 12px;
883
- --trinity-nav-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
884
1124
  --trinity-nav-menu-min-width: 240px;
1125
+ --trinity-nav-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
885
1126
  --trinity-nav-menu-item-padding-y: 12px;
886
-
887
- /* Footer */
888
- --trinity-nav-footer-height: 40px;
889
- --trinity-nav-footer-padding-x: 24px;
890
- --trinity-nav-footer-padding-y: 8px;
891
- --trinity-nav-footer-bg: #F3F4F6;
892
- --trinity-nav-footer-text: #6B7280;
893
- --trinity-nav-footer-divider: #E5E7EB;
894
- --trinity-nav-footer-link-hover: #050742;
895
- /* Footer dark variant (navy bg) */
896
- --trinity-nav-footer-dark-bg: #050742;
897
- --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
898
- --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
899
- --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
900
-
901
- /* ============================================
902
- SEMANTIC SHADOWS (Component-Specific)
903
- ============================================ */
904
- --trinity-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
905
- --trinity-shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
906
- --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);
907
- --trinity-shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.05);
908
- --trinity-shadow-input: none;
909
- --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
910
-
911
- /* ============================================
912
- GRADIENTS
913
- ============================================ */
914
- --trinity-gradient-primary: linear-gradient(135deg, #5F33EB 0%, #8D49CE 100%);
915
- --trinity-gradient-secondary: linear-gradient(135deg, #FF796F 0%, #FF665C 100%);
916
- --trinity-gradient-accent: linear-gradient(135deg, #47B6E9 0%, #239DDD 100%);
917
- --trinity-gradient-avatar-primary: linear-gradient(135deg, #6739ED 0%, #8D49CE 100%);
918
- --trinity-gradient-avatar-warm: linear-gradient(135deg, #FF8D85 0%, #FF7167 100%);
919
- --trinity-gradient-avatar-cool: linear-gradient(135deg, #47B6E9 0%, #6739ED 100%);
920
- --trinity-gradient-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
921
-
922
- /* ============================================
923
- TOUCH TARGETS (Accessibility)
924
- ============================================ */
925
- --trinity-touch-target-minimum: 44px;
926
- --trinity-touch-target-comfortable: 48px;
927
- --trinity-touch-target-spacious: 56px;
1127
+ --trinity-nav-sidebar-bg-light: #FFFFFF;
1128
+ --trinity-nav-sidebar-border: #E5E7EB;
1129
+ --trinity-nav-sidebar-width-expanded: 200px;
928
1130
  }
929
1131
 
930
- /* ============================================
931
- DARK MODE
932
- ============================================ */
933
- [data-theme="dark"],
934
- .dark-mode,
935
- :root.dark {
936
- /* Text Colors */
1132
+ /* Dark mode overrides — explicit opt-in via [data-theme="dark"] */
1133
+ [data-theme="dark"] {
937
1134
  --trinity-text-primary: #F9FAFB;
938
1135
  --trinity-text-secondary: #D1D5DB;
939
1136
  --trinity-text-tertiary: #9CA3AF;
940
1137
  --trinity-text-disabled: #6B7280;
941
- --trinity-text-inverse: #18181B;
942
-
943
- /* Background Colors */
944
1138
  --trinity-bg-primary: #121214;
945
1139
  --trinity-bg-secondary: #1C1C1F;
946
1140
  --trinity-bg-tertiary: #262629;
947
- --trinity-bg-inverse: #FAFAFA;
948
-
949
- /* Surface Colors */
950
- --trinity-surface-elevated: #1C1C1F;
951
- --trinity-surface-sunken: #0A0A0B;
952
- --trinity-surface-success: #0A1A10;
953
- --trinity-surface-error: #1F1315;
954
- --trinity-surface-warning: #1A1607;
955
- --trinity-surface-info: #0C1929;
956
-
957
- /* Border Colors */
958
1141
  --trinity-border-default: #3F3F46;
959
1142
  --trinity-border-subtle: #27272A;
960
1143
  --trinity-border-strong: #52525B;
961
-
962
- /* Interactive Colors */
963
1144
  --trinity-interactive-default: #A96ADA;
964
1145
  --trinity-interactive-hover: #FF8D85;
965
1146
  --trinity-interactive-active: #7E57F0;
966
1147
  --trinity-interactive-disabled: #374151;
967
1148
  --trinity-interactive-focus: #A96ADA;
968
-
969
- /* Status Colors */
970
1149
  --trinity-status-error-text: #FCA5A5;
971
- --trinity-status-error-bg: #1F1315;
1150
+ --trinity-status-error-background: #1F1315;
972
1151
  --trinity-status-error-border: #991B1B;
973
-
974
1152
  --trinity-status-warning-text: #FDE68A;
975
- --trinity-status-warning-bg: #1A1607;
1153
+ --trinity-status-warning-background: #1A1607;
976
1154
  --trinity-status-warning-border: #92400E;
977
-
978
1155
  --trinity-status-success-text: #86EFAC;
979
- --trinity-status-success-bg: #0A1A10;
1156
+ --trinity-status-success-background: #0A1A10;
980
1157
  --trinity-status-success-border: #166534;
981
-
982
1158
  --trinity-status-info-text: #7DD3FC;
983
- --trinity-status-info-bg: #0C1929;
1159
+ --trinity-status-info-background: #0C1929;
984
1160
  --trinity-status-info-border: #075985;
985
-
986
- /* Overlay Effects */
987
- --trinity-overlay-hover: rgba(255, 255, 255, 0.08);
988
- --trinity-overlay-hover-subtle: rgba(255, 255, 255, 0.04);
989
- --trinity-overlay-pressed: rgba(255, 255, 255, 0.12);
990
- --trinity-overlay-selected: rgba(255, 255, 255, 0.08);
991
-
992
- /* Shadows (enhanced for dark mode) */
993
- --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
994
- --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
995
- --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
996
- --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
997
- --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.07);
998
- --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
999
-
1000
- /* Component-Specific Overrides */
1001
- --trinity-card-bg: #1C1C1F;
1002
- --trinity-card-border: #3F3F46;
1003
- --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
1004
-
1005
- --trinity-input-bg-default: #1C1C1F;
1006
- --trinity-input-bg-disabled: #262629;
1007
- --trinity-input-border-default: #3F3F46;
1008
- --trinity-input-border-hover: #52525B;
1009
-
1010
- --trinity-tooltip-bg: #FAFAFA;
1011
- --trinity-tooltip-text: #18181B;
1012
-
1013
- --trinity-switch-track-off: #374151;
1014
- --trinity-switch-track-on: #FF8D85;
1015
- --trinity-switch-track-border: #6B7280;
1016
-
1017
- --trinity-modal-bg: #1C1C1F;
1018
- --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.07);
1019
-
1020
- /* Button Dark Mode Overrides */
1021
- --trinity-button-primary-bg: #FF7167;
1022
- --trinity-button-primary-bg-hover: #FF796F;
1023
- --trinity-button-primary-bg-active: #FF665C;
1024
- --trinity-button-primary-text: #FFFFFF;
1025
-
1026
- --trinity-button-secondary-bg: #9950D3;
1027
- --trinity-button-secondary-bg-hover: #A96ADA;
1028
- --trinity-button-secondary-bg-active: #8D49CE;
1029
- --trinity-button-secondary-text: #FFFFFF;
1030
-
1031
- --trinity-button-outlined-bg: transparent;
1032
- --trinity-button-outlined-bg-hover: #FF7167;
1033
- --trinity-button-outlined-bg-active: #FF665C;
1034
- --trinity-button-outlined-border: #FF8D85;
1035
- --trinity-button-outlined-text: #FF8D85;
1036
- --trinity-button-outlined-text-hover: #FFFFFF;
1037
-
1038
- --trinity-button-disabled-bg: #374151;
1039
- --trinity-button-disabled-text: #6B7280;
1040
-
1041
- /* Navigation Dark Mode Overrides */
1042
- --trinity-nav-sidebar-bg-light: #1C1C1F;
1043
- --trinity-nav-sidebar-border: #3F3F46;
1044
- --trinity-nav-item-bg-hover: rgba(255, 255, 255, 0.08);
1045
- --trinity-nav-item-bg-active: #A96ADA;
1046
- --trinity-nav-item-bg-selected: #A96ADA;
1047
- --trinity-nav-item-text-default: #F9FAFB;
1048
- --trinity-nav-item-text-hover: #F9FAFB;
1049
- --trinity-nav-item-icon-default: #A96ADA;
1050
- --trinity-nav-divider-light: #3F3F46;
1051
-
1052
- /* Footer Dark Mode Overrides */
1053
- --trinity-nav-footer-bg: #262629;
1054
- --trinity-nav-footer-text: #D1D5DB;
1055
- --trinity-nav-footer-divider: #3F3F46;
1056
- --trinity-nav-footer-link-hover: #F9FAFB;
1057
- --trinity-nav-footer-dark-bg: #121214;
1058
- --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
1059
- --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
1060
- --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
1061
1161
  }
1062
1162
 
1063
- /* System preference detection */
1163
+ /* Dark mode — follows OS preference unless explicit [data-theme="light"] is set */
1064
1164
  @media (prefers-color-scheme: dark) {
1065
- :root:not([data-theme="light"]) {
1066
- --trinity-text-primary: #F9FAFB;
1067
- --trinity-text-secondary: #D1D5DB;
1068
- --trinity-text-tertiary: #9CA3AF;
1069
- --trinity-bg-primary: #121214;
1070
- --trinity-bg-secondary: #1C1C1F;
1071
- --trinity-bg-tertiary: #262629;
1072
- --trinity-surface-elevated: #1C1C1F;
1073
- --trinity-border-default: #3F3F46;
1074
- --trinity-border-subtle: #27272A;
1165
+ :root:not([data-theme="light"]):not([data-theme="dark"]) {
1166
+ --trinity-text-primary: #F9FAFB;
1167
+ --trinity-text-secondary: #D1D5DB;
1168
+ --trinity-text-tertiary: #9CA3AF;
1169
+ --trinity-text-disabled: #6B7280;
1170
+ --trinity-bg-primary: #121214;
1171
+ --trinity-bg-secondary: #1C1C1F;
1172
+ --trinity-bg-tertiary: #262629;
1173
+ --trinity-border-default: #3F3F46;
1174
+ --trinity-border-subtle: #27272A;
1175
+ --trinity-border-strong: #52525B;
1176
+ --trinity-interactive-default: #A96ADA;
1177
+ --trinity-interactive-hover: #FF8D85;
1178
+ --trinity-interactive-active: #7E57F0;
1179
+ --trinity-interactive-disabled: #374151;
1180
+ --trinity-interactive-focus: #A96ADA;
1181
+ --trinity-status-error-text: #FCA5A5;
1182
+ --trinity-status-error-background: #1F1315;
1183
+ --trinity-status-error-border: #991B1B;
1184
+ --trinity-status-warning-text: #FDE68A;
1185
+ --trinity-status-warning-background: #1A1607;
1186
+ --trinity-status-warning-border: #92400E;
1187
+ --trinity-status-success-text: #86EFAC;
1188
+ --trinity-status-success-background: #0A1A10;
1189
+ --trinity-status-success-border: #166534;
1190
+ --trinity-status-info-text: #7DD3FC;
1191
+ --trinity-status-info-background: #0C1929;
1192
+ --trinity-status-info-border: #075985;
1075
1193
  }
1076
1194
  }
1077
-
1078
- /* ============================================
1079
- UTILITY CLASSES
1080
- ============================================ */
1081
-
1082
- /* Text Colors */
1083
- .trinity-text-primary { color: var(--trinity-text-primary); }
1084
- .trinity-text-secondary { color: var(--trinity-text-secondary); }
1085
- .trinity-text-tertiary { color: var(--trinity-text-tertiary); }
1086
- .trinity-text-brand { color: var(--trinity-brand-primary); }
1087
- .trinity-text-link { color: var(--trinity-text-link); }
1088
- .trinity-text-success { color: var(--trinity-status-success-text); }
1089
- .trinity-text-error { color: var(--trinity-status-error-text); }
1090
- .trinity-text-warning { color: var(--trinity-status-warning-text); }
1091
-
1092
- /* Background Colors */
1093
- .trinity-bg-primary { background-color: var(--trinity-bg-primary); }
1094
- .trinity-bg-secondary { background-color: var(--trinity-bg-secondary); }
1095
- .trinity-bg-tertiary { background-color: var(--trinity-bg-tertiary); }
1096
- .trinity-bg-brand { background-color: var(--trinity-brand-primary); }
1097
- .trinity-bg-surface { background-color: var(--trinity-surface-elevated); }
1098
- .trinity-bg-accent { background-color: var(--trinity-brand-accent); }
1099
-
1100
- /* Borders */
1101
- .trinity-border { border: 1px solid var(--trinity-border-default); }
1102
- .trinity-border-subtle { border: 1px solid var(--trinity-border-subtle); }
1103
- .trinity-border-strong { border: 1px solid var(--trinity-border-strong); }
1104
-
1105
- /* Border Radius */
1106
- .trinity-rounded-none { border-radius: var(--trinity-radius-none); }
1107
- .trinity-rounded-sm { border-radius: var(--trinity-radius-sm); }
1108
- .trinity-rounded { border-radius: var(--trinity-radius-md); }
1109
- .trinity-rounded-lg { border-radius: var(--trinity-radius-lg); }
1110
- .trinity-rounded-xl { border-radius: var(--trinity-radius-xl); }
1111
- .trinity-rounded-full { border-radius: var(--trinity-radius-full); }
1112
-
1113
- /* Shadows */
1114
- .trinity-shadow-none { box-shadow: var(--trinity-shadow-none); }
1115
- .trinity-shadow-sm { box-shadow: var(--trinity-shadow-sm); }
1116
- .trinity-shadow { box-shadow: var(--trinity-shadow-md); }
1117
- .trinity-shadow-lg { box-shadow: var(--trinity-shadow-lg); }
1118
- .trinity-shadow-xl { box-shadow: var(--trinity-shadow-xl); }
1119
-
1120
- /* Typography */
1121
- .trinity-font-sans { font-family: var(--trinity-font-family); }
1122
- .trinity-font-mono { font-family: var(--trinity-font-family-mono); }
1123
-
1124
- .trinity-text-xs { font-size: var(--trinity-text-xs); }
1125
- .trinity-text-sm { font-size: var(--trinity-text-sm); }
1126
- .trinity-text-base { font-size: var(--trinity-text-base); }
1127
- .trinity-text-lg { font-size: var(--trinity-text-lg); }
1128
- .trinity-text-xl { font-size: var(--trinity-text-xl); }
1129
- .trinity-text-2xl { font-size: var(--trinity-text-2xl); }
1130
- .trinity-text-3xl { font-size: var(--trinity-text-3xl); }
1131
-
1132
- .trinity-font-light { font-weight: var(--trinity-font-light); }
1133
- .trinity-font-regular { font-weight: var(--trinity-font-regular); }
1134
- .trinity-font-medium { font-weight: var(--trinity-font-medium); }
1135
- .trinity-font-semibold { font-weight: var(--trinity-font-semibold); }
1136
- .trinity-font-bold { font-weight: var(--trinity-font-bold); }
1137
-
1138
- /* Transitions */
1139
- .trinity-transition-fast { transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out); }
1140
- .trinity-transition { transition: all var(--trinity-duration-normal) var(--trinity-easing-in-out); }
1141
- .trinity-transition-slow { transition: all var(--trinity-duration-slow) var(--trinity-easing-in-out); }
1142
-
1143
- /* Opacity */
1144
- .trinity-opacity-50 { opacity: var(--trinity-opacity-50); }
1145
- .trinity-opacity-75 { opacity: var(--trinity-opacity-75); }
1146
- .trinity-opacity-disabled { opacity: var(--trinity-opacity-50); cursor: not-allowed; }
1147
-
1148
- /* Focus Ring */
1149
- .trinity-focus-ring:focus-visible {
1150
- outline: 2px solid var(--trinity-focus-ring);
1151
- outline-offset: 2px;
1152
- }
1153
-
1154
- /* Data Typography */
1155
- .trinity-tabular-nums {
1156
- font-family: var(--trinity-data-font-family);
1157
- font-feature-settings: var(--trinity-data-numeric-feature);
1158
- }
1159
-
1160
- /* ============================================
1161
- NAVIGATION UTILITY CLASSES
1162
- ============================================ */
1163
-
1164
- /* Top Nav Header */
1165
- .trinity-nav-header {
1166
- height: var(--trinity-nav-header-height);
1167
- background-color: var(--trinity-nav-header-bg);
1168
- color: var(--trinity-nav-header-text);
1169
- }
1170
-
1171
- .trinity-nav-appbar {
1172
- height: var(--trinity-nav-appbar-height);
1173
- background-color: var(--trinity-nav-header-bg);
1174
- color: var(--trinity-nav-header-text);
1175
- }
1176
-
1177
- /* Sidebar */
1178
- .trinity-nav-sidebar {
1179
- width: var(--trinity-nav-sidebar-width);
1180
- background-color: var(--trinity-nav-sidebar-bg-light);
1181
- border-right: 1px solid var(--trinity-nav-sidebar-border);
1182
- transition: width var(--trinity-duration-normal) var(--trinity-easing-in-out);
1183
- }
1184
-
1185
- .trinity-nav-sidebar--collapsed {
1186
- width: var(--trinity-nav-sidebar-collapsed-width);
1187
- }
1188
-
1189
- .trinity-nav-sidebar--dark {
1190
- background-color: var(--trinity-nav-sidebar-bg);
1191
- border-right-color: var(--trinity-nav-divider-on-dark);
1192
- }
1193
-
1194
- /* Nav Items */
1195
- .trinity-nav-item {
1196
- display: flex;
1197
- align-items: center;
1198
- height: var(--trinity-nav-item-height);
1199
- padding: var(--trinity-nav-item-padding-y) var(--trinity-nav-item-padding-x);
1200
- border-radius: var(--trinity-nav-item-border-radius);
1201
- background-color: var(--trinity-nav-item-bg-default);
1202
- color: var(--trinity-nav-item-text-default);
1203
- transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out);
1204
- cursor: pointer;
1205
- gap: var(--trinity-nav-item-gap);
1206
- text-decoration: none;
1207
- }
1208
-
1209
- .trinity-nav-item:hover {
1210
- background-color: var(--trinity-nav-item-bg-hover);
1211
- color: var(--trinity-nav-item-text-hover);
1212
- }
1213
-
1214
- .trinity-nav-item--active,
1215
- .trinity-nav-item--selected {
1216
- background-color: var(--trinity-nav-item-bg-selected);
1217
- color: var(--trinity-nav-item-text-selected);
1218
- }
1219
-
1220
- .trinity-nav-item--active:hover,
1221
- .trinity-nav-item--selected:hover {
1222
- background-color: var(--trinity-nav-item-bg-selected);
1223
- }
1224
-
1225
- .trinity-nav-item--special {
1226
- background: var(--trinity-nav-item-special-gradient);
1227
- color: var(--trinity-nav-item-special-text);
1228
- }
1229
-
1230
- .trinity-nav-item__icon {
1231
- display: flex;
1232
- align-items: center;
1233
- justify-content: center;
1234
- width: var(--trinity-icon-navigation);
1235
- height: var(--trinity-icon-navigation);
1236
- color: var(--trinity-nav-item-icon-default);
1237
- }
1238
-
1239
- .trinity-nav-item--active .trinity-nav-item__icon,
1240
- .trinity-nav-item--selected .trinity-nav-item__icon {
1241
- color: var(--trinity-nav-item-icon-selected);
1242
- }
1243
-
1244
- /* Search on dark header */
1245
- .trinity-nav-search {
1246
- position: relative;
1247
- display: flex;
1248
- align-items: center;
1249
- min-width: var(--trinity-nav-search-min-width);
1250
- max-width: var(--trinity-nav-search-max-width);
1251
- background-color: var(--trinity-nav-search-bg);
1252
- border-radius: var(--trinity-nav-search-radius);
1253
- transition: background-color var(--trinity-duration-fast) var(--trinity-easing-in-out);
1254
- }
1255
-
1256
- .trinity-nav-search:hover {
1257
- background-color: var(--trinity-nav-search-bg-hover);
1258
- }
1259
-
1260
- .trinity-nav-search--focused {
1261
- background-color: var(--trinity-nav-search-bg-focus);
1262
- }
1263
-
1264
- .trinity-nav-search__input {
1265
- flex: 1;
1266
- background: transparent;
1267
- border: none;
1268
- outline: none;
1269
- padding: 8px 16px 8px 40px;
1270
- color: var(--trinity-nav-search-text);
1271
- font-size: var(--trinity-body-small-size);
1272
- }
1273
-
1274
- .trinity-nav-search__input::placeholder {
1275
- color: var(--trinity-nav-search-placeholder);
1276
- }
1277
-
1278
- .trinity-nav-search--focused .trinity-nav-search__input {
1279
- color: var(--trinity-nav-search-text-focus);
1280
- }
1281
-
1282
- .trinity-nav-search--focused .trinity-nav-search__input::placeholder {
1283
- color: var(--trinity-nav-search-placeholder-focus);
1284
- }
1285
-
1286
- .trinity-nav-search__icon {
1287
- position: absolute;
1288
- left: 12px;
1289
- color: var(--trinity-nav-search-icon);
1290
- }
1291
-
1292
- .trinity-nav-search--focused .trinity-nav-search__icon {
1293
- color: var(--trinity-nav-search-icon-focus);
1294
- }
1295
-
1296
- /* Client Selector */
1297
- .trinity-nav-client {
1298
- display: flex;
1299
- align-items: center;
1300
- justify-content: space-between;
1301
- min-width: var(--trinity-nav-client-min-width);
1302
- padding: var(--trinity-nav-client-padding-y) var(--trinity-nav-client-padding-x);
1303
- background-color: var(--trinity-nav-client-bg);
1304
- color: var(--trinity-nav-client-text);
1305
- border: none;
1306
- border-radius: var(--trinity-nav-client-radius);
1307
- cursor: pointer;
1308
- font-size: var(--trinity-body-small-size);
1309
- transition: background-color var(--trinity-duration-fast) var(--trinity-easing-in-out);
1310
- }
1311
-
1312
- .trinity-nav-client:hover {
1313
- background-color: var(--trinity-nav-client-bg-hover);
1314
- }
1315
-
1316
- /* Header Icon Buttons */
1317
- .trinity-nav-icon-btn {
1318
- display: flex;
1319
- align-items: center;
1320
- justify-content: center;
1321
- width: 40px;
1322
- height: 40px;
1323
- border-radius: var(--trinity-radius-full);
1324
- background-color: transparent;
1325
- color: var(--trinity-nav-icon-color);
1326
- border: none;
1327
- cursor: pointer;
1328
- transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out);
1329
- }
1330
-
1331
- .trinity-nav-icon-btn:hover {
1332
- background-color: var(--trinity-nav-icon-hover-bg);
1333
- color: var(--trinity-nav-icon-hover);
1334
- }
1335
-
1336
- /* Menu Dropdown */
1337
- .trinity-nav-menu {
1338
- min-width: var(--trinity-nav-menu-min-width);
1339
- border-radius: var(--trinity-nav-menu-radius);
1340
- box-shadow: var(--trinity-nav-menu-shadow);
1341
- background-color: var(--trinity-surface-elevated);
1342
- }
1343
-
1344
- .trinity-nav-menu__item {
1345
- padding: var(--trinity-nav-menu-item-padding-y) var(--trinity-nav-item-padding-x);
1346
- }