Update OpenAPI design (#2787)

Author: nolannbiron

.changeset/purple-wombats-heal.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': minor
+'gitbook': minor
+---
+
+new OpenAPI blocks design

.changeset/swift-gorillas-juggle.md

@@ -0,0 +1,6 @@
+---
+'gitbook': patch
+'@gitbook/react-openapi': patch
+---
+
+Support deprecated and x-deprecated-sunset in OpenAPI spec

bun.lock

@@ -29,7 +29,7 @@
         "@sentry/nextjs": "8.35.0",
         "@sindresorhus/fnv1a": "^3.1.0",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/typography": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
         "@upstash/redis": "^1.27.1",
         "ajv": "^8.12.0",
         "assert-never": "^1.2.1",

packages/gitbook/package.json

@@ -51,6 +51,7 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockOpenAPI>) {
                 icons: {
                     chevronDown: <Icon icon="chevron-down" />,
                     chevronRight: <Icon icon="chevron-right" />,
+                    plus: <Icon icon="plus" />,
                 },
                 CodeBlock: PlainCodeBlock,
                 defaultInteractiveOpened: context.mode === 'print',

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

@@ -263,32 +263,23 @@
 }
 .scalar-activate {
     width: fit-content;
-    margin: 0px 0.75rem 0.75rem auto;
     line-height: 24px;
     font-size: 0.75rem;
     cursor: pointer;
     font-size: 0.875rem;
-    font-weight: 600;
     display: flex;
     align-items: center;
     gap: 6px;
 }
 .scalar-activate-button {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    color: var(--scalar-color-blue);
-    appearance: none;
-    outline: none;
-    border: none;
-    background: transparent;
-}
-.scalar-activate-button {
-    padding: 0 0.5rem;
-}
-.scalar-activate:hover .scalar-activate-button {
-    background: var(--scalar-background-3);
-    border-radius: 3px;
+    @apply flex gap-1.5 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 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 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;
+    @apply text-sm px-2.5 py-1;
 }
 
 .scalar-app-loading {