removes the 3 unused mixins

build/to-json.js

@@ -1,13 +1,6 @@
 export const toJSON = props =>
   Object.entries(props)
     .reduce((bundle_entries, [key, val]) => {
-      if (key === '*') {
-        Object.entries(val).forEach(token => {
-          bundle_entries.unshift(token)
-        })
-      }
-      else 
-        bundle_entries.unshift([key,val])
-
+      bundle_entries.unshift([key,val])
       return bundle_entries
     }, [])

build/to-stylesheet.js

@@ -14,14 +14,6 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
     if (prop.includes('-@'))
       return
 
-    if (prop === '*') {
-      appendedMeta += Object.entries(val).reduce((list, [mixin, cssval]) => {
-        return list += `\n  ${mixin}: ${cssval};`
-      }, '\n* {')
-      appendedMeta += '\n}\n'
-      return
-    }
-
     if (prefix)
       prop = `--${prefix}-` + prop.slice(2)
 
@@ -36,7 +28,7 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
   if (filename.includes('shadows')) {
     appendedMeta += `
 @media (--OSdark) {
-  * {
+  :where(html) {
     --shadow-strength: 25%;
     --shadow-color: 220 40% 2%;
   }

docsite/index.css

@@ -213,14 +213,12 @@ section.hero {
   @media (--md-n-above) { font-size: var(--font-size-fluid-3) }
 
   & > * {
-    --op-gradient-direction: to right;
     background: var(--gradient-1) fixed;
     background-size: 13ch 50%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
     @nest [data-theme="dark"] & {
-      --op-gradient-direction: to bottom right;
       background: var(--gradient-4) fixed;
       background-size: 12ch 7ch;
       -webkit-background-clip: text;

docsite/index.html

@@ -1331,11 +1331,9 @@ <h5>The Props</h5>
           <h5>Hero Header Sample</h5>
           <pre class="language-css"><code>
             header {
-              --op-gradient-direction: to top left;
               background-image: var(--gradient-5);
 
               @media (--OSdark) {
-                --op-gradient-direction: to bottom right;
                 background-image: var(--gradient-15);
               }
             }

package.json

@@ -3,7 +3,7 @@
   "name": "open-props",
   "author": "Adam Argyle",
   "license": "MIT",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/argyleink/open-props"

src/index.js

@@ -1,5 +1,3 @@
-import {flattenMixins} from '../build/utils.js'
-
 import Animations from './props.animations.js'
 import Sizes from './props.sizes.js'
 import Colors from './props.colors.js'
@@ -21,7 +19,7 @@ export default OpenProps = {
   ...Aspects,
   ...Easings,
   ...SVG,
-  ...flattenMixins(Gradients),
-  ...flattenMixins(Shadows),
+  ...Gradients,
+  ...Shadows,
   ...Zindex,
 }

src/props.gradients.css

@@ -1,4 +1,5 @@
 :where(html) {
+  --op-gradient-direction: to bottom right;
   --gradient-1: linear-gradient(var(--op-gradient-direction),#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
   --gradient-2: linear-gradient(var(--op-gradient-direction),#48005c, #8300e2, #a269ff);
   --gradient-3: 
@@ -70,7 +71,3 @@
   --noise-filter-4: contrast(200%) brightness(500%);
   --noise-filter-5: contrast(200%) brightness(1000%);
 }
-
-* {
-  --op-gradient-direction: to bottom right;
-}

src/props.gradients.js

@@ -1,7 +1,5 @@
 export default {
-  '*': {
-    '--op-gradient-direction': 'to bottom right',  
-  },
+  '--op-gradient-direction': 'to bottom right',  
 
   '--gradient-1': 'linear-gradient(var(--op-gradient-direction),#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b)',
   '--gradient-2': 'linear-gradient(var(--op-gradient-direction),#48005c, #8300e2, #a269ff)',

src/props.shadows.css

@@ -1,6 +1,8 @@
 @import 'props.media.css';
 
 :where(html) {
+  --shadow-color: 220 3% 15%;
+  --shadow-strength: 1%;
   --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
   --shadow-2: 
     0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
@@ -40,13 +42,8 @@
   --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
 }
 
-* {
-  --shadow-color: 220 3% 15%;
-  --shadow-strength: 1%;
-}
-
 @media (--OSdark) {
-  * {
+  :where(html) {
     --shadow-strength: 25%;
     --shadow-color: 220 40% 2%;
   }

src/props.shadows.js

@@ -1,8 +1,6 @@
 export default {
-  '*': {
-    '--shadow-color': '220 3% 15%',
-    '--shadow-strength': '1%',
-  },
+  '--shadow-color': '220 3% 15%',
+  '--shadow-strength': '1%',
 
   '--shadow-1': '0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
   '--shadow-2': `