mirror of https://github.com/wassname/talk.git synced 2026-06-27 17:50:42 +08:00

Files

T

Nick Funk 5c863f1307 [CORL-1155] Fix theming for rebranded stream/admin (#3012 )

* Repair theming and CSS variables for the rebrand

This separates the CSS variables into three sections
for admin, stream, as well as a shared set between
them.

This also adds injection of the raw colours from the
design team into post css variables.

Lastly, this re-maps the existing theme variables to
a new consolidated set with fallbacks for compatibility.

Since this is a singular commit from various WIP commits,
I am crediting @cvle as well as myself for this work.

Thank you all who helped make this rebrand with theming
possible!

CORL-1155

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

* Convert old css variables in CallOut

* Rename postive/negative => success/error

CORL-1155

* Change some CSS Variable names

* fix TextField/PasswordField colors

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

2020-07-15 18:20:25 +00:00

8.0 KiB

Raw 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.

Index

Variables

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 negative and is usually 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 positive and is usually 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-sans-bold */

--font-weight-primary-semi-bold: 600; /* Before 6.3.0: --font-weight-sans-medium */

--font-weight-primary-regular: 300; /* Before 6.3.0: --font-weight-sans-regular */

font-weight-secondary

--font-weight-secondary-bold: 700; /* Before 6.3.0: --font-weight-serif-bold */

--font-weight-secondary-regular: 300; /* Before 6.3.0: --font-weight-serif-regular */

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;

line-height

--line-height-comment-body: 1.45rem;

--line-height-field-description: 1.3rem;

--line-height-1: 0.75rem;

--line-height-2: 0.875rem;

--line-height-3: 1rem;

--line-height-4: 1.125rem;

--line-height-5: 1.25rem;

--line-height-6: 1.5rem;

--line-height-7: 1.75rem;

--line-height-8: 2rem;

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;

8.0 KiB Raw Blame History