Fix perspective in Firefox and Chrome (#88)

* fix: set default perspective to none instead of 0

* fix: add default none to perspective

* fix: browser specific perspective bug

Co-authored-by: Miles Ingram <[email protected]>

Author: mattaningram

docs/src/utils/xyzVariables.js

@@ -129,7 +129,7 @@ export const xyzOpacityLevels = {
 
 export const xyzPerspectiveLevels = {
 	'default': 'var(--xyz-perspective-default)',
-	'0': '0px',
+	'0': 'none',
 	'1': '500px',
 	'2': '1000px',
 	'3': '1500px',

packages/core/src/_core.scss

@@ -5,12 +5,13 @@
 
 @mixin xyz-core() {
   @include xyz-include-once('core') {
+    
     // generates core keyframes
     @include xyz-make-keyframes('keyframes', false) using ($mode) {
       from {
         $opacity: xyz-var('opacity', $mode, 1);
 
-        $perspective: xyz-var('perspective', $mode, 0);
+        $perspective: xyz-var('perspective', $mode, var(--xyz-perspective-none));
         $translate-x: xyz-var('translate-x', $mode, 0);
         $translate-y: xyz-var('translate-y', $mode, 0);
         $translate-z: xyz-var('translate-z', $mode, 0);
@@ -38,6 +39,12 @@
 
     // sets defaults for xyz variables
     :root {
+      --xyz-perspective-none: 0;
+
+      @supports (transform: perspective(none)) {
+        --xyz-perspective-none: none;
+      }
+
       @each $name, $val in $xyz-defaults-map {
         --xyz-#{$name}-default: #{$val};
       }

packages/core/src/_variables.scss

@@ -131,7 +131,7 @@ $xyz-opacity-levels: (
 
 $xyz-perspective-levels: (
   'default': var(--xyz-perspective-default),
-  '0': 0px,
+  '0': var(--xyz-perspective-none),
   '1': 500px,
   '2': 1000px,
   '3': 1500px,