import {Meta, Story} from '@storybook/addon-docs/blocks';
import Box from '../../components/box/Box';
import Text from '../../components/text/Text';
import Link from '../../components/text/Link';
import Button from '../../components/buttons/Button';
import Flex from '../../components/flex/Flex';
import PageHeader from 'blocks/PageHeader';
import {styled} from '@storybook/theming';

<Meta title="Foundation ✨/Focus" />

<PageHeader type="foundation">Focus</PageHeader>

A focus style is a visual indicator used to style elements that have been activated by the user, either by "tabbing" with the keyboard or by clicking with a pointing device. Focus style helps people identify interactive elements.
We use #6d83f3 (Indigo 400) as the main focus color.

## Focus style

Most of our components and interactive elements use a multi-color focus style. It is adjusted both for white and black backgrounds, and is ready for [Success Criterion 2.4.11: Focus Appearance (WCAG 2.2)](https://w3c.github.io/wcag/guidelines/22/#focus-appearance).

<Flex fullWidth margin="m">
  <Flex fullWidth direction="column" alignItems="flex-start">
    <Text weight="bold" style={{marginBottom: '8px'}}>
      Interactive
    </Text>
    <Button>Button</Button>
  </Flex>
  <Flex fullWidth direction="column" alignItems="flex-start">
    <Text weight="bold" style={{marginBottom: '8px'}}>
      Focused
    </Text>
    <Button
      style={{
        boxShadow:
          '0px 0px 0px 2px white, 0px 0px 0px 4px var(--indigo-40), 0px 0px 0px 6px rgba(109, 131, 243, 0.3)',
      }}
    >
      Button
    </Button>
  </Flex>
</Flex>

### Mixins

By default, the focus style is applied to almost all interactive elements (besides `<a>` and `<Link>`). For more complex cases (such as `:focus-within`), mixins can be used.

| Mixin name      | Description                                                     |
| --------------- | --------------------------------------------------------------- |
| applyFocusStyle | The main focus style                                            |
| applyFocus      | The main focus style and CSS logic when focus should be visible |

## Focus text style

Under the hood, the default focus style provided by the style guide ([the focus style](#focus-style)) uses a box shadow, which may not always be used. For inline, multi-line elements you can use the focus text style, based on browser native focus style (with outline). By default, the focus text style is used by `<a>` and `<Link>`.

<Flex fullWidth margin="m">
  <Flex fullWidth direction="column" alignItems="flex-start">
    <Text weight="bold" style={{marginBottom: '8px'}}>
      Interactive
    </Text>
    <Link href="#">Link</Link>
  </Flex>
  <Flex fullWidth direction="column" alignItems="flex-start">
    <Text weight="bold" style={{marginBottom: '8px'}}>
      Focused
    </Text>
    <Link
      style={{
        outlineWidth: '2px',
        outlineOffset: '4px',
        outlineStyle: 'auto',
        outlineColor: 'var(--indigo-40)',
      }}
      href="#"
    >
      Link
    </Link>
  </Flex>
</Flex>

### Mixins

| Mixin name          | Description                                                                              |
| ------------------- | ---------------------------------------------------------------------------------------- |
| applyFocusTextStyle | Focus style for inline, multi-line components                                            |
| applyFocusText      | Focus style for inline, multi-line components and CSS logic when focus should be visible |

## Tokens

To use custom focus style, you can override following CSS variables:

| Css variable name | Description                         | Default value              |
| ----------------- | ----------------------------------- | -------------------------- |
| --focusColor      | Main focus ring color               | indigo-40                  |
| --focusInnerColor | Color between border and focus ring | white                      |
| --focusOuterColor | Glow color of focus ring            | indigo-40 with 0.3 opacity |
| --focusWidth      | Main focus ring width               | 2px                        |
| --focusInnerWidth | Width between border and focus ring | 2px                        |
| --focusOuterWidth | Glow width of focus ring            | 2px                        |

### Example

<Button
  style={{
    '--focusInnerColor': '#24a865',
    '--focusInnerWidth': '6px',
    '--focusColor': '#9ce8c2',
    '--focusWidth': '4px',
    '--focusOuterWidth': '0px',
    margin: '24px 0',
  }}
>
  Focus me!
</Button>

```jsx
<Button
  style={{
    '--focusInnerColor': '#24a865',
    '--focusInnerWidth': '6px',
    '--focusColor': '#9ce8c2',
    '--focusWidth': '4px',
    '--focusOuterWidth': '0px',
  }}
>
  Focus me!
</Button>
```

## High Contrast Mode

Focus style is aligned with Windows High Contrast Mode, `Highlight` is used as focus color.

![In High Contrast Mode focused element has outline](/focus_hcm.png)