@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

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 (246) hide show
  1. package/README.md +35 -11
  2. package/dist/README.md +35 -11
  3. package/dist/design-tokens.css +300 -85
  4. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +100 -64
  5. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
  6. package/dist/icons.js +306 -0
  7. package/dist/package.json +24 -5
  8. package/{src/lib/site-drakkar/site-drakkar.config.ts → dist/site-drakkar.js} +64 -130
  9. package/dist/src/tokens/viking-tokens.json +9 -7
  10. package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +97 -3
  11. package/dist/viking-components.css +161 -70
  12. package/dist/viking-tokens.json +9 -7
  13. package/dist/viking-ui-elements.js +44 -32
  14. package/dist/viking-ui.css +1 -1
  15. package/dist/web-components.js +44 -32
  16. package/package.json +30 -8
  17. package/dist/scripts/build-web-components.mjs +0 -37
  18. package/dist/src/web/badge/viking-badge-wc.ts +0 -116
  19. package/dist/src/web/button/viking-button-wc.ts +0 -165
  20. package/dist/src/web/callout/viking-callout-wc.ts +0 -105
  21. package/dist/src/web/card/viking-card-wc.ts +0 -67
  22. package/dist/src/web/core/base.ts +0 -56
  23. package/dist/src/web/core/dom.ts +0 -53
  24. package/dist/src/web/core/icons-inline.ts +0 -44
  25. package/dist/src/web/core/styles.ts +0 -1261
  26. package/dist/src/web/core/types.ts +0 -19
  27. package/dist/src/web/field/viking-field-wc.ts +0 -154
  28. package/dist/src/web/index.ts +0 -73
  29. package/dist/src/web/input/viking-input-wc.ts +0 -211
  30. package/dist/src/web/modal/viking-modal-wc.ts +0 -187
  31. package/dist/src/web/search-palette/viking-search-palette-wc.ts +0 -495
  32. package/dist/src/web/select/viking-select-wc.ts +0 -218
  33. package/dist/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  34. package/dist/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  35. package/dist/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  36. package/dist/src/web/types.ts +0 -37
  37. package/dist/src/web/web-components.spec.ts +0 -297
  38. package/src/assets/drakkar-favicon.svg +0 -17
  39. package/src/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
  40. package/src/assets/fonts/inter/InterVariable.woff2 +0 -0
  41. package/src/core/brand/deml-lockup.svg +0 -5
  42. package/src/core/brand/deml-mark-compact.svg +0 -4
  43. package/src/core/brand/deml-mark-filled.svg +0 -3
  44. package/src/core/brand/deml-mark-outline.svg +0 -4
  45. package/src/core/brand-icons.ts +0 -62
  46. package/src/core/icons.spec.ts +0 -52
  47. package/src/core/icons.ts +0 -206
  48. package/src/core/integration-brand-icons.ts +0 -77
  49. package/src/core/lucide-paths.generated.ts +0 -130
  50. package/src/core/types.ts +0 -85
  51. package/src/core/uid.ts +0 -7
  52. package/src/elements/button/viking-button.ts +0 -201
  53. package/src/elements/card/viking-card.ts +0 -60
  54. package/src/elements/core/dom.ts +0 -33
  55. package/src/elements/core/styles.ts +0 -28
  56. package/src/elements/modal/viking-modal.ts +0 -154
  57. package/src/index.ts +0 -1
  58. package/src/lib/accordion/accordion.ts +0 -126
  59. package/src/lib/app-header/app-header.scss +0 -274
  60. package/src/lib/app-header/app-header.ts +0 -43
  61. package/src/lib/app-sidebar/app-sidebar.scss +0 -415
  62. package/src/lib/app-sidebar/app-sidebar.ts +0 -29
  63. package/src/lib/auth-panel/auth-panel.spec.ts +0 -132
  64. package/src/lib/auth-panel/auth-panel.ts +0 -228
  65. package/src/lib/autocomplete/autocomplete.ts +0 -223
  66. package/src/lib/avatar/avatar.ts +0 -126
  67. package/src/lib/badge/badge.ts +0 -182
  68. package/src/lib/bar/bar.ts +0 -31
  69. package/src/lib/brand/brand.ts +0 -60
  70. package/src/lib/breadcrumbs/breadcrumbs.ts +0 -81
  71. package/src/lib/button/button-group.ts +0 -40
  72. package/src/lib/button/button.scss +0 -119
  73. package/src/lib/button/button.ts +0 -98
  74. package/src/lib/calendar/calendar.ts +0 -253
  75. package/src/lib/callout/callout.ts +0 -211
  76. package/src/lib/card/card-title.spec.ts +0 -27
  77. package/src/lib/card/card-title.ts +0 -50
  78. package/src/lib/card/card.ts +0 -200
  79. package/src/lib/carousel/carousel.ts +0 -206
  80. package/src/lib/chart/chart-zoom.spec.ts +0 -65
  81. package/src/lib/chart/chart-zoom.ts +0 -71
  82. package/src/lib/chart/chart.ts +0 -1257
  83. package/src/lib/chart-card-header/chart-card-header.ts +0 -80
  84. package/src/lib/chart-empty-state/chart-empty-state.ts +0 -146
  85. package/src/lib/chart-panel/chart-panel.ts +0 -133
  86. package/src/lib/checkbox/checkbox.ts +0 -139
  87. package/src/lib/color-picker/color-picker.ts +0 -148
  88. package/src/lib/command/command.ts +0 -260
  89. package/src/lib/composer/composer.ts +0 -180
  90. package/src/lib/confirm-dialog/confirm-dialog.ts +0 -163
  91. package/src/lib/confirm-dialog/dialog.service.ts +0 -79
  92. package/src/lib/context/context.ts +0 -75
  93. package/src/lib/core/brand-icons.ts +0 -62
  94. package/src/lib/core/cva.ts +0 -33
  95. package/src/lib/core/icons.ts +0 -206
  96. package/src/lib/core/integration-brand-icons.ts +0 -77
  97. package/src/lib/core/lucide-paths.generated.ts +0 -130
  98. package/src/lib/date-picker/date-picker.ts +0 -139
  99. package/src/lib/dropdown/dropdown.ts +0 -188
  100. package/src/lib/editor/editor.ts +0 -170
  101. package/src/lib/empty-state/empty-state.ts +0 -100
  102. package/src/lib/fab/fab.ts +0 -76
  103. package/src/lib/field/field.ts +0 -111
  104. package/src/lib/file-upload/file-upload.ts +0 -208
  105. package/src/lib/footer/footer.scss +0 -162
  106. package/src/lib/footer/footer.ts +0 -28
  107. package/src/lib/form-section/form-section.ts +0 -200
  108. package/src/lib/forms.spec.ts +0 -92
  109. package/src/lib/gauge-arc/gauge-arc.ts +0 -85
  110. package/src/lib/hud-panel/hud-panel.ts +0 -27
  111. package/src/lib/icon/icon.ts +0 -284
  112. package/src/lib/icon-badge/icon-badge.ts +0 -87
  113. package/src/lib/icon-heading/icon-heading.spec.ts +0 -32
  114. package/src/lib/icon-heading/icon-heading.ts +0 -38
  115. package/src/lib/icon-text/icon-text.ts +0 -120
  116. package/src/lib/input/input.ts +0 -119
  117. package/src/lib/kanban/kanban.ts +0 -211
  118. package/src/lib/kbd/kbd.ts +0 -32
  119. package/src/lib/label/label.ts +0 -39
  120. package/src/lib/loading-overlay/loading-overlay.ts +0 -80
  121. package/src/lib/menubar/menubar.ts +0 -77
  122. package/src/lib/metric-card/metric-card.ts +0 -33
  123. package/src/lib/modal/modal.ts +0 -207
  124. package/src/lib/native-select/native-select.ts +0 -124
  125. package/src/lib/navbar/navbar.ts +0 -124
  126. package/src/lib/navigation-menu/navigation-menu.ts +0 -116
  127. package/src/lib/otp-input/otp-input.ts +0 -164
  128. package/src/lib/page-back-link/page-back-link.ts +0 -74
  129. package/src/lib/page-header/page-header.ts +0 -70
  130. package/src/lib/pagination/pagination.ts +0 -157
  131. package/src/lib/pillbox/pillbox.ts +0 -157
  132. package/src/lib/popover/popover.ts +0 -92
  133. package/src/lib/profile/profile.ts +0 -73
  134. package/src/lib/progress/progress.ts +0 -123
  135. package/src/lib/radio/radio.ts +0 -132
  136. package/src/lib/ring-gauge/ring-gauge.ts +0 -75
  137. package/src/lib/scroll-area/scroll-area.ts +0 -57
  138. package/src/lib/search-palette/search-palette.scss +0 -288
  139. package/src/lib/search-palette/search-palette.ts +0 -114
  140. package/src/lib/select/select.ts +0 -292
  141. package/src/lib/separator/separator.ts +0 -59
  142. package/src/lib/sheet/sheet.ts +0 -192
  143. package/src/lib/sidebar-nav/sidebar-nav.scss +0 -218
  144. package/src/lib/sidebar-nav/sidebar-nav.ts +0 -158
  145. package/src/lib/site-drakkar/site-footer.ts +0 -133
  146. package/src/lib/site-drakkar/site-navbar.scss +0 -2
  147. package/src/lib/site-drakkar/site-navbar.ts +0 -286
  148. package/src/lib/site-drakkar/suite-search-items.spec.ts +0 -61
  149. package/src/lib/site-drakkar/suite-search-items.ts +0 -246
  150. package/src/lib/skeleton/skeleton.ts +0 -51
  151. package/src/lib/slider/slider.ts +0 -133
  152. package/src/lib/spinner/spinner.ts +0 -75
  153. package/src/lib/status-metric-row/status-metric-row.ts +0 -74
  154. package/src/lib/suite-search-palette/suite-search-palette.ts +0 -95
  155. package/src/lib/switch/switch.ts +0 -131
  156. package/src/lib/table/table.ts +0 -137
  157. package/src/lib/tabs/tab-panel.ts +0 -61
  158. package/src/lib/tabs/tab.ts +0 -107
  159. package/src/lib/tabs/tabs.ts +0 -109
  160. package/src/lib/textarea/textarea.ts +0 -103
  161. package/src/lib/theme-toggle/theme-toggle.spec.ts +0 -40
  162. package/src/lib/theme-toggle/theme-toggle.ts +0 -40
  163. package/src/lib/time-picker/time-picker.ts +0 -197
  164. package/src/lib/timeline/timeline.ts +0 -152
  165. package/src/lib/toast/toast.ts +0 -196
  166. package/src/lib/toggle/toggle-group.ts +0 -60
  167. package/src/lib/toggle/toggle.ts +0 -101
  168. package/src/lib/tooltip/tooltip.ts +0 -119
  169. package/src/lib/typography/heading.ts +0 -52
  170. package/src/lib/typography/text.ts +0 -51
  171. package/src/lib/uptime-bar/uptime-bar.ts +0 -55
  172. package/src/lib/verification-code-field/verification-code-field.ts +0 -149
  173. package/src/lib/whitepaper-cta/whitepaper-cta.scss +0 -130
  174. package/src/lib/whitepaper-cta/whitepaper-cta.ts +0 -78
  175. package/src/lib/wizard/wizard.ts +0 -80
  176. package/src/public-api.ts +0 -172
  177. package/src/styles/_buttons.scss +0 -386
  178. package/src/styles/_component-primitives.scss +0 -183
  179. package/src/styles/_drakkar-buttons.scss +0 -85
  180. package/src/styles/_fonts.scss +0 -22
  181. package/src/styles/_forms.scss +0 -66
  182. package/src/styles/_input.scss +0 -106
  183. package/src/styles/_layout-enforcement.scss +0 -229
  184. package/src/styles/_layout-rhythm.scss +0 -158
  185. package/src/styles/_legacy-aliases.scss +0 -212
  186. package/src/styles/_series-colors.scss +0 -24
  187. package/src/styles/_static-primitives.scss +0 -857
  188. package/src/styles/_typography.scss +0 -87
  189. package/src/styles/_variables.scss +0 -527
  190. package/src/styles/components/a11y.scss +0 -90
  191. package/src/styles/components/badges.scss +0 -102
  192. package/src/styles/components/extracted-utilities.scss +0 -459
  193. package/src/styles/components/footer.scss +0 -168
  194. package/src/styles/components/icon-heading.scss +0 -47
  195. package/src/styles/components/icon-inline.scss +0 -101
  196. package/src/styles/components/layout.scss +0 -59
  197. package/src/styles/components/utilities.scss +0 -131
  198. package/src/styles/components/viking-inspired.scss +0 -204
  199. package/src/styles/components/whitepaper-cta.scss +0 -130
  200. package/src/styles/components-bundle.scss +0 -9
  201. package/src/styles/components.scss +0 -442
  202. package/src/styles/deml-components.scss +0 -10
  203. package/src/styles/index.scss +0 -8
  204. package/src/styles/layout-shell.scss +0 -111
  205. package/src/styles/page-shell.scss +0 -859
  206. package/src/styles/static-navbar.scss +0 -1250
  207. package/src/styles/surfaces/backend.scss +0 -154
  208. package/src/styles/surfaces/docs-global.scss +0 -73
  209. package/src/styles/surfaces/docs-shell.scss +0 -437
  210. package/src/styles/surfaces/docs-showcase.scss +0 -1153
  211. package/src/styles/surfaces/marketing-cta.scss +0 -62
  212. package/src/styles/surfaces/marketing-docs-bento.scss +0 -67
  213. package/src/styles/surfaces/marketing-global.scss +0 -748
  214. package/src/styles/surfaces/marketing-landing.scss +0 -1526
  215. package/src/styles/surfaces/marketing-publication.scss +0 -535
  216. package/src/styles/surfaces/marketing-theme.scss +0 -14
  217. package/src/styles/surfaces/swagger-ui.scss +0 -1013
  218. package/src/styles/tokens-export.scss +0 -18
  219. package/src/styles/tokens.scss +0 -5
  220. package/src/styles/viking-ui-bundle.scss +0 -23
  221. package/src/styles/viking-ui.scss +0 -272
  222. package/src/tokens/series-presets.ts +0 -15
  223. package/src/tokens/tailwind.preset.js +0 -209
  224. package/src/tokens/viking-tokens.json +0 -318
  225. package/src/viking-ui.spec.ts +0 -416
  226. package/src/web/badge/viking-badge-wc.ts +0 -116
  227. package/src/web/button/viking-button-wc.ts +0 -165
  228. package/src/web/callout/viking-callout-wc.ts +0 -105
  229. package/src/web/card/viking-card-wc.ts +0 -67
  230. package/src/web/core/base.ts +0 -56
  231. package/src/web/core/dom.ts +0 -53
  232. package/src/web/core/icons-inline.ts +0 -44
  233. package/src/web/core/styles.ts +0 -1261
  234. package/src/web/core/types.ts +0 -19
  235. package/src/web/field/viking-field-wc.ts +0 -154
  236. package/src/web/index.ts +0 -73
  237. package/src/web/input/viking-input-wc.ts +0 -211
  238. package/src/web/modal/viking-modal-wc.ts +0 -187
  239. package/src/web/search-palette/viking-search-palette-wc.ts +0 -495
  240. package/src/web/select/viking-select-wc.ts +0 -218
  241. package/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  242. package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  243. package/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  244. package/src/web/types.ts +0 -37
  245. package/src/web/web-components.spec.ts +0 -297
  246. package/src/web-components/index.ts +0 -1
package/dist/design-tokens.css CHANGED
@@ -5,7 +5,7 @@
5
5
  * Static CSS: npm run build:viking-ui:package (or python scripts/sync_design_system.py) */
6
6
  :root {
7
7
  color-scheme: dark light;
8
- /* ── Deep navy surfaces (Lockheed × SpaceX precision aesthetic) ──────── */
8
+ /* ── Deep navy surfaces (Lockheed Martin x The Northman battlefield) ──── */
9
9
  --viking-navy-1000: #01030a;
10
10
  --viking-navy-950: #030818;
11
11
  --viking-navy-900: #0a1024;
@@ -111,9 +111,11 @@
111
111
  --viking-space-20: 256px;
112
112
  --viking-space-24: 320px;
113
113
  /* ── Typography (Inter self-hosted — see _fonts.scss) ───────────────────── */
114
- --viking-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
115
- 'Helvetica Neue', Arial, sans-serif;
116
- --viking-font-family-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas,
114
+ --viking-font-family:
115
+ "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
116
+ "Helvetica Neue", Arial, sans-serif;
117
+ --viking-font-family-mono:
118
+ ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas,
117
119
  monospace;
118
120
  --viking-font-size-2xs: 11px;
119
121
  --viking-font-size-xs: 12px;
@@ -144,27 +146,27 @@
144
146
  --viking-letter-spacing-wide: 0.025em;
145
147
  --viking-letter-spacing-wider: 0.05em;
146
148
  --viking-letter-spacing-caps: 0.08em;
147
- --viking-type-caption:
148
- var(--viking-font-weight-medium) var(--viking-font-size-xs) /
149
- var(--viking-line-height-normal) var(--viking-font-family);
150
- --viking-type-body-sm:
151
- var(--viking-font-weight-regular) var(--viking-font-size-sm) /
152
- var(--viking-line-height-normal) var(--viking-font-family);
153
- --viking-type-body:
154
- var(--viking-font-weight-regular) var(--viking-font-size-base) /
155
- var(--viking-line-height-normal) var(--viking-font-family);
156
- --viking-type-body-lg:
157
- var(--viking-font-weight-regular) var(--viking-font-size-md) /
158
- var(--viking-line-height-relaxed) var(--viking-font-family);
159
- --viking-type-heading-sm:
160
- var(--viking-font-weight-semibold) var(--viking-font-size-lg) /
161
- var(--viking-line-height-tight) var(--viking-font-family);
162
- --viking-type-heading:
163
- var(--viking-font-weight-bold) var(--viking-font-size-2xl) /
164
- var(--viking-line-height-tight) var(--viking-font-family);
165
- --viking-type-display:
166
- var(--viking-font-weight-extrabold) var(--viking-font-size-4xl) /
167
- var(--viking-line-height-none) var(--viking-font-family);
149
+ --viking-type-caption: var(--viking-font-weight-medium)
150
+ var(--viking-font-size-xs) / var(--viking-line-height-normal)
151
+ var(--viking-font-family);
152
+ --viking-type-body-sm: var(--viking-font-weight-regular)
153
+ var(--viking-font-size-sm) / var(--viking-line-height-normal)
154
+ var(--viking-font-family);
155
+ --viking-type-body: var(--viking-font-weight-regular)
156
+ var(--viking-font-size-base) / var(--viking-line-height-normal)
157
+ var(--viking-font-family);
158
+ --viking-type-body-lg: var(--viking-font-weight-regular)
159
+ var(--viking-font-size-md) / var(--viking-line-height-relaxed)
160
+ var(--viking-font-family);
161
+ --viking-type-heading-sm: var(--viking-font-weight-semibold)
162
+ var(--viking-font-size-lg) / var(--viking-line-height-tight)
163
+ var(--viking-font-family);
164
+ --viking-type-heading: var(--viking-font-weight-bold)
165
+ var(--viking-font-size-2xl) / var(--viking-line-height-tight)
166
+ var(--viking-font-family);
167
+ --viking-type-display: var(--viking-font-weight-extrabold)
168
+ var(--viking-font-size-4xl) / var(--viking-line-height-none)
169
+ var(--viking-font-family);
168
170
  /* ── Border radius — 6–12px premium feel ─────────────────────────────────── */
169
171
  --viking-radius-xs: 4px;
170
172
  --viking-radius-sm: 6px;
@@ -175,7 +177,7 @@
175
177
  --viking-radius-2xl: 24px;
176
178
  --viking-radius-pill: 999px;
177
179
  --viking-radius-full: var(--viking-radius-pill);
178
- /* ── Elevation — soft shadows with subtle metallic top-edge ──────────────── */
180
+ /* ── Elevation — tactile shadows with subtle metallic top-edge ───────────── */
179
181
  --viking-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
180
182
  --viking-shadow-sm:
181
183
  0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12),
@@ -190,8 +192,10 @@
190
192
  --viking-shadow-hover:
191
193
  0 8px 16px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.1),
192
194
  inset 0 1px 0 rgba(255, 255, 255, 0.06);
193
- --viking-shadow-focus: 0 0 0 var(--viking-ring-offset) var(--viking-bg),
194
- 0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width)) var(--viking-ring);
195
+ --viking-shadow-focus:
196
+ 0 0 0 var(--viking-ring-offset) var(--viking-bg),
197
+ 0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width))
198
+ var(--viking-ring);
195
199
  --viking-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
196
200
  /* ── Chart scale — unified responsive min/max (matches 720×240 SVG viewBox) ─ */
197
201
  --viking-chart-ratio: 3 / 1;
@@ -243,8 +247,10 @@
243
247
  transform var(--viking-duration) var(--viking-ease-default),
244
248
  opacity var(--viking-duration) var(--viking-ease-default);
245
249
  --viking-transition: all var(--viking-duration) var(--viking-ease-default);
246
- --viking-transition-fast: all var(--viking-duration-fast) var(--viking-ease-default);
247
- --viking-transition-transform: transform var(--viking-duration) var(--viking-ease-emphasized);
250
+ --viking-transition-fast: all var(--viking-duration-fast)
251
+ var(--viking-ease-default);
252
+ --viking-transition-transform: transform var(--viking-duration)
253
+ var(--viking-ease-emphasized);
248
254
  /* ── Interactive state ───────────────────────────────────────────────────── */
249
255
  --viking-state-hover-lift: -1px;
250
256
  --viking-state-active-scale: 0.985;
@@ -272,6 +278,8 @@
272
278
  --viking-section-padding-y-compact: var(--viking-space-5);
273
279
  --viking-card-padding: var(--viking-space-4);
274
280
  --viking-card-padding-compact: var(--viking-space-3);
281
+ --viking-card-content-gap: var(--viking-space-3);
282
+ --viking-card-content-gap-compact: var(--viking-space-2);
275
283
  --viking-panel-padding: var(--viking-space-4);
276
284
  --viking-panel-header-padding: var(--viking-space-3) var(--viking-space-4);
277
285
  --viking-form-max-width: 42rem;
@@ -282,7 +290,7 @@
282
290
  --viking-metric-card-min-height: 6.5rem;
283
291
  --viking-metric-card-tall-min-height: 8.25rem;
284
292
  --viking-metric-card-min-width: 10rem;
285
- --viking-surface-hairline-strength: 22%;
293
+ --viking-surface-hairline-strength: 28%;
286
294
  /* ── Layering ────────────────────────────────────────────────────────────── */
287
295
  --viking-z-overlay: 1000;
288
296
  --viking-z-toast: 1100;
@@ -316,42 +324,110 @@ html[data-theme=dark] {
316
324
  --viking-text-link: var(--viking-electric-300);
317
325
  --viking-text-link-hover: var(--viking-electric-200);
318
326
  --viking-text-inverted: var(--viking-charcoal-900);
319
- --viking-border: color-mix(in srgb, var(--viking-metallic-600) 48%, transparent);
320
- --viking-border-strong: color-mix(in srgb, var(--viking-metallic-400) 68%, transparent);
321
- --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 28%, transparent);
322
- --viking-border-accent: color-mix(in srgb, var(--viking-electric-500) 72%, transparent);
327
+ --viking-border: color-mix(
328
+ in srgb,
329
+ var(--viking-metallic-600) 48%,
330
+ transparent
331
+ );
332
+ --viking-border-strong: color-mix(
333
+ in srgb,
334
+ var(--viking-metallic-400) 68%,
335
+ transparent
336
+ );
337
+ --viking-border-subtle: color-mix(
338
+ in srgb,
339
+ var(--viking-metallic-600) 28%,
340
+ transparent
341
+ );
342
+ --viking-border-accent: color-mix(
343
+ in srgb,
344
+ var(--viking-electric-500) 72%,
345
+ transparent
346
+ );
323
347
  --viking-accent: var(--viking-electric-500);
324
348
  --viking-accent-hover: var(--viking-electric-400);
325
349
  --viking-accent-active: var(--viking-electric-700);
326
350
  --viking-accent-content: var(--viking-white-pure);
327
- --viking-accent-soft: color-mix(in srgb, var(--viking-electric-500) 18%, transparent);
328
- --viking-accent-muted: color-mix(in srgb, var(--viking-electric-500) 10%, transparent);
351
+ --viking-accent-soft: color-mix(
352
+ in srgb,
353
+ var(--viking-electric-500) 18%,
354
+ transparent
355
+ );
356
+ --viking-accent-muted: color-mix(
357
+ in srgb,
358
+ var(--viking-electric-500) 10%,
359
+ transparent
360
+ );
329
361
  --viking-accent-strong: var(--viking-electric-300);
330
362
  --viking-accent-secondary: var(--viking-crimson-600);
331
363
  --viking-accent-secondary-hover: var(--viking-crimson-500);
332
364
  --viking-accent-secondary-active: var(--viking-crimson-700);
333
365
  --viking-accent-secondary-content: var(--viking-white-pure);
334
- --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-600) 16%, transparent);
366
+ --viking-accent-secondary-soft: color-mix(
367
+ in srgb,
368
+ var(--viking-crimson-600) 16%,
369
+ transparent
370
+ );
335
371
  --viking-success: var(--viking-green-500);
336
- --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 14%, transparent);
372
+ --viking-success-soft: color-mix(
373
+ in srgb,
374
+ var(--viking-green-500) 14%,
375
+ transparent
376
+ );
337
377
  --viking-warning: var(--viking-gold-500);
338
- --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 16%, transparent);
378
+ --viking-warning-soft: color-mix(
379
+ in srgb,
380
+ var(--viking-gold-500) 16%,
381
+ transparent
382
+ );
339
383
  --viking-danger: var(--viking-crimson-500);
340
- --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 16%, transparent);
384
+ --viking-danger-soft: color-mix(
385
+ in srgb,
386
+ var(--viking-crimson-500) 16%,
387
+ transparent
388
+ );
341
389
  --viking-info: var(--viking-blue-500);
342
- --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 14%, transparent);
390
+ --viking-info-soft: color-mix(
391
+ in srgb,
392
+ var(--viking-blue-500) 14%,
393
+ transparent
394
+ );
343
395
  --viking-danger-text: var(--viking-crimson-400);
344
396
  --viking-on-danger: var(--viking-white-pure);
345
397
  --viking-ring: var(--viking-electric-400);
346
398
  --viking-ring-width: 2px;
347
399
  --viking-ring-offset: 2px;
348
- --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-950) 72%, transparent);
349
- --viking-surface-glass: color-mix(in srgb, var(--viking-charcoal-800) 82%, transparent);
400
+ --viking-overlay-backdrop: color-mix(
401
+ in srgb,
402
+ var(--viking-charcoal-950) 72%,
403
+ transparent
404
+ );
405
+ --viking-surface-glass: color-mix(
406
+ in srgb,
407
+ var(--viking-charcoal-800) 82%,
408
+ transparent
409
+ );
350
410
  --viking-surface-glass-blur: 12px;
351
- --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-500) 10%, transparent);
352
- --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 14%, transparent);
353
- --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-500) 18%, transparent);
354
- --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 20%, transparent);
411
+ --viking-state-hover-bg: color-mix(
412
+ in srgb,
413
+ var(--viking-electric-500) 10%,
414
+ transparent
415
+ );
416
+ --viking-state-active-bg: color-mix(
417
+ in srgb,
418
+ var(--viking-electric-700) 14%,
419
+ transparent
420
+ );
421
+ --viking-state-selected-bg: color-mix(
422
+ in srgb,
423
+ var(--viking-electric-500) 18%,
424
+ transparent
425
+ );
426
+ --viking-state-disabled-bg: color-mix(
427
+ in srgb,
428
+ var(--viking-metallic-600) 20%,
429
+ transparent
430
+ );
355
431
  --viking-shadow-sm:
356
432
  0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18),
357
433
  inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -381,36 +457,104 @@ html[data-theme=light] {
381
457
  --viking-text-link: var(--viking-electric-700);
382
458
  --viking-text-link-hover: var(--viking-electric-600);
383
459
  --viking-text-inverted: var(--viking-white-pure);
384
- --viking-border: color-mix(in srgb, var(--viking-metallic-600) 32%, transparent);
385
- --viking-border-strong: color-mix(in srgb, var(--viking-metallic-600) 48%, transparent);
386
- --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 22%, transparent);
387
- --viking-border-accent: color-mix(in srgb, var(--viking-electric-600) 58%, transparent);
460
+ --viking-border: color-mix(
461
+ in srgb,
462
+ var(--viking-metallic-600) 32%,
463
+ transparent
464
+ );
465
+ --viking-border-strong: color-mix(
466
+ in srgb,
467
+ var(--viking-metallic-600) 48%,
468
+ transparent
469
+ );
470
+ --viking-border-subtle: color-mix(
471
+ in srgb,
472
+ var(--viking-metallic-600) 22%,
473
+ transparent
474
+ );
475
+ --viking-border-accent: color-mix(
476
+ in srgb,
477
+ var(--viking-electric-600) 58%,
478
+ transparent
479
+ );
388
480
  --viking-accent: var(--viking-electric-600);
389
481
  --viking-accent-hover: var(--viking-electric-500);
390
482
  --viking-accent-active: var(--viking-electric-700);
391
483
  --viking-accent-content: var(--viking-white-pure);
392
- --viking-accent-soft: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
393
- --viking-accent-muted: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
484
+ --viking-accent-soft: color-mix(
485
+ in srgb,
486
+ var(--viking-electric-600) 14%,
487
+ transparent
488
+ );
489
+ --viking-accent-muted: color-mix(
490
+ in srgb,
491
+ var(--viking-electric-600) 8%,
492
+ transparent
493
+ );
394
494
  --viking-accent-strong: var(--viking-electric-400);
395
495
  --viking-accent-secondary: var(--viking-crimson-700);
396
496
  --viking-accent-secondary-hover: var(--viking-crimson-600);
397
497
  --viking-accent-secondary-active: var(--viking-crimson-700);
398
498
  --viking-accent-secondary-content: var(--viking-white-pure);
399
- --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-700) 12%, transparent);
400
- --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 12%, transparent);
401
- --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 14%, transparent);
402
- --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 12%, transparent);
403
- --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 12%, transparent);
499
+ --viking-accent-secondary-soft: color-mix(
500
+ in srgb,
501
+ var(--viking-crimson-700) 12%,
502
+ transparent
503
+ );
504
+ --viking-success-soft: color-mix(
505
+ in srgb,
506
+ var(--viking-green-500) 12%,
507
+ transparent
508
+ );
509
+ --viking-warning-soft: color-mix(
510
+ in srgb,
511
+ var(--viking-gold-500) 14%,
512
+ transparent
513
+ );
514
+ --viking-danger-soft: color-mix(
515
+ in srgb,
516
+ var(--viking-crimson-500) 12%,
517
+ transparent
518
+ );
519
+ --viking-info-soft: color-mix(
520
+ in srgb,
521
+ var(--viking-blue-500) 12%,
522
+ transparent
523
+ );
404
524
  --viking-danger-text: var(--viking-crimson-700);
405
525
  --viking-on-danger: var(--viking-white-pure);
406
526
  --viking-ring: var(--viking-electric-500);
407
- --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-900) 45%, transparent);
408
- --viking-surface-glass: color-mix(in srgb, var(--viking-white-pure) 88%, transparent);
527
+ --viking-overlay-backdrop: color-mix(
528
+ in srgb,
529
+ var(--viking-charcoal-900) 45%,
530
+ transparent
531
+ );
532
+ --viking-surface-glass: color-mix(
533
+ in srgb,
534
+ var(--viking-white-pure) 88%,
535
+ transparent
536
+ );
409
537
  --viking-surface-glass-blur: 10px;
410
- --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
411
- --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 12%, transparent);
412
- --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
413
- --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
538
+ --viking-state-hover-bg: color-mix(
539
+ in srgb,
540
+ var(--viking-electric-600) 8%,
541
+ transparent
542
+ );
543
+ --viking-state-active-bg: color-mix(
544
+ in srgb,
545
+ var(--viking-electric-700) 12%,
546
+ transparent
547
+ );
548
+ --viking-state-selected-bg: color-mix(
549
+ in srgb,
550
+ var(--viking-electric-600) 14%,
551
+ transparent
552
+ );
553
+ --viking-state-disabled-bg: color-mix(
554
+ in srgb,
555
+ var(--viking-metallic-600) 12%,
556
+ transparent
557
+ );
414
558
  --viking-shadow-sm:
415
559
  0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
416
560
  --viking-shadow-md:
@@ -438,39 +582,110 @@ html[data-theme=light] {
438
582
  --viking-text-link: var(--viking-electric-700);
439
583
  --viking-text-link-hover: var(--viking-electric-600);
440
584
  --viking-text-inverted: var(--viking-white-pure);
441
- --viking-border: color-mix(in srgb, var(--viking-metallic-600) 22%, transparent);
442
- --viking-border-strong: color-mix(in srgb, var(--viking-metallic-600) 38%, transparent);
443
- --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
444
- --viking-border-accent: color-mix(in srgb, var(--viking-electric-600) 58%, transparent);
585
+ --viking-border: color-mix(
586
+ in srgb,
587
+ var(--viking-metallic-600) 22%,
588
+ transparent
589
+ );
590
+ --viking-border-strong: color-mix(
591
+ in srgb,
592
+ var(--viking-metallic-600) 38%,
593
+ transparent
594
+ );
595
+ --viking-border-subtle: color-mix(
596
+ in srgb,
597
+ var(--viking-metallic-600) 12%,
598
+ transparent
599
+ );
600
+ --viking-border-accent: color-mix(
601
+ in srgb,
602
+ var(--viking-electric-600) 58%,
603
+ transparent
604
+ );
445
605
  --viking-accent: var(--viking-electric-600);
446
606
  --viking-accent-hover: var(--viking-electric-500);
447
607
  --viking-accent-active: var(--viking-electric-700);
448
608
  --viking-accent-content: var(--viking-white-pure);
449
- --viking-accent-soft: color-mix(in srgb, var(--viking-electric-600) 10%, transparent);
450
- --viking-accent-muted: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
609
+ --viking-accent-soft: color-mix(
610
+ in srgb,
611
+ var(--viking-electric-600) 10%,
612
+ transparent
613
+ );
614
+ --viking-accent-muted: color-mix(
615
+ in srgb,
616
+ var(--viking-electric-600) 8%,
617
+ transparent
618
+ );
451
619
  --viking-accent-strong: var(--viking-electric-400);
452
620
  --viking-accent-secondary: var(--viking-crimson-700);
453
621
  --viking-accent-secondary-hover: var(--viking-crimson-600);
454
622
  --viking-accent-secondary-active: var(--viking-crimson-700);
455
623
  --viking-accent-secondary-content: var(--viking-white-pure);
456
- --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-crimson-700) 8%, transparent);
457
- --viking-success-soft: color-mix(in srgb, var(--viking-green-500) 12%, transparent);
458
- --viking-warning-soft: color-mix(in srgb, var(--viking-gold-500) 14%, transparent);
459
- --viking-danger-soft: color-mix(in srgb, var(--viking-crimson-500) 12%, transparent);
460
- --viking-info-soft: color-mix(in srgb, var(--viking-blue-500) 12%, transparent);
624
+ --viking-accent-secondary-soft: color-mix(
625
+ in srgb,
626
+ var(--viking-crimson-700) 8%,
627
+ transparent
628
+ );
629
+ --viking-success-soft: color-mix(
630
+ in srgb,
631
+ var(--viking-green-500) 12%,
632
+ transparent
633
+ );
634
+ --viking-warning-soft: color-mix(
635
+ in srgb,
636
+ var(--viking-gold-500) 14%,
637
+ transparent
638
+ );
639
+ --viking-danger-soft: color-mix(
640
+ in srgb,
641
+ var(--viking-crimson-500) 12%,
642
+ transparent
643
+ );
644
+ --viking-info-soft: color-mix(
645
+ in srgb,
646
+ var(--viking-blue-500) 12%,
647
+ transparent
648
+ );
461
649
  --viking-danger-text: var(--viking-crimson-700);
462
650
  --viking-on-danger: var(--viking-white-pure);
463
651
  --viking-ring: var(--viking-electric-500);
464
- --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-900) 45%, transparent);
465
- --viking-surface-glass: color-mix(in srgb, var(--viking-white-pure) 88%, transparent);
652
+ --viking-overlay-backdrop: color-mix(
653
+ in srgb,
654
+ var(--viking-charcoal-900) 45%,
655
+ transparent
656
+ );
657
+ --viking-surface-glass: color-mix(
658
+ in srgb,
659
+ var(--viking-white-pure) 88%,
660
+ transparent
661
+ );
466
662
  --viking-surface-glass-blur: 10px;
467
- --viking-state-hover-bg: color-mix(in srgb, var(--viking-electric-600) 8%, transparent);
468
- --viking-state-active-bg: color-mix(in srgb, var(--viking-electric-700) 12%, transparent);
469
- --viking-state-selected-bg: color-mix(in srgb, var(--viking-electric-600) 14%, transparent);
470
- --viking-state-disabled-bg: color-mix(in srgb, var(--viking-metallic-600) 12%, transparent);
471
- --viking-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
472
- --viking-shadow-md: 0 2px 4px rgba(17, 17, 17, 0.06), 0 4px 8px rgba(17, 17, 17, 0.08);
473
- --viking-shadow-lg: 0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 24px rgba(17, 17, 17, 0.1);
663
+ --viking-state-hover-bg: color-mix(
664
+ in srgb,
665
+ var(--viking-electric-600) 8%,
666
+ transparent
667
+ );
668
+ --viking-state-active-bg: color-mix(
669
+ in srgb,
670
+ var(--viking-electric-700) 12%,
671
+ transparent
672
+ );
673
+ --viking-state-selected-bg: color-mix(
674
+ in srgb,
675
+ var(--viking-electric-600) 14%,
676
+ transparent
677
+ );
678
+ --viking-state-disabled-bg: color-mix(
679
+ in srgb,
680
+ var(--viking-metallic-600) 12%,
681
+ transparent
682
+ );
683
+ --viking-shadow-sm:
684
+ 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
685
+ --viking-shadow-md:
686
+ 0 2px 4px rgba(17, 17, 17, 0.06), 0 4px 8px rgba(17, 17, 17, 0.08);
687
+ --viking-shadow-lg:
688
+ 0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 24px rgba(17, 17, 17, 0.1);
474
689
  }
475
690
  }
476
691
  :root {