Commit
+29 -17 +/-5 browse
| 1 | diff --git a/package.json b/package.json |
| 2 | index 0808092..b3c0bc8 100644 |
| 3 | --- a/package.json |
| 4 | +++ b/package.json |
| 5 | @@ -3,7 +3,7 @@ |
| 6 | "name": "open-props", |
| 7 | "author": "Adam Argyle", |
| 8 | "license": "MIT", |
| 9 | - "version": "1.3.2", |
| 10 | + "version": "1.3.3", |
| 11 | "repository": { |
| 12 | "type": "git", |
| 13 | "url": "https://github.com/argyleink/open-props" |
| 14 | diff --git a/src/index.js b/src/index.js |
| 15 | index 4bdf084..3883d23 100644 |
| 16 | --- a/src/index.js |
| 17 | +++ b/src/index.js |
| 18 | @@ -7,7 +7,7 @@ import Borders from './props.borders.js' |
| 19 | import Aspects from './props.aspects.js' |
| 20 | import Easings from './props.easing.js' |
| 21 | import Gradients from './props.gradients.js' |
| 22 | - import Shadows from './props.shadows.js' |
| 23 | + import {StaticShadows} from './props.shadows.js' |
| 24 | import SVG from './props.svg.js' |
| 25 | import Zindex from './props.zindex.js' |
| 26 | |
| 27 | @@ -22,6 +22,6 @@ export default OpenProps = { |
| 28 | ...Easings, |
| 29 | ...SVG, |
| 30 | ...Gradients, |
| 31 | - ...Shadows, |
| 32 | + ...StaticShadows, |
| 33 | ...Zindex, |
| 34 | } |
| 35 | \ No newline at end of file |
| 36 | diff --git a/src/props.gradients.js b/src/props.gradients.js |
| 37 | index 696c1cf..f49500d 100644 |
| 38 | --- a/src/props.gradients.js |
| 39 | +++ b/src/props.gradients.js |
| 40 | @@ -1,8 +1,6 @@ |
| 41 | export default { |
| 42 | - '--op-gradient-direction': 'to bottom right', |
| 43 | - |
| 44 | - '--gradient-1': 'linear-gradient(var(--op-gradient-direction),#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b)', |
| 45 | - '--gradient-2': 'linear-gradient(var(--op-gradient-direction),#48005c, #8300e2, #a269ff)', |
| 46 | + '--gradient-1': 'linear-gradient(to bottom right,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b)', |
| 47 | + '--gradient-2': 'linear-gradient(to bottom right,#48005c, #8300e2, #a269ff)', |
| 48 | '--gradient-3': ` |
| 49 | radial-gradient( |
| 50 | circle at top right, |
| 51 | @@ -12,10 +10,10 @@ export default { |
| 52 | circle at bottom left, |
| 53 | hsl(328 100% 54%), hsl(328 100% 54% / 0%) |
| 54 | )`, |
| 55 | - '--gradient-4': 'linear-gradient(var(--op-gradient-direction),#00F5A0,#00D9F5)', |
| 56 | + '--gradient-4': 'linear-gradient(to bottom right,#00F5A0,#00D9F5)', |
| 57 | '--gradient-5': 'conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite)', |
| 58 | '--gradient-6': 'conic-gradient(from -90deg at top left, black, white)', |
| 59 | - '--gradient-7': 'linear-gradient(var(--op-gradient-direction),#72C6EF,#004E8F)', |
| 60 | + '--gradient-7': 'linear-gradient(to bottom right,#72C6EF,#004E8F)', |
| 61 | '--gradient-8': 'conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111)', |
| 62 | '--gradient-9': 'conic-gradient(from .5turn at bottom center, lightblue, white)', |
| 63 | '--gradient-10': 'conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700)', |
| 64 | @@ -23,7 +21,7 @@ export default { |
| 65 | '--gradient-12': 'conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85)', |
| 66 | '--gradient-13': 'radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7)', |
| 67 | '--gradient-14': 'conic-gradient(at top right, lime, cyan)', |
| 68 | - '--gradient-15': 'linear-gradient(var(--op-gradient-direction), #c7d2fe, #fecaca, #fef3c7)', |
| 69 | + '--gradient-15': 'linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7)', |
| 70 | '--gradient-16': 'radial-gradient(circle at 50% -250%, #374151, #111827, #000)', |
| 71 | '--gradient-17': 'conic-gradient(from -90deg at 50% -25%, blue, blueviolet)', |
| 72 | '--gradient-18': ` |
| 73 | @@ -34,14 +32,14 @@ export default { |
| 74 | linear-gradient(240deg, hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%), |
| 75 | linear-gradient(300deg, hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%) |
| 76 | `, |
| 77 | - '--gradient-19': 'linear-gradient(var(--op-gradient-direction),#ffe259,#ffa751)', |
| 78 | + '--gradient-19': 'linear-gradient(to bottom right,#ffe259,#ffa751)', |
| 79 | '--gradient-20': 'conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4)', |
| 80 | '--gradient-21': 'conic-gradient(from -90deg at 25% 115%, #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff)', |
| 81 | - '--gradient-22': 'linear-gradient(var(--op-gradient-direction),#acb6e5,#86fde8)', |
| 82 | - '--gradient-23': 'linear-gradient(var(--op-gradient-direction),#536976,#292E49)', |
| 83 | + '--gradient-22': 'linear-gradient(to bottom right,#acb6e5,#86fde8)', |
| 84 | + '--gradient-23': 'linear-gradient(to bottom right,#536976,#292E49)', |
| 85 | '--gradient-24': 'conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476)', |
| 86 | '--gradient-25': 'conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7)', |
| 87 | - '--gradient-26': 'linear-gradient(var(--op-gradient-direction),#9796f0,#fbc7d4)', |
| 88 | + '--gradient-26': 'linear-gradient(to bottom right,#9796f0,#fbc7d4)', |
| 89 | '--gradient-27': 'conic-gradient(from .5turn at bottom left, deeppink, rebeccapurple)', |
| 90 | '--gradient-28': 'conic-gradient(from -90deg at 50% 105%, white, orchid)', |
| 91 | '--gradient-29': ` |
| 92 | diff --git a/src/props.shadows.js b/src/props.shadows.js |
| 93 | index e503424..cefe262 100644 |
| 94 | --- a/src/props.shadows.js |
| 95 | +++ b/src/props.shadows.js |
| 96 | @@ -1,4 +1,4 @@ |
| 97 | - export default { |
| 98 | + const Shadows = { |
| 99 | '--shadow-color': '220 3% 15%', |
| 100 | '--shadow-strength': '1%', |
| 101 | |
| 102 | @@ -41,3 +41,17 @@ export default { |
| 103 | '--inner-shadow-3': 'inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))', |
| 104 | '--inner-shadow-4': 'inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))', |
| 105 | } |
| 106 | + |
| 107 | + export default Shadows |
| 108 | + |
| 109 | + export const StaticShadows = Object.fromEntries( |
| 110 | + Object.entries(Shadows) |
| 111 | + .map(([key,value]) => { |
| 112 | + value = value.replaceAll('var(--shadow-color)', Shadows['--shadow-color']) |
| 113 | + value = value.replaceAll('var(--shadow-strength)', Shadows['--shadow-strength']) |
| 114 | + return [key, value] |
| 115 | + }) |
| 116 | + .filter(([key]) => |
| 117 | + !['--shadow-color', '--shadow-strength'].includes(key) |
| 118 | + ) |
| 119 | + ) |
| 120 | diff --git a/test/basic.test.cjs b/test/basic.test.cjs |
| 121 | index 17e43f8..d3f29ed 100644 |
| 122 | --- a/test/basic.test.cjs |
| 123 | +++ b/test/basic.test.cjs |
| 124 | @@ -3,7 +3,7 @@ const OpenProps = require('../dist/open-props.cjs') |
| 125 | const OPtokens = require('../open-props.tokens.json') |
| 126 | |
| 127 | test('Should have an all included import', t => { |
| 128 | - t.is(Object.keys(OpenProps).length, 508) |
| 129 | + t.is(Object.keys(OpenProps).length, 505) |
| 130 | }) |
| 131 | |
| 132 | test('Import should have animations', async t => { |
| 133 | @@ -20,7 +20,7 @@ test('Import should have colors', async t => { |
| 134 | }) |
| 135 | |
| 136 | test('JSON Import should have colors', async t => { |
| 137 | - t.is(Object.keys(OPtokens).length, 281) |
| 138 | + t.is(Object.keys(OPtokens).length, 280) |
| 139 | t.assert(Object.keys(OPtokens).includes('--orange-0')) |
| 140 | }) |
| 141 |