Skip to content

Commit 718f1aa

Browse files
langermanklangermank
authored
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
1 parent bb4eef5 commit 718f1aa

File tree

9 files changed

+48
-42
lines changed

9 files changed

+48
-42
lines changed

‎.changeset/wild-wombats-doubt.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
- Bump primitives to v7.11.7
6+
- Update size tokens to Primitives pre-v8 release

‎docs/src/stories/components/Layout/Stack.stories.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ export default {
5858
},
5959
description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units.
6060
- \`none\`: 0
61-
- \`condensed\`: \`var(--primer-stack-gap-condensed, 8px)\`,
62-
- \`normal\`: \`var(--primer-stack-gap-normal, 16px)\` (default)
63-
- \`spacious\`: \`var(--primer-stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
61+
- \`condensed\`: \`var(--stack-gap-condensed, 8px)\`,
62+
- \`normal\`: \`var(--stack-gap-normal, 16px)\` (default)
63+
- \`spacious\`: \`var(--stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
6464
<!-- - \`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. -->
6565
`,
6666
table: {
@@ -120,7 +120,7 @@ This property behavior is equivalent to the \`align-items\` Flexbox property.`,
120120
control: {
121121
type: 'inline-radio',
122122
},
123-
description: 'Sets how items will be distributed in the stacking direction.',
123+
description: 'Sets how items will be distributed in the stacking direction.',
124124
table: {
125125
category: 'Properties',
126126
defaultValue: {
@@ -514,7 +514,7 @@ export const StackTemplate = ({
514514
alignWrap && 'Stack--alignWrap-' + `${alignWrap}-whenRegular`,
515515
narrow_alignWrap && 'Stack--alignWrap-' + `${narrow_alignWrap}-whenNarrow`,
516516
wide_alignWrap && 'Stack--alignWrap-' + `${wide_alignWrap}-whenWide`,
517-
517+
518518
spread && 'Stack--spread-' + `${spread}-whenRegular`,
519519
narrow_spread && 'Stack--spread-' + `${narrow_spread}-whenNarrow`,
520520
wide_spread && 'Stack--spread-' + `${wide_spread}-whenWide`,
@@ -531,7 +531,7 @@ export const StackTemplate = ({
531531
//style={custom_styles}
532532
>
533533
{children}
534-
534+
535535
{!children && (
536536
<>
537537
<div className="Stack-item _debug _debug-item-1">1</div>
@@ -604,4 +604,4 @@ Playground.args = {
604604
direction: "block",
605605
gap: "normal",
606606
align: "stretch",
607-
};
607+
};

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"storybook": "cd docs && yarn && yarn storybook"
4343
},
4444
"dependencies": {
45-
"@primer/primitives": "^7.11.5",
45+
"@primer/primitives": "^7.11.7",
4646
"@primer/view-components": "^0.1.0"
4747
},
4848
"devDependencies": {

‎src/layout/app-frame.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
width: 100%;
3131
padding: var(--base-size-16, 16px);
3232
background: var(--color-canvas-inset);
33-
padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
33+
padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
3434
isolation: isolate;
3535
align-items: center;
3636
gap: var(--base-size-8, 8px);
@@ -67,25 +67,25 @@
6767
text-indent: var(--base-size-128, 128px);
6868
pointer-events: none;
6969
background: var(--color-border-default);
70-
border-radius: var(--primer-borderRadius-full, 100vh);
70+
border-radius: var(--borderRadius-full, 100vh);
7171
}
7272

7373
&:focus {
7474
z-index: 20;
7575
display: grid;
7676
width: auto;
7777
height: auto;
78-
min-height: var(--primer-control-medium-size, 32px);
79-
padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
78+
min-height: var(--control-medium-size, 32px);
79+
padding: 0 var(--control-medium-paddingInline-spacious, 16px);
8080
overflow: auto;
8181
color: var(--color-fg-on-emphasis);
8282
background: var(--color-accent-emphasis);
83-
border-radius: var(--primer-borderRadius-full, 100vh);
83+
border-radius: var(--borderRadius-full, 100vh);
8484
align-items: center;
8585

8686
@media (pointer: coarse) {
8787
&::after {
88-
@include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
88+
@include minTouchTarget(var(--control-minTarget-coarse, 44px));
8989
}
9090
}
9191

‎src/layout/stack.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
// │ ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
2626
// │ ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
2727

28-
$Stack-gap-default: var(--primer-stack-gap-normal, 16px);
28+
$Stack-gap-default: var(--stack-gap-normal, 16px);
2929

3030
--Stack-gap-whenRegular: #{$Stack-gap-default};
3131
--Stack-gap-whenNarrow: #{$Stack-gap-default};
@@ -65,18 +65,18 @@
6565
}
6666

6767
.Stack--gap-condensed#{$viewportRange} {
68-
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
68+
--Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
6969
}
7070

7171
.Stack--gap-normal#{$viewportRange} {
72-
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
72+
--Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
7373
}
7474

7575
// There's no .Stack--gap-spacious-whenNarrow
7676
// Narrow viewports render `spacious` gap as `normal`
7777
@if $viewportRange != '-whenNarrow' {
7878
.Stack--gap-spacious#{$viewportRange} {
79-
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
79+
--Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
8080
}
8181
}
8282

@@ -161,14 +161,14 @@
161161

162162
:not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
163163
:not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
164-
border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
164+
border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
165165
inline-size: auto;
166166
block-size: 0;
167167
}
168168

169169
.Stack--dir-inline#{$viewportRange} > .Stack-divider,
170170
.Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
171-
border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
171+
border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
172172
inline-size: 0;
173173
block-size: auto;
174174
}

‎src/primitives/index.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
2-
@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
3-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
4-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
5-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
6-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
7-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
8-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
9-
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
1+
@import '@primer/primitives/tokens-next-private/css/base/size/size';
2+
@import '@primer/primitives/tokens-next-private/css/base/typography/typography';
3+
@import '@primer/primitives/tokens-next-private/css/functional/size/border';
4+
@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints';
5+
@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse';
6+
@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine';
7+
@import '@primer/primitives/tokens-next-private/css/functional/size/size';
8+
@import '@primer/primitives/tokens-next-private/css/functional/size/viewport';
9+
@import '@primer/primitives/tokens-next-private/css/functional/typography/typography';
1010
@import './temp-typography-tokens.scss';

‎src/support/variables/misc.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
$border-width: 1px !default;
55
$border-style: solid !default;
66
$border: $border-width $border-style var(--color-border-default) !default;
7-
$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
7+
$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
88

99
// Border Radius
1010
$border-radius-1: 4px !default;

‎src/utilities/borders.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
.border#{$variant}-left-0 { border-left: 0 !important; }
3232

3333
// Rounded corners
34-
.rounded#{$variant} { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
34+
.rounded#{$variant} { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
3535
.rounded#{$variant}-0 { border-radius: 0 !important; }
36-
.rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
37-
.rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
38-
.rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
36+
.rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
37+
.rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
38+
.rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
3939

4040
@each $edge, $corners in $edges {
4141
.rounded#{$variant}-#{$edge}-0 {
@@ -46,27 +46,27 @@
4646

4747
.rounded#{$variant}-#{$edge}-1 {
4848
@each $corner in $corners {
49-
border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
49+
border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
5050
}
5151
}
5252

5353
.rounded#{$variant}-#{$edge}-2 {
5454
@each $corner in $corners {
55-
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
55+
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
5656
}
5757
}
5858

5959
.rounded#{$variant}-#{$edge}-3 {
6060
@each $corner in $corners {
61-
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
61+
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
6262
}
6363
}
6464
}
6565
}
6666
}
6767

6868
/* Add a 50% border-radius to make something into a circle */
69-
.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
69+
.circle { border-radius: var(--borderRadius-full, 50%) !important; }
7070

7171
/* Change the border style to dashed, in conjunction with another utility */
7272
.border-dashed {

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -1215,10 +1215,10 @@
12151215
resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.3.1.tgz#febae28e5f7824f1fa547389b3ff8563e171da58"
12161216
integrity sha512-aMRDUQ350lk0FxtL5gJWPFHHOSSzDbJ6uNJVIt8XSqiGe1pxuW5mVVfrEp1uvzZ0pCHkCdm9fycjnfOeMeIrOQ==
12171217

1218-
"@primer/primitives@^7.11.5":
1219-
version "7.11.5"
1220-
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.5.tgz#df36599f70d7a8283ce967c17c0e808ecb3984a2"
1221-
integrity sha512-UmFQA0BZ5BIQKrlKg1TOEjDzeeI2NWyeh/5cCvXVOjfLegCXIlHf/xCLl1KCYO4YeegHmC9g5tpPLTlWjtcbaA==
1218+
"@primer/primitives@^7.11.7":
1219+
version "7.11.7"
1220+
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.7.tgz#f6219ab8ea7212e7fe0878c3ebbf26767efd437a"
1221+
integrity sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==
12221222
dependencies:
12231223
markdown-table-ts "^1.0.3"
12241224

0 commit comments

Comments
 (0)