@thatch-health/slab-tokens 0.0.3 → 0.0.5

package/dist/app-tokens-raw/spacing.tokens.json

@@ -3,9 +3,10 @@
     "control": {
       "$type": "dimension",
       "$value": {
-        "value": 4,
+        "value": 8,
         "unit": "px"
       },
+      "$description": "Corner radius for standalone interactive controls like buttons and inputs. Do not use on containers that wrap controls — use the scale-matched radius token instead. Tailwind: rounded-control | CSS: --slab-radius-control",
       "$extensions": {
         "com.figma.variableId": "VariableID:129:243",
         "com.figma.scopes": [
@@ -20,9 +21,10 @@
     "sm": {
       "$type": "dimension",
       "$value": {
-        "value": 8,
+        "value": 12,
         "unit": "px"
       },
+      "$description": "Corner radius for containers. Always pair with inset/square/sm on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-sm | CSS: --slab-radius-sm",
       "$extensions": {
         "com.figma.variableId": "VariableID:129:244",
         "com.figma.scopes": [
@@ -37,9 +39,10 @@
     "md": {
       "$type": "dimension",
       "$value": {
-        "value": 12,
+        "value": 16,
         "unit": "px"
       },
+      "$description": "Corner radius for containers. Always pair with inset/square/md on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-md | CSS: --slab-radius-md",
       "$extensions": {
         "com.figma.variableId": "VariableID:129:245",
         "com.figma.scopes": [
@@ -54,9 +57,10 @@
     "lg": {
       "$type": "dimension",
       "$value": {
-        "value": 20,
+        "value": 24,
         "unit": "px"
       },
+      "$description": "Corner radius for containers. Always pair with inset/square/lg on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-lg | CSS: --slab-radius-lg",
       "$extensions": {
         "com.figma.variableId": "VariableID:129:246",
         "com.figma.scopes": [
@@ -71,9 +75,10 @@
     "xl": {
       "$type": "dimension",
       "$value": {
-        "value": 28,
+        "value": 32,
         "unit": "px"
       },
+      "$description": "Corner radius for containers. Always pair with inset/square/xl on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-xl | CSS: --slab-radius-xl",
       "$extensions": {
         "com.figma.variableId": "VariableID:130:247",
         "com.figma.scopes": [
@@ -91,6 +96,7 @@
         "value": 99999,
         "unit": "px"
       },
+      "$description": "Fully pill-shaped corner radius. Use for badges, avatars, toggle switches, and any element that should appear fully rounded regardless of height. Tailwind: rounded-full | CSS: --slab-radius-full",
       "$extensions": {
         "com.figma.variableId": "VariableID:199:818",
         "com.figma.scopes": [
@@ -111,7 +117,7 @@
           "value": 4,
           "unit": "px"
         },
-        "$description": "adfsdf",
+        "$description": "Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-sm | CSS: --slab-inset-square-sm",
         "$extensions": {
           "com.figma.variableId": "VariableID:72:196",
           "com.figma.scopes": [
@@ -135,6 +141,7 @@
           "value": 8,
           "unit": "px"
         },
+        "$description": "Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-md | CSS: --slab-inset-square-md",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1065",
           "com.figma.scopes": [
@@ -158,6 +165,7 @@
           "value": 16,
           "unit": "px"
         },
+        "$description": "Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-lg | CSS: --slab-inset-square-lg",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1066",
           "com.figma.scopes": [
@@ -181,6 +189,7 @@
           "value": 24,
           "unit": "px"
         },
+        "$description": "Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-xl | CSS: --slab-inset-square-xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1067",
           "com.figma.scopes": [
@@ -206,6 +215,7 @@
           "value": 4,
           "unit": "px"
         },
+        "$description": "Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-xs | CSS: --slab-inset-squish-xs",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1068",
           "com.figma.scopes": [
@@ -229,6 +239,7 @@
           "value": 8,
           "unit": "px"
         },
+        "$description": "Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-sm | CSS: --slab-inset-squish-sm",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1069",
           "com.figma.scopes": [
@@ -252,6 +263,7 @@
           "value": 16,
           "unit": "px"
         },
+        "$description": "Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-md | CSS: --slab-inset-squish-md",
         "$extensions": {
           "com.figma.variableId": "VariableID:97:1070",
           "com.figma.scopes": [
@@ -275,6 +287,7 @@
           "value": 16,
           "unit": "px"
         },
+        "$description": "Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-lg | CSS: --slab-inset-squish-lg",
         "$extensions": {
           "com.figma.variableId": "VariableID:123:235",
           "com.figma.scopes": [
@@ -299,6 +312,7 @@
             "value": 0,
             "unit": "px"
           },
+          "$description": "Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/xs on the icon side only.",
           "$extensions": {
             "com.figma.variableId": "VariableID:123:236",
             "com.figma.scopes": [
@@ -322,6 +336,7 @@
             "value": 0,
             "unit": "px"
           },
+          "$description": "Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/sm on the icon side only.",
           "$extensions": {
             "com.figma.variableId": "VariableID:123:237",
             "com.figma.scopes": [
@@ -345,6 +360,7 @@
             "value": 0,
             "unit": "px"
           },
+          "$description": "Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/md on the icon side only.",
           "$extensions": {
             "com.figma.variableId": "VariableID:123:238",
             "com.figma.scopes": [
@@ -368,6 +384,7 @@
             "value": 0,
             "unit": "px"
           },
+          "$description": "Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/lg on the icon side only.",
           "$extensions": {
             "com.figma.variableId": "VariableID:129:239",
             "com.figma.scopes": [
@@ -395,6 +412,7 @@
         "value": 1,
         "unit": "rem"
       },
+      "$description": "Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-xs | CSS: --slab-size-xs",
       "$extensions": {
         "com.figma.variableId": "VariableID:88:91",
         "com.figma.scopes": [
@@ -418,6 +436,7 @@
         "value": 1.5,
         "unit": "rem"
       },
+      "$description": "Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-sm | CSS: --slab-size-sm",
       "$extensions": {
         "com.figma.variableId": "VariableID:88:92",
         "com.figma.scopes": [
@@ -441,6 +460,7 @@
         "value": 2,
         "unit": "rem"
       },
+      "$description": "Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-md | CSS: --slab-size-md",
       "$extensions": {
         "com.figma.variableId": "VariableID:88:93",
         "com.figma.scopes": [
@@ -464,6 +484,7 @@
         "value": 2.5,
         "unit": "rem"
       },
+      "$description": "Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-lg | CSS: --slab-size-lg",
       "$extensions": {
         "com.figma.variableId": "VariableID:88:94",
         "com.figma.scopes": [
@@ -489,6 +510,7 @@
             "value": 1.5,
             "unit": "rem"
           },
+          "$description": "Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead.",
           "$extensions": {
             "com.figma.variableId": "VariableID:205:853",
             "com.figma.scopes": [
@@ -512,6 +534,7 @@
             "value": 2,
             "unit": "rem"
           },
+          "$description": "Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead.",
           "$extensions": {
             "com.figma.variableId": "VariableID:205:857",
             "com.figma.scopes": [
@@ -535,6 +558,7 @@
             "value": 2.5,
             "unit": "rem"
           },
+          "$description": "Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead.",
           "$extensions": {
             "com.figma.variableId": "VariableID:205:861",
             "com.figma.scopes": [
@@ -560,6 +584,7 @@
             "value": 0.75,
             "unit": "rem"
           },
+          "$description": "Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/sm for the containing touch-target.",
           "$extensions": {
             "com.figma.variableId": "VariableID:132:381",
             "com.figma.scopes": [
@@ -577,6 +602,7 @@
             "value": 1,
             "unit": "rem"
           },
+          "$description": "Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/md for the containing touch-target.",
           "$extensions": {
             "com.figma.variableId": "VariableID:132:378",
             "com.figma.scopes": [
@@ -594,6 +620,7 @@
             "value": 1.25,
             "unit": "rem"
           },
+          "$description": "Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/lg for the containing touch-target.",
           "$extensions": {
             "com.figma.variableId": "VariableID:132:380",
             "com.figma.scopes": [
@@ -616,6 +643,7 @@
           "value": 4,
           "unit": "px"
         },
+        "$description": "Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-xs | CSS: --slab-gap-inline-xs",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:80",
           "com.figma.scopes": [
@@ -639,6 +667,7 @@
           "value": 8,
           "unit": "px"
         },
+        "$description": "Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-sm | CSS: --slab-gap-inline-sm",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:81",
           "com.figma.scopes": [
@@ -662,6 +691,7 @@
           "value": 12,
           "unit": "px"
         },
+        "$description": "Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-md | CSS: --slab-gap-inline-md",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:82",
           "com.figma.scopes": [
@@ -685,6 +715,7 @@
           "value": 16,
           "unit": "px"
         },
+        "$description": "Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-lg | CSS: --slab-gap-inline-lg",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:83",
           "com.figma.scopes": [
@@ -708,6 +739,7 @@
           "value": 24,
           "unit": "px"
         },
+        "$description": "Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-xl | CSS: --slab-gap-inline-xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:84",
           "com.figma.scopes": [
@@ -733,6 +765,7 @@
           "value": 4,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-xs | CSS: --slab-gap-stack-xs",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:85",
           "com.figma.scopes": [
@@ -756,6 +789,7 @@
           "value": 8,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-sm | CSS: --slab-gap-stack-sm",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:86",
           "com.figma.scopes": [
@@ -779,6 +813,7 @@
           "value": 12,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-md | CSS: --slab-gap-stack-md",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:87",
           "com.figma.scopes": [
@@ -802,6 +837,7 @@
           "value": 16,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-lg | CSS: --slab-gap-stack-lg",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:88",
           "com.figma.scopes": [
@@ -825,6 +861,7 @@
           "value": 24,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-xl | CSS: --slab-gap-stack-xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:89",
           "com.figma.scopes": [
@@ -848,6 +885,7 @@
           "value": 32,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-2xl | CSS: --slab-gap-stack-2xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:90",
           "com.figma.scopes": [
@@ -871,6 +909,7 @@
           "value": 40,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-3xl | CSS: --slab-gap-stack-3xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:91",
           "com.figma.scopes": [
@@ -894,6 +933,7 @@
           "value": 64,
           "unit": "px"
         },
+        "$description": "Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-4xl | CSS: --slab-gap-stack-4xl",
         "$extensions": {
           "com.figma.variableId": "VariableID:283:92",
           "com.figma.scopes": [
@@ -920,6 +960,7 @@
         "value": 1,
         "unit": "px"
       },
+      "$description": "Width of standard element borders (e.g. input outlines, card borders). Use this token rather than a hardcoded pixel value to keep borders consistent across the system.",
       "$extensions": {
         "com.figma.variableId": "VariableID:2025:3234",
         "com.figma.scopes": [
@@ -937,6 +978,7 @@
         "value": 1,
         "unit": "px"
       },
+      "$description": "Width of focus ring outlines on interactive elements. Must be applied alongside a focus-border color token. Using this token ensures focus rings meet accessibility contrast requirements.",
       "$extensions": {
         "com.figma.variableId": "VariableID:2025:3235",
         "com.figma.scopes": [

package/dist/index.css

@@ -82,15 +82,25 @@
   --size-800: 3rem;
   --size-900: 4rem;
   --size-1000: 6rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/lg for the containing touch-target. */
   --slab-size-icon-inner-lg: 1.25rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/md for the containing touch-target. */
   --slab-size-icon-inner-md: 1rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/sm for the containing touch-target. */
   --slab-size-icon-inner-sm: 0.75rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-lg: 2.5rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-md: 2rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-lg | CSS: --slab-size-lg */
   --slab-size-lg: 2.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-md | CSS: --slab-size-md */
   --slab-size-md: 2rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-sm | CSS: --slab-size-sm */
   --slab-size-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-xs | CSS: --slab-size-xs */
   --slab-size-xs: 1rem;
   --weight-bold: 700;
   --weight-control: 500;
@@ -181,15 +191,25 @@
   --size-800: 3rem;
   --size-900: 4rem;
   --size-1000: 6rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/lg for the containing touch-target. */
   --slab-size-icon-inner-lg: 1.25rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/md for the containing touch-target. */
   --slab-size-icon-inner-md: 1rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/sm for the containing touch-target. */
   --slab-size-icon-inner-sm: 0.75rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-lg: 2.5rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-md: 2rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-lg | CSS: --slab-size-lg */
   --slab-size-lg: 2.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-md | CSS: --slab-size-md */
   --slab-size-md: 2rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-sm | CSS: --slab-size-sm */
   --slab-size-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-xs | CSS: --slab-size-xs */
   --slab-size-xs: 1rem;
   --weight-bold: 700;
   --weight-control: 400;
@@ -280,15 +300,25 @@
   --size-800: 3rem;
   --size-900: 4rem;
   --size-1000: 6rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/lg for the containing touch-target. */
   --slab-size-icon-inner-lg: 1.25rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/md for the containing touch-target. */
   --slab-size-icon-inner-md: 1rem;
+  /* Glyph dimensions of the icon SVG itself, without surrounding padding. Pair with size/icon/outer/sm for the containing touch-target. */
   --slab-size-icon-inner-sm: 0.75rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-lg: 2.5rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-md: 2rem;
+  /* Outer container size for an icon, including its built-in padding. This built-in padding means adjacent elements do not need additional left or right inset on the icon side — use the matching inset/squish/offset token instead. */
   --slab-size-icon-outer-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-lg | CSS: --slab-size-lg */
   --slab-size-lg: 2.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-md | CSS: --slab-size-md */
   --slab-size-md: 2rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-sm | CSS: --slab-size-sm */
   --slab-size-sm: 1.5rem;
+  /* Fixed height for interactive controls. Use on buttons, inputs, and other elements that must align in a row. Never use arbitrary pixel values for control heights. Tailwind: h-size-xs | CSS: --slab-size-xs */
   --slab-size-xs: 1rem;
   --weight-bold: 700;
   --weight-control: 450;
@@ -853,18 +883,31 @@
   --slab-control-sm-line-height: var(--line-height-100);
   --slab-control-sm-size: var(--size-100);
   --slab-control-sm-weight: var(--weight-control);
+  /* Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-lg | CSS: --slab-gap-inline-lg */
   --slab-gap-inline-lg: 16px;
+  /* Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-md | CSS: --slab-gap-inline-md */
   --slab-gap-inline-md: 12px;
+  /* Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-sm | CSS: --slab-gap-inline-sm */
   --slab-gap-inline-sm: 8px;
+  /* Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-xl | CSS: --slab-gap-inline-xl */
   --slab-gap-inline-xl: 24px;
+  /* Horizontal gap between sibling elements in a row. Use for flex or auto-layout containers with horizontal direction. Tailwind: gap-inline-xs | CSS: --slab-gap-inline-xs */
   --slab-gap-inline-xs: 4px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-2xl | CSS: --slab-gap-stack-2xl */
   --slab-gap-stack-2xl: 32px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-3xl | CSS: --slab-gap-stack-3xl */
   --slab-gap-stack-3xl: 40px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-4xl | CSS: --slab-gap-stack-4xl */
   --slab-gap-stack-4xl: 64px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-lg | CSS: --slab-gap-stack-lg */
   --slab-gap-stack-lg: 16px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-md | CSS: --slab-gap-stack-md */
   --slab-gap-stack-md: 12px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-sm | CSS: --slab-gap-stack-sm */
   --slab-gap-stack-sm: 8px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-xl | CSS: --slab-gap-stack-xl */
   --slab-gap-stack-xl: 24px;
+  /* Vertical gap between stacked sibling elements. Use for flex or auto-layout containers with vertical direction. Tailwind: gap-stack-xs | CSS: --slab-gap-stack-xs */
   --slab-gap-stack-xs: 4px;
   --gray-transparent-0: rgb(100% 100% 100% / 0);
   --gray-transparent-500: rgb(18.82% 18.82% 18.82% / 0.5);
@@ -929,18 +972,29 @@
   --slab-header-xl-line-height: var(--line-height-700);
   --slab-header-xl-size: var(--size-700);
   --slab-header-xl-weight: var(--weight-regular);
+  /* Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-lg | CSS: --slab-inset-square-lg */
   --slab-inset-square-lg: 16px;
+  /* Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-md | CSS: --slab-inset-square-md */
   --slab-inset-square-md: 8px;
-  /* adfsdf */
+  /* Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-sm | CSS: --slab-inset-square-sm */
   --slab-inset-square-sm: 4px;
+  /* Equal padding on all four sides. Use for cards, dialogs, panels, and other content containers. Pair with the matching radius token at the same scale for correct nested rounding. Tailwind: p-inset-square-xl | CSS: --slab-inset-square-xl */
   --slab-inset-square-xl: 24px;
+  /* Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-lg | CSS: --slab-inset-squish-lg */
   --slab-inset-squish-lg: 16px;
+  /* Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-md | CSS: --slab-inset-squish-md */
   --slab-inset-squish-md: 16px;
+  /* Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/lg on the icon side only. */
   --slab-inset-squish-offset-lg: 0;
+  /* Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/md on the icon side only. */
   --slab-inset-squish-offset-md: 0;
+  /* Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/sm on the icon side only. */
   --slab-inset-squish-offset-sm: 0;
+  /* Reduced horizontal padding for the side of an element that has a lead or trail icon. Icon sizes have built-in padding, so the standard squish padding is not needed on that side. Use in place of inset/squish/xs on the icon side only. */
   --slab-inset-squish-offset-xs: 0;
+  /* Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-sm | CSS: --slab-inset-squish-sm */
   --slab-inset-squish-sm: 8px;
+  /* Horizontal (x-axis) padding for pill-shaped elements like buttons, badges, and tags. Combine with a size token for height and a radius token for shape. When a lead or trail icon is present, use the matching offset token on that side instead. Tailwind: p-inset-squish-xs | CSS: --slab-inset-squish-xs */
   --slab-inset-squish-xs: 4px;
   --slab-mono-lg-font-family: var(--family-mono);
   --slab-mono-lg-letter-spacing: 0;
@@ -960,12 +1014,18 @@
   --orange-500: rgb(43.47% 30.52% 0%);
   --orange-600: rgb(31.93% 22.1% 0%);
   --orange-700: rgb(14.51% 10.2% 0%);
-  --slab-radius-control: 4px;
+  /* Corner radius for standalone interactive controls like buttons and inputs. Do not use on containers that wrap controls — use the scale-matched radius token instead. Tailwind: rounded-control | CSS: --slab-radius-control */
+  --slab-radius-control: 8px;
+  /* Fully pill-shaped corner radius. Use for badges, avatars, toggle switches, and any element that should appear fully rounded regardless of height. Tailwind: rounded-full | CSS: --slab-radius-full */
   --slab-radius-full: 99999px;
-  --slab-radius-lg: 20px;
-  --slab-radius-md: 12px;
-  --slab-radius-sm: 8px;
-  --slab-radius-xl: 28px;
+  /* Corner radius for containers. Always pair with inset/square/lg on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-lg | CSS: --slab-radius-lg */
+  --slab-radius-lg: 24px;
+  /* Corner radius for containers. Always pair with inset/square/md on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-md | CSS: --slab-radius-md */
+  --slab-radius-md: 16px;
+  /* Corner radius for containers. Always pair with inset/square/sm on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-sm | CSS: --slab-radius-sm */
+  --slab-radius-sm: 12px;
+  /* Corner radius for containers. Always pair with inset/square/xl on the same element so the outer and inner curves stay visually consistent. Tailwind: rounded-xl | CSS: --slab-radius-xl */
+  --slab-radius-xl: 32px;
   --red-50: rgb(99.65% 93.45% 94.3%);
   --red-100: rgb(98.39% 87.15% 87.15%);
   --red-200: rgb(100% 75.44% 75.44%);
@@ -995,7 +1055,9 @@
   --slate-500: rgb(27.84% 33.33% 41.18%);
   --slate-600: rgb(20% 25.49% 33.33%);
   --slate-700: rgb(11.76% 16.08% 23.14%);
+  /* Width of standard element borders (e.g. input outlines, card borders). Use this token rather than a hardcoded pixel value to keep borders consistent across the system. */
   --slab-stroke-border: 1px;
+  /* Width of focus ring outlines on interactive elements. Must be applied alongside a focus-border color token. Using this token ensures focus rings meet accessibility contrast requirements. */
   --slab-stroke-focus: 1px;
   /* Large bg fill for anything AI generated */
   --violet-50: rgb(97.25% 96.86% 100%);