doom-design-system 0.5.0 → 0.6.0

package/dist/components/Table/FilterBuilder/FilterGroup.module.css

@@ -1,427 +1,393 @@
-.group {
-  padding: var(--spacing-2);
-  transition: all var(--duration-fast) var(--ease-in-out);
-  position: relative;
-  margin-left: 0 !important;
-  overflow: visible;
-}
-.group.hasRail {
-  margin-left: 0 !important;
-  border-left: 2px solid var(--border-strong);
-  padding-left: var(--spacing-6);
-}
-@media (max-width: 640px) {
+@layer doom.components {
+  .group {
+    padding: var(--space-2);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    position: relative;
+    margin-left: 0 !important;
+    overflow: visible;
+  }
   .group.hasRail {
-    padding-left: var(--spacing-2);
+    margin-left: 0 !important;
+    border-left: 2px solid var(--border-strong);
+    padding-left: var(--space-6);
+  }
+  @media (max-width: 640px) {
+    .group.hasRail {
+      padding-left: var(--space-2);
+    }
+  }
+  .group.dragging {
+    opacity: 0.5;
+    border-style: dashed;
+    border-color: var(--muted);
+  }
+  .group.groupDropTarget {
+    border-color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    box-shadow: inset 0 0 0 2px var(--primary);
+  }
+  .group.collapsed .groupHeader {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+  .group.rootGroup .groupHeader {
+    margin-bottom: var(--space-2);
+  }
+  .groupHeader {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--card-border);
+  }
+  .headerSpacer {
+    flex: 1;
+  }
+  .collapseToggle {
+    padding: var(--space-1);
+    color: var(--muted-foreground);
+  }
+  .collapseToggle:hover {
+    color: var(--foreground);
+  }
+  .logicToggle {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: var(--font-bold);
+  }
+  .collapsedSummary {
+    margin-left: var(--space-1);
+  }
+  .groupContentWrapper {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--duration-normal) var(--ease-in-out);
+  }
+  .collapsedWrapper {
+    grid-template-rows: 0fr;
   }
-}
-.group.dragging {
-  opacity: 0.5;
-  border-style: dashed;
-  border-color: var(--muted);
-}
-.group.groupDropTarget {
-  border-color: var(--primary);
-  background: color-mix(in srgb, var(--primary) 8%, transparent);
-  box-shadow: inset 0 0 0 2px var(--primary);
-}
-.group.collapsed .groupHeader {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}
-.group.rootGroup .groupHeader {
-  margin-bottom: var(--spacing-2);
-}
-
-.groupHeader {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-  border-bottom: 1px solid var(--card-border);
-}
-
-.headerSpacer {
-  flex: 1;
-}
-
-.collapseToggle {
-  padding: var(--spacing-1);
-  color: var(--muted-foreground);
-}
-.collapseToggle:hover {
-  color: var(--foreground);
-}
-
-.logicToggle {
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: var(--font-bold);
-}
-
-.collapsedSummary {
-  margin-left: var(--spacing-1);
-}
-
-.groupContentWrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--duration-normal) var(--ease-in-out);
-}
-
-.collapsedWrapper {
-  grid-template-rows: 0fr;
-}
-
-.groupContent {
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-@media (max-width: 640px) {
   .groupContent {
-    gap: var(--spacing-2);
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  @media (max-width: 640px) {
+    .groupContent {
+      gap: var(--space-2);
+    }
   }
-}
-
-.groupActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-2);
-  gap: var(--spacing-2);
-  padding-top: var(--spacing-2);
-  border-top: 1px solid var(--card-border);
-}
-@media (max-width: 640px) {
   .groupActions {
-    flex-direction: column;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--card-border);
   }
-  .groupActions button {
-    width: 100%;
+  @media (max-width: 640px) {
+    .groupActions {
+      flex-direction: column;
+    }
+    .groupActions button {
+      width: 100%;
+    }
+  }
+  .siblingGroupAction {
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: 1px dashed var(--card-border);
+  }
+  .emptyState {
+    padding: var(--space-6);
+    text-align: center;
+    background: var(--surface-accent);
+    border-radius: var(--radius-md);
   }
-}
-
-.siblingGroupAction {
-  margin-top: var(--spacing-4);
-  margin-bottom: var(--spacing-2);
-  padding-top: var(--spacing-2);
-  border-top: 1px dashed var(--card-border);
-}
-
-.emptyState {
-  padding: var(--spacing-6);
-  text-align: center;
-  background: var(--surface-accent);
-  border-radius: var(--radius);
-}
-
-.emptyActions {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: var(--spacing-2);
-  margin-top: var(--spacing-2);
-}
-@media (max-width: 640px) {
   .emptyActions {
-    flex-direction: column;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+  }
+  @media (max-width: 640px) {
+    .emptyActions {
+      flex-direction: column;
+    }
+  }
+  .logicIndicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--space-2) 0;
+    padding: var(--space-1) var(--space-2);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    background: var(--surface-accent);
+    border-radius: var(--radius-md);
+    color: var(--on-surface-muted);
   }
-}
-
-.logicIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: var(--spacing-2) 0;
-  padding: var(--spacing-1) var(--spacing-2);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  background: var(--surface-accent);
-  border-radius: var(--radius);
-  color: var(--on-surface-muted);
-}
-
-.conditionRow {
-  position: relative;
-  display: grid !important;
-  grid-template-columns: auto minmax(var(--width-control-sm), 1fr) minmax(var(--width-control-sm), max-content) minmax(var(--width-control-sm), 1fr) auto;
-  align-items: center;
-  gap: var(--spacing-4);
-  padding: var(--spacing-2);
-  background: var(--surface-accent);
-  transition: all var(--duration-fast) var(--ease-in-out);
-  overflow: visible;
-}
-@media (max-width: 640px) {
   .conditionRow {
-    display: flex !important;
-    flex-direction: column;
-    align-items: stretch;
-    padding: var(--spacing-2);
-    gap: var(--spacing-2);
+    position: relative;
+    display: grid !important;
+    grid-template-columns: auto minmax(var(--width-control-sm), 1fr) minmax(var(--width-control-sm), max-content) minmax(var(--width-control-sm), 1fr) auto;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2);
+    background: var(--surface-accent);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    overflow: visible;
+  }
+  @media (max-width: 640px) {
+    .conditionRow {
+      display: flex !important;
+      flex-direction: column;
+      align-items: stretch;
+      padding: var(--space-2);
+      gap: var(--space-2);
+    }
+  }
+  .conditionRow.dragging {
+    opacity: 0.5;
+    border-style: dashed;
+    border-color: var(--muted);
+  }
+  .conditionRow.dropTarget {
+    border-color: var(--success);
+    background: color-mix(in srgb, var(--success) 10%, transparent);
+    box-shadow: 0 0 0 2px var(--success);
   }
-}
-.conditionRow.dragging {
-  opacity: 0.5;
-  border-style: dashed;
-  border-color: var(--muted);
-}
-.conditionRow.dropTarget {
-  border-color: var(--success);
-  background: color-mix(in srgb, var(--success) 10%, transparent);
-  box-shadow: 0 0 0 2px var(--success);
-}
-
-.conditionHeader {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-@media (max-width: 640px) {
   .conditionHeader {
     display: flex;
     align-items: center;
-    gap: var(--spacing-2);
-    width: 100%;
-    order: -1;
+    gap: var(--space-2);
+  }
+  @media (max-width: 640px) {
+    .conditionHeader {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      width: 100%;
+      order: -1;
+    }
   }
-}
-
-.mobileCollapseToggle {
-  display: none;
-}
-@media (max-width: 640px) {
   .mobileCollapseToggle {
-    display: flex;
+    display: none;
   }
-}
-
-.mobileRemoveButton {
-  display: none;
-}
-@media (max-width: 640px) {
-  .mobileRemoveButton {
-    display: flex;
-    margin-left: auto;
+  @media (max-width: 640px) {
+    .mobileCollapseToggle {
+      display: flex;
+    }
   }
-}
-
-@media (max-width: 640px) {
-  .desktopRemoveButton {
+  .mobileRemoveButton {
     display: none;
   }
-}
-
-.collapsedConditionSummary {
-  display: none;
-  flex: 1;
-  cursor: pointer;
-}
-@media (max-width: 640px) {
+  @media (max-width: 640px) {
+    .mobileRemoveButton {
+      display: flex;
+      margin-left: auto;
+    }
+  }
+  @media (max-width: 640px) {
+    .desktopRemoveButton {
+      display: none;
+    }
+  }
   .collapsedConditionSummary {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    display: none;
+    flex: 1;
+    cursor: pointer;
+  }
+  @media (max-width: 640px) {
+    .collapsedConditionSummary {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
-}
-
-.conditionFields {
-  display: contents;
-}
-@media (max-width: 640px) {
   .conditionFields {
+    display: contents;
+  }
+  @media (max-width: 640px) {
+    .conditionFields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+      width: 100%;
+    }
+  }
+  @media (max-width: 640px) {
+    .conditionFieldsCollapsed {
+      display: none;
+    }
+  }
+  .logicWrapper,
+  .whereWrapper {
+    width: auto;
+  }
+  .whereWrapper {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    height: 36px;
+  }
+  @media (max-width: 640px) {
+    .whereWrapper {
+      justify-content: flex-start;
+      min-width: auto;
+      height: auto;
+    }
+  }
+  .whereBadge {
+    height: 36px !important;
+    font-size: var(--text-xs) !important;
+    line-height: 1 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-4) !important;
+    border-width: var(--surface-border-width) !important;
+  }
+  .dragHandle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size-icon-md);
+    height: var(--size-icon-md);
+    cursor: grab;
+    color: var(--muted-foreground);
+    transition: color var(--duration-fast) var(--ease-in-out);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+  }
+  .dragHandle:hover {
+    color: var(--foreground);
+  }
+  .dragHandle:active {
+    cursor: grabbing;
+  }
+  .fieldSelect,
+  .operatorSelect,
+  .valueSelect,
+  .valueInput {
     width: 100%;
+    min-width: 0;
   }
-}
-
-@media (max-width: 640px) {
-  .conditionFieldsCollapsed {
-    display: none;
+  .dropIndicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--primary);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 20;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
   }
-}
-
-.logicWrapper,
-.whereWrapper {
-  width: auto;
-}
-
-.whereWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  height: var(--spacing-9);
-}
-@media (max-width: 640px) {
-  .whereWrapper {
-    justify-content: flex-start;
-    min-width: auto;
+  .dropIndicator::before {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--primary);
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+    border: 2px solid var(--card-bg);
+    box-shadow: 0 0 0 1px var(--primary);
+    border-radius: 50%;
+  }
+  .dropIndicator.before {
+    top: -10px;
+  }
+  .dropIndicator.after {
+    bottom: -13px;
+  }
+  .dropIndicator.inside {
+    top: 0;
+    bottom: 0;
     height: auto;
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    border: 2px solid var(--primary);
+    border-radius: var(--radius-md);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  .dropIndicator.inside::before {
+    display: none;
+  }
+  .dropTargetZone {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--z-elevated);
+    background: transparent;
+  }
+  .zIndexHigh {
+    z-index: var(--z-dropdown) !important;
+    position: relative;
+  }
+  .dropZoneBase, .dropZoneAfter, .groupDropZoneAfter, .dropZoneBefore, .groupDropZoneBefore, .dropZoneInside {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: transparent;
+    pointer-events: none;
+  }
+  .zoneActive {
+    pointer-events: auto !important;
+  }
+  .dropZoneInside {
+    top: 0;
+    height: 100%;
+    z-index: var(--z-modal);
   }
-}
-
-.whereBadge {
-  height: var(--spacing-9) !important;
-  font-size: var(--text-xs) !important;
-  line-height: 1 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--spacing-4) !important;
-  border-width: var(--border-width) !important;
-}
-
-.dragHandle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--size-icon-md);
-  height: var(--size-icon-md);
-  cursor: grab;
-  color: var(--muted-foreground);
-  transition: color var(--duration-fast) var(--ease-in-out);
-  touch-action: none;
-  user-select: none;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-}
-.dragHandle:hover {
-  color: var(--foreground);
-}
-.dragHandle:active {
-  cursor: grabbing;
-}
-
-.fieldSelect,
-.operatorSelect,
-.valueSelect,
-.valueInput {
-  width: 100%;
-  min-width: 0;
-}
-
-.dropIndicator {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--primary);
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 20;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-}
-.dropIndicator::before {
-  content: "";
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: var(--primary);
-  top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%);
-  border: 2px solid var(--card-bg);
-  box-shadow: 0 0 0 1px var(--primary);
-  border-radius: 50%;
-}
-.dropIndicator.before {
-  top: -10px;
-}
-.dropIndicator.after {
-  bottom: -13px;
-}
-.dropIndicator.inside {
-  top: 0;
-  bottom: 0;
-  height: auto;
-  background: color-mix(in srgb, var(--primary) 10%, transparent);
-  border: 2px solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-}
-.dropIndicator.inside::before {
-  display: none;
-}
-
-.dropTargetZone {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: var(--z-elevated);
-  background: transparent;
-}
-
-.zIndexHigh {
-  z-index: var(--z-dropdown) !important;
-  position: relative;
-}
-
-.dropZoneBase, .dropZoneAfter, .groupDropZoneAfter, .dropZoneBefore, .groupDropZoneBefore, .dropZoneInside {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: transparent;
-  pointer-events: none;
-}
-
-.zoneActive {
-  pointer-events: auto !important;
-}
-
-.dropZoneInside {
-  top: 0;
-  height: 100%;
-  z-index: var(--z-modal);
-}
-
-.dropZoneBefore, .groupDropZoneBefore {
-  top: 0;
-  height: 25%;
-  z-index: calc(var(--z-modal) + 10);
-}
-@media (max-width: 640px) {
   .dropZoneBefore, .groupDropZoneBefore {
-    height: 30%;
+    top: 0;
+    height: 25%;
+    z-index: calc(var(--z-modal) + 10);
+  }
+  @media (max-width: 640px) {
+    .dropZoneBefore, .groupDropZoneBefore {
+      height: 30%;
+    }
   }
-}
-
-.dropZoneAfter, .groupDropZoneAfter {
-  bottom: 0;
-  height: 25%;
-  z-index: calc(var(--z-modal) + 10);
-}
-@media (max-width: 640px) {
   .dropZoneAfter, .groupDropZoneAfter {
-    height: 30%;
+    bottom: 0;
+    height: 25%;
+    z-index: calc(var(--z-modal) + 10);
+  }
+  @media (max-width: 640px) {
+    .dropZoneAfter, .groupDropZoneAfter {
+      height: 30%;
+    }
   }
-}
-
-.groupDropZoneBefore {
-  height: 10px;
-}
-@media (max-width: 640px) {
   .groupDropZoneBefore {
-    height: 30px;
-    top: -10px;
+    height: 10px;
+  }
+  @media (max-width: 640px) {
+    .groupDropZoneBefore {
+      height: 30px;
+      top: -10px;
+    }
   }
-}
-
-.groupDropZoneAfter {
-  height: 10px;
-}
-@media (max-width: 640px) {
   .groupDropZoneAfter {
-    height: 30px;
-    bottom: -10px;
+    height: 10px;
+  }
+  @media (max-width: 640px) {
+    .groupDropZoneAfter {
+      height: 30px;
+      bottom: -10px;
+    }
   }
 }