@loadsmart/loadsmart-ui 6.0.14 → 6.0.16

package/src/components/Button/Button.tsx

@@ -142,11 +142,12 @@ const StyledButton = styled(BaseStyledButton)<{
 
   color: ${conditional({
     'button-primary-color': whenProps({ $variant: 'primary' }),
-    'button-secondary-color': whenProps({ $variant: ['secondary', 'tertiary'], $scheme: 'light' }),
+    'button-secondary-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-color': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-color': whenProps({ $variant: 'warning' }),
     'button-icon-color': whenProps({ $variant: 'icon' }),
   })};
@@ -154,13 +155,16 @@ const StyledButton = styled(BaseStyledButton)<{
   background: ${conditional({
     'button-primary-background': whenProps({ $variant: 'primary' }),
     'button-secondary-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'light',
     }),
     'button-secondary-dark-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary': whenProps({
+      $variant: 'tertiary',
+    }),
     'button-warning-background': whenProps({ $variant: 'warning' }),
     'button-icon-background': whenProps({ $variant: 'icon' }),
   })};
@@ -169,9 +173,9 @@ const StyledButton = styled(BaseStyledButton)<{
     'button-primary-border-color': whenProps({ $variant: 'primary' }),
     'button-secondary-border-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-border-color': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+    'button-tertiary-border-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-border-color': whenProps({ $variant: 'warning' }),
     'button-icon-border-color': whenProps({ $variant: 'icon' }),
-    'color-transparent': whenProps({ $variant: 'tertiary' }),
   })};
   border-radius: ${conditional({
     'button-border-radius': whenProps({ $variant: ['primary', 'secondary', 'warning'] }),
@@ -182,13 +186,16 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--hover': whenProps({
+        $variant: 'tertiary',
+      }),
       'button-warning-background--hover': whenProps({ $variant: 'warning' }),
       'button-icon-background--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -202,20 +209,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--hover': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-color--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -225,13 +233,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-background--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -245,20 +254,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--disabled': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-color--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -268,13 +278,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--focus': whenProps({ $variant: 'warning' }),
       'button-icon-background--focus': whenProps({ $variant: 'icon' }),
     })};
@@ -285,30 +296,42 @@ const StyledButton = styled(BaseStyledButton)<{
         $scheme: 'light',
       }),
       'button-secondary-dark-border-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--focus': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--focus': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+      'button-tertiary-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-color--focus': whenProps({ $variant: 'icon' }),
     })};
 
     box-shadow: ${conditional({
+      'button-primary-box-shadow': whenProps({ $variant: 'primary' }),
+      'button-secondary-box-shadow': whenProps({ $variant: 'secondary' }),
+      'button-warning-box-shadow': whenProps({ $variant: 'warning' }),
+      'button-tertiary-box-shadow': whenProps({ $variant: 'tertiary' }),
+      'button-icon-box-shadow': whenProps({ $variant: 'icon' }),
+    })};
+
+    outline: ${conditional({
       'button-primary-outline': whenProps({ $variant: 'primary' }),
       'button-secondary-outline': whenProps({ $variant: 'secondary' }),
+      'button-tertiary-outline': whenProps({ $variant: 'tertiary' }),
       'button-warning-outline': whenProps({ $variant: 'warning' }),
       'button-icon-outline': whenProps({ $variant: 'icon' }),
-    })}
+    })};
+
+    outline-offset: ${token('button-outline-offset')};
   `}
 
   ${activatable`

package/src/components/Checkbox/Checkbox.tsx

@@ -127,7 +127,7 @@ const Selector = styled.input<SelectionStyleProps>`
       color: ${token('checkbox-selector-icon-color')};
     }
 
-    box-shadow: ${token('checkbox-selector-outline')};
+    box-shadow: ${token('checkbox-selector-box-shadow')};
   `}
 `
 

package/src/components/Dropdown/Dropdown.test.tsx

@@ -10,7 +10,7 @@ const { Playground, WithSections, Extended } = composeStories(stories)
 
 describe('Dropdown', () => {
   describe('Generic', () => {
-    const setup = (overrides?: stories.DropdownStoryProps) =>
+    const setup = (overrides?: Partial<stories.DropdownStoryProps>) =>
       renderer(<Playground {...overrides} />).render()
 
     it('starts collapsed', () => {

package/src/components/Dropdown/DropdownMenu.tsx

@@ -32,6 +32,7 @@ const StyledPopover = styled(Popover.Floating)`
   border: 1px solid ${token('dropdown-border-color')};
   border-radius: ${token('dropdown-border-radius')};
   box-shadow: ${token('dropdown-shadow')};
+  width: max-content;
 `
 
 const StyledSpan = styled.span`
@@ -154,6 +155,8 @@ const GenericDropdownMenuWrapper = styled.div`
 const DropdownMenuWrapper = styled(GenericDropdownMenuWrapper)`
   max-height: 240px;
   overflow-y: auto;
+  max-width: 100%;
+  width: 100%;
 
   ${DropdownItemWrapper} + ${DropdownItemWrapper},
   ${DropdownSectionHeader} + ${DropdownItemWrapper} {

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -64,6 +64,8 @@ const TriggerButton = styled(
 
   border: none;
 
+  height: ${token('dropdown-trigger-height')};
+
   text-transform: ${conditional({
     capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
     uppercase: whenProps({ outlined: true }),
@@ -159,21 +161,15 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
   border-width: ${token('button-border-width')};
   border-style: solid;
   border-color: ${conditional({
-    'button-secondary-border-color': whenProps({ scheme: 'light', $outlined: true }),
-    'button-secondary-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
-    'color-transparent': whenProps({ $outlined: false }),
+    'dropdown-trigger-border-color': whenProps({ scheme: 'light', $outlined: true }),
+    'dropdown-trigger-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
+    'dropdown-trigger-outlined-border-color': whenProps({ $outlined: false }),
   })};
 
   font-size: ${token('font-size-4')};
 
   color: ${token('color-neutral-darker')};
 
-  height: ${conditional({
-    'dropdown-trigger-height': whenProps({ $scale: 'default' }),
-    'dropdown-trigger-small-height': whenProps({ $scale: 'small' }),
-    'dropdown-trigger-large-height': whenProps({ $scale: 'large' }),
-  })};
-
   box-sizing: border-box;
 
   flex: 1;
@@ -210,7 +206,9 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
       'color-transparent': whenProps({ $outlined: false }),
     })};
 
-      box-shadow: ${conditional({ 'shadow-glow-primary': whenProps({ $outlined: true }) })};
+    box-shadow: ${conditional({ 'dropdown-trigger-box-shadow': whenProps({ $outlined: true }) })};
+    outline: ${token('dropdown-trigger-outline')};
+    outline-offset: ${token('dropdown-trigger-outline-offset')};
   `}
 
   ${activatable`
@@ -231,7 +229,7 @@ const TriggerHandle = styled(BaseButton)`
   border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
   border: none;
 
-  height: calc(100% - 2px);
+  height: ${token('dropdown-trigger-height')};
 `
 
 const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`

package/src/components/Link/Link.tsx

@@ -8,6 +8,7 @@ import font from 'styles/font'
 import transition from 'styles/transition'
 import ellipsizable from 'styles/ellipsizable'
 import hoverable from 'styles/hoverable'
+import focusable from 'styles/focusable'
 import disableable from 'styles/disableable'
 import { getToken as token } from 'theming'
 
@@ -37,11 +38,19 @@ const StyledBaseAnchor = styled.a`
 
   min-height: 24px;
 
+  border-radius: ${token('border-radius-s')};
+
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
 
+  ${focusable`
+    box-shadow: ${token('link-box-shadow')};
+    outline: ${token('link-outline')};
+    outline-offset: ${token('link-outline-offset')};
+  `}
+
   ${disableable``}
 
   ${({ children }) =>

package/src/components/Popover/Popover.test.tsx

@@ -4,8 +4,7 @@ import { composeStories } from '@storybook/testing-react'
 import * as stories from './Popover.stories'
 import generator from '../../tests/generator'
 import renderer, { screen } from '../../tests/renderer'
-
-import type { PopoverProps } from './Popover'
+import type { PopoverProps } from './Popover.types'
 
 const { Playground } = composeStories(stories)
 

package/src/components/Popover/Popover.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from 'react'
-import { useFloating, autoUpdate } from '@floating-ui/react-dom'
-import { offset, flip, shift, arrow } from '@floating-ui/core'
-import type { Placement, MiddlewareState } from '@floating-ui/core'
+import React, { CSSProperties, useMemo, useRef } from 'react'
+import { useFloating, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/react-dom'
+import type { Placement } from '@floating-ui/react-dom'
 
 import type {
   PopoverAlign,
@@ -25,75 +24,50 @@ export function usePopover(): UsePopoverReturn {
 }
 
 function Popover(props: PopoverProps): JSX.Element {
-  const arrowRef = React.useRef<HTMLElement | null>(null)
+  const arrowRef = useRef<HTMLElement | null>(null)
 
   const { position = 'bottom', align = 'start', strategy = 'fixed' } = props
 
-  const desiredPlacement = `${position}${align === 'center' ? '' : `-${align}`}` as Placement
+  const desiredPlacement: Placement = `${position}${
+    align === 'center' ? '' : `-${align}`
+  }` as Placement
 
-  const result = useFloating({
+  const floating = useFloating({
     placement: desiredPlacement,
     strategy,
-    middleware: [
-      offset(10),
-      flip(),
-      shift(),
-      {
-        name: 'arrow',
-        fn(args: MiddlewareState) {
-          if (arrowRef.current) {
-            return arrow({ element: arrowRef.current, padding: 8 }).fn(args)
-          }
-
-          return {}
-        },
-      },
-    ],
+    middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef, padding: 8 })],
     // TODO: FloatingUI docs states that `autoUpdate` is expensive.
     // This should be properly investidated since it's the way to
     // update fixed positions after scrolling.
     whileElementsMounted: autoUpdate,
   })
 
-  const registerArrow = React.useCallback(
-    (node: HTMLElement) => {
-      arrowRef.current = node
-      result.update()
-    },
-    [result]
-  )
-
-  const [resultPosition = position, resultAlign = align] = result.placement.split('-') as [
+  const [resultPosition = position, resultAlign = align] = floating.placement.split('-') as [
     PopoverPosition,
     PopoverAlign
   ]
 
-  const value = useMemo(
+  const value = useMemo<UsePopoverReturn>(
     () => ({
       strategy,
       register: {
-        reference: result.refs.setReference,
-        floating: result.refs.setFloating,
-        arrow: registerArrow,
+        setReference: floating.refs.setReference,
+        setFloating: floating.refs.setFloating,
+        setArrow: arrowRef,
       },
       result: {
-        floating: {
-          top: result.y ?? 0,
-          left: result.x ?? 0,
-        },
-        arrow: { top: result.middlewareData.arrow?.y, left: result.middlewareData.arrow?.x },
+        floatingStyles: floating.floatingStyles,
+        arrow: { top: floating.middlewareData.arrow?.y, left: floating.middlewareData.arrow?.x },
         position: resultPosition,
         align: resultAlign,
       },
     }),
     [
-      registerArrow,
-      result.refs.setFloating,
-      result.middlewareData.arrow?.x,
-      result.middlewareData.arrow?.y,
-      result.refs.setReference,
-      result.x,
-      result.y,
+      floating.refs.setFloating,
+      floating.middlewareData.arrow?.x,
+      floating.middlewareData.arrow?.y,
+      floating.refs.setReference,
+      floating.floatingStyles,
       resultAlign,
       resultPosition,
       strategy,
@@ -104,41 +78,24 @@ function Popover(props: PopoverProps): JSX.Element {
 }
 
 function PopoverReference({ children, ...others }: PopoverReferenceProps): JSX.Element {
-  const ref = React.useRef<HTMLDivElement | null>(null)
   const { register } = usePopover()
 
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      register.reference(ref.current)
-    }
-  }, [register])
-
   return (
-    <div ref={ref} {...others}>
+    <div ref={register.setReference} {...others}>
       {children}
     </div>
   )
 }
 
 function PopoverFloating({ children, style, ...others }: PopoverFloatingProps): JSX.Element {
-  const { register, result, strategy } = usePopover()
-
-  const ref = React.useRef<HTMLDivElement | null>(null)
-
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      register.floating(ref.current)
-    }
-  }, [register])
+  const { register, result } = usePopover()
 
   return (
     <div
-      ref={ref}
+      ref={register.setFloating}
       {...others}
       style={{
-        position: strategy,
-        top: result.floating.top,
-        left: result.floating.left,
+        ...result.floatingStyles,
         ...style,
       }}
     >

package/src/components/Popover/Popover.types.ts

@@ -1,16 +1,14 @@
-import type { HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
+import type { UseFloatingReturn } from '@floating-ui/react-dom'
+import type { CSSProperties, HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
 
 export interface UsePopoverReturn {
   register: {
-    reference: (el: HTMLElement) => void
-    floating: (el: HTMLElement) => void
-    arrow: (el: HTMLElement) => void
+    setReference: UseFloatingReturn['refs']['setReference']
+    setFloating: UseFloatingReturn['refs']['setFloating']
+    setArrow: MutableRefObject<Element | null>
   }
   result: {
-    floating: {
-      top: number
-      left: number
-    }
+    floatingStyles: CSSProperties
     arrow: {
       top: number | undefined
       left: number | undefined

package/src/components/Radio/Radio.tsx

@@ -112,7 +112,7 @@ const Selector = styled.input<SelectionStyleProps>`
       'radio-dark-selector-border-color--focus': whenProps({ scheme: 'dark' }),
     })};
 
-    box-shadow: ${token('radio-selector-outline')};
+    box-shadow: ${token('radio-selector-box-shadow')};
   `}
 `
 

package/src/components/Select/SelectTrigger.tsx

@@ -24,7 +24,7 @@ const SelectTriggerSearchField = styled(TextField)`
   border: none;
   border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
 
-  height: 100%;
+  height: ${token('select-trigger-height')};
 
   flex: 1;
 
@@ -49,16 +49,9 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
 ) {
   const { className, ...others } = props
   const { disabled, expanded, toggle } = useContext(DropdownContext)
-  const triggerRef = React.useRef<HTMLElement | null>(null)
 
   const { register } = usePopover()
 
-  React.useEffect(() => {
-    if (triggerRef.current) {
-      register.reference(triggerRef.current)
-    }
-  }, [register])
-
   function handleClick() {
     if (!expanded) {
       toggle()
@@ -75,7 +68,7 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
             ref(node)
           }
 
-          triggerRef.current = node
+          register.setReference(node)
         }}
         type="search"
         disabled={disabled}

package/src/components/Switch/Switch.tsx

@@ -64,7 +64,9 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
   `}
 
   ${focusable`
-    box-shadow: ${token('switch-outline')}
+    box-shadow: ${token('switch-box-shadow')};
+    outline: ${token('switch-outline')};
+    outline-offset: ${token('switch-outline-offset')};
   `}
 
   ${disableable``}

package/src/components/Tag/Tag.tsx

@@ -80,9 +80,14 @@ const StyledSpan = styled.span<TagProps>`
   })};
 
   padding: ${conditional({
-    'tag-spacing': whenProps({ removable: (removable) => !removable }),
-    'tag-spacing-removable': whenProps([{ size: (size) => size !== 'small', removable: true }]),
-    'tag-small-spacing-removable': whenProps([{ size: 'small', removable: true }]),
+    'tag-small-spacing': whenProps({ size: 'small', removable: (removable) => !removable }),
+    'tag-spacing': whenProps({
+      size: (size) => !['small', 'large'].includes(size ?? ''),
+      removable: (removable) => !removable,
+    }),
+    'tag-large-spacing': whenProps({ size: 'large', removable: (removable) => !removable }),
+    'tag-removable-spacing': whenProps([{ size: (size) => size !== 'small', removable: true }]),
+    'tag-small-removable-spacing': whenProps([{ size: 'small', removable: true }]),
   })};
 
   min-width: ${token('tag-width')};
@@ -92,6 +97,12 @@ const StyledSpan = styled.span<TagProps>`
     'tag-large-height': whenProps({ size: 'large' }),
   })};
 
+  font-weight: ${conditional({
+    'tag-font-weight': whenProps({ size: 'default' }),
+    'tag-small-font-weight': whenProps({ size: 'small' }),
+    'tag-large-font-weight': whenProps({ size: 'large' }),
+  })};
+
   color: ${conditional({
     'tag-default-color': whenProps({ variant: 'default' }),
     'tag-outlined-color': whenProps({ variant: 'outlined' }),
@@ -223,7 +234,16 @@ const StyledSpan = styled.span<TagProps>`
       'tag-warning-background--focus': whenProps({ variant: 'warning' }),
       'tag-danger-background--focus': whenProps({ variant: 'danger' }),
     })};
-    box-shadow: ${token('tag-outline')};
+    box-shadow: ${token('tag-box-shadow')};
+    outline: ${conditional({
+      'tag-default-outline': whenProps({ variant: 'default' }),
+      'tag-outlined-outline': whenProps({ variant: 'outlined' }),
+      'tag-accent-outline': whenProps({ variant: 'accent' }),
+      'tag-success-outline': whenProps({ variant: 'success' }),
+      'tag-warning-outline': whenProps({ variant: 'warning' }),
+      'tag-danger-outline': whenProps({ variant: 'danger' }),
+    })};
+    outline-offset: ${token('tag-outline-offset')};
   `}
 
   ${disableable`

package/src/components/TextField/TextField.tsx

@@ -96,9 +96,12 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'text-field-outline': whenProps({ scheme: 'light' }),
-      'text-field-dark-outline': whenProps({ scheme: 'dark' }),
+      'text-field-box-shadow': whenProps({ scheme: 'light' }),
+      'text-field-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('text-field-outline')};
+    outline-offset: ${token('text-field-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/Textarea/Textarea.tsx

@@ -93,9 +93,12 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'textarea-outline': whenProps({ scheme: 'light' }),
-      'textarea-dark-outline': whenProps({ scheme: 'dark' }),
+      'textarea-box-shadow': whenProps({ scheme: 'light' }),
+      'textarea-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('textarea-outline')};
+    outline-offset: ${token('textarea-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/ToggleGroup/Toggle.tsx

@@ -68,7 +68,9 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
       'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
     })};
 
-    box-shadow: ${token('button-primary-outline')};
+    box-shadow: ${token('toggle-box-shadow')};
+    outline: ${token('toggle-outline')};
+    outline-offset: ${token('toggle-outline-offset')};
   `}
 
   ${activatable`