margo-ui 3.0.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/blockquote/style.ts

@@ -1 +1 @@
-export const blockquoteBaseClassName = "border-l-2 border-primary-darken py-0.5 pl-4";
+export const blockquoteBaseClassName = "border-l-margo border-primary-darken py-0.5 pl-4";

package/src/components/button/style.ts

@@ -1,4 +1,4 @@
-export const buttonBaseClassName = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-lg border-2 text-on-main
+export const buttonBaseClassName = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-margo-1 border-margo text-on-main
 hover:border-on-main hover:text-on-main focus-visible:border-primary
 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main
 select-none origin-center transition-transform duration-[160ms] ease-out active:scale-[0.95] bg-main`;

package/src/components/card/style.ts

@@ -1,4 +1,4 @@
-export const cardBaseClassName = "rounded-lg border-2 border-border bg-main p-5 text-on-main shadow-card";
+export const cardBaseClassName = "rounded-margo-1 border-margo border-border bg-main p-5 text-on-main shadow-card";
 
 export const cardFocusClassName = `focus:border-primary focus-visible:outline focus-visible:outline-offset-1
 focus-visible:outline-on-main`;

package/src/components/checkbox/style.ts

@@ -1,5 +1,5 @@
-export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-md border-2 border-border
+export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-margo-3/4 border-margo border-border
 bg-main p-1 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
 focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary indeterminate:border-primary
-select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.95] disabled:cursor-auto
+select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.92] disabled:cursor-auto
 disabled:opacity-40`;

package/src/components/chip/style.ts

@@ -1,5 +1,5 @@
 export const chipBaseClassName = `bg-on-main/8 margo-text-box-trim flex items-center justify-center px-3 py-0.5
-whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc shadow-chip
+whitespace-nowrap lowercase flex-none leading-none rounded-margo-3/4 text-mc shadow-chip
 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
 
 export const chipActiveClassName = "bg-on-main text-main";

package/src/components/code/style.ts

@@ -1,3 +1,3 @@
 export const codeBaseClassName = "font-mono text-xs text-medium";
 
-export const codeFilledClassName = "rounded-sm bg-neutral/60 px-1 py-0.5 text-on-main/90";
+export const codeFilledClassName = "rounded-margo-1/2 bg-neutral/60 px-1 py-0.5 text-on-main/90";

package/src/components/dialog/style.ts

@@ -1,6 +1,6 @@
 export const dialogBaseClassName = `flex m-4 max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] flex-col overflow-hidden
-rounded-lg border-2 border-border bg-main text-on-main shadow-sm`;
+rounded-margo-1 border-margo border-border bg-main text-on-main shadow-sm`;
 
 export const dialogBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
 
-export const dialogFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";
+export const dialogFooterClassName = "flex items-center justify-end gap-2 border-t-margo border-border px-5 py-4";

package/src/components/input/style.ts

@@ -1,13 +1,15 @@
-export const inputBaseClassName = `group/input flex w-full cursor-text items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
-text-sm select-none min-h-[2.5rem] bg-low
+export const inputBaseClassName = `group/input flex h-10 w-full cursor-text items-center rounded-margo-1 border-margo text-on-main
+text-sm select-none bg-low
 border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
 has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-auto has-[input:disabled]:opacity-40`;
 
 export const inputActiveClassName = "border-primary";
 
-export const inputIconClassName = `ml-auto flex size-4 flex-none shrink-0 items-center justify-center first:ml-0
+export const inputIconClassName = `ml-auto flex h-full w-8 flex-none shrink-0 items-center justify-center pr-3 pl-1
+first:ml-0 first:pr-1 first:pl-3
 [[data-margo-input-slot]+&]:ml-0`;
 
-export const inputTextClassName = `min-w-0 flex-1 truncate border-none bg-transparent text-left text-on-main outline-none
-placeholder:text-medium disabled:cursor-auto`;
+export const inputTextClassName = `h-full min-w-0 flex-1 truncate border-none bg-transparent px-3 text-left text-on-main
+outline-none placeholder:text-medium disabled:cursor-auto
+[[data-margo-input-slot]+&]:pl-0 [&:has(+[data-margo-input-slot])]:pr-0`;

package/src/components/item/style.ts

@@ -1,4 +1,4 @@
-export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
+export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-margo-1 border-margo px-3 py-2 text-on-main
 text-sm focus-visible:border-primary focus-visible:outline select-none
 focus-visible:outline-offset-1 min-h-[2.5rem] hover:border-on-main focus-visible:outline-on-main
 origin-center bg-low transition-transform duration-[160ms] ease-out active:scale-[0.98]`;

package/src/components/popover/style.ts

@@ -3,7 +3,7 @@ import type { PopoverAlign, PopoverPosition } from "./type.js";
 export const popoverAnchorClassName = "relative inline-block size-fit";
 
 export const popoverBaseClassName = `margo-popover absolute z-20 m-0 flex w-max max-w-[calc(100vw-2rem)] flex-col
-overflow-clip rounded-lg border-2 border-border bg-main text-on-main shadow-card outline-none`;
+overflow-clip rounded-margo-1 border-margo border-border bg-main text-on-main shadow-card outline-none`;
 
 export const popoverBodyClassName = `flex min-h-0 max-h-56 flex-col gap-1
 overflow-y-auto overscroll-contain w-64 p-2 text-sm`;

package/src/components/select/style.ts

@@ -1,15 +1,15 @@
-export const selectBaseClassName = `group/select relative flex min-h-[2.5rem] w-full items-center gap-1 rounded-lg
-border-2 border-transparent bg-low text-sm text-medium select-none
+export const selectBaseClassName = `group/select relative flex h-10 w-full items-center rounded-margo-1
+border-margo border-transparent bg-low text-sm text-medium select-none
 hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
 has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-40`;
 
 export const selectActiveClassName = "border-primary";
 
-export const selectControlClassName = `min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-lg
-bg-transparent px-3 py-2 text-left text-on-main outline-none disabled:cursor-auto
+export const selectControlClassName = `h-full min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-margo-1
+bg-transparent pl-3 text-left text-on-main outline-none disabled:cursor-auto
 has-[option[value='']:checked]:text-medium
 [&>option]:bg-main [&>option]:text-on-main
 [&>option:checked]:bg-primary-darken [&>option:checked]:text-on-main`;
 
-export const selectIconClassName = "pointer-events-none mr-3 flex size-4 flex-none items-center justify-center";
+export const selectIconClassName = `pointer-events-none flex h-full w-8 flex-none items-center justify-center pr-3 pl-1`;

package/src/components/sheet/style.ts

@@ -3,12 +3,12 @@ import type { SheetSide } from "./type.js";
 export const sheetBaseClassName = "margo-sheet flex flex-col overflow-hidden border-border bg-main text-on-main";
 
 export const sheetSideClassName: Record<SheetSide, string> = {
-  start: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-2",
-  end: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-2",
-  top: "h-auto max-h-[40%] w-full self-start justify-self-stretch border-b-2",
-  bottom: "h-auto max-h-[40%] w-full self-end justify-self-stretch border-t-2",
+  start: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-margo",
+  end: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-margo",
+  top: "h-auto max-h-[40%] w-full self-start justify-self-stretch border-b-margo",
+  bottom: "h-auto max-h-[40%] w-full self-end justify-self-stretch border-t-margo",
 };
 
 export const sheetBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
 
-export const sheetFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";
+export const sheetFooterClassName = "flex items-center justify-end gap-2 border-t-margo border-border px-5 py-4";

package/src/components/table/style.ts

@@ -1,12 +1,12 @@
-export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none rounded-lg border-2 border-border";
+export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none rounded-margo-1 border-margo border-border";
 
 export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
 
-export const tableHeadClassName = "border-b-2 border-border bg-low text-left";
+export const tableHeadClassName = "border-b-margo border-border bg-low text-left";
 
 export const tableBodyClassName = "align-top";
 
-export const tableRowClassName = "border-b-2 border-border last:border-b-0";
+export const tableRowClassName = "border-b-margo border-border last:border-b-0";
 
 export const tableHeadCellClassName = "px-3 py-2 font-medium whitespace-nowrap";
 

package/src/components/toggle/style.ts

@@ -1,4 +1,4 @@
-export const toggleBaseClassName = `margo-toggle h-5 w-9 flex-none cursor-pointer rounded-full border-2 border-border
+export const toggleBaseClassName = `margo-toggle h-5 w-9 flex-none cursor-pointer rounded-full border-margo border-border
 bg-main p-0.5 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
 focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary select-none origin-center
-transition-transform duration-[160ms] ease-out active:scale-[0.98] disabled:cursor-auto disabled:opacity-40`;
+transition-transform duration-[160ms] ease-out active:scale-[0.92] disabled:cursor-auto disabled:opacity-40`;

package/src/components/toggle/toggle.css

@@ -2,7 +2,6 @@
   appearance: none;
 }
 
-/* the thumb travels the track's width minus its height: borders and padding cancel out on both axes */
 .margo-toggle::before {
   content: "";
   display: block;

package/src/components/tooltip/style.ts

@@ -2,7 +2,7 @@ import type { TooltipPosition } from "./type.js";
 
 export const tooltipAnchorClassName = "group relative inline-block size-fit";
 
-export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-sm bg-on-main px-2 py-0.5 text-xs text-main lowercase
+export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-margo-1/2 bg-on-main px-2 py-0.5 text-xs text-main lowercase
 whitespace-nowrap opacity-0`;
 
 export const tooltipTransitionClassName = "transition-opacity duration-[250ms] ease-in-out";

package/src/css/theme.css

@@ -39,8 +39,13 @@
   --z-index-layer: var(--margo-layer-z-index);
   --z-index-max: var(--margo-max-z-index);
 
+  /* Radii */
+  --radius-margo-1: var(--margo-radius);
+  --radius-margo-3\/4: calc(var(--margo-radius) * 3 / 4);
+  --radius-margo-1\/2: calc(var(--margo-radius) / 2);
+
   /* Border widths */
-  --border-width-2: var(--margo-border-width-2);
+  --border-width-margo: var(--margo-border);
 
   /* Font weights */
   --font-weight-thin: var(--margo-font-weight-thin);

package/src/css/variables.css

@@ -29,7 +29,9 @@
   --margo-font-weight-extrabold: 800;
   --margo-font-weight-black: 900;
 
-  --margo-border-width-2: 1.5px;
+  --margo-radius: 0.5rem;
+
+  --margo-border: 1.5px;
 
   --margo-layer-duration: 750ms;
   --margo-layer-easing: cubic-bezier(0.32, 0.72, 0, 1);

package/src/hoc/border_glow/border_glow.css

@@ -19,9 +19,9 @@
 }
 
 .margo-border-glow--ring::before {
-  inset: calc(-1 * var(--border-width-2));
+  inset: calc(-1 * var(--margo-border));
   border-radius: inherit;
-  padding: var(--border-width-2);
+  padding: var(--margo-border);
   mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
@@ -30,21 +30,21 @@
 }
 
 .margo-border-glow--edge-top::before {
-  inset: calc(-1 * var(--border-width-2)) 0 auto 0;
-  height: var(--border-width-2);
+  inset: calc(-1 * var(--margo-border)) 0 auto 0;
+  height: var(--margo-border);
 }
 
 .margo-border-glow--edge-bottom::before {
-  inset: auto 0 calc(-1 * var(--border-width-2)) 0;
-  height: var(--border-width-2);
+  inset: auto 0 calc(-1 * var(--margo-border)) 0;
+  height: var(--margo-border);
 }
 
 .margo-border-glow--edge-left::before {
-  inset: 0 auto 0 calc(-1 * var(--border-width-2));
-  width: var(--border-width-2);
+  inset: 0 auto 0 calc(-1 * var(--margo-border));
+  width: var(--margo-border);
 }
 
 .margo-border-glow--edge-right::before {
-  inset: 0 calc(-1 * var(--border-width-2)) 0 auto;
-  width: var(--border-width-2);
+  inset: 0 calc(-1 * var(--margo-border)) 0 auto;
+  width: var(--margo-border);
 }

package/src/utils/cn/cn.ts

@@ -7,6 +7,25 @@ const isNumber = (value: string) => /^\d+$/.test(value);
 
 const isColumnLine = (value: string) => value === "full" || value === "content" || isNumber(value);
 
+const isMargoStep = (value: string) => /^margo-\d+(\/\d+)?$/.test(value);
+
+const BORDER_SIDES = ["", "x", "y", "s", "e", "t", "r", "b", "l"] as const;
+const RADIUS_CORNERS = ["", "s", "e", "t", "r", "b", "l", "ss", "se", "ee", "es", "tl", "tr", "br", "bl"] as const;
+
+const borderWidthGroups = Object.fromEntries(
+  BORDER_SIDES.map((side) => [
+    side ? `border-w-${side}` : "border-w",
+    [{ [side ? `border-${side}` : "border"]: ["margo"] }],
+  ]),
+);
+
+const radiusGroups = Object.fromEntries(
+  RADIUS_CORNERS.map((corner) => [
+    corner ? `rounded-${corner}` : "rounded",
+    [{ [corner ? `rounded-${corner}` : "rounded"]: [isMargoStep] }],
+  ]),
+);
+
 type MargoClassGroupIds =
   | "margo-col"
   | "margo-col-start"
@@ -24,6 +43,8 @@ const twMerge = extendTailwindMerge<MargoClassGroupIds>({
   extend: {
     classGroups: {
       "font-size": ["text-mc"],
+      ...borderWidthGroups,
+      ...radiusGroups,
       "margo-col": [{ "margo-col": [isColumnLine] }],
       "margo-col-start": [{ "margo-col-start": [isColumnLine] }],
       "margo-col-end": [{ "margo-col-end": [isColumnLine] }],