From f4784c371822fb7a05b21d1004635b09321f1447 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 13 Jun 2023 08:42:03 +0100 Subject: [PATCH 01/30] Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here --- package.json | 1 + res/themes/light/css/light.pcss | 2 + res/themes/light/icons/$icons.json | 1 + res/themes/light/icons/chat.svg | 3 + res/themes/light/icons/check-circle.svg | 3 + res/themes/light/icons/check.svg | 3 + res/themes/light/icons/chevron.svg | 3 + res/themes/light/icons/close.svg | 3 + res/themes/light/icons/computer.svg | 3 + res/themes/light/icons/delete.svg | 3 + res/themes/light/icons/error.svg | 3 + res/themes/light/icons/info.svg | 3 + res/themes/light/icons/lock.svg | 3 + res/themes/light/icons/mobile.svg | 3 + res/themes/light/icons/thread.svg | 1 + res/themes/light/icons/user.svg | 3 + .../light/icons/visibility-invisible.svg | 3 + res/themes/light/icons/visibility-visible.svg | 3 + res/themes/light/icons/web-browser.svg | 3 + src/theme.ts | 10 + yarn.lock | 190 +++++++++++++++++- 21 files changed, 247 insertions(+), 3 deletions(-) create mode 100644 res/themes/light/icons/$icons.json create mode 100644 res/themes/light/icons/chat.svg create mode 100644 res/themes/light/icons/check-circle.svg create mode 100644 res/themes/light/icons/check.svg create mode 100644 res/themes/light/icons/chevron.svg create mode 100644 res/themes/light/icons/close.svg create mode 100644 res/themes/light/icons/computer.svg create mode 100644 res/themes/light/icons/delete.svg create mode 100644 res/themes/light/icons/error.svg create mode 100644 res/themes/light/icons/info.svg create mode 100644 res/themes/light/icons/lock.svg create mode 100644 res/themes/light/icons/mobile.svg create mode 100644 res/themes/light/icons/thread.svg create mode 100644 res/themes/light/icons/user.svg create mode 100644 res/themes/light/icons/visibility-invisible.svg create mode 100644 res/themes/light/icons/visibility-visible.svg create mode 100644 res/themes/light/icons/web-browser.svg diff --git a/package.json b/package.json index ffdc149531d..0f25dc7ff1e 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@sentry/browser": "^7.0.0", "@sentry/tracing": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", + "@vector-im/compound-design-tokens": "https://github.com/vector-im/compound-design-tokens#develop", "await-lock": "^2.1.0", "blurhash": "^1.1.3", "classnames": "^2.2.6", diff --git a/res/themes/light/css/light.pcss b/res/themes/light/css/light.pcss index 4c661ae5c68..e9335ad8d5a 100644 --- a/res/themes/light/css/light.pcss +++ b/res/themes/light/css/light.pcss @@ -1,3 +1,5 @@ +@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); + @import "../../../../res/css/_font-sizes.pcss"; @import "_paths.pcss"; @import "_fonts.pcss"; diff --git a/res/themes/light/icons/$icons.json b/res/themes/light/icons/$icons.json new file mode 100644 index 00000000000..51b91d5e925 --- /dev/null +++ b/res/themes/light/icons/$icons.json @@ -0,0 +1 @@ +{"icon":{"chat":{"value":"icons/chat.svg","type":"icon"},"check-circle":{"value":"icons/check-circle.svg","type":"icon"},"check":{"value":"icons/check.svg","type":"icon"},"chevron":{"value":"icons/chevron.svg","type":"icon"},"close":{"value":"icons/close.svg","type":"icon"},"computer":{"value":"icons/computer.svg","type":"icon"},"delete":{"value":"icons/delete.svg","type":"icon"},"error":{"value":"icons/error.svg","type":"icon"},"info":{"value":"icons/info.svg","type":"icon"},"lock":{"value":"icons/lock.svg","type":"icon"},"mobile":{"value":"icons/mobile.svg","type":"icon"},"thread":{"value":"icons/thread.svg","type":"icon"},"user":{"value":"icons/user.svg","type":"icon"},"visibility-invisible":{"value":"icons/visibility-invisible.svg","type":"icon"},"visibility-visible":{"value":"icons/visibility-visible.svg","type":"icon"},"web-browser":{"value":"icons/web-browser.svg","type":"icon"}}} \ No newline at end of file diff --git a/res/themes/light/icons/chat.svg b/res/themes/light/icons/chat.svg new file mode 100644 index 00000000000..57967455b86 --- /dev/null +++ b/res/themes/light/icons/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/check-circle.svg b/res/themes/light/icons/check-circle.svg new file mode 100644 index 00000000000..31c33fb47ba --- /dev/null +++ b/res/themes/light/icons/check-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/check.svg b/res/themes/light/icons/check.svg new file mode 100644 index 00000000000..2ae753c0d42 --- /dev/null +++ b/res/themes/light/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/chevron.svg b/res/themes/light/icons/chevron.svg new file mode 100644 index 00000000000..489ff41349d --- /dev/null +++ b/res/themes/light/icons/chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/close.svg b/res/themes/light/icons/close.svg new file mode 100644 index 00000000000..0022f456692 --- /dev/null +++ b/res/themes/light/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/computer.svg b/res/themes/light/icons/computer.svg new file mode 100644 index 00000000000..8fee20c8754 --- /dev/null +++ b/res/themes/light/icons/computer.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/delete.svg b/res/themes/light/icons/delete.svg new file mode 100644 index 00000000000..45ffae79bf3 --- /dev/null +++ b/res/themes/light/icons/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/error.svg b/res/themes/light/icons/error.svg new file mode 100644 index 00000000000..4c099168c55 --- /dev/null +++ b/res/themes/light/icons/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/info.svg b/res/themes/light/icons/info.svg new file mode 100644 index 00000000000..73edb2bc7e2 --- /dev/null +++ b/res/themes/light/icons/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/lock.svg b/res/themes/light/icons/lock.svg new file mode 100644 index 00000000000..703c74445d9 --- /dev/null +++ b/res/themes/light/icons/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/mobile.svg b/res/themes/light/icons/mobile.svg new file mode 100644 index 00000000000..364a1a91bdd --- /dev/null +++ b/res/themes/light/icons/mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/thread.svg b/res/themes/light/icons/thread.svg new file mode 100644 index 00000000000..f26e7b7a9bb --- /dev/null +++ b/res/themes/light/icons/thread.svg @@ -0,0 +1 @@ + diff --git a/res/themes/light/icons/user.svg b/res/themes/light/icons/user.svg new file mode 100644 index 00000000000..7198c3e2824 --- /dev/null +++ b/res/themes/light/icons/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/visibility-invisible.svg b/res/themes/light/icons/visibility-invisible.svg new file mode 100644 index 00000000000..d5182e9f556 --- /dev/null +++ b/res/themes/light/icons/visibility-invisible.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/visibility-visible.svg b/res/themes/light/icons/visibility-visible.svg new file mode 100644 index 00000000000..d27fa0ca6ea --- /dev/null +++ b/res/themes/light/icons/visibility-visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/light/icons/web-browser.svg b/res/themes/light/icons/web-browser.svg new file mode 100644 index 00000000000..0282c5682c2 --- /dev/null +++ b/res/themes/light/icons/web-browser.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/theme.ts b/src/theme.ts index 5fc7a6e50cb..22c920294e4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -269,6 +269,16 @@ export async function setTheme(theme?: string): Promise { const styleSheet = styleElements.get(stylesheetName)!; styleSheet.disabled = false; + document.body.classList.remove("cpd-theme-light", "cpd-theme-dark", "cpd-theme-light-hc", "cpd-theme-dark-hc"); + + let compoundThemeClassName = `cpd-theme-` + (stylesheetName.includes("light") ? "light" : "dark"); + // Always respect user OS preference! + if (isHighContrastTheme(theme) || window.matchMedia("(prefers-contrast: more)").matches) { + compoundThemeClassName += "-hc"; + } + + document.body.classList.add(compoundThemeClassName); + return new Promise((resolve, reject) => { const switchTheme = function (): void { // we re-enable our theme here just in case we raced with another diff --git a/yarn.lock b/yarn.lock index 30f65ad079c..79542789820 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2059,6 +2059,11 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== +"@trysound/sax@0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" + integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== + "@tsconfig/node10@^1.0.7": version "1.0.9" resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2" @@ -2323,6 +2328,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/q@^1.5.1": + version "1.5.5" + resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df" + integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ== + "@types/qrcode@^1.3.5": version "1.5.0" resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.5.0.tgz#6a98fe9a9a7b2a9a3167b6dde17eff999eabe40b" @@ -2585,11 +2595,22 @@ "@typescript-eslint/types" "5.59.6" eslint-visitor-keys "^3.3.0" +"@vector-im/compound-design-tokens@https://github.com/vector-im/compound-design-tokens#develop": + version "0.0.2" + resolved "https://github.com/vector-im/compound-design-tokens#cc950d575f8536ff5bebbd02e28c0b8ab541aa29" + dependencies: + svg2vectordrawable "^2.9.1" + abab@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA== +abs-svg-path@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf" + integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA== + acorn-globals@^7.0.0: version "7.0.1" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3" @@ -3049,6 +3070,11 @@ blurhash@^1.1.3: resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.5.tgz#3034104cd5dce5a3e5caa871ae2f0f1f2d0ab566" integrity sha512-a+LO3A2DfxTaTztsmkbLYmUzUeApi0LZuKalwbNmqAHR6HhJGMt1qSV/R3wc+w4DL28holjqO3Bg74aUGavGjg== +boolbase@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" + integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -3165,7 +3191,7 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw== -chalk@^2.0.0: +chalk@^2.0.0, chalk@^2.4.1: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -3314,6 +3340,15 @@ co@^4.6.0: resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ== +coa@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3" + integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA== + dependencies: + "@types/q" "^1.5.1" + chalk "^2.4.1" + q "^1.1.2" + collect-v8-coverage@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59" @@ -3370,6 +3405,11 @@ commander@^6.2.1: resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== +commander@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" + integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== + commander@^8.3.0: version "8.3.0" resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" @@ -3511,6 +3551,25 @@ css-functions-list@^3.1.0: resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b" integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w== +css-select@^4.1.3: + version "4.3.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b" + integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ== + dependencies: + boolbase "^1.0.0" + css-what "^6.0.1" + domhandler "^4.3.1" + domutils "^2.8.0" + nth-check "^2.0.1" + +css-tree@^1.1.2, css-tree@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" + integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== + dependencies: + mdn-data "2.0.14" + source-map "^0.6.1" + css-tree@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20" @@ -3519,6 +3578,11 @@ css-tree@^2.3.1: mdn-data "2.0.30" source-map-js "^1.0.1" +css-what@^6.0.1: + version "6.1.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" + integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== + css.escape@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" @@ -3539,6 +3603,13 @@ cssfontparser@^1.2.1: resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3" integrity sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg== +csso@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529" + integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA== + dependencies: + css-tree "^1.1.2" + cssom@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" @@ -3828,6 +3899,15 @@ dom-helpers@^5.0.1: "@babel/runtime" "^7.8.7" csstype "^3.0.2" +dom-serializer@^1.0.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" + integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag== + dependencies: + domelementtype "^2.0.1" + domhandler "^4.2.0" + entities "^2.0.0" + dom-serializer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" @@ -3837,7 +3917,7 @@ dom-serializer@^2.0.0: domhandler "^5.0.2" entities "^4.2.0" -domelementtype@^2.3.0: +domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== @@ -3849,6 +3929,13 @@ domexception@^4.0.0: dependencies: webidl-conversions "^7.0.0" +domhandler@^4.2.0, domhandler@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c" + integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== + dependencies: + domelementtype "^2.2.0" + domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3: version "5.0.3" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" @@ -3856,6 +3943,15 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3: dependencies: domelementtype "^2.3.0" +domutils@^2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" + integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== + dependencies: + dom-serializer "^1.0.1" + domelementtype "^2.2.0" + domhandler "^4.2.0" + domutils@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c" @@ -3942,6 +4038,11 @@ enquirer@^2.3.6: dependencies: ansi-colors "^4.1.1" +entities@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" + integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== + entities@^4.2.0, entities@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174" @@ -5429,6 +5530,11 @@ is-subset@^0.1.1: resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6" integrity sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw== +is-svg-path@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-svg-path/-/is-svg-path-1.0.2.tgz#77ab590c12b3d20348e5c7a13d0040c87784dda0" + integrity sha512-Lj4vePmqpPR1ZnRctHv8ltSh1OrSxHkhUkd7wi+VQdcdP15/KvQFyk7LhNuM7ZW0EVbJz8kZLVmL9quLrfq4Kg== + is-symbol@^1.0.2, is-symbol@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c" @@ -6514,6 +6620,11 @@ md5@^2.3.0: crypt "0.0.2" is-buffer "~1.1.6" +mdn-data@2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" + integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== + mdn-data@2.0.30: version "2.0.30" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc" @@ -6639,7 +6750,7 @@ minimist@>=1.2.2, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1 resolved "https://registry.yarnpkg.com/minipass/-/minipass-6.0.2.tgz#542844b6c4ce95b202c0995b0a471f1229de4c81" integrity sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w== -mkdirp@1.0.4, mkdirp@~1.0.4: +mkdirp@1.0.4, mkdirp@^1.0.4, mkdirp@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== @@ -6739,6 +6850,13 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== +normalize-svg-path@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c" + integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg== + dependencies: + svg-arc-to-cubic-bezier "^3.0.0" + npm-run-path@^4.0.0, npm-run-path@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea" @@ -6746,6 +6864,13 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1: dependencies: path-key "^3.0.0" +nth-check@^2.0.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d" + integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w== + dependencies: + boolbase "^1.0.0" + nwsapi@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.3.tgz#00e04dfd5a4a751e5ec2fecdc75dfd2f0db820fa" @@ -6954,6 +7079,11 @@ parse-srcset@^1.0.2: resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1" integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q== +parse-svg-path@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb" + integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ== + parse5@^7.0.0, parse5@^7.1.1: version "7.1.2" resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32" @@ -7277,6 +7407,11 @@ pvutils@^1.1.3: resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3" integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ== +q@^1.1.2: + version "1.5.1" + resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" + integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw== + qrcode@1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170" @@ -7951,6 +8086,11 @@ sshpk@^1.14.1: safer-buffer "^2.0.2" tweetnacl "~0.14.0" +stable@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf" + integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w== + stack-utils@^2.0.3: version "2.0.6" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f" @@ -8201,11 +8341,55 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +svg-arc-to-cubic-bezier@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6" + integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g== + +svg-path-bounds@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/svg-path-bounds/-/svg-path-bounds-1.0.2.tgz#00312f672b08afc432a66ddfbd06db40cec8d0d0" + integrity sha512-H4/uAgLWrppIC0kHsb2/dWUYSmb4GE5UqH06uqWBcg6LBjX2fu0A8+JrO2/FJPZiSsNOKZAhyFFgsLTdYUvSqQ== + dependencies: + abs-svg-path "^0.1.1" + is-svg-path "^1.0.1" + normalize-svg-path "^1.0.0" + parse-svg-path "^0.1.2" + svg-tags@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA== +svg2vectordrawable@^2.9.1: + version "2.9.1" + resolved "https://registry.yarnpkg.com/svg2vectordrawable/-/svg2vectordrawable-2.9.1.tgz#23186ff7ace7038d09c031176dbca04063a97e5d" + integrity sha512-7WJIh4SzZLyEJtn45y+f8rREkgBiQMWfb0FoYkXuioywESjDWfbSuP0FQEmIiHP2zOi0oOO8pTG4VkeWJyidWw== + dependencies: + coa "^2.0.2" + mkdirp "^1.0.4" + svg-path-bounds "^1.0.1" + svgo "^2.8.0" + svgpath "^2.5.0" + +svgo@^2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24" + integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg== + dependencies: + "@trysound/sax" "0.2.0" + commander "^7.2.0" + css-select "^4.1.3" + css-tree "^1.1.3" + csso "^4.2.0" + picocolors "^1.0.0" + stable "^0.1.8" + +svgpath@^2.5.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.6.0.tgz#5b160ef3d742b7dfd2d721bf90588d3450d7a90d" + integrity sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" From a0451d097ee822da84e85a5c4c3d36c12e4d90b4 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 13 Jun 2023 09:23:46 +0100 Subject: [PATCH 02/30] Pareto color pass on the light theme --- res/css/_common.pcss | 9 +- res/css/compound/_Icon.pcss | 2 +- res/css/views/dialogs/_PollCreateDialog.pcss | 2 +- res/css/views/elements/_SSOButtons.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 2 +- res/css/views/rooms/_EditMessageComposer.pcss | 2 +- res/css/views/rooms/_MessageComposer.pcss | 4 +- .../views/rooms/_RecentlyViewedButton.pcss | 2 +- res/css/views/rooms/_RoomHeader.pcss | 16 +-- res/css/views/rooms/_ThreadSummary.pcss | 4 +- .../_EditWysiwygComposer.pcss | 2 +- .../components/_FormattingButtons.pcss | 4 +- res/css/views/settings/_FontScalingPanel.pcss | 2 +- res/css/views/settings/_LayoutSwitcher.pcss | 2 +- res/css/views/voip/_CallView.pcss | 2 +- res/themes/dark/css/_dark.pcss | 29 ++++- res/themes/legacy-dark/css/_legacy-dark.pcss | 29 ++++- .../legacy-light/css/_legacy-light.pcss | 29 ++++- res/themes/light-custom/css/_custom.pcss | 5 - res/themes/light/css/_light.pcss | 123 ++++++++++-------- 21 files changed, 176 insertions(+), 98 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 6a3d9f03d41..86e1eb9bbfa 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -236,7 +236,7 @@ legend { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid rgba($primary-content, 0.1); + border: 1px solid var(--cpd-color-gray-300); /* these things should probably not be defined globally */ margin: 9px; } @@ -249,7 +249,7 @@ legend { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder, .mx_textinput input::placeholder { - color: rgba($input-darker-fg-color, 0.75); + color: var(--cpd-color-text-placeholder); } } @@ -789,7 +789,8 @@ legend { } @define-mixin composerButtonHighLight { - background: rgba($accent, 0.25); + /* TODO: Refactor as this will break for apps that override the accent color */ + background: var(--cpd-color-green-300); /* make the icon the accent color too */ &::before { background-color: $accent !important; @@ -832,7 +833,7 @@ legend { &:hover { &::after { - background: rgba($hover-color, 0.1); + background: var(--cpd-color-bg-action-secondary-hovered); } &::before { diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss index 07f9eb5a0e7..185fb24f3ce 100644 --- a/res/css/compound/_Icon.pcss +++ b/res/css/compound/_Icon.pcss @@ -29,7 +29,7 @@ limitations under the License. } .mx_Icon_bg-accent-light { - background-color: rgba($accent, 0.1); + background-color: $accent-300; } .mx_Icon_alert { diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0f9ba92cf14..5d2feef532f 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -18,7 +18,7 @@ limitations under the License. .mx_PollCreateDialog_busy { position: absolute; inset: 0; - background-color: rgba($background, 0.6); + background-color: var(--cpd-color-alpha-gray-800); z-index: 1; } diff --git a/res/css/views/elements/_SSOButtons.pcss b/res/css/views/elements/_SSOButtons.pcss index d91e448b491..7498a2c39d0 100644 --- a/res/css/views/elements/_SSOButtons.pcss +++ b/res/css/views/elements/_SSOButtons.pcss @@ -46,7 +46,7 @@ limitations under the License. } .mx_SSOButton:hover { - background-color: $panel-hover; + background-color: var(--cpd-color-alpha-gray-300); } .mx_SSOButton_default { diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 549399d3c57..556dea8ce54 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -44,7 +44,7 @@ limitations under the License. width: $size; size: 0.5rem; - border: $border-size solid rgba($muted-fg-color, 0.5); + border: $border-size solid var(--cpd-color-border-interactive-primary); box-sizing: border-box; border-radius: $border-radius; diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index d8ea74586c4..8598f53882a 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -69,7 +69,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid rgba($primary-content, 0.1); + border-bottom: 1px solid var(--cpd-color-gray-600); } .mx_UserInfo_memberDetailsContainer { diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss index b684f4f32b4..f90207fce4c 100644 --- a/res/css/views/rooms/_EditMessageComposer.pcss +++ b/res/css/views/rooms/_EditMessageComposer.pcss @@ -33,7 +33,7 @@ limitations under the License. padding: 3px 6px; &:focus { - border-color: rgba($accent, 0.5); /* Only ever used here */ + border-color: $accent-500; } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index a7b0d8787b8..008886029b7 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -197,7 +197,7 @@ limitations under the License. &.mx_MessageComposer_closeButtonMenu { &::after { - background: rgba($accent, 0.1); + background: $accent-300; } &::before { @@ -235,7 +235,7 @@ limitations under the License. &.mx_MessageComposer_closeButtonMenu { &::after { - background: rgba($accent, 0.1); + background: $accent-300; } &::before { diff --git a/res/css/views/rooms/_RecentlyViewedButton.pcss b/res/css/views/rooms/_RecentlyViewedButton.pcss index f4e9206c67f..540559b1449 100644 --- a/res/css/views/rooms/_RecentlyViewedButton.pcss +++ b/res/css/views/rooms/_RecentlyViewedButton.pcss @@ -19,7 +19,7 @@ limitations under the License. width: max-content; max-width: 240px; max-height: 400px; - border: 1px solid rgba($primary-content, 0.1); + border: 1px solid var(--cpd-color-gray-300); border-radius: 8px; box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08); display: flex; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index b12cb38ef16..83068393e58 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -191,7 +191,7 @@ limitations under the License. } &:hover { - background: rgba($accent, 0.1); + background: $accent-300; &::before { background-color: $accent; @@ -209,7 +209,7 @@ limitations under the License. border-radius: 50%; transform: scale(1.6); transform-origin: center center; - background: rgba($background, 1); + background: $background; } .mx_RoomHeader_button_unreadIndicator { @@ -219,18 +219,18 @@ limitations under the License. margin: 4px; &.mx_Indicator_red { - background: rgba($alert, 1); - box-shadow: rgba($alert, 1); + background: $alert; + box-shadow: $alert; } &.mx_Indicator_gray { - background: rgba($room-icon-unread-color, 1); - box-shadow: rgba($room-icon-unread-color, 1); + background: $room-icon-unread-color; + box-shadow: $room-icon-unread-color; } &.mx_Indicator_bold { - background: rgba($primary-content, 1); - box-shadow: rgba($primary-content, 1); + background: $primary-content; + box-shadow: $primary-content; } } diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index f57bde39bcd..edf779614ec 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -55,8 +55,8 @@ limitations under the License. bottom: 0; width: 60px; box-sizing: border-box; - /* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */ - background: linear-gradient(270deg, $system 50%, $system-transparent 100%); + /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */ + background: linear-gradient(270deg, $system 50%, #e1e6ec00 100%); opacity: 0; transform: translateX(60px); diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss index b711a634d1e..235c2db91f7 100644 --- a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss +++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss @@ -32,7 +32,7 @@ limitations under the License. padding: 3px 6px; &:focus { - border-color: rgba($accent, 0.5); /* Only ever used here */ + border-color: $accent-400; } } diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss index 8e3dd22c997..3355f4e0d6c 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss @@ -34,7 +34,7 @@ limitations under the License. .mx_FormattingButtons_Button_hover { &:hover { - background: rgba($secondary-content, 0.1); + background: var(--cpd-color-bg-subtle-secondary); .mx_FormattingButtons_Icon { color: $secondary-content; @@ -43,7 +43,7 @@ limitations under the License. } .mx_FormattingButtons_active { - background: rgba($accent, 0.1); + background: $accent-300; .mx_FormattingButtons_Icon { color: $accent; diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss index 87d92e4b0a7..49e1e9630ab 100644 --- a/res/css/views/settings/_FontScalingPanel.pcss +++ b/res/css/views/settings/_FontScalingPanel.pcss @@ -40,7 +40,7 @@ limitations under the License. display: flex; align-items: center; padding: 15px $spacing-20 35px; - background: rgba($quinary-content, 0.2); + background: var(--cpd-color-bg-subtle-secondary); border-radius: 10px; font-size: $font-10px; diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 94952e31b6d..17ebafd159c 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -71,7 +71,7 @@ limitations under the License. } .mx_StyledRadioButton_checked { - background-color: rgba($accent, 0.08); + background-color: $accent-200; } .mx_EventTile { diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 8241ff92270..e8d9c2f63f9 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -104,7 +104,7 @@ limitations under the License. left: 0; right: 0; - background-color: rgba($call-background, 0.9); + background-color: var(--cpd-color-gray-1100); display: flex; justify-content: center; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 2b10d70739d..f36ebf48974 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -7,18 +7,39 @@ $quaternary-content: #6f7882; $quinary-content: #394049; $system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ $background: #15191e; $overlay-background: rgba($background, 0.85); $panel-base: #8d97a5; /* This color is not intended for use in the app */ $panels: rgba($system, 0.9); -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); $panel-actions: rgba($panel-base, 0.2); -$space-nav: rgba($panel-base, 0.1); /* ******************** */ +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessery during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ + $accent-100: var(--cpd-color-green-100); + $accent-200: var(--cpd-color-green-200); + $accent-300: var(--cpd-color-green-300); + $accent-400: var(--cpd-color-green-400); + $accent-500: var(--cpd-color-green-500); + $accent-600: var(--cpd-color-green-600); + $accent-700: var(--cpd-color-green-700); + $accent-800: var(--cpd-color-green-800); + $accent-900: var(--cpd-color-green-900); + $accent-1000: var(--cpd-color-green-1000); + $accent-1100: var(--cpd-color-green-1100); + $accent-1200: var(--cpd-color-green-1200); + $accent-1300: var(--cpd-color-green-1300); + $accent-1400: var(--cpd-color-green-1400); + /* Reused Figma non-compound colors */ /* ******************** */ $inverted-bg-color: $background; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 8955ca888d5..54446b0e002 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -1,6 +1,5 @@ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ $system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ /* unified palette */ /* try to use these colors when possible */ @@ -97,17 +96,37 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; $system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); $panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); $panel-actions: $roomtile-selected-bg-color; -$space-nav: rgba($panel-base, 0.1); +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessery during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ + $accent-100: var(--cpd-color-green-100); + $accent-200: var(--cpd-color-green-200); + $accent-300: var(--cpd-color-green-300); + $accent-400: var(--cpd-color-green-400); + $accent-500: var(--cpd-color-green-500); + $accent-600: var(--cpd-color-green-600); + $accent-700: var(--cpd-color-green-700); + $accent-800: var(--cpd-color-green-800); + $accent-900: var(--cpd-color-green-900); + $accent-1000: var(--cpd-color-green-1000); + $accent-1100: var(--cpd-color-green-1100); + $accent-1200: var(--cpd-color-green-1200); + $accent-1300: var(--cpd-color-green-1300); + $accent-1400: var(--cpd-color-green-1400); /* Legacy theme backports */ /* ******************** */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 9ce9c28d310..a881164fb2b 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -150,16 +150,12 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; $system: #f4f6fa; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); $panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panel-selected: rgba($tertiary-content, 0.3); -$panel-hover: rgba($tertiary-content, 0.1); $panel-actions: $roomtile-selected-bg-color; -$space-nav: rgba($tertiary-content, 0.15); /* Legacy theme backports */ /* ******************** */ @@ -194,6 +190,31 @@ $username-variant6-color: #2dc2c5; $username-variant7-color: #5c56f5; $username-variant8-color: #74d12c; +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessery during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ + $accent-100: var(--cpd-color-green-100); + $accent-200: var(--cpd-color-green-200); + $accent-300: var(--cpd-color-green-300); + $accent-400: var(--cpd-color-green-400); + $accent-500: var(--cpd-color-green-500); + $accent-600: var(--cpd-color-green-600); + $accent-700: var(--cpd-color-green-700); + $accent-800: var(--cpd-color-green-800); + $accent-900: var(--cpd-color-green-900); + $accent-1000: var(--cpd-color-green-1000); + $accent-1100: var(--cpd-color-green-1100); + $accent-1200: var(--cpd-color-green-1200); + $accent-1300: var(--cpd-color-green-1300); + $accent-1400: var(--cpd-color-green-1400); + /* ******************** */ $widget-menu-bar-bg-color: $secondary-accent-color; diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index c883952652c..5a632c988f8 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -26,16 +26,11 @@ $secondary-content: var(--secondary-content, $secondary-content); $tertiary-content: var(--tertiary-content, $tertiary-content); $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); -/* XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670 */ -$system-transparent: var(--system-transparent, rgba($system, 0)); $system: var(--system, $system); $background: var(--background, $background); $panels: rgba($system, 0.9); $panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */ -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); $panel-actions: rgba($panel-base, 0.2); -$space-nav: rgba($panel-base, 0.1); /* --accent-color */ $username-variant3-color: var(--accent-color); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 58ab8930583..89139879f9a 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -15,42 +15,63 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ /* ******************** */ -$primary-content: #17191c; -$secondary-content: #737d8c; -$tertiary-content: #8d97a5; -$quaternary-content: #c1c6cd; -$quinary-content: #e3e8f0; - -$system: #f4f6fa; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ -$background: #ffffff; -$overlay-background: rgba($background, 0.85); - -$panels: rgba($system, 0.9); -$panel-selected: rgba($tertiary-content, 0.3); -$panel-hover: rgba($tertiary-content, 0.1); -$panel-actions: rgba($tertiary-content, 0.2); -$space-nav: rgba($tertiary-content, 0.15); - -$accent: #0dbd8b; -$alert: #ff5b55; -$links: #0086e6; -$link-external: #0467dd; - -$username-variant1-color: #368bd6; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #0dbd8b; -$username-variant4-color: #e64f7a; -$username-variant5-color: #ff812d; -$username-variant6-color: #2dc2c5; -$username-variant7-color: #5c56f5; -$username-variant8-color: #74d12c; -/* ******************** */ +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-700); +$quinary-content: var(--cpd-color-gray-600); + +$system: var(--cpd-color-bg-subtle-primary); +$background: var(--cpd-color-bg-canvas-default); +$overlay-background: var(--cpd-color-alpha-gray-1300); + +$panels: var(--cpd-color-bg-subtle-secondary); +$panel-actions: var(--cpd-color-alpha-gray-400); + +$accent: var(--cpd-color-text-action-accent); +$alert: var(--cpd-color-text-critical-primary); +$links: var(--cpd-color-text-link-external); +$link-external: var(--cpd-color-text-link-external); + +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); +/* ******************** */ + +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessery during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* Reused Figma non-compound colors */ /* ******************** */ -$inverted-bg-color: #27303a; -$header-panel-bg-color: #f3f8fd; +$inverted-bg-color: var(--cpd-color-bg-action-primary-rest); +$header-panel-bg-color: var(--cpd-color-bg-subtle-primary); /* ******************** */ /* Theme specific colors */ @@ -61,15 +82,15 @@ $icon-button-color: $quaternary-content; /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ /* ******************** */ $selection-fg-color: $background; -$yellow-background: #fff8e3; +$yellow-background: var(--cpd-color-yellow-200); $secondary-accent-color: #f2f5f8; $button-fg-color: $background; $neutral-badge-color: #dbdbdb; -$strong-input-border-color: #c7c7c7; -$preview-widget-bar-color: #dddddd; +$strong-input-border-color: var(--cpd-color-border-interactive-primary); +$preview-widget-bar-color: var(--cpd-color-subtle-secondary); $accent-fg-color: $background; -$accent-alt: #238cf5; -$info-plinth-fg-color: #888; +$accent-alt: var(--cpd-color-text-link-external); +$info-plinth-fg-color: var(--cpd-color-gray-900); /* ******************** */ /* Colors that aren't in Figma - we need to get rid of these */ @@ -158,7 +179,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9); /* Dialog */ /* ******************** */ -$dialog-title-fg-color: #45474a; +$dialog-title-fg-color: var(--cpd-color-text-primary); $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-close-fg-color: #c1c1c1; $dialog-close-external-color: $background; @@ -181,12 +202,12 @@ $roomtile-default-badge-bg-color: $muted-fg-color; /* e2e */ /* ******************** */ -$e2e-verified-color: #0dbd8b; -$e2e-unknown-color: #e8bf37; -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ff5b55; -$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); -$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); +$e2e-verified-color: var(--cpd-color-green-900); +$e2e-unknown-color: var(--cpd-color-yellow-900); +$e2e-unverified-color: var(--cpd-color-green-900); +$e2e-warning-color: var(--cpd-color-red-900); +$e2e-verified-color-light: var(--cpd-color-green-400); +$e2e-warning-color-light: var(--cpd-color-red-400); /* ******************** */ /* Tabbed views */ @@ -320,14 +341,14 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* Location sharing */ /* ******************** */ -$location-marker-color: #ffffff; -$location-live-color: #5c56f5; -$location-live-secondary-color: #deddfd; +$location-marker-color: var(--cpd-color-icon-on-solid-primary); +$location-live-color: var(--cpd-color-purple-900); +$location-live-secondary-color: var(--cpd-color-purple-600);; /* ******************** */ /* Voice Broadcast */ /* ******************** */ -$live-badge-color: #ffffff; +$live-badge-color: var(--cpd-color-icon-on-solid-primary); /* ******************** */ body { @@ -339,11 +360,11 @@ body { /* diff highlight colors */ /* ******************** */ .hljs-addition { - background: #dfd; + background: var(--cpd-color-green-500); } .hljs-deletion { - background: #fdd; + background: var(--cpd-color-red-500);; } /* ******************** */ From 5e260ea89c41a2d2c0ab15451b97cf4fff21745d Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 16 Jun 2023 11:53:39 +0100 Subject: [PATCH 03/30] bugfixes in the light color pass --- res/css/structures/_RoomView.pcss | 4 ++-- res/css/structures/_SpacePanel.pcss | 2 +- res/css/views/beta/_BetaCard.pcss | 2 +- res/css/views/rooms/_MessageComposer.pcss | 2 ++ res/css/views/rooms/_RoomHeader.pcss | 4 ++-- res/css/views/settings/_LayoutSwitcher.pcss | 1 + res/themes/light-custom/css/_custom.pcss | 4 ++-- res/themes/light/css/_light.pcss | 4 ++-- 8 files changed, 13 insertions(+), 10 deletions(-) diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index b70649029f0..73254b7f71c 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -258,8 +258,8 @@ limitations under the License. height: var(--RoomHeader-indicator-dot-size); border-radius: 50%; transform: scale(1); - background: rgba(var(--RoomHeader-indicator-pulseColor), 1); - box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1); + background: var(--RoomHeader-indicator-pulseColor); + box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor); animation: mx_Indicator_pulse 2s infinite; animation-iteration-count: 1; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index a149eae6395..eff0df7f3c7 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -369,7 +369,7 @@ limitations under the License. .mx_UserMenu { padding: 0 2px 8px; - border-bottom: 1px solid $quinary-content; + border-bottom: 1px solid var(--cpd-color-gray-700); margin: 12px 14px 4px 18px; } } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 47ab7b005be..c4186c099f1 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -16,7 +16,7 @@ limitations under the License. .mx_BetaCard { padding: $spacing-24; - background-color: $system; + background-color: var(--cpd-color-bg-subtle-secondary); border-radius: 8px; box-sizing: border-box; color: $secondary-content; diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 008886029b7..daa45a8a4b0 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -202,6 +202,7 @@ limitations under the License. &::before { background-color: $accent; + z-index: 2; } } @@ -240,6 +241,7 @@ limitations under the License. &::before { background-color: $accent; + z-index: 2; } } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 83068393e58..06cf4cbc4a9 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -56,7 +56,7 @@ limitations under the License. min-width: 0; margin: 0 20px 0 16px; padding-top: 6px; - border-bottom: 1px solid $system; + border-bottom: 1px solid var(--cpd-color-gray-500); .mx_InviteOnlyIcon_large { margin: 0; @@ -112,7 +112,7 @@ limitations under the License. } &[aria-expanded="true"] { - background-color: $quinary-content; + background-color: var(--cpd-color-gray-400); .mx_RoomHeader_chevron { transform: rotate(180deg); diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 17ebafd159c..48d891641a2 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -28,6 +28,7 @@ limitations under the License. flex-shrink: 1; display: flex; flex-direction: column; + overflow: hidden; flex-basis: 33%; min-width: 0; diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index 5a632c988f8..cdf012275a7 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -28,9 +28,9 @@ $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); $system: var(--system, $system); $background: var(--background, $background); -$panels: rgba($system, 0.9); +$panels: var(--cpd-color-gray-600); $panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */ -$panel-actions: rgba($panel-base, 0.2); +$panel-actions: var(--cpd-color-gray-300); /* --accent-color */ $username-variant3-color: var(--accent-color); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 89139879f9a..b5bef17bede 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -18,8 +18,8 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI $primary-content: var(--cpd-color-text-primary); $secondary-content: var(--cpd-color-text-secondary); $tertiary-content: var(--cpd-color-gray-800); -$quaternary-content: var(--cpd-color-gray-700); -$quinary-content: var(--cpd-color-gray-600); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); $system: var(--cpd-color-bg-subtle-primary); $background: var(--cpd-color-bg-canvas-default); From d7a115a0a0340de3c96d55dddccd377eb04dcf3b Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 19 Jun 2023 15:20:16 +0100 Subject: [PATCH 04/30] Compound color pass dark theme --- res/css/_common.pcss | 1 + res/css/structures/_LeftPanel.pcss | 7 ---- res/css/views/elements/_Tooltip.pcss | 2 +- res/themes/dark/css/_dark.pcss | 38 +++++++++++-------- res/themes/legacy-dark/css/_legacy-dark.pcss | 1 - .../legacy-light/css/_legacy-light.pcss | 1 - res/themes/light-custom/css/_custom.pcss | 1 - res/themes/light/css/_light.pcss | 2 +- 8 files changed, 25 insertions(+), 28 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index d49f5e4d9ca..1415b199d8c 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -18,6 +18,7 @@ limitations under the License. */ @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); +@import "./_theme.pcss"; @import "./_font-sizes.pcss"; @import "./_font-weights.pcss"; @import "./_animations.pcss"; diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss index 9cbffc77d4a..390f0e3b20b 100644 --- a/res/css/structures/_LeftPanel.pcss +++ b/res/css/structures/_LeftPanel.pcss @@ -14,13 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MatrixChat--with-avatar { - .mx_LeftPanel, - .mx_LeftPanel .mx_LeftPanel_roomListContainer { - background-color: transparent; - } -} - .mx_LeftPanel_outerWrapper { display: flex; flex-direction: column; diff --git a/res/css/views/elements/_Tooltip.pcss b/res/css/views/elements/_Tooltip.pcss index 575fe703cec..b8363f600fc 100644 --- a/res/css/views/elements/_Tooltip.pcss +++ b/res/css/views/elements/_Tooltip.pcss @@ -72,7 +72,7 @@ limitations under the License. word-break: break-word; background-color: #21262c; /* Same on both themes */ - color: $accent-fg-color; + color: $secondary-content; border: 0; text-align: center; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index f36ebf48974..886aeb89a75 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -1,18 +1,24 @@ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* ******************** */ -$primary-content: #ffffff; -$secondary-content: #a9b2bc; -$tertiary-content: #8e99a4; -$quaternary-content: #6f7882; -$quinary-content: #394049; +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); -$system: #21262c; -$background: #15191e; -$overlay-background: rgba($background, 0.85); +$system: var(--cpd-color-bg-subtle-primary); +$background: var(--cpd-color-bg-canvas-default); +$overlay-background: var(--cpd-color-alpha-gray-1300); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panels: rgba($system, 0.9); -$panel-actions: rgba($panel-base, 0.2); +$panels: var(--cpd-color-bg-subtle-secondary); +$panel-actions: var(--cpd-color-alpha-gray-400); +/* ******************** */ + +/* RoomList */ +/* ******************** */ +$roomlist-bg-color: rgba(45, 45, 45, 0.9); /* TODO: there's no corresponding compound color */ +$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); +$roomtile-default-badge-bg-color: $muted-fg-color; /* ******************** */ /** @@ -42,13 +48,13 @@ $panel-actions: rgba($panel-base, 0.2); /* Reused Figma non-compound colors */ /* ******************** */ -$inverted-bg-color: $background; -$header-panel-bg-color: #20252b; +$inverted-bg-color: var(--cpd-color-bg-action-primary-rest); +$header-panel-bg-color: var(--cpd-color-bg-subtle-primary); /* ******************** */ /* Theme specific colors */ /* ******************** */ -$icon-button-color: $tertiary-content; +$icon-button-color: $secondary-content; /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ @@ -136,7 +142,7 @@ $dialog-close-external-color: $primary-content; /* RoomList */ /* ******************** */ -$roomlist-bg-color: rgba($system, 0.9); +$system: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); $roomtile-default-badge-bg-color: $input-darker-fg-color; /* ******************** */ @@ -244,7 +250,7 @@ $appearance-tab-border-color: $room-highlight-color; $composer-shadow-color: rgba(0, 0, 0, 0.28); $breadcrumb-placeholder-bg-color: #272c35; $theme-button-bg-color: #e3e8f0; -$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); +$resend-button-divider-color: var(--cpd-color-gray-700); $inlinecode-border-color: $quinary-content; $inlinecode-background-color: $system; $codeblock-background-color: #2a3039; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 54446b0e002..6cca471e23f 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -100,7 +100,6 @@ $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ $panel-actions: $roomtile-selected-bg-color; /** diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index a881164fb2b..fda48236590 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -154,7 +154,6 @@ $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ $panel-actions: $roomtile-selected-bg-color; /* Legacy theme backports */ diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index cdf012275a7..115d0b9b709 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -29,7 +29,6 @@ $quinary-content: var(--quinary-content, $quinary-content); $system: var(--system, $system); $background: var(--background, $background); $panels: var(--cpd-color-gray-600); -$panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */ $panel-actions: var(--cpd-color-gray-300); /* --accent-color */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index b5bef17bede..5e98b3cab3f 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -76,7 +76,7 @@ $header-panel-bg-color: var(--cpd-color-bg-subtle-primary); /* Theme specific colors */ /* ******************** */ -$icon-button-color: $quaternary-content; +$icon-button-color: $secondary-content; /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ From ee40c0098856bc9eb0540dfd2c9cc32bb8588d3d Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 19 Jun 2023 15:32:31 +0100 Subject: [PATCH 05/30] Compound color pass high contrast --- .../css/_light-high-contrast.pcss | 59 +++++++++++++------ 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index e1b79a7bf30..e5cf4eb1e5d 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -1,21 +1,21 @@ /* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */ -$accent: #268075; -$alert: #d62c25; -$links: #0a6eca; -$primary-content: #17191c; -$secondary-content: #5e6266; -$tertiary-content: $secondary-content; -$quaternary-content: $secondary-content; -$quinary-content: $secondary-content; - -$username-variant1-color: #0a6eca; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #078662; -$username-variant4-color: #cc1449; -$username-variant5-color: #be4c00; -$username-variant6-color: #1c7274; -$username-variant7-color: #5c56f5; -$username-variant8-color: #3e810a; +$accent: var(--cpd-color-text-action-accent); +$alert: var(--cpd-color-text-critical-primary); +$links: var(--cpd-color-text-link-external); +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); + +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); $accent-alt: $links; $input-border-color: $secondary-content; @@ -34,6 +34,31 @@ $appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; $roomtopic-color: $secondary-content; +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessery during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ + $accent-100: var(--cpd-color-green-100); + $accent-200: var(--cpd-color-green-200); + $accent-300: var(--cpd-color-green-300); + $accent-400: var(--cpd-color-green-400); + $accent-500: var(--cpd-color-green-500); + $accent-600: var(--cpd-color-green-600); + $accent-700: var(--cpd-color-green-700); + $accent-800: var(--cpd-color-green-800); + $accent-900: var(--cpd-color-green-900); + $accent-1000: var(--cpd-color-green-1000); + $accent-1100: var(--cpd-color-green-1100); + $accent-1200: var(--cpd-color-green-1200); + $accent-1300: var(--cpd-color-green-1300); + $accent-1400: var(--cpd-color-green-1400); + /* Draw an outline on buttons with focus */ .mx_AccessibleButton:focus { outline: 2px solid $accent; From 4293b01fc93fc0d940138d86d8a4fe4a45496c60 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 28 Jun 2023 08:35:04 +0100 Subject: [PATCH 06/30] Fix typo --- res/css/_common.pcss | 1 - res/themes/dark/css/_dark.pcss | 16 ++++++++-------- res/themes/legacy-dark/css/_legacy-dark.pcss | 2 +- res/themes/legacy-light/css/_legacy-light.pcss | 2 +- .../css/_light-high-contrast.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 1415b199d8c..d49f5e4d9ca 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -18,7 +18,6 @@ limitations under the License. */ @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); -@import "./_theme.pcss"; @import "./_font-sizes.pcss"; @import "./_font-weights.pcss"; @import "./_animations.pcss"; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 886aeb89a75..7fed0928596 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -23,13 +23,13 @@ $roomtile-default-badge-bg-color: $muted-fg-color; /** * Creating a `semantic` color scale. This will not be needed with the new - * visual language, but necessery during the transition period + * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` * * To use under very rare circumstances, always prefer the semantics defined - * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + * in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs */ $accent-100: var(--cpd-color-green-100); $accent-200: var(--cpd-color-green-200); @@ -49,7 +49,7 @@ $roomtile-default-badge-bg-color: $muted-fg-color; /* Reused Figma non-compound colors */ /* ******************** */ $inverted-bg-color: var(--cpd-color-bg-action-primary-rest); -$header-panel-bg-color: var(--cpd-color-bg-subtle-primary); +$header-panel-bg-color: var(--cpd-color-bg-subtle-secondary); /* ******************** */ /* Theme specific colors */ @@ -312,10 +312,10 @@ body { .mx_SplashPage::before { background-image: radial-gradient( 53.85% 66.75% at 87.55% 0%, - hsla(0, 0%, 11%, 0.15) 0%, - hsla(250, 100%, 88%, 0) 100% + hsla(0deg, 0%, 11%, 0.15) 0%, + hsla(250deg, 100%, 88%, 0) 100% ), - radial-gradient(41.93% 41.93% at 0% 0%, hsla(0, 0%, 38%, 0.28) 0%, hsla(250, 100%, 88%, 0) 100%), - radial-gradient(100% 100% at 0% 0%, hsla(250, 100%, 88%, 0.3) 0%, hsla(0, 100%, 86%, 0) 100%), - radial-gradient(106.35% 96.26% at 100% 0%, hsla(25, 100%, 88%, 0.4) 0%, hsla(167, 76%, 82%, 0) 100%) !important; + radial-gradient(41.93% 41.93% at 0% 0%, hsla(0deg, 0%, 38%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%), + radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.3) 0%, hsla(0deg, 100%, 86%, 0) 100%), + radial-gradient(106.35% 96.26% at 100% 0%, hsla(25deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%) !important; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 6cca471e23f..4f020f72689 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -104,7 +104,7 @@ $panel-actions: $roomtile-selected-bg-color; /** * Creating a `semantic` color scale. This will not be needed with the new - * visual language, but necessery during the transition period + * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index fda48236590..53321f67cc6 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -191,7 +191,7 @@ $username-variant8-color: #74d12c; /** * Creating a `semantic` color scale. This will not be needed with the new - * visual language, but necessery during the transition period + * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index e5cf4eb1e5d..b096c29090b 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -36,7 +36,7 @@ $roomtopic-color: $secondary-content; /** * Creating a `semantic` color scale. This will not be needed with the new - * visual language, but necessery during the transition period + * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 5e98b3cab3f..02b253b9abf 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -45,7 +45,7 @@ $username-variant8-color: var(--cpd-color-lime-900); /** * Creating a `semantic` color scale. This will not be needed with the new - * visual language, but necessery during the transition period + * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` From 0bd9b3bd397903ce510b40f1a463ad5501f466c1 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 29 Jun 2023 11:22:45 +0100 Subject: [PATCH 07/30] fix tooltip --- res/css/views/elements/_Tooltip.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_Tooltip.pcss b/res/css/views/elements/_Tooltip.pcss index b8363f600fc..575fe703cec 100644 --- a/res/css/views/elements/_Tooltip.pcss +++ b/res/css/views/elements/_Tooltip.pcss @@ -72,7 +72,7 @@ limitations under the License. word-break: break-word; background-color: #21262c; /* Same on both themes */ - color: $secondary-content; + color: $accent-fg-color; border: 0; text-align: center; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 02b253b9abf..00f56a44395 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -88,7 +88,7 @@ $button-fg-color: $background; $neutral-badge-color: #dbdbdb; $strong-input-border-color: var(--cpd-color-border-interactive-primary); $preview-widget-bar-color: var(--cpd-color-subtle-secondary); -$accent-fg-color: $background; +$accent-fg-color: #f4f6fa; $accent-alt: var(--cpd-color-text-link-external); $info-plinth-fg-color: var(--cpd-color-gray-900); /* ******************** */ From 19484d1459493c1f96a3082daca2004656508922 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 29 Jun 2023 14:47:36 +0100 Subject: [PATCH 08/30] Fix PR feedback --- res/css/views/dialogs/_PollCreateDialog.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 2 +- .../legacy-light/css/_legacy-light.pcss | 16 +++++++-------- res/themes/light-custom/css/_custom.pcss | 20 +++++++++++++++++++ res/themes/light/icons/$icons.json | 1 - res/themes/light/icons/chat.svg | 3 --- res/themes/light/icons/check-circle.svg | 3 --- res/themes/light/icons/check.svg | 3 --- res/themes/light/icons/chevron.svg | 3 --- res/themes/light/icons/close.svg | 3 --- res/themes/light/icons/computer.svg | 3 --- res/themes/light/icons/delete.svg | 3 --- res/themes/light/icons/error.svg | 3 --- res/themes/light/icons/info.svg | 3 --- res/themes/light/icons/lock.svg | 3 --- res/themes/light/icons/mobile.svg | 3 --- res/themes/light/icons/thread.svg | 1 - res/themes/light/icons/user.svg | 3 --- .../light/icons/visibility-invisible.svg | 3 --- res/themes/light/icons/visibility-visible.svg | 3 --- res/themes/light/icons/web-browser.svg | 3 --- 21 files changed, 30 insertions(+), 57 deletions(-) delete mode 100644 res/themes/light/icons/$icons.json delete mode 100644 res/themes/light/icons/chat.svg delete mode 100644 res/themes/light/icons/check-circle.svg delete mode 100644 res/themes/light/icons/check.svg delete mode 100644 res/themes/light/icons/chevron.svg delete mode 100644 res/themes/light/icons/close.svg delete mode 100644 res/themes/light/icons/computer.svg delete mode 100644 res/themes/light/icons/delete.svg delete mode 100644 res/themes/light/icons/error.svg delete mode 100644 res/themes/light/icons/info.svg delete mode 100644 res/themes/light/icons/lock.svg delete mode 100644 res/themes/light/icons/mobile.svg delete mode 100644 res/themes/light/icons/thread.svg delete mode 100644 res/themes/light/icons/user.svg delete mode 100644 res/themes/light/icons/visibility-invisible.svg delete mode 100644 res/themes/light/icons/visibility-visible.svg delete mode 100644 res/themes/light/icons/web-browser.svg diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 5d2feef532f..30bc73e62b3 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -18,7 +18,7 @@ limitations under the License. .mx_PollCreateDialog_busy { position: absolute; inset: 0; - background-color: var(--cpd-color-alpha-gray-800); + background-color: $overlay-background; z-index: 1; } diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 8598f53882a..c6b22c8f6c4 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -69,7 +69,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid var(--cpd-color-gray-600); + border-bottom: 1px solid $strong-input-border-color; } .mx_UserInfo_memberDetailsContainer { diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 53321f67cc6..09cdc759efc 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -180,14 +180,14 @@ $call-background: #15191e; $call-primary-content: #ffffff; $call-light-quaternary-content: #c1c6cd; -$username-variant1-color: #368bd6; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #03b381; -$username-variant4-color: #e64f7a; -$username-variant5-color: #ff812d; -$username-variant6-color: #2dc2c5; -$username-variant7-color: #5c56f5; -$username-variant8-color: #74d12c; +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); /** * Creating a `semantic` color scale. This will not be needed with the new diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index 115d0b9b709..77d10c154ee 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -139,3 +139,23 @@ $menu-selected-color: var(--menu-selected-color, $menu-selected-color); $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color); $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color); $icon-button-color: var(--icon-button-color, $icon-button-color); + +/** + * Variation of the accent color. + * Generate this colour scale using LeonardoColor + * TODO: Add link + */ +$accent-100: var(--accent-color-100); +$accent-200: var(--accent-color-200); +$accent-300: var(--accent-color-300); +$accent-400: var(--accent-color-400); +$accent-500: var(--accent-color-500); +$accent-600: var(--accent-color-600); +$accent-700: var(--accent-color-700); +$accent-800: var(--accent-color-800); +$accent-900: var(--accent-color-900); +$accent-1000: var(--accent-color-1000); +$accent-1100: var(--accent-color-1100); +$accent-1200: var(--accent-color-1200); +$accent-1300: var(--accent-color-1300); +$accent-1400: var(--accent-color-1400); diff --git a/res/themes/light/icons/$icons.json b/res/themes/light/icons/$icons.json deleted file mode 100644 index 51b91d5e925..00000000000 --- a/res/themes/light/icons/$icons.json +++ /dev/null @@ -1 +0,0 @@ -{"icon":{"chat":{"value":"icons/chat.svg","type":"icon"},"check-circle":{"value":"icons/check-circle.svg","type":"icon"},"check":{"value":"icons/check.svg","type":"icon"},"chevron":{"value":"icons/chevron.svg","type":"icon"},"close":{"value":"icons/close.svg","type":"icon"},"computer":{"value":"icons/computer.svg","type":"icon"},"delete":{"value":"icons/delete.svg","type":"icon"},"error":{"value":"icons/error.svg","type":"icon"},"info":{"value":"icons/info.svg","type":"icon"},"lock":{"value":"icons/lock.svg","type":"icon"},"mobile":{"value":"icons/mobile.svg","type":"icon"},"thread":{"value":"icons/thread.svg","type":"icon"},"user":{"value":"icons/user.svg","type":"icon"},"visibility-invisible":{"value":"icons/visibility-invisible.svg","type":"icon"},"visibility-visible":{"value":"icons/visibility-visible.svg","type":"icon"},"web-browser":{"value":"icons/web-browser.svg","type":"icon"}}} \ No newline at end of file diff --git a/res/themes/light/icons/chat.svg b/res/themes/light/icons/chat.svg deleted file mode 100644 index 57967455b86..00000000000 --- a/res/themes/light/icons/chat.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/check-circle.svg b/res/themes/light/icons/check-circle.svg deleted file mode 100644 index 31c33fb47ba..00000000000 --- a/res/themes/light/icons/check-circle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/check.svg b/res/themes/light/icons/check.svg deleted file mode 100644 index 2ae753c0d42..00000000000 --- a/res/themes/light/icons/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/chevron.svg b/res/themes/light/icons/chevron.svg deleted file mode 100644 index 489ff41349d..00000000000 --- a/res/themes/light/icons/chevron.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/close.svg b/res/themes/light/icons/close.svg deleted file mode 100644 index 0022f456692..00000000000 --- a/res/themes/light/icons/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/computer.svg b/res/themes/light/icons/computer.svg deleted file mode 100644 index 8fee20c8754..00000000000 --- a/res/themes/light/icons/computer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/delete.svg b/res/themes/light/icons/delete.svg deleted file mode 100644 index 45ffae79bf3..00000000000 --- a/res/themes/light/icons/delete.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/error.svg b/res/themes/light/icons/error.svg deleted file mode 100644 index 4c099168c55..00000000000 --- a/res/themes/light/icons/error.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/info.svg b/res/themes/light/icons/info.svg deleted file mode 100644 index 73edb2bc7e2..00000000000 --- a/res/themes/light/icons/info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/lock.svg b/res/themes/light/icons/lock.svg deleted file mode 100644 index 703c74445d9..00000000000 --- a/res/themes/light/icons/lock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/mobile.svg b/res/themes/light/icons/mobile.svg deleted file mode 100644 index 364a1a91bdd..00000000000 --- a/res/themes/light/icons/mobile.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/thread.svg b/res/themes/light/icons/thread.svg deleted file mode 100644 index f26e7b7a9bb..00000000000 --- a/res/themes/light/icons/thread.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/res/themes/light/icons/user.svg b/res/themes/light/icons/user.svg deleted file mode 100644 index 7198c3e2824..00000000000 --- a/res/themes/light/icons/user.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/visibility-invisible.svg b/res/themes/light/icons/visibility-invisible.svg deleted file mode 100644 index d5182e9f556..00000000000 --- a/res/themes/light/icons/visibility-invisible.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/visibility-visible.svg b/res/themes/light/icons/visibility-visible.svg deleted file mode 100644 index d27fa0ca6ea..00000000000 --- a/res/themes/light/icons/visibility-visible.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/themes/light/icons/web-browser.svg b/res/themes/light/icons/web-browser.svg deleted file mode 100644 index 0282c5682c2..00000000000 --- a/res/themes/light/icons/web-browser.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 7fb43337715e489a243c9e498c215eee701b028a Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 11:59:39 +0100 Subject: [PATCH 09/30] fix composer button mixin --- res/css/_common.pcss | 5 +++-- res/css/views/rooms/_EmojiButton.pcss | 4 ++-- res/css/views/rooms/_MessageComposer.pcss | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 809ebf142d5..854b515941f 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -820,7 +820,7 @@ legend { } } -@define-mixin composerButton $border-radius, $hover-color { +@define-mixin composerButton $border-radius, $hover-color, $hover-bg { --size: 26px; position: relative; cursor: pointer; @@ -841,6 +841,7 @@ legend { mask-repeat: no-repeat; mask-size: contain; mask-position: center; + z-index: 2; } &::after { @@ -856,7 +857,7 @@ legend { &:hover { &::after { - background: var(--cpd-color-bg-action-secondary-hovered); + background: $hover-bg; } &::before { diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss index 3f130ee3dcb..10c82a84742 100644 --- a/res/css/views/rooms/_EmojiButton.pcss +++ b/res/css/views/rooms/_EmojiButton.pcss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_EmojiButton { - @mixin composerButton 50%, $accent; + @mixin composerButton 50%, $accent, $accent-300; } .mx_EmojiButton_highlight { @@ -28,6 +28,6 @@ limitations under the License. .mx_MessageComposer_wysiwyg { .mx_EmojiButton { - @mixin composerButton 5px, $tertiary-content; + @mixin composerButton 5px, $tertiary-content, $panels; } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index e957b82e387..56a7da7ec66 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -189,7 +189,7 @@ limitations under the License. } .mx_MessageComposer_button { - @mixin composerButton 50%, $accent; + @mixin composerButton 50%, $accent, $accent-300; &:last-child { margin-right: auto; @@ -232,7 +232,7 @@ limitations under the License. } .mx_MessageComposer_button { - @mixin composerButton 5px, $tertiary-content; + @mixin composerButton 5px, $tertiary-content, $panels; &.mx_MessageComposer_closeButtonMenu { &::after { From 0ed5b4c97235609b1c47b5de060964dc49015a8f Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 12:04:22 +0100 Subject: [PATCH 10/30] Normalise some of the auth page colors --- res/themes/legacy-light/css/_legacy-light.pcss | 6 +++--- res/themes/light/css/_light.pcss | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 09cdc759efc..a5d3653c275 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -271,9 +271,9 @@ $progressbar-bg-color: rgba(141, 151, 165, 0.2); $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-focus-bg-color: #dddddd; -$authpage-lang-color: #4e5054; -$authpage-primary-color: #232f32; -$authpage-secondary-color: #61708b; +$authpage-lang-color: $secondary-content; +$authpage-primary-color: $primary-content; +$authpage-secondary-color: $secondary-content; $dark-panel-bg-color: $secondary-accent-color; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 00f56a44395..6b28420d101 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -237,8 +237,9 @@ $authpage-primary-color: #232f32; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: $roomlist-bg-color; $authpage-focus-bg-color: $focus-bg-color; -$authpage-lang-color: #4e5054; -$authpage-secondary-color: $muted-fg-color; +$authpage-lang-color: $secondary-content; +$authpage-primary-color: $primary-content; +$authpage-secondary-color: $secondary-content; /* ******************** */ /* Message action bar */ From 2db7e35b771190547d64bd2d84640387cedefccb Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 12:11:26 +0100 Subject: [PATCH 11/30] Update based on figma feedback --- res/css/views/rooms/_RoomSublist.pcss | 2 +- res/themes/dark/css/_dark.pcss | 2 +- res/themes/legacy-dark/css/_legacy-dark.pcss | 2 +- res/themes/legacy-light/css/_legacy-light.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 45a0055cf66..24898b89251 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -48,7 +48,7 @@ limitations under the License. /* to work correctly. */ padding-bottom: 8px; height: 24px; - color: $tertiary-content; + color: $secondary-content; .mx_RoomSublist_stickableContainer { width: 100%; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 7fed0928596..99512f0d5a3 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -66,7 +66,7 @@ $text-secondary-color: #b9bec6; /* Colors that aren't in Figma - we need to get rid of these */ /* ******************** */ -$dark-panel-bg-color: $header-panel-bg-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $muted-fg-color: $header-panel-text-primary-color; $light-fg-color: $header-panel-text-secondary-color; $focus-bg-color: $room-highlight-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 4f020f72689..03e401148d2 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -181,7 +181,7 @@ $progressbar-bg-color: #21262c; $visual-bell-bg-color: #800; -$dark-panel-bg-color: $header-panel-bg-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); $message-action-bar-bg-color: $header-panel-bg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index a5d3653c275..bcf3b1470e7 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -275,7 +275,7 @@ $authpage-lang-color: $secondary-content; $authpage-primary-color: $primary-content; $authpage-secondary-color: $secondary-content; -$dark-panel-bg-color: $secondary-accent-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $message-action-bar-bg-color: $primary-bg-color; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 6b28420d101..49259cf6b34 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -95,7 +95,7 @@ $info-plinth-fg-color: var(--cpd-color-gray-900); /* Colors that aren't in Figma - we need to get rid of these */ /* ******************** */ -$dark-panel-bg-color: $secondary-accent-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $muted-fg-color: #61708b; $light-fg-color: #747474; $focus-bg-color: $preview-widget-bar-color; From ed2d47927b88d47e607271787f2b2737e796e596 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 12:13:42 +0100 Subject: [PATCH 12/30] lintfix --- res/themes/dark/css/_dark.pcss | 28 +++++++++---------- res/themes/legacy-dark/css/_legacy-dark.pcss | 28 +++++++++---------- .../legacy-light/css/_legacy-light.pcss | 28 +++++++++---------- .../css/_light-high-contrast.pcss | 28 +++++++++---------- res/themes/light/css/_light.pcss | 4 +-- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 99512f0d5a3..a324a187493 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -31,20 +31,20 @@ $roomtile-default-badge-bg-color: $muted-fg-color; * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs */ - $accent-100: var(--cpd-color-green-100); - $accent-200: var(--cpd-color-green-200); - $accent-300: var(--cpd-color-green-300); - $accent-400: var(--cpd-color-green-400); - $accent-500: var(--cpd-color-green-500); - $accent-600: var(--cpd-color-green-600); - $accent-700: var(--cpd-color-green-700); - $accent-800: var(--cpd-color-green-800); - $accent-900: var(--cpd-color-green-900); - $accent-1000: var(--cpd-color-green-1000); - $accent-1100: var(--cpd-color-green-1100); - $accent-1200: var(--cpd-color-green-1200); - $accent-1300: var(--cpd-color-green-1300); - $accent-1400: var(--cpd-color-green-1400); +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* Reused Figma non-compound colors */ /* ******************** */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 03e401148d2..5a18357e98d 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -112,20 +112,20 @@ $panel-actions: $roomtile-selected-bg-color; * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ - $accent-100: var(--cpd-color-green-100); - $accent-200: var(--cpd-color-green-200); - $accent-300: var(--cpd-color-green-300); - $accent-400: var(--cpd-color-green-400); - $accent-500: var(--cpd-color-green-500); - $accent-600: var(--cpd-color-green-600); - $accent-700: var(--cpd-color-green-700); - $accent-800: var(--cpd-color-green-800); - $accent-900: var(--cpd-color-green-900); - $accent-1000: var(--cpd-color-green-1000); - $accent-1100: var(--cpd-color-green-1100); - $accent-1200: var(--cpd-color-green-1200); - $accent-1300: var(--cpd-color-green-1300); - $accent-1400: var(--cpd-color-green-1400); +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* Legacy theme backports */ /* ******************** */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index bcf3b1470e7..597e09903d5 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -199,20 +199,20 @@ $username-variant8-color: var(--cpd-color-lime-900); * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ - $accent-100: var(--cpd-color-green-100); - $accent-200: var(--cpd-color-green-200); - $accent-300: var(--cpd-color-green-300); - $accent-400: var(--cpd-color-green-400); - $accent-500: var(--cpd-color-green-500); - $accent-600: var(--cpd-color-green-600); - $accent-700: var(--cpd-color-green-700); - $accent-800: var(--cpd-color-green-800); - $accent-900: var(--cpd-color-green-900); - $accent-1000: var(--cpd-color-green-1000); - $accent-1100: var(--cpd-color-green-1100); - $accent-1200: var(--cpd-color-green-1200); - $accent-1300: var(--cpd-color-green-1300); - $accent-1400: var(--cpd-color-green-1400); +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* ******************** */ diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index b096c29090b..ad8919388a2 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -44,20 +44,20 @@ $roomtopic-color: $secondary-content; * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ - $accent-100: var(--cpd-color-green-100); - $accent-200: var(--cpd-color-green-200); - $accent-300: var(--cpd-color-green-300); - $accent-400: var(--cpd-color-green-400); - $accent-500: var(--cpd-color-green-500); - $accent-600: var(--cpd-color-green-600); - $accent-700: var(--cpd-color-green-700); - $accent-800: var(--cpd-color-green-800); - $accent-900: var(--cpd-color-green-900); - $accent-1000: var(--cpd-color-green-1000); - $accent-1100: var(--cpd-color-green-1100); - $accent-1200: var(--cpd-color-green-1200); - $accent-1300: var(--cpd-color-green-1300); - $accent-1400: var(--cpd-color-green-1400); +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* Draw an outline on buttons with focus */ .mx_AccessibleButton:focus { diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 49259cf6b34..bf3a5b0c934 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -344,7 +344,7 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* ******************** */ $location-marker-color: var(--cpd-color-icon-on-solid-primary); $location-live-color: var(--cpd-color-purple-900); -$location-live-secondary-color: var(--cpd-color-purple-600);; +$location-live-secondary-color: var(--cpd-color-purple-600); /* ******************** */ /* Voice Broadcast */ @@ -365,7 +365,7 @@ body { } .hljs-deletion { - background: var(--cpd-color-red-500);; + background: var(--cpd-color-red-500); } /* ******************** */ From 34d40d9ee158a6ee55021799ef0a9e88084c4820 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 12:37:55 +0100 Subject: [PATCH 13/30] regenerate theme index --- res/css/_components.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 0fd24fbaf2a..815b7beb9ea 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -287,6 +287,7 @@ @import "./views/rooms/_PinnedEventTile.pcss"; @import "./views/rooms/_PresenceLabel.pcss"; @import "./views/rooms/_ReadReceiptGroup.pcss"; +@import "./views/rooms/_RecentlyViewedButton.pcss"; @import "./views/rooms/_ReplyPreview.pcss"; @import "./views/rooms/_ReplyTile.pcss"; @import "./views/rooms/_RoomBreadcrumbs.pcss"; From 0eb671cf5bf28623072d9b71744d3587d4ca5e12 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 13:20:43 +0100 Subject: [PATCH 14/30] Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot --- cypress/e2e/room/room-header.spec.ts | 12 +----------- .../settings/appearance-user-settings-tab.spec.ts | 2 +- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index fc20dfbebee..e537c1471de 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -116,17 +116,7 @@ describe("Room Header", () => { const buttonsHighlighted = ["Threads", "Notifications", "Room info"]; for (const name of buttonsHighlighted) { - cy.findByRole("button", { name: name }) - .click() // Highlight the button - .then(($btn) => { - // Note it is not possible to get CSS values of a pseudo class with "have.css". - const color = $btn[0].ownerDocument.defaultView // get window reference from element - .getComputedStyle($btn[0], "before") // get the pseudo selector - .getPropertyValue("background-color"); // get "background-color" value - - // Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139) - expect(color).to.eq("rgb(13, 189, 139)"); - }); + cy.findByRole("button", { name: name }).click(); // Highlight the button } }); diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index e57f00a1396..807045510ad 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -307,7 +307,7 @@ describe("Appearance user settings tab", () => { // Assert that $primary-content is applied to GELS summary on the light theme // $primary-content on the light theme = #17191c = rgb(23, 25, 28) cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(23, 25, 28)") + .should("have.css", "color", "rgb(27, 29, 34)") .should("have.css", "opacity", "0.5"); }); From 18f8ff24d4277e3fd67e3f459202cb6b31f31d84 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 13:49:01 +0100 Subject: [PATCH 15/30] fix more e2e tests --- cypress/e2e/settings/appearance-user-settings-tab.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index 807045510ad..7f0c2b55062 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -305,7 +305,7 @@ describe("Appearance user settings tab", () => { cy.get(".mx_GenericEventListSummary").within(() => { // Assert that $primary-content is applied to GELS summary on the light theme - // $primary-content on the light theme = #17191c = rgb(23, 25, 28) + // $primary-content on the light theme = #17191c = rgb(27, 29, 34) cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") .should("have.css", "color", "rgb(27, 29, 34)") .should("have.css", "opacity", "0.5"); @@ -320,9 +320,9 @@ describe("Appearance user settings tab", () => { cy.get(".mx_GenericEventListSummary").within(() => { // Assert that $secondary-content is specified for GELS summary on the high contrast theme - // $secondary-content on the high contrast theme = #5e6266 = rgb(94, 98, 102) + // $secondary-content on the high contrast theme = #5e6266 = rgb(71, 74, 81) cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(94, 98, 102)") + .should("have.css", "color", "rgb(71, 74, 81)") .should("have.css", "opacity", "1"); }); }); From c3c141f1facf07b21df3c88bc66160fda34d6d29 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 5 Jul 2023 15:49:58 +0100 Subject: [PATCH 16/30] update colors based on feedback --- cypress/e2e/threads/threads.spec.ts | 20 ------------------- res/css/_common.pcss | 6 +++--- res/css/views/right_panel/_ThreadPanel.pcss | 2 +- res/css/views/rooms/_EventTile.pcss | 2 +- res/themes/dark/css/_dark.pcss | 4 ++-- res/themes/legacy-dark/css/_legacy-dark.pcss | 4 ++-- .../legacy-light/css/_legacy-light.pcss | 4 ++-- .../css/_light-high-contrast.pcss | 2 +- res/themes/light/css/_light.pcss | 4 ++-- 9 files changed, 14 insertions(+), 34 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 335c87bc01e..a2dc7b02dff 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -64,9 +64,6 @@ describe("Threads", () => { "Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " + "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi"; - // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) - // See: _MessageTimestamp.pcss - const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; @@ -75,13 +72,6 @@ describe("Threads", () => { // User sends message cy.findByRole("textbox", { name: "Send a message…" }).type("Hello Mr. Bot{enter}"); - // Check the colour of timestamp on the main timeline - cy.get(".mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should( - "have.css", - "color", - MessageTimestampColor, - ); - // Wait for message to send, get its ID and save as @threadId cy.contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot") .invoke("attr", "data-scroll-tokens") @@ -151,13 +141,6 @@ describe("Threads", () => { cy.get(".mx_ThreadView").within(() => { // User responds in thread cy.findByRole("textbox", { name: "Send a message…" }).type("Test{enter}"); - - // Check the colour of timestamp on EventTile in a thread (mx_ThreadView) - cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should( - "have.css", - "color", - MessageTimestampColor, - ); }); // User asserts summary was updated correctly @@ -307,9 +290,6 @@ describe("Threads", () => { // Check the number of the replies cy.get(".mx_ThreadPanel_replies_amount").findByText("2").should("exist"); - // Check the colour of timestamp on thread list - cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor); - // Make sure the notification dot is visible cy.get(".mx_NotificationBadge_visible").should("be.visible"); diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 854b515941f..78861724985 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -584,9 +584,9 @@ legend { /* flip colours for the secondary ones */ font-weight: var(--cpd-font-weight-semibold); - border: 1px solid $accent; + border: 1px solid currentColor; color: $accent; - background-color: $button-secondary-bg-color; + background-color: transparent; font-family: inherit; } @@ -808,7 +808,7 @@ legend { mask-size: contain; height: 18px; min-width: 18px; - background-color: $secondary-content !important; + background-color: $icon-button-color !important; } @define-mixin composerButtonHighLight { diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index 3c4f7a2b599..d772a2d628b 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -130,7 +130,7 @@ limitations under the License. } .mx_MessageTimestamp { - color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */ + color: $secondary-content; } .mx_BaseCard_footer { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3d3053219ee..5e5a574c553 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1136,7 +1136,7 @@ $left-gutter: 64px; } &:hover { - background-color: $system; + background-color: var(--cpd-color-bg-subtle-secondary); } /* ThreadsList has always group layout */ diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index a324a187493..d654785e58a 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -54,7 +54,7 @@ $header-panel-bg-color: var(--cpd-color-bg-subtle-secondary); /* Theme specific colors */ /* ******************** */ -$icon-button-color: $secondary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ @@ -136,7 +136,7 @@ $input-lighter-bg-color: #f2f5f8; /* ******************** */ $dialog-title-fg-color: $primary-content; $dialog-backdrop-color: $menu-border-color; -$dialog-close-fg-color: #9fa9ba; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $primary-content; /* ******************** */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 5a18357e98d..4d9bf1f937d 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -65,11 +65,12 @@ $menu-selected-color: $room-highlight-color; $avatar-initial-color: #ffffff; $h3-color: $primary-fg-color; +$icon-button-color: var(--cpd-color-icon-tertiary); $dialog-title-fg-color: $base-text-color; $dialog-backdrop-color: #000; $dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #9fa9ba; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $text-primary-color; $lightbox-background-bg-color: #000; @@ -81,7 +82,6 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; -$icon-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $room-icon-unread-color: #fff; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 597e09903d5..dc69375e9b1 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -87,11 +87,12 @@ $menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; $h3-color: #3d3b39; +$icon-button-color: var(--cpd-color-icon-tertiary); $dialog-title-fg-color: #45474a; $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #c1c1c1; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $primary-bg-color; $lightbox-background-bg-color: #000; @@ -124,7 +125,6 @@ $topleftmenu-color: #212121; $roomheader-bg-color: $primary-bg-color; $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; -$icon-button-color: #91a1c0; $roomtopic-color: #9e9e9e; $room-icon-unread-color: #737d8c; diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index ad8919388a2..3d668a3f601 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -22,7 +22,7 @@ $input-border-color: $secondary-content; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: $secondary-content; $resend-button-divider-color: $input-darker-bg-color; -$icon-button-color: $quaternary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); $theme-button-bg-color: $quinary-content; $presence-offline: $quinary-content; $pinned-color: $tertiary-content; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index bf3a5b0c934..1ad02c99432 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -76,7 +76,7 @@ $header-panel-bg-color: var(--cpd-color-bg-subtle-primary); /* Theme specific colors */ /* ******************** */ -$icon-button-color: $secondary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ @@ -181,7 +181,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9); /* ******************** */ $dialog-title-fg-color: var(--cpd-color-text-primary); $dialog-backdrop-color: rgba(46, 48, 51, 0.38); -$dialog-close-fg-color: #c1c1c1; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $background; $dialog-shadow-color: rgba(0, 0, 0, 0.48); /* ******************** */ From 3565fe7e64755ec544bab554059e872cbc886076 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 6 Jul 2023 11:21:15 +0100 Subject: [PATCH 17/30] fix color pass --- res/css/views/elements/_AccessibleButton.pcss | 1 - res/css/views/right_panel/_BaseCard.pcss | 2 +- res/css/views/rooms/_EventTile.pcss | 2 +- res/css/views/rooms/_RoomHeader.pcss | 4 ++-- res/css/views/rooms/_ThreadSummary.pcss | 4 ++-- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index e4c00d356f8..35a5287fa9e 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -105,7 +105,6 @@ limitations under the License. &.mx_AccessibleButton_kind_primary_outline { color: $accent; - background-color: $button-secondary-bg-color; } &.mx_AccessibleButton_kind_secondary { diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index ad63b698c46..9089ba94ab0 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -59,7 +59,7 @@ limitations under the License. left: 0; mask-repeat: no-repeat; mask-position: center; - background-color: $header-panel-text-primary-color; + background-color: $icon-button-color; } } diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5e5a574c553..cc976cf2c96 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1142,7 +1142,7 @@ $left-gutter: 64px; /* ThreadsList has always group layout */ &[data-layout="group"]:hover { .mx_EventTile_line { - background-color: $system; /* override $event-selected-color */ + background-color: inherit; box-shadow: none; /* don't show the verification left stroke in the thread list */ } } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c29a66477ce..0cd2f758731 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -56,7 +56,7 @@ limitations under the License. min-width: 0; margin: 0 20px 0 16px; padding-top: 6px; - border-bottom: 1px solid var(--cpd-color-gray-500); + border-bottom: 1px solid var(--cpd-color-gray-400); .mx_InviteOnlyIcon_large { margin: 0; @@ -138,7 +138,7 @@ limitations under the License. $lines: 2; flex: 1; - color: $roomtopic-color; + color: $secondary-content; font: var(--cpd-font-body-sm-regular); line-height: 1rem; max-height: calc(1rem * $lines); diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index 5ce32226970..3e587b6faa2 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -37,7 +37,7 @@ limitations under the License. width: fit-content; height: 40px; position: relative; - background-color: $system; + background-color: $panels; padding-inline: $spacing-12 $spacing-16; display: flex; align-items: center; @@ -46,7 +46,7 @@ limitations under the License. box-sizing: border-box; clear: both; overflow: hidden; - border: 1px solid $system; /* always render a border so the hover effect doesn't require a re-layout */ + border: 1px solid $panels; /* always render a border so the hover effect doesn't require a re-layout */ .mx_ThreadSummary_chevron { position: absolute; From 2fb87a1c93061dc29e4edc1a0b6828d14c27f3e7 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 6 Jul 2023 11:45:13 +0100 Subject: [PATCH 18/30] Fix theme overrides --- res/css/_common.pcss | 4 ++-- res/css/views/rooms/_EventTile.pcss | 2 +- res/css/views/rooms/_RecentlyViewedButton.pcss | 2 +- res/themes/dark/css/_dark.pcss | 1 + res/themes/legacy-dark/css/_legacy-dark.pcss | 1 + res/themes/legacy-light/css/_legacy-light.pcss | 1 + res/themes/light-custom/css/_custom.pcss | 5 +++-- res/themes/light/css/_light.pcss | 2 ++ 8 files changed, 12 insertions(+), 6 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 78861724985..b04c5bc9ea2 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -250,7 +250,7 @@ legend { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid var(--cpd-color-gray-300); + border: 1px solid $secondary-hairline-color; /* these things should probably not be defined globally */ margin: 9px; } @@ -263,7 +263,7 @@ legend { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder, .mx_textinput input::placeholder { - color: var(--cpd-color-text-placeholder); + color: $input-placeholder; } } diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index cc976cf2c96..68844b47b52 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1136,7 +1136,7 @@ $left-gutter: 64px; } &:hover { - background-color: var(--cpd-color-bg-subtle-secondary); + background-color: $panels; } /* ThreadsList has always group layout */ diff --git a/res/css/views/rooms/_RecentlyViewedButton.pcss b/res/css/views/rooms/_RecentlyViewedButton.pcss index 540559b1449..ee370ffeb1c 100644 --- a/res/css/views/rooms/_RecentlyViewedButton.pcss +++ b/res/css/views/rooms/_RecentlyViewedButton.pcss @@ -19,7 +19,7 @@ limitations under the License. width: max-content; max-width: 240px; max-height: 400px; - border: 1px solid var(--cpd-color-gray-300); + border: 1px solid $secondary-hairline-color; border-radius: 8px; box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08); display: flex; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index d654785e58a..0db391af22a 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -130,6 +130,7 @@ $input-border-color: rgba(231, 231, 231, 0.2); $input-darker-bg-color: #181b21; $input-darker-fg-color: #61708b; $input-lighter-bg-color: #f2f5f8; +$input-placeholder: var(--cpd-color-text-placeholder); /* ******************** */ /* Dialog */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 4d9bf1f937d..7207faa3e45 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -50,6 +50,7 @@ $input-border-color: #e7e7e7; $input-darker-bg-color: #181b21; $input-darker-fg-color: #61708b; $input-lighter-bg-color: #f2f5f8; +$input-placeholder: var(--cpd-color-text-placeholder); $resend-button-divider-color: $muted-fg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index dc69375e9b1..c4be512eee8 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -76,6 +76,7 @@ $strong-input-border-color: #c7c7c7; /* used for UserSettings EditableText */ $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); +$input-placeholder: var(--cpd-color-text-placeholder); /* scrollbars */ $scrollbar-thumb-color: rgba(0, 0, 0, 0.2); /* context menus */ diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index 77d10c154ee..9007924a7c1 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -28,8 +28,8 @@ $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); $system: var(--system, $system); $background: var(--background, $background); -$panels: var(--cpd-color-gray-600); -$panel-actions: var(--cpd-color-gray-300); +$panels: var(--panels, var(--cpd-color-gray-600)); +$panel-actions: var(--panels-actions, var(--cpd-color-gray-300)); /* --accent-color */ $username-variant3-color: var(--accent-color); @@ -85,6 +85,7 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color); /* --roomlist-separator-color */ $input-darker-bg-color: var(--roomlist-separator-color); $primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */ +$secondary-hairline-color: var(--secondary-hairline-color); /* --timeline-text-secondary-color */ $authpage-secondary-color: var(--timeline-text-secondary-color); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 1ad02c99432..7ebbb23cc19 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -175,6 +175,7 @@ $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: $secondary-accent-color; $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); +$input-placeholder: var(--cpd-color-text-placeholder); /* ******************** */ /* Dialog */ @@ -324,6 +325,7 @@ $selected-color: $secondary-accent-color; $pinned-color: $tertiary-content; $avatar-initial-color: $background; $primary-hairline-color: transparent; +$secondary-hairline-color: var(--cpd-color-gray-300); $focus-brightness: 105%; /* ******************** */ From 4e8db00d7e6a77966afb24350a1d5a293579fb43 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 6 Jul 2023 12:05:05 +0100 Subject: [PATCH 19/30] Restore -transparent --- res/css/views/rooms/_ThreadSummary.pcss | 2 +- res/themes/dark/css/_dark.pcss | 1 + res/themes/legacy-dark/css/_legacy-dark.pcss | 3 ++- res/themes/legacy-light/css/_legacy-light.pcss | 2 ++ res/themes/light-custom/css/_custom.pcss | 1 + res/themes/light/css/_light.pcss | 1 + 6 files changed, 8 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index 3e587b6faa2..7e8c8691048 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -56,7 +56,7 @@ limitations under the License. width: 60px; box-sizing: border-box; /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */ - background: linear-gradient(270deg, $system 50%, #e1e6ec00 100%); + background: linear-gradient(270deg, $system 50%, $system-transparent 100%); opacity: 0; transform: translateX(60px); diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 0db391af22a..c733eee7f16 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -7,6 +7,7 @@ $quaternary-content: var(--cpd-color-gray-600); $quinary-content: var(--cpd-color-gray-400); $system: var(--cpd-color-bg-subtle-primary); +$system-transparent: #e1e6ec00; $background: var(--cpd-color-bg-canvas-default); $overlay-background: var(--cpd-color-alpha-gray-1300); diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 7207faa3e45..7941c56800e 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -1,5 +1,6 @@ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ $system: #21262c; +$system-transparent: #e1e6ec00; /* unified palette */ /* try to use these colors when possible */ @@ -44,6 +45,7 @@ $event-selected-color: $header-panel-bg-color; /* used for the hairline dividers in RoomView */ $primary-hairline-color: #000000; +$secondary-hairline-color: var(--cpd-color-gray-300); /* used for the border of input text fields */ $input-border-color: #e7e7e7; @@ -96,7 +98,6 @@ $secondary-content: $secondary-fg-color; $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; -$system: #21262c; $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index c4be512eee8..cd974a4fc5c 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -59,6 +59,7 @@ $event-selected-color: $header-panel-bg-color; /* used for the hairline dividers in RoomView */ $primary-hairline-color: #e5e5e5; +$secondary-hairline-color: var(--cpd-color-gray-300); /* used for the border of input text fields */ $input-border-color: #e7e7e7; @@ -151,6 +152,7 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; $system: #f4f6fa; +$system-transparent: #e1e6ec00; $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index 9007924a7c1..cb01842e572 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -27,6 +27,7 @@ $tertiary-content: var(--tertiary-content, $tertiary-content); $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); $system: var(--system, $system); +$system-transparent: var(--system-transparent, #e1e6ec00); $background: var(--background, $background); $panels: var(--panels, var(--cpd-color-gray-600)); $panel-actions: var(--panels-actions, var(--cpd-color-gray-300)); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 7ebbb23cc19..a66663cba60 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -22,6 +22,7 @@ $quaternary-content: var(--cpd-color-gray-600); $quinary-content: var(--cpd-color-gray-400); $system: var(--cpd-color-bg-subtle-primary); +$system-transparent: #e1e6ec00; $background: var(--cpd-color-bg-canvas-default); $overlay-background: var(--cpd-color-alpha-gray-1300); From 273ea8fbb13cae003d41dcaa88d9af26697a5ec9 Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 7 Jul 2023 10:48:43 +0100 Subject: [PATCH 20/30] fix color mapping --- res/themes/dark/css/_dark.pcss | 2 +- res/themes/legacy-dark/css/_legacy-dark.pcss | 2 +- res/themes/legacy-light/css/_legacy-light.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index c733eee7f16..edf0d656285 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -110,7 +110,7 @@ $settings-subsection-fg-color: $text-secondary-color; /* Room */ /* ******************** */ -$room-icon-unread-color: #fff; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* RoomHeader */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 7941c56800e..f3f168c2e8e 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -86,7 +86,7 @@ $topleftmenu-color: $text-primary-color; $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; $roomtopic-color: $text-secondary-color; -$room-icon-unread-color: #fff; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* Legacy theme backports */ $accent: #0dbd8b; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index cd974a4fc5c..9e4f977994a 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -128,7 +128,7 @@ $roomheader-bg-color: $primary-bg-color; $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; $roomtopic-color: #9e9e9e; -$room-icon-unread-color: #737d8c; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index a66663cba60..69ca78d905c 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -144,7 +144,7 @@ $settings-subsection-fg-color: $muted-fg-color; /* Room */ /* ******************** */ -$room-icon-unread-color: $secondary-content; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* RoomHeader */ From 1e189b0b0891f4c3acaa09d55a7b337989f6cdc9 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 09:56:28 +0100 Subject: [PATCH 21/30] Final colour pass update --- .../views/settings/devices/_DeviceSecurityCard.pcss | 2 +- res/css/structures/_FilePanel.pcss | 3 ++- res/css/views/elements/_GenericEventListSummary.pcss | 1 + res/css/views/messages/_DisambiguatedProfile.pcss | 3 +-- res/css/views/messages/_ReactionsRowButton.pcss | 6 +++--- res/css/views/messages/_RedactedBody.pcss | 4 ++-- res/css/views/right_panel/_BaseCard.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 2 +- res/css/views/rooms/_EntityTile.pcss | 2 +- res/css/views/settings/_KeyboardShortcut.pcss | 2 +- res/css/views/settings/_ThemeChoicePanel.pcss | 2 +- res/themes/dark/css/_dark.pcss | 5 ++++- res/themes/legacy-dark/css/_legacy-dark.pcss | 3 +++ res/themes/legacy-light/css/_legacy-light.pcss | 3 +++ res/themes/light/css/_light.pcss | 6 ++++-- 15 files changed, 29 insertions(+), 17 deletions(-) diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index e161c0b14aa..2e4055cfd49 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -53,7 +53,7 @@ limitations under the License. &.Inactive { --icon-color: $secondary-content; - --background-color: $system; + --background-color: $panels; } } diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 9a1ebda894e..4ba4ddbcf0b 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -100,7 +100,8 @@ limitations under the License. .mx_MessageTimestamp { text-align: right; - font: var(--cpd-font-body-md-regular); + color: $secondary-content; + font: var(--cpd-font-body-sm-regular); } } } diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index eac9b071391..d1924202fe5 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -110,6 +110,7 @@ limitations under the License. /* Make all state events one order smaller than the other events */ .mx_EventTile { font: var(--cpd-font-body-sm-regular); + color: $secondary-content; } } diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss index 767a7eccace..4f32487e57d 100644 --- a/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/res/css/views/messages/_DisambiguatedProfile.pcss @@ -27,10 +27,9 @@ limitations under the License. } .mx_DisambiguatedProfile_mxid { - font: var(--cpd-font-body-sm-semibold); margin-inline-start: 5px; opacity: 0.5; /* Match mx_TextualEvent */ - color: $primary-content; + color: $secondary-content; } } diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss index 138782ddb2a..62387d3a651 100644 --- a/res/css/views/messages/_ReactionsRowButton.pcss +++ b/res/css/views/messages/_ReactionsRowButton.pcss @@ -24,12 +24,12 @@ limitations under the License. user-select: none; &:hover { - border-color: $reaction-row-button-hover-border-color; + border-color: $quinary-content; } &.mx_ReactionsRowButton_selected { - background-color: $reaction-row-button-selected-bg-color; - border-color: $accent; + background-color: $quinary-content; + border-color: $secondary-hairline-color; } &.mx_AccessibleButton_disabled { diff --git a/res/css/views/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss index a85e97411af..3db57446879 100644 --- a/res/css/views/messages/_RedactedBody.pcss +++ b/res/css/views/messages/_RedactedBody.pcss @@ -14,7 +14,7 @@ limitations under the License. .mx_RedactedBody { white-space: pre-wrap; - color: $muted-fg-color; + color: $secondary-content; vertical-align: middle; padding-left: 20px; @@ -23,7 +23,7 @@ limitations under the License. &::before { height: 14px; width: 14px; - background-color: $muted-fg-color; + background-color: $icon-button-color; mask-image: url("$(res)/img/feather-customised/trash.custom.svg"); mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 9089ba94ab0..b6b03aeb914 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -103,7 +103,7 @@ limitations under the License. flex: 1; .mx_BaseCard_header_title_heading { - color: $secondary-content; + color: $icon-button-color; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index f2a481efd48..12d74915a2d 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -69,7 +69,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid $strong-input-border-color; + border-bottom: 1px solid $separator; } .mx_UserInfo_memberDetailsContainer { diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss index e9ed6e1dddb..a2ce91037d9 100644 --- a/res/css/views/rooms/_EntityTile.pcss +++ b/res/css/views/rooms/_EntityTile.pcss @@ -120,7 +120,7 @@ limitations under the License. .mx_EntityTile_power { padding-inline-start: 6px; font-size: $font-10px; - color: $tertiary-content; + color: $secondary-content; max-width: 6em; overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/settings/_KeyboardShortcut.pcss b/res/css/views/settings/_KeyboardShortcut.pcss index 721d5fd8fef..f1593a4d9f2 100644 --- a/res/css/views/settings/_KeyboardShortcut.pcss +++ b/res/css/views/settings/_KeyboardShortcut.pcss @@ -19,7 +19,7 @@ limitations under the License. kbd { padding: 5px; border-radius: 4px; - background-color: $header-panel-bg-color; + background-color: $background; min-width: 20px; text-align: center; display: inline-block; diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss index 8bb64b67876..1194c6110d6 100644 --- a/res/css/views/settings/_ThemeChoicePanel.pcss +++ b/res/css/views/settings/_ThemeChoicePanel.pcss @@ -26,7 +26,7 @@ limitations under the License. border-radius: 10px; width: 180px; - background: $quinary-content; + background: $accent-200; opacity: 0.4; flex-shrink: 1; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index edf0d656285..868a616aa44 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -12,7 +12,10 @@ $background: var(--cpd-color-bg-canvas-default); $overlay-background: var(--cpd-color-alpha-gray-1300); $panels: var(--cpd-color-bg-subtle-secondary); -$panel-actions: var(--cpd-color-alpha-gray-400); +$panel-actions: var(--cpd-color-alpha-gray-300); + +$separator: var(--cpd-color-alpha-gray-400); + /* ******************** */ /* RoomList */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index f3f168c2e8e..2af2ae76212 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -104,6 +104,9 @@ $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); $panel-actions: $roomtile-selected-bg-color; +$separator: var(--cpd-color-alpha-gray-400); + + /** * Creating a `semantic` color scale. This will not be needed with the new * visual language, but necessary during the transition period diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 9e4f977994a..4ee983d398a 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -158,6 +158,9 @@ $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); $panel-actions: $roomtile-selected-bg-color; + +$separator: var(--cpd-color-alpha-gray-400); + /* Legacy theme backports */ /* ******************** */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 69ca78d905c..9331a23d995 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -27,7 +27,9 @@ $background: var(--cpd-color-bg-canvas-default); $overlay-background: var(--cpd-color-alpha-gray-1300); $panels: var(--cpd-color-bg-subtle-secondary); -$panel-actions: var(--cpd-color-alpha-gray-400); +$panel-actions: var(--cpd-color-alpha-gray-300); + +$separator: var(--cpd-color-alpha-gray-400); $accent: var(--cpd-color-text-action-accent); $alert: var(--cpd-color-text-critical-primary); @@ -209,7 +211,7 @@ $e2e-unknown-color: var(--cpd-color-yellow-900); $e2e-unverified-color: var(--cpd-color-green-900); $e2e-warning-color: var(--cpd-color-red-900); $e2e-verified-color-light: var(--cpd-color-green-400); -$e2e-warning-color-light: var(--cpd-color-red-400); +$e2e-warning-color-light: var(--cpd-color-red-300); /* ******************** */ /* Tabbed views */ From 243da49b0190249d84f27112589f29c346e471da Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 10:03:18 +0100 Subject: [PATCH 22/30] Do not consume compound colors directly --- res/css/structures/_SpacePanel.pcss | 2 +- res/css/views/beta/_BetaCard.pcss | 2 +- res/css/views/elements/_SSOButtons.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 2 +- .../views/rooms/_RecentlyViewedButton.pcss | 77 ------------------- res/css/views/rooms/_RoomHeader.pcss | 4 +- .../components/_FormattingButtons.pcss | 2 +- res/css/views/settings/_FontScalingPanel.pcss | 2 +- res/css/views/voip/_CallView.pcss | 2 +- res/themes/legacy-dark/css/_legacy-dark.pcss | 1 - 10 files changed, 9 insertions(+), 87 deletions(-) delete mode 100644 res/css/views/rooms/_RecentlyViewedButton.pcss diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 2f5f7c7dba6..76c328fa568 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -368,7 +368,7 @@ limitations under the License. .mx_UserMenu { padding: 0 2px 8px; - border-bottom: 1px solid var(--cpd-color-gray-700); + border-bottom: 1px solid $separator; margin: 12px 14px 4px 18px; max-width: 226px; } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index b7c8bcc9ce9..49148cabb21 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -16,7 +16,7 @@ limitations under the License. .mx_BetaCard { padding: $spacing-24; - background-color: var(--cpd-color-bg-subtle-secondary); + background-color: $panels; border-radius: 8px; box-sizing: border-box; color: $secondary-content; diff --git a/res/css/views/elements/_SSOButtons.pcss b/res/css/views/elements/_SSOButtons.pcss index 88185154eae..2de4781c3c3 100644 --- a/res/css/views/elements/_SSOButtons.pcss +++ b/res/css/views/elements/_SSOButtons.pcss @@ -45,7 +45,7 @@ limitations under the License. } .mx_SSOButton:hover { - background-color: var(--cpd-color-alpha-gray-300); + background-color: $panel-actions; } .mx_SSOButton_default { diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 792e85376a3..444c401e604 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -42,7 +42,7 @@ limitations under the License. height: $size; width: $size; size: 0.5rem; - border: 1px solid var(--cpd-color-border-interactive-primary); + border: 1px solid $strong-input-border-color; box-sizing: border-box; border-radius: $border-radius; diff --git a/res/css/views/rooms/_RecentlyViewedButton.pcss b/res/css/views/rooms/_RecentlyViewedButton.pcss deleted file mode 100644 index ee370ffeb1c..00000000000 --- a/res/css/views/rooms/_RecentlyViewedButton.pcss +++ /dev/null @@ -1,77 +0,0 @@ -/* -Copyright 2021 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_RecentlyViewedButton_ContextMenu { - padding: 16px 8px 16px 16px; - width: max-content; - max-width: 240px; - max-height: 400px; - border: 1px solid $secondary-hairline-color; - border-radius: 8px; - box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08); - display: flex; - flex-direction: column; - - > h4 { - margin: 0 0 12px 0; - } - - > div { - overflow-y: auto; - - * { - margin-right: 4px; - } - } - - .mx_AccessibleButton { - margin-top: 2px; - padding: 4px; - display: flex; - align-items: center; - border-radius: 8px; - min-height: 34px; - - &:hover { - background-color: $panel-actions; - } - - .mx_DecoratedRoomAvatar { - margin-right: 8px; - width: 24px; - - .mx_BaseAvatar { - width: inherit; - } - } - - .mx_RecentlyViewedButton_entry_label { - display: grid; - - > div { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - .mx_RecentlyViewedButton_entry_spaces { - font-size: $font-12px; - line-height: $font-15px; - color: $secondary-content; - } - } -} diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 0cd2f758731..e4b3da447c0 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -56,7 +56,7 @@ limitations under the License. min-width: 0; margin: 0 20px 0 16px; padding-top: 6px; - border-bottom: 1px solid var(--cpd-color-gray-400); + border-bottom: 1px solid $separator; .mx_InviteOnlyIcon_large { margin: 0; @@ -112,7 +112,7 @@ limitations under the License. } &[aria-expanded="true"] { - background-color: var(--cpd-color-gray-400); + background-color: $separator; .mx_RoomHeader_chevron { transform: rotate(180deg); diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss index 3355f4e0d6c..8f23227c803 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss @@ -34,7 +34,7 @@ limitations under the License. .mx_FormattingButtons_Button_hover { &:hover { - background: var(--cpd-color-bg-subtle-secondary); + background: $panels; .mx_FormattingButtons_Icon { color: $secondary-content; diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss index 49e1e9630ab..3c013214873 100644 --- a/res/css/views/settings/_FontScalingPanel.pcss +++ b/res/css/views/settings/_FontScalingPanel.pcss @@ -40,7 +40,7 @@ limitations under the License. display: flex; align-items: center; padding: 15px $spacing-20 35px; - background: var(--cpd-color-bg-subtle-secondary); + background: $panels; border-radius: 10px; font-size: $font-10px; diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index e8d9c2f63f9..4e534484d88 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -104,7 +104,7 @@ limitations under the License. left: 0; right: 0; - background-color: var(--cpd-color-gray-1100); + background-color: $info-plinth-fg-color; display: flex; justify-content: center; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 2af2ae76212..ab47e946ea6 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -106,7 +106,6 @@ $panel-actions: $roomtile-selected-bg-color; $separator: var(--cpd-color-alpha-gray-400); - /** * Creating a `semantic` color scale. This will not be needed with the new * visual language, but necessary during the transition period From 950465b362ca46e3228252534211dd5e78717358 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 10:12:20 +0100 Subject: [PATCH 23/30] rethemedex --- res/css/_components.pcss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 815b7beb9ea..0fd24fbaf2a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -287,7 +287,6 @@ @import "./views/rooms/_PinnedEventTile.pcss"; @import "./views/rooms/_PresenceLabel.pcss"; @import "./views/rooms/_ReadReceiptGroup.pcss"; -@import "./views/rooms/_RecentlyViewedButton.pcss"; @import "./views/rooms/_ReplyPreview.pcss"; @import "./views/rooms/_ReplyTile.pcss"; @import "./views/rooms/_RoomBreadcrumbs.pcss"; From a3646e23493234cb867155f1f00e180233a14ac0 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 15:30:37 +0100 Subject: [PATCH 24/30] Update pass --- res/css/components/views/context_menus/_KebabContextMenu.pcss | 2 +- .../views/settings/devices/_DeviceExpandDetailsButton.pcss | 2 +- .../components/views/settings/devices/_DeviceTypeIcon.pcss | 2 +- .../views/settings/devices/_FilteredDeviceListHeader.pcss | 2 +- res/css/structures/_UserMenu.pcss | 2 +- res/css/views/context_menus/_IconizedContextMenu.pcss | 2 +- res/css/views/context_menus/_MessageContextMenu.pcss | 2 +- res/css/views/messages/_DisambiguatedProfile.pcss | 2 +- res/css/views/messages/_ReactionsRowButton.pcss | 4 ++-- res/css/views/messages/_TextualEvent.pcss | 1 - res/css/views/rooms/_EventTile.pcss | 4 ++-- res/themes/legacy-light/css/_legacy-light.pcss | 4 ++-- res/themes/light/css/_light.pcss | 2 +- 13 files changed, 15 insertions(+), 16 deletions(-) diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss index 1594420aea7..5ab6782653e 100644 --- a/res/css/components/views/context_menus/_KebabContextMenu.pcss +++ b/res/css/components/views/context_menus/_KebabContextMenu.pcss @@ -16,5 +16,5 @@ limitations under the License. .mx_KebabContextMenu_icon { width: 24px; - color: $secondary-content; + color: $icon-button-color; } diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index b8972d62272..64fb7cfc24e 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -20,7 +20,7 @@ limitations under the License. background: transparent; border-radius: 4px; - color: $secondary-content; + color: $icon-button-color; --icon-transform: rotate(-90deg); diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index 5a5937b1513..5bd1c29ed59 100644 --- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss @@ -23,7 +23,7 @@ limitations under the License. } .mx_DeviceTypeIcon_deviceIconWrapper { - --background-color: $system; + --background-color: $panels; --icon-color: $secondary-content; height: 40px; diff --git a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss index 3bba9d90b35..4101d68f257 100644 --- a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss +++ b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss @@ -26,7 +26,7 @@ limitations under the License. padding: 0 $spacing-16; margin-bottom: $spacing-32; - background-color: $system; + background-color: $panels; border-radius: 8px; color: $secondary-content; } diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index e2e68746c23..f25c15e48e6 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -172,7 +172,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background: $icon-button-color; } } diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index 126225da5dd..eaad0adbb85 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -137,7 +137,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $secondary-content; + background-color: $icon-button-color; } } diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 4531ee1709b..abb48b6b7cd 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -29,7 +29,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background: $icon-button-color; } } diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss index 4f32487e57d..680d3e92c45 100644 --- a/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/res/css/views/messages/_DisambiguatedProfile.pcss @@ -28,8 +28,8 @@ limitations under the License. .mx_DisambiguatedProfile_mxid { margin-inline-start: 5px; - opacity: 0.5; /* Match mx_TextualEvent */ color: $secondary-content; + font-size: var(--cpd-font-size-body-sm); } } diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss index 62387d3a651..9d8af5280e4 100644 --- a/res/css/views/messages/_ReactionsRowButton.pcss +++ b/res/css/views/messages/_ReactionsRowButton.pcss @@ -28,8 +28,8 @@ limitations under the License. } &.mx_ReactionsRowButton_selected { - background-color: $quinary-content; - border-color: $secondary-hairline-color; + background-color: $secondary-hairline-color; + border-color: $quinary-content; } &.mx_AccessibleButton_disabled { diff --git a/res/css/views/messages/_TextualEvent.pcss b/res/css/views/messages/_TextualEvent.pcss index 08f0f07b19a..a8f8d606e74 100644 --- a/res/css/views/messages/_TextualEvent.pcss +++ b/res/css/views/messages/_TextualEvent.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_TextualEvent { - opacity: 0.5; overflow-y: hidden; line-height: normal; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 68844b47b52..c69725c9a64 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -138,7 +138,7 @@ $left-gutter: 64px; &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body, &.mx_EventTile_highlight .mx_EventTile_edited { - color: $alert; + color: $secondary-content; } &.mx_EventTile_bubbleContainer { @@ -686,7 +686,7 @@ $left-gutter: 64px; .mx_EventTile_pendingModeration { user-select: none; font-size: $font-12px; - color: $roomtopic-color; + color: $secondary-content; display: inline-block; margin-left: 9px; } diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 4ee983d398a..59d2f0368c0 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -244,8 +244,8 @@ $e2e-verified-color: #0dbd8b; $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ff5b55; -$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); -$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); +$e2e-verified-color-light: var(--cpd-color-green-300); +$e2e-warning-color-light: var(--cpd-color-red-300); /*** ImageView ***/ $lightbox-bg-color: #454545; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 9331a23d995..f14be865d14 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -210,7 +210,7 @@ $e2e-verified-color: var(--cpd-color-green-900); $e2e-unknown-color: var(--cpd-color-yellow-900); $e2e-unverified-color: var(--cpd-color-green-900); $e2e-warning-color: var(--cpd-color-red-900); -$e2e-verified-color-light: var(--cpd-color-green-400); +$e2e-verified-color-light: var(--cpd-color-green-300); $e2e-warning-color-light: var(--cpd-color-red-300); /* ******************** */ From b46a5d120d048ad752dcdc711b317aaf70226e9c Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 15:54:55 +0100 Subject: [PATCH 25/30] Final tweaks --- res/css/views/elements/_GenericEventListSummary.pcss | 1 + res/css/views/messages/_ReactionsRowButton.pcss | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index d1924202fe5..cfb62d0d37b 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -122,6 +122,7 @@ limitations under the License. .mx_TextualEvent.mx_GenericEventListSummary_summary { font: var(--cpd-font-body-sm-regular); display: inline-flex; + color: $secondary-content; } .mx_GenericEventListSummary_avatars { diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss index 9d8af5280e4..d27cb4f1887 100644 --- a/res/css/views/messages/_ReactionsRowButton.pcss +++ b/res/css/views/messages/_ReactionsRowButton.pcss @@ -18,9 +18,9 @@ limitations under the License. display: inline-flex; line-height: $font-20px; padding: 1px 6px; - border: 1px solid $message-action-bar-border-color; + border: 1px solid $quinary-content; border-radius: 10px; - background-color: $header-panel-bg-color; + background-color: $secondary-hairline-color; user-select: none; &:hover { @@ -28,8 +28,8 @@ limitations under the License. } &.mx_ReactionsRowButton_selected { - background-color: $secondary-hairline-color; - border-color: $quinary-content; + background-color: $accent-300; + border-color: $accent-800; } &.mx_AccessibleButton_disabled { From 3e329ea4ffaef972cb744ffaaebff3ec53f0b22f Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 16:30:56 +0100 Subject: [PATCH 26/30] a11y pass --- res/css/views/elements/_StyledRadioButton.pcss | 2 +- res/css/views/elements/_ToggleSwitch.pcss | 6 ++++-- res/themes/dark/css/_dark.pcss | 4 ++-- res/themes/legacy-dark/css/_legacy-dark.pcss | 4 ++-- res/themes/legacy-light/css/_legacy-light.pcss | 6 +++--- res/themes/light/css/_light.pcss | 6 +++--- 6 files changed, 15 insertions(+), 13 deletions(-) diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss index f6740ffb392..2f641a39afc 100644 --- a/res/css/views/elements/_StyledRadioButton.pcss +++ b/res/css/views/elements/_StyledRadioButton.pcss @@ -20,7 +20,7 @@ limitations under the License. */ .mx_StyledRadioButton { - $radio-circle-color: $quaternary-content; + $radio-circle-color: $strong-input-border-color; $active-radio-circle-color: $accent; position: relative; diff --git a/res/css/views/elements/_ToggleSwitch.pcss b/res/css/views/elements/_ToggleSwitch.pcss index 4dc7e294366..099be7e8ef2 100644 --- a/res/css/views/elements/_ToggleSwitch.pcss +++ b/res/css/views/elements/_ToggleSwitch.pcss @@ -24,7 +24,8 @@ limitations under the License. border-radius: 1.5rem; padding: 2px; - background-color: $togglesw-off-color; + background-color: $background; + border: 1px solid $strong-input-border-color; opacity: 0.5; &[aria-disabled="true"] { @@ -38,10 +39,11 @@ limitations under the License. } .mx_ToggleSwitch.mx_ToggleSwitch_on { - background-color: $accent; + background-color: $inverted-bg-color; > .mx_ToggleSwitch_ball { left: calc(100% - $font-20px); + background-color: $background; } } diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 868a616aa44..6a108c71edd 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -20,7 +20,7 @@ $separator: var(--cpd-color-alpha-gray-400); /* RoomList */ /* ******************** */ -$roomlist-bg-color: rgba(45, 45, 45, 0.9); /* TODO: there's no corresponding compound color */ +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); /* TODO: there's no corresponding compound color */ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); $roomtile-default-badge-bg-color: $muted-fg-color; /* ******************** */ @@ -247,7 +247,7 @@ $live-badge-color: #ffffff; /* One-off colors */ /* ******************** */ $progressbar-bg-color: $system; -$kbd-border-color: $menu-border-color; +$kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #800; $event-timestamp-color: $text-secondary-color; $slider-background-color: $quinary-content; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index ab47e946ea6..52041047cf7 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -148,7 +148,7 @@ $call-primary-content: $primary-content; $call-light-quaternary-content: #c1c6cd; $roomlist-filter-active-bg-color: $panel-actions; -$roomlist-bg-color: $header-panel-bg-color; +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); @@ -196,7 +196,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-selected-bg-color: #1f6954; -$kbd-border-color: #000000; +$kbd-border-color: $strong-input-border-color; $tooltip-timeline-bg-color: $spacePanel-bg-color; $tooltip-timeline-fg-color: #ffffff; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 59d2f0368c0..6e166c71685 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -166,7 +166,7 @@ $separator: var(--cpd-color-alpha-gray-400); /* ******************** */ $roomlist-filter-active-bg-color: $panel-actions; -$roomlist-bg-color: $header-panel-bg-color; +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomlist-header-color: $primary-fg-color; $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); @@ -267,7 +267,7 @@ $visual-bell-bg-color: #faa; /* Toggle switch */ $togglesw-off-color: #c1c9d6; -$togglesw-ball-color: #fff; +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); /* Slider */ $slider-background-color: #c1c9d6; @@ -292,7 +292,7 @@ $message-action-bar-hover-border-color: $focus-bg-color; $reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-selected-bg-color: #e9fff9; -$kbd-border-color: $message-action-bar-border-color; +$kbd-border-color: $strong-input-border-color; $tooltip-timeline-bg-color: $spacePanel-bg-color; $tooltip-timeline-fg-color: #ffffff; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index f14be865d14..34ae265fb5f 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -199,7 +199,7 @@ $imagebody-giflabel-color: $background; /* RoomList */ /* ******************** */ -$roomlist-bg-color: rgba(245, 245, 245, 0.9); +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); $roomtile-default-badge-bg-color: $muted-fg-color; /* ******************** */ @@ -232,7 +232,7 @@ $button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */ /* Toggle switch */ /* ******************** */ $togglesw-off-color: #c1c9d6; -$togglesw-ball-color: $background; +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); /* ******************** */ /* Authpage */ @@ -307,7 +307,7 @@ $call-light-quaternary-content: #c1c6cd; /* One-off colors */ /* ******************** */ $progressbar-bg-color: $panel-actions; -$kbd-border-color: $message-action-bar-border-color; +$kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #faa; $event-timestamp-color: #acacac; $slider-background-color: $togglesw-off-color; From 0127888ceec70cdc3e794c5a9d61b1e1716594c4 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 16:46:49 +0100 Subject: [PATCH 27/30] scope opacity to checkbox and not label --- res/css/views/elements/_StyledCheckbox.pcss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 444c401e604..e1e72ffa71e 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -67,7 +67,6 @@ limitations under the License. } &:disabled + label { - opacity: 0.5; cursor: not-allowed; } @@ -88,6 +87,11 @@ limitations under the License. background: $accent; border-color: $accent; } + + + &:checked:disabled + label > .mx_Checkbox_background { + opacity: .5; + } } .mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] { From de7815a250048776b8e1a17e99143ec9c99e1c1a Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 16:54:01 +0100 Subject: [PATCH 28/30] Add missing customisations var for theming --- res/themes/light-custom/css/_custom.pcss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index cb01842e572..ffe9b5ad12f 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -41,7 +41,7 @@ $lightbox-border-color: var(--timeline-background-color); $menu-bg-color: var(--timeline-background-color); $message-action-bar-bg-color: var(--timeline-background-color); $background: var(--timeline-background-color); -$togglesw-ball-color: var(--timeline-background-color); +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); $togglesw-off-color: var(--togglesw-off-color); $droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */ $authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */ @@ -142,6 +142,9 @@ $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color); $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color); $icon-button-color: var(--icon-button-color, $icon-button-color); +$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color); +$inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color); + /** * Variation of the accent color. * Generate this colour scale using LeonardoColor From 333bdf8368b5086786287607d4ff990f02682946 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 16:59:20 +0100 Subject: [PATCH 29/30] lintfix --- res/css/views/elements/_StyledCheckbox.pcss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index e1e72ffa71e..cbdcce61712 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -88,9 +88,8 @@ limitations under the License. border-color: $accent; } - &:checked:disabled + label > .mx_Checkbox_background { - opacity: .5; + opacity: 0.5; } } From 2197248710e84ac550b1f8a7171d66226731f9db Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 17:25:16 +0100 Subject: [PATCH 30/30] remove unwanted test --- .../appearance-user-settings-tab.spec.ts | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index 7f0c2b55062..c9c822acdef 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -299,32 +299,5 @@ describe("Appearance user settings tab", () => { cy.findByLabelText("Use high contrast").should("not.exist"); }, ); - - it("should support enabling the high contast theme", () => { - cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room"); - - cy.get(".mx_GenericEventListSummary").within(() => { - // Assert that $primary-content is applied to GELS summary on the light theme - // $primary-content on the light theme = #17191c = rgb(27, 29, 34) - cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(27, 29, 34)") - .should("have.css", "opacity", "0.5"); - }); - - cy.openUserSettings("Appearance") - .findByTestId("mx_ThemeChoicePanel") - .findByLabelText("Use high contrast") - .click({ force: true }); // force click because the size of the checkbox is zero - - cy.closeDialog(); - - cy.get(".mx_GenericEventListSummary").within(() => { - // Assert that $secondary-content is specified for GELS summary on the high contrast theme - // $secondary-content on the high contrast theme = #5e6266 = rgb(71, 74, 81) - cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(71, 74, 81)") - .should("have.css", "opacity", "1"); - }); - }); }); });