@netdata/netdata-ui/dist/es6/theme/README.md

netdata UI kit

# Theme and theme utils

## Theme

This UI-KIT arcitecture is **theme** centered, so a lot of utils and constants provided there.

### Constant values

#### Colors

There are a collection of colors in theme, they could be accessed `raw` way or with `utils`

- transparent

  - full
  - semi
  - popover

- green

  - chateau
  - netdata
  - deyork
  - vista
  - fringyFlower
  - frostee

- red

  - pomegranate
  - carnation
  - apricot
  - wewak
  - pastelpink
  - lavender

- yellow

  - amber
  - sunglow
  - seaBuckthorn
  - mustard
  - salomie
  - buttermilk
  - ginfizz

- neutral

  - white
  - black
  - limedSpruce
  - regentgrey
  - blackhaze
  - iron
  - porcelain
  - bluebayoux
  - shark
  - tuna
  - outerSpace
  - shark

- purple
  - mauve
  - daisy

**next ones is just shortcuts**

- borderColor
- controlFocused
- error
- success
- text

#### Size values

Normally you will access this values with `utils`

- SIZE_SUB_UNIT

- SIZE_UNIT

- GUTTER_HEIGHT

### Utils

Most of functions in utils provided the way that you have not to create extra arrow function in styled-components

- `getOrElse` - provides extraction of value from theme with a fallback to default value

```typescript
type GetOrElseT = (
  pathName: string[],
  defaultValue: string | number
) => ({ theme }: WrappedTheme) => string | number

const StyledDiv = styled.div`
  padding: ${getOrElse(["userDefinedConstants", "styledDivPadding"], 10)}px;
`
```

- `propOrElse` - is pretty like the `getOrElse` but it extracting values not from the `theme` but from the `props`

```typescript
const Div = styled.div<{ display?: "flex" }>`
  display: ${propOrElse("display", "block")};
`
```

- `getSizeUnit` - returns size unit constant of the theme

- `getColor` - provides access to access colors from theme. Also there is fallback to `#FFF` value in case requested color is undefined.

```typescript
const Div = styled.div`
  color: ${getColor("mainBackground")};
`

const AnotherDiv = styled.div`
  color: ${getColor("success")};
`
```

- `getSizeBy` - provides simple interface to `SIZE_UNIT` with muplitplication. **CAUTION:** returnable value will be in `px`

```typescript
/*
 * If SIZE_UNIT = 5, then padding will be = 25px
 */
const Div = styled.div`
  padding: ${getSizeBy(5)};
`
```

- `getValidatedControlColor` - shortcut for accessing color values for validation.