@raxium/themes 0.1.4 → 0.1.5

package/dist/razer/index.css

@@ -103,7 +103,7 @@
     --text-2xs--line-height: 1.25;
     --font-rob-bold: Roboto-Bold, var(--font-sans);
     --font-rz-bold: RazerF5-Bold, var(--font-sans);
-    --outline: 2px solid var(--color-rz-green);
+    --outline: 2px solid transparent;
     --disabled-opacity: var(--opacity-50, 0.5);
     --color-rui-parimary: var(--color-rz-green);
     --color-rui-toggle-text: var(--color-h88);
@@ -115,6 +115,7 @@
     --color-rui-warning: var(--color-rz-orange);
     --color-rui-close: var(--color-h88);
     --color-rui-close-hover: var(--color-hff);
+    --shadow-rui-outline: 0 0 0 1px oklch(76.87% 0.2343 141.32);
   }
 }
 @layer base {
@@ -1758,7 +1759,7 @@
   }
   *:focus-visible {
     outline: var(--outline);
-    outline-offset: 2px;
+    box-shadow: var(--shadow-rui-outline);
   }
 }
 @layer components {
@@ -2467,28 +2468,28 @@
     &[data-theme-bordered] {
       border-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       &[data-theme-bordered] {
         border-color: var(--color-h33);
       }
     }
-    &:where([data-theme-surface=razer], [data-theme-surface=razer] *) {
+    &:where([data-theme-surface=razer]) {
       border-color: var(--color-h00);
     }
   }
   .rui-tooltip-content, .rui-tooltip-content-inner {
     background-color: var(--color-hff);
     color: var(--color-h00);
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       background-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       color: var(--color-hff);
     }
-    &:where([data-theme-surface=razer], [data-theme-surface=razer] *) {
+    &:where([data-theme-surface=razer]) {
       background-color: var(--color-rz-green);
     }
-    &:where([data-theme-surface=razer], [data-theme-surface=razer] *) {
+    &:where([data-theme-surface=razer]) {
       color: var(--color-h00);
     }
   }
@@ -2609,7 +2610,7 @@
     &[data-theme-bordered] {
       border-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       &[data-theme-bordered] {
         border-color: var(--color-h33);
       }
@@ -2618,10 +2619,10 @@
   .rui-hover-card-content, .rui-hover-card-content-inner {
     background-color: var(--color-hff);
     color: var(--color-h00);
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       background-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       color: var(--color-hff);
     }
   }
@@ -2634,7 +2635,7 @@
     &[data-theme-bordered] {
       border-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       &[data-theme-bordered] {
         border-color: var(--color-h33);
       }
@@ -2643,10 +2644,10 @@
   .rui-popover-content, .rui-popover-content-inner {
     background-color: var(--color-hff);
     color: var(--color-h00);
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       background-color: var(--color-h00);
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       color: var(--color-hff);
     }
   }
@@ -2657,7 +2658,7 @@
         color: var(--color-h00);
       }
     }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
+    &:where([data-theme-surface=dark]) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-rui-close-hover);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@raxium/themes",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Themes for Raxium",
   "author": {
     "name": "Hwacc",

package/src/razer/preset.css

@@ -2,9 +2,9 @@
 
 @custom-variant skin-razer (&:where(html[data-theme-skin=razer], html[data-theme-skin=razer] *));
 
-@custom-variant surface-dark (&:where([data-theme-surface=dark], [data-theme-surface=dark] *));
-@custom-variant surface-light (&:where([data-theme-surface=light], [data-theme-surface=light] *));
-@custom-variant surface-razer (&:where([data-theme-surface=razer], [data-theme-surface=razer] *));
+@custom-variant surface-dark (&:where([data-theme-surface=dark]));
+@custom-variant surface-light (&:where([data-theme-surface=light]));
+@custom-variant surface-razer (&:where([data-theme-surface=razer]));
 
 @custom-variant success (&:where([data-type=success], [data-type=success] *));
 @custom-variant error (&:where([data-type=error], [data-type=error] *));
@@ -119,7 +119,7 @@
   --radius-lg: calc(var(--radius) + 0.25rem); /* 6px */
 
   /* Other */
-  --outline: 2px solid var(--color-rz-green);
+  --outline: 2px solid transparent;
   --disabled-opacity: var(--opacity-50, 0.5);
 
   /* RUI Theme*/
@@ -147,6 +147,7 @@
 
   --shadow-rui-popper: 0 0.25rem 0.375rem 0 oklch(0% 0 0 / 80%);
   --shadow-rui-popper-top: 0 -0.25rem 0.375rem 0 oklch(0% 0 0 / 80%);
+  --shadow-rui-outline: 0 0 0 1px oklch(76.87% 0.2343 141.32)
 }
 
 @theme inline {
@@ -170,7 +171,7 @@
 
   *:focus-visible {
     outline: var(--outline);
-    outline-offset: 2px;
+    box-shadow: var(--shadow-rui-outline);
   }
 }