@redocly/theme 0.25.2 → 0.26.1

package/src/components/Feedback/Sentiment.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { SentimentProps, ReasonsProps } from '@theme/components/Feedback';
 import { Comment, Reasons } from '@theme/components/Feedback';
 import { ThumbUp, ThumbDown } from '@theme/components/Feedback/Thumbs';
 import { useTranslate } from '@portal/hooks';
+import { Button } from '@theme/components';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { breakpoints } from '@portal/media-css';
 
 export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
@@ -14,42 +18,38 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
 
-  if (score && reasonsSettings?.enable && !reasons.length) {
-    const { label: reasonsLabel, items, multi } = reasonsSettings;
-    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
-    return (
-      <Reasons
-        onSubmit={({ reasons }) => setReasons(reasons)}
-        settings={{ label: reasonsLabel, items, multi, buttonText }}
-      />
-    );
-  }
+  const displayReasons = !!score && reasonsSettings?.enable;
+  const displayComment = !!score && commentSettings?.enable;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
-  if (score && commentSettings?.enable && !comment) {
-    const commentLabel =
-      score === 1
-        ? translate(
-            'theme.feedback.settings.comment.likeLabel',
-            commentSettings.likeLabel || 'What was most helpful?',
-          )
-        : translate(
-            'theme.feedback.settings.comment.dislikeLabel',
-            commentSettings.dislikeLabel || 'What can we improve?',
-          );
-    return (
-      <Comment onSubmit={({ comment }) => setComment(comment)} settings={{ label: commentLabel }} />
-    );
-  }
+  const commentLabel =
+    score === 1
+      ? translate(
+          'theme.feedback.settings.comment.likeLabel',
+          (commentSettings && commentSettings.likeLabel) || 'What was most helpful?',
+        )
+      : translate(
+          'theme.feedback.settings.comment.dislikeLabel',
+          (commentSettings && commentSettings.dislikeLabel) || 'What can we improve?',
+        );
+
+  const onSubmitSentimentForm = () => {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    setIsSubmitted(true);
+  };
 
-  if (score) {
-    if (!isSubmitted) {
-      onSubmit({
-        score,
-        comment,
-        reasons,
-      });
-      setIsSubmitted(true);
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitSentimentForm();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [score, displayComment, displayReasons]);
+
+  if (isSubmitted) {
     return (
       <Wrapper>
         <Label data-translation-key="theme.feedback.settings.submitText">
@@ -58,29 +58,66 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
+        <RadioCheckButtonIcon />
       </Wrapper>
     );
   }
 
   return (
     <Wrapper data-component-name="Feedback/Sentiment" className={className}>
-      <Label data-translation-key="theme.feedback.settings.label">
-        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
-      </Label>
-      <Vote
-        onClick={() => {
-          setScore(1);
-        }}
-      >
-        <ThumbUp text="Yes" />
-      </Vote>
-      <Vote
-        onClick={() => {
-          setScore(-1);
-        }}
-      >
-        <ThumbDown />
-      </Vote>
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
+          </Label>
+
+          <StyledMandatoryFieldContainer>
+            <>
+              <Vote
+                className={`${score === 1 ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(1);
+                }}
+              >
+                <ThumbUp />
+              </Vote>
+              <Vote
+                className={`${score === -1 ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(-1);
+                }}
+              >
+                <ThumbDown />
+              </Vote>
+            </>
+          </StyledMandatoryFieldContainer>
+        </StyledFormMandatoryFields>
+        <StyledFormOptionalFields>
+          {displayReasons && (
+            <Reasons
+              settings={{
+                label: reasonsSettings?.label,
+                items: reasonsSettings?.items || [],
+                multi: reasonsSettings?.multi,
+              }}
+              onChange={setReasons}
+            />
+          )}
+
+          {displayComment && (
+            <Comment
+              standAlone={false}
+              onSubmit={({ comment }) => setComment(comment)}
+              settings={{ label: commentLabel }}
+            />
+          )}
+        </StyledFormOptionalFields>
+        {displaySubmitBnt && (
+          <ButtonsContainer>
+            <SubmitButton onClick={onSubmitSentimentForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
     </Wrapper>
   );
 };
@@ -88,19 +125,76 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
 `;
 
 const Label = styled.h3`
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
+  font-family: var(--h4-font-family);
+  font-weight: var(--h4-font-weight);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h3-text-color);
 `;
 
 const Vote = styled.div`
+  height: 32px;
+  width: 32px;
   cursor: pointer;
-  margin: 0 10px;
+  display: flex;
+  align-items: center;
+  flex-flow: row-reverse;
+  color: var(--text-description);
+  &.active {
+    color: var(--text-primary);
+  }
+  &:hover {
+    color: var(--text-primary);
+    svg {
+      > g {
+        fill: var(--text-primary);
+      }
+    }
+  }
+`;
+
+const StyledForm = styled.form`
+  width: 100%;
+`;
+
+const StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledMandatoryFieldContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const SubmitButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: end;
 `;

package/src/components/Feedback/Stars.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type StarsProps = {
+  max?: number;
+  name?: string;
+  value?: number;
+  onChange: (value: number) => void;
+};
+
+export const Stars = ({ max = 5, onChange, value }: StarsProps): JSX.Element => {
+  const [hovered, setHovered] = React.useState(value || 0);
+  const stars: JSX.Element[] = [];
+
+  for (let index = 1; index <= max; index++) {
+    stars.push(
+      <Star
+        key={index}
+        onClick={() => onChange(index)}
+        onMouseOver={() => setHovered(index)}
+        onMouseLeave={() => !value && setHovered(0)}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+          {hovered < index ? (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
+            </g>
+          ) : (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
+            </g>
+          )}
+        </svg>
+      </Star>,
+    );
+  }
+
+  return <StarsWrapper>{stars}</StarsWrapper>;
+};
+
+const StarsWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Star = styled.span`
+  cursor: pointer;
+  gap: 8px;
+`;

package/src/components/Feedback/Thumbs.tsx

@@ -1,99 +1,21 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { useTranslate } from '@portal/hooks';
+import { ThumbDownIcon } from '@theme/icons/ThumbDownIcon';
+import { ThumbUpIcon } from '@theme/icons/ThumbUpIcon';
 
-export const ThumbUp = ({ text }: { text?: string }) => {
-  const { translate } = useTranslate();
+export const ThumbUp = () => {
   return (
-    <Wrapper style={{ alignItems: 'normal' }}>
-      <Icon>
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
-          <g>
-            <g>
-              <g>
-                <path
-                  d="M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918
-              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533
-              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855
-              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6
-              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6
-              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067
-              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79
-              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845
-              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229
-              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267
-              C512,310.699,505.634,298.59,495.736,290.773z"
-                />
-                <path
-                  d="M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067
-              S67.388,443.733,76.8,443.733z"
-                />
-                <path
-                  d="M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1
-              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533
-              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6
-              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533
-              S174.481,247.467,179.2,247.467z"
-                />
-                <path
-                  d="M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533
-              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467
-              V469.333z"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </Icon>
-      <span>{translate('theme.feedback.sentiment.thumbUp', text || 'Yes')}</span>
+    <Wrapper>
+      <ThumbUpIcon />
     </Wrapper>
   );
 };
 
-export const ThumbDown = ({ text }: { text?: string }) => {
-  const { translate } = useTranslate();
+export const ThumbDown = () => {
   return (
-    <Wrapper style={{ alignItems: 'end' }}>
-      <Icon>
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
-          <g>
-            <g>
-              <g>
-                <path
-                  d="M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067
-				c-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z"
-                />
-                <path
-                  d="M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996
-				c6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229
-				c0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845
-				c-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79
-				c14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067
-				c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6
-				c-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6
-				s-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951
-				c26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667
-				c0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467
-				c24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z"
-                />
-                <path
-                  d="M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667
-				c-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167
-				c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166
-				c31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4
-				C358.4,319.556,354.586,315.733,349.867,315.733z"
-                />
-                <path
-                  d="M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533
-				c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </Icon>
-      <span>{translate('theme.feedback.sentiment.thumbDown', text || 'No')}</span>
+    <Wrapper>
+      <ThumbDownIcon />
     </Wrapper>
   );
 };
@@ -101,24 +23,5 @@ export const ThumbDown = ({ text }: { text?: string }) => {
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-info-text);
-  &:hover {
-    color: var(--color-info-text-active);
-    svg {
-      > g {
-        fill: var(--color-info-text-active);
-      }
-    }
-  }
-`;
-
-const Icon = styled.div`
-  width: 18px;
-  height: 18px;
-  margin-right: 5px;
-  > svg {
-    > g {
-      fill: var(--color-info-text);
-    }
-  }
+  align-items: center;
 `;

package/src/components/Feedback/index.ts

@@ -2,6 +2,7 @@ export { Feedback } from '@theme/components/Feedback/Feedback';
 export { Rating } from '@theme/components/Feedback/Rating';
 export { Sentiment } from '@theme/components/Feedback/Sentiment';
 export { Mood } from '@theme/components/Feedback/Mood';
+export { Scale } from '@theme/components/Feedback/Scale';
 export { Comment } from '@theme/components/Feedback/Comment';
 export { Reasons } from '@theme/components/Feedback/Reasons';
 export { ReportDialog } from '@theme/components/Feedback/ReportDialog';

package/src/components/Feedback/types.ts

@@ -4,7 +4,6 @@ export type RatingProps = {
   onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
   settings?: {
     label?: string;
-    max?: number;
     submitText?: string;
     comment?: {
       enable: boolean;
@@ -20,6 +19,27 @@ export type RatingProps = {
   className?: string;
 };
 
+export type ScaleProps = {
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    leftScaleLabel?: string;
+    rightScaleLabel?: string;
+    comment?: {
+      enable: boolean;
+      label?: string;
+    };
+    reasons?: {
+      enable: boolean;
+      label?: string;
+      multi?: boolean;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
 export type MoodProps = {
   onSubmit: (value: { score: string; comment?: string; reasons?: string[] }) => void;
   settings?: {
@@ -68,17 +88,16 @@ export type CommentProps = {
     label?: string;
     submitText?: string;
   };
+  standAlone?: boolean;
   className?: string;
 };
 
 export type ReasonsProps = {
-  onSubmit: (value: { reasons: string[] }) => void;
+  onChange: (value: string[]) => void;
   settings: {
     label?: string;
     multi?: boolean;
     items: string[];
-    submitText?: string;
-    buttonText?: string;
   };
   className?: string;
 };

package/src/components/Feedback/useReportDialog.ts

@@ -27,7 +27,9 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
     setIsReportDialogShown(true);
   };
   const hideReportDialog = () => {
-    setIsReportDialogShown(false);
+    setTimeout(function () {
+      setIsReportDialogShown(false);
+    }, 1000);
   };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,

package/src/components/Markdown/MarkdownLayout.tsx

@@ -68,6 +68,7 @@ const Breadcrumbs = styled(ThemeBreadcrumbs)`
 `;
 
 const LayoutBottom = styled(LayoutTop)`
+  justify-content: center;
   > * {
     margin: 25px 5px;
   }

package/src/components/Markdown/styledVariables.ts

@@ -210,10 +210,64 @@ export const markdown = css`
   /**
   * @tokens Markdown Tabs
   */
+  
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-background-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-background-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
 
   --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-tab-background-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --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-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+  
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
 
   // @tokens End
 `;

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);
     }
   `}
 `;