🐛 Fix lint invalid CSS props (#8907)

* 🐛 Fix lint invalid CSS props

* 🐛 Fix named colors in favor of modern notation or custom properties

* 🐛 Removed multiple combined selectors

* 🐛 Convert alpha value to numeric

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 {

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;

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;
   }

frontend/src/app/main/ui/dashboard/sidebar.scss

@@ -255,7 +255,6 @@
 .sidebar-nav {
   margin: 0;
   user-select: none;
-  overflow: none;
 }
 
 .pinned-projects {

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;

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);
   }
 }

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;

frontend/src/app/main/ui/ds/utilities/swatch.scss

@@ -11,7 +11,7 @@
 @property --solid-color-overlay {
   syntax: "<color>";
   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);

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;
     }

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;
     }

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;

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);

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;
+      }
     }
   }
 }

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);
   }
 }
 

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);
   }
 }

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));
   }
 }
 

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;
 }

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;

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;

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;

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;

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",
   },
 };