@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/docs/background.mdx

@@ -1,154 +0,0 @@
----
-id: Style Props-Background
-title: Background
-description:
-  JSX style props for styling background colors, gradients, and images.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Background
-tags:
-  - document
----
-
-# Background
-
-JSX style props for styling background colors, gradients, and images.
-
-## Background Attachment
-
-Use `bgAttachment` to control the attachment of a background image.
-
-```jsx
-<Box bgAttachment="fixed" bgImage="url(...)" />
-```
-
-| Prop                                   | CSS Property            | Token Category |
-| -------------------------------------- | ----------------------- | -------------- |
-| `bgAttachment`, `backgroundAttachment` | `background-attachment` | -              |
-
-## Background Blend Mode
-
-Use `bgBlendMode` prop to control how an element's background image should blend
-with the its background color.
-
-```jsx
-<Box bgBlendMode="multiply" bgColor="red.200" bgImage="url(...)" />
-```
-
-## Background Clip
-
-Use `bgClip` to control the clipping of a background image.
-
-```jsx
-<Box bgClip="border-box" bgImage="url(...)" />
-```
-
-| Prop                       | CSS Property      | Token Category |
-| -------------------------- | ----------------- | -------------- |
-| `bgClip`, `backgroundClip` | `background-clip` | -              |
-
-## Background Color
-
-Use `bg`, `bgColor`, or `backgroundColor` props to set the background color of
-an element.
-
-```jsx
-<Box bg="red.200" />
-<Box bgColor="red.200" />
-
-// with opacity modifier
-<Box bg="blue.200/30" />
-<Box bgColor="blue.200/30" />
-```
-
-| Prop                         | CSS Property       | Token Category |
-| ---------------------------- | ------------------ | -------------- |
-| `bg`, `background`           | `background`       | `colors`       |
-| `bgColor`, `backgroundColor` | `background-color` | `colors`       |
-
-## Background Origin
-
-Use `bgOrigin` or `backgroundOrigin` to control the origin of a background
-image.
-
-```jsx
-<Box bgOrigin="border-box" bgImage="url(...)" />
-```
-
-| Prop                           | CSS Property        | Token Category |
-| ------------------------------ | ------------------- | -------------- |
-| `bgOrigin`, `backgroundOrigin` | `background-origin` | -              |
-
-## Background Position
-
-Properties for controlling the src and position of a background image.
-
-```jsx
-<Box bgImage="url(...)" bgPosition="center" />
-```
-
-| Prop                                 | CSS Property       | Token Category |
-| ------------------------------------ | ------------------ | -------------- |
-| `bgPosition`, `backgroundPosition`   | `background-image` | -              |
-| `bgPositionX`, `backgroundPositionX` | `background-image` | -              |
-| `bgPositionY`, `backgroundPositionY` | `background-image` | -              |
-
-## Background Repeat
-
-Use `bgRepeat` or `backgroundRepeat` to control the repeat of a background
-image.
-
-```jsx
-<Box bgRepeat="no-repeat" bgImage="url(...)" />
-```
-
-| Prop                           | CSS Property        | Token Category |
-| ------------------------------ | ------------------- | -------------- |
-| `bgRepeat`, `backgroundRepeat` | `background-repeat` | -              |
-
-## Background Size
-
-Use `bgSize` or `backgroundSize` to control the size of a background image.
-
-```jsx
-<Box bgSize="cover" bgImage="url(...)" />
-```
-
-| Prop                       | CSS Property      | Token Category |
-| -------------------------- | ----------------- | -------------- |
-| `bgSize`, `backgroundSize` | `background-size` | -              |
-
-## Background Image
-
-Use `bgImage` or `backgroundImage` to set the background image of an element.
-
-```jsx
-<Box bgImage="url(...)" />
-<Box bgImage="radial-gradient(circle, #0000 45%, #000f 48%)" />
-<Box bgImage="linear-gradient(black, white)" />
-
-// with token reference
-<Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />
-```
-
-| Prop                         | CSS Property       | Token Category |
-| ---------------------------- | ------------------ | -------------- |
-| `bgImage`, `backgroundImage` | `background-image` | assets         |
-
-## Background Gradient
-
-Properties to create a background gradient based on color stops.
-
-```jsx
-<Box bgGradient="to-r" gradientFrom="red.200" gradientTo="blue.200" />
-```
-
-| Prop           | CSS Property       | Token Category |
-| -------------- | ------------------ | -------------- |
-| `bgGradient`   | `background-image` | `gradients`    |
-| `textGradient` | `background-image` | `gradients`    |
-| `gradientFrom` | `--gradient-from`  | `colors`       |
-| `gradientTo`   | `--gradient-to`    | `colors`       |
-| `gradientVia`  | `--gradient-via`   | `colors`       |

package/src/docs/border.mdx

@@ -1,226 +0,0 @@
----
-id: Style Props-Border
-title: Border
-description: JSX style props for styling border and border radius.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Border
-tags:
-  - document
----
-
-# Border
-
-JSX style props for styling border and border radius.
-
-## Border Radius
-
-### All sides
-
-Use the `rounded` or `borderRadius` props to apply border radius on all sides of
-an element.
-
-```jsx
-<Box borderRadius="400" />
-<Box rounded="400" /> // shorthand
-```
-
-| Prop                      | CSS Property    | Token Category |
-| ------------------------- | --------------- | -------------- |
-| `rounded`, `borderRadius` | `border-radius` | `radii`        |
-
-### Specific sides
-
-Use the `rounded{Left,Right,Top,Bottom}` or
-`border{Left,Right,Top,Bottom}Radius` prop, to apply border radius on a specific
-side of an element.
-
-```jsx
-<Box borderTopRadius="md" />
-<Box roundedTop="md" /> // shorthand
-
-<Box borderLeftRadius="md" />
-<Box roundedLeft="md" /> // shorthand
-```
-
-Use the logical equivalent to make the border radius adapt based on the text
-direction.
-
-```jsx
-<Box roundedStart="md" />
-<Box roundedEnd="md" />
-```
-
-| Prop                                  | CSS Property                                           | Token Category |
-| ------------------------------------- | ------------------------------------------------------ | -------------- |
-| `roundedLeft`, `borderLeftRadius`     | `border-left-radius`                                   | `radii`        |
-| `roundedRight`, `borderRightRadius`   | `border-right-radius`                                  | `radii`        |
-| `roundedTop`, `borderTopRadius`       | `border-top-radius`                                    | `radii`        |
-| `roundedBottom`, `borderBottomRadius` | `border-bottom-radius`                                 | `radii`        |
-| `roundedStart`, `borderStartRadius`   | `border-start-start-radius`, `border-end-start-radius` | `radii`        |
-| `roundedEnd`, `borderEndRadius`       | `border-start-end-radius`, `border-end-end-radius`     | `radii`        |
-
-### Specific corners
-
-Use the `border{Top,Bottom}{Left,Right}Radius` properties, or the shorthand
-equivalent to round a specific corner.
-
-```jsx
-<Box borderTopLeftRadius="md" />
-<Box roundedTopLeft="md" /> // shorthand
-```
-
-Use the logical properties to adapt based on the text direction.
-
-```jsx
-<Box borderStartStartRadius="md" />
-<Box roundedStartStart="md" /> // shorthand
-```
-
-| Prop                                     | CSS Property                 | Token Category |
-| ---------------------------------------- | ---------------------------- | -------------- |
-| `roundedTopLeft`,`borderTopLeftRadius`   | `border-top-left-radius`     | `radii`        |
-| `roundedTopRight`,`borderTopRight`       | `border-top-right-radius`    | `radii`        |
-| `roundedBottomRight`,`borderBottomRight` | `border-bottom-right-radius` | `radii`        |
-| `roundedBottomLeft`,`borderBottomLeft`   | `border-bottom-left-radius`  | `radii`        |
-
-## Border Width
-
-### All sides
-
-Use the `borderWidth` prop to apply border width on all sides of an element.
-
-> Chakra applies `borderStyle: solid` and a global border color by default.
-> Specifying a border width is sufficient to apply the border.
-
-```jsx
-<Box borderWidth="1px" />
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `borderWidth` | `border-width` | `borderWidths` |
-
-### Specific sides
-
-Use the `border{Left|Right|Top|Bottom}Width` prop to apply border width on a
-specific side of an element.
-
-```jsx
-<Box borderTopWidth="1px" />
-<Box borderLeftWidth="1px" />
-```
-
-Use the logical equivalent to make the border width adapt based on the text
-direction.
-
-```jsx
-<Box borderInlineStartWidth="1px" />
-<Box borderInlineWidth="1px" /> // shorthand
-```
-
-| Prop                                          | CSS Property                | Token Category |
-| --------------------------------------------- | --------------------------- | -------------- |
-| `borderTopWidth`                              | `border-top-width`          | `borderWidths` |
-| `borderLeftWidth`                             | `border-left-width`         | `borderWidths` |
-| `borderRightWidth`                            | `border-right-width`        | `borderWidths` |
-| `borderBottomWidth`                           | `border-bottom-width`       | `borderWidths` |
-| `borderStartWidth` , `borderInlineStartWidth` | `border-{start+end}-width`  |
-| `borderEndWidth` , `borderInlineEndWidth`     | `border-{start+end}-width`  |
-| `borderXWidth` , `borderInlineWidth`          | `border-{left,right}-width` | `borderWidths` |
-| `borderYWidth` , `borderBlockWidth`           | `border-{top,bottom}-width` | `borderWidths` |
-
-## Border Color
-
-### All sides
-
-Use the `borderColor` prop to apply border color on all sides of an element.
-
-```jsx
-<Box borderColor="red.400" />
-
-// with opacity modifier
-<Box borderColor="red.400/20" />
-```
-
-### Specific sides
-
-Use the `border{Left,Right,Top,Bottom}Color` prop to apply border color on a
-specific side of an element.
-
-```jsx
-<Box borderTopColor="red.400" />
-<Box borderLeftColor="red.400" />
-```
-
-Use the logical properties to adapt based on the text direction.
-
-```jsx
-<Box borderStartColor="red.400" />
-<Box borderEndColor="red.400" />
-```
-
-| Prop                                          | CSS Property               | Token Category |
-| --------------------------------------------- | -------------------------- | -------------- |
-| `borderColor`                                 | `border-color`             | `colors`       |
-| `borderTopColor`                              | `border-top-color`         | `colors`       |
-| `borderLeftColor`                             | `border-left-color`        | `colors`       |
-| `borderRightColor`                            | `border-right-color`       | `colors`       |
-| `borderBottomColor`                           | `border-bottom-color`      | `colors`       |
-| `borderStartColor` , `borderInlineStartColor` | `border-{start,end}-color` | `colors`       |
-| `borderEndColor` , `borderInlineEndColor`     | `border-{start,end}-color` | `colors`       |
-| `borderXColor`, `borderInlineColor`           | `border-inline-color`      | `colors`       |
-| `borderYColor`, `borderBlockColor`            | `border-block-color`       | `colors`       |
-
-## Divide Width
-
-Use the `divide{X,Y}Width` prop to apply border width between elements. It uses
-the CSS selector `> * + *` to apply the `border*` properties.
-
-```jsx
-<Box divideXWidth="1px">
-  <Box>1</Box>
-  <Box>2</Box>
-</Box>
-
-<Box divideYWidth="1px">
-  <Box>1</Box>
-  <Box>2</Box>
-</Box>
-```
-
-| Prop          | CSS Property                        | Token Category |
-| ------------- | ----------------------------------- | -------------- |
-| `divideWidth` | `border-{inline,block}-start-width` | `borderWidths` |
-
-## Divide Color
-
-Use the `divideColor` prop to apply border color between elements.
-
-```jsx
-<Box divideColor="red.400">
-  <Box>1</Box>
-  <Box>2</Box>
-</Box>
-```
-
-| Prop          | CSS Property     | Token Category |
-| ------------- | ---------------- | -------------- |
-| `divideColor` | `--divide-color` | `colors`       |
-
-## Divide Style
-
-Use the `divideStyle` prop to apply border style between elements.
-
-```jsx
-<Box divideX="2px" divideStyle="dashed">
-  <Box>1</Box>
-  <Box>2</Box>
-</Box>
-```
-
-| Prop          | CSS Property     | Token Category |
-| ------------- | ---------------- | -------------- |
-| `divideStyle` | `--divide-style` | `borderStyle`  |

package/src/docs/changelog.mdx

@@ -1,17 +0,0 @@
----
-id: Home-Changelog
-title: Changelog
-description: List of updates, improvements, and bug fixes.
-documentState: InitialDraft
-order: 3
-menu:
-  - Home
-  - Changelog
-tags:
-  - document
-icon: History
----
-
-# Changelog
-
-List of updates, improvements, and bug fixes.

package/src/docs/components-layout.mdx

@@ -1,22 +0,0 @@
----
-id: Layout
-title: Layout
-description: Components that structure the content on the page.
-documentState: InitialDraft
-order: 1
-menu:
-  - Components
-  - Layout
-tags:
-  - layout
-icon: ViewComfy
----
-
-# Layout
-
-Components that structure the content on the page.
-
-- **Grid Systems**: e.g., Row, Column, Container.
-- **Flexbox Utilities**: e.g., Box, Spacer, Stack.
-- **Positioning**: e.g., Absolute, RelativeWrapper.
-- **Responsive Design**: e.g., Breakpoints, ResponsiveContainer.

package/src/docs/components.mdx

@@ -1,17 +0,0 @@
----
-id: Components
-title: Components
-description:
-  React components for building robust and visually appealing applications.
-documentState: InitialDraft
-order: 3
-menu:
-  - Components
-tags:
-  - components
-  - react
----
-
-# Components
-
-[Add a cool category overview component]

package/src/docs/data-display.mdx

@@ -1,23 +0,0 @@
----
-id: Components-Data Display
-title: Data Display
-description: Components for presenting data or visual content.
-documentState: InitialDraft
-order: 7
-menu:
-  - Components
-  - Data Display
-tags:
-  - document
-icon: TableView
----
-
-# Data Display
-
-Components for presenting data or visual content.
-
-- **Tables**: e.g., DataTable, TableRow, TableHeader.
-- **Cards**: e.g., Card, CardHeader, CardBody.
-- **Lists**: e.g., List, ListItem.
-- **Charts & Graphs**: e.g., LineChart, BarChart.
-- **Badges & Tags**: e.g., Badge, Tag.

package/src/docs/display.mdx

@@ -1,55 +0,0 @@
----
-id: Style Props-Display
-title: Display
-description: Style props for styling display of an element.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Display
-tags:
-  - document
----
-
-# Display
-
-Style props for styling display of an element.
-
-## Display Property
-
-```jsx
-<Box display="flex" />
-
-// responsive
-<Box display={{ base: "none", md: "block" }} />
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `display` | `display`    | -              |
-
-## Hiding Elements
-
-### Hide From
-
-Use the `hideFrom` prop to hide an element from a specific breakpoint.
-
-```jsx
-<Box display="flex" hideFrom="md" />
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `hideFrom` | `display`    | `breakpoints`  |
-
-### Hide Below
-
-Use the `hideBelow` prop to hide an element below a specific breakpoint.
-
-```jsx
-<Box display="flex" hideBelow="md" />
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `hideBelow` | `display`    | `breakpoints`  |

package/src/docs/effects.mdx

@@ -1,73 +0,0 @@
----
-id: Style Props-Effects
-title: Effects
-description: JSX style props for styling box shadows, opacity, and more
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Effects
-tags:
-  - document
----
-
-# Effects
-
-JSX style props for styling box shadows, opacity, and more
-
-## Box Shadow
-
-Use the `shadow` or `boxShadow` prop to apply a box shadow to an element.
-
-```jsx
-// hardcoded values
-<Box shadow="12px 12px 2px 1px rgba(0, 0, 255, .2)" />
-
-// token values
-<Box shadow="lg" />
-```
-
-| Prop                   | CSS Property     | Token Category |
-| ---------------------- | ---------------- | -------------- |
-| `shadows`, `boxShadow` | `box-shadow`     | `shadows`      |
-| `shadowColor`          | `--shadow-color` | `colors`       |
-
-## Box Shadow Color
-
-Use the `shadowColor` prop to set the color of a box shadow. This prop maps to
-the `--shadow-color` CSS variable.
-
-```jsx
-<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />
-```
-
-| Prop          | CSS Property     | Token Category |
-| ------------- | ---------------- | -------------- |
-| `shadowColor` | `--shadow-color` | `colors`       |
-
-## Opacity
-
-Use the `opacity` prop to set the opacity of an element.
-
-```jsx
-<Box opacity="0.5" />
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `opacity` | `opacity`    | `opacity`      |
-
-## Mix Blend Mode
-
-Use the `mixBlendMode` prop to control how an element's content should be
-blended with the background.
-
-```jsx
-<Box bg="red.400">
-  <Image src="..." mixBlendMode="hard-light" />
-</Box>
-```
-
-| Prop           | CSS Property     | Token Category |
-| -------------- | ---------------- | -------------- |
-| `mixBlendMode` | `mix-blend-mode` | -              |

package/src/docs/feedback.mdx

@@ -1,22 +0,0 @@
----
-id: Components-Feedback
-title: Feedback
-description: Components for providing user feedback.
-documentState: InitialDraft
-order: 5
-menu:
-  - Components
-  - Feedback
-tags:
-  - document
-icon: CommentBank
----
-
-# Feedback
-
-Components for providing user feedback.
-
-- **Notifications**: e.g., Toast, Alert.
-- **Status Indicators**: e.g., Spinner, ProgressBar.
-- **Modals & Overlays**: e.g., Modal, Tooltip, Popover.
-- **Validation**: e.g., ErrorMessage, SuccessMessage.