Update size tokens to Primitives pre-v8 release (#2425)

* use new size tokens * Create wild-wombats-doubt.md * fix import * Update wild-wombats-doubt.md
primer · Apr 21, 2023 · 718f1aa · 718f1aa
1 parent bb4eef5
commit 718f1aa
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 42 deletions.
diff --git a/.changeset/wild-wombats-doubt.md b/.changeset/wild-wombats-doubt.md
@@ -0,0 +1,6 @@
+---
+"@primer/css": patch
+---
+
+- Bump primitives to v7.11.7
+- Update size tokens to Primitives pre-v8 release
diff --git a/docs/src/stories/components/Layout/Stack.stories.jsx b/docs/src/stories/components/Layout/Stack.stories.jsx
@@ -58,9 +58,9 @@ export default {
       },
       description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units.
 - \`none\`: 0
-- \`condensed\`: \`var(--primer-stack-gap-condensed, 8px)\`,
-- \`normal\`: \`var(--primer-stack-gap-normal, 16px)\` (default)
-- \`spacious\`: \`var(--primer-stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
+- \`condensed\`: \`var(--stack-gap-condensed, 8px)\`,
+- \`normal\`: \`var(--stack-gap-normal, 16px)\` (default)
+- \`spacious\`: \`var(--stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
 <!-- - \`custom\`: set a custom size. When using with a framework such as ViewComponent or React, a custom value can be passed directly to the property. -->
  `,
       table: {
@@ -120,7 +120,7 @@ This property behavior is equivalent to the \`align-items\` Flexbox property.`,
       control: {
         type: 'inline-radio',
       },
-      description: 'Sets how items will be distributed in the stacking direction.', 
+      description: 'Sets how items will be distributed in the stacking direction.',
       table: {
         category: 'Properties',
         defaultValue: {
@@ -514,7 +514,7 @@ export const StackTemplate = ({
           alignWrap && 'Stack--alignWrap-' + `${alignWrap}-whenRegular`,
           narrow_alignWrap && 'Stack--alignWrap-' + `${narrow_alignWrap}-whenNarrow`,
           wide_alignWrap && 'Stack--alignWrap-' + `${wide_alignWrap}-whenWide`,
-          
+
           spread && 'Stack--spread-' + `${spread}-whenRegular`,
           narrow_spread && 'Stack--spread-' + `${narrow_spread}-whenNarrow`,
           wide_spread && 'Stack--spread-' + `${wide_spread}-whenWide`,
@@ -531,7 +531,7 @@ export const StackTemplate = ({
         //style={custom_styles}
       >
         {children}
-        
+
         {!children && (
           <>
             <div className="Stack-item _debug _debug-item-1">1</div>
@@ -604,4 +604,4 @@ Playground.args = {
   direction: "block",
   gap: "normal",
   align: "stretch",
-};
+};
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.11.5",
+    "@primer/primitives": "^7.11.7",
     "@primer/view-components": "^0.1.0"
   },
   "devDependencies": {

diff --git a/src/layout/app-frame.scss b/src/layout/app-frame.scss
@@ -30,7 +30,7 @@
     width: 100%;
     padding: var(--base-size-16, 16px);
     background: var(--color-canvas-inset);
-    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;
     gap: var(--base-size-8, 8px);
@@ -67,25 +67,25 @@
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
       background: var(--color-border-default);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      border-radius: var(--borderRadius-full, 100vh);
     }
 
     &:focus {
       z-index: 20;
       display: grid;
       width: auto;
       height: auto;
-      min-height: var(--primer-control-medium-size, 32px);
-      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      min-height: var(--control-medium-size, 32px);
+      padding: 0 var(--control-medium-paddingInline-spacious, 16px);
       overflow: auto;
       color: var(--color-fg-on-emphasis);
       background: var(--color-accent-emphasis);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
       @media (pointer: coarse) {
         &::after {
-          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+          @include minTouchTarget(var(--control-minTarget-coarse, 44px));
         }
       }
 

diff --git a/src/layout/stack.scss b/src/layout/stack.scss
@@ -25,7 +25,7 @@
   // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
   // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
 
-  $Stack-gap-default: var(--primer-stack-gap-normal, 16px);
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
 
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
@@ -65,18 +65,18 @@
   }
 
   .Stack--gap-condensed#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
   }
 
   .Stack--gap-normal#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
   }
 
   // There's no .Stack--gap-spacious-whenNarrow
   // Narrow viewports render `spacious` gap as `normal`
   @if $viewportRange != '-whenNarrow' {
     .Stack--gap-spacious#{$viewportRange} {
-      --Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
     }
   }
 
@@ -161,14 +161,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }

diff --git a/src/primitives/index.scss b/src/primitives/index.scss
@@ -1,10 +1,10 @@
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/base/size/size';
+@import '@primer/primitives/tokens-next-private/css/base/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/functional/size/border';
+@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size';
+@import '@primer/primitives/tokens-next-private/css/functional/size/viewport';
+@import '@primer/primitives/tokens-next-private/css/functional/typography/typography';
 @import './temp-typography-tokens.scss';
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
@@ -4,7 +4,7 @@
 $border-width: 1px !default;
 $border-style: solid !default;
 $border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
@@ -31,11 +31,11 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
-    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
+    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -46,27 +46,27 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
         }
       }
     }
   }
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+.circle { border-radius: var(--borderRadius-full, 50%) !important; }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {

diff --git a/yarn.lock b/yarn.lock
@@ -1215,10 +1215,10 @@
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.3.1.tgz#febae28e5f7824f1fa547389b3ff8563e171da58"
   integrity sha512-aMRDUQ350lk0FxtL5gJWPFHHOSSzDbJ6uNJVIt8XSqiGe1pxuW5mVVfrEp1uvzZ0pCHkCdm9fycjnfOeMeIrOQ==
 
-"@primer/primitives@^7.11.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.5.tgz#df36599f70d7a8283ce967c17c0e808ecb3984a2"
-  integrity sha512-UmFQA0BZ5BIQKrlKg1TOEjDzeeI2NWyeh/5cCvXVOjfLegCXIlHf/xCLl1KCYO4YeegHmC9g5tpPLTlWjtcbaA==
+"@primer/primitives@^7.11.7":
+  version "7.11.7"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.7.tgz#f6219ab8ea7212e7fe0878c3ebbf26767efd437a"
+  integrity sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==
   dependencies:
     markdown-table-ts "^1.0.3"