Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Wed, 20 Sep 2023 14:29:17 +0000
Hash: 4663e86e2b22ea6fdad19f4241e8cda38cf94884
Timestamp: Wed, 20 Sep 2023 14:29:17 +0000 (1 year ago)

+12 -9 +/-3 browse
adds inner-shadow-highlight variable to inner shadow 1-4 (#399) 
adds inner-shadow-highlight variable to inner shadow 1-4 (#399)

* adds inner-shadow-highlight variable to inner shadow 1-4

* update test to reflect new prop count
1diff --git a/src/props.shadows.css b/src/props.shadows.css
2index bd8953b..fc43748 100644
3--- a/src/props.shadows.css
4+++ b/src/props.shadows.css
5 @@ -3,6 +3,7 @@
6 :where(html) {
7 --shadow-color: 220 3% 15%;
8 --shadow-strength: 1%;
9+ --inner-shadow-highlight: inset 0 -.5px 0 0 #fff2, inset 0 .5px 0 0 #0007;
10 --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
11 --shadow-2:
12 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
13 @@ -36,10 +37,10 @@
14 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
15 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
16 --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
17- --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
18- --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
19- --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
20- --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
21+ --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
22+ --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
23+ --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
24+ --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
25 }
26
27 @media (--OSdark) {
28 diff --git a/src/props.shadows.js b/src/props.shadows.js
29index d6643b1..4c3fb15 100644
30--- a/src/props.shadows.js
31+++ b/src/props.shadows.js
32 @@ -4,6 +4,8 @@ const Shadows = {
33
34 '--shadow-color-@media:dark': '220 40% 2%',
35 '--shadow-strength-@media:dark': '25%',
36+
37+ '--inner-shadow-highlight': 'inset 0 -.5px 0 0 #fff2, inset 0 .5px 0 0 #0007',
38
39 '--shadow-1': '0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
40 '--shadow-2': `
41 @@ -39,10 +41,10 @@ const Shadows = {
42 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%))`,
43
44 '--inner-shadow-0': 'inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
45- '--inner-shadow-1': 'inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
46- '--inner-shadow-2': 'inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
47- '--inner-shadow-3': 'inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
48- '--inner-shadow-4': 'inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
49+ '--inner-shadow-1': 'inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)',
50+ '--inner-shadow-2': 'inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)',
51+ '--inner-shadow-3': 'inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)',
52+ '--inner-shadow-4': 'inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)',
53 }
54
55 export default Shadows
56 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
57index c5380b8..6aaa580 100644
58--- a/test/basic.test.cjs
59+++ b/test/basic.test.cjs
60 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
61 const OPtokens = require('../open-props.tokens.json')
62
63 test('Should have an all included import', t => {
64- t.is(Object.keys(OpenProps).length, 1610)
65+ t.is(Object.keys(OpenProps).length, 1612)
66 })
67
68 test('Import should have animations', async t => {