@cloud-ru/uikit-product-site-hero 0.5.49 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2025-12-04)
+
+
+### Features
+
+* **SITE-10320:** edit hero main ([a85a31d](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/a85a31d49635867e75ae1dffec8ecb510d95a71e))
+
+
+
+
+
+## 0.5.50 (2025-12-04)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-site-layout@0.4.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+
+
+
+
+
 ## 0.5.49 (2025-12-03)
 
 

package/README.md

@@ -19,7 +19,7 @@ Hero blocks for Site
 | startsAt* | `string` | - | Начало события события |
 | title* | `string` | - | Заголовок события |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background | Цвета фона |
+| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background | Цвета фона |
 | category | `PromoTagProps` | - | Категория события |
 | format | enum Format: `"online"`, `"offline"`, `"hybrid"` | - | Формат проведения события |
 | audience | enum Audience: `"it"`, `"students"`, `"business"` | - | Аудитория, для которой проводится событие |
@@ -33,7 +33,7 @@ Hero blocks for Site
 | description | `string` | - | Описание секции |
 | buttons | `[ButtonFilledProps, ButtonFilledProps?]` | - | Массив с настройками кнопок ButtonFilled |
 | showBottomPadding | `boolean` | true | Наличие нижнего паддинга |
-| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background | Цвет фона |
+| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background | Цвет фона |
 | contentAlign | "left" \| "center" | left | Выравнивание текста |
 | className | `string` | - | CSS - класснейм |
 ## HeroMain
@@ -49,8 +49,8 @@ Hero blocks for Site
 | tags | `Pick<TagSpecialProps, "text" \| "appearance" \| "tip">[]` | [] | Тэги |
 | platforms | `Platform[]` | [] | Платформы |
 | handlePlatformClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>, platform: Platform) => void` | - | Обработка клика по платформе |
-| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background1-level | Цвета фона |
-| buttons | `[Omit<ButtonFilledProps, "size" \| "appearance">, Omit<ButtonPromoOutlineProps, "size" \| "appearance">?]` | - | Массив с настройками кнопок ButtonFilled |
+| backgroundColor | enum HeroColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background1-level | Цвета фона |
+| buttons | `[Omit<ButtonFilledProps, "size" \| "appearance">, Omit<ButtonPromoOutlineProps, "size" \| "appearance">?, Omit<...>?]` | - | Массив с настройками кнопок ButtonFilled |
 | className | `string` | - | CSS - класснейм |
 | navbar | `Pick<SiteNavbarProps, "items" \| "active" \| "onItemClick" \| "topPosition">` | - | Navbar |
 ## HeroSlider

package/dist/cjs/components/HeroMain/HeroMain.d.ts

@@ -4,7 +4,7 @@ import { SiteNavbarProps } from '@cloud-ru/uikit-product-site-navbar';
 import { TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
-import { ButtonFilledProps } from '@snack-uikit/button';
+import { ButtonFilledProps, ButtonOutlineProps } from '@snack-uikit/button';
 import { HeroColor } from '../../types';
 import { PlatformLinkProps } from './components';
 export type HeroMainProps = WithSupportProps<WithLayoutType<{
@@ -27,7 +27,11 @@ export type HeroMainProps = WithSupportProps<WithLayoutType<{
     /** Цвета фона */
     backgroundColor?: HeroColor;
     /** Массив с настройками кнопок ButtonFilled */
-    buttons?: [Omit<ButtonFilledProps, 'size' | 'appearance'>, Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?];
+    buttons?: [
+        Omit<ButtonFilledProps, 'size' | 'appearance'>,
+        Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?,
+        Omit<ButtonOutlineProps, 'size'>?
+    ];
     /** CSS - класснейм */
     className?: string;
     /** Navbar */

package/dist/cjs/components/HeroMain/HeroMain.js

@@ -29,6 +29,7 @@ const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const breadcrumbs_1 = require("@snack-uikit/breadcrumbs");
 const button_1 = require("@snack-uikit/button");
 const typography_1 = require("@snack-uikit/typography");
+const constants_1 = require("../../constants");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
@@ -36,5 +37,8 @@ function HeroMain(_a) {
     var { title, description, image, video, breadcrumbs, tags = [], platforms = [], handlePlatformClick, backgroundColor = 'neutral-background1-level', buttons, navbar, layoutType, className } = _a, rest = __rest(_a, ["title", "description", "image", "video", "breadcrumbs", "tags", "platforms", "handlePlatformClick", "backgroundColor", "buttons", "navbar", "layoutType", "className"]);
     const { t } = (0, uikit_product_locale_1.useLocale)('SiteHero');
     const isAdaptive = ['mobile', 'tablet'].includes(layoutType);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles_module_scss_1.default.contentWrapper }, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ tag: 'h1', family: 'sans' }, (0, utils_1.getTitleTypographyProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && ((0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyL, { tag: 'p', className: styles_module_scss_1.default.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.PlatformLink, { platform: platform, handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 && ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive })))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { alt: 'hero_img', src: image }), !image && video && (0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { className: styles_module_scss_1.default.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.sectionWrapper, styles_module_scss_1.default.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)(uikit_product_site_navbar_1.SiteNavbar, Object.assign({}, navbar, { "data-test-id": 'hero-main__navbar' })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper, {
+                    [styles_module_scss_1.default.withNavbarBorderRadius]: navbar && navbar.items.length > 0,
+                }), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles_module_scss_1.default.contentWrapper }, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ tag: 'h1', family: 'sans' }, (0, utils_1.getTitleTypographyProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && ((0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyL, { tag: 'p', className: styles_module_scss_1.default.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.PlatformLink, { platform: platform, appearance: (0, utils_1.getAppearanceByBackground)(backgroundColor), handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 &&
+                                                (backgroundColor !== constants_1.HERO_COLORS.GraphiteAccentDefault ? ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive }))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', fullWidth: isAdaptive }))))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { alt: 'hero_img', src: image }), !image && video && (0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { className: styles_module_scss_1.default.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.sectionWrapper, styles_module_scss_1.default.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)(uikit_product_site_navbar_1.SiteNavbar, Object.assign({}, navbar, { appereance: (0, utils_1.getNavbarAppearanceByBackground)(backgroundColor), "data-test-id": 'hero-main__navbar' })) }))] }));
 }

package/dist/cjs/components/HeroMain/components/PlatformLink/PlatformLink.d.ts

@@ -7,6 +7,7 @@ type Platform = {
 export type PlatformLinkProps = {
     platform: Platform;
     handlePlatformClick(e: MouseEvent<HTMLAnchorElement>, platform: Platform): void;
+    appearance?: 'neutral' | 'invert-neutral';
 };
-export declare function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlatformLink({ platform, appearance, handlePlatformClick }: PlatformLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/HeroMain/components/PlatformLink/PlatformLink.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlatformLink = PlatformLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const link_1 = require("@snack-uikit/link");
-function PlatformLink({ platform, handlePlatformClick }) {
+function PlatformLink({ platform, appearance = 'neutral', handlePlatformClick }) {
     const handleClick = (e) => {
         handlePlatformClick(e, platform);
     };
-    return ((0, jsx_runtime_1.jsx)(link_1.Link, { text: platform.title, href: platform.href, onClick: handleClick, size: 'l', textMode: 'accent', appearance: 'neutral' }));
+    return ((0, jsx_runtime_1.jsx)(link_1.Link, { text: platform.title, href: platform.href, onClick: handleClick, size: 'l', textMode: 'accent', appearance: appearance }));
 }

package/dist/cjs/components/HeroMain/styles.module.css

@@ -1,13 +1,47 @@
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+  white-space:pre-line;
+  max-width:720px;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+  word-break:break-word;
+  max-width:560px;
+}
+
+.platforms{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.sectionWrapper{
+  border-radius:var(--dimension-050m, 4px);
+}
 .sectionWrapper[data-section-background=neutral-background1-level]{
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
 }
 .sectionWrapper[data-section-background=neutral-background]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
+.sectionWrapper[data-section-background=graphite-accent-default]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+}
+.sectionWrapper[data-section-background=graphite-accent-default] .title,
+.sectionWrapper[data-section-background=graphite-accent-default] .description,
+.sectionWrapper[data-section-background=graphite-accent-default] .platforms{
+  color:var(--sys-graphite-on-accent, #ffffff);
+}
 .sectionWrapper[data-sticky]{
   position:sticky;
   top:0;
 }
+.sectionWrapper.withNavbarBorderRadius{
+  border-radius:var(--dimension-050m, 4px) var(--dimension-050m, 4px) 0 0;
+}
+.sectionWrapper.navbarWrapper{
+  border-radius:0 0 var(--dimension-050m, 4px) var(--dimension-050m, 4px);
+}
 
 .contentWrapper{
   padding:var(--dimension-5m, 40px) 0;
@@ -56,7 +90,7 @@
 .tagRow{
   display:flex;
   flex-wrap:wrap;
-  gap:var(--dimension-050m, 4px);
+  gap:var(--dimension-025m, 2px);
 }
 
 .textWrapper{
@@ -65,23 +99,6 @@
   gap:var(--dimension-2m, 16px);
 }
 
-.title{
-  color:var(--sys-neutral-text-main, #41424e);
-  word-break:break-word;
-  white-space:pre-line;
-  max-width:720px;
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #656774);
-  word-break:break-word;
-  max-width:560px;
-}
-
-.platforms{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
 .imageWrapper{
   display:flex;
   flex-direction:column;
@@ -113,14 +130,13 @@
 .buttons{
   display:flex;
   flex-direction:row;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-1m, 8px);
 }
 .buttons[data-layout-type=tablet]{
   flex-direction:column;
 }
 .buttons[data-layout-type=mobile]{
   flex-direction:column;
-  gap:var(--dimension-1m, 8px);
 }
 
 .navbarWrapper{

package/dist/cjs/components/HeroMain/utils.d.ts

@@ -1,3 +1,12 @@
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
+import { HeroColor } from '../../types';
 export declare const getTitleTypographyProps: (layoutType: LayoutType) => Pick<TypographyProps, "size" | "purpose">;
+export declare const getAppearanceByBackground: (backgroundColor: HeroColor) => "neutral" | "invert-neutral";
+export declare const getNavbarAppearanceByBackground: (backgroundColor: HeroColor) => {
+    colorText: "invert";
+    dividerBackgroundColor: "invert";
+} | {
+    colorText: "neutral";
+    dividerBackgroundColor: "neutral";
+};

package/dist/cjs/components/HeroMain/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTitleTypographyProps = void 0;
+exports.getNavbarAppearanceByBackground = exports.getAppearanceByBackground = exports.getTitleTypographyProps = void 0;
+const constants_1 = require("../../constants");
 const getTitleTypographyProps = (layoutType) => {
     switch (layoutType) {
         case 'mobile':
@@ -14,3 +15,9 @@ const getTitleTypographyProps = (layoutType) => {
     }
 };
 exports.getTitleTypographyProps = getTitleTypographyProps;
+const getAppearanceByBackground = (backgroundColor) => backgroundColor === constants_1.HERO_COLORS.GraphiteAccentDefault ? 'invert-neutral' : 'neutral';
+exports.getAppearanceByBackground = getAppearanceByBackground;
+const getNavbarAppearanceByBackground = (backgroundColor) => backgroundColor === constants_1.HERO_COLORS.GraphiteAccentDefault
+    ? { colorText: 'invert', dividerBackgroundColor: 'invert' }
+    : { colorText: 'neutral', dividerBackgroundColor: 'neutral' };
+exports.getNavbarAppearanceByBackground = getNavbarAppearanceByBackground;

package/dist/cjs/constants.d.ts

@@ -8,4 +8,5 @@ export declare const HERO_EVENT_BUTTONS: {
 export declare const HERO_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
+    readonly GraphiteAccentDefault: "graphite-accent-default";
 };

package/dist/cjs/constants.js

@@ -11,4 +11,5 @@ exports.HERO_EVENT_BUTTONS = {
 exports.HERO_COLORS = {
     NeutralBackground1Level: 'neutral-background1-level',
     NeutralBackground: 'neutral-background',
+    GraphiteAccentDefault: 'graphite-accent-default',
 };

package/dist/esm/components/HeroMain/HeroMain.d.ts

@@ -4,7 +4,7 @@ import { SiteNavbarProps } from '@cloud-ru/uikit-product-site-navbar';
 import { TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
-import { ButtonFilledProps } from '@snack-uikit/button';
+import { ButtonFilledProps, ButtonOutlineProps } from '@snack-uikit/button';
 import { HeroColor } from '../../types';
 import { PlatformLinkProps } from './components';
 export type HeroMainProps = WithSupportProps<WithLayoutType<{
@@ -27,7 +27,11 @@ export type HeroMainProps = WithSupportProps<WithLayoutType<{
     /** Цвета фона */
     backgroundColor?: HeroColor;
     /** Массив с настройками кнопок ButtonFilled */
-    buttons?: [Omit<ButtonFilledProps, 'size' | 'appearance'>, Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?];
+    buttons?: [
+        Omit<ButtonFilledProps, 'size' | 'appearance'>,
+        Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?,
+        Omit<ButtonOutlineProps, 'size'>?
+    ];
     /** CSS - класснейм */
     className?: string;
     /** Navbar */

package/dist/esm/components/HeroMain/HeroMain.js

@@ -21,14 +21,18 @@ import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
 import { TagSpecial } from '@cloud-ru/uikit-product-site-tag';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { Breadcrumbs } from '@snack-uikit/breadcrumbs';
-import { ButtonFilled } from '@snack-uikit/button';
+import { ButtonFilled, ButtonOutline } from '@snack-uikit/button';
 import { Typography } from '@snack-uikit/typography';
+import { HERO_COLORS } from '../../constants';
 import { PlatformLink } from './components';
 import styles from './styles.module.css';
-import { getTitleTypographyProps } from './utils';
+import { getAppearanceByBackground, getNavbarAppearanceByBackground, getTitleTypographyProps } from './utils';
 export function HeroMain(_a) {
     var { title, description, image, video, breadcrumbs, tags = [], platforms = [], handlePlatformClick, backgroundColor = 'neutral-background1-level', buttons, navbar, layoutType, className } = _a, rest = __rest(_a, ["title", "description", "image", "video", "breadcrumbs", "tags", "platforms", "handlePlatformClick", "backgroundColor", "buttons", "navbar", "layoutType", "className"]);
     const { t } = useLocale('SiteHero');
     const isAdaptive = ['mobile', 'tablet'].includes(layoutType);
-    return (_jsxs(_Fragment, { children: [_jsx(Layout.SectionWrapper, { layoutType: layoutType, className: cn(className, styles.sectionWrapper), "data-section-background": backgroundColor, children: _jsx("div", Object.assign({ className: styles.contentWrapper }, extractSupportProps(rest), { "data-layout-type": layoutType, children: _jsxs("div", { className: styles.content, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.left, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.leftContent, "data-layout-type": layoutType, children: [_jsx(Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && (_jsx("div", { className: styles.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => (_jsx(TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), _jsxs("div", { className: styles.textWrapper, children: [_jsx(Typography, Object.assign({ tag: 'h1', family: 'sans' }, getTitleTypographyProps(layoutType), { className: styles.title, children: _jsx(RichText, { richText: title }) })), _jsx(Typography.SansBodyL, { tag: 'div', className: styles.description, children: _jsx(RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && (_jsxs(Typography.SansBodyL, { tag: 'p', className: styles.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => (_jsxs(Fragment, { children: [_jsx(PlatformLink, { platform: platform, handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && (_jsxs("div", { className: styles.buttons, "data-layout-type": layoutType, children: [_jsx(ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 && (_jsx(ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive })))] }))] }), _jsx("div", { className: styles.imageWrapper, "data-layout-type": layoutType, children: _jsxs("div", { className: styles.media, "data-layout-type": layoutType, children: [image && _jsx("img", { alt: 'hero_img', src: image }), !image && video && _jsx(SiteVideo, { className: styles.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && (_jsx(Layout.SectionWrapper, { layoutType: layoutType, className: cn(styles.sectionWrapper, styles.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: _jsx(SiteNavbar, Object.assign({}, navbar, { "data-test-id": 'hero-main__navbar' })) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Layout.SectionWrapper, { layoutType: layoutType, className: cn(className, styles.sectionWrapper, {
+                    [styles.withNavbarBorderRadius]: navbar && navbar.items.length > 0,
+                }), "data-section-background": backgroundColor, children: _jsx("div", Object.assign({ className: styles.contentWrapper }, extractSupportProps(rest), { "data-layout-type": layoutType, children: _jsxs("div", { className: styles.content, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.left, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.leftContent, "data-layout-type": layoutType, children: [_jsx(Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && (_jsx("div", { className: styles.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => (_jsx(TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), _jsxs("div", { className: styles.textWrapper, children: [_jsx(Typography, Object.assign({ tag: 'h1', family: 'sans' }, getTitleTypographyProps(layoutType), { className: styles.title, children: _jsx(RichText, { richText: title }) })), _jsx(Typography.SansBodyL, { tag: 'div', className: styles.description, children: _jsx(RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && (_jsxs(Typography.SansBodyL, { tag: 'p', className: styles.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => (_jsxs(Fragment, { children: [_jsx(PlatformLink, { platform: platform, appearance: getAppearanceByBackground(backgroundColor), handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && (_jsxs("div", { className: styles.buttons, "data-layout-type": layoutType, children: [_jsx(ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 &&
+                                                (backgroundColor !== HERO_COLORS.GraphiteAccentDefault ? (_jsx(ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive }))) : (_jsx(ButtonOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', fullWidth: isAdaptive }))))] }))] }), _jsx("div", { className: styles.imageWrapper, "data-layout-type": layoutType, children: _jsxs("div", { className: styles.media, "data-layout-type": layoutType, children: [image && _jsx("img", { alt: 'hero_img', src: image }), !image && video && _jsx(SiteVideo, { className: styles.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && (_jsx(Layout.SectionWrapper, { layoutType: layoutType, className: cn(styles.sectionWrapper, styles.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: _jsx(SiteNavbar, Object.assign({}, navbar, { appereance: getNavbarAppearanceByBackground(backgroundColor), "data-test-id": 'hero-main__navbar' })) }))] }));
 }

package/dist/esm/components/HeroMain/components/PlatformLink/PlatformLink.d.ts

@@ -7,6 +7,7 @@ type Platform = {
 export type PlatformLinkProps = {
     platform: Platform;
     handlePlatformClick(e: MouseEvent<HTMLAnchorElement>, platform: Platform): void;
+    appearance?: 'neutral' | 'invert-neutral';
 };
-export declare function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlatformLink({ platform, appearance, handlePlatformClick }: PlatformLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/HeroMain/components/PlatformLink/PlatformLink.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from '@snack-uikit/link';
-export function PlatformLink({ platform, handlePlatformClick }) {
+export function PlatformLink({ platform, appearance = 'neutral', handlePlatformClick }) {
     const handleClick = (e) => {
         handlePlatformClick(e, platform);
     };
-    return (_jsx(Link, { text: platform.title, href: platform.href, onClick: handleClick, size: 'l', textMode: 'accent', appearance: 'neutral' }));
+    return (_jsx(Link, { text: platform.title, href: platform.href, onClick: handleClick, size: 'l', textMode: 'accent', appearance: appearance }));
 }

package/dist/esm/components/HeroMain/styles.module.css

@@ -1,13 +1,47 @@
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+  white-space:pre-line;
+  max-width:720px;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+  word-break:break-word;
+  max-width:560px;
+}
+
+.platforms{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.sectionWrapper{
+  border-radius:var(--dimension-050m, 4px);
+}
 .sectionWrapper[data-section-background=neutral-background1-level]{
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
 }
 .sectionWrapper[data-section-background=neutral-background]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
+.sectionWrapper[data-section-background=graphite-accent-default]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+}
+.sectionWrapper[data-section-background=graphite-accent-default] .title,
+.sectionWrapper[data-section-background=graphite-accent-default] .description,
+.sectionWrapper[data-section-background=graphite-accent-default] .platforms{
+  color:var(--sys-graphite-on-accent, #ffffff);
+}
 .sectionWrapper[data-sticky]{
   position:sticky;
   top:0;
 }
+.sectionWrapper.withNavbarBorderRadius{
+  border-radius:var(--dimension-050m, 4px) var(--dimension-050m, 4px) 0 0;
+}
+.sectionWrapper.navbarWrapper{
+  border-radius:0 0 var(--dimension-050m, 4px) var(--dimension-050m, 4px);
+}
 
 .contentWrapper{
   padding:var(--dimension-5m, 40px) 0;
@@ -56,7 +90,7 @@
 .tagRow{
   display:flex;
   flex-wrap:wrap;
-  gap:var(--dimension-050m, 4px);
+  gap:var(--dimension-025m, 2px);
 }
 
 .textWrapper{
@@ -65,23 +99,6 @@
   gap:var(--dimension-2m, 16px);
 }
 
-.title{
-  color:var(--sys-neutral-text-main, #41424e);
-  word-break:break-word;
-  white-space:pre-line;
-  max-width:720px;
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #656774);
-  word-break:break-word;
-  max-width:560px;
-}
-
-.platforms{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
 .imageWrapper{
   display:flex;
   flex-direction:column;
@@ -113,14 +130,13 @@
 .buttons{
   display:flex;
   flex-direction:row;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-1m, 8px);
 }
 .buttons[data-layout-type=tablet]{
   flex-direction:column;
 }
 .buttons[data-layout-type=mobile]{
   flex-direction:column;
-  gap:var(--dimension-1m, 8px);
 }
 
 .navbarWrapper{

package/dist/esm/components/HeroMain/utils.d.ts

@@ -1,3 +1,12 @@
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
+import { HeroColor } from '../../types';
 export declare const getTitleTypographyProps: (layoutType: LayoutType) => Pick<TypographyProps, "size" | "purpose">;
+export declare const getAppearanceByBackground: (backgroundColor: HeroColor) => "neutral" | "invert-neutral";
+export declare const getNavbarAppearanceByBackground: (backgroundColor: HeroColor) => {
+    colorText: "invert";
+    dividerBackgroundColor: "invert";
+} | {
+    colorText: "neutral";
+    dividerBackgroundColor: "neutral";
+};

package/dist/esm/components/HeroMain/utils.js

@@ -1,3 +1,4 @@
+import { HERO_COLORS } from '../../constants';
 export const getTitleTypographyProps = (layoutType) => {
     switch (layoutType) {
         case 'mobile':
@@ -10,3 +11,7 @@ export const getTitleTypographyProps = (layoutType) => {
             return { purpose: 'display', size: 'm' };
     }
 };
+export const getAppearanceByBackground = (backgroundColor) => backgroundColor === HERO_COLORS.GraphiteAccentDefault ? 'invert-neutral' : 'neutral';
+export const getNavbarAppearanceByBackground = (backgroundColor) => backgroundColor === HERO_COLORS.GraphiteAccentDefault
+    ? { colorText: 'invert', dividerBackgroundColor: 'invert' }
+    : { colorText: 'neutral', dividerBackgroundColor: 'neutral' };

package/dist/esm/constants.d.ts

@@ -8,4 +8,5 @@ export declare const HERO_EVENT_BUTTONS: {
 export declare const HERO_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
+    readonly GraphiteAccentDefault: "graphite-accent-default";
 };

package/dist/esm/constants.js

@@ -8,4 +8,5 @@ export const HERO_EVENT_BUTTONS = {
 export const HERO_COLORS = {
     NeutralBackground1Level: 'neutral-background1-level',
     NeutralBackground: 'neutral-background',
+    GraphiteAccentDefault: 'graphite-accent-default',
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-hero",
   "title": "Site Hero",
-  "version": "0.5.49",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,9 +38,9 @@
   "dependencies": {
     "@cloud-ru/uikit-product-button-predefined": "0.7.12",
     "@cloud-ru/uikit-product-icons": "16.0.0",
-    "@cloud-ru/uikit-product-site-layout": "0.3.0",
+    "@cloud-ru/uikit-product-site-layout": "0.4.0",
     "@cloud-ru/uikit-product-site-media": "0.1.38",
-    "@cloud-ru/uikit-product-site-navbar": "0.2.16",
+    "@cloud-ru/uikit-product-site-navbar": "0.3.0",
     "@cloud-ru/uikit-product-site-rich-text": "0.2.15",
     "@cloud-ru/uikit-product-site-tag": "0.3.15",
     "@cloud-ru/uikit-product-utils": "8.0.1",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "97f32de112901b4523a7bf7a87bc64aaf21f6c67"
+  "gitHead": "5ba2eadd70e32a17c84aeec5a4bf3ec7b6333715"
 }

package/src/components/HeroMain/HeroMain.tsx

@@ -10,13 +10,14 @@ import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
 import { TagSpecial, TagSpecialProps } from '@cloud-ru/uikit-product-site-tag';
 import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { Breadcrumbs, BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
-import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { ButtonFilled, ButtonFilledProps, ButtonOutline, ButtonOutlineProps } from '@snack-uikit/button';
 import { Typography } from '@snack-uikit/typography';
 
+import { HERO_COLORS } from '../../constants';
 import { HeroColor } from '../../types';
 import { PlatformLink, PlatformLinkProps } from './components';
 import styles from './styles.module.scss';
-import { getTitleTypographyProps } from './utils';
+import { getAppearanceByBackground, getNavbarAppearanceByBackground, getTitleTypographyProps } from './utils';
 
 export type HeroMainProps = WithSupportProps<
   WithLayoutType<{
@@ -39,7 +40,11 @@ export type HeroMainProps = WithSupportProps<
     /** Цвета фона */
     backgroundColor?: HeroColor;
     /** Массив с настройками кнопок ButtonFilled */
-    buttons?: [Omit<ButtonFilledProps, 'size' | 'appearance'>, Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?];
+    buttons?: [
+      Omit<ButtonFilledProps, 'size' | 'appearance'>,
+      Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?,
+      Omit<ButtonOutlineProps, 'size'>?,
+    ];
     /** CSS - класснейм */
     className?: string;
     /** Navbar */
@@ -71,7 +76,9 @@ export function HeroMain({
     <>
       <Layout.SectionWrapper
         layoutType={layoutType}
-        className={cn(className, styles.sectionWrapper)}
+        className={cn(className, styles.sectionWrapper, {
+          [styles.withNavbarBorderRadius]: navbar && navbar.items.length > 0,
+        })}
         data-section-background={backgroundColor}
       >
         <div className={styles.contentWrapper} {...extractSupportProps(rest)} data-layout-type={layoutType}>
@@ -102,7 +109,11 @@ export function HeroMain({
                       {t('Main.platforms')}:{' '}
                       {platforms.map((platform, index) => (
                         <Fragment key={platform.id || platform.title}>
-                          <PlatformLink platform={platform} handlePlatformClick={handlePlatformClick} />
+                          <PlatformLink
+                            platform={platform}
+                            appearance={getAppearanceByBackground(backgroundColor)}
+                            handlePlatformClick={handlePlatformClick}
+                          />
                           {platforms.length - 1 !== index && ', '}
                         </Fragment>
                       ))}
@@ -120,15 +131,18 @@ export function HeroMain({
                     appearance='primary'
                     fullWidth={isAdaptive}
                   />
-                  {buttons.length > 1 && (
-                    <ButtonPromoOutline
-                      {...buttons[1]}
-                      data-layout-type={layoutType}
-                      size='l'
-                      appearance='secondary'
-                      fullWidth={isAdaptive}
-                    />
-                  )}
+                  {buttons.length > 1 &&
+                    (backgroundColor !== HERO_COLORS.GraphiteAccentDefault ? (
+                      <ButtonPromoOutline
+                        {...buttons[1]}
+                        data-layout-type={layoutType}
+                        size='l'
+                        appearance='secondary'
+                        fullWidth={isAdaptive}
+                      />
+                    ) : (
+                      <ButtonOutline {...buttons[1]} data-layout-type={layoutType} size='l' fullWidth={isAdaptive} />
+                    ))}
                 </div>
               )}
             </div>
@@ -151,7 +165,11 @@ export function HeroMain({
           data-sticky={true}
           data-section-background={backgroundColor}
         >
-          <SiteNavbar {...navbar} data-test-id='hero-main__navbar' />
+          <SiteNavbar
+            {...navbar}
+            appereance={getNavbarAppearanceByBackground(backgroundColor)}
+            data-test-id='hero-main__navbar'
+          />
         </Layout.SectionWrapper>
       )}
     </>

package/src/components/HeroMain/components/PlatformLink/PlatformLink.tsx

@@ -11,9 +11,10 @@ type Platform = {
 export type PlatformLinkProps = {
   platform: Platform;
   handlePlatformClick(e: MouseEvent<HTMLAnchorElement>, platform: Platform): void;
+  appearance?: 'neutral' | 'invert-neutral';
 };
 
-export function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProps) {
+export function PlatformLink({ platform, appearance = 'neutral', handlePlatformClick }: PlatformLinkProps) {
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
     handlePlatformClick(e, platform);
   };
@@ -25,7 +26,7 @@ export function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProp
       onClick={handleClick}
       size='l'
       textMode='accent'
-      appearance='neutral'
+      appearance={appearance}
     />
   );
 }

package/src/components/HeroMain/styles.module.scss

@@ -1,6 +1,25 @@
 @use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as ds;
 
+.title {
+  color: ds.$sys-neutral-text-main;
+  word-break: break-word;
+  white-space: pre-line;
+  max-width: 720px;
+}
+
+.description {
+  color: ds.$sys-neutral-text-support;
+  word-break: break-word;
+  max-width: 560px;
+}
+
+.platforms {
+  color: ds.$sys-neutral-text-main;
+}
+
 .sectionWrapper {
+  border-radius: ds.$dimension-050m;
+
   &[data-section-background='neutral-background1-level'] {
     background-color: ds.$sys-neutral-background1-level;
   }
@@ -9,10 +28,28 @@
     background-color: ds.$sys-neutral-background;
   }
 
+  &[data-section-background='graphite-accent-default'] {
+    background-color: ds.$sys-graphite-accent-default;
+
+    .title,
+    .description,
+    .platforms {
+      color: ds.$sys-graphite-on-accent;
+    }
+  }
+
   &[data-sticky] {
     position: sticky;
     top: 0;
   }
+
+  &.withNavbarBorderRadius {
+    border-radius: ds.$dimension-050m ds.$dimension-050m 0 0;
+  }
+
+  &.navbarWrapper {
+    border-radius: 0 0 ds.$dimension-050m ds.$dimension-050m;
+  }
 }
 
 .contentWrapper {
@@ -71,7 +108,7 @@
 .tagRow {
   display: flex;
   flex-wrap: wrap;
-  gap: ds.$dimension-050m;
+  gap: ds.$dimension-025m;
 }
 
 .textWrapper {
@@ -80,23 +117,6 @@
   gap: ds.$dimension-2m;
 }
 
-.title {
-  color: ds.$sys-neutral-text-main;
-  word-break: break-word;
-  white-space: pre-line;
-  max-width: 720px;
-}
-
-.description {
-  color: ds.$sys-neutral-text-support;
-  word-break: break-word;
-  max-width: 560px;
-}
-
-.platforms {
-  color: ds.$sys-neutral-text-main;
-}
-
 .imageWrapper {
   display: flex;
   flex-direction: column;
@@ -136,7 +156,7 @@
 .buttons {
   display: flex;
   flex-direction: row;
-  gap: ds.$dimension-2m;
+  gap: ds.$dimension-1m;
 
   &[data-layout-type='tablet'] {
     flex-direction: column;
@@ -144,7 +164,6 @@
 
   &[data-layout-type='mobile'] {
     flex-direction: column;
-    gap: ds.$dimension-1m;
   }
 }
 

package/src/components/HeroMain/utils.ts

@@ -1,6 +1,9 @@
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
 
+import { HERO_COLORS } from '../../constants';
+import { HeroColor } from '../../types';
+
 export const getTitleTypographyProps = (layoutType: LayoutType): Pick<TypographyProps, 'size' | 'purpose'> => {
   switch (layoutType) {
     case 'mobile':
@@ -15,3 +18,11 @@ export const getTitleTypographyProps = (layoutType: LayoutType): Pick<Typography
       return { purpose: 'display', size: 'm' };
   }
 };
+
+export const getAppearanceByBackground = (backgroundColor: HeroColor): 'neutral' | 'invert-neutral' =>
+  backgroundColor === HERO_COLORS.GraphiteAccentDefault ? 'invert-neutral' : 'neutral';
+
+export const getNavbarAppearanceByBackground = (backgroundColor: HeroColor) =>
+  backgroundColor === HERO_COLORS.GraphiteAccentDefault
+    ? { colorText: 'invert' as const, dividerBackgroundColor: 'invert' as const }
+    : { colorText: 'neutral' as const, dividerBackgroundColor: 'neutral' as const };

package/src/constants.ts

@@ -9,4 +9,5 @@ export const HERO_EVENT_BUTTONS = {
 export const HERO_COLORS = {
   NeutralBackground1Level: 'neutral-background1-level',
   NeutralBackground: 'neutral-background',
+  GraphiteAccentDefault: 'graphite-accent-default',
 } as const;