@_linked/primitives 1.0.5

package/lib/esm/components/Accordion.module.css

@@ -0,0 +1,101 @@
+.Root {
+  border-radius: var(--accordion-radius, var(--box-radius));
+  width: 100%;
+  background-color: var(--accordion-bg, var(--box-bg));
+  box-shadow: var(--accordion-shadow, var(--box-shadow));
+}
+
+.Item {
+  overflow: hidden;
+  margin-top: 1px;
+
+  &:first-child {
+    margin-top: 0;
+    border-top-left-radius: var(--accordion-radius, var(--box-radius));
+    border-top-right-radius: var(--accordion-radius, var(--box-radius));
+  }
+
+  &:last-child {
+    border-bottom-left-radius: var(--accordion-radius, var(--box-radius));
+    border-bottom-right-radius: var(--accordion-radius, var(--box-radius));
+  }
+
+  &:focus-within {
+    position: relative;
+    z-index: 1;
+    /* box-shadow: var(--accordion-shadow);*/
+  }
+}
+
+.Header {
+  display: flex;
+}
+
+.Trigger {
+  font-family: inherit;
+  background-color: transparent;
+  padding: 0 var(--accordion-padding, var(--box-padding));
+  height: var(--accordion-trigger-height, 2.75rem);
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--accordion-trigger-font-size, var(--typography-small-size));
+  line-height: 1;
+  color: var(--box-text);
+  /* box-shadow: var(--accordion-shadow);*/
+  background-color: var(--accordion-bg, var(--box-bg));
+  transition: var(--transition-normal);
+
+  &:hover {
+    background-color: var(--accordion-bg-active, var(--bg-hover));
+  }
+
+  &[data-state='open'] > .Icon {
+    transform: rotate(180deg);
+  }
+}
+
+.Icon {
+  transition: transform var(--transition-duration-normal)
+    var(--transition-easing);
+}
+
+.Content {
+  overflow: hidden;
+  font-size: var(--typography-font-size);
+  color: var(--typography-color);
+  background-color: var(--accordion-content-bg, var(--box-bg));
+
+  &[data-state='open'] {
+    animation: slideDown var(--transition-duration-normal)
+      var(--transition-easing);
+  }
+
+  &[data-state='closed'] {
+    animation: slideUp var(--transition-duration-normal)
+      var(--transition-easing);
+  }
+}
+
+.ContentText {
+  padding: var(--accordion-content-padding, var(--box-padding));
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/lib/esm/components/AlertDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const Root: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Header: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const AlertDialog: {
+    Root: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+    Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Trigger, Overlay, Content, Header, Footer, Title, Description, Action, Cancel, };

package/lib/esm/components/AlertDialog.module.css

@@ -0,0 +1,80 @@
+.Overlay {
+  background-color: var(--alertdialog-overlay-bg, var(--modal-overlay-bg));
+  position: fixed;
+  inset: 0;
+  animation: overlayShow
+    var(--alertdialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+}
+
+.Content {
+  background-color: var(--alertdialog-bg, var(--modal-bg));
+  color: var(--alertdialog-text, var(--modal-text));
+  border: 1px solid var(--alertdialog-border, var(--modal-border));
+  border-radius: var(--alertdialog-radius, var(--modal-radius));
+  box-shadow: var(--alertdialog-shadow, var(--modal-shadow));
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: var(--alertdialog-transform, translate(-50%, -50%));
+  width: min(90vw, var(--alertdialog-max-width, 32rem));
+  max-height: 85vh;
+  padding: var(--alertdialog-padding, var(--modal-padding));
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+  animation: var(--alertdialog-animation-name, contentShow)
+    var(--alertdialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+}
+
+.Title {
+  margin: 0;
+  color: var(--heading-5-color);
+  font-size: var(--heading-5-font-size);
+  font-weight: var(--heading-5-font-weight);
+  font-family: var(--heading-5-font-family);
+  letter-spacing: var(--heading-5-letter-spacing);
+  line-height: var(--heading-5-line-height);
+}
+
+.Description {
+  margin: 0;
+  color: var(--typography-color);
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-font-size);
+  line-height: var(--typography-line-height);
+}
+
+.Header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+}
+
+.Footer {
+  display: flex;
+  gap: var(--alertdialog-gap, var(--modal-gap));
+  justify-content: flex-end;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/lib/esm/components/AspectRatio.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+declare const Root: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AspectRatio: {
+    Root: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root };

package/lib/esm/components/AspectRatio.module.css

@@ -0,0 +1,28 @@
+.Root {
+  overflow: hidden;
+  width: 100%;
+  border-radius: var(--aspectratio-radius, var(--media-radius));
+  background-color: var(--aspectratio-bg, var(--media-bg));
+  box-shadow: var(--aspectratio-shadow, var(--media-shadow));
+}
+
+.Image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.Fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--aspectratio-bg, var(--media-bg));
+  color: var(--aspectratio-fallback-color, var(--typography-auxiliary-color));
+  font-family: var(--aspectratio-font-family, var(--typography-font-family));
+  font-size: var(--aspectratio-font-size, var(--typography-font-size));
+  font-weight: var(--aspectratio-font-weight, var(--typography-font-weight));
+  line-height: var(--aspectratio-line-height, var(--typography-line-height));
+}

package/lib/esm/components/Avatar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const Root: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Image: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const Fallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    Root: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Fallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export { Root, Image, Fallback };

package/lib/esm/components/Avatar.module.css

@@ -0,0 +1,43 @@
+.Root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: var(--avatar-size, var(--avatar-size-md));
+  height: var(--avatar-size, var(--avatar-size-md));
+  border-radius: var(--avatar-radius, var(--media-radius));
+  background-color: var(--avatar-bg, var(--media-bg));
+  color: var(--avatar-color, var(--typography-auxiliary-color));
+  box-shadow: var(--avatar-shadow, var(--media-shadow));
+}
+
+.Root[data-size='sm'] {
+  --avatar-size: var(--avatar-size-sm);
+}
+
+.Root[data-size='lg'] {
+  --avatar-size: var(--avatar-size-lg);
+}
+
+.Image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.Fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--avatar-bg, var(--media-bg));
+  color: var(--avatar-color, var(--typography-auxiliary-color));
+  font-family: var(--avatar-font-family, var(--typography-font-family));
+  font-size: var(--avatar-font-size, var(--typography-font-size));
+  font-weight: var(--avatar-font-weight, var(--typography-font-weight));
+  line-height: var(--avatar-line-height, var(--typography-line-height));
+}

package/lib/esm/components/Breadcrumb.d.ts

@@ -0,0 +1,41 @@
+/**
+ * copy from `https://ui.shadcn.com/docs/components/breadcrumb`
+ */
+import * as React from 'react';
+declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Separator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+    displayName: string;
+};
+declare const Ellipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+export declare const Breadcrumb: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        separator?: React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Separator: {
+        ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { Root, List, Item, Link, Page, Separator, Ellipsis };

package/lib/esm/components/Breadcrumb.module.css

@@ -0,0 +1,78 @@
+.Root {
+  color: var(--breadcrumb-text, var(--navigation-text));
+}
+
+.List {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--breadcrumb-gap, var(--navigation-gap));
+  overflow-wrap: anywhere;
+  font-family: var(--typography-font-family);
+  font-size: var(--breadcrumb-font-size, var(--typography-font-size));
+  color: inherit;
+}
+
+@media (min-width: 640px) {
+  .List {
+    gap: calc(var(--breadcrumb-gap, var(--navigation-gap)) / 2);
+  }
+}
+
+.Item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-item-gap, var(--breadcrumb-gap, var(--navigation-gap)));
+}
+
+.Link {
+  color: inherit;
+  transition: var(--breadcrumb-transition, var(--transition-normal));
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--breadcrumb-text-hover, var(--link-color));
+  }
+}
+
+.Page {
+  font-weight: var(--typography-font-weight);
+  color: var(--breadcrumb-text-active, var(--navigation-text-active));
+}
+
+.Separator {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  color: var(--breadcrumb-separator, var(--navigation-border));
+
+  svg {
+    width: var(--breadcrumb-icon-size, var(--icon-size-sm));
+    height: var(--breadcrumb-icon-size, var(--icon-size-sm));
+  }
+}
+
+.Ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--breadcrumb-ellipsis-size, var(--icon-size-md));
+  height: var(--breadcrumb-ellipsis-size, var(--icon-size-md));
+
+  .moreHorizontal {
+    width: var(--breadcrumb-icon-size, var(--icon-size-sm));
+    height: var(--breadcrumb-icon-size, var(--icon-size-sm));
+  }
+
+  .srOnly {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+}

package/lib/esm/components/Button.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+    color?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large' | 'default';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

package/lib/esm/components/Button.module.css

@@ -0,0 +1,246 @@
+@import './helpers/mixins.css';
+
+/* Button component now uses semantic theme variables from theme-defaults.css */
+
+/* $colors: (*/
+/*   'primary': (*/
+/*     'background': var(--primary),*/
+/*     'foreground': var(--primary-foreground),*/
+/*   ),*/
+/*   'secondary': (*/
+/*     'background': var(--secondary),*/
+/*     'foreground': var(--secondary-foreground),*/
+/*   ),*/
+/*   'tertiary': (*/
+/*     'background': var(--tertiary),*/
+/*     'foreground': var(--tertiary-foreground),*/
+/*   ),*/
+/* );*/
+
+/* $variants: solid, outline, ghost, link;*/
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: var(--control-radius);
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  outline: none;
+  transition: var(--transition-fast);
+  border: solid 1px transparent;
+  cursor: pointer;
+  gap: var(--button-gap);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  height: var(--button-height-md);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  /* // color: 'primary' | 'secondary' | 'tertiary'*/
+  /* // variant: 'solid' | 'outline' | 'ghost'*/
+  /* @each $color, $color-values in $colors {*/
+  /*   &.#{$color} {*/
+  /*     @each $variant in $variants {*/
+  /*       &.#{$variant} {*/
+  /*         @if $variant == 'solid' {*/
+  /*           background: map-get($color-values, 'background');*/
+  /*           color: map-get($color-values, 'foreground');*/
+  /*           border-color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: #2563eb;*/
+  /*           }*/
+  /*         } @else if $variant == 'outline' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+  /*           border: 1px solid map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: map-get($color-values, 'background');*/
+  /*             color: map-get($color-values, 'foreground');*/
+  /*           }*/
+  /*         } @else if $variant == 'ghost' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: map-get($color-values, 'background');*/
+  /*             color: map-get($color-values, 'foreground');*/
+  /*           }*/
+  /*         } @else if $variant == 'link' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             text-decoration: underline;*/
+  /*           }*/
+  /*         }*/
+  /*       }*/
+  /*     }*/
+  /*   }*/
+  /* }*/
+
+  /* color: 'primary' | 'secondary' | 'tertiary'*/
+  /* variant: 'solid' | 'outline' | 'ghost'*/
+  &.primary {
+    &.solid {
+      background: var(--button-primary-bg);
+      color: var(--button-primary-color);
+      border-color: var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg-hover);
+        color: var(--button-primary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-primary-bg);
+      border: 1px solid var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+
+    &.ghost,
+    &.link {
+      /* Ghost+link defer to the solid background token so hover states stay in sync across variants. */
+      background: transparent;
+      color: var(--button-primary-bg);
+    }
+
+    &.ghost {
+      /* Ghost uses the solid fill on hover to keep contrast consistent with solid/outline. */
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+
+    &.link {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.secondary {
+    &.solid {
+      background: var(--button-secondary-bg);
+      color: var(--button-secondary-color);
+      border-color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg-hover);
+        color: var(--button-secondary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-secondary-bg);
+      border: 1px solid var(--button-secondary-bg); /* Use button background as border color */
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+
+    &.ghost {
+      /* Ghost aligns to solid background for hover to avoid divergent theming knobs. */
+      background: transparent;
+      color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-secondary-bg);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.tertiary {
+    &.solid {
+      background: var(--button-tertiary-bg);
+      color: var(--button-tertiary-color);
+      border-color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg-hover);
+        color: var(--button-tertiary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+      border: 1px solid var(--button-tertiary-bg); /* Use button background as border color */
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+
+    &.ghost {
+      /* Ghost variant piggybacks on solid tokens so overrides remain centralized. */
+      background: transparent;
+      color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* size: 'small' | 'medium' | 'large' || 'default'*/
+  &.small {
+    padding: var(--button-padding-sm-y) var(--button-padding-sm-x);
+    height: var(--button-height-sm);
+    font-size: var(--button-font-size-sm);
+  }
+
+  &.medium,
+  &.default {
+    padding: var(--button-padding-y) var(--button-padding-x);
+    height: var(--button-height-md);
+  }
+
+  &.large {
+    padding: var(--button-padding-lg-y) var(--button-padding-lg-x);
+    height: var(--button-height-lg);
+    font-size: var(--typography-large-size);
+  }
+
+  /* disabled*/
+  &.disabled {
+    @mixin disabled;
+  }
+}