doom-design-system 0.5.0 → 0.6.0

package/dist/components/Sidebar/subcomponents/Item/Item.module.css

@@ -1,56 +1,55 @@
-.item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--spacing-3) var(--spacing-4);
-  background: transparent;
-  border: var(--border-width) solid transparent;
-  border-radius: var(--radius);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--foreground);
-  text-decoration: none;
-  gap: var(--spacing-3);
-  margin-bottom: var(--spacing-1);
-}
-.item:last-child {
-  margin-bottom: 0;
-}
-.item:hover {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-.item:focus-visible {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 var(--spacing-half) color-mix(in srgb, var(--primary) 30%, transparent);
-}
-.item.active {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-
-.itemIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--size-icon-md);
-  height: var(--size-icon-md);
-}
-
-.itemLabel {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-
-.itemAppend {
-  flex-shrink: 0;
-  margin-left: auto;
+@layer doom.components {
+  .item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--space-3) var(--space-4);
+    background: transparent;
+    border: var(--surface-border-width) solid transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--foreground);
+    text-decoration: none;
+    gap: var(--space-3);
+    margin-bottom: var(--space-1);
+  }
+  .item:last-child {
+    margin-bottom: 0;
+  }
+  .item:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .item:focus-visible {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 var(--space-0\.5) color-mix(in srgb, var(--primary) 30%, transparent);
+  }
+  .item.active {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .itemIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--size-icon-md);
+    height: var(--size-icon-md);
+  }
+  .itemLabel {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  .itemAppend {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
 }

package/dist/components/Sidebar/subcomponents/MobileOverlay/MobileOverlay.module.css

@@ -1,39 +1,39 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  backdrop-filter: blur(var(--blur-standard));
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
-  pointer-events: none;
-  z-index: var(--z-overlay);
-}
-.overlay.isOpen {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-
-.mobilePanel {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: var(--width-sidebar);
-  max-width: 85vw;
-  background-color: var(--card-bg);
-  z-index: var(--z-drawer);
-  transform: translateX(calc(-100% - 20px));
-  transition: transform var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
-  visibility: hidden;
-  border-right: var(--border-width) solid var(--card-border);
-  /* Bottom-Right shadow for left-anchored elements */
-  box-shadow: var(--spacing-2) var(--spacing-2) 0 0 var(--shadow-base);
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-}
-.mobilePanel.isOpen {
-  visibility: visible;
-  transform: translateX(0);
+@layer doom.components {
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, var(--overlay-opacity));
+    backdrop-filter: blur(var(--blur-standard));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
+    pointer-events: none;
+    z-index: var(--z-overlay);
+  }
+  .overlay.isOpen {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  .mobilePanel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--width-sidebar);
+    max-width: 85vw;
+    background-color: var(--card-bg);
+    z-index: var(--z-drawer);
+    transform: translateX(calc(-100% - 20px));
+    transition: transform var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
+    visibility: hidden;
+    border-right: var(--surface-border-width) solid var(--card-border);
+    box-shadow: var(--space-2) var(--space-2) 0 0 var(--shadow-base);
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .mobilePanel.isOpen {
+    visibility: visible;
+    transform: translateX(0);
+  }
 }

package/dist/components/Sidebar/subcomponents/MobileTrigger/MobileTrigger.module.css

@@ -1,5 +1,7 @@
-@media (min-width: 768px) {
-  .mobileTrigger {
-    display: none;
+@layer doom.components {
+  @media (min-width: 768px) {
+    .mobileTrigger {
+      display: none;
+    }
   }
 }

package/dist/components/Sidebar/subcomponents/Nav/Nav.module.css

@@ -1,12 +1,14 @@
-.nav {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--spacing-2);
-  display: flex;
-  flex-direction: column;
-}
-.nav > * {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+@layer doom.components {
+  .nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-2);
+    display: flex;
+    flex-direction: column;
+  }
+  .nav > * {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }

package/dist/components/Sidebar/subcomponents/Rail/Rail.module.css

@@ -1,64 +1,63 @@
-.rail {
-  display: flex;
-  flex-direction: column;
-  width: var(--width-sidebar-collapsed);
-  flex-shrink: 0;
-  border-right: var(--border-width) solid var(--card-border);
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  overflow: hidden;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-
-.railBrand {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-4);
-  height: var(--header-height);
-  border-bottom: none;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.railNav {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-2);
-  gap: var(--spacing-2);
-}
-
-.railItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  aspect-ratio: 1;
-  padding: var(--spacing-3);
-  background: transparent;
-  border: var(--border-width) solid transparent;
-  border-radius: var(--radius);
-  cursor: pointer;
-  color: var(--primary-foreground);
-}
-.railItem:hover {
-  background-color: transparent;
-  color: var(--primary-foreground);
-  border-color: var(--common-black);
-  opacity: 1;
-}
-.railItem:focus-visible {
-  outline: none;
-  background-color: transparent;
-  color: var(--primary-foreground);
-  border-color: var(--common-black);
-  opacity: 1;
-}
-.railItem.active {
-  background-color: transparent;
-  color: var(--primary-foreground);
-  border-color: var(--common-black);
-  opacity: 1;
-  border-radius: var(--radius);
+@layer doom.components {
+  .rail {
+    display: flex;
+    flex-direction: column;
+    width: var(--width-sidebar-collapsed);
+    flex-shrink: 0;
+    border-right: var(--surface-border-width) solid var(--card-border);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    overflow: hidden;
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  .railBrand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+    height: var(--header-height);
+    border-bottom: none;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+  .railNav {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-2);
+    gap: var(--space-2);
+  }
+  .railItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    padding: var(--space-3);
+    background: transparent;
+    border: var(--surface-border-width) solid transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    color: var(--primary-foreground);
+  }
+  .railItem:hover {
+    background-color: transparent;
+    color: var(--primary-foreground);
+    border-color: var(--common-black);
+    opacity: 1;
+  }
+  .railItem:focus-visible {
+    outline: none;
+    background-color: transparent;
+    color: var(--primary-foreground);
+    border-color: var(--common-black);
+    opacity: 1;
+  }
+  .railItem.active {
+    background-color: transparent;
+    color: var(--primary-foreground);
+    border-color: var(--common-black);
+    opacity: 1;
+    border-radius: var(--radius-md);
+  }
 }

package/dist/components/Sidebar/subcomponents/Section/Section.module.css

@@ -1,92 +1,87 @@
-.section {
-  margin-bottom: var(--spacing-1);
-}
-
-.sectionTrigger {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--spacing-3) var(--spacing-4);
-  background: transparent;
-  border: var(--border-width) solid transparent;
-  border-radius: var(--radius);
-  cursor: pointer;
-  font-family: var(--font-heading);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted-foreground);
-  gap: var(--spacing-3);
-}
-.sectionTrigger:hover {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-.sectionTrigger:focus-visible {
-  outline: none;
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-.sectionTrigger.active {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-
-.sectionIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--size-icon-md);
-  height: var(--size-icon-md);
-}
-
-.sectionLabel {
-  flex: 1;
-  text-align: left;
-}
-
-.sectionChevron {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--card-border);
-}
-
-.sectionTrigger:hover .sectionChevron,
-.sectionTrigger:focus-visible .sectionChevron,
-.sectionTrigger.active .sectionChevron {
-  color: inherit;
-}
-
-.sectionTrigger[aria-expanded=true] .sectionChevron {
-  transform: rotate(90deg);
-}
-
-.sectionContent {
-  display: none;
-  overflow: hidden;
-  margin-left: var(--spacing-6);
-  padding-left: var(--spacing-3);
-  position: relative;
-}
-.sectionContent::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: var(--border-width);
-  background-color: var(--card-border);
-}
-.sectionContent > * {
-  overflow: hidden;
-}
-.sectionContent.expanded {
-  display: block;
-  margin-top: var(--spacing-2);
+@layer doom.components {
+  .section {
+    margin-bottom: var(--space-1);
+  }
+  .sectionTrigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--space-3) var(--space-4);
+    background: transparent;
+    border: var(--surface-border-width) solid transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-family: var(--font-heading);
+    font-size: var(--text-xs);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted-foreground);
+    gap: var(--space-3);
+  }
+  .sectionTrigger:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .sectionTrigger:focus-visible {
+    outline: none;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .sectionTrigger.active {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .sectionIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--size-icon-md);
+    height: var(--size-icon-md);
+  }
+  .sectionLabel {
+    flex: 1;
+    text-align: left;
+  }
+  .sectionChevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--card-border);
+  }
+  .sectionTrigger:hover .sectionChevron,
+  .sectionTrigger:focus-visible .sectionChevron,
+  .sectionTrigger.active .sectionChevron {
+    color: inherit;
+  }
+  .sectionTrigger[aria-expanded=true] .sectionChevron {
+    transform: rotate(90deg);
+  }
+  .sectionContent {
+    display: none;
+    overflow: hidden;
+    margin-left: var(--space-6);
+    padding-left: var(--space-3);
+    position: relative;
+  }
+  .sectionContent::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--surface-border-width);
+    background-color: var(--card-border);
+  }
+  .sectionContent > * {
+    overflow: hidden;
+  }
+  .sectionContent.expanded {
+    display: block;
+    margin-top: var(--space-2);
+  }
 }

package/dist/components/Skeleton/Skeleton.module.css

@@ -1,29 +1,31 @@
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
+@layer doom.components {
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
   }
-  100% {
-    background-position: 200% 0;
+  .skeleton {
+    background: linear-gradient(90deg, color-mix(in srgb, var(--foreground), transparent 90%) 25%, color-mix(in srgb, var(--foreground), transparent 80%) 37%, color-mix(in srgb, var(--foreground), transparent 90%) 63%);
+    background-size: 200% 100%;
+    animation: shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    width: var(--width, 100%);
+    height: var(--height, auto);
+  }
+  .skeleton.text {
+    height: var(--height, 1em);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-2);
+  }
+  .skeleton.circular {
+    border-radius: 50%;
+    height: var(--height, var(--width, var(--space-12)));
+    width: var(--width, var(--height, var(--space-12)));
+  }
+  .skeleton.rectangular {
+    height: var(--height, 160px);
+    border-radius: var(--radius-md);
   }
-}
-.skeleton {
-  background: linear-gradient(90deg, color-mix(in srgb, var(--foreground), transparent 90%) 25%, color-mix(in srgb, var(--foreground), transparent 80%) 37%, color-mix(in srgb, var(--foreground), transparent 90%) 63%);
-  background-size: 200% 100%;
-  animation: shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  width: var(--width, 100%);
-  height: var(--height, auto);
-}
-.skeleton.text {
-  height: var(--height, 1em);
-  border-radius: var(--radius);
-  margin-bottom: var(--spacing-2);
-}
-.skeleton.circular {
-  border-radius: 50%;
-  height: var(--height, var(--width, var(--spacing-12)));
-  width: var(--width, var(--height, var(--spacing-12)));
-}
-.skeleton.rectangular {
-  height: var(--height, var(--spacing-40));
-  border-radius: var(--radius);
 }