wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-01 23:34:14 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
talk/CSS_VARIABLES.md
T
Nick Funk 6966bb8d12 Replace positive/negative naming for success/error (#3058) 
CORL-1200
2020-07-31 15:40:48 +00:00

273 lines
7.5 KiB
Markdown
Raw Permalink Blame History

# CSS Variables
Coral defines a set of CSS Variables that you can use to broadly customize the
look and feel of your comment stream. For example you can easily redefine the colors
or fonts that are being used.
To change the CSS Variables, use the following example in your custom CSS file:
```
:root {
--font-family-primary: 'Verdana';
--round-corners: 0px;
}
```
The following list contains the CSS Variables that can be customized.
**Info**: *Before 6.3.0 Coral uses a different set of CSS Variables. If you are still using
the old CSS Variables, please upgrade. Currently we have a compatibility layer to bridge the old CSS Variables to the new ones. This mechanism will be removed in the future.*
<!-- START docs:css-variables -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN npm run docs:css-variables -->
### Index
- <a href="#variables">Variables</a>
- <a href="#palette">palette</a>
- <a href="#palette-primary">palette-primary</a>
- <a href="#palette-background">palette-background</a>
- <a href="#palette-text">palette-text</a>
- <a href="#palette-grey">palette-grey</a>
- <a href="#palette-error">palette-error</a>
- <a href="#palette-success">palette-success</a>
- <a href="#palette-warning">palette-warning</a>
- <a href="#font-family">font-family</a>
- <a href="#font-weight">font-weight</a>
- <a href="#font-weight-primary">font-weight-primary</a>
- <a href="#font-weight-secondary">font-weight-secondary</a>
- <a href="#font-size">font-size</a>
- <a href="#shadow">shadow</a>
- <a href="#spacing">spacing</a>
- <a href="#mini-unit">mini-unit</a>
### Variables
Use this to remove round corners or make them more round.
`--round-corners: 3px;`
### palette
`--palette-divider: rgba(0, 0, 0, 0.12);`
#### palette-primary
Color palette that is used as the primary color.
`--palette-primary-100: #EBF6FF; /* Before 6.3.0: --palette-primary-lightest */`
`--palette-primary-200: #B7DCFF; /* Before 6.3.0: --palette-primary-lighter */`
`--palette-primary-300: #61B3FF; /* Before 6.3.0: --palette-primary-light */`
`--palette-primary-400: #2897FF; /* Before 6.3.0: --palette-primary-main */`
`--palette-primary-500: #0070D9; /* Before 6.3.0: --palette-primary-main */`
`--palette-primary-600: #0062BE; /* Before 6.3.0: --palette-primary-main */`
`--palette-primary-700: #005AAE; /* Before 6.3.0: --palette-primary-main */`
`--palette-primary-800: #004688; /* Before 6.3.0: --palette-primary-dark */`
`--palette-primary-900: #00386D; /* Before 6.3.0: --palette-primary-darkest */`
#### palette-background
Color palette that is used for background colors.
`--palette-background-body: #FFFFFF;`
`--palette-background-popover: #FFFFFF;`
`--palette-background-tooltip: #65696B;`
`--palette-background-input: #FFFFFF;`
`--palette-background-input-disabled: #EFEFEF;`
#### palette-text
Color palette that is used for text.
`--palette-text-000: #FFFFFF; /* Before 6.3.0: --palette-text-light */`
`--palette-text-100: #65696B; /* Before 6.3.0: --palette-text-secondary */`
`--palette-text-500: #353F44; /* Before 6.3.0: --palette-text-primary */`
`--palette-text-900: #14171A; /* Before 6.3.0: --palette-text-dark */`
`--palette-text-placeholder: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */`
`--palette-text-input-disabled: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */`
#### palette-grey
Color palette that is used for grey shades.
`--palette-grey-100: #F4F7F7; /* Before 6.3.0: --palette-grey-lightest */`
`--palette-grey-200: #EAEFF0; /* Before 6.3.0: --palette-grey-lightest */`
`--palette-grey-300: #CBD1D2; /* Before 6.3.0: --palette-grey-lighter */`
`--palette-grey-400: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */`
`--palette-grey-500: #65696B; /* Before 6.3.0: --palette-grey-main */`
`--palette-grey-600: #49545C; /* Before 6.3.0: --palette-grey-dark */`
`--palette-grey-700: #32404D; /* Before 6.3.0: --palette-grey-darkest */`
`--palette-grey-800: #202E3E; /* Before 6.3.0: --palette-grey-darkest */`
`--palette-grey-900: #132033; /* Before 6.3.0: --palette-grey-darkest */`
#### palette-error
Color palette that is used for indicating something is error red.
`--palette-error-100: #FCE5D9; /* Before 6.3.0: --palette-error-lightest */`
`--palette-error-200: #FAC6B4; /* Before 6.3.0: --palette-error-lighter */`
`--palette-error-300: #F29D8B; /* Before 6.3.0: --palette-error-lighter */`
`--palette-error-400: #E5766C; /* Before 6.3.0: --palette-error-light */`
`--palette-error-500: #D53F3F; /* Before 6.3.0: --palette-error-main */`
`--palette-error-600: #B72E39; /* Before 6.3.0: --palette-error-main */`
`--palette-error-700: #991F34; /* Before 6.3.0: --palette-error-dark */`
`--palette-error-800: #7B142E; /* Before 6.3.0: --palette-error-darkest */`
`--palette-error-900: #660C2B; /* Before 6.3.0: --palette-error-darkest */`
#### palette-success
Color palette that is used for indicating something is success green.
`--palette-success-100: #D8F9D5; /* Before 6.3.0: --palette-success-lightest */`
`--palette-success-200: #ADF3AD; /* Before 6.3.0: --palette-success-lighter */`
`--palette-success-300: #7CDB85; /* Before 6.3.0: --palette-success-lighter */`
`--palette-success-400: #54B767; /* Before 6.3.0: --palette-success-light */`
`--palette-success-500: #268742; /* Before 6.3.0: --palette-success-main */`
`--palette-success-600: #1B743D; /* Before 6.3.0: --palette-success-main */`
`--palette-success-700: #136138; /* Before 6.3.0: --palette-success-dark */`
`--palette-success-800: #0C4E32; /* Before 6.3.0: --palette-success-darkest */`
`--palette-success-900: #07402E; /* Before 6.3.0: --palette-success-darkest */`
#### palette-warning
Color palette that is used for indicating a warning and is usually yellow.
`--palette-warning-100: #FFFACC; /* Before 6.3.0: --palette-warning-main */`
`--palette-warning-500: #FFE91F; /* Before 6.3.0: --palette-warning-main */`
### font-family
Different font families currently in use.
`--font-family-primary: "Open Sans"; /* Before 6.3.0: --font-family-sans-serif */`
`--font-family-secondary: "Nunito"; /* Before 6.3.0: --font-family-serif */`
### font-weight
Different font weights with matching values for the fonts.
#### font-weight-primary
`--font-weight-primary-bold: 700; /* Before 6.3.0: --font-weight-bold */`
`--font-weight-primary-semi-bold: 600; /* Before 6.3.0: --font-weight-medium */`
`--font-weight-primary-regular: 300; /* Before 6.3.0: --font-weight-light */`
#### font-weight-secondary
`--font-weight-secondary-bold: 700; /* Before 6.3.0: --font-weight-bold */`
`--font-weight-secondary-regular: 300; /* Before 6.3.0: --font-weight-light */`
### font-size
`--font-size-1: 0.75rem;`
`--font-size-2: 0.875rem;`
`--font-size-3: 1rem;`
`--font-size-4: 1.125rem;`
`--font-size-5: 1.25rem;`
`--font-size-6: 1.5rem;`
`--font-size-7: 1.75rem;`
`--font-size-8: 2rem;`
`--font-size-9: 2.25rem;`
`--font-size-icon-xl: 2.25rem;`
`--font-size-icon-lg: 1.5rem;`
`--font-size-icon-md: 1.125rem;`
`--font-size-icon-sm: 0.875rem;`
`--font-size-icon-xs: 0.75rem;`
### shadow
Different shadows that are currently used in Coral.
`--shadow-popover: 1px 0px 4px rgba(0, 0, 0, 0.25); /* Before 6.3.0: --elevation-main */`
### spacing
Different spacing units currenty used in Coral.
`--spacing-1: 4px;`
`--spacing-2: 8px;`
`--spacing-3: 12px;`
`--spacing-4: 16px;`
`--spacing-5: 24px;`
`--spacing-6: 32px;`
`--spacing-7: 44px;`
`--spacing-8: 60px;`
`--spacing-9: 84px;`
### mini-unit
Grid units for smaller and larger screens.
`--mini-unit-small: 4;`
`--mini-unit-large: 8;`
<!-- END docs:css-variables -->
Reference in New Issue View Git Blame Copy Permalink