@primer/react-brand 0.67.0 → 0.68.0-rc.0198e801

package/lib/recipes/FlexTemplate/FlexTemplate.types.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import type { CTABannerProps } from '../../CTABanner/CTABanner';
 import { BoxSpacingValues } from '../../Box/Box';
-import type { Icon } from '@primer/octicons-react';
 import { IconColor } from '../../Icon';
+import type { PillarIconProps } from '../../Pillar';
 import type { ColorMode } from '../../ThemeProvider';
 import { TestimonialProps } from '../../Testimonial';
 import { LabelProps } from '../../Label';
@@ -144,7 +144,7 @@ export type FlexTemplateVisualSettings = {
     backgroundImageSize?: string;
 };
 export type FlexTemplatePillarItem = {
-    icon?: Icon | ReactNode;
+    icon?: PillarIconProps['icon'];
     iconColor?: IconColor;
     heading?: string;
     title?: string;

package/lib/recipes/Flexsuite/{Overview/FlexSuiteSecurityOverview.content.d.ts → Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.content.d.ts}

@@ -1,9 +1,9 @@
-type FlexSuiteSecurityOverviewCardContent = {
+type FlexSuiteSecurityCategoryCardContent = {
     tag?: string;
     heading: string;
     description: string;
 };
-type FlexSuiteSecurityOverviewTestimonialContent = {
+type FlexSuiteSecurityCategoryTestimonialContent = {
     quoteLead: string;
     quoteEmphasis: string;
     quoteTrailing: string;
@@ -12,7 +12,7 @@ type FlexSuiteSecurityOverviewTestimonialContent = {
     name: string;
     position: string;
 };
-export type FlexSuiteSecurityOverviewContent = {
+export type FlexSuiteSecurityCategoryContent = {
     common: {
         learnMore: string;
         heroImageAlt: string;
@@ -28,21 +28,21 @@ export type FlexSuiteSecurityOverviewContent = {
         secondaryAction: string;
     };
     logoSuiteHeading: string;
-    highlights: FlexSuiteSecurityOverviewCardContent[];
+    highlights: FlexSuiteSecurityCategoryCardContent[];
     workflow: {
         label: string;
         heading: string;
     };
-    capabilities: FlexSuiteSecurityOverviewCardContent[];
+    capabilities: FlexSuiteSecurityCategoryCardContent[];
     customerStories: {
         label: string;
         heading: string;
-        cards: FlexSuiteSecurityOverviewCardContent[];
+        cards: FlexSuiteSecurityCategoryCardContent[];
     };
-    testimonial: FlexSuiteSecurityOverviewTestimonialContent;
+    testimonial: FlexSuiteSecurityCategoryTestimonialContent;
     resources: {
         heading: string;
-        cards: FlexSuiteSecurityOverviewCardContent[];
+        cards: FlexSuiteSecurityCategoryCardContent[];
     };
     cta: {
         label: string;
@@ -52,7 +52,7 @@ export type FlexSuiteSecurityOverviewContent = {
         secondaryAction: string;
     };
 };
-export declare const defaultFlexSuiteSecurityOverviewContent: FlexSuiteSecurityOverviewContent;
+export declare const defaultFlexSuiteSecurityCategoryContent: FlexSuiteSecurityCategoryContent;
 type Translate = (key: string) => string;
-export declare function getLocalizedFlexSuiteSecurityOverviewContent(t: Translate): FlexSuiteSecurityOverviewContent;
+export declare function getLocalizedFlexSuiteSecurityCategoryContent(t: Translate): FlexSuiteSecurityCategoryContent;
 export {};

package/lib/recipes/Flexsuite/Category/FlexSuiteSecurityCategory/FlexSuiteSecurityCategory.d.ts

@@ -0,0 +1,6 @@
+import { type FlexSuiteSecurityCategoryContent } from './FlexSuiteSecurityCategory.content';
+export type FlexSuiteSecurityCategoryTemplateProps = {
+    content: FlexSuiteSecurityCategoryContent;
+};
+export declare function FlexSuiteSecurityCategory(): import("react/jsx-runtime").JSX.Element;
+export declare function FlexSuiteSecurityCategoryTemplate({ content }: FlexSuiteSecurityCategoryTemplateProps): import("react/jsx-runtime").JSX.Element;

package/lib/recipes/Flexsuite/Category/index.d.ts

@@ -0,0 +1 @@
+export { FlexSuiteSecurityCategory } from './FlexSuiteSecurityCategory/FlexSuiteSecurityCategory';

package/lib/recipes/Flexsuite/Overview/FlexSuiteAIOverview.content.d.ts

@@ -63,7 +63,8 @@ export type FlexSuiteAIOverviewContent = {
     };
     rivers: FlexSuiteAIOverviewRiverContent[];
     bento: {
-        heading: string;
+        headingPrefix: string;
+        headingEmphasis: string;
         linkText: string;
         imageAlt: string;
     };

package/lib/recipes/Flexsuite/Overview/index.d.ts

@@ -1,4 +1,3 @@
 import { FlexSuiteAIOverview } from './FlexSuiteAIOverview';
-import { FlexSuiteSecurityOverview } from './FlexSuiteSecurityOverview';
 declare const FlexSuiteOverview: typeof FlexSuiteAIOverview;
-export { FlexSuiteAIOverview, FlexSuiteOverview, FlexSuiteSecurityOverview };
+export { FlexSuiteAIOverview, FlexSuiteOverview };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.67.0",
+  "version": "0.68.0-rc.0198e801",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [
     "primer",

package/lib/design-tokens/css/tokens/functional/components/pillar/colors-with-modes.css

@@ -1,39 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:09 GMT
- */
-
-:root,
-[data-color-mode="light"] {
-  --brand-Pillar-icon-color-default: var(--brand-color-scale-gray-5);
-  --brand-Pillar-icon-color-blue: var(--base-color-scale-blue-5);
-  --brand-Pillar-icon-color-coral: var(--base-color-scale-coral-5);
-  --brand-Pillar-icon-color-green: var(--base-color-scale-green-6);
-  --brand-Pillar-icon-color-gray: var(--base-color-scale-gray-6);
-  --brand-Pillar-icon-color-indigo: var(--base-color-scale-indigo-5);
-  --brand-Pillar-icon-color-lemon: var(--base-color-scale-lemon-5);
-  --brand-Pillar-icon-color-lime: var(--base-color-scale-lime-5);
-  --brand-Pillar-icon-color-orange: var(--base-color-scale-orange-5);
-  --brand-Pillar-icon-color-pink: var(--base-color-scale-pink-5);
-  --brand-Pillar-icon-color-purple: var(--base-color-scale-purple-5);
-  --brand-Pillar-icon-color-red: var(--base-color-scale-red-5);
-  --brand-Pillar-icon-color-teal: var(--base-color-scale-teal-5);
-  --brand-Pillar-icon-color-yellow: var(--base-color-scale-yellow-5);
-}
-
-[data-color-mode="dark"] {
-  --brand-Pillar-icon-color-default: var(--brand-color-scale-gray-2);
-  --brand-Pillar-icon-color-blue: var(--base-color-scale-blue-2);
-  --brand-Pillar-icon-color-coral: var(--base-color-scale-coral-2);
-  --brand-Pillar-icon-color-green: var(--base-color-scale-green-2);
-  --brand-Pillar-icon-color-gray: var(--base-color-scale-gray-2);
-  --brand-Pillar-icon-color-indigo: var(--base-color-scale-indigo-2);
-  --brand-Pillar-icon-color-lemon: var(--base-color-scale-lemon-2);
-  --brand-Pillar-icon-color-lime: var(--base-color-scale-lime-2);
-  --brand-Pillar-icon-color-orange: var(--base-color-scale-orange-2);
-  --brand-Pillar-icon-color-pink: var(--base-color-scale-pink-2);
-  --brand-Pillar-icon-color-purple: var(--base-color-scale-purple-2);
-  --brand-Pillar-icon-color-red: var(--base-color-scale-red-2);
-  --brand-Pillar-icon-color-teal: var(--base-color-scale-teal-2);
-  --brand-Pillar-icon-color-yellow: var(--base-color-scale-yellow-2);
-}

package/lib/design-tokens/css/tokens/functional/components/pillar/colors.css

@@ -1,21 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:08 GMT
- */
-
-:root {
-  --brand-Pillar-icon-color-yellow: var(--base-color-scale-yellow-5);
-  --brand-Pillar-icon-color-teal: var(--base-color-scale-teal-5);
-  --brand-Pillar-icon-color-red: var(--base-color-scale-red-5);
-  --brand-Pillar-icon-color-purple: var(--base-color-scale-purple-5);
-  --brand-Pillar-icon-color-pink: var(--base-color-scale-pink-5);
-  --brand-Pillar-icon-color-orange: var(--base-color-scale-orange-5);
-  --brand-Pillar-icon-color-lime: var(--base-color-scale-lime-5);
-  --brand-Pillar-icon-color-lemon: var(--base-color-scale-lemon-5);
-  --brand-Pillar-icon-color-indigo: var(--base-color-scale-indigo-5);
-  --brand-Pillar-icon-color-gray: var(--base-color-scale-gray-6);
-  --brand-Pillar-icon-color-green: var(--base-color-scale-green-6);
-  --brand-Pillar-icon-color-coral: var(--base-color-scale-coral-5);
-  --brand-Pillar-icon-color-blue: var(--base-color-scale-blue-5);
-  --brand-Pillar-icon-color-default: var(--brand-color-scale-gray-5);
-}

package/lib/design-tokens/js/module/tokens/functional/components/pillar/colors.js

@@ -1,71 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:08 GMT
- */
-
-module.exports = {
-  brand: {
-    Pillar: {
-      icon: {
-        color: {
-          default: {
-            value: "var(--brand-color-scale-gray-5)",
-            dark: "var(--brand-color-scale-gray-2)",
-          },
-          blue: {
-            value: "var(--base-color-scale-blue-5)",
-            dark: "var(--base-color-scale-blue-2)",
-          },
-          coral: {
-            value: "var(--base-color-scale-coral-5)",
-            dark: "var(--base-color-scale-coral-2)",
-          },
-          green: {
-            value: "var(--base-color-scale-green-6)",
-            dark: "var(--base-color-scale-green-2)",
-          },
-          gray: {
-            value: "var(--base-color-scale-gray-6)",
-            dark: "var(--base-color-scale-gray-2)",
-          },
-          indigo: {
-            value: "var(--base-color-scale-indigo-5)",
-            dark: "var(--base-color-scale-indigo-2)",
-          },
-          lemon: {
-            value: "var(--base-color-scale-lemon-5)",
-            dark: "var(--base-color-scale-lemon-2)",
-          },
-          lime: {
-            value: "var(--base-color-scale-lime-5)",
-            dark: "var(--base-color-scale-lime-2)",
-          },
-          orange: {
-            value: "var(--base-color-scale-orange-5)",
-            dark: "var(--base-color-scale-orange-2)",
-          },
-          pink: {
-            value: "var(--base-color-scale-pink-5)",
-            dark: "var(--base-color-scale-pink-2)",
-          },
-          purple: {
-            value: "var(--base-color-scale-purple-5)",
-            dark: "var(--base-color-scale-purple-2)",
-          },
-          red: {
-            value: "var(--base-color-scale-red-5)",
-            dark: "var(--base-color-scale-red-2)",
-          },
-          teal: {
-            value: "var(--base-color-scale-teal-5)",
-            dark: "var(--base-color-scale-teal-2)",
-          },
-          yellow: {
-            value: "var(--base-color-scale-yellow-5)",
-            dark: "var(--base-color-scale-yellow-2)",
-          },
-        },
-      },
-    },
-  },
-};

package/lib/design-tokens/js/tokens/functional/components/pillar/colors.js

@@ -1,19 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:08 GMT
- */
-
-export const BrandPillarIconColorDefault = "var(--brand-color-scale-gray-5)";
-export const BrandPillarIconColorBlue = "var(--base-color-scale-blue-5)";
-export const BrandPillarIconColorCoral = "var(--base-color-scale-coral-5)";
-export const BrandPillarIconColorGreen = "var(--base-color-scale-green-6)";
-export const BrandPillarIconColorGray = "var(--base-color-scale-gray-6)";
-export const BrandPillarIconColorIndigo = "var(--base-color-scale-indigo-5)";
-export const BrandPillarIconColorLemon = "var(--base-color-scale-lemon-5)";
-export const BrandPillarIconColorLime = "var(--base-color-scale-lime-5)";
-export const BrandPillarIconColorOrange = "var(--base-color-scale-orange-5)";
-export const BrandPillarIconColorPink = "var(--base-color-scale-pink-5)";
-export const BrandPillarIconColorPurple = "var(--base-color-scale-purple-5)";
-export const BrandPillarIconColorRed = "var(--base-color-scale-red-5)";
-export const BrandPillarIconColorTeal = "var(--base-color-scale-teal-5)";
-export const BrandPillarIconColorYellow = "var(--base-color-scale-yellow-5)";

package/lib/design-tokens/scss/tokens/functional/components/pillar/colors.scss

@@ -1,18 +0,0 @@
-
-// Do not edit directly
-// Generated on Fri, 24 Apr 2026 13:01:08 GMT
-
-$brand-Pillar-icon-color-yellow: var(--base-color-scale-yellow-5);
-$brand-Pillar-icon-color-teal: var(--base-color-scale-teal-5);
-$brand-Pillar-icon-color-red: var(--base-color-scale-red-5);
-$brand-Pillar-icon-color-purple: var(--base-color-scale-purple-5);
-$brand-Pillar-icon-color-pink: var(--base-color-scale-pink-5);
-$brand-Pillar-icon-color-orange: var(--base-color-scale-orange-5);
-$brand-Pillar-icon-color-lime: var(--base-color-scale-lime-5);
-$brand-Pillar-icon-color-lemon: var(--base-color-scale-lemon-5);
-$brand-Pillar-icon-color-indigo: var(--base-color-scale-indigo-5);
-$brand-Pillar-icon-color-gray: var(--base-color-scale-gray-6);
-$brand-Pillar-icon-color-green: var(--base-color-scale-green-6);
-$brand-Pillar-icon-color-coral: var(--base-color-scale-coral-5);
-$brand-Pillar-icon-color-blue: var(--base-color-scale-blue-5);
-$brand-Pillar-icon-color-default: var(--brand-color-scale-gray-5);

package/lib/design-tokens/ts/tokens/functional/components/pillar/colors.d.ts

@@ -1,32 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:08 GMT
- */
-
-
-    
-declare const tokens: {
-  "brand": {
-    "Pillar": {
-      "icon": {
-        "color": {
-          "default": string,
-          "blue": string,
-          "coral": string,
-          "green": string,
-          "gray": string,
-          "indigo": string,
-          "lemon": string,
-          "lime": string,
-          "orange": string,
-          "pink": string,
-          "purple": string,
-          "red": string,
-          "teal": string,
-          "yellow": string
-        }
-      }
-    }
-  }
-}
-export default tokens;

package/lib/design-tokens/ts/tokens/functional/components/pillar/colors.js

@@ -1,29 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Fri, 24 Apr 2026 13:01:09 GMT
- */
-
-module.exports = {
-  brand: {
-    Pillar: {
-      icon: {
-        color: {
-          default: "var(--brand-color-scale-gray-5)",
-          blue: "var(--base-color-scale-blue-5)",
-          coral: "var(--base-color-scale-coral-5)",
-          green: "var(--base-color-scale-green-6)",
-          gray: "var(--base-color-scale-gray-6)",
-          indigo: "var(--base-color-scale-indigo-5)",
-          lemon: "var(--base-color-scale-lemon-5)",
-          lime: "var(--base-color-scale-lime-5)",
-          orange: "var(--base-color-scale-orange-5)",
-          pink: "var(--base-color-scale-pink-5)",
-          purple: "var(--base-color-scale-purple-5)",
-          red: "var(--base-color-scale-red-5)",
-          teal: "var(--base-color-scale-teal-5)",
-          yellow: "var(--base-color-scale-yellow-5)",
-        },
-      },
-    },
-  },
-};

package/lib/recipes/Flexsuite/Overview/FlexSuiteSecurityOverview.d.ts

@@ -1,6 +0,0 @@
-import { type FlexSuiteSecurityOverviewContent } from './FlexSuiteSecurityOverview.content';
-export type FlexSuiteSecurityOverviewTemplateProps = {
-    content: FlexSuiteSecurityOverviewContent;
-};
-export declare function FlexSuiteSecurityOverview(): import("react/jsx-runtime").JSX.Element;
-export declare function FlexSuiteSecurityOverviewTemplate({ content }: FlexSuiteSecurityOverviewTemplateProps): import("react/jsx-runtime").JSX.Element;