@commercetools/nimbus 0.0.2 → 0.0.3-alpha.3

package/src/docs/filters.mdx

@@ -1,268 +0,0 @@
----
-id: Style Props-Filters
-title: Filters
-description: JSX style props for applying various filters to elements.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Filters
-tags:
-  - document
----
-
-# Filters
-
-JSX style props for applying various filters to elements.
-
-## Filter
-
-Use the `filter` prop to apply visual effects like blur or color shift to an
-element.
-
-```jsx
-<Box filter="blur(5px)" />
-<Box filter="grayscale(80%)" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `filter` | `filter`     | -              |
-
-## Blur
-
-Use the `blur` prop to apply a blur effect to an element. The requirement for
-this prop is to set the `filter` prop to `auto`.
-
-```jsx
-// hardcoded value
-<Box filter="auto" blur="5px" />
-
-// token value
-<Box filter="auto" blur="sm" />
-```
-
-| Prop   | CSS Property | Token Category |
-| ------ | ------------ | -------------- |
-| `blur` | `--blur`     | `blurs`        |
-
-## Contrast
-
-Use the `contrast` prop to apply a contrast effect to an element. The
-requirement for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" contrast="0.3" />
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `contrast` | `--contrast` | -              |
-
-## Drop Shadow
-
-Use the `dropShadow` prop to apply a drop shadow effect to an element. The
-requirement for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" dropShadow="0px 0px 10px rgba(0, 0, 0, 0.5)" />
-```
-
-| Prop         | CSS Property    | Token Category |
-| ------------ | --------------- | -------------- |
-| `dropShadow` | `--drop-shadow` | -              |
-
-## Grayscale
-
-Use the `grayscale` prop to apply a grayscale effect to an element. The
-requirement for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" grayscale="64%" />
-```
-
-| Prop        | CSS Property  | Token Category |
-| ----------- | ------------- | -------------- |
-| `grayscale` | `--grayscale` | -              |
-
-## Hue Rotate
-
-Use the `hueRotate` prop to apply a hue rotate effect to an element. The
-requirement for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" hueRotate="30deg" />
-```
-
-| Prop        | CSS Property   | Token Category |
-| ----------- | -------------- | -------------- |
-| `hueRotate` | `--hue-rotate` | -              |
-
-## Invert
-
-Use the `invert` prop to apply an invert effect to an element. The requirement
-for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" invert="40%" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `invert` | `--invert`   | -              |
-
-## Saturate
-
-Use the `saturate` prop to apply a saturate effect to an element. The
-requirement for this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" saturate="0.4" />
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `saturate` | `--saturate` | -              |
-
-## Sepia
-
-Use the `sepia` prop to apply a sepia effect to an element. The requirement for
-this prop is to use the `filter` prop and set it to `auto`.
-
-```jsx
-<Box filter="auto" sepia="0.4" />
-```
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `sepia` | `--sepia`    | -              |
-
-## Backdrop Filter
-
-Use the `backdropFilter` prop to apply visual effects like blur or color shift
-to the area behind an element. This creates a translucent effect.
-
-```jsx
-<Box backdropFilter="blur(5px)" />
-<Box backdropFilter="grayscale(80%)" />
-```
-
-| Prop             | CSS Property      | Token Category |
-| ---------------- | ----------------- | -------------- |
-| `backdropFilter` | `backdrop-filter` | -              |
-
-## Backdrop Blur
-
-Use the `backdropBlur` prop to apply a blur effect to the area behind an
-element. The requirement for this prop is to set the `backdropFilter` prop to
-`auto`.
-
-```jsx
-// hardcoded value
-<Box backdropFilter="auto" backdropBlur="5px" />
-
-// token value
-<Box backdropFilter="auto" backdropBlur="sm" />
-```
-
-| Prop           | CSS Property      | Token Category |
-| -------------- | ----------------- | -------------- |
-| `backdropBlur` | `--backdrop-blur` | `blurs`        |
-
-## Backdrop Contrast
-
-Use the `backdropContrast` prop to apply a contrast effect to the area behind an
-element. The requirement for this prop is to use the `backdropFilter` prop and
-set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropContrast="0.3" />
-```
-
-| Prop               | CSS Property          | Token Category |
-| ------------------ | --------------------- | -------------- |
-| `backdropContrast` | `--backdrop-contrast` | -              |
-
-## Backdrop Grayscale
-
-Use the `backdropGrayscale` prop to apply a grayscale effect to the area behind
-an element. The requirement for this prop is to use the `backdropFilter` prop
-and set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropGrayscale="64%" />
-```
-
-| Prop                | CSS Property           | Token Category |
-| ------------------- | ---------------------- | -------------- |
-| `backdropGrayscale` | `--backdrop-grayscale` | -              |
-
-## Backdrop Hue Rotate
-
-Use the `backdropHueRotate` prop to apply a hue rotate effect to the area behind
-an element. The requirement for this prop is to use the `backdropFilter` prop
-and set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropHueRotate="30deg" />
-```
-
-| Prop                | CSS Property            | Token Category |
-| ------------------- | ----------------------- | -------------- |
-| `backdropHueRotate` | `--backdrop-hue-rotate` | -              |
-
-## Backdrop Invert
-
-Use the `backdropInvert` prop to apply an invert effect to the area behind an
-element. The requirement for this prop is to use the `backdropFilter` prop and
-set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropInvert="40%" />
-```
-
-| Prop             | CSS Property        | Token Category |
-| ---------------- | ------------------- | -------------- |
-| `backdropInvert` | `--backdrop-invert` | -              |
-
-## Backdrop Opacity
-
-Use the `backdropOpacity` prop to apply an opacity effect to the area behind an
-element. The requirement for this prop is to use the `backdropFilter` prop and
-set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropOpacity="0.4" />
-```
-
-| Prop              | CSS Property         | Token Category |
-| ----------------- | -------------------- | -------------- |
-| `backdropOpacity` | `--backdrop-opacity` | -              |
-
-## Backdrop Saturate
-
-Use the `backdropSaturate` prop to apply a saturate effect to the area behind an
-element. The requirement for this prop is to use the `backdropFilter` prop and
-set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropSaturate="0.4" />
-```
-
-| Prop               | CSS Property          | Token Category |
-| ------------------ | --------------------- | -------------- |
-| `backdropSaturate` | `--backdrop-saturate` | -              |
-
-## Backdrop Sepia
-
-Use the `backdropSepia` prop to apply a sepia effect to the area behind an
-element. The requirement for this prop is to use the `backdropFilter` prop and
-set it to `auto`.
-
-```jsx
-<Box backdropFilter="auto" backdropSepia="0.4" />
-```
-
-| Prop            | CSS Property       | Token Category |
-| --------------- | ------------------ | -------------- |
-| `backdropSepia` | `--backdrop-sepia` | -              |

package/src/docs/flex-and-grid.mdx

@@ -1,445 +0,0 @@
----
-id: Style Props-Flex and Grid
-title: Flex and Grid
-description: JSX style props to control flex and grid layouts
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Flex and Grid
-tags:
-  - document
----
-
-# Flex and Grid
-
-JSX style props to control flex and grid layouts
-
-## Flex Basis
-
-Use the `flexBasis` prop to set the initial main size of a flex item.
-
-```jsx
-<Flex>
-  <Box flexBasis="25%" />
-  <Box flexBasis="25%" />
-  <Box flexBasis="50%" />
-</Flex>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `flexBasis` | `flex-basis` | -              |
-
-## Flex Direction
-
-Use the `flexDir` or `flexDirection` prop to set the direction of the main axis
-in a flex container.
-
-```jsx
-<Box display="flex" flexDirection="column">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-When using `Flex` component, the `direction` prop is aliased to `flexDirection`.
-
-```jsx
-<Flex direction="column">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop                       | CSS Property     | Token Category |
-| -------------------------- | ---------------- | -------------- |
-| `flexDir`, `flexDirection` | `flex-direction` | -              |
-
-## Flex Wrap
-
-Use the `flexWrap` prop to set whether flex items are forced onto one line or
-can wrap onto multiple lines.
-
-```jsx
-<Box display="flex" flexWrap="wrap">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-When using `Flex` component, the `wrap` prop is aliased to `flexWrap`.
-
-```jsx
-<Flex wrap="wrap">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `flexWrap` | `flex-wrap`  | -              |
-
-## Flex
-
-Use the `flex` prop to define the flexibility of a flex container or item.
-
-```jsx
-<Flex>
-  <Box flex="1" />
-  <Box />
-</Flex>
-```
-
-| Prop   | CSS Property | Token Category |
-| ------ | ------------ | -------------- |
-| `flex` | `flex`       | -              |
-
-## Flex Grow
-
-Use the `flexGrow` prop to set the flex grow factor of a flex item.
-
-```jsx
-<Flex>
-  <Box flexGrow="0" />
-  <Box flexGrow="1" />
-</Flex>
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `flexGrow` | `flex-grow`  | -              |
-
-## Flex Shrink
-
-Use the `flexShrink` prop to set the flex shrink factor of a flex item.
-
-```jsx
-<Flex>
-  <Box flexShrink="0" />
-  <Box flexShrink="1" />
-</Flex>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `flexShrink` | `flex-shrink` | -              |
-
-## Order
-
-Use the `order` prop to set the order of a flex item.
-
-```jsx
-<Flex>
-  <Box order="0" />
-  <Box order="1" />
-</Flex>
-```
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `order` | `order`      | -              |
-
-## Gap
-
-Use the `gap` prop to set the gap between items in a flex or grid container.
-
-```jsx
-<Flex>
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop  | CSS Property | Token Category |
-| ----- | ------------ | -------------- |
-| `gap` | `gap`        | `spacing`      |
-
-## Grid Template Columns
-
-Use the `gridTemplateColumns` prop to define the columns of a grid container.
-
-```jsx
-<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-When using `Grid` component, the `templateColumns` prop is aliased to
-`gridTemplateColumns`.
-
-```jsx
-<Grid templateColumns="repeat(3, minmax(0, 1fr))">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Grid>
-```
-
-## Grid Template Start/End
-
-Use the `gridTemplateStart` and `gridTemplateEnd` props to define the start and
-end of a grid container.
-
-```jsx
-<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
-  <Box>Item 1</Box>
-  <Box gridColumn="span 2 / span 2">Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop                | CSS Property          | Token Category |
-| ------------------- | --------------------- | -------------- |
-| `gridTemplateStart` | `grid-template-start` | -              |
-| `gridTemplateEnd`   | `grid-template-end`   | -              |
-
-## Grid Template Rows
-
-Use the `gridTemplateRows` prop to define the rows of a grid container.
-
-```jsx
-<Box display="grid" gridTemplateRows="repeat(3, minmax(0, 1fr))">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop               | CSS Property         | Token Category |
-| ------------------ | -------------------- | -------------- |
-| `gridTemplateRows` | `grid-template-rows` | -              |
-
-## Grid Row Start/End
-
-Use the `gridRowStart` and `gridRowEnd` props to define the start and end of a
-grid item.
-
-```jsx
-<Box display="grid" gridTemplateRows="repeat(3, minmax(0, 1fr))">
-  <Box gridRowStart="1" gridRowEnd="3">
-    Item 1
-  </Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop           | CSS Property     | Token Category |
-| -------------- | ---------------- | -------------- |
-| `gridRowStart` | `grid-row-start` | -              |
-| `gridRowEnd`   | `grid-row-end`   | -              |
-
-## Grid Autoflow
-
-Use the `gridAutoFlow` prop to define how auto-placed items get flowed into the
-grid.
-
-```jsx
-<Box display="grid" gridAutoFlow="row">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop           | CSS Property     | Token Category |
-| -------------- | ---------------- | -------------- |
-| `gridAutoFlow` | `grid-auto-flow` | -              |
-
-## Grid Auto Columns
-
-Use the `gridAutoColumns` prop to specify the size of the grid columns that were
-created without an explicit size.
-
-```jsx
-<Box display="grid" gridAutoColumns="120px">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop              | CSS Property        | Token Category |
-| ----------------- | ------------------- | -------------- |
-| `gridAutoColumns` | `grid-auto-columns` | -              |
-
-## Grid Auto Rows
-
-Use the `gridAutoRows` prop to specify the size of the grid rows that were
-created without an explicit size.
-
-```jsx
-<Box display="grid" gridTemplateRows="200px" gridAutoRows="120px">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop           | CSS Property     | Token Category |
-| -------------- | ---------------- | -------------- |
-| `gridAutoRows` | `grid-auto-rows` | -              |
-
-## Justify Content
-
-Use the `justifyContent` prop to align items along the main axis of a flex
-container.
-
-```jsx
-<Box display="flex" justifyContent="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-When using the `Flex` component, the `justify` prop is aliased to
-`justifyContent`.
-
-```jsx
-<Flex justify="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop             | CSS Property      | Token Category |
-| ---------------- | ----------------- | -------------- |
-| `justifyContent` | `justify-content` | -              |
-
-## Justify Items
-
-Use the `justifyItems` prop to control the alignment of grid items within their
-scope.
-
-```jsx
-<Box display="grid" justifyItems="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop           | CSS Property    | Token Category |
-| -------------- | --------------- | -------------- |
-| `justifyItems` | `justify-items` | -              |
-
-## Align Content
-
-Use the `alignContent` prop to align rows of content along the cross axis of a
-flex container when there's extra space.
-
-```jsx
-<Box display="flex" alignContent="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-When using the `Flex` component, the `align` prop is aliased to `alignContent`.
-
-```jsx
-<Flex align="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop           | CSS Property    | Token Category |
-| -------------- | --------------- | -------------- |
-| `alignContent` | `align-content` | -              |
-
-## Align Items
-
-Use the `alignItems` prop to control the alignment of grid items within their
-scope.
-
-```jsx
-<Box display="grid" alignItems="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-## Align Self
-
-Use the `alignSelf` prop to control the alignment of a grid item within its
-scope.
-
-```jsx
-<Box display="grid">
-  <Box alignSelf="center">Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `alignSelf` | `align-self` | -              |
-
-## Place Content
-
-Use the `placeContent` prop to align content along both the block and inline
-directions at once. It works like `justifyContent` and `alignContent` combined,
-and can be used in flex and grid containers.
-
-```jsx
-<Flex placeContent="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Flex>
-```
-
-| Prop           | CSS Property    | Token Category |
-| -------------- | --------------- | -------------- |
-| `placeContent` | `place-content` | -              |
-
-## Place Items
-
-Use the `placeItems` prop to align items along both the block and inline
-directions at once. It works like `justifyItems` and `alignItems` combined, and
-can be used in flex and grid containers.
-
-```jsx
-<Box display="grid" placeItems="center">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `placeItems` | `place-items` | -              |
-
-## Place Self
-
-Use the `placeSelf` prop to align a grid item along both the block and inline
-directions at once.
-
-```jsx
-<Box display="grid">
-  <Box placeSelf="center">Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Box>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `placeSelf` | `place-self` | -              |