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

Update migration guide

Browse Source
This commit is contained in:
simurai 2020-11-19 09:26:45 +09:00
parent 9a3675457e
commit 7f7ca98700
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/content/support/v16-migration.mdx
View File

@ -15,7 +15,7 @@ Most components don't need to be updated and should work without making changes.
#### Labels
`v15` | `v16`
[`v15`](https://primer.style/css/components/labels) | `v16`
--- | ---
`.Label--gray-darker` | `.Label--primary`
`.Label--gray` | `.Label--secondary`
@ -29,14 +29,14 @@ Most components don't need to be updated and should work without making changes.
#### Counters
`v15` | `v16`
[`v15`](https://primer.style/css/components/labels#counters) | `v16`
--- | ---
`.Counter--gray` | `.Counter--primary`
`.Counter--gray-light` | `.Counter--secondary`
#### States
`v15` | `v16`
[`v15`](https://primer.style/css/components/labels#states) | `v16`
--- | ---
n/a | `.State--draft`
`.State--green` | `.State--open`
@ -49,7 +49,7 @@ See [the color utility classes page](/utilities/colors) for a list of all the fu
#### Text
`v15` | `v16`
[`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16`
--- | ---
`.text-gray-dark` | `.color-text-primary`
`.text-gray` | `.color-text-secondary`
@ -80,7 +80,7 @@ n/a | `.color-icon-danger`
#### Border
`v15` | `v16`
[`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16`
--- | ---
`.border-gray` | `.color-border-primary`
`.border-gray-light` | `.color-border-secondary`
@ -90,6 +90,7 @@ n/a | `.color-icon-danger`
`.border-yellow` | `.color-border-warning`
`.border-red` | `.color-border-danger`
`.border-white` | `.color-border-inverse`
n/a | `.color-border-overlay`
`.border-gray-darker` | n/a
`.border-blue-light` | n/a
`.border-red-light` | n/a
@ -104,7 +105,7 @@ n/a | `.color-icon-danger`
#### Background
`v15` | `v16`
[`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16`
--- | ---
`.bg-white` | `.color-bg-primary`
`.bg-gray-light` | `.color-bg-secondary`
@ -119,6 +120,8 @@ n/a | `.color-icon-danger`
`.bg-red-light` | `.color-bg-danger`
`.bg-red` | `.color-bg-danger-inverse`
n/a | `.color-bg-canvas`
n/a | `.color-bg-canvas-inset`
n/a | `.color-bg-overlay`
`.bg-purple-light` | n/a
`.bg-purple` | n/a
`.bg-yellow-dark` | n/a
@ -138,7 +141,7 @@ n/a | `.color-bg-canvas`
The `link` utilities are part of the `Link` component.
`v15` | `v16`
[`v15`](https://primer.style/css/utilities/colors##link-colors) | `v16`
--- | ---
`.link-gray-dark` | `.Link--primary`
`.link-gray` | `.Link--secondary`
@ -196,6 +199,7 @@ n/a | `var(--color-icon-warning)`
`$border-green` (`$green-400`) | `var(--color-border-success)`
`$border-red` (`$red-500`) | `var(--color-border-danger)`
`$border-yellow` (`$yellow-600`) | `var(--color-border-warning)`
n/a | `var(--color-border-overlay)`
`$border-gray-darker` (`$gray-700`) | n/a
`$border-blue-light` (`$blue-200`) | n/a
`$border-red-light` (`$red-300`) | n/a
@ -221,6 +225,8 @@ n/a | `var(--color-icon-warning)`
`$bg-yellow` (`$yellow-500`) | `var(--color-bg-warning-inverse)`
`$bg-yellow-light` (`$yellow-200`) | `var(--color-bg-warning)`
n/a | `var(--color-bg-canvas)`
n/a | `var(--color-bg-canvas-inset)`
n/a | `var(--color-bg-overlay)`
`$bg-black` (`$black`) | n/a
`$bg-black-fade` (`$black-fade-50`) | n/a
`$bg-orange` (`$orange-700`) | n/a