diff --git a/docs/content/support/v16-migration.mdx b/docs/content/support/v16-migration.mdx index c8805c76..61836e31 100644 --- a/docs/content/support/v16-migration.mdx +++ b/docs/content/support/v16-migration.mdx @@ -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