@plexui/styles 0.0.0-stage → 0.1.0

package/dist/es/components/MarkdownEditor/MarkdownEditor.module.css

@@ -0,0 +1,297 @@
+@layer components {.Container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--control-radius-md);
+  color: var(--color-text);
+  cursor: text;
+  font-size: var(--control-font-size-md);
+  font-weight: var(--font-weight-normal);
+  overflow: hidden;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .Container:where([data-variant="outline"]) {
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {.Container:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  .Container:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+    .Container[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    .Container[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  .Container[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }.Toolbar, :where([data-theme="light"]) .Toolbar {
+border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}:where([data-theme="dark"]) .Toolbar {
+border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}.ToolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px;
+}.ToolbarSeparator {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  flex-shrink: 0;
+}.ToolbarSeparator, :where([data-theme="light"]) .ToolbarSeparator {
+background-color: rgba(0, 0, 0, 0.1);
+}:where([data-theme="dark"]) .ToolbarSeparator {
+background-color: rgba(255, 255, 255, 0.1);
+}.ToolbarButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--control-radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 16px;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  @media (hover: hover) and (pointer: fine) {.ToolbarButton:hover {
+    background-color: var(--color-background-primary-ghost-hover);
+    color: var(--color-text);
+}
+}
+
+  .ToolbarButton:where([data-active="true"]) {
+    background-color: var(--color-background-primary-ghost-active);
+    color: var(--color-text);
+  }
+
+  .ToolbarButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }.ToolbarEnd {
+  margin-left: auto;
+}.Editor {
+  padding: 8px 12px;
+  line-height: 20px;
+}.EditorContent {
+  outline: none;
+}
+
+  .EditorContent > * + * {
+    margin-top: 8px;
+  }
+
+  .EditorContent :global(p.is-editor-empty):first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+    color: var(--input-placeholder-text-color);
+  }
+
+  .EditorContent strong {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .EditorContent em {
+    font-style: italic;
+  }
+
+  .EditorContent a {
+    color: var(--link-primary-text-color);
+    text-decoration: underline;
+  }
+
+  .EditorContent ul,
+  .EditorContent ol {
+    padding-left: 20px;
+  }
+
+  .EditorContent ul {
+    list-style-type: disc;
+  }
+
+  .EditorContent ol {
+    list-style-type: decimal;
+  }
+
+  .EditorContent li + li {
+    margin-top: 2px;
+  }.LinkDialogOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.4);
+}.LinkDialogContent {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  width: 450px;
+  max-width: calc(100vw - 32px);
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background-color: var(--color-surface, #fff);
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.08),
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}.LinkDialogContent, :where([data-theme="light"]) .LinkDialogContent {
+border: 1px solid rgba(0, 0, 0, 0.1);
+}:where([data-theme="dark"]) .LinkDialogContent {
+border: 1px solid rgba(255, 255, 255, 0.1);
+}.LinkDialogBody {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+}.LinkDialogTitle {
+  margin: 0;
+  font-size: 18px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.6;
+  color: var(--color-text);
+}.LinkDialogFields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}.LinkDialogField {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}.LinkDialogLabel {
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 20px;
+  color: var(--color-text);
+}.LinkDialogInput {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--control-radius-md);
+  background: none;
+  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: var(--font-weight-normal);
+  line-height: 20px;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .LinkDialogInput:focus {
+    outline: 0;
+    box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+  }
+
+  .LinkDialogInput::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  .LinkDialogInput::placeholder {
+    color: var(--input-placeholder-text-color);
+  }.LinkDialogFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+}.LinkDialogFooterTrailing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}.LinkDialogButtonRemove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--control-radius-md);
+  background-color: var(--color-background-danger-solid, #dc2626);
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  @media (hover: hover) and (pointer: fine) {.LinkDialogButtonRemove:hover {
+    background-color: var(--color-background-danger-solid-hover, #b91c1c);
+}
+}.LinkDialogButtonCancel,
+.LinkDialogButtonSave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--control-radius-md);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}.LinkDialogButtonCancel {
+  background-color: var(--color-background-primary-soft-alpha, rgba(0, 0, 0, 0.08));
+  color: var(--color-text);
+}
+
+  @media (hover: hover) and (pointer: fine) {.LinkDialogButtonCancel:hover {
+    background-color: var(--color-background-primary-soft-alpha-hover, rgba(0, 0, 0, 0.12));
+}
+}.LinkDialogButtonSave {
+  background-color: var(--color-background-primary-solid, #181818);
+  color: var(--color-text-on-primary, #fff);
+}
+
+  @media (hover: hover) and (pointer: fine) {.LinkDialogButtonSave:hover {
+    background-color: var(--color-background-primary-solid-hover, #333);
+}
+}
+}

package/dist/es/components/Menu/Menu.module.css

@@ -0,0 +1,386 @@
+@layer components {.Menu {
+  /* Top-level selector needs to exist */
+}.MenuList {
+  z-index: 50;
+  overflow: auto;
+  width: var(--menu-width, auto);
+  min-width: var(--menu-min-width, 300px);
+  max-width: var(--radix-dropdown-menu-content-available-width);
+  max-height: min(
+    var(--radix-dropdown-menu-content-available-height),
+    var(--menu-max-height, 1200px)
+  );
+  padding: var(--menu-gutter);
+  border-radius: var(--menu-radius);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  color: var(--color-text);
+  font-size: var(--menu-font-size);
+  line-height: var(--menu-line-height);
+  -webkit-overflow-scrolling: touch;
+  pointer-events: auto;
+  /* The transform-origin computed from the content and arrow positions/offsets */
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  will-change: transform;
+}
+
+  /* Animation states applied to a wrapping parent */
+  .Menu[data-entering] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  .Menu[data-entering-active] .MenuList,
+  .Menu[data-entering][data-interrupted] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: 0.35s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  .Menu[data-exiting] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .Menu[data-exiting-active] .MenuList,
+  .Menu[data-exiting][data-interrupted] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: 0.2s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-exit);
+  }.MenuItemContent {
+  padding: var(--menu-item-padding);
+}
+
+  /* Same "item + subtitle" pattern as the pressable item below. */
+  .MenuItemContent:has(.ItemDescription) {
+    font-weight: var(--font-weight-semibold);
+  }.MenuItem {
+  position: relative;
+  display: block;
+  /* Defaults to inherit from pressable wrapper, this container is not flex */
+  align-items: center;
+  gap: var(--menu-item-gap);
+  padding: var(--menu-item-padding);
+  color: var(--color-text);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  /* An item with a description keeps its label semibold in every state, so
+     consumers never have to remember a className for the "item + subtitle"
+     pattern. The description's own rule keeps the second line normal. */
+  .MenuItem:has(.ItemDescription) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .MenuItem:focus {
+    outline: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {.MenuItem:hover {
+    /* Prevent links from changing colors */
+    color: var(--color-text);
+}
+}
+
+  .MenuItem::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    background: var(--menu-item-background-color);
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+    .MenuItem[data-state="open"]::before, .MenuItem[data-highlighted]::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .MenuItem[data-state="open"]:has(.ItemActions:hover)::before, .MenuItem[data-highlighted]:has(.ItemActions:hover)::before {
+      opacity: 0.4;
+    }
+
+    .MenuItem[data-state="open"]:not(:has(.ItemActions:hover)):active::before, .MenuItem[data-highlighted]:not(:has(.ItemActions:hover)):active::before {
+      transform: scale(var(--scale, 0.98));
+    }
+
+    .MenuItem[data-state="open"] .ItemActions, .MenuItem[data-highlighted] .ItemActions {
+      opacity: 1;
+    }
+
+  .MenuItem[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    .MenuItem[data-disabled]::before {
+      display: none;
+    }/* Destructive item (delete, remove, leave): the danger color for the label
+   and the highlight; a description keeps its secondary color */.MenuItem[data-danger] {
+  --menu-item-background-color: var(--color-background-danger-ghost-hover);
+  color: var(--color-text-danger-ghost);
+}
+
+  @media (hover: hover) and (pointer: fine) {.MenuItem[data-danger]:hover {
+    color: var(--color-text-danger-ghost-hover);
+}
+}/* Two-line item: label over description, the same anatomy a Select option
+   with a description uses (OptionLeading / OptionDescription there). */.ItemLeading {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}.ItemDescription {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-secondary);
+}.PressableInner {
+  position: relative;
+  display: flex;
+  /* Allow flex settings to be applied to the container, for className ergonomics */
+  align-items: inherit;
+  justify-content: inherit;
+  gap: inherit;
+}.ItemActions {
+  /* Prevent adding height to the MenuItem, and horizontally center */
+  display: flex;
+  align-items: center;
+  height: 0;
+  /* Magic number that pulls back the icon an equal gutter from the top/bottom */
+  margin-right: -5px;
+  opacity: 0;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity;
+  transition-timing-function: var(--cubic-enter);
+}.Separator {
+  height: 1px;
+  margin: var(--menu-separator-gutter);
+  background: var(--menu-separator-background-color);
+}.MenuLabel {
+  padding: var(--menu-item-padding);
+  padding-bottom: calc(var(--spacing) * 0.5);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-text-xs-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-text-xs-line-height);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}.SubMenuItem {
+  justify-content: space-between;
+}.SubTriggerIcon {
+  /* slight visual offset of svg canvas */
+  margin-right: -2px;
+  opacity: 0.75;
+  transition: opacity var(--transition-duration-basic) var(--transition-ease-basic);
+}
+
+  .SubMenuItem[data-state="open"] .SubTriggerIcon,
+  .SubMenuItem[data-highlighted] .SubTriggerIcon {
+    opacity: 1;
+  }.RadioItem {
+  gap: calc(var(--spacing) * 2);
+}
+
+  :where([data-indicator-position="end"]) .RadioItem {
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 3);
+  }.RadioIndicatorActive {
+  position: relative;
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  /* Don't play the animation when entering */
+}
+
+  .RadioIndicatorActive::before,
+  .RadioIndicatorActive::after {
+    display: block;
+    content: "";
+    grid-column-start: 1;
+    grid-row-start: 1;
+    place-self: center center;
+    will-change: transform;
+  }
+
+  /* Filled circle */
+  .RadioIndicatorActive::before {
+    width: var(--menu-radio-indicator-size);
+    height: var(--menu-radio-indicator-size);
+    border-radius: var(--radius-full);
+    animation: fade-in 0.4s var(--cubic-enter);
+    background-color: var(--radio-group-indicator-background-color);
+  }
+
+  /*  Empty middle circle */
+  .RadioIndicatorActive::after {
+    width: var(--menu-radio-indicator-hole-size);
+    height: var(--menu-radio-indicator-hole-size);
+    border-radius: var(--radius-full);
+    animation: scale-in 0.4s var(--cubic-enter);
+    background-color: var(--radio-group-indicator-hole-background-color);
+  }
+  [data-entering] .RadioIndicatorActive::before,
+  [data-entering] .RadioIndicatorActive::after {
+    animation-duration: 0s;
+  }.RadioIndicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--menu-radio-indicator-size);
+  height: var(--menu-radio-indicator-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
+  cursor: pointer;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  [data-indicator-position="end"] .RadioIndicator {
+    order: 1;
+  }
+
+  [data-highlighted] .RadioIndicator {
+    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color-hover) inset;
+  }
+
+  [data-disabled] .RadioIndicator {
+    cursor: not-allowed;
+  }
+
+  /* Can't be focused here anyway */
+  .RadioIndicator:focus {
+    outline: none;
+  }@keyframes scale-in {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}.CheckboxItem {
+  gap: calc(var(--spacing) * 2);
+}
+
+  .CheckboxItem:where([data-indicator-position="end"]) {
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 3);
+  }.CheckboxIndicator {
+  flex-shrink: 0;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+}
+
+  [data-indicator-position="end"] .CheckboxIndicator {
+    order: 1;
+  }
+
+  [data-indicator-variant="solid"] .CheckboxIndicator {
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
+  }.CheckboxCircle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+  border-radius: var(--radius-full);
+  animation: fade-in 0.5s var(--cubic-enter);
+  background-color: var(--radio-group-indicator-background-color);
+  color: var(--radio-group-indicator-hole-background-color);
+
+  /* Don't play the animation when entering */
+}
+  [data-entering] .CheckboxCircle::before,
+  [data-entering] .CheckboxCircle::after {
+    animation-duration: 0s;
+  }.MenuList[data-layout="horizontal"] {
+  --h-icon-size: 20px;
+  --h-padding: calc(var(--spacing) * 2);
+  --h-gap: calc(var(--spacing) * 1);
+
+  display: flex;
+  flex-direction: row;
+  min-width: auto;
+}
+
+  .MenuList[data-layout="horizontal"][data-size="sm"] {
+    --h-icon-size: 16px;
+    --h-padding: calc(var(--spacing) * 1.5);
+  }
+
+  .MenuList[data-layout="horizontal"][data-size="lg"] {
+    --h-icon-size: 24px;
+    --h-padding: calc(var(--spacing) * 2.5);
+  }
+
+  .MenuList[data-layout="horizontal"] .MenuItem {
+    flex: 1 0 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--h-gap);
+    padding: var(--h-padding);
+    text-align: center;
+    font-size: var(--h-icon-size);
+    line-height: 1;
+  }
+
+  .MenuList[data-layout="horizontal"] .PressableInner {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--h-gap);
+    font-size: var(--font-text-2xs-size);
+    line-height: var(--font-text-2xs-line-height);
+  }
+
+    .MenuList[data-layout="horizontal"] .PressableInner > svg {
+      font-size: var(--h-icon-size);
+    }
+
+  .MenuList[data-layout="horizontal"] .MenuItemContent {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--h-gap);
+    padding: var(--h-padding);
+    text-align: center;
+  }
+
+  .MenuList[data-layout="horizontal"] .Separator {
+    width: 1px;
+    height: auto;
+    align-self: stretch;
+    margin: calc(var(--spacing) * 1) 0;
+  }
+}