diff --git a/.changeset/sweet-toys-shop.md b/.changeset/sweet-toys-shop.md new file mode 100644 index 0000000000..778142bf3d --- /dev/null +++ b/.changeset/sweet-toys-shop.md @@ -0,0 +1,12 @@ +--- +"@marigold/docs": patch +--- + +docs[DST-519]: Clean up Marigold Docs/ Improve Navigation + +- deleted old files (scripts, about , release) +- updated some faqs +- improved the navigation structure +- added overview pages +- improved folder structure in code (a bit) +- adjust some links diff --git a/docs/app/_components/Navigation.tsx b/docs/app/_components/Navigation.tsx index 569e938070..495bdcd60c 100644 --- a/docs/app/_components/Navigation.tsx +++ b/docs/app/_components/Navigation.tsx @@ -17,7 +17,7 @@ interface NavigationLink { interface NavigationSubsection { name: string; - links: NavigationLink[]; + links?: NavigationLink[]; } interface NavigationSection { name: string; @@ -27,7 +27,7 @@ interface NavigationSection { } export const useNavigation = (): NavigationSection[] => { - const navigation = siteConfig.navigation; + const navigation = [...siteConfig.navigation] as NavigationSection[]; return navigation.map(({ name, slug, subsections = [] }) => { // Section Page = has a section but NO subsection @@ -44,19 +44,22 @@ export const useNavigation = (): NavigationSection[] => { href: `/${page.slug}`, badge: page.badge, })), - subsections: subsections.map(subsection => ({ - name: subsection.name, - links: allContentPages - .filter( - // Subsection Page = has a section AND a subsection - page => page.section === slug && page.subsection === subsection.slug - ) - .map(page => ({ - name: page.title, - href: `/${page.slug}`, - badge: page.badge, - })), - })), + subsections: subsections.map( + (subsection: { name: string; slug: string }) => ({ + name: subsection.name, + links: allContentPages + .filter( + // Subsection Page = has a section AND a subsection + page => + page.section === slug && page.subsection === subsection.slug + ) + .map(page => ({ + name: page.title, + href: `/${page.slug}`, + badge: page.badge, + })), + }) + ), }; }); }; @@ -99,7 +102,7 @@ export const Navigation = ({ onClick }: NavigationProps) => { {name}
- {links.map(({ name, href, badge }) => ( + {links?.map(({ name, href, badge }) => (
(
-
+
- Discover new Tutorials! + Discover new Tutorials!
diff --git a/docs/app/_components/SiteNavigation.tsx b/docs/app/_components/SiteNavigation.tsx index d10df3a85d..82a08f1fde 100644 --- a/docs/app/_components/SiteNavigation.tsx +++ b/docs/app/_components/SiteNavigation.tsx @@ -10,10 +10,7 @@ export const SiteNavigation = () => { const sections = navigation.map(section => ({ name: section.name, slug: section.slug, - link: - section.subsections.length > 0 - ? section.subsections[0].links[0] - : section.links[0], + link: section.links[0], })); return ( diff --git a/docs/content/components/application/provider/provider.mdx b/docs/content/components/application/provider/provider.mdx index c9b4729668..3f222b1bf8 100644 --- a/docs/content/components/application/provider/provider.mdx +++ b/docs/content/components/application/provider/provider.mdx @@ -7,7 +7,7 @@ caption: Provider which applies the theme. Without the `` you can't get the theme on your components. So it is necessary to use. You just have to wrap your components around the `` to make it work. -If you want to get more information about the setup go to [Getting Started](/introduction/getting-started/#bootstrapping). +If you want to get more information about the setup go to [Getting Started](/getting-started/installation/#bootstrapping). ```tsx import { Button, MarigoldProvider } from '@marigold/components'; diff --git a/docs/content/components/collection/table/table.mdx b/docs/content/components/collection/table/table.mdx index 0d481a4cfb..c8cfa3c276 100644 --- a/docs/content/components/collection/table/table.mdx +++ b/docs/content/components/collection/table/table.mdx @@ -187,7 +187,7 @@ To make async sorting more convenient, you can use the `useAsyncList` hook. The ### Handling numeric values -With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat/numericFormat), [DateFormat](../formatters/dateformat/dateFormat) for more informations. +With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat), [DateFormat](../formatters/dateformat) for more informations. Also you see how to use the `align` property on the columns. With that you can set the content of a column to left, center or right. @@ -317,7 +317,7 @@ Choosing the right alternative to data tables is crucial for effectively display -Is there still not the right alternative for you please [get in touch](../../introduction/get-in-touch) with us! +Is there still not the right alternative for you please [get in touch](../../resources/get-in-touch) with us! ## Related diff --git a/docs/content/components/content/icon/icon.mdx b/docs/content/components/content/icon/icon.mdx index 15de001328..cf2cea6afe 100644 --- a/docs/content/components/content/icon/icon.mdx +++ b/docs/content/components/content/icon/icon.mdx @@ -3,13 +3,13 @@ title: Icon caption: Component to render Icons. --- -On this page you can learn how [Marigold Icons](/concepts/icons/) should be used. +On this page you can learn how [Marigold Icons](/foundations/icons/) should be used. Icons itself can be used to improve visual interest and get users attention. The size of the icon can be change via the `size` prop. The default size is `24px`. The color of the icon refers to the property [`currentcolor`](https://www.w3schools.com/colors/colors_currentcolor.asp). -For a full list of the available Icons go to the [Marigold Icons](/concepts/icons/). +For a full list of the available Icons go to the [Marigold Icons](/foundations/icons/). ## Import @@ -33,7 +33,7 @@ To import a specific component you just have to use the name of the icon directl import { DesignTicket } from '@marigold/icons'; ``` -Alternatively you can go to [Marigold Icons](/concepts/icons/) and click on an Icon in the list to copy them as `` Element. +Alternatively you can go to [Marigold Icons](/foundations/icons/) and click on an Icon in the list to copy them as `` Element. ## Props diff --git a/docs/content/components/content/section-message/section-message.mdx b/docs/content/components/content/section-message/section-message.mdx index a28db0fe8a..bd22b1c592 100644 --- a/docs/content/components/content/section-message/section-message.mdx +++ b/docs/content/components/content/section-message/section-message.mdx @@ -39,18 +39,18 @@ import { SectionMessage } from '@marigold/components'; ### Info Section Message -This is the default info ``. The color is in a blue tone and contains the [``](/concepts/icons/#info) icon. +This is the default info ``. The color is in a blue tone and contains the [``](/foundations/icons/#info) icon. ### Warning Section Message -Here you can see the warning ``. The color is in a yellow tone and contains the[``](/concepts/icons/#info) icon. +Here you can see the warning ``. The color is in a yellow tone and contains the[``](/foundations/icons/#info) icon. ### Error Section Message -The error `` is colored in a red tone and contains the [``](/concepts/icons/#info) icon. +The error `` is colored in a red tone and contains the [``](/foundations/icons/#info) icon. diff --git a/docs/content/components/content/svg/svg.mdx b/docs/content/components/content/svg/svg.mdx index 24eec3c5da..ebcfda6278 100644 --- a/docs/content/components/content/svg/svg.mdx +++ b/docs/content/components/content/svg/svg.mdx @@ -27,6 +27,6 @@ In this example you can see how to use the `` element. ### Colorize -To modify the color, adjust the `color` prop using a [design token](/introduction/design-tokens). +To modify the color, adjust the `color` prop using a [design token](/foundations/design-tokens). diff --git a/docs/content/components/form/form/form.mdx b/docs/content/components/form/form/form.mdx index b2a5f328ba..ce5be40524 100644 --- a/docs/content/components/form/form/form.mdx +++ b/docs/content/components/form/form/form.mdx @@ -5,7 +5,7 @@ caption: Wrap your fields to submit user data and enable input validation. The `
` component acts as a container for a set of fields, enabling data transmission to a server. It operates like a standard HTML form, initiating either a request based on the specified `method` attribute. -Additionally, the `
` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/concepts/validation) guide to learn more about form validation. +Additionally, the `
` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/foundations/validation) guide to learn more about form validation. ## Import @@ -41,7 +41,7 @@ The `
` component handles passed errors, typically received from a server a -For more information about form validation, see the [Validation](/concepts/validation) guide. +For more information about form validation, see the [Validation](/foundations/validation) guide. ### Focus Management @@ -54,6 +54,6 @@ As you can see in the previous server errors example, when a user submits a form Want more?! - You can find more examples and usages of the `
` component on the [Validation](/concepts/validation) page and in the [Forms](/recipes/form-recipes) recipes. + You can find more examples and usages of the `
` component on the [Validation](/foundations/validation) page and in the [Forms](/recipes/form-recipes) recipes.
diff --git a/docs/content/components/form/number-field/number-field.mdx b/docs/content/components/form/number-field/number-field.mdx index 265001f7ed..828dd814cf 100644 --- a/docs/content/components/form/number-field/number-field.mdx +++ b/docs/content/components/form/number-field/number-field.mdx @@ -324,7 +324,7 @@ the user about the error. The message disappears automatically when all requirem }, { title: 'NumericFormat', - href: '../formatters/numericformat/numericFormat', + href: '../formatters/numericformat', caption: 'Helper component for formatting numeric based on the current language and locale-specific conventions.', icon: ( diff --git a/docs/content/components/formatters/dateformat/dateFormat.mdx b/docs/content/components/formatters/dateformat/dateformat.mdx similarity index 100% rename from docs/content/components/formatters/dateformat/dateFormat.mdx rename to docs/content/components/formatters/dateformat/dateformat.mdx diff --git a/docs/content/components/formatters/numericformat/numericFormat.mdx b/docs/content/components/formatters/numericformat/numericformat.mdx similarity index 100% rename from docs/content/components/formatters/numericformat/numericFormat.mdx rename to docs/content/components/formatters/numericformat/numericformat.mdx diff --git a/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx b/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx index 3737d95a15..a7b1556d55 100644 --- a/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx +++ b/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx @@ -10,7 +10,7 @@ You can pass the following parameters to your useResponsiveValue hook: The first parameter of the hook will be the values as array which defines the breakpoints. The second argument must be the `defaultIndex` which points opn the default value. -If you want to have a look on all possible breakpoints from the theme you can have a look [here](../introduction/design-tokens#breakpoints). +If you want to have a look on all possible breakpoints from the theme you can have a look [here](../foundations/design-tokens#breakpoints). Also with Tailwind some new class names came along which you can use to add styles by using the responsive modifiers (like: sm:text-sm). diff --git a/docs/content/components/layout/inline/inline.mdx b/docs/content/components/layout/inline/inline.mdx index de56e413dd..0d90361ca3 100644 --- a/docs/content/components/layout/inline/inline.mdx +++ b/docs/content/components/layout/inline/inline.mdx @@ -6,12 +6,12 @@ badge: updated The `` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). It aligns its content horizontally in a row and automatically wraps to a new line when there isn't enough space on the screen. -Use the inline component in combination with other layout components to easily [create customized layouts](../../concepts/layouts). +Use the inline component in combination with other layout components to easily [create customized layouts](../../foundations/layouts). ## Usage If you have more than two elements you can use the `` component to arrange elements horizontally according to the space required. -For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../introduction/design-tokens#spacing). +For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../foundations/design-tokens#spacing). @@ -51,7 +51,7 @@ For horizontally alignment you can use the `alignX` prop. items={[ { title: 'Building layouts', - href: '../../concepts/layouts', + href: '../../foundations/layouts', caption: 'Learn how to build layouts.', icon: ( diff --git a/docs/content/components/layout/split/split.mdx b/docs/content/components/layout/split/split.mdx index b3da0f5959..643154526e 100644 --- a/docs/content/components/layout/split/split.mdx +++ b/docs/content/components/layout/split/split.mdx @@ -40,7 +40,7 @@ What applies to the inline is also possible with the stack component. You have t items={[ { title: 'Building layouts', - href: '../../concepts/layouts', + href: '../../foundations/layouts', caption: 'Learn how to build layouts.', icon: ( ` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other. -Use the stack component in combination with other layout components to easily [create customized layouts](../../concepts/layouts). +Use the stack component in combination with other layout components to easily [create customized layouts](../../foundations/layouts). ## Usage -The use of `` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../introduction/design-tokens#spacing). +The use of `` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../foundations/design-tokens#spacing). In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency. @@ -59,7 +59,7 @@ The following example shows how stacks can be nested within each other. You see items={[ { title: 'Building layouts', - href: '../../concepts/layouts', + href: '../../foundations/layouts', caption: 'Learn how to build layouts.', icon: ( + + + + + ), + }, + { + title: 'Layout', + href: '/components/layout/aside', + caption: 'Components for layouting the pages.', + icon: ( + + + + + + ), + }, + { + title: 'Form', + href: '/components/form/autocomplete', + caption: 'Components which should be used in forms.', + icon: ( + + + + + + ), + }, + { + title: 'Collection', + href: '/components/collection/accordion', + caption: 'Components which uses collection elements.', + icon: ( + + + + + + ), + }, + { + title: 'Navigation', + href: '/components/navigation/tabs', + caption: 'Components which are used for navigating.', + icon: ( + + + + + + ), + }, + { + title: 'Overlay', + href: '/components/overlay/dialog', + caption: 'Components which have an overlay.', + icon: ( + + + + + + ), + }, + { + title: 'Content', + href: '/components/content/badge', + caption: 'Components which are used for displaying content.', + icon: ( + + + + + + ), + }, + { + title: 'Formatters', + href: '/components/formatters/dateformat', + caption: 'Components which help formatting specific data.', + icon: ( + + + + + ), + }, + { + title: 'Hooks and Utils', + href: '/components/hooks-and-utils/cn', + caption: 'Hooks and helper functions to make you writing code easier.', + icon: ( + + + + + ), + }, + +]} /> diff --git a/docs/content/develop/release.mdx b/docs/content/develop/release.mdx deleted file mode 100644 index 4a0e63332b..0000000000 --- a/docs/content/develop/release.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Release -caption: How we release Marigold. ---- - -Releases are automated through changeset’s release action. In order to cut a new release go to Marigold’s open pull requests. If there are any changes to be published, there is a pull request called `“release: version packages”`. - -Inside the pull request you will find a list of all the changes and version bumps that will happen. After you review the pull request, approve it and then merge it. This will trigger the `Release` action which will [publish packages to npm](https://www.npmjs.com/search?q=%40marigold), send a notification to our Slack channel and deploy the documentation. - -## Deploying with Vercel - -In Vercel, the deploying process is straightforward and automated. Once you connect your Git repository to Vercel, it continuously monitors for changes. When you push new code or updates to the repository, Vercel automatically triggers a build process to compile and optimize your project. - -You can have a view on our Vercel Board right here [Link to Vercel](https://vercel.com/marigold) diff --git a/docs/content/develop/scripts.mdx b/docs/content/develop/scripts.mdx deleted file mode 100644 index 9551d3825f..0000000000 --- a/docs/content/develop/scripts.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Scripts -caption: List of all the scripts. ---- - -We use several scripts to make developing Marigold easier and more convenient. - -Run `$ pnpm + ), + }, + { + title: 'Elevation', + href: '/foundations/elevation', + caption: 'The foundational layers of the UI.', + icon: ( + + + + ), + }, + { + title: 'Layouts', + href: '/foundations/layouts', + caption: 'Learn how to build layouts.', + icon: ( + + + + ), + }, + { + title: 'Icons', + href: '/foundations/icons', + caption: 'A list of all available icons.', + icon: ( + + + + + ), + }, + { + title: 'Style Props', + href: '/foundations/style-props', + caption: 'Properties our components use.', + icon: ( + + + + ), + }, + { + title: 'Validation', + href: '/foundations/validation', + caption: 'Learn how to validate your forms.', + icon: ( + + + + + + ), + +}, + +]} +/> diff --git a/docs/content/concepts/style-props.mdx b/docs/content/foundations/style-props.mdx similarity index 93% rename from docs/content/concepts/style-props.mdx rename to docs/content/foundations/style-props.mdx index 2f524d3c7d..d1a018100a 100644 --- a/docs/content/concepts/style-props.mdx +++ b/docs/content/foundations/style-props.mdx @@ -1,14 +1,14 @@ --- title: Style Props caption: Style props are a set of properties that can be used to apply custom styling to a component. -order: 3 +order: 6 --- Style props are a concept used in component to enable easy and consistent styling of components in React applications. They provide a convenient way to apply CSS styling directly to components using JSX syntax. Instead of writing traditional CSS classes or inline styles, you can use these "style props" to define the appearance and layout of your components. This approach simplifies the styling process, promotes consistency, and makes it easier to manage the appearance of your components, especially when working with design systems or complex UIs. -For example `space` style prop which is used for `gap`. `space='4'` is equivalent to `gap: 16px` , [ you can check the values for `space` property](/introduction/design-tokens#spacing). +For example `space` style prop which is used for `gap`. `space='4'` is equivalent to `gap: 16px` , [ you can check the values for `space` property](/foundations/design-tokens#spacing). Here's an example using style props for `Stack` component : diff --git a/docs/content/concepts/validation-base.demo.tsx b/docs/content/foundations/validation/validation-base.demo.tsx similarity index 100% rename from docs/content/concepts/validation-base.demo.tsx rename to docs/content/foundations/validation/validation-base.demo.tsx diff --git a/docs/content/concepts/validation-custom-message.demo.tsx b/docs/content/foundations/validation/validation-custom-message.demo.tsx similarity index 100% rename from docs/content/concepts/validation-custom-message.demo.tsx rename to docs/content/foundations/validation/validation-custom-message.demo.tsx diff --git a/docs/content/concepts/validation-custom-validation.demo.tsx b/docs/content/foundations/validation/validation-custom-validation.demo.tsx similarity index 100% rename from docs/content/concepts/validation-custom-validation.demo.tsx rename to docs/content/foundations/validation/validation-custom-validation.demo.tsx diff --git a/docs/content/concepts/validation-realtime.demo.tsx b/docs/content/foundations/validation/validation-realtime.demo.tsx similarity index 100% rename from docs/content/concepts/validation-realtime.demo.tsx rename to docs/content/foundations/validation/validation-realtime.demo.tsx diff --git a/docs/content/concepts/validation-server-error.demo.tsx b/docs/content/foundations/validation/validation-server-error.demo.tsx similarity index 100% rename from docs/content/concepts/validation-server-error.demo.tsx rename to docs/content/foundations/validation/validation-server-error.demo.tsx diff --git a/docs/content/concepts/validation-zod.demo.tsx b/docs/content/foundations/validation/validation-zod.demo.tsx similarity index 100% rename from docs/content/concepts/validation-zod.demo.tsx rename to docs/content/foundations/validation/validation-zod.demo.tsx diff --git a/docs/content/concepts/validation.mdx b/docs/content/foundations/validation/validation.mdx similarity index 99% rename from docs/content/concepts/validation.mdx rename to docs/content/foundations/validation/validation.mdx index 4e158d78f6..c2df7f5d32 100644 --- a/docs/content/concepts/validation.mdx +++ b/docs/content/foundations/validation/validation.mdx @@ -1,7 +1,7 @@ --- title: Validation caption: Learn about how to use form validation with Marigold. -order: 6 +order: 7 --- HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback. diff --git a/docs/content/introduction/design-principles.mdx b/docs/content/getting-started/design-principles.mdx similarity index 99% rename from docs/content/introduction/design-principles.mdx rename to docs/content/getting-started/design-principles.mdx index d2b6bc4270..ce3a6a076e 100644 --- a/docs/content/introduction/design-principles.mdx +++ b/docs/content/getting-started/design-principles.mdx @@ -1,7 +1,7 @@ --- title: Design Principles caption: Guidelines for the creation of effective and user-friendly interfaces. -order: 10 +order: 4 --- Design principles guide the creation of cohesive, user-friendly software applications. They define and communicate key product characteristics to stakeholders, including clients, colleagues, and team members. By setting clear goals, design principles ensure that all decisions align, keeping the products in harmony and focused. diff --git a/docs/content/introduction/design-token-guidelines.mdx b/docs/content/getting-started/design-token-guidelines.mdx similarity index 98% rename from docs/content/introduction/design-token-guidelines.mdx rename to docs/content/getting-started/design-token-guidelines.mdx index 667a7787f7..1aa5e3ecd6 100644 --- a/docs/content/introduction/design-token-guidelines.mdx +++ b/docs/content/getting-started/design-token-guidelines.mdx @@ -1,7 +1,7 @@ --- title: Tokens Guidelines caption: Learn about the structure and application of our design tokens -order: 4 +order: 3 --- On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem. @@ -223,7 +223,7 @@ There are no semantic values assigned to these tokens, as their usage does not n Width tokens follow a 4-pixel grid convention, implying that their values are adjusted in increments of 4 pixels. Each token represents a multiplier of that grid. For example, a value of 2 would equate to 8 pixels. -You can explore all the available [spacing options](/introduction/design-tokens#spacing) on the design tokens page. +You can explore all the available [spacing options](/foundations/design-tokens#spacing) on the design tokens page. ### Radius @@ -233,4 +233,4 @@ Radius tokens are used to apply specific radius to an element. They are equivale There are no semantic values assigned to these tokens, as their usage does not necessitate them. This is because the primary focus of these tokens is on visual styling rather than conveying specific semantic meaning. Additionally, the tokens often serve as a direct representation of their intended visual outcome, eliminating the need for additional semantic values. -Radius tokens adhere to T-shirt size conventions, with designations such as lg (large), md (medium), and so on. You can explore them on the [design tokens page](/introduction/design-tokens#radius). +Radius tokens adhere to T-shirt size conventions, with designations such as lg (large), md (medium), and so on. You can explore them on the [design tokens page](/foundations/design-tokens#radius). diff --git a/docs/content/introduction/governance-principles.mdx b/docs/content/getting-started/governance-principles.mdx similarity index 97% rename from docs/content/introduction/governance-principles.mdx rename to docs/content/getting-started/governance-principles.mdx index 4639c708d3..3f55dbe708 100644 --- a/docs/content/introduction/governance-principles.mdx +++ b/docs/content/getting-started/governance-principles.mdx @@ -1,14 +1,14 @@ --- title: Governance Principles caption: Our governance values and principles on how we make decisions in the design system. -order: 7 +order: 6 --- “How does the design system team make decisions?” ”How does the design system team prioritise?” ”What can I use as a guide when I have a request for the design system team?” -We have been asked these questions many times by our stakeholders and they have motivated us to find ways to provide more transparency. So we worked on a framework which we and our stakeholders can use as a guide to become more confident in dealing with the design system.The process of how we handle changes and additions is written down in the page [Governance process](/introduction/governance-process). +We have been asked these questions many times by our stakeholders and they have motivated us to find ways to provide more transparency. So we worked on a framework which we and our stakeholders can use as a guide to become more confident in dealing with the design system.The process of how we handle changes and additions is written down in the page [Governance process](/getting-started/governance-process). Governance Values are meaningful key terms that help ensure a consistent and solid decision-making process. They serve as a compass during complex strategic phases, anchor us to our principles and ensure that we can evaluate and critique our work in a positive way. diff --git a/docs/content/introduction/governance-process.mdx b/docs/content/getting-started/governance-process.mdx similarity index 97% rename from docs/content/introduction/governance-process.mdx rename to docs/content/getting-started/governance-process.mdx index 62aca372ed..bbf6dcf79f 100644 --- a/docs/content/introduction/governance-process.mdx +++ b/docs/content/getting-started/governance-process.mdx @@ -1,12 +1,12 @@ --- title: Governance Process caption: Making changes and additions to Marigold. -order: 6 +order: 5 --- Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold. -This process ensures that any modifications to the design system are carefully evaluated to maintain consistency, stability, and user-friendliness. We prioritize updates that meet specific user needs, adhere to industry standards, and offer high reusability. Guided by our [Governance values and principles](/introduction/governance-principles), this approach helps uphold the quality and integrity of our design system. +This process ensures that any modifications to the design system are carefully evaluated to maintain consistency, stability, and user-friendliness. We prioritize updates that meet specific user needs, adhere to industry standards, and offer high reusability. Guided by our [Governance values and principles](/getting-started/governance-principles), this approach helps uphold the quality and integrity of our design system. If you ever asked yourself what we do with your feature requests or what you should do if we declined your request, you've come to the right place. @@ -17,7 +17,7 @@ We have created a flowchart, divided into 3 phases, that illustrates how incomin ug fixes aren't subject to the same rigorous evaluation process and are handled differently. To read more about how to report bugs go - [here](/introduction//get-in-touch/#report-bugs). + [here](/resources//get-in-touch/#report-bugs).
diff --git a/docs/content/introduction/getting-started.mdx b/docs/content/getting-started/installation.mdx similarity index 97% rename from docs/content/introduction/getting-started.mdx rename to docs/content/getting-started/installation.mdx index 106c41ef1b..017353f8e8 100644 --- a/docs/content/introduction/getting-started.mdx +++ b/docs/content/getting-started/installation.mdx @@ -1,7 +1,7 @@ --- -title: Getting Started +title: Installation caption: How to setup and get started with Marigold. -order: 1 +order: 2 --- To integrate Marigold into your React app, follow the steps outlined below. Marigold provides a wide range of pre-designed UI components. However, Marigold's components come with no styling by default. To ensure a perfect fit with your product's appearance, you must also install one of the predefined themes. @@ -253,4 +253,4 @@ import '@fontsource-variable/inter'; ## Next Steps -Now that you've bootstrapped your app, you can dive into the documentation to [explore the available components](/components/application/provider) in detail. Additionally, you can read about our principles to understand the driving factors behind our decisions and the constraints associated with our approach. +Now that you've bootstrapped your app, you can dive into the documentation to [explore the available components](/components/overview) in detail. Additionally, you can read about our principles to understand the driving factors behind our decisions and the constraints associated with our approach. diff --git a/docs/content/getting-started/overview.mdx b/docs/content/getting-started/overview.mdx new file mode 100644 index 0000000000..49db59ae9d --- /dev/null +++ b/docs/content/getting-started/overview.mdx @@ -0,0 +1,78 @@ +--- +title: Overview +caption: First steps into the design system. +order: 1 +--- + +Here you will find everything you need to know to get started, alongside installation instructions and concepts relating to the underlying principles, philosophies and approaches that guide the design system. + + + + + + ), + }, + + { + title: 'Design Principles', + href: '/getting-started/design-principles', + caption: 'Base for our design decisions.', + icon: ( + + + + ), + }, + { + title: 'Token Guidelines', + href: '/getting-started/design-token-guidelines', + caption: 'How our tokens are structured.', + icon: ( + + + + + + ), + }, + { + title: 'Governance Process', + href: '/getting-started/governance-process', + caption: 'Guide on how to make changes and additions in Marigold.', + icon: ( + + + + ), + }, + { + title: 'Governance Principles', + href: '/getting-started/governance-principles', + caption: 'Principles we follow for taking changes in Marigold.', + icon: ( + + + + + ), + +}, +]} /> diff --git a/docs/content/introduction/about.mdx b/docs/content/introduction/about.mdx deleted file mode 100644 index 1307cc5831..0000000000 --- a/docs/content/introduction/about.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: About -caption: Learn about the goals of Marigold and how it aims to help building user interfaces. -order: 2 ---- - -_Marigold_ is a React implementation of Reservix' design language. It aims to provides a robust and modular foundation for building digital products that are accessible and adaptive across screen sizes while delivering a consistent, delightful experience for all users. - -- **Building Blocks:** As a foundation for digital product development, Marigold offers a set of reusable components and guidance for teams to efficiently build high-quality and accessible user interfaces. -- **Cross-brand Theming**: Marigold comes with a set of ready-to-use themes for common use cases. However, it also provides a simple way to kickoff a new theme or customize a existing one. You can change colors, fonts, breakpoints and everything else you need. -- **Accessibility:** Marigold focuses heavily on enabling our products to deliver delightful experiences to all users, regardless of visual, hearing, motor or cognitive disabilities. -- **Guidelines:** While the styles and components can be assembled together in a variety of ways for different situations, the guidelines and standards of Marigold ensure cohesive experiences between products. - -If you want to dig deeper and learn how these capabilities are implemented, head over to the [concepts behind Marigold](/introduction/02-concepts). - -## What makes Marigold different? - -The goal of Marigold is to build an easy and compelling to use platform, regardless if you are a developer, designer or sales person. - -As much as possible, we want the written code to make sense to non-developers. This is why we are focused on the simplicity and composability of Marigold's API. We want to allow our teams to spend less time polishing mock ups and more time polishing the product. - -Marigold is maintained by a core team of designers and developers that are dedicated to developing and supporting an ever growing and evolving system that can only thrive with feedback from our teams and customers. - -## Support - -If you work at Reservix and have a design related or technical question, you can head over to our dedicated [slack channel](https://reservix.slack.com/archives/C02727BNZ3J). We try to respond to everyone as quickly as we can and we're always happy to help. diff --git a/docs/content/patterns/building-forms/building-forms.mdx b/docs/content/patterns/building-forms/building-forms.mdx index d2661dcccb..b2bac0a5fc 100644 --- a/docs/content/patterns/building-forms/building-forms.mdx +++ b/docs/content/patterns/building-forms/building-forms.mdx @@ -70,7 +70,7 @@ When the state or props change, React will automatically re-render the component ## Interactive Forms -Interactive forms can have several features like error handling, [validation](/concepts/validation), real-time feedback (password-strength indicator), logic (hide fields if a several field is checked etc.) or autocomplete. +Interactive forms can have several features like error handling, [validation](/foundations/validation), real-time feedback (password-strength indicator), logic (hide fields if a several field is checked etc.) or autocomplete. All these features help to make interactive fields more user friendly and more efficient. ### Error Handling diff --git a/docs/content/patterns/feedback-messages/feedback-messages.mdx b/docs/content/patterns/feedback-messages/feedback-messages.mdx index d8a1c59aec..960db1dd3f 100644 --- a/docs/content/patterns/feedback-messages/feedback-messages.mdx +++ b/docs/content/patterns/feedback-messages/feedback-messages.mdx @@ -45,7 +45,7 @@ You might send a system-generated message when: Don’t use messages when the information does not have a significant impact on the user’s current task or overall experience, or when the same information can be communicated in a less obtrusive way. For example: - To draw attention to a new element or piece of content, you can use a [badge](/components/content/badge). -- To draw attention to the status of just one UI element, you can use an [icon](/concepts/icon) with a [tooltip](/components/overlay/tooltip) for short, non-essential supporting information. (Tooltips have lower accessibility and usability across device types than messages, so do not use them for critical information.) +- To draw attention to the status of just one UI element, you can use an [icon](/foundations/icon) with a [tooltip](/components/overlay/tooltip) for short, non-essential supporting information. (Tooltips have lower accessibility and usability across device types than messages, so do not use them for critical information.) - Messages that describe permanent, non-resolvable aspects or features of a page may be better communicated through headings, description text, or information architecture. ## Message Statuses @@ -159,7 +159,7 @@ It is used to provide feedback about a user’s input, typically as part of a fo -A custom-written validation message is not always required. Browsers come with their own default validation error messages that can be used in place of a customized one. See more on the [Validation](/concepts/validation) page. +A custom-written validation message is not always required. Browsers come with their own default validation error messages that can be used in place of a customized one. See more on the [Validation](/foundations/validation) page. ### Section Message @@ -230,4 +230,4 @@ A [section message](/components/section-message) is a block-level component that - [Dialog](/components/overlay/dialog) - [SectionMessage](/components/content/section-message) -- [Validation](/concepts/validation) +- [Validation](/foundations/validation) diff --git a/docs/content/recipes/bookings-form.demo.tsx b/docs/content/recipes/form-recipes/bookings-form.demo.tsx similarity index 100% rename from docs/content/recipes/bookings-form.demo.tsx rename to docs/content/recipes/form-recipes/bookings-form.demo.tsx diff --git a/docs/content/recipes/form-recipes.mdx b/docs/content/recipes/form-recipes/form-recipes.mdx similarity index 100% rename from docs/content/recipes/form-recipes.mdx rename to docs/content/recipes/form-recipes/form-recipes.mdx diff --git a/docs/content/recipes/organization-search.demo.tsx b/docs/content/recipes/form-recipes/organization-search.demo.tsx similarity index 100% rename from docs/content/recipes/organization-search.demo.tsx rename to docs/content/recipes/form-recipes/organization-search.demo.tsx diff --git a/docs/content/recipes/multiselect-basic.demo.tsx b/docs/content/recipes/multiselect-recipes/multiselect-basic.demo.tsx similarity index 100% rename from docs/content/recipes/multiselect-basic.demo.tsx rename to docs/content/recipes/multiselect-recipes/multiselect-basic.demo.tsx diff --git a/docs/content/recipes/multiselect-recipe.mdx b/docs/content/recipes/multiselect-recipes/multiselect-recipe.mdx similarity index 100% rename from docs/content/recipes/multiselect-recipe.mdx rename to docs/content/recipes/multiselect-recipes/multiselect-recipe.mdx diff --git a/docs/content/recipes/NavItem.tsx b/docs/content/recipes/navigation-recipes/NavItem.tsx similarity index 100% rename from docs/content/recipes/NavItem.tsx rename to docs/content/recipes/navigation-recipes/NavItem.tsx diff --git a/docs/content/recipes/ReservixLogo.tsx b/docs/content/recipes/navigation-recipes/ReservixLogo.tsx similarity index 100% rename from docs/content/recipes/ReservixLogo.tsx rename to docs/content/recipes/navigation-recipes/ReservixLogo.tsx diff --git a/docs/content/recipes/navigation-recipes.mdx b/docs/content/recipes/navigation-recipes/navigation-recipes.mdx similarity index 100% rename from docs/content/recipes/navigation-recipes.mdx rename to docs/content/recipes/navigation-recipes/navigation-recipes.mdx diff --git a/docs/content/recipes/topnavigation.demo.tsx b/docs/content/recipes/navigation-recipes/topnavigation.demo.tsx similarity index 100% rename from docs/content/recipes/topnavigation.demo.tsx rename to docs/content/recipes/navigation-recipes/topnavigation.demo.tsx diff --git a/docs/content/recipes/overview.mdx b/docs/content/recipes/overview.mdx new file mode 100644 index 0000000000..09c305f819 --- /dev/null +++ b/docs/content/recipes/overview.mdx @@ -0,0 +1,97 @@ +--- +title: Overview +caption: Copy pastable combinations of components. +order: 1 +--- + +Recipes are specific combinations of design system components, tailored for specific use cases within a product. These compositions ensure consistency and cohesion across the product experience, while addressing scenarios that require more flexibility than a standard, agnostic design system component offers. + +If you've created or discovered a useful recipe, feel free to share it with us. We'd love to review and include it in our collection to benefit the broader community. + + + + + + ), + }, + { + title: 'Multiselect', + href: '/recipes/multiselect-recipes', + caption: 'A Multiselect component build with Tags and Combobox.', + icon: ( + + + + ), + }, + { + title: 'Core Table', + href: '/recipes/table-recipes', + caption: 'A typical core table.', + icon: ( + + + + ), + }, + { + title: 'Navigation', + href: '/recipes/navigation-recipes', + caption: 'The navigation from b2b products.', + icon: ( + + + + ), + }, + ]} +/> diff --git a/docs/content/recipes/core-table-print.demo.tsx b/docs/content/recipes/table-recipes/core-table-print.demo.tsx similarity index 100% rename from docs/content/recipes/core-table-print.demo.tsx rename to docs/content/recipes/table-recipes/core-table-print.demo.tsx diff --git a/docs/content/recipes/table-recipes.mdx b/docs/content/recipes/table-recipes/table-recipes.mdx similarity index 100% rename from docs/content/recipes/table-recipes.mdx rename to docs/content/recipes/table-recipes/table-recipes.mdx diff --git a/docs/content/develop/component-guidelines.mdx b/docs/content/resources/component-guidelines.mdx similarity index 98% rename from docs/content/develop/component-guidelines.mdx rename to docs/content/resources/component-guidelines.mdx index 579a2163ed..471c723173 100644 --- a/docs/content/develop/component-guidelines.mdx +++ b/docs/content/resources/component-guidelines.mdx @@ -1,6 +1,7 @@ --- title: Development Guidelines caption: Guidelines for Developers on how to implement Marigold Components. +order: 4 --- ## Definitions @@ -287,7 +288,7 @@ export const Select: ThemeComponent<'Select'> = { ### Structure of Color Design Tokens -- [Color design tokens](../introduction/design-tokens) need to have a semantic name that reflects their use case. (e.g., `bg-disabled` for disabled backgrounds) +- [Color design tokens](../foundations/design-tokens) need to have a semantic name that reflects their use case. (e.g., `bg-disabled` for disabled backgrounds) - Every color token needs to have a description when and where to use it. - Prevent using the color pallete directly (e.g., instead of using `bg-red-700` use `bg-error`) @@ -316,7 +317,7 @@ Example of structures for surface colors: ### Usage and Structure of Style Props -- [Style props](../concepts/style-props) are using tokens from TailwindCSS by default. +- [Style props](../foundations/style-props) are using tokens from TailwindCSS by default. - Every layout component should have style props to make its layout adatable. - UI Components should have style props when there it is possible to configure properties related to layouting the component (e.g., text alignment, spacing, …). - Values of the style props have to correspond to a scale in TailwindCSS (e.g., `width={full}` will be translated to the class `w-full` ). diff --git a/docs/content/introduction/faq.mdx b/docs/content/resources/faq.mdx similarity index 89% rename from docs/content/introduction/faq.mdx rename to docs/content/resources/faq.mdx index 4e1c104ab1..ebb7e0982b 100644 --- a/docs/content/introduction/faq.mdx +++ b/docs/content/resources/faq.mdx @@ -1,7 +1,7 @@ --- title: FAQ caption: This pages aims to help with the most common questions and inquiries. -order: 8 +order: 3 --- ## What is a design system? @@ -25,9 +25,7 @@ That said, one of the primary benefits of a design system is the ability to quic ## Who decide which component is implemented? -We work strongly together with the Reservix UX/UI Team. If the component is in more than in one product the designers will research its use cases, after that we all will discussing the behaviour, the look and feel. -Also we will looking up the technical possibilities - if it all fits the component will be implemented. -The same applies to the improvement of a component. +We worked on a process of how changes and additions are made to the Design System, you can have a look on our [Governance Process](../getting-started/governance-process) and read through it. ## Why should I use this Design System? @@ -35,8 +33,12 @@ The goal of Marigold is to build an easy and compelling to use platform, regardl The purpose of this Design System is to create a set of guidelines and components that are scalable and reusable, so that designers and developers can efficiently and comfortably develop Reservix products. +All new products have to be build with the Design System. + ## Can I contribute? If you work at Reservix and have a design related or technical question, you can head over to our dedicated [slack channel](https://reservix.slack.com/archives/C02727BNZ3J). We try to respond to everyone as quickly as we can and we're always happy to help. +## I found a bug, how can I contact you? + If you have a bug report or feature request you can visit our [github](https://github.com/marigold-ui/marigold) and write an issue. We have templates for feature requests, bugs and component updates. diff --git a/docs/content/introduction/get-in-touch.mdx b/docs/content/resources/get-in-touch.mdx similarity index 99% rename from docs/content/introduction/get-in-touch.mdx rename to docs/content/resources/get-in-touch.mdx index d1c56e21be..f0c7de5d33 100644 --- a/docs/content/introduction/get-in-touch.mdx +++ b/docs/content/resources/get-in-touch.mdx @@ -1,7 +1,7 @@ --- title: Get in touch caption: Here you can find out how to reach us, report bugs and ask for support! -order: 5 +order: 2 --- We receive many questions and inquiries regarding Marigold and our design system,and we're here to help. Whether you're stuck or seeking information, our aim is to support you every step of the way. diff --git a/docs/content/resources/overview.mdx b/docs/content/resources/overview.mdx new file mode 100644 index 0000000000..874886c3ee --- /dev/null +++ b/docs/content/resources/overview.mdx @@ -0,0 +1,43 @@ +--- +title: Overview +caption: Everything helpful. +order: 1 +--- + +Here you can find everything for support, contact info, FAQs, and internal guides. Whether you need help or answers to common questions, this section has everything to keep you informed and supported. + + + + + ), + }, + { + title: 'FAQ', + href: '/resources/faq', + caption: 'Most asked questions to the design sytem.', + icon: ( + + + + + ), + }, + { + title: 'Development Guidelines', + href: '/resources/component-guidelines', + caption: 'Internal guidelines on how to build components for the design dystem.', + icon: ( + + + + ), + }, + +]} /> diff --git a/docs/lib/config.ts b/docs/lib/config.ts index b5bb867263..2b2a2d732a 100644 --- a/docs/lib/config.ts +++ b/docs/lib/config.ts @@ -11,12 +11,12 @@ export const siteConfig = { defaultTheme: 'core', navigation: [ { - name: 'Introduction', - slug: 'introduction', + name: 'Getting Started', + slug: 'getting-started', }, { - name: 'Concepts', - slug: 'concepts', + name: 'Foundations', + slug: 'foundations', }, { name: 'Components', @@ -69,8 +69,8 @@ export const siteConfig = { slug: 'recipes', }, { - name: 'Develop', - slug: 'develop', + name: 'Resources', + slug: 'resources', }, ], } as const; diff --git a/docs/next.config.js b/docs/next.config.js index 10548fb96d..b027e8f7b1 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -25,12 +25,7 @@ const nextConfig = { return [ { source: '/', - destination: '/introduction/getting-started', - permanent: true, - }, - { - source: '/components', - destination: '/components/provider', + destination: '/getting-started/overview', permanent: true, }, ]; diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx index fc0773c8f9..158696f859 100644 --- a/packages/components/src/Card/Card.tsx +++ b/packages/components/src/Card/Card.tsx @@ -36,7 +36,7 @@ export interface CardProps size?: string; /** - * Padding of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Padding of the component. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ p?: PaddingSpaceProp['space']; @@ -46,7 +46,7 @@ export interface CardProps px?: PaddingSpacePropX['spaceX']; /** - * Padding vertical (top and bottom) of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Padding vertical (top and bottom) of the component. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ py?: PaddingSpacePropY['spaceY']; } diff --git a/packages/components/src/Inset/Inset.tsx b/packages/components/src/Inset/Inset.tsx index c1b456571b..db531d1207 100644 --- a/packages/components/src/Inset/Inset.tsx +++ b/packages/components/src/Inset/Inset.tsx @@ -17,18 +17,18 @@ export type InsetProps = children: ReactNode; space?: never; /** - * Horizontal alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Horizontal alignment for the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ spaceX?: PaddingSpacePropX['spaceX']; /** - * Vertical alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Vertical alignment for the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ spaceY?: PaddingSpacePropY['spaceY']; } | { children: ReactNode; /** - * The space between the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ space?: PaddingSpaceProp['space']; spaceX?: never; diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx index 3dd8a0c419..a7ecf22b56 100644 --- a/packages/system/src/style-props.tsx +++ b/packages/system/src/style-props.tsx @@ -610,14 +610,14 @@ export type FontStyleProp = { export type FontWeightProp = { /** - * Set the font weight for the text element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#typography). + * Set the font weight for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography). */ weight?: keyof typeof fontWeight; }; export type FontSizeProp = { /** - * Set the font size for the text element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#typography). + * Set the font size for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography). */ fontSize?: keyof typeof textSize; }; @@ -631,7 +631,7 @@ export type GridColsAlignProp = { export type GapSpaceProp = { /** - * The space between the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ space?: keyof typeof gapSpace; }; @@ -652,49 +652,49 @@ export type ObjectPositionProp = { export type PaddingSpaceProp = { /** - * Set the padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ space?: keyof typeof paddingSpace; }; export type PaddingSpacePropX = { /** - * Set the horizontal padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the horizontal padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ spaceX?: keyof typeof paddingSpaceX; }; export type PaddingSpacePropY = { /** - * Set the vertical padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the vertical padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ spaceY?: keyof typeof paddingSpaceY; }; export type PaddingRightProp = { /** - * Set the right padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the right padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ pr?: keyof typeof paddingRight; }; export type PaddingLeftProp = { /** - * Set the left padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the left padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ pl?: keyof typeof paddingLeft; }; export type PaddingTopProp = { /** - * Set the top padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the top padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ pt?: keyof typeof paddingTop; }; export type PaddingBottomProp = { /** - * Set the bottom padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing). + * Set the bottom padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing). */ pb?: keyof typeof paddingBottom; };