@ptbdynamic/plinth 0.0.0-stage → 0.1.1

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