@redocly/theme 0.24.0 → 0.25.0-beta.1

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { CatalogItem } from '../../types/portal/src/shared/types/catalog';
+import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 export declare function CatalogCard({ item }: {
     item: CatalogItem;
 }): JSX.Element;
-export declare function statusToColor(status: string): "error" | "" | "warning" | "success";
+export declare function statusToColor(status: string): "" | "error" | "warning" | "success";

package/lib/components/Catalog/useCatalog.js

@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
-const telemetry_1 = require("../../mocks/telemetry");
-const usePageData_1 = require("../../mocks/hooks/usePageData");
-const utils_1 = require("../../utils");
+const telemetry_1 = require("@portal/telemetry");
+const usePageData_1 = require("@portal/hooks/usePageData");
+const utils_1 = require("@theme/utils");
 function useCatalog(items, config) {
     var _a;
     const location = (0, react_router_dom_1.useLocation)();
@@ -257,8 +257,10 @@ function collectFilterOptions(items, filters) {
             }
         }
         const options = Object.entries(usedOptions)
-            .map(([value, count]) => ({ value, count }))
-            .sort((a, b) => b.value.localeCompare(a.value));
+            .map(([value, count]) => ({ value, count }));
+        if (!staticOptions) {
+            options.sort((a, b) => b.value.localeCompare(a.value));
+        }
         if (othersCount) {
             options.push({
                 value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/lib/components/OpenApiDocs/ScorecardBadges.js

@@ -29,8 +29,6 @@ const ScorecardBadgesWrapper = styled_components_1.default.div `
 function ComplianceTag(props) {
     const { level, status, slug } = props;
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { color: (0, CatalogCard_1.statusToColor)(status), size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) },
-            level,
-            " oops")));
+        react_1.default.createElement(Tag_1.Tag, { color: (0, CatalogCard_1.statusToColor)(status), size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) }, level)));
 }
 //# sourceMappingURL=ScorecardBadges.js.map

package/lib/components/Scorecard/Card.d.ts

@@ -0,0 +1,4 @@
+export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;
+export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/lib/components/Scorecard/Card.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ScorecardCard = styled_components_1.default.div.attrs({
+    'data-component-name': 'Scorecard/ScorecardCard',
+}) `
+  color: var(--text-primary);
+  background-color: var(--bg-raised);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.05);
+
+  flex: 1;
+  min-width: 300px;
+  padding: 20px;
+`;
+exports.ScorecardCardTitle = styled_components_1.default.h3 `
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 0;
+`;
+//# sourceMappingURL=Card.js.map

package/lib/components/Scorecard/Gauge.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface GaugeProps {
+    chunks: {
+        share: number;
+        color: string;
+        title?: string;
+    }[];
+    className?: string;
+}
+export declare function Gauge({ chunks, className }: GaugeProps): JSX.Element;
+export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/Scorecard/Gauge.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeValue = exports.Gauge = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Gauge({ chunks, className }) {
+    const title = chunks
+        .map((chunk) => chunk.title)
+        .filter(Boolean)
+        .join(', ');
+    return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
+}
+exports.Gauge = Gauge;
+exports.GaugeValue = styled_components_1.default.span `
+  font-size: var(--font-size-lg);
+  line-height: var(line-height-regular);
+
+  margin-right: 5px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0;
+  text-align: right;
+  width: 70px;
+`;
+const GaugeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  height: 10px;
+  width: 100%;
+`;
+const GaugeChunk = styled_components_1.default.div `
+  width: ${(props) => props.share}%;
+  background-color: ${(props) => props.color};
+  height: 10px;
+`;
+//# sourceMappingURL=Gauge.js.map

package/lib/components/Scorecard/StatusByLevelWidget.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface StatusByLevelWidgetProps {
+    title: string;
+    levels: {
+        name: string;
+        errors: number;
+        warnings: number;
+        total: number;
+    }[];
+    className?: string;
+}
+export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusByLevelWidget = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Gauge_1 = require("../../components/Scorecard/Gauge");
+const Card_1 = require("../../components/Scorecard/Card");
+function StatusByLevelWidget(props) {
+    const { levels, title, className } = props;
+    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
+        React.createElement(Card_1.ScorecardCardTitle, null, title),
+        React.createElement(CardBody, null, levels.map((level) => {
+            const success = level.total - level.errors - level.warnings;
+            return (React.createElement(CardRow, { key: level.name },
+                React.createElement("span", null, level.name),
+                React.createElement(Gauge_1.Gauge, { chunks: [
+                        {
+                            share: (success / level.total) * 100,
+                            color: 'var(--scorecard-color-success)',
+                            title: `${success} passed`,
+                        },
+                        {
+                            share: (level.warnings / level.total) * 100,
+                            color: 'var(--scorecard-color-warning)',
+                            title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
+                        },
+                        {
+                            share: (level.errors / level.total) * 100,
+                            color: 'var(--scorecard-color-error)',
+                            title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
+                        },
+                    ] }),
+                React.createElement(Gauge_1.GaugeValue, null,
+                    success,
+                    "/",
+                    level.total)));
+        }))));
+}
+exports.StatusByLevelWidget = StatusByLevelWidget;
+const CardBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const CardRow = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  align-items: center;
+
+  > span:first-child {
+    text-align: right;
+    width: 100px;
+  }
+`;
+//# sourceMappingURL=StatusByLevelWidget.js.map

package/lib/config.d.ts

@@ -309,6 +309,9 @@ declare const scorecardConfigSchema: {
                     readonly name: {
                         readonly type: "string";
                     };
+                    readonly color: {
+                        readonly type: "string";
+                    };
                     readonly extends: {
                         readonly type: "array";
                         readonly items: {
@@ -1862,6 +1865,9 @@ export declare const themeConfigSchema: {
                             readonly name: {
                                 readonly type: "string";
                             };
+                            readonly color: {
+                                readonly type: "string";
+                            };
                             readonly extends: {
                                 readonly type: "array";
                                 readonly items: {

package/lib/config.js

@@ -280,6 +280,7 @@ const scorecardConfigSchema = {
                 required: ['name'],
                 properties: {
                     name: { type: 'string' },
+                    color: { type: 'string' },
                     extends: { type: 'array', items: { type: 'string' } },
                     rules: {
                         type: 'object',

package/lib/globalStyle.js

@@ -27,7 +27,7 @@ const Tooltip_1 = require("./components/Tooltip");
 const LastUpdated_1 = require("./components/LastUpdated");
 const NavbarLogo_1 = require("./components/NavbarLogo");
 const themeColors = (0, styled_components_1.css) `
-/* === Palette === */
+  /* === Palette === */
   /**
     * @tokens Base Colors
     * @presenter Color
@@ -290,8 +290,8 @@ const typography = (0, styled_components_1.css) `
     * @tokens Font Rendering
     */
 
-   --text-smoothing: antialiased; // text-smoothing
-   --text-rendering: optimizeSpeed; // text-rendering
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
 
   // @tokens End
 `;
@@ -385,7 +385,6 @@ const headingsTypography = (0, styled_components_1.css) `
   --heading-anchor-color: var(--color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
-
   /**
     * @tokens Heading level 1
     */
@@ -702,7 +701,6 @@ const badges = (0, styled_components_1.css) `
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
-
   // @tokens End
 `;
 const loadProgressBar = (0, styled_components_1.css) `
@@ -788,7 +786,8 @@ const docsDropdown = (0, styled_components_1.css) `
   --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
+    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 const tile = (0, styled_components_1.css) `
@@ -839,11 +838,11 @@ const pages = (0, styled_components_1.css) `
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
-    
+
   --page-403-oidc-description-font-size: var(--font-size-lg);
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
-   // @tokens End
+  // @tokens End
 `;
 const error = (0, styled_components_1.css) `
   --error-bubble-padding: var(--spacing-md);
@@ -914,6 +913,11 @@ const zIndexDepth = (0, styled_components_1.css) `
   --z-index-popover: 200;
   --z-index-overlay: 1000;
 `;
+const scorecardColors = (0, styled_components_1.css) `
+  --scorecard-color-error: var(--color-error);
+  --scorecard-color-warning: var(--color-warning);
+  --scorecard-color-success: var(--color-green-7);
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${Markdown_1.admonition}
@@ -961,6 +965,7 @@ exports.styles = (0, styled_components_1.css) `
     ${Profile_1.userProfileDropdown}
     ${Sidebar_1.versionPicker}
     ${zIndexDepth}
+    ${scorecardColors}
 
     --api-catalog-card-min-width: 250px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.24.0",
+  "version": "0.25.0-beta.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/useCatalog.ts

@@ -299,9 +299,12 @@ function collectFilterOptions(
       }
     }
 
-    const options = Object.entries(usedOptions)
-      .map(([value, count]) => ({ value, count }))
-      .sort((a, b) => b.value.localeCompare(a.value));
+    const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+
+    if (!staticOptions) {
+      options.sort((a, b) => b.value.localeCompare(a.value));
+    }
+
     if (othersCount) {
       options.push({
         value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -48,7 +48,7 @@ function ComplianceTag(props: { level: string; status: string; slug: string }) {
         size="large"
         onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
       >
-        {level} oops
+        {level}
       </Tag>
     </Link>
   );

package/src/components/Scorecard/Card.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const ScorecardCard = styled.div.attrs({
+  'data-component-name': 'Scorecard/ScorecardCard',
+})`
+  color: var(--text-primary);
+  background-color: var(--bg-raised);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.05);
+
+  flex: 1;
+  min-width: 300px;
+  padding: 20px;
+`;
+
+export const ScorecardCardTitle = styled.h3`
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 0;
+`;

package/src/components/Scorecard/Gauge.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styled from 'styled-components';
+export interface GaugeProps {
+  chunks: {
+    share: number;
+    color: string;
+    title?: string;
+  }[];
+  className?: string;
+}
+
+export function Gauge({ chunks, className }: GaugeProps) {
+  const title = chunks
+    .map((chunk) => chunk.title)
+    .filter(Boolean)
+    .join(', ');
+  return (
+    <GaugeWrapper
+      data-component-name="Scorecard/StatusByLevelWidget"
+      className={className}
+      title={title}
+    >
+      {chunks.map((chunk, i) => (
+        <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
+      ))}
+    </GaugeWrapper>
+  );
+}
+
+export const GaugeValue = styled.span`
+  font-size: var(--font-size-lg);
+  line-height: var(line-height-regular);
+
+  margin-right: 5px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0;
+  text-align: right;
+  width: 70px;
+`;
+
+const GaugeWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 10px;
+  width: 100%;
+`;
+
+const GaugeChunk = styled.div<{ share: number; color: string }>`
+  width: ${(props) => props.share}%;
+  background-color: ${(props) => props.color};
+  height: 10px;
+`;

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Gauge, GaugeValue } from '@theme/components/Scorecard/Gauge';
+import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/Card';
+
+export interface StatusByLevelWidgetProps {
+  title: string;
+  levels: { name: string; errors: number; warnings: number; total: number }[];
+  className?: string;
+}
+
+export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
+  const { levels, title, className } = props;
+  return (
+    <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
+      <ScorecardCardTitle>{title}</ScorecardCardTitle>
+      <CardBody>
+        {levels.map((level) => {
+          const success = level.total - level.errors - level.warnings;
+          return (
+            <CardRow key={level.name}>
+              <span>{level.name}</span>
+              <Gauge
+                chunks={[
+                  {
+                    share: (success / level.total) * 100,
+                    color: 'var(--scorecard-color-success)',
+                    title: `${success} passed`,
+                  },
+                  {
+                    share: (level.warnings / level.total) * 100,
+                    color: 'var(--scorecard-color-warning)',
+                    title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
+                  },
+                  {
+                    share: (level.errors / level.total) * 100,
+                    color: 'var(--scorecard-color-error)',
+                    title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
+                  },
+                ]}
+              />
+              <GaugeValue>
+                {success}/{level.total}
+              </GaugeValue>
+            </CardRow>
+          );
+        })}
+      </CardBody>
+    </ScorecardCard>
+  );
+}
+
+const CardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const CardRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  align-items: center;
+
+  > span:first-child {
+    text-align: right;
+    width: 100px;
+  }
+`;

package/src/config.ts

@@ -319,6 +319,7 @@ const scorecardConfigSchema = {
         required: ['name'],
         properties: {
           name: { type: 'string' },
+          color: { type: 'string' },
           extends: { type: 'array', items: { type: 'string' } },
           rules: {
             type: 'object',

package/src/globalStyle.ts

@@ -2,17 +2,17 @@ import { createGlobalStyle, css } from 'styled-components';
 
 import { darkMode } from '@theme/ui/darkColors';
 import { breakpoints } from '@portal/media-css';
-import { footer } from "@theme/components/Footer";
-import { sidebar, versionPicker } from "@theme/components/Sidebar";
-import { breadcrumbs } from "@theme/components/Breadcrumbs";
+import { footer } from '@theme/components/Footer';
+import { sidebar, versionPicker } from '@theme/components/Sidebar';
+import { breadcrumbs } from '@theme/components/Breadcrumbs';
 import { button } from '@theme/components/Button';
 import { tag } from '@theme/components/Tag';
 import { toc } from '@theme/components/TableOfContent';
-import { navbar } from "@theme/components/Navbar";
-import { search } from "@theme/components/Search";
-import { catalog } from "@theme/components/Catalog";
-import { filter } from "@theme/components/Filter";
-import { menu, mobileMenu } from "@theme/components/Menu";
+import { navbar } from '@theme/components/Navbar';
+import { search } from '@theme/components/Search';
+import { catalog } from '@theme/components/Catalog';
+import { filter } from '@theme/components/Filter';
+import { menu, mobileMenu } from '@theme/components/Menu';
 import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';
 import { code } from '@theme/components/CodeBlock';
 import { product, productPicker } from '@theme/components/Product';
@@ -26,7 +26,7 @@ import { lastUpdated } from '@theme/components/LastUpdated';
 import { logo } from '@theme/components/NavbarLogo';
 
 const themeColors = css`
-/* === Palette === */
+  /* === Palette === */
   /**
     * @tokens Base Colors
     * @presenter Color
@@ -290,8 +290,8 @@ const typography = css`
     * @tokens Font Rendering
     */
 
-   --text-smoothing: antialiased; // text-smoothing
-   --text-rendering: optimizeSpeed; // text-rendering
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
 
   // @tokens End
 `;
@@ -363,7 +363,7 @@ const borders = css`
   --border-radius-md: calc(var(--border-radius) * 1.5);
   --border-radius-lg: calc(var(--border-radius) * 2);
   --border-radius-xlg: calc(var(--border-radius) * 3);
-`
+`;
 
 const headingsTypography = css`
   * {
@@ -388,7 +388,6 @@ const headingsTypography = css`
   --heading-anchor-color: var(--color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
-
   /**
     * @tokens Heading level 1
     */
@@ -708,7 +707,6 @@ const badges = css`
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
-
   // @tokens End
 `;
 
@@ -797,7 +795,8 @@ const docsDropdown = css`
   --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
+    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 
@@ -850,12 +849,12 @@ const pages = css`
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
-    
+
   --page-403-oidc-description-font-size: var(--font-size-lg);
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
-   // @tokens End
-`
+  // @tokens End
+`;
 
 const error = css`
   --error-bubble-padding: var(--spacing-md);
@@ -929,6 +928,12 @@ const zIndexDepth = css`
   --z-index-overlay: 1000;
 `;
 
+const scorecardColors = css`
+  --scorecard-color-error: var(--color-error);
+  --scorecard-color-warning: var(--color-warning);
+  --scorecard-color-success: var(--color-green-7);
+`;
+
 export const styles = css`
   :root {
     ${admonition}
@@ -976,6 +981,7 @@ export const styles = css`
     ${userProfileDropdown}
     ${versionPicker}
     ${zIndexDepth}
+    ${scorecardColors}
 
     --api-catalog-card-min-width: 250px;