diff --git a/MIGRATING.md b/MIGRATING.md
index 270d74fb..71df3332 100644
--- a/MIGRATING.md
+++ b/MIGRATING.md
@@ -54,7 +54,8 @@ n/a | `.State--draft`
`.text-green` | `.color-text-success`
`.text-yellow` | `.color-text-warning`
`.text-red` | `.color-text-danger`
-`.text-white` | `.color-text-inverse`
+`.text-white` | `.color-text-white`
+n/a | `.color-text-inverse`
`.text-black` | n/a
`.text-orange` | n/a
`.text-orange-light` | n/a
@@ -150,11 +151,12 @@ n/a | `.Link`
`$text-gray-dark` (`$gray-900`) | `var(--color-text-primary)`
`$text-gray` (`$gray-600`) | `var(--color-text-secondary)`
`$text-gray-light` (`$gray-500`) | `var(--color-text-tertiary)`
-`$text-white` (`$white`) | `var(--color-text-inverse)`
`$text-blue` (`$blue-500`) | `var(--color-text-link)`
`$text-green` (`$green-600`) | `var(--color-text-success)`
`$text-red` (`$red-600`) | `var(--color-text-danger)`
`$text-yellow` (`$yellow-800`) | `var(--color-text-warning)`
+`$text-white` (`$white`) | `var(--color-text-white)`
+n/a | `var(--color-text-inverse)`
n/a | `var(--color-text-placeholder)`
n/a | `var(--color-text-disabled)`
`$text-black` (`$black`) | n/a
diff --git a/docs/content/utilities/colors.mdx b/docs/content/utilities/colors.mdx
index 1eb708a8..a0b603d8 100644
--- a/docs/content/utilities/colors.mdx
+++ b/docs/content/utilities/colors.mdx
@@ -90,18 +90,23 @@ Background colors are most commonly used for filling large blocks of content or
.color-bg-danger
```
-## Inversed colors
+## Inversed and permanent colors
⚠️ WIP: Don't use in produciton. They might still change.
-You can inverse some of the background colors to add more emphasis. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast. An exception is the `.color-bg-warning-inverse` where the default text color should be used.
+You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
```html live
.color-bg-canvas-inverse .color-text-inverse
-.color-bg-info-inverse .color-text-inverse
-.color-bg-success-inverse .color-text-inverse
+```
+
+When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
+
+```html live
+.color-bg-info-inverse .color-text-white
+.color-bg-success-inverse .color-text-white
.color-bg-warning-inverse
-.color-bg-danger-inverse .color-text-inverse
+.color-bg-danger-inverse .color-text-white
```
## Border colors
diff --git a/package-lock.json b/package-lock.json
index 004b17af..0dc2c716 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2680,9 +2680,9 @@
}
},
"@primer/primitives": {
- "version": "0.0.0-60615e1",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-60615e1.tgz",
- "integrity": "sha512-7sb7lZiT9UkYo1hTloU1XwDVA3nzab0r3Bn071H/sPRtH+4ucYtE8yynbs/m2tusloY2c0yrw0/mpDGlhoOVTA=="
+ "version": "0.0.0-724076c",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-724076c.tgz",
+ "integrity": "sha512-PQCgmcNuwFQv0tOBu2BZuRcxR6+vM5vCN5ccC2vTupA9RsjAzB5JO23FKhsRfAQ+z+fCuOHF41cp3HvooS78fQ=="
},
"@reach/router": {
"version": "1.3.3",
diff --git a/package.json b/package.json
index f8434af2..12e9281a 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
},
"dependencies": {
"@primer/octicons": "^9.1.1",
- "@primer/primitives": "0.0.0-60615e1"
+ "@primer/primitives": "0.0.0-724076c"
},
"devDependencies": {
"@octokit/rest": "^16.34.0",
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index 36e20628..48d72fb5 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -89,8 +89,6 @@
.subnav-search-context {
.btn {
- // stylelint-disable-next-line primer/colors
- color: var(--color-auto-gray-7);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss
index 85517359..f3950aab 100644
--- a/src/support/variables/colors.scss
+++ b/src/support/variables/colors.scss
@@ -47,7 +47,7 @@ $bg-yellow-dark: $yellow-700 !default;
// Text colors
$text-black: $black !default;
-$text-white: var(--color-text-inverse) !default; // $white
+$text-white: var(--color-text-white) !default; // $white
$text-blue: var(--color-text-link) !default; // $blue-500
$text-gray-dark: var(--color-text-primary) !default; // $gray-900
$text-gray-light: var(--color-text-tertiary) !default; // $gray-500
diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss
index 0cd3dfde..04efa0de 100644
--- a/src/timeline/timeline-item.scss
+++ b/src/timeline/timeline-item.scss
@@ -40,6 +40,12 @@
border-radius: 50%;
justify-content: center;
flex-shrink: 0;
+
+ &--success {
+ color: var(--color-text-white);
+ background-color: var(--color-btn-primary-bg);
+ border: $border-width $border-style var(--color-merge-box-success-indicator-border);
+ }
}
.TimelineItem-body {
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index e25993fe..68cb61ac 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -9,6 +9,7 @@
.color-text-warning { color: var(--color-text-warning) !important; }
.color-text-danger { color: var(--color-text-danger) !important; }
.color-text-inverse { color: var(--color-text-inverse) !important; }
+.color-text-white { color: var(--color-text-white) !important; }
// Icon colors
.color-icon-primary { color: var(--color-icon-primary) !important; } // stylelint-disable-line primer/colors