@moldable-ai/ui 0.2.29 → 0.2.31

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 (181) hide show
  1. package/dist/catalog/component-catalog.d.ts +9 -2
  2. package/dist/catalog/component-catalog.d.ts.map +1 -1
  3. package/dist/catalog/component-catalog.js +11 -7
  4. package/dist/catalog/core-control-stories.d.ts.map +1 -1
  5. package/dist/catalog/core-control-stories.js +1 -1
  6. package/dist/catalog/core-foundation-stories.d.ts.map +1 -1
  7. package/dist/catalog/core-foundation-stories.js +5 -5
  8. package/dist/components/ui/app-frame.d.ts +20 -1
  9. package/dist/components/ui/app-frame.d.ts.map +1 -1
  10. package/dist/components/ui/app-frame.js +37 -7
  11. package/dist/components/ui/badge.d.ts +1 -1
  12. package/dist/components/ui/badge.js +1 -1
  13. package/dist/components/ui/button.d.ts +5 -3
  14. package/dist/components/ui/button.d.ts.map +1 -1
  15. package/dist/components/ui/button.js +39 -11
  16. package/dist/components/ui/card.d.ts +12 -2
  17. package/dist/components/ui/card.d.ts.map +1 -1
  18. package/dist/components/ui/card.js +3 -2
  19. package/dist/components/ui/checkbox.d.ts +4 -1
  20. package/dist/components/ui/checkbox.d.ts.map +1 -1
  21. package/dist/components/ui/checkbox.js +4 -4
  22. package/dist/components/ui/context-menu.js +6 -6
  23. package/dist/components/ui/dropdown-menu.js +6 -6
  24. package/dist/components/ui/icon-button.d.ts +1 -1
  25. package/dist/components/ui/icon-button.d.ts.map +1 -1
  26. package/dist/components/ui/icon-button.js +1 -0
  27. package/dist/components/ui/input.d.ts +6 -2
  28. package/dist/components/ui/input.d.ts.map +1 -1
  29. package/dist/components/ui/input.js +2 -2
  30. package/dist/components/ui/material.d.ts +8 -3
  31. package/dist/components/ui/material.d.ts.map +1 -1
  32. package/dist/components/ui/material.js +2 -2
  33. package/dist/components/ui/search-field.d.ts +3 -1
  34. package/dist/components/ui/search-field.d.ts.map +1 -1
  35. package/dist/components/ui/search-field.js +16 -6
  36. package/dist/components/ui/segmented-control.d.ts +3 -1
  37. package/dist/components/ui/segmented-control.d.ts.map +1 -1
  38. package/dist/components/ui/segmented-control.js +23 -17
  39. package/dist/components/ui/select.js +2 -2
  40. package/dist/components/ui/sidebar.d.ts +5 -3
  41. package/dist/components/ui/sidebar.d.ts.map +1 -1
  42. package/dist/components/ui/sidebar.js +53 -15
  43. package/dist/components/ui/status.d.ts +1 -1
  44. package/dist/components/ui/status.js +1 -1
  45. package/dist/components/ui/switch.d.ts +3 -1
  46. package/dist/components/ui/switch.d.ts.map +1 -1
  47. package/dist/components/ui/switch.js +3 -2
  48. package/dist/components/ui/toolbar-controls.d.ts +3 -1
  49. package/dist/components/ui/toolbar-controls.d.ts.map +1 -1
  50. package/dist/components/ui/toolbar-controls.js +14 -7
  51. package/dist/components/ui/toolbar.d.ts +5 -4
  52. package/dist/components/ui/toolbar.d.ts.map +1 -1
  53. package/dist/components/ui/toolbar.js +3 -3
  54. package/dist/index.d.ts +2 -1
  55. package/dist/index.d.ts.map +1 -1
  56. package/dist/index.js +3 -1
  57. package/dist/lib/frame-lifecycle.d.ts +1 -0
  58. package/dist/lib/frame-lifecycle.d.ts.map +1 -1
  59. package/dist/lib/frame-lifecycle.js +7 -0
  60. package/dist/lib/theme.d.ts +39 -5
  61. package/dist/lib/theme.d.ts.map +1 -1
  62. package/dist/lib/theme.js +105 -17
  63. package/dist/tokens/contracts.d.ts +79 -0
  64. package/dist/tokens/contracts.d.ts.map +1 -0
  65. package/dist/tokens/contracts.js +57 -0
  66. package/dist/tokens/index.d.ts +2 -0
  67. package/dist/tokens/index.d.ts.map +1 -0
  68. package/dist/tokens/index.js +1 -0
  69. package/docs/README.md +2 -0
  70. package/docs/adaptive-materials.md +14 -9
  71. package/docs/design-tokens.md +10 -6
  72. package/docs/foundations.md +3 -3
  73. package/docs/macos-design-audit.md +144 -0
  74. package/docs/native-integration.md +4 -4
  75. package/docs/platform-architecture.md +189 -0
  76. package/docs/standalone-app-windows.md +37 -0
  77. package/docs/visual-regression.md +6 -8
  78. package/package.json +13 -1
  79. package/src/components/ui/accordion.md +46 -0
  80. package/src/components/ui/alert.md +12 -4
  81. package/src/components/ui/app-frame.md +8 -5
  82. package/src/components/ui/aspect-ratio.md +37 -0
  83. package/src/components/ui/avatar.md +48 -0
  84. package/src/components/ui/breadcrumb.md +52 -0
  85. package/src/components/ui/button-group.md +43 -0
  86. package/src/components/ui/button.md +20 -4
  87. package/src/components/ui/calendar.md +42 -0
  88. package/src/components/ui/card.md +43 -0
  89. package/src/components/ui/carousel.md +47 -0
  90. package/src/components/ui/chart.md +52 -0
  91. package/src/components/ui/checkbox.md +36 -0
  92. package/src/components/ui/collapsible.md +2 -3
  93. package/src/components/ui/color-well.md +14 -4
  94. package/src/components/ui/combobox.md +3 -3
  95. package/src/components/ui/confirm-dialog.md +5 -4
  96. package/src/components/ui/context-menu.md +3 -2
  97. package/src/components/ui/date-field.md +6 -1
  98. package/src/components/ui/date-picker.md +6 -3
  99. package/src/components/ui/dialog.md +14 -12
  100. package/src/components/ui/drawer.md +58 -0
  101. package/src/components/ui/error-boundary-view.md +1 -1
  102. package/src/components/ui/field.md +2 -1
  103. package/src/components/ui/form.md +71 -0
  104. package/src/components/ui/grid.md +4 -3
  105. package/src/components/ui/icon-button.md +4 -1
  106. package/src/components/ui/input-group.md +49 -0
  107. package/src/components/ui/input-otp.md +56 -0
  108. package/src/components/ui/input.md +40 -0
  109. package/src/components/ui/inspector.md +47 -7
  110. package/src/components/ui/item.md +5 -3
  111. package/src/components/ui/kbd.md +30 -0
  112. package/src/components/ui/label.md +29 -0
  113. package/src/components/ui/list.md +2 -2
  114. package/src/components/ui/material.md +25 -12
  115. package/src/components/ui/menu-items.md +60 -0
  116. package/src/components/ui/menubar.md +58 -0
  117. package/src/components/ui/message-scroller-primitive.md +70 -0
  118. package/src/components/ui/message-scroller.md +86 -0
  119. package/src/components/ui/navigation-button-group.md +4 -3
  120. package/src/components/ui/navigation-menu.md +52 -0
  121. package/src/components/ui/number-input.md +8 -0
  122. package/src/components/ui/pagination.md +51 -0
  123. package/src/components/ui/panel.md +6 -0
  124. package/src/components/ui/popover.md +10 -7
  125. package/src/components/ui/progress.md +31 -0
  126. package/src/components/ui/radio-group.md +36 -0
  127. package/src/components/ui/resizable.md +2 -1
  128. package/src/components/ui/scroll-area.md +3 -1
  129. package/src/components/ui/search-field.md +6 -1
  130. package/src/components/ui/segmented-control.md +6 -1
  131. package/src/components/ui/separator.md +35 -0
  132. package/src/components/ui/sidebar.md +20 -3
  133. package/src/components/ui/skeleton.md +36 -0
  134. package/src/components/ui/slider.md +58 -0
  135. package/src/components/ui/spinner.md +41 -0
  136. package/src/components/ui/split-view.md +8 -4
  137. package/src/components/ui/switch.md +44 -0
  138. package/src/components/ui/table.md +7 -7
  139. package/src/components/ui/tabs.md +3 -1
  140. package/src/components/ui/textarea.md +41 -0
  141. package/src/components/ui/toggle-group.md +2 -2
  142. package/src/components/ui/toggle.md +9 -9
  143. package/src/components/ui/toolbar-controls.md +17 -9
  144. package/src/components/ui/toolbar.md +6 -6
  145. package/src/styles/index.css +171 -117
  146. package/src/tokens/contracts.ts +131 -0
  147. package/src/tokens/index.css +6 -0
  148. package/src/tokens/index.ts +23 -0
  149. package/src/tokens/macos-26/README.md +37 -0
  150. package/src/tokens/macos-26/aliases.css +53 -0
  151. package/src/tokens/macos-26/compatibility.css +7 -0
  152. package/src/tokens/macos-26/index.css +3 -0
  153. package/src/tokens/macos-26/source/provenance.generated.json +28 -0
  154. package/src/tokens/macos-26/source/sidebar.generated.css +29 -0
  155. package/src/tokens/macos-26/source.css +7 -0
  156. package/src/tokens/macos-26/web-adaptations.json +25 -0
  157. package/src/tokens/macos-26/web-adaptations.md +15 -0
  158. package/src/tokens/macos-27/accessibility.css +11 -0
  159. package/src/tokens/macos-27/aliases.css +304 -0
  160. package/src/tokens/macos-27/compatibility.css +212 -0
  161. package/src/tokens/macos-27/index.css +15 -0
  162. package/src/tokens/macos-27/recipes.css +23 -0
  163. package/src/tokens/macos-27/source/chrome.generated.css +338 -0
  164. package/src/tokens/macos-27/source/colors.generated.css +140 -0
  165. package/src/tokens/macos-27/source/context.generated.css +18 -0
  166. package/src/tokens/macos-27/source/controls.generated.css +764 -0
  167. package/src/tokens/macos-27/source/effects.generated.css +68 -0
  168. package/src/tokens/macos-27/source/kit.generated.css +50 -0
  169. package/src/tokens/macos-27/source/overlays-status.generated.css +931 -0
  170. package/src/tokens/macos-27/source/paint-styles.generated.css +81 -0
  171. package/src/tokens/macos-27/source/provenance.generated.json +62 -0
  172. package/src/tokens/macos-27/source/sizes.generated.css +385 -0
  173. package/src/tokens/macos-27/source/source.generated.json +554 -0
  174. package/src/tokens/macos-27/source/text-styles.generated.css +116 -0
  175. package/src/tokens/macos-27/source.css +17 -0
  176. package/src/tokens/macos-27/web-adaptations.css +98 -0
  177. package/src/tokens/macos-27/web-adaptations.json +163 -0
  178. package/src/tokens/macos-27/web-adaptations.md +117 -0
  179. package/src/tokens/moldable/brand.css +48 -0
  180. package/src/tokens/moldable/index.css +1 -0
  181. package/src/tokens/platform-contract.test.ts +290 -0
@@ -0,0 +1,81 @@
1
+ /*
2
+ * Generated source data.
3
+ * Source: macOS 27.
4
+ * All 10 material paint styles retain their ordered layers and blend modes.
5
+ */
6
+ [data-ui-platform='macos'][data-ui-platform-version='27'],
7
+ [data-ui-platform='macos'][data-ui-platform-version='27']
8
+ [data-ui-appearance='light'] {
9
+ --m27-source-material-standard-blur: 60px;
10
+ --m27-source-material-corner-smoothing: 0.6;
11
+
12
+ --m27-source-material-ultra-thick-layer-count: 2;
13
+ --m27-source-material-ultra-thick-layer-1-color: #333333;
14
+ --m27-source-material-ultra-thick-layer-1-opacity: 1;
15
+ --m27-source-material-ultra-thick-layer-1-blend: linear-dodge;
16
+ --m27-source-material-ultra-thick-layer-2-color: #ececec;
17
+ --m27-source-material-ultra-thick-layer-2-opacity: 0.88;
18
+ --m27-source-material-ultra-thick-layer-2-blend: normal;
19
+ --m27-source-material-ultra-thick-fill: rgb(236 236 236 / 88%);
20
+
21
+ --m27-source-material-thick-layer-count: 1;
22
+ --m27-source-material-thick-layer-1-color: #f6f6f6;
23
+ --m27-source-material-thick-layer-1-opacity: 0.72;
24
+ --m27-source-material-thick-layer-1-blend: normal;
25
+ --m27-source-material-thick-fill: rgb(246 246 246 / 72%);
26
+
27
+ --m27-source-material-medium-layer-count: 1;
28
+ --m27-source-material-medium-layer-1-color: #f6f6f6;
29
+ --m27-source-material-medium-layer-1-opacity: 0.6;
30
+ --m27-source-material-medium-layer-1-blend: normal;
31
+ --m27-source-material-medium-fill: rgb(246 246 246 / 60%);
32
+
33
+ --m27-source-material-thin-layer-count: 1;
34
+ --m27-source-material-thin-layer-1-color: #f6f6f6;
35
+ --m27-source-material-thin-layer-1-opacity: 0.48;
36
+ --m27-source-material-thin-layer-1-blend: normal;
37
+ --m27-source-material-thin-fill: rgb(246 246 246 / 48%);
38
+
39
+ --m27-source-material-ultra-thin-layer-count: 1;
40
+ --m27-source-material-ultra-thin-layer-1-color: #f6f6f6;
41
+ --m27-source-material-ultra-thin-layer-1-opacity: 0.36;
42
+ --m27-source-material-ultra-thin-layer-1-blend: normal;
43
+ --m27-source-material-ultra-thin-fill: rgb(246 246 246 / 36%);
44
+ }
45
+
46
+ [data-ui-platform='macos'][data-ui-platform-version='27']
47
+ [data-ui-appearance='dark'],
48
+ [data-ui-platform='macos'][data-ui-platform-version='27'][data-ui-appearance='dark'] {
49
+ --m27-source-material-standard-blur: 60px;
50
+ --m27-source-material-corner-smoothing: 0.6;
51
+
52
+ --m27-source-material-ultra-thick-layer-count: 1;
53
+ --m27-source-material-ultra-thick-layer-1-color: #000000;
54
+ --m27-source-material-ultra-thick-layer-1-opacity: 0.5;
55
+ --m27-source-material-ultra-thick-layer-1-blend: normal;
56
+ --m27-source-material-ultra-thick-fill: rgb(0 0 0 / 50%);
57
+
58
+ --m27-source-material-thick-layer-count: 1;
59
+ --m27-source-material-thick-layer-1-color: #000000;
60
+ --m27-source-material-thick-layer-1-opacity: 0.4;
61
+ --m27-source-material-thick-layer-1-blend: normal;
62
+ --m27-source-material-thick-fill: rgb(0 0 0 / 40%);
63
+
64
+ --m27-source-material-medium-layer-count: 1;
65
+ --m27-source-material-medium-layer-1-color: #000000;
66
+ --m27-source-material-medium-layer-1-opacity: 0.29;
67
+ --m27-source-material-medium-layer-1-blend: normal;
68
+ --m27-source-material-medium-fill: rgb(0 0 0 / 29%);
69
+
70
+ --m27-source-material-thin-layer-count: 1;
71
+ --m27-source-material-thin-layer-1-color: #000000;
72
+ --m27-source-material-thin-layer-1-opacity: 0.2;
73
+ --m27-source-material-thin-layer-1-blend: normal;
74
+ --m27-source-material-thin-fill: rgb(0 0 0 / 20%);
75
+
76
+ --m27-source-material-ultra-thin-layer-count: 1;
77
+ --m27-source-material-ultra-thin-layer-1-color: #000000;
78
+ --m27-source-material-ultra-thin-layer-1-opacity: 0.1;
79
+ --m27-source-material-ultra-thin-layer-1-blend: normal;
80
+ --m27-source-material-ultra-thin-fill: rgb(0 0 0 / 10%);
81
+ }
@@ -0,0 +1,62 @@
1
+ {
2
+ "source": "macOS 27",
3
+ "schemaVersion": 1,
4
+ "scope": {
5
+ "platform": "macos",
6
+ "platformVersion": "27",
7
+ "publicTheme": false,
8
+ "immutableSourcePack": true
9
+ },
10
+ "inventory": {
11
+ "variables": {
12
+ "total": 147,
13
+ "byType": { "COLOR": 68, "FLOAT": 75, "STRING": 4 }
14
+ },
15
+ "collections": {
16
+ "Colors": {
17
+ "count": 63,
18
+ "modes": ["Light", "Dark"],
19
+ "defaultMode": "Light"
20
+ },
21
+ "Sizes": {
22
+ "count": 65,
23
+ "modes": ["Medium", "Mini", "Small", "Large", "XL"],
24
+ "defaultMode": "Medium"
25
+ },
26
+ "Kit": {
27
+ "count": 18,
28
+ "modes": ["Mode 1"],
29
+ "defaultMode": "Mode 1"
30
+ },
31
+ "Context": {
32
+ "count": 1,
33
+ "modes": ["Content Area", "Over-glass"],
34
+ "defaultMode": "Content Area"
35
+ }
36
+ },
37
+ "localStyles": { "paint": 10, "text": 22, "effect": 0, "grid": 0 }
38
+ },
39
+ "metadata": {
40
+ "allVariableScopes": ["ALL_SCOPES"],
41
+ "allCodeSyntaxObjectsEmpty": true,
42
+ "hiddenKitVariables": [
43
+ "Component Fill",
44
+ "Component Stroke",
45
+ "Subcomponent Fill",
46
+ "Subcomponent Stroke",
47
+ "Section Fill",
48
+ "Section Stroke",
49
+ "Link"
50
+ ]
51
+ },
52
+ "knownSourceAnomalies": [
53
+ "Title 2/Emphasized uses Inter Bold while adjacent styles use SF Pro.",
54
+ "One dark vibrant tertiary text example uses #414141 with LINEAR_DODGE rather than the #404040 variable.",
55
+ "Two source swatch components share a name.",
56
+ "The Kit collection source mode is named Mode 1.",
57
+ "There are no local effect or grid styles.",
58
+ "Labels/Seximal is an unusual source name.",
59
+ "Inactive Small glass Primary and Default are identical within each mode.",
60
+ "Medium and Large glass have identical visible values, including separate frost variables that both resolve to 16."
61
+ ]
62
+ }
@@ -0,0 +1,385 @@
1
+ /*
2
+ * Generated source data.
3
+ * Source: macOS 27.
4
+ * Five source modes and all 65 variables are preserved. Aliases remain aliases.
5
+ */
6
+ [data-ui-platform='macos'][data-ui-platform-version='27'],
7
+ [data-ui-platform='macos'][data-ui-platform-version='27']
8
+ [data-control-size='medium'] {
9
+ --m27-source-size-global-font-size: 13px;
10
+ --m27-source-size-arrow-button-font-size: 13px;
11
+ --m27-source-size-global-height: 24px;
12
+ --m27-source-size-global-radius: 6px;
13
+ --m27-source-size-button-padding-horizontal: 16px;
14
+ --m27-source-size-checkboxes-width: var(--m27-source-size-radio-button-width);
15
+ --m27-source-size-button-radius: var(--m27-source-size-global-radius);
16
+ --m27-source-size-checkboxes-width-checkmark: 9.3100004196167px;
17
+ --m27-source-size-checkboxes-height-checkmark: 8.930000305175781px;
18
+ --m27-source-size-color-well-width: 48px;
19
+ --m27-source-size-color-well-height: 24px;
20
+ --m27-source-size-checkboxes-radius: 5.5px;
21
+ --m27-source-size-combo-button-font-size-chevron: 11px;
22
+ --m27-source-size-combo-button-inset: 2px;
23
+ --m27-source-size-combo-button-text-inset-right: 28px;
24
+ --m27-source-size-combo-button-radius-button: 4.5px;
25
+ --m27-source-size-combo-button-width-button: 24px;
26
+ --m27-source-size-cursor-height: 18px;
27
+ --m27-source-size-dial-height-knob: 6px;
28
+ --m27-source-size-disclosure-font-size: 13px;
29
+ --m27-source-size-disclosure-radius: 6px;
30
+ --m27-source-size-dial-inset-knob: 3px;
31
+ --m27-source-size-fields-inset-left: 8px;
32
+ --m27-source-size-fields-inset-right: 8px;
33
+ --m27-source-size-fields-font-size-search-glyph: 13px;
34
+ --m27-source-size-fields-leading-search-glyph: 15px;
35
+ --m27-source-size-menu-height: 24px;
36
+ --m27-source-size-menu-font-size: 13px;
37
+ --m27-source-size-menu-font-size-symbol: 13px;
38
+ --m27-source-size-menu-width-symbol: 12px;
39
+ --m27-source-size-menu-inset-top-header: 5px;
40
+ --m27-source-size-menu-inset-bottom-header: 4px;
41
+ --m27-source-size-menu-inset-left-header: 20px;
42
+ --m27-source-size-popup-font-size-chevron: 11px;
43
+ --m27-source-size-popup-inset-left: 12px;
44
+ --m27-source-size-segmented-control-margins: 10px;
45
+ --m27-source-size-radio-button-height-dash: 2px;
46
+ --m27-source-size-segmented-control-height-separator: 14px;
47
+ --m27-source-size-radio-button-spacing: 3px;
48
+ --m27-source-size-radio-button-width: 16px;
49
+ --m27-source-size-radio-button-width-dot: 4.800000190734863px;
50
+ --m27-source-size-radio-button-width-dash: 6.5px;
51
+ --m27-source-size-slider-knob-non-ticked-inset: 0px;
52
+ --m27-source-size-slider-knob-non-ticked-width: 20px;
53
+ --m27-source-size-slider-knob-non-ticked-height: 16px;
54
+ --m27-source-size-slider-knob-non-ticked-width-clicked: 25px;
55
+ --m27-source-size-slider-knob-non-ticked-height-clicked: 20px;
56
+ --m27-source-size-slider-knob-ticked-width: 20px;
57
+ --m27-source-size-slider-knob-ticked-height: 16px;
58
+ --m27-source-size-slider-knob-ticked-width-clicked: 25px;
59
+ --m27-source-size-slider-knob-ticked-height-clicked: 20px;
60
+ --m27-source-size-slider-track-inset-vertical: 1px;
61
+ --m27-source-size-slider-track-inset-horizontal: 1px;
62
+ --m27-source-size-slider-track-tick-spacing: 2px;
63
+ --m27-source-size-stepper-width: 20px;
64
+ --m27-source-size-stepper-radius: 6px;
65
+ --m27-source-size-stepper-font-size: 12px;
66
+ --m27-source-size-stepper-width-separator: 14px;
67
+ --m27-source-size-toggle-knob-width: 32px;
68
+ --m27-source-size-toggle-knob-height: 20px;
69
+ --m27-source-size-toggle-knob-clicked-width: 50px;
70
+ --m27-source-size-toggle-knob-clicked-height: 31px;
71
+ --m27-source-size-toggle-track-width: 54px;
72
+ --m27-source-size-toggle-track-height: var(--m27-source-size-global-height);
73
+ --m27-source-size-mode: 'Medium';
74
+
75
+ /* Compatibility names used by the semantic alias layer. */
76
+ --m27-source-size-control-height: var(--m27-source-size-global-height);
77
+ --m27-source-size-control-radius: var(--m27-source-size-global-radius);
78
+ --m27-source-size-button-padding-inline: var(
79
+ --m27-source-size-button-padding-horizontal
80
+ );
81
+ }
82
+
83
+ [data-ui-platform='macos'][data-ui-platform-version='27']
84
+ [data-control-size='mini'],
85
+ [data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='mini'] {
86
+ --m27-source-size-global-font-size: 10px;
87
+ --m27-source-size-arrow-button-font-size: 11px;
88
+ --m27-source-size-global-height: 16px;
89
+ --m27-source-size-global-radius: 4px;
90
+ --m27-source-size-button-padding-horizontal: 7px;
91
+ --m27-source-size-checkboxes-width: var(--m27-source-size-radio-button-width);
92
+ --m27-source-size-button-radius: var(--m27-source-size-global-radius);
93
+ --m27-source-size-checkboxes-width-checkmark: 7.78000020980835px;
94
+ --m27-source-size-checkboxes-height-checkmark: 7.550000190734863px;
95
+ --m27-source-size-color-well-width: 32px;
96
+ --m27-source-size-color-well-height: 16px;
97
+ --m27-source-size-checkboxes-radius: 3.5px;
98
+ --m27-source-size-combo-button-font-size-chevron: 9px;
99
+ --m27-source-size-combo-button-inset: 2px;
100
+ --m27-source-size-combo-button-text-inset-right: 20px;
101
+ --m27-source-size-combo-button-radius-button: 2.5px;
102
+ --m27-source-size-combo-button-width-button: 16px;
103
+ --m27-source-size-cursor-height: 14px;
104
+ --m27-source-size-dial-height-knob: 4px;
105
+ --m27-source-size-disclosure-font-size: 10px;
106
+ --m27-source-size-disclosure-radius: 4px;
107
+ --m27-source-size-dial-inset-knob: 2px;
108
+ --m27-source-size-fields-inset-left: 6px;
109
+ --m27-source-size-fields-inset-right: 6px;
110
+ --m27-source-size-fields-font-size-search-glyph: 11px;
111
+ --m27-source-size-fields-leading-search-glyph: 13px;
112
+ --m27-source-size-menu-height: 19px;
113
+ --m27-source-size-menu-font-size: 10px;
114
+ --m27-source-size-menu-font-size-symbol: 11px;
115
+ --m27-source-size-menu-width-symbol: 6px;
116
+ --m27-source-size-menu-inset-top-header: 3px;
117
+ --m27-source-size-menu-inset-bottom-header: 2px;
118
+ --m27-source-size-menu-inset-left-header: 14px;
119
+ --m27-source-size-popup-font-size-chevron: 10px;
120
+ --m27-source-size-popup-inset-left: 7px;
121
+ --m27-source-size-segmented-control-margins: 6px;
122
+ --m27-source-size-radio-button-height-dash: 1.7000000476837158px;
123
+ --m27-source-size-segmented-control-height-separator: 10px;
124
+ --m27-source-size-radio-button-spacing: 3px;
125
+ --m27-source-size-radio-button-width: 12px;
126
+ --m27-source-size-radio-button-width-dot: 4px;
127
+ --m27-source-size-radio-button-width-dash: 5.5px;
128
+ --m27-source-size-slider-knob-non-ticked-inset: 2px;
129
+ --m27-source-size-slider-knob-non-ticked-width: 16px;
130
+ --m27-source-size-slider-knob-non-ticked-height: 12px;
131
+ --m27-source-size-slider-knob-non-ticked-width-clicked: 20px;
132
+ --m27-source-size-slider-knob-non-ticked-height-clicked: 15px;
133
+ --m27-source-size-slider-knob-ticked-width: 8px;
134
+ --m27-source-size-slider-knob-ticked-height: 16px;
135
+ --m27-source-size-slider-knob-ticked-width-clicked: 10px;
136
+ --m27-source-size-slider-knob-ticked-height-clicked: 20px;
137
+ --m27-source-size-slider-track-inset-vertical: 1px;
138
+ --m27-source-size-slider-track-inset-horizontal: 1px;
139
+ --m27-source-size-slider-track-tick-spacing: 2px;
140
+ --m27-source-size-stepper-width: 13px;
141
+ --m27-source-size-stepper-radius: 4px;
142
+ --m27-source-size-stepper-font-size: 8px;
143
+ --m27-source-size-stepper-width-separator: 9px;
144
+ --m27-source-size-toggle-knob-width: 21px;
145
+ --m27-source-size-toggle-knob-height: 13px;
146
+ --m27-source-size-toggle-knob-clicked-width: 33px;
147
+ --m27-source-size-toggle-knob-clicked-height: 20px;
148
+ --m27-source-size-toggle-track-width: 36px;
149
+ --m27-source-size-toggle-track-height: var(--m27-source-size-global-height);
150
+ --m27-source-size-mode: 'Mini';
151
+
152
+ --m27-source-size-control-height: var(--m27-source-size-global-height);
153
+ --m27-source-size-control-radius: var(--m27-source-size-global-radius);
154
+ --m27-source-size-button-padding-inline: var(
155
+ --m27-source-size-button-padding-horizontal
156
+ );
157
+ }
158
+
159
+ [data-ui-platform='macos'][data-ui-platform-version='27']
160
+ [data-control-size='small'],
161
+ [data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='small'] {
162
+ --m27-source-size-global-font-size: 11px;
163
+ --m27-source-size-arrow-button-font-size: 13px;
164
+ --m27-source-size-global-height: 20px;
165
+ --m27-source-size-global-radius: 5px;
166
+ --m27-source-size-button-padding-horizontal: 10px;
167
+ --m27-source-size-checkboxes-width: var(--m27-source-size-radio-button-width);
168
+ --m27-source-size-button-radius: var(--m27-source-size-global-radius);
169
+ --m27-source-size-checkboxes-width-checkmark: 9.3100004196167px;
170
+ --m27-source-size-checkboxes-height-checkmark: 8.930000305175781px;
171
+ --m27-source-size-color-well-width: 40px;
172
+ --m27-source-size-color-well-height: 20px;
173
+ --m27-source-size-checkboxes-radius: 4.5px;
174
+ --m27-source-size-combo-button-font-size-chevron: 10px;
175
+ --m27-source-size-combo-button-inset: 2px;
176
+ --m27-source-size-combo-button-text-inset-right: 24px;
177
+ --m27-source-size-combo-button-radius-button: 3.5px;
178
+ --m27-source-size-combo-button-width-button: 20px;
179
+ --m27-source-size-cursor-height: 16px;
180
+ --m27-source-size-dial-height-knob: 5px;
181
+ --m27-source-size-disclosure-font-size: 10px;
182
+ --m27-source-size-disclosure-radius: 5px;
183
+ --m27-source-size-dial-inset-knob: 2.5px;
184
+ --m27-source-size-fields-inset-left: 6px;
185
+ --m27-source-size-fields-inset-right: 6px;
186
+ --m27-source-size-fields-font-size-search-glyph: 13px;
187
+ --m27-source-size-fields-leading-search-glyph: 15px;
188
+ --m27-source-size-menu-height: 22px;
189
+ --m27-source-size-menu-font-size: 11px;
190
+ --m27-source-size-menu-font-size-symbol: 11px;
191
+ --m27-source-size-menu-width-symbol: 10px;
192
+ --m27-source-size-menu-inset-top-header: 4px;
193
+ --m27-source-size-menu-inset-bottom-header: 3px;
194
+ --m27-source-size-menu-inset-left-header: 18px;
195
+ --m27-source-size-popup-font-size-chevron: 11px;
196
+ --m27-source-size-popup-inset-left: 10px;
197
+ --m27-source-size-segmented-control-margins: 8px;
198
+ --m27-source-size-radio-button-height-dash: 2px;
199
+ --m27-source-size-segmented-control-height-separator: 12px;
200
+ --m27-source-size-radio-button-spacing: 3px;
201
+ --m27-source-size-radio-button-width: 14px;
202
+ --m27-source-size-radio-button-width-dot: 4.800000190734863px;
203
+ --m27-source-size-radio-button-width-dash: 6.5px;
204
+ --m27-source-size-slider-knob-non-ticked-inset: 1px;
205
+ --m27-source-size-slider-knob-non-ticked-width: 18px;
206
+ --m27-source-size-slider-knob-non-ticked-height: 14px;
207
+ --m27-source-size-slider-knob-non-ticked-width-clicked: 23px;
208
+ --m27-source-size-slider-knob-non-ticked-height-clicked: 18px;
209
+ --m27-source-size-slider-knob-ticked-width: 10px;
210
+ --m27-source-size-slider-knob-ticked-height: 18px;
211
+ --m27-source-size-slider-knob-ticked-width-clicked: 13px;
212
+ --m27-source-size-slider-knob-ticked-height-clicked: 23px;
213
+ --m27-source-size-slider-track-inset-vertical: 1px;
214
+ --m27-source-size-slider-track-inset-horizontal: 1px;
215
+ --m27-source-size-slider-track-tick-spacing: 2px;
216
+ --m27-source-size-stepper-width: 17px;
217
+ --m27-source-size-stepper-radius: 5px;
218
+ --m27-source-size-stepper-font-size: 9px;
219
+ --m27-source-size-stepper-width-separator: 11px;
220
+ --m27-source-size-toggle-knob-width: 26px;
221
+ --m27-source-size-toggle-knob-height: 16px;
222
+ --m27-source-size-toggle-knob-clicked-width: 40px;
223
+ --m27-source-size-toggle-knob-clicked-height: 26px;
224
+ --m27-source-size-toggle-track-width: 44px;
225
+ --m27-source-size-toggle-track-height: var(--m27-source-size-global-height);
226
+ --m27-source-size-mode: 'Small';
227
+
228
+ --m27-source-size-control-height: var(--m27-source-size-global-height);
229
+ --m27-source-size-control-radius: var(--m27-source-size-global-radius);
230
+ --m27-source-size-button-padding-inline: var(
231
+ --m27-source-size-button-padding-horizontal
232
+ );
233
+ }
234
+
235
+ [data-ui-platform='macos'][data-ui-platform-version='27']
236
+ [data-control-size='large'],
237
+ [data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='large'] {
238
+ --m27-source-size-global-font-size: 13px;
239
+ --m27-source-size-arrow-button-font-size: 13px;
240
+ --m27-source-size-global-height: 28px;
241
+ --m27-source-size-global-radius: 7px;
242
+ --m27-source-size-button-padding-horizontal: 16px;
243
+ --m27-source-size-checkboxes-width: var(--m27-source-size-radio-button-width);
244
+ --m27-source-size-button-radius: 1000px;
245
+ --m27-source-size-checkboxes-width-checkmark: 11.720000267028809px;
246
+ --m27-source-size-checkboxes-height-checkmark: 11.300000190734863px;
247
+ --m27-source-size-color-well-width: 56px;
248
+ --m27-source-size-color-well-height: 28px;
249
+ --m27-source-size-checkboxes-radius: 6.5px;
250
+ --m27-source-size-combo-button-font-size-chevron: 12.5px;
251
+ --m27-source-size-combo-button-inset: 2px;
252
+ --m27-source-size-combo-button-text-inset-right: 28px;
253
+ --m27-source-size-combo-button-radius-button: 5.5px;
254
+ --m27-source-size-combo-button-width-button: 24px;
255
+ --m27-source-size-cursor-height: 18px;
256
+ --m27-source-size-dial-height-knob: 6px;
257
+ --m27-source-size-disclosure-font-size: 13px;
258
+ --m27-source-size-disclosure-radius: 1000px;
259
+ --m27-source-size-dial-inset-knob: 3px;
260
+ --m27-source-size-fields-inset-left: 8px;
261
+ --m27-source-size-fields-inset-right: 8px;
262
+ --m27-source-size-fields-font-size-search-glyph: 13px;
263
+ --m27-source-size-fields-leading-search-glyph: 15px;
264
+ --m27-source-size-menu-height: 24px;
265
+ --m27-source-size-menu-font-size: 13px;
266
+ --m27-source-size-menu-font-size-symbol: 13px;
267
+ --m27-source-size-menu-width-symbol: 12px;
268
+ --m27-source-size-menu-inset-top-header: 5px;
269
+ --m27-source-size-menu-inset-bottom-header: 4px;
270
+ --m27-source-size-menu-inset-left-header: 20px;
271
+ --m27-source-size-popup-font-size-chevron: 13px;
272
+ --m27-source-size-popup-inset-left: 14px;
273
+ --m27-source-size-segmented-control-margins: 12px;
274
+ --m27-source-size-radio-button-height-dash: 2px;
275
+ --m27-source-size-segmented-control-height-separator: 18px;
276
+ --m27-source-size-radio-button-spacing: 5px;
277
+ --m27-source-size-radio-button-width: 18px;
278
+ --m27-source-size-radio-button-width-dot: 5px;
279
+ --m27-source-size-radio-button-width-dash: 8px;
280
+ --m27-source-size-slider-knob-non-ticked-inset: -2px;
281
+ --m27-source-size-slider-knob-non-ticked-width: 24px;
282
+ --m27-source-size-slider-knob-non-ticked-height: 20px;
283
+ --m27-source-size-slider-knob-non-ticked-width-clicked: 30px;
284
+ --m27-source-size-slider-knob-non-ticked-height-clicked: 25px;
285
+ --m27-source-size-slider-knob-ticked-width: 24px;
286
+ --m27-source-size-slider-knob-ticked-height: 20px;
287
+ --m27-source-size-slider-knob-ticked-width-clicked: 30px;
288
+ --m27-source-size-slider-knob-ticked-height-clicked: 25px;
289
+ --m27-source-size-slider-track-inset-vertical: 0px;
290
+ --m27-source-size-slider-track-inset-horizontal: 0px;
291
+ --m27-source-size-slider-track-tick-spacing: 3px;
292
+ --m27-source-size-stepper-width: 23px;
293
+ --m27-source-size-stepper-radius: 7px;
294
+ --m27-source-size-stepper-font-size: 12px;
295
+ --m27-source-size-stepper-width-separator: 15px;
296
+ --m27-source-size-toggle-knob-width: 38px;
297
+ --m27-source-size-toggle-knob-height: 24px;
298
+ --m27-source-size-toggle-knob-clicked-width: 59px;
299
+ --m27-source-size-toggle-knob-clicked-height: 37px;
300
+ --m27-source-size-toggle-track-width: 64px;
301
+ --m27-source-size-toggle-track-height: var(--m27-source-size-global-height);
302
+ --m27-source-size-mode: 'Large';
303
+
304
+ --m27-source-size-control-height: var(--m27-source-size-global-height);
305
+ --m27-source-size-control-radius: var(--m27-source-size-global-radius);
306
+ --m27-source-size-button-padding-inline: var(
307
+ --m27-source-size-button-padding-horizontal
308
+ );
309
+ }
310
+
311
+ [data-ui-platform='macos'][data-ui-platform-version='27']
312
+ [data-control-size='xl'],
313
+ [data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='xl'] {
314
+ --m27-source-size-global-font-size: 13px;
315
+ --m27-source-size-arrow-button-font-size: 13px;
316
+ --m27-source-size-global-height: 36px;
317
+ --m27-source-size-global-radius: 9px;
318
+ --m27-source-size-button-padding-horizontal: 16px;
319
+ --m27-source-size-checkboxes-width: var(--m27-source-size-radio-button-width);
320
+ --m27-source-size-button-radius: 1000px;
321
+ --m27-source-size-checkboxes-width-checkmark: 11.720000267028809px;
322
+ --m27-source-size-checkboxes-height-checkmark: 11.300000190734863px;
323
+ --m27-source-size-color-well-width: 72px;
324
+ --m27-source-size-color-well-height: 36px;
325
+ --m27-source-size-checkboxes-radius: 6.5px;
326
+ --m27-source-size-combo-button-font-size-chevron: 13px;
327
+ --m27-source-size-combo-button-inset: 3px;
328
+ --m27-source-size-combo-button-text-inset-right: 34px;
329
+ --m27-source-size-combo-button-radius-button: 6.5px;
330
+ --m27-source-size-combo-button-width-button: 30px;
331
+ --m27-source-size-cursor-height: 18px;
332
+ --m27-source-size-dial-height-knob: 7px;
333
+ --m27-source-size-disclosure-font-size: 13px;
334
+ --m27-source-size-disclosure-radius: 1000px;
335
+ --m27-source-size-dial-inset-knob: 3px;
336
+ --m27-source-size-fields-inset-left: 10px;
337
+ --m27-source-size-fields-inset-right: 10px;
338
+ --m27-source-size-fields-font-size-search-glyph: 13px;
339
+ --m27-source-size-fields-leading-search-glyph: 15px;
340
+ --m27-source-size-menu-height: 24px;
341
+ --m27-source-size-menu-font-size: 13px;
342
+ --m27-source-size-menu-font-size-symbol: 13px;
343
+ --m27-source-size-menu-width-symbol: 12px;
344
+ --m27-source-size-menu-inset-top-header: 5px;
345
+ --m27-source-size-menu-inset-bottom-header: 4px;
346
+ --m27-source-size-menu-inset-left-header: 20px;
347
+ --m27-source-size-popup-font-size-chevron: 13px;
348
+ --m27-source-size-popup-inset-left: 18px;
349
+ --m27-source-size-segmented-control-margins: 14px;
350
+ --m27-source-size-radio-button-height-dash: 2px;
351
+ --m27-source-size-segmented-control-height-separator: 20px;
352
+ --m27-source-size-radio-button-spacing: 7px;
353
+ --m27-source-size-radio-button-width: 18px;
354
+ --m27-source-size-radio-button-width-dot: 5px;
355
+ --m27-source-size-radio-button-width-dash: 8px;
356
+ --m27-source-size-slider-knob-non-ticked-inset: -2px;
357
+ --m27-source-size-slider-knob-non-ticked-width: 24px;
358
+ --m27-source-size-slider-knob-non-ticked-height: 20px;
359
+ --m27-source-size-slider-knob-non-ticked-width-clicked: 30px;
360
+ --m27-source-size-slider-knob-non-ticked-height-clicked: 25px;
361
+ --m27-source-size-slider-knob-ticked-width: 24px;
362
+ --m27-source-size-slider-knob-ticked-height: 20px;
363
+ --m27-source-size-slider-knob-ticked-width-clicked: 30px;
364
+ --m27-source-size-slider-knob-ticked-height-clicked: 25px;
365
+ --m27-source-size-slider-track-inset-vertical: 0px;
366
+ --m27-source-size-slider-track-inset-horizontal: 0px;
367
+ --m27-source-size-slider-track-tick-spacing: 3px;
368
+ --m27-source-size-stepper-width: 30px;
369
+ --m27-source-size-stepper-radius: 9px;
370
+ --m27-source-size-stepper-font-size: 12px;
371
+ --m27-source-size-stepper-width-separator: 20px;
372
+ --m27-source-size-toggle-knob-width: 47px;
373
+ --m27-source-size-toggle-knob-height: 30px;
374
+ --m27-source-size-toggle-knob-clicked-width: 73px;
375
+ --m27-source-size-toggle-knob-clicked-height: 46px;
376
+ --m27-source-size-toggle-track-width: 80px;
377
+ --m27-source-size-toggle-track-height: var(--m27-source-size-global-height);
378
+ --m27-source-size-mode: 'XL';
379
+
380
+ --m27-source-size-control-height: var(--m27-source-size-global-height);
381
+ --m27-source-size-control-radius: var(--m27-source-size-global-radius);
382
+ --m27-source-size-button-padding-inline: var(
383
+ --m27-source-size-button-padding-horizontal
384
+ );
385
+ }