diff --git a/CHANGES.md b/CHANGES.md index 820d8f19a1..6dfcb81b1e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -21,6 +21,7 @@ - Copy token name from contextual menu [Taiga #13568](https://tree.taiga.io/project/penpot/issue/13568) - Add natural sorting on token names [Taiga #13713](https://tree.taiga.io/project/penpot/issue/13713) - Add drag-to-change for numeric inputs in workspace sidebar [Github #2466](https://github.com/penpot/penpot/issues/2466) +- Add CSS linter [Taiga #13790](https://tree.taiga.io/project/penpot/us/13790) ### :bug: Bugs fixed @@ -48,7 +49,6 @@ - Add token name on broken token pill on sidebar [Taiga #13527](https://tree.taiga.io/project/penpot/issue/13527) - Fix tooltip activated when tab change [Taiga #13627](https://tree.taiga.io/project/penpot/issue/13627) - ## 2.14.0 ### :boom: Breaking changes & Deprecations @@ -116,6 +116,7 @@ ## 2.13.0 ### :heart: Community contributions (Thank you!) + - Add 'page' special shapeId to MCP export_shape tool for full-page snapshots [Github #8689](https://github.com/penpot/penpot/issues/8689) - Fix mask issues with component swap (by @dfelinto) [Github #7675](https://github.com/penpot/penpot/issues/7675) diff --git a/frontend/package.json b/frontend/package.json index 7bfe1fc39c..271c962168 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "fmt:scss": "prettier -c resources/styles -c src/**/*.scss -w", "lint:clj": "clj-kondo --parallel --lint ../common/src src/", "lint:js": "exit 0", - "lint:scss": "exit 0", + "lint:scss": "pnpx stylelint 'src/**/*.scss'", "build:test": "clojure -M:dev:shadow-cljs compile test", "test": "pnpm run build:wasm && pnpm run build:test && node target/tests/test.js", "test:storybook": "vitest run --project=storybook", @@ -94,6 +94,7 @@ "postcss": "^8.5.4", "postcss-clean": "^1.2.2", "postcss-modules": "^6.0.1", + "postcss-scss": "^4.0.9", "prettier": "3.5.3", "pretty-time": "^1.1.0", "prop-types": "^15.8.1", @@ -111,6 +112,10 @@ "source-map-support": "^0.5.21", "storybook": "10.1.11", "style-dictionary": "5.0.0-rc.1", + "stylelint": "^17.4.0", + "stylelint-config-standard-scss": "^17.0.0", + "stylelint-scss": "^7.0.0", + "stylelint-use-logical-spec": "^5.0.1", "svg-sprite": "^2.0.4", "tdigest": "^0.1.2", "tinycolor2": "^1.6.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index d00c38a2cf..ac78b07588 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -148,6 +148,9 @@ importers: postcss-modules: specifier: ^6.0.1 version: 6.0.1(postcss@8.5.6) + postcss-scss: + specifier: ^4.0.9 + version: 4.0.9(postcss@8.5.6) prettier: specifier: 3.5.3 version: 3.5.3 @@ -199,6 +202,18 @@ importers: style-dictionary: specifier: 5.0.0-rc.1 version: 5.0.0-rc.1(tslib@2.8.1) + stylelint: + specifier: ^17.4.0 + version: 17.4.0(typescript@5.9.3) + stylelint-config-standard-scss: + specifier: ^17.0.0 + version: 17.0.0(postcss@8.5.6)(stylelint@17.4.0(typescript@5.9.3)) + stylelint-scss: + specifier: ^7.0.0 + version: 7.0.0(stylelint@17.4.0(typescript@5.9.3)) + stylelint-use-logical-spec: + specifier: ^5.0.1 + version: 5.0.1(stylelint@17.4.0(typescript@5.9.3)) svg-sprite: specifier: ^2.0.4 version: 2.0.4 @@ -543,6 +558,12 @@ packages: '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': resolution: {integrity: sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==} + '@cacheable/memory@2.0.8': + resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==} + + '@cacheable/utils@2.4.0': + resolution: {integrity: sha512-PeMMsqjVq+bF0WBsxFBxr/WozBJiZKY0rUojuaCoIaKnEl3Ju1wfEwS+SV1DU/cSe8fqHIPiYJFif8T3MVt4cQ==} + '@colors/colors@1.6.0': resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==} engines: {node: '>=0.1.90'} @@ -558,6 +579,13 @@ packages: '@csstools/css-parser-algorithms': ^4.0.0 '@csstools/css-tokenizer': ^4.0.0 + '@csstools/css-calc@3.1.1': + resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-parser-algorithms': ^4.0.0 + '@csstools/css-tokenizer': ^4.0.0 + '@csstools/css-color-parser@4.0.1': resolution: {integrity: sha512-vYwO15eRBEkeF6xjAno/KQ61HacNhfQuuU/eGwH67DplL0zD5ZixUa563phQvUelA07yDczIXdtmYojCphKJcw==} engines: {node: '>=20.19.0'} @@ -574,10 +602,32 @@ packages: '@csstools/css-syntax-patches-for-csstree@1.0.26': resolution: {integrity: sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==} + '@csstools/css-syntax-patches-for-csstree@1.1.0': + resolution: {integrity: sha512-H4tuz2nhWgNKLt1inYpoVCfbJbMwX/lQKp3g69rrrIMIYlFD9+zTykOKhNR8uGrAmbS/kT9n6hTFkmDkxLgeTA==} + '@csstools/css-tokenizer@4.0.0': resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} engines: {node: '>=20.19.0'} + '@csstools/media-query-list-parser@5.0.0': + resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@csstools/css-parser-algorithms': ^4.0.0 + '@csstools/css-tokenizer': ^4.0.0 + + '@csstools/selector-resolve-nested@4.0.0': + resolution: {integrity: sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==} + engines: {node: '>=20.19.0'} + peerDependencies: + postcss-selector-parser: ^7.1.1 + + '@csstools/selector-specificity@6.0.0': + resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==} + engines: {node: '>=20.19.0'} + peerDependencies: + postcss-selector-parser: ^7.1.1 + '@dabh/diagnostics@2.0.8': resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==} @@ -1127,6 +1177,15 @@ packages: peerDependencies: tslib: '2' + '@keyv/bigmap@1.3.1': + resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==} + engines: {node: '>= 18'} + peerDependencies: + keyv: ^5.6.0 + + '@keyv/serialize@1.1.1': + resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==} + '@mdx-js/react@3.1.1': resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==} peerDependencies: @@ -1527,6 +1586,10 @@ packages: '@sinclair/typebox@0.27.10': resolution: {integrity: sha512-MTBk/3jGLNB2tVxv6uLlFh1iu64iYOQ2PbdOSK3NW8JZsmlaOh2q6sdtKowBhfw8QFLmYNzTW4/oK4uATIi6ZA==} + '@sindresorhus/merge-streams@4.0.0': + resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} + engines: {node: '>=18'} + '@so-ric/colorspace@1.1.6': resolution: {integrity: sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==} @@ -2094,6 +2157,10 @@ packages: ast-v8-to-istanbul@0.3.11: resolution: {integrity: sha512-Qya9fkoofMjCBNVdWINMjB5KZvkYfaO9/anwkWnjxibpWUxo5iHl2sOdP7/uAqaRuUYuoo8rDwnbaaKVFxoUvw==} + astral-regex@2.0.0: + resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==} + engines: {node: '>=8'} + async-function@1.0.0: resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==} engines: {node: '>= 0.4'} @@ -2206,6 +2273,9 @@ packages: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} + cacheable@2.3.3: + resolution: {integrity: sha512-iffYMX4zxKp54evOH27fm92hs+DeC1DhXmNVN8Tr94M/iZIV42dqTHSR2Ik4TOSPyOAwKr7Yu3rN9ALoLkbWyQ==} + call-bind-apply-helpers@1.0.2: resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==} engines: {node: '>= 0.4'} @@ -2341,6 +2411,9 @@ packages: resolution: {integrity: sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==} engines: {node: '>=18'} + colord@2.9.3: + resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + colorjs.io@0.4.5: resolution: {integrity: sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==} @@ -2424,6 +2497,15 @@ packages: core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + cosmiconfig@9.0.1: + resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + cross-fetch@3.2.0: resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==} @@ -2435,6 +2517,10 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + css-functions-list@3.3.3: + resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==} + engines: {node: '>=12'} + css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} @@ -2715,6 +2801,10 @@ packages: resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==} engines: {node: '>=0.12'} + env-paths@2.2.1: + resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==} + engines: {node: '>=6'} + error-ex@1.3.4: resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==} @@ -2938,6 +3028,10 @@ packages: fast-levenshtein@2.0.6: resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} + fastest-levenshtein@1.0.16: + resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} + engines: {node: '>= 4.9.1'} + fastq@1.20.1: resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==} @@ -2962,6 +3056,9 @@ packages: fflate@0.8.2: resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} + file-entry-cache@11.1.2: + resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==} + file-entry-cache@8.0.0: resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} engines: {node: '>=16.0.0'} @@ -2985,6 +3082,9 @@ packages: resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} engines: {node: '>=16'} + flat-cache@6.1.20: + resolution: {integrity: sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ==} + flatted@3.3.3: resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==} @@ -3076,6 +3176,10 @@ packages: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} + get-east-asian-width@1.5.0: + resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==} + engines: {node: '>=18'} + get-func-name@2.0.2: resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} @@ -3138,6 +3242,14 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me + global-modules@2.0.0: + resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} + engines: {node: '>=6'} + + global-prefix@3.0.0: + resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} + engines: {node: '>=6'} + globals@14.0.0: resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==} engines: {node: '>=18'} @@ -3146,6 +3258,13 @@ packages: resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} engines: {node: '>= 0.4'} + globby@16.1.1: + resolution: {integrity: sha512-dW7vl+yiAJSp6aCekaVnVJxurRv7DCOLyXqEG3RYMYUg7AuJ2jCqPkZTA8ooqC2vtnkaMcV5WfFBMuEnTu1OQg==} + engines: {node: '>=20'} + + globjoin@0.1.4: + resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} + gopd@1.2.0: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} @@ -3165,6 +3284,10 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} + has-flag@5.0.1: + resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==} + engines: {node: '>=12'} + has-property-descriptors@1.0.2: resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} @@ -3180,6 +3303,10 @@ packages: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} + hashery@1.5.0: + resolution: {integrity: sha512-nhQ6ExaOIqti2FDWoEMWARUqIKyjr2VcZzXShrI+A3zpeiuPWzx6iPftt44LhP74E5sW36B75N6VHbvRtpvO6Q==} + engines: {node: '>=20'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -3198,6 +3325,9 @@ packages: resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==} engines: {node: '>=12.0.0'} + hookified@1.15.1: + resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==} + hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} @@ -3208,6 +3338,10 @@ packages: html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + html-tags@5.1.0: + resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==} + engines: {node: '>=20.10'} + http-errors@2.0.1: resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==} engines: {node: '>= 0.8'} @@ -3252,6 +3386,10 @@ packages: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} + ignore@7.0.5: + resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==} + engines: {node: '>= 4'} + immutable@3.7.6: resolution: {integrity: sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==} engines: {node: '>=0.8.0'} @@ -3267,6 +3405,9 @@ packages: resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} engines: {node: '>=8'} + import-meta-resolve@4.2.0: + resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==} + imurmurhash@0.1.4: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} @@ -3397,10 +3538,18 @@ packages: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + is-path-inside@4.0.0: + resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==} + engines: {node: '>=12'} + is-plain-obj@4.1.0: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} + is-plain-object@5.0.0: + resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} + engines: {node: '>=0.10.0'} + is-potential-custom-element-name@1.0.1: resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} @@ -3547,6 +3696,9 @@ packages: json-parse-better-errors@1.0.2: resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==} + json-parse-even-better-errors@2.3.1: + resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} + json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} @@ -3582,9 +3734,19 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + keyv@5.6.0: + resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==} + + kind-of@6.0.3: + resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} + engines: {node: '>=0.10.0'} + klaw-sync@6.0.0: resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==} + known-css-properties@0.37.0: + resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==} + kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} @@ -3602,6 +3764,9 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} + lines-and-columns@1.2.4: + resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} @@ -3634,6 +3799,9 @@ packages: lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} + lodash.truncate@4.4.2: + resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} + lodash@4.17.23: resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==} @@ -3694,6 +3862,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mathml-tag-names@4.0.0: + resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==} + mdn-data@2.0.14: resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} @@ -3703,6 +3874,9 @@ packages: mdn-data@2.12.2: resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + mdn-data@2.27.1: + resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==} + media-typer@1.1.0: resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==} engines: {node: '>= 0.8'} @@ -3716,6 +3890,10 @@ packages: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} + meow@14.1.0: + resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==} + engines: {node: '>=20'} + merge-descriptors@2.0.0: resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==} engines: {node: '>=18'} @@ -4001,6 +4179,10 @@ packages: resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==} engines: {node: '>=4'} + parse-json@5.2.0: + resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} + engines: {node: '>=8'} + parse5@8.0.0: resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==} @@ -4132,6 +4314,9 @@ packages: resolution: {integrity: sha512-DpuMWW19Dd2K9KY4wknMz3khq9q2yZYa2U37bnhzdtBdBv0ggIfUj5T2XD3ir6gKVlDkb5OtOqw1iQJWq6qvpw==} engines: {node: '>=4.0.0'} + postcss-media-query-parser@0.2.3: + resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} + postcss-modules-extract-imports@3.1.0: resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==} engines: {node: ^10 || ^12 || >= 14} @@ -4161,6 +4346,21 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-resolve-nested-selector@0.1.6: + resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} + + postcss-safe-parser@7.0.1: + resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==} + engines: {node: '>=18.0'} + peerDependencies: + postcss: ^8.4.31 + + postcss-scss@4.0.9: + resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.4.29 + postcss-selector-parser@7.1.1: resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} engines: {node: '>=4'} @@ -4182,6 +4382,7 @@ packages: prebuild-install@7.1.3: resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==} engines: {node: '>=10'} + deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available. hasBin: true prelude-ls@1.2.1: @@ -4255,6 +4456,10 @@ packages: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} + qified@0.6.0: + resolution: {integrity: sha512-tsSGN1x3h569ZSU1u6diwhltLyfUWDp3YbFHedapTmpBl0B3P6U3+Qptg7xu+v+1io1EwhdPyyRHYbEw0KN2FA==} + engines: {node: '>=20'} + qs@6.14.1: resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==} engines: {node: '>=0.6'} @@ -4704,6 +4909,14 @@ packages: resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==} engines: {node: '>=6'} + slash@5.1.0: + resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==} + engines: {node: '>=14.16'} + + slice-ansi@4.0.0: + resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} + engines: {node: '>=10'} + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -4787,6 +5000,10 @@ packages: resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==} engines: {node: '>=12'} + string-width@8.2.0: + resolution: {integrity: sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==} + engines: {node: '>=20'} + string.prototype.codepointat@0.2.1: resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==} @@ -4866,6 +5083,59 @@ packages: engines: {node: '>=22.0.0'} hasBin: true + stylelint-config-recommended-scss@17.0.0: + resolution: {integrity: sha512-VkVD9r7jfUT/dq3mA3/I1WXXk2U71rO5wvU2yIil9PW5o1g3UM7Xc82vHmuVJHV7Y8ok5K137fmW5u3HbhtTOA==} + engines: {node: '>=20'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^17.0.0 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-recommended@18.0.0: + resolution: {integrity: sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==} + engines: {node: '>=20.19.0'} + peerDependencies: + stylelint: ^17.0.0 + + stylelint-config-standard-scss@17.0.0: + resolution: {integrity: sha512-uLJS6xgOCBw5EMsDW7Ukji8l28qRoMnkRch15s0qwZpskXvWt9oPzMmcYM307m9GN4MxuWLsQh4I6hU9yI53cQ==} + engines: {node: '>=20'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^17.0.0 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-standard@40.0.0: + resolution: {integrity: sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==} + engines: {node: '>=20.19.0'} + peerDependencies: + stylelint: ^17.0.0 + + stylelint-scss@7.0.0: + resolution: {integrity: sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==} + engines: {node: '>=20.19.0'} + peerDependencies: + stylelint: ^16.8.2 || ^17.0.0 + + stylelint-use-logical-spec@5.0.1: + resolution: {integrity: sha512-UfLB4LW6iG4r3cXxjxkiHQrFyhWFqt8FpNNngD+TyvgMWSokk5TYwTvBHS3atUvZhOogllTOe/PUrGE+4z84AA==} + engines: {node: '>=8.0.0'} + peerDependencies: + stylelint: '>=11 < 17' + + stylelint@17.4.0: + resolution: {integrity: sha512-3kQ2/cHv3Zt8OBg+h2B8XCx9evEABQIrv4hh3uXahGz/ZEHrTR80zxBiK2NfXNaSoyBzxO1pjsz1Vhdzwn5XSw==} + engines: {node: '>=20.19.0'} + hasBin: true + + supports-color@10.2.2: + resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==} + engines: {node: '>=18'} + supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -4878,6 +5148,10 @@ packages: resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} engines: {node: '>=10'} + supports-hyperlinks@4.4.0: + resolution: {integrity: sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==} + engines: {node: '>=20'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -4887,6 +5161,9 @@ packages: engines: {node: '>=12'} hasBin: true + svg-tags@1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + svgo@2.8.0: resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==} engines: {node: '>=10.13.0'} @@ -4908,6 +5185,10 @@ packages: resolution: {integrity: sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==} engines: {node: '>=16.0.0'} + table@6.9.0: + resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} + engines: {node: '>=10.0.0'} + tar-fs@2.1.4: resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==} @@ -5113,6 +5394,10 @@ packages: undici-types@7.16.0: resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==} + unicorn-magic@0.4.0: + resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==} + engines: {node: '>=20'} + universalify@2.0.1: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} @@ -5410,6 +5695,10 @@ packages: wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + write-file-atomic@7.0.1: + resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==} + engines: {node: ^20.17.0 || >=22.9.0} + ws@8.19.0: resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==} engines: {node: '>=10.0.0'} @@ -5724,6 +6013,18 @@ snapshots: dependencies: postcss-calc-ast-parser: 0.1.4 + '@cacheable/memory@2.0.8': + dependencies: + '@cacheable/utils': 2.4.0 + '@keyv/bigmap': 1.3.1(keyv@5.6.0) + hookified: 1.15.1 + keyv: 5.6.0 + + '@cacheable/utils@2.4.0': + dependencies: + hashery: 1.5.0 + keyv: 5.6.0 + '@colors/colors@1.6.0': {} '@csstools/color-helpers@6.0.1': {} @@ -5733,6 +6034,11 @@ snapshots: '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) '@csstools/css-tokenizer': 4.0.0 + '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + '@csstools/css-color-parser@4.0.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': dependencies: '@csstools/color-helpers': 6.0.1 @@ -5746,8 +6052,23 @@ snapshots: '@csstools/css-syntax-patches-for-csstree@1.0.26': {} + '@csstools/css-syntax-patches-for-csstree@1.1.0': {} + '@csstools/css-tokenizer@4.0.0': {} + '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': + dependencies: + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + + '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)': + dependencies: + postcss-selector-parser: 7.1.1 + + '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.1)': + dependencies: + postcss-selector-parser: 7.1.1 + '@dabh/diagnostics@2.0.8': dependencies: '@so-ric/colorspace': 1.1.6 @@ -6153,6 +6474,14 @@ snapshots: '@jsonjoy.com/codegen': 17.65.0(tslib@2.8.1) tslib: 2.8.1 + '@keyv/bigmap@1.3.1(keyv@5.6.0)': + dependencies: + hashery: 1.5.0 + hookified: 1.15.1 + keyv: 5.6.0 + + '@keyv/serialize@1.1.1': {} + '@mdx-js/react@3.1.1(@types/react@19.2.13)(react@19.2.3)': dependencies: '@types/mdx': 2.0.13 @@ -6458,6 +6787,8 @@ snapshots: '@sinclair/typebox@0.27.10': {} + '@sindresorhus/merge-streams@4.0.0': {} + '@so-ric/colorspace@1.1.6': dependencies: color: 5.0.3 @@ -7189,6 +7520,8 @@ snapshots: estree-walker: 3.0.3 js-tokens: 10.0.0 + astral-regex@2.0.0: {} + async-function@1.0.0: {} async@3.2.6: {} @@ -7317,6 +7650,14 @@ snapshots: cac@6.7.14: {} + cacheable@2.3.3: + dependencies: + '@cacheable/memory': 2.0.8 + '@cacheable/utils': 2.4.0 + hookified: 1.15.1 + keyv: 5.6.0 + qified: 0.6.0 + call-bind-apply-helpers@1.0.2: dependencies: es-errors: 1.3.0 @@ -7459,6 +7800,8 @@ snapshots: color-convert: 3.1.3 color-string: 2.1.4 + colord@2.9.3: {} + colorjs.io@0.4.5: {} colorjs.io@0.5.2: {} @@ -7529,6 +7872,15 @@ snapshots: core-util-is@1.0.3: {} + cosmiconfig@9.0.1(typescript@5.9.3): + dependencies: + env-paths: 2.2.1 + import-fresh: 3.3.1 + js-yaml: 4.1.1 + parse-json: 5.2.0 + optionalDependencies: + typescript: 5.9.3 + cross-fetch@3.2.0(encoding@0.1.13): dependencies: node-fetch: 2.7.0(encoding@0.1.13) @@ -7549,6 +7901,8 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-functions-list@3.3.3: {} + css-select@4.3.0: dependencies: boolbase: 1.0.0 @@ -7811,6 +8165,8 @@ snapshots: entities@7.0.1: {} + env-paths@2.2.1: {} + error-ex@1.3.4: dependencies: is-arrayish: 0.2.1 @@ -8231,6 +8587,8 @@ snapshots: fast-levenshtein@2.0.6: {} + fastest-levenshtein@1.0.16: {} + fastq@1.20.1: dependencies: reusify: 1.1.0 @@ -8257,6 +8615,10 @@ snapshots: fflate@0.8.2: {} + file-entry-cache@11.1.2: + dependencies: + flat-cache: 6.1.20 + file-entry-cache@8.0.0: dependencies: flat-cache: 4.0.1 @@ -8290,6 +8652,12 @@ snapshots: flatted: 3.3.3 keyv: 4.5.4 + flat-cache@6.1.20: + dependencies: + cacheable: 2.3.3 + flatted: 3.3.3 + hookified: 1.15.1 + flatted@3.3.3: {} fn.name@1.1.0: {} @@ -8368,6 +8736,8 @@ snapshots: get-caller-file@2.0.5: {} + get-east-asian-width@1.5.0: {} + get-func-name@2.0.2: {} get-intrinsic@1.3.0: @@ -8452,6 +8822,16 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 + global-modules@2.0.0: + dependencies: + global-prefix: 3.0.0 + + global-prefix@3.0.0: + dependencies: + ini: 1.3.8 + kind-of: 6.0.3 + which: 1.3.1 + globals@14.0.0: {} globalthis@1.0.4: @@ -8459,6 +8839,17 @@ snapshots: define-properties: 1.2.1 gopd: 1.2.0 + globby@16.1.1: + dependencies: + '@sindresorhus/merge-streams': 4.0.0 + fast-glob: 3.3.3 + ignore: 7.0.5 + is-path-inside: 4.0.0 + slash: 5.1.0 + unicorn-magic: 0.4.0 + + globjoin@0.1.4: {} + gopd@1.2.0: {} graceful-fs@4.2.11: {} @@ -8469,6 +8860,8 @@ snapshots: has-flag@4.0.0: {} + has-flag@5.0.1: {} + has-property-descriptors@1.0.2: dependencies: es-define-property: 1.0.1 @@ -8483,6 +8876,10 @@ snapshots: dependencies: has-symbols: 1.1.0 + hashery@1.5.0: + dependencies: + hookified: 1.15.1 + hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -8497,6 +8894,8 @@ snapshots: highlight.js@11.11.1: {} + hookified@1.15.1: {} + hosted-git-info@2.8.9: {} html-encoding-sniffer@6.0.0: @@ -8507,6 +8906,8 @@ snapshots: html-escaper@2.0.2: {} + html-tags@5.1.0: {} + http-errors@2.0.1: dependencies: depd: 2.0.0 @@ -8551,6 +8952,8 @@ snapshots: ignore@5.3.2: {} + ignore@7.0.5: {} + immutable@3.7.6: {} immutable@5.1.4: {} @@ -8562,6 +8965,8 @@ snapshots: import-lazy@4.0.0: {} + import-meta-resolve@4.2.0: {} + imurmurhash@0.1.4: {} indent-string@4.0.0: {} @@ -8682,8 +9087,12 @@ snapshots: is-number@7.0.0: {} + is-path-inside@4.0.0: {} + is-plain-obj@4.1.0: {} + is-plain-object@5.0.0: {} + is-potential-custom-element-name@1.0.1: {} is-promise@4.0.0: {} @@ -8855,6 +9264,8 @@ snapshots: json-parse-better-errors@1.0.2: {} + json-parse-even-better-errors@2.3.1: {} + json-schema-traverse@0.4.1: {} json-schema-traverse@1.0.0: {} @@ -8894,10 +9305,18 @@ snapshots: dependencies: json-buffer: 3.0.1 + keyv@5.6.0: + dependencies: + '@keyv/serialize': 1.1.1 + + kind-of@6.0.3: {} + klaw-sync@6.0.0: dependencies: graceful-fs: 4.2.11 + known-css-properties@0.37.0: {} + kolorist@1.8.0: {} kuler@2.0.0: {} @@ -8913,6 +9332,8 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 + lines-and-columns@1.2.4: {} + load-json-file@4.0.0: dependencies: graceful-fs: 4.2.11 @@ -8945,6 +9366,8 @@ snapshots: lodash.merge@4.6.2: {} + lodash.truncate@4.4.2: {} + lodash@4.17.23: {} logform@2.7.0: @@ -9006,12 +9429,16 @@ snapshots: math-intrinsics@1.1.0: {} + mathml-tag-names@4.0.0: {} + mdn-data@2.0.14: {} mdn-data@2.0.28: {} mdn-data@2.12.2: {} + mdn-data@2.27.1: {} + media-typer@1.1.0: {} memfs@4.56.10(tslib@2.8.1): @@ -9033,6 +9460,8 @@ snapshots: memorystream@0.3.1: {} + meow@14.1.0: {} + merge-descriptors@2.0.0: {} merge-stream@2.0.0: {} @@ -9314,6 +9743,13 @@ snapshots: error-ex: 1.3.4 json-parse-better-errors: 1.0.2 + parse-json@5.2.0: + dependencies: + '@babel/code-frame': 7.29.0 + error-ex: 1.3.4 + json-parse-even-better-errors: 2.3.1 + lines-and-columns: 1.2.4 + parse5@8.0.0: dependencies: entities: 6.0.1 @@ -9431,6 +9867,8 @@ snapshots: clean-css: 4.2.4 postcss: 6.0.23 + postcss-media-query-parser@0.2.3: {} + postcss-modules-extract-imports@3.1.0(postcss@8.5.6): dependencies: postcss: 8.5.6 @@ -9464,6 +9902,16 @@ snapshots: postcss-modules-values: 4.0.0(postcss@8.5.6) string-hash: 1.1.3 + postcss-resolve-nested-selector@0.1.6: {} + + postcss-safe-parser@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-scss@4.0.9(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser@7.1.1: dependencies: cssesc: 3.0.0 @@ -9562,6 +10010,10 @@ snapshots: punycode@2.3.1: {} + qified@0.6.0: + dependencies: + hookified: 1.15.1 + qs@6.14.1: dependencies: side-channel: 1.1.0 @@ -10063,6 +10515,14 @@ snapshots: slash@2.0.0: {} + slash@5.1.0: {} + + slice-ansi@4.0.0: + dependencies: + ansi-styles: 4.3.0 + astral-regex: 2.0.0 + is-fullwidth-code-point: 3.0.0 + source-map-js@1.2.1: {} source-map-support@0.5.21: @@ -10169,6 +10629,11 @@ snapshots: emoji-regex: 9.2.2 strip-ansi: 7.1.2 + string-width@8.2.0: + dependencies: + get-east-asian-width: 1.5.0 + strip-ansi: 7.1.2 + string.prototype.codepointat@0.2.1: {} string.prototype.includes@2.0.1: @@ -10283,6 +10748,93 @@ snapshots: transitivePeerDependencies: - tslib + stylelint-config-recommended-scss@17.0.0(postcss@8.5.6)(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + postcss-scss: 4.0.9(postcss@8.5.6) + stylelint: 17.4.0(typescript@5.9.3) + stylelint-config-recommended: 18.0.0(stylelint@17.4.0(typescript@5.9.3)) + stylelint-scss: 7.0.0(stylelint@17.4.0(typescript@5.9.3)) + optionalDependencies: + postcss: 8.5.6 + + stylelint-config-recommended@18.0.0(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + stylelint: 17.4.0(typescript@5.9.3) + + stylelint-config-standard-scss@17.0.0(postcss@8.5.6)(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + stylelint: 17.4.0(typescript@5.9.3) + stylelint-config-recommended-scss: 17.0.0(postcss@8.5.6)(stylelint@17.4.0(typescript@5.9.3)) + stylelint-config-standard: 40.0.0(stylelint@17.4.0(typescript@5.9.3)) + optionalDependencies: + postcss: 8.5.6 + + stylelint-config-standard@40.0.0(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + stylelint: 17.4.0(typescript@5.9.3) + stylelint-config-recommended: 18.0.0(stylelint@17.4.0(typescript@5.9.3)) + + stylelint-scss@7.0.0(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + css-tree: 3.1.0 + is-plain-object: 5.0.0 + known-css-properties: 0.37.0 + mdn-data: 2.27.1 + postcss-media-query-parser: 0.2.3 + postcss-resolve-nested-selector: 0.1.6 + postcss-selector-parser: 7.1.1 + postcss-value-parser: 4.2.0 + stylelint: 17.4.0(typescript@5.9.3) + + stylelint-use-logical-spec@5.0.1(stylelint@17.4.0(typescript@5.9.3)): + dependencies: + stylelint: 17.4.0(typescript@5.9.3) + + stylelint@17.4.0(typescript@5.9.3): + dependencies: + '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-syntax-patches-for-csstree': 1.1.0 + '@csstools/css-tokenizer': 4.0.0 + '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1) + '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1) + colord: 2.9.3 + cosmiconfig: 9.0.1(typescript@5.9.3) + css-functions-list: 3.3.3 + css-tree: 3.1.0 + debug: 4.4.3(supports-color@5.5.0) + fast-glob: 3.3.3 + fastest-levenshtein: 1.0.16 + file-entry-cache: 11.1.2 + global-modules: 2.0.0 + globby: 16.1.1 + globjoin: 0.1.4 + html-tags: 5.1.0 + ignore: 7.0.5 + import-meta-resolve: 4.2.0 + imurmurhash: 0.1.4 + is-plain-object: 5.0.0 + mathml-tag-names: 4.0.0 + meow: 14.1.0 + micromatch: 4.0.8 + normalize-path: 3.0.0 + picocolors: 1.1.1 + postcss: 8.5.6 + postcss-safe-parser: 7.0.1(postcss@8.5.6) + postcss-selector-parser: 7.1.1 + postcss-value-parser: 4.2.0 + string-width: 8.2.0 + supports-hyperlinks: 4.4.0 + svg-tags: 1.0.0 + table: 6.9.0 + write-file-atomic: 7.0.1 + transitivePeerDependencies: + - supports-color + - typescript + + supports-color@10.2.2: {} + supports-color@5.5.0: dependencies: has-flag: 3.0.0 @@ -10295,6 +10847,11 @@ snapshots: dependencies: has-flag: 4.0.0 + supports-hyperlinks@4.4.0: + dependencies: + has-flag: 5.0.1 + supports-color: 10.2.2 + supports-preserve-symlinks-flag@1.0.0: {} svg-sprite@2.0.4: @@ -10317,6 +10874,8 @@ snapshots: xpath: 0.0.34 yargs: 17.7.2 + svg-tags@1.0.0: {} + svgo@2.8.0: dependencies: '@trysound/sax': 0.2.0 @@ -10343,6 +10902,14 @@ snapshots: sync-message-port@1.2.0: {} + table@6.9.0: + dependencies: + ajv: 8.13.0 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + tar-fs@2.1.4: dependencies: chownr: 1.1.4 @@ -10543,6 +11110,8 @@ snapshots: undici-types@7.16.0: {} + unicorn-magic@0.4.0: {} + universalify@2.0.1: {} unpipe@1.0.0: {} @@ -10884,6 +11453,10 @@ snapshots: wrappy@1.0.2: {} + write-file-atomic@7.0.1: + dependencies: + signal-exit: 4.1.0 + ws@8.19.0: {} wsl-utils@0.1.0: diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 07f6b82dc9..6fa5d52d8f 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -12,7 +12,7 @@ @use "./z-index.scss" as *; // SCROLLBAR -.new-scrollbar { +%new-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(170, 181, 186, 0.3) transparent; &:hover { @@ -56,7 +56,7 @@ } // BUTTONS -.button-primary { +%button-primary { @include buttonStyle; @include flexCenter; @include headlineSmallTypography; @@ -100,7 +100,7 @@ } } -.button-secondary { +%button-secondary { @include buttonStyle; @include flexCenter; border-radius: $br-8; @@ -142,7 +142,7 @@ } } -.button-tertiary { +%button-tertiary { @include buttonStyle; @include flexCenter; --button-tertiary-border-width: #{$s-2}; @@ -191,7 +191,7 @@ } } -.button-icon-selected { +%button-icon-selected { outline: none; border-color: var(--button-icon-border-color-selected); background-color: var(--button-icon-background-color-selected); @@ -241,7 +241,7 @@ color: var(--button-warning-foreground-color-rest); } -.button-disabled { +%button-disabled { @include buttonStyle; @include flexCenter; background-color: var(--button-background-color-disabled); @@ -250,7 +250,7 @@ cursor: unset; } -.button-tag { +%button-tag { @include buttonStyle; @include flexCenter; @include focus; @@ -265,7 +265,7 @@ } } -.button-icon { +%button-icon { @include flexCenter; height: $s-16; width: $s-16; @@ -274,8 +274,8 @@ stroke-width: 1px; } -.button-icon-small { - @extend .button-icon; +%button-icon-small { + @extend %button-icon; height: $s-12; width: $s-12; stroke-width: 1.33px; @@ -296,7 +296,7 @@ } // INPUTS -.input-base { +%input-base { @include removeInputStyle; @include textEllipsis; height: $s-28; @@ -317,7 +317,7 @@ min-width: $s-12; height: $s-32; svg { - @extend .button-icon-small; + @extend %button-icon-small; } } @@ -330,7 +330,7 @@ color: var(--input-foreground-color); } -.input-element { +%input-element { display: flex; align-items: center; height: $s-32; @@ -348,13 +348,13 @@ label { @extend .input-label; svg { - @extend .button-icon-small; + @extend %button-icon-small; stroke: var(--input-foreground-color); } } input { - @extend .input-base; + @extend %input-base; } ::placeholder { @@ -405,13 +405,13 @@ } } -.input-element-label { +%input-element-label { @include bodySmallTypography; display: flex; align-items: flex-start; padding: 0; input { - @extend .input-base; + @extend %input-base; padding-left: $s-8; display: flex; align-items: flex-start; @@ -445,7 +445,7 @@ } } -.disabled-input { +%disabled-input { background-color: var(--input-background-color-disabled); border: $s-1 solid var(--input-border-color-disabled); color: var(--input-foreground-color-disabled); @@ -459,7 +459,7 @@ } } -.checkbox-icon { +%checkbox-icon { @include flexCenter; width: $s-16; height: $s-16; @@ -485,7 +485,7 @@ border-color: var(--input-checkbox-border-color-active); background-color: var(--input-checkbox-background-color-active); svg { - @extend .button-icon-small; + @extend %button-icon-small; stroke: var(--input-checkbox-foreground-color-active); } } @@ -494,7 +494,7 @@ background-color: var(--input-checkbox-background-color-intermediate); border-color: var(--input-checkbox-border-color-intermediate); svg { - @extend .button-icon-small; + @extend %button-icon-small; stroke: var(--input-checkbox-foreground-color-intermediate); } } @@ -508,7 +508,7 @@ } } -.input-checkbox { +%input-checkbox { display: flex; align-items: center; label { @@ -519,7 +519,7 @@ cursor: pointer; color: var(--input-checkbox-text-foreground-color); span { - @extend .checkbox-icon; + @extend %checkbox-icon; } input { margin: 0; @@ -539,7 +539,7 @@ } } -.input-with-label { +%input-with-label { display: flex; flex-direction: column; label { @@ -552,7 +552,7 @@ } input { - @extend .input-base; + @extend %input-base; @include bodySmallTypography; border-radius: $br-8; height: $s-32; @@ -571,7 +571,7 @@ } } &:global(.disabled) { - @extend .disabled-input; + @extend %disabled-input; } &:global(.invalid) { @@ -582,7 +582,7 @@ } //MODALS -.modal-background { +%modal-background { @include menuShadow; position: absolute; display: flex; @@ -594,7 +594,7 @@ background-color: var(--modal-background-color); } -.modal-overlay-base { +%modal-overlay-base { @include flexCenter; position: fixed; left: 0; @@ -605,7 +605,7 @@ background-color: var(--overlay-color); } -.modal-container-base { +%modal-container-base { position: relative; padding: $s-32; border-radius: $br-8; @@ -617,15 +617,15 @@ max-height: $s-512; } -.modal-close-btn-base { - @extend .button-tertiary; +%modal-close-btn-base { + @extend %button-tertiary; position: absolute; top: $s-8; right: $s-6; height: $s-32; width: $s-28; svg { - @extend .button-icon; + @extend %button-icon; } } @@ -636,14 +636,14 @@ border-bottom: $s-1 solid var(--modal-hint-border-color); } -.modal-action-btns { +%modal-action-btns { display: flex; justify-content: flex-end; gap: $s-16; } -.modal-cancel-btn { - @extend .button-secondary; +%modal-cancel-btn { + @extend %button-secondary; @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; @@ -651,8 +651,8 @@ margin: 0; } -.modal-accept-btn { - @extend .button-primary; +%modal-accept-btn { + @extend %button-primary; @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; @@ -660,8 +660,8 @@ margin: 0; } -.modal-danger-btn { - @extend .button-primary; +%modal-danger-btn { + @extend %button-primary; @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; @@ -676,7 +676,7 @@ // FIXME: This is used multiple times accross the app. We should design this in // the DS and create a proper component for it. -.asset-element { +%asset-element { @include bodySmallTypography; display: flex; align-items: center; @@ -691,13 +691,13 @@ } } -.shortcut-base { +%shortcut-base { @include flexCenter; gap: $s-2; color: var(--menu-shortcut-foreground-color); } -.shortcut-key-base { +%shortcut-key-base { @include bodySmallTypography; @include flexCenter; height: $s-20; @@ -706,7 +706,7 @@ background-color: var(--menu-shortcut-background-color); } -.mixed-bar { +%mixed-bar { @include bodySmallTypography; display: flex; align-items: center; @@ -718,7 +718,7 @@ color: var(--input-foreground-color-active); } -.link { +%link { background: unset; border: none; color: var(--link-foreground-color); @@ -726,7 +726,7 @@ text-decoration: none; } -.colorpicker-handler { +%colorpicker-handler { position: absolute; left: 50%; top: 50%; @@ -742,16 +742,16 @@ } } -.attr-title { +%attr-title { div { margin-left: 0; color: var(--entry-foreground-color-hover); } button { - @extend .button-tertiary; + @extend %button-tertiary; display: none; svg { - @extend .button-icon-small; + @extend %button-icon-small; stroke: var(--icon-foreground); } } @@ -762,7 +762,7 @@ } } -.attr-row { +%attr-row { display: grid; grid-template-areas: "name content"; grid-template-columns: 1fr 3fr; @@ -785,7 +785,7 @@ } } -.copy-button-children { +%copy-button-children { @include bodySmallTypography; color: var(--color-foreground-primary); text-align: left; @@ -800,7 +800,7 @@ } // SELECTS AND DROPDOWNS -.menu-dropdown { +%menu-dropdown { @include menuShadow; @include flexColumn; position: absolute; @@ -813,7 +813,7 @@ margin: 0; } -.menu-item-base { +%menu-item-base { @include bodySmallTypography; display: flex; align-items: center; @@ -828,7 +828,7 @@ } } -.dropdown-element-base { +%dropdown-element-base { @include bodySmallTypography; display: flex; align-items: center; @@ -843,7 +843,7 @@ @include flexCenter; @include textEllipsis; svg { - @extend .button-icon-small; + @extend %button-icon-small; stroke: var(--icon-foreground); } } @@ -856,7 +856,7 @@ } } -.dropdown-wrapper { +%dropdown-wrapper { @include menuShadow; position: absolute; top: $s-32; @@ -875,7 +875,7 @@ border: $s-2 solid var(--panel-border-color); } -.select-wrapper { +%select-wrapper { @include bodySmallTypography; position: relative; display: flex; diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss index ed30f20a2e..708e83eb6b 100644 --- a/frontend/resources/styles/common/refactor/common-dashboard.scss +++ b/frontend/resources/styles/common/refactor/common-dashboard.scss @@ -138,14 +138,14 @@ } .btn-primary { - @extend .button-primary; + @extend %button-primary; text-transform: uppercase; font-size: $fs-14; font-weight: $fw400; } .btn-secondary { - @extend .button-secondary; + @extend %button-secondary; color: var(--color-foreground-primary); font-size: $fs-12; text-transform: uppercase; diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss index f50ee50d41..0776a29250 100644 --- a/frontend/src/app/main/ui/alert.scss +++ b/frontend/src/app/main/ui/alert.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; &.transparent { background-color: transparent; @@ -15,7 +15,7 @@ } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; } .modal-header { @@ -24,31 +24,33 @@ .modal-title { @include deprecated.headlineMediumTypography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodyLargeTypography; + margin-bottom: deprecated.$s-24; } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } @@ -56,6 +58,7 @@ .modal-subtitle, .modal-msg { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss index 62ba1a1830..40f2076fec 100644 --- a/frontend/src/app/main/ui/auth.scss +++ b/frontend/src/app/main/ui/auth.scss @@ -18,7 +18,7 @@ width: 100%; overflow: auto; - @media (max-width: 992px) { + @media (width <= 992px) { display: flex; justify-content: center; } @@ -53,7 +53,7 @@ height: auto; justify-self: center; - @media (max-width: 992px) { + @media (width <= 992px) { display: none; } } diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss index eedfa34da1..048aef58ec 100644 --- a/frontend/src/app/main/ui/auth/common.scss +++ b/frontend/src/app/main/ui/auth/common.scss @@ -11,6 +11,7 @@ padding-block-end: 0; display: grid; gap: deprecated.$s-12; + form { display: flex; flex-direction: column; @@ -33,16 +34,19 @@ .auth-title { @include deprecated.bigTitleTipography; + color: var(--title-foreground-color-hover); } .auth-subtitle { @include deprecated.smallTitleTipography; + color: var(--title-foreground-color); } .auth-tagline { @include deprecated.smallTitleTipography; + margin: 0; color: var(--title-foreground-color); } @@ -60,8 +64,9 @@ .login-button, .login-ldap-button { - @extend .button-primary; + @extend %button-primary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-40; width: 100%; } @@ -75,8 +80,9 @@ } .go-back-link { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-40; } @@ -100,6 +106,7 @@ .recovery-text, .demo-account-text { @include deprecated.smallTitleTipography; + text-align: right; color: var(--title-foreground-color); } @@ -110,6 +117,7 @@ .forgot-pass-link, .demo-account-link { @include deprecated.smallTitleTipography; + text-align: left; background-color: transparent; border: none; @@ -129,14 +137,16 @@ .submit-btn, .register-btn, .recover-btn { - @extend .button-primary; + @extend %button-primary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-40; width: 100%; } .login-btn { @include deprecated.smallTitleTipography; + display: flex; align-items: center; gap: deprecated.$s-6; @@ -144,6 +154,7 @@ border-radius: deprecated.$br-8; background-color: var(--button-secondary-background-color-rest); color: var(--button-foreground-color-focus); + span { padding-block-start: deprecated.$s-2; } diff --git a/frontend/src/app/main/ui/auth/login.scss b/frontend/src/app/main/ui/auth/login.scss index b0002114f9..4f4aa3dd9d 100644 --- a/frontend/src/app/main/ui/auth/login.scss +++ b/frontend/src/app/main/ui/auth/login.scss @@ -4,4 +4,4 @@ // // Copyright (c) KALEIDOS INC -@use "./common.scss"; +@use "./common"; diff --git a/frontend/src/app/main/ui/auth/recovery.scss b/frontend/src/app/main/ui/auth/recovery.scss index a89055b061..6da351a238 100644 --- a/frontend/src/app/main/ui/auth/recovery.scss +++ b/frontend/src/app/main/ui/auth/recovery.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; -@use "./common.scss"; +@use "./common"; .submit-btn { margin-top: deprecated.$s-16; diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss index c774a575a3..bad82e2767 100644 --- a/frontend/src/app/main/ui/auth/recovery_request.scss +++ b/frontend/src/app/main/ui/auth/recovery_request.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; -@use "./common.scss"; +@use "./common"; .fields-row { margin-bottom: deprecated.$s-8; @@ -13,6 +13,7 @@ .notification-text-email { @include deprecated.medTitleTipography; + font-size: deprecated.$fs-20; color: var(--register-confirmation-color); margin-inline: deprecated.$s-36; diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss index 182dfddbaa..c6525ed145 100644 --- a/frontend/src/app/main/ui/auth/register.scss +++ b/frontend/src/app/main/ui/auth/register.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; -@use "./common.scss"; +@use "./common"; .accept-terms-and-privacy-wrapper { :global(a) { @@ -25,6 +25,7 @@ .register-success { gap: deprecated.$s-24; + .auth-title { @include deprecated.medTitleTipography; } @@ -35,6 +36,7 @@ display: flex; justify-content: center; margin-bottom: deprecated.$s-32; + svg { width: deprecated.$s-92; height: deprecated.$s-92; @@ -43,11 +45,13 @@ .notification-text { @include deprecated.bodyMediumTypography; + color: var(--title-foreground-color); } .notification-text-email { @include deprecated.medTitleTipography; + font-size: deprecated.$fs-20; color: var(--register-confirmation-color); margin-inline: deprecated.$s-36; @@ -55,6 +59,7 @@ .logo-btn { height: deprecated.$s-40; + svg { width: deprecated.$s-120; height: deprecated.$s-40; @@ -71,6 +76,7 @@ .terms-register { @include deprecated.bodySmallTypography; + display: flex; gap: deprecated.$s-4; justify-content: center; @@ -84,6 +90,7 @@ .auth-link { color: var(--link-foreground-color); + &:hover { text-decoration: underline; } diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 9da4eef616..546cfa0af4 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -24,6 +24,7 @@ .error-text { @include deprecated.bodySmallTypography; + color: var(--color-foreground-error); } @@ -44,6 +45,7 @@ .author { @include deprecated.bodySmallTypography; + display: flex; align-items: center; gap: deprecated.$s-8; @@ -55,11 +57,13 @@ .author-fullname { @include deprecated.textEllipsis; + color: var(--comment-title-color); } .author-timeago { @include deprecated.textEllipsis; + color: var(--comment-subtitle-color); } @@ -112,11 +116,12 @@ } .avatar-darken { - background: rgba(0, 0, 0, 0.5); + background: rgb(0 0 0 / 50%); } .cover { @include deprecated.bodySmallTypography; + cursor: pointer; display: flex; flex-direction: column; @@ -127,8 +132,8 @@ .item { @include deprecated.bodySmallTypography; + color: var(--color-foreground-primary); - word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; white-space: pre-wrap; @@ -136,6 +141,7 @@ .replies { @include deprecated.bodySmallTypography; + display: flex; gap: deprecated.$s-8; } @@ -143,6 +149,7 @@ .replies-total { color: var(--color-foreground-secondary); } + .replies-unread { color: var(--color-accent-primary); } @@ -168,15 +175,18 @@ --translate-x: 0%; --translate-y: 0%; + transform: translate(var(--translate-x), var(--translate-y)); &.left { --translate-x: -100%; + flex-direction: row-reverse; } &.top { --translate-y: -100%; + align-items: flex-end; } } @@ -214,10 +224,13 @@ --translate-x: 0%; --translate-y: 0%; + transform: translate(var(--translate-x), var(--translate-y)); + &.left { --translate-x: -100%; } + &.top { --translate-y: -100%; } @@ -233,6 +246,7 @@ .floating-thread-header-left { @include deprecated.bodySmallTypography; + color: var(--color-foreground-primary); } @@ -257,22 +271,25 @@ display: flex; flex-direction: column; gap: deprecated.$s-8; + @include deprecated.bodySmallTypography; } .checkbox-wrapper { @include deprecated.flexCenter; + width: deprecated.$s-16; height: deprecated.$s-24; margin-right: deprecated.$s-8; } .checkbox { - @extend .checkbox-icon; + @extend %checkbox-icon; } .dropdown-menu { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + position: absolute; width: fit-content; max-width: deprecated.$s-200; @@ -282,7 +299,7 @@ } .dropdown-menu-option { - @extend .dropdown-element-base; + @extend %dropdown-element-base; } .form { @@ -365,7 +382,7 @@ .comment-input { @include deprecated.bodySmallTypography; - white-space: pre-line; + background: var(--input-background-color); border-radius: deprecated.$br-8; border: deprecated.$s-1 solid var(--input-border-color); diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss index bb58dcc4a5..b8b598f305 100644 --- a/frontend/src/app/main/ui/components/button_link.scss +++ b/frontend/src/app/main/ui/components/button_link.scss @@ -12,13 +12,12 @@ border: none; cursor: pointer; display: flex; - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; justify-content: center; min-width: 25px; padding: 0 1rem; transition: all 0.4s; text-decoration: none !important; - height: 40px; svg { diff --git a/frontend/src/app/main/ui/components/code_block.scss b/frontend/src/app/main/ui/components/code_block.scss index 69b4658f0f..dd8d79680e 100644 --- a/frontend/src/app/main/ui/components/code_block.scss +++ b/frontend/src/app/main/ui/components/code_block.scss @@ -9,6 +9,7 @@ .code-display { @include t.use-typography("code-font"); + user-select: text; border-radius: $br-8; margin-top: var(--sp-s); diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss index 52fc242fac..6cab83cb79 100644 --- a/frontend/src/app/main/ui/components/color_bullet.scss +++ b/frontend/src/app/main/ui/components/color_bullet.scss @@ -16,9 +16,11 @@ min-height: var(--bullet-size, deprecated.$s-24); border: deprecated.$s-2 solid var(--color-bullet-border-color); border-radius: deprecated.$br-circle; + &.grid-area { grid-area: color; } + &.mini { width: var(--bullet-size, deprecated.$s-16); height: var(--bullet-size, deprecated.$s-16); @@ -31,24 +33,29 @@ &.is-not-library-color { overflow: hidden; border-radius: deprecated.$br-8; + & .color-bullet-wrapper { clip-path: none; } + &.mini { border-radius: deprecated.$br-4; } } + &.is-gradient { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") left center; background-color: var(--color-bullet-background-color); transform: rotate(-90deg); } + &.is-transparent { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=") left center; background-color: var(--color-bullet-background-color); } + .color-bullet-wrapper { display: flex; flex-direction: row; @@ -59,11 +66,13 @@ background-repeat: no-repeat; background-position: center; } + .color-bullet-wrapper > * { width: 100%; height: 100%; background-color: var(--color-bullet-background-color); } + &:hover:not(.read-only) { border: deprecated.$s-2 solid var(--color-bullet-border-color-selected); } @@ -72,13 +81,16 @@ .color-text { @include deprecated.twoLineTextEllipsis; @include deprecated.bodySmallTypography; + width: deprecated.$s-80; text-align: center; margin-top: deprecated.$s-2; max-height: deprecated.$s-28; color: var(--palette-text-color); + &.small-text { @include deprecated.textEllipsis; + max-height: deprecated.$s-16; } } @@ -86,6 +98,7 @@ .big-text { @include deprecated.inspectValue; @include deprecated.twoLineTextEllipsis; + line-height: 1; color: var(--palette-text-color); text-align: center; diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index e0fc29989e..8f38c78277 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -25,6 +25,7 @@ .context-menu-items { @include deprecated.menuShadow; + position: absolute; top: deprecated.$s-12; left: calc(-1 * deprecated.$s-6); @@ -50,6 +51,7 @@ .context-menu-action { @include deprecated.bodySmallTypography; + display: flex; align-items: center; justify-content: flex-start; @@ -69,7 +71,8 @@ margin-left: 0.5rem; svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color); } } @@ -84,7 +87,8 @@ cursor: pointer; .submenu-icon-back svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color); transform: rotate(180deg); } @@ -140,12 +144,14 @@ } .selected-icon { - @extend .button-tag; + @extend %button-tag; + border-radius: deprecated.$br-8; height: 100%; svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color-focus); } } @@ -154,7 +160,7 @@ .is-selected .context-menu-action { padding-left: deprecated.$s-28; - background-image: url(/images/icons/tick.svg); + background-image: url("/images/icons/tick.svg"); background-repeat: no-repeat; background-position: 5% 48%; background-size: deprecated.$s-12; diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss index 0239900938..b8f8f67789 100644 --- a/frontend/src/app/main/ui/components/copy_button.scss +++ b/frontend/src/app/main/ui/components/copy_button.scss @@ -8,19 +8,24 @@ .copy-button { @include deprecated.buttonStyle; + width: 100%; height: deprecated.$s-32; border: deprecated.$s-1 solid transparent; border-radius: deprecated.$br-8; background-color: transparent; box-sizing: border-box; + .icon-btn { @include deprecated.flexCenter; + height: deprecated.$s-32; min-width: deprecated.$s-28; width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } @@ -29,18 +34,21 @@ background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); border: deprecated.$s-1 solid var(--color-background-tertiary); + .icon-btn { svg { stroke: var(--button-tertiary-foreground-color-active); } } } + &:focus, &:focus-visible { outline: none; border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus); background-color: transparent; color: var(--button-tertiary-foreground-color-focus); + .icon-btn svg { stroke: var(--button-tertiary-foreground-color-active); } @@ -50,27 +58,34 @@ .copy-wrapper { @include deprecated.buttonStyle; @include deprecated.copyWrapperBase; + width: 100%; height: fit-content; text-align: left; border: deprecated.$s-1 solid transparent; + .icon-btn { @include deprecated.flexCenter; + position: absolute; top: 0; right: 0; height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--button-tertiary-foreground-color-focus); display: none; } } + &:hover { background-color: var(--button-tertiary-background-color-focus); color: var(--button-tertiary-foreground-color-focus); border: deprecated.$s-1 solid var(--button-tertiary-background-color-focus); + .icon-btn svg { display: flex; } diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 29a57d551d..46ff586f95 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -11,6 +11,7 @@ .editable-label-input { @include t.use-typography("body-small"); + outline: none; width: 100%; height: 100%; @@ -23,6 +24,7 @@ .editable-label-text { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index ef874df8c0..07a1272095 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -4,18 +4,17 @@ // // Copyright (c) KALEIDOS INC -// FIXME: we need this import for .asset-element +// FIXME: we need this import for %asset-element @use "refactor/basic-rules.scss" as deprecated; - @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_utils.scss" as *; @use "ds/spacing.scss" as *; .editable-select { - @extend .asset-element; + @extend %asset-element; + margin: 0; - padding: 0; border: $b-1 solid var(--input-border-color); position: relative; display: flex; @@ -24,27 +23,34 @@ padding: var(--sp-s); border-radius: $br-8; cursor: pointer; + .dropdown-button { display: flex; place-content: center; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + transform: rotate(90deg); stroke: var(--icon-foreground); } } .custom-select-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + width: fit-content; max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token .separator { margin: 0; height: $sz-12; } + .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + color: var(--menu-foreground-color-rest); + .label { flex-grow: 1; width: 100%; @@ -53,8 +59,10 @@ .check-icon { display: flex; place-content: center; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + visibility: hidden; stroke: var(--icon-foreground); } @@ -62,14 +70,17 @@ &.is-selected { color: var(--menu-foreground-color); + .check-icon svg { stroke: var(--menu-foreground-color); visibility: visible; } } + &:hover { background-color: var(--menu-background-color-hover); color: var(--menu-foreground-color-hover); + .check-icon svg { stroke: var(--menu-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 6139098e5f..6db91af254 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -9,30 +9,38 @@ // INPUT .input-wrapper { --input-icon-padding: var(--sp-l); + display: flex; flex-direction: column; align-items: center; position: relative; + &.valid { input { border: deprecated.$s-1 solid var(--input-border-color-success); - @extend .disabled-input; + + @extend %disabled-input; + &:hover, &:focus { border: deprecated.$s-1 solid var(--input-border-color-success); } } } + &.invalid { input { border: deprecated.$s-1 solid var(--input-border-color-error); - @extend .disabled-input; + + @extend %disabled-input; + &:hover, &:focus { border: deprecated.$s-1 solid var(--input-border-color-error); } } } + &.valid .help-icon, &.invalid .help-icon { right: deprecated.$s-40; @@ -41,6 +49,7 @@ .input-with-label-form { @include deprecated.flexColumn; + gap: deprecated.$s-8; justify-content: flex-start; align-items: flex-start; @@ -50,8 +59,10 @@ cursor: pointer; color: var(--modal-title-foreground-color); text-transform: uppercase; + input { - @extend .input-element; + @extend %input-element; + color: var(--input-foreground-color-active); margin-top: 0; width: 100%; @@ -72,9 +83,9 @@ input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--input-foreground-color-active); - -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); + box-shadow: inset 0 0 20px 20px var(--input-background-color); border: deprecated.$s-1 solid var(--input-border-color); - -webkit-background-clip: text; + background-clip: text; transition: background-color 5000s ease-in-out 0s; caret-color: var(--input-foreground-color-active); } @@ -92,8 +103,10 @@ position: absolute; right: deprecated.$s-16; top: calc(50% - deprecated.$s-8); + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--color-foreground-secondary); width: deprecated.$s-16; height: deprecated.$s-16; @@ -111,6 +124,7 @@ position: absolute; right: var(--input-icon-padding); top: calc(50% - deprecated.$s-8); + svg { width: deprecated.$s-12; height: deprecated.$s-12; @@ -129,6 +143,7 @@ position: absolute; right: deprecated.$s-16; top: calc(50% - deprecated.$s-8); + svg { width: deprecated.$s-12; height: deprecated.$s-12; @@ -145,32 +160,39 @@ .hint { @include deprecated.bodySmallTypography; + width: 99%; margin-block-start: deprecated.$s-8; color: var(--modal-text-foreground-color); } .checkbox { - @extend .input-checkbox; + @extend %input-checkbox; + .checkbox-label { @include deprecated.bodySmallTypography; + display: flex; align-items: center; flex-direction: row-reverse; gap: deprecated.$s-6; min-height: deprecated.$s-32; cursor: pointer; + span { - @extend .checkbox-icon; + @extend %checkbox-icon; } + input { display: none !important; } + &:hover { span { border-color: var(--input-checkbox-border-color-hover); } } + a { // Need for terms and conditions links on register checkbox color: var(--link-foreground-color); @@ -180,19 +202,24 @@ // SELECT .custom-select { - @extend .select-wrapper; + @extend %select-wrapper; + height: deprecated.$s-32; + .input-container { @include deprecated.flexRow; + height: deprecated.$s-32; width: 100%; border-radius: deprecated.$br-8; border: deprecated.$s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); + .main-content { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + position: relative; justify-content: center; flex-grow: 1; @@ -202,21 +229,26 @@ .label { color: var(--input-foreground-color); } + .value { width: 100%; - padding: 0px; - margin: 0px; - border: 0px; + padding: 0; + margin: 0; + border: 0; color: var(--input-foreground-color-active); } } + .icon { @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-24; pointer-events: none; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } @@ -227,6 +259,7 @@ border: deprecated.$s-1 solid var(--input-border-color-disabled); color: var(--input-foreground-color-disabled); } + &.focus { outline: none; color: var(--input-foreground-color-active); @@ -236,8 +269,9 @@ } select { - @extend .menu-dropdown; + @extend %menu-dropdown; @include deprecated.bodySmallTypography; + box-sizing: border-box; position: absolute; top: 0; @@ -252,8 +286,10 @@ z-index: deprecated.$z-index-10; background-color: transparent; cursor: pointer; + option { @include deprecated.bodySmallTypography; + color: var(--title-foreground-color-hover); background-color: var(--menu-background-color); appearance: none; @@ -264,9 +300,11 @@ // SUBMIT-BUTTON .button-submit { - @extend .button-primary; + @extend %button-primary; + &:disabled { - @extend .button-disabled; + @extend %button-disabled; + min-height: deprecated.$s-32; } } @@ -280,35 +318,41 @@ max-height: deprecated.$s-180; width: 100%; overflow-y: hidden; + .inside-input { @include deprecated.removeInputStyle; @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + width: 100%; max-width: calc(100% - deprecated.$s-1); min-height: deprecated.$s-32; - padding-top: 0; height: deprecated.$s-32; padding: deprecated.$s-8; margin: 0; border-radius: deprecated.$br-8; color: var(--input-foreground-color-active); background-color: var(--input-background-color); + &:focus { outline: none; border: deprecated.$s-1 solid var(--input-border-color-focus); } + &.invalid { border: deprecated.$s-1 solid var(--input-border-color-error); + &:hover, &:focus { border: deprecated.$s-1 solid var(--input-border-color-error); } } } + label { display: none; } + .selected-items { display: flex; flex-wrap: wrap; @@ -320,6 +364,7 @@ .selected-item { .around { @include deprecated.flexRow; + height: deprecated.$s-24; width: fit-content; padding-left: deprecated.$s-6; @@ -327,8 +372,10 @@ background-color: var(--pill-background-color); border: deprecated.$s-1 solid var(--pill-background-color); box-sizing: border-box; + .text { @include deprecated.bodySmallTypography; + padding-right: deprecated.$s-8; color: var(--pill-foreground-color); } @@ -336,18 +383,24 @@ .icon { @include deprecated.flexCenter; @include deprecated.buttonStyle; + height: deprecated.$s-32; width: deprecated.$s-24; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &.invalid { background-color: var(--status-widget-background-color-error); + .text { color: var(--alert-text-foreground-color-error); } + .icon svg { stroke: var(--alert-text-foreground-color-error); } @@ -367,6 +420,7 @@ .radio-label { @include deprecated.bodySmallTypography; @include deprecated.flexRow; + align-items: flex-start; gap: deprecated.$s-8; min-height: deprecated.$s-32; @@ -375,6 +429,7 @@ padding: deprecated.$s-8; color: var(--input-foreground-color-rest); border: deprecated.$s-1 solid transparent; + &:focus, &:focus-within { outline: none; @@ -395,28 +450,33 @@ } .radio-icon { - @extend .checkbox-icon; + @extend %checkbox-icon; + border-radius: deprecated.$br-circle; } .radio-label-image { @include deprecated.smallTitleTipography; + display: grid; - grid-template-rows: auto auto 0px; + grid-template-rows: auto auto 0; justify-items: center; gap: 0; border-radius: deprecated.$br-8; margin: 0; border: 1px solid var(--color-background-tertiary); cursor: pointer; + &:global(.checked) { border: 1px solid var(--color-accent-primary); } + &:focus, &:focus-within { outline: none; border: deprecated.$s-1 solid var(--input-border-color-active); } + .image-text { color: var(--input-foreground-color-rest); display: grid; @@ -436,7 +496,9 @@ .icon-inside { margin: deprecated.$s-16; + @include deprecated.flexCenter; + svg { width: 40px; height: 60px; @@ -445,10 +507,11 @@ } } -//TEXTAREA +// TEXTAREA .textarea-label { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); text-transform: uppercase; margin-bottom: deprecated.$s-8; diff --git a/frontend/src/app/main/ui/components/progress.scss b/frontend/src/app/main/ui/components/progress.scss index 0ef02d0f17..dcdf538c8a 100644 --- a/frontend/src/app/main/ui/components/progress.scss +++ b/frontend/src/app/main/ui/components/progress.scss @@ -9,6 +9,7 @@ // PROGRESS WIDGET .progress-widget { @include deprecated.flexCenter; + width: deprecated.$s-28; height: deprecated.$s-28; } @@ -19,6 +20,7 @@ --export-modal-fg-color: var(--alert-text-foreground-color-default); --export-modal-icon-color: var(--alert-icon-foreground-color-default); --export-modal-border-color: var(--alert-border-color-default); + position: absolute; right: deprecated.$s-16; top: deprecated.$s-48; @@ -41,13 +43,15 @@ --export-modal-fg-color: var(--alert-text-foreground-color-error); --export-modal-icon-color: var(--alert-icon-foreground-color-error); --export-modal-border-color: var(--alert-border-color-error); + grid-template-areas: "icon text close"; gap: deprecated.$s-8; padding-block: deprecated.$s-8; } .icon { - @extend .button-icon; + @extend %button-icon; + grid-area: icon; align-self: center; margin-inline-start: deprecated.$s-8; @@ -56,6 +60,7 @@ .title { @include deprecated.bodyMediumTypography; + display: grid; grid-template-columns: auto 1fr; gap: deprecated.$s-8; @@ -68,6 +73,7 @@ .progress { @include deprecated.bodyMediumTypography; + padding-left: deprecated.$s-8; margin: 0; align-self: center; @@ -77,6 +83,7 @@ .retry-btn { @include deprecated.buttonStyle; @include deprecated.bodySmallTypography; + display: inline; text-align: left; color: var(--modal-link-foreground-color); @@ -86,12 +93,14 @@ .progress-close-button { @include deprecated.buttonStyle; + padding: 0; margin-inline-end: deprecated.$s-8; } .close-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--export-modal-icon-color); } diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 6ef73339ad..51ca7a4c81 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -8,6 +8,7 @@ .radio-btn-wrapper { @include deprecated.flexCenter; + border-radius: deprecated.$br-8; height: deprecated.$s-32; background-color: var(--input-background-color); @@ -20,6 +21,7 @@ @include deprecated.buttonStyle; @include deprecated.flexCenter; @include deprecated.focusRadio; + height: deprecated.$s-32; flex-grow: 1; border-radius: deprecated.$s-8; @@ -29,14 +31,19 @@ input { display: none; } + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--radio-btn-foreground-color); } + .title-name { @include deprecated.uppercaseTitleTipography; + color: var(--radio-btn-foreground-color); } + &:hover { svg { stroke: var(--radio-btn-foreground-color-selected); @@ -48,9 +55,11 @@ --radio-icon-border-color: var(--radio-btn-border-color-selected); background-color: var(--radio-btn-background-color-selected); + svg { stroke: var(--radio-btn-foreground-color-selected); } + .title-name { color: var(--radio-btn-foreground-color-selected); } @@ -60,18 +69,23 @@ cursor: default; background-color: transparent; border: deprecated.$s-2 solid transparent; + svg { stroke: var(--button-foreground-color-disabled); } + .title-name { color: var(--button-foreground-color-disabled); } + &:hover { background-color: transparent; border: deprecated.$s-2 solid transparent; + svg { stroke: var(--button-foreground-color-disabled); } + .title-name { color: var(--button-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/components/reorder_handler.scss b/frontend/src/app/main/ui/components/reorder_handler.scss index 499ff56ad5..8991efb661 100644 --- a/frontend/src/app/main/ui/components/reorder_handler.scss +++ b/frontend/src/app/main/ui/components/reorder_handler.scss @@ -20,6 +20,7 @@ block-size: var(--sp-l); pointer-events: none; visibility: var(--reorder-icon-visibility, hidden); + --icon-stroke-color: var(--color-foreground-secondary); } diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 96855005a1..4534d76345 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -23,6 +23,7 @@ .search-input-wrapper { @include deprecated.flexCenter; + height: deprecated.$s-32; width: 100%; border: deprecated.$s-1 solid var(--search-bar-input-border-color); @@ -32,6 +33,7 @@ &:hover { border: deprecated.$s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); + .search-input { background-color: var(--input-background-color-hover); } @@ -41,6 +43,7 @@ background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); border: deprecated.$s-1 solid var(--input-border-color-focus); + .search-input { background-color: var(--input-background-color-active); } @@ -56,13 +59,15 @@ font-size: deprecated.$fs-12; color: var(--input-foreground-color); border-radius: deprecated.$br-8; + &:focus { outline: none; } } .clear-icon { - @extend .button-tag; + @extend %button-tag; + flex: 0 0 deprecated.$s-32; height: 100%; color: var(--color-icon-default); diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index ba01e42e08..72eae37864 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -11,8 +11,10 @@ --bg-color: var(--menu-background-color); --icon-color: var(--icon-foreground); --text-color: var(--menu-foreground-color); - @extend .new-scrollbar; + + @extend %new-scrollbar; @include deprecated.bodySmallTypography; + position: relative; display: grid; grid-template-columns: 1fr auto; @@ -48,15 +50,19 @@ --border-color: var(--menu-border-color-disabled); --icon-color: var(--menu-foreground-color-disabled); --text-color: var(--menu-foreground-color-disabled); + pointer-events: none; cursor: default; } .dropdown-button { @include deprecated.flexCenter; + margin-inline-end: var(--sp-xxs); + svg { - @extend .button-icon-small; + @extend %button-icon-small; + transform: rotate(90deg); stroke: var(--icon-color); } @@ -64,16 +70,20 @@ .current-icon { @include deprecated.flexCenter; + width: deprecated.$s-24; padding-right: deprecated.$s-4; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } .custom-select-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + .separator { margin: 0; height: deprecated.$s-12; @@ -87,14 +97,18 @@ } .checked-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + .icon { @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; padding-right: deprecated.$s-4; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } @@ -106,8 +120,10 @@ .check-icon { @include deprecated.flexCenter; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + visibility: hidden; stroke: var(--icon-foreground); } @@ -115,11 +131,13 @@ &.is-selected { color: var(--menu-foreground-color); + .check-icon svg { stroke: var(--menu-foreground-color); visibility: visible; } } + &.disabled { display: none; } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index aab1d5ffdd..71cc4371ad 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -32,6 +32,7 @@ .tab-container-tab-title { @include deprecated.flexCenter; + height: 100%; width: 100%; padding: 0 deprecated.$s-8; @@ -43,12 +44,14 @@ min-width: 0; svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--tab-foreground-color); } .content { @include deprecated.headlineSmallTypography; + text-align: center; white-space: nowrap; overflow: hidden; @@ -78,6 +81,7 @@ .collapse-sidebar { @include deprecated.flexCenter; @include deprecated.buttonStyle; + height: 100%; width: deprecated.$s-24; min-width: deprecated.$s-24; @@ -86,6 +90,7 @@ svg { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; stroke: var(--icon-foreground); @@ -109,13 +114,12 @@ } .tab-container-content { - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; display: flex; flex-direction: column; } -//Firefox doesn't respect scrollbar-gutter +// Firefox doesn't respect scrollbar-gutter @supports (-moz-appearance: none) { .tab-container-content { padding-right: deprecated.$s-8; diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index f985736946..1ba37cde67 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -14,6 +14,7 @@ height: deprecated.$s-32; width: 100%; min-height: deprecated.$s-32; + --arrow-icon-color: var(--icon-foreground); --title-color: var(--title-foreground-color); } @@ -32,12 +33,15 @@ .title { @include t.use-typography("headline-small"); + color: var(--title-color); } .title-only { @include t.use-typography("headline-small"); + --title-bar-title-margin: #{deprecated.$s-8}; + color: var(--title-color); margin-inline-start: var(--title-bar-title-margin); } @@ -64,6 +68,7 @@ .icon-text-btn { @include deprecated.buttonStyle; + display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss index 09b23426f3..f5261af38d 100644 --- a/frontend/src/app/main/ui/confirm.scss +++ b/frontend/src/app/main/ui/confirm.scss @@ -7,14 +7,16 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; + &.transparent { background-color: transparent; } } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + display: flex; flex-direction: column; gap: var(--sp-xxl); @@ -22,6 +24,7 @@ .modal-title { @include deprecated.headlineMediumTypography; + color: var(--modal-title-foreground-color); } @@ -41,21 +44,24 @@ .modal-component-icon { @include deprecated.flexCenter; + color: var(--color-foreground-secondary); } .modal-component-name { @include deprecated.bodyLargeTypography; + color: var(--color-foreground-secondary); } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .modal-scd-msg, .modal-subtitle, .modal-msg { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss index 994f56a723..045d817316 100644 --- a/frontend/src/app/main/ui/dashboard.scss +++ b/frontend/src/app/main/ui/dashboard.scss @@ -7,7 +7,8 @@ @use "refactor/common-refactor.scss" as deprecated; .dashboard { - @extend .new-scrollbar; + @extend %new-scrollbar; + background-color: var(--app-background); display: grid; grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr; diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss index 40e8387274..fadf30e3f6 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.scss +++ b/frontend/src/app/main/ui/dashboard/change_owner.scss @@ -7,11 +7,11 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; } .modal-header { @@ -20,35 +20,38 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { - @extend .input-with-label; + @extend %input-with-label; @include deprecated.bodySmallTypography; } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index c81fd1ee71..9c1fc9b244 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -8,6 +8,7 @@ .dashboard-comments-section { @include deprecated.flexCenter; + position: relative; border-radius: deprecated.$br-8; } @@ -35,7 +36,8 @@ } .comments-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); height: deprecated.$s-24; width: deprecated.$s-24; @@ -44,6 +46,7 @@ .comment-button { position: relative; + .unread { position: absolute; width: deprecated.$s-8; @@ -57,12 +60,14 @@ } .comments-icon-small { - @extend .button-icon; + @extend %button-icon; + stroke: var(--comment-icon-small-foreground-color); } .dropdown { @include deprecated.menuShadow; + background-color: var(--color-background-tertiary); border-radius: deprecated.$br-8; border: deprecated.$s-1 solid transparent; @@ -101,6 +106,7 @@ &:hover { cursor: pointer; } + &.mark-all-as-read-button { border-radius: deprecated.$s-8; border: deprecated.$s-1 solid; diff --git a/frontend/src/app/main/ui/dashboard/deleted.scss b/frontend/src/app/main/ui/dashboard/deleted.scss index 3d8d5bf8c7..9a1ee20ac7 100644 --- a/frontend/src/app/main/ui/dashboard/deleted.scss +++ b/frontend/src/app/main/ui/dashboard/deleted.scss @@ -29,9 +29,10 @@ .deleted-info { display: block; - height: fit-content; color: var(--color-foreground-secondary); + @include t.use-typography("body-large"); + line-height: 0.8; height: var(--sp-xl); } @@ -63,7 +64,6 @@ .nav-option { color: var(--color-foreground-secondary); padding: 0.5rem; - display: flex; align-items: center; justify-content: center; @@ -100,6 +100,7 @@ .project-name { @include t.use-typography("body-large"); + width: fit-content; margin-inline-end: var(--sp-m); line-height: 0.8; @@ -115,7 +116,8 @@ .add-file-btn, .options-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: var(--sp-xxxl); width: var(--sp-xxxl); margin: 0 var(--sp-s); @@ -130,6 +132,7 @@ .add-icon, .menu-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss index 79f3563168..0a5fe94dbd 100644 --- a/frontend/src/app/main/ui/dashboard/files.scss +++ b/frontend/src/app/main/ui/dashboard/files.scss @@ -17,6 +17,7 @@ &.dashboard-projects { user-select: none; } + &.dashboard-shared { width: calc(100vw - deprecated.$s-320); margin-right: deprecated.$s-52; @@ -32,7 +33,8 @@ } .menu-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss index f3d195b35b..f277fbe517 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.scss +++ b/frontend/src/app/main/ui/dashboard/fonts.scss @@ -5,7 +5,6 @@ // Copyright (c) KALEIDOS INC @use "common/refactor/common-dashboard"; - @use "ds/_utils.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_borders.scss" as *; @@ -37,6 +36,7 @@ h3 { @include t.use-typography("title-small"); + color: var(--color-foreground-secondary); margin: var(--sp-xs); } @@ -48,6 +48,7 @@ .installed-fonts-header { @include t.use-typography("headline-small"); + align-items: center; color: var(--color-foreground-secondary); display: flex; @@ -55,7 +56,8 @@ padding-left: var(--sp-xxl); > .family { - @include twoLineTextEllipsis; + @include two-line-text-ellipsis; + min-width: $sz-200; width: $sz-200; } @@ -72,8 +74,8 @@ input { @include t.use-typography("body-medium"); + background-color: var(--color-background-tertiary); - border-color: transparent; border-radius: $br-8; border: $b-1 solid transparent; color: var(--color-foreground-primary); @@ -85,6 +87,7 @@ &:focus { outline: $b-1 solid var(--color-accent-primary); } + &::placeholder { color: var(--color-foreground-secondary); } @@ -93,6 +96,7 @@ .font-item { @include t.use-typography("body-medium"); + align-items: center; background-color: var(--color-background-tertiary); border-radius: $br-4; @@ -106,11 +110,11 @@ input { @include t.use-typography("body-medium"); - @include textEllipsis; + @include text-ellipsis; + border: $b-1 solid transparent; margin: 0; padding: var(--sp-s); - background-color: var(--color-background-tertiary); border-radius: $br-8; color: var(--color-foreground-primary); @@ -123,21 +127,25 @@ } > .family { - @include twoLineTextEllipsis; + @include two-line-text-ellipsis; + min-width: $sz-200; width: $sz-200; + &.is-edition { overflow: visible; } } > .filenames { - @include textEllipsis; + @include text-ellipsis; + min-width: $sz-200; } > .variants { @include t.use-typography("body-medium"); + display: flex; flex-wrap: wrap; flex-grow: 1; @@ -151,12 +159,14 @@ padding: var(--sp-s) var(--sp-m); cursor: pointer; gap: var(--sp-xs); + .icon { display: flex; align-items: center; justify-content: center; height: $sz-16; width: $sz-16; + svg { fill: none; width: $sz-12; @@ -171,6 +181,7 @@ } } } + .inhert-variant { cursor: default; } @@ -178,6 +189,7 @@ .table-field { color: var(--color-foreground-primary); + .variant { background-color: var(--color-background-quaternary); border-radius: $br-8; @@ -186,7 +198,8 @@ .filenames { @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + min-width: $sz-400; padding-left: var(--sp-xxxl); } @@ -203,6 +216,7 @@ margin-left: var(--sp-m); justify-content: center; align-items: center; + svg { width: $sz-16; height: $sz-16; @@ -212,6 +226,7 @@ &.failure { margin-right: var(--sp-m); + svg { stroke: var(--element-foreground-warning); } @@ -220,6 +235,7 @@ &.close { background: none; border: none; + svg { stroke: var(--color-foreground-secondary); } @@ -245,6 +261,7 @@ .dashboard-fonts-hero { @include t.use-typography("body-medium"); + padding: var(--sp-xxxl) 0; margin-top: px2rem(80); display: flex; @@ -269,6 +286,7 @@ p { @include t.use-typography("body-large"); + color: var(--color-foreground-secondary); } } @@ -299,6 +317,7 @@ .label { @include t.use-typography("body-medium"); + color: var(--color-foreground-secondary); } } diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 3f4189c729..f0bf82dac2 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -8,15 +8,13 @@ // TODO: Legacy sass variables. We should remove them in favor of DS tokens. $bp-max-1366: "(max-width: 1366px)"; - $thumbnail-default-width: deprecated.$s-252; // Default width $thumbnail-default-height: deprecated.$s-168; // Default width .dashboard-grid { font-size: deprecated.$fs-14; height: 100%; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; padding: 0 deprecated.$s-16; } @@ -42,6 +40,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width width: 100%; font-weight: deprecated.$fw400; } + button { background-color: transparent; border: none; @@ -108,7 +107,6 @@ $thumbnail-default-height: deprecated.$s-168; // Default width line-height: 1.92; max-width: deprecated.$s-260; overflow: hidden; - padding-right: deprecated.$s-8; padding: 0; text-overflow: ellipsis; white-space: nowrap; @@ -126,9 +124,11 @@ $thumbnail-default-height: deprecated.$s-168; // Default width width: 100%; white-space: nowrap; max-width: deprecated.$s-260; + &::first-letter { text-transform: capitalize; } + @media #{$bp-max-1366} { max-width: deprecated.$s-232; } @@ -198,9 +198,11 @@ $thumbnail-default-height: deprecated.$s-168; // Default width &:focus, &:focus-within { background-color: var(--color-background-tertiary); + .project-th-actions { opacity: 1; } + a { text-decoration: none; } @@ -243,6 +245,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width margin-right: 0; margin-top: deprecated.$s-20; width: 100%; + --menu-icon-color: var(--button-tertiary-foreground-color-rest); &:hover, diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index cf7cea13ae..133d0c8dbe 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + display: flex; flex-direction: column; } @@ -22,18 +23,19 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodySmallTypography; + flex: 1; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; display: grid; grid-template-columns: 1fr; gap: deprecated.$s-16; @@ -42,16 +44,18 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } + .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } @@ -59,60 +63,81 @@ .modal-subtitle, .modal-msg { @include deprecated.bodySmallTypography; + color: var(--modal-text-foreground-color); line-height: 1.5; } .file-entry { display: flex; + .file-name { @include deprecated.flexRow; + .file-icon { @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-16; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } + &.icon-fill svg { fill: var(--icon-foreground); } } + .file-name-edit { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + flex-grow: 1; } + .file-name-label { @include deprecated.bodySmallTypography; + display: flex; align-items: center; gap: deprecated.$s-12; flex-grow: 1; + .icon { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } } + .edit-entry-buttons { @include deprecated.flexRow; + button { - @extend .button-tertiary; + @extend %button-tertiary; + width: deprecated.$s-28; height: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } } } + .error-message, .progress-message { display: flex; @@ -126,14 +151,19 @@ align-items: center; gap: deprecated.$s-12; color: var(--modal-text-foreground-color); + .linked-library-tag { @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } + &.error { svg { stroke: var(--element-foreground-error); @@ -147,45 +177,57 @@ color: var(--modal-text-foreground-color); } } + &.warning { .file-name { color: var(--element-foreground-warning); + .file-icon svg { stroke: var(--element-foreground-warning); } + .file-icon.icon-fill svg { fill: var(--element-foreground-warning); } } } + &.success { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } + .file-icon.icon-fill svg { fill: var(--modal-text-foreground-color); } } } + &.error { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } + .file-icon.icon-fill svg { fill: var(--modal-text-foreground-color); } } } + &.editable { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } + .file-icon.icon-fill svg { fill: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.scss b/frontend/src/app/main/ui/dashboard/inline_edition.scss index 4f62033011..d07e701fee 100644 --- a/frontend/src/app/main/ui/dashboard/inline_edition.scss +++ b/frontend/src/app/main/ui/dashboard/inline_edition.scss @@ -34,7 +34,6 @@ input.element-title { .close { cursor: pointer; position: absolute; - top: deprecated.$s-1; right: calc(-1 * deprecated.$s-8); @@ -45,6 +44,7 @@ input.element-title { width: deprecated.$s-16; margin: 0; } + &:hover { svg { fill: var(--element-foreground-warning); diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss index ca47399436..6254535b58 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.scss +++ b/frontend/src/app/main/ui/dashboard/placeholder.scss @@ -14,7 +14,7 @@ padding: deprecated.$s-12 0; &.libs { - background-image: url(/images/ph-left.svg), url(/images/ph-right.svg); + background-image: url("/images/ph-left.svg"), url("/images/ph-right.svg"); background-position: 15% bottom, 85% top; @@ -47,7 +47,6 @@ border-radius: deprecated.$br-8; color: var(--color-foreground-primary); cursor: pointer; - height: deprecated.$s-160; margin: deprecated.$s-8; border: deprecated.$s-2 solid transparent; width: var(--th-width, #{g.$thumbnail-default-width}); @@ -113,9 +112,11 @@ .empty-project-card { @include t.use-typography("body-small"); + --color-card-background: var(--color-background-tertiary); --color-card-title: var(--color-foreground-primary); --color-card-subtitle: var(--color-foreground-secondary); + display: flex; flex-direction: column; justify-content: center; @@ -129,6 +130,7 @@ --color-card-background: var(--color-accent-primary); --color-card-title: var(--color-background-secondary); --color-card-subtitle: var(--color-background-secondary); + cursor: pointer; .empty-project-card-title { diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index 7df6a0f9c9..d910ffb0d2 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -42,6 +42,7 @@ .dashboard-project-row { --actions-opacity: 0; + margin-block-end: var(--sp-xxl); position: relative; @@ -84,8 +85,9 @@ } .project-name { - @include textEllipsis; + @include text-ellipsis; @include t.use-typography("body-large"); + color: var(--title-foreground-color-hover); cursor: pointer; block-size: $sz-16; @@ -102,8 +104,10 @@ .info, .recent-files-row-title-info { @include t.use-typography("body-medium"); + color: var(--title-foreground-color); - @media (max-width: 760px) { + + @media (width <= 760px) { display: none; } } @@ -116,7 +120,8 @@ .add-file-btn, .options-btn { - @extend .button-tertiary; + @extend %button-tertiary; + block-size: $sz-32; inline-size: $sz-32; margin: 0 var(--sp-s); @@ -125,7 +130,8 @@ .add-icon, .menu-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } @@ -140,7 +146,9 @@ .show-more { --show-more-color: var(--button-secondary-foreground-color-rest); + @include t.use-typography("body-medium"); + border: none; background: none; cursor: pointer; @@ -179,7 +187,7 @@ border-radius: $br-4; inline-size: auto; - @media (max-width: 1200px) { + @media (width <= 1200px) { display: none; inline-size: 0; } @@ -202,18 +210,22 @@ .info { flex: 1; font-size: $sz-16; + span { color: var(--color-foreground-secondary); display: block; } + a { color: var(--color-accent-primary); } + padding: var(--sp-s) 0; } .close { --close-icon-foreground-color: var(--icon-foreground); + position: absolute; top: var(--sp-xl); inset-inline-end: var(--sp-xxl); @@ -221,13 +233,15 @@ background-color: transparent; border: none; cursor: pointer; + &:hover { --close-icon-foreground-color: var(--button-icon-foreground-color-selected); } } .close-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--close-icon-foreground-color); } @@ -244,7 +258,8 @@ block-size: var(--sp-xl) 0; overflow: hidden; border-radius: $br-4; - @media (max-width: 1200px) { + + @media (width <= 1200px) { display: none; inline-size: 0; } diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss index c360ac61ac..f514fb4ba0 100644 --- a/frontend/src/app/main/ui/dashboard/search.scss +++ b/frontend/src/app/main/ui/dashboard/search.scss @@ -6,7 +6,7 @@ @use "refactor/common-refactor.scss" as deprecated; @use "common/refactor/common-dashboard"; -@use "./placeholder.scss"; +@use "./placeholder"; .dashboard-container { flex: 1 0 0; @@ -18,6 +18,7 @@ &.dashboard-projects { user-select: none; } + &.dashboard-shared { width: calc(100vw - deprecated.$s-320); margin-right: deprecated.$s-52; @@ -41,6 +42,7 @@ .text { color: var(--color-foreground-primary); } + .icon svg { stroke: var(--color-foreground-secondary); width: deprecated.$s-32; diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 64375cdf6e..52a17762e3 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -29,15 +29,14 @@ z-index: var(--z-index-dropdown); } -//SIDEBAR CONTENT COMPONENT +// SIDEBAR CONTENT COMPONENT .sidebar-content { display: grid; grid-template-rows: auto auto auto auto 1fr; gap: var(--sp-xxl); height: 100%; padding: 0; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } .sidebar-content-nitrate { @@ -57,6 +56,7 @@ .sidebar-section-title { @include t.use-typography("headline-small"); + padding: 0 var(--sp-s) var(--sp-s) var(--sp-xxl); color: var(--color-foreground-secondary); } @@ -80,6 +80,7 @@ .current-team { @include deprecated.buttonStyle; + display: grid; align-items: center; grid-template-columns: 1fr auto; @@ -99,6 +100,7 @@ .team-text { @include deprecated.textEllipsis; @include t.use-typography("title-small"); + width: auto; text-align: left; color: var(--menu-foreground-color-hover); @@ -124,13 +126,15 @@ .team-picture { @include deprecated.flexCenter; + border-radius: 50%; height: var(--sp-xxl); width: var(--sp-xxl); } .arrow-icon { - @extend .button-icon; + @extend %button-icon; + transform: rotate(90deg); stroke: var(--icon-foreground); } @@ -138,6 +142,7 @@ .switch-options { @include deprecated.buttonStyle; @include deprecated.flexCenter; + max-width: var(--sp-xxl); min-width: deprecated.$s-28; height: 100%; @@ -146,26 +151,28 @@ } .menu-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } // DROPDOWNS .teams-dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + left: 0; top: deprecated.$s-52; height: fit-content; max-height: $sz-480; min-width: deprecated.$s-248; width: 100%; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } .team-dropdown-item { - @extend .menu-item-base; + @extend %menu-item-base; + display: grid; grid-template-columns: var(--sp-xxl) 1fr auto; gap: var(--sp-s); @@ -173,7 +180,8 @@ } .org-dropdown-item { - @extend .menu-item-base; + @extend %menu-item-base; + display: grid; grid-template-columns: var(--sp-xxxl) 1fr auto; gap: var(--sp-s); @@ -192,6 +200,7 @@ .icon-wrapper { @include deprecated.flexCenter; + width: var(--sp-xxl); height: var(--sp-xxl); margin-right: var(--sp-m); @@ -200,7 +209,8 @@ } .add-icon { - @extend .button-icon; + @extend %button-icon; + width: var(--sp-xxl); height: var(--sp-xxl); stroke: var(--sidebar-action-icon-color); @@ -212,12 +222,14 @@ } .tick-icon { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } .options-dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + right: var(--sp-xxs); top: deprecated.$s-52; max-height: $sz-480; @@ -228,7 +240,8 @@ } .team-options-item { - @extend .menu-item-base; + @extend %menu-item-base; + height: $sz-40; } @@ -290,6 +303,7 @@ .element-title { @include deprecated.textEllipsis; + width: deprecated.$s-256; color: var(--color-foreground-primary); font-size: deprecated.$fs-14; @@ -305,7 +319,8 @@ } .pin-icon { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); margin: 0 var(--sp-m); } @@ -329,6 +344,7 @@ .input-text { @include t.use-typography("title-small"); + height: $sz-40; width: 100%; padding: $sz-6 var(--sp-m); @@ -353,6 +369,7 @@ .search-btn { @include deprecated.buttonStyle; @include deprecated.flexCenter; + position: absolute; right: 0; height: var(--sp-xxl); @@ -362,8 +379,10 @@ .search-icon, .clear-search-btn { - @extend .button-icon; + @extend %button-icon; + --sidebar-search-foreground-color: var(--search-bar-icon-foreground-color); + stroke: var(--sidebar-search-foreground-color); } @@ -384,6 +403,7 @@ .profile { @include deprecated.buttonStyle; + display: grid; grid-template-columns: auto 1fr; gap: var(--sp-s); @@ -394,6 +414,7 @@ .profile-fullname { @include t.use-typography("title-small"); @include deprecated.textEllipsis; + align-self: center; max-width: var(--sp-l) 0; color: var(--profile-foreground-color); @@ -406,16 +427,19 @@ } .profile-dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + inset-inline-start: var(--sp-s); inset-block-end: px2rem(72); // 72 is the height of the profile button min-width: calc(100% - var(--sp-s)); + // TODO ADD animation fadeInUp } .profile-dropdown-item { - @extend .menu-item-base; + @extend %menu-item-base; @include t.use-typography("body-medium"); + block-size: $sz-40; margin-block-end: var(--sp-xs); padding: var(--sp-s); @@ -435,12 +459,14 @@ } .profile-dropdown-item .open-arrow svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } .sub-menu { - @extend .menu-dropdown; + @extend %menu-dropdown; + inset-inline-start: calc(deprecated.$s-292 + var(--sp-s)); min-width: deprecated.$s-192; } @@ -458,8 +484,9 @@ } .submenu-item { - @extend .menu-item-base; + @extend %menu-item-base; @include t.use-typography("body-medium"); + block-size: $sz-40; margin-block-end: var(--sp-xs); padding-block: var(--sp-s); @@ -479,6 +506,7 @@ .menu-version { @include t.use-typography("code-font"); @include deprecated.textEllipsis; + color: var(--color-foreground-secondary); margin-inline-start: var(--sp-s); text-transform: uppercase; @@ -496,19 +524,22 @@ } .exit-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } .add-org-icon { - @extend .button-icon; + @extend %button-icon; + width: var(--sp-l); height: var(--sp-l); stroke: var(--sidebar-action-icon-color); } .arrow-up-right-icon { - @extend .button-icon; + @extend %button-icon; + width: var(--sp-m); height: var(--sp-m); stroke: var(--sidebar-action-icon-color); @@ -516,6 +547,7 @@ .upgrade-plan-section { @include deprecated.buttonStyle; + display: flex; justify-content: space-between; border: $b-1 solid var(--color-background-quaternary); @@ -528,6 +560,7 @@ .penpot-free { @include t.use-typography("body-medium"); + display: flex; flex-direction: column; text-align: left; @@ -539,6 +572,7 @@ .power-up { @include t.use-typography("body-small"); + color: var(--color-accent-tertiary); } @@ -553,6 +587,7 @@ .nitrate-selected-org { @include t.use-typography("body-medium"); + color: var(--color-foreground-primary); width: 100%; padding-inline-start: var(--sp-s); @@ -605,6 +640,7 @@ .current-org { @include deprecated.buttonStyle; + display: grid; align-items: center; grid-template-columns: 1fr auto; diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index e9439558f1..24f92ab331 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -27,6 +27,7 @@ .cta-top-section { @include deprecated.buttonStyle; + display: grid; color: var(--color-foreground-secondary); grid-template-columns: 1fr auto; @@ -44,12 +45,14 @@ .icon-dropdown { @include deprecated.flexCenter; + height: 100%; width: var(--sp-l); } .icon-dropdown svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } @@ -68,6 +71,7 @@ .cta-bottom-section .content { @include t.use-typography("body-medium"); @include deprecated.buttonStyle; + color: var(--color-foreground-secondary); display: inline-block; text-align: left; @@ -88,11 +92,13 @@ .cta-title { @include t.use-typography("body-small"); + margin-block-end: var(--sp-xs); } .highlighted .cta-title { @include t.use-typography("body-medium"); + margin-block-end: 0; } @@ -102,17 +108,20 @@ .highlighted .cta-text { @include t.use-typography("body-large"); + color: var(--color-foreground-primary); } .cta-bottom-section .content a { @include t.use-typography("body-medium"); + color: var(--color-accent-tertiary); margin-inline-start: var(--sp-xs); } .cta-link { @include deprecated.buttonStyle; + align-self: end; margin-inline-start: var(--sp-xs); } @@ -127,17 +136,20 @@ .team-label { @include t.use-typography("headline-small"); + color: var(--title-foreground-color); } .team-text { @include t.use-typography("title-medium"); + color: var(--color-foreground-primary); } .manage-subscription-link { @include deprecated.buttonStyle; @include t.use-typography("body-medium"); + color: var(--color-accent-tertiary); display: flex; margin-block-start: -8px; @@ -161,7 +173,8 @@ } .menu-item { - @extend .menu-item-base; + @extend %menu-item-base; + cursor: pointer; &:hover { @@ -197,6 +210,7 @@ .cta-message { @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); line-height: 1; @@ -218,11 +232,13 @@ .nitrate-title { @include t.use-typography("body-large"); + color: var(--color-foreground-primary); } .nitrate-info { @include t.use-typography("body-medium"); + color: var(--color-foreground-secondary); margin-block: var(--sp-s) var(--sp-xxl); } diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 259fdeb565..6d6d0a369b 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -45,6 +45,7 @@ .block-label { @include t.use-typography("headline-small"); + color: var(--color-foreground-secondary); } @@ -82,6 +83,7 @@ .team-icon { --update-button-opacity: 0; + position: relative; height: $sz-120; width: $sz-120; @@ -162,6 +164,7 @@ .table-header { @include t.use-typography("headline-small"); + display: grid; align-items: center; grid-template-columns: 43% 1fr px2rem(108) var(--sp-m); @@ -245,12 +248,13 @@ .member-name, .member-email { - @include textEllipsis; + @include text-ellipsis; @include t.use-typography("body-large"); } .member-email { @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); } @@ -262,6 +266,7 @@ // ROL INFO .rol-selector { @include t.use-typography("body-medium"); + position: relative; display: grid; grid-template-columns: 1fr auto; @@ -303,6 +308,7 @@ .rol-dropdown-item { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: space-between; @@ -311,6 +317,7 @@ padding: px2rem(6); border-radius: $br-8; cursor: pointer; + &:hover { background-color: var(--color-background-quaternary); } @@ -337,7 +344,8 @@ .input-checkbox { // TODO: remove this extended class. - @extend .input-checkbox; + @extend %input-checkbox; + cursor: pointer; } @@ -363,6 +371,7 @@ .action-dropdown-item { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: space-between; @@ -371,6 +380,7 @@ padding: px2rem(6); border-radius: $br-8; cursor: pointer; + &:hover { background-color: var(--color-background-quaternary); } @@ -399,6 +409,7 @@ .invitations-actions { @include t.use-typography("body-medium"); + display: flex; justify-content: end; align-items: center; @@ -432,7 +443,8 @@ .btn-empty-invitations { // TODO: Remove this extend add DS component - @extend .button-primary; + @extend %button-primary; + margin-block-start: var(--sp-l); padding-inline: var(--sp-m); } @@ -451,8 +463,9 @@ } .field-email { - @include textEllipsis; + @include text-ellipsis; @include t.use-typography("body-large"); + display: flex; gap: var(--sp-l); align-items: center; @@ -499,10 +512,10 @@ .webhooks-hero { @include t.use-typography("body-medium"); + display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-xxxl); - margin-top: var(--sp-xxxl); margin: 0; padding: var(--sp-xxxl); padding: 0; @@ -511,19 +524,22 @@ .hero-title { @include t.use-typography("title-large"); + color: var(--color-foreground-primary); } .hero-desc { @include t.use-typography("body-large"); + color: var(--color-foreground-secondary); margin-bottom: 0; max-width: $sz-512; } .hero-btn { - //TODO: Remove this extended class using a DS component - @extend .button-primary; + // TODO: Remove this extended class using a DS component + @extend %button-primary; + height: $sz-32; max-width: $sz-512; } @@ -572,6 +588,7 @@ .webhook-dropdown-item { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: space-between; @@ -580,6 +597,7 @@ padding: px2rem(6); border-radius: $br-8; cursor: pointer; + &:hover { background-color: var(--color-background-quaternary); } @@ -611,10 +629,7 @@ // INVITE MEMBERS MODAL .modal-team-container { - position: relative; - padding: var(--sp-xxxl); border-radius: $br-8; - background-color: var(--color-background-primary); border: $b-2 solid var(--color-background-quaternary); min-width: $sz-364; min-height: $sz-192; @@ -643,6 +658,7 @@ .modal-title { @include t.use-typography("headline-medium"); + height: $sz-32; color: var(--color-foreground-primary); } @@ -669,12 +685,14 @@ .invite-team-member-text { @include t.use-typography("body-large"); + margin: 0 0 var(--sp-l) 0; color: var(--color-foreground-primary); } .role-title { @include t.use-typography("body-large"); + margin: 0; color: var(--color-foreground-primary); } @@ -691,7 +709,7 @@ .accept-btn { // TODO: remove this extend class creating a modal component - @extend .modal-accept-btn; + @extend %modal-accept-btn; } // WEBHOOKS MODAL @@ -727,16 +745,18 @@ .modal-title { @include t.use-typography("title-small"); + color: var(--color-foreground-primary); } .modal-close-btn { // TODO remove extended class creating a modal component - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include t.use-typography("body-small"); + display: flex; flex-direction: column; gap: var(--sp-xxl); @@ -751,6 +771,7 @@ .select-title { @include t.use-typography("body-small"); + color: var(--color-foreground-primary); } @@ -764,28 +785,31 @@ // TODO: Remove this extended classes creating a modal component .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } } // TODO: Remove this extended class using input component .email-input { @include t.use-typography("body-small"); - @extend .input-base; + @extend %input-base; + height: auto; } + // FIXME: This does not conform to our CSS Guidelines. Need to unnest and to use // custom properties to handle state changes. .input-wrapper { display: flex; align-items: center; + @include t.use-typography("body-large"); label { @@ -801,6 +825,7 @@ border-color: var(--color-accent-primary); } } + &:hover { span { border-color: var(--color-accent-primary-muted); @@ -809,13 +834,17 @@ } span { - @extend .checkbox-icon; + @extend %checkbox-icon; @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); } + input { margin: 0; + @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); } } diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index eba9c361d0..354a177dd0 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/frontend/src/app/main/ui/dashboard/team_form.scss @@ -7,11 +7,11 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; } .modal-header { @@ -20,11 +20,12 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @@ -36,12 +37,15 @@ } .group-name-input { - @extend .input-element-label; + @extend %input-element-label; @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-8; + label { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + align-items: flex-start; width: 100%; border: none; @@ -55,15 +59,17 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } + .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index 8a5ab660c0..583e87d6ad 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -19,21 +19,23 @@ flex-direction: column; height: px2rem(244); justify-content: flex-end; - margin-inline-start: px2rem(6); - margin-inline-end: px2rem(6); + margin-inline: px2rem(6); margin-block-end: px2rem(6); position: absolute; transition: bottom 300ms; width: calc(100% - $sz-12); pointer-events: none; + &.collapsed { inset-block-end: calc(-1 * px2rem(228)); background-color: transparent; transition: bottom 300ms; + .title-btn { border-end-end-radius: $br-8; border-end-start-radius: $br-8; } + .content, .content-description { visibility: hidden; @@ -66,26 +68,24 @@ .title-text { @include t.use-typography("body-large"); + display: inline-block; vertical-align: middle; - margin-inline-start: var(--sp-m); - margin-inline-end: var(--sp-s); + margin-inline: var(--sp-m) var(--sp-s); color: var(--color-foreground-primary); } .title-icon-container { display: inline-block; vertical-align: middle; - margin-inline-start: auto; - margin-inline-end: var(--sp-s); + margin-inline: auto var(--sp-s); color: var(--color-foreground-primary); } .title-icon { display: inline-block; vertical-align: middle; - margin-inline-start: auto; - margin-inline-end: var(--sp-s); + margin-inline: auto var(--sp-s); transform: rotate(90deg); } @@ -127,6 +127,7 @@ &:hover { border: $b-2 solid var(--color-background-tertiary); background-color: var(--color-accent-primary); + .arrow-icon { stroke: var(--color-background-tertiary); } @@ -146,9 +147,9 @@ .content-description { @include t.use-typography("body-medium"); + color: var(--color-foreground-primary); - margin-block-end: calc(-1 * var(--sp-s)); - margin-block-start: var(--sp-l); + margin-block: var(--sp-l) calc(-1 * var(--sp-s)); margin-inline-start: var(--sp-l); visibility: visible; } @@ -179,6 +180,7 @@ .template-card { @include t.use-typography("body-large"); + display: inline-block; width: px2rem(256); cursor: pointer; @@ -186,12 +188,15 @@ padding: 0 var(--sp-xs) var(--sp-s) var(--sp-xs); border-radius: $br-8; border: $b-2 solid transparent; + &:hover { text-decoration: none; border-color: var(--color-accent-primary); + .download-icon { stroke: var(--color-accent-primary); } + .card-text { color: var(--color-accent-primary); } @@ -222,6 +227,7 @@ .card-text { @include t.use-typography("body-large"); + white-space: nowrap; overflow: hidden; width: 90%; @@ -249,11 +255,13 @@ .template-link-title { @include t.use-typography("body-medium"); + color: var(--color-foreground-primary); } .template-link-text { @include t.use-typography("body-small"); + margin-block-start: var(--sp-s); color: var(--color-foreground-secondary); } diff --git a/frontend/src/app/main/ui/debug/icons_preview.scss b/frontend/src/app/main/ui/debug/icons_preview.scss index a8493ed42b..082723835e 100644 --- a/frontend/src/app/main/ui/debug/icons_preview.scss +++ b/frontend/src/app/main/ui/debug/icons_preview.scss @@ -10,6 +10,7 @@ .title { @include deprecated.bigTitleTipography; + color: var(--color-foreground-primary); } @@ -28,9 +29,9 @@ row-gap: 0.5rem; grid-template-rows: var(--cell-size) 1fr; padding: 0.5rem; - color: var(--color-foreground-primary); - word-break: break-word; + overflow-wrap: break-word; + @include deprecated.bodySmallTypography; svg { diff --git a/frontend/src/app/main/ui/debug/playground.scss b/frontend/src/app/main/ui/debug/playground.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss index d0f08a50e8..c3487c3aa2 100644 --- a/frontend/src/app/main/ui/delete_shared.scss +++ b/frontend/src/app/main/ui/delete_shared.scss @@ -8,14 +8,16 @@ @use "ds/typography.scss" as t; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; + &.transparent { background-color: transparent; } } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + display: grid; gap: var(--sp-xxl); grid-template-rows: auto minmax(0, 1fr) auto; @@ -29,38 +31,42 @@ .modal-title { @include t.use-typography("headline-medium"); + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include t.use-typography("body-small"); + display: grid; gap: var(--sp-s); } .element-list { @include t.use-typography("body-large"); + color: var(--modal-text-foreground-color); overflow-y: auto; margin-block: 0; } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } @@ -72,6 +78,7 @@ .modal-subtitle, .modal-msg { @include t.use-typography("body-large"); + color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/ds/_borders.scss b/frontend/src/app/main/ui/ds/_borders.scss index 9fff3615ac..070f0b9abb 100644 --- a/frontend/src/app/main/ui/ds/_borders.scss +++ b/frontend/src/app/main/ui/ds/_borders.scss @@ -12,6 +12,5 @@ $br-6: px2rem(6); $br-8: px2rem(8); $br-12: px2rem(12); $br-circle: 50%; - $b-1: px2rem(1); $b-2: px2rem(2); diff --git a/frontend/src/app/main/ui/ds/_utils.scss b/frontend/src/app/main/ui/ds/_utils.scss index 248d43d002..a455cb0318 100644 --- a/frontend/src/app/main/ui/ds/_utils.scss +++ b/frontend/src/app/main/ui/ds/_utils.scss @@ -7,6 +7,7 @@ @use "sass:math"; @function px2rem($value) { - $remValue: math.div($value, 16) * 1rem; - @return $remValue; + $rem-value: math.div($value, 16) * 1rem; + + @return $rem-value; } diff --git a/frontend/src/app/main/ui/ds/buttons/_buttons.scss b/frontend/src/app/main/ui/ds/buttons/_buttons.scss index 433495c300..a3001d8311 100644 --- a/frontend/src/app/main/ui/ds/buttons/_buttons.scss +++ b/frontend/src/app/main/ui/ds/buttons/_buttons.scss @@ -11,29 +11,21 @@ %base-button { --button-bg-color: initial; --button-fg-color: initial; - --button-hover-bg-color: initial; --button-hover-fg-color: initial; - --button-active-bg-color: initial; --button-active-fg-color: initial; - --button-disabled-bg-color: initial; --button-disabled-fg-color: initial; - --button-border-color: var(--button-bg-color); - --button-focus-inner-ring-color: initial; --button-focus-outer-ring-color: initial; - --button-width: initial; --button-height: #{$sz-32}; appearance: none; - width: var(--button-width); height: var(--button-height); - background: var(--button-bg-color); color: var(--button-fg-color); border: $b-1 solid var(--button-border-color); @@ -53,6 +45,7 @@ &:focus-visible { outline: var(--button-focus-inner-ring-color) solid #{px2rem(2)}; outline-offset: -#{px2rem(3)}; + --button-border-color: var(--button-focus-outer-ring-color); --button-fg-color: var(--button-focus-fg-color); } @@ -66,16 +59,12 @@ %base-button-primary { --button-bg-color: var(--color-accent-primary); --button-fg-color: var(--color-background-secondary); - --button-hover-bg-color: var(--color-accent-tertiary); --button-hover-fg-color: var(--color-background-secondary); - --button-active-bg-color: var(--color-accent-tertiary); --button-active-fg-color: var(--color-background-secondary); - --button-disabled-bg-color: var(--color-accent-primary-muted); --button-disabled-fg-color: var(--color-background-secondary); - --button-focus-bg-color: var(--color-accent-primary); --button-focus-fg-color: var(--color-background-secondary); --button-focus-inner-ring-color: var(--color-background-secondary); @@ -83,23 +72,19 @@ &:active, &[aria-pressed="true"] { - box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%); } } %base-button-secondary { --button-bg-color: var(--color-background-tertiary); --button-fg-color: var(--color-foreground-secondary); - --button-hover-bg-color: var(--color-background-tertiary); --button-hover-fg-color: var(--color-accent-primary); - --button-active-bg-color: var(--color-background-quaternary); --button-active-fg-color: var(--color-accent-primary); - --button-disabled-bg-color: transparent; --button-disabled-fg-color: var(--color-foreground-secondary); - --button-focus-bg-color: var(--color-background-tertiary); --button-focus-fg-color: var(--color-foreground-primary); --button-focus-inner-ring-color: var(--color-background-secondary); @@ -109,16 +94,12 @@ %base-button-ghost { --button-bg-color: transparent; --button-fg-color: var(--color-foreground-secondary); - --button-hover-bg-color: var(--color-background-tertiary); --button-hover-fg-color: var(--color-accent-primary); - --button-active-bg-color: var(--color-background-quaternary); --button-active-fg-color: var(--color-accent-primary); - --button-disabled-bg-color: transparent; --button-disabled-fg-color: var(--color-accent-primary-muted); - --button-focus-bg-color: transparent; --button-focus-fg-color: var(--color-foreground-secondary); --button-focus-inner-ring-color: transparent; @@ -128,16 +109,12 @@ %base-button-destructive { --button-bg-color: var(--color-accent-error); --button-fg-color: var(--color-foreground-primary); - --button-hover-bg-color: var(--color-background-error); --button-hover-fg-color: var(--color-foreground-primary); - --button-active-bg-color: var(--color-accent-error); --button-active-fg-color: var(--color-foreground-primary); - --button-disabled-bg-color: var(--color-background-error); --button-disabled-fg-color: var(--color-accent-error); - --button-focus-bg-color: var(--color-accent-error); --button-focus-fg-color: var(--color-foreground-primary); --button-focus-inner-ring-color: var(--color-background-primary); @@ -145,6 +122,6 @@ &:active, &[aria-pressed="true"] { - box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%); } } diff --git a/frontend/src/app/main/ui/ds/buttons/button.scss b/frontend/src/app/main/ui/ds/buttons/button.scss index dd8c720559..5885f881c8 100644 --- a/frontend/src/app/main/ui/ds/buttons/button.scss +++ b/frontend/src/app/main/ui/ds/buttons/button.scss @@ -9,10 +9,9 @@ .button { @extend %base-button; - @include use-typography("headline-small"); - padding: 0 var(--sp-m); + padding: 0 var(--sp-m); display: inline-flex; align-items: center; column-gap: var(--sp-xs); diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.scss b/frontend/src/app/main/ui/ds/buttons/icon_button.scss index 26c8692558..40b422168a 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.scss +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.scss @@ -37,20 +37,15 @@ .icon-button-action { --button-bg-color: transparent; --button-fg-color: var(--color-foreground-secondary); - --button-hover-bg-color: transparent; --button-hover-fg-color: var(--color-accent-primary); - --button-active-bg-color: var(--color-background-quaternary); - --button-disabled-bg-color: transparent; --button-disabled-fg-color: var(--color-accent-primary-muted); - --button-focus-bg-color: transparent; --button-focus-fg-color: var(--color-accent-primary); --button-focus-inner-ring-color: transparent; --button-focus-outer-ring-color: var(--color-accent-primary); - --button-width: #{$sz-24}; --button-height: #{$sz-24}; } diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss index e5c1525e10..67358d3096 100644 --- a/frontend/src/app/main/ui/ds/colors.scss +++ b/frontend/src/app/main/ui/ds/colors.scss @@ -12,22 +12,17 @@ $mint-700: #426158; $mint-150-60: #7efff599; $mint-250-10: #00d1b81a; $mint-250-70: #00d1b8b3; - $green-200: #a7e8d9; $green-500: #2d9f8f; $green-950: #0a2927; - $orange-200: #fedeac; $orange-500: #fe9c07; $orange-950: #3d2501; - $red-200: #ffcada; $red-400: #c80857; $red-500: #ff3277; $red-950: #500124; - $pink-400: #ff6fe0; - $purple-200: #e1d2f5; $purple-400: #bb97d8; $purple-500: #a977d1; @@ -36,23 +31,18 @@ $purple-700: #6911d4; $purple-600-10: #8c33eb1a; $purple-600-70: #8c33ebb3; $purple-700-60: #6911d499; - $aqua-200: #ddf7ff; $aqua-400: #77e1f3; $aqua-600: #59acbb; $aqua-800: #1d4464; - $violet-300: #a7a9ff; $violet-600: #6c6dad; $violet-700: #484c74; $violet-800: #272941; - $blue-200: #bae3fd; $blue-500: #0e9be9; $blue-950: #082c49; - $cobalt-700: #1345aa; - $black: #000; $gray-950: #18181a; $gray-950-60: #18181a99; @@ -63,12 +53,10 @@ $gray-200: #e8eaee; $gray-100: #eef0f2; $gray-50: #f3f4f6; $white: #fff; -$white-60: #ffffff99; +$white-60: #fff9; $white-90: #ffffffe6; - $blue-teal-700: #495e74; $grayish-blue-500: #8f9da3; - $grayish-red: #bfbfbf; :global(.light) { @@ -83,7 +71,6 @@ $grayish-red: #bfbfbf; --color-accent-action: #{$purple-400}; --color-accent-action-hover: #{$purple-500}; --color-accent-off: #{$gray-50}; - --color-accent-success: #{$green-500}; --color-background-success: #{$green-200}; --color-accent-warning: #{$orange-500}; @@ -97,29 +84,23 @@ $grayish-red: #bfbfbf; --color-accent-default: #{$gray-100}; --color-icon-default: #{$blue-teal-700}; --color-background-disabled: #{$gray-200}; - --color-background-primary: #{$white}; --color-background-secondary: #{$gray-200}; --color-background-tertiary: #{$gray-50}; --color-background-quaternary: #{$gray-100}; - --color-foreground-primary: #{$black}; --color-foreground-secondary: #{$blue-teal-700}; - --color-static-white: #{$white}; --color-static-black: #{$black}; - --color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)}; --color-shadow-light: #{color.change($black, $alpha: 0.3)}; --color-overlay-default: #{$white-60}; --color-overlay-onboarding: #{$white-90}; --color-canvas: #{$grayish-red}; - --color-token-background: #{$aqua-200}; --color-token-border: #{$aqua-400}; --color-token-accent: #{$aqua-600}; --color-token-foreground: #{$aqua-800}; - --color-badge-premium: #{$orange-500}; } @@ -135,7 +116,6 @@ $grayish-red: #bfbfbf; --color-accent-action: #{$purple-400}; --color-accent-action-hover: #{$purple-500}; --color-accent-off: #{$gray-50}; - --color-accent-success: #{$green-500}; --color-background-success: #{$green-950}; --color-accent-warning: #{$orange-500}; @@ -149,28 +129,22 @@ $grayish-red: #bfbfbf; --color-accent-default: #{$gray-800}; --color-icon-default: #{$grayish-blue-500}; --color-background-disabled: #{$gray-800}; - --color-background-primary: #{$gray-950}; --color-background-secondary: #{$black}; --color-background-tertiary: #{$gray-900}; --color-background-quaternary: #{$gray-800}; - --color-foreground-primary: #{$white}; --color-foreground-secondary: #{$grayish-blue-500}; - --color-static-white: #{$white}; --color-static-black: #{$black}; - --color-shadow-dark: #{color.change($black, $alpha: 0.6)}; --color-shadow-light: #{color.change($black, $alpha: 0.3)}; --color-overlay-default: #{$gray-950-60}; --color-overlay-onboarding: #{$gray-950-90}; --color-canvas: #{$grayish-red}; - --color-token-background: #{$violet-800}; --color-token-border: #{$violet-700}; --color-token-accent: #{$violet-600}; --color-token-foreground: #{$violet-300}; - --color-badge-premium: #{$orange-200}; } diff --git a/frontend/src/app/main/ui/ds/controls/checkbox.scss b/frontend/src/app/main/ui/ds/controls/checkbox.scss index 81eda1fd47..de272a654f 100644 --- a/frontend/src/app/main/ui/ds/controls/checkbox.scss +++ b/frontend/src/app/main/ui/ds/controls/checkbox.scss @@ -14,14 +14,11 @@ --input-checkbox-border-color-hover: var(--color-accent-primary-muted); --input-checkbox-foreground-color: var(--color-foreground-primary); --input-checkbox-background-color: var(--color-background-quaternary); - --input-checkbox-border-color-checked: var(--color-background-quaternary); --input-checkbox-foreground-color-checked: var(--color-background-primary); --input-checkbox-background-color-checked: var(--color-accent-primary); - --input-checkbox-foreground-color-disabled: var(--color-background-primary); --input-checkbox-background-color-disabled: var(--color-foreground-secondary); - --input-checkbox-text-color: var(--color-foreground-secondary); } @@ -73,6 +70,7 @@ .checkbox-text { @include use-typography("body-small"); + padding-inline-start: var(--sp-s); color: var(--input-checkbox-text-color); } diff --git a/frontend/src/app/main/ui/ds/controls/combobox.scss b/frontend/src/app/main/ui/ds/controls/combobox.scss index 3df8586715..70ad818514 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.scss +++ b/frontend/src/app/main/ui/ds/controls/combobox.scss @@ -26,6 +26,7 @@ } @include use-typography("body-small"); + position: relative; display: grid; grid-template-rows: auto; @@ -40,7 +41,6 @@ height: $sz-32; width: 100%; padding: var(--sp-s); - border: none; border-radius: $br-8; outline: $b-1 solid var(--combobox-outline-color); border: $b-1 solid var(--combobox-border-color); @@ -68,6 +68,7 @@ all: unset; @include use-typography("body-small"); + background-color: transparent; overflow: hidden; text-align: left; @@ -88,6 +89,7 @@ .disabled { cursor: default; + --combobox-background-color: var(--color-background-primary); --combobox-border-color: var(--color-background-quaternary); --combobox-text-color: var(--color-foreground-secondary); diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.scss b/frontend/src/app/main/ui/ds/controls/numeric_input.scss index b45ff9fe15..1c2db43243 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.scss +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.scss @@ -13,7 +13,9 @@ .input-wrapper { --input-padding-size: var(--sp-xs); --opacity-button: 0; + @include t.use-typography("code-font"); + display: flex; flex-direction: column; gap: var(--sp-xs); @@ -23,9 +25,11 @@ &:not(:focus-within) { cursor: ew-resize; } + &:hover { --opacity-button: 1; } + &:focus-within { --opacity-button: 1; } @@ -38,7 +42,9 @@ .text-icon { color: var(--color-foreground-secondary); + @include t.use-typography("body-small"); + inline-size: fit-content; min-inline-size: px2rem(46); padding-inline-start: var(--sp-xs); @@ -50,12 +56,16 @@ inset-block-start: 0; opacity: var(--opacity-button); background-color: var(--color-background-quaternary); + &:hover { background-color: var(--color-background-quaternary); + --opacity-button: 1; } + &:focus { background-color: var(--color-background-quaternary); + --opacity-button: 1; } } diff --git a/frontend/src/app/main/ui/ds/controls/select.scss b/frontend/src/app/main/ui/ds/controls/select.scss index 3b96b1b7e8..0cb48866ca 100644 --- a/frontend/src/app/main/ui/ds/controls/select.scss +++ b/frontend/src/app/main/ui/ds/controls/select.scss @@ -22,6 +22,7 @@ } @include use-typography("body-small"); + position: relative; display: grid; grid-template-rows: auto; @@ -47,7 +48,6 @@ block-size: $sz-32; inline-size: 100%; padding: var(--sp-s); - border: none; border-radius: $br-8; outline: $b-1 solid var(--select-outline-color); border: $b-1 solid var(--select-border-color); @@ -91,6 +91,7 @@ .header-label { @include use-typography("body-small"); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/frontend/src/app/main/ui/ds/controls/shared/option.scss b/frontend/src/app/main/ui/ds/controls/shared/option.scss index 0c2462206b..ae38b73b01 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/option.scss +++ b/frontend/src/app/main/ui/ds/controls/shared/option.scss @@ -14,8 +14,7 @@ --options-empty: var(--color-canvas); display: grid; - align-items: center; - justify-items: start; + place-items: center start; grid-template-columns: 1fr auto; gap: var(--sp-xs); width: 100%; @@ -56,6 +55,7 @@ .option-current { --options-outline-color: var(--color-accent-primary); + outline: $b-1 solid var(--options-outline-color); } diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss index f5a164efb5..4af9bb4793 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss +++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss @@ -25,10 +25,9 @@ padding-block: var(--sp-xs); margin-block-end: 0; max-block-size: $sz-400; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; z-index: var(--z-index-dropdown); - box-shadow: 0px 0px $sz-12 0px var(--color-shadow-dark); + box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark); } .left-align { @@ -41,13 +40,13 @@ .option-separator { border: $b-1 solid var(--options-dropdown-border-color); - margin-block-start: var(--sp-xs); - margin-block-end: var(--sp-xs); + margin-block: var(--sp-xs) var(--sp-xs); } .group-option, .option-empty { @include use-typography("body-small"); + display: flex; align-items: center; gap: var(--sp-xs); diff --git a/frontend/src/app/main/ui/ds/controls/shared/token_option.scss b/frontend/src/app/main/ui/ds/controls/shared/token_option.scss index 884ddfea54..b05b6e8e66 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/token_option.scss +++ b/frontend/src/app/main/ui/ds/controls/shared/token_option.scss @@ -12,10 +12,11 @@ --token-options-fg-color: var(--color-foreground-primary); --token-options-bg-color: unset; --token-options-empty: var(--color-canvas); + @include use-typography("body-small"); + display: grid; - align-items: center; - justify-items: start; + place-items: center start; grid-template-columns: 1fr auto; gap: $sz-6; width: 100%; @@ -26,10 +27,10 @@ outline-offset: calc(-1 * $b-1); background-color: var(--token-options-bg-color); color: var(--token-options-fg-color); - overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + &:hover, &[aria-selected="true"] { --token-options-bg-color: var(--color-background-quaternary); @@ -51,11 +52,13 @@ .option-current { --token-options-outline-color: var(--color-accent-primary); + outline: $b-1 solid var(--token-options-outline-color); } .option-pill { @include use-typography("code-font"); + color: var(--color-foreground-secondary); background-color: var(--color-background-primary); border-radius: $br-6; diff --git a/frontend/src/app/main/ui/ds/controls/switch.scss b/frontend/src/app/main/ui/ds/controls/switch.scss index c5abbf3a00..01eae97f00 100644 --- a/frontend/src/app/main/ui/ds/controls/switch.scss +++ b/frontend/src/app/main/ui/ds/controls/switch.scss @@ -13,10 +13,8 @@ .switch { --switch-label-foreground-color: var(--color-foreground-primary); - --switch-track-outline-color: none; --switch-track-shadow: inset 0 1px 2px var(--color-shadow-light); - --switch-thumb-shadow: 0 1px 2px var(--color-shadow-light); display: grid; @@ -29,7 +27,6 @@ &.off { --switch-track-justify-content: start; --switch-track-background-color: var(--color-foreground-secondary); - --switch-thumb-width: #{px2rem(14)}; --switch-thumb-height: #{px2rem(14)}; --switch-thumb-background-color: var(--color-accent-off); @@ -39,7 +36,6 @@ &.neutral { --switch-track-justify-content: center; --switch-track-background-color: var(--color-accent-tertiary); - --switch-thumb-width: #{px2rem(14)}; --switch-thumb-height: #{px2rem(4)}; --switch-thumb-background-color: var(--color-accent-off); @@ -49,7 +45,6 @@ &.on { --switch-track-justify-content: end; --switch-track-background-color: var(--color-accent-tertiary); - --switch-thumb-width: #{px2rem(14)}; --switch-thumb-height: #{px2rem(14)}; --switch-thumb-background-color: var(--color-accent-off); @@ -58,24 +53,21 @@ &[disabled] { pointer-events: none; + --switch-label-foreground-color: var(--color-foreground-secondary); - --switch-track-shadow: none; - --switch-thumb-shadow: none; } &.off[disabled] { --switch-track-background-color: var(--color-background-primary); --switch-track-border-color: var(--color-background-disabled); - --switch-thumb-background-color: var(--color-background-disabled); } &.on[disabled], &.neutral[disabled] { --switch-track-background-color: var(--color-background-disabled); - --switch-thumb-background-color: var(--color-background-primary); } @@ -90,6 +82,7 @@ .switch-label { @include t.use-typography("body-small"); + color: var(--switch-label-foreground-color); user-select: none; } diff --git a/frontend/src/app/main/ui/ds/controls/utilities/hint_message.scss b/frontend/src/app/main/ui/ds/controls/utilities/hint_message.scss index 1112a3f816..97f1a12fda 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/hint_message.scss +++ b/frontend/src/app/main/ui/ds/controls/utilities/hint_message.scss @@ -11,6 +11,7 @@ --hint-color: var(--color-foreground-secondary); @include use-typography("body-small"); + color: var(--hint-color); } diff --git a/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss b/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss index 20533664ef..adc4f5a301 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss +++ b/frontend/src/app/main/ui/ds/controls/utilities/input_field.scss @@ -22,7 +22,6 @@ align-items: center; position: relative; inline-size: 100%; - background: var(--input-bg-color); border-radius: $br-8; padding: 0 var(--input-padding-size, var(--sp-s)); @@ -85,12 +84,10 @@ border: none; background: none; inline-size: 100%; - font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; - color: var(--input-fg-color); &:focus-visible { @@ -107,7 +104,6 @@ &:is(:autofill, :autofill:hover, :autofill:focus, :autofill:active) { -webkit-text-fill-color: var(--input-fg-color); - -webkit-background-clip: text; background-clip: text; caret-color: var(--input-bg-color); } diff --git a/frontend/src/app/main/ui/ds/controls/utilities/label.scss b/frontend/src/app/main/ui/ds/controls/utilities/label.scss index 405beb6c6f..4ba6a988dc 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/label.scss +++ b/frontend/src/app/main/ui/ds/controls/utilities/label.scss @@ -13,6 +13,7 @@ --label-optional-color: var(--color-foreground-secondary); @include use-typography("body-small"); + color: var(--label-color); display: flex; gap: var(--sp-xs); diff --git a/frontend/src/app/main/ui/ds/controls/utilities/token_field.scss b/frontend/src/app/main/ui/ds/controls/utilities/token_field.scss index 4233b2305d..4cb3a61a0d 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/token_field.scss +++ b/frontend/src/app/main/ui/ds/controls/utilities/token_field.scss @@ -18,10 +18,10 @@ --token-field-outline-color: none; --token-field-height: var(--sp-xxxl); --token-field-margin: unset; + display: inline-flex; column-gap: var(--sp-xs); align-items: center; - position: relative; inline-size: 100%; background: var(--token-field-bg-color); border-radius: $br-8; @@ -38,6 +38,7 @@ --token-field-outline-color: var(--color-accent-primary); } } + .token-field-wrapper { inline-size: 100%; } @@ -48,8 +49,10 @@ .token-field-disabled { user-select: none; + --token-field-bg-color: var(--color-background-primary); --token-field-outline-color: var(--color-background-quaternary); + &:hover { --token-field-bg-color: var(--color-background-primary); --token-field-outline-color: var(--color-background-quaternary); @@ -60,8 +63,10 @@ --pill-border-color: var(--color-token-border); --pill-bg-color: var(--color-background-tertiary); --pill-fg-color: var(--color-token-foreground); + @include t.use-typography("code-font"); - @include textEllipsis; + @include text-ellipsis; + display: block; block-size: var(--sp-xxl); inline-size: fit-content; @@ -72,24 +77,29 @@ border-radius: $br-6; padding-inline: $sz-6; max-inline-size: 100%; + &:hover { --pill-bg-color: var(--color-token-background); --pill-fg-color: var(--color-foreground-primary); --pill-border-color: var(--color-token-foreground); } + &:focus-visible { --pill-bg-color: var(--color-token-background); --pill-fg-color: var(--color-foreground-primary); --pill-border-color: var(--color-accent-primary); + outline: none; } } .pill-disabled { user-select: none; + --pill-bg-color: none; --pill-fg-color: var(--color-foreground-secondary); --pill-border-color: var(--color-token-border); + &:hover { --pill-bg-color: none; --pill-fg-color: var(--color-foreground-secondary); @@ -101,7 +111,9 @@ --pill-bg-color: none; --pill-fg-color: var(--color-foreground-secondary); --pill-border-color: var(--color-token-border); + position: relative; + &:hover { --pill-bg-color: none; --pill-fg-color: var(--color-foreground-secondary); @@ -127,15 +139,20 @@ inset-block-start: 0; opacity: var(--opacity-button); background-color: var(--color-background-quaternary); + &:hover { background-color: var(--color-background-quaternary); + --opacity-button: 1; } + &:focus { background-color: var(--color-background-quaternary); + --opacity-button: 1; } } + .invisible-btn-dropdown-open { --opacity-button: 0; } diff --git a/frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.scss b/frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.scss index 207b2236af..a459eb5e74 100644 --- a/frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.scss +++ b/frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.scss @@ -5,6 +5,6 @@ // Copyright (c) KALEIDOS INC .token-icon { - fill: currentColor; + fill: currentcolor; stroke: none; } diff --git a/frontend/src/app/main/ui/ds/layers/layer_button.cljs b/frontend/src/app/main/ui/ds/layers/layer_button.cljs index 315ad56e88..268e33f961 100644 --- a/frontend/src/app/main/ui/ds/layers/layer_button.cljs +++ b/frontend/src/app/main/ui/ds/layers/layer_button.cljs @@ -27,8 +27,7 @@ [{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}] (let [button-props (mf/spread-props props {:class [class (stl/css-case :layer-button true - :layer-button--expandable is-expandable - :layer-button--expanded expanded)] + :layer-button-expanded expanded)] :type "button" :on-click on-toggle-expand :on-context-menu on-context-menu})] diff --git a/frontend/src/app/main/ui/ds/layers/layer_button.scss b/frontend/src/app/main/ui/ds/layers/layer_button.scss index 56e59e8acf..2850af269f 100644 --- a/frontend/src/app/main/ui/ds/layers/layer_button.scss +++ b/frontend/src/app/main/ui/ds/layers/layer_button.scss @@ -16,9 +16,7 @@ display: flex; justify-content: space-between; - block-size: var(--layer-button-block-size); - background: var(--layer-button-background); color: var(--layer-button-text); } @@ -27,17 +25,15 @@ @include use-typography("body-small"); appearance: none; - flex: 1; display: flex; align-items: center; - border: none; background: none; color: inherit; } -.layer-button--expanded { +.layer-button-expanded { & .layer-button-name { color: var(--color-foreground-primary); } diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss b/frontend/src/app/main/ui/ds/layout/tab_switcher.scss index 90af8cf778..b8e7dd8f8d 100644 --- a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss +++ b/frontend/src/app/main/ui/ds/layout/tab_switcher.scss @@ -10,15 +10,14 @@ .tabs { --tabs-bg-color: var(--color-background-secondary); + display: grid; grid-template-rows: auto 1fr; } .padding-wrapper { - padding-inline-start: var(--tabs-nav-padding-inline-start, 0); - padding-inline-end: var(--tabs-nav-padding-inline-end, 0); - padding-block-start: var(--tabs-nav-padding-block-start, 0); - padding-block-end: var(--tabs-nav-padding-block-end, 0); + padding-inline: var(--tabs-nav-padding-inline-start, 0) var(--tabs-nav-padding-inline-end, 0); + padding-block: var(--tabs-nav-padding-block-start, 0) var(--tabs-nav-padding-block-end, 0); } // TAB NAV @@ -44,6 +43,7 @@ grid-auto-flow: column; gap: var(--sp-xxs); width: 100%; + // Removing margin bottom from default ul margin-block-end: 0; border-radius: $br-8; @@ -68,7 +68,6 @@ height: $sz-32; border: none; border-radius: $br-8; - padding: 0 var(--sp-s); outline: $b-1 solid var(--tabs-item-outline-color); display: grid; grid-auto-flow: column; @@ -89,6 +88,7 @@ .tab-text { @include use-typography("headline-small"); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -102,6 +102,7 @@ .tab-panel { --tab-panel-outline-color: none; + &:focus { outline: none; } diff --git a/frontend/src/app/main/ui/ds/mixins.scss b/frontend/src/app/main/ui/ds/mixins.scss index 32e2dce255..f43b690c02 100644 --- a/frontend/src/app/main/ui/ds/mixins.scss +++ b/frontend/src/app/main/ui/ds/mixins.scss @@ -8,7 +8,7 @@ @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; -@mixin textEllipsis { +@mixin text-ellipsis { display: block; max-width: 99%; overflow: hidden; @@ -16,7 +16,7 @@ white-space: nowrap; } -@mixin twoLineTextEllipsis { +@mixin two-line-text-ellipsis { max-width: 99%; overflow: hidden; text-overflow: ellipsis; @@ -33,6 +33,7 @@ /// @param {Length} $border - Inner transparent border size /// @param {Bool} $include-selection - Include ::selection styles /// @param {Bool} $include-placeholder - Include placeholder styles + @mixin custom-scrollbar( $thumb-color: #aab5ba4d, $thumb-hover-color: #aab5bab3, @@ -84,12 +85,7 @@ @if $include-placeholder { &::placeholder { @include t.use-typography("body-small"); - color: var(--color-foreground-secondary); - } - // Legacy webkit - &::-webkit-input-placeholder { - @include t.use-typography("body-small"); color: var(--color-foreground-secondary); } } diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss index 3cf7b1bd2c..3974567f7c 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss +++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss @@ -22,10 +22,8 @@ border: $b-1 solid var(--notification-border-color); border-radius: $br-8; padding: var(--notification-padding); - display: flex; gap: var(--sp-s); - color: var(--notification-fg-color); // Targets the potential links included by the creator in the children props. diff --git a/frontend/src/app/main/ui/ds/notifications/toast.scss b/frontend/src/app/main/ui/ds/notifications/toast.scss index c09629bfdd..9a7728d75c 100644 --- a/frontend/src/app/main/ui/ds/notifications/toast.scss +++ b/frontend/src/app/main/ui/ds/notifications/toast.scss @@ -18,7 +18,6 @@ min-inline-size: $sz-224; max-inline-size: $sz-480; - display: block; position: fixed; inset-block-start: var(--toast-inset-block-start-position); diff --git a/frontend/src/app/main/ui/ds/product/avatar.scss b/frontend/src/app/main/ui/ds/product/avatar.scss index 36952c13d7..a84777a71f 100644 --- a/frontend/src/app/main/ui/ds/product/avatar.scss +++ b/frontend/src/app/main/ui/ds/product/avatar.scss @@ -36,6 +36,7 @@ .is-selected { --border-color: var(--color-accent-primary); + padding: var(--sp-xxs); } diff --git a/frontend/src/app/main/ui/ds/product/empty_placeholder.scss b/frontend/src/app/main/ui/ds/product/empty_placeholder.scss index 2850b67eb5..d0e2a8dfa1 100644 --- a/frontend/src/app/main/ui/ds/product/empty_placeholder.scss +++ b/frontend/src/app/main/ui/ds/product/empty_placeholder.scss @@ -22,8 +22,7 @@ .text-wrapper { display: grid; grid-auto-rows: auto; - align-self: center; - justify-self: center; + place-self: center center; max-width: $sz-400; } diff --git a/frontend/src/app/main/ui/ds/product/empty_state.scss b/frontend/src/app/main/ui/ds/product/empty_state.scss index b0612ecec0..60f05e85b9 100644 --- a/frontend/src/app/main/ui/ds/product/empty_state.scss +++ b/frontend/src/app/main/ui/ds/product/empty_state.scss @@ -31,6 +31,7 @@ .text { @include t.use-typography("body-small"); + text-align: center; color: var(--color-foreground-secondary); } diff --git a/frontend/src/app/main/ui/ds/product/input_with_meta.scss b/frontend/src/app/main/ui/ds/product/input_with_meta.scss index a01190d120..17b7e8c65a 100644 --- a/frontend/src/app/main/ui/ds/product/input_with_meta.scss +++ b/frontend/src/app/main/ui/ds/product/input_with_meta.scss @@ -15,6 +15,7 @@ --input-meta-background: var(--color-background-tertiary); @include t.use-typography("body-small"); + border-radius: $br-8; background-color: var(--input-meta-background); padding: var(--sp-s); @@ -28,6 +29,7 @@ &:hover { --input-meta-background: var(--color-background-quaternary); + cursor: text; } } diff --git a/frontend/src/app/main/ui/ds/product/loader.scss b/frontend/src/app/main/ui/ds/product/loader.scss index 772049d573..f552bad7be 100644 --- a/frontend/src/app/main/ui/ds/product/loader.scss +++ b/frontend/src/app/main/ui/ds/product/loader.scss @@ -78,7 +78,7 @@ } .loader { - fill: currentColor; + fill: currentcolor; width: var(--icon-width); } diff --git a/frontend/src/app/main/ui/ds/product/milestone.scss b/frontend/src/app/main/ui/ds/product/milestone.scss index 5e276d23a0..6a60a52804 100644 --- a/frontend/src/app/main/ui/ds/product/milestone.scss +++ b/frontend/src/app/main/ui/ds/product/milestone.scss @@ -11,19 +11,13 @@ .milestone { border: $b-1 solid var(--border-color, transparent); border-radius: $br-8; - background: var(--color-background-primary); - display: grid; - grid-template-areas: - "avatar name button" - "avatar content button"; - grid-template-rows: auto 1fr; - grid-template-columns: calc(var(--sp-xxl) + var(--sp-l)) 1fr auto; - + grid-template: + "avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l)) + 1fr auto; padding: var(--sp-s) 0; align-items: center; - column-gap: var(--sp-s); &.is-selected, @@ -60,6 +54,7 @@ .date { @include t.use-typography("body-small"); + grid-area: content; color: var(--color-foreground-secondary); } diff --git a/frontend/src/app/main/ui/ds/product/milestone_group.scss b/frontend/src/app/main/ui/ds/product/milestone_group.scss index 43c71ce334..0903a24921 100644 --- a/frontend/src/app/main/ui/ds/product/milestone_group.scss +++ b/frontend/src/app/main/ui/ds/product/milestone_group.scss @@ -11,19 +11,13 @@ .milestone { border: $b-1 solid var(--border-color, transparent); border-radius: $br-8; - background: var(--color-background-primary); - display: grid; - grid-template-areas: - "avatar name button" - "avatar content button"; - grid-template-rows: auto 1fr; - grid-template-columns: calc(var(--sp-xxl) + var(--sp-l)) 1fr auto; - + grid-template: + "avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l)) + 1fr auto; padding: var(--sp-s) 0; align-items: center; - column-gap: var(--sp-s); &.is-selected, @@ -39,12 +33,14 @@ .name { @include t.use-typography("body-small"); + grid-area: name; color: var(--color-foreground-primary); } .toggle-message { @include t.use-typography("body-small"); + grid-area: name; } @@ -95,6 +91,7 @@ &:hover { color: var(--color-accent-primary); + --icon-stroke-color: var(--color-accent-primary); } } diff --git a/frontend/src/app/main/ui/ds/product/panel_title.scss b/frontend/src/app/main/ui/ds/product/panel_title.scss index e0419221e4..fcb59ea43b 100644 --- a/frontend/src/app/main/ui/ds/product/panel_title.scss +++ b/frontend/src/app/main/ui/ds/product/panel_title.scss @@ -19,6 +19,7 @@ .panel-title-text { @include t.use-typography("headline-small"); + flex-grow: 1; text-align: center; color: var(--color-foreground-primary); diff --git a/frontend/src/app/main/ui/ds/tooltip/tooltip.scss b/frontend/src/app/main/ui/ds/tooltip/tooltip.scss index 79fe80f774..dcb01cb95a 100644 --- a/frontend/src/app/main/ui/ds/tooltip/tooltip.scss +++ b/frontend/src/app/main/ui/ds/tooltip/tooltip.scss @@ -55,6 +55,7 @@ $arrow-side: 12px; "arrow" "content"; } + .tooltip-bottom .tooltip-arrow { justify-self: center; border-radius: var(--sp-xs) 0; @@ -111,7 +112,7 @@ $arrow-side: 12px; } .tooltip-bottom-right .tooltip-arrow { - margin: 0px var(--sp-s); + margin: 0 var(--sp-s); transform: rotate(45deg) translateX(var(--sp-s)); border-radius: var(--sp-xs) 0; border-block-start: $b-1 solid var(--color-accent-primary-muted); @@ -123,6 +124,7 @@ $arrow-side: 12px; "arrow" "content"; } + .tooltip-bottom-left .tooltip-arrow { justify-self: end; margin: 0 var(--sp-s); @@ -137,6 +139,7 @@ $arrow-side: 12px; "content" "arrow"; } + .tooltip-top-left .tooltip-arrow { margin: 0 var(--sp-s); justify-self: end; @@ -148,6 +151,7 @@ $arrow-side: 12px; .tooltip-content { @include t.use-typography("body-small"); + background-color: var(--color-background-primary); color: var(--color-foreground-secondary); border-radius: var(--sp-xs); diff --git a/frontend/src/app/main/ui/ds/typography.scss b/frontend/src/app/main/ui/ds/typography.scss index 6ca2fd6670..7f27419cd0 100644 --- a/frontend/src/app/main/ui/ds/typography.scss +++ b/frontend/src/app/main/ui/ds/typography.scss @@ -8,11 +8,9 @@ $_font-weight-regular: 400; $_font-weight-medium: 500; - $_font-lineheight-dense: 1.2; $_font-lineheight-compact: 1.3; $_font-lineheight-normal: 1.4; - $_fs-12: px2rem(12); $_fs-14: px2rem(14); $_fs-16: px2rem(16); @@ -22,7 +20,7 @@ $_fs-24: px2rem(24); $_fs-36: px2rem(36); @mixin _font-style-display { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -30,7 +28,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-title-large { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -38,7 +36,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-title-medium { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -46,7 +44,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-title-small { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-dense; @@ -54,7 +52,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-headline-large { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -63,7 +61,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-headline-medium { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -72,7 +70,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-headline-small { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-medium; line-height: $_font-lineheight-dense; @@ -81,7 +79,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-body-large { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -89,7 +87,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-body-medium { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-normal; @@ -97,7 +95,7 @@ $_fs-36: px2rem(36); } @mixin _font-style-body-small { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; font-optical-sizing: auto; font-weight: $_font-weight-regular; line-height: $_font-lineheight-compact; diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.scss b/frontend/src/app/main/ui/ds/utilities/swatch.scss index a9eb3b6936..9daa4d9141 100644 --- a/frontend/src/app/main/ui/ds/utilities/swatch.scss +++ b/frontend/src/app/main/ui/ds/utilities/swatch.scss @@ -11,7 +11,7 @@ @property --solid-color-overlay { syntax: ""; inherits: false; - initial-value: rgba(0, 0, 0, 0); + initial-value: rgb(0 0 0 / 0%); } .swatch { @@ -19,13 +19,13 @@ --border-radius: #{$br-4}; --border-color-active: var(--color-foreground-primary); --border-color-active-inset: var(--color-background-primary); - --checkerboard-background: repeating-conic-gradient(lightgray 0% 25%, white 0% 50%); --checkerboard-size: 0.5rem 0.5rem; border: $b-1 solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; + &:focus-visible { --border-color: var(--color-accent-primary); } @@ -80,6 +80,7 @@ &:hover { --border-color: var(--color-accent-primary-muted); + border-width: $b-2; } } @@ -114,7 +115,6 @@ /* solid‑colour overlay */ /* checkerboard pattern */ linear-gradient(var(--solid-color-overlay), var(--solid-color-overlay)), var(--checkerboard-background); - background-size: cover, var(--checkerboard-size); background-position: center, center; background-repeat: no-repeat, repeat; diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss index 8bc4737a20..4a8b358930 100644 --- a/frontend/src/app/main/ui/exports/assets.scss +++ b/frontend/src/app/main/ui/exports/assets.scss @@ -9,6 +9,7 @@ // PROGRESS WIDGET .export-progress-widget { @include deprecated.flexCenter; + width: deprecated.$s-28; height: deprecated.$s-28; } @@ -19,6 +20,7 @@ --export-modal-fg-color: var(--alert-text-foreground-color-default); --export-modal-icon-color: var(--alert-icon-foreground-color-default); --export-modal-border-color: var(--alert-border-color-default); + position: absolute; right: deprecated.$s-16; top: deprecated.$s-48; @@ -41,13 +43,15 @@ --export-modal-fg-color: var(--alert-text-foreground-color-error); --export-modal-icon-color: var(--alert-icon-foreground-color-error); --export-modal-border-color: var(--alert-border-color-error); + grid-template-areas: "icon text close"; gap: deprecated.$s-8; padding-block: deprecated.$s-8; } .icon { - @extend .button-icon; + @extend %button-icon; + grid-area: icon; align-self: center; margin-inline-start: deprecated.$s-8; @@ -56,6 +60,7 @@ .export-progress-title { @include deprecated.bodyMediumTypography; + display: grid; grid-template-columns: auto 1fr; gap: deprecated.$s-8; @@ -68,6 +73,7 @@ .progress { @include deprecated.bodyMediumTypography; + padding-left: deprecated.$s-8; margin: 0; align-self: center; @@ -77,6 +83,7 @@ .retry-btn { @include deprecated.buttonStyle; @include deprecated.bodySmallTypography; + display: inline; text-align: left; color: var(--modal-link-foreground-color); @@ -86,12 +93,14 @@ .progress-close-button { @include deprecated.buttonStyle; + padding: 0; margin-inline-end: deprecated.$s-8; } .close-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--export-modal-icon-color); } @@ -102,14 +111,16 @@ // EXPORT MODAL .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; + &.transparent { background-color: transparent; } } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + max-height: calc(10 * deprecated.$s-80); } @@ -119,75 +130,95 @@ .modal-title { @include deprecated.headlineMediumTypography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content, .no-selection { @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; + .modal-link { @include deprecated.bodyLargeTypography; + text-decoration: none; cursor: pointer; color: var(--modal-link-foreground-color); } + .selection-header { @include deprecated.flexRow; + height: deprecated.$s-32; margin-bottom: deprecated.$s-4; + .selection-btn { @include deprecated.buttonStyle; - @extend .input-checkbox; + @extend %input-checkbox; @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; padding: 0; margin-left: deprecated.$s-16; + span { - @extend .checkbox-icon; + @extend %checkbox-icon; } } + .selection-title { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); } } + .selection-wrapper { position: relative; width: 100%; height: fit-content; } + .selection-shadow { width: 100%; height: 100%; - &:after { + + &::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; - background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%); + background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%); content: ""; pointer-events: none; } } + .selection-list { @include deprecated.flexColumn; + max-height: deprecated.$s-400; overflow-y: auto; padding-bottom: deprecated.$s-12; + .selection-row { @include deprecated.flexRow; + background-color: var(--entry-background-color); min-height: deprecated.$s-40; border-radius: deprecated.$br-8; + .selection-btn { @include deprecated.buttonStyle; + display: grid; grid-template-columns: min-content auto 1fr auto auto; align-items: center; @@ -195,45 +226,57 @@ height: 10%; gap: deprecated.$s-8; padding: 0 deprecated.$s-16; + .checkbox-wrapper { - @extend .input-checkbox; + @extend %input-checkbox; @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; padding: 0; + .checkobox-tick { - @extend .checkbox-icon; + @extend %checkbox-icon; } } + .selection-name { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + flex-grow: 1; color: var(--modal-text-foreground-color); text-align: start; } + .selection-scale { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + min-width: deprecated.$s-108; padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } + .selection-extension { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + min-width: deprecated.$s-72; padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } } + .image-wrapper { @include deprecated.flexCenter; + min-height: deprecated.$s-32; min-width: deprecated.$s-32; background-color: var(--app-white); border-radius: deprecated.$br-6; margin: auto 0; + img, svg { object-fit: contain; @@ -245,15 +288,18 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } + .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } + .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } @@ -261,20 +307,26 @@ .modal-subtitle, .modal-msg { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); } .export-option { - @extend .input-checkbox; + @extend %input-checkbox; + width: 100%; align-items: flex-start; + label { align-items: flex-start; + .modal-subtitle { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } } + span { margin-top: deprecated.$s-8; } @@ -288,37 +340,46 @@ .file-entry { .file-name { @include deprecated.flexRow; + .file-icon { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--input-foreground); } } + .file-name-label { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; } } + &.loading { .file-name { color: var(--modal-text-foreground-color); } } + &.error { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } } } + &.success { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss index d6055ed184..9a149abc4c 100644 --- a/frontend/src/app/main/ui/exports/files.scss +++ b/frontend/src/app/main/ui/exports/files.scss @@ -8,14 +8,16 @@ // EXPORT MODAL .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; + &.transparent { background-color: transparent; } } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + max-height: calc(10 * deprecated.$s-80); } @@ -25,74 +27,94 @@ .modal-title { @include deprecated.headlineMediumTypography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; + .modal-link { @include deprecated.bodyLargeTypography; + text-decoration: none; cursor: pointer; color: var(--modal-link-foreground-color); } + .selection-header { @include deprecated.flexRow; + height: deprecated.$s-32; margin-bottom: deprecated.$s-4; + .selection-btn { @include deprecated.buttonStyle; - @extend .input-checkbox; + @extend %input-checkbox; @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; padding: 0; margin-left: deprecated.$s-16; + span { - @extend .checkbox-icon; + @extend %checkbox-icon; } } + .selection-title { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); } } + .selection-wrapper { position: relative; width: 100%; height: fit-content; } + .selection-shadow { width: 100%; height: 100%; - &:after { + + &::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; - background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%); + background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%); content: ""; pointer-events: none; } } + .selection-list { @include deprecated.flexColumn; + max-height: deprecated.$s-400; overflow-y: auto; padding-bottom: deprecated.$s-12; + .selection-row { @include deprecated.flexRow; + background-color: var(--entry-background-color); min-height: deprecated.$s-40; border-radius: deprecated.$br-8; + .selection-btn { @include deprecated.buttonStyle; + display: grid; grid-template-columns: min-content auto 1fr auto auto; align-items: center; @@ -100,45 +122,57 @@ height: 10%; gap: deprecated.$s-8; padding: 0 deprecated.$s-16; + .checkbox-wrapper { - @extend .input-checkbox; + @extend %input-checkbox; @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; padding: 0; + .checkobox-tick { - @extend .checkbox-icon; + @extend %checkbox-icon; } } + .selection-name { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + flex-grow: 1; color: var(--modal-text-foreground-color); text-align: start; } + .selection-scale { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + min-width: deprecated.$s-108; padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } + .selection-extension { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; + min-width: deprecated.$s-72; padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } } + .image-wrapper { @include deprecated.flexCenter; + min-height: deprecated.$s-32; min-width: deprecated.$s-32; background-color: var(--app-white); border-radius: deprecated.$br-6; margin: auto 0; + img, svg { object-fit: contain; @@ -150,15 +184,18 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } + .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } + .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } @@ -166,21 +203,27 @@ .modal-subtitle, .modal-msg { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); } .export-option { - @extend .input-checkbox; + @extend %input-checkbox; + width: 100%; align-items: flex-start; + label { align-items: flex-start; + .modal-subtitle { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); padding: 0.25rem 0; } } + span { margin-top: deprecated.$s-8; } @@ -197,35 +240,43 @@ .file-icon { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--input-foreground); } } + .file-name-label { @include deprecated.bodyLargeTypography; @include deprecated.textEllipsis; } } + &.loading { .file-name { color: var(--modal-text-foreground-color); } } + &.error { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } } } + &.success { .file-name { color: var(--modal-text-foreground-color); + .file-icon svg { stroke: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/inspect/annotation.scss b/frontend/src/app/main/ui/inspect/annotation.scss index 431754d330..863d3f6ede 100644 --- a/frontend/src/app/main/ui/inspect/annotation.scss +++ b/frontend/src/app/main/ui/inspect/annotation.scss @@ -11,11 +11,12 @@ } .title-spacing-annotation { - @extend .attr-title; + @extend %attr-title; } .annotation-content { @include deprecated.bodySmallTypography; + color: var(--entry-foreground-color); } diff --git a/frontend/src/app/main/ui/inspect/attributes.scss b/frontend/src/app/main/ui/inspect/attributes.scss index 4eafa389eb..2fbcbd3e06 100644 --- a/frontend/src/app/main/ui/inspect/attributes.scss +++ b/frontend/src/app/main/ui/inspect/attributes.scss @@ -15,8 +15,7 @@ max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value padding-top: var(--sp-s); padding-inline: var(--sp-m); - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; scrollbar-gutter: stable; background-color: var(--low-emphasis-background); } diff --git a/frontend/src/app/main/ui/inspect/attributes/blur.scss b/frontend/src/app/main/ui/inspect/attributes/blur.scss index 9ae8c464eb..240b8f8c20 100644 --- a/frontend/src/app/main/ui/inspect/attributes/blur.scss +++ b/frontend/src/app/main/ui/inspect/attributes/blur.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,12 +26,13 @@ } .blur-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .copy-btn-title { diff --git a/frontend/src/app/main/ui/inspect/attributes/common.scss b/frontend/src/app/main/ui/inspect/attributes/common.scss index 79d7b9a410..569af36772 100644 --- a/frontend/src/app/main/ui/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/inspect/attributes/common.scss @@ -5,7 +5,6 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; - @use "ds/_utils.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_borders.scss" as *; @@ -24,7 +23,7 @@ } .attributes-color-row { - @extend .attr-row; + @extend %attr-row; } .bullet-wrapper { @@ -41,6 +40,7 @@ .image-format { @include use-typography("headline-small"); + block-size: $sz-32; padding: var(--sp-s) 0; color: var(--color-foreground-secondary); @@ -56,6 +56,7 @@ .format-info { @include use-typography("body-small"); + padding-left: var(--sp-xxs); color: var(--color-foreground-secondary); } @@ -66,10 +67,12 @@ gap: var(--sp-xs); flex-grow: 1; max-inline-size: px2rem(144); + button { visibility: hidden; min-inline-size: px2rem(28); } + &:hover button { visibility: visible; } @@ -87,6 +90,7 @@ .color-name-wrapper { @include use-typography("body-small"); + display: flex; flex-direction: column; gap: var(--sp-xs); @@ -109,7 +113,8 @@ .color-value-wrapper { @include use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + color: var(--menu-foreground-color); text-transform: uppercase; } @@ -120,6 +125,7 @@ .opacity-info { @include use-typography("body-small"); + color: var(--menu-foreground-color); text-transform: uppercase; inline-size: 100%; @@ -127,7 +133,6 @@ .second-row { min-block-size: $sz-16; - padding-right: var(--sp-s); inline-size: 100%; text-align: left; margin: 0; @@ -136,8 +141,9 @@ .color-name-library { @include use-typography("body-small"); + color: var(--color-foreground-secondary); - word-break: break-word; + overflow-wrap: break-word; } .image-download { diff --git a/frontend/src/app/main/ui/inspect/attributes/fill.scss b/frontend/src/app/main/ui/inspect/attributes/fill.scss index 3cede83d81..bb6fa49a90 100644 --- a/frontend/src/app/main/ui/inspect/attributes/fill.scss +++ b/frontend/src/app/main/ui/inspect/attributes/fill.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); diff --git a/frontend/src/app/main/ui/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/inspect/attributes/geometry.scss index f1a90db1e3..40777a76d7 100644 --- a/frontend/src/app/main/ui/inspect/attributes/geometry.scss +++ b/frontend/src/app/main/ui/inspect/attributes/geometry.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,12 +26,13 @@ } .geometry-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .copy-btn-title { diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.scss b/frontend/src/app/main/ui/inspect/attributes/layout.scss index 2164e152fc..4918983aba 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout.scss +++ b/frontend/src/app/main/ui/inspect/attributes/layout.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,12 +26,13 @@ } .layout-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .copy-btn-title { diff --git a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss index a51009ab53..0e4cc28285 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss +++ b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,15 +26,15 @@ } .layout-element-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .copy-btn-title { max-inline-size: $sz-28; - max-inline-size: $sz-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/inspect/attributes/shadow.scss index 8cfb86f0c3..d4e04e5b1b 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.scss +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,10 +26,11 @@ } .shadow-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } diff --git a/frontend/src/app/main/ui/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/inspect/attributes/stroke.scss index dd5bf8d4b4..70bd2a5ef5 100644 --- a/frontend/src/app/main/ui/inspect/attributes/stroke.scss +++ b/frontend/src/app/main/ui/inspect/attributes/stroke.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -31,12 +32,13 @@ } .stroke-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .attributes-content { diff --git a/frontend/src/app/main/ui/inspect/attributes/svg.scss b/frontend/src/app/main/ui/inspect/attributes/svg.scss index 1b7495e61d..dd50046496 100644 --- a/frontend/src/app/main/ui/inspect/attributes/svg.scss +++ b/frontend/src/app/main/ui/inspect/attributes/svg.scss @@ -11,6 +11,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -26,24 +27,28 @@ } .svg-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .attributes-subtitle { @include use-typography("headline-small"); + display: flex; justify-content: space-between; block-size: $sz-32; + span { block-size: $sz-32; display: flex; align-items: center; } + button { display: none; } diff --git a/frontend/src/app/main/ui/inspect/attributes/text.scss b/frontend/src/app/main/ui/inspect/attributes/text.scss index 9f3ecf1808..6a81b7bcd0 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/inspect/attributes/text.scss @@ -12,6 +12,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -33,16 +34,18 @@ } .text-row { - @extend .attr-row; + @extend %attr-row; + block-size: unset; min-block-size: $sz-36; + :global(.attr-value) { align-items: center; } } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .attributes-content-row { @@ -51,8 +54,10 @@ border-radius: $br-8; border: $b-1 solid var(--menu-border-color-disabled); margin-block-start: var(--sp-xs); + .content { @include use-typography("body-small"); + width: 100%; padding: var(--sp-xs) 0; color: var(--color-foreground-secondary); @@ -61,6 +66,7 @@ &:hover { border: $b-1 solid var(--color-background-tertiary); background-color: var(--menu-background-color); + .content { color: var(--menu-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.scss b/frontend/src/app/main/ui/inspect/attributes/variant.scss index 3d0df70402..050826a5db 100644 --- a/frontend/src/app/main/ui/inspect/attributes/variant.scss +++ b/frontend/src/app/main/ui/inspect/attributes/variant.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,12 +26,14 @@ } .variant-row { - @extend .attr-row; + @extend %attr-row; + block-size: fit-content; min-block-size: $sz-36; } .button-children { - @extend .copy-button-children; - word-break: break-word; + @extend %copy-button-children; + + overflow-wrap: break-word; } diff --git a/frontend/src/app/main/ui/inspect/attributes/visibility.scss b/frontend/src/app/main/ui/inspect/attributes/visibility.scss index c888735ff1..a4b20d8700 100644 --- a/frontend/src/app/main/ui/inspect/attributes/visibility.scss +++ b/frontend/src/app/main/ui/inspect/attributes/visibility.scss @@ -10,6 +10,7 @@ .attributes-block { --box-border-color: var(--color-background-primary); + display: flex; flex-direction: column; border-block-end: $b-2 solid var(--box-border-color); @@ -25,12 +26,13 @@ } .visibility-row { - @extend .attr-row; + @extend %attr-row; + block-size: $sz-36; } .button-children { - @extend .copy-button-children; + @extend %copy-button-children; } .copy-btn-title { diff --git a/frontend/src/app/main/ui/inspect/code.scss b/frontend/src/app/main/ui/inspect/code.scss index 7f88871edc..bf9bd04168 100644 --- a/frontend/src/app/main/ui/inspect/code.scss +++ b/frontend/src/app/main/ui/inspect/code.scss @@ -13,7 +13,6 @@ overflow: hidden; padding-bottom: deprecated.$s-16; overflow-y: auto; - overflow-x: hidden; padding-inline: var(--sp-m); } @@ -22,8 +21,9 @@ } .download-button { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; width: 100%; margin: deprecated.$s-8 0; @@ -31,6 +31,7 @@ .code-block { @include deprecated.codeTypography; + display: flex; flex-direction: column; height: 100%; @@ -63,6 +64,7 @@ .code-lang { @include deprecated.uppercaseTitleTipography; + display: flex; align-items: center; } @@ -76,11 +78,14 @@ .expand-button, .css-copy-btn, .html-copy-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } @@ -88,15 +93,19 @@ .code-lang-options { max-width: deprecated.$s-108; } + .code-lang-select { @include deprecated.uppercaseTitleTipography; + width: deprecated.$s-72; border: deprecated.$s-1 solid transparent; background-color: transparent; color: var(--menu-foreground-color-disabled); } + .code-lang-option { @include deprecated.uppercaseTitleTipography; + width: deprecated.$s-72; height: deprecated.$s-32; padding: deprecated.$s-8; @@ -112,31 +121,40 @@ .toggle-btn { @include deprecated.buttonStyle; + display: flex; align-items: center; padding: 0; color: var(--title-foreground-color); stroke: var(--title-foreground-color); + .collapsabled-icon { @include deprecated.flexCenter; + height: deprecated.$s-24; border-radius: deprecated.$br-8; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + transform: rotate(90deg); stroke: var(--icon-foreground); } + &.rotated svg { transform: rotate(0deg); } } + &:hover { color: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover); + .title { color: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover); } + .collapsabled-icon svg { stroke: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/inspect/exports.scss b/frontend/src/app/main/ui/inspect/exports.scss index 4ca98720a8..c3b5318d0e 100644 --- a/frontend/src/app/main/ui/inspect/exports.scss +++ b/frontend/src/app/main/ui/inspect/exports.scss @@ -23,27 +23,32 @@ } .add-export { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } .element-set-content { @include deprecated.flexColumn; + margin-bottom: deprecated.$s-4; } .multiple-exports { @include deprecated.flexRow; + grid-column: 1 / span 9; } .label { - @extend .mixed-bar; + @extend %mixed-bar; } .actions { @@ -54,12 +59,15 @@ display: grid; grid-template-columns: repeat(9, 1fr); column-gap: deprecated.$s-4; + .action-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; } } } @@ -84,6 +92,7 @@ .size-select { grid-column: span 2; padding: 0; + .dropdown-upwards { bottom: deprecated.$s-36; top: unset; @@ -92,14 +101,16 @@ } .suffix-input { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + grid-column: span 3; } .export-btn { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; width: 100%; } diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss index ca57b53f1c..b0327b4673 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss @@ -58,6 +58,7 @@ .layer-title { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + block-size: $sz-32; padding: var(--sp-s) 0; color: var(--color-foreground-primary); @@ -71,6 +72,7 @@ .layer-subtitle { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + color: var(--assets-item-name-foreground-color-rest); } @@ -97,6 +99,7 @@ .inspect-tab-switcher-label { @include use-typography("body-medium"); + color: var(--color-foreground-primary); flex: 0 1 40%; } diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.scss b/frontend/src/app/main/ui/inspect/styles/panels/text.scss index 0b1bbdd05c..3c68ea52c9 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/text.scss +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.scss @@ -8,7 +8,7 @@ .text-content-wrapper { --border-color: var(--color-background-quaternary); - --border-radius: ${$br-8}; + --border-radius: #{$br-8}; border: $b-1 solid var(--border-color); border-radius: var(--border-radius); @@ -16,5 +16,6 @@ .text-content { --detail-color: var(--color-foreground-secondary); + color: var(--detail-color); } diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss index c1ddecdf4e..23c7fd9b52 100644 --- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss +++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss @@ -46,6 +46,7 @@ .property-detail-copied { --button-border-active: var(--color-accent-tertiary); + border: $b-1 solid var(--button-border-active); } @@ -61,11 +62,13 @@ .property-detail-text { @include use-typography("body-small"); + color: var(--detail-color); } .property-detail-text-token { @include use-typography("code-font"); + --detail-color: var(--color-token-foreground); line-height: 1.4; diff --git a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.scss b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.scss index d5b8497c5c..44d90d99b1 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.scss +++ b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.scss @@ -50,6 +50,7 @@ .color-image-preview-wrapper { --image-background: var(--color-background-secondary); + background: var(--image-background); } @@ -69,11 +70,13 @@ .tooltip-token-title { @include use-typography("body-small"); + color: var(--title-color); } .tooltip-token-value { @include use-typography("body-small"); + color: var(--title-value); } diff --git a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss index 19287bc219..0dace4fcc7 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss +++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss @@ -45,11 +45,13 @@ .tooltip-token-title { @include use-typography("body-small"); + color: var(--title-color); } .tooltip-token-value { @include use-typography("body-small"); + color: var(--title-value); } diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.scss b/frontend/src/app/main/ui/inspect/styles/style_box.scss index a55a6b5fc4..7965049e59 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.scss +++ b/frontend/src/app/main/ui/inspect/styles/style_box.scss @@ -25,7 +25,6 @@ padding-block: var(--sp-s); padding-inline: var(--sp-m); background-color: var(--low-emphasis-background); - border-block-end: 2px solid var(--box-border-color); } @@ -39,7 +38,6 @@ display: grid; place-items: center; color: var(--arrow-color); - appearance: none; background: none; padding: 0; @@ -49,6 +47,7 @@ .panel-title { @include use-typography("headline-small"); + flex: 1; color: var(--title-color); padding-block: var(--title-padding); diff --git a/frontend/src/app/main/ui/modal.scss b/frontend/src/app/main/ui/modal.scss index b78ff64bf4..9068cc6eda 100644 --- a/frontend/src/app/main/ui/modal.scss +++ b/frontend/src/app/main/ui/modal.scss @@ -11,5 +11,5 @@ } .modal-wrapper { - @extend .new-scrollbar; + @extend %new-scrollbar; } diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index bb2cfe2475..363297493c 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss @@ -12,28 +12,31 @@ @use "ds/_utils.scss" as *; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; + z-index: var(--z-index-notifications); } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + max-block-size: initial; min-inline-size: px2rem(1021); padding: px2rem(80); - @media (max-width: 1024px) { + @media (width <= 1024px) { min-inline-size: px2rem(712); padding: var(--sp-xxxl); } } .close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-title { @include t.use-typography("title-large"); + margin-block-end: var(--sp-xxxl); color: var(--modal-title-foreground-color); display: flex; @@ -79,7 +82,7 @@ block-size: auto; } - @media (max-width: 992px) { + @media (width <= 992px) { display: none; } } @@ -87,6 +90,7 @@ .radio-btns { label { @include t.use-typography("body-large"); + padding: 0; display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss index 99941b8fb4..62fb7ee090 100644 --- a/frontend/src/app/main/ui/notifications/badge.scss +++ b/frontend/src/app/main/ui/notifications/badge.scss @@ -8,9 +8,11 @@ .badge-notification { @include deprecated.smallTitleTipography; + --badge-notification-bg-color: var(--alert-background-color-default); --badge-notification-fg-color: var(--alert-text-foreground-color-default); --badge-notification-border-color: var(--alert-border-color-default); + box-sizing: border-box; display: grid; place-items: center; @@ -30,6 +32,7 @@ .small { @include deprecated.bodySmallTypography; + min-height: deprecated.$s-20; border-radius: deprecated.$br-6; } diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss index 1b14e33cea..c455fca32b 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.scss +++ b/frontend/src/app/main/ui/notifications/context_notification.scss @@ -11,6 +11,7 @@ --context-notification-fg-color: var(--alert-text-foreground-color-default); --context-notification-icon-color: var(--alert-icon-foreground-color-default); --context-notification-border-color: var(--alert-border-color-default); + box-sizing: border-box; display: grid; grid-template-columns: deprecated.$s-16 1fr; @@ -60,13 +61,15 @@ } .icon { - @extend .button-icon; + @extend %button-icon; + align-self: self-start; stroke: var(--context-notification-icon-color); } .context-text { @include deprecated.bodySmallTypography; + align-self: center; color: var(--context-notification-fg-color); margin: auto 0; @@ -79,6 +82,7 @@ .link, .contain-html .context-text a { @include deprecated.bodySmallTypography; + align-self: center; display: inline; text-align: left; diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss index 34abf708bd..cb128fda7a 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.scss +++ b/frontend/src/app/main/ui/onboarding/newsletter.scss @@ -7,18 +7,18 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + position: relative; display: grid; grid-template-columns: auto auto; gap: deprecated.$s-32; padding-inline: deprecated.$s-100; - padding-block-start: deprecated.$s-100; - padding-block-end: deprecated.$s-72; + padding-block: deprecated.$s-100 deprecated.$s-72; margin: 0; width: deprecated.$s-960; height: deprecated.$s-632; @@ -29,6 +29,7 @@ .modal-left { width: deprecated.$s-172; margin-block-end: deprecated.$s-64; + img { width: deprecated.$s-172; border-radius: deprecated.$br-8 0 0 deprecated.$br-8; @@ -45,11 +46,13 @@ .modal-title { @include deprecated.bigTitleTipography; + color: var(--modal-title-foreground-color); } .modal-text { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); margin: 0; } @@ -61,16 +64,18 @@ } .input-wrapper { - @extend .input-checkbox; + @extend %input-checkbox; } .modal-link { @include deprecated.bodyLargeTypography; + color: var(--modal-link-foreground-color); margin: 0; } .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + justify-self: flex-end; } diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss index 94444a493b..909f08b75a 100644 --- a/frontend/src/app/main/ui/onboarding/questions.scss +++ b/frontend/src/app/main/ui/onboarding/questions.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -15,8 +15,7 @@ max-height: fit-content; width: fit-content; padding-inline: deprecated.$s-100; - padding-block-start: deprecated.$s-40; - padding-block-end: deprecated.$s-72; + padding-block: deprecated.$s-40 deprecated.$s-72; border-radius: deprecated.$br-8; border: deprecated.$s-2 solid var(--modal-border-color); background-color: var(--modal-background-color); @@ -31,20 +30,22 @@ // STEP CONTAINER .paginator { @include deprecated.smallTitleTipography; + height: deprecated.$s-20; text-align: right; color: var(--modal-text-foreground-color); } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } + .next-button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; } .prev-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .radio-btns label, @@ -62,6 +63,7 @@ .modal-title { @include deprecated.bigTitleTipography; + color: var(--modal-title-foreground-color); min-height: deprecated.$s-32; margin-block: auto; @@ -69,6 +71,7 @@ .modal-subtitle { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); margin: 0; padding: 0; @@ -76,6 +79,7 @@ .modal-text { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); margin: 0; } @@ -88,6 +92,7 @@ max-width: deprecated.$s-540; width: deprecated.$s-540; } + .step-2 { grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32; } @@ -121,8 +126,7 @@ display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: deprecated.$s-92 deprecated.$s-92 deprecated.$s-92; - row-gap: deprecated.$s-16; - column-gap: deprecated.$s-24; + gap: deprecated.$s-16 deprecated.$s-24; justify-content: center; } diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss index 067a1f1346..ade731846f 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.scss +++ b/frontend/src/app/main/ui/onboarding/team_choice.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -16,8 +16,7 @@ max-height: deprecated.$s-800; height: 100%; padding-inline: deprecated.$s-100; - padding-block-start: deprecated.$s-40; - padding-block-end: deprecated.$s-40; + padding-block: deprecated.$s-40 deprecated.$s-40; border-radius: deprecated.$br-8; background-color: var(--modal-background-color); border: deprecated.$s-2 solid var(--modal-border-color); @@ -36,6 +35,7 @@ .paginator { @include deprecated.bodySmallTypography; + position: absolute; top: deprecated.$s-40; right: deprecated.$s-100; @@ -55,11 +55,13 @@ .modal-title { @include deprecated.bigTitleTipography; + color: var(--modal-title-foreground-color); } .modal-subtitle { @include deprecated.medTitleTipography; + color: var(--modal-title-foreground-color); } @@ -69,50 +71,58 @@ .modal-text { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); margin: 0; } .modal-desc { @include deprecated.smallTitleTipography; + margin: 0; color: var(--modal-title-foreground-color); } .team-features { @include deprecated.flexColumn; + gap: deprecated.$s-16; margin: 0; } .feature { @include deprecated.flexRow; + gap: deprecated.$s-16; } .icon { @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-32; border-radius: deprecated.$br-circle; border: deprecated.$s-1 solid var(--color-accent-primary); + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-accent-primary); } } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; + justify-content: flex-end; } .accept-button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; } .back-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } // SEPARATOR @@ -120,7 +130,7 @@ width: deprecated.$s-8; height: 100%; border-radius: deprecated.$br-8; - opacity: 42%; + opacity: 0.42; background-color: var(--modal-separator-background-color); } @@ -141,6 +151,7 @@ .first-block, .second-block { @include deprecated.flexColumn; + gap: deprecated.$s-16; } @@ -151,10 +162,12 @@ } .team-name-input { - @extend .input-element-label; + @extend %input-element-label; + label { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + align-items: flex-start; width: 100%; border: none; @@ -163,6 +176,7 @@ input { @include deprecated.bodySmallTypography; + margin-top: deprecated.$s-8; } } @@ -188,6 +202,7 @@ .role-title { @include deprecated.uppercaseTitleTipography; + margin-block-end: deprecated.$s-8; color: var(--modal-title-foreground-color); } @@ -199,6 +214,7 @@ .modal-hint { @include deprecated.bodySmallTypography; + color: var(--modal-text-foreground-color); text-align: right; } diff --git a/frontend/src/app/main/ui/releases.scss b/frontend/src/app/main/ui/releases.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/app/main/ui/releases/common.scss b/frontend/src/app/main/ui/releases/common.scss index 977411aec5..e3ab396ec1 100644 --- a/frontend/src/app/main/ui/releases/common.scss +++ b/frontend/src/app/main/ui/releases/common.scss @@ -15,8 +15,7 @@ width: fit-content; margin: 0; padding: 0; - align-self: center; - justify-self: flex-start; + place-self: center flex-start; } .dot { diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss index 0d5bc38d2e..77d6a4ced1 100644 --- a/frontend/src/app/main/ui/releases/v2_0.scss +++ b/frontend/src/app/main/ui/releases/v2_0.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -40,6 +40,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -49,6 +50,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -67,17 +69,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -91,7 +96,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss index 7b2559bc96..ccf5348282 100644 --- a/frontend/src/app/main/ui/releases/v2_1.scss +++ b/frontend/src/app/main/ui/releases/v2_1.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -40,6 +40,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -49,6 +50,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -61,6 +63,7 @@ .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } @@ -72,7 +75,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_10.scss +++ b/frontend/src/app/main/ui/releases/v2_10.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_11.scss b/frontend/src/app/main/ui/releases/v2_11.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_11.scss +++ b/frontend/src/app/main/ui/releases/v2_11.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_12.scss b/frontend/src/app/main/ui/releases/v2_12.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_12.scss +++ b/frontend/src/app/main/ui/releases/v2_12.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_13.scss b/frontend/src/app/main/ui/releases/v2_13.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_13.scss +++ b/frontend/src/app/main/ui/releases/v2_13.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_14.scss b/frontend/src/app/main/ui/releases/v2_14.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_14.scss +++ b/frontend/src/app/main/ui/releases/v2_14.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss index 34d030466f..ede5b103bf 100644 --- a/frontend/src/app/main/ui/releases/v2_2.scss +++ b/frontend/src/app/main/ui/releases/v2_2.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -40,6 +40,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -49,6 +50,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -61,6 +63,7 @@ .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } @@ -72,7 +75,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_3.scss +++ b/frontend/src/app/main/ui/releases/v2_3.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_4.scss +++ b/frontend/src/app/main/ui/releases/v2_4.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_5.scss +++ b/frontend/src/app/main/ui/releases/v2_5.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_6.scss +++ b/frontend/src/app/main/ui/releases/v2_6.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_7.scss +++ b/frontend/src/app/main/ui/releases/v2_7.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_8.scss +++ b/frontend/src/app/main/ui/releases/v2_8.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss index e5d13841eb..68603d9658 100644 --- a/frontend/src/app/main/ui/releases/v2_9.scss +++ b/frontend/src/app/main/ui/releases/v2_9.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { @@ -44,6 +44,7 @@ .version-tag { @include deprecated.flexCenter; @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; width: deprecated.$s-96; background-color: var(--communication-tag-background-color); @@ -53,6 +54,7 @@ .modal-title { @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); } @@ -71,17 +73,20 @@ .feature-title { @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); } .feature-content { @include deprecated.bodyMediumTypography; + margin: 0; color: var(--modal-text-foreground-color); } .feature-list { @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); list-style: disc; display: grid; @@ -95,7 +100,8 @@ } .next-btn { - @extend .button-primary; + @extend %button-primary; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index 2963138812..4ee10be87e 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/frontend/src/app/main/ui/settings.scss @@ -33,6 +33,7 @@ &.dashboard-projects { user-select: none; } + &.dashboard-shared { width: calc(100vw - deprecated.$s-320); margin-right: deprecated.$s-52; @@ -48,13 +49,13 @@ width: 100%; justify-content: center; align-items: center; + a { color: var(--color-foreground-secondary); } } .form-container { - width: deprecated.$s-800; margin: deprecated.$s-48 auto deprecated.$s-32 deprecated.$s-120; display: flex; max-width: deprecated.$s-368; @@ -76,6 +77,7 @@ .custom-input, .custom-select { flex-direction: column-reverse; + label { position: relative; text-transform: uppercase; @@ -84,6 +86,7 @@ margin-bottom: deprecated.$s-12; margin-left: calc(-1 * deprecated.$s-4); } + input, select { background-color: var(--color-background-tertiary); @@ -91,20 +94,25 @@ border-color: transparent; color: var(--color-foreground-primary); padding: 0 deprecated.$s-16; + &:focus { outline: deprecated.$s-1 solid var(--color-accent-primary); } + ::placeholder { color: var(--color-foreground-secondary); } } + .help-icon { bottom: deprecated.$s-12; top: auto; + svg { fill: var(--color-foreground-secondary); } } + &.disabled { input { background-color: var(--input-background-color-disabled); @@ -112,30 +120,36 @@ color: var(--color-foreground-secondary); } } + .input-container { background-color: var(--color-background-tertiary); border-radius: deprecated.$s-8; border-color: transparent; margin-top: deprecated.$s-24; + .main-content { label { position: absolute; top: calc(-1 * deprecated.$s-24); } + span { color: var(--color-foreground-primary); } } + &:focus { border: deprecated.$s-1 solid var(--color-accent-primary); } } + textarea { border-radius: deprecated.$s-8; padding: deprecated.$s-12 deprecated.$s-16; background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); border: none; + &:focus { outline: deprecated.$s-1 solid var(--color-accent-primary); } @@ -145,6 +159,7 @@ .field-title { color: var(--color-foreground-primary); } + .field-title:not(:first-child) { margin-top: deprecated.$s-64; } @@ -152,6 +167,7 @@ .field-text { color: var(--color-foreground-secondary); } + button, .btn-secondary { width: 100%; @@ -159,15 +175,18 @@ text-transform: uppercase; background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); + &:hover { color: var(--color-accent-primary); background-color: var(--color-background-quaternary); } } + hr { display: none; } } + .links { margin-top: deprecated.$s-12; } @@ -186,13 +205,13 @@ margin-bottom: deprecated.$s-32; .newsletter-title { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; color: var(--color-foreground-secondary); font-size: deprecated.$fs-14; } label { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; color: var(--color-background-primary); font-size: deprecated.$fs-12; margin-right: calc(-1 * deprecated.$s-16); @@ -200,7 +219,7 @@ } .info { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; color: var(--color-foreground-secondary); font-size: deprecated.$fs-12; margin-bottom: deprecated.$s-8; diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss index 71900cf9e4..dd4489d99b 100644 --- a/frontend/src/app/main/ui/settings/change_email.scss +++ b/frontend/src/app/main/ui/settings/change_email.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + min-width: deprecated.$s-408; } @@ -21,16 +22,18 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; margin-bottom: deprecated.$s-24; } @@ -41,16 +44,18 @@ .select-title { @include deprecated.bodySmallTypography; + color: var(--modal-title-foreground-color); } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; + button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; } } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss index c69d17de53..3f07f30774 100644 --- a/frontend/src/app/main/ui/settings/delete_account.scss +++ b/frontend/src/app/main/ui/settings/delete_account.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + min-width: deprecated.$s-408; } @@ -21,16 +22,18 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; margin-bottom: deprecated.$s-24; } @@ -41,20 +44,22 @@ .select-title { @include deprecated.bodySmallTypography; + color: var(--modal-title-foreground-color); } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .accept-button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } diff --git a/frontend/src/app/main/ui/settings/feedback.scss b/frontend/src/app/main/ui/settings/feedback.scss index ee91182b80..99e449267d 100644 --- a/frontend/src/app/main/ui/settings/feedback.scss +++ b/frontend/src/app/main/ui/settings/feedback.scss @@ -19,6 +19,7 @@ .feedback-description { @include t.use-typography("body-medium"); + border-radius: b.$br-8; padding: var(--sp-m); background-color: var(--color-background-tertiary); @@ -28,6 +29,7 @@ ::placeholder { color: var(--input-placeholder-color); } + &:focus { outline: b.$b-1 solid var(--color-accent-primary); } @@ -35,13 +37,15 @@ .field-label { @include t.use-typography("headline-small"); + block-size: $sz-32; color: var(--color-foreground-primary); margin-block-end: var(--sp-l); } .feedback-button-link { - @extend .button-primary; + @extend %button-primary; + margin-block-end: px2rem(72); } @@ -59,12 +63,14 @@ .link { @include t.use-typography("headline-small"); + color: var(--color-accent-tertiary); margin-block-end: var(--sp-s); } .download-button { @include t.use-typography("body-small"); + color: var(--color-foreground-primary); text-transform: lowercase; border: b.$b-1 solid var(--color-background-quaternary); diff --git a/frontend/src/app/main/ui/settings/integrations.scss b/frontend/src/app/main/ui/settings/integrations.scss index d7be475bb4..e1833c1c6e 100644 --- a/frontend/src/app/main/ui/settings/integrations.scss +++ b/frontend/src/app/main/ui/settings/integrations.scss @@ -5,7 +5,6 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; - @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/mixins.scss" as *; @@ -44,11 +43,12 @@ } .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + inline-size: $sz-400; max-block-size: fit-content; position: relative; @@ -187,7 +187,8 @@ } .item-title { - @include textEllipsis; + @include text-ellipsis; + align-content: center; block-size: $sz-64; padding: 0 var(--sp-l); @@ -222,6 +223,7 @@ .textarea { @include t.use-typography("body-small"); + border-radius: $br-8; background-color: var(--color-background-tertiary); color: var(--color-foreground-secondary); diff --git a/frontend/src/app/main/ui/settings/notifications.scss b/frontend/src/app/main/ui/settings/notifications.scss index 27a2273536..4aaf1ac096 100644 --- a/frontend/src/app/main/ui/settings/notifications.scss +++ b/frontend/src/app/main/ui/settings/notifications.scss @@ -9,7 +9,9 @@ .update-btn { margin-top: deprecated.$s-16; - @extend .button-primary; + + @extend %button-primary; + height: deprecated.$s-36; } diff --git a/frontend/src/app/main/ui/settings/password.scss b/frontend/src/app/main/ui/settings/password.scss index 5a0551333e..504a6da2e5 100644 --- a/frontend/src/app/main/ui/settings/password.scss +++ b/frontend/src/app/main/ui/settings/password.scss @@ -9,6 +9,8 @@ .update-btn { margin-top: deprecated.$s-16; - @extend .button-primary; + + @extend %button-primary; + height: deprecated.$s-36; } diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index 4e8473b6e8..21249db182 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -11,17 +11,16 @@ width: 100%; justify-content: center; align-items: center; - a:not(.button-primary):not(.link) { + + a:not(.button-primary, .link) { color: var(--color-foreground-secondary); } } .form-container { display: flex; - justify-content: center; flex-direction: column; max-width: $s-500; - margin-bottom: $s-32; width: $s-580; margin: $s-80 auto $s-120 auto; justify-content: center; @@ -36,11 +35,13 @@ text-transform: uppercase; background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); + &:hover { color: var(--color-accent-primary); background-color: var(--color-background-quaternary); } } + hr { display: none; } @@ -48,6 +49,7 @@ .fields-row { --input-height: #{$s-40}; + margin-bottom: $s-20; flex-direction: column; @@ -78,6 +80,7 @@ .custom-input, .custom-select { flex-direction: column-reverse; + label { position: relative; text-transform: uppercase; @@ -86,6 +89,7 @@ margin-bottom: $s-12; margin-left: calc(-1 * $s-4); } + input, select { background-color: var(--color-background-tertiary); @@ -93,20 +97,25 @@ border-color: transparent; color: var(--color-foreground-primary); padding: 0 $s-16; + &:focus { outline: $s-1 solid var(--color-accent-primary); } + ::placeholder { color: var(--color-foreground-secondary); } } + .help-icon { bottom: $s-12; top: auto; + svg { fill: var(--color-foreground-secondary); } } + &.disabled { input { background-color: var(--input-background-color-disabled); @@ -114,30 +123,36 @@ color: var(--color-foreground-secondary); } } + .input-container { background-color: var(--color-background-tertiary); border-radius: $br-8; border-color: transparent; margin-top: $s-24; + .main-content { label { position: absolute; top: calc(-1 * $s-24); } + span { color: var(--color-foreground-primary); } } + &:focus { border: $s-1 solid var(--color-accent-primary); } } + textarea { border-radius: $br-8; padding: $s-12 $s-16; background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); border: none; + &:focus { outline: $s-1 solid var(--color-accent-primary); } @@ -296,13 +311,13 @@ form.avatar-form { margin-bottom: $s-32; .newsletter-title { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; color: var(--color-foreground-secondary); font-size: $fs-14; } label { - font-family: "worksans", "vazirmatn", sans-serif; + font-family: worksans, vazirmatn, sans-serif; color: var(--color-background-primary); font-size: $fs-12; margin-right: calc(-1 * $s-16); @@ -321,11 +336,13 @@ form.avatar-form { } .btn-secondary { - @extend .button-secondary; + @extend %button-secondary; + height: $s-32; } .btn-primary { - @extend .button-primary; + @extend %button-primary; + height: $s-32; } diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss index a072c59b8f..501a9dd137 100644 --- a/frontend/src/app/main/ui/settings/sidebar.scss +++ b/frontend/src/app/main/ui/settings/sidebar.scss @@ -42,6 +42,7 @@ .settings-item { --settings-foreground-color: var(--menu-foreground-color-rest); --settings-background-color: transparent; + display: flex; align-items: center; padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-24; @@ -61,7 +62,8 @@ } .feedback-icon { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--settings-foreground-color); margin-right: deprecated.$s-8; } @@ -73,6 +75,7 @@ .back-to-dashboard { @include deprecated.buttonStyle; + display: flex; align-items: center; padding: deprecated.$s-12 deprecated.$s-16; @@ -84,7 +87,8 @@ } .arrow-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); transform: rotate(180deg); margin-right: deprecated.$s-12; diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss index 7355b3e109..ca37947dd6 100644 --- a/frontend/src/app/main/ui/settings/subscription.scss +++ b/frontend/src/app/main/ui/settings/subscription.scss @@ -20,12 +20,11 @@ .dashboard-content { display: flex; - justify-content: center; flex-direction: column; max-inline-size: $sz-500; margin-block-end: var(--sp-xxxl); inline-size: px2rem(580); - margin: px2rem(92) auto px2rem(120) auto; + margin: px2rem(92) auto px2rem(120); justify-content: center; } @@ -45,13 +44,14 @@ .membership-date { @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); margin-inline-start: var(--sp-s); } .subscription-member, .penpot-member { - @extend .button-icon; + @extend %button-icon; } .penpot-member { @@ -64,12 +64,14 @@ .title-section { @include t.use-typography("title-large"); + color: var(--color-foreground-primary); margin-block-end: var(--sp-xxl); } .plan-section-title { @include t.use-typography("headline-small"); + color: var(--color-foreground-primary); } @@ -98,7 +100,8 @@ } .plan-title-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-primary); block-size: var(--sp-xl); inline-size: var(--sp-xl); @@ -116,11 +119,13 @@ .plan-card-title, .plan-price-value { @include t.use-typography("title-medium"); + color: var(--color-foreground-primary); } .plan-editors { @include t.use-typography("body-medium"); + align-self: end; color: var(--color-foreground-primary); margin-block-end: 2px; @@ -128,6 +133,7 @@ .plan-price-period { @include t.use-typography("body-small"); + color: var(--color-foreground-primary); } @@ -138,6 +144,7 @@ .benefits-title, .benefit { @include t.use-typography("body-medium"); + color: var(--color-foreground-secondary); } @@ -148,6 +155,7 @@ .cta-button { @include t.use-typography("body-medium"); @include deprecated.buttonStyle; + align-items: center; color: var(--color-accent-primary); display: flex; @@ -156,7 +164,8 @@ } .cta-button svg { - @extend .button-icon; + @extend %button-icon; + block-size: var(--sp-l); inline-size: var(--sp-l); stroke: var(--color-accent-primary); @@ -176,11 +185,12 @@ } .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + max-block-size: initial; min-inline-size: px2rem(548); } @@ -190,11 +200,12 @@ } .close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-title { @include t.use-typography("title-large"); + margin-block-end: var(--sp-xxxl); color: var(--modal-title-foreground-color); display: flex; @@ -240,7 +251,7 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .success-action-buttons { @@ -248,13 +259,15 @@ } .primary-button { - @extend .modal-accept-btn; + @extend %modal-accept-btn; + min-block-size: $sz-32; block-size: auto; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; + min-block-size: $sz-32; white-space: break-spaces; block-size: auto; @@ -270,13 +283,14 @@ block-size: auto; } - @media (max-width: 992px) { + @media (width <= 992px) { display: none; } } .editors-text { @include t.use-typography("body-medium"); + margin: 0; } @@ -287,6 +301,7 @@ .editors-list { @include t.use-typography("body-medium"); + list-style-position: inside; list-style-type: none; margin-inline-start: var(--sp-xl); @@ -296,11 +311,13 @@ .input-field { --input-icon-padding: var(--sp-s); + inline-size: px2rem(80); } .error-message { @include t.use-typography("body-small"); + color: var(--color-foreground-error); margin-block-start: var(--sp-s); } @@ -319,6 +336,7 @@ .unlimited-capped-warning { @include t.use-typography("body-small"); + background-color: var(--color-background-tertiary); border-radius: var(--sp-s); margin-block-start: $sz-40; @@ -333,6 +351,7 @@ .radio-btns { label { @include t.use-typography("body-large"); + padding: 0; display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss index cf8cb1ec9a..5f4c768792 100644 --- a/frontend/src/app/main/ui/static.scss +++ b/frontend/src/app/main/ui/static.scss @@ -106,7 +106,8 @@ } .login-header { - @extend .button-primary; + @extend %button-primary; + padding: deprecated.$s-8 deprecated.$s-16; font-size: deprecated.$fs-11; position: fixed; @@ -135,22 +136,26 @@ .main-message { @include t.use-typography("title-large"); + color: var(--color-foreground-primary); } .desc-message { @include t.use-typography("title-large"); + color: var(--color-foreground-secondary); } .desc-text { @include t.use-typography("title-large"); + color: var(--color-foreground-secondary); margin-block-end: 0; } .download-link { @include t.use-typography("code-font"); + color: var(--color-foreground-primary); text-transform: lowercase; } @@ -159,7 +164,8 @@ text-align: center; button { - @extend .button-primary; + @extend %button-primary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-16; font-size: deprecated.$fs-11; @@ -197,11 +203,13 @@ .project-name { @include deprecated.uppercaseTitleTipography; + color: var(--title-foreground-color); } .file-name { @include deprecated.smallTitleTipography; + text-transform: none; color: var(--title-foreground-color-hover); } @@ -230,7 +238,7 @@ top: 0; left: 0; z-index: 100; - background-color: rgba(0, 0, 0, 0.65); + background-color: rgb(0 0 0 / 65%); display: flex; justify-content: center; align-items: center; @@ -274,14 +282,16 @@ margin-top: deprecated.$s-32; button { - @extend .button-primary; + @extend %button-primary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-16; font-size: deprecated.$fs-11; } .cancel-button { - @extend .button-secondary; + @extend %button-secondary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-16; font-size: deprecated.$fs-11; diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 6b46b2d5f4..d4fab6c26f 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -25,6 +25,7 @@ .empty-state { @include deprecated.bodySmallTypography; + color: var(--empty-message-foreground-color); display: grid; place-items: center; @@ -47,6 +48,7 @@ .thumbnails-close { @include deprecated.buttonStyle; + grid-row: 1 / span 2; grid-column: 1 / span 1; z-index: deprecated.$z-index-10; @@ -58,14 +60,14 @@ } .viewer-section { - @extend .new-scrollbar; + @extend %new-scrollbar; + grid-row: 1 / span 2; grid-column: 1 / span 1; display: flex; align-items: center; - flex-wrap: nowrap; + flex-wrap: wrap; height: calc(100vh - deprecated.$s-48); - flex-flow: wrap; overflow: auto; } @@ -78,8 +80,9 @@ .viewer-go-prev, .viewer-go-next { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.flexCenter; + position: absolute; right: deprecated.$s-8; height: deprecated.$s-64; @@ -88,8 +91,10 @@ z-index: deprecated.$z-index-2; background-color: var(--viewer-controls-background-color); transition: transform 400ms ease 300ms; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } @@ -101,6 +106,7 @@ .viewer-go-prev { left: deprecated.$s-8; right: unset; + svg { transform: rotate(180deg); } @@ -121,15 +127,18 @@ } .reset-button { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-28; margin-left: deprecated.$s-8; background-color: var(--viewer-controls-background-color); pointer-events: all; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } @@ -137,6 +146,7 @@ .counter { @include deprecated.flexCenter; @include deprecated.bodySmallTypography; + border-radius: deprecated.$br-8; width: deprecated.$s-64; height: deprecated.$s-32; @@ -153,8 +163,7 @@ display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; - justify-items: center; - align-items: center; + place-items: center center; overflow: hidden; } @@ -164,7 +173,7 @@ left: 0; &.visible { - background-color: rgb(0, 0, 0, 0.2); + background-color: rgb(0 0 0 / 20%); } } diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss index fa9ef1daf8..f417ea86b9 100644 --- a/frontend/src/app/main/ui/viewer/comments.scss +++ b/frontend/src/app/main/ui/viewer/comments.scss @@ -9,6 +9,7 @@ // COMMENT DROPDOWN ON HEADER .view-options { @include deprecated.bodySmallTypography; + display: flex; align-items: center; position: relative; @@ -21,7 +22,8 @@ } .dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + right: deprecated.$s-2; top: calc(deprecated.$s-2 + deprecated.$s-48); width: deprecated.$s-272; @@ -30,6 +32,7 @@ .dropdown-title { @include deprecated.bodySmallTypography; + flex-grow: 1; color: var(--input-foreground-color-active); } @@ -42,10 +45,13 @@ .icon, .icon-dropdown { @include deprecated.flexCenter; + height: 100%; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } @@ -55,16 +61,21 @@ } .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + .icon { @include deprecated.flexCenter; + height: 100%; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &:hover .label { color: var(--input-foreground-color-active); } @@ -74,6 +85,7 @@ .label { color: var(--input-foreground-color-active); } + .icon svg { stroke: var(--input-foreground-color); } @@ -86,8 +98,8 @@ // FLOATING COMMENT .viewer-comments-container { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; width: 100%; height: 100%; z-index: deprecated.$z-index-1; @@ -95,11 +107,11 @@ .threads { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; } -//COMMENT SIDEBAR +// COMMENT SIDEBAR .comments-sidebar { position: absolute; right: 0; diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index f9814d3a44..091df03fde 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -46,12 +46,14 @@ .sitemap-zone { @include deprecated.flexColumn; + position: relative; width: 100%; } .project-name { @include deprecated.uppercaseTitleTipography; + color: var(--title-foreground-color); } @@ -62,22 +64,27 @@ .breadcrumb { @include deprecated.bodySmallTypography; @include deprecated.flexRow; + color: var(--title-foreground-color); cursor: pointer; } .breadcrumb-text { @include deprecated.textEllipsis; + max-width: 12vw; // This is a fallback max-width: 12cqw; // This is a unit refered to container } .icon { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + transform: rotate(90deg); stroke: var(--icon-foreground); } @@ -88,7 +95,8 @@ } .dropdown-sitemap { - @extend .menu-dropdown; + @extend %menu-dropdown; + left: 0; top: calc(deprecated.$s-2 + deprecated.$s-48); width: deprecated.$s-272; @@ -96,16 +104,21 @@ } .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + .icon-check { @include deprecated.flexCenter; + height: 100%; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &:hover .label { color: var(--input-foreground-color-active); } @@ -114,9 +127,11 @@ .current-frame { @include deprecated.bodySmallTypography; @include deprecated.flexRow; + flex-grow: 1; color: var(--title-foreground-color-hover); cursor: pointer; + .icon svg { stroke: var(--title-foreground-color-hover); } @@ -124,6 +139,7 @@ .frame-name { @include deprecated.textEllipsis; + max-width: 17vw; // This is a fallback max-width: 17cqw; // This is a unit refered to container } @@ -131,27 +147,31 @@ // SECTION BUTTONS .mode-zone { @include deprecated.flexRow; + height: 100%; } .mode-zone-btn { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-28; padding: 0; + svg { - @extend .button-icon; + @extend %button-icon; } } .selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } // OPTION AREA .options-zone { @include deprecated.flexRow; + position: relative; justify-content: flex-end; gap: deprecated.$s-8; @@ -166,37 +186,45 @@ } .fullscreen-btn { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } .share-btn { - @extend .button-primary; + @extend %button-primary; + height: deprecated.$s-32; min-width: deprecated.$s-72; margin-left: deprecated.$s-4; } .edit-btn { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } .go-log-btn { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.bodySmallTypography; + height: deprecated.$s-32; padding: 0 deprecated.$s-8; border-radius: deprecated.$br-8; @@ -207,11 +235,14 @@ .zoom-widget { @include deprecated.buttonStyle; @include deprecated.flexCenter; + height: deprecated.$s-28; min-width: deprecated.$s-64; border-radius: deprecated.$br-8; + .label { @include deprecated.bodySmallTypography; + color: var(--button-tertiary-foreground-color-rest); } @@ -220,6 +251,7 @@ color: var(--button-tertiary-foreground-color-focus); } } + &.selected { .label { color: var(--button-tertiary-foreground-color-focus); @@ -228,7 +260,8 @@ } .dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + right: deprecated.$s-2; top: calc(deprecated.$s-2 + deprecated.$s-48); width: deprecated.$s-272; @@ -246,19 +279,25 @@ } .zoom-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-28; width: deprecated.$s-28; border-radius: deprecated.$br-8; + .zoom-icon { @include deprecated.flexCenter; + width: deprecated.$s-24; height: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } + &:hover { .zoom-icon svg { stroke: var(--button-tertiary-foreground-color-hover); @@ -268,6 +307,7 @@ .zoom-text { @include deprecated.flexCenter; + height: 100%; min-width: deprecated.$s-64; padding: 0; @@ -276,22 +316,27 @@ } .reset-btn { - @extend .button-tertiary; + @extend %button-tertiary; + color: var(--button-tertiary-foreground-color-hover); height: deprecated.$s-28; border-radius: deprecated.$br-8; } .zoom-option { - @extend .menu-item-base; + @extend %menu-item-base; + .shortcuts { - @extend .shortcut-base; + @extend %shortcut-base; + .shortcut-key { - @extend .shortcut-key-base; + @extend %shortcut-key-base; } } + &:hover { color: var(--menu-foreground-color-hover); + .shortcuts { .shortcut-key { color: var(--menu-foreground-color-hover); diff --git a/frontend/src/app/main/ui/viewer/inspect.scss b/frontend/src/app/main/ui/viewer/inspect.scss index 0ed6152256..616c127985 100644 --- a/frontend/src/app/main/ui/viewer/inspect.scss +++ b/frontend/src/app/main/ui/viewer/inspect.scss @@ -8,6 +8,7 @@ .inspect-svg-wrapper { @include deprecated.flexCenter; + position: relative; flex-direction: column; flex: 1; @@ -30,7 +31,6 @@ position: relative; align-self: flex-start; width: var(--right-sidebar-width); - background-color: var(--panel-background-color); border-top: deprecated.$s-1 solid var(--search-bar-input-border-color); } diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss index 8e7d03cab1..c7245a5910 100644 --- a/frontend/src/app/main/ui/viewer/interactions.scss +++ b/frontend/src/app/main/ui/viewer/interactions.scss @@ -8,6 +8,7 @@ .view-options { @include deprecated.bodySmallTypography; + display: flex; align-items: center; position: relative; @@ -18,8 +19,10 @@ padding: deprecated.$s-8; cursor: pointer; } + .dropdown-title { @include deprecated.bodySmallTypography; + flex-grow: 1; color: var(--input-foreground-color-active); } @@ -30,7 +33,8 @@ } .dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + right: deprecated.$s-2; top: calc(deprecated.$s-2 + deprecated.$s-48); width: deprecated.$s-272; @@ -40,17 +44,23 @@ } .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + min-height: deprecated.$s-32; + .icon { @include deprecated.flexCenter; + height: 100%; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &:hover .label { color: var(--input-foreground-color-active); } @@ -60,6 +70,7 @@ .label { color: var(--input-foreground-color-active); } + .icon svg { stroke: var(--input-foreground-color); } @@ -68,10 +79,13 @@ .icon, .icon-dropdown { @include deprecated.flexCenter; + height: 100%; width: deprecated.$s-16; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss index f107742588..7fd5afb70a 100644 --- a/frontend/src/app/main/ui/viewer/login.scss +++ b/frontend/src/app/main/ui/viewer/login.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + width: deprecated.$s-368; } @@ -21,16 +22,18 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.flexColumn; @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; max-height: deprecated.$s-400; overflow: hidden auto; @@ -66,7 +69,8 @@ } a { - @extend .button-secondary; + @extend %button-secondary; + height: deprecated.$s-40; text-transform: uppercase; font-size: deprecated.$fs-11; diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index 2c8bcc60b1..1eea68ad9e 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -16,7 +16,8 @@ } .share-link-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + min-height: unset; } @@ -26,21 +27,24 @@ .share-link-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-button { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodySmallTypography; @include deprecated.flexColumn; + gap: deprecated.$s-24; } .share-link-section { @include deprecated.flexColumn; + gap: deprecated.$s-8; } @@ -55,6 +59,7 @@ .custon-input-wrapper { @include deprecated.flexRow; + border-radius: deprecated.$br-8; height: deprecated.$s-32; width: 100%; @@ -62,12 +67,14 @@ } .input-text { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + color: var(--input-foreground-color-active); padding-left: deprecated.$s-8; margin: 0; flex-grow: 1; + &:focus { outline: none; border: deprecated.$s-1 solid var(--input-border-color-active); @@ -75,48 +82,55 @@ } .copy-button { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.flexRow; + gap: deprecated.$s-8; height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground-hover); } } .description { @include deprecated.bodySmallTypography; + color: var(--modal-text-foreground-color); margin-bottom: deprecated.$s-24; } .actions { @include deprecated.flexRow; + justify-content: flex-end; } .button-active { - @extend .modal-accept-btn; + @extend %modal-accept-btn; } .button-cancel { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .button-danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } .permissions-section { @include deprecated.flexColumn; + gap: deprecated.$s-8; } .manage-permissions { @include deprecated.buttonStyle; @include deprecated.uppercaseTitleTipography; + color: var(--menu-foreground-color-rest); height: deprecated.$s-32; display: flex; @@ -126,11 +140,15 @@ .icon { @include deprecated.flexCenter; + margin-right: deprecated.$s-6; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } + &.rotated { transform: rotate(90deg); } @@ -162,39 +180,51 @@ flex-grow: 1; color: var(--input-foreground-color-active); } + .select-all-row { @include deprecated.flexRow; + justify-content: space-between; height: deprecated.$s-32; border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled); } + .select-all-label { color: var(--input-foreground-color-active); } + .pages-selection { margin: 0; + li { border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled); } + li:last-child { border-bottom: none; } } + .count-pages, .current-tag { @include deprecated.bodySmallTypography; + color: var(--input-foreground-color); } .checkbox-wrapper { - @extend .input-checkbox; + @extend %input-checkbox; + height: deprecated.$s-32; padding: 0; + span.checked { background-color: var(--input-checkbox-background-color-active); border: deprecated.$s-1 solid var(--input-checkbox-background-color-active); + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--input-checkbox-foreground-color-active); } } diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss index c0735ddce1..15d12a6794 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.scss +++ b/frontend/src/app/main/ui/viewer/thumbnails.scss @@ -34,21 +34,25 @@ .counter { @include deprecated.bodySmallTypography; + color: var(--viewer-thumbnails-control-foreground-color); } .actions { @include deprecated.flexRow; + width: deprecated.$s-60; } .expand-btn, .close-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; } } @@ -72,8 +76,9 @@ .right-scroll-handler, .left-scroll-handler { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.flexCenter; + grid-column: 3 / span 1; grid-row: 1 / span 1; width: deprecated.$s-32; @@ -81,11 +86,14 @@ margin: auto 0; z-index: deprecated.$z-index-10; opacity: 0; + &:hover { opacity: 1; } + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } @@ -93,6 +101,7 @@ .left-scroll-handler { grid-column: 1 / span 1; grid-row: 1 / span 1; + svg { transform: rotate(180deg); } @@ -113,6 +122,7 @@ .thumbnail-item { @include deprecated.buttonStyle; + display: flex; flex-direction: column; padding: deprecated.$s-16; @@ -120,6 +130,7 @@ .thumbnail-preview { @include deprecated.flexCenter; + width: deprecated.$s-132; min-height: deprecated.$s-132; height: deprecated.$s-132; @@ -144,6 +155,7 @@ .thumbnail-info { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + text-align: center; color: var(--viewer-thumbnails-control-foreground-color); padding: deprecated.$s-8 0; diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index 5cd617bab4..558c7a4170 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -7,24 +7,20 @@ @use "refactor/common-refactor.scss" as deprecated; .workspace { - @extend .new-scrollbar; + @extend %new-scrollbar; + width: 100vw; height: 100vh; max-height: 100vh; user-select: none; display: grid; - grid-template-areas: "left-sidebar viewport right-sidebar"; - grid-template-rows: 1fr; - grid-template-columns: auto 1fr auto; + grid-template: "left-sidebar viewport right-sidebar" 1fr / auto 1fr auto; overflow: hidden; } .workspace-loader { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; z-index: var(--z-index-loaders); background-color: var(--color-background-primary); } diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index 7a4cb7c09b..2e23c45844 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -15,15 +15,19 @@ .right-arrow { @include deprecated.buttonStyle; @include deprecated.flexCenter; + position: relative; height: 100%; width: deprecated.$s-24; padding: 0; z-index: deprecated.$z-index-5; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } + &::after { content: ""; position: absolute; @@ -39,20 +43,24 @@ ); pointer-events: none; } + &:hover { svg { stroke: var(--button-foreground-hover); } } + &:disabled { svg { stroke: var(--button-foreground-color-disabled); } + &::after { background-image: none; } } } + .left-arrow { &::after { left: deprecated.$s-24; @@ -99,11 +107,13 @@ &.no-text { @include deprecated.flexCenter; + width: deprecated.$s-32; } } .color-palette-empty { @include deprecated.bodySmallTypography; + color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index a3703f8588..79e7cf868e 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -27,37 +27,50 @@ padding: deprecated.$s-8; border-radius: deprecated.$br-8; margin-bottom: deprecated.$s-4; + &:last-child { margin-bottom: 0; } + .option-wrapper { width: 100%; + .library-name { @include deprecated.bodySmallTypography; + color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr deprecated.$s-24; + .lib-name-wrapper { display: flex; max-width: deprecated.$s-400; + .lib-name { @include deprecated.textEllipsis; + max-width: deprecated.$s-380; } + .lib-num { margin-left: deprecated.$s-4; } } + .icon-wrapper { margin-left: deprecated.$s-4; + @include deprecated.flexCenter; + svg { - @extend .button-icon-small; + @extend %button-icon-small; @include deprecated.flexCenter; + stroke: var(--icon-foreground); } } } + .color-sample { display: flex; flex-direction: row; @@ -70,11 +83,14 @@ &:hover { .option-wrapper .library-name { color: var(--context-menu-foreground-color-selected); + .icon-wrapper { @include deprecated.flexCenter; + svg { @include deprecated.flexCenter; - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--context-menu-foreground-color-selected); } } diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 1d7e303d41..a68182b24a 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -5,16 +5,16 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "ds/spacing.scss"; +@use "ds/spacing"; @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; @use "ds/_utils.scss" as *; @use "refactor/basic-rules.scss" as *; .colorpicker-tooltip { - @extend .modal-background; + @extend %modal-background; + left: calc(10 * px2rem(140)); - width: auto; padding: var(--sp-m); width: $sz-284; overflow: auto; @@ -41,8 +41,9 @@ } .opacity-input-wrapper { - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); + width: px2rem(68); } @@ -51,10 +52,8 @@ display: flex; justify-content: center; align-items: center; - border: none; background: none; cursor: pointer; - border-radius: $br-8; background-color: transparent; border: $b-1 solid transparent; height: var(--sp-xl); @@ -62,29 +61,37 @@ border-radius: $br-4; padding: 0; margin-top: var(--sp-xs); + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--button-tertiary-foreground-color-rest); } + &:hover { svg { stroke: var(--button-tertiary-foreground-color-focus); } } + &:focus, &:focus-visible { outline: none; + svg { stroke: var(--button-secondary-foreground-color-hover); } } + &:active { outline: none; border: $b-1 solid transparent; + svg { stroke: var(--button-tertiary-foreground-color-active); } } + &.selected { svg { stroke: var(--button-tertiary-foreground-color-active); @@ -99,11 +106,13 @@ } .gradient-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: var(--sp-xl); width: var(--sp-xl); border-radius: $br-4; border: $b-2 solid transparent; + &:hover { border: $b-2 solid var(--colorpicker-details-color-selected); } @@ -111,16 +120,18 @@ .linear-gradient-btn { background: linear-gradient(180deg, var(--color-foreground-secondary), transparent); + &.selected { - background: linear-gradient(to bottom, rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%); + background: linear-gradient(to bottom, rgb(126 255 245 / 100%) 0%, rgb(126 255 245 / 20%) 100%); border: $b-2 solid var(--colorpicker-details-color-selected); } } .radial-gradient-btn { background: radial-gradient(transparent, var(--color-foreground-secondary)); + &.selected { - background: radial-gradient(rgba(126, 255, 245, 1) 0%, rgba(126, 255, 245, 0.2) 100%); + background: radial-gradient(rgb(126 255 245 / 100%) 0%, rgb(126 255 245 / 20%) 100%); border: $b-2 solid var(--colorpicker-details-color-selected); } } @@ -132,7 +143,8 @@ .accept-color { @include t.use-typography("headline-small"); - @extend .button-primary; + @extend %button-primary; + width: 100%; height: var(--sp-xxxl); margin-top: var(--sp-s); @@ -180,6 +192,7 @@ height: px2rem(140); margin-bottom: $sz-6; margin-right: $sz-1; + img { height: fit-content; width: fit-content; @@ -190,20 +203,23 @@ } .choose-image { - @extend .button-secondary; + @extend %button-secondary; @include t.use-typography("headline-small"); + width: 100%; margin-top: var(--sp-m); height: var(--sp-xxxl); } .checkbox-option { - @extend .input-checkbox; + @extend %input-checkbox; + margin: var(--sp-l) 0 0 0; } .token-color-title { @include t.use-typography("title-small"); + color: var(--color-foreground-secondary); display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss index 6d653f34e3..e1e3a60acf 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss @@ -8,27 +8,35 @@ .color-values { @include deprecated.flexColumn; + margin-top: deprecated.$s-8; &.disable-opacity { grid-template-columns: 3.5rem repeat(3, 1fr); } + .colors-row { @include deprecated.flexRow; + .input-wrapper { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: deprecated.$s-84; display: flex; align-items: baseline; } } + .hex-alpha-wrapper { @include deprecated.flexRow; + .input-wrapper { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: deprecated.$s-84; + &.hex { width: deprecated.$s-172; display: flex; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss index 37ab3f3e40..ba963307bd 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss @@ -16,6 +16,7 @@ .color-token-item { --color-token-background: var(--color-background-primary); + background-color: var(--color-token-background); color: var(--color-foreground-primary); text-align: left; @@ -29,6 +30,7 @@ block-size: $sz-28; border: none; cursor: pointer; + &:hover { --color-token-background: var(--color-background-tertiary); } @@ -36,6 +38,7 @@ .color-token-empty-state { @include t.use-typography("body-small"); + padding: var(--sp-s) var(--sp-xxl); text-align: center; color: var(--color-foreground-secondary); @@ -57,6 +60,7 @@ .token-name { @include t.use-typography("body-small"); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -97,7 +101,9 @@ .set-title-bar { --title-color: var(--color-foreground-secondary); --arrow-color: var(--color-foreground-secondary); + @include t.use-typography("title-small"); + text-transform: none; display: flex; overflow: hidden; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss index d9e5b75633..b2efc2b627 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss @@ -46,7 +46,7 @@ background-size: deprecated.$s-8; border-radius: deprecated.$br-6; border: deprecated.$s-2 solid var(--color-foreground-primary); - box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color); + box-shadow: 0 0 deprecated.$s-4 0 var(--menu-shadow-color); height: calc(deprecated.$s-24 - deprecated.$s-2); left: var(--position); overflow: hidden; @@ -59,11 +59,12 @@ outline: deprecated.$s-2 solid var(--color-accent-primary); } } + .gradient-preview-stop-decoration { background: var(--color-foreground-primary); border-radius: 100%; bottom: deprecated.$s-32; - box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color); + box-shadow: 0 0 deprecated.$s-4 0 var(--menu-shadow-color); height: deprecated.$s-4; left: calc(var(--position) + deprecated.$s-8); position: absolute; @@ -109,8 +110,7 @@ flex-direction: column; gap: deprecated.$s-4; max-height: deprecated.$s-180; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; padding: 0 0 var(--sp-s) var(--sp-m); } @@ -120,7 +120,6 @@ padding: deprecated.$s-2; border-radius: deprecated.$br-12; border: deprecated.$s-1 solid transparent; - position: relative; &.is-selected { @@ -141,8 +140,9 @@ } .offset-input-wrapper { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: deprecated.$s-92; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss index e2438dc416..c3a3cced1e 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss @@ -16,6 +16,7 @@ .hue-wheel-wrapper { @include deprecated.flexCenter; + position: relative; } @@ -25,7 +26,8 @@ } .handler { - @extend .colorpicker-handler; + @extend %colorpicker-handler; + height: deprecated.$s-16; width: deprecated.$s-16; border: deprecated.$s-2 solid var(--colorpicker-handlers-color); @@ -38,6 +40,7 @@ .handlers-wrapper { @include deprecated.flexRow; + height: deprecated.$s-200; width: deprecated.$s-52; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss index 08def7607f..e8222e902c 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss @@ -8,8 +8,9 @@ .hsva-selector { @include deprecated.flexColumn; + padding: deprecated.$s-4; - grid-row-gap: deprecated.$s-8; + row-gap: deprecated.$s-8; margin-bottom: deprecated.$s-8; } @@ -20,6 +21,7 @@ .hsva-selector-label { @include deprecated.uppercaseTitleTipography; + display: flex; align-items: center; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss index 0fc9028c86..1489da0fd0 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss @@ -23,13 +23,15 @@ .add-color-btn, .palette-btn { - @extend .button-secondary; + @extend %button-secondary; + height: deprecated.$s-24; width: deprecated.$s-24; border-radius: deprecated.$br-circle; padding: 0; + svg { - @extend .button-icon; + @extend %button-icon; } } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss index 00e5825af6..e5ba77ec55 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss @@ -7,7 +7,7 @@ @use "refactor/common-refactor.scss" as deprecated; .value-saturation-selector { - background-color: rgba(var(--hue-rgb)); + background-color: rgb(var(--hue-rgb)); position: relative; height: deprecated.$s-140; width: 100%; @@ -20,7 +20,7 @@ position: absolute; width: 100%; height: 100%; - background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + background: linear-gradient(to right, #fff, rgb(255 255 255 / 0%)); } &::after { @@ -28,12 +28,13 @@ position: absolute; width: 100%; height: 100%; - background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); + background: linear-gradient(to top, #000, rgb(0 0 0 / 0%)); } } .handler { - @extend .colorpicker-handler; + @extend %colorpicker-handler; + height: deprecated.$s-16; width: deprecated.$s-16; border: deprecated.$s-2 solid var(--colorpicker-handlers-color); diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss index 460939c0a8..4473eaface 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss @@ -14,17 +14,14 @@ --gradient-direction: 0deg; --background-repeat: top; } + position: relative; align-self: center; height: deprecated.$s-24; inline-size: 100%; border: deprecated.$s-2 solid var(--colorpicker-details-color); border-radius: deprecated.$br-6; - background: linear-gradient( - var(--gradient-direction), - rgba(var(--color), 0) 0%, - rgba(var(--color), 1) 100% - ); + background: linear-gradient(var(--gradient-direction), rgb(var(--color), 0) 0%, rgb(var(--color), 1) 100%); cursor: pointer; &.vertical { @@ -65,8 +62,8 @@ height: 100%; background: linear-gradient( var(--gradient-direction), - rgba(var(--color), 0) 0%, - rgba(var(--color), 1) 100% + rgb(var(--color), 0) 0%, + rgb(var(--color), 1) 100% ); } } @@ -109,6 +106,7 @@ .slider-selector.value { background: linear-gradient(var(--gradient-direction), var(--hue-from, #000) 0%, var(--hue-to, #fff) 100%); } + .slider-selector.saturation { background: linear-gradient( var(--gradient-direction), diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 1cd9c04b64..0b49ea07c8 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -24,7 +24,8 @@ .mode-dropdown-wrapper { @include deprecated.buttonStyle; - @extend .asset-element; + @extend %asset-element; + background-color: var(--color-background-tertiary); display: flex; width: 100%; @@ -46,17 +47,21 @@ .arrow-icon { @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + transform: rotate(90deg); stroke: var(--icon-foreground); } } .comment-mode-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + top: deprecated.$s-92; left: deprecated.$s-12; max-width: deprecated.$s-256; @@ -68,29 +73,38 @@ } .dropdown-item { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + justify-content: space-between; + .icon { @include deprecated.flexCenter; + height: deprecated.$s-24; width: deprecated.$s-24; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: transparent; } } + .label { @include deprecated.bodySmallTypography; } + &:hover { .icon svg { stroke: transparent; } } + &.selected { .label { color: var(--menu-foreground-color); } + .icon svg { stroke: var(--icon-foreground-hover); } diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index 8d347c2190..bef5f39fd9 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -16,6 +16,7 @@ .context-list, .workspace-context-submenu { @include deprecated.menuShadow; + display: grid; width: deprecated.$s-240; padding: deprecated.$s-4; @@ -46,15 +47,20 @@ .title { @include deprecated.bodySmallTypography; + color: var(--menu-foreground-color); } + .shortcut { @include deprecated.flexCenter; + gap: deprecated.$s-2; color: var(--menu-shortcut-foreground-color); + .shortcut-key { @include deprecated.bodySmallTypography; @include deprecated.flexCenter; + height: deprecated.$s-20; padding: deprecated.$s-2 deprecated.$s-6; border-radius: deprecated.$br-6; @@ -63,19 +69,23 @@ } .submenu-icon svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color); } &:hover { background-color: var(--menu-background-color-hover); + .title { color: var(--menu-foreground-color-hover); } + .shortcut { color: var(--menu-shortcut-foreground-color-hover); } } + &:focus { border: 1px solid var(--menu-border-color-focus); background-color: var(--menu-background-color-focus); @@ -89,6 +99,7 @@ height: deprecated.$s-28; padding: deprecated.$s-6; border-radius: deprecated.$br-8; + &:hover { background-color: var(--menu-background-color-hover); } @@ -99,15 +110,18 @@ .selected-icon { svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color); } } .shape-icon { margin-left: deprecated.$s-2; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--menu-foreground-color); } } diff --git a/frontend/src/app/main/ui/workspace/coordinates.scss b/frontend/src/app/main/ui/workspace/coordinates.scss index b338144d06..44c76da73e 100644 --- a/frontend/src/app/main/ui/workspace/coordinates.scss +++ b/frontend/src/app/main/ui/workspace/coordinates.scss @@ -11,7 +11,7 @@ $width-settings-bar: 256px; .container { background-color: var(--color-background-primary); border-radius: deprecated.$br-4; - bottom: 0px; + bottom: 0; padding: deprecated.$s-2 deprecated.$s-8; position: fixed; right: calc(#{$width-settings-bar} + #{deprecated.$s-24}); diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index a096c8144a..1007aeeb44 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -15,10 +15,12 @@ .main-icon { @include deprecated.flexCenter; + width: deprecated.$s-32; height: deprecated.$s-32; min-height: deprecated.$s-32; margin-right: deprecated.$s-4; + svg { min-height: deprecated.$s-32; width: deprecated.$s-32; @@ -38,6 +40,7 @@ .file-name { @include deprecated.uppercaseTitleTipography; @include deprecated.textEllipsis; + height: deprecated.$s-16; width: 100%; padding-bottom: deprecated.$s-2; @@ -47,6 +50,7 @@ .file-name { @include deprecated.smallTitleTipography; + text-transform: none; color: var(--title-foreground-color-hover); align-items: center; @@ -60,6 +64,7 @@ .file-name-input { @include deprecated.flexCenter; + width: 100%; margin: 0; border: 0; @@ -70,6 +75,7 @@ color: var(--input-foreground-color); z-index: deprecated.$z-index-20; white-space: break-spaces; + &:focus { outline: none; } @@ -77,9 +83,11 @@ .shared-badge { @include deprecated.flexCenter; + width: deprecated.$s-16; height: deprecated.$s-32; margin-right: deprecated.$s-4; + svg { stroke: var(--button-secondary-foreground-color-rest); fill: none; @@ -118,9 +126,11 @@ 0% { transform: translateY(0); } + 50% { transform: translateY(-4px); } + 100% { transform: translateY(0); } diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 599cc8afde..e8a5d9a309 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -43,6 +43,7 @@ .modal-title { @include t.use-typography("headline-medium"); + margin-block-end: var(--sp-l); color: var(--color-foreground-primary); } @@ -83,7 +84,7 @@ overflow-y: auto; } -.section-list-item { +%section-list-item-placeholder { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-s); @@ -92,12 +93,17 @@ border-radius: $br-8; } -.section-list-item:first-child { - border: none; +.section-list-item { + @extend %section-list-item-placeholder; + + &:first-child { + border: none; + } } .section-list-item-double-icon { - @extend .section-list-item; + @extend %section-list-item-placeholder; + grid-template-columns: 1fr auto auto; } @@ -117,6 +123,7 @@ .section-title { @include t.use-typography("headline-small"); + margin-block-end: var(--sp-m); color: var(--title-foreground-color); } @@ -165,6 +172,7 @@ .libraries-updates-item { @include t.use-typography("body-large"); + display: grid; grid-template-columns: auto 1fr; align-items: start; @@ -191,31 +199,39 @@ padding-inline-start: calc(var(--sp-xxl) + var(--sp-s)); } -.item-name { +%item-name { @include t.use-typography("body-large"); - @include textEllipsis; + @include text-ellipsis; + margin: 0; max-width: px2rem(236); color: var(--library-name-foreground-color); } +.item-name { + @extend %item-name; +} + .item-name-short { max-width: px2rem(206); } .item-name-long { - @extend .item-name; + @extend %item-name; + max-width: px2rem(450); } .item-title { @include t.use-typography("body-large"); + margin: 0; color: var(--library-name-foreground-color); } .item-update { @include t.use-typography("headline-small"); + height: $sz-32; min-width: px2rem(92); padding: var(--sp-s) var(--sp-xxl); @@ -225,6 +241,7 @@ .item-contents { @include t.use-typography("body-small"); + color: var(--library-content-foreground-color); display: flex; flex-wrap: wrap; @@ -262,6 +279,7 @@ .modal-v2-title { @include t.use-typography("headline-medium"); + color: var(--modal-title-foreground-color); } @@ -274,11 +292,10 @@ .info-block { display: grid; - grid-template-columns: auto 1fr; column-gap: var(--sp-xl); grid-template: - "icon title" - "icon content"; + "icon title" auto + "icon content" auto / auto 1fr; } .info-icon { @@ -301,12 +318,14 @@ .info-block-title { @include t.use-typography("body-large"); + grid-area: title; color: var(--modal-title-foreground-color); } .info-block-content { @include t.use-typography("body-medium"); + grid-area: content; color: var(--library-content-foreground-color); } @@ -320,11 +339,13 @@ .primary-button { @include t.use-typography("headline-small"); + padding: 0 var(--sp-l); } .sample-libraries-info { @include t.use-typography("body-small"); + display: flex; flex-direction: column; margin: var(--sp-xxxl); @@ -333,6 +354,7 @@ .sample-libraries-link { @include t.use-typography("body-small"); + color: var(--color-accent-primary); &:hover { @@ -342,6 +364,7 @@ .sample-libraries-container { @include t.use-typography("body-small"); + display: flex; flex-direction: column; width: 100%; @@ -359,6 +382,7 @@ .sample-library-item-name { @include t.use-typography("body-medium"); + color: var(--color-foreground-primary); white-space: nowrap; overflow: hidden; @@ -368,6 +392,7 @@ .sample-library-button { @include t.use-typography("headline-small"); + height: $sz-32; width: px2rem(80); margin: 0; diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss index 1b12e2cdbf..6f615a7263 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.scss +++ b/frontend/src/app/main/ui/workspace/main_menu.scss @@ -72,13 +72,13 @@ &.plugins { max-height: calc(100vh - $sz-200); - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; } } .base-menu-item { @include t.use-typography("body-small"); + display: grid; align-items: center; grid-template-columns: auto $sz-16 $sz-16; @@ -99,6 +99,7 @@ &.disabled { --menu-foreground-color: var(--color-foreground-secondary); + pointer-events: none; } } @@ -122,6 +123,7 @@ .item-indicator { --menu-indicator-color: var(--color-foreground-secondary); + grid-area: indicator; display: flex; align-items: center; @@ -171,6 +173,7 @@ .shortcut-key { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/app/main/ui/workspace/nudge.scss b/frontend/src/app/main/ui/workspace/nudge.scss index 9ed244bedd..82797d3b3e 100644 --- a/frontend/src/app/main/ui/workspace/nudge.scss +++ b/frontend/src/app/main/ui/workspace/nudge.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; + min-width: deprecated.$s-408; } @@ -21,22 +22,28 @@ .modal-title { @include deprecated.headlineMediumTypography; + color: var(--modal-title-foreground-color); } + .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.flexColumn; + gap: deprecated.$s-24; + @include deprecated.bodyLargeTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { - @extend .input-with-label; + @extend %input-with-label; @include deprecated.bodySmallTypography; + label { text-transform: none; } @@ -44,6 +51,7 @@ .modal-msg { @include deprecated.bodyLargeTypography; + color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 7dc42ffc37..f7d77f70b6 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -7,7 +7,6 @@ @use "ds/spacing.scss" as *; @use "ds/z-index.scss" as *; @use "ds/_sizes.scss" as *; - @use "refactor/common-refactor.scss" as deprecated; .palette-wrapper { @@ -30,11 +29,7 @@ right: 0; grid-area: color-palette; display: grid; - grid-template-areas: - "resize resize resize" - "buttons actions palette"; - grid-template-rows: deprecated.$s-8 1fr; - grid-template-columns: deprecated.$s-32 auto 1fr; + grid-template: "resize resize resize" deprecated.$s-8 "buttons actions palette" 1fr / deprecated.$s-32 auto 1fr; max-height: deprecated.$s-80; height: var(--height); width: fit-content; @@ -46,6 +41,7 @@ right 0.3s, opacity 0.2s, width 0.3s; + &.wide { width: 100%; } @@ -59,6 +55,7 @@ cursor: ns-resize; background-color: var(--palette-background-color); } + .palette-btn-list { grid-area: buttons; background-color: var(--palette-background-color); @@ -68,35 +65,44 @@ list-style: none; z-index: deprecated.$z-index-2; gap: deprecated.$s-2; + &.mid-palette, &.small-palette { display: flex; } + .palette-item { @include deprecated.flexCenter; + border-radius: deprecated.$br-8; opacity: deprecated.$op-10; transition: opacity 1s ease; + .palette-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-32; border-radius: deprecated.$br-8; background-clip: padding-box; padding: 0; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } } } .palette-actions { - @extend .button-tertiary; + @extend %button-tertiary; + grid-area: actions; height: calc(var(--height) - deprecated.$s-16); width: deprecated.$s-32; @@ -105,11 +111,14 @@ border-radius: deprecated.$br-8; background-color: var(--palette-background-color); z-index: deprecated.$z-index-2; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } + .palette { grid-area: palette; width: 100%; @@ -120,8 +129,10 @@ .handler { @include deprecated.buttonStyle; @include deprecated.flexCenter; + width: deprecated.$s-12; height: 100%; + .handler-btn { width: deprecated.$s-4; height: 100%; @@ -147,29 +158,35 @@ border-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0; + .palette-btn-list { opacity: deprecated.$op-0; visibility: hidden; width: 0; + .palette-item { opacity: deprecated.$op-0; visibility: hidden; z-index: 0; } } + .resize-area { visibility: hidden; z-index: 0; width: 0; } + .palette-actions { visibility: hidden; z-index: 0; } + .palette { visibility: hidden; z-index: 0; } + .handler { padding-bottom: deprecated.$s-8; } @@ -179,21 +196,26 @@ .help-btn { z-index: var(--z-index-panels); flex-shrink: 0; - @extend .button-secondary; + + @extend %button-secondary; + inline-size: $sz-40; block-size: $sz-40; border-radius: deprecated.$br-circle; border: none; + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } + &:hover { border: none; } } .icon-help { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); inline-size: var(--sp-xxl); block-size: var(--sp-xxl); diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss index 87af034d70..d51dc2ff68 100644 --- a/frontend/src/app/main/ui/workspace/plugins.scss +++ b/frontend/src/app/main/ui/workspace/plugins.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + display: grid; grid-template-rows: auto 1fr auto; max-height: initial; @@ -41,16 +42,18 @@ } .close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .close-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } .modal-title { @include deprecated.headlineMediumTypography; + margin-block-end: deprecated.$s-32; color: var(--modal-title-foreground-color); display: flex; @@ -82,8 +85,9 @@ } .primary-button { - @extend .button-primary; + @extend %button-primary; @include deprecated.headlineSmallTypography; + padding: deprecated.$s-0 deprecated.$s-16; } @@ -93,18 +97,21 @@ } .cancel-button { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.headlineSmallTypography; + padding: deprecated.$s-0 deprecated.$s-16; } .search-icon { @include deprecated.flexCenter; + width: deprecated.$s-20; padding: 0 0 0 deprecated.$s-8; svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } @@ -126,8 +133,7 @@ .plugins-list { padding-top: deprecated.$s-20; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; flex: 1; display: flex; flex-direction: column; @@ -158,11 +164,13 @@ .plugin-title { @include deprecated.bodyMediumTypography; + color: var(--color-foreground-primary); } .plugin-summary { @include deprecated.bodySmallTypography; + color: var(--color-foreground-secondary); } @@ -195,6 +203,7 @@ .plugins-empty-text { @include deprecated.bodySmallTypography; + color: var(--color-foreground-primary); } @@ -204,6 +213,7 @@ div.input-error { .info { @include deprecated.bodySmallTypography; + margin-top: deprecated.$s-4; &.error { @@ -231,9 +241,6 @@ div.input-error { } } -.plugin-permissions { -} - .permissions-list { display: flex; flex-direction: column; @@ -256,12 +263,14 @@ div.input-error { .permissions-list-text { @include deprecated.bodySmallTypography; + margin: 0; color: var(--color-foreground-secondary); } .permissions-disclaimer { @include deprecated.bodySmallTypography; + padding: deprecated.$s-16; background: var(--color-background-quaternary); color: var(--color-foreground-primary); @@ -275,6 +284,7 @@ div.input-error { .discover { @include deprecated.bodySmallTypography; + color: var(--color-foreground-secondary); margin-top: deprecated.$s-24; diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index 03f6c8134e..76f488e1f2 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -12,7 +12,6 @@ .active-users-opened { background: none; cursor: pointer; - display: flex; flex-direction: row-reverse; justify-content: flex-end; @@ -33,6 +32,7 @@ %user-icon { @include t.use-typography("body-small"); + display: grid; place-content: center; height: $sz-24; @@ -48,6 +48,7 @@ .users-num { @extend %user-icon; + background-color: var(--user-count-background-color); color: var(--user-count-foreground-color); z-index: 3; // FIXME: this is hardcoded because of the way its component uses z-index from cljs @@ -57,6 +58,7 @@ .session-icon { @extend %user-icon; + margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs))); } diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index e6d7ea2092..fd40e13768 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -29,6 +29,7 @@ .zoom-widget { @include deprecated.buttonStyle; + display: flex; align-items: center; justify-content: center; @@ -39,6 +40,7 @@ .label { @include deprecated.bodySmallTypography; + height: 100%; padding: deprecated.$s-8 0; color: var(--button-tertiary-foreground-color-rest); @@ -58,7 +60,8 @@ } .dropdown { - @extend .menu-dropdown; + @extend %menu-dropdown; + right: deprecated.$s-2; top: calc(deprecated.$s-2 + deprecated.$s-48); width: deprecated.$s-272; @@ -77,6 +80,7 @@ .zoom-text { @include deprecated.flexCenter; + height: 100%; min-width: deprecated.$s-48; padding: 0; @@ -85,20 +89,21 @@ } .reset-btn { - @extend .button-tertiary; + @extend %button-tertiary; + color: var(--button-tertiary-foreground-color-hover); height: deprecated.$s-28; border-radius: deprecated.$br-8; } .zoom-option { - @extend .menu-item-base; + @extend %menu-item-base; .shortcuts { - @extend .shortcut-base; + @extend %shortcut-base; .shortcut-key { - @extend .shortcut-key-base; + @extend %shortcut-key-base; } } @@ -114,7 +119,8 @@ } .comments-btn { - @extend .button-tertiary; + @extend %button-tertiary; + border-radius: deprecated.$br-8; margin: 0; height: deprecated.$s-28; @@ -122,7 +128,8 @@ border: none; svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); height: deprecated.$s-16; width: deprecated.$s-16; @@ -143,7 +150,8 @@ } .history-button { - @extend .button-tertiary; + @extend %button-tertiary; + border-radius: deprecated.$br-8; margin: 0; height: deprecated.$s-28; @@ -151,7 +159,8 @@ border: none; svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); height: deprecated.$s-16; width: deprecated.$s-16; @@ -173,19 +182,22 @@ .persistence-status-widget { @include deprecated.flexCenter; + width: deprecated.$s-28; height: deprecated.$s-28; } .status-icon { @include deprecated.flexCenter; + width: deprecated.$s-24; height: deprecated.$s-24; margin: 0; border-radius: deprecated.$br-circle; svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--status-widget-icon-foreground-color); } } @@ -213,7 +225,8 @@ .share-btn, .viewer-btn { - @extend .button-tertiary; + @extend %button-tertiary; + border-radius: deprecated.$br-8; margin: 0; width: deprecated.$s-28; @@ -221,7 +234,8 @@ border: none; svg { - @extend .button-icon; + @extend %button-icon; + height: deprecated.$s-16; width: deprecated.$s-16; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss index 642a4cabf3..753a30ea46 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss +++ b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.scss @@ -8,7 +8,6 @@ .text-editor-container { height: 100%; position: relative; - cursor: text; } @@ -18,21 +17,17 @@ .text-editor-content { height: 100%; - font-family: sourcesanspro; - + font-family: sourcesanspro, sans-serif; outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word; - caret-color: var(--text-editor-caret-color); - color: transparent; // Match Skia's text layout precision: prevent browser text-size // adjustments and ensure consistent kerning across browsers. text-size-adjust: none; - -webkit-text-size-adjust: none; font-kerning: normal; &::selection, @@ -41,16 +36,16 @@ -webkit-text-fill-color: transparent; // WebKit/Safari } - &::-moz-selection, - *::-moz-selection { + &::selection, + *::selection { color: transparent; } [data-itype="paragraph"] { line-height: inherit; user-select: text; - margin: 0px; - font-size: 0px; + margin: 0; + font-size: 0; } [data-itype="inline"] { @@ -62,7 +57,6 @@ word-break: normal; overflow-wrap: break-word; tab-size: 2; - -o-tab-size: 2; } [data-itype="root"] { diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.scss b/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.scss index 8539a7ca29..5659b0646e 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.scss +++ b/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.scss @@ -6,7 +6,6 @@ width: 100%; height: 100%; position: absolute; - opacity: 0; overflow: hidden; white-space: pre; diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 3c5360b4f4..42708ad9f6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -9,11 +9,7 @@ .left-settings-bar { display: grid; - grid-template-areas: - "header header" - "content resize"; - grid-template-rows: deprecated.$s-52 1fr; - grid-template-columns: 1fr 0; + grid-template: "header header" deprecated.$s-52 "content resize" 1fr / 1fr 0; position: relative; grid-area: left-sidebar; min-width: var(--left-sidebar-width); @@ -65,9 +61,11 @@ width: var(--right-sidebar-width); background-color: var(--panel-background-color); z-index: deprecated.$z-index-1; + &.not-expand { max-width: var(--right-sidebar-width); } + &.expanded { width: var(--right-sidebar-width, var(--right-sidebar-width)); } @@ -76,7 +74,6 @@ display: grid; grid-template-columns: 100%; grid-template-rows: 100%; - height: calc(100vh - deprecated.$s-52); overflow: hidden; } @@ -104,13 +101,16 @@ .collapse-sidebar-button { --collapse-icon-color: var(--color-foreground-secondary); + @include deprecated.flexCenter; @include deprecated.buttonStyle; + height: 100%; width: deprecated.$s-24; border-radius: deprecated.$br-5; color: var(--collapse-icon-color); transform: rotate(180deg); + &:hover { --collapse-icon-color: var(--color-foreground-primary); } @@ -118,6 +118,7 @@ .collapsed-sidebar { @include deprecated.flexCenter; + position: absolute; top: deprecated.$s-48; left: 0; @@ -126,27 +127,34 @@ background: var(--color-background-primary); margin-inline-start: var(--sp-m); } + .collapsed-title { @include deprecated.flexCenter; + height: deprecated.$s-36; width: deprecated.$s-24; border-radius: deprecated.$br-8; background: var(--color-background-secondary); } + .collapsed-button { @include deprecated.buttonStyle; + height: deprecated.$s-24; width: deprecated.$s-16; padding: 0; border-radius: deprecated.$br-5; + svg { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; color: transparent; fill: none; stroke: var(--icon-foreground); } + &:hover { svg { stroke: var(--icon-foreground-hover); diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index f89069cca5..ebf3dc0f89 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -8,8 +8,8 @@ .assets-bar { display: grid; - height: 100%; grid-auto-rows: max-content; + // TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height height: calc(100vh - deprecated.$s-92); scrollbar-gutter: stable; @@ -18,8 +18,9 @@ } .libraries-button { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + gap: deprecated.$s-2; height: deprecated.$s-32; width: 100%; @@ -40,8 +41,9 @@ } .add-library-button { - @extend .button-primary; + @extend %button-primary; @include deprecated.uppercaseTitleTipography; + gap: deprecated.$s-2; height: deprecated.$s-32; width: 100%; @@ -52,6 +54,7 @@ .section-button { @include deprecated.flexCenter; @include deprecated.buttonStyle; + height: deprecated.$s-32; width: deprecated.$s-32; margin: 0; @@ -98,13 +101,14 @@ } &.opened { - @extend .button-icon-selected; + @extend %button-icon-selected; } } .sections-container { @include deprecated.menuShadow; @include deprecated.flexColumn; + position: absolute; top: deprecated.$s-84; left: deprecated.$s-12; @@ -117,6 +121,7 @@ .section-item { @include deprecated.bodySmallTypography; + display: flex; align-items: center; justify-content: space-between; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index e2c86936cb..2e44a4ba11 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -38,15 +38,18 @@ $assets-button-width: deprecated.$s-28; &.editing { border: deprecated.$s-1 solid var(--input-border-color-focus); + input.element-name { @include deprecated.textEllipsis; @include deprecated.bodySmallTypography; @include deprecated.removeInputStyle; + flex-grow: 1; margin: 0; color: var(--layer-row-foreground-color); } } + &:hover { background-color: var(--assets-item-background-color-hover); } @@ -54,6 +57,7 @@ $assets-button-width: deprecated.$s-28; .bullet-block { @include deprecated.flexCenter; + height: 100%; justify-content: flex-start; margin-inline-end: deprecated.$s-4; @@ -62,6 +66,7 @@ $assets-button-width: deprecated.$s-28; .name-block { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + margin: 0; color: var(--assets-item-name-foreground-color); } @@ -77,6 +82,7 @@ $assets-button-width: deprecated.$s-28; .element-name { @include deprecated.textEllipsis; + color: var(--color-foreground-primary); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 257bd24b3c..4773f97583 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -8,6 +8,7 @@ .title-name { @include deprecated.uppercaseTitleTipography; + display: flex; align-items: center; flex-grow: 1; @@ -16,6 +17,7 @@ .title-tokens { @include deprecated.bodySmallTypography; + text-transform: capitalize; } @@ -25,13 +27,16 @@ .section-icon { @include deprecated.flexCenter; + padding-right: deprecated.$s-2; + svg { @include deprecated.flexCenter; + height: deprecated.$s-16; width: deprecated.$s-16; fill: none; - stroke: currentColor; + stroke: currentcolor; } } @@ -43,6 +48,7 @@ .num-assets { @include deprecated.flexCenter; + height: 100%; padding-left: deprecated.$s-8; } @@ -58,6 +64,7 @@ .drag-counter { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + position: absolute; bottom: 0; left: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index ec23a9d1f4..fa7242d60a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -20,6 +20,7 @@ border-radius: $br-8; background-color: var(--color-canvas); overflow: hidden; + &:hover { .component-item-grid-name { display: flex; @@ -32,10 +33,7 @@ &::before { content: " "; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; border: calc($b-2 * 2) solid var(--color-background-primary); border-radius: $br-8; } @@ -50,7 +48,6 @@ left: var(--sp-xs); right: var(--sp-xs); bottom: var(--sp-xs); - padding: var(--sp-xxs) var(--sp-s); border-radius: $br-4; background-color: var(--color-background-primary); color: var(--color-foreground-primary); diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 18de784336..c4c2315d64 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -6,6 +6,7 @@ @use "ds/typography.scss" as t; @use "refactor/common-refactor.scss" as deprecated; + .tool-window { padding: 0 0 deprecated.$s-24 deprecated.$s-12; display: grid; @@ -16,6 +17,7 @@ .file-name { @include t.use-typography("body-small"); + display: flex; justify-content: flex-start; align-items: center; @@ -25,6 +27,7 @@ .loading { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: flex-start; @@ -35,18 +38,22 @@ .special-title { @include deprecated.textEllipsis; + color: var(--title-foreground-color-hover); margin-left: deprecated.$s-2; text-align: left; } .file-link { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; border-radius: deprecated.$br-8; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); fill: var(--title-foreground-color-hover); } @@ -69,12 +76,15 @@ .no-found-icon { @include deprecated.flexCenter; + background-color: var(--not-found-background-color); border-radius: deprecated.$br-circle; height: deprecated.$s-48; width: deprecated.$s-48; + svg { - @extend .button-icon; + @extend %button-icon; + height: deprecated.$s-24; width: deprecated.$s-24; stroke: var(--not-found-foreground-color); @@ -83,5 +93,6 @@ .no-found-text { @include deprecated.bodySmallTypography; + color: var(--not-found-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss index 1237c53323..a2db8f408b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -40,17 +40,18 @@ .path { @include deprecated.textEllipsis; + margin-left: deprecated.$s-2; text-transform: initial; color: var(--title-foreground-color-hover); } .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-container { - @extend .modal-container-base; + @extend %modal-container-base; } .modal-header { @@ -59,36 +60,39 @@ .modal-title { @include deprecated.uppercaseTitleTipography; + color: var(--modal-title-foreground-color); } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .modal-content { @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { - @extend .input-with-label; + @extend %input-with-label; @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-8; } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; } .cancel-button { - @extend .modal-cancel-btn; + @extend %modal-cancel-btn; } .accept-btn { - @extend .modal-accept-btn; + @extend %modal-accept-btn; &.danger { - @extend .modal-danger-btn; + @extend %modal-danger-btn; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss index a20ad8d615..5627355c0c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss @@ -52,6 +52,7 @@ $two-column-width: grid-width(2); $three-column-width: grid-width(3); $four-column-width: grid-width(4); $seven-column-width: grid-width(7); + // ------------------------------------------------------------ // Grid mixin — applies the standard structure to any container // ------------------------------------------------------------ @@ -86,6 +87,7 @@ $seven-column-width: grid-width(7); // - + 3 inter-column gaps // - − half a gap (because it’s visually shared with the next block) $grid-exception-input-width: calc(#{$sz-32} * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2)); + // // |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___| // @@ -111,10 +113,10 @@ $grid-exception-input-width-small: calc(#{$sz-32} * 2.5 + 2 * var(--sp-xs) - (va --left-sidebar-width-max: #{$left-sidebar-width-max}; --right-sidebar-width: #{$right-sidebar-width}; --right-sidebar-width-max: #{$right-sidebar-width-max}; - --2-columns-width: #{$two-column-width}; - --3-columns-width: #{$three-column-width}; - --4-columns-width: #{$four-column-width}; - --7-columns-width: #{$seven-column-width}; + --two-columns-width: #{$two-column-width}; + --three-columns-width: #{$three-column-width}; + --four-columns-width: #{$four-column-width}; + --seven-columns-width: #{$seven-column-width}; --options-width: #{$options-width}; --grid-exception-input-width: #{$grid-exception-input-width}; --grid-exception-input-width-small: #{$grid-exception-input-width-small}; diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss index 47f119009c..81a7921fe5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss @@ -21,12 +21,14 @@ } .checkbox-wrapper { - @extend .input-checkbox; + @extend %input-checkbox; + height: deprecated.$s-32; padding: 0; } .checkbox-icon { - @extend .checkbox-icon; + @extend %checkbox-icon; + cursor: pointer; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss index a72bf3a833..1f67e505bc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -26,7 +26,6 @@ .shape-title { font-size: deprecated.$fs-14; - padding-bottom: deprecated.$s-4; background: var(--color-background-quaternary); color: var(--color-foreground-primary); padding: deprecated.$s-8; @@ -34,6 +33,7 @@ display: flex; gap: deprecated.$s-4; } + .shape-name { flex: 1; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 907e6732bf..069d1d5d73 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -24,8 +24,7 @@ .history-entries { height: calc(100vh - deprecated.$s-100); padding: deprecated.$s-12; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; font-size: deprecated.$fs-12; } @@ -45,26 +44,33 @@ .history-entry-summary { display: flex; align-items: center; + .history-entry-summary-icon { svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--entry-foreground-color); } } + .history-entry-summary-text { margin: 0 deprecated.$s-8; color: var(--color-foreground-primary); } + .history-entry-summary-button { opacity: deprecated.$op-0; margin-left: auto; + &.button-opened { svg { transform: rotate(90deg); } } + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--entry-foreground-color); } } @@ -74,6 +80,7 @@ display: block; padding-top: deprecated.$s-16; color: var(--modal-text-foreground-color); + .history-entry-details-list { margin: 0; } @@ -88,14 +95,17 @@ &:hover { background-color: var(--entry-background-color-hover); color: var(--entry-foreground-color-hover); + .history-entry-summary { .history-entry-summary-icon { svg { stroke: var(--entry-foreground-color-hover); } } + .history-entry-summary-button { opacity: deprecated.$op-10; + &.button-opened { svg { transform: rotate(90deg); diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 0fc369362d..f66d7b62fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -13,8 +13,8 @@ --layer-background-color: var(--color-background-primary); --layer-foreground-color: inherit; --shadow-color: transparent; - box-shadow: px2rem(16) px2rem(0) px2rem(0) px2rem(0) var(--shadow-color); + box-shadow: px2rem(16) px2rem(0) px2rem(0) px2rem(0) var(--shadow-color); display: flex; flex-direction: row; align-items: center; @@ -30,6 +30,7 @@ --context-hover-color: var(--layer-row-foreground-color-hover); --context-hover-opacity: 1; --layer-foreground-color: var(--layer-row-foreground-color-hover); + &.hidden { opacity: 1; } @@ -59,9 +60,11 @@ &.dnd-over-bot { border-block-end: $b-2 solid var(--color-accent-primary); } + &.dnd-over-top { border-block-start: $b-2 solid var(--color-accent-primary); } + &.dnd-over { border: $b-2 solid var(--color-accent-primary); } @@ -73,9 +76,11 @@ --layer-background-color: var(--color-background-quaternary); --shadow-color: var(--color-background-quaternary); } + .layer-row.type-comp & { --layer-foreground-color: var(--color-accent-secondary); } + .layer-row.selected & { --layer-background-color: transparent; --layer-foreground-color: var(--color-accent-primary); @@ -91,6 +96,7 @@ inline-size: calc(100% - (var(--depth) * var(--layer-indentation-size))); cursor: pointer; min-inline-size: px2rem(140); + &.filtered { inline-size: calc(100% - $sz-12); } @@ -106,6 +112,7 @@ &.selected { display: flex; } + .layer-row.highlight &, .layer-row:hover & { display: flex; @@ -130,21 +137,27 @@ inline-size: $sz-24; padding-inline-start: var(--sp-xs); color: var(--color-foreground-secondary); + .layer-row.selected & { color: var(--color-accent-primary); } + .layer-row.type-comp & { color: var(--color-accent-secondary); } + .inverse & { transform: rotate(-90deg); } + .layer-row.hidden & { opacity: 0.7; } + .layer-row.highlight &, .layer-row:hover & { opacity: 1; + svg { stroke: var(--color-accent-primary); } @@ -162,14 +175,17 @@ .layer-row.hidden & { opacity: 0.1; } + .layer-row.type-comp & { background-color: var(--color-accent-secondary); } + .layer-row.highlight &, .layer-row:hover & { opacity: 0.4; background-color: var(--color-accent-primary); } + .layer-row.selected & { background-color: var(--color-accent-primary); } @@ -200,12 +216,15 @@ .layer-row.hidden & { opacity: 0.7; } + .layer-row.selected & { stroke: var(--color-accent-primary); } + .layer-row.type-comp & { stroke: var(--color-accent-secondary); } + .layer-row.highlight &, .layer-row:hover & { opacity: 1; @@ -216,6 +235,7 @@ .layer-row.selected & { background-color: var(--color-background-quaternary); } + &.inverse svg { transform: rotate(90deg); } @@ -224,9 +244,9 @@ .toggle-element, .block-element { --layer-row-action-btn-background: none; + border: none; cursor: pointer; - display: flex; justify-content: center; align-items: center; block-size: 100%; @@ -235,6 +255,7 @@ display: none; background: var(--layer-row-action-btn-background); padding-inline-end: px2rem(6); + svg { display: flex; justify-content: center; @@ -249,6 +270,7 @@ .layer-row.hidden & { opacity: 0.7; } + .type-comp & { stroke: var(--color-accent-secondary); } @@ -257,6 +279,7 @@ .element-actions.selected & { display: flex; opacity: 0; + &.selected { opacity: 1; } @@ -269,15 +292,20 @@ .layer-row.highlight &, .layer-row:hover & { display: flex; + --layer-row-action-btn-background: var(--color-background-secondary); + svg { opacity: 1; stroke: var(--color-accent-primary); } } + .layer-row.selected & { display: flex; + --layer-row-action-btn-background: var(--color-background-quaternary); + svg { stroke: var(--color-accent-primary); } @@ -295,13 +323,16 @@ block-size: $sz-16; min-inline-size: calc(var(--depth) * var(--layer-indentation-size)); } + .filtered { min-inline-size: $sz-12; } + .lazy-load-sentinel { min-height: 1px; pointer-events: none; } + .lazy-load-sentinel { min-height: 1px; pointer-events: none; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss index e2e4b1a723..290f4460e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss @@ -15,7 +15,6 @@ @include deprecated.bodySmallTypography; color: var(--element-name-color); - flex-grow: 1; block-size: 100%; align-content: center; @@ -62,5 +61,6 @@ .element-name-touched { --element-name-touched-color: var(--layer-row-component-foreground-color); + color: var(--element-name-touched-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index e89f730323..234d1cee61 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -18,39 +18,47 @@ &.search { padding: 0 deprecated.$s-12 0 deprecated.$s-8; gap: deprecated.$s-4; + .filter-button { @include deprecated.flexCenter; @include deprecated.buttonStyle; + height: deprecated.$s-32; width: deprecated.$s-32; margin: 0; border: deprecated.$s-1 solid var(--color-background-tertiary); border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8; background-color: var(--color-background-tertiary); + svg { height: deprecated.$s-16; width: deprecated.$s-16; stroke: var(--icon-foreground); } + &:focus { border: deprecated.$s-1 solid var(--input-border-color-focus); outline: 0; background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); + svg { background-color: var(--input-background-color-active); } } + &:hover { border: deprecated.$s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); + svg { background-color: var(--input-background-color-hover); stroke: var(--button-foreground-hover); } } + &.opened { - @extend .button-icon-selected; + @extend %button-icon-selected; } } } @@ -58,25 +66,30 @@ .page-name { @include deprecated.uppercaseTitleTipography; + padding: 0 deprecated.$s-12; color: var(--title-foreground-color); } .icon-search { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; border-radius: deprecated.$br-8; margin-right: deprecated.$s-8; padding: 0; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } } .focus-title { @include deprecated.buttonStyle; + display: grid; grid-template-columns: auto 1fr auto; align-items: center; @@ -86,11 +99,14 @@ .back-button { @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-24; padding: 0 deprecated.$s-4 0 deprecated.$s-8; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(180deg); } @@ -99,24 +115,28 @@ .focus-name { @include deprecated.textEllipsis; @include deprecated.bodySmallTypography; + padding-left: deprecated.$s-4; color: var(--title-foreground-color); } .focus-mode-tag-wrapper { @include deprecated.flexCenter; + height: 100%; margin-right: deprecated.$s-12; } .active-filters { @include deprecated.flexRow; + flex-wrap: wrap; margin: 0 deprecated.$s-12; } .layer-filter { - @extend .button-tag; + @extend %button-tag; + gap: deprecated.$s-6; height: deprecated.$s-24; margin: deprecated.$s-2 0; @@ -133,6 +153,7 @@ .layer-filter-name { @include deprecated.flexCenter; @include deprecated.bodySmallTypography; + color: var(--pill-foreground-color); } @@ -141,12 +162,15 @@ } .filters-container { - @extend .menu-dropdown; + @extend %menu-dropdown; + position: absolute; left: deprecated.$s-20; width: deprecated.$s-192; + .filter-menu-item { @include deprecated.bodySmallTypography; + display: flex; align-items: center; justify-content: space-between; @@ -158,28 +182,34 @@ display: flex; align-items: center; gap: deprecated.$s-8; + .filter-menu-item-icon { color: var(--menu-foreground-color); } + .filter-menu-item-name { padding-top: deprecated.$s-2; color: var(--menu-foreground-color); } } + .filter-menu-item-tick { color: var(--menu-foreground-color); } &.selected { background-color: var(--menu-background-color-selected); + .filter-menu-item-name-wrapper { .filter-menu-item-icon { color: var(--menu-foreground-color); } + .filter-menu-item-name { color: var(--menu-foreground-color); } } + .filter-menu-item-tick { color: var(--menu-foreground-color); } @@ -187,14 +217,17 @@ &:hover { background-color: var(--menu-background-color-hover); + .filter-menu-item-name-wrapper { .filter-menu-item-icon { color: var(--menu-foreground-color-hover); } + .filter-menu-item-name { color: var(--menu-foreground-color-hover); } } + .filter-menu-item-tick { color: var(--menu-foreground-color-hover); } @@ -204,12 +237,12 @@ .tool-window-content { --calculated-height: calc(#{deprecated.$s-136} + var(--height, #{deprecated.$s-200})); + display: flex; flex-direction: column; height: calc(100vh - var(--calculated-height)); width: calc(var(--left-sidebar-width) + var(--depth) * var(--layer-indentation-size)); - overflow-x: auto; - overflow-y: overlay; + overflow: auto; scrollbar-gutter: stable; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index 8a819471e8..b7428196ab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -18,8 +18,7 @@ } .content-class { - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; height: calc(100vh - #{$sz-96}); scrollbar-gutter: stable; } @@ -29,9 +28,11 @@ flex-direction: column; gap: var(--sp-s); width: 100%; + /* FIXME: This is hacky and prone to break, we should tackle the whole layout of the sidebar differently */ --sidebar-element-options-height: calc(100vh - #{$sz-88}); + height: var(--sidebar-element-options-height); padding-block-start: var(--sp-s); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss index d66e5de852..7a89a734af 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss @@ -10,11 +10,13 @@ .presets { @include sidebar.option-grid-structure; + grid-column: 1 / -1; } .presets-wrapper { - @extend .asset-element; + @extend %asset-element; + position: relative; grid-column: span 6; display: flex; @@ -24,9 +26,12 @@ .collapsed-icon { @include deprecated.flexCenter; + cursor: pointer; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } @@ -45,6 +50,7 @@ .select-name { @include deprecated.bodySmallTypography; + display: flex; justify-content: flex-start; align-items: center; @@ -53,19 +59,24 @@ } .custom-select-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + margin-top: deprecated.$s-2; max-height: 70vh; width: deprecated.$s-252; + .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + .name-wrapper { display: flex; gap: deprecated.$s-8; flex-grow: 1; + .preset-name { color: var(--menu-foreground-color-rest); } + .preset-size { color: var(--menu-foreground-color-rest); } @@ -73,8 +84,10 @@ .check-icon { @include deprecated.flexCenter; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } @@ -82,6 +95,7 @@ &.disabled { pointer-events: none; cursor: default; + .preset-name { color: var(--menu-foreground-color); } @@ -91,6 +105,7 @@ .name-wrapper .preset-name { color: var(--menu-foreground-color-hover); } + .check-icon svg { stroke: var(--menu-foreground-color-hover); } @@ -98,9 +113,11 @@ &:hover { background-color: var(--menu-background-color-hover); + .name-wrapper .preset-name { color: var(--menu-foreground-color-hover); } + .check-icon svg { stroke: var(--menu-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss index 6535f728b4..698698ec9d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss @@ -9,14 +9,15 @@ .align-options { @include sidebar.option-grid-structure; + height: deprecated.$s-32; } + .align-group-horizontal, .align-group-vertical { display: grid; grid-template-columns: subgrid; - align-items: center; - justify-items: center; + place-items: center center; } .align-group-horizontal { @@ -28,22 +29,29 @@ } .align-button { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-32; padding: 0; border-radius: deprecated.$br-8; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } + &.disabled { cursor: default; + svg { stroke: var(--button-foreground-color-disabled); } + &:hover { background-color: var(--panel-background-color); + svg { stroke: var(--button-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index c80e57e1ec..7445581652 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -22,6 +22,7 @@ .element-set-content { @include deprecated.flexColumn; + margin-bottom: deprecated.$s-8; } @@ -36,25 +37,32 @@ flex-grow: 1; border-radius: deprecated.$br-8; background-color: var(--input-details-color); + .show-more { - @extend .button-secondary; + @extend %button-secondary; + height: deprecated.$s-32; width: deprecated.$s-28; border-radius: deprecated.$br-8 0 0 deprecated.$br-8; box-sizing: border-box; border: deprecated.$s-1 solid var(--button-secondary-background-color-rest); + svg { - @extend .button-icon; + @extend %button-icon; } + &.selected { background-color: var(--button-radio-background-color-active); + svg { stroke: var(--button-radio-foreground-color-active); } } } + .label { @include deprecated.bodySmallTypography; + flex-grow: 1; display: flex; align-items: center; @@ -66,11 +74,13 @@ box-sizing: border-box; border: deprecated.$s-1 solid var(--input-border-color); } + .blur-type-select { flex-grow: 1; border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; } } + .actions { @include deprecated.flexRow; } @@ -78,12 +88,16 @@ &.hidden { .blur-info { @include deprecated.hiddenElement; + .show-more { @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } + .label { @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } } @@ -91,9 +105,11 @@ } .second-row { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: deprecated.$s-92; + .label { padding-left: deprecated.$s-8; width: deprecated.$s-60; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss index ef69c2dd4e..270b922093 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -9,6 +9,7 @@ .boolean-options { @include sidebar.option-grid-structure; + height: var(--sp-xxxl); } @@ -19,26 +20,31 @@ } .flatten-button { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-32; border-radius: deprecated.$br-8; grid-column: 5 / span 1; + --flatten-icon-foreground-color: var(--icon-foreground); &.disabled { cursor: default; + --flatten-icon-foreground-color: var(--button-foreground-color-disabled); &:hover { background-color: var(--panel-background-color); + --flatten-icon-foreground-color: var(--button-foreground-color-disabled); } } } .flatten-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--flatten-icon-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss index 222dc5bd03..e98b076c02 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss @@ -16,7 +16,7 @@ .radius-1, .small-input { - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 7519bcb568..9d8c30d5c0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -21,17 +21,21 @@ } .add-fill { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; } } .element-content { grid-column: span 8; + @include deprecated.flexColumn; + margin-bottom: deprecated.$s-8; } @@ -40,7 +44,8 @@ } .more-colors-btn { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 88ca5dd5b6..521c409223 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -14,6 +14,7 @@ .annotation { @include t.use-typography("body-small"); + grid-column: span 8; color: var(--color-foreground-secondary); border-radius: $br-8; @@ -123,7 +124,7 @@ // easy way to plop the elements on top of each other and have them both sized based on the tallest one's height display: grid; - &:after { + &::after { // The space is needed to preventy jumpy behavior content: attr(data-replicated-value) " "; white-space: pre-wrap; @@ -132,7 +133,6 @@ /* Identical styling required!! */ font: inherit; overflow-wrap: anywhere; - padding: var(--sp-m); /* Place on top of each other */ @@ -143,20 +143,15 @@ .annotation-textarea { background-color: var(--color-background-primary); color: var(--color-foreground-primary); - padding: var(--sp-m); - border: none; overflow: hidden; outline: none; - box-shadow: none; - resize: none; /* Identical styling required!! */ font: inherit; overflow-wrap: anywhere; - padding: var(--sp-m); /* Place on top of each other */ @@ -165,6 +160,7 @@ .annotation-counter { @include t.use-typography("body-small"); + text-align: right; color: var(--color-foreground-secondary); margin: 0 var(--sp-s) var(--sp-s) 0; @@ -181,6 +177,7 @@ --swap-item-thumbnail-background-color: var(--color-canvas); @include t.use-typography("body-small"); + display: flex; align-items: center; padding: px2rem(1) var(--sp-m) px2rem(1) px2rem(1); @@ -237,8 +234,6 @@ --swap-item-thumbnail-background-color-disabled: var(--color-foreground-secondary); display: flex; - justify-content: center; - align-items: center; place-items: center; aspect-ratio: 1 / 1; flex-wrap: wrap; @@ -257,6 +252,7 @@ .swap-item-name { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -295,10 +291,8 @@ &::before { content: " "; position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; + inset-inline: 0; + inset-block: 0; border: calc($b-2 * 2) solid var(--swap-item-border-inner-color-selected); border-radius: $br-8; } @@ -334,6 +328,7 @@ .swap-group { @include t.use-typography("body-small"); + cursor: pointer; display: grid; grid-template-columns: 1fr var(--sp-m); @@ -365,6 +360,7 @@ .swap-title { @include t.use-typography("headline-small"); + display: flex; align-items: center; block-size: $sz-32; @@ -397,6 +393,7 @@ .swap-library-name { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -419,6 +416,7 @@ .swap-library-back-name { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -429,6 +427,7 @@ .swap-library-empty { @include t.use-typography("body-small"); + margin: 0 var(--sp-xs) 0 var(--sp-s); color: var(--color-foreground-secondary); } @@ -457,6 +456,7 @@ .component-title-swap { @include t.use-typography("headline-small"); + cursor: pointer; display: flex; align-items: center; @@ -482,6 +482,7 @@ .component-title-bar-type { @include t.use-typography("body-small"); + block-size: 100%; display: flex; align-items: center; @@ -498,8 +499,7 @@ display: flex; flex-direction: column; row-gap: var(--sp-m); - padding-block-start: var(--sp-xs); - padding-block-end: var(--sp-s); + padding-block: var(--sp-xs) var(--sp-s); } .component-pill { @@ -562,6 +562,7 @@ .pill-btn-text { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -572,6 +573,7 @@ .pill-btn-subtext { @include t.use-typography("body-small"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -587,19 +589,21 @@ } .pill-actions-btn { - @extend .button-secondary; + @extend %button-secondary; + cursor: unset; block-size: 100%; inline-size: 100%; border-radius: 0 $br-8 $br-8 0; &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } .pill-actions-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + inline-size: $sz-252; inset-inline-end: 0; inset-inline-start: unset; @@ -610,12 +614,11 @@ } .pill-actions-dropdown-item { - @extend .dropdown-element-base; + @extend %dropdown-element-base; } .variant-property-list { grid-column: span 8; - display: grid; flex-direction: column; gap: var(--sp-xs); @@ -672,6 +675,7 @@ .variant-property-name { @include t.use-typography("body-small"); + margin-inline-start: var(--sp-s); color: var(--color-foreground-secondary); display: block; @@ -682,8 +686,8 @@ .variant-warning { @include t.use-typography("body-small"); - grid-column: span 8; + grid-column: span 8; border: $b-1 solid var(--color-background-quaternary); border-radius: $br-8; padding: var(--sp-m); @@ -702,6 +706,7 @@ .variant-warning-button { @include t.use-typography("body-small"); + cursor: pointer; background-color: transparent; border: none; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index 5f7578afe1..5aec6eef23 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -18,12 +18,7 @@ .constraints-widget { background-color: var(--constraint-widget-background-color); display: grid; - grid-template-columns: deprecated.$s-24 deprecated.$s-60 deprecated.$s-24; - grid-template-rows: deprecated.$s-24 deprecated.$s-60 deprecated.$s-24; - grid-template-areas: - "top top top" - "left center right" - "bottom bottom bottom"; + grid-template: "top top top" deprecated.$s-24 "left center right" deprecated.$s-60 "bottom bottom bottom" deprecated.$s-24 / deprecated.$s-24 deprecated.$s-60 deprecated.$s-24; height: deprecated.$s-108; width: deprecated.$s-108; border-radius: deprecated.$br-8; @@ -35,21 +30,27 @@ .constraints-right, .constraints-bottom { @include deprecated.flexCenter; + grid-area: top; } + .constraint-btn, .constraint-btn-special, .constraint-btn-rotated { @include deprecated.buttonStyle; @include deprecated.flexCenter; + width: 100%; height: 100%; + --resalted-area-background-color: var(--button-constraint-background-color-rest); --resalted-area-border-color: none; + &.active { --resalted-area-border-color: var(--button-constraint-border-color-hover); --resalted-area-background-color: var(--button-constraint-background-color-hover); } + &:hover, &:focus-visible { --resalted-area-border-color: var(--button-constraint-border-color-hover); @@ -69,9 +70,11 @@ .constraints-left { grid-area: left; + .constraint-btn-rotated { height: deprecated.$s-60; width: deprecated.$s-24; + .resalted-area { height: deprecated.$s-32; width: deprecated.$s-3; @@ -84,18 +87,22 @@ position: relative; background-color: var(--constraint-center-area-background-color); border-radius: deprecated.$br-8; + .constraint-btn { width: deprecated.$s-60; height: deprecated.$s-24; + .resalted-area { width: deprecated.$s-32; height: deprecated.$s-3; } } + .constraint-btn-special { position: absolute; height: deprecated.$s-60; width: deprecated.$s-24; + .resalted-area { height: deprecated.$s-32; width: deprecated.$s-3; @@ -105,9 +112,11 @@ .constraints-right { grid-area: right; + .constraint-btn-rotated { height: deprecated.$s-72; width: deprecated.$s-24; + .resalted-area { height: deprecated.$s-32; width: deprecated.$s-3; @@ -137,33 +146,42 @@ margin-bottom: deprecated.$s-8; margin-top: deprecated.$s-8; padding-left: 0; + input { margin: 0; } label { @include deprecated.bodySmallTypography; + display: flex; align-items: center; gap: deprecated.$s-2; cursor: pointer; color: var(--input-checkbox-text-foreground-color); + .check-mark { @include deprecated.flexCenter; + width: deprecated.$s-16; height: deprecated.$s-16; border-radius: deprecated.$br-6; background-color: var(--input-checkbox-inactive-background-color); + &.checked { background-color: var(--input-checkbox-background-color-active); + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--input-details-color); } } + &:hover { border-color: var(--input-checkbox-border-color-hover); } + &:focus { border-color: var(--input-checkbox-border-color-focus); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 487e4805bc..a1b4706f9a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -22,15 +22,19 @@ .element-set-content { @include sidebar.option-grid-structure; + gap: var(--sp-xs); } .multiple-exports { @include deprecated.flexRow; + grid-column: 1 / span 9; + .label { - @extend .mixed-bar; + @extend %mixed-bar; } + .actions { @include deprecated.flexRow; } @@ -62,6 +66,7 @@ .size-select { grid-column: span 2; padding: 0; + .dropdown-upwards { bottom: deprecated.$s-36; top: unset; @@ -71,13 +76,15 @@ .suffix-input { grid-column: span 3; - @extend .input-element; + + @extend %input-element; @include deprecated.bodySmallTypography; } .export-btn { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + grid-column: 1 / span 9; height: deprecated.$s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 28a159b4de..a9d920386e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -24,7 +24,6 @@ .fill-content { grid-column: span 8; - display: flex; flex-direction: column; gap: var(--sp-m); @@ -39,6 +38,7 @@ .fill-multiple-label { @include t.use-typography("body-small"); + display: flex; align-items: center; flex-grow: 1; @@ -51,12 +51,16 @@ .fill-checkbox { // TODO create a checkbox component in the DS - @extend .input-checkbox; + @extend %input-checkbox; + padding-inline-start: var(--sp-s); + span.checked { background-color: var(--color-accent-primary); + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--color-background-primary); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 51b82c5434..52171dde2e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -22,6 +22,7 @@ .element-set-content { @include deprecated.flexColumn; + grid-column: span 8; margin: deprecated.$s-4 0 deprecated.$s-8 0; } @@ -37,70 +38,87 @@ gap: deprecated.$s-1; border-radius: deprecated.$br-8; background-color: var(--input-details-color); + .show-options { - @extend .button-secondary; + @extend %button-secondary; + height: deprecated.$s-32; width: deprecated.$s-28; border-radius: deprecated.$br-8 0 0 deprecated.$br-8; box-sizing: border-box; border: deprecated.$s-1 solid var(--input-border-color); + svg { - @extend .button-icon; + @extend %button-icon; } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } + .type-select-wrapper { flex-grow: 1; width: deprecated.$s-96; padding: 0; border-radius: 0; height: deprecated.$s-32; + .grid-type-select { border-radius: 0; height: 100%; box-sizing: border-box; border: deprecated.$s-1 solid var(--input-border-color); + &:hover { border: deprecated.$s-1 solid var(--input-border-color-hover); } } } + .grid-size { - @extend .asset-element; + @extend %asset-element; + width: deprecated.$s-60; margin: 0; padding: 0; padding-left: deprecated.$s-8; border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; + .numeric-input { - @extend .input-base; + @extend %input-base; @include deprecated.bodySmallTypography; } } + .editable-select-wrapper { - @extend .asset-element; + @extend %asset-element; + width: deprecated.$s-60; margin: 0; padding: 0; position: relative; border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; + .column-select { height: deprecated.$s-32; border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; box-sizing: border-box; border: deprecated.$s-1 solid var(--input-border-color); + .numeric-input { - @extend .input-base; + @extend %input-base; @include deprecated.bodySmallTypography; + margin: 0; padding: 0; } + span { @include deprecated.flexCenter; + svg { - @extend .button-icon; + @extend %button-icon; } } } @@ -109,38 +127,51 @@ &.hidden { .show-options { @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } + .type-select-wrapper, .editable-select-wrapper { @include deprecated.hiddenElement; + .column-select, .grid-type-select { @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } + .column-select { @include deprecated.hiddenElement; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; + .numeric-input { @include deprecated.hiddenElement; } } } + .grid-size { @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); + .icon { stroke: var(--input-foreground-color-disabled); } + .numeric-input { color: var(--input-foreground-color-disabled); } } + .actions { .hidden-btn, .lock-btn { background-color: transparent; + svg { stroke: var(--input-foreground-color-disabled); } @@ -151,17 +182,20 @@ .actions { @include deprecated.flexRow; + grid-column: span 2; } .grid-advanced-options { @include deprecated.flexColumn; + margin-top: deprecated.$s-4; } .column-row, .square-row { @include deprecated.flexColumn; + position: relative; } @@ -169,35 +203,45 @@ position: relative; display: flex; gap: deprecated.$s-4; + .orientation-select-wrapper { width: deprecated.$s-92; padding: 0; } + .color-wrapper { width: deprecated.$s-156; } + .show-more-options { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } + .height { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + .icon-text { padding-top: deprecated.$s-1; } } + .gutter, .margin { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + .icon { &.rotated svg { transform: rotate(90deg); @@ -208,6 +252,7 @@ .more-options { @include deprecated.menuShadow; @include deprecated.flexColumn; + position: absolute; top: calc(deprecated.$s-2 + deprecated.$s-28); right: 0; @@ -220,8 +265,10 @@ z-index: deprecated.$z-index-4; overflow-y: auto; background-color: var(--menu-background-color); + .option-btn { @include deprecated.buttonStyle; + display: flex; align-items: center; height: deprecated.$s-32; @@ -238,13 +285,16 @@ } .second-row { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + left: unset; right: 0; width: deprecated.$s-108; + .btn-options { @include deprecated.buttonStyle; - @extend .dropdown-element-base; + @extend %dropdown-element-base; + width: 100%; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index 5b61b4dabf..c54da28b43 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -9,6 +9,7 @@ .grid-cell-menu-container { @include deprecated.flexColumn; + margin-top: deprecated.$s-8; gap: deprecated.$s-16; } @@ -35,34 +36,39 @@ } .edit-grid-btn { - @extend .button-secondary; + @extend %button-secondary; @include deprecated.uppercaseTitleTipography; + width: 100%; padding: deprecated.$s-8; } .area-input { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: 100%; padding: deprecated.$s-8; } .grid-coord-group { @include deprecated.flexRow; + border-radius: deprecated.$br-8; padding-left: deprecated.$s-4; background-color: var(--input-background-color); } .icon svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } .coord-input { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; border-left: deprecated.$s-1 solid var(--panel-background-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss index aeeaa99191..3097f16e76 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/input_wrapper_tokens.scss @@ -5,5 +5,5 @@ // Copyright (c) KALEIDOS INC .numeric-input-wrapper { - --dropdown-width: var(--7-columns-width); + --dropdown-width: var(--seven-columns-width); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 066145fa14..c4457a8aed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -32,7 +32,6 @@ .content { grid-column: span 8; - display: flex; flex-direction: column; gap: var(--sp-xs); @@ -62,12 +61,12 @@ align-items: center; gap: px2rem(1); border-radius: $br-8; - padding: var(--sp-s) var(--sp-m); block-size: $sz-32; padding: 0; &.double { block-size: $sz-48; + .prototype-pill-button { block-size: $sz-48; } @@ -114,13 +113,12 @@ .prototype-pill-input { @include t.use-typography("body-small"); + border: none; background: none; outline: none; block-size: 100%; - inline-size: 100%; flex-grow: 1; - margin: var(--sp-xxs) 0; padding: 0 0 0 var(--sp-s); margin: 0; background-color: var(--color-background-tertiary); @@ -130,6 +128,7 @@ &:hover { background-color: var(--color-background-quaternary); + &:active { background-color: var(--color-background-quaternary); } @@ -142,13 +141,15 @@ .prototype-pill-name { @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + color: var(--color-foreground-primary); } .prototype-pill-description { @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + color: var(--color-foreground-secondary); } @@ -164,8 +165,9 @@ } .interaction-row-name { - @include twoLineTextEllipsis; + @include two-line-text-ellipsis; @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); } @@ -191,12 +193,10 @@ .interaction-row-position { grid-column: 4 / span 5; display: grid; - grid-template-areas: - "topleft top topright" - "left center right" - "bottomleft bottom bottomright"; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 1fr); + grid-template: + "topleft top topright" 1fr + "left center right" 1fr + "bottomleft bottom bottomright" 1fr / repeat(3, 1fr); inline-size: calc($sz-32 * 3); block-size: calc($sz-32 * 3); border-radius: $br-8; @@ -205,21 +205,27 @@ .center { grid-area: center; } + .top-left { grid-area: topleft; } + .top-center { grid-area: top; } + .top-right { grid-area: topright; } + .bottom-left { grid-area: bottomleft; } + .bottom-center { grid-area: bottom; } + .bottom-right { grid-area: bottomright; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 21fe114676..333cb66bbf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -15,17 +15,22 @@ // https://tree.taiga.io/project/penpot/task/13704 .element-set-content { @include sidebar.option-grid-structure; + block-size: $sz-32; margin-block-end: var(--sp-s); + .select { grid-column: span 4; padding: 0; } + .input { - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); + grid-column: span 2; } + .actions { grid-column: span 2; display: grid; @@ -42,6 +47,7 @@ background-color: transparent; border: $b-1 solid var(--input-border-color-disabled); } + .input { cursor: default; pointer-events: none; @@ -50,9 +56,11 @@ stroke: var(--input-foreground-color-disabled); background-color: transparent; border: $b-1 solid var(--input-border-color-disabled); + .icon { stroke: var(--input-foreground-color-disabled); } + .numeric-input { color: var(--input-foreground-color-disabled); } @@ -67,6 +75,7 @@ // activated removing the token reference on the class .element-set-content-token { @include sidebar.option-grid-structure; + block-size: $sz-32; margin-block-end: var(--sp-s); grid-template-columns: var(--grid-exception-input-width) var(--grid-exception-input-width-small) auto auto; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index a0311d38a6..c4ec2b3f77 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -42,6 +42,7 @@ .flex-layout-menu { @include sidebar.option-grid-structure; + margin-block-end: var(--sp-s); } @@ -49,8 +50,7 @@ grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; - margin-block-end: var(--sp-m); - margin-block-start: var(--sp-xs); + margin-block: var(--sp-xs) var(--sp-m); } .align-row { @@ -63,16 +63,20 @@ // TODO: Replace this buttons with DS buttons .wrap-button { - @extend .button-tertiary; + @extend %button-tertiary; + border-radius: $br-8; block-size: $sz-32; inline-size: $sz-32; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-secondary); } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } @@ -95,6 +99,7 @@ var(--grid-exception-input-width) /* first input block */ var(--grid-exception-input-width) /* second input block */ var(--sp-xxxl); /* action button */ + gap: var(--sp-xs); grid-column: 1 / -1; } @@ -115,10 +120,11 @@ // TODO: Remove when activating token numeric inputs .column-gap, .row-gap { - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); + &.disabled { - @extend .disabled-input; + @extend %disabled-input; } } @@ -126,7 +132,7 @@ .padding-simple, .padding-multiple { @include t.use-typography("body-small"); - @extend .input-element; + @extend %input-element; } .padding-group { @@ -151,16 +157,20 @@ // TODO: Replace this buttons with DS buttons .padding-toggle { - @extend .button-tertiary; + @extend %button-tertiary; + block-size: $sz-32; inline-size: $sz-32; border-radius: $br-8; + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-secondary); } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } @@ -198,6 +208,7 @@ .grid-layout-menu-title { @include t.use-typography("headline-small"); + flex: 1; color: var(--color-foreground-primary); grid-column: span 5; @@ -205,8 +216,9 @@ // TODO: Replace this buttons with DS buttons .edit-mode-btn { - @extend .button-secondary; + @extend %button-secondary; @include t.use-typography("headline-small"); + inline-size: 100%; padding: var(--sp-s); grid-column: span 7; @@ -214,8 +226,9 @@ // TODO: Replace this buttons with DS buttons .exit-btn { - @extend .button-secondary; + @extend %button-secondary; @include t.use-typography("headline-small"); + padding: var(--sp-s) var(--sp-xl); grid-column: span 2; } @@ -268,19 +281,23 @@ border-radius: $br-8 0 0 $br-8; background-color: var(--color-background-tertiary); padding: 0 var(--sp-s); + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-secondary); block-size: 100%; } + &:hover svg { stroke: var(--color-foreground-primary); } } .track-info-value { - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); + border-radius: 0; border-inline-end: $b-1 solid var(--color-background-primary); } @@ -299,6 +316,7 @@ .grid-track-header { @include t.use-typography("body-small"); + display: flex; align-items: center; gap: var(--sp-xs); @@ -331,16 +349,19 @@ // TODO: Replace this buttons with DS buttons .expand-icon { - @extend .button-secondary; - block-size: px2rem(52); + @extend %button-secondary; + block-size: px2rem(52); border-radius: $br-8 0 0 $br-8; border-inline-end: $b-1 solid var(--color-background-primary); + svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-secondary); fill: var(--color-foreground-secondary); } + &:hover, &:active { svg { @@ -352,7 +373,8 @@ // TODO: Replace this buttons with DS buttons .add-column { - @extend .button-tertiary; + @extend %button-tertiary; + block-size: px2rem(52); svg { @@ -360,7 +382,6 @@ justify-content: center; align-items: center; color: transparent; - fill: none; stroke-width: px2rem(1); block-size: $sz-12; inline-size: $sz-12; @@ -370,7 +391,7 @@ } .layout-options { - box-shadow: 0px 0px $sz-12 0px var(--color-shadow-dark); + box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark); position: absolute; display: flex; flex-direction: column; @@ -383,8 +404,7 @@ margin-block-start: px2rem(1); border-radius: $br-8; z-index: var(--z-index-dropdown); - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); border: $b-2 solid var(--color-background-quaternary); @@ -424,6 +444,7 @@ var(--grid-exception-input-width) /* first input block */ var(--grid-exception-input-width) /* second input block */ var(--sp-xxxl); /* action button */ + gap: var(--sp-xs); margin-block-end: var(--sp-xs); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index d54b68e918..90a7f772f4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -25,6 +25,7 @@ .flex-element-menu { @include sidebar.option-grid-structure; + gap: var(--sp-xs); } @@ -42,7 +43,8 @@ .z-index-wrapper { @include use-typography("body-small"); - @extend .input-element; + @extend %input-element; + grid-column: 6 / span 3; } @@ -71,18 +73,22 @@ var(--grid-exception-input-width) /* first input block */ var(--grid-exception-input-width) /* second input block */ var(--sp-xxxl); /* action button */ + gap: var(--sp-xs); } .margin-mode { - @extend .button-tertiary; + @extend %button-tertiary; + grid-column: 3; height: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; } + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } @@ -90,14 +96,17 @@ display: grid; gap: var(--sp-xs); grid-template-columns: subgrid; + .vertical-margin, .horizontal-margin { - @extend .input-element; + @extend %input-element; @include use-typography("body-small"); } + .vertical-margin { grid-column: 1; } + .horizontal-margin { grid-column: 2; } @@ -121,7 +130,7 @@ .bottom-margin, .left-margin, .right-margin { - @extend .input-element; + @extend %input-element; @include use-typography("body-small"); } @@ -155,6 +164,7 @@ var(--grid-exception-input-width) /* first input block */ var(--grid-exception-input-width) /* second input block */ var(--sp-xxxl); /* action button */ + gap: var(--sp-xs); } @@ -169,8 +179,9 @@ .layout-item-min-h, .layout-item-max-w, .layout-item-max-h { - @extend .input-element; + @extend %input-element; @include use-typography("body-small"); + .icon-text { justify-content: flex-start; inline-size: px2rem(80); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index c75c161942..e6266df974 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -14,17 +14,20 @@ var(--grid-exception-input-width) /* first input block */ var(--grid-exception-input-width) /* second input block */ var(--sp-xxxl); /* action button */ + gap: var(--sp-xs); margin-bottom: var(--sp-s); } .presets { @include sidebar.option-grid-structure; + grid-column: 1 / -1; } .presets-wrapper { - @extend .asset-element; + @extend %asset-element; + position: relative; grid-column: span 5; display: flex; @@ -34,9 +37,12 @@ .collapsed-icon { @include deprecated.flexCenter; + cursor: pointer; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } @@ -55,6 +61,7 @@ .select-name { @include deprecated.bodySmallTypography; + display: flex; justify-content: flex-start; align-items: center; @@ -63,19 +70,24 @@ } .custom-select-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + margin-top: deprecated.$s-2; max-height: 70vh; width: deprecated.$s-252; + .dropdown-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + .name-wrapper { display: flex; gap: deprecated.$s-8; flex-grow: 1; + .preset-name { color: var(--menu-foreground-color-rest); } + .preset-size { color: var(--menu-foreground-color-rest); } @@ -83,8 +95,10 @@ .check-icon { @include deprecated.flexCenter; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } @@ -92,6 +106,7 @@ &.disabled { pointer-events: none; cursor: default; + .preset-name { color: var(--menu-foreground-color); } @@ -101,6 +116,7 @@ .name-wrapper .preset-name { color: var(--menu-foreground-color-hover); } + .check-icon svg { stroke: var(--menu-foreground-color-hover); } @@ -108,9 +124,11 @@ &:hover { background-color: var(--menu-background-color-hover); + .name-wrapper .preset-name { color: var(--menu-foreground-color-hover); } + .check-icon svg { stroke: var(--menu-foreground-color-hover); } @@ -131,13 +149,15 @@ .x-position, .y-position, .rotation { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + .icon-text { padding-top: deprecated.$s-1; } + &.disabled { - @extend .disabled-input; + @extend %disabled-input; } } @@ -146,17 +166,20 @@ } .lock-size-btn { - @extend .button-tertiary; + @extend %button-tertiary; + border-radius: deprecated.$br-8; height: deprecated.$s-32; width: deprecated.$s-28; + &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } .lock-ratio-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--icon-foreground); } @@ -175,21 +198,22 @@ } .clip-content-label { - @extend .button-tertiary; + @extend %button-tertiary; + height: var(--sp-xxxl); width: var(--sp-xxxl); border-radius: deprecated.$br-8; } .selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } .checkbox-button { - @extend .button-icon; + @extend %button-icon; } // TODO: Add a proper variable to this sizing .numeric-input-measures { - --dropdown-width: var(--7-columns-width); + --dropdown-width: var(--seven-columns-width); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index 4e2453ff6d..310ac1eb8c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -23,7 +23,6 @@ .shadow-content { grid-column: span 8; - display: flex; flex-direction: column; gap: var(--sp-xs); @@ -38,6 +37,7 @@ .shadow-multiple-label { @include t.use-typography("body-small"); + display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index 874beac840..ab0f622225 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -23,7 +23,6 @@ .stroke-content { grid-column: span 8; - display: flex; flex-direction: column; gap: var(--sp-m); @@ -42,6 +41,7 @@ .stroke-multiple-label { @include t.use-typography("body-small"); + display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 50ba70a209..ccbb34de36 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -17,6 +17,7 @@ .element-set-content { @include deprecated.flexColumn; + margin: deprecated.$s-4 0 0 0; } @@ -28,6 +29,7 @@ .attr-name { @include deprecated.bodySmallTypography; @include deprecated.twoLineTextEllipsis; + width: deprecated.$s-88; margin: auto deprecated.$s-4; margin-right: 0; @@ -36,8 +38,9 @@ } .attr-input { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + width: deprecated.$s-124; } @@ -47,11 +50,13 @@ } .attr-action-btn { - @extend .button-tertiary; + @extend %button-tertiary; + width: deprecated.$s-28; height: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; } } @@ -62,6 +67,7 @@ .attr-title { @include deprecated.bodySmallTypography; + font-size: deprecated.$fs-10; text-transform: uppercase; margin-inline-start: deprecated.$s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index aa97d0ee32..44e721d5b8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -17,26 +17,31 @@ .element-content { grid-column: span 8; + @include deprecated.flexColumn; + margin-top: deprecated.$s-4; } .multiple-typography { - @extend .mixed-bar; + @extend %mixed-bar; } .multiple-text { @include deprecated.bodySmallTypography; + flex-grow: 1; color: var(--input-foreground-color-active); } .multiple-typography-button { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 506fb58b34..a9f91e206a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -15,6 +15,7 @@ border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); color: var(--assets-item-name-foreground-color-hover); + &:hover, &:focus-within { background-color: var(--assets-item-background-color-hover); @@ -28,14 +29,18 @@ .element-set-actions { display: flex; visibility: hidden; + .element-set-actions-button, .menu-btn { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-32; width: deprecated.$s-28; + svg { - @extend .button-icon; + @extend %button-icon; } + &:active { background-color: transparent; } @@ -44,6 +49,7 @@ &:hover { background-color: var(--assets-item-background-color-hover); + .element-set-actions { visibility: visible; } @@ -65,6 +71,7 @@ .typography-sample { @include deprecated.flexCenter; + min-width: deprecated.$s-24; height: deprecated.$s-32; color: var(--assets-item-name-foreground-color); @@ -74,6 +81,7 @@ .typography-font { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + display: block; align-self: center; margin-left: deprecated.$s-6; @@ -89,6 +97,7 @@ .font-name-wrapper { @include deprecated.bodySmallTypography; + display: flex; align-items: center; height: deprecated.$s-32; @@ -102,38 +111,49 @@ .typography-sample-input { @include deprecated.flexCenter; + width: deprecated.$s-24; height: 100%; font-size: deprecated.$fs-16; color: var(--assets-item-name-foreground-color-hover); } + .adv-typography-name { @include deprecated.removeInputStyle; + font-size: deprecated.$fs-12; color: var(--input-foreground-color-active); flex-grow: 1; padding-left: deprecated.$s-6; margin: 0; } + .action-btn { - @extend .button-tertiary; + @extend %button-tertiary; @include deprecated.flexCenter; + width: deprecated.$s-28; height: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } + &:active { background-color: transparent; } } + &:focus-within { border: deprecated.$s-1 solid var(--input-border-color-active); + .adv-typography-name { color: var(--input-foreground-color-active); } } + &:hover { background-color: var(--assets-item-background-color-hover); } @@ -147,9 +167,12 @@ .typography-info-wrapper { @include deprecated.flexColumn; + margin-bottom: deprecated.$s-12; + .typography-name-wrapper { - @extend .asset-element; + @extend %asset-element; + display: grid; grid-template-columns: deprecated.$s-24 auto 1fr deprecated.$s-28; flex: 1; @@ -158,26 +181,32 @@ padding: 0 0 0 deprecated.$s-12; background-color: var(--assets-item-background-color-hover); margin-bottom: deprecated.$s-4; + .typography-sample { @include deprecated.flexCenter; + min-width: deprecated.$s-24; font-size: deprecated.$fs-16; height: deprecated.$s-32; padding: 0; color: var(--assets-item-name-foreground-color-hover); } + .typography-name { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + display: flex; align-items: center; justify-content: flex-start; margin-left: deprecated.$s-6; color: var(--assets-item-name-foreground-color-hover); } + .typography-font { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + margin-left: deprecated.$s-6; display: flex; align-items: center; @@ -185,13 +214,17 @@ min-width: 0; color: var(--assets-item-name-foreground-color); } + .action-btn { - @extend .button-tertiary; + @extend %button-tertiary; + width: deprecated.$s-28; height: deprecated.$s-32; + svg { - @extend .button-icon; + @extend %button-icon; } + &:active { background-color: transparent; } @@ -202,18 +235,24 @@ display: grid; grid-template-columns: 50% 50%; height: deprecated.$s-32; + --calculated-width: calc(var(--right-sidebar-width) - deprecated.$s-48); + padding-left: deprecated.$s-2; + .info-label { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + width: calc(var(--calculated-width) / 2); padding-top: deprecated.$s-8; color: var(--assets-item-name-foreground-color); } + .info-content { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + padding-top: deprecated.$s-8; width: calc(var(--calculated-width) / 2); color: var(--assets-item-name-foreground-color-hover); @@ -222,23 +261,28 @@ .link-btn { @include deprecated.uppercaseTitleTipography; - @extend .button-secondary; + @extend %button-secondary; + width: 100%; height: deprecated.$s-32; border-radius: deprecated.$br-8; + &:hover { background-color: var(--button-secondary-background-color-hover); color: var(--button-secondary-foreground-color-hover); border: deprecated.$s-1 solid var(--button-secondary-border-color-hover); text-decoration: none; + svg { stroke: var(--button-secondary-foreground-color-hover); } } + &:focus { background-color: var(--button-secondary-background-color-focus); color: var(--button-secondary-foreground-color-focus); border: deprecated.$s-1 solid var(--button-secondary-border-color-focus); + svg { stroke: var(--button-secondary-foreground-color-focus); } @@ -248,14 +292,17 @@ .text-options { @include deprecated.flexColumn; + max-width: var(--options-width); &:not(.text-options-full-size) { position: relative; } + .font-option { @include deprecated.bodySmallTypography; - @extend .asset-element; + @extend %asset-element; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-8; cursor: pointer; @@ -267,23 +314,30 @@ white-space: nowrap; width: 100%; } + .icon { @include deprecated.flexCenter; + height: deprecated.$s-28; width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } } } + .font-modifiers { display: flex; gap: deprecated.$s-4; + .font-size-options { - @extend .asset-element; + @extend %asset-element; @include deprecated.bodySmallTypography; + flex-grow: 1; width: deprecated.$s-60; margin: 0; @@ -293,42 +347,55 @@ .icon { @include deprecated.flexCenter; + height: deprecated.$s-28; min-width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); transform: rotate(90deg); } } } + .font-variant-options { padding: 0; flex-grow: 2; } } + .typography-variations { @include deprecated.flexRow; + .spacing-options { @include deprecated.flexRow; + .line-height, .letter-spacing { - @extend .input-element; + @extend %input-element; @include deprecated.bodySmallTypography; + .icon { @include deprecated.flexCenter; + width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; } } } } + .text-transform { - @extend .asset-element; + @extend %asset-element; + width: fit-content; padding: 0; background-color: var(--radio-btns-background-color); + &:hover { background-color: var(--radio-btns-background-color); } @@ -339,20 +406,24 @@ .font-size-select { @include deprecated.removeInputStyle; @include deprecated.bodySmallTypography; + height: deprecated.$s-32; height: 100%; width: 100%; margin: 0; padding: deprecated.$s-8; + .numeric-input { - @extend .input-base; + @extend %input-base; @include deprecated.bodySmallTypography; + padding: 0; } } .font-selector { @include deprecated.flexCenter; + position: absolute; top: 0; left: 0; @@ -371,17 +442,21 @@ .font-selector-dropdown { width: 100%; + &:not(.font-selector-dropdown-full-size) { display: flex; flex-direction: column; flex-grow: 1; height: 100%; } + .header { display: grid; row-gap: deprecated.$s-2; + .title { @include deprecated.uppercaseTitleTipography; + color: var(--title-foreground-color); margin: 0; padding: deprecated.$s-12; @@ -395,21 +470,28 @@ } .font-item { - @extend .asset-element; + @extend %asset-element; + margin-bottom: deprecated.$s-4; border-radius: deprecated.$br-8; display: flex; + .icon { @include deprecated.flexCenter; + height: deprecated.$s-28; width: deprecated.$s-28; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &.selected { color: var(--assets-item-name-foreground-color-hover); + .icon { svg { stroke: var(--assets-item-name-foreground-color-hover); @@ -420,6 +502,7 @@ .label { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; + flex-grow: 1; min-width: 0; } @@ -444,6 +527,7 @@ border-radius: deprecated.$br-8; background-color: var(--dropdown-background-color); overflow: hidden; + &:not(.fonts-list-full-size) { margin-block-start: deprecated.$s-2; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss index 5d77b269d2..98b71bd436 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss @@ -7,11 +7,11 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; max-width: deprecated.$s-888; width: 100%; @@ -31,7 +31,7 @@ } .modal-close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .rule-list { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 42f5dceefe..39f56950d8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -54,8 +54,10 @@ --color-name-wrapper-background-color: var(--color-background-tertiary); --color-name-wrapper-foreground-color: var(--color-foreground-primary); --color-name-wrapper-boder-color: var(--color-background-tertiary); + @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + display: flex; align-items: center; flex-grow: 1; @@ -66,13 +68,13 @@ padding: 0; margin-inline-end: 0; border: $b-1 solid var(--color-name-wrapper-boder-color); - border-radius: $br-8; background-color: var(--color-name-wrapper-background-color); color: var(--color-name-wrapper-foreground-color); border-radius: $br-8 0 0 $br-8; &.no-opacity { border-radius: $br-8; + .color-input-wrapper { border-radius: $br-8; } @@ -86,6 +88,7 @@ .detach-btn { display: grid; } + &.editing { --color-name-wrapper-background-color: var(--color-background-primary); } @@ -101,6 +104,7 @@ &:focus-within { --color-name-wrapper-background-color: var(--color-background-tertiary); --color-name-wrapper-boder-color: var(--color-accent-primary); + &:hover { --color-name-wrapper-background-color: var(--color-background-quaternary); } @@ -108,6 +112,7 @@ &.editing { --color-name-wrapper-background-color: var(--color-background-primary); + &:hover { --color-name-wrapper-boder-color: var(--color-accent-primary); } @@ -121,6 +126,7 @@ .color-input-wrapper { @include t.use-typography("body-small"); + display: flex; align-items: center; flex-grow: 1; @@ -135,7 +141,8 @@ .color-name { @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + flex-grow: 1; padding-inline: px2rem(6); border-radius: $br-8; @@ -150,13 +157,15 @@ padding: 0 var(--sp-xxs) 0 var(--sp-s); border-radius: $br-8 0 0 $br-8; background-color: transparent; + &:hover { background-color: transparent; } } .color-input { - @include textEllipsis; + @include text-ellipsis; + border: none; background: none; outline: none; @@ -167,6 +176,7 @@ padding: 0 0 0 px2rem(6); border-radius: $br-8; color: var(--input-foreground-color-active); + &[disabled] { opacity: 0.5; pointer-events: none; @@ -182,11 +192,14 @@ --opacity-input-boder-color: var(--color-background-tertiary); @include t.use-typography("body-small"); + display: flex; align-items: center; + &:not(:focus-within) { cursor: ew-resize; } + block-size: $sz-32; inline-size: px2rem(60); padding-inline-start: var(--sp-xs); @@ -201,6 +214,7 @@ .detach-btn { display: grid; } + &.editing { --opacity-input-background-color: var(--color-background-primary); } @@ -216,6 +230,7 @@ &:focus-within { --opacity-input-background-color: var(--color-background-tertiary); --opacity-input-boder-color: var(--color-accent-primary); + &:hover { --opacity-input-background-color: var(--color-background-quaternary); } @@ -223,6 +238,7 @@ &.editing { --opacity-input-background-color: var(--color-background-primary); + &:hover { --opacity-input-boder-color: var(--color-accent-primary); } @@ -230,12 +246,12 @@ } .opacity-input { - @include textEllipsis; + @include text-ellipsis; + block-size: $sz-28; min-inline-size: $sz-28; flex-grow: 1; inline-size: 100%; - padding: 0; border-radius: 0 $br-8 $br-8 0; border: none; background: none; @@ -244,9 +260,11 @@ padding: 0 0 0 px2rem(6); color: var(--color-foreground-primary); cursor: ew-resize; + &:focus { cursor: text; } + &[disabled] { opacity: 0.5; pointer-events: none; @@ -270,6 +288,7 @@ --token-color-wrapper-foreground-color: var(--color-token-foreground); --token-color-wrapper-border-color: var(--color-token-border); --token-actions-display: none; + display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-xs); @@ -281,6 +300,7 @@ background: var(--token-color-wrapper-background-color); border: $b-1 solid var(--token-color-wrapper-border-color); border-radius: $br-8; + &:hover { --token-color-wrapper-background-color: var(--color-token-background); --token-color-wrapper-foreground-color: var(--color-foreground-primary); @@ -294,6 +314,7 @@ --token-color-wrapper-background-color: var(--color-background-primary); --token-color-wrapper-foreground-color: var(--color-foreground-secondary); --token-color-wrapper-border-color: var(--color-token-border); + &:hover { --token-color-wrapper-background-color: var(--color-background-primary); --token-color-wrapper-foreground-color: var(--color-foreground-secondary); @@ -304,7 +325,8 @@ .token-name { @include t.use-typography("body-small"); - @include textEllipsis; + @include text-ellipsis; + color: var(--token-color-wrapper-foreground-color); block-size: $sz-32; line-height: $sz-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss index f13404d03e..84109fe162 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss @@ -80,8 +80,9 @@ .shadow-advanced-spread, .shadow-advanced-offset-y { // TODO remove this input by changing the input to DS component - @extend .input-element; + @extend %input-element; @include t.use-typography("body-small"); + .shadow-advanced-label { padding-inline-start: var(--sp-s); inline-size: px2rem(60); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss index 830acdab03..a93107afa9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss @@ -12,7 +12,6 @@ display: flex; flex-direction: column; gap: var(--sp-xs); - position: relative; --reorder-left-position: calc(-1 * var(--sp-l)); @@ -32,15 +31,16 @@ .stroke-options { @include sidebar.option-grid-structure; + align-items: center; } .stroke-width-input { grid-column: span 2; - @extend .input-element; - + @extend %input-element; @include t.use-typography("body-small"); + padding-inline-start: var(--sp-xs); } @@ -60,15 +60,16 @@ .stroke-options-tokens { @include sidebar.option-grid-structure; - grid-template-columns: var(--3-columns-width) var(--grid-exception-input-width-small) var( + + grid-template-columns: var(--three-columns-width) var(--grid-exception-input-width-small) var( --grid-exception-input-width-small ); } .stroke-align-icon-select { - --dropdown-width: var(--4-columns-width); + --dropdown-width: var(--four-columns-width); } .stroke-style-icon-select { - --dropdown-width: var(--4-columns-width); + --dropdown-width: var(--four-columns-width); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index 56376d9f02..0e68e8ee26 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -9,6 +9,7 @@ .shortcuts { display: grid; grid-template-rows: auto auto 1fr; + // TODO: Fix this once we start implementing the DS. // We should not be doign these hardcoded calc's. height: calc(100vh - #{deprecated.$s-60}); @@ -28,6 +29,7 @@ .not-found { @include deprecated.bodySmallTypography; + color: var(--empty-message-foreground-color); margin: deprecated.$s-12; } @@ -44,6 +46,7 @@ .section-title, .subsection-title { @include deprecated.uppercaseTitleTipography; + display: flex; align-items: center; margin: 0; @@ -64,9 +67,11 @@ text-transform: none; padding-left: deprecated.$s-12; } + .subsection-menu { margin-bottom: deprecated.$s-4; } + .sub-menu { margin-bottom: deprecated.$s-4; @@ -83,23 +88,28 @@ .command-name { @include deprecated.bodySmallTypography; + margin-left: deprecated.$s-2; color: var(--pill-foreground-color); } + .keys { @include deprecated.flexCenter; + gap: deprecated.$s-2; color: var(--pill-foreground-color); .key { @include deprecated.bodySmallTypography; @include deprecated.flexCenter; + text-transform: capitalize; height: deprecated.$s-20; padding: deprecated.$s-2 deprecated.$s-6; border-radius: deprecated.$s-6; background-color: var(--menu-shortcut-background-color); } + .space { margin: 0 deprecated.$s-2; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 086af118e8..51b5f9fc5e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -29,6 +29,7 @@ border-top: deprecated.$s-2 solid var(--resize-area-border-color); background-color: var(--resize-area-background-color); cursor: ns-resize; + &:hover { border-color: var(--resize-area-border-color); } @@ -39,8 +40,7 @@ flex-direction: column; height: calc(-38px + var(--height, deprecated.$s-200)); width: var(--left-sidebar-width); - overflow-x: hidden; - overflow-y: overlay; + overflow: hidden auto; scrollbar-gutter: stable; .element-list { @@ -56,18 +56,23 @@ .page-element { @include deprecated.bodySmallTypography; + min-height: deprecated.$s-32; width: 100%; cursor: pointer; + &.dnd-over-top { border-top: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } + &.dnd-over-bot { border-bottom: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } + .dnd-over > .element-list-body { border: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } + .element-list-body { display: flex; align-items: center; @@ -76,18 +81,24 @@ padding: 0 deprecated.$s-12 0 0; transition: none; color: var(--layer-row-foreground-color); + .page-name { @include deprecated.textEllipsis; + flex-grow: 1; padding-left: deprecated.$s-2; } + .page-icon { @include deprecated.flexCenter; + height: deprecated.$s-32; width: deprecated.$s-24; padding: 0 deprecated.$s-4 0 deprecated.$s-8; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + height: deprecated.$s-12; width: deprecated.$s-12; color: transparent; @@ -95,16 +106,21 @@ stroke: var(--icon-foreground); } } + .page-actions { height: deprecated.$s-32; + button { @include deprecated.buttonStyle; @include deprecated.flexCenter; + width: deprecated.$s-24; height: 100%; opacity: deprecated.$op-0; + svg { - @extend .button-icon-small; + @extend %button-icon-small; + height: deprecated.$s-12; width: deprecated.$s-12; color: transparent; @@ -113,14 +129,18 @@ } } } + .element-name { @include deprecated.textEllipsis; + color: var(--layer-row-foreground-color-focus); } + input.element-name { @include deprecated.textEllipsis; @include deprecated.bodySmallTypography; @include deprecated.removeInputStyle; + flex-grow: 1; height: deprecated.$s-28; max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); @@ -131,21 +151,25 @@ color: var(--layer-row-foreground-color); } } + &:active, &.on-drag { .element-list-body { color: var(--layer-row-foreground-color-drag); background-color: var(--layer-row-background-color-drag); + .page-actions button { svg { stroke: var(--layer-row-foreground-color-drag); } } + .page-icon svg { stroke: var(--layer-row-foreground-color-drag); } } } + &.selected, &.selected:hover { .element-list-body { @@ -153,16 +177,19 @@ background-color: var(--layer-row-background-color-selected); box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 var(--layer-row-background-color-selected); + .page-actions button { svg { stroke: var(--layer-row-foreground-color-selected); } } + .page-icon svg { stroke: var(--layer-row-foreground-color-selected); } } } + &:hover, &.hover { .element-list-body { @@ -170,30 +197,37 @@ background-color: var(--layer-row-background-color-hover); box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 var(--layer-row-background-color-hover); + .page-actions button { opacity: deprecated.$op-10; + svg { stroke: var(--layer-row-foreground-color-hover); } } + .page-icon svg { stroke: var(--layer-row-foreground-color-hover); } } } + &:focus { .element-list-body { color: var(--layer-row-foreground-color-focus); border: deprecated.$s-1 solid var(--layer-row-border-color-focus); outline: none; + .page-actions button { opacity: deprecated.$op-10; } } } + &:focus-within { .element-list-body { outline: none; + .page-actions button { opacity: deprecated.$op-10; } @@ -205,11 +239,13 @@ color: var(--layer-row-foreground-color-hidden); background-color: var(--layer-row-background-color-hidden); opacity: deprecated.$op-7; + .page-actions button { svg { stroke: var(--layer-row-foreground-color-hidden); } } + .page-icon svg { stroke: var(--layer-row-foreground-color-hidden); } @@ -219,6 +255,5 @@ .title-spacing-sitemap { padding-inline-start: deprecated.$s-8; - margin-block-start: deprecated.$s-8; - margin-block-end: deprecated.$s-4; + margin-block: deprecated.$s-8 deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.scss b/frontend/src/app/main/ui/workspace/sidebar/versions.scss index eb4a736edb..41c04c3521 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/versions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/versions.scss @@ -132,15 +132,17 @@ } .version-options-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; + position: absolute; width: fit-content; max-width: deprecated.$s-200; right: 0; left: unset; top: var(--offset); + .menu-option { - @extend .dropdown-element-base; + @extend %dropdown-element-base; } } @@ -164,6 +166,7 @@ &:hover { color: var(--color-accent-primary); + .icon-arrow { stroke: var(--color-accent-primary); } @@ -214,6 +217,7 @@ &:active { color: var(--color-accent-primary); + :global(.icon-pin) { visibility: initial; fill: var(--color-accent-primary); @@ -227,6 +231,7 @@ .cta { @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); a { diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index b8b438eb89..f5947604e8 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -10,18 +10,22 @@ height: 100%; display: flex; } + .left-arrow, .right-arrow { @include deprecated.buttonStyle; @include deprecated.flexCenter; + position: relative; height: 100%; width: deprecated.$s-24; padding: 0; z-index: deprecated.$z-index-2; + svg { - @extend .button-icon; + @extend %button-icon; } + &::after { content: ""; position: absolute; @@ -37,20 +41,24 @@ ); pointer-events: none; } + &:hover { svg { stroke: var(--button-foreground-hover); } } + &:disabled { svg { stroke: var(--button-foreground-color-disabled); } + &::after { background-image: none; } } } + .left-arrow { &::after { left: deprecated.$s-24; @@ -60,6 +68,7 @@ var(--palette-button-shadow-final) 100% ); } + &.disabled ::after { background-image: none; } @@ -81,6 +90,7 @@ .typography-item { @include deprecated.bodySmallTypography; + display: flex; flex-direction: column; justify-content: center; @@ -90,12 +100,14 @@ padding: deprecated.$s-8; border-radius: deprecated.$br-8; background-color: var(--palette-text-background-color); + &:first-child { margin-left: deprecated.$s-8; } .typography-name { @include deprecated.textEllipsis; + height: deprecated.$s-16; width: deprecated.$s-120; color: var(--palette-text-color-selected); @@ -103,6 +115,7 @@ .typography-font { @include deprecated.textEllipsis; + height: deprecated.$s-16; width: deprecated.$s-120; color: var(--palette-text-color); @@ -110,6 +123,7 @@ .typography-data { @include deprecated.textEllipsis; + height: deprecated.$s-16; width: deprecated.$s-120; color: var(--palette-text-color); @@ -119,16 +133,19 @@ .typography-name { height: deprecated.$s-16; } + .typography-data { display: none; } } + &.small-item { .typography-data, .typography-font { display: none; } } + &:hover { background-color: var(--palette-text-background-color-hover); } @@ -136,5 +153,6 @@ .text-palette-empty { @include deprecated.bodySmallTypography; + color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index fe450d0b1a..83e01b672b 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -31,39 +31,52 @@ &:last-child { margin-bottom: 0; } + .library-name { @include deprecated.bodySmallTypography; + color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr deprecated.$s-24; max-width: deprecated.$s-400; + .lib-name { @include deprecated.textEllipsis; + max-width: deprecated.$s-380; } + .lib-num { margin-left: deprecated.$s-4; } } + .icon-wrapper { margin-left: deprecated.$s-4; + @include deprecated.flexCenter; + svg { @include deprecated.flexCenter; - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--icon-foreground); } } + &.selected, &:hover { .icon-wrapper { @include deprecated.flexCenter; + svg { @include deprecated.flexCenter; - @extend .button-icon-small; + @extend %button-icon-small; + stroke: var(--context-menu-foreground-color-selected); } } + .library-name { color: var(--context-menu-foreground-color-selected); } diff --git a/frontend/src/app/main/ui/workspace/tokens/export.scss b/frontend/src/app/main/ui/workspace/tokens/export.scss index 53f9be2209..d7ecd3cb12 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export.scss +++ b/frontend/src/app/main/ui/workspace/tokens/export.scss @@ -10,14 +10,16 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { --modal-width: 32rem; --modal-padding: var(--sp-xxxl); --container-max-height: 16rem; - @extend .modal-container-base; + + @extend %modal-container-base; + user-select: none; width: var(--modal-width); max-width: 100%; diff --git a/frontend/src/app/main/ui/workspace/tokens/export/modal.scss b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss index 81d4af36f8..a8d711103f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export/modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss @@ -62,13 +62,10 @@ .file-name { display: block; max-width: 99%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @include t.use-typography("body-medium"); + flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; padding: var(--sp-xs); overflow: hidden; text-overflow: ellipsis; @@ -90,14 +87,14 @@ border-radius: $br-8; margin: 0; max-height: var(--container-max-height); - overflow-y: auto; - overflow-x: auto; - word-wrap: normal; + overflow: auto; + overflow-wrap: normal; white-space: pre; } .disabled-message { @include t.use-typography("body-small"); + color: var(--color-foreground-secondary); display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/tokens/import.scss b/frontend/src/app/main/ui/workspace/tokens/import.scss index 314edf94c8..26b77c7dc5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import.scss +++ b/frontend/src/app/main/ui/workspace/tokens/import.scss @@ -7,11 +7,12 @@ @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + user-select: none; } diff --git a/frontend/src/app/main/ui/workspace/tokens/import/modal.scss b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss index 9d8671d48d..971c0abc88 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import/modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss @@ -30,6 +30,7 @@ .import-actions { @include t.use-typography("body-small"); + display: flex; justify-content: flex-end; gap: var(--sp-s); @@ -40,8 +41,7 @@ border-end-start-radius: 0; border-inline-start: $b-1 solid var(--color-accent-tertiary); width: var(--sp-xxxl); - padding-inline-start: 0; - padding-inline-end: 0; + padding-inline: 0; justify-content: center; } diff --git a/frontend/src/app/main/ui/workspace/tokens/import_from_library.scss b/frontend/src/app/main/ui/workspace/tokens/import_from_library.scss index d1394861db..b63eaf6648 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import_from_library.scss +++ b/frontend/src/app/main/ui/workspace/tokens/import_from_library.scss @@ -5,7 +5,6 @@ // Copyright (c) KALEIDOS INC @use "refactor/common-refactor.scss" as deprecated; - @use "ds/typography.scss" as t; @use "ds/_borders.scss" as *; @use "ds/_sizes.scss" as *; @@ -20,7 +19,8 @@ --modal-title-foreground-color: var(--color-foreground-primary); --modal-text-foreground-color: var(--color-foreground-secondary); - @extend .modal-overlay-base; + @extend %modal-overlay-base; + display: flex; justify-content: center; align-items: center; @@ -33,7 +33,8 @@ } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + inline-size: 100%; max-inline-size: 32rem; max-block-size: unset; @@ -50,12 +51,14 @@ .modal-title { @include t.use-typography("headline-medium"); + color: var(--modal-title-foreground-color); - word-break: break-word; + overflow-wrap: break-word; } .modal-content { @include t.use-typography("body-large"); + color: var(--modal-text-foreground-color); } @@ -65,6 +68,7 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; + gap: var(--sp-s); } diff --git a/frontend/src/app/main/ui/workspace/tokens/management.scss b/frontend/src/app/main/ui/workspace/tokens/management.scss index 135d3bcc76..39ba2ef087 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management.scss @@ -8,9 +8,10 @@ .sets-header-container { @include use-typography("headline-small"); + padding: var(--sp-s); color: var(--title-foreground-color); - word-break: break-word; + overflow-wrap: break-word; display: flex; align-items: flex-start; justify-content: space-between; @@ -24,6 +25,7 @@ .sets-header-status { @include use-typography("body-small"); + text-transform: none; color: var(--color-foreground-secondary); display: flex; diff --git a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss index 207166d747..fdbdcbe98d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss @@ -23,6 +23,7 @@ .context-list, .token-context-submenu { @include deprecated.menuShadow; + display: grid; width: deprecated.$s-240; padding: deprecated.$s-4; @@ -56,7 +57,9 @@ --context-menu-item-bg-color: none; --context-menu-item-fg-color: var(--color-foreground-primary); --context-menu-item-border-color: none; + @include use-typography("body-small"); + display: flex; align-items: center; height: deprecated.$s-32; @@ -67,6 +70,7 @@ background-color: var(--context-menu-item-bg-color); border: deprecated.$s-1 solid var(--context-menu-item-border-color); cursor: pointer; + &:hover { --context-menu-item-bg-color: var(--color-background-quaternary); } @@ -124,6 +128,7 @@ .item-with-icon-space { padding-left: deprecated.$s-20; } + .icon-wrapper { margin-right: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.scss index b484cacfce..41cc87fd25 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.scss @@ -12,5 +12,6 @@ position: fixed; max-block-size: $sz-400; overflow-y: auto; - @include custom-scrollbar(); + + @include custom-scrollbar; } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.scss index 00eb38a2f2..3ac3d7a753 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.scss @@ -33,6 +33,7 @@ .form-modal-title { @include t.use-typography("headline-medium"); + color: var(--color-foreground-primary); display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.scss index c9dc66715a..2dd229e37a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.scss @@ -13,18 +13,17 @@ border-radius: $br-4; background-color: var(--color-background-primary); border: $b-2 solid var(--color-background-quaternary); - min-width: $sz-364; min-height: $sz-192; max-width: $sz-512; max-height: $sz-512; - box-shadow: 0px 0px $sz-12 0px var(--color-shadow-dark); + box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark); position: absolute; width: auto; min-width: auto; z-index: var(--z-index-set); - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; padding: var(--sp-xxxl); + &.token-modal-large { max-block-size: 95vh; } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.scss index 71e0cda690..e4f8e633e2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.scss @@ -6,14 +6,14 @@ @use "ds/_sizes.scss" as *; @use "ds/typography.scss" as t; - @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { --modal-title-foreground-color: var(--color-foreground-primary); --modal-text-foreground-color: var(--color-foreground-secondary); - @extend .modal-overlay-base; + @extend %modal-overlay-base; + display: flex; justify-content: center; align-items: center; @@ -32,7 +32,8 @@ } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + inline-size: 100%; max-inline-size: 32rem; max-block-size: unset; @@ -42,5 +43,6 @@ .form-modal-title { @include t.use-typography("headline-medium"); + color: var(--color-foreground-primary); } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.scss index f0a973f0b5..fa23fa90a4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.scss @@ -40,6 +40,7 @@ .title { @include t.use-typography("body-small"); + color: var(--color-foreground-primary); display: flex; align-items: center; @@ -51,6 +52,7 @@ .visible-label { @include t.use-typography("headline-small"); + color: var(--color-foreground-secondary); line-height: $sz-32; } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/typography.scss b/frontend/src/app/main/ui/workspace/tokens/management/forms/typography.scss index 5bac11ad27..67b16bef4b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/typography.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/typography.scss @@ -30,6 +30,7 @@ .title { @include t.use-typography("body-small"); + color: var(--color-foreground-primary); display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.scss index 7e84dfa6d8..362699c88c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.scss @@ -34,7 +34,7 @@ background-color: var(--color-background-tertiary); max-block-size: 100vh; overflow-y: auto; - box-shadow: 0px 0px $sz-12 0px var(--menu-shadow-color); + box-shadow: 0 0 $sz-12 0 var(--menu-shadow-color); } .token-node-context-menu-action { @@ -43,6 +43,7 @@ --context-menu-item-border-color: none; @include t.use-typography("body-small"); + appearance: none; background: var(--context-menu-item-bg-color); border: $b-1 solid var(--context-menu-item-border-color); diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss index e6df6d482e..ff9b9cc8c3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss @@ -10,8 +10,7 @@ .token-pill { @include use-typography("code-font"); - border: none; - background: none; + cursor: pointer; display: grid; grid-template-columns: auto 1fr; @@ -33,6 +32,7 @@ .name-wrapper { @include use-typography("code-font"); + display: block; overflow: hidden; text-overflow: ellipsis; @@ -49,6 +49,7 @@ .first-name-wrapper { @include use-typography("code-font"); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -57,6 +58,7 @@ .last-name-wrapper { @include use-typography("code-font"); + flex-shrink: 0; } @@ -70,6 +72,7 @@ --token-pill-border: var(--color-background-tertiary); --token-pill-outline: none; --token-pill-accent: var(--color-background-quaternary); + &:hover { --token-pill-background: var(--color-token-background); --token-pill-foreground: var(--color-foreground-primary); @@ -81,6 +84,7 @@ &:focus-visible { --token-pill-outline: var(--color-background-primary); --token-pill-border: var(--color-accent-primary); + outline-offset: -3px; } } @@ -124,11 +128,13 @@ --token-pill-background: var(--color-background-tertiary); --token-pill-accent: var(--color-foreground-error); } + &:hover { --token-pill-foreground: var(--color-foreground-primary); --token-pill-outline: none; --token-pill-border: var(--color-foreground-error); } + &:focus-visible { --token-pill-foreground: var(--color-foreground-error); --token-pill-border: var(--color-accent-primary); @@ -138,6 +144,7 @@ .token-pill-invalid-applied { --token-pill-border: var(--color-foreground-error); + &:hover, &:focus-visible { --token-pill-border: var(--color-foreground-error); @@ -177,6 +184,7 @@ --token-pill-border: var(--color-accent-error); --token-pill-foreground: var(--color-foreground-error); --token-pill-accent: var(--color-foreground-error); + &:hover, &:focus-visible { --token-pill-border: var(--color-accent-error); diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss index 7b1ea0244e..0794172692 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss @@ -50,6 +50,7 @@ margin-block-end: var(--sp-s); } } + & .token-pill { flex: 0 0 auto; } diff --git a/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss b/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss index 704df4e5d3..3dd5b7db84 100644 --- a/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/remapping_modal.scss @@ -6,14 +6,14 @@ @use "ds/_sizes.scss" as *; @use "ds/typography.scss" as t; - @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { --modal-title-foreground-color: var(--color-foreground-primary); --modal-text-foreground-color: var(--color-foreground-secondary); - @extend .modal-overlay-base; + @extend %modal-overlay-base; + display: flex; justify-content: center; align-items: center; @@ -32,7 +32,8 @@ } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; + inline-size: 100%; max-inline-size: 32rem; max-block-size: unset; @@ -49,12 +50,14 @@ .modal-title { @include t.use-typography("headline-medium"); + color: var(--modal-title-foreground-color); - word-break: break-word; + overflow-wrap: break-word; } .modal-content { @include t.use-typography("body-large"); + color: var(--modal-text-foreground-color); } @@ -64,12 +67,14 @@ } .action-buttons { - @extend .modal-action-btns; + @extend %modal-action-btns; + gap: var(--sp-s); } .modal-scd-msg, .modal-msg { @include t.use-typography("body-large"); + color: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index dee8bfe07b..5209ff4bed 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -21,6 +21,7 @@ .create-set-button { @include use-typography("body-small"); + background-color: transparent; border: none; appearance: none; @@ -30,6 +31,7 @@ .set-item-container { @include deprecated.bodySmallTypography; + display: flex; align-items: center; width: 100%; @@ -43,9 +45,11 @@ &.dnd-over-bot { border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } + &.dnd-over-top { border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } + &.dnd-over { border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } @@ -65,6 +69,7 @@ .set-name { @include deprecated.textEllipsis; + flex-grow: 1; padding-left: deprecated.$s-2; } @@ -112,7 +117,7 @@ } .check-icon { - color: currentColor; + color: currentcolor; } .set-item-container:hover { @@ -129,6 +134,7 @@ padding: deprecated.$s-12; color: var(--color-foreground-secondary); } + .selected-set { background-color: var(--layer-row-background-color-selected); color: var(--layer-row-foreground-color-selected); @@ -138,8 +144,10 @@ .collapsabled-icon { @include deprecated.buttonStyle; @include deprecated.flexCenter; + height: deprecated.$s-24; border-radius: deprecated.$br-8; + &:hover { color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss index 1e36266233..a09d7699b1 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss @@ -14,6 +14,7 @@ .context-list { @include deprecated.menuShadow; + display: grid; width: deprecated.$s-240; padding: deprecated.$s-4; @@ -26,6 +27,7 @@ .context-menu-item { @include t.use-typography("body-small"); + color: var(--menu-foreground-color); display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss index dee8bfe07b..5209ff4bed 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss @@ -21,6 +21,7 @@ .create-set-button { @include use-typography("body-small"); + background-color: transparent; border: none; appearance: none; @@ -30,6 +31,7 @@ .set-item-container { @include deprecated.bodySmallTypography; + display: flex; align-items: center; width: 100%; @@ -43,9 +45,11 @@ &.dnd-over-bot { border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } + &.dnd-over-top { border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } + &.dnd-over { border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } @@ -65,6 +69,7 @@ .set-name { @include deprecated.textEllipsis; + flex-grow: 1; padding-left: deprecated.$s-2; } @@ -112,7 +117,7 @@ } .check-icon { - color: currentColor; + color: currentcolor; } .set-item-container:hover { @@ -129,6 +134,7 @@ padding: deprecated.$s-12; color: var(--color-foreground-secondary); } + .selected-set { background-color: var(--layer-row-background-color-selected); color: var(--layer-row-foreground-color-selected); @@ -138,8 +144,10 @@ .collapsabled-icon { @include deprecated.buttonStyle; @include deprecated.flexCenter; + height: deprecated.$s-24; border-radius: deprecated.$br-8; + &:hover { color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss index ae5339a979..fc4164d92a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss @@ -5,19 +5,18 @@ // Copyright (c) KALEIDOS INC @use "ds/spacing.scss" as *; - @use "refactor/common-refactor.scss" as deprecated; .setting-modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .setting-modal { - @extend .modal-container-base; + @extend %modal-container-base; } .close-btn { - @extend .modal-close-btn-base; + @extend %modal-close-btn-base; } .settings-modal-layout { diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index a48adee402..3eefaa09b0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -11,6 +11,7 @@ .sidebar-wrapper { display: grid; grid-template-rows: auto 1fr auto; + // Overflow on the bottom section can't be done without hardcoded values for the height // This has to be changed from the wrapping sidebar styles height: calc(100vh - #{deprecated.$s-92}); @@ -18,7 +19,6 @@ } .token-management-section-wrapper { - position: relative; display: flex; flex: 1; height: var(--resize-height); @@ -55,8 +55,9 @@ .section-icon { margin-right: var(--sp-xs); + // Align better with the label - translate: 0px -1px; + translate: 0 -1px; } .import-export-button-wrapper { @@ -72,7 +73,8 @@ } .import-export-button { - @extend .button-secondary; + @extend %button-secondary; + display: flex; align-items: center; justify-content: end; @@ -80,12 +82,12 @@ text-transform: uppercase; gap: var(--sp-s); background-color: var(--color-background-primary); - box-shadow: var(--el-shadow-dark); } .import-export-menu { - @extend .menu-dropdown; + @extend %menu-dropdown; + top: -#{deprecated.$s-6}; right: 0; translate: 0 -100%; @@ -94,8 +96,10 @@ } .import-export-menu-item { - @extend .menu-item-base; + @extend %menu-item-base; + cursor: pointer; + &:hover { color: var(--menu-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/tokens/themes.scss b/frontend/src/app/main/ui/workspace/tokens/themes.scss index a96f9f341a..4dc34ad389 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes.scss +++ b/frontend/src/app/main/ui/workspace/tokens/themes.scss @@ -15,7 +15,7 @@ .themes-header { padding: var(--sp-s); color: var(--title-foreground-color); - word-break: break-word; + overflow-wrap: break-word; } .empty-theme-wrapper { @@ -29,6 +29,7 @@ .create-theme-button { @include use-typography("body-small"); + background-color: transparent; border: none; appearance: none; diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss index c1cc8b59a4..c252590b18 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss +++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss @@ -5,15 +5,14 @@ // Copyright (c) KALEIDOS INC @use "ds/_sizes.scss" as *; - @use "refactor/common-refactor.scss" as deprecated; .modal-overlay { - @extend .modal-overlay-base; + @extend %modal-overlay-base; } .modal-dialog { - @extend .modal-container-base; + @extend %modal-container-base; width: 100%; max-width: deprecated.$s-512; @@ -59,6 +58,7 @@ gap: deprecated.$s-4; align-items: center; padding: 0; + &:hover { color: var(--color-accent-primary); } @@ -125,6 +125,7 @@ .group-title-name { flex-grow: 1; + @include deprecated.textEllipsis; } @@ -152,6 +153,7 @@ .theme-name-row { @include deprecated.textEllipsis; + flex-grow: 1; } diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss index 867d65eafe..7d7171536e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss +++ b/frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.scss @@ -11,6 +11,7 @@ --custom-select-bg-color: var(--menu-background-color); --custom-select-icon-color: var(--color-foreground-secondary); --custom-select-text-color: var(--menu-foreground-color); + position: relative; display: grid; grid-template-columns: 1fr auto; @@ -24,6 +25,7 @@ border: deprecated.$s-1 solid var(--custom-select-border-color); color: var(--custom-select-text-color); cursor: pointer; + &:hover { --custom-select-bg-color: var(--menu-background-color-hover); --custom-select-border-color: var(--menu-background-color); @@ -42,6 +44,7 @@ .group { @include deprecated.textEllipsis; + display: block; padding: deprecated.$s-8; color: var(--color-foreground-secondary); @@ -52,23 +55,26 @@ --custom-select-border-color: var(--menu-border-color-disabled); --custom-select-icon-color: var(--menu-foreground-color-disabled); --custom-select-text-color: var(--menu-foreground-color-disabled); + pointer-events: none; cursor: default; } .dropdown-button { @include deprecated.flexCenter; + color: var(--color-foreground-secondary); } .current-icon { @include deprecated.flexCenter; + width: deprecated.$s-24; padding-right: deprecated.$s-4; } .custom-select-dropdown { - @extend .dropdown-wrapper; + @extend %dropdown-wrapper; } .separator { @@ -88,7 +94,8 @@ } .checked-element-button { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + position: relative; display: flex; justify-content: space-between; @@ -96,10 +103,12 @@ } .checked-element { - @extend .dropdown-element-base; + @extend %dropdown-element-base; + &.is-selected { color: var(--menu-foreground-color); } + &.disabled { display: none; } @@ -107,6 +116,7 @@ .check-icon { @include deprecated.flexCenter; + color: var(--icon-foreground-primary); visibility: hidden; } @@ -126,7 +136,8 @@ .dropdown-portal { --menu-max-height: #{deprecated.$s-400}; - @extend .new-scrollbar; + + @extend %new-scrollbar; position: absolute; } diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index d005682878..fe603de407 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -27,6 +27,7 @@ --toolbar-position-y: #{deprecated.$s-28}; --toolbar-offset-y: 0px; + top: calc(var(--toolbar-position-y) + var(--toolbar-offset-y)); } @@ -37,6 +38,7 @@ .main-toolbar-hidden { --toolbar-offset-y: -#{deprecated.$s-4}; + height: deprecated.$s-16; z-index: deprecated.$z-index-1; border-radius: 0 0 deprecated.$s-8 deprecated.$s-8; @@ -62,7 +64,8 @@ } .main-toolbar-options-button { - @extend .button-tertiary; + @extend %button-tertiary; + height: deprecated.$s-36; width: deprecated.$s-36; flex-shrink: 0; @@ -70,18 +73,20 @@ margin: 0 deprecated.$s-2; svg { - @extend .button-icon; + @extend %button-icon; + stroke: var(--color-foreground-secondary); } &.selected { - @extend .button-icon-selected; + @extend %button-icon-selected; } } .toolbar-handler { @include deprecated.flexCenter; @include deprecated.buttonStyle; + position: absolute; left: 0; bottom: 0; diff --git a/frontend/src/app/main/ui/workspace/viewport.scss b/frontend/src/app/main/ui/workspace/viewport.scss index 89ebd06403..cfd2209f7b 100644 --- a/frontend/src/app/main/ui/workspace/viewport.scss +++ b/frontend/src/app/main/ui/workspace/viewport.scss @@ -31,9 +31,6 @@ overflow: hidden; pointer-events: none; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; z-index: deprecated.$z-index-1; } diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss index d0f1549cb1..5225f42f27 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss @@ -10,10 +10,11 @@ .marker-shape { fill: var(--grid-editor-marker-color); } + .marker-text { fill: var(--app-white); font-size: calc(deprecated.$s-12 / var(--zoom)); - font-family: worksans; + font-family: worksans, vazirmatn, sans-serif; } } @@ -36,7 +37,7 @@ background: none; border: 0; color: var(--grid-editor-marker-text); - font-family: worksans; + font-family: worksans, vazirmatn, sans-serif; font-size: calc(deprecated.$fs-12 / var(--zoom)); font-weight: 400; margin: 0; @@ -119,9 +120,10 @@ .grid-actions-container { @include deprecated.flexRow; + background: var(--panel-background-color); border-radius: deprecated.$br-12; - box-shadow: 0px 0px deprecated.$s-12 0px var(--menu-shadow-color); + box-shadow: 0 0 deprecated.$s-12 0 var(--menu-shadow-color); gap: deprecated.$s-8; height: deprecated.$s-48; margin-left: -50%; @@ -139,22 +141,25 @@ } .locate-btn { - @extend .button-secondary; + @extend %button-secondary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-20; font-size: deprecated.$fs-11; } .done-btn { - @extend .button-primary; + @extend %button-primary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-20; font-size: deprecated.$fs-11; } .close-btn { - @extend .button-tertiary; + @extend %button-tertiary; + svg { - @extend .button-icon; + @extend %button-icon; } } diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss index 94c86e6a8d..e079d01f1a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss @@ -39,7 +39,9 @@ .topbar-btn { --pathbar-icon-color: var(--color-foreground-secondary); - @extend .button-tertiary; + + @extend %button-tertiary; + height: deprecated.$s-36; width: deprecated.$s-36; flex-shrink: 0; @@ -50,11 +52,13 @@ &.is-toggled { --pathbar-icon-color: var(--button-radio-foreground-color-active); + background-color: var(--button-radio-background-color-active); } .pathbar-icon { - @extend .button-icon; + @extend %button-icon; + stroke: var(--pathbar-icon-color); } } diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.scss b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.scss index fbbe82c72e..87d3abe4bc 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.scss +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.scss @@ -5,11 +5,8 @@ // Copyright (c) KALEIDOS INC .pixel-overlay { - left: 0; + inset: 0; pointer-events: initial; position: absolute; - top: 0; - right: 0; - bottom: 0; z-index: 1; } diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss index d71cd38e21..e429851ac2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.scss +++ b/frontend/src/app/main/ui/workspace/viewport/presence.scss @@ -8,7 +8,7 @@ .profile-name { width: fit-content; - font-family: worksans; + font-family: worksans, vazirmatn, sans-serif; padding: 2px 12px; border-radius: deprecated.$br-4; display: flex; diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss index 802dc32ab7..484ae669d9 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss @@ -10,6 +10,7 @@ .viewport-actions-path { pointer-events: none; position: absolute; + --actions-toolbar-position-y: #{deprecated.$s-28}; --actions-toolbar-offset-y: #{deprecated.$s-6}; @@ -24,6 +25,7 @@ .viewport-actions-container { @include deprecated.flexRow; + background: var(--panel-background-color); border-radius: deprecated.$br-12; box-shadow: 0 0 deprecated.$s-12 0 var(--menu-shadow-color); @@ -45,7 +47,8 @@ } .done-btn { - @extend .button-primary; + @extend %button-primary; + text-transform: uppercase; padding: deprecated.$s-8 deprecated.$s-20; font-size: deprecated.$fs-11; diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss index 319888776c..4a1b949374 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss @@ -21,13 +21,13 @@ .frame-flow-badge-content { @include t.use-typography("body-small"); + display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); border-radius: $br-6; - padding-inline-start: var(--sp-xs); - padding-inline-end: var(--sp-s); + padding-inline: var(--sp-xs) var(--sp-s); height: var(--sp-xxl); background-color: var(--frame-flow-badge-background-color); color: var(--frame-flow-badge-foreground-color); @@ -47,6 +47,7 @@ .frame-title-label { @include t.use-typography("body-small"); + text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -56,6 +57,7 @@ .frame-title-input { @include t.use-typography("body-small"); + flex-grow: 1; width: 100%; max-width: initial; @@ -73,6 +75,7 @@ cursor: pointer; fill: var(--button-add-background-color); + &:hover { --button-add-background-color: var(--button-add-background-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.scss b/frontend/src/app/main/ui/workspace/viewport_wasm.scss index a83fde4650..44cb86ce00 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.scss +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.scss @@ -29,10 +29,7 @@ overflow: hidden; pointer-events: none; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; z-index: 10; } @@ -40,7 +37,7 @@ position: fixed; inset: 0; z-index: 100; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 50%); display: grid; place-items: center; cursor: default; diff --git a/frontend/stylelint.config.mjs b/frontend/stylelint.config.mjs new file mode 100644 index 0000000000..18bd1e592b --- /dev/null +++ b/frontend/stylelint.config.mjs @@ -0,0 +1,67 @@ +import postcssScss from "postcss-scss"; + +/** @type {import("stylelint").Config} */ +export default { + extends: ["stylelint-config-standard-scss"], + plugins: ["stylelint-scss", "stylelint-use-logical-spec"], + overrides: [ + { + files: ["**/*.scss"], + customSyntax: postcssScss, + }, + ], + rules: { + "at-rule-no-unknown": null, + "declaration-property-value-no-unknown": null, + "selector-pseudo-class-no-unknown": [ + true, + { ignorePseudoClasses: ["global"] }, // TODO: Avoid global selector usage and remove this exception + ], + + // scss + "scss/comment-no-empty": null, + "scss/at-rule-no-unknown": true, + // TODO: this rule should be enabled to follow scss conventions + "scss/load-no-partial-leading-underscore": null, + // This allows using the characters - or _ as a prefix and is ISO compliant with the Sass specification. + "scss/dollar-variable-pattern": "^[-_]?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", + // This allows using the characters - or _ as a prefix and is ISO compliant with the Sass specification. + "scss/at-mixin-pattern": "^[-_]?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", + + // TODO: Enable rules secuentially + // // Using quotes + // "font-family-name-quotes": "always-unless-keyword", + // "function-url-quotes": "always", + // "selector-attribute-quotes": "always", + // // Disallow vendor prefixes + // "at-rule-no-vendor-prefix": true, + // "media-feature-name-no-vendor-prefix": true, + // "property-no-vendor-prefix": true, + // "selector-no-vendor-prefix": true, + // "value-no-vendor-prefix": true, + // // Specificity + // "no-descending-specificity": null, + // "max-nesting-depth": 3, + // "selector-max-compound-selectors": 3, + // "selector-max-specificity": "1,2,1", + // // Miscellanea + // "color-named": "never", + // "declaration-no-important": true, + // "declaration-property-unit-allowed-list": { + // "font-size": ["rem"], + // "/^animation/": ["s"], + // }, + // // 'order/properties-alphabetical-order': true, + // "selector-max-type": 1, + // "selector-type-no-unknown": true, + // // Notation + // "font-weight-notation": "numeric", + // // URLs + // "function-url-no-scheme-relative": true, + // "liberty/use-logical-spec": "always", + // "selector-class-pattern": null, + // "alpha-value-notation": null, + // "color-function-notation": null, + // "value-keyword-case": null, + }, +};