Primer 18 b (#22462)

* Create migrate-colors-primer-18.js

* Update colors round 1

* upgrade primer packages

* Update index.scss

* Replace auto colors

* remove btn-primary-matte

* Turns out the class names and variables names DONT LINE UP... ugh....

* Check for allowed var colors

components/ui/Callout/Callout.tsx

@@ -23,8 +23,8 @@ export const Callout = ({
         styles.container,
         'border rounded-1 p-3 f5',
         variant === 'success' && 'color-border-success color-bg-success',
-        variant === 'info' && 'color-border-info color-bg-info',
-        variant === 'warning' && 'color-bg-warning color-border-warning'
+        variant === 'info' && 'color-border-accent-emphasis color-bg-accent',
+        variant === 'warning' && 'color-bg-attention color-border-attention-emphasis'
       )}
       dangerouslySetInnerHTML={dangerouslySetInnerHTML}
     >

components/ui/Lead/Lead.tsx

@@ -11,7 +11,7 @@ export type LeadPropsT = {
 export function Lead({ children, className, as: Component = 'div', ...restProps }: LeadPropsT) {
   return (
     <Component
-      className={cx('f2 color-text-secondary mb-3', styles.container, className)}
+      className={cx('f2 color-fg-muted mb-3', styles.container, className)}
       {...restProps}
       {...(typeof children === 'string'
         ? { dangerouslySetInnerHTML: { __html: children } }

components/ui/MarkdownContent/MarkdownContent.module.scss

@@ -38,7 +38,7 @@
     & > a[class~="doctocat-link"] {
       padding: 8px;
       margin-left: -32px;
-      color: var(--color-text-secondary);
+      color: var(--color-fg-muted);
       &:active,
       &:focus {
         outline: none;

components/ui/MarkdownContent/stylesheets/code.scss

@@ -16,28 +16,28 @@
       margin-top: 0 !important;
       border-top-left-radius: 0 !important;
       border-top-right-radius: 0 !important;
-      border-left: 1px var(--color-auto-gray-2) solid !important;
-      border-bottom: 1px var(--color-auto-gray-2) solid !important;
-      border-right: 1px var(--color-auto-gray-2) solid !important;
+      border-left: 1px var(--color-border-default) solid !important;
+      border-bottom: 1px var(--color-border-default) solid !important;
+      border-right: 1px var(--color-border-default) solid !important;
     }
   }
 
   pre [class~="redbox"] {
-    border: 2px solid var(--color-auto-red-5);
+    border: 2px solid var(--color-danger-emphasis);
     padding: 2px;
     border-radius: 2px;
     margin-right: 2px;
   }
 
   pre [class~="greenbox"] {
-    border: 2px solid var(--color-auto-green-5);
+    border: 2px solid var(--color-success-emphasis);
     padding: 2px;
     border-radius: 2px;
     margin-right: 2px;
   }
 
   pre [class~="bluebox"] {
-    border: 2px solid var(--color-auto-blue-5);
+    border: 2px solid var(--color-accent-emphasis);
     padding: 2px;
     border-radius: 2px;
     margin-right: 2px;

components/ui/MarkdownContent/stylesheets/headers.scss

@@ -12,7 +12,7 @@
 
   // all h2 headers that are links should be blue-500
   h2 a {
-    color: var(--color-auto-blue-5);
+    color: var(--color-accent-fg);
   }
   h3 {
     font-size: 1em;

components/ui/MarkdownContent/stylesheets/lists.scss

@@ -22,7 +22,7 @@
         left: 0;
         height: 100%;
         padding: 0 10px 0 0;
-        color: var(--color-auto-gray-4);
+        color: var(--color-fg-subtle);
         font-weight: bold;
         line-height: 35px;
         text-align: right;

components/ui/MarkdownContent/stylesheets/table.scss

@@ -15,7 +15,7 @@
     code {
       font-size: 85%;
       padding: 0.2em 0.4em;
-      background-color: var(--color-markdown-code-bg);
+      background-color: var(--color-canvas-subtle);
       border-radius: 6px;
     }
 
@@ -35,8 +35,8 @@
       vertical-align: top;
       z-index: 1;
       top: 0;
-      background: var(--color-bg-primary);
-      box-shadow: 0 3px 0 0 var(--color-auto-gray-4);
+      background: var(--color-canvas-default);
+      box-shadow: 0 3px 0 0 var(--color-canvas-subtle);
       padding: 12px 8px;
       border: 0px;
     }

components/ui/ScrollButton/ScrollButton.tsx

@@ -36,7 +36,7 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
       <button
         onClick={onClick}
         className={cx(
-          'tooltipped tooltipped-n tooltipped-no-delay color-bg-info-inverse color-text-inverse circle border-0'
+          'tooltipped tooltipped-n tooltipped-no-delay color-bg-accent-emphasis color-fg-on-emphasis circle border-0'
         )}
         style={{ width: 40, height: 40 }}
         aria-label={ariaLabel}