@redocly/theme 0.18.3 → 0.18.4-patch.1

package/src/icons/RocketIcon/RocketIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className }: IconProps) => (
+  <svg
+    data-component-name="icons/RocketIcon"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.7002 1.55068C13.5251 1.49305 13.3388 1.47772 13.1567 1.50596L13.152 1.50671C11.8258 1.7252 9.24768 2.44828 6.43935 4.8604C5.65751 4.58592 4.81217 4.53466 3.99912 4.71587C3.07823 4.92111 2.24649 5.41394 1.62419 6.12309C1.45038 6.32115 1.46012 6.62011 1.64645 6.80644L3.21653 8.37652C3.16682 8.44409 3.11716 8.51231 3.06755 8.5812C2.92429 8.78013 2.94639 9.05359 3.11974 9.22694L3.17618 9.28339L2.5864 9.87317L2.58535 9.87422C2.36806 10.0928 2.24609 10.3885 2.24609 10.6967C2.24609 11.0049 2.36806 11.3006 2.58535 11.5192L2.5864 11.5203L4.47974 13.4136L4.48079 13.4147C4.69938 13.632 4.99507 13.7539 5.30329 13.7539C5.56764 13.7539 5.82278 13.6642 6.02797 13.5016C6.07134 13.4785 6.11147 13.449 6.14684 13.4136L6.72662 12.8338L6.77307 12.8803C6.94695 13.0542 7.22146 13.0758 7.42044 12.9313C7.48845 12.8819 7.55583 12.8324 7.62256 12.783L9.19307 14.3535C9.3794 14.5398 9.67836 14.5495 9.87642 14.3757C10.5856 13.7534 11.0784 12.9217 11.2836 12.0008C11.4657 11.1839 11.4131 10.3345 11.1352 9.54961C13.5373 6.75034 14.273 4.18993 14.4869 2.84653C14.5165 2.66498 14.5027 2.479 14.4467 2.30378C14.3906 2.1282 14.2937 1.96841 14.164 1.83751C14.0342 1.7066 13.8753 1.60831 13.7002 1.55068ZM10.3358 10.4241C9.77433 11.0018 9.13889 11.5852 8.41986 12.166L9.54647 13.2927C9.91995 12.8623 10.1826 12.3441 10.3076 11.7833C10.4077 11.334 10.4163 10.8719 10.3358 10.4241ZM7.40379 11.6944C12.1351 8.03789 13.2477 4.2709 13.4995 2.68816L13.4999 2.68582C13.5041 2.65984 13.5022 2.63321 13.4942 2.60813C13.4862 2.58305 13.4723 2.56022 13.4538 2.54152C13.4352 2.52282 13.4125 2.50878 13.3875 2.50054C13.363 2.49248 13.337 2.49021 13.3115 2.49391C12.1198 2.69072 9.6488 3.36687 6.93487 5.75486C6.90034 5.79743 6.85946 5.8334 6.81428 5.86196C5.99258 6.5985 5.15012 7.49283 4.31544 8.57889C4.29366 8.6174 4.26636 8.65363 4.23355 8.68644C4.23319 8.6868 4.23283 8.68716 4.23247 8.68752C4.19837 8.73243 4.16429 8.77767 4.13023 8.82323L4.18811 8.8811C4.20578 8.89449 4.22276 8.90921 4.23893 8.92526L7.09226 11.7586C7.12536 11.7915 7.15338 11.8285 7.17583 11.8684C7.22546 11.831 7.27471 11.7936 7.32359 11.7562C7.34864 11.7325 7.37553 11.7119 7.40379 11.6944ZM3.83102 7.57679C4.40831 6.85775 4.98895 6.22264 5.56449 5.66166C5.12019 5.58338 4.66217 5.59262 4.21666 5.69192C3.65578 5.81692 3.13757 6.07956 2.70726 6.45303L3.83102 7.57679ZM3.29456 10.5792L3.88329 9.9905L6.01952 12.1267L5.51323 12.633C5.47994 12.6533 5.44888 12.6775 5.42079 12.7055C5.38956 12.7365 5.34732 12.7539 5.30329 12.7539C5.25942 12.7539 5.21732 12.7366 5.18613 12.7058L3.29456 10.8142C3.2637 10.783 3.24609 10.7406 3.24609 10.6967C3.24609 10.6528 3.26371 10.6104 3.29456 10.5792Z"
+      fill="currentColor"
+      fillOpacity="0.87"
+    />
+  </svg>
+);
+
+export const RocketIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+`;

package/src/icons/RocketIcon/index.tsx

@@ -0,0 +1 @@
+export * from '@theme/icons/RocketIcon/RocketIcon';

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -3,10 +3,9 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
-  color?: string;
 }
 
-const Icon = ({ className, color = 'white' }: IconProps) => (
+const Icon = ({ className }: IconProps) => (
   <svg
     data-component-name="icons/SelectIcon"
     viewBox="0 0 16 16"
@@ -14,12 +13,12 @@ const Icon = ({ className, color = 'white' }: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
-    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
-    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill="currentColor" />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill="currentColor" />
     <path
       d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
-      fill={color}
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/index.ts

@@ -15,3 +15,9 @@ export * from '@theme/icons/SelectIcon';
 export * from '@theme/icons/BurgerIcon';
 export * from '@theme/icons/CloseIcon';
 export * from '@theme/icons/LogoutIcon';
+export * from '@theme/icons/LanguageIcon';
+export * from '@theme/icons/PointingArrowIcon';
+export * from '@theme/icons/CheckboxIcon';
+export * from '@theme/icons/ErrorIcon';
+export * from '@theme/icons/EditIcon';
+export * from '@theme/icons/RocketIcon';

package/src/index.ts

@@ -7,4 +7,4 @@ export * from './globalStyle';
 export * from './types/config';
 export * from './config';
 export * from './ui';
-export * from './I18n';
+export * from './i18n';

package/src/layouts/Forbidden.tsx

@@ -30,6 +30,10 @@ export function Forbidden(): JSX.Element {
 }
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin: 25px auto;
   font-family: var(--page-403-font-family);
   text-align: center;

package/src/layouts/NotFound.tsx

@@ -30,6 +30,10 @@ export function NotFound(): JSX.Element {
 }
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin: 25px auto;
   font-family: var(--page-404-font-family);
   text-align: center;

package/src/mocks/hooks/index.ts

@@ -34,7 +34,6 @@ export function useThemeConfig<T extends Record<string, unknown>>(
       lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
       editPage: {
         baseUrl: '',
-        text: 'Edit this page',
       },
       frontMatterKeysToResolve: ['image', 'links'],
     },

package/src/types/portal/src/shared/types/catalog.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig } from "@theme/config";
+import { CatalogFilterConfig, ScorecardStatus } from '@theme';
 
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
@@ -33,5 +33,11 @@ export type CatalogItem = {
   description?: string;
   image?: string;
   docsLink?: string;
+
+  scorecardStatus?: ScorecardStatus;
+  scorecardLevel?: string;
+  scoreCardSlug?: string;
+  tags?: unknown[];
+
   [k: string]: unknown;
 };

package/src/types/portal/src/shared/types/nav.ts

@@ -22,6 +22,7 @@ export type ResolvedNavLinkItem = {
   routeSlug?: string;
   active?: boolean;
   icon?: string;
+  srcSet?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -48,6 +49,7 @@ export type ResolvedNavGroupItem = {
   routeSlug?: string;
   active?: boolean;
   icon?: string;
+  srcSet?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -70,6 +72,7 @@ export type ResolvedNavItem =
     items?: ResolvedNavItem[]; // for typescript
     sidebar?: ResolvedNavItem[]; // for typescript
     icon?: string;
+    srcSet?: string;
     languageInsensitive?: boolean;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
   }
@@ -88,6 +91,7 @@ export type ResolvedNavItem =
     items?: ResolvedNavItem[]; // for typescript
     sidebar?: ResolvedNavItem[]; // for typescript
     icon?: string; // for typescript
+    srcSet?: string;
     languageInsensitive?: boolean; // for typescript
     [REDOCLY_TEAMS_RBAC]?: Rbac;
   };
@@ -150,6 +154,7 @@ export type NavItem = {
 };
 export interface LogoConfig {
   image?: string;
+  srcSet?: string;
   altText?: string;
   link?: string;
   favicon?: string;

package/src/ui/ArrowBack.tsx

@@ -25,7 +25,6 @@ const Arrow = ({
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/ui/Burger.tsx

@@ -32,7 +32,7 @@ const Line = styled.div`
   margin: 4px 0;
   width: 100%;
   height: 2px;
-  background: var(--text-color);
+  background: var(--border-primary);
   border-radius: 1px;
 `;
 

package/src/ui/Dropdown.tsx

@@ -36,9 +36,9 @@ const DropDownHeader = styled.div`
   align-items: center;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-primary);
   font-weight: 600;
-  color: var(--text-color);
+  color: var(--text-primary);
   background: var(--background-color);
 `;
 
@@ -48,7 +48,7 @@ const DropDownList = styled.div`
   margin: 2px 20px 0 20px;
   padding: 0;
   border-radius: 4px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-primary);
   z-index: var(--z-index-popover);
   left: 0;
   right: 0;
@@ -67,20 +67,20 @@ const ListItem = styled.div`
   background-color: var(--background-color);
   padding: 0.4em 10px;
   font-size: 1em;
-  color: var(--text-color);
+  color: var(--text-secondary);
   cursor: pointer;
   &:hover {
-    background-color: var(--color-secondary-300);
+    background-color: var(--bg-raised);
   }
   &.active {
-    background-color: var(--color-secondary-300);
+    background-color: var(--bg-raised);
   }
 `;
 
 const DropDownLink = styled(Link)`
   display: block;
   text-decoration: none;
-  color: var(--text-color);
+  color: var(--text-secondary);
 `;
 
 export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {

package/src/ui/Highlight.tsx

@@ -3,12 +3,12 @@ import { findAll } from 'highlight-words-core';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element {
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element | null {
   const { children } = props;
   const searchWords = React.useContext(HighlightContext);
 
   if (!searchWords.length) {
-    return <>children</> || null;
+    return children ? <>{children}</> : null;
   }
 
   function highlight(str: string, childIdx: number = 0) {

package/src/ui/Jumbotron.tsx

@@ -25,7 +25,7 @@ export const Jumbotron = styled(Background).attrs(() => ({
   ${({ bgImage, bgColor }) =>
     bgImage &&
     `
-      background: ${bgColor || 'var(--text-color)'} url(${bgImage});
+      background: ${bgColor || 'var(--text-base)'} url(${bgImage});
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;

package/src/ui/darkColors.tsx

@@ -1,89 +1,222 @@
 import { css } from 'styled-components';
 
 export const darkMode = css`
+  /* === Dark Theme Colors  === */
+
   /**
-     * @tokens Dark Colors
-     * @presenter Color
-     */
-  --background-color: #141414;
-  --footer-background-color: #1f1f1f;
-  --navbar-background-color: #1f1f1f;
-  --mobile-menu-background: #141414;
-  --mobile-menu-profile-background: var(--mobile-menu-background);
-  --mobile-menu-login-button-background: var(--mobile-menu-profile-background);
-  --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
-  --mobile-menu-item-active-color: #1f1f1f;
-  --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
-  --mobile-menu-control-button-color: #ffffff;
-  --mobile-menu-profile-border-color: #222222;
-  --color-primary-500: #57a5fd;
-  --color-primary-300: #15396e;
-  --color-secondary-300: #22262e;
-  --colors-translucent: rgb(50 63 75 / 40%);
-  --inline-code-text-color: #f76663;
-  --color-emphasis-400: #fff;
-  --link-hover-text-color: #57a5fd;
-  --link-text-color: #57a5fd;
-  --code-block-background-color: #1e2633;
-  --admonition-attention-background-color: var(--color-primary-300);
-  --admonition-attention-icon-color: var(--color-emphasis-700);
-  --admonition-warning-background-color: #614b17;
-  --admonition-warning-icon-color: #4c3b12;
-  --admonition-success-background-color: #267e74;
-  --admonition-success-icon-color: #38b9a5;
-  --admonition-danger-background-color: #d6524c;
-  --admonition-danger-icon-color: #d13e37;
-  --admonition-info-background-color: #696969;
-  --admonition-info-icon-color: #505050;
-  --inline-code-background-color: #1e2633;
-  --toc-item-active-background-color: #1e2633;
-  --sidebar-item-active-background-color: #1e2633;
-  --panel-response-success-heading-background-color: #38b9a5;
-  --panel-response-success-border-color: #38b9a5;
-  --panel-response-error-heading-background-color: #d6524c;
-  --panel-response-error-border-color: #d6524c;
-  --panel-samples-heading-background-color: #1e2633;
-  --panel-samples-body-background-color: #263041;
-  --panel-samples-tabs-hover-background-color: #1e2633;
-  --panel-samples-tabs-hover-border-color: #3f4f68;
-  --panel-try-it-action-button-hover-border-color: #2b4cc4;
-  --panel-try-it-action-button-hover-background-color: #2b4cc4;
-  --panel-try-it-action-button-background-color: #0065fb;
-  --button-background-color: #0065fb;
-  --button-border-color: #0065fb;
-  --button-hover-background-color: #2b4cc4;
-  --button-hover-border-color: #2b4cc4;
-  --search-input-background-color: #1b2738;
-  --search-popover-background-color: #1b2738;
-  --search-highlight-text-color: #ffff03;
-  --search-item-text-color: #ffffffcf;
-  --search-item-title-text-color: #ffffff;
-  --search-item-active-text-color: var(--text-color);
-  --search-item-active-title-text-color: var(--text-color);
-  --search-item-active-background-color: #1b2738;
-  --panel-try-it-nested-body-background-color: #263041;
-  --panel-try-it-tabs-active-background-color: #11151d;
-  --panel-try-it-tabs-hover-background-color: #141a26;
-  --color-emphasis-100: #16202e;
-  --color-secondary-400: #696969;
-  --color-emphasis-700: #fff;
-  --color-emphasis-800: #fff;
-  --copy-button-tooltip-text-color: #fff;
-  --copy-button-tooltip-background-color: var(--tooltip-background-color);
-  --tooltip-text-color: #fff;
-  --md-table-head-background-color: var(--color-secondary-300);
-  --md-tabs-hover-tab-border-color: var(--color-secondary-500);
-  --thin-tile-background-color: #1d242d;
-  --wide-tile-background-color: #1d242d;
-  --page-404-header-text-color: #fff;
-  --page-404-description-text-color: #fff;
-  --page-403-header-text-color: #fff;
-  --page-403-description-text-color: #fff;
-  --checkbox-backround-color: var(--color-secondary-900);
-  --checkbox-checked-backround-color: var(--color-primary-400);
-  --select-list-item-active-background-color: #282828;
-  --dropdown-list-item-active-background-color: #282828;
-
-  background-color: var(--background-color);
-  color: var(--text-color);
+    * @tokens Dark Base Colors
+    * @presenter Color
+    */
+
+  --color-red-1: #2c161c;
+  --color-red-2: #451d25;
+  --color-red-3: #5b252f;
+  --color-red-4: #7e2e3c;
+  --color-red-5: #a61d24;
+  --color-red-6: #d32029;
+  --color-red-7: #e84749;
+  --color-red-8: #f37370;
+  --color-red-9: #f89f9a;
+  --color-red-10: #fac8c3;
+
+  --color-green-1: #162312;
+  --color-green-2: #1d3712;
+  --color-green-3: #274916;
+  --color-green-4: #306317;
+  --color-green-5: #3c8618;
+  --color-green-6: #49aa19;
+  --color-green-7: #6abe39;
+  --color-green-8: #8fd460;
+  --color-green-9: #b2e58b;
+  --color-green-10: #d5f2bb;
+
+  --color-gold-1: #2b2111;
+  --color-gold-2: #443111;
+  --color-gold-3: #594214;
+  --color-gold-4: #7c5914;
+  --color-gold-5: #aa7714;
+  --color-gold-6: #d89614;
+  --color-gold-7: #e8b339;
+  --color-gold-8: #f3cc62;
+  --color-gold-9: #f8df8b;
+  --color-gold-10: #faedb5;
+
+  --color-blue-1: #111a2c;
+  --color-blue-2: #112545;
+  --color-blue-3: #15325b;
+  --color-blue-4: #15417e;
+  --color-blue-5: #1554ad;
+  --color-blue-6: #1668dc;
+  --color-blue-7: #3c89e8;
+  --color-blue-8: #65a9f3;
+  --color-blue-9: #8dc5f8;
+  --color-blue-10: #b7dcfa;
+
+  --color-purple-1: #1a1325;
+  --color-purple-2: #24163a;
+  --color-purple-3: #301c4d;
+  --color-purple-4: #3e2069;
+  --color-purple-5: #51258f;
+  --color-purple-6: #642ab5;
+  --color-purple-7: #854eca;
+  --color-purple-8: #ab7ae0;
+  --color-purple-9: #cda8f0;
+  --color-purple-10: #ebd7fa;
+
+  --color-magenta-1: #291321;
+  --color-magenta-2: #40162f;
+  --color-magenta-3: #551c3b;
+  --color-magenta-4: #75204f;
+  --color-magenta-5: #a02669;
+  --color-magenta-6: #cb2b83;
+  --color-magenta-7: #e0529c;
+  --color-magenta-8: #f37fb7;
+  --color-magenta-9: #f8a8cc;
+  --color-magenta-10: #fad2e3;
+
+  --color-cyan-1: #112123;
+  --color-cyan-2: #113536;
+  --color-cyan-3: #144848;
+  --color-cyan-4: #146262;
+  --color-cyan-5: #138585;
+  --color-cyan-6: #13a8a8;
+  --color-cyan-7: #33bcb7;
+  --color-cyan-8: #58d1c9;
+  --color-cyan-9: #84e2d8;
+  --color-cyan-10: #b2f1e8;
+
+  --color-yellow-1: #2b2611;
+  --color-yellow-2: #443b11;
+  --color-yellow-3: #595014;
+  --color-yellow-4: #7c6e14;
+  --color-yellow-5: #aa9514;
+  --color-yellow-6: #d8bd14;
+  --color-yellow-7: #e8d639;
+  --color-yellow-8: #f3ea62;
+  --color-yellow-9: #f8f48b;
+  --color-yellow-10: #fafab5;
+
+  --color-lime-1: #1f2611;
+  --color-lime-2: #2e3c10;
+  --color-lime-3: #3e4f13;
+  --color-lime-4: #536d13;
+  --color-lime-5: #6f9412;
+  --color-lime-6: #8bbb11;
+  --color-lime-7: #a9d134;
+  --color-lime-8: #c9e75d;
+  --color-lime-9: #e4f88b;
+  --color-lime-10: #f0fab5;
+
+  --color-geekblue-1: #131629;
+  --color-geekblue-2: #161d40;
+  --color-geekblue-3: #1c2755;
+  --color-geekblue-4: #203175;
+  --color-geekblue-5: #263ea0;
+  --color-geekblue-6: #2b4acb;
+  --color-geekblue-7: #5273e0;
+  --color-geekblue-8: #7f9ef3;
+  --color-geekblue-9: #a8c1f8;
+  --color-geekblue-10: #d2e0fa;
+
+  --color-primary-bg: #0d086e;
+  --color-primary-bg-hover: #161087;
+  --color-primary-border: #201dad;
+  --color-primary-border-hover: #2f31d4;
+  --color-primary-hover: #6678ff;
+  --color-primary-base: #434dfa;
+  --color-primary-active: #8a99ff;
+  --color-primary-text-hover: #adbcff;
+  --color-primary-text: #d6dfff;
+  --color-primary-text-active: #ebf0ff;
+
+  --color-success-bg: var(--color-cyan-3);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-7);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
+
+  --color-warning-bg: var(--color-gold-3);
+  --color-warning-bg-hover: var(--color-gold-2);
+  --color-warning-border: var(--color-gold-3);
+  --color-warning-border-hover: var(--color-gold-4);
+  --color-warning-hover: var(--color-gold-7);
+  --color-warning-base: var(--color-gold-6);
+  --color-warning-active: var(--color-gold-7);
+  --color-warning-text-hover: var(--color-gold-8);
+  --color-warning-text: var(--color-gold-9);
+  --color-warning-text-active: var(--color-gold-10);
+
+  --color-error-bg: var(--color-red-3);
+  --color-error-bg-hover: var(--color-red-2);
+  --color-error-border: var(--color-red-3);
+  --color-error-border-hover: var(--color-red-4);
+  --color-error-hover: var(--color-red-7);
+  --color-error-base: var(--color-red-6);
+  --color-error-active: var(--color-red-7);
+  --color-error-text-hover: var(--color-red-8);
+  --color-error-text: var(--color-red-9);
+  --color-error-text-active: var(--color-red-10);
+
+  --color-info-bg: var(--color-blue-1);
+  --color-info-bg-hover: var(--color-blue-2);
+  --color-info-border: var(--color-blue-3);
+  --color-info-border-hover: var(--color-blue-4);
+  --color-info-hover: var(--color-blue-7);
+  --color-info-base: var(--color-blue-6);
+  --color-info-active: var(--color-blue-7);
+  --color-info-text-hover: var(--color-blue-8);
+  --color-info-text: var(--color-blue-9);
+  --color-info-text-active: var(--color-blue-10);
+
+  /**
+    * @tokens Dark Main Colors
+    * @presenter Color
+    */
+  --color-bg-base: #ffffff;
+  --color-primary: var(--color-primary-base);
+  --color-error: var(--color-error-base);
+  --color-warning: var(--color-warning-base);
+  --color-success: var(--color-success-base);
+  --color-info: var(--color-info-base);
+
+  /**
+    * @tokens Font Colors
+    * @presenter Color
+    */
+  --text-base: #ffffff; // The base color of the typography color tokens.
+  --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
+  --text-primary: #ffffffde; // Headers, Icon hover
+  --text-secondary: #ffffff99; // Body text
+  --text-description: #ffffff61; // Caption, Description, Icon
+  --text-placeholder: #ffffff61; // Placeholder text, Disabled text
+  --text-link: var(--color-blue-6);
+
+  /**
+    * @tokens Elevation Colors
+    * @presenter Color
+    */
+
+  --bg-sunken: #2c2d33; // Sunken is the lowest elevation available.
+  --bg-base: #1b1c21; // The default elevation is the baseline with respect to all other layers.
+  --bg-raised: #24262b; // Cards, elements, inputs
+  --bg-overlay: #3a3c42; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #3a3c42c2;
+
+  --bg-base-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Elements
+  --bg-raised-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Hovers for base. Menu
+  --bg-overlay-shadow: 0px 16px 32px rgba(0, 0, 0, 0.6), 0px 6px 6px rgba(0, 0, 0, 0.4); // Use for dropdowns
+
+  /**
+    * @tokens Border Colors
+    * @presenter Color
+    */
+  --border-primary: #ffffff21; // Raised dividers
+  --border-secondary: #ffffff17; // Default dividers, borders
+
+  // @tokens End
 `;

package/src/utils/css-variables.ts

@@ -1,2 +1,4 @@
-export const getCssColorVariable = (color: string | undefined, defaultValue = 'inherit'): string =>
-  color?.startsWith('--') ? `var(${color})` : color || defaultValue;
+export const getCssColorVariable = (
+  color: string | undefined,
+  defaultValue = 'currentColor',
+): string => (color?.startsWith('--') ? `var(${color})` : color || defaultValue);

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './args-typecheck';
 export * from './color';
 export * from './urls';
 export * from './jsUtils';
+export * from './tags-parser';

package/src/utils/tags-parser.ts

@@ -0,0 +1,8 @@
+export const slug = (value: string) => {
+  const matches = value.match(/[a-zA-Z0-9_-]*/g);
+  const result = matches
+    ?.filter((value) => value !== '')
+    .join('-')
+    .toLowerCase();
+  return result ?? value;
+};

package/lib/I18n/LanguagePicker.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const LanguagePicker: (props: {
-    onChangeLanguage: (newLang: string) => void;
-}) => JSX.Element | null;

package/lib/I18n/index.d.ts

@@ -1 +0,0 @@
-export { LanguagePicker } from '../I18n/LanguagePicker';

package/lib/I18n/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LanguagePicker = void 0;
-var LanguagePicker_1 = require("../I18n/LanguagePicker");
-Object.defineProperty(exports, "LanguagePicker", { enumerable: true, get: function () { return LanguagePicker_1.LanguagePicker; } });
-//# sourceMappingURL=index.js.map

package/lib/components/OperationBadge/OperationBadge.d.ts

@@ -1,6 +0,0 @@
-export declare const OperationBadge: import("styled-components").StyledComponent<"span", any, {
-    className: `operation-type ${string}`;
-    'data-component-name': string;
-} & {
-    type: string;
-}, "className" | "data-component-name">;