Add "original" color step and apply to bg-primary-solid elements (#3618)

Author: zenoachtig

.changeset/sour-rules-explain.md

@@ -0,0 +1,6 @@
+---
+"@gitbook/colors": minor
+"gitbook": patch
+---
+
+Add `original` background color step

packages/colors/src/transformations.ts

@@ -19,7 +19,7 @@ export enum ColorCategory {
 }
 
 type ColorSubScale = {
-    [key: string]: number;
+    [key: string]: number | string;
 };
 
 /**
@@ -56,6 +56,8 @@ export const scale: Record<ColorCategory, ColorSubScale> = {
         solid: 9,
         /** Hovered solid backgrounds */
         'solid-hover': 10,
+        /** Original color */
+        original: 'original',
     },
     [ColorCategory.text]: {
         /** Very low-contrast text

packages/gitbook/src/components/DocumentView/Integration/contentkit.css

@@ -99,7 +99,7 @@
 }
 
 .contentkit-button-style-primary {
-    @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover ring-0 contrast-more:ring-1;
+    @apply bg-primary-original text-contrast-primary-original hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover ring-0 contrast-more:ring-1;
 }
 
 .contentkit-button-style-secondary {

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

@@ -272,9 +272,8 @@ body {
 }
 .scalar-activate-button {
     @apply flex gap-2 items-center;
-    @apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start;
-    @apply ring-1 ring-tint hover:ring-tint-hover;
-    @apply shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none;
+    @apply bg-primary-original text-contrast-primary-original hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start;
+    @apply shadow-sm shadow-primary dark:shadow-primary-1 hover:shadow-md active:shadow-none;
     @apply contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12;
     @apply hover:scale-105 active:scale-100 transition-all;
     @apply grow-0 shrink-0 truncate;

packages/gitbook/src/components/DocumentView/StepperStep.tsx

@@ -36,8 +36,8 @@ export function StepperStep(props: BlockProps<DocumentBlockStepperStep>) {
             <div className="relative select-none">
                 <div
                     className={tcls(
-                        'can-override-bg can-override-text flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-solid theme-muted:bg-primary-subtle tabular-nums',
-                        'font-medium text-contrast-primary-solid theme-muted:text-primary'
+                        'can-override-bg can-override-text flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-original theme-muted:bg-primary-subtle tabular-nums contrast-more:bg-primary-solid',
+                        'font-medium text-contrast-primary-original theme-muted:text-primary contrast-more:text-contrast-primary-solid'
                     )}
                 >
                     {index + 1}

packages/gitbook/src/components/SiteSections/SiteSectionList.tsx

@@ -110,7 +110,7 @@ export function SiteSectionListItem(props: {
                 className={tcls(
                     'flex size-8 shrink-0 items-center justify-center rounded-md straight-corners:rounded-none bg-tint-subtle text-lg text-tint leading-none shadow-tint shadow-xs ring-1 ring-tint-subtle transition-transform group-hover/section-link:scale-110 group-hover/section-link:ring-tint-hover group-active/section-link:scale-90 group-active/section-link:shadow-none contrast-more:text-tint-strong dark:shadow-none',
                     isActive
-                        ? 'bg-primary tint:bg-primary-solid text-primary-subtle tint:text-contrast-primary-solid shadow-md shadow-primary ring-primary group-hover/section-link:ring-primary-hover, contrast-more:text-primary contrast-more:ring-2 contrast-more:ring-primary'
+                        ? 'bg-primary tint:bg-primary-original text-primary-subtle tint:text-contrast-primary-original shadow-md shadow-primary ring-primary group-hover/section-link:ring-primary-hover, contrast-more:text-primary contrast-more:ring-2 contrast-more:ring-primary'
                         : null
                 )}
             >

packages/gitbook/src/components/primitives/Button.tsx

@@ -25,11 +25,13 @@ type ButtonProps = {
 
 export const variantClasses = {
     primary: [
-        'bg-primary-solid',
-        'text-contrast-primary-solid',
+        'bg-primary-original',
+        'text-contrast-primary-original',
         'hover:bg-primary-solid-hover',
         'hover:text-contrast-primary-solid-hover',
         'border-0',
+        'contrast-more:bg-primary-solid',
+        'contrast-more:text-contrast-primary-solid',
         'contrast-more:border',
         'disabled:bg-primary-subtle',
         'disabled:text-primary/8',

packages/gitbook/src/components/primitives/Checkbox.tsx

@@ -31,8 +31,8 @@ export const Checkbox = React.forwardRef<
             'flex',
             'items-center',
             'justify-center',
-            'data-[state=checked]:bg-primary-solid',
-            'data-[state=checked]:text-contrast-primary-solid',
+            'data-[state=checked]:bg-primary-original',
+            'data-[state=checked]:text-contrast-primary-original',
             'contrast-more:ring-tint-12',
             { small: 'size-4', medium: 'size-5' }[size],
             className