nicolium: simplify?

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/styles/new/chats.scss

@@ -13,11 +13,11 @@
   background: white;
   box-shadow: 0 25px 75px -15px #0004;
 
-  &:where([dir="ltr"], [dir="ltr"] *) {
+  [dir="ltr"] & {
     right: 1.25rem;
   }
 
-  &:where([dir="rtl"], [dir="rtl"] *) {
+  [dir="rtl"] & {
     left: 1.25rem;
   }
 
@@ -231,7 +231,7 @@
     background-color: rgb(var(--color-gray-100));
   }
 
-  &:hover:is(.dark *) {
+  .dark &:hover {
     background-color: rgb(var(--color-gray-800));
   }
 
@@ -331,7 +331,7 @@
         color: rgb(var(--color-gray-600));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         color: rgb(var(--color-gray-500));
       }
 

packages/nicolium/src/styles/new/components.scss

@@ -306,7 +306,7 @@
     padding-bottom: 0.375rem;
     padding-right: 1rem;
 
-    &:where([dir="rtl"], [dir="rtl"] *) {
+    [dir="rtl"] & {
       padding-left: 1rem;
       padding-right: 0;
     }
@@ -342,7 +342,7 @@
     > .⁂-icon {
       margin-left: 0.25rem;
 
-      &:where([dir="rtl"], [dir="rtl"] *) {
+      [dir="rtl"] & {
         transform: rotate(180deg);
       }
     }
@@ -357,7 +357,7 @@ a.⁂-list-item,
     background-image: linear-gradient(to right, rgb(var(--color-gradient-start) / 0.2), rgb(var(--color-gradient-end) / 0.2));
   }
 
-  &:hover:is(.dark *) {
+  .dark &:hover {
     background-image: linear-gradient(to right, rgb(var(--color-gradient-start) / 0.05), rgb(var(--color-gradient-end) / 0.05));
   }
 }
@@ -427,7 +427,7 @@ a.⁂-list-item,
       height: 1.5rem;
       width: 1.5rem;
 
-      &:where([dir="rtl"], [dir="rtl"] *) {
+      [dir="rtl"] & {
         transform: rotate(180deg);
       }
     }
@@ -553,11 +553,11 @@ a.⁂-list-item,
       color: rgb(var(--color-gray-500));
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-gray-800));
     }
 
-    &:focus:is(.dark *) {
+    .dark &:focus {
       background-color: rgb(var(--color-primary-800));
     }
 
@@ -572,7 +572,7 @@ a.⁂-list-item,
         background-color: rgb(var(--color-gray-800));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         background-color: rgb(var(--color-gray-800));
       }
     }
@@ -606,11 +606,11 @@ a.⁂-list-item,
       color: rgb(var(--color-gray-500));
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-gray-800));
     }
 
-    &:focus:is(.dark *) {
+    .dark &:focus {
       background-color: rgb(var(--color-primary-800));
     }
   }
@@ -710,11 +710,11 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
         color: rgb(var(--color-gray-300));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         color: rgb(var(--color-gray-200));
       }
 
-      &:where([dir="rtl"], [dir="rtl"] *) {
+      [dir="rtl"] & {
         transform: rotate(180deg);
       }
     }

packages/nicolium/src/styles/new/compose.scss

@@ -64,7 +64,7 @@
       outline-color: rgb(var(--color-gray-800));
     }
 
-    &:focus-within:is(.dark *) {
+    .dark &:focus-within {
       border-color: rgb(var(--color-primary-500));
       outline-color: rgb(var(--color-primary-500));
     }
@@ -115,7 +115,7 @@
     align-items: center;
     gap: 1rem;
 
-    &:where([dir="rtl"], [dir="rtl"] *) {
+    [dir="rtl"] & {
       margin-left: 0;
       margin-right: auto;
     }
@@ -158,7 +158,7 @@
       opacity: 0.75;
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-primary-600));
     }
 
@@ -212,7 +212,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
         opacity: 0.75;
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         background-color: rgb(var(--color-primary-600));
       }
     }
@@ -295,7 +295,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
       padding-left: 0.5rem;
       padding-right: 0.5rem;
 
-      &:where([dir="rtl"], [dir="rtl"] *) {
+      [dir="rtl"] & {
         left: 0;
         right: auto;
       }
@@ -346,7 +346,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
         background-color: rgb(var(--color-gray-800));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         background-color: rgb(var(--color-gray-700));
       }
 
@@ -370,7 +370,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
         background-color: rgb(var(--color-gray-900));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         background-color: rgb(var(--color-gray-800));
       }
     }

packages/nicolium/src/styles/new/events.scss

@@ -243,7 +243,7 @@
       color: rgb(var(--color-gray-600));
     }
 
-    &:focus-within:is(.dark *) {
+    .dark &:focus-within {
       border-color: rgb(var(--color-primary-500));
     }
 

packages/nicolium/src/styles/new/forms.scss

@@ -68,7 +68,7 @@
       outline: 2px solid rgb(var(--color-gray-800));
     }
 
-    &:focus:is(.dark *) {
+    .dark &:focus {
       border-color: rgb(var(--color-primary-500));
       outline-color: rgb(var(--color-primary-500));
     }
@@ -97,7 +97,7 @@
     @include mixins.text($size: xs, $theme: muted);
     text-align: right;
 
-    &:where([dir="rtl"], [dir="rtl"] *) {
+    [dir="rtl"] & {
       text-align: left;
     }
 
@@ -444,7 +444,7 @@
   &--sm:has(input:checked) .⁂-toggle__knob {
     transform: translateX(0.875rem);
 
-    :is([dir='rtl']) & {
+    [dir='rtl'] & {
       transform: translateX(-0.875rem);
     }
   }
@@ -452,7 +452,7 @@
   &--md:has(input:checked) .⁂-toggle__knob {
     transform: translateX(1rem);
 
-    :is([dir='rtl']) & {
+    [dir='rtl'] & {
       transform: translateX(-1rem);
     }
   }

packages/nicolium/src/styles/new/layout.scss

@@ -91,7 +91,7 @@ body {
     box-shadow: none;
   }
 
-  &:where([dir="rtl"], [dir="rtl"] *) {
+  [dir="rtl"] & {
     right: 0.5rem;
     transform-origin: bottom right;
   }
@@ -157,7 +157,7 @@ body {
       color: rgb(var(--color-gray-100));
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-gray-800));
     }
 
@@ -362,7 +362,7 @@ body {
           color: rgb(var(--color-gray-600));
         }
 
-        &:hover:is(.dark *) {
+        .dark &:hover {
           color: rgb(var(--color-gray-500));
         }
       }
@@ -465,7 +465,7 @@ body {
       color: rgb(var(--color-gray-400));
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       color: rgb(var(--color-gray-200));
     }
 
@@ -775,7 +775,7 @@ body {
       color: #fff;
     }
 
-    &:where([dir="rtl"], [dir="rtl"] *) {
+    [dir="rtl"] & {
       transform: rotate(180deg);
     }
   }
@@ -1142,7 +1142,7 @@ body {
         color: rgb(var(--color-gray-600));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         color: rgb(var(--color-gray-500));
       }
     }

packages/nicolium/src/styles/new/settings.scss

@@ -88,7 +88,7 @@
       color: rgb(var(--color-danger-200));
     }
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-danger-500));
       color: rgb(var(--color-gray-100));
     }

packages/nicolium/src/styles/new/statuses.scss

@@ -236,7 +236,7 @@
     }
 
 
-    &:hover:is(.dark *) {
+    .dark &:hover {
       background-color: rgb(var(--color-primary-800));
       color: #fff;
     }
@@ -246,7 +246,7 @@
         color: rgb(var(--color-gray-600));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         color: #fff;
       }
     }
@@ -274,7 +274,7 @@
         color: rgb(var(--color-accent-300));
       }
 
-      &:hover:is(.dark *) {
+      .dark &:hover {
         color: rgb(var(--color-accent-300));
       }
 
@@ -289,7 +289,7 @@
           color: rgb(var(--color-success-400));
         }
 
-        &:hover:is(.dark *) {
+        .dark &:hover {
           color: rgb(var(--color-success-400));
         }
       }
@@ -520,7 +520,7 @@
           color: rgb(var(--color-success-400));
         }
 
-        &:hover:is(.dark *) {
+        .dark &:hover {
           color: rgb(var(--color-success-400));
         }
       }

packages/nicolium/src/styles/new/timelines.scss

@@ -133,7 +133,7 @@
     color: rgb(var(--color-gray-600));
   }
 
-  &:hover:is(.dark *) {
+  .dark &:hover {
     border-color: rgb(var(--color-primary-800));
     background-color: rgb(var(--color-primary-900));
   }