import {Meta, Heading, Subheading, } from '@storybook/addon-docs/blocks'
import {defaultColors as colors} from 'jb-core/theme';

<Meta title="Theme/Sizes" />
<Heading>Sizes</Heading>
<Subheading >standard size variables in jb design system</Subheading>
<br/>
## Usage
All JBDesign System Component initial their needed variables themselves and you don't need any initialization to use our components. **But** if ypu need to initialize size variables for your own usage in your app you can do followings:

```javascript
import {defineSizes} from 'jb-core/theme';
// it will define all size related css variables in @property and :root you can also customize them in your css
defineSizes();
```

### device detection helpers

For JavaScript decisions that depend on the broad device category, `jb-core` exports `isMobile()` and `isTablet()`:
```ts
import {isMobile, isTablet} from 'jb-core';

isMobile(); // true for mobile user agents
isTablet(); // true for common tablet user agents
```
> this methods works base on user agents not device size.

The helpers are safe to call during server-side rendering and return `false` when `navigator` is unavailable. They use user-agent and touch-point detection, so use the viewport media tokens above when the decision is about available layout space rather than device type.
## standards

 we use `rem` unit as a sizing standard of our components so components and layout could effectively respond to user zoom and text size settings.

### variable values units

due to the CSS restriction for set rem values as a default value in `@property` we set default value in `px` and re-set the value in project document root in `rem`;

### change the variables

you can easily change every css variable value like any other css variable see [this](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to whatever value you want. 

## border radius

jb design system by default is a Modern and have a Round corner but you can change it base on your design language.

- `--jb-radius`:1rem (1rem) - default border radius used in inputs or buttons.
- `--jb-radius-xs`:0.5rem (0.5rem) - for extra small button or some small elements
- `--jb-radius-sm`:0.75rem (0.75rem) - for small  buttons
- `--jb-radius-lg`:1.25rem (1.25rem) - for big buttons
- `--jb-radius-xl`:1.5rem (1.5rem) - for extra large buttons and Box elements like modals content corner

## control height

Control height tokens keep interactive controls such as buttons, inputs, and selects aligned across the design system. Component-specific height variables can still override these shared defaults.

- `--jb-control-height-xs`:1.5rem (24px) - extra-small controls
- `--jb-control-height-sm`:2rem (32px) - small controls
- `--jb-control-height-md`:2.5rem (40px) - medium and default controls
- `--jb-control-height-lg`:3rem (48px) - large controls
- `--jb-control-height-xl`:4rem (64px) - extra-large controls

## breakpoints

Breakpoint tokens are registered by `defineSizes()` and are available as inherited CSS custom properties. Their values are expressed in `rem` so they respond consistently to the document's root font size.

- `--jb-breakpoint-sm`:40rem (640px)
- `--jb-breakpoint-md`:48rem (768px)
- `--jb-breakpoint-lg`:64rem (1024px)
- `--jb-breakpoint-xl`:80rem (1280px)

The corresponding JavaScript values are exported as `breakPoints`:

```ts
import {breakPoints} from 'jb-core/theme';

breakPoints.sm; // 640
breakPoints.md; // 768
breakPoints.lg; // 1024
breakPoints.xl; // 1280
```

Use the CSS tokens for styles and `breakPoints` when JavaScript needs to make the same size-based decision. The values in `breakPoints` are pixel numbers; the CSS tokens resolve to rem values.

## viewport media tokens

Import the shared media file when defining responsive component styles:

```css
@import "jb-core/style/media.css";

@media (--jb-viewport-sm-to) {
  /* viewport width <= 40rem */
}

@media (--jb-viewport-sm-from) {
  /* viewport width > 40rem */
}

@media (--jb-viewport-md-to) {
  /* viewport width <= 48rem */
}

@media (--jb-viewport-md-from) {
  /* viewport width > 48rem */
}
```

These are CSS custom media queries, not CSS variables. Use them directly in `@media` rules; do not wrap them in `var(...)`.