@primer/react-brand 0.14.0 → 0.15.0-rc.137f531

package/lib/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,155 @@
+import React, { PropsWithChildren, Ref, ReactElement } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
+declare type ActionMenuProps = {
+    /**
+     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     */
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    /**
+     * Determines whether the ActionMenu is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determines whether the ActionMenu is open by default
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when an item is selected.
+     * The value of the selected item is passed as an argument.
+     */
+    onSelect?: (newValue: string) => void;
+    /**
+     * The selection variant of the ActionMenu.
+     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
+     * - `none`: No items can be selected. Menu items as a menuitem.
+     */
+    selectionVariant?: 'single' | 'none';
+    /**
+     * Test id for the ActionMenu
+     */
+    'data-testid'?: string;
+    /**
+     * Horizontal alignment of the menu relative to the bottom of the button
+     */
+    menuAlignment?: 'start' | 'end';
+} & BaseProps<HTMLDivElement>;
+declare type ActionMenuButtonProps = PropsWithChildren<Ref<HTMLButtonElement>> & {
+    id?: string;
+    ref?: React.RefObject<HTMLButtonElement>;
+    className?: string;
+    menuOpen?: boolean;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    'data-testid'?: string;
+};
+declare type ActionMenuItemProps = {
+    value: string;
+    handler?: (newValue: string) => void;
+    selected?: boolean;
+    type?: 'none' | 'single';
+    disabled?: boolean;
+} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>;
+declare type ActionMenuOverlayProps = PropsWithChildren<Ref<HTMLUListElement>> & {
+    'aria-label': string;
+    id?: string;
+    ref?: React.RefObject<HTMLUListElement>;
+    className?: string;
+    'data-testid'?: string;
+    menuOpen?: boolean;
+    style?: React.CSSProperties;
+};
+/**
+ * Use ActionMenu to display a list of actions or selections that expand through a trigger button.
+ * @see https://primer.style/brand/components/ActionMenu
+ */
+export declare const ActionMenu: React.NamedExoticComponent<{
+    /**
+     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     */
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    /**
+     * Determines whether the ActionMenu is disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Determines whether the ActionMenu is open by default
+     */
+    open?: boolean | undefined;
+    /**
+     * Callback that is called when an item is selected.
+     * The value of the selected item is passed as an argument.
+     */
+    onSelect?: ((newValue: string) => void) | undefined;
+    /**
+     * The selection variant of the ActionMenu.
+     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
+     * - `none`: No items can be selected. Menu items as a menuitem.
+     */
+    selectionVariant?: "none" | "single" | undefined;
+    /**
+     * Test id for the ActionMenu
+     */
+    'data-testid'?: string | undefined;
+    /**
+     * Horizontal alignment of the menu relative to the bottom of the button
+     */
+    menuAlignment?: "start" | "end" | undefined;
+} & BaseProps<HTMLDivElement>> & {
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, onSelect }: ActionMenuProps) => JSX.Element;
+} & {
+    Button: React.ForwardRefExoticComponent<(Pick<((instance: HTMLButtonElement | null) => void) & {
+        children?: React.ReactNode;
+    } & {
+        id?: string | undefined;
+        ref?: React.RefObject<HTMLButtonElement> | undefined;
+        className?: string | undefined;
+        menuOpen?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        'data-testid'?: string | undefined;
+    }, "children" | "className" | "id" | "onClick" | "disabled" | "data-testid" | "menuOpen"> | Pick<React.RefObject<HTMLButtonElement> & {
+        children?: React.ReactNode;
+    } & {
+        id?: string | undefined;
+        ref?: React.RefObject<HTMLButtonElement> | undefined;
+        className?: string | undefined;
+        menuOpen?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        'data-testid'?: string | undefined;
+    }, "children" | "className" | "id" | "onClick" | "disabled" | "current" | "data-testid" | "menuOpen">) & React.RefAttributes<HTMLButtonElement>>;
+    Item: ({ children, className, disabled, handler, selected, type, value, ...props }: ActionMenuItemProps) => JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<(Pick<((instance: HTMLUListElement | null) => void) & {
+        children?: React.ReactNode;
+    } & {
+        'aria-label': string;
+        id?: string | undefined;
+        ref?: React.RefObject<HTMLUListElement> | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        menuOpen?: boolean | undefined;
+        style?: React.CSSProperties | undefined;
+    }, "children" | "className" | "id" | "style" | "aria-label" | "data-testid" | "menuOpen"> | Pick<React.RefObject<HTMLUListElement> & {
+        children?: React.ReactNode;
+    } & {
+        'aria-label': string;
+        id?: string | undefined;
+        ref?: React.RefObject<HTMLUListElement> | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        menuOpen?: boolean | undefined;
+        style?: React.CSSProperties | undefined;
+    }, "children" | "className" | "id" | "style" | "aria-label" | "current" | "data-testid" | "menuOpen">) & React.RefAttributes<HTMLUListElement>>;
+    testIds: {
+        root: string;
+        readonly button: string;
+        readonly overlay: string;
+        readonly list: string;
+        readonly item: string;
+    };
+};
+export {};

package/lib/ActionMenu/ActionMenu.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ActionMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionMenu';

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -52,7 +52,7 @@ declare type SearchProps = {
     ref: React.RefObject<HTMLInputElement>;
     active?: boolean;
     title?: string;
-    handlerFn?: () => void;
+    handlerFn?: (event: MouseEvent | TouchEvent | FocusEvent) => void;
     autoComplete?: boolean;
     searchResults?: SubdomainNavBarSearchResultProps[];
     searchTerm?: string;

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -848,7 +848,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -862,7 +862,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -880,7 +880,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -1182,7 +1182,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -1363,6 +1363,17 @@ select {
 }
 
 @media (forced-colors: active) {
+  .Primer_Brand__Button-module__Button--primary___xIC7G,
+  .Primer_Brand__Button-module__Button--secondary___akMC2,
+  .Primer_Brand__Button-module__Button--disabled___Ba17E:hover {
+    outline: var(--brand-borderWidth-thick) solid transparent;
+    outline-offset: 2px;
+  }
+
+  .Primer_Brand__Button-module__Button--disabled___Ba17E {
+    outline-color: GrayText;
+  }
+
   /* Retains focus indicator when in "Windows High Contrast Mode". */
   .Primer_Brand__Button-module__Button___lDruK:focus:not(.Primer_Brand__Button-module__Button--disabled___Ba17E[disabled]) {
     outline: var(--brand-borderWidth-thick) solid;
@@ -1619,7 +1630,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -1640,7 +1651,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -2426,7 +2437,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -2454,7 +2465,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -2571,7 +2582,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -2722,7 +2733,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -2732,7 +2743,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -2802,7 +2813,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -2821,7 +2832,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -3764,7 +3775,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -4306,7 +4317,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -4616,7 +4627,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -5015,7 +5026,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:14 GMT
  */
 
 :root,
@@ -5196,7 +5207,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:14 GMT
  */
 
 :root,
@@ -5316,7 +5327,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {
@@ -5328,7 +5339,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,
@@ -5408,3 +5419,179 @@ html {
   margin-top: var(--base-size-16);
 }
 
+/**
+ * Do not edit directly
+ * Generated on Thu, 16 Mar 2023 19:18:14 GMT
+ */
+
+:root,
+[data-color-mode="light"] {
+  --brand-ActionMenu-color-border-rest: var(--brand-color-border-default);
+  --brand-ActionMenu-color-border-hover: var(--base-color-scale-black-0);
+  --brand-ActionMenu-color-border-active: var(--base-color-scale-black-0);
+  --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-1);
+  --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-0);
+}
+
+[data-color-mode="dark"] {
+  --brand-ActionMenu-color-border-rest: var(--brand-color-border-default);
+  --brand-ActionMenu-color-border-hover: var(--base-color-scale-white-0);
+  --brand-ActionMenu-color-border-active: var(--base-color-scale-white-0);
+  --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-6);
+  --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-3);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu___xAoB5 {
+  position: relative;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu--disabled___Ic5nl {
+  cursor: not-allowed;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG {
+  border-radius: var(--base-size-48);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG:focus:not(.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG[disabled]),
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG.Primer_Brand__ActionMenu-module__focus-visible___hVXW3:not(.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG[disabled]) {
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG:focus:not(.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG[disabled]),
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG:focus-visible:not(.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG[disabled]) {
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG > span:first-of-type {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button___gqNoG:hover {
+  border-color: var(--brand-ActionMenu-color-border-hover);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__menu____B9HP {
+  position: absolute;
+  z-index: 100;
+  padding: var(--base-size-12);
+  margin-top: var(--base-size-8);
+  visibility: hidden;
+  background-color: var(--brand-color-canvas-default);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-large);
+  max-height: 460px;
+  overflow-y: auto;
+  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02),
+    0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__menu--visible___dIcw5 {
+  visibility: visible;
+  animation: 189ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Primer_Brand__ActionMenu-module__overlay-appear___hIYSP;
+}
+
+@keyframes Primer_Brand__ActionMenu-module__overlay-appear___hIYSP {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.Primer_Brand__ActionMenu-module__ActionMenu__menu____B9HP::-webkit-scrollbar {
+  width: var(--base-size-12);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__menu____B9HP::-webkit-scrollbar-track {
+  border-left: 1px solid var(--brand-color-border-muted);
+  border-top-right-radius: var(--brand-borderRadius-large);
+  border-bottom-right-radius: var(--brand-borderRadius-large);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__menu____B9HP::-webkit-scrollbar-thumb {
+  border-radius: var(--brand-borderRadius-medium);
+  border: 1px solid var(--brand-color-border-default);
+  background-color: var(--brand-ActionMenu-color-scrollbar-thumb-bg);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr {
+  flex: 1 0 auto;
+  display: grid;
+  align-items: center;
+  padding: var(--base-size-12) var(--base-size-16);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  grid-template-areas: 'leadingVisual text';
+  grid-template-columns: min-content min-content;
+  white-space: pre;
+  list-style: none;
+  border-radius: var(--brand-borderRadius-medium);
+  border-color: var(--brand-ActionMenu-color-border-rest);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr:hover:not(.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr[aria-disabled='true']) {
+  cursor: pointer;
+  background-color: var(--brand-ActionMenu-color-item-hover);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item--selection-type-single___ZdivU {
+  padding-right: var(--base-size-48);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr.Primer_Brand__ActionMenu-module__focus-visible___hVXW3 {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+  transition: none;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item___GxmDr:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+  transition: none;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button--active___HOEZK {
+  border-color: var(--brand-ActionMenu-color-border-active) !important;
+  box-shadow: 0 0 0 3px var(--brand-ActionMenu-color-border-active) !important;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__button--active___HOEZK {
+  transition: none;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item-leadingVisual___UWjE1 {
+  display: flex;
+  min-width: var(--base-size-16);
+  margin-right: var(--brand-control-medium-gap);
+  color: var(--brand-color-text-default);
+  pointer-events: none;
+  grid-area: leadingVisual / leadingVisual;
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item-text___K_1vl {
+  grid-area: text / text;
+  line-height: calc(1.42857);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item-icon___JyMwz {
+  fill: var(--brand-color-text-default);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item-content--disabled___WrxPY {
+  color: var(--base-color-scale-gray-3);
+}
+
+.Primer_Brand__ActionMenu-module__ActionMenu__item-icon--disabled___Ebefz {
+  fill: var(--base-color-scale-gray-3);
+}
+

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:17 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,

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

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 16 Mar 2023 19:18:14 GMT
+ */
+
+:root,
+[data-color-mode="light"] {
+  --brand-ActionMenu-color-border-rest: var(--brand-color-border-default);
+  --brand-ActionMenu-color-border-hover: var(--base-color-scale-black-0);
+  --brand-ActionMenu-color-border-active: var(--base-color-scale-black-0);
+  --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-1);
+  --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-0);
+}
+
+[data-color-mode="dark"] {
+  --brand-ActionMenu-color-border-rest: var(--brand-color-border-default);
+  --brand-ActionMenu-color-border-hover: var(--base-color-scale-white-0);
+  --brand-ActionMenu-color-border-active: var(--base-color-scale-white-0);
+  --brand-ActionMenu-color-item-hover: var(--base-color-scale-gray-6);
+  --brand-ActionMenu-color-scrollbar-thumb-bg: var(--base-color-scale-gray-3);
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Mar 2023 08:49:18 GMT
+ * Generated on Thu, 16 Mar 2023 19:18:13 GMT
  */
 
 :root,