From 5cfee223bc7f341138c3dda10d8011430fb30ca3 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 21 Jan 2022 22:18:44 -0800 Subject: [PATCH 1/9] fixes file input buttons not matching --- package.json | 2 +- src/extra/normalize.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 454546e6..b5d1d2df 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.1.5", + "version": "1.1.6", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props" diff --git a/src/extra/normalize.css b/src/extra/normalize.css index 7964a429..c4559ac3 100644 --- a/src/extra/normalize.css +++ b/src/extra/normalize.css @@ -113,7 +113,8 @@ block-size: auto; } -:where(input, button, textarea, select) { +:where(input, button, textarea, select), +:where(input[type="file"])::-webkit-file-upload-button { font: inherit; font-size: inherit; color: inherit; From b16fe44169cb76f5d2340e960fa25233254b5f41 Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Sun, 23 Jan 2022 18:13:55 -0800 Subject: [PATCH 2/9] fix: Update props.animations formatting (#157) * fix: Adjust animations formatting * fix: Adjust animations formatting --- src/props.animations.css | 2 +- src/props.animations.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/props.animations.css b/src/props.animations.css index 64d79f78..f2a96de1 100644 --- a/src/props.animations.css +++ b/src/props.animations.css @@ -94,7 +94,7 @@ @keyframes bounce { 25% { transform: translateY(-20%) } 40% { transform: translateY(-3%) } - 0%, 60%,100% { transform: translateY(0) } + 0%, 60%, 100% { transform: translateY(0) } } @keyframes pulse { 50% { transform: scale(.9,.9) } diff --git a/src/props.animations.js b/src/props.animations.js index 1a69f47b..26ec4836 100644 --- a/src/props.animations.js +++ b/src/props.animations.js @@ -110,7 +110,7 @@ export default { @keyframes bounce { 25% { transform: translateY(-20%) } 40% { transform: translateY(-3%) } - 0%, 60%,100% { transform: translateY(0) } + 0%, 60%, 100% { transform: translateY(0) } }`, "--animation-pulse": "pulse 2s var(--ease-out-3) infinite", "--animation-pulse-@": ` From dd15cd15736e87352c9ac388c84382adda6bfbcb Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 26 Jan 2022 00:22:05 -0800 Subject: [PATCH 3/9] fixes #125 (#162) * fixes #125 * teach tokenizer builds to expando * mixin props * flatten mixin equipped prop sets * add restored css files back in * move build script out of src * push updated header size * better organized build files --- build/props.js | 91 +++++++++++++++++++++ build/to-figmatokens.js | 39 +++++++++ build/to-json.js | 13 +++ build/to-stylesheet.js | 48 ++++++++++++ build/to-tokens.js | 18 +++++ build/utils.js | 17 ++++ package.json | 6 +- src/_create-props.js | 170 ---------------------------------------- src/index.js | 6 +- src/props.gradients.css | 5 +- src/props.gradients.js | 6 +- src/props.shadows.css | 10 ++- src/props.shadows.js | 6 +- src/props.sizes.css | 2 +- 14 files changed, 253 insertions(+), 184 deletions(-) create mode 100644 build/props.js create mode 100644 build/to-figmatokens.js create mode 100644 build/to-json.js create mode 100644 build/to-stylesheet.js create mode 100644 build/to-tokens.js create mode 100644 build/utils.js delete mode 100644 src/_create-props.js diff --git a/build/props.js b/build/props.js new file mode 100644 index 00000000..0feb0bd1 --- /dev/null +++ b/build/props.js @@ -0,0 +1,91 @@ +import fs from 'fs' + +import Animations from '../src/props.animations.js' +import Sizes from '../src/props.sizes.js' +import * as OpenColors from '../src/props.colors.js' +import Fonts from '../src/props.fonts.js' +import Borders from '../src/props.borders.js' +import Aspects from '../src/props.aspects.js' +import Easings from '../src/props.easing.js' +import Gradients from '../src/props.gradients.js' +import Shadows from '../src/props.shadows.js' +import SVG from '../src/props.svg.js' +import Zindex from '../src/props.zindex.js' + +import {buildPropsStylesheet} from './to-stylesheet.js' +import {toJSON} from './to-json.js' +import {toTokens} from './to-tokens.js' +import {toFigmaTokens} from './to-figmatokens.js' + +const [,,prefix,useWhere] = process.argv +const selector = useWhere === 'true' ? ':where(html)' : 'html' + +const mainbundle = { + 'props.fonts.css': Fonts, + 'props.sizes.css': Sizes, + 'props.easing.css': Easings, + 'props.zindex.css': Zindex, + 'props.shadows.css': Shadows, + 'props.aspects.css': Aspects, + 'props.colors.css': OpenColors.default, + // 'props.svg.css': SVG, + 'props.gradients.css': Gradients, + 'props.animations.css': Animations, + 'props.borders.css': Borders, +} + +const individual_colors = { + 'props.gray.css': OpenColors.Gray, + 'props.red.css': OpenColors.Red, + 'props.pink.css': OpenColors.Pink, + 'props.grape.css': OpenColors.Grape, + 'props.violet.css': OpenColors.Violet, + 'props.indigo.css': OpenColors.Indigo, + 'props.blue.css': OpenColors.Blue, + 'props.cyan.css': OpenColors.Cyan, + 'props.teal.css': OpenColors.Teal, + 'props.green.css': OpenColors.Green, + 'props.lime.css': OpenColors.Lime, + 'props.yellow.css': OpenColors.Yellow, + 'props.orange.css': OpenColors.Orange, +} + +// gen design tokens +const jsonbundle = toJSON({ + ...Object.values(individual_colors) + .reduce((colors, color) => + Object.assign(colors, color), {}), + ...Sizes, + ...Easings, + ...Zindex, + ...Aspects, + ...Gradients, + ...Borders, +}) + +const designtokens = toTokens(jsonbundle) +const JSONtokens = fs.createWriteStream('../open-props.tokens.json') +JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2)) + +// gen figma tokens +const figmatokens = toFigmaTokens(jsonbundle) +const FigmaTokens = fs.createWriteStream('../open-props.figma-tokens.json') +FigmaTokens.end(JSON.stringify(figmatokens, null, 2)) + +const figmatokensSYNC = { 'open-props': { ...figmatokens } } +const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json') +FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2)) + +// gen prop variants +Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => { + buildPropsStylesheet({filename, props}, {selector, prefix}) +}) + +// gen index.css +const entry = fs.createWriteStream('../src/index.css') +entry.write(`@import 'props.media.css'; +`) +Object.keys(mainbundle).forEach(filename => { + entry.write(`@import '${filename}';\n`) +}) +entry.end() \ No newline at end of file diff --git a/build/to-figmatokens.js b/build/to-figmatokens.js new file mode 100644 index 00000000..dcd32f4d --- /dev/null +++ b/build/to-figmatokens.js @@ -0,0 +1,39 @@ +export const toFigmaTokens = props => { + const figmatokens = {} + + props.map(([key, token]) => { + let meta = {} + + let isLength = key.includes('size') && !key.includes('border-size') + let isBorder = key.includes('border-size') + let isRadius = key.includes('radius') + let isShadow = key.includes('shadow') + let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] + let isColor = colors.some(color => key.includes(color)) + + if (isLength) meta.type = 'sizing' + else if (isBorder) meta.type = 'borderWidth' + else if (isRadius) meta.type = 'borderRadius' + else if (isShadow) meta.type = 'boxShadow' + else if (isColor) meta.type = 'color' + else meta.type = 'other' + + if (!(meta.type in figmatokens)) figmatokens[meta.type] = {} + + if (isColor) { + let color = /--(.+?)-/.exec(key)[1] + if (!(color in figmatokens[meta.type])) figmatokens[meta.type][color] = {} + figmatokens[meta.type][color][key] = { + value: token, + ...meta, + } + } else { + figmatokens[meta.type][key] = { + value: token, + ...meta, + } + } + }) + + return figmatokens +} \ No newline at end of file diff --git a/build/to-json.js b/build/to-json.js new file mode 100644 index 00000000..f2623761 --- /dev/null +++ b/build/to-json.js @@ -0,0 +1,13 @@ +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]) + + return bundle_entries + }, []) \ No newline at end of file diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js new file mode 100644 index 00000000..8d79c077 --- /dev/null +++ b/build/to-stylesheet.js @@ -0,0 +1,48 @@ +import fs from 'fs' + +export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => { + const file = fs.createWriteStream("../src/" + filename) + + let appendedMeta = '' + + if (filename.includes('shadows')) + file.write(`@import 'props.media.css';\n\n`) + + file.write(`${selector} {\n`) + + Object.entries(props).forEach(([prop, val]) => { + 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) + + if (prop.includes('animation')) { + let keyframes = props[`${prop}-@`] + appendedMeta += keyframes + } + + file.write(` ${prop}: ${val};\n`) + }) + + if (filename.includes('shadows')) { + appendedMeta += ` +@media (--OSdark) { + * { + --shadow-strength: 25%; + --shadow-color: 220 40% 2%; + } +}` + } + + file.write('}\n') + file.end(appendedMeta) +} \ No newline at end of file diff --git a/build/to-tokens.js b/build/to-tokens.js new file mode 100644 index 00000000..3811d9cf --- /dev/null +++ b/build/to-tokens.js @@ -0,0 +1,18 @@ +export const toTokens = props => + props.map(([key, token]) => { + let meta = {} + + let isLength = key.includes('size') + let isEasing = key.includes('ease') + let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] + let isColor = colors.some(color => key.includes(color)) + + if (isLength) meta.type = 'dimension' + else if (isEasing) meta.type = 'cubic-bezier' + else if (isColor) meta.type = 'color' + + return [key, { + value: token, + ...meta, + }] + }) \ No newline at end of file diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 00000000..f942854f --- /dev/null +++ b/build/utils.js @@ -0,0 +1,17 @@ +export const flattenMixins = list => { + let entries = Object.entries(list) + + let flat = entries.reduce((bundle_entries, [key, val]) => { + if (key === '*') { + Object.entries(val).forEach(token => { + bundle_entries.unshift(token) + }) + } + else + bundle_entries.unshift([key,val]) + + return bundle_entries + }, []) + + return Object.fromEntries(flat) +} \ No newline at end of file diff --git a/package.json b/package.json index b5d1d2df..b7c0e052 100644 --- a/package.json +++ b/package.json @@ -67,9 +67,9 @@ "bundle": "concurrently npm:lib:*", "bundle:pre-edit": "json -I -f package.json -e \"this.unpkg=''\"", "bundle:post-edit": "json -I -f package.json -e \"this.unpkg='open-props.min.css'\"", - "gen:op": "cd src && node _create-props.js '' true", - "gen:nowhere": "cd src && node _create-props.js '' false", - "gen:prefixed": "cd src && node _create-props.js 'op'", + "gen:op": "cd build && node props.js '' true", + "gen:nowhere": "cd build && node props.js '' false", + "gen:prefixed": "cd build && node props.js 'op'", "lib:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit", "lib:all": "postcss src/index.css -o open-props.min.css", "lib:normalize": "postcss src/extra/normalize.css -o normalize.min.css", diff --git a/src/_create-props.js b/src/_create-props.js deleted file mode 100644 index 297914aa..00000000 --- a/src/_create-props.js +++ /dev/null @@ -1,170 +0,0 @@ -import fs from 'fs' - -import Animations from './props.animations.js' -import Sizes from './props.sizes.js' -import * as OpenColors from './props.colors.js' -import Fonts from './props.fonts.js' -import Borders from './props.borders.js' -import Aspects from './props.aspects.js' -import Easings from './props.easing.js' -import Gradients from './props.gradients.js' -import Shadows from './props.shadows.js' -import SVG from './props.svg.js' -import Zindex from './props.zindex.js' - -const [,,prefix,useWhere] = process.argv -const selector = useWhere === 'true' ? ':where(html)' : 'html' - -const mainbundle = { - 'props.fonts.css': Fonts, - 'props.sizes.css': Sizes, - 'props.easing.css': Easings, - 'props.zindex.css': Zindex, - 'props.shadows.css': Shadows, - 'props.aspects.css': Aspects, - 'props.colors.css': OpenColors.default, - // 'props.svg.css': SVG, - 'props.gradients.css': Gradients, - 'props.animations.css': Animations, - 'props.borders.css': Borders, -} - -const individual_colors = { - 'props.gray.css': OpenColors.Gray, - 'props.red.css': OpenColors.Red, - 'props.pink.css': OpenColors.Pink, - 'props.grape.css': OpenColors.Grape, - 'props.violet.css': OpenColors.Violet, - 'props.indigo.css': OpenColors.Indigo, - 'props.blue.css': OpenColors.Blue, - 'props.cyan.css': OpenColors.Cyan, - 'props.teal.css': OpenColors.Teal, - 'props.green.css': OpenColors.Green, - 'props.lime.css': OpenColors.Lime, - 'props.yellow.css': OpenColors.Yellow, - 'props.orange.css': OpenColors.Orange, -} - -const jsonbundle = { - ...Object.values(individual_colors).reduce((colors, color) => { - return Object.assign(colors, color) - }, {}), - ...Sizes, - ...Easings, - ...Zindex, - ...Aspects, - ...Gradients, - ...Borders, -} -const designtokens = Object.entries(jsonbundle).map(([key, token]) => { - let meta = {} - - let isLength = key.includes('size') - let isEasing = key.includes('ease') - let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] - let isColor = colors.some(color => key.includes(color)) - - if (isLength) meta.type = 'dimension' - else if (isEasing) meta.type = 'cubic-bezier' - else if (isColor) meta.type = 'color' - - return [key, { - value: token, - ...meta, - }] -}) - -const JSONtokens = fs.createWriteStream('../open-props.tokens.json') -JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2)) - -const figmatokens = {}; - -Object.entries(jsonbundle).map(([key, token]) => { - let meta = {} - - let isLength = key.includes('size') && !key.includes('border-size') - let isBorder = key.includes('border-size') - let isRadius = key.includes('radius') - let isShadow = key.includes('shadow') - let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] - let isColor = colors.some(color => key.includes(color)) - - if (isLength) meta.type = 'sizing' - else if (isBorder) meta.type = 'borderWidth' - else if (isRadius) meta.type = 'borderRadius' - else if (isShadow) meta.type = 'boxShadow' - else if (isColor) meta.type = 'color' - else meta.type = 'other' - - if (!(meta.type in figmatokens)) figmatokens[meta.type] = {} - - if (isColor) { - let color = /--(.+?)-/.exec(key)[1] - if (!(color in figmatokens[meta.type])) figmatokens[meta.type][color] = {} - figmatokens[meta.type][color][key] = { - value: token, - ...meta, - } - } else { - figmatokens[meta.type][key] = { - value: token, - ...meta, - } - } -}) - -const FigmaTokens = fs.createWriteStream('../open-props.figma-tokens.json') -FigmaTokens.end(JSON.stringify(figmatokens, null, 2)) - -const figmatokensSYNC = { 'open-props': { ...figmatokens } } - -const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json') -FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2)) - -const buildPropsStylesheet = ({filename, props}) => { - const file = fs.createWriteStream(filename) - - let appendedMeta = '' - if (filename.includes('shadows')) { - file.write(`@import 'props.media.css';\n\n`) - appendedMeta = `@media (--OSdark) { - ${selector} { - --shadow-strength: 25%; - --shadow-color: 220 40% 2%; - } -}` - } - file.write(`${selector} {\n`) - - Object.entries(props).forEach(([prop, val]) => { - if (prop.includes('-@')) - return - - if (prefix) - prop = `--${prefix}-` + prop.slice(2) - - if (prop.includes('animation')) { - let keyframes = props[`${prop}-@`] - appendedMeta += keyframes - } - - file.write(` ${prop}: ${val};\n`) - }) - - file.write('}\n') - file.end(appendedMeta) -} - -// gen prop variants -Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => { - buildPropsStylesheet({filename, props}) -}) - -// gen index.css -const entry = fs.createWriteStream('index.css') -entry.write(`@import 'props.media.css'; -`) -Object.keys(mainbundle).forEach(filename => { - entry.write(`@import '${filename}';\n`) -}) -entry.end() \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7c000878..1ff1b0ef 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +import {flattenMixins} from '../build/utils.js' + import Animations from './props.animations.js' import Sizes from './props.sizes.js' import Colors from './props.colors.js' @@ -19,7 +21,7 @@ export default OpenProps = { ...Aspects, ...Easings, ...SVG, - ...Gradients, - ...Shadows, + ...flattenMixins(Gradients), + ...flattenMixins(Shadows), ...Zindex, } \ No newline at end of file diff --git a/src/props.gradients.css b/src/props.gradients.css index 77e9a320..450992cb 100644 --- a/src/props.gradients.css +++ b/src/props.gradients.css @@ -1,5 +1,4 @@ :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: @@ -71,3 +70,7 @@ --noise-filter-4: contrast(200%) brightness(500%); --noise-filter-5: contrast(200%) brightness(1000%); } + +* { + --op-gradient-direction: to bottom right; +} diff --git a/src/props.gradients.js b/src/props.gradients.js index df61b912..3e88101c 100644 --- a/src/props.gradients.js +++ b/src/props.gradients.js @@ -1,6 +1,8 @@ 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)', '--gradient-3': ` diff --git a/src/props.shadows.css b/src/props.shadows.css index 082ec59f..9fa5cc7c 100644 --- a/src/props.shadows.css +++ b/src/props.shadows.css @@ -1,8 +1,6 @@ @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%)), @@ -41,8 +39,14 @@ --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); --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%; } diff --git a/src/props.shadows.js b/src/props.shadows.js index e503424f..d94167dd 100644 --- a/src/props.shadows.js +++ b/src/props.shadows.js @@ -1,6 +1,8 @@ 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': ` diff --git a/src/props.sizes.css b/src/props.sizes.css index 2f0581f3..a100a834 100644 --- a/src/props.sizes.css +++ b/src/props.sizes.css @@ -31,5 +31,5 @@ --size-content-3: 60ch; --size-header-1: 20ch; --size-header-2: 25ch; - --size-header-3: 45rem; + --size-header-3: 35ch; } From 5ec58bac003752d51c2834da887ec2ea546dc7cc Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 26 Jan 2022 00:23:20 -0800 Subject: [PATCH 4/9] cut release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b7c0e052..1a773c00 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.1.6", + "version": "1.2.0", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props" From db520bbd94e37d79be2f6408148e06069b9a4e5c Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 26 Jan 2022 00:27:03 -0800 Subject: [PATCH 5/9] bump site version --- docsite/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docsite/index.html b/docsite/index.html index 76da7668..92da2dfe 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.1.3 + v1.2.0

CSS variables.

- v1.2.0 + v1.2.1
The Props
Hero Header Sample

             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);
               }
             }
diff --git a/package.json b/package.json
index 66b6a876..186af002 100644
--- a/package.json
+++ b/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"
diff --git a/src/index.js b/src/index.js
index 1ff1b0ef..7c000878 100644
--- a/src/index.js
+++ b/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,
 }
\ No newline at end of file
diff --git a/src/props.gradients.css b/src/props.gradients.css
index 450992cb..77e9a320 100644
--- a/src/props.gradients.css
+++ b/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;
-}
diff --git a/src/props.gradients.js b/src/props.gradients.js
index 3e88101c..696c1cf4 100644
--- a/src/props.gradients.js
+++ b/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)',
diff --git a/src/props.shadows.css b/src/props.shadows.css
index 9fa5cc7c..7574c82d 100644
--- a/src/props.shadows.css
+++ b/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%;
   }
diff --git a/src/props.shadows.js b/src/props.shadows.js
index d94167dd..e503424f 100644
--- a/src/props.shadows.js
+++ b/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': `

From 49f137fe0eecbbd17991edd04caf12588d4497ab Mon Sep 17 00:00:00 2001
From: Adam Argyle 
Date: Wed, 26 Jan 2022 19:02:23 -0800
Subject: [PATCH 9/9] adds new generated sizes with docs

---
 docsite/index.html  | 11 ++++++++++-
 src/props.sizes.css |  7 +++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docsite/index.html b/docsite/index.html
index 8ad08d5f..48f800fa 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2573,7 +2573,16 @@ 
Usage Sample

     

       

         
Media Queries

-        
Currently one step ahead of the CSS spec, Open Props offers named media queries with the @custom-media syntax. Available only with this PostCSS plugin, for now 😈

+        

+          
Currently one step ahead of the CSS spec, Open Props offers named media queries with the @custom-media syntax. Available only with this PostCSS plugin, for now 😈

+
+          

+            
+              
+            
+            Media query widths also available as custom properties. Use like var(--size-sm)
+          

+        

         

           

             
diff --git a/src/props.sizes.css b/src/props.sizes.css
index a100a834..697c2848 100644
--- a/src/props.sizes.css
+++ b/src/props.sizes.css
@@ -32,4 +32,11 @@
   --size-header-1: 20ch;
   --size-header-2: 25ch;
   --size-header-3: 35ch;
+  --size-xxs: 240px;
+  --size-xs: 360px;
+  --size-sm: 480px;
+  --size-md: 768px;
+  --size-lg: 1024px;
+  --size-xl: 1440px;
+  --size-xxl: 1920px;
 }