@vygruppen/spor-react 8.1.0 → 8.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.1.0 build
+> @vygruppen/spor-react@8.2.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
 ESM Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-JUNOSADJ.mjs".
-CJS dist/index.js 502.62 KB
-CJS ⚡️ Build success in 2210ms
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-D4IHIS3H.mjs".
+CJS dist/index.js 503.28 KB
+CJS ⚡️ Build success in 2095ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-X4ONXTIF.mjs 1.19 KB
-ESM dist/chunk-JUNOSADJ.mjs             394.94 KB
-ESM ⚡️ Build success in 2211ms
-DTS ⚡️ Build success in 11198ms
-DTS dist/index.d.ts  271.10 KB
-DTS dist/index.d.mts 271.10 KB
+ESM dist/CountryCodeSelect-POM47KR5.mjs 1.19 KB
+ESM dist/chunk-D4IHIS3H.mjs             395.57 KB
+ESM ⚡️ Build success in 2097ms
+DTS ⚡️ Build success in 10536ms
+DTS dist/index.d.ts  271.35 KB
+DTS dist/index.d.mts 271.35 KB

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @vygruppen/spor-react
 
+## 8.2.0
+
+### Minor Changes
+
+- f96483c: ListBox: Fix a focus bug
+
+### Patch Changes
+
+- 5c87f0c: ListBox: Fix focus styles for listbox
+- 7011328: TextLink: Updated colors for primary and secondary variants to align with Figma
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-X4ONXTIF.mjs → CountryCodeSelect-POM47KR5.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-JUNOSADJ.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-D4IHIS3H.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-JUNOSADJ.mjs → chunk-D4IHIS3H.mjs}

@@ -2669,6 +2669,7 @@ function Combobox({
   paddingY,
   emptyContent,
   inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
@@ -2678,11 +2679,11 @@ function Combobox({
   const popoverRef = useRef(null);
   const inputWidth = useInputWidth(inputRef);
   const state2 = useComboBoxState({
-    ...rest,
-    defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains2,
     shouldCloseOnBlur: true,
-    label
+    label,
+    ...rest
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -3432,7 +3433,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-X4ONXTIF.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-POM47KR5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10103,6 +10104,23 @@ function accentText(state2, props) {
       };
   }
 }
+function brandText(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "active":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: mode("pine", "coralGreen")(props)
+      };
+  }
+}
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -12338,25 +12356,34 @@ var config23 = defineStyleConfig$1({
   }),
   variants: {
     primary: (props) => ({
-      color: mode("pine", "coralGreen")(props),
+      ...brandText("default", props),
       _hover: {
-        color: mode("darkTeal", "white")(props),
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
+        ...brandText("hover", props),
+        ...brandBackground("hover", props)
       },
       _active: {
-        color: mode("pine", "white")(props),
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+        ...brandText("active", props),
+        ...brandBackground("active", props)
       }
     }),
     secondary: (props) => ({
-      color: mode("darkGrey", "white")(props),
+      backgroundImage: `linear-gradient(${mode(
+        "blackAlpha.400",
+        "whiteAlpha.400"
+      )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+      ...baseText("default", props),
+      "&:focus, &:focus-visible, &:active, &:hover": {
+        outline: "solid",
+        outlineWidth: "1px"
+      },
+      ...baseBackground("default", props),
       _hover: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
-        color: mode("darkGrey", "white")(props)
+        outlineColor: mode("darkGrey", "white")(props),
+        ...baseBackground("hover", props)
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props)
+        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseBackground("active", props)
       }
     })
   },
@@ -12421,7 +12448,9 @@ var config24 = helpers15.defineMultiStyleConfig({
       _hover: {
         ...ghostBackground("hover", props)
       },
-      ...focusVisibleStyles(props),
+      _focus: {
+        ...ghostBackground("selected", props)
+      },
       _selected: {
         ...ghostBackground("selected", props)
       }

package/dist/index.d.mts

@@ -776,6 +776,8 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     emptyContent?: React.ReactNode;
     /** A ref to the input field */
     inputRef?: React.RefObject<HTMLInputElement>;
+    /** If you want to allow an empty collection */
+    allowsEmptyCollection?: boolean;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -800,7 +802,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4252,26 +4254,32 @@ declare const theme: {
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
+                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
+                    };
+                    backgroundColor: string;
+                    "&:focus, &:focus-visible, &:active, &:hover": {
+                        outline: string;
+                        outlineWidth: string;
                     };
+                    color: string;
+                    backgroundImage: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -4323,15 +4331,6 @@ declare const theme: {
                     borderBottomRadius: string;
                 };
                 item: {
-                    _selected: {
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
                     paddingX: number;
                     paddingY: number;
                     marginY: number;
@@ -4346,6 +4345,12 @@ declare const theme: {
                     _hover: {
                         backgroundColor: string;
                     };
+                    _focus: {
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                    };
                 };
                 label: {};
                 description: {

package/dist/index.d.ts

@@ -776,6 +776,8 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     emptyContent?: React.ReactNode;
     /** A ref to the input field */
     inputRef?: React.RefObject<HTMLInputElement>;
+    /** If you want to allow an empty collection */
+    allowsEmptyCollection?: boolean;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -800,7 +802,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4252,26 +4254,32 @@ declare const theme: {
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
+                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
+                    };
+                    backgroundColor: string;
+                    "&:focus, &:focus-visible, &:active, &:hover": {
+                        outline: string;
+                        outlineWidth: string;
                     };
+                    color: string;
+                    backgroundImage: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -4323,15 +4331,6 @@ declare const theme: {
                     borderBottomRadius: string;
                 };
                 item: {
-                    _selected: {
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
                     paddingX: number;
                     paddingY: number;
                     marginY: number;
@@ -4346,6 +4345,12 @@ declare const theme: {
                     _hover: {
                         backgroundColor: string;
                     };
+                    _focus: {
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                    };
                 };
                 label: {};
                 description: {

package/dist/index.js

@@ -3173,6 +3173,7 @@ function Combobox({
   paddingY,
   emptyContent,
   inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
@@ -3182,11 +3183,11 @@ function Combobox({
   const popoverRef = React69.useRef(null);
   const inputWidth = useInputWidth(inputRef);
   const state2 = reactStately.useComboBoxState({
-    ...rest,
-    defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains2,
     shouldCloseOnBlur: true,
-    label
+    label,
+    ...rest
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -11514,6 +11515,23 @@ function accentText(state2, props) {
       };
   }
 }
+function brandText(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "active":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: themeTools.mode("pine", "coralGreen")(props)
+      };
+  }
+}
 var init_text_utils = __esm({
   "src/theme/utils/text-utils.ts"() {
     init_foundations();
@@ -13884,6 +13902,8 @@ var config23, link_default;
 var init_link2 = __esm({
   "src/theme/components/link.ts"() {
     init_focus_util();
+    init_background_utils();
+    init_text_utils();
     config23 = react.defineStyleConfig({
       baseStyle: (props) => ({
         transitionProperty: "common",
@@ -13917,25 +13937,34 @@ var init_link2 = __esm({
       }),
       variants: {
         primary: (props) => ({
-          color: themeTools.mode("pine", "coralGreen")(props),
+          ...brandText("default", props),
           _hover: {
-            color: themeTools.mode("darkTeal", "white")(props),
-            backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
+            ...brandText("hover", props),
+            ...brandBackground("hover", props)
           },
           _active: {
-            color: themeTools.mode("pine", "white")(props),
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+            ...brandText("active", props),
+            ...brandBackground("active", props)
           }
         }),
         secondary: (props) => ({
-          color: themeTools.mode("darkGrey", "white")(props),
+          backgroundImage: `linear-gradient(${themeTools.mode(
+            "blackAlpha.400",
+            "whiteAlpha.400"
+          )(props)}, ${themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+          ...baseText("default", props),
+          "&:focus, &:focus-visible, &:active, &:hover": {
+            outline: "solid",
+            outlineWidth: "1px"
+          },
+          ...baseBackground("default", props),
           _hover: {
-            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.200")(props),
-            color: themeTools.mode("darkGrey", "white")(props)
+            outlineColor: themeTools.mode("darkGrey", "white")(props),
+            ...baseBackground("hover", props)
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
-            color: themeTools.mode("darkGrey", "white")(props)
+            outlineColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
+            ...baseBackground("active", props)
           }
         })
       },
@@ -13978,7 +14007,6 @@ var init_listbox = __esm({
     init_dist4();
     init_foundations();
     init_background_utils();
-    init_focus_util();
     parts10 = anatomy("ListBox").parts(
       "container",
       "item",
@@ -14016,7 +14044,9 @@ var init_listbox = __esm({
           _hover: {
             ...ghostBackground("hover", props)
           },
-          ...focusVisibleStyles(props),
+          _focus: {
+            ...ghostBackground("selected", props)
+          },
           _selected: {
             ...ghostBackground("selected", props)
           }

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-JUNOSADJ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-D4IHIS3H.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/Combobox.tsx

@@ -13,6 +13,8 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   emptyContent?: React.ReactNode;
   /** A ref to the input field */
   inputRef?: React.RefObject<HTMLInputElement>;
+  /** If you want to allow an empty collection */
+  allowsEmptyCollection?: boolean;
 } & Pick<
     InputProps,
     | "marginTop"
@@ -81,6 +83,7 @@ export function Combobox<T extends object>({
   paddingY,
   emptyContent,
   inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -93,11 +96,11 @@ export function Combobox<T extends object>({
   const inputWidth = useInputWidth(inputRef);
 
   const state = useComboBoxState({
-    ...rest,
-    defaultFilter: contains,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains,
     shouldCloseOnBlur: true,
     label,
+    ...rest,
   });
 
   const {

package/src/theme/components/link.ts

@@ -1,6 +1,8 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, brandBackground } from "../utils/background-utils";
+import { baseText, brandText } from "../utils/text-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
@@ -38,25 +40,34 @@ const config = defineStyleConfig({
   }),
   variants: {
     primary: (props) => ({
-      color: mode("pine", "coralGreen")(props),
+      ...brandText("default", props),
       _hover: {
-        color: mode("darkTeal", "white")(props),
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+        ...brandText("hover", props),
+        ...brandBackground("hover", props),
       },
       _active: {
-        color: mode("pine", "white")(props),
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        ...brandText("active", props),
+        ...brandBackground("active", props),
       },
     }),
     secondary: (props) => ({
-      color: mode("darkGrey", "white")(props),
+      backgroundImage: `linear-gradient(${mode(
+        "blackAlpha.400",
+        "whiteAlpha.400",
+      )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+      ...baseText("default", props),
+      "&:focus, &:focus-visible, &:active, &:hover": {
+        outline: "solid",
+        outlineWidth: "1px",
+      },
+      ...baseBackground("default", props),
       _hover: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
-        color: mode("darkGrey", "white")(props),
+        outlineColor: mode("darkGrey", "white")(props),
+        ...baseBackground("hover", props),
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props),
+        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseBackground("active", props),
       },
     }),
   },

package/src/theme/components/listbox.ts

@@ -3,7 +3,6 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { ghostBackground } from "../utils/background-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -44,7 +43,9 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         ...ghostBackground("hover", props),
       },
-      ...focusVisibleStyles(props),
+      _focus: {
+        ...ghostBackground("selected", props),
+      },
       _selected: {
         ...ghostBackground("selected", props),
       },

package/src/theme/utils/text-utils.ts

@@ -38,3 +38,23 @@ export function accentText(state: AccentTextState, props: StyleFunctionProps) {
       };
   }
 }
+
+type BrandTextState = Subset<State, "hover" | "active" | "default">;
+
+export function brandText(state: BrandTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "hover":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "active":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "default":
+    default:
+      return {
+        color: mode("pine", "coralGreen")(props),
+      };
+  }
+}