@adamarant/designsystem 0.11.2

package/src/utilities/interactive.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   Utilities: Interactive
+   Hover states, reveal patterns, focus rings, and cursor utilities.
+   ========================================================================== */
+
+/* --- Hover Row (background elevation on hover) --- */
+.ds-hover-row {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row:hover {
+  background-color: var(--ds-color-surface-hover);
+}
+
+/* Subtle variant (semi-transparent) */
+.ds-hover-row--subtle {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row--subtle:hover {
+  background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
+}
+
+/* --- Group Reveal (children appear on parent hover) — .ds-group-reveal --- */
+.ds-group-reveal {
+  opacity: 0;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover > .ds-group-reveal,
+.group:hover .ds-group-reveal {
+  opacity: 1;
+}
+
+/* --- Editable Cell (pointer + bg on hover) --- */
+.ds-editable {
+  cursor: pointer;
+  border-radius: var(--ds-radius-md);
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-editable:hover {
+  background-color: var(--ds-color-surface-hover);
+}
+
+/* --- Hover Border --- */
+.ds-hover-border {
+  transition: border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-border:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+/* --- Hover Zoom (scale on hover) --- */
+.ds-hover-zoom {
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-zoom:hover {
+  transform: scale(1.05);
+}
+
+/* --- Opacity Hover (dim → full on hover) --- */
+.ds-opacity-hover {
+  opacity: 0.5;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-opacity-hover:hover {
+  opacity: 1;
+}
+
+/* --- Focus Ring (inset ring for custom inputs) --- */
+.ds-focus-ring:focus {
+  border-color: var(--ds-color-border-active);
+  box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
+  outline: none;
+}
+
+/* --- Ring States --- */
+.ds-ring-active {
+  box-shadow: 0 0 0 2px var(--ds-color-border-active);
+}
+
+.ds-ring-selected {
+  box-shadow: 0 0 0 2px var(--ds-color-interactive), 0 0 0 3px var(--ds-color-surface);
+}
+
+/* --- Semi-transparent Backgrounds --- */
+.ds-bg-elevated-50 {
+  background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
+}
+
+.ds-bg-base-50 {
+  background-color: color-mix(in srgb, var(--ds-color-bg) 50%, transparent);
+}
+
+/* --- Hover Color Variants --- */
+.ds-hover-text-error:hover {
+  color: var(--ds-color-error);
+}
+
+.ds-hover-bg-error:hover {
+  background-color: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
+}
+
+/* --- Cursor Utilities --- */
+.ds-cursor-grab {
+  cursor: grab;
+}
+.ds-cursor-grab:active {
+  cursor: grabbing;
+}
+
+/* --- Grip Icon (secondary → primary on group hover) --- */
+.ds-grip {
+  color: var(--ds-color-text-secondary);
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover .ds-grip {
+  color: var(--ds-color-text);
+}
+
+/* --- Backdrop Blur (extended) --- */
+.ds-backdrop-blur-lg  { backdrop-filter: blur(16px); }
+.ds-backdrop-blur-xl  { backdrop-filter: blur(24px); }
+.ds-backdrop-blur-2xl { backdrop-filter: blur(40px); }

package/src/utilities/layout.css

@@ -0,0 +1,273 @@
+/* ==========================================================================
+   Utilities: Layout
+   Container with clamp padding, generous responsive grid.
+   ========================================================================== */
+
+/* --- Container --- */
+.ds-container {
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+  padding-inline: var(--ds-container-padding);
+}
+
+/* --- Section (generous vertical rhythm) --- */
+.ds-section {
+  padding-block: var(--ds-section-padding);
+}
+
+/* --- Flex --- */
+.ds-flex       { display: flex; }
+.ds-inline-flex { display: inline-flex; }
+.ds-flex-col   { flex-direction: column; }
+.ds-flex-row   { flex-direction: row; }
+.ds-flex-wrap  { flex-wrap: wrap; }
+.ds-flex-1     { flex: 1 1 0%; }
+.ds-flex-auto  { flex: 1 1 auto; }
+.ds-flex-none  { flex: none; }
+.ds-shrink-0   { flex-shrink: 0; }
+
+/* --- Alignment --- */
+.ds-items-start    { align-items: flex-start; }
+.ds-items-center   { align-items: center; }
+.ds-items-end      { align-items: flex-end; }
+.ds-items-stretch  { align-items: stretch; }
+.ds-items-baseline { align-items: baseline; }
+
+.ds-justify-start   { justify-content: flex-start; }
+.ds-justify-center  { justify-content: center; }
+.ds-justify-end     { justify-content: flex-end; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-around  { justify-content: space-around; }
+.ds-justify-evenly  { justify-content: space-evenly; }
+
+.ds-self-start  { align-self: flex-start; }
+.ds-self-center { align-self: center; }
+.ds-self-end    { align-self: flex-end; }
+
+/* --- Grid --- */
+.ds-grid {
+  display: grid;
+  gap: var(--ds-space-6);
+}
+
+.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* --- Column Span --- */
+.ds-col-span-1 { grid-column: span 1 / span 1; }
+.ds-col-span-2 { grid-column: span 2 / span 2; }
+.ds-col-span-3 { grid-column: span 3 / span 3; }
+.ds-col-span-4 { grid-column: span 4 / span 4; }
+.ds-col-span-full { grid-column: 1 / -1; }
+
+@media (min-width: 640px) {
+  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-md\:col-span-1  { grid-column: span 1 / span 1; }
+  .ds-md\:col-span-2  { grid-column: span 2 / span 2; }
+  .ds-md\:col-span-3  { grid-column: span 3 / span 3; }
+  .ds-md\:flex-row { flex-direction: row; }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-lg\:col-span-1  { grid-column: span 1 / span 1; }
+  .ds-lg\:col-span-2  { grid-column: span 2 / span 2; }
+  .ds-lg\:col-span-3  { grid-column: span 3 / span 3; }
+}
+
+/* --- Gap --- */
+.ds-gap-0  { gap: var(--ds-space-0); }
+.ds-gap-1  { gap: var(--ds-space-1); }
+.ds-gap-2  { gap: var(--ds-space-2); }
+.ds-gap-3  { gap: var(--ds-space-3); }
+.ds-gap-4  { gap: var(--ds-space-4); }
+.ds-gap-5  { gap: var(--ds-space-5); }
+.ds-gap-6  { gap: var(--ds-space-6); }
+.ds-gap-8  { gap: var(--ds-space-8); }
+.ds-gap-10 { gap: var(--ds-space-10); }
+.ds-gap-12 { gap: var(--ds-space-12); }
+.ds-gap-16 { gap: var(--ds-space-16); }
+.ds-gap-20 { gap: var(--ds-space-20); }
+
+/* --- Display --- */
+.ds-block        { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline       { display: inline; }
+.ds-hidden       { display: none; }
+
+@media (min-width: 768px) {
+  .ds-md\:hidden { display: none; }
+  .ds-md\:block  { display: block; }
+  .ds-md\:flex   { display: flex; }
+}
+
+/* --- Position --- */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed    { position: fixed; }
+.ds-sticky   { position: sticky; inset-block-start: 0; }
+
+/* --- Overflow --- */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto   { overflow: auto; }
+.ds-overflow-x-auto { overflow-x: auto; }
+
+/* --- Width/Height --- */
+.ds-w-full    { width: 100%; }
+.ds-h-full    { height: 100%; }
+.ds-h-screen  { height: 100dvh; }
+.ds-min-h-screen { min-height: 100dvh; }
+
+/* --- Stack (vertical spacing) ---
+   :where() lowers specificity so ds-mt-* can override individual children. */
+:where(.ds-stack) > * + * {
+  margin-block-start: var(--ds-space-4);
+}
+
+:where(.ds-stack--sm) > * + *  { margin-block-start: var(--ds-space-2); }
+:where(.ds-stack--lg) > * + *  { margin-block-start: var(--ds-space-8); }
+:where(.ds-stack--xl) > * + *  { margin-block-start: var(--ds-space-12); }
+:where(.ds-stack--2xl) > * + * { margin-block-start: var(--ds-space-16); }
+:where(.ds-stack--3xl) > * + * { margin-block-start: var(--ds-space-24); }
+
+/* --- Center content --- */
+.ds-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Fixed Sizing --- */
+.ds-w-0\.5 { width: var(--ds-space-0-5); }
+.ds-w-2\.5 { width: var(--ds-space-2-5); }
+.ds-w-3   { width: var(--ds-space-3); }
+.ds-w-4   { width: var(--ds-space-4); }
+.ds-w-5   { width: var(--ds-space-5); }
+.ds-w-8   { width: var(--ds-space-8); }
+.ds-w-9   { width: 2.25rem; }
+.ds-w-10  { width: var(--ds-space-10); }
+
+.ds-h-2\.5 { height: var(--ds-space-2-5); }
+.ds-h-3   { height: var(--ds-space-3); }
+.ds-h-4   { height: var(--ds-space-4); }
+.ds-h-5   { height: var(--ds-space-5); }
+.ds-h-8   { height: var(--ds-space-8); }
+.ds-h-9   { height: 2.25rem; }
+.ds-h-10  { height: var(--ds-space-10); }
+.ds-h-11  { height: 2.75rem; }
+.ds-h-16  { height: var(--ds-space-16); }
+
+.ds-min-h-svh { min-height: 100svh; }
+
+/* --- Max Width --- */
+.ds-max-w-xs   { max-width: 20rem; }
+.ds-max-w-sm   { max-width: 24rem; }
+.ds-max-w-md   { max-width: 28rem; }
+.ds-max-w-lg   { max-width: 32rem; }
+.ds-max-w-xl   { max-width: 36rem; }
+.ds-max-w-2xl  { max-width: 42rem; }
+.ds-max-w-3xl  { max-width: 48rem; }
+.ds-max-w-none { max-width: none; }
+
+/* --- Min Width --- */
+.ds-min-w-0 { min-width: 0; }
+
+/* --- Z-Index --- */
+.ds-z-0   { z-index: var(--ds-z-base); }
+.ds-z-10  { z-index: 10; }
+.ds-z-40  { z-index: 40; }
+.ds-z-50  { z-index: var(--ds-z-dropdown); }
+.ds-z-60  { z-index: var(--ds-z-sticky); }
+
+/* --- Inset / Position Values --- */
+.ds-inset-0    { inset: 0; }
+.ds-inset-x-0  { inset-inline-start: 0; inset-inline-end: 0; }
+.ds-inset-y-0  { inset-block-start: 0; inset-block-end: 0; }
+.ds-top-0      { inset-block-start: 0; }
+.ds-top-full   { inset-block-start: 100%; }
+.ds-right-0    { inset-inline-end: 0; }
+.ds-bottom-0   { inset-block-end: 0; }
+.ds-bottom-full { inset-block-end: 100%; }
+.ds-left-0     { inset-inline-start: 0; }
+.ds-top-2    { inset-block-start: var(--ds-space-2); }
+.ds-right-2  { inset-inline-end: var(--ds-space-2); }
+.ds-left-2   { inset-inline-start: var(--ds-space-2); }
+.ds-top-3    { inset-block-start: var(--ds-space-3); }
+.ds-right-3  { inset-inline-end: var(--ds-space-3); }
+.ds-left-3   { inset-inline-start: var(--ds-space-3); }
+.ds-top-1\/2 { inset-block-start: 50%; }
+.ds-left-1\/2 { inset-inline-start: 50%; }
+
+/* --- Object Fit --- */
+.ds-object-cover   { object-fit: cover; }
+.ds-object-contain { object-fit: contain; }
+
+/* --- Overflow (extended) --- */
+.ds-overflow-y-auto { overflow-y: auto; }
+
+/* --- Responsive: Display --- */
+@media (min-width: 640px) {
+  .ds-sm\:hidden     { display: none; }
+  .ds-sm\:block      { display: block; }
+  .ds-sm\:flex       { display: flex; }
+  .ds-sm\:flex-row   { flex-direction: row; }
+  .ds-sm\:table-cell { display: table-cell; }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:hidden { display: none; }
+  .ds-lg\:block  { display: block; }
+  .ds-lg\:flex   { display: flex; }
+}
+
+/* --- Responsive: Grid (extended) --- */
+@media (min-width: 640px) {
+  .ds-sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+}
+
+@media (min-width: 1280px) {
+  .ds-xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
+}
+
+/* --- Responsive: Flex (extended) --- */
+@media (min-width: 640px) {
+  .ds-sm\:flex-none       { flex: none; }
+  .ds-sm\:items-center    { align-items: center; }
+  .ds-sm\:justify-between { justify-content: space-between; }
+  .ds-sm\:gap-4           { gap: var(--ds-space-4); }
+  .ds-sm\:gap-8           { gap: var(--ds-space-8); }
+  .ds-sm\:inline          { display: inline; }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:flex-row { flex-direction: row; }
+  .ds-lg\:gap-4    { gap: var(--ds-space-4); }
+  .ds-lg\:gap-6    { gap: var(--ds-space-6); }
+  .ds-lg\:gap-8    { gap: var(--ds-space-8); }
+}
+
+/* --- Aspect Ratio --- */
+.ds-aspect-square { aspect-ratio: 1; }
+.ds-aspect-video  { aspect-ratio: 16/9; }
+.ds-aspect-card   { aspect-ratio: 16/10; }

package/src/utilities/sizing.css

@@ -0,0 +1,85 @@
+/* ==========================================================================
+   Utilities: Sizing
+   Width, height, min/max constraints.
+   Extends the base sizing in layout.css with the full spacing scale.
+   ========================================================================== */
+
+/* --- Width (values not already in layout.css) --- */
+.ds-w-0    { width: var(--ds-space-0); }
+.ds-w-1    { width: var(--ds-space-1); }
+.ds-w-1\.5 { width: var(--ds-space-1-5); }
+.ds-w-2    { width: var(--ds-space-2); }
+.ds-w-3\.5 { width: 0.875rem; }
+.ds-w-6    { width: var(--ds-space-6); }
+.ds-w-12   { width: var(--ds-space-12); }
+.ds-w-16   { width: var(--ds-space-16); }
+.ds-w-20   { width: var(--ds-space-20); }
+.ds-w-24   { width: var(--ds-space-24); }
+.ds-w-28   { width: 7rem; }
+.ds-w-32   { width: var(--ds-space-32); }
+.ds-w-48   { width: 12rem; }
+.ds-w-56   { width: 14rem; }
+.ds-w-64   { width: 16rem; }
+.ds-w-80   { width: 20rem; }
+.ds-w-96   { width: 24rem; }
+.ds-w-auto   { width: auto; }
+.ds-w-screen { width: 100vw; }
+
+/* --- Height (values not already in layout.css) --- */
+.ds-h-0    { height: var(--ds-space-0); }
+.ds-h-0\.5 { height: var(--ds-space-0-5); }
+.ds-h-1    { height: var(--ds-space-1); }
+.ds-h-1\.5 { height: var(--ds-space-1-5); }
+.ds-h-2    { height: var(--ds-space-2); }
+.ds-h-3\.5 { height: 0.875rem; }
+.ds-h-6    { height: var(--ds-space-6); }
+.ds-h-12   { height: var(--ds-space-12); }
+.ds-h-14   { height: 3.5rem; }
+.ds-h-20   { height: var(--ds-space-20); }
+.ds-h-24   { height: var(--ds-space-24); }
+.ds-h-28   { height: 7rem; }
+.ds-h-32   { height: var(--ds-space-32); }
+.ds-h-48   { height: 12rem; }
+.ds-h-64   { height: 16rem; }
+.ds-h-96   { height: 24rem; }
+.ds-h-auto { height: auto; }
+.ds-h-px   { height: 1px; }
+
+/* --- Max Width (extended) --- */
+.ds-max-w-4xl  { max-width: 56rem; }
+.ds-max-w-5xl  { max-width: 64rem; }
+.ds-max-w-6xl  { max-width: 72rem; }
+.ds-max-w-7xl  { max-width: 80rem; }
+.ds-max-w-full { max-width: 100%; }
+
+/* --- Max Height --- */
+.ds-max-h-64     { max-height: 16rem; }
+.ds-max-h-80     { max-height: 20rem; }
+.ds-max-h-96     { max-height: 24rem; }
+.ds-max-h-screen { max-height: 100dvh; }
+
+/* --- Responsive: Sizing --- */
+@media (min-width: 640px) {
+  .ds-sm\:w-12   { width: var(--ds-space-12); }
+  .ds-sm\:w-16   { width: var(--ds-space-16); }
+  .ds-sm\:w-32   { width: var(--ds-space-32); }
+  .ds-sm\:w-64   { width: 16rem; }
+  .ds-sm\:w-96   { width: 24rem; }
+  .ds-sm\:w-auto { width: auto; }
+  .ds-sm\:h-12   { height: var(--ds-space-12); }
+  .ds-sm\:h-32   { height: var(--ds-space-32); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:w-auto { width: auto; }
+}
+
+/* --- Decimal sizing --- */
+.ds-w-0\.5  { width: 0.125rem; }
+.ds-w-1\.5  { width: 0.375rem; }
+.ds-w-2\.5  { width: 0.625rem; }
+.ds-w-3\.5  { width: 0.875rem; }
+.ds-h-0\.5  { height: 0.125rem; }
+.ds-h-1\.5  { height: 0.375rem; }
+.ds-h-2\.5  { height: 0.625rem; }
+.ds-h-3\.5  { height: 0.875rem; }

package/src/utilities/spacing.css

@@ -0,0 +1,204 @@
+/* ==========================================================================
+   Utilities: Spacing (margin & padding)
+   Pattern: ds-{m|p}{side}-{size}
+   ========================================================================== */
+
+/* --- Padding --- */
+.ds-p-0  { padding: var(--ds-space-0); }
+.ds-p-1  { padding: var(--ds-space-1); }
+.ds-p-2  { padding: var(--ds-space-2); }
+.ds-p-3  { padding: var(--ds-space-3); }
+.ds-p-4  { padding: var(--ds-space-4); }
+.ds-p-5  { padding: var(--ds-space-5); }
+.ds-p-6  { padding: var(--ds-space-6); }
+.ds-p-8  { padding: var(--ds-space-8); }
+.ds-p-10 { padding: var(--ds-space-10); }
+.ds-p-12 { padding: var(--ds-space-12); }
+
+.ds-px-0  { padding-inline: var(--ds-space-0); }
+.ds-px-2  { padding-inline: var(--ds-space-2); }
+.ds-px-3  { padding-inline: var(--ds-space-3); }
+.ds-px-4  { padding-inline: var(--ds-space-4); }
+.ds-px-5  { padding-inline: var(--ds-space-5); }
+.ds-px-6  { padding-inline: var(--ds-space-6); }
+.ds-px-8  { padding-inline: var(--ds-space-8); }
+
+.ds-py-0  { padding-block: var(--ds-space-0); }
+.ds-py-2  { padding-block: var(--ds-space-2); }
+.ds-py-3  { padding-block: var(--ds-space-3); }
+.ds-py-4  { padding-block: var(--ds-space-4); }
+.ds-py-5  { padding-block: var(--ds-space-5); }
+.ds-py-6  { padding-block: var(--ds-space-6); }
+.ds-py-8  { padding-block: var(--ds-space-8); }
+.ds-py-10 { padding-block: var(--ds-space-10); }
+.ds-py-12 { padding-block: var(--ds-space-12); }
+.ds-py-16 { padding-block: var(--ds-space-16); }
+.ds-py-20 { padding-block: var(--ds-space-20); }
+.ds-py-24 { padding-block: var(--ds-space-24); }
+
+.ds-pt-2  { padding-block-start: var(--ds-space-2); }
+.ds-pt-4  { padding-block-start: var(--ds-space-4); }
+.ds-pt-6  { padding-block-start: var(--ds-space-6); }
+.ds-pt-8  { padding-block-start: var(--ds-space-8); }
+.ds-pt-12 { padding-block-start: var(--ds-space-12); }
+.ds-pt-16 { padding-block-start: var(--ds-space-16); }
+
+.ds-pb-4  { padding-block-end: var(--ds-space-4); }
+.ds-pb-8  { padding-block-end: var(--ds-space-8); }
+
+/* --- Margin --- */
+.ds-m-0    { margin: var(--ds-space-0); }
+.ds-m-auto { margin: auto; }
+
+.ds-mx-auto { margin-inline: auto; }
+.ds-mx-2   { margin-inline: var(--ds-space-2); }
+.ds-mx-4   { margin-inline: var(--ds-space-4); }
+
+.ds-my-0  { margin-block: var(--ds-space-0); }
+.ds-my-2  { margin-block: var(--ds-space-2); }
+.ds-my-4  { margin-block: var(--ds-space-4); }
+.ds-my-6  { margin-block: var(--ds-space-6); }
+.ds-my-8  { margin-block: var(--ds-space-8); }
+
+.ds-mt-0  { margin-block-start: var(--ds-space-0); }
+.ds-mt-1  { margin-block-start: var(--ds-space-1); }
+.ds-mt-2  { margin-block-start: var(--ds-space-2); }
+.ds-mt-4  { margin-block-start: var(--ds-space-4); }
+.ds-mt-6  { margin-block-start: var(--ds-space-6); }
+.ds-mt-8  { margin-block-start: var(--ds-space-8); }
+
+.ds-mb-0  { margin-block-end: var(--ds-space-0); }
+.ds-mb-1  { margin-block-end: var(--ds-space-1); }
+.ds-mb-2  { margin-block-end: var(--ds-space-2); }
+.ds-mb-4  { margin-block-end: var(--ds-space-4); }
+.ds-mb-6  { margin-block-end: var(--ds-space-6); }
+.ds-mb-8  { margin-block-end: var(--ds-space-8); }
+
+.ds-mt-auto { margin-block-start: auto; }
+.ds-mb-auto { margin-block-end: auto; }
+.ds-ml-auto { margin-inline-start: auto; }
+.ds-mr-auto { margin-inline-end: auto; }
+.ds-ml-2    { margin-inline-start: var(--ds-space-2); }
+.ds-ml-4    { margin-inline-start: var(--ds-space-4); }
+.ds-mr-2    { margin-inline-end: var(--ds-space-2); }
+.ds-mr-4    { margin-inline-end: var(--ds-space-4); }
+
+.ds-mt-0\.5 { margin-block-start: var(--ds-space-0-5); }
+.ds-mt-3    { margin-block-start: var(--ds-space-3); }
+.ds-mt-10   { margin-block-start: var(--ds-space-10); }
+.ds-mt-12   { margin-block-start: var(--ds-space-12); }
+.ds-mt-16   { margin-block-start: var(--ds-space-16); }
+.ds-mb-0\.5 { margin-block-end: var(--ds-space-0-5); }
+.ds-mb-3    { margin-block-end: var(--ds-space-3); }
+.ds-mb-10   { margin-block-end: var(--ds-space-10); }
+.ds-mb-12   { margin-block-end: var(--ds-space-12); }
+.ds-mb-16   { margin-block-end: var(--ds-space-16); }
+.ds-mb-20   { margin-block-end: var(--ds-space-20); }
+
+/* --- Padding (granular) --- */
+.ds-p-0\.5 { padding: var(--ds-space-0-5); }
+.ds-p-1\.5 { padding: var(--ds-space-1-5); }
+
+.ds-px-1   { padding-inline: var(--ds-space-1); }
+.ds-px-1\.5 { padding-inline: var(--ds-space-1-5); }
+
+.ds-py-0\.5 { padding-block: var(--ds-space-0-5); }
+.ds-py-1    { padding-block: var(--ds-space-1); }
+.ds-py-1\.5 { padding-block: var(--ds-space-1-5); }
+
+.ds-pb-2   { padding-block-end: var(--ds-space-2); }
+.ds-pb-6   { padding-block-end: var(--ds-space-6); }
+
+.ds-pl-2   { padding-inline-start: var(--ds-space-2); }
+.ds-pl-3   { padding-inline-start: var(--ds-space-3); }
+.ds-pl-4   { padding-inline-start: var(--ds-space-4); }
+.ds-pr-2   { padding-inline-end: var(--ds-space-2); }
+.ds-pr-3   { padding-inline-end: var(--ds-space-3); }
+.ds-pr-4   { padding-inline-end: var(--ds-space-4); }
+.ds-pr-7   { padding-inline-end: 1.75rem; }
+.ds-pr-10  { padding-inline-end: var(--ds-space-10); }
+
+/* --- Gap (fractional) --- */
+.ds-gap-0\.5 { gap: var(--ds-space-0-5); }
+.ds-gap-1\.5 { gap: var(--ds-space-1-5); }
+
+/* --- Space-Y (owl selector) --- */
+.ds-space-y-1 > * + * { margin-block-start: var(--ds-space-1); }
+.ds-space-y-2 > * + * { margin-block-start: var(--ds-space-2); }
+.ds-space-y-3 > * + * { margin-block-start: var(--ds-space-3); }
+.ds-space-y-4 > * + * { margin-block-start: var(--ds-space-4); }
+.ds-space-y-6 > * + * { margin-block-start: var(--ds-space-6); }
+.ds-space-y-8 > * + * { margin-block-start: var(--ds-space-8); }
+
+/* --- Space-Y (fractional) --- */
+.ds-space-y-1\.5 > * + * { margin-block-start: var(--ds-space-1-5); }
+
+/* --- Responsive: Padding --- */
+@media (min-width: 640px) {
+  .ds-sm\:p-6   { padding: var(--ds-space-6); }
+  .ds-sm\:px-0  { padding-inline: var(--ds-space-0); }
+  .ds-sm\:px-3  { padding-inline: var(--ds-space-3); }
+  .ds-sm\:px-4  { padding-inline: var(--ds-space-4); }
+  .ds-sm\:px-6  { padding-inline: var(--ds-space-6); }
+  .ds-sm\:py-3  { padding-block: var(--ds-space-3); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:px-4 { padding-inline: var(--ds-space-4); }
+  .ds-md\:px-6 { padding-inline: var(--ds-space-6); }
+  .ds-md\:px-8 { padding-inline: var(--ds-space-8); }
+  .ds-md\:py-8  { padding-block: var(--ds-space-8); }
+  .ds-md\:py-12 { padding-block: var(--ds-space-12); }
+  .ds-md\:py-16 { padding-block: var(--ds-space-16); }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-lg\:px-6 { padding-inline: var(--ds-space-6); }
+  .ds-lg\:px-8 { padding-inline: var(--ds-space-8); }
+  .ds-lg\:py-16 { padding-block: var(--ds-space-16); }
+  .ds-lg\:py-20 { padding-block: var(--ds-space-20); }
+  .ds-lg\:py-24 { padding-block: var(--ds-space-24); }
+}
+
+/* --- Space-X (horizontal gap between children) --- */
+.ds-space-x-1 > * + * { margin-inline-start: var(--ds-space-1); }
+.ds-space-x-2 > * + * { margin-inline-start: var(--ds-space-2); }
+.ds-space-x-3 > * + * { margin-inline-start: var(--ds-space-3); }
+.ds-space-x-4 > * + * { margin-inline-start: var(--ds-space-4); }
+
+/* --- Decimal spacing (0.5 = 0.125rem, 1.5 = 0.375rem, 2.5 = 0.625rem) --- */
+.ds-gap-0\.5  { gap: 0.125rem; }
+.ds-gap-1\.5  { gap: 0.375rem; }
+.ds-gap-2\.5  { gap: 0.625rem; }
+.ds-p-0\.5    { padding: 0.125rem; }
+.ds-p-1\.5    { padding: 0.375rem; }
+.ds-px-0\.5   { padding-inline: 0.125rem; }
+.ds-px-1\.5   { padding-inline: 0.375rem; }
+.ds-py-0\.5   { padding-inline: 0.125rem; }
+.ds-py-1\.5   { padding-block: 0.375rem; }
+.ds-mt-0\.5   { margin-block-start: 0.125rem; }
+.ds-mb-0\.5   { margin-block-end: 0.125rem; }
+.ds-space-y-0\.5 > * + * { margin-block-start: 0.125rem; }
+.ds-space-y-1\.5 > * + * { margin-block-start: 0.375rem; }
+.ds-space-x-0\.5 > * + * { margin-inline-start: 0.125rem; }
+.ds-space-x-1\.5 > * + * { margin-inline-start: 0.375rem; }
+
+/* --- Responsive: md (768px) — all-sides padding --- */
+@media (min-width: 768px) {
+  .ds-md\:p-2  { padding: var(--ds-space-2); }
+  .ds-md\:p-3  { padding: var(--ds-space-3); }
+  .ds-md\:p-4  { padding: var(--ds-space-4); }
+  .ds-md\:p-5  { padding: var(--ds-space-5); }
+  .ds-md\:p-6  { padding: var(--ds-space-6); }
+  .ds-md\:p-8  { padding: var(--ds-space-8); }
+  .ds-md\:p-10 { padding: var(--ds-space-10); }
+  .ds-md\:p-12 { padding: var(--ds-space-12); }
+}
+
+/* --- Responsive: lg (1024px) — all-sides padding --- */
+@media (min-width: 1024px) {
+  .ds-lg\:p-6  { padding: var(--ds-space-6); }
+  .ds-lg\:p-8  { padding: var(--ds-space-8); }
+  .ds-lg\:p-10 { padding: var(--ds-space-10); }
+  .ds-lg\:p-12 { padding: var(--ds-space-12); }
+}