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.
Use this to remove round corners or make them more round.
--round-corners: 3px;
--palette-divider: rgba(0, 0, 0, 0.12);
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 */
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;
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 */
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 */
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 */
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 */
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 */
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 */
Different font weights with matching values for the fonts.
--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-bold: 700; /* Before 6.3.0: --font-weight-bold */
--font-weight-secondary-regular: 300; /* Before 6.3.0: --font-weight-light */
--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;
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 */
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;
Grid units for smaller and larger screens.
--mini-unit-small: 4;
--mini-unit-large: 8;