diff --git a/apps/website/src/App.scss b/apps/website/src/App.scss new file mode 100644 index 00000000000..e77a728a224 --- /dev/null +++ b/apps/website/src/App.scss @@ -0,0 +1 @@ +@import "~@webiny/app-website/styles.scss"; diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx index 39799db5484..42f275b5e53 100644 --- a/apps/website/src/App.tsx +++ b/apps/website/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Website } from "@webiny/app-website"; +import "./App.scss"; export const App = () => { return ; diff --git a/extensions/theme/src/global.scss b/extensions/theme/src/global.scss index 6137d59b0fa..e7061655bd2 100644 --- a/extensions/theme/src/global.scss +++ b/extensions/theme/src/global.scss @@ -1,53 +1,5 @@ +// Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); - -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote { - &:before, &:after { - content: ''; - content: none; - } -} - -q { - &:before, &:after { - content: ''; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} +// Fonts used with the default theme. +@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); diff --git a/package.json b/package.json index 246bdde8a81..e1f962e879e 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "lint-staged": "lint-staged", "postinstall": "yarn node ./scripts/linkWorkspaces.js", "prepublishOnly": "node scripts/prepublishOnly", - "prettier": "prettier \"**/**/*.{js,jsx,ts,tsx,json}\" --config .prettierrc.js", + "prettier": "prettier \"**/**/*.{js,jsx,ts,tsx,json,scss}\" --config .prettierrc.js", "prettier:check": "yarn prettier --check", "prettier:fix": "yarn prettier --write", "lint:fix": "yarn eslint:fix && yarn prettier:fix", diff --git a/packages/app-admin/package.json b/packages/app-admin/package.json index 3ac8bf15c5f..3a84da3e117 100644 --- a/packages/app-admin/package.json +++ b/packages/app-admin/package.json @@ -52,6 +52,7 @@ "react-dom": "18.2.0", "react-hotkeyz": "^1.0.4", "react-transition-group": "^4.3.0", + "reset-css": "^5.0.1", "store": "^2.0.12" }, "devDependencies": { @@ -85,7 +86,8 @@ "dependencies": [ "@svgr/webpack", "@emotion/react", - "@types/mime" + "@types/mime", + "reset-css" ], "peerDependencies": [ "react-dom" diff --git a/packages/app-admin/src/styles.scss b/packages/app-admin/src/styles.scss index 3029ad3a2fc..661f11cc324 100644 --- a/packages/app-admin/src/styles.scss +++ b/packages/app-admin/src/styles.scss @@ -1,2 +1,3 @@ +@import "./styles/reset"; @import "./styles/theme"; @import "./styles/material"; diff --git a/packages/app-admin/src/styles/material.scss b/packages/app-admin/src/styles/material.scss index c3e66338a33..7b4d5c8707f 100644 --- a/packages/app-admin/src/styles/material.scss +++ b/packages/app-admin/src/styles/material.scss @@ -40,4 +40,3 @@ body { font-family: "Source Sans Pro"; } - diff --git a/packages/app-admin/src/styles/reset.scss b/packages/app-admin/src/styles/reset.scss new file mode 100644 index 00000000000..3c5f558d261 --- /dev/null +++ b/packages/app-admin/src/styles/reset.scss @@ -0,0 +1 @@ +@import "reset-css/sass/reset"; diff --git a/packages/app-website/package.json b/packages/app-website/package.json index a500b17cb2d..fac17518df3 100644 --- a/packages/app-website/package.json +++ b/packages/app-website/package.json @@ -28,7 +28,8 @@ "graphql-tag": "^2.12.6", "react": "18.2.0", "react-dom": "18.2.0", - "react-helmet": "^6.1.0" + "react-helmet": "^6.1.0", + "reset-css": "^5.0.1" }, "devDependencies": { "@babel/cli": "^7.23.9", @@ -50,6 +51,13 @@ "build": "yarn webiny run build", "watch": "yarn webiny run watch" }, + "adio": { + "ignore": { + "dependencies": [ + "reset-css" + ] + } + }, "svgo": { "plugins": { "removeViewBox": false diff --git a/packages/app-website/src/styles.scss b/packages/app-website/src/styles.scss new file mode 100644 index 00000000000..974f4c0e466 --- /dev/null +++ b/packages/app-website/src/styles.scss @@ -0,0 +1 @@ +@import "./styles/reset"; diff --git a/packages/app-website/src/styles/reset.scss b/packages/app-website/src/styles/reset.scss new file mode 100644 index 00000000000..3c5f558d261 --- /dev/null +++ b/packages/app-website/src/styles/reset.scss @@ -0,0 +1 @@ +@import "reset-css/sass/reset"; diff --git a/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss b/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss index e2417306dde..e6fc74cf997 100644 --- a/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss +++ b/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss @@ -4,7 +4,7 @@ body { margin: 0; color: white; background-color: white; - font-family: 'Trebuchet MS', sans-serif; + font-family: "Trebuchet MS", sans-serif; } a { diff --git a/packages/cwp-template-aws/template/common/apps/website/src/App.scss b/packages/cwp-template-aws/template/common/apps/website/src/App.scss new file mode 100644 index 00000000000..e77a728a224 --- /dev/null +++ b/packages/cwp-template-aws/template/common/apps/website/src/App.scss @@ -0,0 +1 @@ +@import "~@webiny/app-website/styles.scss"; diff --git a/packages/cwp-template-aws/template/common/apps/website/src/App.tsx b/packages/cwp-template-aws/template/common/apps/website/src/App.tsx index 39799db5484..42f275b5e53 100644 --- a/packages/cwp-template-aws/template/common/apps/website/src/App.tsx +++ b/packages/cwp-template-aws/template/common/apps/website/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Website } from "@webiny/app-website"; +import "./App.scss"; export const App = () => { return ; diff --git a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss index 6137d59b0fa..e7061655bd2 100644 --- a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss +++ b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss @@ -1,53 +1,5 @@ +// Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); - -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote { - &:before, &:after { - content: ''; - content: none; - } -} - -q { - &:before, &:after { - content: ''; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} +// Fonts used with the default theme. +@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); diff --git a/yarn.lock b/yarn.lock index 2127a4d1a9b..3d9d2734da9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15203,6 +15203,7 @@ __metadata: react-dom: 18.2.0 react-hotkeyz: ^1.0.4 react-transition-group: ^4.3.0 + reset-css: ^5.0.1 rimraf: ^5.0.5 store: ^2.0.12 ttypescript: ^1.5.12 @@ -16344,6 +16345,7 @@ __metadata: react: 18.2.0 react-dom: 18.2.0 react-helmet: ^6.1.0 + reset-css: ^5.0.1 rimraf: ^5.0.5 ttypescript: ^1.5.12 typescript: 4.7.4 @@ -35894,6 +35896,13 @@ __metadata: languageName: node linkType: hard +"reset-css@npm:^5.0.1": + version: 5.0.2 + resolution: "reset-css@npm:5.0.2" + checksum: d6955ea4d852c21510d6f50dc06e151a90e0d7d6fa43aac7a79f3779c72a1eb3a5769a2eb9f5c490675376888e9a4bfbc34937cd7d4198ab65a1c73620819b1a + languageName: node + linkType: hard + "resize-observer-polyfill@npm:^1.5.1": version: 1.5.1 resolution: "resize-observer-polyfill@npm:1.5.1"