@typlog/ui 0.10.1 → 0.11.0

package/dist/components/dialog.css

@@ -0,0 +1,488 @@
+
+.ui-DialogOverlay {
+  position: fixed;
+  inset: 0;
+}
+.ui-DialogOverlay::before {
+  position: fixed;
+  content: '';
+  inset: 0;
+  background-color: var(--color-overlay);
+}
+.ui-DialogScroll {
+  display: flex;
+  overflow: auto;
+  position: absolute;
+  inset: 0;
+}
+.ui-DialogScrollPadding {
+  flex-grow: 1;
+  margin: auto;
+  padding-top: var(--space-6);
+  padding-bottom: max(var(--space-6), 6vh);
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+.ui-DialogScrollPadding[data-align="start"] {
+  margin-top: 0;
+}
+.ui-DialogScrollPadding[data-align="center"] {
+  margin-top: auto;
+}
+.ui-DialogContent {
+  margin: auto;
+  width: 100%;
+  max-height: calc(100vh - var(--space-6) * 2);
+  position: relative;
+  box-sizing: border-box;
+  overflow: auto;
+  text-align: left;
+
+  --inset-padding-top: var(--dialog-content-padding);
+  --inset-padding-right: var(--dialog-content-padding);
+  --inset-padding-bottom: var(--dialog-content-padding);
+  --inset-padding-left: var(--dialog-content-padding);
+  padding: var(--dialog-content-padding);
+  box-sizing: border-box;
+
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-6);
+  outline: none;
+}
+.ui-DialogContent[data-size="1"] {
+  --dialog-content-padding: var(--space-3);
+  border-radius: var(--radius-4);
+}
+.ui-DialogContent[data-size="2"] {
+  --dialog-content-padding: var(--space-4);
+  border-radius: var(--radius-4);
+}
+.ui-DialogContent[data-size="3"] {
+  --dialog-content-padding: var(--space-5);
+  border-radius: var(--radius-5);
+}
+.ui-DialogContent[data-size="4"] {
+  --dialog-content-padding: var(--space-6);
+  border-radius: var(--radius-5);
+}
+@media (prefers-reduced-motion: no-preference) {
+@keyframes ui-dialog-overlay-no-op {
+from {
+      opacity: 1;
+}
+to {
+      opacity: 1;
+}
+}
+@keyframes ui-dialog-content-show {
+from {
+      opacity: 0;
+      transform: translateY(5px) scale(0.97);
+}
+to {
+      opacity: 1;
+      transform: translateY(0px) scale(1);
+}
+}
+@keyframes ui-dialog-content-hide {
+from {
+      opacity: 1;
+      transform: translateY(0px) scale(1);
+}
+to {
+      opacity: 0;
+      transform: translateY(5px) scale(0.99);
+}
+}
+.ui-DialogOverlay[data-state='closed'] {
+    animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogOverlay[data-state='open']::before {
+    animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogOverlay[data-state='closed']::before {
+    animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogContent[data-state='open'] {
+    animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-DialogContent[data-state='closed'] {
+    animation: ui-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+}
+.ui-DialogContent > h2[id^="reka-dialog-title"] {
+  font-size: var(--font-size-5);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-4);
+  margin-bottom: var(--space-3);
+}
+.ui-DialogContent > p[id^="reka-dialog-description"] {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+}
+
+.ui-Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: top;
+  font-style: normal;
+  font-weight: var(--button-font-weight);
+  text-align: center;
+  white-space: nowrap;
+  height: var(--button-height);
+  padding-left: var(--button-padding-x);
+  padding-right: var(--button-padding-x);
+}
+.ui-Button:where(.r-variant-ghost) {
+  --button-font-weight: var(--font-weight-regular);
+}
+.ui-Button:where(:not(.r-variant-ghost)) {
+  --button-font-weight: var(--font-weight-medium);
+}
+.ui-Button:where([data-disabled]) {
+  cursor: not-allowed;
+}
+.ui-Button:where(.r-size-1) {
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: max(var(--radius-1), var(--radius-full));
+  --button-height: var(--space-5);
+  --button-padding-x: var(--space-2);
+}
+.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
+  --button-ghost-padding-y: var(--space-1);
+}
+.ui-Button:where(.r-size-2) {
+  gap: var(--space-2);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  border-radius: max(var(--radius-2), var(--radius-full));
+  --button-height: var(--space-6);
+  --button-padding-x: var(--space-3);
+}
+.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
+  gap: var(--space-1);
+  --button-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+.ui-Button:where(.r-size-3) {
+  gap: var(--space-3);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+  border-radius: max(var(--radius-3), var(--radius-full));
+  --button-height: var(--space-7);
+  --button-padding-x: var(--space-4);
+}
+.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
+  gap: var(--space-2);
+  --button-padding-x: var(--space-3);
+  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+}
+.ui-Button:where(.r-size-4) {
+  gap: var(--space-3);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  letter-spacing: var(--letter-spacing-4);
+  border-radius: max(var(--radius-4), var(--radius-full));
+  --button-height: var(--space-8);
+  --button-padding-x: var(--space-5);
+}
+.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
+  gap: var(--space-2);
+  --button-padding-x: var(--space-4);
+  --button-ghost-padding-y: var(--space-2);
+}
+
+/* solid */
+.ui-root {
+  --button-solid-active-filter: brightness(0.92) saturate(1.1);
+  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+}
+:is(.dark, .dark-theme) .ui-root {
+  --button-solid-active-filter: brightness(1.08);
+  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+}
+.ui-Button:where(.r-variant-solid) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-solid):where(:hover) {
+    background-color: var(--accent-10);
+}
+}
+.ui-Button:where(.r-variant-solid):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Button:where(.r-variant-solid):where(:active) {
+  background-color: var(--accent-10);
+  filter: var(--button-solid-active-filter);
+}
+.ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
+    background-color: var(--accent-12);
+    filter: var(--button-solid-high-contrast-hover-filter);
+}
+}
+.ui-Button:where(.r-variant-solid):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+  outline: none;
+  filter: none;
+}
+
+/* soft / ghost */
+.ui-Button:where(.r-variant-soft, .r-variant-ghost) {
+  color: var(--accent-a11);
+}
+.ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Button:where(.r-variant-soft) {
+  background-color: var(--accent-a3);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-soft):where(:hover) {
+    background-color: var(--accent-a4);
+}
+}
+.ui-Button:where(.r-variant-soft):where(:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-soft):where(:active) {
+  background-color: var(--accent-a5);
+}
+.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Button:where(.r-variant-ghost) {
+  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-ghost):where(:hover) {
+    background-color: var(--accent-a3);
+}
+}
+.ui-Button:where(.r-variant-ghost):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-ghost):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: transparent;
+}
+
+/* classic */
+.ui-Button:where(.r-variant-classic) {
+  box-shadow: var(--shadow-2);
+  background-color: var(--color-background);
+}
+.ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
+  color: var(--gray-12);
+  box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-classic):where(:hover) {
+    color: var(--accent-a11);
+    background-color: var(--gray-a2);
+}
+.ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
+    color: var(--accent-12);
+}
+}
+.ui-Button:where(.r-variant-classic):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
+  box-shadow: var(--shadow-1);
+}
+.ui-Button:where(.r-variant-classic):where([data-disabled]) {
+  color: var(--gray-a10);
+  background-color: var(--gray-a2);
+}
+
+/* outline */
+.ui-Button:where(.r-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-outline):where(:hover) {
+    background-color: var(--accent-a2);
+}
+}
+.ui-Button:where(.r-variant-outline):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
+  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-outline):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-outline):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  background-color: transparent;
+}
+
+/* surface */
+.ui-Button:where(.r-variant-surface) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  color: var(--accent-a11);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-surface):where(:hover) {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+}
+}
+.ui-Button:where(.r-variant-surface):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-surface):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-surface):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
+}
+.ui-IconButton:where(.r-variant-ghost) {
+  padding: var(--icon-button-ghost-padding);
+}
+.ui-IconButton:where(.r-size-1) {
+  --icon-button-ghost-padding: var(--space-1);
+}
+.ui-IconButton:where(.r-size-2) {
+  --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
+}
+.ui-IconButton:where(.r-size-3) {
+  --icon-button-ghost-padding: var(--space-2);
+}
+.ui-IconButton:where(.r-size-4) {
+  --icon-button-ghost-padding: var(--space-3);
+}
+
+.ui-Inset {
+  box-sizing: border-box;
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+  overflow: hidden;
+  margin-top: var(--margin-top-override);
+  margin-right: var(--margin-right-override);
+  margin-bottom: var(--margin-bottom-override);
+  margin-left: var(--margin-left-override);
+}
+.ui-Inset > * {
+  --margin-top-override: initial;
+  --margin-right-override: initial;
+  --margin-bottom-override: initial;
+  --margin-left-override: initial;
+}
+.ui-Inset:where(.r-clip-border-box) {
+  --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
+  --inset-padding-top-calc: var(--inset-padding-top, 0px);
+  --inset-padding-right-calc: var(--inset-padding-right, 0px);
+  --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
+  --inset-padding-left-calc: var(--inset-padding-left, 0px);
+}
+.ui-Inset:where(.r-clip-padding-box) {
+  --inset-border-radius-calc: var(--inset-border-radius, 0px);
+  --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
+}
+.ui-Inset:where(.inset-top) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: var(--margin-bottom);
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-top-left-radius: var(--inset-border-radius-calc);
+  border-top-right-radius: var(--inset-border-radius-calc);
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui-Inset:where(.inset-bottom) {
+  --margin-top-override: var(--margin-top);
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: var(--inset-border-radius-calc);
+  border-bottom-right-radius: var(--inset-border-radius-calc);
+}
+.ui-Inset:where(.inset-left) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  --margin-right-override: var(--margin-right);
+  border-top-left-radius: var(--inset-border-radius-calc);
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: var(--inset-border-radius-calc);
+  border-bottom-right-radius: 0px;
+}
+.ui-Inset:where(.inset-right) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: var(--margin-left);
+  border-top-left-radius: 0px;
+  border-top-right-radius: var(--inset-border-radius-calc);
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: var(--inset-border-radius-calc);
+}
+
+.ui-DialogHead {
+  position: sticky;
+  top: calc(0px - var(--inset-padding-top-calc));
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: calc(0px - var(--inset-padding-top-calc));
+  padding: calc(var(--dialog-content-padding) / 2) var(--dialog-content-padding);
+  border-bottom: 1px solid var(--gray-a4);
+  background-color: var(--color-background);
+  z-index: 1;
+}

package/dist/components/dropdown.css

@@ -0,0 +1,204 @@
+
+.ui-root {
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+}
+.ui-ScrollArea {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
+  overscroll-behavior-x: contain;
+}
+.ui-ScrollAreaScrollbar {
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  flex-direction: column;
+  width: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  flex-direction: row;
+  height: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaThumb {
+  position: relative;
+}
+.ui-ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: var(--space-4);
+  min-height: var(--space-4);
+}
+.ui-ScrollAreaScrollbar:where([data-size="1"]) {
+  --scrollarea-scrollbar-size: var(--space-1);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="2"]) {
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="3"]) {
+  --scrollarea-scrollbar-size: var(--space-3);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar {
+  background-color: var(--gray-a3);
+  border-radius: var(--scrollarea-scrollbar-border-radius);
+  animation-duration: 120ms;
+  animation-timing-function: ease-out;
+}
+.ui-ScrollAreaScrollbar:where([data-state='visible']) {
+  animation-name: ui-fade-in;
+}
+.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
+  animation-name: ui-fade-out;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
+  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
+  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
+}
+.ui-ScrollAreaThumb {
+  background-color: var(--gray-a8);
+  border-radius: inherit;
+  transition: background-color 100ms;
+}
+.ui-ScrollAreaThumb:hover {
+  background-color: var(--gray-a9);
+}
+
+.ui-MenuContent {
+  --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--menu-content-padding);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  --menu-bg: var(--color-panel-solid);
+  box-shadow: var(--shadow-5);
+  background-color: var(--menu-bg);
+}
+.ui-MenuViewport {
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: var(--menu-content-padding);
+  box-sizing: border-box;
+}
+:where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
+  padding-right: var(--space-3);
+}
+.ui-MenuContent:where([data-size="1"]) {
+  --menu-content-padding: var(--space-1);
+  --menu-item-padding-left: calc(var(--space-5) / 1.2);
+  --menu-item-padding-right: var(--space-2);
+  --menu-item-height: var(--space-5);
+  border-radius: var(--radius-3);
+}
+.ui-MenuContent:where([data-size="2"]) {
+  --menu-content-padding: var(--space-2);
+  --menu-item-padding-left: var(--space-3);
+  --menu-item-padding-right: var(--space-3);
+  --menu-item-height: var(--space-6);
+  border-radius: var(--radius-4);
+}
+
+.ui-MenuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--menu-item-height);
+  padding-left: var(--menu-item-padding-left);
+  padding-right: var(--menu-item-padding-right);
+  box-sizing: border-box;
+  position: relative;
+  outline: none;
+  scroll-margin: var(--menu-content-padding) 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  color: var(--gray-a11);
+}
+.ui-MenuShortcut {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  padding-left: var(--space-4);
+}
+.ui-MenuItem:where([data-accent-color]) {
+  color: var(--accent-a11);
+}
+.ui-MenuItem:where([data-disabled]) {
+  color: var(--gray-a8);
+}
+.ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
+  color: inherit;
+}
+.ui-MenuItem:where([data-size="1"]) {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: var(--radius-1);
+}
+.ui-MenuItem:where([data-size="2"]) {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  border-radius: var(--radius-2);
+}
+.ui-MenuItem:where([data-variant="solid"]):where([data-highlighted]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+.ui-MenuItem:where([data-variant="solid"]):where([data-high-contrast]):where([data-highlighted]) {
+  background-color: var(--accent-12);
+  color: var(--accent-1);
+}
+.ui-MenuItem:where([data-variant="soft"]):where([data-highlighted]) {
+  background-color: var(--accent-a4);
+}