@commercetools/nimbus 0.0.2 → 0.0.3

package/src/docs/tokens/borders.mdx

@@ -1,25 +0,0 @@
----
-id: TokensBorders
-title: Borders
-description: The list of available border tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Borders
-tags:
-  - border
-icon: BorderStyle
----
-
-# Borders
-
-The list of available border tokens:
-
-<GenericTokenTableDemo category="borders" demoProperty="border" />
-
-> [!IMPORTANT]  
-> The design system uses `box-sizing: border-box` as a default. If you assign an
-> element a `width` of `100px`, the computed `border-width` value will be
-> included in the `100px`, effectively reducing the amount of space available
-> for content.

package/src/docs/tokens/breakpoints.mdx

@@ -1,35 +0,0 @@
----
-id: Breakpoints
-title: Breakpoints
-description: The list of available breakpoints
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Other
-  - Breakpoints
-tags:
-  - z-index
-  - layer
-  - stacking
-  - context
-icon: DesktopWindows
----
-
-# Breakpoints
-
-Breakpoints define specific screen widths at which your design should adapt to
-provide an optimal viewing experience for users. They are thresholds that
-represent a starting point for changes in styling, such as font sizes, layouts,
-and visibility of elements.
-
-Each breakpoint is a minimum width, meaning that styles associated with that
-breakpoint apply to screen sizes equal to or larger than the specified width.
-The styles remain active until the next breakpoint threshold is reached.
-
-## Tokens
-
-The breakpoints **start** at the specified value and **end** at the next
-breakpoint value. The following breakpoint-tokens are supported:
-
-<GenericTokenTableDemo category="breakpoints" />

package/src/docs/tokens/colors.mdx

@@ -1,86 +0,0 @@
----
-id: Colors
-title: Colors
-description: available colors
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Colors
-tags:
-  - colors
-icon: Palette
----
-
-# Colors
-
-In our design system, colors are organized into **scales** based on **contrast**
-levels to ensure clarity and **usability** across various contexts. Each scale
-provides a range of tones, from subtle backgrounds to high-contrast elements
-like text and interactive borders, enabling a consistent and accessible user
-experience.
-
-The scales are _interchangeable_, meaning a color like red can be swapped with
-green without losing the intended contrast levels. This flexibility ensures that
-our designs remain adaptable while maintaining visual hierarchy. Additionally,
-_the contrast-based approach eliminates the need for a separate "dark mode"
-design_, as the scales naturally support both light and dark environments
-seamlessly.
-
-## Scale steps
-
-Below is a list of steps with corresponding use cases for various background,
-border, and text styles in the design system:
-
-| **Step** | **Use Case**                                           |
-| -------- | ------------------------------------------------------ |
-| 1        | App background                                         |
-| 2        | Subtle background                                      |
-| 3        | UI element background                                  |
-| 4        | Hovered UI element background                          |
-| 5        | Active / Selected UI element background                |
-| 6        | Subtle borders and separators                          |
-| 7        | UI element border and focus rings                      |
-| 8        | Hovered UI element border                              |
-| 9        | Solid backgrounds                                      |
-| 10       | Hovered solid backgrounds                              |
-| 11       | Low-contrast text                                      |
-| 12       | High-contrast text                                     |
-| contrast | a contrast color (black/white) that works on step 9+10 |
-
-## System Colors
-
-Colors available for decoration or reference.
-
-<br />
-
-<ColorScales ids="tomato,red,ruby, crimson, pink, plum, purple, violet, iris,indigo,blue,cyan, teal,jade,green,grass,bronze,gold,brown,orange,amber,yellow,lime,mint,sky" />
-
-## Blacks & Whites
-
-Black and white color scales do not adapt to the selected color-mode. Means a
-white will always be white, a black will always be black.
-
-> [!TIP]  
-> Use the `neutral` color scales if you want to refer to a gray-tone that works
-> on the current background color (light-/dark-mode dependent).
-
-<br />
-
-<ColorScales ids="blackAlpha, whiteAlpha" />
-
-## Brand Colors
-
-Custom colors, tailored to the brand.
-
-<br />
-
-<ColorScales ids="ctviolet, ctteal, ctyellow" />
-
-## Semantic Colors
-
-Colors with meaning, used to communicate status or state.
-
-<br />
-
-<ColorScales ids="primary, neutral, info, success, danger, error" />

package/src/docs/tokens/cursors.mdx

@@ -1,21 +0,0 @@
----
-id: TokensCursors
-title: Cursors
-description: The list of available cursor tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Other
-  - Cursors
-tags:
-  - cursor
-icon: Mouse
----
-
-# Cursors
-
-The list of available cursors. **Hover over the gray box** to see the cursor in
-action.
-
-<GenericTokenTableDemo category="cursor" demoProperty="cursor" />

package/src/docs/tokens/radii.mdx

@@ -1,23 +0,0 @@
----
-id: TokensRadii
-title: Radii
-description: The list of available radius tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Radii
-tags:
-  - radius
-  - radii
-  - border-radius
-icon: Architecture
----
-
-# Radii
-
-The list of available radius tokens
-
-## Tokens
-
-<GenericTokenTableDemo category="radii" demoProperty="borderRadius" />

package/src/docs/tokens/shadows.mdx

@@ -1,21 +0,0 @@
----
-id: TokensShadows
-title: Shadows
-description: The list of available shadow tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Shadows
-tags:
-  - shadows
-icon: Texture
----
-
-# Shadows
-
-The list of available shadow tokens
-
-## Tokens
-
-<GenericTokenTableDemo category="shadows" demoProperty="boxShadow" />

package/src/docs/tokens/sizes.mdx

@@ -1,54 +0,0 @@
----
-id: TokensSizes
-title: Sizes
-description: The list of available size tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Sizes
-tags:
-  - sizes
-icon: Straighten
----
-
-# Sizes
-
-Different size type tokens are available to suit various design needs, including
-numerical, proportional, named, breakpoint, and others.
-
-The list of available size tokens:
-
-## Numerical sizes
-
-Precise, incrementally scaled units for defining fixed dimensions
-
-<SizesTokenDemo group="regular" />
-
-## Proportional sizes
-
-Proportional dimensional values expressed as fractions, suitable for dividing
-elements in layouts.
-
-<SizesTokenDemo group="fraction" />
-
-## Large sizes
-
-Semantic size labels providing consistent values for specific dimensions,
-ensuring clarity and reusability.
-
-<SizesTokenDemo group="large" />
-
-## Breakpoint
-
-Predefined screen width thresholds to adjust dimensional values for responsive
-layouts.
-
-<SizesTokenDemo group="breakpoint" />
-
-## Others
-
-Viewport-based or content-driven dimensional values for flexible and adaptive
-element sizing.
-
-<SizesTokenDemo group="other" />

package/src/docs/tokens/spacing.mdx

@@ -1,35 +0,0 @@
----
-id: Spacing
-title: Spacing
-description: Spacing tokens are used to define the space between elements.
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Spacing
-tags:
-  - space
-  - spacing
-icon: SpaceBar
----
-
-# Spacing Tokens
-
-Spacing tokens are used to define the space between elements. They are used to
-create consistent spacing between elements and to ensure that the layout is
-visually balanced.
-
-> [!NOTE]  
-> Every token has a negative equivalent, in case you need to apply a negative
-> margin etc. Access the negative version by prependind the token name with a
-> dash. e.g. `-100`, `-400`, `-1000`, etc.
-
-<br />
-
-<SpacingTokenDemo />
-
-<br />
-
-> [!TIP]  
-> To quickly calculate the token value in px, take the token name and divide it
-> by 25. e.g. `100 / 25 = 4px`, `400 / 25 = 16px`, `1000 / 25 = 40px`, etc.

package/src/docs/tokens/typography.mdx

@@ -1,61 +0,0 @@
----
-id: TokensTypography
-title: Typography
-description: everything typography related
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Typography
-tags:
-  - text
-  - headings
-  - strong
-  - bold
-  - italic
-  - emphasize
-icon: FormatSize
----
-
-# Typography
-
-Below you'll find the raw tokens to change typography styles on a text-element.
-
-## Text Styles
-
-Text styles are collections of multiple typography rules (such as `font-size`,
-`line-height`, `letter-spacing` etc.) that create a specific, reusable style.
-
-> [!NOTE]  
-> I added `caption`, `detail` & `body` from our existing styles, but they are
-> essentially just combinations of font-size & line-height and can be mapped to
-> `xs`, `sm` & `md`. The `headline` looks can be achieved by using the
-> textStyles on the `<Heading/>` component.
-
-```jsx
-<Text textStyle="nameOfDesiredTextStyle">Heading 1</Text>
-```
-
-### Available Text Styles
-
-<TextStylesDemo />
-
-## Fonts
-
-<GenericTokenTableDemo category="fonts" demoProperty="fontFamily" />
-
-## Font Sizes
-
-<GenericTokenTableDemo category="fontSizes" demoProperty="fontSize" />
-
-## Font Weights
-
-<GenericTokenTableDemo category="fontWeights" demoProperty="fontWeight" />
-
-## Letter Spacings
-
-<GenericTokenTableDemo category="letterSpacings" demoProperty="letterSpacing" />
-
-## Line Heights
-
-<GenericTokenTableDemo category="lineHeights" demoProperty="lineHeight" />

package/src/docs/tokens/z-indices.mdx

@@ -1,23 +0,0 @@
----
-id: ZIndex
-title: Z-Indices
-description: The list of available z-index tokens
-documentState: InitialDraft
-order: 999
-menu:
-  - Tokens
-  - Other
-  - Z-Indices
-tags:
-  - z-index
-  - layer
-  - stacking
-  - context
-icon: Layers
----
-
-# Z-Indices
-
-The list of available z-index tokens.
-
-<GenericTokenTableDemo category="zIndex" />

package/src/docs/tokens-other.mdx

@@ -1,17 +0,0 @@
----
-id: Tokens-Other
-title: Other
-description: Less frequently used design-tokens
-documentState: InitialDraft
-order: 9999
-menu:
-  - Tokens
-  - Other
-tags:
-  - document
-icon: MoreHoriz
----
-
-# Other
-
-Less frequently used design-tokens

package/src/docs/tokens.mdx

@@ -1,16 +0,0 @@
----
-id: Tokens
-title: Tokens
-description: design tokens to be used in conjunction with the ui components
-documentState: InitialDraft
-order: 2
-menu:
-  - Tokens
-tags:
-  - tokens
-  - design
----
-
-# Tokens
-
-A collection of design tokens

package/src/docs/transforms.mdx

@@ -1,150 +0,0 @@
----
-id: Style Props-Transforms
-title: Transforms
-description: JSX style props for transforming elements.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Transforms
-tags:
-  - document
----
-
-# Transforms
-
-JSX style props for transforming elements.
-
-## Scale
-
-Use the `scale` prop to control the scale of an element.
-
-```jsx
-<Box scale="1.2" />
-```
-
-When the `scale` prop is set to `auto`, the `scaleX` and `scaleY` props are used
-to control the scale of the element.
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `scale` | `scale`      | -              |
-
-## Scale X
-
-Use the `scaleX` prop to control the scaleX property of an element. This
-requires the `scale` prop to be set to `auto`.
-
-```jsx
-<Box scale="auto" scaleX="1.3" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `scaleX` | `--scale-x`  | -              |
-
-## Scale Y
-
-Use the `scaleY` prop to control the scaleY property of an element. This
-requires the `scale` prop to be set to `auto`.
-
-```jsx
-<Box scale="auto" scaleY="0.4" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `scaleY` | `--scale-y`  | -              |
-
-## Rotate
-
-Use the `rotate` prop to control the rotate property of an element.
-
-```jsx
-<Box rotate="45deg" />
-```
-
-When the `rotate` prop is set to `auto`, the `rotateX` and `rotateY` props are
-used to control the rotate of the element.
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `rotate` | `rotate`     | -              |
-
-## Rotate X
-
-Use the `rotateX` prop to control the rotateX property of an element.
-
-```jsx
-<Box rotateX="45deg" />
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `rotateX` | `--rotate-x` | -              |
-
-## Rotate Y
-
-Use the `rotateY` prop to control the rotateY property of an element.
-
-```jsx
-<Box rotateY="45deg" />
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `rotateY` | `--rotate-y` | -              |
-
-## Translate
-
-Use the `translate` prop to control the translate property of an element.
-
-```jsx
-<Box translate="40px" />
-<Box translate="50% -40%" />
-```
-
-When the `translate` prop is set to `auto`, the `translateX` and `translateY`
-props are used to control the translate of the element.
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `translate` | `translate`  | -              |
-
-## Translate X
-
-Use the `translateX` prop to control the translateX property of an element. This
-requires the `translate` prop to be set to `auto`.
-
-```jsx
-// hardcoded values
-<Box translate="auto" translateX="50%" />
-<Box translate="auto" translateX="20px" />
-
-// token values
-<Box translate="auto" translateX="4" />
-<Box translate="auto" translateX="-10" />
-```
-
-| Prop         | CSS Property    | Token Category |
-| ------------ | --------------- | -------------- |
-| `translateX` | `--translate-x` | `spacing`      |
-
-## Translate Y
-
-Use the `translateY` prop to control the translateY property of an element. This
-requires the `translate` prop to be set to `auto`.
-
-```jsx
-// hardcoded values
-<Box translate="auto" translateY="-40%" />
-<Box translate="auto" translateY="4rem" />
-
-// token values
-<Box translate="auto" translateY="4" />
-<Box translate="auto" translateY="-10" />
-```
-
-| Prop         | CSS Property    | Token Category |
-| ------------ | --------------- | -------------- |
-| `translateY` | `--translate-y` | `spacing`      |