@ptbdynamic/plinth 0.0.0-stage → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +258 -2
  3. package/package.json +99 -4
  4. package/packages/css/dist/avatar.css +122 -0
  5. package/packages/css/dist/badge.css +76 -0
  6. package/packages/css/dist/button.css +273 -0
  7. package/packages/css/dist/callout.css +143 -0
  8. package/packages/css/dist/code-block.css +283 -0
  9. package/packages/css/dist/confirm-dialog.css +183 -0
  10. package/packages/css/dist/data-table.css +470 -0
  11. package/packages/css/dist/dialog.css +113 -0
  12. package/packages/css/dist/drawer.css +156 -0
  13. package/packages/css/dist/fonts/geist/LICENSE +93 -0
  14. package/packages/css/dist/fonts/geist/geist-cyrillic-ext-wght-normal.woff2 +0 -0
  15. package/packages/css/dist/fonts/geist/geist-cyrillic-wght-normal.woff2 +0 -0
  16. package/packages/css/dist/fonts/geist/geist-latin-ext-wght-normal.woff2 +0 -0
  17. package/packages/css/dist/fonts/geist/geist-latin-wght-normal.woff2 +0 -0
  18. package/packages/css/dist/fonts/geist/geist-vietnamese-wght-normal.woff2 +0 -0
  19. package/packages/css/dist/fonts/geist-mono/LICENSE +93 -0
  20. package/packages/css/dist/fonts/geist-mono/geist-mono-cyrillic-ext-wght-normal.woff2 +0 -0
  21. package/packages/css/dist/fonts/geist-mono/geist-mono-cyrillic-wght-normal.woff2 +0 -0
  22. package/packages/css/dist/fonts/geist-mono/geist-mono-latin-ext-wght-normal.woff2 +0 -0
  23. package/packages/css/dist/fonts/geist-mono/geist-mono-latin-wght-normal.woff2 +0 -0
  24. package/packages/css/dist/fonts/geist-mono/geist-mono-symbols2-wght-normal.woff2 +0 -0
  25. package/packages/css/dist/fonts/geist-mono/geist-mono-vietnamese-wght-normal.woff2 +0 -0
  26. package/packages/css/dist/fonts/index.css +109 -0
  27. package/packages/css/dist/header.css +110 -0
  28. package/packages/css/dist/icon.css +51 -0
  29. package/packages/css/dist/list-card.css +76 -0
  30. package/packages/css/dist/list-row.css +164 -0
  31. package/packages/css/dist/menu-sheet.css +84 -0
  32. package/packages/css/dist/menu.css +245 -0
  33. package/packages/css/dist/modal.css +367 -0
  34. package/packages/css/dist/page-header.css +124 -0
  35. package/packages/css/dist/pill-row.css +197 -0
  36. package/packages/css/dist/plinth.css +4446 -0
  37. package/packages/css/dist/section-menu.css +226 -0
  38. package/packages/css/dist/sheet.css +239 -0
  39. package/packages/css/dist/text-field.css +230 -0
  40. package/packages/css/dist/textarea.css +169 -0
  41. package/packages/css/dist/tokens.css +413 -0
  42. package/packages/react/dist/PlinthAvatar.d.ts +17 -0
  43. package/packages/react/dist/PlinthBadge.d.ts +7 -0
  44. package/packages/react/dist/PlinthButton.d.ts +29 -0
  45. package/packages/react/dist/PlinthCallout.d.ts +16 -0
  46. package/packages/react/dist/PlinthCodeBlock.d.ts +24 -0
  47. package/packages/react/dist/PlinthConfirmDialog.d.ts +38 -0
  48. package/packages/react/dist/PlinthDataTable.d.ts +11 -0
  49. package/packages/react/dist/PlinthDataTableCell.d.ts +15 -0
  50. package/packages/react/dist/PlinthDataTableColumn.d.ts +13 -0
  51. package/packages/react/dist/PlinthDataTableEmpty.d.ts +9 -0
  52. package/packages/react/dist/PlinthDataTableRow.d.ts +9 -0
  53. package/packages/react/dist/PlinthDataTableSort.d.ts +4 -0
  54. package/packages/react/dist/PlinthDialog.d.ts +26 -0
  55. package/packages/react/dist/PlinthDrawer.d.ts +29 -0
  56. package/packages/react/dist/PlinthIcon.d.ts +10 -0
  57. package/packages/react/dist/PlinthIconButton.d.ts +26 -0
  58. package/packages/react/dist/PlinthListCard.d.ts +14 -0
  59. package/packages/react/dist/PlinthListRow.d.ts +29 -0
  60. package/packages/react/dist/PlinthMenu.d.ts +12 -0
  61. package/packages/react/dist/PlinthMenuGroup.d.ts +9 -0
  62. package/packages/react/dist/PlinthMenuItem.d.ts +26 -0
  63. package/packages/react/dist/PlinthMenuSeparator.d.ts +4 -0
  64. package/packages/react/dist/PlinthMenuSheet.d.ts +24 -0
  65. package/packages/react/dist/PlinthPageHeader.d.ts +17 -0
  66. package/packages/react/dist/PlinthPill.d.ts +17 -0
  67. package/packages/react/dist/PlinthPillRow.d.ts +13 -0
  68. package/packages/react/dist/PlinthSectionMenu.d.ts +11 -0
  69. package/packages/react/dist/PlinthSectionMenuItem.d.ts +20 -0
  70. package/packages/react/dist/PlinthSheet.d.ts +26 -0
  71. package/packages/react/dist/PlinthTextField.d.ts +24 -0
  72. package/packages/react/dist/PlinthTextarea.d.ts +24 -0
  73. package/packages/react/dist/avatar.d.ts +12 -0
  74. package/packages/react/dist/button.d.ts +21 -0
  75. package/packages/react/dist/callout.d.ts +19 -0
  76. package/packages/react/dist/code-block.d.ts +16 -0
  77. package/packages/react/dist/confirm-dialog.d.ts +23 -0
  78. package/packages/react/dist/data-table.d.ts +15 -0
  79. package/packages/react/dist/dialog.d.ts +10 -0
  80. package/packages/react/dist/drawer.d.ts +20 -0
  81. package/packages/react/dist/heading.d.ts +5 -0
  82. package/packages/react/dist/icon.d.ts +5 -0
  83. package/packages/react/dist/index.d.ts +49 -0
  84. package/packages/react/dist/index.js +1326 -0
  85. package/packages/react/dist/list-row.d.ts +5 -0
  86. package/packages/react/dist/markup.d.ts +9 -0
  87. package/packages/react/dist/menu.d.ts +7 -0
  88. package/packages/react/dist/page-header.d.ts +5 -0
  89. package/packages/react/dist/sheet.d.ts +12 -0
  90. package/packages/react/dist/size.d.ts +13 -0
  91. package/packages/react/dist/swipe.d.ts +15 -0
  92. package/packages/react/dist/text-field.d.ts +10 -0
  93. package/packages/react/dist/tones.d.ts +5 -0
  94. package/packages/tokens/dist/index.d.ts +230 -0
  95. package/packages/tokens/dist/index.js +4091 -0
  96. package/packages/tokens/dist/tailwind-theme.css +80 -0
  97. package/packages/tokens/dist/tokens.css +413 -0
  98. package/packages/tokens/dist/tokens.json +3875 -0
  99. package/packages/vue/dist/PlinthAvatar.vue.d.ts +24 -0
  100. package/packages/vue/dist/PlinthBadge.vue.d.ts +21 -0
  101. package/packages/vue/dist/PlinthButton.vue.d.ts +42 -0
  102. package/packages/vue/dist/PlinthCallout.vue.d.ts +31 -0
  103. package/packages/vue/dist/PlinthCodeBlock.vue.d.ts +49 -0
  104. package/packages/vue/dist/PlinthConfirmDialog.vue.d.ts +51 -0
  105. package/packages/vue/dist/PlinthDataTable.vue.d.ts +21 -0
  106. package/packages/vue/dist/PlinthDataTableCell.vue.d.ts +29 -0
  107. package/packages/vue/dist/PlinthDataTableColumn.vue.d.ts +26 -0
  108. package/packages/vue/dist/PlinthDataTableEmpty.vue.d.ts +19 -0
  109. package/packages/vue/dist/PlinthDataTableRow.vue.d.ts +19 -0
  110. package/packages/vue/dist/PlinthDataTableSort.vue.d.ts +13 -0
  111. package/packages/vue/dist/PlinthDialog.vue.d.ts +45 -0
  112. package/packages/vue/dist/PlinthDrawer.vue.d.ts +48 -0
  113. package/packages/vue/dist/PlinthIcon.vue.d.ts +23 -0
  114. package/packages/vue/dist/PlinthIconButton.vue.d.ts +37 -0
  115. package/packages/vue/dist/PlinthListCard.vue.d.ts +26 -0
  116. package/packages/vue/dist/PlinthListRow.vue.d.ts +38 -0
  117. package/packages/vue/dist/PlinthMenu.vue.d.ts +24 -0
  118. package/packages/vue/dist/PlinthMenuGroup.vue.d.ts +17 -0
  119. package/packages/vue/dist/PlinthMenuItem.vue.d.ts +34 -0
  120. package/packages/vue/dist/PlinthMenuSeparator.vue.d.ts +3 -0
  121. package/packages/vue/dist/PlinthMenuSheet.vue.d.ts +48 -0
  122. package/packages/vue/dist/PlinthPageHeader.vue.d.ts +27 -0
  123. package/packages/vue/dist/PlinthPill.vue.d.ts +28 -0
  124. package/packages/vue/dist/PlinthPillRow.vue.d.ts +22 -0
  125. package/packages/vue/dist/PlinthSectionMenu.vue.d.ts +22 -0
  126. package/packages/vue/dist/PlinthSectionMenuItem.vue.d.ts +28 -0
  127. package/packages/vue/dist/PlinthSheet.vue.d.ts +45 -0
  128. package/packages/vue/dist/PlinthTextField.vue.d.ts +51 -0
  129. package/packages/vue/dist/PlinthTextarea.vue.d.ts +42 -0
  130. package/packages/vue/dist/avatar.d.ts +12 -0
  131. package/packages/vue/dist/button.d.ts +5 -0
  132. package/packages/vue/dist/callout.d.ts +19 -0
  133. package/packages/vue/dist/code-block.d.ts +16 -0
  134. package/packages/vue/dist/confirm-dialog.d.ts +23 -0
  135. package/packages/vue/dist/data-table.d.ts +15 -0
  136. package/packages/vue/dist/dialog.d.ts +10 -0
  137. package/packages/vue/dist/drawer.d.ts +20 -0
  138. package/packages/vue/dist/heading.d.ts +5 -0
  139. package/packages/vue/dist/icon.d.ts +5 -0
  140. package/packages/vue/dist/index.d.ts +53 -0
  141. package/packages/vue/dist/index.js +1732 -0
  142. package/packages/vue/dist/list-row.d.ts +5 -0
  143. package/packages/vue/dist/menu.d.ts +8 -0
  144. package/packages/vue/dist/page-header.d.ts +5 -0
  145. package/packages/vue/dist/sheet.d.ts +12 -0
  146. package/packages/vue/dist/size.d.ts +13 -0
  147. package/packages/vue/dist/slots.d.ts +3 -0
  148. package/packages/vue/dist/swipe.d.ts +12 -0
  149. package/packages/vue/dist/text-field.d.ts +10 -0
  150. package/packages/vue/dist/tones.d.ts +5 -0
package/packages/tokens/dist/tailwind-theme.css ADDED
@@ -0,0 +1,80 @@
1
+ /* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
2
+ @theme inline {
3
+ --color-surface: var(--plinth-color-surface);
4
+ --color-surface-raised: var(--plinth-color-surface-raised);
5
+ --color-surface-sunken: var(--plinth-color-surface-sunken);
6
+ --color-surface-hover: var(--plinth-color-surface-hover);
7
+ --color-text: var(--plinth-color-text);
8
+ --color-text-muted: var(--plinth-color-text-muted);
9
+ --color-text-subtle: var(--plinth-color-text-subtle);
10
+ --color-border: var(--plinth-color-border);
11
+ --color-border-strong: var(--plinth-color-border-strong);
12
+ --color-divider: var(--plinth-color-divider);
13
+ --color-primary: var(--plinth-color-primary);
14
+ --color-primary-hover: var(--plinth-color-primary-hover);
15
+ --color-primary-active: var(--plinth-color-primary-active);
16
+ --color-on-primary: var(--plinth-color-on-primary);
17
+ --color-primary-edge: var(--plinth-color-primary-edge);
18
+ --color-accent: var(--plinth-color-accent);
19
+ --color-accent-text: var(--plinth-color-accent-text);
20
+ --color-on-accent: var(--plinth-color-on-accent);
21
+ --color-focus-ring: var(--plinth-color-focus-ring);
22
+ --color-overlay: var(--plinth-color-overlay);
23
+ --color-info: var(--plinth-color-info);
24
+ --color-info-surface: var(--plinth-color-info-surface);
25
+ --color-info-text: var(--plinth-color-info-text);
26
+ --color-success: var(--plinth-color-success);
27
+ --color-success-surface: var(--plinth-color-success-surface);
28
+ --color-success-text: var(--plinth-color-success-text);
29
+ --color-warning: var(--plinth-color-warning);
30
+ --color-warning-surface: var(--plinth-color-warning-surface);
31
+ --color-warning-text: var(--plinth-color-warning-text);
32
+ --color-danger: var(--plinth-color-danger);
33
+ --color-danger-surface: var(--plinth-color-danger-surface);
34
+ --color-danger-text: var(--plinth-color-danger-text);
35
+ --color-accent-hover: var(--plinth-color-accent-hover);
36
+ --color-accent-active: var(--plinth-color-accent-active);
37
+ --color-danger-solid: var(--plinth-color-danger-solid);
38
+ --color-danger-solid-hover: var(--plinth-color-danger-solid-hover);
39
+ --color-danger-solid-active: var(--plinth-color-danger-solid-active);
40
+ --color-on-danger: var(--plinth-color-on-danger);
41
+ --color-accent-subtle: var(--plinth-color-accent-subtle);
42
+ --color-accent-subtle-hover: var(--plinth-color-accent-subtle-hover);
43
+ --color-accent-subtle-active: var(--plinth-color-accent-subtle-active);
44
+ --font-sans: var(--plinth-font-family-body);
45
+ --font-mono: var(--plinth-font-family-mono);
46
+ --text-xs: var(--plinth-font-size-xs);
47
+ --text-sm: var(--plinth-font-size-sm);
48
+ --text-md: var(--plinth-font-size-md);
49
+ --text-lg: var(--plinth-font-size-lg);
50
+ --text-xl: var(--plinth-font-size-xl);
51
+ --text-2xl: var(--plinth-font-size-2xl);
52
+ --text-3xl: var(--plinth-font-size-3xl);
53
+ --text-4xl: var(--plinth-font-size-4xl);
54
+ --text-5xl: var(--plinth-font-size-5xl);
55
+ --text-6xl: var(--plinth-font-size-6xl);
56
+ --text-field: var(--plinth-font-size-field);
57
+ --font-weight-regular: var(--plinth-font-weight-regular);
58
+ --font-weight-medium: var(--plinth-font-weight-medium);
59
+ --font-weight-semibold: var(--plinth-font-weight-semibold);
60
+ --font-weight-bold: var(--plinth-font-weight-bold);
61
+ --leading-display: var(--plinth-font-leading-display);
62
+ --leading-tight: var(--plinth-font-leading-tight);
63
+ --leading-normal: var(--plinth-font-leading-normal);
64
+ --tracking-normal: var(--plinth-font-tracking-normal);
65
+ --tracking-snug: var(--plinth-font-tracking-snug);
66
+ --tracking-tight: var(--plinth-font-tracking-tight);
67
+ --tracking-tighter: var(--plinth-font-tracking-tighter);
68
+ --spacing: var(--plinth-space-1);
69
+ --radius-control: var(--plinth-radius-control);
70
+ --radius-container: var(--plinth-radius-container);
71
+ --radius-pill: var(--plinth-radius-pill);
72
+ --shadow-1: var(--plinth-elevation-1);
73
+ --shadow-2: var(--plinth-elevation-2);
74
+ --shadow-3: var(--plinth-elevation-3);
75
+ --breakpoint-md: 768px;
76
+ --breakpoint-lg: 1280px;
77
+ --ease-standard: var(--plinth-easing-standard);
78
+ --ease-enter: var(--plinth-easing-enter);
79
+ --ease-exit: var(--plinth-easing-exit);
80
+ }
package/packages/tokens/dist/tokens.css ADDED
@@ -0,0 +1,413 @@
1
+ /* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
2
+
3
+ @layer plinth {
4
+ :root {
5
+ --plinth-ref-color-neutral-0: oklch(1 0 0);
6
+ --plinth-ref-color-neutral-50: oklch(0.985 0.002 260);
7
+ --plinth-ref-color-neutral-100: oklch(0.965 0.003 260);
8
+ --plinth-ref-color-neutral-150: oklch(0.945 0.004 260);
9
+ --plinth-ref-color-neutral-200: oklch(0.92 0.004 260);
10
+ --plinth-ref-color-neutral-300: oklch(0.82 0.005 260);
11
+ --plinth-ref-color-neutral-400: oklch(0.71 0.008 260);
12
+ --plinth-ref-color-neutral-500: oklch(0.54 0.01 260);
13
+ --plinth-ref-color-neutral-600: oklch(0.45 0.01 260);
14
+ --plinth-ref-color-neutral-700: oklch(0.37 0.01 260);
15
+ --plinth-ref-color-neutral-800: oklch(0.27 0.008 260);
16
+ --plinth-ref-color-neutral-850: oklch(0.235 0.007 260);
17
+ --plinth-ref-color-neutral-900: oklch(0.205 0.006 260);
18
+ --plinth-ref-color-neutral-950: oklch(0.18 0.005 260);
19
+ --plinth-ref-color-neutral-1000: oklch(0.145 0.004 260);
20
+ --plinth-ref-color-brand-50: #eff6ff;
21
+ --plinth-ref-color-brand-100: #dbeafe;
22
+ --plinth-ref-color-brand-200: #bfdbfe;
23
+ --plinth-ref-color-brand-300: #93c5fd;
24
+ --plinth-ref-color-brand-400: #60a5fa;
25
+ --plinth-ref-color-brand-500: #3b82f6;
26
+ --plinth-ref-color-brand-600: #2563eb;
27
+ --plinth-ref-color-brand-700: #1d4ed8;
28
+ --plinth-ref-color-brand-800: #1e40af;
29
+ --plinth-ref-color-brand-900: #1e3a8a;
30
+ --plinth-ref-color-brand-950: #172554;
31
+ --plinth-ref-color-green-50: #f0fdf4;
32
+ --plinth-ref-color-green-100: #dcfce7;
33
+ --plinth-ref-color-green-200: #bbf7d0;
34
+ --plinth-ref-color-green-400: #4ade80;
35
+ --plinth-ref-color-green-600: #16a34a;
36
+ --plinth-ref-color-green-700: #15803d;
37
+ --plinth-ref-color-green-800: #166534;
38
+ --plinth-ref-color-green-950: #052e16;
39
+ --plinth-ref-color-amber-50: #fffbeb;
40
+ --plinth-ref-color-amber-100: #fef3c7;
41
+ --plinth-ref-color-amber-200: #fde68a;
42
+ --plinth-ref-color-amber-400: #fbbf24;
43
+ --plinth-ref-color-amber-500: #f59e0b;
44
+ --plinth-ref-color-amber-700: #b45309;
45
+ --plinth-ref-color-amber-800: #92400e;
46
+ --plinth-ref-color-amber-950: #451a03;
47
+ --plinth-ref-color-red-50: #fef2f2;
48
+ --plinth-ref-color-red-100: #fee2e2;
49
+ --plinth-ref-color-red-200: #fecaca;
50
+ --plinth-ref-color-red-400: #f87171;
51
+ --plinth-ref-color-red-600: #dc2626;
52
+ --plinth-ref-color-red-700: #b91c1c;
53
+ --plinth-ref-color-red-800: #991b1b;
54
+ --plinth-ref-color-red-950: #450a0a;
55
+ --plinth-ref-color-black-alpha-10: #0000001a;
56
+ --plinth-ref-color-black-alpha-15: #00000026;
57
+ --plinth-ref-color-black-alpha-30: #0000004d;
58
+ --plinth-ref-color-black-alpha-50: #00000080;
59
+ --plinth-ref-color-black-alpha-60: #00000099;
60
+ --plinth-ref-color-black-alpha-70: #000000b3;
61
+ --plinth-ref-color-ink-alpha-6: oklch(0.18 0.005 260 / 0.06);
62
+ --plinth-ref-color-ink-alpha-10: oklch(0.18 0.005 260 / 0.1);
63
+ --plinth-ref-color-ink-alpha-20: oklch(0.18 0.005 260 / 0.2);
64
+ --plinth-ref-color-chalk-alpha-6: oklch(0.965 0.003 260 / 0.06);
65
+ --plinth-ref-color-chalk-alpha-10: oklch(0.965 0.003 260 / 0.1);
66
+ --plinth-ref-color-chalk-alpha-20: oklch(0.965 0.003 260 / 0.2);
67
+ --plinth-ref-color-white-alpha-12: #ffffff1f;
68
+ --plinth-ref-space-0: 0;
69
+ --plinth-ref-space-1: 0.25rem;
70
+ --plinth-ref-space-2: 0.5rem;
71
+ --plinth-ref-space-3: 0.75rem;
72
+ --plinth-ref-space-4: 1rem;
73
+ --plinth-ref-space-5: 1.25rem;
74
+ --plinth-ref-space-6: 1.5rem;
75
+ --plinth-ref-space-8: 2rem;
76
+ --plinth-ref-space-10: 2.5rem;
77
+ --plinth-ref-space-12: 3rem;
78
+ --plinth-ref-space-14: 3.5rem;
79
+ --plinth-ref-space-16: 4rem;
80
+ --plinth-ref-space-0-5: 0.125rem;
81
+ --plinth-ref-size-16: 1rem;
82
+ --plinth-ref-size-20: 1.25rem;
83
+ --plinth-ref-size-24: 1.5rem;
84
+ --plinth-ref-size-28: 1.75rem;
85
+ --plinth-ref-size-32: 2rem;
86
+ --plinth-ref-size-40: 2.5rem;
87
+ --plinth-ref-size-44: 2.75rem;
88
+ --plinth-ref-size-56: 3.5rem;
89
+ --plinth-ref-size-160: 10rem;
90
+ --plinth-ref-size-192: 12rem;
91
+ --plinth-ref-size-320: 20rem;
92
+ --plinth-ref-size-400: 25rem;
93
+ --plinth-ref-size-480: 30rem;
94
+ --plinth-ref-radius-0: 0;
95
+ --plinth-ref-radius-2: 0.125rem;
96
+ --plinth-ref-radius-4: 0.25rem;
97
+ --plinth-ref-radius-6: 0.375rem;
98
+ --plinth-ref-radius-8: 0.5rem;
99
+ --plinth-ref-radius-10: 0.625rem;
100
+ --plinth-ref-radius-12: 0.75rem;
101
+ --plinth-ref-radius-16: 1rem;
102
+ --plinth-ref-radius-full: 9999px;
103
+ --plinth-ref-border-width-1: 1px;
104
+ --plinth-ref-border-width-2: 2px;
105
+ --plinth-ref-border-width-3: 3px;
106
+ --plinth-ref-font-family-sans: 'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
107
+ --plinth-ref-font-family-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
108
+ --plinth-ref-font-size-12: 0.75rem;
109
+ --plinth-ref-font-size-13: 0.8125rem;
110
+ --plinth-ref-font-size-14: 0.875rem;
111
+ --plinth-ref-font-size-15: 0.9375rem;
112
+ --plinth-ref-font-size-16: 1rem;
113
+ --plinth-ref-font-size-18: 1.125rem;
114
+ --plinth-ref-font-size-24: 1.5rem;
115
+ --plinth-ref-font-size-30: 1.875rem;
116
+ --plinth-ref-font-size-36: 2.25rem;
117
+ --plinth-ref-font-size-48: 3rem;
118
+ --plinth-ref-font-size-64: 4rem;
119
+ --plinth-ref-font-weight-400: 400;
120
+ --plinth-ref-font-weight-500: 500;
121
+ --plinth-ref-font-weight-600: 600;
122
+ --plinth-ref-font-weight-700: 700;
123
+ --plinth-ref-font-leading-105: 1.05;
124
+ --plinth-ref-font-leading-125: 1.25;
125
+ --plinth-ref-font-leading-150: 1.5;
126
+ --plinth-ref-font-tracking-0: 0;
127
+ --plinth-ref-font-tracking-neg-1: -0.01em;
128
+ --plinth-ref-font-tracking-neg-2: -0.02em;
129
+ --plinth-ref-font-tracking-neg-4: -0.04em;
130
+ --plinth-ref-duration-120: 120ms;
131
+ --plinth-ref-duration-200: 200ms;
132
+ --plinth-ref-duration-320: 320ms;
133
+ --plinth-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);
134
+ --plinth-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
135
+ --plinth-ref-easing-exit: cubic-bezier(0.3, 0, 1, 1);
136
+ --plinth-space-0: var(--plinth-ref-space-0);
137
+ --plinth-space-1: var(--plinth-ref-space-1);
138
+ --plinth-space-2: var(--plinth-ref-space-2);
139
+ --plinth-space-3: var(--plinth-ref-space-3);
140
+ --plinth-space-4: var(--plinth-ref-space-4);
141
+ --plinth-space-5: var(--plinth-ref-space-5);
142
+ --plinth-space-6: var(--plinth-ref-space-6);
143
+ --plinth-space-8: var(--plinth-ref-space-8);
144
+ --plinth-space-10: var(--plinth-ref-space-10);
145
+ --plinth-space-12: var(--plinth-ref-space-12);
146
+ --plinth-space-14: var(--plinth-ref-space-14);
147
+ --plinth-space-16: var(--plinth-ref-space-16);
148
+ --plinth-space-0-5: var(--plinth-ref-space-0-5);
149
+ --plinth-radius-control: var(--plinth-ref-radius-6);
150
+ --plinth-radius-container: var(--plinth-ref-radius-10);
151
+ --plinth-radius-pill: var(--plinth-ref-radius-full);
152
+ --plinth-border-width-thin: var(--plinth-ref-border-width-1);
153
+ --plinth-border-width-thick: var(--plinth-ref-border-width-2);
154
+ --plinth-opacity-disabled: 0.5;
155
+ --plinth-focus-ring-width: var(--plinth-ref-border-width-2);
156
+ --plinth-focus-ring-offset: 0;
157
+ --plinth-focus-ring-offset-filled: var(--plinth-ref-border-width-2);
158
+ --plinth-focus-ring-offset-inset: -2px;
159
+ --plinth-font-family-body: var(--plinth-ref-font-family-sans);
160
+ --plinth-font-family-mono: var(--plinth-ref-font-family-mono);
161
+ --plinth-font-size-xs: var(--plinth-ref-font-size-12);
162
+ --plinth-font-size-sm: var(--plinth-ref-font-size-13);
163
+ --plinth-font-size-md: var(--plinth-ref-font-size-14);
164
+ --plinth-font-size-lg: var(--plinth-ref-font-size-15);
165
+ --plinth-font-size-xl: var(--plinth-ref-font-size-18);
166
+ --plinth-font-size-2xl: var(--plinth-ref-font-size-24);
167
+ --plinth-font-size-3xl: var(--plinth-ref-font-size-30);
168
+ --plinth-font-size-4xl: var(--plinth-ref-font-size-36);
169
+ --plinth-font-size-5xl: var(--plinth-ref-font-size-48);
170
+ --plinth-font-size-6xl: var(--plinth-ref-font-size-64);
171
+ --plinth-font-size-field: var(--plinth-ref-font-size-16);
172
+ --plinth-font-weight-regular: var(--plinth-ref-font-weight-400);
173
+ --plinth-font-weight-medium: var(--plinth-ref-font-weight-500);
174
+ --plinth-font-weight-semibold: var(--plinth-ref-font-weight-600);
175
+ --plinth-font-weight-bold: var(--plinth-ref-font-weight-700);
176
+ --plinth-font-leading-display: var(--plinth-ref-font-leading-105);
177
+ --plinth-font-leading-tight: var(--plinth-ref-font-leading-125);
178
+ --plinth-font-leading-normal: var(--plinth-ref-font-leading-150);
179
+ --plinth-font-tracking-normal: var(--plinth-ref-font-tracking-0);
180
+ --plinth-font-tracking-snug: var(--plinth-ref-font-tracking-neg-1);
181
+ --plinth-font-tracking-tight: var(--plinth-ref-font-tracking-neg-2);
182
+ --plinth-font-tracking-tighter: var(--plinth-ref-font-tracking-neg-4);
183
+ --plinth-duration-fast: var(--plinth-ref-duration-120);
184
+ --plinth-duration-normal: var(--plinth-ref-duration-200);
185
+ --plinth-duration-slow: var(--plinth-ref-duration-320);
186
+ --plinth-easing-standard: var(--plinth-ref-easing-standard);
187
+ --plinth-easing-enter: var(--plinth-ref-easing-enter);
188
+ --plinth-easing-exit: var(--plinth-ref-easing-exit);
189
+ --plinth-control-sm: var(--plinth-ref-size-28);
190
+ --plinth-control-md: var(--plinth-ref-size-32);
191
+ --plinth-control-lg: var(--plinth-ref-size-40);
192
+ --plinth-touch-target: var(--plinth-ref-size-40);
193
+ --plinth-size-icon-sm: var(--plinth-ref-size-16);
194
+ --plinth-size-icon-md: var(--plinth-ref-size-20);
195
+ --plinth-size-icon-lg: var(--plinth-ref-size-24);
196
+ --plinth-size-row: var(--plinth-ref-size-44);
197
+ --plinth-size-avatar-sm: var(--plinth-ref-size-24);
198
+ --plinth-size-avatar-md: var(--plinth-ref-size-32);
199
+ --plinth-size-avatar-lg: var(--plinth-ref-size-40);
200
+ --plinth-size-avatar-xl: var(--plinth-ref-size-56);
201
+ --plinth-size-dialog: var(--plinth-ref-size-480);
202
+ --plinth-size-panel: var(--plinth-ref-size-400);
203
+ --plinth-size-peek: var(--plinth-ref-size-160);
204
+ --plinth-size-menu-min: var(--plinth-ref-size-192);
205
+ --plinth-size-menu-max: var(--plinth-ref-size-320);
206
+ --plinth-layer-base: 0;
207
+ --plinth-layer-sticky: 100;
208
+ --plinth-layer-overlay: 200;
209
+ --plinth-layer-sheet: 300;
210
+ --plinth-layer-toast: 400;
211
+ --plinth-breakpoint-md: 768px;
212
+ --plinth-breakpoint-lg: 1280px;
213
+ --plinth-page-header-height: var(--plinth-space-14);
214
+ --plinth-page-header-offset: var(--plinth-space-0);
215
+ --plinth-data-table-row-height: var(--plinth-size-row);
216
+ --plinth-list-row-height: var(--plinth-size-row);
217
+ --plinth-pill-height: var(--plinth-control-md);
218
+ --plinth-dialog-width: var(--plinth-size-dialog);
219
+ --plinth-sheet-side-width: var(--plinth-size-panel);
220
+ --plinth-drawer-peek-height: var(--plinth-size-peek);
221
+ --plinth-section-menu-height: var(--plinth-space-14);
222
+ --plinth-section-menu-item-height: var(--plinth-control-lg);
223
+ --plinth-menu-min-width: var(--plinth-size-menu-min);
224
+ --plinth-menu-max-width: var(--plinth-size-menu-max);
225
+ --plinth-text-field-trailing-size: var(--plinth-control-md);
226
+ }
227
+
228
+ :root,
229
+ [data-theme="light"] {
230
+ color-scheme: light;
231
+ --plinth-color-surface: var(--plinth-ref-color-neutral-50);
232
+ --plinth-color-surface-raised: var(--plinth-ref-color-neutral-0);
233
+ --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-100);
234
+ --plinth-color-surface-hover: var(--plinth-ref-color-neutral-150);
235
+ --plinth-color-text: var(--plinth-ref-color-neutral-950);
236
+ --plinth-color-text-muted: var(--plinth-ref-color-neutral-600);
237
+ --plinth-color-text-subtle: var(--plinth-ref-color-neutral-500);
238
+ --plinth-color-border: var(--plinth-ref-color-ink-alpha-10);
239
+ --plinth-color-border-strong: var(--plinth-ref-color-ink-alpha-20);
240
+ --plinth-color-divider: var(--plinth-ref-color-ink-alpha-6);
241
+ --plinth-color-primary: var(--plinth-ref-color-neutral-950);
242
+ --plinth-color-primary-hover: var(--plinth-ref-color-neutral-800);
243
+ --plinth-color-primary-active: var(--plinth-ref-color-neutral-700);
244
+ --plinth-color-on-primary: var(--plinth-ref-color-neutral-0);
245
+ --plinth-color-primary-edge: var(--plinth-ref-color-white-alpha-12);
246
+ --plinth-color-accent: var(--plinth-ref-color-brand-600);
247
+ --plinth-color-accent-text: var(--plinth-ref-color-brand-700);
248
+ --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
249
+ --plinth-color-focus-ring: var(--plinth-ref-color-brand-600);
250
+ --plinth-color-overlay: var(--plinth-ref-color-black-alpha-50);
251
+ --plinth-color-info: var(--plinth-ref-color-brand-600);
252
+ --plinth-color-info-surface: var(--plinth-ref-color-brand-100);
253
+ --plinth-color-info-text: var(--plinth-ref-color-brand-800);
254
+ --plinth-color-success: var(--plinth-ref-color-green-600);
255
+ --plinth-color-success-surface: var(--plinth-ref-color-green-100);
256
+ --plinth-color-success-text: var(--plinth-ref-color-green-800);
257
+ --plinth-color-warning: var(--plinth-ref-color-amber-500);
258
+ --plinth-color-warning-surface: var(--plinth-ref-color-amber-100);
259
+ --plinth-color-warning-text: var(--plinth-ref-color-amber-800);
260
+ --plinth-color-danger: var(--plinth-ref-color-red-600);
261
+ --plinth-color-danger-surface: var(--plinth-ref-color-red-100);
262
+ --plinth-color-danger-text: var(--plinth-ref-color-red-800);
263
+ --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
264
+ --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
265
+ --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
266
+ --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
267
+ --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
268
+ --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
269
+ --plinth-color-accent-subtle: var(--plinth-ref-color-brand-50);
270
+ --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-100);
271
+ --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-200);
272
+ --plinth-elevation-1: 0 1px 2px 0 #0000001a;
273
+ --plinth-elevation-2: 0 4px 12px 0 #00000026;
274
+ --plinth-elevation-3: 0 12px 32px 0 #00000026;
275
+ --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
276
+ --plinth-callout-neutral-border: var(--plinth-color-border);
277
+ --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 6%, transparent);
278
+ --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
279
+ --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 6%, transparent);
280
+ --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
281
+ --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 6%, transparent);
282
+ --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
283
+ --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 6%, transparent);
284
+ --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
285
+ }
286
+
287
+ [data-theme="dark"],
288
+ .dark {
289
+ color-scheme: dark;
290
+ --plinth-color-surface: var(--plinth-ref-color-neutral-950);
291
+ --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
292
+ --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
293
+ --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
294
+ --plinth-color-text: var(--plinth-ref-color-neutral-100);
295
+ --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
296
+ --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
297
+ --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
298
+ --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
299
+ --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
300
+ --plinth-color-primary: var(--plinth-ref-color-neutral-100);
301
+ --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
302
+ --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
303
+ --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
304
+ --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
305
+ --plinth-color-accent: var(--plinth-ref-color-brand-600);
306
+ --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
307
+ --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
308
+ --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
309
+ --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
310
+ --plinth-color-info: var(--plinth-ref-color-brand-400);
311
+ --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
312
+ --plinth-color-info-text: var(--plinth-ref-color-brand-200);
313
+ --plinth-color-success: var(--plinth-ref-color-green-400);
314
+ --plinth-color-success-surface: var(--plinth-ref-color-green-950);
315
+ --plinth-color-success-text: var(--plinth-ref-color-green-200);
316
+ --plinth-color-warning: var(--plinth-ref-color-amber-400);
317
+ --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
318
+ --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
319
+ --plinth-color-danger: var(--plinth-ref-color-red-400);
320
+ --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
321
+ --plinth-color-danger-text: var(--plinth-ref-color-red-200);
322
+ --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
323
+ --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
324
+ --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
325
+ --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
326
+ --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
327
+ --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
328
+ --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
329
+ --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
330
+ --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
331
+ --plinth-elevation-1: 0 1px 2px 0 #0000004d;
332
+ --plinth-elevation-2: 0 4px 12px 0 #00000080;
333
+ --plinth-elevation-3: 0 12px 32px 0 #00000099;
334
+ --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
335
+ --plinth-callout-neutral-border: var(--plinth-color-border);
336
+ --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
337
+ --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
338
+ --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
339
+ --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
340
+ --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
341
+ --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
342
+ --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
343
+ --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
344
+ }
345
+
346
+ @media (prefers-color-scheme: dark) {
347
+ :root:not([data-theme="light"], .light) {
348
+ color-scheme: dark;
349
+ --plinth-color-surface: var(--plinth-ref-color-neutral-950);
350
+ --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
351
+ --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
352
+ --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
353
+ --plinth-color-text: var(--plinth-ref-color-neutral-100);
354
+ --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
355
+ --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
356
+ --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
357
+ --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
358
+ --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
359
+ --plinth-color-primary: var(--plinth-ref-color-neutral-100);
360
+ --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
361
+ --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
362
+ --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
363
+ --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
364
+ --plinth-color-accent: var(--plinth-ref-color-brand-600);
365
+ --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
366
+ --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
367
+ --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
368
+ --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
369
+ --plinth-color-info: var(--plinth-ref-color-brand-400);
370
+ --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
371
+ --plinth-color-info-text: var(--plinth-ref-color-brand-200);
372
+ --plinth-color-success: var(--plinth-ref-color-green-400);
373
+ --plinth-color-success-surface: var(--plinth-ref-color-green-950);
374
+ --plinth-color-success-text: var(--plinth-ref-color-green-200);
375
+ --plinth-color-warning: var(--plinth-ref-color-amber-400);
376
+ --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
377
+ --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
378
+ --plinth-color-danger: var(--plinth-ref-color-red-400);
379
+ --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
380
+ --plinth-color-danger-text: var(--plinth-ref-color-red-200);
381
+ --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
382
+ --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
383
+ --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
384
+ --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
385
+ --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
386
+ --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
387
+ --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
388
+ --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
389
+ --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
390
+ --plinth-elevation-1: 0 1px 2px 0 #0000004d;
391
+ --plinth-elevation-2: 0 4px 12px 0 #00000080;
392
+ --plinth-elevation-3: 0 12px 32px 0 #00000099;
393
+ --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
394
+ --plinth-callout-neutral-border: var(--plinth-color-border);
395
+ --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
396
+ --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
397
+ --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
398
+ --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
399
+ --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
400
+ --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
401
+ --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
402
+ --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
403
+ }
404
+ }
405
+
406
+ @media (prefers-reduced-motion: reduce) {
407
+ :root {
408
+ --plinth-duration-fast: 0ms;
409
+ --plinth-duration-normal: 0ms;
410
+ --plinth-duration-slow: 0ms;
411
+ }
412
+ }
413
+ }