Revert media queries change, and enforce modern colors

.stylelintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+    extends: 'stylelint-config-standard-scss',
+    rules: {
+        'no-descending-specificity': null,
+        'number-max-precision': 5,
+        'value-keyword-case': [
+            'lower',
+            {
+                // CSS Color Module Level 3 says currentColor, Level 4 candidate says currentcolor
+                // Sticking to Level 3 for now
+                camelCaseSvgKeywords: true,
+            },
+        ],
+        // Sadly Safari only started supporting the range syntax of media queries in 2023, so let's switch to that
+        // ('context' value) in 2024, once support is better https://caniuse.com/?search=range%20context
+        'media-feature-range-notation': 'prefix',
+        'selector-class-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9-]+)?$',
+            {
+                message: 'Expected class selector to match Block__Element--Modifier or plain snake-case',
+            },
+        ],
+        'selector-id-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9_-]+)?$',
+            {
+                message: 'Expected id selector to match Block__Element--Modifier or plain kebak-case',
+            },
+        ],
+        'keyframes-name-pattern': [
+            '^[A-Za-z0-9_-]+__[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected keyframe name to match Block__Animation',
+            },
+        ],
+        'scss/dollar-variable-pattern': [
+            '^[A-Za-z_]+[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected variable to match kebab-case or snake_case',
+            },
+        ],
+        'scss/operator-no-newline-after': null,
+        'scss/at-extend-no-missing-placeholder': null,
+        'scss/comment-no-empty': null,
+    },
+}

frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss

@@ -12,7 +12,7 @@
         max-width: 60%;
         min-width: 30rem;
 
-        @media (width <= 1200px) {
+        @media (max-width: 1200px) {
             position: fixed;
             top: 0;
             right: 0;

frontend/src/lib/components/CommandPalette/index.scss

@@ -24,13 +24,13 @@
     background-color: var(--bg-3000-dark);
     overflow: hidden;
 
-    @media (width <= 500px) {
+    @media (max-width: 500px) {
         top: 10%;
         max-height: 80%;
         width: 100%;
     }
 
-    @media (height <= 500px) {
+    @media (max-height: 500px) {
         top: 0%;
         max-height: 100%;
         max-width: 90%;

frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss

@@ -359,7 +359,7 @@
     &.LemonButtonWithSideAction__spacer--divider {
         opacity: 0.17;
         padding-left: 0.375rem;
-        border-left: 1px solid currentcolor;
+        border-left: 1px solid currentColor;
     }
 
     .LemonButton--small & {

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss

@@ -42,7 +42,7 @@
                 border-radius: 100%;
                 width: calc(var(--lemon-calendar-today-radius) * 2);
                 height: calc(var(--lemon-calendar-today-radius) * 2);
-                background: currentcolor;
+                background: currentColor;
             }
         }
     }

frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss

@@ -67,7 +67,7 @@
 
     &.LemonTabs__tab--active {
         color: var(--link);
-        text-shadow: 0 0 0.25px currentcolor; // Simulate increased weight without affecting width
+        text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
     }
 
     a {

frontend/src/lib/lemon-ui/Spinner/Spinner.scss

@@ -8,7 +8,7 @@
     --spinner-color: var(--brand-blue);
 
     &.Spinner--textColored {
-        --spinner-color: currentcolor;
+        --spinner-color: currentColor;
     }
 }
 

frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss

@@ -4,7 +4,7 @@
         display: flex;
         column-gap: 1rem;
 
-        @media (width <= 960px) {
+        @media (max-width: 960px) {
             display: block;
             width: auto;
         }
@@ -17,7 +17,7 @@
     .HalfColumn {
         width: 50%;
 
-        @media (width <= 960px) {
+        @media (max-width: 960px) {
             width: 100%;
         }
     }

frontend/src/scenes/dashboard/Dashboard.scss

@@ -28,7 +28,7 @@
         }
     }
 
-    @media (width <= 768px) {
+    @media (max-width: 768px) {
         flex-direction: column;
 
         .dashboard-meta {

frontend/src/scenes/insights/views/WorldMap/WorldMap.scss

@@ -4,7 +4,7 @@
     color: var(--border);
 
     .landxx {
-        fill: currentcolor;
+        fill: currentColor;
         stroke: var(--bg-light);
         stroke-width: 0.125rem;
         fill-rule: evenodd;

frontend/src/scenes/instance/SystemStatus/index.scss

@@ -2,7 +2,7 @@
     margin-bottom: 64px;
 
     .metric-column {
-        @media (width >= 750px) {
+        @media (min-width: 750px) {
             width: 33%;
         }
     }

frontend/src/scenes/surveys/SurveyView.scss

@@ -3,7 +3,7 @@
     column-gap: 10px;
 }
 
-@media screen and (width <= 1024px) {
+@media screen and (max-width: 1024px) {
     .masonry-container {
         column-count: 2;
     }

frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss

@@ -7,7 +7,7 @@
         .fh-item {
             width: calc(100% * (1 / 2) - 8px);
 
-            @media (width <= 599px) {
+            @media (max-width: 599px) {
                 width: calc(100% - 8px);
             }
 

frontend/src/styles/global.scss

@@ -434,7 +434,7 @@ input::-ms-clear {
         cursor: pointer;
     }
 
-    @media screen and (width >= 750px) {
+    @media screen and (min-width: 750px) {
         font-size: 1rem;
         line-height: 2rem;