@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.2

package/lib/components/Select/Select.js

@@ -56,7 +56,7 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
     }, [selected]);
     return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
+            !onlyIcon && react_1.default.createElement(exports.SelectInputValue, null, _selected),
             icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
         isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
@@ -83,10 +83,11 @@ exports.SelectInput = styled_components_1.default.div `
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
@@ -96,7 +97,9 @@ exports.SelectList = styled_components_1.default.ul `
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
+  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);

package/lib/components/Separator/Separator.js

@@ -9,12 +9,20 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
 const hooks_1 = require("../../mocks/hooks");
+const hooks_2 = require("../../hooks");
 function Separator({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className },
+    const { sidebar } = (0, hooks_2.useThemeConfig)();
+    const separatorLine = item.separatorLine || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.separatorLine);
+    const linePosition = item.linePosition || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.linePosition) || 'bottom';
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className, linePosition: linePosition, withLabel: !!item.label },
         react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
-        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+        separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.Separator = Separator;
-const Wrapper = styled_components_1.default.div ``;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;
 //# sourceMappingURL=Separator.js.map

package/lib/components/Separator/SeparatorItem.js

@@ -17,18 +17,12 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
   border-radius: 0;
-  border-top: var(--sidebar-item-separator-border-width) solid
-    var(--sidebar-item-separator-border-color);
-  padding-top: var(--sidebar-item-separator-padding-top);
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
     color: var(--sidebar-item-separator-text-color);
   }

package/lib/components/Separator/SeparatorLine.js

@@ -9,8 +9,12 @@ exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/SeparatorLine',
     className,
 })) `
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;
 //# sourceMappingURL=SeparatorLine.js.map

package/lib/components/Sidebar/ApiCallItem.js

@@ -14,12 +14,14 @@ function ApiCallItem({ item, className }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(Label, { active: item.active },
-                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
-                item.label)),
+                item.label,
+                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb))),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.ApiCallItem = ApiCallItem;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -29,7 +31,7 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
 const Wrapper = styled_components_1.default.div ``;
 exports.HttpTag = (0, styled_components_1.default)(Tag_1.Tag) `
   flex-shrink: 0;
-  margin-top: 0;
+  margin: var(--sidebar-item-http-tag-margin);
   text-transform: uppercase;
 
   width: var(--sidebar-item-http-tag-width);

package/lib/components/Sidebar/SidebarLayout.js

@@ -37,6 +37,7 @@ const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarBut
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 const SidebarSearch_1 = require("../../components/Search/SidebarSearch");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const telemetry_1 = require("../../mocks/telemetry");
 const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
 const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.FooterWrapper) `
   display: none;
@@ -65,7 +66,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
             react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
-            header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
+            header ? (react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, { onClick: () => telemetry_1.telemetry.send('back_to_catalog_button_clicked', {}) }, header)) : null,
             versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
             react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
             footer && !isOpen ? (react_1.default.createElement(FooterWrapper_1.FooterWrapper, { "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null)))));

package/lib/components/Sidebar/styledVariables.js

@@ -47,6 +47,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
   --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
 
   /**
     * @tokens Sidebar item colors
@@ -56,8 +57,9 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-background-color: transparent; // @presenter Color
 
   --sidebar-item-active-color: var(--text-primary); // @presenter Color
-  --sidebar-item-active-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
 
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
   --sidebar-item-hover-color: var(--text-primary); // @presenter Color
 
   /**
@@ -127,21 +129,24 @@ exports.sidebar = (0, styled_components_1.css) `
 
   --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-offset: var(--spacing-lg); // @presenter Spacing
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
   --sidebar-item-separator-border-width: 1px; // @presenter Spacing
   --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
 
   /**
    * @tokens Sidebar item http tag
    */
 
-  --sidebar-item-http-tag-width: 36px;
-  --sidebar-item-http-tag-height: 14px;
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
   --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
-  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
   --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
-  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
 
   /**
     * @tokens Sidebar back button

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

@@ -43,6 +43,7 @@ export interface NavItem {
     requiredPermission?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
+    linePosition?: 'top' | 'bottom';
     version?: string;
     default?: boolean;
 }

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -39,6 +39,10 @@ const ToggleButton = (0, styled_components_1.default)(styled_1.StyledToggleRight
   fill: var(--sidebar-collapse-button-icon-color);
   margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
   border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
 
   ${({ collapsed }) => collapsed &&
     (0, styled_components_1.css) `

package/lib/components/SidebarActions/SidebarActions.js

@@ -9,6 +9,7 @@ const ChangeViewButton_1 = require("../../components/SidebarActions/ChangeViewBu
 const ToggleRightPanelButton_1 = require("../../components/SidebarActions/ToggleRightPanelButton");
 const CollapseSidebarButton_1 = require("../../components/SidebarActions/CollapseSidebarButton");
 const styled_1 = require("../../components/SidebarActions/styled");
+const telemetry_1 = require("../../mocks/telemetry");
 var LayoutVariant;
 (function (LayoutVariant) {
     LayoutVariant["STACKED"] = "stacked";
@@ -17,10 +18,21 @@ var LayoutVariant;
 const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
-            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
-            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: () => {
+                    onChangeRightPanelViewClick();
+                    telemetry_1.telemetry.send('sidebar_samples_button_clicked', {});
+                } })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: () => {
+                    onChangeViewClick();
+                    telemetry_1.telemetry.send('change_layout_button_clicked', {});
+                } })))),
         !collapsedSidebar && requestAccessButton,
-        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: () => {
+                onChangeCollapseSidebarClick();
+                collapsedSidebar
+                    ? telemetry_1.telemetry.send('sidebar_item_expanded', {})
+                    : telemetry_1.telemetry.send('sidebar_item_collapsed', {});
+            } }))));
 };
 exports.SidebarActions = SidebarActions;
 //# sourceMappingURL=SidebarActions.js.map

package/lib/components/SidebarActions/styled.js

@@ -44,11 +44,14 @@ exports.StyledToggleRightPanelButton = styled_components_1.default.a `
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius);
-  padding: var(--spacing-unit);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
+  border: 1px solid var(--border-primary);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 exports.HideRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -65,13 +68,16 @@ exports.StyledChangeViewButton = styled_components_1.default.a `
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
+  background: var(--bg-overlay);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-unit);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 exports.ChangeViewSvgRow = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -91,7 +97,7 @@ exports.ControlsWrap = styled_components_1.default.span `
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   align-items: center;
   margin-left: var(--sidebar-controls-margin-left);
   z-index: 2;
@@ -120,7 +126,7 @@ exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
 //# sourceMappingURL=styled.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -34,6 +34,7 @@ const useActiveHeading_1 = require("../../hooks/useActiveHeading");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const utils_1 = require("../../components/TableOfContent/utils");
+const telemetry_1 = require("../../mocks/telemetry");
 function TableOfContent(props) {
     const { headings, contentWrapper, className } = props;
     const sidebar = React.useRef(null);
@@ -58,7 +59,7 @@ function TableOfContent(props) {
                         return null;
                     }
                     const href = '#' + heading.id;
-                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}`, onClick: () => telemetry_1.telemetry.send('toc_item_clicked', {}) }));
                 })))));
 }
 exports.TableOfContent = TableOfContent;

package/lib/components/Tag/Tag.d.ts

@@ -10,7 +10,9 @@ interface TagProps {
     children?: React.ReactNode;
     closable?: boolean;
     color?: StatusColor | Color | string;
+    size?: string;
     icon?: React.ReactNode;
+    onClick?: () => void;
 }
-export declare function Tag({ children, className, color, icon }: TagProps): JSX.Element;
+export declare function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Tag({ children, className, color = 'default', icon }) {
-    return (react_1.default.createElement(TagContainer, { className: className, color: color },
+function Tag({ children, className, color, icon, onClick, size }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color, size: size, onClick: onClick },
         icon ? icon : null,
         children));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color }) => ({
+const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     'data-component-name': 'Tag/Tag',
-    className: className + ` tag-${color}`,
+    className: (className || '') +
+        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
   display: inline-flex;
   align-items: center;
@@ -23,6 +24,11 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color }
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/lib/components/Tag/styledVariables.js

@@ -40,12 +40,17 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: 4px 16px;
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,
   .tag-default {
     --tag-color: var(--text-primary); // @presenter Color
-    --tag-background-color: var(--bg-raised); // @presenter Color
+    --tag-background-color: var(--bg-overlay); // @presenter Color
     --tag-border-color: var(--border-primary); // @presenter Color
   }
 
@@ -53,76 +58,76 @@ exports.tag = (0, styled_components_1.css) `
   .tag-success,
   .tag-approved,
   .tag-get {
-    --tag-color: var(--color-success-base); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-border); // @presenter Color
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
   .tag-red,
   .tag-error,
   .tag-declined,
   .tag-delete {
-    --tag-color: var(--color-error-base); // @presenter Color
+    --tag-color: var(--color-error-active); // @presenter Color
     --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-border); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
   }
 
   .tag-gold,
   .tag-warning,
   .tag-deprecated,
   .tag-put {
-    --tag-color: var(--color-warning-base); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-border); // @presenter Color
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
   .tag-blue,
   .tag-processing,
   .tag-post {
-    --tag-color: var(--color-info-base); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
-    --tag-color: var(--color-purple-6); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-3); // @presenter Color
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
-    --tag-color: var(--color-cyan-6); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-3); // @presenter Color
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
-    --tag-color: var(--color-yellow-6); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-3); // @presenter Color
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
-    --tag-color: var(--color-geekblue-6); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-3); // @presenter Color
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
-    --tag-color: var(--color-magneta-6); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-3); // @presenter Color
+    --tag-color: var(--color-magneta-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 
   .tag-lime {
-    --tag-color: var(--color-lime-6); // @presenter Color
-    --tag-background-color: var(--color-lime-1); // @presenter Color
-    --tag-border-color: var(--color-lime-3); // @presenter Color
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
   }
 
   // @tokens End

package/lib/components/Tiles/ThinTile.js

@@ -36,20 +36,20 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  border-radius: var(--border-radius-lg);
   box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -81,9 +81,11 @@ const ThinTileIcon = styled_components_1.default.img `
 `;
 const ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/lib/components/Tiles/WideTile.js

@@ -36,21 +36,21 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: 24px;
+  padding: var(--spacing-lg);
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
+  margin-bottom: var(--spacing-xl);
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
-  transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -70,17 +70,19 @@ const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    padding: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
 `;
 const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

package/lib/components/Typography/SectionHeader.js

@@ -9,9 +9,9 @@ exports.SectionHeader = styled_components_1.default.h2.attrs(({ className }) =>
     'data-component-name': 'Typography/SectionHeader',
     className,
 })) `
-  color: var(--h2-color);
+  color: var(--h2-text-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;