feat(styles/utilities): focus-ring color

Author: MM25Zamanian

packages/styles/src/css/cards.css

@@ -9,9 +9,9 @@
   }
 
   .focus-ring {
-    @apply outline outline-8 outline-offset-2 outline-[#0000] transition-[outline-color,outline-width] duration-100 focus-visible:duration-300 focus-visible:outline-outlineVariant focus-visible:outline-2;
+    @apply outline outline-8 outline-offset-2 outline-[#0000] transition-[outline-color,outline-width] duration-100 focus-visible:duration-300 focus-visible:outline-outline focus-visible:outline-2;
   }
   .focus-ring-inner {
-    @apply outline outline-2 -outline-offset-8 outline-[#0000] transition-[outline-color,outline-offset] duration-75 focus-visible:duration-300 focus-visible:outline-outlineVariant focus-visible:-outline-offset-2;
+    @apply outline outline-2 -outline-offset-8 outline-[#0000] transition-[outline-color,outline-offset] duration-75 focus-visible:duration-300 focus-visible:outline-outline focus-visible:-outline-offset-2;
   }
 }

packages/styles/src/css/utilities.css

@@ -8,32 +8,25 @@
 @import './css/scrollbar.css';
 @import './css/utilities.css';
 @import './css/typography.css';
-@import './css/cards.css';
 
-gecut-root,
-.root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-}
+@import './components/components.css';
 
-main[role='main'] {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
+@layer base {
+  gecut-root,
+  .root {
+    @apply flex flex-col h-full w-full overflow-hidden relative;
+  }
 
-.gecut-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: var(--_gap, 8px);
-}
-.gecut-page.scrollable {
-  overflow-y: auto;
+  main[role='main'] {
+    @apply flex flex-col flex-1 overflow-hidden relative;
+  }
+
+  .gecut-page,
+  .page {
+    &.scrollable {
+      @apply overflow-x-auto;
+    }
+
+    @apply flex flex-col h-full gap-2;
+  }
 }