@redocly/theme 0.25.1 → 0.25.3

package/src/components/Sidebar/VersionPicker.tsx

@@ -16,10 +16,6 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   const { versionPicker } = themeConfig;
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.versionPicker.label',
-    unversioned: 'theme.versionPicker.unversioned',
-  };
 
   const { versions = [], onChange } = props;
   const options = versions.map((version) => {
@@ -40,11 +36,11 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
 
   return (
     <VersionsPickerWrapper>
-      <VersionPickerLabel data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Version:')}
+      <VersionPickerLabel data-translation-key="theme.versionPicker.label">
+        {translate('theme.versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
-        placeholder={translate(translationKeys.unversioned, 'All versions')}
+        placeholder={translate('theme.versionPicker.unversioned', 'All versions')}
         disabled={!options.length}
         options={options}
         value={value}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -35,9 +35,6 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   );
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    header: 'theme.toc.header',
-  };
 
   if (toc?.hide) {
     return null;
@@ -48,8 +45,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
-            <TocHeader data-translation-key={translationKeys.header}>
-              {translate(translationKeys.header, toc.header || 'On this page')}
+            <TocHeader data-translation-key="theme.toc.header">
+              {translate('theme.toc.header', toc.header || 'On this page')}
             </TocHeader>
           ) : null}
           {displayedHeadings.map((heading: MdHeading | null, idx: number) => {

package/src/components/Tabs/Tab.tsx

@@ -25,21 +25,45 @@ export function Tab({ activeTab, label, onClick, className }: TabProps): JSX.Ele
 const TabItem = styled.li<{ active: boolean }>`
   display: inline-block;
   list-style: none;
-  padding: 0.75rem 1rem;
   cursor: pointer;
 
+  color: var(--md-tabs-tab-text-color);
+  font-size: var(--md-tabs-tab-font-size);
+  font-family: var(--md-tabs-tab-font-family);
+  font-style: var(--md-tabs-tab-font-style);
+  font-weight: var(--md-tabs-tab-font-weight);
+  background-color: var(--md-tabs-tab-background-color);
+  border-radius: var(--md-tabs-tab-border-radius);
+  padding: var(--md-tabs-tab-padding);
+  border: var(--md-tabs-tab-border);
+  border-width: var(--md-tabs-tab-border-width);
+
   ${({ active }) =>
     active
-      ? `
-      background-color: var(--background-color);
+      ? `      
+      color: var(--md-tabs-active-tab-text-color);
+      font-size: var(--md-tabs-active-tab-font-size);
+      font-family: var(--md-tabs-active-tab-font-family);
+      font-style: var(--md-tabs-active-tab-font-style);
+      font-weight: var(--md-tabs-active-tab-font-weight);
+      background-color: var(--md-tabs-active-tab-background-color);
+      border-radius: var(--md-tabs-active-tab-border-radius);
+      padding: var(--md-tabs-active-tab-padding);
       border: solid var(--md-tabs-active-tab-border-color);
-      border-width: 0 0 1px 0;
-      color: var(--text-primary);
+      border-width: var(--md-tabs-active-tab-border-width);
     `
       : `
     &:hover {
+      color: var(--md-tabs-hover-tab-text-color);
+      font-size: var(--md-tabs-hover-tab-font-size);
+      font-family: var(--md-tabs-hover-tab-font-family);
+      font-style: var(--md-tabs-hover-tab-font-style);
+      font-weight: var(--md-tabs-hover-tab-font-weight);
+      background-color: var(--md-tabs-hover-tab-background-color);
+      border-radius: var(--md-tabs-hover-tab-border-radius);
+      padding: var(--md-tabs-hover-tab-padding);
       border: solid var(--md-tabs-hover-tab-border-color);
-      border-width: 0 0 1px 0;
+      border-width: var(--md-tabs-hover-tab-border-width);
     }
   `}
 `;

package/src/components/Tabs/Tabs.tsx

@@ -39,7 +39,15 @@ export function Tabs(props: TabsProps): JSX.Element {
 }
 
 const TabsContainer = styled.div`
-  margin: 10px 0;
+  color: var(--md-tabs-container-text-color);
+  font-size: var(--md-tabs-container-font-size);
+  font-family: var(--md-tabs-container-font-family);
+  font-style: var(--md-tabs-container-font-style);
+  font-weight: var(--md-tabs-container-font-weight);
+  background-color: var(--md-tabs-container-background-color);
+  margin: var(--md-tabs-container-margin);
+  padding: var(--md-tabs-container-padding);
+  border: var(--md-tabs-container-border);
 
   ol[class^='Tabs__TabList'] {
     margin: 0;
@@ -48,18 +56,24 @@ const TabsContainer = styled.div`
 `;
 
 const TabList = styled.ol`
-  color: var(--md-tabs-tab-text-color);
-  padding: 0;
+  padding: var(--md-tabs-padding);
   margin-block-end: 0;
-  border: solid var(--border-primary);
-  border-width: 0 0 1px 0;
+  border: var(--md-tabs-border);
+  border-width: var(--md-tabs-border-width);
 
   li[class^='Tab__TabItem'] {
-    margin: 0;
-    margin-bottom: -1px;
+    margin: var(--md-tabs-tab-margin);
   }
 `;
 
 const TabContent = styled.div`
-  padding: 1rem 0;
+  color: var(--md-tabs-content-text-color);
+  font-size: var(--md-tabs-content-font-size);
+  font-family: var(--md-tabs-content-font-family);
+  font-style: var(--md-tabs-content-font-style);
+  font-weight: var(--md-tabs-content-font-weight);
+  background-color: var(--md-tabs-content-background-color);
+  margin: var(--md-tabs-content-margin);
+  padding: var(--md-tabs-content-padding);
+  border: var(--md-tabs-content-border);
 `;

package/src/layouts/Forbidden.tsx

@@ -6,24 +6,15 @@ import { useTranslate } from '@portal/hooks';
 
 export function Forbidden(): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.page.forbidden.title',
-    homeButton: 'theme.page.homeButton',
-  };
 
   return (
     <Wrapper data-component-name="Pages/Forbidden">
       <Header>403</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/NotFound.tsx

@@ -6,24 +6,15 @@ import { useTranslate } from '@portal/hooks';
 
 export function NotFound(): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.page.notFound.title',
-    homeButton: 'theme.page.homeButton',
-  };
 
   return (
     <Wrapper data-component-name="Pages/NotFound">
       <Header>404</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, `It looks like you're lost`)}
+      <Description data-translation-key="theme.page.notFound.title">
+        {translate('theme.page.notFound.title', "It looks like you're lost")}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/OIDCForbidden.tsx

@@ -9,10 +9,6 @@ export function OIDCForbidden(): JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
   const [errorDescription, setErrorDescription] = useState<string>('');
 
-  const translationKeys = {
-    title: 'theme.page.forbidden.title',
-  };
-
   // use whatever you want here
   const URL_REGEX =
     /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
@@ -38,8 +34,8 @@ export function OIDCForbidden(): JSX.Element {
   return (
     <Wrapper data-component-name="Pages/OIDCForbidden">
       <Header>403</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
       {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
     </Wrapper>

package/src/mocks/hooks/index.ts

@@ -1,5 +1,7 @@
+import type { TFunction } from '@redocly/portal-types';
+
 import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '@theme/config';
-import type { ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { ResolvedNavItem, Version } from '@theme/types/portal';
 import type { FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
@@ -76,11 +78,10 @@ export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): F
   throw new Error('Mock not implemented yet.');
 }
 
-export function useTranslate() {
-  const translate: TFunction = (value?: string, options?: { defaultValue: string } | string) =>
-    (typeof options === 'string' ? options : options?.defaultValue) || value || '';
-  return { translate };
-}
+export const useTranslate = (): { translate: TFunction } => ({
+  translate: (value?: string, options?: { defaultValue: string } | string) =>
+    (typeof options === 'string' ? options : options?.defaultValue) || value || '',
+});
 
 export function useI18n() {
   const changeLanguage = (...args: any) => args.value as string;