@redocly/theme 0.61.0 → 0.61.1

package/lib/components/Admonition/Admonition.js

@@ -39,15 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = Admonition;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
-const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
-const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const WarningCycleIcon_1 = require("../../icons/WarningCycleIcon/WarningCycleIcon");
+const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const ErrorIcon_1 = require("../../icons/ErrorIcon/ErrorIcon");
+const InformationIcon_1 = require("../../icons/InformationIcon/InformationIcon");
 const IconsMap = {
-    warning: WarningFilledIcon_1.WarningFilledIcon,
-    success: CheckmarkFilledIcon_1.CheckmarkFilledIcon,
-    danger: CloseFilledIcon_1.CloseFilledIcon,
-    info: InformationFilledIcon_1.InformationFilledIcon,
+    warning: WarningCycleIcon_1.WarningCycleIcon,
+    success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
+    danger: ErrorIcon_1.ErrorIcon,
+    info: InformationIcon_1.InformationIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];
@@ -69,9 +69,9 @@ const Content = styled_components_1.default.div `
 const AdmonitionWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-base);
-  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
-  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  gap: var(--admonition-gap);
+  margin: var(--admonition-margin);
+  padding: var(--admonition-padding);
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -83,17 +83,12 @@ const AdmonitionWrapper = styled_components_1.default.div `
   ${({ type }) => (0, styled_components_1.css) `
     background-color: var(--admonition-${type}-bg-color);
     color: var(--admonition-${type}-text-color);
-    border-left: var(--admonition-${type}-border);
+    border: var(--admonition-${type}-border);
   `};
 
-  &:has(${Content}) {
-    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
-  }
-
   &:not(:has(${Content})) {
     --admonition-heading-font-size: var(--admonition-font-size);
     --admonition-heading-line-height: var(--admonition-line-height);
-    --admonition-icon-size: 16px;
 
     align-items: center;
     gap: calc(var(--spacing-xxs) * 1.5);
@@ -103,6 +98,7 @@ const AdmonitionWrapper = styled_components_1.default.div `
     width: var(--admonition-icon-size);
     height: var(--admonition-icon-size);
     flex-shrink: 0;
+    margin: var(--admonition-icon-margin);
 
     fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
 
@@ -115,7 +111,7 @@ const AdmonitionWrapper = styled_components_1.default.div `
 const TextContainer = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-unit);
+  gap: var(--admonition-text-gap);
   width: 100%;
 `;
 const Heading = styled_components_1.default.div `

package/lib/components/Admonition/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const admonitionDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Admonition/variables.dark.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.admonitionDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.admonitionDarkMode = (0, styled_components_1.css) `
+  --admonition-info-bg-color: color-mix(in srgb, var(--color-blue-1) 40%, transparent); // @presenter Color
+  --admonition-info-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-blue-3) 40%, transparent); // @presenter Border
+
+  --admonition-warning-bg-color: color-mix(in srgb, var(--color-carrot-1) 40%, transparent); // @presenter Color
+  --admonition-warning-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-carrot-3) 40%, transparent); // @presenter Border
+
+  --admonition-danger-bg-color: color-mix(in srgb, var(--color-raspberry-1) 40%, transparent); // @presenter Color
+  --admonition-danger-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-raspberry-3) 40%, transparent); // @presenter Border
+
+  --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
+  --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -12,23 +12,23 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-font-size: var(--font-size-base); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
-  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
-  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --admonition-heading-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-letter-spacing: 0; // @presenter LetterSpacing
   --admonition-heading-transform: none;
-
+  --admonition-heading-text-color: var(--color-warm-grey-11); // @presenter Color
   /**
   * @tokens Admonition spacing
   * @presenter Spacing
   */
 
-  --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical: var(--spacing-lg);
-  --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical-xs: var(--spacing-xs);
-  --admonition-padding-vertical-md: var(--spacing-md);
-  --admonition-icon-size: 24px;
+  --admonition-gap: var(--spacing-sm); // @presenter Spacing
+  --admonition-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --admonition-margin: var(--spacing-base) 0 var(--spacing-md) 0; // @presenter Spacing
+  --admonition-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --admonition-icon-margin: calc(var(--spacing-unit) / 2) 0; // @presenter Spacing
+  --admonition-icon-size: 18px; // @presenter Spacing
 
   /**
   * @tokens Admonition border
@@ -36,21 +36,20 @@ exports.admonition = (0, styled_components_1.css) `
 
   --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
-  --admonition-border-width: calc(var(--border-width) * 4);
+  --admonition-border-width: 1px;
 
   /**
   * @tokens Admonition type info
   */
 
   --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
-  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-active); // @presenter Color
   --admonition-info-border-color: var(--color-info-border); // @presenter Color
   --admonition-info-border-style: var(--admonition-border-style);
   --admonition-info-border-width: var(--admonition-border-width);
   --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
-  --admonition-info-icon: none;
 
   /**
   * @tokens Admonition type warning
@@ -58,42 +57,39 @@ exports.admonition = (0, styled_components_1.css) `
 
   /* warning */
   --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
-  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-active); // @presenter Color
   --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
   --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
-  --admonition-warning-icon: none;
 
   /**
   * @tokens Admonition type danger
   */
 
   --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
-  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-active); // @presenter Color
   --admonition-danger-border-color: var(--color-error-border); // @presenter Color
   --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
-  --admonition-danger-icon: none;
 
   /**
   * @tokens Admonition type success
   */
 
   --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
-  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-active); // @presenter Color
   --admonition-success-border-color: var(--color-success-border); // @presenter Color
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
-  --admonition-success-icon: none;
 
   // @tokens End
 `;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -44,6 +44,7 @@ const CloseIcon_1 = require("../../../../icons/CloseIcon/CloseIcon");
 const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
+const constants_1 = require("../../../../core/constants");
 const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -53,12 +54,13 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
     const { translate } = useTranslate();
     const { currentLocale } = useL10nConfig();
     const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
+    const normalizedLocale = currentLocale && currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
     const versionHistoryItems = (0, react_1.useMemo)(() => (0, utils_1.transformRevisionsToVersionHistory)({
         revisions,
         currentRevisionDate: revision,
         currentVersion: version,
-        locale: currentLocale,
-    }), [revisions, revision, version, currentLocale]);
+        locale: normalizedLocale,
+    }), [revisions, revision, version, normalizedLocale]);
     const activeRevisionLabel = (0, react_1.useMemo)(() => {
         var _a;
         const itemWithActiveRevision = versionHistoryItems.find((item) => { var _a; return (_a = item.revisions) === null || _a === void 0 ? void 0 : _a.some((revision) => revision.isActive); });

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,4 +1,5 @@
 export declare const useColorSwitcher: () => {
+    initActiveColorMode: () => void;
     isSwitcherHidden: boolean | undefined;
     switchColorMode: (mode?: string) => void;
     activeColorMode: string;

package/lib/core/hooks/use-color-switcher.js

@@ -38,7 +38,12 @@ const useColorSwitcher = () => {
         telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
         setActiveColorMode(newMode);
     };
+    /**
+     * @deprecated color mode is automatically initialized when the hook is mounted
+     */
+    const initActiveColorMode = (0, react_1.useCallback)(() => { }, []);
     return {
+        initActiveColorMode,
         isSwitcherHidden: themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.hide,
         switchColorMode,
         activeColorMode,

package/lib/core/styles/dark.js

@@ -17,6 +17,7 @@ const variables_dark_12 = require("../../components/Catalog/variables.dark");
 const variables_dark_13 = require("../../components/PageActions/variables.dark");
 const variables_dark_14 = require("../../components/Tooltip/variables.dark");
 const variables_dark_15 = require("../../components/Banner/variables.dark");
+const variables_dark_16 = require("../../components/Admonition/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -329,6 +330,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_13.pageActionsDarkMode}
   ${variables_dark_14.tooltipDarkMode}
   ${variables_dark_15.bannerDarkMode}
+  ${variables_dark_16.admonitionDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/icons/WarningCycleIcon/WarningCycleIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WarningCycleIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/WarningCycleIcon/WarningCycleIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningCycleIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9 1.125C7.44248 1.125 5.91992 1.58686 4.62489 2.45218C3.32985 3.31749 2.32049 4.5474 1.72445 5.98637C1.12841 7.42534 0.972461 9.00874 1.27632 10.5363C1.58018 12.0639 2.3302 13.4671 3.43154 14.5685C4.53288 15.6698 5.93607 16.4198 7.46367 16.7237C8.99127 17.0275 10.5747 16.8716 12.0136 16.2756C13.4526 15.6795 14.6825 14.6702 15.5478 13.3751C16.4131 12.0801 16.875 10.5575 16.875 9C16.875 6.91142 16.0453 4.90838 14.5685 3.43153C13.0916 1.95469 11.0886 1.125 9 1.125ZM9 15.75C7.66498 15.75 6.35994 15.3541 5.2499 14.6124C4.13987 13.8707 3.27471 12.8165 2.76382 11.5831C2.25293 10.3497 2.11925 8.99251 2.3797 7.68314C2.64015 6.37377 3.28303 5.17103 4.22703 4.22703C5.17104 3.28302 6.37377 2.64015 7.68314 2.3797C8.99252 2.11925 10.3497 2.25292 11.5831 2.76381C12.8165 3.2747 13.8707 4.13987 14.6124 5.2499C15.3541 6.35993 15.75 7.66498 15.75 9C15.75 10.7902 15.0388 12.5071 13.773 13.773C12.5071 15.0388 10.7902 15.75 9 15.75Z" }),
+    react_1.default.createElement("path", { d: "M9.5625 4.5H8.4375V10.6875H9.5625V4.5Z" }),
+    react_1.default.createElement("path", { d: "M9 12.375C8.83313 12.375 8.67 12.4245 8.53124 12.5172C8.39249 12.6099 8.28434 12.7417 8.22048 12.8959C8.15662 13.05 8.13991 13.2197 8.17247 13.3834C8.20502 13.547 8.28538 13.6974 8.40338 13.8154C8.52138 13.9334 8.67172 14.0137 8.8354 14.0463C8.99907 14.0788 9.16872 14.0621 9.32289 13.9983C9.47707 13.9344 9.60884 13.8263 9.70156 13.6875C9.79427 13.5488 9.84375 13.3856 9.84375 13.2188C9.84375 12.995 9.75486 12.7804 9.59662 12.6221C9.43839 12.4639 9.22378 12.375 9 12.375Z" })));
+exports.WarningCycleIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WarningCycleIcon/WarningCycleIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WarningCycleIcon.js.map

package/lib/index.d.ts

@@ -194,6 +194,7 @@ export * from './icons/ViewOffIcon/ViewOffIcon';
 export * from './icons/CircleDashIcon/CircleDashIcon';
 export * from './icons/RestartIcon/RestartIcon';
 export * from './icons/WarningFilledIcon/WarningFilledIcon';
+export * from './icons/WarningCycleIcon/WarningCycleIcon';
 export * from './icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
 export * from './icons/InformationFilledIcon/InformationFilledIcon';
 export * from './icons/BareMetalServerIcon/BareMetalServerIcon';

package/lib/index.js

@@ -257,6 +257,7 @@ __exportStar(require("./icons/ViewOffIcon/ViewOffIcon"), exports);
 __exportStar(require("./icons/CircleDashIcon/CircleDashIcon"), exports);
 __exportStar(require("./icons/RestartIcon/RestartIcon"), exports);
 __exportStar(require("./icons/WarningFilledIcon/WarningFilledIcon"), exports);
+__exportStar(require("./icons/WarningCycleIcon/WarningCycleIcon"), exports);
 __exportStar(require("./icons/CheckmarkFilledIcon/CheckmarkFilledIcon"), exports);
 __exportStar(require("./icons/InformationFilledIcon/InformationFilledIcon"), exports);
 __exportStar(require("./icons/BareMetalServerIcon/BareMetalServerIcon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.0",
+  "version": "0.61.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.5.2",
-    "@shikijs/types": "1.24.2",
+    "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/file-saver": "2.0.7",

package/src/components/Admonition/Admonition.tsx

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 
 import type { FC, JSX } from 'react';
 
-import { WarningFilledIcon } from '@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon';
-import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
-import { InformationFilledIcon } from '@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon';
+import { WarningCycleIcon } from '@redocly/theme/icons/WarningCycleIcon/WarningCycleIcon';
+import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { ErrorIcon } from '@redocly/theme/icons/ErrorIcon/ErrorIcon';
+import { InformationIcon } from '@redocly/theme/icons/InformationIcon/InformationIcon';
 
 type AdmonitionTypeProps = {
   type: 'warning' | 'success' | 'danger' | 'info';
@@ -20,10 +20,10 @@ export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
 };
 
 const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
-  warning: WarningFilledIcon,
-  success: CheckmarkFilledIcon,
-  danger: CloseFilledIcon,
-  info: InformationFilledIcon,
+  warning: WarningCycleIcon,
+  success: CheckmarkOutlineIcon,
+  danger: ErrorIcon,
+  info: InformationIcon,
 };
 
 export function Admonition({
@@ -65,9 +65,9 @@ const Content = styled.div`
 const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-base);
-  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
-  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  gap: var(--admonition-gap);
+  margin: var(--admonition-margin);
+  padding: var(--admonition-padding);
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -79,17 +79,12 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
   ${({ type }) => css`
     background-color: var(--admonition-${type}-bg-color);
     color: var(--admonition-${type}-text-color);
-    border-left: var(--admonition-${type}-border);
+    border: var(--admonition-${type}-border);
   `};
 
-  &:has(${Content}) {
-    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
-  }
-
   &:not(:has(${Content})) {
     --admonition-heading-font-size: var(--admonition-font-size);
     --admonition-heading-line-height: var(--admonition-line-height);
-    --admonition-icon-size: 16px;
 
     align-items: center;
     gap: calc(var(--spacing-xxs) * 1.5);
@@ -99,6 +94,7 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
     width: var(--admonition-icon-size);
     height: var(--admonition-icon-size);
     flex-shrink: 0;
+    margin: var(--admonition-icon-margin);
 
     fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
 
@@ -112,7 +108,7 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-unit);
+  gap: var(--admonition-text-gap);
   width: 100%;
 `;
 

package/src/components/Admonition/variables.dark.ts

@@ -0,0 +1,15 @@
+import { css } from "styled-components";
+
+export const admonitionDarkMode = css`
+  --admonition-info-bg-color: color-mix(in srgb, var(--color-blue-1) 40%, transparent); // @presenter Color
+  --admonition-info-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-blue-3) 40%, transparent); // @presenter Border
+
+  --admonition-warning-bg-color: color-mix(in srgb, var(--color-carrot-1) 40%, transparent); // @presenter Color
+  --admonition-warning-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-carrot-3) 40%, transparent); // @presenter Border
+
+  --admonition-danger-bg-color: color-mix(in srgb, var(--color-raspberry-1) 40%, transparent); // @presenter Color
+  --admonition-danger-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-raspberry-3) 40%, transparent); // @presenter Border
+
+  --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
+  --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+`;

package/src/components/Admonition/variables.ts

@@ -10,23 +10,23 @@ export const admonition = css`
   --admonition-font-size: var(--font-size-base); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
-  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
-  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --admonition-heading-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-letter-spacing: 0; // @presenter LetterSpacing
   --admonition-heading-transform: none;
-
+  --admonition-heading-text-color: var(--color-warm-grey-11); // @presenter Color
   /**
   * @tokens Admonition spacing
   * @presenter Spacing
   */
 
-  --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical: var(--spacing-lg);
-  --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical-xs: var(--spacing-xs);
-  --admonition-padding-vertical-md: var(--spacing-md);
-  --admonition-icon-size: 24px;
+  --admonition-gap: var(--spacing-sm); // @presenter Spacing
+  --admonition-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --admonition-margin: var(--spacing-base) 0 var(--spacing-md) 0; // @presenter Spacing
+  --admonition-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --admonition-icon-margin: calc(var(--spacing-unit) / 2) 0; // @presenter Spacing
+  --admonition-icon-size: 18px; // @presenter Spacing
 
   /**
   * @tokens Admonition border
@@ -34,21 +34,20 @@ export const admonition = css`
 
   --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
-  --admonition-border-width: calc(var(--border-width) * 4);
+  --admonition-border-width: 1px;
 
   /**
   * @tokens Admonition type info
   */
 
   --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
-  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-active); // @presenter Color
   --admonition-info-border-color: var(--color-info-border); // @presenter Color
   --admonition-info-border-style: var(--admonition-border-style);
   --admonition-info-border-width: var(--admonition-border-width);
   --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
-  --admonition-info-icon: none;
 
   /**
   * @tokens Admonition type warning
@@ -56,42 +55,39 @@ export const admonition = css`
 
   /* warning */
   --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
-  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-active); // @presenter Color
   --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
   --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
-  --admonition-warning-icon: none;
 
   /**
   * @tokens Admonition type danger
   */
 
   --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
-  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-active); // @presenter Color
   --admonition-danger-border-color: var(--color-error-border); // @presenter Color
   --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
-  --admonition-danger-icon: none;
 
   /**
   * @tokens Admonition type success
   */
 
   --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
-  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-active); // @presenter Color
   --admonition-success-border-color: var(--color-success-border); // @presenter Color
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
-  --admonition-success-icon: none;
 
   // @tokens End
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -6,6 +6,7 @@ import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
+import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
 
 import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
 
@@ -31,15 +32,18 @@ export function CatalogEntityHistorySidebar({
 
   const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
 
+  const normalizedLocale =
+    currentLocale && currentLocale !== DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
+
   const versionHistoryItems = useMemo(
     () =>
       transformRevisionsToVersionHistory({
         revisions,
         currentRevisionDate: revision,
         currentVersion: version,
-        locale: currentLocale,
+        locale: normalizedLocale,
       }),
-    [revisions, revision, version, currentLocale],
+    [revisions, revision, version, normalizedLocale],
   );
   const activeRevisionLabel = useMemo(() => {
     const itemWithActiveRevision = versionHistoryItems.find((item) =>

package/src/core/hooks/use-color-switcher.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 
 import { useMount } from '@redocly/theme/core/hooks';
 
@@ -54,7 +54,13 @@ export const useColorSwitcher = () => {
     setActiveColorMode(newMode);
   };
 
+  /**
+   * @deprecated color mode is automatically initialized when the hook is mounted
+   */
+  const initActiveColorMode = useCallback(() => {}, []);
+
   return {
+    initActiveColorMode,
     isSwitcherHidden: themeColorMode?.hide,
     switchColorMode,
     activeColorMode,

package/src/core/styles/dark.ts

@@ -15,6 +15,7 @@ import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dar
 import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
+import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -330,6 +331,7 @@ export const darkMode = css`
   ${pageActionsDarkMode}
   ${tooltipDarkMode}
   ${bannerDarkMode}
+  ${admonitionDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/icons/WarningCycleIcon/WarningCycleIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M9 1.125C7.44248 1.125 5.91992 1.58686 4.62489 2.45218C3.32985 3.31749 2.32049 4.5474 1.72445 5.98637C1.12841 7.42534 0.972461 9.00874 1.27632 10.5363C1.58018 12.0639 2.3302 13.4671 3.43154 14.5685C4.53288 15.6698 5.93607 16.4198 7.46367 16.7237C8.99127 17.0275 10.5747 16.8716 12.0136 16.2756C13.4526 15.6795 14.6825 14.6702 15.5478 13.3751C16.4131 12.0801 16.875 10.5575 16.875 9C16.875 6.91142 16.0453 4.90838 14.5685 3.43153C13.0916 1.95469 11.0886 1.125 9 1.125ZM9 15.75C7.66498 15.75 6.35994 15.3541 5.2499 14.6124C4.13987 13.8707 3.27471 12.8165 2.76382 11.5831C2.25293 10.3497 2.11925 8.99251 2.3797 7.68314C2.64015 6.37377 3.28303 5.17103 4.22703 4.22703C5.17104 3.28302 6.37377 2.64015 7.68314 2.3797C8.99252 2.11925 10.3497 2.25292 11.5831 2.76381C12.8165 3.2747 13.8707 4.13987 14.6124 5.2499C15.3541 6.35993 15.75 7.66498 15.75 9C15.75 10.7902 15.0388 12.5071 13.773 13.773C12.5071 15.0388 10.7902 15.75 9 15.75Z" />
+    <path d="M9.5625 4.5H8.4375V10.6875H9.5625V4.5Z" />
+    <path d="M9 12.375C8.83313 12.375 8.67 12.4245 8.53124 12.5172C8.39249 12.6099 8.28434 12.7417 8.22048 12.8959C8.15662 13.05 8.13991 13.2197 8.17247 13.3834C8.20502 13.547 8.28538 13.6974 8.40338 13.8154C8.52138 13.9334 8.67172 14.0137 8.8354 14.0463C8.99907 14.0788 9.16872 14.0621 9.32289 13.9983C9.47707 13.9344 9.60884 13.8263 9.70156 13.6875C9.79427 13.5488 9.84375 13.3856 9.84375 13.2188C9.84375 12.995 9.75486 12.7804 9.59662 12.6221C9.43839 12.4639 9.22378 12.375 9 12.375Z" />
+  </svg>
+);
+
+export const WarningCycleIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningCycleIcon/WarningCycleIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -221,6 +221,7 @@ export * from '@redocly/theme/icons/ViewOffIcon/ViewOffIcon';
 export * from '@redocly/theme/icons/CircleDashIcon/CircleDashIcon';
 export * from '@redocly/theme/icons/RestartIcon/RestartIcon';
 export * from '@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon';
+export * from '@redocly/theme/icons/WarningCycleIcon/WarningCycleIcon';
 export * from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
 export * from '@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon';
 export * from '@redocly/theme/icons/BareMetalServerIcon/BareMetalServerIcon';