Skip to content

Repository navigation

Add negative base size tokens for sizes 2-48 - #1320

Merged
lukasoppermann merged 2 commits into
mainfrom
lukasoppermann/negative-base-size-tokens
Feb 23, 2026
Merged

Add negative base size tokens for sizes 2-48#1320
lukasoppermann merged 2 commits into
mainfrom
lukasoppermann/negative-base-size-tokens

Conversation

@lukasoppermann

@lukasoppermann lukasoppermann commented Feb 20, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds 14 negative base size tokens (negative-2 through negative-48) as siblings to existing base size tokens in src/tokens/base/size/size.json5.

Output

Produces CSS custom properties like:

--base-size-negative-4: -0.25rem;
--base-size-negative-16: -1rem;
--base-size-negative-48: -3rem;

Details

  • Covers sizes: 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48
  • Sizes 64+ are excluded (not practical as negative values)
  • No Figma extensions on negative tokens
  • All lint, build, and tests pass

@lukasoppermann
Add negative base size tokens for sizes 2-48
2feacb6 
Add negative-{n} variants (negative-2 through negative-48) as siblings
to existing base size tokens. These produce --base-size-negative-{n}
CSS custom properties with negated rem values. Sizes 64+ are excluded.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings February 20, 2026 16:38
@lukasoppermann
lukasoppermann requested review from a team as code owners February 20, 2026 16:38
@changeset-bot

changeset-bot Bot commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 006b112

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
github-actions Bot temporarily deployed to Preview (Storybook) February 20, 2026 16:40 Inactive
Copilot AI reviewed Feb 20, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds negative base size design tokens to complement existing base.size dimension tokens, enabling generated CSS custom properties for negative spacing/offset use-cases.

Changes:

  • Add 14 new base.size tokens named negative-2 through negative-48 with negative px dimension values.
  • Keep new tokens as siblings of existing size tokens in src/tokens/base/size/size.json5 (no Figma extensions added).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@github-actions

github-actions Bot commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Design Token Diff (CSS)

/css/base/size/size.css

 
+++ /home/runner/work/primitives/primitives/dist/css/base/size/size.css	2026-02-20 16:42:16.629310612 +0000
@@ -18,4 +18,18 @@
 --base-size-8: 0.5rem;
 --base-size-80: 5rem;
 --base-size-96: 6rem;
+  --base-size-negative-12: -0.75rem;
+  --base-size-negative-16: -1rem;
+  --base-size-negative-2: -0.125rem;
+  --base-size-negative-20: -1.25rem;
+  --base-size-negative-24: -1.5rem;
+  --base-size-negative-28: -1.75rem;
+  --base-size-negative-32: -2rem;
+  --base-size-negative-36: -2.25rem;
+  --base-size-negative-4: -0.25rem;
+  --base-size-negative-40: -2.5rem;
+  --base-size-negative-44: -2.75rem;
+  --base-size-negative-48: -3rem;
+  --base-size-negative-6: -0.375rem;
+  --base-size-negative-8: -0.5rem;
}

@github-actions

github-actions Bot commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Design Token Diff (StyleLint)

/styleLint/base/size/size.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/base/size/size.json	2026-02-20 16:42:16.629310612 +0000
@@ -568,5 +568,257 @@
   "name": "base-size-96",
   "attributes": {},
   "path": ["base", "size", "96"]
+  },
+  "base-size-negative-12": {
+    "key": "{base.size.negative-12}",
+    "$value": ["-0.75rem", "-12px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -12,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-12}"
+    },
+    "name": "base-size-negative-12",
+    "attributes": {},
+    "path": ["base", "size", "negative-12"]
+  },
+  "base-size-negative-16": {
+    "key": "{base.size.negative-16}",
+    "$value": ["-1rem", "-16px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -16,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-16}"
+    },
+    "name": "base-size-negative-16",
+    "attributes": {},
+    "path": ["base", "size", "negative-16"]
+  },
+  "base-size-negative-2": {
+    "key": "{base.size.negative-2}",
+    "$value": ["-0.125rem", "-2px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -2,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-2}"
+    },
+    "name": "base-size-negative-2",
+    "attributes": {},
+    "path": ["base", "size", "negative-2"]
+  },
+  "base-size-negative-20": {
+    "key": "{base.size.negative-20}",
+    "$value": ["-1.25rem", "-20px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -20,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-20}"
+    },
+    "name": "base-size-negative-20",
+    "attributes": {},
+    "path": ["base", "size", "negative-20"]
+  },
+  "base-size-negative-24": {
+    "key": "{base.size.negative-24}",
+    "$value": ["-1.5rem", "-24px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -24,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-24}"
+    },
+    "name": "base-size-negative-24",
+    "attributes": {},
+    "path": ["base", "size", "negative-24"]
+  },
+  "base-size-negative-28": {
+    "key": "{base.size.negative-28}",
+    "$value": ["-1.75rem", "-28px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -28,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-28}"
+    },
+    "name": "base-size-negative-28",
+    "attributes": {},
+    "path": ["base", "size", "negative-28"]
+  },
+  "base-size-negative-32": {
+    "key": "{base.size.negative-32}",
+    "$value": ["-2rem", "-32px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -32,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-32}"
+    },
+    "name": "base-size-negative-32",
+    "attributes": {},
+    "path": ["base", "size", "negative-32"]
+  },
+  "base-size-negative-36": {
+    "key": "{base.size.negative-36}",
+    "$value": ["-2.25rem", "-36px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -36,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-36}"
+    },
+    "name": "base-size-negative-36",
+    "attributes": {},
+    "path": ["base", "size", "negative-36"]
+  },
+  "base-size-negative-4": {
+    "key": "{base.size.negative-4}",
+    "$value": ["-0.25rem", "-4px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -4,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-4}"
+    },
+    "name": "base-size-negative-4",
+    "attributes": {},
+    "path": ["base", "size", "negative-4"]
+  },
+  "base-size-negative-40": {
+    "key": "{base.size.negative-40}",
+    "$value": ["-2.5rem", "-40px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -40,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-40}"
+    },
+    "name": "base-size-negative-40",
+    "attributes": {},
+    "path": ["base", "size", "negative-40"]
+  },
+  "base-size-negative-44": {
+    "key": "{base.size.negative-44}",
+    "$value": ["-2.75rem", "-44px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -44,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-44}"
+    },
+    "name": "base-size-negative-44",
+    "attributes": {},
+    "path": ["base", "size", "negative-44"]
+  },
+  "base-size-negative-48": {
+    "key": "{base.size.negative-48}",
+    "$value": ["-3rem", "-48px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -48,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-48}"
+    },
+    "name": "base-size-negative-48",
+    "attributes": {},
+    "path": ["base", "size", "negative-48"]
+  },
+  "base-size-negative-6": {
+    "key": "{base.size.negative-6}",
+    "$value": ["-0.375rem", "-6px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -6,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-6}"
+    },
+    "name": "base-size-negative-6",
+    "attributes": {},
+    "path": ["base", "size", "negative-6"]
+  },
+  "base-size-negative-8": {
+    "key": "{base.size.negative-8}",
+    "$value": ["-0.5rem", "-8px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/base/size/size.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": -8,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "key": "{base.size.negative-8}"
+    },
+    "name": "base-size-negative-8",
+    "attributes": {},
+    "path": ["base", "size", "negative-8"]
 }
}

@github-actions

github-actions Bot commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Design Token Diff (Fallbacks)

/fallbacks/base/size/size.json

 
+++ /home/runner/work/primitives/primitives/dist/fallbacks/base/size/size.json	2026-02-20 16:42:16.629310612 +0000
@@ -17,5 +17,19 @@
 "--base-size-80": "5rem",
 "--base-size-96": "6rem",
 "--base-size-112": "7rem",
-  "--base-size-128": "8rem"
+  "--base-size-128": "8rem",
+  "--base-size-negative-2": "-0.125rem",
+  "--base-size-negative-4": "-0.25rem",
+  "--base-size-negative-6": "-0.375rem",
+  "--base-size-negative-8": "-0.5rem",
+  "--base-size-negative-12": "-0.75rem",
+  "--base-size-negative-16": "-1rem",
+  "--base-size-negative-20": "-1.25rem",
+  "--base-size-negative-24": "-1.5rem",
+  "--base-size-negative-28": "-1.75rem",
+  "--base-size-negative-32": "-2rem",
+  "--base-size-negative-36": "-2.25rem",
+  "--base-size-negative-40": "-2.5rem",
+  "--base-size-negative-44": "-2.75rem",
+  "--base-size-negative-48": "-3rem"
}

@lukasoppermann
Add changeset for negative base size tokens
006b112 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
github-actions Bot temporarily deployed to Preview (Storybook) February 20, 2026 16:43 Inactive
iansan5653
iansan5653 approved these changes Feb 20, 2026
View reviewed changes

@iansan5653 iansan5653 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it!

@lukasoppermann
lukasoppermann merged commit 6c1af22 into main Feb 23, 2026
27 checks passed
@lukasoppermann
lukasoppermann deleted the lukasoppermann/negative-base-size-tokens branch February 23, 2026 09:06
@primer primer Bot mentioned this pull request Feb 23, 2026
Merged

This branch was previously deployed

2 inactive deployments
Preview (Storybook) — 006b112d Deployed Feb 20, 2026 by github-actions[bot]
github-pages — 006b112d Deployed Feb 20, 2026 by lukasoppermann via Build and deploy / Deploy #3974
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@jonrohan jonrohan jonrohan approved these changes
@iansan5653 iansan5653 iansan5653 approved these changes

Assignees

@lukasoppermann lukasoppermann

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@lukasoppermann @jonrohan @iansan5653