mirror of
https://github.com/wassname/talk.git
synced 2026-06-27 15:17:24 +08:00
[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>
This commit is contained in:
Nick Funk
@@ -0,0 +1,295 @@
|
||||
|
||||
# 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="#line-height">line-height</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 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;`
|
||||
|
||||
<!-- END docs:css-variables -->
|
||||
+3
-3
@@ -42,8 +42,8 @@ exports.onCreateWebpackConfig = ({
|
||||
|
||||
if (stage === "develop") {
|
||||
config.entry.commons.push(
|
||||
// Add our global css variables file.
|
||||
`${srcDir}/core/client/ui/theme/variables.css.ts`
|
||||
// Add our stream css variables file.
|
||||
`${srcDir}/core/client/ui/theme/stream.css.ts`
|
||||
);
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ exports.onCreateWebpackConfig = ({
|
||||
if (stage === "build-javascript") {
|
||||
config.entry.app = [
|
||||
config.entry.app,
|
||||
`${appDir}/core/client/ui/theme/variables.css.ts`,
|
||||
`${appDir}/core/client/ui/theme/stream.css.ts`,
|
||||
];
|
||||
}
|
||||
*/
|
||||
|
||||
Generated
+56
-56
@@ -22020,28 +22020,28 @@
|
||||
"dependencies": {
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
|
||||
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"are-we-there-yet": {
|
||||
"version": "1.1.5",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
|
||||
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22052,14 +22052,14 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22077,35 +22077,35 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
|
||||
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
|
||||
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22115,21 +22115,21 @@
|
||||
},
|
||||
"deep-extend": {
|
||||
"version": "0.6.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
|
||||
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"delegates": {
|
||||
"version": "1.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
@@ -22159,7 +22159,7 @@
|
||||
},
|
||||
"gauge": {
|
||||
"version": "2.7.4",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
|
||||
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22176,7 +22176,7 @@
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.1.3",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
|
||||
"integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22191,14 +22191,14 @@
|
||||
},
|
||||
"has-unicode": {
|
||||
"version": "2.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
|
||||
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22208,7 +22208,7 @@
|
||||
},
|
||||
"ignore-walk": {
|
||||
"version": "3.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
|
||||
"integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22218,7 +22218,7 @@
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
||||
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22229,21 +22229,21 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
|
||||
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
|
||||
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22253,14 +22253,14 @@
|
||||
},
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22308,7 +22308,7 @@
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
|
||||
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
@@ -22322,7 +22322,7 @@
|
||||
},
|
||||
"needle": {
|
||||
"version": "2.3.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
|
||||
"integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22334,7 +22334,7 @@
|
||||
},
|
||||
"node-pre-gyp": {
|
||||
"version": "0.12.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
|
||||
"integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22353,7 +22353,7 @@
|
||||
},
|
||||
"nopt": {
|
||||
"version": "4.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
|
||||
"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22364,14 +22364,14 @@
|
||||
},
|
||||
"npm-bundled": {
|
||||
"version": "1.0.6",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
|
||||
"integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"npm-packlist": {
|
||||
"version": "1.4.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
|
||||
"integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22382,7 +22382,7 @@
|
||||
},
|
||||
"npmlog": {
|
||||
"version": "4.1.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
|
||||
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22395,21 +22395,21 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22419,21 +22419,21 @@
|
||||
},
|
||||
"os-homedir": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
|
||||
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"os-tmpdir": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
||||
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"osenv": {
|
||||
"version": "0.1.5",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
|
||||
"integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22444,21 +22444,21 @@
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"process-nextick-args": {
|
||||
"version": "2.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
|
||||
"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"rc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
|
||||
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22480,7 +22480,7 @@
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.6",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22496,7 +22496,7 @@
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "2.6.3",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
|
||||
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22506,49 +22506,49 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"sax": {
|
||||
"version": "1.2.4",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"semver": {
|
||||
"version": "5.7.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
|
||||
"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
|
||||
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22560,7 +22560,7 @@
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22570,7 +22570,7 @@
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22580,7 +22580,7 @@
|
||||
},
|
||||
"strip-json-comments": {
|
||||
"version": "2.0.1",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
|
||||
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
@@ -22603,14 +22603,14 @@
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"wide-align": {
|
||||
"version": "1.1.3",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
|
||||
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -22620,7 +22620,7 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": false,
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
"build:server": "gulp server",
|
||||
"migration:create": "ts-node --transpile-only ./scripts/migration/create.ts",
|
||||
"docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md",
|
||||
"docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md",
|
||||
"doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
|
||||
"generate": "npm-run-all generate:css-types generate:schema generate:relay",
|
||||
"generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist",
|
||||
@@ -425,6 +426,9 @@
|
||||
"{src/core/client/stream/events.ts,scripts/generateEventDocs.ts,CLIENT_EVENTS.md}": [
|
||||
"npm run docs:events -- --verify"
|
||||
],
|
||||
"{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [
|
||||
"npm run docs:css-variables -- --verify"
|
||||
],
|
||||
"{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
|
||||
"npm run doctoc"
|
||||
]
|
||||
|
||||
@@ -0,0 +1,306 @@
|
||||
import { stripIndent } from "common-tags";
|
||||
import fs from "fs";
|
||||
import { kebabCase, trim } from "lodash";
|
||||
import path from "path";
|
||||
import ts from "typescript";
|
||||
|
||||
import colors from "../src/core/client/ui/theme/colors";
|
||||
|
||||
/** We collect inforamtion from the AST and put it into DocEntry */
|
||||
interface DocEntry {
|
||||
/** Name of property */
|
||||
key: string;
|
||||
/** Documentation if available */
|
||||
docs?: string;
|
||||
/** Value if it is a leaf */
|
||||
value?: string;
|
||||
/** Children if it is a node */
|
||||
children?: DocEntry[];
|
||||
}
|
||||
|
||||
/**
|
||||
* We use this regexp to find a previous block that we
|
||||
* are going to update in the readme file.
|
||||
*/
|
||||
const BLOCK_REGEXP = /<!-- START docs:css-variables -->(.|\n)*<!-- END docs:css-variables -->/gm;
|
||||
|
||||
/** Sort doc entries will sort childrenless entries first */
|
||||
function sortDocEntries(data: DocEntry[]) {
|
||||
data.forEach((d) => {
|
||||
if (d.children) {
|
||||
d.children = sortDocEntries(d.children);
|
||||
}
|
||||
});
|
||||
return data.sort((a, b) => {
|
||||
if (a.children && !b.children) {
|
||||
return 1;
|
||||
}
|
||||
if (b.children && !a.children) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
/** Generate documentation for all classes in a set of .ts files */
|
||||
function gatherEntries(
|
||||
fileName: string,
|
||||
options: ts.CompilerOptions
|
||||
): DocEntry[] {
|
||||
// Build a program using the set of root file names in fileNames
|
||||
const program = ts.createProgram([fileName], options);
|
||||
|
||||
// Get the checker, we will use it to find more about classes
|
||||
const checker = program.getTypeChecker();
|
||||
|
||||
const data: DocEntry[] = [];
|
||||
const currentSourceFile = program.getSourceFile(fileName)!;
|
||||
|
||||
ts.forEachChild(currentSourceFile, visit);
|
||||
|
||||
return sortDocEntries(data);
|
||||
|
||||
/** visit nodes finding css variables */
|
||||
function visit(node: ts.Node) {
|
||||
if (ts.isVariableStatement(node)) {
|
||||
// TODO (cvle) - Currently the variable name is hardcoded. We might want to change that.
|
||||
if (!node.getFullText().includes("streamVariables")) {
|
||||
return;
|
||||
}
|
||||
const firstChild = node.declarationList.declarations[0];
|
||||
if (ts.isVariableDeclaration(firstChild)) {
|
||||
const symbol = checker.getSymbolAtLocation(firstChild.name);
|
||||
if (symbol) {
|
||||
const type = checker.getTypeOfSymbolAtLocation(
|
||||
symbol,
|
||||
symbol.valueDeclaration
|
||||
);
|
||||
type.getProperties().forEach((property) => {
|
||||
serializePropertySymbol(property);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** This will evaluate `symbol` and addthe doc entries */
|
||||
function serializePropertySymbol(symbol: ts.Symbol, parent?: DocEntry) {
|
||||
const entry: DocEntry = { key: symbol.name };
|
||||
const pt = checker.getTypeOfSymbolAtLocation(
|
||||
symbol,
|
||||
symbol.valueDeclaration
|
||||
);
|
||||
if (pt.symbol?.name === "__object") {
|
||||
pt.getProperties().forEach((p2) => {
|
||||
serializePropertySymbol(p2, entry);
|
||||
});
|
||||
} else {
|
||||
entry.value = symbol.valueDeclaration
|
||||
// Last child contains value.
|
||||
.getChildAt(symbol.valueDeclaration.getChildCount() - 1)!
|
||||
.getFullText();
|
||||
}
|
||||
entry.docs = ts.displayPartsToString(
|
||||
symbol.getDocumentationComment(checker)
|
||||
);
|
||||
if (parent) {
|
||||
if (parent.children) {
|
||||
parent.children.push(entry);
|
||||
} else {
|
||||
parent.children = [entry];
|
||||
}
|
||||
} else {
|
||||
data.push(entry);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds any references to `object` by `variableName` and replaces the text
|
||||
* with the actual value.
|
||||
*
|
||||
* E.g. `replaceObjectVariablesInText("colors.teal100", colors, "colors") === "#E2FAF7"`;
|
||||
*/
|
||||
function replaceObjectVariablesInText(
|
||||
text: string,
|
||||
object: any,
|
||||
variableName: string
|
||||
) {
|
||||
let result = text;
|
||||
Object.keys(object).forEach((c: string) => {
|
||||
if (typeof object[c] === "object") {
|
||||
result = replaceObjectVariablesInText(
|
||||
result,
|
||||
object[c],
|
||||
`${variableName}.${c}`
|
||||
);
|
||||
} else {
|
||||
result = result.replace(`${variableName}.${c}`, object[c]);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* transforms value to be used in the documentation.
|
||||
*/
|
||||
function transformValue(value: string) {
|
||||
let compat = "";
|
||||
value = trim(value);
|
||||
// Detect compat value.
|
||||
if (value.startsWith("compat")) {
|
||||
const result = /compat\((.*), *"(.*)"\)/.exec(value);
|
||||
if (!result) {
|
||||
throw new Error("Unrecognized compat format");
|
||||
}
|
||||
value = result[1];
|
||||
compat = result[2];
|
||||
}
|
||||
// If it's a raw string, evaluate it to get rid of the initial quotes.
|
||||
if (value[0] === '"' || value[0] === "'") {
|
||||
// eslint-disable-next-line no-eval
|
||||
value = eval(value);
|
||||
}
|
||||
// Replace all references to colors.
|
||||
value = replaceObjectVariablesInText(value, colors, "colors");
|
||||
if (compat) {
|
||||
// add compat information.
|
||||
return `${value}; /* Before 6.3.0: --${compat} */`;
|
||||
}
|
||||
return `${value};`;
|
||||
}
|
||||
|
||||
function prefixLines(text: string, prefix: string) {
|
||||
return text.split("\n").join(`\n${prefix}`);
|
||||
}
|
||||
|
||||
function entries2Summary(
|
||||
entries: DocEntry[],
|
||||
keyprefix = "",
|
||||
nestprefix = ""
|
||||
): string {
|
||||
let doc = "";
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.children) {
|
||||
return;
|
||||
}
|
||||
const header = kebabCase(keyprefix + entry.key);
|
||||
doc += `${nestprefix}- <a href="#${header}">${header}</a>\n`;
|
||||
if (entry.children) {
|
||||
doc += entries2Summary(
|
||||
entry.children,
|
||||
keyprefix + entry.key + "-",
|
||||
nestprefix + " "
|
||||
);
|
||||
}
|
||||
});
|
||||
return doc;
|
||||
}
|
||||
|
||||
function entries2Doc(entries: DocEntry[], header = "###", prefix = ""): string {
|
||||
let doc = "";
|
||||
entries.forEach((entry) => {
|
||||
if (entry.children) {
|
||||
doc += `\n${header} ${kebabCase(prefix + entry.key)}\n`;
|
||||
if (entry.docs) {
|
||||
doc += `\n${entry.docs}\n`;
|
||||
}
|
||||
doc += entries2Doc(
|
||||
entry.children,
|
||||
header + "#",
|
||||
`${prefix}${entry.key}-`
|
||||
);
|
||||
} else {
|
||||
if (entry.docs) {
|
||||
doc += `\n${entry.docs}\n`;
|
||||
}
|
||||
doc += `\n\`--${kebabCase(prefix + entry.key)}: ${transformValue(
|
||||
entry.value!
|
||||
)}\`\n`;
|
||||
}
|
||||
});
|
||||
return doc;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append or update previous documention in markdownFile.
|
||||
*
|
||||
* @param markdownFile The markdown file we want to inject the docs too.
|
||||
* @param entries data as returned by gatherEntries.
|
||||
*/
|
||||
function emitDocs(markdownFile: string, entries: DocEntry[], verify = false) {
|
||||
const previousContent = fs.existsSync(markdownFile)
|
||||
? fs.readFileSync(markdownFile).toString()
|
||||
: "";
|
||||
|
||||
const summary = entries2Summary(entries, "", " ");
|
||||
const list = entries2Doc(entries);
|
||||
|
||||
const output = stripIndent`
|
||||
<!-- START docs:css-variables -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN npm run docs:css-variables -->
|
||||
### Index
|
||||
- <a href="#variables">Variables</a>
|
||||
${prefixLines(summary, " ")}
|
||||
|
||||
### Variables
|
||||
${prefixLines(list, " ")}
|
||||
<!-- END docs:css-variables -->
|
||||
`;
|
||||
|
||||
let newContent;
|
||||
// Find previous block.
|
||||
if (BLOCK_REGEXP.test(previousContent)) {
|
||||
newContent = previousContent.replace(BLOCK_REGEXP, output);
|
||||
} else {
|
||||
newContent = previousContent + "\n" + output;
|
||||
}
|
||||
if (previousContent === newContent) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`${markdownFile} is up to date`);
|
||||
return;
|
||||
}
|
||||
if (verify) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(
|
||||
`${markdownFile} is outdated, please run \`npm run docs:css-variables\``
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
fs.writeFileSync(markdownFile, newContent);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Successfully injected documentation into ${markdownFile}`);
|
||||
}
|
||||
|
||||
function main() {
|
||||
if (process.argv.length < 4) {
|
||||
throw new Error("Must provide path to css variables and a markdown file.");
|
||||
}
|
||||
|
||||
const variableFile = process.argv[2];
|
||||
const markdownFile = process.argv[3];
|
||||
|
||||
// Find tsconfig file.
|
||||
const configFile = ts.findConfigFile(variableFile, fs.existsSync);
|
||||
if (!configFile) {
|
||||
throw new Error("tsconfig file not found");
|
||||
}
|
||||
const configText = fs.readFileSync(configFile).toString();
|
||||
const result = ts.parseConfigFileTextToJson(configFile, configText);
|
||||
if (result.error) {
|
||||
throw result.error;
|
||||
}
|
||||
|
||||
// Parse the JSON raw data into actual consumable compiler options.
|
||||
const config = ts.parseJsonConfigFileContent(
|
||||
result.config,
|
||||
ts.sys,
|
||||
path.dirname(configFile)
|
||||
);
|
||||
|
||||
const entries = gatherEntries(variableFile, config.options);
|
||||
emitDocs(markdownFile, entries, process.argv[4] === "--verify");
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -20,7 +20,9 @@ export default {
|
||||
appPublicPath: resolveSrc("core/build/publicPath.js"),
|
||||
appLocales: resolveSrc("locales"),
|
||||
appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
|
||||
appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
|
||||
appSassLikeVariables: resolveSrc("core/client/ui/theme/sassLikeVariables.ts"),
|
||||
appThemeStreamCSS: resolveSrc("core/client/ui/theme/stream.css"),
|
||||
appThemeAdminCSS: resolveSrc("core/client/ui/theme/admin.css"),
|
||||
appThemeMixinsCSS: resolveSrc("core/client/ui/theme/mixins.css"),
|
||||
|
||||
appStreamHTML: resolveSrc("core/client/stream/index.html"),
|
||||
|
||||
@@ -3,7 +3,6 @@ require("ts-node/register");
|
||||
const kebabCase = require("lodash/kebabCase");
|
||||
const mapKeys = require("lodash/mapKeys");
|
||||
const mapValues = require("lodash/mapValues");
|
||||
const pickBy = require("lodash/pickBy");
|
||||
const flat = require("flat");
|
||||
const paths = require("./paths").default;
|
||||
const autoprefixer = require("autoprefixer");
|
||||
@@ -17,23 +16,28 @@ const postcssMixins = require("postcss-mixins");
|
||||
const postcssPrependImports = require("postcss-prepend-imports");
|
||||
const postcssAdvancedVariables = require("postcss-advanced-variables");
|
||||
|
||||
delete require.cache[paths.appThemeVariables];
|
||||
const variables = require(paths.appThemeVariables).default;
|
||||
const flatKebabVariables = mapKeys(
|
||||
mapValues(flat(variables, { delimiter: "-" }), (v) => v.toString()),
|
||||
delete require.cache[paths.appSassLikeVariables];
|
||||
const sassLikeVariables = require(paths.appSassLikeVariables).default;
|
||||
|
||||
const kebabs = mapKeys(
|
||||
mapValues(flat(sassLikeVariables, { delimiter: "-" }), (v) => v.toString()),
|
||||
(_, k) => kebabCase(k)
|
||||
);
|
||||
|
||||
// These are sass style variables used in media queries.
|
||||
const mediaQueryVariables = mapValues(
|
||||
pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
|
||||
// Generate sass-style variables to inject into css
|
||||
const postCssVariables = mapValues(kebabs, (value, key) => {
|
||||
// Add unit to breakpoints.
|
||||
// Add 1 to support mobile first approach where we start
|
||||
// with the smallest screen and gradually add styling for the
|
||||
// next bigger screen. This is realized using `min-width` without
|
||||
// ever using `max-width`.
|
||||
(v) => `${Number.parseInt(v, 10) + 1}px`
|
||||
);
|
||||
if (key.toString().startsWith("breakpoints-")) {
|
||||
return `${Number.parseInt(value, 10) + 1}px`;
|
||||
}
|
||||
|
||||
// Default return the raw value
|
||||
return value;
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
// Necessary for external CSS imports to work
|
||||
@@ -52,7 +56,7 @@ module.exports = {
|
||||
// Support nesting.
|
||||
postcssNested(),
|
||||
// Sass style variables to be used in media queries.
|
||||
postcssAdvancedVariables({ variables: mediaQueryVariables }),
|
||||
postcssAdvancedVariables({ variables: postCssVariables }),
|
||||
// Reduce some calc()
|
||||
postcssCalcFunction(),
|
||||
// Provides a modern CSS environment.
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.bar {
|
||||
height: calc(6 * var(--mini-unit));
|
||||
background-color: var(--palette-text-primary);
|
||||
background-color: var(--palette-text-500);
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: 10% auto;
|
||||
padding: 0 calc(0.5 * var(--mini-unit));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Delay, Flex, Spinner } from "coral-ui/components";
|
||||
import { Delay, Flex, Spinner } from "coral-ui/components/v2";
|
||||
|
||||
const Loading: FunctionComponent = () => (
|
||||
<Flex justifyContent="center">
|
||||
|
||||
@@ -10,7 +10,7 @@ import { initLocalState } from "./local";
|
||||
import localesData from "./locales";
|
||||
|
||||
// Import css variables.
|
||||
import "coral-ui/theme/variables.css";
|
||||
import "coral-ui/theme/stream.css";
|
||||
|
||||
async function main() {
|
||||
await injectConditionalPolyfills();
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.content {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-7);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-7);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
.title {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-7);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-7);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
padding-left: var(--v2-spacing-2);
|
||||
padding-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3);
|
||||
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: var(--v2-spacing-4);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.sectionText {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-5);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-5);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-3);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin-left: calc(-1 * var(--v2-spacing-5));
|
||||
margin-left: calc(-1 * var(--spacing-5));
|
||||
}
|
||||
|
||||
.list li {
|
||||
@@ -46,5 +46,5 @@
|
||||
.bullet {
|
||||
display: inline-block;
|
||||
min-width: 16px;
|
||||
margin-right: var(--v2-spacing-2);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
.root {
|
||||
display: inline-block;
|
||||
|
||||
max-width: calc(70 * var(--v2-spacing-2));
|
||||
max-width: calc(70 * var(--spacing-2));
|
||||
|
||||
@media (min-width: $breakpoints-xs) {
|
||||
max-width: calc(60 * var(--v2-spacing-2));
|
||||
max-width: calc(60 * var(--spacing-2));
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useToken } from "coral-framework/hooks";
|
||||
import { createFetch } from "coral-framework/lib/relay";
|
||||
import { withRouteConfig } from "coral-framework/lib/router";
|
||||
import { parseHashQuery } from "coral-framework/utils";
|
||||
import { HorizontalGutter } from "coral-ui/components";
|
||||
import { HorizontalGutter } from "coral-ui/components/v2";
|
||||
|
||||
import DownloadDescription from "./DownloadDescription";
|
||||
import DownloadForm from "./DownloadForm";
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.title {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-7);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-7);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-5);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-5);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-3);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-3);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.labelDescription {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-4);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-4);
|
||||
|
||||
color: var(--v2-colors-mono-100);
|
||||
color: var(--palette-text-100);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: var(--v2-spacing-5);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-top: var(--spacing-5);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.title {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-7);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-7);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-5);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-5);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-3);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-3);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.labelDescription {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-4);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-4);
|
||||
|
||||
color: var(--v2-colors-mono-100);
|
||||
color: var(--palette-text-100);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: var(--v2-spacing-5);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-top: var(--spacing-5);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.title {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-7);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-7);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-5);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-5);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-3);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-3);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
|
||||
color: var(--v2-colors-mono-500);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.labelDescription {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-4);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-4);
|
||||
|
||||
color: var(--v2-colors-mono-100);
|
||||
color: var(--palette-text-100);
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: var(--v2-spacing-5);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-top: var(--spacing-5);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
color: var(--v2-palette-success-main);
|
||||
color: var(--palette-success-500);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
}
|
||||
|
||||
.historyIcon {
|
||||
color: var(--v2-palette-text-secondary);
|
||||
color: var(--palette-text-100);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
padding: var(--v2-spacing-2) var(--v2-spacing-1);
|
||||
padding: var(--spacing-2) var(--spacing-1);
|
||||
}
|
||||
|
||||
.leftCol {
|
||||
@@ -8,5 +8,5 @@
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding-top: 3px;
|
||||
margin-right: var(--v2-spacing-2);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$decisionHistoryBorderColor: var(--v2-colors-grey-300);
|
||||
$decisionHistoryBorderColor: var(--palette-grey-300);
|
||||
|
||||
.root {
|
||||
margin: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.root {
|
||||
height: 100%;
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-colors-mono-100);
|
||||
padding: 0 var(--v2-spacing-1);
|
||||
font-size: var(--font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
color: var(--palette-text-100);
|
||||
padding: 0 var(--spacing-1);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-4);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
margin-top: var(--v2-spacing-1);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
|
||||
$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
|
||||
|
||||
.root {
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-1);
|
||||
color: $moderateCardDecisionHistoryLinkTextColor;
|
||||
font-style: var(--v2-font-style-underline);
|
||||
font-style: var(--font-style-underline);
|
||||
}
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
word-break: break-all;
|
||||
/* Fallback end */
|
||||
word-break: break-word;
|
||||
color: var(--v2-palette-text-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--v2-font-size-2);
|
||||
color: var(--palette-text-500);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-4);
|
||||
font-size: var(--font-size-2);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.root {
|
||||
color: var(--v2-palette-error-main);
|
||||
color: var(--palette-error-500);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
|
||||
$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300);
|
||||
$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
|
||||
$moderateCardDecisionHistoryBorderColor: var(--palette-grey-300);
|
||||
|
||||
.root {
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
text-transform: uppercase;
|
||||
color: $moderateCardDecisionHistoryLinkTextColor;
|
||||
width: 100%;
|
||||
border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
|
||||
text-align: center;
|
||||
padding-top: var(--v2-spacing-1);
|
||||
padding-bottom: var(--v2-spacing-1);
|
||||
padding-top: var(--spacing-1);
|
||||
padding-bottom: var(--spacing-1);
|
||||
|
||||
&:disabled {
|
||||
color: var(--v2-palette-grey-lighter);
|
||||
color: var(--palette-grey-300);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$timestampColor: var(--v2-colors-mono-100);
|
||||
$timestampColor: var(--palette-text-100);
|
||||
|
||||
.root {
|
||||
color: $timestampColor;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
$decisionHistoryBorderColor: var(--v2-colors-grey-300);
|
||||
$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
|
||||
$decisionHistoryBorderColor: var(--palette-grey-300);
|
||||
$decisionHistoryTitleBackgroundColor: var(--palette-grey-200);
|
||||
|
||||
.root {
|
||||
background: $decisionHistoryTitleBackgroundColor;
|
||||
padding: var(--v2-spacing-1);
|
||||
color: var(--v2-palette-text-primary);
|
||||
padding: var(--spacing-1);
|
||||
color: var(--palette-text-500);
|
||||
border-bottom: 1px solid $decisionHistoryBorderColor;
|
||||
font-size: var(--v2-font-size-icon-medium);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: var(--v2-spacing-2);
|
||||
font-size: var(--font-size-icon-md);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
.text {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
color: var(--v2-palette-text-primary);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
color: var(--palette-text-500);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: 1;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
|
||||
$moderateCardDecisionHistoryColor: var(--palette-text-900);
|
||||
|
||||
.root {
|
||||
color: $moderateCardDecisionHistoryColor;
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
line-height: var(--line-height-field-description);
|
||||
font-size: var(--font-size-3);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import useNotification from "./useNotification";
|
||||
|
||||
const NotificationContainer: FunctionComponent<{}> = () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { PropTypesOf } from "coral-framework/types";
|
||||
import { LogoHorizontal } from "coral-ui/components";
|
||||
import { LogoHorizontal } from "coral-ui/components/v2";
|
||||
import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";
|
||||
|
||||
import { DecisionHistoryButton } from "./DecisionHistory";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$userMenuButtonColor: var(--v2-colors-mono-100);
|
||||
$userMenuButtonColor: var(--palette-text-100);
|
||||
|
||||
.button {
|
||||
padding-top: 0;
|
||||
@@ -11,9 +11,9 @@ $userMenuButtonColor: var(--v2-colors-mono-100);
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-family: var(--font-family-secondary);
|
||||
color: $userMenuButtonColor;
|
||||
font-size: var(--v2-font-size-4);
|
||||
font-size: var(--font-size-4);
|
||||
margin-left: 2px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.version {
|
||||
font-size: calc(10rem / var(--rem-base));
|
||||
color: var(--palette-text-secondary);
|
||||
font-size: 0.625rem;
|
||||
color: var(--palette-text-100);
|
||||
text-align: center;
|
||||
padding-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Typography } from "coral-ui/components";
|
||||
import { Typography } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./Version.css";
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.container {
|
||||
width: 385px;
|
||||
background-color: var(--v2-colors-grey-100);
|
||||
border: 1px solid var(--v2-colors-grey-300);
|
||||
background-color: var(--palette-grey-100);
|
||||
border: 1px solid var(--palette-grey-300);
|
||||
margin-top: 70px;
|
||||
padding: var(--v2-spacing-6);
|
||||
padding: var(--spacing-6);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
$comment-content: var(--v2-colors-mono-900);
|
||||
$comment-blockquote-bg: var(--v2-colors-grey-100);
|
||||
$comment-highlight-bg: var(--v2-colors-yellow-500);
|
||||
$comment-link: var(--v2-palette-primary-main);
|
||||
$comment-link-active: var(--v2-palette-primary-darkest);
|
||||
$comment-content: var(--palette-text-900);
|
||||
$comment-blockquote-bg: var(--palette-grey-100);
|
||||
$comment-highlight-bg: var(--palette-warning-500);
|
||||
$comment-link: $colors-teal-700;
|
||||
$comment-link-active: $colors-teal-900;
|
||||
|
||||
.root {
|
||||
composes: bodyCommentV2 from "~coral-ui/shared/typography.css";
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-body-comment);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-comment-body);
|
||||
color: $comment-content;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
}
|
||||
i,
|
||||
em {
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
$moderateCardIconColor: var(--v2-colors-mono-100);
|
||||
$moderateCardInReplyToColor: var(--v2-colors-mono-100);
|
||||
$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500);
|
||||
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
|
||||
$moderateCardIconColor: var(--palette-text-100);
|
||||
$moderateCardInReplyToColor: var(--palette-text-100);
|
||||
$moderateCardInReplyToUsernameColor: var(--palette-text-500);
|
||||
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
|
||||
|
||||
.icon {
|
||||
color: $moderateCardIconColor;
|
||||
}
|
||||
.inReplyTo {
|
||||
color: $moderateCardInReplyToColor;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
.username {
|
||||
color: $moderateCardInReplyToUsernameColor;
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-3);
|
||||
|
||||
padding: var(--spacing-1);
|
||||
|
||||
@@ -38,5 +38,5 @@ $moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
|
||||
.usernameButton {
|
||||
vertical-align: baseline;
|
||||
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
margin-left: calc(-1 * var(--spacing-1));
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$moderateCardUsernameColor: var(--v2-colors-mono-900);
|
||||
$moderateCardUsernameColor: var(--palette-text-900);
|
||||
|
||||
.root {
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
line-height: var(--line-height-3);
|
||||
color: $moderateCardUsernameColor;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
|
||||
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
|
||||
|
||||
.root {
|
||||
margin-right: var(--mini-unit);
|
||||
padding: var(--spacing-1);
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
margin-left: calc(-1 * var(--spacing-1));
|
||||
|
||||
line-height: var(--v2-line-height-reset);
|
||||
line-height: var(--line-height-3);
|
||||
|
||||
&:hover {
|
||||
background-color: $moderateCardUsernameBackgroundHover;
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $moderateCardUsernameBackgroundHover;
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import cn from "classnames";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { BaseButton } from "coral-ui/components/v2";
|
||||
|
||||
import Username from "./Username";
|
||||
|
||||
import styles from "./UsernameButton.css";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Modal } from "coral-ui/components";
|
||||
import { Modal } from "coral-ui/components/v2";
|
||||
|
||||
import ConversationModalQuery from "./ConversationModalQuery";
|
||||
|
||||
|
||||
+11
-11
@@ -1,31 +1,31 @@
|
||||
$conversationModalHighlightBackground: var(--v2-colors-teal-100);
|
||||
$conversationModalCommentText: var(--v2-colors-mono-500);
|
||||
$conversationModalHighlightBackground: $colors-teal-100;
|
||||
$conversationModalCommentText: var(--palette-text-500);
|
||||
.root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
border-color: var(--v2-colors-grey-400);
|
||||
border-color: var(--palette-grey-400);
|
||||
}
|
||||
|
||||
.adornments {
|
||||
margin-right: var(--v2-spacing-2);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
.circle {
|
||||
margin-top: var(--v2-spacing-2);
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-top: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.highlightedCircle {
|
||||
margin-top: var(--v2-spacing-1);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background-color: $conversationModalHighlightBackground;
|
||||
padding: var(--v2-spacing-2);
|
||||
padding-top: var(--v2-spacing-1);
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
padding: var(--spacing-2);
|
||||
padding-top: var(--spacing-1);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.commentText {
|
||||
@@ -33,5 +33,5 @@ $conversationModalCommentText: var(--v2-colors-mono-500);
|
||||
}
|
||||
|
||||
.showReplies {
|
||||
padding-left: var(--v2-spacing-2);
|
||||
padding-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.root {
|
||||
}
|
||||
.topCircle {
|
||||
margin-right: var(--v2-spacing-2);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
.bottomCircleContainer {
|
||||
width: 8px;
|
||||
padding-top: var(--v2-spacing-1);
|
||||
padding-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
+7
-7
@@ -1,17 +1,17 @@
|
||||
$modal-header-text: var(--v2-colors-mono-900);
|
||||
$modal-header-text: var(--palette-text-900);
|
||||
|
||||
.title {
|
||||
font-size: var(--v2-font-size-4);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-title);
|
||||
font-size: var(--font-size-4);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-5);
|
||||
color: $modal-header-text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.conversationTitle {
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: var(--v2-spacing-4);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
.comment {
|
||||
padding-left: calc(var(--v2-spacing-4));
|
||||
padding-left: calc(var(--spacing-4));
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: calc(var(--v2-spacing-4));
|
||||
padding-left: calc(var(--spacing-4));
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$modal-body-text: var(--v2-colors-mono-500);
|
||||
$modal-body-text: $colors-mono-500;
|
||||
|
||||
.root {
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--font-size-3);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-field-description);
|
||||
color: $modal-body-text;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
$modal-text: var(--v2-colors-mono-500);
|
||||
$modal-text: $colors-mono-500;
|
||||
|
||||
.root {
|
||||
font-size: var(--v2-font-size-5);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
line-height: var(--v2-line-height-title);
|
||||
font-size: var(--font-size-5);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
line-height: var(--line-height-title);
|
||||
color: $modal-text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
$status-modal-username: var(--v2-colors-mono-900);
|
||||
$status-modal-username: $colors-mono-900;
|
||||
|
||||
.root {
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
color: $status-modal-username;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
|
||||
$moderateCardButtonOutlineApproveColor: var(--palette-success-500);
|
||||
|
||||
.root {
|
||||
border: 1px solid $moderateCardButtonOutlineApproveColor;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-radius: var(--round-corners);
|
||||
width: 65px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
|
||||
color: $moderateCardButtonOutlineApproveColor;
|
||||
&:not(:disabled):active {
|
||||
background-color: $moderateCardButtonOutlineApproveColor;
|
||||
color: var(--v2-colors-pure-white);
|
||||
color: var(--palette-text-000);
|
||||
}
|
||||
}
|
||||
|
||||
.readOnly {
|
||||
background-color: transparent;
|
||||
border-color: var(--v2-colors-grey-300);
|
||||
color: var(--v2-colors-grey-300);
|
||||
border-color: $colors-grey-300);
|
||||
color: $colors-grey-300);
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.readOnly {
|
||||
background-color: transparent;
|
||||
border-color: $colors-grey-300;
|
||||
color: $colors-grey-300;
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
@@ -29,10 +39,10 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
|
||||
.invert {
|
||||
background-color: $moderateCardButtonOutlineApproveColor;
|
||||
border-color: $moderateCardButtonOutlineApproveColor;
|
||||
color: var(--v2-colors-pure-white);
|
||||
color: var(--palette-text-000);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.authorStatus {
|
||||
padding-right: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
right: 0px;
|
||||
top: 2px;
|
||||
|
||||
border: 1px solid var(--v2-palette-grey-main);
|
||||
border: 1px solid var(--palette-grey-500);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--round-corners);
|
||||
padding: 2px var(--spacing-2) 2px var(--spacing-2);
|
||||
@@ -11,34 +11,34 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--v2-palette-grey-main);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
color: var(--palette-grey-500);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: 1.2;
|
||||
|
||||
&:active {
|
||||
background-color: var(--v2-palette-primary-lightest);
|
||||
border-color: var(--v2-palette-primary-main);
|
||||
color: var(--v2-palette-primary-main);
|
||||
background-color: $colors-teal-100;
|
||||
border-color: $colors-teal-700;
|
||||
color: $colors-teal-700;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: var(--v2-colors-grey-300);
|
||||
color: var(--v2-colors-grey-300);
|
||||
border-color: var(--palette-grey-300);
|
||||
color: var(--palette-grey-300);
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
background-color: var(--v2-palette-primary-main);
|
||||
border-color: var(--v2-palette-primary-main);
|
||||
color: var(--v2-palette-text-light);
|
||||
background-color: $colors-teal-700;
|
||||
border-color: $colors-teal-700;
|
||||
color: var(--palette-text-000);
|
||||
|
||||
&:disabled {
|
||||
color: var(--v2-colors-pure-white);
|
||||
border-color: var(--v2-colors-grey-300);
|
||||
background-color: var(--v2-colors-grey-300);
|
||||
color: var(--palette-text-000);
|
||||
border-color: var(--palette-grey-300);
|
||||
background-color: var(--palette-grey-300);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);
|
||||
$moderateCardFlagsCategoryColor: var(--palette-text-500);
|
||||
|
||||
.category {
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-6);
|
||||
color: $moderateCardFlagsCategoryColor;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.detailsDivider {
|
||||
border-top: 1px solid var(--v2-colors-grey-100);
|
||||
border-top: 1px solid $colors-grey-100;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,40 @@
|
||||
$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
|
||||
$moderateCardReasonTextColor: var(--v2-colors-mono-500);
|
||||
$moderateCardFlagUsernameColor: var(--palette-text-900);
|
||||
$moderateCardReasonTextColor: var(--palette-text-500);
|
||||
|
||||
.user {
|
||||
color: $moderateCardFlagUsernameColor;
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-title);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
line-height: var(--line-height-3);
|
||||
padding-right: calc(0.5 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.details {
|
||||
color: $moderateCardReasonTextColor;
|
||||
|
||||
display: block;
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-title);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
|
||||
.flagger {
|
||||
line-height: var(--v2-line-height-reset);
|
||||
line-height: var(--line-height-3);
|
||||
margin-right: var(--mini-unit);
|
||||
padding: var(--v2-spacing-1);
|
||||
margin-left: calc(-1 * var(--v2-spacing-1));
|
||||
padding: var(--spacing-1);
|
||||
margin-left: calc(-1 * var(--spacing-1));
|
||||
|
||||
&:hover {
|
||||
background-color: var(--v2-palette-grey-lightest);
|
||||
border-radius: var(--v2-round-corners);
|
||||
background-color: var(--palette-grey-200);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--v2-palette-grey-lighter);
|
||||
border-radius: var(--v2-round-corners);
|
||||
background-color: var(--palette-grey-300);
|
||||
border-radius: var(--round-corners);
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.label {
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
color: var(--palette-text-primary);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-family: var(--font-family-primary);
|
||||
color: var(--palette-text-500);
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
|
||||
$moderateCardDetailsHeaderColor: var(--palette-text-500);
|
||||
$moderateCardDetailsDividerColor: var(--palette-grey-100);
|
||||
|
||||
.detailsButton {
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--font-size-1);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
line-height: 1.28;
|
||||
height: 100%;
|
||||
padding: 2px 0px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.embed {
|
||||
margin: var(--v2-spacing-2) 0;
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@@ -16,14 +16,14 @@
|
||||
}
|
||||
|
||||
.playIcon {
|
||||
color: var(--v2-colors-pure-white);
|
||||
color: var(--palette-text-000);
|
||||
}
|
||||
|
||||
.playText {
|
||||
color: var(--v2-colors-pure-white);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
color: var(--palette-text-000);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
$moderateCardTimestampColor: var(--v2-colors-mono-100);
|
||||
$moderateCardEditedColor: var(--v2-colors-mono-100);
|
||||
$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
|
||||
$moderateCardDecisionColor: var(--v2-colors-mono-500);
|
||||
$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
|
||||
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
|
||||
$moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
$moderateCardTimestampColor: var(--palette-text-100);
|
||||
$moderateCardEditedColor: var(--palette-text-100);
|
||||
$moderateCardAuthorStatusColor: var(--palette-text-100);
|
||||
$moderateCardDecisionColor: var(--palette-text-500);
|
||||
$moderateCardStoryTitleColor: var(--palette-text-500);
|
||||
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
|
||||
$moderateCardLinkTextColor: $colors-teal-700;
|
||||
|
||||
.topBar {
|
||||
position: relative;
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.topBarMini {
|
||||
margin-bottom: var(--v2-spacing-4);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.inReplyTo {
|
||||
@@ -25,7 +25,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
.mainContainer {
|
||||
flex-grow: 1;
|
||||
|
||||
margin-right: calc(2 * var(--v2-spacing-5));
|
||||
margin-right: calc(2 * var(--spacing-5));
|
||||
}
|
||||
|
||||
.contentArea {
|
||||
@@ -52,7 +52,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
No reply to field, so we align below the fattest element
|
||||
which is the feature button.
|
||||
*/
|
||||
padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
|
||||
padding-top: calc(var(--font-size-2) + 7px + var(--spacing-4));
|
||||
}
|
||||
|
||||
.asideMiniWithReplyTo {
|
||||
@@ -60,14 +60,14 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
We have reply to field, so we align below the fattest
|
||||
element plus the reply to field.
|
||||
*/
|
||||
padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
|
||||
padding-top: calc(2 * var(--font-size-2) + 5px + var(--spacing-4));
|
||||
}
|
||||
|
||||
.decision {
|
||||
color: $moderateCardDecisionColor;
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: 1.14;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -75,13 +75,13 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
.separator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-1 * var(--v2-spacing-5));
|
||||
right: calc(-1 * var(--spacing-5));
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.ruledSeparator {
|
||||
border-right: 1px solid var(--v2-colors-grey-400);
|
||||
border-right: 1px solid var(--palette-grey-400);
|
||||
}
|
||||
|
||||
.root {
|
||||
@@ -93,53 +93,53 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
}
|
||||
|
||||
.dangling {
|
||||
background-color: var(--v2-palette-grey-lightest);
|
||||
background-color: var(--palette-grey-200);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--font-size-1);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
color: $moderateCardLinkTextColor;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.viewContext {
|
||||
padding-bottom: var(--v2-spacing-1);
|
||||
padding-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.storyLabel {
|
||||
color: var(--v2-palette-grey-main);
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
color: var(--palette-grey-500);
|
||||
font-size: var(--font-size-1);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
margin-bottom: var(--spacing-1);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.commentOn {
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
margin-bottom: var(--v2-spacing-1);
|
||||
font-size: var(--font-size-2);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.siteName {
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
}
|
||||
|
||||
.storyTitle {
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
color: $moderateCardStoryTitleColor;
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
}
|
||||
|
||||
.borderless {
|
||||
border-width: 0px;
|
||||
box-shadow: none;
|
||||
padding: var(--v2-spacing-2) 0;
|
||||
padding: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.miniButton {
|
||||
@@ -149,19 +149,19 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
|
||||
.timestamp {
|
||||
color: $moderateCardTimestampColor;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
|
||||
.edited {
|
||||
color: $moderateCardEditedColor;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-2);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
padding-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
.selected {
|
||||
@@ -171,17 +171,17 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
|
||||
.authorStatus {
|
||||
padding-right: var(--spacing-2);
|
||||
color: $moderateCardAuthorStatusColor;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-1);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-2);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-1);
|
||||
line-height: var(--line-height-3);
|
||||
padding-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
.deleted {
|
||||
background: var(--v2-palette-grey-lightest);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
background: var(--palette-grey-200);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-4);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.button {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-size: var(--font-size-2);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
$moderated-by: var(--v2-colors-mono-100);
|
||||
$moderated-by-username: var(--v2-colors-mono-900);
|
||||
$moderated-by: var(--palette-text-100);
|
||||
$moderated-by-username: var(--palette-text-900);
|
||||
|
||||
.moderatedBy {
|
||||
font-size: var(--v2-font-size-1);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--font-size-1);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
color: $moderated-by;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.moderatedByUsername {
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
line-height: var(--line-height-3);
|
||||
color: $moderated-by-username;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
|
||||
$moderateCardButtonOutlineRejectColor: var(--palette-error-500);
|
||||
|
||||
.root {
|
||||
border: 1px solid $moderateCardButtonOutlineRejectColor;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--v2-round-corners);
|
||||
border-radius: var(--round-corners);
|
||||
width: 65px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
|
||||
color: $moderateCardButtonOutlineRejectColor;
|
||||
&:not(:disabled):active {
|
||||
background-color: $moderateCardButtonOutlineRejectColor;
|
||||
color: var(--v2-colors-pure-white);
|
||||
color: var(--palette-text-000);
|
||||
}
|
||||
}
|
||||
|
||||
.readOnly {
|
||||
background-color: transparent;
|
||||
border-color: var(--v2-colors-grey-300);
|
||||
color: var(--v2-colors-grey-300);
|
||||
border-color: $colors-grey-300);
|
||||
color: $colors-grey-300);
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.readOnly {
|
||||
background-color: transparent;
|
||||
border-color: $colors-grey-300;
|
||||
color: $colors-grey-300;
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
@@ -28,8 +38,8 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
|
||||
|
||||
.invert {
|
||||
background-color: $moderateCardButtonOutlineRejectColor;
|
||||
color: var(--palette-text-000);
|
||||
border-color: $moderateCardButtonOutlineRejectColor;
|
||||
color: var(--v2-colors-pure-white);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500);
|
||||
$moderateCardToxicityColor: var(--v2-colors-mono-500);
|
||||
$moderateCardCounterBadgeBackgroundAlert: var(--palette-error-500);
|
||||
$moderateCardToxicityColor: var(--palette-text-500);
|
||||
|
||||
.root {
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-4);
|
||||
color: $moderateCardToxicityColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$tableBodyDisabledColor: var(--v2-colors-mono-100);
|
||||
$tableBodyDisabledColor: var(--palette-text-100);
|
||||
|
||||
.root {
|
||||
color: $tableBodyDisabledColor;
|
||||
|
||||
@@ -3,6 +3,8 @@ import React, { FunctionComponent } from "react";
|
||||
|
||||
import styles from "./NotAvailable.css";
|
||||
|
||||
// TODO: (cvle) remove color styles from here. Color should be applied externally.
|
||||
|
||||
const NotAvailable: FunctionComponent = (props) => (
|
||||
<Localized id="general-notAvailable">
|
||||
<span className={styles.root}>Not available</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
margin-top: var(--v2-spacing-2);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@@ -15,18 +15,18 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--v2-colors-mono-500) !important;
|
||||
color: var(--palette-text-500) !important;
|
||||
border-width: 0;
|
||||
width: calc(20 * var(--mini-unit));
|
||||
margin-right: calc(var(--v2-spacing-1) / 2);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-min);
|
||||
margin-right: calc(var(--spacing-1) / 2);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-min);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.buttonIconLeft {
|
||||
width: 20px;
|
||||
margin-right: calc(var(--v2-spacing-1) / 2);
|
||||
margin-right: calc(var(--spacing-1) / 2);
|
||||
}
|
||||
|
||||
.buttonIconRight {
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
}
|
||||
|
||||
.colorReg {
|
||||
color: var(--v2-colors-grey-500);
|
||||
color: var(--palette-grey-500);
|
||||
}
|
||||
|
||||
.colorLight {
|
||||
color: var(--v2-colors-grey-400);
|
||||
color: var(--palette-grey-400);
|
||||
}
|
||||
|
||||
.root {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.root {
|
||||
border-left: 1px solid var(--palette-grey-main);
|
||||
border-right: 1px solid var(--palette-grey-main);
|
||||
border-left: 1px solid var(--palette-grey-500);
|
||||
border-right: 1px solid var(--palette-grey-500);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
$moderator-note-bg: var(--v2-colors-grey-100);
|
||||
$moderator-note-body: var(--v2-colors-mono-500);
|
||||
$moderator-note-dot: var(--v2-colors-mono-100);
|
||||
$moderator-note-username: var(--v2-colors-mono-900);
|
||||
$moderator-note-bg: var(--palette-grey-100);
|
||||
$moderator-note-body: var(--palette-text-500);
|
||||
$moderator-note-dot: var(--palette-text-100);
|
||||
$moderator-note-username: var(--palette-text-900);
|
||||
|
||||
.root {
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-field-description);
|
||||
background-color: $moderator-note-bg;
|
||||
border-radius: 4px;
|
||||
padding: var(--v2-spacing-3);
|
||||
padding: var(--spacing-3);
|
||||
color: $moderator-note-body;
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.bodyType {
|
||||
}
|
||||
|
||||
.leftBy {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
padding-left: var(--v2-spacing-4);
|
||||
padding-right: var(--v2-spacing-1);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-3);
|
||||
padding-left: var(--spacing-4);
|
||||
padding-right: var(--spacing-1);
|
||||
position: relative;
|
||||
color: $moderator-note-body;
|
||||
}
|
||||
@@ -39,19 +39,19 @@ $moderator-note-username: var(--v2-colors-mono-900);
|
||||
background-color: ;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: var(--v2-spacing-1);
|
||||
left: var(--spacing-1);
|
||||
background-color: $moderator-note-dot;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
line-height: var(--line-height-3);
|
||||
font-size: var(--font-size-3);
|
||||
color: $moderator-note-username;
|
||||
}
|
||||
|
||||
.footerLeft {
|
||||
padding-left: var(--v2-spacing-3);
|
||||
padding-left: var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
$recent-history-title: var(--v2-colors-mono-500);
|
||||
$recent-history-subtitle: var(--v2-colors-mono-100);
|
||||
$recent-history-info: var(--v2-colors-mono-500);
|
||||
$recent-history-triggered: var(--v2-palette-error-main);
|
||||
$recent-history-title: var(--palette-text-500);
|
||||
$recent-history-subtitle: var(--palette-text-100);
|
||||
$recent-history-info: var(--palette-text-500);
|
||||
$recent-history-triggered: var(--palette-error-500);
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-3);
|
||||
margin: 0;
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
line-height: var(--line-height-field-description);
|
||||
color: $recent-history-title;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: $recent-history-subtitle;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
margin: 0;
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
line-height: var(--line-height-4);
|
||||
}
|
||||
|
||||
.info {
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-3);
|
||||
line-height: var(--line-height-3);
|
||||
color: $recent-history-info;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amountLabel {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-size: var(--font-size-2);
|
||||
color: $recent-history-info;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$indicator-dot: var(--v2-colors-blue-400);
|
||||
$indicator-dot: $colors-teal-500;
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
@@ -23,7 +23,7 @@ $indicator-dot: var(--v2-colors-blue-400);
|
||||
}
|
||||
|
||||
.tabIcon {
|
||||
margin-right: var(--v2-spacing-1);
|
||||
margin-right: var(--spacing-1);
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
@@ -32,7 +32,7 @@ $indicator-dot: var(--v2-colors-blue-400);
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3));
|
||||
height: calc(100% - var(--spacing-2) - var(--spacing-3));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -41,8 +41,8 @@ $indicator-dot: var(--v2-colors-blue-400);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-top: var(--v2-spacing-3);
|
||||
margin-bottom: var(--spacing-2);
|
||||
margin-top: var(--spacing-3);
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tableHeader {
|
||||
border-width: 0px;
|
||||
border-style: none;
|
||||
background-color: var(--palette-grey-lightest);
|
||||
background-color: var(--palette-grey-200);
|
||||
}
|
||||
|
||||
.row:first-child:hover {
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
|
||||
.callout {
|
||||
width: 100%;
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
.textArea {
|
||||
width: 100%;
|
||||
margin-bottom: var(--v2-spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.textArea:focus {
|
||||
@@ -11,6 +11,6 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: var(--v2-spacing-2) 0;
|
||||
margin-bottom: var(--v2-spacing-4);
|
||||
padding: var(--spacing-2) 0;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
.callout {
|
||||
width: 100%;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-family: var(--font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$user-drawer-background: var(--v2-colors-pure-white);
|
||||
$user-drawer-background: $colors-pure-white;
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Modal } from "coral-ui/components";
|
||||
import { Card } from "coral-ui/components/v2";
|
||||
import { Card, Modal } from "coral-ui/components/v2";
|
||||
|
||||
import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery";
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
|
||||
.loadMore {
|
||||
width: 100%;
|
||||
background-color: var(--palette-common-white);
|
||||
background-color: $colors-pure-white;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--palette-grey-lighter);
|
||||
border-color: var(--palette-grey-300);
|
||||
border-radius: var(--round-corners);
|
||||
|
||||
margin-top: var(--spacing-1);
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
|
||||
.callout {
|
||||
width: 100%;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-family: var(--font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
$user-drawer-background: var(--v2-colors-pure-white);
|
||||
$user-drawer-account-info: var(--v2-colors-mono-500);
|
||||
$user-drawer-divider: var(--v2-colors-grey-300);
|
||||
$user-drawer-status-label: var(--v2-colors-mono-500);
|
||||
$user-drawer-background: $colors-pure-white;
|
||||
$user-drawer-account-info: var(--palette-text-500);
|
||||
$user-drawer-divider: var(--palette-grey-300);
|
||||
$user-drawer-status-label: var(--palette-text-500);
|
||||
|
||||
.comments {
|
||||
flex: auto;
|
||||
@@ -26,20 +26,20 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-size: var(--v2-font-size-6);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-size: var(--font-size-6);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
|
||||
.userDetail {
|
||||
}
|
||||
|
||||
.userDetailValue {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-3);
|
||||
color: $user-drawer-account-info;
|
||||
}
|
||||
|
||||
@@ -58,12 +58,12 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
|
||||
}
|
||||
|
||||
.userStatusLabel {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
color: $user-drawer-status-label;
|
||||
margin-right: var(--v2-spacing-1);
|
||||
margin-right: var(--spacing-1);
|
||||
}
|
||||
|
||||
.userStatusChange {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.root {
|
||||
width: 100%;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-family: var(--font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
+2
-2
@@ -4,11 +4,11 @@
|
||||
|
||||
.loadMore {
|
||||
width: 100%;
|
||||
background-color: var(--palette-common-white);
|
||||
background-color: $colors-pure-white;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--palette-grey-lighter);
|
||||
border-color: var(--palette-grey-300);
|
||||
border-radius: var(--round-corners);
|
||||
|
||||
margin-top: var(--spacing-1);
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
|
||||
.callout {
|
||||
width: 100%;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-family: var(--font-family-primary);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
$user-status-details: var(--v2-colors-mono-500);
|
||||
$user-status-details: var(--palette-text-500);
|
||||
|
||||
.root {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-2);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-2);
|
||||
color: $user-status-details;
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
margin: 0 0 var(--v2-spacing-1) 0;
|
||||
line-height: var(--line-height-4);
|
||||
margin: 0 0 var(--spacing-1) 0;
|
||||
}
|
||||
|
||||
.root strong {
|
||||
font-weight: var(--v2-font-weight-primary-bold);
|
||||
font-weight: var(--font-weight-primary-bold);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tableLight {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
}
|
||||
|
||||
.usernameCell {
|
||||
line-height: calc(18em / 14);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
max-width: 500px;
|
||||
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
|
||||
var(--v2-spacing-3);
|
||||
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
|
||||
var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
$tableBodyTextColor: var(--v2-colors-mono-500);
|
||||
$tableBodyTextColor: var(--palette-text-500);
|
||||
|
||||
.root {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
color: $tableBodyTextColor;
|
||||
}
|
||||
|
||||
.commenter {
|
||||
color: $tableBodyTextColor;
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
$ban-modal-text: var(--v2-colors-mono-500);
|
||||
$ban-modal-text: var(--palette-text-500);
|
||||
|
||||
.bodyText {
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-size: var(--font-size-3);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-field-description);
|
||||
color: $ban-modal-text;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
max-width: 500px;
|
||||
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
|
||||
var(--v2-spacing-3);
|
||||
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
|
||||
var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
$suspend-modal-text: var(--palette-text-500);
|
||||
|
||||
.radioButton {
|
||||
margin: 0 var(--spacing-1) 0 0 !important;
|
||||
}
|
||||
@@ -13,6 +15,15 @@
|
||||
margin: 0 0 var(--spacing-3) 0 !important;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: var(--font-size-4);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
line-height: var(--line-height-5);
|
||||
color: $suspend-modal-text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
$suspend-modal-text: var(--palette-text-500);
|
||||
|
||||
.bodyText {
|
||||
font-size: var(--font-size-3);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
line-height: var(--line-height-field-description);
|
||||
color: $suspend-modal-text;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: var(--font-size-4);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
line-height: var(--line-height-5);
|
||||
color: $suspend-modal-text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radioButton {
|
||||
margin: 0 var(--spacing-1) 0 0 !important;
|
||||
}
|
||||
|
||||
.textArea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: calc(12 * var(--mini-unit));
|
||||
padding: calc(0.5 * var(--mini-unit));
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0 0 var(--spacing-3) 0 !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: var(--spacing-3);
|
||||
}
|
||||
@@ -1,20 +1,20 @@
|
||||
.root {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-size: var(--v2-font-size-2);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-size: var(--font-size-2);
|
||||
line-height: var(--line-height-3);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--v2-palette-success-main);
|
||||
color: var(--palette-success-500);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--v2-palette-error-main);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
color: var(--palette-error-500);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--v2-palette-error-darkest);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
color: var(--palette-error-700);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$status-change-button-border: var(--v2-colors-grey-400);
|
||||
$status-change-button-border: var(--palette-grey-400);
|
||||
|
||||
.button {
|
||||
justify-content: space-between;
|
||||
@@ -6,7 +6,7 @@ $status-change-button-border: var(--v2-colors-grey-400);
|
||||
}
|
||||
|
||||
.bordered {
|
||||
padding: 0 var(--v2-spacing-2);
|
||||
padding: 0 var(--spacing-2);
|
||||
border: 1px solid $status-change-button-border;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import { initLocalState } from "./local";
|
||||
import localesData from "./locales";
|
||||
|
||||
// Import css variables.
|
||||
import "coral-ui/theme/variables.css";
|
||||
import "coral-ui/theme/admin.css";
|
||||
|
||||
async function main() {
|
||||
await injectConditionalPolyfills();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Localized } from "@fluent/react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
import { Message } from "coral-ui/components";
|
||||
import { Message } from "coral-ui/components/v2";
|
||||
|
||||
import styles from "./NetworkError.css";
|
||||
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.title {
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
color: var(--v2-colors-mono-100);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-title);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
color: var(--palette-text-100);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-4);
|
||||
|
||||
padding-bottom: var(--v2-spacing-3);
|
||||
padding-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: var(--v2-font-size-6);
|
||||
font-weight: var(--v2-font-weight-secondary-bold);
|
||||
font-family: var(--v2-font-family-secondary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-colors-mono-900);
|
||||
font-size: var(--font-size-6);
|
||||
font-weight: var(--font-weight-secondary-bold);
|
||||
font-family: var(--font-family-secondary);
|
||||
line-height: var(--line-height-7);
|
||||
color: var(--palette-text-900);
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding-bottom: var(--v2-spacing-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
.copy {
|
||||
font-size: var(--v2-font-size-3);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-colors-mono-500);
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-4);
|
||||
color: var(--palette-text-500);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lockIcon {
|
||||
color: var(--v2-colors-mono-900);
|
||||
padding-bottom: var(--v2-spacing-2);
|
||||
color: var(--palette-text-900);
|
||||
padding-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
.noPermission {
|
||||
font-size: var(--v2-font-size-4);
|
||||
font-weight: var(--v2-font-weight-primary-semi-bold);
|
||||
font-family: var(--v2-font-family-primary);
|
||||
line-height: var(--v2-line-height-reset);
|
||||
color: var(--v2-colors-mono-900);
|
||||
font-size: var(--font-size-4);
|
||||
font-weight: var(--font-weight-primary-semi-bold);
|
||||
font-family: var(--font-family-primary);
|
||||
line-height: var(--line-height-3);
|
||||
color: var(--palette-text-900);
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding-bottom: var(--v2-spacing-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
.contactAdmin {
|
||||
padding-top: var(--v2-spacing-3);
|
||||
padding-top: var(--spacing-3);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.root {
|
||||
font-family: var(--v2-font-family-primary);
|
||||
font-weight: var(--v2-font-weight-primary-regular);
|
||||
font-size: var(--v2-font-size-3);
|
||||
line-height: var(--v2-line-height-body-short);
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-primary-regular);
|
||||
font-size: var(--font-size-3);
|
||||
line-height: var(--line-height-field-description);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.button {
|
||||
padding: var(--v2-spacing-2);
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user