@redocly/theme 0.64.0-next.2 → 0.64.0-next.3

package/src/core/styles/palette.ts

@@ -2,169 +2,165 @@ import { css, type FlattenSimpleInterpolation } from 'styled-components';
 
 function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolation {
   switch (palette) {
-    case 'default':
-      return css`
-        --color-brand-1: var(--color-blueberry-1);
-        --color-brand-2: var(--color-blueberry-2);
-        --color-brand-3: var(--color-blueberry-3);
-        --color-brand-4: var(--color-blueberry-4);
-        --color-brand-5: var(--color-blueberry-5);
-        --color-brand-6: var(--color-blueberry-6);
-        --color-brand-7: var(--color-blueberry-7);
-        --color-brand-8: var(--color-blueberry-8);
-        --color-brand-9: var(--color-blueberry-9);
-        --color-brand-10: var(--color-blueberry-10);
-        --color-brand-11: var(--color-blueberry-11);
-      `;
     case 'slate':
       return css`
-        --color-brand-1: #ededf2;
-        --color-brand-2: #dcdde5;
-        --color-brand-3: #c4c6d1;
-        --color-brand-4: #9b9ca8;
-        --color-brand-5: #6e6f7a;
-        --color-brand-6: #1a1c21;
-        --color-brand-7: #22242b;
-        --color-brand-8: #2a2b33;
-        --color-brand-9: #3b3c45;
-        --color-brand-10: #555761;
-        --color-brand-11: #6e6f7a;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ededf2; // @presenter Color
+        --color-brand-2: #dcdde5; // @presenter Color
+        --color-brand-3: #c4c6d1; // @presenter Color
+        --color-brand-4: #9b9ca8; // @presenter Color
+        --color-brand-5: #6e6f7a; // @presenter Color
+        --color-brand-6: #1a1c21; // @presenter Color
+        --color-brand-7: #22242b; // @presenter Color
+        --color-brand-8: #2a2b33; // @presenter Color
+        --color-brand-9: #3b3c45; // @presenter Color
+        --color-brand-10: #555761; // @presenter Color
+        --color-brand-11: #6e6f7a; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'pink':
       return css`
-        --color-brand-1: #ffe8f7;
-        --color-brand-2: #f7bfe2;
-        --color-brand-3: #ef99cf;
-        --color-brand-4: #e677bd;
-        --color-brand-5: #de59ad;
-        --color-brand-6: #d6409f;
-        --color-brand-7: #bb3d8d;
-        --color-brand-8: #a03a7b;
-        --color-brand-9: #853668;
-        --color-brand-10: #6a3055;
-        --color-brand-11: #4f2841;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ffe8f7; // @presenter Color
+        --color-brand-2: #f7bfe2; // @presenter Color
+        --color-brand-3: #ef99cf; // @presenter Color
+        --color-brand-4: #e677bd; // @presenter Color
+        --color-brand-5: #de59ad; // @presenter Color
+        --color-brand-6: #d6409f; // @presenter Color
+        --color-brand-7: #bb3d8d; // @presenter Color
+        --color-brand-8: #a03a7b; // @presenter Color
+        --color-brand-9: #853668; // @presenter Color
+        --color-brand-10: #6a3055; // @presenter Color
+        --color-brand-11: #4f2841; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'coral':
       return css`
-        --color-brand-1: #ffe8ea;
-        --color-brand-2: #fac5c9;
-        --color-brand-3: #f5a3aa;
-        --color-brand-4: #ef858d;
-        --color-brand-5: #ea6a75;
-        --color-brand-6: #e5535f;
-        --color-brand-7: #c74b55;
-        --color-brand-8: #a9434c;
-        --color-brand-9: #8b3c42;
-        --color-brand-10: #6d3338;
-        --color-brand-11: #4f282b;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ffe8ea; // @presenter Color
+        --color-brand-2: #fac5c9; // @presenter Color
+        --color-brand-3: #f5a3aa; // @presenter Color
+        --color-brand-4: #ef858d; // @presenter Color
+        --color-brand-5: #ea6a75; // @presenter Color
+        --color-brand-6: #e5535f; // @presenter Color
+        --color-brand-7: #c74b55; // @presenter Color
+        --color-brand-8: #a9434c; // @presenter Color
+        --color-brand-9: #8b3c42; // @presenter Color
+        --color-brand-10: #6d3338; // @presenter Color
+        --color-brand-11: #4f282b; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'amber':
       return css`
-        --color-brand-1: #fff4e8;
-        --color-brand-2: #feddba;
-        --color-brand-3: #fdc78c;
-        --color-brand-4: #fcb261;
-        --color-brand-5: #fb9f3a;
-        --color-brand-6: #fa8d15;
-        --color-brand-7: #d88121;
-        --color-brand-8: #b6732a;
-        --color-brand-9: #93632f;
-        --color-brand-10: #71512e;
-        --color-brand-11: #4f3c28;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #fff4e8; // @presenter Color
+        --color-brand-2: #feddba; // @presenter Color
+        --color-brand-3: #fdc78c; // @presenter Color
+        --color-brand-4: #fcb261; // @presenter Color
+        --color-brand-5: #fb9f3a; // @presenter Color
+        --color-brand-6: #fa8d15; // @presenter Color
+        --color-brand-7: #d88121; // @presenter Color
+        --color-brand-8: #b6732a; // @presenter Color
+        --color-brand-9: #93632f; // @presenter Color
+        --color-brand-10: #71512e; // @presenter Color
+        --color-brand-11: #4f3c28; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'jade':
       return css`
-        --color-brand-1: #e8fff9;
-        --color-brand-2: #b5edde;
-        --color-brand-3: #88dac4;
-        --color-brand-4: #61c8ad;
-        --color-brand-5: #42b597;
-        --color-brand-6: #29a383;
-        --color-brand-7: #2a9277;
-        --color-brand-8: #2b816b;
-        --color-brand-9: #2b715e;
-        --color-brand-10: #2a6052;
-        --color-brand-11: #284f45;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8fff9; // @presenter Color
+        --color-brand-2: #b5edde; // @presenter Color
+        --color-brand-3: #88dac4; // @presenter Color
+        --color-brand-4: #61c8ad; // @presenter Color
+        --color-brand-5: #42b597; // @presenter Color
+        --color-brand-6: #29a383; // @presenter Color
+        --color-brand-7: #2a9277; // @presenter Color
+        --color-brand-8: #2b816b; // @presenter Color
+        --color-brand-9: #2b715e; // @presenter Color
+        --color-brand-10: #2a6052; // @presenter Color
+        --color-brand-11: #284f45; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'cyan':
       return css`
-        --color-brand-1: #e8fbff;
-        --color-brand-2: #aee7f4;
-        --color-brand-3: #79d4e9;
-        --color-brand-4: #4ac2dd;
-        --color-brand-5: #22b2d2;
-        --color-brand-6: #00a2c7;
-        --color-brand-7: #0f91af;
-        --color-brand-8: #1b8097;
-        --color-brand-9: #246e7f;
-        --color-brand-10: #285c67;
-        --color-brand-11: #28484f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8fbff; // @presenter Color
+        --color-brand-2: #aee7f4; // @presenter Color
+        --color-brand-3: #79d4e9; // @presenter Color
+        --color-brand-4: #4ac2dd; // @presenter Color
+        --color-brand-5: #22b2d2; // @presenter Color
+        --color-brand-6: #00a2c7; // @presenter Color
+        --color-brand-7: #0f91af; // @presenter Color
+        --color-brand-8: #1b8097; // @presenter Color
+        --color-brand-9: #246e7f; // @presenter Color
+        --color-brand-10: #285c67; // @presenter Color
+        --color-brand-11: #28484f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'ocean':
       return css`
-        --color-brand-1: #e8f5ff;
-        --color-brand-2: #b6dfff;
-        --color-brand-3: #85caff;
-        --color-brand-4: #56b5ff;
-        --color-brand-5: #29a2ff;
-        --color-brand-6: #0090ff;
-        --color-brand-7: #1384dc;
-        --color-brand-8: #2277b9;
-        --color-brand-9: #2a6795;
-        --color-brand-10: #2d5472;
-        --color-brand-11: #283e4f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8f5ff; // @presenter Color
+        --color-brand-2: #b6dfff; // @presenter Color
+        --color-brand-3: #85caff; // @presenter Color
+        --color-brand-4: #56b5ff; // @presenter Color
+        --color-brand-5: #29a2ff; // @presenter Color
+        --color-brand-6: #0090ff; // @presenter Color
+        --color-brand-7: #1384dc; // @presenter Color
+        --color-brand-8: #2277b9; // @presenter Color
+        --color-brand-9: #2a6795; // @presenter Color
+        --color-brand-10: #2d5472; // @presenter Color
+        --color-brand-11: #283e4f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'indigo':
       return css`
-        --color-brand-1: #e8edff;
-        --color-brand-2: #b5d7ff;
-        --color-brand-3: #99aef1;
-        --color-brand-4: #7691eb;
-        --color-brand-5: #5879e4;
-        --color-brand-6: #3e63dd;
-        --color-brand-7: #3c5bc1;
-        --color-brand-8: #3952a4;
-        --color-brand-9: #364988;
-        --color-brand-10: #303e6b;
-        --color-brand-11: #28314f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8edff; // @presenter Color
+        --color-brand-2: #b5d7ff; // @presenter Color
+        --color-brand-3: #99aef1; // @presenter Color
+        --color-brand-4: #7691eb; // @presenter Color
+        --color-brand-5: #5879e4; // @presenter Color
+        --color-brand-6: #3e63dd; // @presenter Color
+        --color-brand-7: #3c5bc1; // @presenter Color
+        --color-brand-8: #3952a4; // @presenter Color
+        --color-brand-9: #364988; // @presenter Color
+        --color-brand-10: #303e6b; // @presenter Color
+        --color-brand-11: #28314f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     case 'iris':
       return css`
-        --color-brand-1: #ebebff;
-        --color-brand-2: #c8c8f7;
-        --color-brand-3: #a7a7ef;
-        --color-brand-4: #8a8ae6;
-        --color-brand-5: #7070de;
-        --color-brand-6: #5b5bd6;
-        --color-brand-7: #5353bb;
-        --color-brand-8: #4c4ca0;
-        --color-brand-9: #434385;
-        --color-brand-10: #3a3a6a;
-        --color-brand-11: #2e2e4f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ebebff; // @presenter Color
+        --color-brand-2: #c8c8f7; // @presenter Color
+        --color-brand-3: #a7a7ef; // @presenter Color
+        --color-brand-4: #8a8ae6; // @presenter Color
+        --color-brand-5: #7070de; // @presenter Color
+        --color-brand-6: #5b5bd6; // @presenter Color
+        --color-brand-7: #5353bb; // @presenter Color
+        --color-brand-8: #4c4ca0; // @presenter Color
+        --color-brand-9: #434385; // @presenter Color
+        --color-brand-10: #3a3a6a; // @presenter Color
+        --color-brand-11: #2e2e4f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
     default:
       return css`
-        --color-brand-1: #f0f4ff;
-        --color-brand-2: #dfe8ff;
-        --color-brand-3: #bfd0ff;
-        --color-brand-4: #9fb7ff;
-        --color-brand-5: #87a3ff;
-        --color-brand-6: #5f81ff;
-        --color-brand-7: #4561db;
-        --color-brand-8: #2f46b7;
-        --color-brand-9: #1e2f93;
-        --color-brand-10: #222d7a;
-        --color-brand-11: #232a61;
-        --text-color-on-color: #ffffff;
+        --button-bg-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --button-bg-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --button-bg-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+
+        --toc-item-text-color-active-legacy: var(--text-color-primary); // @presenter Color
+        --toc-item-border-color-active-legacy: var(--border-color-invers); // @presenter Color
+
+        --checkbox-border-color-legacy: var(--border-color-primary); // @presenter Color
+        --checkbox-box-color-active-legacy: var(--color-warm-grey-10); // @presenter Color
+
+        --switch-bg-color-selected-legacy: var(--color-warm-grey-9); // @presenter Color
+
+        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active); // @presenter Color
+        --md-tabs-active-tab-text-color-legacy: var(--text-color-primary); // @presenter Color
+        --md-tabs-active-tab-border-color-legacy: var(--text-color-primary); // @presenter Color
+
+        --admonition-default-bg-color-legacy: var(--color-warm-grey-2); // @presenter Color
+        --admonition-default-icon-color-legacy: var(--color-warm-grey-11); // @presenter Color
+        --admonition-default-border-color-legacy: var(--color-warm-grey-4); // @presenter Color
+
+        --menu-item-bg-color-active-legacy: var(--tree-bg-color-active); // @presenter Color
+        --menu-item-color-active-legacy: var(--tree-content-color-default); // @presenter Color
       `;
   }
 }

package/src/core/types/index.ts

@@ -20,3 +20,4 @@ export type * from './page-actions';
 export type * from './open-api-info';
 export type * from './segmented';
 export type * from './tooltip';
+export type * from './toast';

package/src/core/types/search.ts

@@ -58,6 +58,7 @@ export type SearchFacet = {
   type: SearchFacetType;
   values: string[] | SearchFacetCount[];
   index?: number;
+  queryable?: boolean;
 };
 
 export type SearchFacetCount = {

package/src/core/types/toast.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+
+export interface ToastOptions {
+  type?: ToastType;
+  title: string;
+  description?: string;
+  duration?: number;
+  onClose?: () => void;
+}
+
+export interface ToastItem extends ToastOptions {
+  id: string;
+  type: ToastType;
+  isExiting: boolean;
+}
+
+export interface ToastContextValue {
+  showToast: (options: ToastOptions) => string;
+  dismissToast: (id: string) => void;
+  updateToast: (id: string, updates: Partial<ToastOptions>) => void;
+}
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  mountId?: string;
+}

package/src/core/utils/get-auto-dismiss-duration.ts

@@ -0,0 +1,20 @@
+import type { ToastType } from '../types/toast';
+
+const SIMPLE_TOAST_DURATION_MS = 2500;
+const DETAILED_TOAST_DURATION_MS = 4000;
+
+export function getAutoDismissDuration(
+  hasDetails: boolean,
+  type: ToastType,
+  duration?: number,
+): number | null {
+  if (duration !== undefined) {
+    return duration;
+  }
+
+  if (type === 'loading') {
+    return null;
+  }
+
+  return hasDetails ? DETAILED_TOAST_DURATION_MS : SIMPLE_TOAST_DURATION_MS;
+}

package/src/core/utils/index.ts

@@ -45,3 +45,4 @@ export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
 export * from './content-segments';
 export * from './custom-catalog-options-casing';
+export * from './get-auto-dismiss-duration';

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -13,37 +13,46 @@ const Icon = ({
   <span className={className} onClick={onClick}>
     {checked ? (
       <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z"
+          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
+          fill="var(--checkbox-content-color-inverse)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
           fill="var(--checkbox-box-color-active)"
         />
         <path
-          d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
-          fill="var(--checkbox-content-color-inverse)"
-          stroke="var(--checkbox-content-color-inverse)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.36018 9.98574L10.9106 4.21938C11.0343 4.06448 10.9203 3.83984 10.7272 3.83984H10.0758C9.93597 3.83984 9.80268 3.90389 9.71608 4.01474L9.03424 4.8785L5.99975 8.72257L4.28308 6.54742C4.24025 6.49305 4.18567 6.44909 4.12342 6.41883C4.06118 6.38858 3.99269 6.37282 3.92348 6.37273H3.27208C3.07619 6.37273 2.96673 6.59854 3.08778 6.75208L5.64029 9.98581C5.82388 10.2182 6.17616 10.2168 6.36018 9.98574Z"
+          fill="var(--checkbox-box-color-active)"
         />
       </svg>
     ) : (
       <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
         fill="var(--checkbox-box-color)"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="15"
-          height="15"
-          rx="3.5"
-          stroke="var(--checkbox-border-color)"
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
+          fill="var(--checkbox-content-color-inverse)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
+          fill="var(--checkbox-border-color)"
         />
       </svg>
     )}

package/src/icons/CheckboxIcon/variables.dark.ts

@@ -3,5 +3,6 @@ import { css } from 'styled-components';
 export const checkboxDarkMode = css`
   --checkbox-box-color-disabled: var(--color-warm-grey-3);
   --checkbox-border-color-disabled: var(--border-color-primary);
-  --checkbox-content-color-inverse: var(--color-warm-grey-1);
+  --checkbox-content-color-inverse: transparent;
+  --checkbox-border-color: var(--color-brand-subtle-border, var(--checkbox-border-color-legacy));
 `;

package/src/icons/CheckboxIcon/variables.ts

@@ -7,13 +7,13 @@ export const checkbox = css`
   --checkbox-content-color-disabled: var(--text-color-disabled);
 
   --checkbox-box-color: transparent;
-  --checkbox-box-color-active: var(--color-warm-grey-10);
+  --checkbox-box-color-active: var(--color-primary-base, var(--checkbox-box-color-active-legacy));
   --checkbox-box-color-focused: var(--color-warm-grey-9);
   --checkbox-box-color-disabled: var(--color-warm-grey-1);
 
-  --checkbox-border-color: var(--border-color-primary);
+  --checkbox-border-color: var(--color-primary-border, var(--checkbox-border-color-legacy));
   --checkbox-border-color-active: var(--color-warm-grey-8);
   --checkbox-border-color-disabled: var(--border-color-secondary);
 
-  --checkbox-content-color-inverse: var(--color-white);
+  --checkbox-content-color-inverse: transparent;
 `;

package/src/icons/IdeaIcon/IdeaIcon.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
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="16"
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path d="M8.44309 12.375H2.81809V13.5H8.44309V12.375Z" />
+    <path d="M7.31809 14.625H3.94309V15.75H7.31809V14.625Z" />
+    <path d="M5.63059 0C4.13874 0 2.708 0.592632 1.65311 1.64752C0.59822 2.70242 0.00558778 4.13316 0.00558778 5.625C-0.0324517 6.4425 0.124148 7.25735 0.462504 8.00252C0.80086 8.74768 1.3113 9.40187 1.95184 9.91125C2.51434 10.4344 2.81809 10.7325 2.81809 11.25H3.94309C3.94309 10.215 3.31871 9.63562 2.71121 9.07875C2.18548 8.67615 1.76648 8.15078 1.49091 7.54866C1.21535 6.94654 1.09163 6.28603 1.13059 5.625C1.13059 4.43153 1.60469 3.28693 2.44861 2.44302C3.29252 1.59911 4.43711 1.125 5.63059 1.125C6.82406 1.125 7.96865 1.59911 8.81257 2.44302C9.65648 3.28693 10.1306 4.43153 10.1306 5.625C10.1689 6.28652 10.0443 6.94734 9.76775 7.5495C9.49119 8.15166 9.0711 8.67676 8.54434 9.07875C7.94246 9.64125 7.31809 10.2037 7.31809 11.25H8.44309C8.44309 10.7325 8.74121 10.4344 9.30934 9.90563C9.94943 9.39711 10.4596 8.74389 10.798 7.99971C11.1364 7.25552 11.2932 6.44163 11.2556 5.625C11.2556 4.88631 11.1101 4.15486 10.8274 3.47241C10.5447 2.78995 10.1304 2.16985 9.60806 1.64752C9.08573 1.12519 8.46564 0.71086 7.78318 0.428178C7.10073 0.145495 6.36927 0 5.63059 0Z" />
+  </svg>
+);
+
+export const IdeaIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/IdeaIcon/IdeaIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NewChatIcon/NewChatIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+function Icon(props: IconProps) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M11.375 11.375H2.625V2.625H7V1.75H2.625C2.39301 1.75023 2.17058 1.84249 2.00654 2.00654C1.84249 2.17058 1.75023 2.39301 1.75 2.625V11.375C1.75023 11.607 1.84249 11.8294 2.00654 11.9935C2.17058 12.1575 2.39301 12.2498 2.625 12.25H11.375C11.607 12.2498 11.8294 12.1575 11.9935 11.9935C12.1575 11.8294 12.2498 11.607 12.25 11.375V7H11.375V11.375Z"
+      />
+      <path
+        fill="currentColor"
+        d="M11.375 2.625V0.875H10.5V2.625H8.75V3.5H10.5V5.25H11.375V3.5H13.125V2.625H11.375Z"
+      />
+    </svg>
+  );
+}
+
+export const NewChatIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NewChatIcon/NewChatIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size = '14px' }) => size};
+  width: ${({ size = '14px' }) => size};
+`;

package/src/index.ts

@@ -19,6 +19,8 @@ export * from '@redocly/theme/components/Loaders/Loading';
 export * from '@redocly/theme/components/LoadMore/LoadMore';
 export * from '@redocly/theme/components/Link/Link';
 export * from '@redocly/theme/components/Portal/Portal';
+export * from '@redocly/theme/components/Toast/Toast';
+export * from '@redocly/theme/core/contexts/Toast/ToastProvider';
 export * from '@redocly/theme/components/Segmented/Segmented';
 export * from '@redocly/theme/components/LanguagePicker/LanguagePicker';
 export * from '@redocly/theme/components/Tooltip/Tooltip';
@@ -298,6 +300,8 @@ export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
 export * from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
 export * from '@redocly/theme/icons/ColorPaletteIcon/ColorPaletteIcon';
+export * from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
+export * from '@redocly/theme/icons/NewChatIcon/NewChatIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -81,8 +81,6 @@ const Wrapper = styled.div`
 `;
 
 const ViewerContent = styled.div`
-  background-color: var(--mermaid-bg-color);
-
   * {
     font-family: var(--mermaid-font-family) !important;
   }

package/src/markdoc/components/Tabs/variables.ts

@@ -52,11 +52,11 @@ export const markdownTabs = css`
   --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
   --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius
 
-  --md-tabs-active-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-text-color: var(--color-primary-text, var(--md-tabs-active-tab-text-color-legacy)); // @presenter Color
   --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
   --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
-  --md-tabs-active-tab-bg-color: var(--bg-color-active); // @presenter Color
-  --md-tabs-active-tab-border-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-bg-color: var(--color-primary-bg, var(--md-tabs-active-tab-bg-color-legacy)); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--color-primary-active, var(--md-tabs-active-tab-border-color-legacy)); // @presenter Color
 
   --md-tabs-medium-active-tab-font-size: var(--md-tabs-medium-tab-font-size); // @presenter FontSize
   --md-tabs-medium-active-tab-font-weight: var(--md-tabs-medium-tab-font-weight); // @presenter FontWeight

package/src/markdoc/components/default.ts

@@ -3,7 +3,6 @@ export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
 export * from '@redocly/theme/markdoc/components/Heading/Heading';
 export * from '@redocly/theme/markdoc/components/Mermaid/Mermaid';
-export * from '@redocly/theme/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram';
 export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/TabList';

package/src/markdoc/tags/admonition.ts

@@ -7,7 +7,7 @@ export const admonition: MarkdocSchemaWrapper = {
         type: String,
         required: true,
         default: 'info',
-        matches: ['warning', 'info', 'danger', 'success'],
+        matches: ['warning', 'info', 'danger', 'success', 'default'],
       },
       name: { type: String },
     },

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.d.ts

@@ -1,7 +0,0 @@
-import type { JSX } from 'react';
-type ExcalidrawDiagramProps = {
-    diagramHtml: string;
-    className?: string;
-};
-export declare function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element;
-export {};