doom-design-system 0.5.0 → 0.6.0

package/dist/components/Badge/Badge.module.css

@@ -1,49 +1,51 @@
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  font-weight: 700;
-  text-transform: uppercase;
-  border: var(--border-width) solid var(--card-border);
-  box-shadow: var(--border-width) var(--border-width) 0px 0px var(--card-border);
-  line-height: 1;
-}
-.badge.sm {
-  padding: var(--spacing-half) var(--spacing-2);
-  font-size: var(--text-2xs);
-}
-.badge.md {
-  padding: var(--spacing-1) var(--spacing-3);
-  font-size: var(--text-xs);
-}
-.badge.lg {
-  padding: var(--spacing-1) var(--spacing-4);
-  font-size: var(--text-sm);
-}
-.badge.primary {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-.badge.success {
-  background-color: var(--success);
-  color: var(--success-foreground);
-}
-.badge.warning {
-  background-color: var(--warning);
-  color: var(--warning-foreground);
-}
-.badge.error {
-  background-color: var(--error);
-  color: var(--error-foreground);
-}
-.badge.secondary {
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-}
-.badge.outline {
-  background-color: transparent;
-  color: var(--muted-foreground);
-  border-color: var(--border-strong);
-  box-shadow: none;
+@layer doom.components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    font-weight: 700;
+    text-transform: uppercase;
+    border: var(--surface-border-width) solid var(--card-border);
+    box-shadow: var(--surface-border-width) var(--surface-border-width) 0px 0px var(--card-border);
+    line-height: 1;
+  }
+  .badge.sm {
+    padding: var(--space-0\.5) var(--space-2);
+    font-size: var(--text-2xs);
+  }
+  .badge.md {
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
+  }
+  .badge.lg {
+    padding: var(--space-1) var(--space-4);
+    font-size: var(--text-sm);
+  }
+  .badge.primary {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .badge.success {
+    background-color: var(--success);
+    color: var(--success-foreground);
+  }
+  .badge.warning {
+    background-color: var(--warning);
+    color: var(--warning-foreground);
+  }
+  .badge.error {
+    background-color: var(--error);
+    color: var(--error-foreground);
+  }
+  .badge.secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .badge.outline {
+    background-color: transparent;
+    color: var(--muted-foreground);
+    border-color: var(--border-strong);
+    box-shadow: none;
+  }
 }

package/dist/components/Breadcrumbs/Breadcrumbs.module.css

@@ -1,34 +1,33 @@
-.nav {
-  display: flex;
-  align-items: center;
-  font-size: var(--text-sm);
-  color: var(--muted-foreground);
-}
-
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  gap: var(--spacing-2);
-}
-
-.li {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-.li:not(:last-child)::after {
-  content: "/";
-  margin-left: var(--spacing-1);
-  color: var(--muted-foreground);
-  opacity: 0.5;
-  font-weight: 700;
-}
-
-.currentPage {
-  font-weight: 700;
-  color: var(--foreground);
+@layer doom.components {
+  .nav {
+    display: flex;
+    align-items: center;
+    font-size: var(--text-sm);
+    color: var(--muted-foreground);
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    gap: var(--space-2);
+  }
+  .li {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .li:not(:last-child)::after {
+    content: "/";
+    margin-left: var(--space-1);
+    color: var(--muted-foreground);
+    opacity: 0.5;
+    font-weight: 700;
+  }
+  .currentPage {
+    font-weight: 700;
+    color: var(--foreground);
+  }
 }

package/dist/components/Button/Button.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
+import type { ControlSize } from "../../styles/types";
 type ButtonVariant = "primary" | "secondary" | "ghost" | "outline" | "success" | "danger";
-type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
-    size?: ButtonSize;
+    size?: ControlSize;
     loading?: boolean;
 }
 export declare function Button({ children, variant, size, loading, className, disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -16,6 +16,6 @@ import { Spinner } from "../Spinner/index.js";
 import styles from "./Button.module.css";
 export function Button(_a) {
     var { children, variant = "primary", size = "md", loading = false, className, disabled } = _a, props = __rest(_a, ["children", "variant", "size", "loading", "className", "disabled"]);
-    const buttonClass = clsx(styles.button, styles[variant], styles[size], loading && styles.loading, className);
+    const buttonClass = clsx(styles.button, styles[variant], size !== "md" && styles[size], loading && styles.loading, className);
     return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && _jsx(Spinner, { className: styles.spinnerIcon, size: "sm" }), children] })));
 }

package/dist/components/Button/Button.module.css

@@ -1,153 +1,151 @@
-.button {
-  --btn-focus-border: var(--primary);
-  --btn-focus-shadow: var(--shadow-primary);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-  cursor: pointer;
-  border: var(--border-width) solid var(--card-border);
-  box-shadow: var(--shadow-hard);
-  background-color: var(--card-bg);
-  color: var(--foreground);
-  font-size: var(--text-base);
-  position: relative;
-}
-.button:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-base);
-}
-.button:focus-visible {
-  outline: none;
-  box-shadow: 7px 7px 0px 0px var(--btn-focus-shadow);
-  transform: translate(calc(-1 * var(--spacing-half)), calc(-1 * var(--spacing-half)));
-  border-color: var(--btn-focus-border);
-}
-.button:active {
-  transition: none;
-  transform: translate(var(--spacing-half), var(--spacing-half));
-  box-shadow: none;
-}
-.button: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;
-}
-.button:disabled:hover {
-  transform: none !important;
-  filter: none !important;
-}
-.button:disabled {
-  transform: none;
-  box-shadow: var(--shadow-hard);
-}
-
-/* Variants */
-.primary {
-  --btn-focus-border: var(--card-border);
-  --btn-focus-shadow: var(--shadow-base);
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--border-strong);
-}
-.primary:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.secondary {
-  --btn-focus-border: var(--card-border);
-  --btn-focus-shadow: var(--shadow-base);
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-  border-color: var(--border-strong);
-}
-.secondary:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.success {
-  --btn-focus-border: var(--card-border);
-  --btn-focus-shadow: var(--shadow-base);
-  background-color: var(--success);
-  color: var(--success-foreground);
-  border-color: var(--border-strong);
-}
-.success:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.danger {
-  --btn-focus-border: var(--card-border);
-  --btn-focus-shadow: var(--shadow-base);
-  background-color: var(--error);
-  color: var(--error-foreground);
-  border-color: var(--border-strong);
-}
-.danger:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.outline {
-  background-color: transparent;
-  border-color: currentColor;
-}
-
-.ghost {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-}
-.ghost:hover:not(:disabled), .ghost:focus-visible:not(:disabled) {
-  background-color: color-mix(in srgb, var(--primary), transparent 90%);
-  color: var(--primary);
-  transform: none;
-  box-shadow: none;
-  border-color: transparent;
-  outline: none;
-}
-.ghost:disabled {
-  box-shadow: none;
-}
-.ghost:active {
-  transform: scale(0.95);
-  transition: none;
-}
-
-/* Sizes */
-.sm {
-  padding: var(--spacing-1);
-  font-size: var(--text-sm);
-  min-width: var(--spacing-6);
-  min-height: var(--control-height-sm);
-  box-sizing: border-box;
-  justify-content: center;
-}
-
-.md {
-  padding: var(--spacing-3) var(--spacing-6);
-  font-size: var(--text-base);
-  min-height: var(--control-height-md);
-  box-sizing: border-box;
-}
-
-.lg {
-  padding: var(--spacing-4) var(--spacing-8);
-  font-size: var(--text-lg);
-  min-height: var(--control-height-lg);
-  box-sizing: border-box;
-}
-
-/* Loading State */
-.loading {
-  cursor: wait;
-  opacity: 0.8;
-  pointer-events: none;
-}
-
-.spinnerIcon {
-  margin-right: var(--spacing-2);
+@layer doom.components {
+  .button {
+    --btn-focus-border: var(--primary);
+    --btn-focus-shadow: var(--shadow-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    background-color: var(--card-bg);
+    color: var(--foreground);
+    position: relative;
+    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;
+  }
+  .button:hover {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-lg);
+  }
+  .button: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);
+  }
+  .button:focus {
+    outline: none;
+  }
+  .button:active {
+    transition: none;
+    transform: translate(var(--space-0\.5), var(--space-0\.5));
+    box-shadow: none;
+  }
+  .button:focus-visible {
+    border-color: var(--btn-focus-border);
+  }
+  .button: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;
+  }
+  .button:disabled:hover {
+    transform: none !important;
+    filter: none !important;
+  }
+  .button:disabled {
+    transform: none;
+    box-shadow: var(--shadow-md);
+  }
+  /* Variants */
+  .primary {
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: var(--shadow-base);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--border-strong);
+  }
+  .primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .secondary {
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: var(--shadow-base);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-color: var(--border-strong);
+  }
+  .secondary:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .success {
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: var(--shadow-base);
+    background-color: var(--success);
+    color: var(--success-foreground);
+    border-color: var(--border-strong);
+  }
+  .success:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .danger {
+    --btn-focus-border: var(--card-border);
+    --btn-focus-shadow: var(--shadow-base);
+    background-color: var(--error);
+    color: var(--error-foreground);
+    border-color: var(--border-strong);
+  }
+  .danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .outline {
+    background-color: transparent;
+    border-color: currentColor;
+  }
+  .ghost {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+  .ghost:hover:not(:disabled), .ghost:focus-visible:not(:disabled) {
+    background-color: color-mix(in srgb, var(--primary), transparent 90%);
+    color: var(--primary);
+    transform: none;
+    box-shadow: none;
+    border-color: transparent;
+    outline: none;
+  }
+  .ghost:disabled {
+    box-shadow: none;
+  }
+  .ghost:active {
+    transform: scale(0.95);
+    transition: none;
+  }
+  /* 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);
+  }
+  /* Loading State */
+  .loading {
+    cursor: wait;
+    opacity: 0.8;
+    pointer-events: none;
+  }
+  .spinnerIcon {
+    margin-right: var(--space-2);
+  }
 }

package/dist/components/Card/Card.module.css

@@ -1,40 +1,38 @@
-.root {
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-.root > *:first-child {
-  border-top-left-radius: calc(var(--radius) - var(--border-width));
-  border-top-right-radius: calc(var(--radius) - var(--border-width));
-}
-.root > *:last-child {
-  border-bottom-left-radius: calc(var(--radius) - var(--border-width));
-  border-bottom-right-radius: calc(var(--radius) - var(--border-width));
-}
-
-.padded {
-  padding: var(--spacing-6);
-}
-
-.header {
-  padding: var(--spacing-6);
-  border-bottom: var(--border-width) solid var(--card-border);
-  background-color: var(--card-bg);
-  border-radius: calc(var(--radius) - var(--border-width)) calc(var(--radius) - var(--border-width)) 0 0;
-}
-
-.body {
-  padding: var(--spacing-6);
-  flex: 1;
-}
-
-.footer {
-  padding: var(--spacing-6);
-  border-top: var(--border-width) solid var(--card-border);
-  background-color: var(--card-bg);
-  border-radius: 0 0 calc(var(--radius) - var(--border-width)) calc(var(--radius) - var(--border-width));
+@layer doom.components {
+  .root {
+    background-color: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--surface-radius);
+    box-shadow: var(--shadow-md);
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .root > *:first-child {
+    border-top-left-radius: calc(var(--surface-radius) - var(--surface-border-width));
+    border-top-right-radius: calc(var(--surface-radius) - var(--surface-border-width));
+  }
+  .root > *:last-child {
+    border-bottom-left-radius: calc(var(--surface-radius) - var(--surface-border-width));
+    border-bottom-right-radius: calc(var(--surface-radius) - var(--surface-border-width));
+  }
+  .padded {
+    padding: var(--surface-padding);
+  }
+  .header {
+    padding: var(--surface-padding);
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+    background-color: var(--card-bg);
+    border-radius: calc(var(--surface-radius) - var(--surface-border-width)) calc(var(--surface-radius) - var(--surface-border-width)) 0 0;
+  }
+  .body {
+    padding: var(--surface-padding);
+    flex: 1;
+  }
+  .footer {
+    padding: var(--surface-padding);
+    border-top: var(--surface-border-width) solid var(--card-border);
+    background-color: var(--card-bg);
+    border-radius: 0 0 calc(var(--surface-radius) - var(--surface-border-width)) calc(var(--surface-radius) - var(--surface-border-width));
+  }
 }