From 704ff5fda3c9daa28a2965a989ba19b5002c8541 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Wed, 28 Sep 2022 10:54:24 +0200 Subject: [PATCH] core(ct): align styling (#17573) aligned the global styling of the ct test projects and added dark mode --- .../ct-react-vite/src/assets/index.css | 7 +++ .../components/ct-react/src/assets/index.css | 7 +++ .../components/ct-solid/src/assets/index.css | 7 +++ tests/components/ct-solid/src/index.tsx | 3 +- .../ct-svelte-vite/playwright/index.ts | 2 +- .../ct-svelte-vite/src/assets/index.css | 20 ++++++ tests/components/ct-svelte-vite/src/main.ts | 1 + .../components/ct-svelte/playwright/index.ts | 1 + tests/components/ct-svelte/public/global.css | 63 ------------------- tests/components/ct-svelte/public/index.html | 1 - .../components/ct-svelte/src/assets/index.css | 20 ++++++ tests/components/ct-svelte/src/main.js | 1 + .../components/ct-vue-cli/playwright/index.js | 2 +- .../ct-vue-cli/src/assets/index.css | 20 ++++++ tests/components/ct-vue-cli/src/main.js | 1 + .../ct-vue-vite/playwright/index.js | 1 + .../ct-vue-vite/src/assets/index.css | 20 ++++++ tests/components/ct-vue-vite/src/main.js | 1 + .../ct-vue2-cli/playwright/index.js | 2 +- .../ct-vue2-cli/src/assets/index.css | 20 ++++++ tests/components/ct-vue2-cli/src/main.js | 1 + 21 files changed, 132 insertions(+), 69 deletions(-) create mode 100644 tests/components/ct-svelte-vite/src/assets/index.css delete mode 100644 tests/components/ct-svelte/public/global.css create mode 100644 tests/components/ct-svelte/src/assets/index.css create mode 100644 tests/components/ct-vue-cli/src/assets/index.css create mode 100644 tests/components/ct-vue-vite/src/assets/index.css create mode 100644 tests/components/ct-vue2-cli/src/assets/index.css diff --git a/tests/components/ct-react-vite/src/assets/index.css b/tests/components/ct-react-vite/src/assets/index.css index ec2585e8c0..97495c44b8 100644 --- a/tests/components/ct-react-vite/src/assets/index.css +++ b/tests/components/ct-react-vite/src/assets/index.css @@ -11,3 +11,10 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-react/src/assets/index.css b/tests/components/ct-react/src/assets/index.css index ec2585e8c0..97495c44b8 100644 --- a/tests/components/ct-react/src/assets/index.css +++ b/tests/components/ct-react/src/assets/index.css @@ -11,3 +11,10 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-solid/src/assets/index.css b/tests/components/ct-solid/src/assets/index.css index ec2585e8c0..97495c44b8 100644 --- a/tests/components/ct-solid/src/assets/index.css +++ b/tests/components/ct-solid/src/assets/index.css @@ -11,3 +11,10 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-solid/src/index.tsx b/tests/components/ct-solid/src/index.tsx index 1cb0a23d38..9ad9412423 100644 --- a/tests/components/ct-solid/src/index.tsx +++ b/tests/components/ct-solid/src/index.tsx @@ -1,7 +1,6 @@ /* @refresh reload */ import { render } from 'solid-js/web'; - -import './assets/index.css'; import App from './App'; +import './assets/index.css'; render(() => , document.getElementById('root') as HTMLElement); diff --git a/tests/components/ct-svelte-vite/playwright/index.ts b/tests/components/ct-svelte-vite/playwright/index.ts index 2cc871dee0..17487c90a3 100644 --- a/tests/components/ct-svelte-vite/playwright/index.ts +++ b/tests/components/ct-svelte-vite/playwright/index.ts @@ -1,5 +1,5 @@ //@ts-check - +import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; beforeMount(async ({ hooksConfig }) => { diff --git a/tests/components/ct-svelte-vite/src/assets/index.css b/tests/components/ct-svelte-vite/src/assets/index.css new file mode 100644 index 0000000000..97495c44b8 --- /dev/null +++ b/tests/components/ct-svelte-vite/src/assets/index.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-svelte-vite/src/main.ts b/tests/components/ct-svelte-vite/src/main.ts index aa7431f21e..ca8aaba9be 100644 --- a/tests/components/ct-svelte-vite/src/main.ts +++ b/tests/components/ct-svelte-vite/src/main.ts @@ -1,4 +1,5 @@ import App from './App.svelte'; +import './assets/index.css'; const app = new App({ target: document.getElementById('app') diff --git a/tests/components/ct-svelte/playwright/index.ts b/tests/components/ct-svelte/playwright/index.ts index d3a5d6623b..33958be194 100644 --- a/tests/components/ct-svelte/playwright/index.ts +++ b/tests/components/ct-svelte/playwright/index.ts @@ -1,4 +1,5 @@ //@ts-check +import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; beforeMount(async ({ hooksConfig }) => { diff --git a/tests/components/ct-svelte/public/global.css b/tests/components/ct-svelte/public/global.css deleted file mode 100644 index 0600f6820b..0000000000 --- a/tests/components/ct-svelte/public/global.css +++ /dev/null @@ -1,63 +0,0 @@ -html, body { - position: relative; - width: 100%; - height: 100%; -} - -body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -a { - color: rgb(0,100,200); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:visited { - color: rgb(0,80,160); -} - -label { - display: block; -} - -input, button, select, textarea { - font-family: inherit; - font-size: inherit; - -webkit-padding: 0.4em 0; - padding: 0.4em; - margin: 0 0 0.5em 0; - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; -} - -input:disabled { - color: #ccc; -} - -button { - color: #333; - background-color: #f4f4f4; - outline: none; -} - -button:disabled { - color: #999; -} - -button:not(:disabled):active { - background-color: #ddd; -} - -button:focus { - border-color: #666; -} diff --git a/tests/components/ct-svelte/public/index.html b/tests/components/ct-svelte/public/index.html index 471debaf03..74558940d0 100644 --- a/tests/components/ct-svelte/public/index.html +++ b/tests/components/ct-svelte/public/index.html @@ -7,7 +7,6 @@ Svelte app - diff --git a/tests/components/ct-svelte/src/assets/index.css b/tests/components/ct-svelte/src/assets/index.css new file mode 100644 index 0000000000..97495c44b8 --- /dev/null +++ b/tests/components/ct-svelte/src/assets/index.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-svelte/src/main.js b/tests/components/ct-svelte/src/main.js index 8e1efe955c..d5e74d2004 100644 --- a/tests/components/ct-svelte/src/main.js +++ b/tests/components/ct-svelte/src/main.js @@ -1,4 +1,5 @@ import App from './App.svelte'; +import './assets/index.css'; const app = new App({ target: document.body, diff --git a/tests/components/ct-vue-cli/playwright/index.js b/tests/components/ct-vue-cli/playwright/index.js index 29eaab5a6a..2139a9c94e 100644 --- a/tests/components/ct-vue-cli/playwright/index.js +++ b/tests/components/ct-vue-cli/playwright/index.js @@ -1,5 +1,5 @@ //@ts-check - +import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; beforeMount(async ({ app, hooksConfig }) => { diff --git a/tests/components/ct-vue-cli/src/assets/index.css b/tests/components/ct-vue-cli/src/assets/index.css new file mode 100644 index 0000000000..97495c44b8 --- /dev/null +++ b/tests/components/ct-vue-cli/src/assets/index.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-vue-cli/src/main.js b/tests/components/ct-vue-cli/src/main.js index 01433bca2a..d25dbd8b42 100644 --- a/tests/components/ct-vue-cli/src/main.js +++ b/tests/components/ct-vue-cli/src/main.js @@ -1,4 +1,5 @@ import { createApp } from 'vue' import App from './App.vue' +import './assets/index.css'; createApp(App).mount('#app') diff --git a/tests/components/ct-vue-vite/playwright/index.js b/tests/components/ct-vue-vite/playwright/index.js index e08043798b..2139a9c94e 100644 --- a/tests/components/ct-vue-vite/playwright/index.js +++ b/tests/components/ct-vue-vite/playwright/index.js @@ -1,4 +1,5 @@ //@ts-check +import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; beforeMount(async ({ app, hooksConfig }) => { diff --git a/tests/components/ct-vue-vite/src/assets/index.css b/tests/components/ct-vue-vite/src/assets/index.css new file mode 100644 index 0000000000..97495c44b8 --- /dev/null +++ b/tests/components/ct-vue-vite/src/assets/index.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-vue-vite/src/main.js b/tests/components/ct-vue-vite/src/main.js index 01433bca2a..719495a2f2 100644 --- a/tests/components/ct-vue-vite/src/main.js +++ b/tests/components/ct-vue-vite/src/main.js @@ -1,4 +1,5 @@ import { createApp } from 'vue' import App from './App.vue' +import './assets/index.css'; createApp(App).mount('#app') diff --git a/tests/components/ct-vue2-cli/playwright/index.js b/tests/components/ct-vue2-cli/playwright/index.js index 8d96634b19..966d595c23 100644 --- a/tests/components/ct-vue2-cli/playwright/index.js +++ b/tests/components/ct-vue2-cli/playwright/index.js @@ -1,5 +1,5 @@ //@ts-check - +import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks'; beforeMount(async ({ hooksConfig }) => { diff --git a/tests/components/ct-vue2-cli/src/assets/index.css b/tests/components/ct-vue2-cli/src/assets/index.css new file mode 100644 index 0000000000..97495c44b8 --- /dev/null +++ b/tests/components/ct-vue2-cli/src/assets/index.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +@media (prefers-color-scheme: light) { + :root { + color: #e3e3e3; + background-color: #1b1b1d; + } +} diff --git a/tests/components/ct-vue2-cli/src/main.js b/tests/components/ct-vue2-cli/src/main.js index 63eb05f711..b9840f5446 100644 --- a/tests/components/ct-vue2-cli/src/main.js +++ b/tests/components/ct-vue2-cli/src/main.js @@ -1,5 +1,6 @@ import Vue from 'vue' import App from './App.vue' +import './assets/index.css'; Vue.config.productionTip = false