primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* use new size tokens

* Create wild-wombats-doubt.md

* fix import

* Update wild-wombats-doubt.md
This commit is contained in:
Katie Langerman 2023-04-21 10:02:59 -07:00 committed by GitHub
parent bb4eef5a40
commit 718f1aa6a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/wild-wombats-doubt.md Normal file
View File

@ -0,0 +1,6 @@
---
"@primer/css": patch
---
- Bump primitives to v7.11.7
- Update size tokens to Primitives pre-v8 release

6
docs/src/stories/components/Layout/Stack.stories.jsx
View File

@ -58,9 +58,9 @@ export default {
}, },
description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units. description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units.
- \`none\`: 0 - \`none\`: 0
- \`condensed\`: \`var(--primer-stack-gap-condensed, 8px)\`, - \`condensed\`: \`var(--stack-gap-condensed, 8px)\`,
- \`normal\`: \`var(--primer-stack-gap-normal, 16px)\` (default) - \`normal\`: \`var(--stack-gap-normal, 16px)\` (default)
- \`spacious\`: \`var(--primer-stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports) - \`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. --> <!-- - \`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: { table: {

2
package.json
View File

@ -42,7 +42,7 @@
"storybook": "cd docs && yarn && yarn storybook" "storybook": "cd docs && yarn && yarn storybook"
}, },
"dependencies": { "dependencies": {
"@primer/primitives": "^7.11.5", "@primer/primitives": "^7.11.7",
"@primer/view-components": "^0.1.0" "@primer/view-components": "^0.1.0"
}, },
"devDependencies": { "devDependencies": {

12
src/layout/app-frame.scss
View File

@ -30,7 +30,7 @@
width: 100%; width: 100%;
padding: var(--base-size-16, 16px); padding: var(--base-size-16, 16px);
background: var(--color-canvas-inset); 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; isolation: isolate;
align-items: center; align-items: center;
gap: var(--base-size-8, 8px); gap: var(--base-size-8, 8px);
@ -67,7 +67,7 @@
text-indent: var(--base-size-128, 128px); text-indent: var(--base-size-128, 128px);
pointer-events: none; pointer-events: none;
background: var(--color-border-default); background: var(--color-border-default);
border-radius: var(--primer-borderRadius-full, 100vh); border-radius: var(--borderRadius-full, 100vh);
} }
&:focus { &:focus {
@ -75,17 +75,17 @@
display: grid; display: grid;
width: auto; width: auto;
height: auto; height: auto;
min-height: var(--primer-control-medium-size, 32px); min-height: var(--control-medium-size, 32px);
padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px); padding: 0 var(--control-medium-paddingInline-spacious, 16px);
overflow: auto; overflow: auto;
color: var(--color-fg-on-emphasis); color: var(--color-fg-on-emphasis);
background: var(--color-accent-emphasis); background: var(--color-accent-emphasis);
border-radius: var(--primer-borderRadius-full, 100vh); border-radius: var(--borderRadius-full, 100vh);
align-items: center; align-items: center;
@media (pointer: coarse) { @media (pointer: coarse) {
&::after { &::after {
@include minTouchTarget(var(--primer-control-minTarget-coarse, 44px)); @include minTouchTarget(var(--control-minTarget-coarse, 44px));
} }
} }

12
src/layout/stack.scss
View File

@ -25,7 +25,7 @@
// │ ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ] // │ ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
// │ ├─ &.Stack-item--keepSize-[ 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-whenRegular: #{$Stack-gap-default};
--Stack-gap-whenNarrow: #{$Stack-gap-default}; --Stack-gap-whenNarrow: #{$Stack-gap-default};
@ -65,18 +65,18 @@
} }
.Stack--gap-condensed#{$viewportRange} { .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-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 // There's no .Stack--gap-spacious-whenNarrow
// Narrow viewports render `spacious` gap as `normal` // Narrow viewports render `spacious` gap as `normal`
@if $viewportRange != '-whenNarrow' { @if $viewportRange != '-whenNarrow' {
.Stack--gap-spacious#{$viewportRange} { .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-divider,
:not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .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; inline-size: auto;
block-size: 0; block-size: 0;
} }
.Stack--dir-inline#{$viewportRange} > .Stack-divider, .Stack--dir-inline#{$viewportRange} > .Stack-divider,
.Stack--dir-inline#{$viewportRange} > .Stack-item > .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; inline-size: 0;
block-size: auto; block-size: auto;
} }

18
src/primitives/index.scss
View File

@ -1,10 +1,10 @@
@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size'; @import '@primer/primitives/tokens-next-private/css/base/size/size';
@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography'; @import '@primer/primitives/tokens-next-private/css/base/typography/typography';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border'; @import '@primer/primitives/tokens-next-private/css/functional/size/border';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints'; @import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse'; @import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine'; @import '@primer/primitives/tokens-next-private/css/functional/size/size-fine';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size'; @import '@primer/primitives/tokens-next-private/css/functional/size/size';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport'; @import '@primer/primitives/tokens-next-private/css/functional/size/viewport';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography'; @import '@primer/primitives/tokens-next-private/css/functional/typography/typography';
@import './temp-typography-tokens.scss'; @import './temp-typography-tokens.scss';

2
src/support/variables/misc.scss
View File

@ -4,7 +4,7 @@
$border-width: 1px !default; $border-width: 1px !default;
$border-style: solid !default; $border-style: solid !default;
$border: $border-width $border-style var(--color-border-default) !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
$border-radius-1: 4px !default; $border-radius-1: 4px !default;

16
src/utilities/borders.scss
View File

@ -31,11 +31,11 @@
.border#{$variant}-left-0 { border-left: 0 !important; } .border#{$variant}-left-0 { border-left: 0 !important; }
// Rounded corners // 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}-0 { border-radius: 0 !important; }
.rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; } .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
.rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; } .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
.rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; } .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
@each $edge, $corners in $edges { @each $edge, $corners in $edges {
.rounded#{$variant}-#{$edge}-0 { .rounded#{$variant}-#{$edge}-0 {
@ -46,19 +46,19 @@
.rounded#{$variant}-#{$edge}-1 { .rounded#{$variant}-#{$edge}-1 {
@each $corner in $corners { @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 { .rounded#{$variant}-#{$edge}-2 {
@each $corner in $corners { @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 { .rounded#{$variant}-#{$edge}-3 {
@each $corner in $corners { @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 */ /* 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 */ /* Change the border style to dashed, in conjunction with another utility */
.border-dashed { .border-dashed {

8
yarn.lock
View File

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