Skip to content

Commit

Permalink
fix: content updated
Browse files Browse the repository at this point in the history
  • Loading branch information
Suraj authored and Suraj committed Oct 27, 2023
1 parent b38324e commit 6951493
Show file tree
Hide file tree
Showing 6 changed files with 7 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { AppProvider, CodePreview } from '@gluestack/design-system';

<Meta title="Core Concepts/Themed Library" />

`@gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.

For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution.

Expand All @@ -26,7 +26,7 @@ For users looking for a seamless integration experience, we offer the `@gluestac

We will try and understand how the components exported from `@gluestack-ui/themed` are created. Initially, we generate unstyled components using the [gluestack-style](https://gluestack.io/style) styling engine. This allows us to customize styles, use theme tokens, provide styling for dark and light modes, and respond to different screen sizes using `@gluestack-style/react`. The specifics like themes, tokens, breakpoints and component themes are defined in a configuration file.

After that, we enhance the components with accessibility features, interactivity, and more using `@gluestack-ui`. This library provides creator functions that take our components and transform them into fully functional components. Once our components are both user-friendly and interactive, we bundle them together into a new package called `@gluestack-ui/themed`, which we can then easily use in our project. This package is also themeable, and we can create new themes and use them in our project by passing it to `GluestackUIProvider`. `@gluestack-ui/config` provides a default theme config which can be passed to `GluestackUIProvider`. You can view default theme config [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/config). To see all the components with the default theme, please visit [here](https://gluestack.io/ui/docs/overview/all-components).
After that, we enhance the components with accessibility features, interactivity, and more using `gluestack-ui`. This library provides creator functions that take our components and transform them into fully functional components. Once our components are both user-friendly and interactive, we bundle them together into a new package called `@gluestack-ui/themed`, which we can then easily use in our project. This package is also themeable, and we can create new themes and use them in our project by passing it to `GluestackUIProvider`. `@gluestack-ui/config` provides a default theme config which can be passed to `GluestackUIProvider`. You can view default theme config [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/config). To see all the components with the default theme, please visit [here](https://gluestack.io/ui/docs/overview/all-components).

<img src="/images/themed.png" />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { createButton } from '@gluestack-ui/button';

## Introduction

`@gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.

gluestack-ui provides a collection of unstyled components that can be styled according to a specific theme or design language. These components are reusable, consistent, interactive, and are accessible on the web, iOS, and Android.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ npm i @gluestack-ui/themed @gluestack-style/react [email protected]
### Step 1.5: Default Themed.(Optional)
`@gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
```bash
yarn add @gluestack-ui/config@latest
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ npm i @gluestack-ui/themed @gluestack-style/react @gluestack/ui-next-adapter rea
### Step 1.5: Default Themed.(Optional)
`@gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
```bash
yarn add @gluestack-ui/config@latest
Expand Down
2 changes: 1 addition & 1 deletion example/storybook/src/guides/install-rn/index.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ npm i @gluestack-ui/themed @gluestack-style/react [email protected]

### Step 1.5: Default Themed.(Optional)

`@gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.

```bash
yarn add @gluestack-ui/config@latest
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

<Meta title="Theme Configuration/Customizing Theme" />

`@gluestack-ui` UI library is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution.
`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution.

## Customizing Tokens

Expand Down

0 comments on commit 6951493

Please sign in to comment.