doom-design-system 0.5.0 → 0.6.0

package/dist/components/Combobox/Combobox.module.css

@@ -1,211 +1,234 @@
-.trigger {
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  transition: all 0.1s ease;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--spacing-4) var(--spacing-6);
-  background: var(--card-bg);
-  font-size: var(--text-base);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  text-align: left;
-  cursor: pointer;
-  min-height: var(--control-height-lg);
-  box-sizing: border-box;
-  transition: all var(--duration-fast) var(--ease-in-out);
-}
-.trigger:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-base);
-}
-.trigger.sm {
-  padding: var(--spacing-2) var(--spacing-4);
-  min-height: var(--control-height-md);
-  font-size: var(--text-xs);
-}
-.trigger.hasValue {
-  color: var(--foreground);
-}
-.trigger.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.trigger:focus-visible, .trigger[aria-expanded=true] {
-  outline: none;
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-primary);
-  border-color: var(--primary);
-}
-.trigger:focus {
-  outline: none;
-}
-
-.triggerText {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted-foreground);
-}
-.hasValue .triggerText {
-  color: var(--foreground);
-}
-
-.triggerIcons {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  margin-left: var(--spacing-2);
-  color: var(--muted-foreground);
-}
-
-.clearButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-half);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-in-out);
-}
-.clearButton:hover {
-  background: var(--surface-accent);
-  color: var(--foreground);
-}
-
-.chevron {
-  transition: transform var(--duration-fast) var(--ease-in-out);
-}
-
-.dropdown {
-  width: 100%;
-  min-width: 20ch;
-  max-width: 40ch;
-  padding: 0;
-  overflow: hidden;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background: var(--card-bg);
-  box-shadow: var(--shadow-lg);
-}
-
-.searchWrapper {
-  position: sticky;
-  top: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
-  background: var(--card-bg);
-  z-index: var(--z-elevated);
-}
-
-.searchIcon {
-  color: var(--muted-foreground);
-  flex-shrink: 0;
-  transition: color var(--duration-fast) var(--ease-in-out);
-}
-
-.searchInput {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-family: var(--font-family);
-  font-size: var(--text-sm);
-  color: var(--foreground);
-  outline: none;
-}
-.searchInput::placeholder {
-  color: var(--muted-foreground);
-  transition: opacity var(--duration-fast);
-}
-.searchInput:focus::placeholder {
-  opacity: 0.7;
-}
-
-.optionsList {
-  max-height: var(--spacing-64);
-  scrollbar-gutter: stable;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--spacing-1);
-  padding-bottom: var(--spacing-2);
-  padding-right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-}
-.optionsList::-webkit-scrollbar {
-  width: 6px;
-}
-.optionsList::-webkit-scrollbar-track {
-  background: transparent;
-}
-.optionsList::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: var(--radius-sm);
-}
-.optionsList::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  width: 100%;
-  padding: var(--spacing-2) var(--spacing-4);
-  border: none;
-  border-radius: calc(var(--radius) - var(--border-width));
-  background: transparent;
-  text-align: left;
-  color: var(--foreground);
-  cursor: pointer;
-  font-size: var(--text-base);
-  font-weight: var(--font-regular);
-  transition: all var(--duration-fast) var(--ease-in-out);
-  user-select: none;
-}
-.option:hover {
-  background-color: color-mix(in srgb, var(--primary), transparent 85%);
-  color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
-}
-.option.selected {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: var(--font-bold);
-}
-.option.selected:hover {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  filter: brightness(1.1);
-}
-
-.optionLabel {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.noResults {
-  padding: var(--spacing-6) var(--spacing-4);
-  text-align: center;
-  color: var(--muted-foreground);
-  font-size: var(--text-sm);
-  font-style: italic;
-  opacity: 0.8;
-}
-
-.stickyOption {
-  padding: var(--spacing-1);
-  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
-  background: var(--card-bg);
+@layer doom.components {
+  .trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background: var(--card-bg);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: left;
+    cursor: pointer;
+    box-sizing: border-box;
+    height: var(--control-height);
+    padding: var(--control-padding-y) var(--control-padding-x);
+    font-size: var(--control-font-size);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--control-radius);
+    box-shadow: var(--shadow-md);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    outline: none;
+  }
+  .trigger:hover {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-lg);
+  }
+  .trigger:focus-visible {
+    outline: none;
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border-color: var(--primary);
+  }
+  .trigger:focus {
+    outline: none;
+  }
+  .trigger[aria-expanded=true] {
+    outline: none;
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border-color: var(--primary);
+  }
+  .trigger:active {
+    transition: none;
+    transform: translate(var(--space-0\.5), var(--space-0\.5));
+    box-shadow: none;
+  }
+  .trigger.hasValue {
+    color: var(--foreground);
+  }
+  .trigger.disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+  }
+  .trigger.disabled:hover {
+    transform: none !important;
+    filter: none !important;
+  }
+  .trigger.disabled {
+    transform: none;
+    box-shadow: var(--shadow-md);
+  }
+  /* Sizes */
+  .sm {
+    --control-height: var(--size-7);
+    --control-padding-x: var(--space-2);
+    --control-padding-y: var(--space-1);
+    --control-font-size: var(--text-xs);
+    --control-icon-size: var(--size-4);
+    --control-gap: var(--space-1);
+    --control-radius: var(--radius-sm);
+  }
+  .lg {
+    --control-height: var(--size-10);
+    --control-padding-x: var(--space-4);
+    --control-padding-y: var(--space-2);
+    --control-font-size: var(--text-base);
+    --control-icon-size: var(--size-5);
+    --control-gap: var(--space-2);
+    --control-radius: var(--radius-md);
+  }
+  .triggerText {
+    flex: 1;
+    min-width: 12ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+  .hasValue .triggerText {
+    color: var(--foreground);
+  }
+  .triggerIcons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-left: var(--space-2);
+    color: var(--muted-foreground);
+  }
+  .clearButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-0\.5);
+    border-radius: var(--control-radius);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-in-out);
+  }
+  .clearButton:hover {
+    background: var(--surface-accent);
+    color: var(--foreground);
+  }
+  .chevron {
+    transition: transform var(--duration-fast) var(--ease-in-out);
+  }
+  .dropdown {
+    width: 100%;
+    min-width: 20ch;
+    max-width: 40ch;
+    padding: 0;
+    overflow: hidden;
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--control-radius);
+    background: var(--card-bg);
+    box-shadow: var(--shadow-lg);
+  }
+  .searchWrapper {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
+    background: var(--card-bg);
+    z-index: var(--z-elevated);
+  }
+  .searchIcon {
+    color: var(--muted-foreground);
+    flex-shrink: 0;
+    transition: color var(--duration-fast) var(--ease-in-out);
+  }
+  .searchInput {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-family: var(--font-family);
+    font-size: var(--text-sm);
+    color: var(--foreground);
+    outline: none;
+  }
+  .searchInput::placeholder {
+    color: var(--muted-foreground);
+    transition: opacity var(--duration-fast);
+  }
+  .searchInput:focus::placeholder {
+    opacity: 0.7;
+  }
+  .optionsList {
+    max-height: 16rem;
+    scrollbar-gutter: stable;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-1);
+    padding-bottom: var(--space-2);
+    padding-right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .optionsList::-webkit-scrollbar {
+    width: 6px;
+  }
+  .optionsList::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .optionsList::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .optionsList::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+  .option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    border: none;
+    border-radius: calc(var(--control-radius) - var(--surface-border-width));
+    background: transparent;
+    text-align: left;
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: var(--control-font-size);
+    font-weight: var(--font-regular);
+    transition: all var(--duration-fast) var(--ease-in-out);
+    user-select: none;
+  }
+  .option:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: color-mix(in srgb, var(--primary), var(--foreground) 25%);
+  }
+  .option.selected {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-weight: var(--font-bold);
+  }
+  .option.selected:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    filter: brightness(1.1);
+  }
+  .optionLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+  .noResults {
+    padding: var(--space-4) var(--space-3);
+    text-align: center;
+    color: var(--muted-foreground);
+    font-size: var(--text-sm);
+    font-style: italic;
+    opacity: 0.8;
+  }
+  .stickyOption {
+    padding: var(--space-1);
+    border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
+    background: var(--card-bg);
+  }
 }

package/dist/components/CopyButton/CopyButton.module.css

@@ -1,91 +1,85 @@
-.copyButton {
-  position: relative;
-  overflow: hidden;
-  display: inline-grid !important;
-  grid-template-areas: "stack";
-  place-items: center;
-  text-align: center;
-  flex-shrink: 0;
-  white-space: nowrap;
-  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
-}
-.copyButton:not(.ghost):active {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0px 0px var(--shadow-base) !important;
-}
-
-.ghost {
-  box-shadow: none !important;
-}
-.ghost:active {
-  box-shadow: none !important;
-  transform: scale(0.95);
-}
-.ghost:hover:not(:disabled) {
-  transform: none;
-  box-shadow: none !important;
-}
-
-.labelContainer {
-  grid-area: stack;
-  display: grid;
-  place-items: center;
-  justify-content: center;
-  pointer-events: none;
-  z-index: 1;
-  width: 100%;
-}
-
-.defaultLabel,
-.successLabel {
-  grid-area: 1/1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-  width: 100%;
-}
-
-.defaultLabel {
-  transform: scale(1);
-  opacity: 1;
-  filter: blur(0px);
-}
-
-.successLabel {
-  transform: scale(0.5) translateY(10px);
-  opacity: 0;
-  filter: blur(4px);
-}
-
-.copied .defaultLabel {
-  transform: scale(0.9);
-  opacity: 0;
-  transition: all 150ms ease-out;
-}
-.copied .successLabel {
-  transform: scale(1) translateY(0);
-  opacity: 1;
-  filter: blur(0px);
-}
-
-.widthPreserver {
-  grid-area: stack;
-  visibility: hidden;
-  display: grid;
-  grid-template-columns: auto;
-  justify-items: center;
-  align-items: center;
-  height: 0;
-  overflow: hidden;
-}
-
-.measureItem {
-  grid-area: 1/1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-  white-space: nowrap;
+@layer doom.components {
+  .copyButton {
+    position: relative;
+    overflow: hidden;
+    display: inline-grid !important;
+    grid-template-areas: "stack";
+    place-items: center;
+    text-align: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
+  }
+  .copyButton:not(.ghost):active {
+    transform: translate(var(--space-0\.5), var(--space-0\.5));
+    box-shadow: var(--space-0\.5) var(--space-0\.5) 0px 0px var(--shadow-base) !important;
+  }
+  .ghost {
+    box-shadow: none !important;
+  }
+  .ghost:active {
+    box-shadow: none !important;
+    transform: scale(0.95);
+  }
+  .ghost:hover:not(:disabled) {
+    transform: none;
+    box-shadow: none !important;
+  }
+  .labelContainer {
+    grid-area: stack;
+    display: grid;
+    place-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 1;
+    width: 100%;
+  }
+  .defaultLabel,
+  .successLabel {
+    grid-area: 1/1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    width: 100%;
+  }
+  .defaultLabel {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0px);
+  }
+  .successLabel {
+    transform: scale(0.5) translateY(10px);
+    opacity: 0;
+    filter: blur(4px);
+  }
+  .copied .defaultLabel {
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 150ms ease-out;
+  }
+  .copied .successLabel {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+    filter: blur(0px);
+  }
+  .widthPreserver {
+    grid-area: stack;
+    visibility: hidden;
+    display: grid;
+    grid-template-columns: auto;
+    justify-items: center;
+    align-items: center;
+    height: 0;
+    overflow: hidden;
+  }
+  .measureItem {
+    grid-area: 1/1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    white-space: nowrap;
+  }
 }