diff --git a/config/paths.js b/config/paths.js index 4d852d0f6..d4c9b0768 100644 --- a/config/paths.js +++ b/config/paths.js @@ -53,6 +53,7 @@ module.exports = { appTsconfig: resolveApp("src/core/client/tsconfig.json"), appLocales: resolveApp("src/locales"), appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"), + appThemeGlobalCSS: resolveApp("src/core/client/ui/theme/global.css"), testsSetup: resolveApp("src/setupTests.js"), appNodeModules: resolveApp("node_modules"), diff --git a/config/postcss.config.js b/config/postcss.config.js index 578f539fb..a84634898 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -1,30 +1,59 @@ // Allow importing typescript files. require("ts-node/register"); -const precss = require("precss"); -const autoprefixer = require("autoprefixer"); -const fontMagician = require("postcss-font-magician"); 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 flexbugsFixes = require("postcss-flexbugs-fixes"); const paths = require("./paths"); +const autoprefixer = require("autoprefixer"); +const postcssFontMagician = require("postcss-font-magician"); +const postcssFlexbugsFixes = require("postcss-flexbugs-fixes"); +const postcssVariables = require("postcss-css-variables"); +const postcssPresetEnv = require("postcss-preset-env"); +const postcssNested = require("postcss-nested"); +const postcssImport = require("postcss-import"); +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( - flat(variables, { delimiter: "-" }), + mapValues(flat(variables, { delimiter: "-" }), v => v.toString()), (_, k) => kebabCase(k) ); +// These are the default css standard variables. +const cssVariables = pickBy( + flatKebabVariables, + (v, k) => !k.startsWith("breakpoints-") +); + +// These are sass style variables used in media queries. +const mediaQueryVariables = mapValues( + pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")), + v => `${v}px` +); + module.exports = { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: "postcss", plugins: [ - precss({ variables: flatKebabVariables }), - fontMagician(), - flexbugsFixes, + postcssPrependImports({ + path: "", + files: [paths.appThemeGlobalCSS], + }), + postcssImport(), + postcssNested(), + // Sass style variables to be used in media queries. + postcssAdvancedVariables({ variables: mediaQueryVariables }), + // CSS standard variables for everything else. + postcssVariables({ variables: cssVariables }), + postcssPresetEnv(), + postcssFontMagician(), + postcssFlexbugsFixes, autoprefixer({ browsers: [ ">1%", diff --git a/package-lock.json b/package-lock.json index 9cf345ffd..6720bf126 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1772,6 +1772,7 @@ "version": "16.4.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz", "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==", + "dev": true, "requires": { "csstype": "^2.2.0" } @@ -1795,6 +1796,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.1.tgz", "integrity": "sha512-ti7MKe0AuWCGpNkRzRsRB8ExS7NZotXtDtD27rX4HiZML37SetbIp3cw5FDXIeqIC7a3TzWuPjv/I9Qcu4YL3w==", + "dev": true, "requires": { "@types/react": "*" } @@ -6331,9 +6333,9 @@ "dev": true }, "cssdb": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz", - "integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz", + "integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA==", "dev": true }, "cssesc": { @@ -6484,7 +6486,8 @@ "csstype": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz", - "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==" + "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==", + "dev": true }, "currently-unhandled": { "version": "0.4.1", @@ -14156,13 +14159,32 @@ } }, "postcss-attribute-case-insensitive": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz", - "integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz", + "integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==", "dev": true, "requires": { - "postcss": "^6.0.0", - "postcss-selector-parser": "^2.2.3" + "postcss": "^6.0.23", + "postcss-selector-parser": "^4.0.0" + }, + "dependencies": { + "cssesc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz", + "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==", + "dev": true + }, + "postcss-selector-parser": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz", + "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==", + "dev": true, + "requires": { + "cssesc": "^1.0.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } } }, "postcss-calc": { @@ -14226,6 +14248,16 @@ } } }, + "postcss-color-functional-notation": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.1.tgz", + "integrity": "sha512-8ECwUd75SwcjLMzFdRVRBqjVoHwGeWpLQKCNIQo9T+QeCrUNKI1NJ6rgpni5vo7iZ7MZy21qKqUieMM3D0wHYQ==", + "dev": true, + "requires": { + "postcss": "^6.0.22", + "postcss-values-parser": "^1.5.0" + } + }, "postcss-color-hex-alpha": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz", @@ -14411,6 +14443,17 @@ } } }, + "postcss-css-variables": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.9.0.tgz", + "integrity": "sha512-pSNj57bdBaFnyDzt96SZOidMMWY7Q5OySQdKsTxaxehYO6EtNC5SAKIwjah/poh5vUmNthkrlOd03bP+HNGuCA==", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.3", + "extend": "^3.0.1", + "postcss": "^6.0.8" + } + }, "postcss-custom-media": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz", @@ -14441,22 +14484,28 @@ } }, "postcss-dir-pseudo-class": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz", - "integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz", + "integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==", "dev": true, "requires": { - "postcss": "^6.0.20", - "postcss-selector-parser": "^3.1.1" + "postcss": "^6.0.22", + "postcss-selector-parser": "^4.0.0" }, "dependencies": { + "cssesc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz", + "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==", + "dev": true + }, "postcss-selector-parser": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", - "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz", + "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==", "dev": true, "requires": { - "dot-prop": "^4.1.1", + "cssesc": "^1.0.1", "indexes-of": "^1.0.1", "uniq": "^1.0.1" } @@ -14759,6 +14808,16 @@ } } }, + "postcss-env-function": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz", + "integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==", + "dev": true, + "requires": { + "postcss": "^6.0.22", + "postcss-values-parser": "^1.5.0" + } + }, "postcss-extend-rule": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz", @@ -14838,14 +14897,23 @@ } }, "postcss-focus-visible": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz", - "integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz", + "integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==", "dev": true, "requires": { "postcss": "^6.0" } }, + "postcss-focus-within": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz", + "integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==", + "dev": true, + "requires": { + "postcss": "^6.0.21" + } + }, "postcss-font-family-system-ui": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz", @@ -14876,6 +14944,37 @@ "postcss": "^6.0.1" } }, + "postcss-gap-properties": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz", + "integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==", + "dev": true, + "requires": { + "postcss": "^6.0.22" + } + }, + "postcss-image-set-function": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz", + "integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==", + "dev": true, + "requires": { + "postcss": "^6.0.22", + "postcss-values-parser": "^1.5.0" + } + }, + "postcss-import": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz", + "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==", + "dev": true, + "requires": { + "postcss": "^6.0.1", + "postcss-value-parser": "^3.2.3", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + } + }, "postcss-initial": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz", @@ -14886,6 +14985,17 @@ "postcss": "^6.0.1" } }, + "postcss-lab-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.0.1.tgz", + "integrity": "sha512-kxaHXTRjlBLDpJUMsrGM0GnVgBrMqQz1HfaXdv3VNpz2EwwUhrU9uVfqv/NAtiWt6ZkD7IK2MUlncRoj024lIA==", + "dev": true, + "requires": { + "@csstools/convert-colors": "^1.4.0", + "postcss": "^6.0.22", + "postcss-values-parser": "^1.5.0" + } + }, "postcss-load-config": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz", @@ -15740,6 +15850,15 @@ } } }, + "postcss-overflow-shorthand": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz", + "integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==", + "dev": true, + "requires": { + "postcss": "^6.0.22" + } + }, "postcss-page-break": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz", @@ -15749,39 +15868,125 @@ "postcss": "^6.0.16" } }, - "postcss-preset-env": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz", - "integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==", + "postcss-place": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz", + "integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==", "dev": true, "requires": { - "@csstools/postcss-image-set-function": "^1.0.0", - "browserslist": "^3.2.4", - "caniuse-lite": "^1.0.30000823", - "cssdb": "^1.6.0", - "postcss": "^6.0.21", - "postcss-apply": "^0.9.0", - "postcss-attribute-case-insensitive": "^2.0.0", + "postcss": "^6.0.22", + "postcss-values-parser": "^1.5.0" + } + }, + "postcss-prepend-imports": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-prepend-imports/-/postcss-prepend-imports-1.0.1.tgz", + "integrity": "sha1-v0WBiAhcM/82mVzJbJFojWSYjig=", + "dev": true, + "requires": { + "postcss": "^5.0.0" + }, + "dependencies": { + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "dependencies": { + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", + "dev": true + }, + "postcss": { + "version": "5.2.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", + "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", + "dev": true, + "requires": { + "chalk": "^1.1.3", + "js-base64": "^2.1.9", + "source-map": "^0.5.6", + "supports-color": "^3.2.3" + } + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "dev": true, + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, + "postcss-preset-env": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.1.tgz", + "integrity": "sha512-zsGFBKtTyCY5YxOq6Q/WR4oa9/LOKawEWMxJ7UpMtfj1t50OWeGZadRQp/i7DSSWjKus+eJKLIHDxLaobwhidQ==", + "dev": true, + "requires": { + "autoprefixer": "^8.6.3", + "browserslist": "^3.2.8", + "caniuse-lite": "^1.0.30000859", + "cssdb": "^3.1.0", + "postcss": "^6.0.23", + "postcss-attribute-case-insensitive": "^3.0.1", + "postcss-color-functional-notation": "^1.0.1", "postcss-color-hex-alpha": "^3.0.0", "postcss-color-mod-function": "^2.4.2", - "postcss-color-rebeccapurple": "^3.0.0", - "postcss-color-rgb": "^2.0.0", + "postcss-color-rebeccapurple": "^3.1.0", "postcss-custom-media": "^6.0.0", "postcss-custom-properties": "^7.0.0", "postcss-custom-selectors": "^4.0.1", - "postcss-dir-pseudo-class": "^3.0.0", - "postcss-focus-visible": "^2.0.0", + "postcss-dir-pseudo-class": "^4.0.0", + "postcss-env-function": "^1.0.0", + "postcss-focus-visible": "^3.0.0", + "postcss-focus-within": "^2.0.0", "postcss-font-family-system-ui": "^3.0.0", "postcss-font-variant": "^3.0.0", + "postcss-gap-properties": "^1.0.0", + "postcss-image-set-function": "^2.0.0", "postcss-initial": "^2.0.0", + "postcss-lab-function": "^1.0.1", "postcss-logical": "^1.1.1", "postcss-media-minmax": "^3.0.0", - "postcss-nesting": "^4.2.1", + "postcss-nesting": "^6.0.0", + "postcss-overflow-shorthand": "^1.0.1", "postcss-page-break": "^1.0.0", - "postcss-pseudo-class-any-link": "^4.0.0", + "postcss-place": "^3.0.1", + "postcss-pseudo-class-any-link": "^5.0.0", "postcss-replace-overflow-wrap": "^2.0.0", "postcss-selector-matches": "^3.0.1", "postcss-selector-not": "^3.0.1" + }, + "dependencies": { + "postcss-nesting": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz", + "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==", + "dev": true, + "requires": { + "postcss": "^6.0.22" + } + } } }, "postcss-property-lookup": { @@ -15796,13 +16001,32 @@ } }, "postcss-pseudo-class-any-link": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz", - "integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz", + "integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==", "dev": true, "requires": { - "postcss": "^6.0.1", - "postcss-selector-parser": "^2.2.3" + "postcss": "^6.0.22", + "postcss-selector-parser": "^4.0.0" + }, + "dependencies": { + "cssesc": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz", + "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==", + "dev": true + }, + "postcss-selector-parser": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz", + "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==", + "dev": true, + "requires": { + "cssesc": "^1.0.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } } }, "postcss-reduce-idents": { @@ -16255,6 +16479,101 @@ "postcss-nested": "^3.0.0", "postcss-preset-env": "^3.2.2", "postcss-property-lookup": "^2.0.0" + }, + "dependencies": { + "cssdb": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz", + "integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==", + "dev": true + }, + "postcss-attribute-case-insensitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz", + "integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=", + "dev": true, + "requires": { + "postcss": "^6.0.0", + "postcss-selector-parser": "^2.2.3" + } + }, + "postcss-dir-pseudo-class": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz", + "integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==", + "dev": true, + "requires": { + "postcss": "^6.0.20", + "postcss-selector-parser": "^3.1.1" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, + "postcss-focus-visible": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz", + "integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==", + "dev": true, + "requires": { + "postcss": "^6.0" + } + }, + "postcss-preset-env": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz", + "integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==", + "dev": true, + "requires": { + "@csstools/postcss-image-set-function": "^1.0.0", + "browserslist": "^3.2.4", + "caniuse-lite": "^1.0.30000823", + "cssdb": "^1.6.0", + "postcss": "^6.0.21", + "postcss-apply": "^0.9.0", + "postcss-attribute-case-insensitive": "^2.0.0", + "postcss-color-hex-alpha": "^3.0.0", + "postcss-color-mod-function": "^2.4.2", + "postcss-color-rebeccapurple": "^3.0.0", + "postcss-color-rgb": "^2.0.0", + "postcss-custom-media": "^6.0.0", + "postcss-custom-properties": "^7.0.0", + "postcss-custom-selectors": "^4.0.1", + "postcss-dir-pseudo-class": "^3.0.0", + "postcss-focus-visible": "^2.0.0", + "postcss-font-family-system-ui": "^3.0.0", + "postcss-font-variant": "^3.0.0", + "postcss-initial": "^2.0.0", + "postcss-logical": "^1.1.1", + "postcss-media-minmax": "^3.0.0", + "postcss-nesting": "^4.2.1", + "postcss-page-break": "^1.0.0", + "postcss-pseudo-class-any-link": "^4.0.0", + "postcss-replace-overflow-wrap": "^2.0.0", + "postcss-selector-matches": "^3.0.1", + "postcss-selector-not": "^3.0.1" + } + }, + "postcss-pseudo-class-any-link": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz", + "integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=", + "dev": true, + "requires": { + "postcss": "^6.0.1", + "postcss-selector-parser": "^2.2.3" + } + } } }, "prelude-ls": { @@ -17072,6 +17391,23 @@ "react-is": "^16.4.1" } }, + "read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", + "dev": true, + "requires": { + "pify": "^2.3.0" + }, + "dependencies": { + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 2d312573d..60929a7f2 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@types/react-responsive": "^3.0.1", "apollo-server-express": "^1.3.6", "bunyan": "^1.8.12", "convict": "^4.3.0", @@ -71,8 +70,8 @@ "@types/ioredis": "^3.2.8", "@types/jest": "^23.1.1", "@types/joi": "^13.0.8", - "@types/lodash": "^4.14.109", "@types/jsdom": "^11.0.6", + "@types/lodash": "^4.14.109", "@types/luxon": "^0.5.3", "@types/mongodb": "^3.0.19", "@types/node": "^10.3.1", @@ -80,6 +79,7 @@ "@types/query-string": "^6.1.0", "@types/react-dom": "^16.0.6", "@types/react-relay": "github:coralproject/patched#types/react-relay", + "@types/react-responsive": "^3.0.1", "@types/react-test-renderer": "^16.0.1", "@types/recompose": "^0.26.1", "@types/relay-runtime": "github:coralproject/patched#types/relay-runtime", @@ -117,9 +117,15 @@ "jsdom": "^11.11.0", "loader-utils": "^1.1.0", "npm-run-all": "^4.1.3", + "postcss-advanced-variables": "^2.3.3", + "postcss-css-variables": "^0.9.0", "postcss-flexbugs-fixes": "^3.3.1", "postcss-font-magician": "^2.2.1", + "postcss-import": "^11.1.0", "postcss-loader": "^2.1.5", + "postcss-nested": "^3.0.0", + "postcss-preset-env": "^5.2.1", + "postcss-prepend-imports": "^1.0.1", "precss": "^3.1.2", "prettier": "^1.13.4", "query-string": "^6.1.0", diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css index c7f11300a..77dc9d88d 100644 --- a/src/core/client/stream/components/Comment.css +++ b/src/core/client/stream/components/Comment.css @@ -1,11 +1,10 @@ .root { - width: 400px; } .gutterBottom { - margin-bottom: calc(2px * $spacing-unit); + margin-bottom: calc(1px * var(--spacing-unit)); } .topBar { - margin-bottom: calc(1px * $spacing-unit); + margin-bottom: calc(0.5px * var(--spacing-unit)); } diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css index dcf73c502..19100de68 100644 --- a/src/core/client/stream/components/Indent.css +++ b/src/core/client/stream/components/Indent.css @@ -1,8 +1,8 @@ .root { border-left: 3px solid; - padding-left: calc(2px * $spacing-unit); + padding-left: calc(1px * var(--spacing-unit)); } .level0 { - border-color: $palette-secondary-darkest; + border-color: var(--palette-secondary-darkest); } diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css index c776ca7c8..2e9cdcc9e 100644 --- a/src/core/client/stream/components/PostCommentForm.css +++ b/src/core/client/stream/components/PostCommentForm.css @@ -3,11 +3,12 @@ display: block; height: 100px; - width: 400px; - margin-bottom: calc(2px * $spacing-unit); + width: 100%; + box-sizing: border-box; + margin-bottom: calc(1px * var(--spacing-unit)); } .postButtonContainer { display: flex; justify-content: flex-end; -} \ No newline at end of file +} diff --git a/src/core/client/stream/components/Stream.css b/src/core/client/stream/components/Stream.css new file mode 100644 index 000000000..13c90d031 --- /dev/null +++ b/src/core/client/stream/components/Stream.css @@ -0,0 +1,4 @@ +.root { + width: 100%; + max-width: 400px; +} diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx index a14816453..f6d39940e 100644 --- a/src/core/client/stream/components/Stream.tsx +++ b/src/core/client/stream/components/Stream.tsx @@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer"; import PostCommentFormContainer from "../containers/PostCommentFormContainer"; import ReplyListContainer from "../containers/ReplyListContainer"; import Logo from "./Logo"; +import * as styles from "./Stream.css"; export interface StreamProps { assetID: string; @@ -20,7 +21,7 @@ export interface StreamProps { const Stream: StatelessComponent = props => { return ( -
+
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css index 087cb0ca2..17283a819 100644 --- a/src/core/client/ui/components/Button/Button.css +++ b/src/core/client/ui/components/Button/Button.css @@ -4,7 +4,7 @@ &:enabled, &:disabled { padding: 5px 20px; - border-radius: $round-corners; + border-radius: var(--round-corners); background-color: transparent; /* TODO: hover styles for the default button */ } @@ -24,70 +24,70 @@ .primary:enabled, .primary:disabled { - background-color: $palette-primary-main; + background-color: var(--palette-primary-main); color: #fff; } .primary:enabled { &:hover { - background-color: $palette-primary-light; + background-color: var(--palette-primary-light); } &:active { - background-color: $palette-primary-lighter; + background-color: var(--palette-primary-lighter); } } .primary:enabled.invert, .primary:disabled.invert { background-color: transparent; - border: 1px solid $palette-primary-main; - color: $palette-primary-main; + border: 1px solid var(--palette-primary-main); + color: var(--palette-primary-main); } .primary:enabled.invert { &:hover { - border-color: $palette-primary-light; - color: $palette-primary-light; + border-color: var(--palette-primary-light); + color: var(--palette-primary-light); } &:active { - border-color: $palette-primary-lighter; - color: $palette-primary-lighter; + border-color: var(--palette-primary-lighter); + color: var(--palette-primary-lighter); } } .secondary:enabled, .secondary:disabled { - background-color: $palette-secondary-main; + background-color: var(--palette-secondary-main); color: #fff; } .secondary:enabled { &:hover { - background-color: $palette-secondary-light; + background-color: var(--palette-secondary-light); } &:active { - background-color: $palette-secondary-lighter; + background-color: var(--palette-secondary-lighter); } } .secondary:enabled.invert, .secondary:disabled.invert { background-color: transparent; - border: 1px solid $palette-secondary-main; - color: $palette-secondary-main; + border: 1px solid var(--palette-secondary-main); + color: var(--palette-secondary-main); } .secondary:enabled.invert { &:hover { - border-color: $palette-secondary-light; - color: $palette-secondary-light; + border-color: var(--palette-secondary-light); + color: var(--palette-secondary-light); } &:active { - border-color: $palette-secondary-lighter; - color: $palette-secondary-lighter; + border-color: var(--palette-secondary-lighter); + color: var(--palette-secondary-lighter); } } diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css index e026c61ee..da31711e9 100644 --- a/src/core/client/ui/components/Typography/Typography.css +++ b/src/core/client/ui/components/Typography/Typography.css @@ -11,19 +11,19 @@ composes: heading2 from "talk-ui/shared/typography.css"; } -.heading3 { +.heading3 { composes: heading3 from "talk-ui/shared/typography.css"; } -.heading4 { +.heading4 { composes: heading4 from "talk-ui/shared/typography.css"; } -.subtitle1 { +.subtitle1 { composes: subtitle1 from "talk-ui/shared/typography.css"; } -.subtitle2 { +.subtitle2 { composes: subtitle2 from "talk-ui/shared/typography.css"; } @@ -31,7 +31,7 @@ composes: body1 from "talk-ui/shared/typography.css"; } -.body2 { +.body2 { composes: body2 from "talk-ui/shared/typography.css"; } @@ -70,7 +70,7 @@ } .paragraph { - margin-bottom: calc(2px * $spacing-unit); + margin-bottom: calc(1px * var(--spacing-unit)); } .colorInherit { @@ -78,17 +78,17 @@ } .colorPrimary { - color: $palette-primary-main; + color: var(--palette-primary-main); } .colorSecondary { - color: $palette-secondary-main; + color: var(--palette-secondary-main); } .colorTextSecondary { - color: $palette-text-secondary; + color: var(--palette-text-secondary); } .colorError { - color: $palette-error-main; + color: var(--palette-error-main); } diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index 649460503..cd94c867d 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -1,59 +1,63 @@ .heading1 { - font-size: calc(24rem / $rem-base); - font-weight: $font-weight-medium; + font-size: calc(24rem / var(--rem-base)); + font-weight: var(--font-weight-medium); font-family: "Manuale"; line-height: calc(32em / 24); letter-spacing: calc(0.2em / 16); - color: $palette-text-primary; + color: var(--palette-text-primary); } .heading2 { - font-size: calc(20rem / $rem-base); - font-weight: $font-weight-medium; + font-size: calc(20rem / var(--rem-base)); + font-weight: var(--font-weight-medium); font-family: "Manuale"; line-height: calc(24em / 20); - color: $palette-text-primary; + color: var(--palette-text-primary); } .heading3 { - font-size: calc(18rem / $rem-base); - font-weight: $font-weight-medium; + font-size: calc(18rem / var(--rem-base)); + font-weight: var(--font-weight-medium); font-family: "Manuale"; line-height: calc(20em / 18); letter-spacing: calc(0.2em / 16); - color: $palette-text-primary; + color: var(--palette-text-primary); } .heading4 { - font-size: calc(16rem / $rem-base); - font-weight: $font-weight-medium; + font-size: calc(16rem / var(--rem-base)); + font-weight: var(--font-weight-medium); font-family: "Manuale"; line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); - color: $palette-text-primary; + color: var(--palette-text-primary); } -.subtitle1 {} +.subtitle1 { +} -.subtitle2 {} +.subtitle2 { +} -.body2 {} +.body2 { +} .body1 { - font-size: calc(16rem / $rem-base); - font-weight: $font-weight-regular; + font-size: calc(16rem / var(--rem-base)); + font-weight: var(--font-weight-regular); font-family: "Source Sans Pro"; line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); - color: $palette-text-primary; + color: var(--palette-text-primary); } .button { - color: $palette-text-secondary; + color: var(--palette-text-secondary); font-family: "Source Sans Pro"; - font-weight: $font-weight-medium; + font-weight: var(--font-weight-medium); font-size: 16px; letter-spacing: calc(0.57em / 16); } -.overline {} +.overline { +} diff --git a/src/core/client/ui/theme/global.css b/src/core/client/ui/theme/global.css new file mode 100644 index 000000000..7fca83e7d --- /dev/null +++ b/src/core/client/ui/theme/global.css @@ -0,0 +1,5 @@ +@media (max-width: $breakpoints-sm) { + :root { + --spacing-unit: calc(0.5 * var(--spacing-unit)); + } +} diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts index a0966ec9e..fb1abe4b6 100644 --- a/src/core/client/ui/theme/variables.ts +++ b/src/core/client/ui/theme/variables.ts @@ -58,7 +58,7 @@ const variables = { }, }, /* gitter and spacing */ - spacingUnit: 5, + spacingUnit: 10, /* Borders */ roundCorners: "2px", /* Typography */