From 718f1aa6a6f8b5823e55b6b2616a729f59392e83 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Fri, 21 Apr 2023 10:02:59 -0700 Subject: [PATCH] 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 --- .changeset/wild-wombats-doubt.md | 6 ++++++ .../components/Layout/Stack.stories.jsx | 14 +++++++------- package.json | 2 +- src/layout/app-frame.scss | 12 ++++++------ src/layout/stack.scss | 12 ++++++------ src/primitives/index.scss | 18 +++++++++--------- src/support/variables/misc.scss | 2 +- src/utilities/borders.scss | 16 ++++++++-------- yarn.lock | 8 ++++---- 9 files changed, 48 insertions(+), 42 deletions(-) create mode 100644 .changeset/wild-wombats-doubt.md diff --git a/.changeset/wild-wombats-doubt.md b/.changeset/wild-wombats-doubt.md new file mode 100644 index 0000000000..8abe22e5c9 --- /dev/null +++ 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 index 93203448db..396932488d 100644 --- 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) `, 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 && ( <>
1
@@ -604,4 +604,4 @@ Playground.args = { direction: "block", gap: "normal", align: "stretch", -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index 343e02e44c..af772e8c5d 100644 --- 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 index 433c11bad4..d68544f37b 100644 --- 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,7 +67,7 @@ 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 { @@ -75,17 +75,17 @@ 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 index 2a681b14ce..62af450964 100644 --- 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 index 3fef3ea2c9..fa0a7c492c 100644 --- 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 index 9e3c5b0d93..ac34653566 100644 --- 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 index 8e958da267..62f0eec474 100644 --- 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,19 +46,19 @@ .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; } } } @@ -66,7 +66,7 @@ } /* 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 index 3b3964cbe1..1afe05dbf3 100644 --- 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"