diff --git a/apps/tup-ui/src/styles/README.md b/apps/tup-ui/src/styles/README.md index a16fe75cf..456e76694 100644 --- a/apps/tup-ui/src/styles/README.md +++ b/apps/tup-ui/src/styles/README.md @@ -7,15 +7,17 @@ - [Browse Core Styles](#browse-core-styles) - [Use Core Styles](#use-core-styles) - [Create Core Styles](#create-core-styles) -- [Use Global Project Styles](#use-global-project-styles) -- [Create Global Project Styles](#create-global-project-styles) +- [Use Project Styles](#use-project-styles) +- [Create Project Styles](#create-project-styles) +- [Use Global Styles](#use-global-styles) +- [Create Global Styles](#create-global-styles) - [Limit Use of Bootstrap](#limit-use-of-bootstrap) ## How to Style 1. **Avoid** Global Project styles. 2. Do use and create [Component Styles](#component-styles). -3. Do use and create [Core Styles]. +3. Do use and create [Core Styles] or [Project Styles]. 4. Do follow our [CSS Style Guide]. ## Component Styles @@ -108,31 +110,68 @@ selector { ## Create [Core Styles] -1. Clone [Core Styles]. +1. Clone/Fork [Core Styles]. 2. Develop component. -3. Request review.\* +3. Request review. -\* You might need to request repository access. +## Use Project Styles -## Use Global Project Styles +For new patterns not mature enough for [Core Styles], create it for one project. -### In `main.css`, Import from Global Project Styles +### In Component Styles, Import from Project Styles -**`/main.global.css`** +**`.../SomeComponent.module.css`** + +```css +@import url('../../styles/(.../)something-for-just-one-project-not-global.css'); +``` + +## Create Project Styles + +### In Project Styles, Append to [Core Styles] + +**`/libs/*/styles/(.../)some-project-stylesheet.css`** + +```css +:root { + /* To overwrite @tacc/core-styles/.../settings/color.css */ + --some-project-prop: 'value'; +} +``` + +### In Project Styles, Extend from [Core Styles] + +**`/libs/*/styles/(.../)some-project-stylesheet.css`** ```css -@import url('/styles/(.../)something-not-already-available-globally.css'); +@import url('@tacc/core-styles/.../tools/x-truncate.css'); + +selector { + @extend .x-truncate--one-line; + + project: 'styles'; +} +``` + +## Use Global Styles + +### In `main.css`, Import from Global Styles + +**`/main.global.css`\*** + +```css +@import url('./styles/(.../)something-not-already-available-globally.css'); ``` \* A `main.css` might not exist (because no global project styles exist). -## Create Global Project Styles +## Create Global Styles If you need global styles, then evaluate these options. ### In Global Styles, Append to [Core Styles] -**`/styles/(.../)some-global-stylesheet.css`** +**`/apps/tup-ui/styles/(.../)some-global-stylesheet.css`** ```css :root { @@ -141,9 +180,9 @@ If you need global styles, then evaluate these options. } ``` -### In Global Project Styles, Extend from [Core Styles] +### In Global Styles, Extend from [Core Styles] -**`/styles/(.../)some-global-stylesheet.css`** +**`/apps/tup-ui/styles/(.../)some-global-stylesheet.css`** ```css @import url('@tacc/core-styles/.../tools/x-truncate.css'); @@ -151,11 +190,11 @@ If you need global styles, then evaluate these options. selector { @extend .x-truncate--one-line; - project: 'styles'; + global: 'styles'; } ``` -### In Global Project Styles, Import from [Core Styles] +### In Global Styles, Import from [Core Styles] **`/main.global.css`**