diff --git a/README.md b/README.md index 4f0d2ae..b3de987 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,51 @@ You need a couple of packages and settings to integrate this package This package contains a `base.css` file which has all the base css rules required to run. This css file must be imported in your base project, and it can be update in a separate `.css` file. +```css +@import "../path/to/twui/base.css"; + +@theme inline { + --breakpoint-xs: 350px; + + --color-background-light: #ffffff; + --color-foreground-light: #171717; + --color-background-dark: #0c0e11; + --color-foreground-dark: #ededed; + + --color-primary: #e2b433; + --color-primary-hover: #9e7503; + --color-primary-outline: #29292b; + --color-primary-text: #29292b; + --color-primary-dark: #e2b433; + --color-primary-dark-hover: #f7cc59; + --color-primary-dark-outline: #e2b433; + --color-primary-dark-text: #f7cc59; + --color-secondary: #128b63; + --color-secondary-hover: #128b63; + --color-secondary-outline: #128b63; + --color-secondary-text: #128b63; + --color-secondary-dark: #128b63; + --color-secondary-dark-hover: #128b63; + --color-secondary-dark-outline: #128b63; + --color-secondary-dark-text: #128b63; + --color-accent: #000000; + --color-accent-hover: #dddddd; + --color-accent-outline: #dddddd; + --color-accent-text: #dddddd; + --color-accent-dark: #000000; + --color-accent-dark-hover: #dddddd; + --color-accent-dark-outline: #dddddd; + --color-accent-dark-text: #dddddd; + + --color-price: #16946a; + --color-price-dark: #77ceb1; +} + +.styles { + @apply text-sm; +} +``` + ### Install packages ```sh