@commercetools/nimbus 0.0.2 → 0.0.3

package/src/docs/style-props-typography.mdx

@@ -1,373 +0,0 @@
----
-id: Style Props-Typography
-title: Typography
-description: JSX style props for styling text
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Typography
-tags:
-  - document
----
-
-# Typography
-
-JSX style props for styling text
-
-## Font Family
-
-Use the `fontFamily` prop to set the font family of a text element.
-
-```jsx
-<Text fontFamily="mono">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `fontFamily` | `font-family` | `fonts`        |
-
-## Font Size
-
-Use the `fontSize` prop to set the font size of a text element.
-
-```jsx
-// hardcoded values
-<Text fontSize="12px">Hello World</Text>
-<Text fontSize="10rem">Hello World</Text>
-
-// token values
-<Text fontSize="xs">Hello World</Text>
-<Text fontSize="4xl">Hello World</Text>
-<Text fontSize="5xl">Hello World</Text>
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `fontSize` | `font-size`  | `fonts`        |
-
-## Text Styles
-
-Use the `textStyle` prop to apply both a font size, line height, and letter
-spacing composition at once.
-
-```jsx
-<Text textStyle="xs">Hello World</Text>
-<Text textStyle="sm">Hello World</Text>
-<Text textStyle="md">Hello World</Text>
-<Text textStyle="lg">Hello World</Text>
-<Text textStyle="xl">Hello World</Text>
-<Text textStyle="2xl">Hello World</Text>
-<Text textStyle="3xl">Hello World</Text>
-<Text textStyle="4xl">Hello World</Text>
-<Text textStyle="5xl">Hello World</Text>
-```
-
-| Prop        | Config             |
-| ----------- | ------------------ |
-| `textStyle` | `theme.textStyles` |
-
-## Font Style
-
-Use the `fontStyle` prop to set the font style of a text element.
-
-```jsx
-<Text fontStyle="italic">Hello World</Text>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `fontStyle` | `font-style` | none           |
-
-## Font Weight
-
-Use the `fontWeight` prop to set the font weight of a text element.
-
-```jsx
-// hardcoded values
-<Text fontWeight="600">Hello World</Text>
-
-// token values
-<Text fontWeight="semibold">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `fontWeight` | `font-weight` | `fontWeights`  |
-
-## Font Variant Numeric
-
-Use the `fontVariantNumeric` prop to set the font variant numeric of a text
-element.
-
-```jsx
-<Text fontVariantNumeric="lining-nums">Hello World</Text>
-```
-
-| Prop                 | CSS Property           | Token Category |
-| -------------------- | ---------------------- | -------------- |
-| `fontVariantNumeric` | `font-variant-numeric` | none           |
-
-## Letter Spacing
-
-Use the `letterSpacing` prop to set the letter spacing of a text element.
-
-```jsx
-// hardcoded values
-<Text letterSpacing="0.1rem">Hello World</Text>
-
-// token values
-<Text letterSpacing="tight">Hello World</Text>
-<Text letterSpacing="wide">Hello World</Text>
-<Text letterSpacing="wider">Hello World</Text>
-<Text letterSpacing="widest">Hello World</Text>
-```
-
-| Prop            | CSS Property     | Token Category   |
-| --------------- | ---------------- | ---------------- |
-| `letterSpacing` | `letter-spacing` | `letterSpacings` |
-
-## Truncation
-
-Use the `truncate` prop to truncate text.
-
-```jsx
-<Text truncate>Lorem ipsum dolor sit amet...</Text>
-```
-
-| Prop       | CSS Property    | Token Category |
-| ---------- | --------------- | -------------- |
-| `truncate` | `text-overflow` | none           |
-
-## Line Clamp
-
-Use the `lineClamp` prop to truncate multi-line text. Set `lineClamp` to `none`
-to disable truncation.
-
-```jsx
-<Text lineClamp="2">Lorem ipsum dolor sit amet...</Text>
-
-// revert truncation
-<Text lineClamp="none">Lorem ipsum dolor sit amet...</Text>
-```
-
-| Prop        | CSS Property        | Token Category |
-| ----------- | ------------------- | -------------- |
-| `lineClamp` | `webkit-line-clamp` | none           |
-
-## Line Height
-
-Use the `lineHeight` prop to set the line height of a text element.
-
-```jsx
-// hardcoded values
-<Text lineHeight="1.5">Hello World</Text>
-
-// token values
-<Text lineHeight="tall">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `lineHeight` | `line-height` | `lineHeights`  |
-
-## Text Align
-
-Use the `textAlign` prop to set the text alignment of a text element.
-
-```jsx
-<Text textAlign="left">Hello World</Text>
-<Text textAlign="center">Hello World</Text>
-<Text textAlign="right">Hello World</Text>
-<Text textAlign="justify">Hello World</Text>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `textAlign` | `text-align` | none           |
-
-## Text Color
-
-Use the `color` prop to set the color of a text element.
-
-```jsx
-<Text color="red">Hello World</Text>
-```
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `color` | `color`      | `colors`       |
-
-## Text Decoration
-
-Use the `textDecoration` or `textDecor` prop to set the text decoration of a
-text element.
-
-```jsx
-<Text textDecoration="underline">Hello World</Text>
-```
-
-| Prop                          | CSS Property      | Token Category |
-| ----------------------------- | ----------------- | -------------- |
-| `textDecor`, `textDecoration` | `text-decoration` | none           |
-
-## Text Decoration Color
-
-Use the `textDecorationColor` prop to set the text decoration color of a text
-element.
-
-```jsx
-<Text textDecoration="underline" textDecorationColor="red">
-  Hello World
-</Text>
-```
-
-| Prop                  | CSS Property            | Token Category |
-| --------------------- | ----------------------- | -------------- |
-| `textDecorationColor` | `text-decoration-color` | `colors`       |
-
-## Text Decoration Style
-
-Use the `textDecorationStyle` prop to set the text decoration style of a text
-element.
-
-```jsx
-<Text textDecoration="underline" textDecorationStyle="dashed">
-  Hello World
-</Text>
-```
-
-| Prop                  | CSS Property            | Token Category |
-| --------------------- | ----------------------- | -------------- |
-| `textDecorationStyle` | `text-decoration-style` | none           |
-
-## Text Decoration Thickness
-
-Use the `textDecorationThickness` prop to set the text decoration thickness of a
-text element.
-
-```jsx
-<Text textDecoration="underline" textDecorationThickness="1px">
-  Hello World
-</Text>
-```
-
-| Prop                      | CSS Property                | Token Category |
-| ------------------------- | --------------------------- | -------------- |
-| `textDecorationThickness` | `text-decoration-thickness` | none           |
-
-## Text Underline Offset
-
-Use the `textUnderlineOffset` prop to set the text underline offset of a text
-element.
-
-```jsx
-<Text textDecoration="underline" textUnderlineOffset="1px">
-  Hello World
-</Text>
-```
-
-| Prop                  | CSS Property            | Token Category |
-| --------------------- | ----------------------- | -------------- |
-| `textUnderlineOffset` | `text-underline-offset` | none           |
-
-## Text Transform
-
-Use the `textTransform` prop to set the text transform of a text element.
-
-```jsx
-<Text textTransform="uppercase">Hello World</Text>
-```
-
-| Prop            | CSS Property     | Token Category |
-| --------------- | ---------------- | -------------- |
-| `textTransform` | `text-transform` | none           |
-
-## Text Overflow
-
-Use the `textOverflow` prop to set the text overflow of a text element.
-
-```jsx
-<Text textOverflow="ellipsis">Hello World</Text>
-```
-
-| Prop           | CSS Property    | Token Category |
-| -------------- | --------------- | -------------- |
-| `textOverflow` | `text-overflow` | none           |
-
-## Text Shadow
-
-Use the `textShadow` prop to set the text shadow of a text element.
-
-```jsx
-<Text textShadow="0 0 1px red">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `textShadow` | `text-shadow` | `shadows`      |
-
-## Text Indent
-
-Use the `textIndent` prop to set the text indent of a text element.
-
-```jsx
-// hardcoded values
-<Text textIndent="1rem">Hello World</Text>
-
-// token values
-<Text textIndent="3">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `textIndent` | `text-indent` | `spacing`      |
-
-## Vertical Align
-
-Use the `verticalAlign` prop to set the vertical alignment of a text element.
-
-```jsx
-<Text verticalAlign="top">Hello World</Text>
-```
-
-| Prop            | CSS Property     | Token Category |
-| --------------- | ---------------- | -------------- |
-| `verticalAlign` | `vertical-align` | none           |
-
-## White Space
-
-Use the `whiteSpace` prop to set the white space of a text element.
-
-```jsx
-<Text whiteSpace="nowrap">Hello World</Text>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `whiteSpace` | `white-space` | none           |
-
-## Word Break
-
-Use the `wordBreak` prop to set whether line breaks appear wherever the text
-would otherwise overflow its content box.
-
-```jsx
-<Text wordBreak="break-all">Hello World</Text>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `wordBreak` | `word-break` | none           |
-
-## Hyphens
-
-Use the `hyphens` prop to set whether hyphens are used in the text.
-
-```jsx
-<Text hyphens="auto">Hello World</Text>
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `hyphens` | `hyphens`    | none           |

package/src/docs/style-props.mdx

@@ -1,15 +0,0 @@
----
-id: Home-Style Props
-title: Style Props
-description: JSX style props for applying CSS rules
-documentState: InitialDraft
-order: 4
-menu:
-  - Style Props
-tags:
-  - document
----
-
-# Style Props
-
-JSX style props for applying CSS rules

package/src/docs/svg.mdx

@@ -1,58 +0,0 @@
----
-id: Style Props-SVG
-title: SVG
-description: JSX style props for SVG elements.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - SVG
-tags:
-  - document
----
-
-# SVG
-
-JSX style props for SVG elements.
-
-## Fill
-
-Use the `fill` prop to set the fill color of an SVG element.
-
-```jsx
-<chakra.svg fill="blue.500">
-  <path d="..." />
-</chakra.svg>
-```
-
-| Prop   | CSS Property | Token Category |
-| ------ | ------------ | -------------- |
-| `fill` | `fill`       | `colors`       |
-
-## Stroke
-
-Use the `stroke` prop to set the stroke color of an SVG element.
-
-```jsx
-<chakra.svg stroke="blue.500">
-  <path d="..." />
-</chakra.svg>
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `stroke` | `stroke`     | `colors`       |
-
-## Stroke Width
-
-Use the `strokeWidth` prop to set the stroke width of an SVG element.
-
-```jsx
-<chakra.svg strokeWidth="1px">
-  <path d="..." />
-</chakra.svg>
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `strokeWidth` | `stroke-width` | `borderWidths` |

package/src/docs/tables.mdx

@@ -1,95 +0,0 @@
----
-id: Style Props-Tables
-title: Tables
-description: JSX style props for styling table elements.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Tables
-tags:
-  - document
----
-
-# Tables
-
-JSX style props for styling table elements.
-
-## Border Spacing
-
-Control the border-spacing property of a table.
-
-```jsx
-<chakra.table borderSpacing="2">
-  <tbody>
-    <tr>
-      <td>Cell 1</td>
-      <td>Cell 2</td>
-    </tr>
-  </tbody>
-</chakra.table>
-```
-
-| Prop            | CSS Property     | Token Category |
-| --------------- | ---------------- | -------------- |
-| `borderSpacing` | `border-spacing` | `spacing`      |
-
-## Border Spacing X
-
-Use the `borderSpacingX` prop to set the horizontal border-spacing property of a
-table.
-
-```jsx
-<chakra.table borderSpacingX="2">
-  <tbody>
-    <tr>
-      <td>Cell 1</td>
-      <td>Cell 2</td>
-    </tr>
-  </tbody>
-</chakra.table>
-```
-
-| Prop             | CSS Property     | Token Category |
-| ---------------- | ---------------- | -------------- |
-| `borderSpacingX` | `border-spacing` | `spacing`      |
-
-## Border Spacing Y
-
-Use the `borderSpacingY` prop to set the vertical border-spacing property of a
-table.
-
-```jsx
-<chakra.table borderSpacingY="2">
-  <tbody>
-    <tr>
-      <td>Cell 1</td>
-      <td>Cell 2</td>
-    </tr>
-  </tbody>
-</chakra.table>
-```
-
-| Prop             | CSS Property     | Token Category |
-| ---------------- | ---------------- | -------------- |
-| `borderSpacingY` | `border-spacing` | `spacing`      |
-
-## Caption Side
-
-Use the `captionSide` prop to set the side of the caption of a table.
-
-```jsx
-<table>
-  <chakra.caption captionSide="bottom">This is a caption</chakra.caption>
-  <tbody>
-    <tr>
-      <td>Cell 1</td>
-      <td>Cell 2</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `captionSide` | `caption-side` | -              |

package/src/docs/toc.mdx

@@ -1,39 +0,0 @@
----
-id: Toc
-title: Toc
-description: Let's get the table of contents automatically generated
-documentState: InitialDraft
-order: 999
-menu:
-  - Playground
-  - Toc
-tags:
-  - playground
-  - exploring
----
-
-# Toc
-
-This is the place to try out things.
-
-## Level 2.1
-
-First Level 2 Heading
-
-### Level 3.1
-
-First Level 3 Heading
-
-#### Level 4.1
-
-First Level 4 Heading
-
-#### Level 4.2
-
-Second Level 4 Heading
-
-### Level 3.2
-
-Second Level 3 Heading
-
-## Level 2.2

package/src/docs/tokens/animations.mdx

@@ -1,68 +0,0 @@
----
-id: TokensAnimations
-title: Animations
-description: The list of available animation tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Other
-  - Animations
-tags:
-  - animation
-  - transition
-icon: RotateRight
----
-
-# Animations
-
-This page provides a list of tokens for applying ready made animations
-(shorthands) or creating custom animations or transitions by combining keyframe
-animations with durations and easings.
-
-## Shorthands
-
-The following list of shorthand tokens can be used as `animation` property
-value, they combine a keyframe animation with duration and easing for a reusable
-animation definition.
-
-<GenericTokenTableDemo category="animations" demoProperty="animation" />
-
-## Keyframe Animations
-
-CSS keyframe animations define animations as a sequence of steps, each with its
-own set of properties. They allow for more complex, multi-step animations that
-can be controlled with keyframes and timing functions.
-
-<KeyframeTokenDemo />
-
-## Durations
-
-Durations define **how long** an animation takes to complete one cycle, directly
-impacting the perception of speed and fluidity.
-
-Short durations create snappy, quick interactions that feel responsive but can
-risk appearing abrupt. Longer durations allow for smoother, more deliberate
-motion but can feel sluggish if overused.
-
-Finding the right balance is key—durations should match the context and intent
-of the interaction. They’re measured in seconds or milliseconds and are often
-paired with easings to create harmonious, intentional animations.
-
-<DurationTokenDemo />
-
-## Easings
-
-_Easings_ determine **the rate of change** of an animation over time,
-essentially defining how an animation transitions between its start and end
-states.
-
-Instead of moving linearly, animations can accelerate, decelerate, or follow
-complex curves, making the motion feel more dynamic and natural.
-
-This is achieved through mathematical easing functions, like linear
-interpolation or bezier curves, which map progress over time to the visible
-change in animation properties. It controls the "rhythm" of the animation,
-ensuring it feels fluid or deliberate depending on the desired effect.
-
-<EasingTokenDemo />

package/src/docs/tokens/aspect-ratios.mdx

@@ -1,21 +0,0 @@
----
-id: TokensAspectRatios
-title: Aspect Ratios
-description: The list of available aspect ratio tokens
-documentState: InitialDraft
-documentAudiences: []
-order: 999
-menu:
-  - Tokens
-  - Aspect Ratios
-tags:
-  - aspect ratio
-  - ratios
-icon: ImageAspectRatio
----
-
-# Aspect Ratios
-
-The list of available aspect ratio tokens:
-
-<GenericTokenTableDemo category="aspectRatios" demoProperty="aspectRatio" />

package/src/docs/tokens/blurs.mdx

@@ -1,20 +0,0 @@
----
-id: TokensBlurs
-title: Blurs
-description: The list of available blur tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Other
-  - Blurs
-tags:
-  - blur
-icon: BlurOn
----
-
-# Blurs
-
-The list of available blur tokens:
-
-<GenericTokenTableDemo category="blurs" demoProperty="blur" />