@redocly/theme 0.29.0 → 0.30.1-beta.0

package/lib/components/Catalog/useCatalog.js

@@ -256,9 +256,10 @@ function collectFilterOptions(items, filters) {
                 }
             }
         }
-        const options = Object.entries(usedOptions)
-            .map(([value, count]) => ({ value, count }))
-            .sort((a, b) => b.value.localeCompare(a.value));
+        const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+        if (!staticOptions) {
+            options.sort((a, b) => b.value.localeCompare(a.value));
+        }
         if (othersCount) {
             options.push({
                 value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/lib/components/CodeBlock/CodeBlock.js

@@ -59,7 +59,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
                     ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                     : highlightedCode,
             }, "data-cy": dataTestId, withControls: true }),
-        reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode })))));
+        reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))));
 }
 exports.CodeBlock = CodeBlock;
 const Wrapper = styled_components_1.default.div ``;

package/lib/components/Feedback/Comment.js

@@ -42,13 +42,13 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
         if (!text)
             return;
         setSubmitValue(text);
-        onSubmit({ comment: text, path: window.location.href });
+        onSubmit({ comment: text });
     };
     const handleTextAreaChange = (e) => {
         const commentValue = e.target.value;
         setText(commentValue);
         if (!standAlone) {
-            onSubmit({ comment: commentValue, path: window.location.href });
+            onSubmit({ comment: commentValue });
         }
     };
     if (submitValue) {
@@ -93,10 +93,12 @@ const Label = styled_components_1.default.h4 `
   margin-right: 15px;
 `;
 const TextArea = styled_components_1.default.textarea `
+  background-color: var(--bg-base);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--text-primary);
   font-family: var(--font-family-base);
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  color: black;
   margin: 0 0 10px 0;
   padding: 10px;
 `;

package/lib/components/Feedback/Mood.js

@@ -74,7 +74,6 @@ const Mood = ({ settings, onSubmit, className }) => {
             score: remapScore(score),
             comment,
             reasons,
-            path: window.location.href,
         });
         setIsSubmitted(true);
     };

package/lib/components/Feedback/Rating.js

@@ -50,7 +50,6 @@ const Rating = ({ settings, onSubmit, className }) => {
             comment,
             reasons,
             max: exports.FEEDBACK_MAX_RATING,
-            path: window.location.href,
         });
         setIsSubmitted(true);
     };

package/lib/components/Feedback/ReportDialog.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ReportDialogProps } from '../../components/Feedback';
-export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, submitFeedback, }: ReportDialogProps) => JSX.Element;
+export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, submitFeedback, lang, }: ReportDialogProps) => JSX.Element;

package/lib/components/Feedback/ReportDialog.js

@@ -41,12 +41,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const telemetry_1 = require("../../mocks/telemetry");
 const Comment_1 = require("../../components/Feedback/Comment");
-const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
+const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) => {
     const { label } = settings;
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    return (React.createElement(Wrapper, { className: "modal" },
+    return (React.createElement(Wrapper, { className: "modal scroll-lock" },
         React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(void 0, void 0, void 0, function* () {
-                yield submitFeedback({ type: 'problem', values: value, location, path: pathname });
+                yield submitFeedback({ type: 'problem', values: value, location, path: pathname, lang });
                 telemetry_1.telemetry.send('code_snippet_reported', {});
                 onSubmit();
             }), onCancel: onCancel })));

package/lib/components/Feedback/Scale.js

@@ -56,7 +56,6 @@ const Scale = ({ settings, onSubmit, className }) => {
             comment,
             reasons,
             max: exports.MAX_SCALE,
-            path: window.location.href,
         });
         setIsSubmitted(true);
     };

package/lib/components/Feedback/Sentiment.js

@@ -56,7 +56,6 @@ const Sentiment = ({ settings, onSubmit, className }) => {
             score,
             comment,
             reasons,
-            path: window.location.href,
         });
         setIsSubmitted(true);
     };

package/lib/components/Feedback/types.d.ts

@@ -5,7 +5,6 @@ export type RatingProps = {
         comment?: string;
         reasons?: string[];
         max: number;
-        path?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -29,7 +28,6 @@ export type ScaleProps = {
         comment?: string;
         reasons?: string[];
         max?: number;
-        path?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -54,7 +52,6 @@ export type MoodProps = {
         score: number;
         comment?: string;
         reasons?: string[];
-        path?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -79,7 +76,6 @@ export type SentimentProps = {
         score: number;
         comment?: string;
         reasons?: string[];
-        path?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -101,7 +97,6 @@ export type SentimentProps = {
 export type CommentProps = {
     onSubmit: (value: {
         comment: string;
-        path?: string;
     }) => void;
     onCancel?: () => unknown;
     settings?: {
@@ -122,6 +117,7 @@ export type ReasonsProps = {
 };
 export type ReportDialogProps = {
     location: string;
+    lang?: string;
     onSubmit: () => void;
     onCancel: () => void;
     settings: {

package/lib/components/Filter/Filter.js

@@ -52,7 +52,7 @@ function Filter({ filter, filterValuesCasing, }) {
                             return;
                         filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
                     } })))) : (filter.filteredOptions.map((value) => {
-            const id = 'filter--' + filter.property + '--' + slug(value.value);
+            const id = 'filter--' + filter.property + '--' + value.value;
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
                 react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
@@ -133,10 +133,6 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
     margin: var(--filter-select-option-margin);
   }
 `;
-// TODO: import from portal
-function slug(str) {
-    return str.replace(/\s/g, '-').toLowerCase();
-}
 const DatePickerWrapper = styled_components_1.default.div `
   color: var(--filter-date-picker-color);
   display: flex;

package/lib/components/Markdown/styledVariables.js

@@ -236,11 +236,11 @@ exports.markdown = (0, styled_components_1.css) `
   --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-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @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-font-weight: var(--font-weight-bold); // @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
@@ -255,8 +255,8 @@ exports.markdown = (0, styled_components_1.css) `
   --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-color: var(--text-base); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 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
@@ -267,7 +267,7 @@ exports.markdown = (0, styled_components_1.css) `
   --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-width: 0 0 1.5px 0; // @presenter Spacing
   --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
 
   // @tokens End

package/lib/components/Scorecard/Card.d.ts

@@ -1,2 +1,4 @@
-export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;
 export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/lib/components/Scorecard/Card.js

@@ -5,9 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.ScorecardCard = styled_components_1.default.div `
+exports.ScorecardCard = styled_components_1.default.div.attrs({
+    'data-component-name': 'Scorecard/ScorecardCard',
+}) `
   color: var(--text-primary);
-  background-color: var(--thin-tile-background-color);
+  background-color: var(--bg-raised);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

package/lib/components/Scorecard/Gauge.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export declare function Gauge({ chunks, }: {
+export interface GaugeProps {
     chunks: {
         share: number;
         color: string;
+        title?: string;
     }[];
-}): JSX.Element;
+    className?: string;
+}
+export declare function Gauge({ chunks, className }: GaugeProps): JSX.Element;
 export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/Scorecard/Gauge.js

@@ -29,8 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GaugeValue = exports.Gauge = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Gauge({ chunks, }) {
-    return (React.createElement(GaugeWrapper, null, chunks.map((chunk, i) => (React.createElement(GaugeChunk, Object.assign({ key: i }, chunk))))));
+function Gauge({ chunks, className }) {
+    const title = chunks
+        .map((chunk) => chunk.title)
+        .filter(Boolean)
+        .join(', ');
+    return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
 }
 exports.Gauge = Gauge;
 exports.GaugeValue = styled_components_1.default.span `

package/lib/components/Scorecard/StatusByLevelWidget.d.ts

@@ -7,5 +7,6 @@ export interface StatusByLevelWidgetProps {
         warnings: number;
         total: number;
     }[];
+    className?: string;
 }
 export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.js

@@ -32,8 +32,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Gauge_1 = require("../../components/Scorecard/Gauge");
 const Card_1 = require("../../components/Scorecard/Card");
 function StatusByLevelWidget(props) {
-    const { levels, title } = props;
-    return (React.createElement(Card_1.ScorecardCard, null,
+    const { levels, title, className } = props;
+    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
         React.createElement(Card_1.ScorecardCardTitle, null, title),
         React.createElement(CardBody, null, levels.map((level) => {
             const success = level.total - level.errors - level.warnings;
@@ -43,14 +43,17 @@ function StatusByLevelWidget(props) {
                         {
                             share: (success / level.total) * 100,
                             color: 'var(--scorecard-color-success)',
+                            title: `${success} passed`,
                         },
                         {
                             share: (level.warnings / level.total) * 100,
                             color: 'var(--scorecard-color-warning)',
+                            title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                         },
                         {
                             share: (level.errors / level.total) * 100,
                             color: 'var(--scorecard-color-error)',
+                            title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                         },
                     ] }),
                 React.createElement(Gauge_1.GaugeValue, null,

package/lib/config.d.ts

@@ -309,6 +309,9 @@ declare const scorecardConfigSchema: {
                     readonly name: {
                         readonly type: "string";
                     };
+                    readonly color: {
+                        readonly type: "string";
+                    };
                     readonly extends: {
                         readonly type: "array";
                         readonly items: {
@@ -1878,6 +1881,9 @@ export declare const themeConfigSchema: {
                             readonly name: {
                                 readonly type: "string";
                             };
+                            readonly color: {
+                                readonly type: "string";
+                            };
                             readonly extends: {
                                 readonly type: "array";
                                 readonly items: {

package/lib/config.js

@@ -280,6 +280,7 @@ const scorecardConfigSchema = {
                 required: ['name'],
                 properties: {
                     name: { type: 'string' },
+                    color: { type: 'string' },
                     extends: { type: 'array', items: { type: 'string' } },
                     rules: {
                         type: 'object',

package/lib/globalStyle.js

@@ -899,7 +899,7 @@ const error = (0, styled_components_1.css) `
   --detailed-error-message-font-family: var(--code-block-controls-font-family);
 `;
 const modal = (0, styled_components_1.css) `
-  body:has(.modal) {
+  body:has(.scroll-lock) {
     overflow: hidden;
   }
 

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -5,6 +5,7 @@ export type SubmitFeedbackParams = {
     values: Record<string, unknown>;
     path?: string;
     location?: string;
+    lang?: string;
 };
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.29.0",
+  "version": "0.30.1-beta.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/useCatalog.ts

@@ -299,9 +299,12 @@ function collectFilterOptions(
       }
     }
 
-    const options = Object.entries(usedOptions)
-      .map(([value, count]) => ({ value, count }))
-      .sort((a, b) => b.value.localeCompare(a.value));
+    const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+
+    if (!staticOptions) {
+      options.sort((a, b) => b.value.localeCompare(a.value));
+    }
+
     if (othersCount) {
       options.push({
         value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/src/components/CodeBlock/CodeBlock.tsx

@@ -91,7 +91,11 @@ export function CodeBlock({
         withControls={true}
       />
       {reportDialog.visible && (
-        <ReportDialog {...(reportDialog.props as ReportDialogProps)} location={sourceCode} />
+        <ReportDialog
+          {...(reportDialog.props as ReportDialogProps)}
+          location={sourceCode}
+          lang={lang}
+        />
       )}
     </Wrapper>
   );

package/src/components/Feedback/Comment.tsx

@@ -22,14 +22,14 @@ export const Comment = ({
   const send = () => {
     if (!text) return;
     setSubmitValue(text);
-    onSubmit({ comment: text, path: window.location.href });
+    onSubmit({ comment: text });
   };
   const handleTextAreaChange = (e: any) => {
     const commentValue = e.target.value;
     setText(commentValue);
 
     if (!standAlone) {
-      onSubmit({ comment: commentValue, path: window.location.href });
+      onSubmit({ comment: commentValue });
     }
   };
 
@@ -108,10 +108,12 @@ const Label = styled.h4`
 `;
 
 const TextArea = styled.textarea`
+  background-color: var(--bg-base);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--text-primary);
   font-family: var(--font-family-base);
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  color: black;
   margin: 0 0 10px 0;
   padding: 10px;
 `;

package/src/components/Feedback/Mood.tsx

@@ -57,7 +57,6 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
       score: remapScore(score),
       comment,
       reasons,
-      path: window.location.href,
     });
     setIsSubmitted(true);
   };

package/src/components/Feedback/Rating.tsx

@@ -27,7 +27,6 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
       comment,
       reasons,
       max: FEEDBACK_MAX_RATING,
-      path: window.location.href,
     });
     setIsSubmitted(true);
   };

package/src/components/Feedback/ReportDialog.tsx

@@ -12,16 +12,17 @@ export const ReportDialog = ({
   onSubmit,
   onCancel,
   submitFeedback,
+  lang,
 }: ReportDialogProps): JSX.Element => {
   const { label } = settings;
   const { pathname } = useLocation();
 
   return (
-    <Wrapper className="modal">
+    <Wrapper className="modal scroll-lock">
       <Comment
         settings={{ label }}
         onSubmit={async (value) => {
-          await submitFeedback({ type: 'problem', values: value, location, path: pathname });
+          await submitFeedback({ type: 'problem', values: value, location, path: pathname, lang });
           telemetry.send('code_snippet_reported', {});
           onSubmit();
         }}

package/src/components/Feedback/Scale.tsx

@@ -51,7 +51,6 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
       comment,
       reasons,
       max: MAX_SCALE,
-      path: window.location.href,
     });
     setIsSubmitted(true);
   };

package/src/components/Feedback/Sentiment.tsx

@@ -34,7 +34,6 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
       score,
       comment,
       reasons,
-      path: window.location.href,
     });
     setIsSubmitted(true);
   };

package/src/components/Feedback/types.ts

@@ -1,13 +1,7 @@
 import type { SubmitFeedbackParams } from '@theme/types/portal/src/shared/types/feedback';
 
 export type RatingProps = {
-  onSubmit: (value: {
-    score: number;
-    comment?: string;
-    reasons?: string[];
-    max: number;
-    path?: string;
-  }) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -26,13 +20,7 @@ export type RatingProps = {
 };
 
 export type ScaleProps = {
-  onSubmit: (value: {
-    score: number;
-    comment?: string;
-    reasons?: string[];
-    max?: number;
-    path?: string;
-  }) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -53,7 +41,7 @@ export type ScaleProps = {
 };
 
 export type MoodProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; path?: string }) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -74,7 +62,7 @@ export type MoodProps = {
 };
 
 export type SentimentProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; path?: string }) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -94,7 +82,7 @@ export type SentimentProps = {
 };
 
 export type CommentProps = {
-  onSubmit: (value: { comment: string; path?: string }) => void;
+  onSubmit: (value: { comment: string }) => void;
   onCancel?: () => unknown;
   settings?: {
     label?: string;
@@ -116,6 +104,7 @@ export type ReasonsProps = {
 
 export type ReportDialogProps = {
   location: string;
+  lang?: string;
   onSubmit: () => void;
   onCancel: () => void;
   settings: {

package/src/components/Filter/Filter.tsx

@@ -109,7 +109,7 @@ export function Filter({
         </>
       ) : (
         filter.filteredOptions.map((value: any) => {
-          const id = 'filter--' + filter.property + '--' + slug(value.value);
+          const id = 'filter--' + filter.property + '--' + value.value;
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
@@ -210,11 +210,6 @@ const StyledSelect = styled(Select)`
   }
 `;
 
-// TODO: import from portal
-function slug(str: string): string {
-  return str.replace(/\s/g, '-').toLowerCase();
-}
-
 const DatePickerWrapper = styled.div`
   color: var(--filter-date-picker-color);
   display: flex;

package/src/components/Markdown/styledVariables.ts

@@ -235,11 +235,11 @@ export const markdown = css`
   --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-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @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-font-weight: var(--font-weight-bold); // @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
@@ -254,8 +254,8 @@ export const markdown = css`
   --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-color: var(--text-base); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 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
@@ -266,7 +266,7 @@ export const markdown = css`
   --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-width: 0 0 1.5px 0; // @presenter Spacing
   --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
 
   // @tokens End

package/src/components/Scorecard/Card.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
-export const ScorecardCard = styled.div`
+export const ScorecardCard = styled.div.attrs({
+  'data-component-name': 'Scorecard/ScorecardCard',
+})`
   color: var(--text-primary);
-  background-color: var(--thin-tile-background-color);
+  background-color: var(--bg-raised);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

package/src/components/Scorecard/Gauge.tsx

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
-export function Gauge({
-  chunks,
-}: {
+export interface GaugeProps {
   chunks: {
     share: number;
     color: string;
+    title?: string;
   }[];
-}) {
+  className?: string;
+}
+
+export function Gauge({ chunks, className }: GaugeProps) {
+  const title = chunks
+    .map((chunk) => chunk.title)
+    .filter(Boolean)
+    .join(', ');
   return (
-    <GaugeWrapper>
+    <GaugeWrapper
+      data-component-name="Scorecard/StatusByLevelWidget"
+      className={className}
+      title={title}
+    >
       {chunks.map((chunk, i) => (
-        <GaugeChunk key={i} {...chunk} />
+        <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
       ))}
     </GaugeWrapper>
   );

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -7,12 +7,13 @@ import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/C
 export interface StatusByLevelWidgetProps {
   title: string;
   levels: { name: string; errors: number; warnings: number; total: number }[];
+  className?: string;
 }
 
 export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
-  const { levels, title } = props;
+  const { levels, title, className } = props;
   return (
-    <ScorecardCard>
+    <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
       <ScorecardCardTitle>{title}</ScorecardCardTitle>
       <CardBody>
         {levels.map((level) => {
@@ -25,14 +26,17 @@ export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
                   {
                     share: (success / level.total) * 100,
                     color: 'var(--scorecard-color-success)',
+                    title: `${success} passed`,
                   },
                   {
                     share: (level.warnings / level.total) * 100,
                     color: 'var(--scorecard-color-warning)',
+                    title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                   },
                   {
                     share: (level.errors / level.total) * 100,
                     color: 'var(--scorecard-color-error)',
+                    title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                   },
                 ]}
               />

package/src/config.ts

@@ -319,6 +319,7 @@ const scorecardConfigSchema = {
         required: ['name'],
         properties: {
           name: { type: 'string' },
+          color: { type: 'string' },
           extends: { type: 'array', items: { type: 'string' } },
           rules: {
             type: 'object',

package/src/globalStyle.ts

@@ -912,7 +912,7 @@ const error = css`
 `;
 
 const modal = css`
-  body:has(.modal) {
+  body:has(.scroll-lock) {
     overflow: hidden;
   }
 

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

@@ -1,15 +1,22 @@
 import type { FEEDBACK_TYPES } from '../constants';
 
-import type {RatingProps, SentimentProps, CommentProps, MoodProps, ScaleProps} from '@theme/components/Feedback';
+import type {
+  RatingProps,
+  SentimentProps,
+  CommentProps,
+  MoodProps,
+  ScaleProps,
+} from '@theme/components/Feedback';
 
 export type SubmitFeedbackParams = {
   type: string;
   values: Record<string, unknown>;
   path?: string;
   location?: string;
+  lang?: string;
 };
 
 export type FeedbackProps = {
   type: FEEDBACK_TYPES;
   settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
-}
+};