From 10cfd995257a9d80e3fe724767d35e660087b1f2 Mon Sep 17 00:00:00 2001 From: Xaviju Date: Wed, 8 Apr 2026 15:44:09 +0200 Subject: [PATCH] :bug: Fix lint invalid CSS props (#8907) * :bug: Fix lint invalid CSS props * :bug: Fix named colors in favor of modern notation or custom properties * :bug: Removed multiple combined selectors * :bug: Convert alpha value to numeric --- frontend/src/app/main/ui/comments.scss | 2 +- .../app/main/ui/components/button_link.scss | 2 +- .../src/app/main/ui/dashboard/comments.scss | 2 +- .../src/app/main/ui/dashboard/sidebar.scss | 1 - .../src/app/main/ui/dashboard/templates.scss | 12 ++--- .../src/app/main/ui/ds/buttons/_buttons.scss | 4 +- frontend/src/app/main/ui/ds/typography.scss | 20 ++++---- .../src/app/main/ui/ds/utilities/swatch.scss | 4 +- frontend/src/app/main/ui/exports/assets.scss | 2 +- frontend/src/app/main/ui/exports/files.scss | 2 +- frontend/src/app/main/ui/settings.scss | 6 +-- .../src/app/main/ui/settings/profile.scss | 4 +- frontend/src/app/main/ui/static.scss | 8 ++-- frontend/src/app/main/ui/viewer.scss | 2 +- .../app/main/ui/workspace/colorpicker.scss | 4 +- .../main/ui/workspace/colorpicker/ramp.scss | 4 +- .../app/main/ui/workspace/right_header.scss | 2 +- .../ui/workspace/shapes/text/v2_editor.scss | 3 +- .../viewport/grid_layout_editor.scss | 4 +- .../main/ui/workspace/viewport/presence.scss | 2 +- .../app/main/ui/workspace/viewport_wasm.scss | 2 +- frontend/stylelint.config.mjs | 48 +++++++++---------- 22 files changed, 70 insertions(+), 70 deletions(-) diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 546cfa0af4..79abfc420f 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -116,7 +116,7 @@ } .avatar-darken { - background: rgb(0 0 0 / 50%); + background: rgb(0 0 0 / 0.5); } .cover { diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss index b8b598f305..b3693cbdb0 100644 --- a/frontend/src/app/main/ui/components/button_link.scss +++ b/frontend/src/app/main/ui/components/button_link.scss @@ -12,7 +12,7 @@ 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; diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss index 9c1fc9b244..71f6fe7ebd 100644 --- a/frontend/src/app/main/ui/dashboard/comments.scss +++ b/frontend/src/app/main/ui/dashboard/comments.scss @@ -53,7 +53,7 @@ height: deprecated.$s-8; border: deprecated.$s-2 solid var(--color-background-tertiary); border-radius: 50%; - background: red; + background: var(--color-foreground-error); top: deprecated.$s-6; right: deprecated.$s-6; } diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index f2191747b4..922f6e99e7 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -255,7 +255,6 @@ .sidebar-nav { margin: 0; user-select: none; - overflow: none; } .pinned-projects { diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index 583e87d6ad..4ca5d92e47 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -19,17 +19,17 @@ flex-direction: column; height: px2rem(244); justify-content: flex-end; - margin-inline: px2rem(6); - margin-block-end: px2rem(6); + margin-inline: var(--sp-s); + margin-block-end: var(--sp-xs); position: absolute; - transition: bottom 300ms; + transition: inset-block-end 300ms; width: calc(100% - $sz-12); pointer-events: none; &.collapsed { inset-block-end: calc(-1 * px2rem(228)); background-color: transparent; - transition: bottom 300ms; + transition: inset-block-end 300ms; .title-btn { border-end-end-radius: $br-8; @@ -207,7 +207,7 @@ width: 100%; height: px2rem(136); margin-block-end: var(--sp-s); - border-radius: px2rem(5); + border-radius: $br-6; display: flex; justify-content: center; flex-direction: column; @@ -218,7 +218,7 @@ } .card-name { - padding: 0 px2rem(6); + padding: 0 var(--sp-s); display: flex; justify-content: space-between; height: $sz-24; diff --git a/frontend/src/app/main/ui/ds/buttons/_buttons.scss b/frontend/src/app/main/ui/ds/buttons/_buttons.scss index a3001d8311..41c9474839 100644 --- a/frontend/src/app/main/ui/ds/buttons/_buttons.scss +++ b/frontend/src/app/main/ui/ds/buttons/_buttons.scss @@ -72,7 +72,7 @@ &:active, &[aria-pressed="true"] { - box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%); + box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 0.2); } } @@ -122,6 +122,6 @@ &:active, &[aria-pressed="true"] { - box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%); + box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 0.2); } } diff --git a/frontend/src/app/main/ui/ds/typography.scss b/frontend/src/app/main/ui/ds/typography.scss index 7f27419cd0..36b4086fba 100644 --- a/frontend/src/app/main/ui/ds/typography.scss +++ b/frontend/src/app/main/ui/ds/typography.scss @@ -20,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; @@ -28,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; @@ -36,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; @@ -44,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; @@ -52,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; @@ -61,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; @@ -70,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; @@ -79,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; @@ -87,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; @@ -95,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 9daa4d9141..3052f5f6c3 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: rgb(0 0 0 / 0%); + initial-value: rgb(0 0 0 / 0); } .swatch { @@ -19,7 +19,7 @@ --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-background: repeating-conic-gradient(rgb(212 212 212) 0% 25%, rgb(255 255 255) 0% 50%); --checkerboard-size: 0.5rem 0.5rem; border: $b-1 solid var(--border-color); diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss index 4a8b358930..338daf19e7 100644 --- a/frontend/src/app/main/ui/exports/assets.scss +++ b/frontend/src/app/main/ui/exports/assets.scss @@ -196,7 +196,7 @@ left: 0; width: 100%; height: 50px; - background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%); + background: linear-gradient(to top, rgb(24 24 26 / 1) 0%, rgb(24 24 26 / 0) 100%); content: ""; pointer-events: none; } diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss index 9a149abc4c..ed33acb665 100644 --- a/frontend/src/app/main/ui/exports/files.scss +++ b/frontend/src/app/main/ui/exports/files.scss @@ -92,7 +92,7 @@ left: 0; width: 100%; height: 50px; - background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%); + background: linear-gradient(to top, rgb(24 24 26 / 1) 0%, rgb(24 24 26 / 0) 100%); content: ""; pointer-events: none; } diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index 4ee10be87e..91cbc781a5 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/frontend/src/app/main/ui/settings.scss @@ -205,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); @@ -219,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/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index 21249db182..115c33864a 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -311,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); diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss index 5f4c768792..7a5a694402 100644 --- a/frontend/src/app/main/ui/static.scss +++ b/frontend/src/app/main/ui/static.scss @@ -238,7 +238,7 @@ top: 0; left: 0; z-index: 100; - background-color: rgb(0 0 0 / 65%); + background-color: rgb(0 0 0 / 0.65); display: flex; justify-content: center; align-items: center; @@ -348,8 +348,10 @@ margin: deprecated.$s-20 0; } - form div { - margin-bottom: deprecated.$s-8; + form { + div { + margin-bottom: deprecated.$s-8; + } } } } diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index d4fab6c26f..b64ebe2b79 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -173,7 +173,7 @@ left: 0; &.visible { - background-color: rgb(0 0 0 / 20%); + background-color: rgb(0 0 0 / 0.2); } } diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index a68182b24a..5de25d32a1 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -122,7 +122,7 @@ background: linear-gradient(180deg, var(--color-foreground-secondary), transparent); &.selected { - background: linear-gradient(to bottom, rgb(126 255 245 / 100%) 0%, rgb(126 255 245 / 20%) 100%); + background: linear-gradient(to bottom, rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%); border: $b-2 solid var(--colorpicker-details-color-selected); } } @@ -131,7 +131,7 @@ background: radial-gradient(transparent, var(--color-foreground-secondary)); &.selected { - background: radial-gradient(rgb(126 255 245 / 100%) 0%, rgb(126 255 245 / 20%) 100%); + background: radial-gradient(rgb(126 255 245 / 1) 0%, rgb(126 255 245 / 0.2) 100%); border: $b-2 solid var(--colorpicker-details-color-selected); } } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss index e5ba77ec55..952f6f344b 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss @@ -20,7 +20,7 @@ position: absolute; width: 100%; height: 100%; - background: linear-gradient(to right, #fff, rgb(255 255 255 / 0%)); + background: linear-gradient(to right, #fff, rgb(255 255 255 / 0)); } &::after { @@ -28,7 +28,7 @@ position: absolute; width: 100%; height: 100%; - background: linear-gradient(to top, #000, rgb(0 0 0 / 0%)); + background: linear-gradient(to top, #000, rgb(0 0 0 / 0)); } } diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index fd40e13768..2f6bbbeb52 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -253,7 +253,7 @@ height: 8px; border: 2px solid var(--color-background-tertiary); border-radius: 50%; - background: red; + background: var(--color-foreground-error); top: 6px; right: 6px; } 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 753a30ea46..b06ed24005 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 @@ -17,7 +17,7 @@ .text-editor-content { height: 100%; - font-family: sourcesanspro, sans-serif; + font-family: "sourcesanspro", sans-serif; outline: none; user-select: text; white-space: pre-wrap; @@ -53,7 +53,6 @@ display: inline; line-height: inherit; caret-color: var(--text-editor-caret-color); - white-space-collapse: pre; word-break: normal; overflow-wrap: break-word; tab-size: 2; 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 5225f42f27..a2f8f0b345 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 @@ -14,7 +14,7 @@ .marker-text { fill: var(--app-white); font-size: calc(deprecated.$s-12 / var(--zoom)); - font-family: worksans, vazirmatn, sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; } } @@ -37,7 +37,7 @@ background: none; border: 0; color: var(--grid-editor-marker-text); - font-family: worksans, vazirmatn, sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: calc(deprecated.$fs-12 / var(--zoom)); font-weight: 400; margin: 0; diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss index e429851ac2..32486a0244 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, vazirmatn, sans-serif; + 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_wasm.scss b/frontend/src/app/main/ui/workspace/viewport_wasm.scss index 44cb86ce00..99af2bee48 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.scss +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.scss @@ -37,7 +37,7 @@ position: fixed; inset: 0; z-index: 100; - background-color: rgb(0 0 0 / 50%); + background-color: rgb(0 0 0 / 0.5); display: grid; place-items: center; cursor: default; diff --git a/frontend/stylelint.config.mjs b/frontend/stylelint.config.mjs index 18bd1e592b..d0b144242f 100644 --- a/frontend/stylelint.config.mjs +++ b/frontend/stylelint.config.mjs @@ -30,38 +30,38 @@ export default { // TODO: Enable rules secuentially // // Using quotes - // "font-family-name-quotes": "always-unless-keyword", - // "function-url-quotes": "always", - // "selector-attribute-quotes": "always", + "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, + "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, + "no-descending-specificity": null, // "max-nesting-depth": 3, - // "selector-max-compound-selectors": 3, - // "selector-max-specificity": "1,2,1", + "selector-max-compound-selectors": 3, + "selector-max-specificity": "1,2,1", // // Miscellanea - // "color-named": "never", + "color-named": "never", // "declaration-no-important": true, - // "declaration-property-unit-allowed-list": { - // "font-size": ["rem"], - // "/^animation/": ["s"], - // }, + "declaration-property-unit-allowed-list": { + "font-size": ["rem"], + "/^animation/": ["s"], + }, // // 'order/properties-alphabetical-order': true, - // "selector-max-type": 1, - // "selector-type-no-unknown": true, + "selector-max-type": 1, + "selector-type-no-unknown": true, // // Notation - // "font-weight-notation": "numeric", + "font-weight-notation": "numeric", // // URLs - // "function-url-no-scheme-relative": true, + "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, + "selector-class-pattern": null, + "alpha-value-notation": "number", + "color-function-notation": "modern", + "value-keyword-case": "lower", }, };