prime-ui-kit 0.9.1 → 0.9.3

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 (169) hide show
  1. package/README.md +30 -12
  2. package/dist/chunks/{chunk-NHOWNIAR.js → chunk-6JTZOA5I.js} +1472 -671
  3. package/dist/chunks/{chunk-DB2Y3XXA.js → chunk-OAE4IQX2.js} +2845 -1732
  4. package/dist/chunks/{chunk-KCQFOORX.js → chunk-U5SR2LZR.js} +17 -4
  5. package/dist/color-picker.js +2 -2
  6. package/dist/components/button/Button.d.ts +19 -2
  7. package/dist/components/card/Card.d.ts +1 -1
  8. package/dist/components/code-block/CodeBlock.d.ts +1 -1
  9. package/dist/components/color-picker/ColorPicker.d.ts +1 -1
  10. package/dist/components/data-table/DataTable.d.ts +6 -1
  11. package/dist/components/data-table/Row.d.ts +3 -1
  12. package/dist/components/data-table/rows.d.ts +4 -0
  13. package/dist/components/data-table/types.d.ts +5 -0
  14. package/dist/components/digit-input/DigitInput.d.ts +6 -1
  15. package/dist/components/dnd/Dnd.d.ts +1 -1
  16. package/dist/components/dnd/dragSession.d.ts +9 -0
  17. package/dist/components/dnd/useDropTarget.d.ts +5 -0
  18. package/dist/components/dnd/useFlipList.d.ts +3 -3
  19. package/dist/components/drawer/Drawer.d.ts +8 -5
  20. package/dist/components/dropdown/Dropdown.d.ts +17 -0
  21. package/dist/components/index.d.ts +9 -2
  22. package/dist/components/input/Input.d.ts +16 -1
  23. package/dist/components/input/passwordStrength.d.ts +9 -0
  24. package/dist/components/kanban/Kanban.d.ts +129 -0
  25. package/dist/components/modal/Modal.d.ts +5 -2
  26. package/dist/components/page-toolbar/PageToolbar.d.ts +53 -0
  27. package/dist/components/progress-bar/ProgressBar.d.ts +16 -1
  28. package/dist/components/segmented-control/SegmentedControl.d.ts +5 -2
  29. package/dist/components/sparkline/Sparkline.d.ts +26 -0
  30. package/dist/components/tabs/Tabs.d.ts +5 -2
  31. package/dist/hooks/useEdgeOverflow.d.ts +16 -0
  32. package/dist/hooks/useMediaQuery.d.ts +7 -0
  33. package/dist/hooks/useSwipeDismiss.d.ts +34 -0
  34. package/dist/icons/registry.d.ts +2 -0
  35. package/dist/index.css +2977 -1306
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +17 -3
  38. package/dist/internal/CheckMark.d.ts +12 -0
  39. package/dist/internal/MorphText.d.ts +12 -0
  40. package/dist/internal/RollingNumber.d.ts +14 -0
  41. package/dist/internal/overlay/FloatingPanel.d.ts +3 -1
  42. package/dist/internal/overlay/useFloatingLayer.d.ts +11 -1
  43. package/dist/internal/surfaceDepth.d.ts +25 -0
  44. package/dist/internal/swatch.d.ts +4 -1
  45. package/dist/internal/touchTarget.d.ts +4 -0
  46. package/dist/layout/app-header/AppHeader.d.ts +110 -0
  47. package/dist/layout/app-shell/AppShell.d.ts +16 -11
  48. package/dist/layout/bottom-nav/BottomNav.d.ts +80 -0
  49. package/dist/layout/index.d.ts +5 -1
  50. package/dist/motion/celebrate.d.ts +18 -0
  51. package/dist/tokens/layers.d.ts +37 -0
  52. package/dist/tokens/naming.d.ts +1 -1
  53. package/dist/tokens/primitives.d.ts +4 -0
  54. package/dist/tokens/semantic.d.ts +122 -56
  55. package/dist/tokens/themes/dark.d.ts +10 -14
  56. package/package.json +3 -2
  57. package/src/components/accordion/COMPONENT.md +5 -5
  58. package/src/components/avatar/COMPONENT.md +1 -1
  59. package/src/components/badge/COMPONENT.md +2 -2
  60. package/src/components/banner/COMPONENT.md +1 -1
  61. package/src/components/button/COMPONENT.md +26 -5
  62. package/src/components/button/examples/download.tsx +45 -0
  63. package/src/components/button/examples/hold-to-confirm.tsx +23 -0
  64. package/src/components/button/examples/label-morph.tsx +33 -0
  65. package/src/components/card/COMPONENT.md +4 -2
  66. package/src/components/card/examples/narrow.tsx +2 -2
  67. package/src/components/card/examples/panel-chart.tsx +1 -1
  68. package/src/components/card/examples/variants.tsx +1 -1
  69. package/src/components/checkbox/examples/examples.module.css +5 -3
  70. package/src/components/code-block/COMPONENT.md +6 -6
  71. package/src/components/code-block/examples/overview.tsx +1 -1
  72. package/src/components/code-block/examples/variants.tsx +1 -1
  73. package/src/components/color-picker/COMPONENT.md +1 -1
  74. package/src/components/color-swatches/COMPONENT.md +5 -5
  75. package/src/components/command-menu/COMPONENT.md +1 -1
  76. package/src/components/crossfade/COMPONENT.md +1 -1
  77. package/src/components/crossfade/examples/overview.tsx +3 -3
  78. package/src/components/data-table/COMPONENT.md +24 -10
  79. package/src/components/data-table/examples/columns-visibility.tsx +167 -0
  80. package/src/components/digit-input/COMPONENT.md +15 -13
  81. package/src/components/digit-input/examples/examples.module.css +8 -0
  82. package/src/components/digit-input/examples/in-form.tsx +2 -5
  83. package/src/components/digit-input/examples/on-complete.tsx +7 -6
  84. package/src/components/digit-input/examples/sizes.tsx +1 -1
  85. package/src/components/divider/COMPONENT.md +1 -1
  86. package/src/components/dnd/COMPONENT.md +3 -3
  87. package/src/components/dnd/examples/examples.module.css +4 -4
  88. package/src/components/drawer/COMPONENT.md +17 -9
  89. package/src/components/drawer/examples/date-sheet.tsx +41 -0
  90. package/src/components/drawer/examples/examples.module.css +5 -0
  91. package/src/components/drawer/examples/placement.tsx +4 -2
  92. package/src/components/dropdown/COMPONENT.md +20 -6
  93. package/src/components/dropdown/examples/checkbox-items.tsx +48 -0
  94. package/src/components/dropdown/examples/examples.module.css +1 -1
  95. package/src/components/empty-page/COMPONENT.md +1 -1
  96. package/src/components/empty-page/examples/examples.module.css +1 -1
  97. package/src/components/example-frame/COMPONENT.md +1 -1
  98. package/src/components/input/COMPONENT.md +10 -1
  99. package/src/components/input/examples/password-strength.tsx +12 -0
  100. package/src/components/kanban/COMPONENT.md +181 -0
  101. package/src/components/kanban/examples/controlled.tsx +78 -0
  102. package/src/components/kanban/examples/examples.module.css +31 -0
  103. package/src/components/kanban/examples/limits.tsx +58 -0
  104. package/src/components/kanban/examples/narrow.tsx +76 -0
  105. package/src/components/kanban/examples/overview.tsx +130 -0
  106. package/src/components/kanban/examples/states.tsx +75 -0
  107. package/src/components/kanban/examples/structure.tsx +76 -0
  108. package/src/components/login-form/COMPONENT.md +5 -5
  109. package/src/components/login-form/examples/register.tsx +2 -2
  110. package/src/components/login-form/examples/reset-password.tsx +2 -2
  111. package/src/components/modal/COMPONENT.md +11 -8
  112. package/src/components/modal/examples/examples.module.css +2 -2
  113. package/src/components/notification/COMPONENT.md +2 -2
  114. package/src/components/page-content/COMPONENT.md +1 -1
  115. package/src/components/page-content/examples/examples.module.css +1 -1
  116. package/src/components/page-toolbar/COMPONENT.md +142 -0
  117. package/src/components/page-toolbar/examples/examples.module.css +16 -0
  118. package/src/components/page-toolbar/examples/narrow.tsx +103 -0
  119. package/src/components/page-toolbar/examples/overview.tsx +113 -0
  120. package/src/components/page-toolbar/examples/save-changes.tsx +40 -0
  121. package/src/components/page-toolbar/examples/without-search.tsx +60 -0
  122. package/src/components/popover/COMPONENT.md +5 -4
  123. package/src/components/progress-bar/COMPONENT.md +6 -2
  124. package/src/components/progress-bar/examples/examples.module.css +7 -0
  125. package/src/components/progress-bar/examples/milestone.tsx +43 -0
  126. package/src/components/progress-bar/examples/steps.tsx +35 -0
  127. package/src/components/progress-circle/COMPONENT.md +1 -1
  128. package/src/components/scroll-container/COMPONENT.md +1 -1
  129. package/src/components/segmented-control/COMPONENT.md +8 -8
  130. package/src/components/segmented-control/examples/full-width.tsx +1 -1
  131. package/src/components/select/COMPONENT.md +2 -1
  132. package/src/components/skeleton/COMPONENT.md +1 -1
  133. package/src/components/skeleton/examples/with-crossfade.tsx +3 -3
  134. package/src/components/smart-filter/COMPONENT.md +2 -0
  135. package/src/components/sparkline/COMPONENT.md +98 -0
  136. package/src/components/sparkline/examples/examples.module.css +13 -0
  137. package/src/components/sparkline/examples/overview.tsx +27 -0
  138. package/src/components/sparkline/examples/period.tsx +46 -0
  139. package/src/components/spinner/COMPONENT.md +1 -1
  140. package/src/components/tabs/COMPONENT.md +24 -22
  141. package/src/components/tabs/examples/closable.tsx +1 -1
  142. package/src/components/tabs/examples/examples.module.css +14 -0
  143. package/src/components/tabs/examples/orientation.tsx +87 -33
  144. package/src/components/tooltip/COMPONENT.md +8 -6
  145. package/src/components/tooltip/examples/examples.module.css +2 -2
  146. package/src/layout/app-header/COMPONENT.md +178 -0
  147. package/src/layout/app-header/examples/breadcrumbs.tsx +36 -0
  148. package/src/layout/app-header/examples/examples.module.css +47 -0
  149. package/src/layout/app-header/examples/in-app-shell.tsx +70 -0
  150. package/src/layout/app-header/examples/narrow.tsx +29 -0
  151. package/src/layout/app-header/examples/overview.tsx +36 -0
  152. package/src/layout/app-shell/COMPONENT.md +35 -29
  153. package/src/layout/app-shell/examples/examples.module.css +17 -2
  154. package/src/layout/app-shell/examples/footer.tsx +59 -0
  155. package/src/layout/app-shell/examples/overview.tsx +19 -8
  156. package/src/layout/bottom-nav/COMPONENT.md +153 -0
  157. package/src/layout/bottom-nav/examples/examples.module.css +39 -0
  158. package/src/layout/bottom-nav/examples/floating.tsx +89 -0
  159. package/src/layout/bottom-nav/examples/icon-only.tsx +41 -0
  160. package/src/layout/bottom-nav/examples/in-app-shell.tsx +64 -0
  161. package/src/layout/bottom-nav/examples/overview.tsx +44 -0
  162. package/src/layout/bottom-nav/examples/router.tsx +31 -0
  163. package/src/layout/bottom-nav/examples/structure.tsx +47 -0
  164. package/src/layout/sidebar/COMPONENT.md +14 -13
  165. package/src/layout/sidebar/examples/examples.module.css +5 -5
  166. package/src/styles/globals.css +125 -2
  167. package/src/styles/theme-dark.css +39 -13
  168. package/src/styles/theme-light.css +84 -16
  169. package/src/styles/tokens.css +2 -0
package/src/styles/theme-dark.css CHANGED
@@ -6,29 +6,21 @@
6
6
  --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
7
7
  --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
8
8
  --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
9
- --prime-color-bg-canvas: var(--prime-ref-color-gray-950);
9
+ --prime-color-bg-edge-shadow: rgba(0, 0, 0, 0.5);
10
+ --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent);
11
+ --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.16);
10
12
  --prime-color-bg-inverse: var(--prime-ref-color-gray-100);
11
- --prime-color-bg-raised: var(--prime-ref-color-gray-875);
12
13
  --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
13
- --prime-color-bg-sunken: var(--prime-ref-color-gray-950);
14
- --prime-color-bg-surface: var(--prime-ref-color-gray-900);
15
14
  --prime-color-border-default: var(--prime-ref-color-gray-750);
16
15
  --prime-color-border-faint: var(--prime-ref-color-gray-850);
17
16
  --prime-color-border-subtle: var(--prime-ref-color-gray-800);
18
- --prime-color-control-selected: var(--prime-ref-color-gray-750);
19
17
  --prime-color-control-thumb: var(--prime-ref-color-gray-100);
20
18
  --prime-color-danger-border: var(--prime-ref-color-red-400);
21
19
  --prime-color-danger-hover: var(--prime-ref-color-red-500);
22
20
  --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
23
21
  --prime-color-danger-text: var(--prime-ref-color-red-300);
24
- --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
25
22
  --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent);
26
- --prime-color-field-bg-focus: var(--prime-ref-color-gray-925);
27
- --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 12%, transparent);
28
- --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
29
23
  --prime-color-fill-faint: rgba(233, 235, 240, 0.02);
30
- --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-100) 7%, transparent);
31
- --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
32
24
  --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent);
33
25
  --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent);
34
26
  --prime-color-fill-subtle: rgba(233, 235, 240, 0.05);
@@ -38,6 +30,38 @@
38
30
  --prime-color-info-fg: var(--prime-ref-color-gray-950);
39
31
  --prime-color-info-soft: color-mix(in srgb, var(--prime-ref-color-sky-500) 16%, transparent);
40
32
  --prime-color-info-text: var(--prime-ref-color-sky-300);
33
+ --prime-color-layer-0-bg: #0d0f13;
34
+ --prime-color-layer-0-fill: #14161a;
35
+ --prime-color-layer-0-fill-hover: #1a1c21;
36
+ --prime-color-layer-0-selected: #212428;
37
+ --prime-color-layer-1-bg: #14161a;
38
+ --prime-color-layer-1-fill: #1a1c21;
39
+ --prime-color-layer-1-fill-hover: #212428;
40
+ --prime-color-layer-1-selected: #292b2f;
41
+ --prime-color-layer-2-bg: #1a1c21;
42
+ --prime-color-layer-2-fill: #212428;
43
+ --prime-color-layer-2-fill-hover: #292b2f;
44
+ --prime-color-layer-2-selected: #303237;
45
+ --prime-color-layer-3-bg: #212428;
46
+ --prime-color-layer-3-fill: #292b2f;
47
+ --prime-color-layer-3-fill-hover: #303237;
48
+ --prime-color-layer-3-selected: #383a3f;
49
+ --prime-color-layer-4-bg: #292b2f;
50
+ --prime-color-layer-4-fill: #303237;
51
+ --prime-color-layer-4-fill-hover: #383a3f;
52
+ --prime-color-layer-4-selected: #3f4247;
53
+ --prime-color-layer-floating-bg: #1a1c21;
54
+ --prime-color-layer-floating-fill: #212428;
55
+ --prime-color-layer-floating-fill-hover: #292b2f;
56
+ --prime-color-layer-floating-selected: #303237;
57
+ --prime-color-layer-floating1-bg: #212328;
58
+ --prime-color-layer-floating1-fill: #282a2f;
59
+ --prime-color-layer-floating1-fill-hover: #303237;
60
+ --prime-color-layer-floating1-selected: #373a3e;
61
+ --prime-color-layer-floating2-bg: #282a2f;
62
+ --prime-color-layer-floating2-fill: #303237;
63
+ --prime-color-layer-floating2-fill-hover: #373a3e;
64
+ --prime-color-layer-floating2-selected: #3f4146;
41
65
  --prime-color-palette-blue-soft: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 16%, transparent);
42
66
  --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-400);
43
67
  --prime-color-palette-blue-solid-fg: var(--prime-ref-color-gray-950);
@@ -87,8 +111,10 @@
87
111
  --prime-color-text-placeholder: var(--prime-ref-color-gray-400);
88
112
  --prime-color-text-primary: var(--prime-ref-color-gray-100);
89
113
  --prime-color-text-secondary: var(--prime-ref-color-gray-300);
90
- --prime-color-tooltip-bg: var(--prime-ref-color-gray-750);
91
- --prime-color-tooltip-text: var(--prime-ref-color-gray-100);
114
+ --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);
115
+ --prime-color-tooltip-fill: rgba(17, 19, 24, 0.08);
116
+ --prime-color-tooltip-muted: var(--prime-ref-color-gray-600);
117
+ --prime-color-tooltip-text: var(--prime-ref-color-gray-925);
92
118
  --prime-color-warning-default: var(--prime-ref-color-orange-400);
93
119
  --prime-color-warning-fg: var(--prime-ref-color-gray-950);
94
120
  --prime-color-warning-soft: color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent);
package/src/styles/theme-light.css CHANGED
@@ -39,30 +39,39 @@
39
39
  --prime-badge-xs-radius: var(--prime-ref-radius-4);
40
40
  --prime-badge-xs-text-size: var(--prime-ref-font-size-12);
41
41
  --prime-border-width: 1px;
42
+ --prime-bottom-nav-blur: 0.5rem;
43
+ --prime-bottom-nav-floating-inset: var(--prime-ref-space-3);
44
+ --prime-bottom-nav-floating-item-size: 2.75rem;
45
+ --prime-bottom-nav-floating-padding: var(--prime-ref-space-1);
46
+ --prime-bottom-nav-height: 3.25rem;
47
+ --prime-bottom-nav-icon-only-height: var(--prime-ref-space-12);
48
+ --prime-bottom-nav-icon-size: var(--prime-ref-icon-20);
49
+ --prime-bottom-nav-indicator-height: var(--prime-ref-space-5);
50
+ --prime-bottom-nav-indicator-width: var(--prime-ref-space-7);
51
+ --prime-bottom-nav-item-gap: var(--prime-ref-space-1);
52
+ --prime-bottom-nav-label-line-height: var(--prime-ref-font-line-height-12);
53
+ --prime-bottom-nav-label-size: var(--prime-ref-font-size-10);
54
+ --prime-bottom-nav-padding-x: var(--prime-ref-space-2);
42
55
  --prime-card-gap: var(--prime-ref-space-4);
43
56
  --prime-card-padding-l: var(--prime-ref-space-6);
44
57
  --prime-card-padding-m: var(--prime-ref-space-5);
45
58
  --prime-card-padding-s: var(--prime-ref-space-4);
46
59
  --prime-card-radius: var(--prime-ref-radius-12);
47
- --prime-card-shadow: var(--prime-shadow-raised);
48
60
  --prime-color-accent-default: var(--prime-ref-color-cobalt-700);
49
61
  --prime-color-accent-fg: var(--prime-ref-color-white);
50
62
  --prime-color-accent-hover: var(--prime-ref-color-cobalt-800);
51
63
  --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
52
64
  --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
53
65
  --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
54
- --prime-color-bg-canvas: var(--prime-ref-color-gray-50);
66
+ --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
67
+ --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
68
+ --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
55
69
  --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
56
- --prime-color-bg-raised: var(--prime-ref-color-gray-0);
57
70
  --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
58
- --prime-color-bg-sunken: var(--prime-ref-color-gray-75);
59
- --prime-color-bg-surface: var(--prime-ref-color-gray-0);
60
71
  --prime-color-border-control: transparent;
61
72
  --prime-color-border-default: var(--prime-ref-color-gray-150);
62
73
  --prime-color-border-faint: var(--prime-ref-color-gray-75);
63
74
  --prime-color-border-subtle: var(--prime-ref-color-gray-100);
64
- --prime-color-card-bg: var(--prime-color-bg-surface);
65
- --prime-color-control-selected: var(--prime-ref-color-gray-0);
66
75
  --prime-color-control-thumb: var(--prime-ref-color-white);
67
76
  --prime-color-danger-border: var(--prime-ref-color-red-500);
68
77
  --prime-color-danger-default: var(--prime-ref-color-red-600);
@@ -70,14 +79,8 @@
70
79
  --prime-color-danger-hover: var(--prime-ref-color-red-700);
71
80
  --prime-color-danger-soft: var(--prime-ref-color-red-100);
72
81
  --prime-color-danger-text: var(--prime-ref-color-red-700);
73
- --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
74
82
  --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
75
- --prime-color-field-bg-focus: var(--prime-ref-color-gray-0);
76
- --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, transparent);
77
- --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
78
83
  --prime-color-fill-faint: rgba(17, 19, 24, 0.04);
79
- --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent);
80
- --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent);
81
84
  --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent);
82
85
  --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent);
83
86
  --prime-color-fill-subtle: rgba(17, 19, 24, 0.04);
@@ -87,6 +90,38 @@
87
90
  --prime-color-info-fg: var(--prime-ref-color-white);
88
91
  --prime-color-info-soft: var(--prime-ref-color-sky-100);
89
92
  --prime-color-info-text: var(--prime-ref-color-sky-800);
93
+ --prime-color-layer-0-bg: #f3f4f6;
94
+ --prime-color-layer-0-fill: #e9eaec;
95
+ --prime-color-layer-0-fill-hover: #dfe0e2;
96
+ --prime-color-layer-0-selected: #ffffff;
97
+ --prime-color-layer-1-bg: #ffffff;
98
+ --prime-color-layer-1-fill: #f4f5f7;
99
+ --prime-color-layer-1-fill-hover: #eaebed;
100
+ --prime-color-layer-1-selected: #ffffff;
101
+ --prime-color-layer-2-bg: #f4f5f7;
102
+ --prime-color-layer-2-fill: #eaebed;
103
+ --prime-color-layer-2-fill-hover: #e0e1e3;
104
+ --prime-color-layer-2-selected: #ffffff;
105
+ --prime-color-layer-3-bg: #ffffff;
106
+ --prime-color-layer-3-fill: #f4f5f7;
107
+ --prime-color-layer-3-fill-hover: #eaebed;
108
+ --prime-color-layer-3-selected: #ffffff;
109
+ --prime-color-layer-4-bg: #f4f5f7;
110
+ --prime-color-layer-4-fill: #eaebed;
111
+ --prime-color-layer-4-fill-hover: #e0e1e3;
112
+ --prime-color-layer-4-selected: #ffffff;
113
+ --prime-color-layer-floating-bg: #ffffff;
114
+ --prime-color-layer-floating-fill: #f4f5f7;
115
+ --prime-color-layer-floating-fill-hover: #eaebed;
116
+ --prime-color-layer-floating-selected: #ffffff;
117
+ --prime-color-layer-floating1-bg: #f4f5f7;
118
+ --prime-color-layer-floating1-fill: #eaebed;
119
+ --prime-color-layer-floating1-fill-hover: #e0e1e3;
120
+ --prime-color-layer-floating1-selected: #ffffff;
121
+ --prime-color-layer-floating2-bg: #ffffff;
122
+ --prime-color-layer-floating2-fill: #f4f5f7;
123
+ --prime-color-layer-floating2-fill-hover: #eaebed;
124
+ --prime-color-layer-floating2-selected: #ffffff;
90
125
  --prime-color-palette-blue-soft: var(--prime-ref-color-cobalt-100);
91
126
  --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
92
127
  --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
@@ -138,6 +173,8 @@
138
173
  --prime-color-text-primary: var(--prime-ref-color-gray-925);
139
174
  --prime-color-text-secondary: var(--prime-ref-color-gray-700);
140
175
  --prime-color-tooltip-bg: var(--prime-ref-color-gray-925);
176
+ --prime-color-tooltip-fill: rgba(255, 255, 255, 0.14);
177
+ --prime-color-tooltip-muted: var(--prime-ref-color-gray-300);
141
178
  --prime-color-tooltip-text: var(--prime-ref-color-gray-0);
142
179
  --prime-color-warning-default: var(--prime-ref-color-orange-700);
143
180
  --prime-color-warning-fg: var(--prime-ref-color-white);
@@ -194,6 +231,8 @@
194
231
  --prime-control-s-radius: var(--prime-ref-radius-8);
195
232
  --prime-control-s-text-size: var(--prime-ref-font-size-13);
196
233
  --prime-control-s-track: 0.3125rem;
234
+ --prime-control-touch-target: 2.75rem;
235
+ --prime-control-touch-text-size: var(--prime-ref-font-size-16);
197
236
  --prime-control-xl-choice: var(--prime-ref-icon-24);
198
237
  --prime-control-xl-field-padding-x: var(--prime-ref-space-4);
199
238
  --prime-control-xl-gap: var(--prime-ref-space-3);
@@ -265,6 +304,7 @@
265
304
  --prime-modal-width-m: 35rem;
266
305
  --prime-modal-width-s: 27.5rem;
267
306
  --prime-modal-width-xl: 60rem;
307
+ --prime-motion-blur: 2px;
268
308
  --prime-motion-duration-base: var(--prime-ref-duration-380);
269
309
  --prime-motion-duration-fast: var(--prime-ref-duration-230);
270
310
  --prime-motion-duration-slow: var(--prime-ref-duration-570);
@@ -295,6 +335,12 @@
295
335
  --prime-shadow-overlay: 0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18);
296
336
  --prime-shadow-raised: 0 1px 2px rgba(17, 19, 24, 0.04);
297
337
  --prime-shadow-thumb: 0 0 0 1px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.16);
338
+ --prime-sheet-handle-area: var(--prime-ref-space-5);
339
+ --prime-sheet-handle-height: var(--prime-ref-space-1);
340
+ --prime-sheet-handle-width: 2.25rem;
341
+ --prime-sheet-min-width: 35rem;
342
+ --prime-sheet-radius: var(--prime-ref-radius-16);
343
+ --prime-sheet-top-gap: var(--prime-ref-space-10);
298
344
  --prime-space-0: var(--prime-ref-space-0);
299
345
  --prime-space-1: var(--prime-ref-space-1);
300
346
  --prime-space-10: var(--prime-ref-space-10);
@@ -397,11 +443,33 @@
397
443
  --prime-thumbnail-xs-radius: var(--prime-ref-radius-4);
398
444
  --prime-tooltip-arrow-height: 0.3125rem;
399
445
  --prime-tooltip-arrow-width: 0.625rem;
446
+ --prime-tooltip-l-line-height: var(--prime-ref-font-line-height-20);
447
+ --prime-tooltip-l-padding-x: var(--prime-ref-space-3);
448
+ --prime-tooltip-l-padding-y: var(--prime-ref-space-2);
449
+ --prime-tooltip-l-radius: var(--prime-ref-radius-8);
450
+ --prime-tooltip-l-text-size: var(--prime-ref-font-size-14);
451
+ --prime-tooltip-m-line-height: var(--prime-ref-font-line-height-20);
452
+ --prime-tooltip-m-padding-x: 0.625rem;
453
+ --prime-tooltip-m-padding-y: 0.375rem;
454
+ --prime-tooltip-m-radius: var(--prime-ref-radius-6);
455
+ --prime-tooltip-m-text-size: var(--prime-ref-font-size-13);
400
456
  --prime-tooltip-max-width: 17.5rem;
401
457
  --prime-tooltip-offset: var(--prime-ref-space-2);
402
- --prime-tooltip-padding-x: var(--prime-ref-space-2);
403
- --prime-tooltip-padding-y: var(--prime-ref-space-1);
404
- --prime-tooltip-radius: var(--prime-ref-radius-6);
458
+ --prime-tooltip-s-line-height: var(--prime-ref-font-line-height-16);
459
+ --prime-tooltip-s-padding-x: var(--prime-ref-space-2);
460
+ --prime-tooltip-s-padding-y: 0.375rem;
461
+ --prime-tooltip-s-radius: var(--prime-ref-radius-6);
462
+ --prime-tooltip-s-text-size: var(--prime-ref-font-size-12);
463
+ --prime-tooltip-xl-line-height: var(--prime-ref-font-line-height-24);
464
+ --prime-tooltip-xl-padding-x: var(--prime-ref-space-4);
465
+ --prime-tooltip-xl-padding-y: var(--prime-ref-space-2);
466
+ --prime-tooltip-xl-radius: var(--prime-ref-radius-8);
467
+ --prime-tooltip-xl-text-size: var(--prime-ref-font-size-16);
468
+ --prime-tooltip-xs-line-height: var(--prime-ref-font-line-height-16);
469
+ --prime-tooltip-xs-padding-x: 0.375rem;
470
+ --prime-tooltip-xs-padding-y: var(--prime-ref-space-1);
471
+ --prime-tooltip-xs-radius: var(--prime-ref-radius-4);
472
+ --prime-tooltip-xs-text-size: var(--prime-ref-font-size-12);
405
473
  --prime-z-overlay: var(--prime-ref-z-index-overlay);
406
474
  --prime-z-sticky: var(--prime-ref-z-index-sticky);
407
475
  --prime-z-toast: var(--prime-ref-z-index-toast);
package/src/styles/tokens.css CHANGED
@@ -82,6 +82,7 @@
82
82
  --prime-ref-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
83
83
  --prime-ref-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
84
84
  --prime-ref-font-family-sans: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
85
+ --prime-ref-font-line-height-12: 0.75rem;
85
86
  --prime-ref-font-line-height-16: 1rem;
86
87
  --prime-ref-font-line-height-20: 1.25rem;
87
88
  --prime-ref-font-line-height-24: 1.5rem;
@@ -91,6 +92,7 @@
91
92
  --prime-ref-font-line-height-44: 2.75rem;
92
93
  --prime-ref-font-line-height-56: 3.5rem;
93
94
  --prime-ref-font-line-height-68: 4.25rem;
95
+ --prime-ref-font-size-10: 0.625rem;
94
96
  --prime-ref-font-size-12: 0.75rem;
95
97
  --prime-ref-font-size-13: 0.8125rem;
96
98
  --prime-ref-font-size-14: 0.875rem;