@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.1d57246f

package/DESIGN_TOKENS_SPEC.md

@@ -101,6 +101,12 @@ Composite border tokens combining color, width, and style.
 
 **Tokens:** border-default, border-disabled, border-emphasis, border-muted, border-transparent
 
+### draft
+**Tokens:** border-draft-emphasis, border-draft-muted
+
+### border-translucent
+Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.
+
 ## Border Colors
 
 Border color tokens for boundaries, dividers, and outlines.
@@ -140,10 +146,15 @@ Subtle border for secondary elements and light separators
 **R:** Use for subtle borders and separators. Less prominent than border.default.
 
 ### borderColor-translucent
-Semi-transparent border for overlays and layered elements
+Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.
 **U:** overlay-border, translucent-border
 **R:** Use for semi-transparent borders on overlays. Works well with translucent backgrounds.
 
+### borderColor-transparent
+Fully transparent border
+**U:** border-color, border-styling
+**R:** These are COLOR-ONLY tokens (resolve to a hex value like #cf222e). Use for the CSS `border-color` property. Do NOT use for the CSS `border` shorthand — use border.* tokens instead.
+
 ## Border Radius
 
 Corner radius tokens for rounded elements.
@@ -154,7 +165,7 @@ Use this border radius for pill shaped elements
 **R:** Use for avatars and pill-shaped elements. Do NOT use for rectangular containers.
 
 ### borderRadius-large
-Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.
+Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.
 **U:** card, dialog, modal
 **R:** Recommended for dialogs and modals.
 
@@ -222,9 +233,7 @@ Tokens for interactive controls like buttons, inputs, and selects.
 **Scale:** Use xsmall/small for dense layouts, medium for default UI, large/xlarge for prominent CTAs.
 
 **Size patterns:**
-- `control-[xsmall, small, medium, large, xlarge]-[gap, lineBoxHeight, paddingBlock, paddingInline-normal, size]`
-- `control-[xsmall, medium, large, xlarge]-paddingInline-spacious`
-- `control-[xsmall, small, medium]-paddingInline-condensed`
+- `control-[xsmall, small, medium, large, xlarge]-[gap, lineBoxHeight, paddingBlock, paddingInline-condensed, paddingInline-normal, paddingInline-spacious, size]`
 
 **State variants:**
 - `control-checked-[bgColor-active, bgColor-disabled, bgColor-hover, bgColor-rest, borderColor-active, borderColor-disabled, borderColor-hover, borderColor-rest, fgColor-disabled, fgColor-rest]`

package/dist/build/schemas/borderToken.d.ts

@@ -1,6 +1,27 @@
 import { z } from 'zod';
 export declare const borderValue: z.ZodObject<{
-    color: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+    color: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+        colorSpace: z.ZodEnum<{
+            "display-p3": "display-p3";
+            srgb: "srgb";
+            rec2020: "rec2020";
+            "srgb-linear": "srgb-linear";
+            hsl: "hsl";
+            hwb: "hwb";
+            lab: "lab";
+            lch: "lch";
+            oklab: "oklab";
+            oklch: "oklch";
+            "a98-rgb": "a98-rgb";
+            "prophoto-rgb": "prophoto-rgb";
+            xyz: "xyz";
+            "xyz-d50": "xyz-d50";
+            "xyz-d65": "xyz-d65";
+        }>;
+        components: z.ZodTuple<[z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>], null>;
+        alpha: z.ZodOptional<z.ZodNumber>;
+        hex: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>, z.ZodString]>;
     style: z.ZodEnum<{
         inset: "inset";
         solid: "solid";
@@ -24,7 +45,28 @@ export declare const borderToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodObject<{
-        color: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+        color: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+            colorSpace: z.ZodEnum<{
+                "display-p3": "display-p3";
+                srgb: "srgb";
+                rec2020: "rec2020";
+                "srgb-linear": "srgb-linear";
+                hsl: "hsl";
+                hwb: "hwb";
+                lab: "lab";
+                lch: "lch";
+                oklab: "oklab";
+                oklch: "oklch";
+                "a98-rgb": "a98-rgb";
+                "prophoto-rgb": "prophoto-rgb";
+                xyz: "xyz";
+                "xyz-d50": "xyz-d50";
+                "xyz-d65": "xyz-d65";
+            }>;
+            components: z.ZodTuple<[z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>], null>;
+            alpha: z.ZodOptional<z.ZodNumber>;
+            hex: z.ZodOptional<z.ZodString>;
+        }, z.core.$strict>, z.ZodString]>;
         style: z.ZodEnum<{
             inset: "inset";
             solid: "solid";
@@ -44,7 +86,7 @@ export declare const borderToken: z.ZodObject<{
             }>;
         }, z.core.$strict>, z.ZodString]>;
     }, z.core.$strip>, z.ZodString]>;
-    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

package/dist/build/schemas/borderToken.js

@@ -2,11 +2,12 @@ import { z } from 'zod';
 import { baseToken } from './baseToken.js';
 import { referenceValue } from './referenceValue.js';
 import { colorHexValue } from './colorHexValue.js';
+import { colorW3cValue } from './colorW3cValue.js';
 import { dimensionValue } from './dimensionValue.js';
 import { tokenType } from './tokenType.js';
 import { llmExtension } from './llmExtension.js';
 export const borderValue = z.object({
-    color: z.union([colorHexValue, referenceValue]),
+    color: z.union([colorHexValue, colorW3cValue, referenceValue]),
     style: z.enum(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'outset', 'inset']),
     width: z.union([dimensionValue, referenceValue]),
 });