@skygraph/styles 0.0.0-placeholder.0 → 0.2.0

package/components/menu.css

@@ -0,0 +1,309 @@
+/* === Menu === */
+
+.sg-menu {
+  margin: 0;
+  padding: var(--sg-padding-xs) 0;
+  list-style: none;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-container);
+  border-right: 1px solid var(--sg-color-border-secondary);
+  outline: none;
+}
+
+.sg-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* --- Modes --- */
+
+.sg-menu-horizontal {
+  display: flex;
+  flex-direction: row;
+  border-right: none;
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+  padding: 0;
+}
+
+.sg-menu-vertical {
+  display: flex;
+  flex-direction: column;
+}
+
+.sg-menu-inline {
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Theme ---
+ *
+ * `.sg-menu-dark` is a self-contained dark variant: it must look right on
+ * any host surface (light app theme, dark app theme, custom wrapper),
+ * because `theme="dark"` is a per-menu flag, not an app theme switch. So
+ * the dark variant uses explicit dark colours and white-alpha overlays
+ * instead of semantic tokens — the latter cascade with the app theme
+ * and break the "always-dark menu" contract.
+ */
+
+.sg-menu-dark {
+  background: var(--sg-gray-10);
+  color: rgba(255, 255, 255, 0.65);
+  border-color: transparent;
+}
+
+.sg-menu-dark .sg-menu-item {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.sg-menu-dark .sg-menu-item:hover {
+  color: rgba(255, 255, 255, 0.88);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.sg-menu-dark .sg-menu-item-selected,
+.sg-menu-dark .sg-menu-item-selected:hover {
+  color: #fff;
+  background: var(--sg-color-primary);
+}
+
+.sg-menu-dark .sg-menu-item-disabled,
+.sg-menu-dark .sg-menu-item-disabled:hover {
+  color: rgba(255, 255, 255, 0.25);
+  background: transparent;
+}
+
+.sg-menu-dark .sg-menu-divider {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.sg-menu-dark .sg-menu-group-title {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+/* --- Collapsed --- */
+
+.sg-menu-collapsed {
+  width: 56px;
+}
+
+.sg-menu-collapsed .sg-menu-item {
+  justify-content: center;
+  padding: var(--sg-padding-sm);
+}
+
+.sg-menu-collapsed .sg-menu-submenu-arrow {
+  display: none;
+}
+
+/* --- Menu item --- */
+
+.sg-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  padding: var(--sg-padding-xs) var(--sg-padding-lg);
+  cursor: pointer;
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+  min-height: var(--sg-height-md);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    color var(--sg-transition-duration) var(--sg-transition-timing);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sg-menu-item:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-menu-item-selected {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-menu-item-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-menu-item-disabled:hover {
+  background: none;
+}
+
+.sg-menu-item-danger {
+  color: var(--sg-color-error);
+}
+
+.sg-menu-item-danger:hover {
+  background: var(--sg-color-error-bg);
+}
+
+/* --- Icon & label --- */
+
+.sg-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--sg-font-size-lg);
+  flex-shrink: 0;
+}
+
+.sg-menu-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- Submenu arrow --- */
+
+.sg-menu-submenu-arrow {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-left: auto;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.sg-menu-submenu-arrow::before,
+.sg-menu-submenu-arrow::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 1.5px;
+  background: currentColor;
+  border-radius: 1px;
+  transition: transform var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-menu-submenu-arrow::before {
+  transform: rotate(45deg) translateX(2px);
+  top: 4px;
+  left: 0;
+}
+
+.sg-menu-submenu-arrow::after {
+  transform: rotate(-45deg) translateX(-2px);
+  top: 4px;
+  left: 0;
+}
+
+.sg-menu-submenu-arrow-open::before {
+  transform: rotate(-45deg) translateX(2px);
+}
+
+.sg-menu-submenu-arrow-open::after {
+  transform: rotate(45deg) translateX(-2px);
+}
+
+/* Horizontal mode arrow points down */
+.sg-menu-horizontal .sg-menu-submenu-arrow::before {
+  transform: rotate(45deg) translateY(0);
+  top: 3px;
+  left: 0;
+}
+
+.sg-menu-horizontal .sg-menu-submenu-arrow::after {
+  transform: rotate(-45deg) translateY(0);
+  top: 3px;
+  left: 3px;
+}
+
+/* --- Inline submenu --- */
+
+.sg-menu-inline-sub {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s var(--sg-transition-timing);
+}
+
+.sg-menu-inline-sub-open {
+  max-height: 500px;
+}
+
+/* --- Popup submenu (vertical / horizontal) --- */
+
+.sg-menu-submenu-wrapper {
+  position: relative;
+}
+
+.sg-menu-popup {
+  position: absolute;
+  z-index: var(--sg-z-dropdown);
+  min-width: 160px;
+  padding: var(--sg-padding-xs) 0;
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  border: 1px solid var(--sg-color-border-secondary);
+  list-style: none;
+  animation: sg-menu-popup-in var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-menu-vertical .sg-menu-popup {
+  left: 100%;
+  top: 0;
+}
+
+.sg-menu-horizontal > li > .sg-menu-popup {
+  left: 0;
+  top: 100%;
+}
+
+@keyframes sg-menu-popup-in {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* --- Divider --- */
+
+.sg-menu-divider {
+  height: 1px;
+  margin: var(--sg-margin-xs) var(--sg-padding-md);
+  background: var(--sg-color-border-secondary);
+  list-style: none;
+}
+
+/* --- Group --- */
+
+.sg-menu-group {
+  list-style: none;
+}
+
+.sg-menu-group-title {
+  padding: var(--sg-padding-xs) var(--sg-padding-lg);
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size-sm);
+  line-height: var(--sg-line-height);
+}
+
+.sg-menu-group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* --- Horizontal item spacing --- */
+
+.sg-menu-horizontal > li > .sg-menu-item {
+  padding: var(--sg-padding-sm) var(--sg-padding-lg);
+  border-bottom: 2px solid transparent;
+}
+
+.sg-menu-horizontal > li > .sg-menu-item-selected {
+  border-bottom-color: var(--sg-color-primary);
+  background: none;
+}
+
+.sg-menu-horizontal > li > .sg-menu-item:hover {
+  border-bottom-color: var(--sg-color-primary-hover);
+  background: none;
+}

package/components/modal.css

@@ -0,0 +1,77 @@
+.sg-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--sg-z-modal);
+  background: var(--sg-color-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* dark override handled via --sg-color-overlay token */
+
+.sg-modal {
+  /* Width is forwarded from the React `width` prop via this CSS variable
+   * so the component no longer has to emit an inline `style={{ width }}`.
+   * Default mirrors the historical antd-compatible 520px modal width. */
+  --sg-modal-width: 520px;
+
+  position: relative;
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  width: var(--sg-modal-width);
+}
+
+.sg-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sg-padding-lg);
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-modal-title {
+  font-size: var(--sg-font-size-lg);
+  font-weight: 600;
+  color: var(--sg-color-text);
+}
+
+.sg-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  font-size: var(--sg-font-size-xl);
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--sg-border-radius-sm);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration);
+}
+
+.sg-modal-close:hover {
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-modal-body {
+  padding: var(--sg-padding-lg);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.sg-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sg-padding-sm);
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  border-top: 1px solid var(--sg-color-border-secondary);
+}

package/components/notification.css

@@ -0,0 +1,128 @@
+.sg-notification-container {
+  position: fixed;
+  z-index: var(--sg-z-notification);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sg-margin-sm);
+  pointer-events: none;
+}
+
+/* Placement variants — see dropdown.css note: both camelCase (legacy) and
+ * kebab-case (canonical) selectors are kept in sync. */
+.sg-notification-topRight,
+.sg-notification-top-right {
+  top: var(--sg-padding-xl);
+  right: var(--sg-padding-xl);
+}
+
+.sg-notification-topLeft,
+.sg-notification-top-left {
+  top: var(--sg-padding-xl);
+  left: var(--sg-padding-xl);
+}
+
+.sg-notification-bottomRight,
+.sg-notification-bottom-right {
+  bottom: var(--sg-padding-xl);
+  right: var(--sg-padding-xl);
+}
+
+.sg-notification-bottomLeft,
+.sg-notification-bottom-left {
+  bottom: var(--sg-padding-xl);
+  left: var(--sg-padding-xl);
+}
+
+.sg-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sg-padding-sm);
+  min-width: 300px;
+  max-width: 400px;
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  border: 1px solid var(--sg-color-border-secondary);
+  pointer-events: auto;
+  animation: sg-notification-in var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+@keyframes sg-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.sg-notification-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: var(--sg-font-size-sm);
+  font-weight: 700;
+  line-height: 1;
+}
+
+.sg-notification-success .sg-notification-icon {
+  color: var(--sg-color-success);
+  background: var(--sg-color-success-bg);
+}
+
+.sg-notification-error .sg-notification-icon {
+  color: var(--sg-color-error);
+  background: var(--sg-color-error-bg);
+}
+
+.sg-notification-warning .sg-notification-icon {
+  color: var(--sg-color-warning);
+  background: var(--sg-color-warning-bg);
+}
+
+.sg-notification-info .sg-notification-icon {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-notification-message {
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-notification-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  margin-top: var(--sg-margin-xs);
+  line-height: var(--sg-line-height);
+}
+
+.sg-notification-close {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  font-size: var(--sg-font-size-lg);
+  line-height: 1;
+  padding: 0;
+  transition: color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-notification-close:hover {
+  color: var(--sg-color-text);
+}

package/components/pagination.css

@@ -0,0 +1,162 @@
+/* inline-flex: shrink-wrap to content so wide parents (e.g. doc previews)
+   don't leave a dead zone to the right of the controls. */
+.sg-pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sg-margin-xs);
+  row-gap: var(--sg-padding-sm);
+  font-size: var(--sg-font-size);
+  max-width: 100%;
+}
+
+.sg-pagination-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.sg-pagination-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Lock the cell to a square so 1-, 2- and 3-digit pages render at the
+   * same width — combined with the 7-slot `buildPages` shape this keeps
+   * the strip width identical on every page transition (no layout jump
+   * between page 1 → 8 → 50). */
+  min-width: var(--sg-height-md);
+  width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-xs);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+  font-size: var(--sg-font-size);
+  line-height: 1;
+}
+
+/* Prev/next still inherit the square base but auto-grow for wider arrow
+ * glyphs / labels on RTL locales. */
+.sg-pagination-prev,
+.sg-pagination-next {
+  width: auto;
+  min-width: var(--sg-height-md);
+}
+
+.sg-pagination-item:hover:not(:disabled) {
+  color: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-item:disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+  border-color: var(--sg-color-border);
+}
+
+.sg-pagination-item-active {
+  color: var(--sg-color-white, #fff);
+  background: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-item-active:hover:not(:disabled) {
+  color: var(--sg-color-white, #fff);
+  background: var(--sg-color-primary-hover);
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  color: var(--sg-color-text-disabled);
+  letter-spacing: 2px;
+}
+
+.sg-pagination-total {
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+}
+
+.sg-pagination-size-changer {
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-pagination-size-changer:hover:not(:disabled) {
+  border-color: var(--sg-color-primary);
+}
+
+/* Native <select> draws its own focus ring — reset outline and use one
+   soft ring so we don't stack a second halo on top of the browser chrome. */
+.sg-pagination-size-changer:focus,
+.sg-pagination-size-changer:focus-visible {
+  outline: none;
+}
+
+.sg-pagination-size-changer:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-pagination-quick-jumper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+}
+
+.sg-pagination-jumper-input {
+  box-sizing: border-box;
+  width: 52px;
+  min-width: 52px;
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-xs);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  font-family: inherit;
+  text-align: center;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-pagination-jumper-input:hover:not(:disabled) {
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pagination-jumper-input:focus,
+.sg-pagination-jumper-input:focus-visible {
+  outline: none;
+}
+
+.sg-pagination-jumper-input:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-pagination-simple {
+  gap: var(--sg-padding-sm);
+}
+
+.sg-pagination-simple-pager {
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+}