{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta, Markdown } from '@storybook/blocks';
import radiusTable from '../../../../apps/lightning-ui-docs/scripts/themePropertyTables/radius.md?raw';
import colorTable from '../../../../apps/lightning-ui-docs/scripts/themePropertyTables/color.md?raw';
import typographyTable from '../../../../apps/lightning-ui-docs/scripts/themePropertyTables/typography.md?raw';

<Meta title="Docs / Theming/ Theme Properties" />

# Theming Properties in Our Components

## Radius

<Markdown>{radiusTable}</Markdown>

## Typography

Theme typography is set up to use semantically-named tokens. They are JavaScript objects, with keys for different font attributes and positioning.

<Markdown>{typographyTable}</Markdown>

### Font Fallback

When loading fonts from a theme you can specify an array containing paths to the font you would like to target. These values can be a url of a font from a CDN (Content Delivery Network), a locally hosted font, or a system font.
When an array of font urls is provided, each url will be tested in order until one successfully loads. If none are able to be loaded, the Lightning default font will be used (Times New Roman).

Below is an example of setting custom font families in a custom theme file.

```js
export default {
  name: 'MyCustomFont',
  font: [
    {
      family: 'MyCustomFont',
      src: ['https://myfontwebsite.com/myfont.woff2', './fonts/myfont.woff2']
    }
  ]
};
```

In this example, we provided an array of urls for the MyCustomFont font family.
Now any components that use MyCustomFont will try to request and display the first font url link.
If that url doesn’t work then with the font fallback feature, it’s going to look into the second value in the array and request that url. If that also doesn’t work then it will move on again into the next font url provided in the array. It will continuously try to request and return a working url until it reaches the end of the array.
If no working url is returned then Times New Roman is displayed as the font.

#### Use Case: Smart TVs

A product may wish to use custom brand fonts for their TV's UI. It is common to reference a CDN for assets like fonts in case the product updates its branding. However, while smart TVs are designed to be used with an internet connection, it is not a requirement for use. Just because a user doesn't connect their TV to the internet does not mean they should not still get the branded product experience in offline mode. This is where font fallbacks can be leveraged. The first font to try could be from the CDN in case any changes were made. Then if the user is offline, we can fall back to the font stored locally on the hardware.

<br />

## Animations

Theme animations are stringified functions used to generate curves to be used within components who need animations. These are also tokenized to assist with ensuring consistent behavior between components.

<br />

## Colors

Theme colors are set up using semantically-named tokens, which are then used within each component's styles file. Changing the value of one of these tokens propagates that change to all instances where the token is used.
These tokens are set up to take an array of two values: the first is the six character hex code for the color; the second is the alpha value, ranging from 0 to 100. For example:

```js
fillNeutral = ['#ffffff', 95];
```

<Markdown>{colorTable}</Markdown>

<br />
