Inset shadows #393

Vidhanvyrs · 2023-08-18T19:36:00Z

changes done on props.shadows.js according to the codepen example that was given with the issue
Please provide feedback and point out if any particular changes required

stackblitz · 2023-08-18T19:36:02Z

Run & review this pull request in StackBlitz Codeflow.

argyleink

thanks for working on this! ❤️

can you reduce the PR changes to just the code added please? looks like a formatter ran and is making it hard to decipher what you added.

can you change the shadow additions to only be the bottom inset color, like this inset 0 -.5px 0 0 #fff1?

remove the modifications to --inner-shadow-0 it doesnt need the trick

run npm run lib:shadows to generate the css file from the changes to this js file.

After these changes, I'll create a few tester examples to make sure the trick isnt disrupting anything and is in fact an improvement. Thanks again! no one will probably notice this change, but one day, they'll see its just slightly more realistic 😁

Vidhanvyrs · 2023-08-18T20:45:33Z

Thankyou @argyleink
The required changes will be done in no time
I'M ON IT!

Vidhanvyrs · 2023-08-18T21:07:50Z

Extremely sorry i accidently added the commit without running the npm run lib: shadows in the commit 7e9aa4c
but i do performed it in commit 0d1ba17
So now i am clarifying about the changes! Please forgive 🙇‍♂️

src/props.shadows.js

argyleink · 2023-08-18T21:44:58Z

src/props.shadows.js

-  '--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%))',
-}
+  "--inner-shadow-0":


inner-shadow-0 shouldnt have any changes 🙂

argyleink · 2023-08-18T21:45:27Z

src/props.shadows.js

+    inset 0 -.5px 0 0 #fff1`,
+  "--inner-shadow-2": `
+    inset 0 -.5px 0 0 #fff1`,
+  "--inner-shadow-3": `
+    inset 0 -.5px 0 0 #fff1`,
+  "--inner-shadow-4": `
+    inset 0 -.5px 0 0 #fff1`,


oh no, looks like the inner shadows are gone and now there's only the highlight. typo maybe?!

yeah that is a typo sorry correcting it

argyleink · 2023-08-18T21:45:46Z

src/props.shadows.js

+    .map(([key, value]) => {
+      value = value.replace(
+        /var\(--shadow-color\)/g,
+        Shadows["--shadow-color"]
+      );
+      value = value.replace(
+        /var\(--shadow-strength\)/g,
+        Shadows["--shadow-strength"]
+      );
+      return [key, value];
    })
-    .filter(([key]) =>
-      !['--shadow-color', '--shadow-strength'].includes(key)
-    )
-)
+    .filter(([key]) => !["--shadow-color", "--shadow-strength"].includes(key))
+);


formatter changes again? this should be unchanged

how can i do this no formatter interference because before committing, the code is the same before but when i committed its the formatter that is doing this
Can you please suggest me how can i resolve this formatter thing this is what chatgpt suggested

If you want to prevent your code formatter from automatically formatting your code upon committing, you can take a few steps depending on the tools you're using. Here's how you can do it using Git and popular code formatters like Prettier:

Git Hooks: You can use Git hooks to run scripts before or after certain Git events, such as committing. You can create a pre-commit hook that temporarily disables the formatter before committing. Here's a general idea:

Create a .pre-commit-config.yaml file in your project's root directory (if it doesn't already exist).

Configure the hook to disable the formatter for the staged files using the formatter's command-line options. For example, if you're using Prettier, you can run:

yaml
Copy code

repo: https://github.com/pre-commit/mirrors-prettier
rev: v2.5.1
hooks:

id: prettier
args: ["--write", "$PRE_COMMIT_HOME/../$PRE_COMMIT_FILES"]
This configuration will use Prettier to format the files, but it will only format the staged files as specified by $PRE_COMMIT_FILES.

Commit the .pre-commit-config.yaml file along with your code.

Configuration Files: Some code formatters, like Prettier, allow you to configure their behavior through configuration files like .prettierrc or prettier.config.js. You can include these configuration files in your project and customize the formatting options to match your preferred style. This way, the formatter will consistently apply the same formatting rules.

Remember, while these methods can help you maintain a consistent code style, it's also a good practice to collaborate with your team and agree on a shared code formatting style that everyone follows. This can help reduce conflicts related to formatting in pull requests.

i think you need to disable your formatter in this project from running when you press save. it's a common feature people have when they work on teams and they've agreed on that formatter, but this project is different and your formatter is trying to do the right thing based on it's settings, but it's also making your PR change more than it needs to. i dont know which formatter you have installed on your machine, so i can't give particular instructions. but you could try disabling it entirely while editing this file and then enabling it again once back on your team?

sorry this sounds tedious! but it's also good practice to make the smallest change needed for the feature. changing a whole files single quotes to double quotes, is more than what's needed for the feature. thanks for working some of those formatter changes back, sorry they're in your way.

i'm also on vacation =) will check back here in a couple days

Vidhanvyrs · 2023-08-22T13:15:25Z

yeah so @argyleink now i think the commit 157808f is correct there is no formatter disturbance in this commit and the shadow is also going well
waiting for the review

argyleink · 2023-08-29T22:39:19Z

src/props.shadows.js

+  "--shadow-color": "220 3% 15%",
+  "--shadow-strength": "1%",

-  '--shadow-color-@media:dark': '220 40% 2%',
-  '--shadow-strength-@media:dark': '25%',
-
-  '--shadow-1': '0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
-  '--shadow-2': `
+  "--shadow-color-@media:dark": "220 40% 2%",
+  "--shadow-strength-@media:dark": "25%",
+
+  "--shadow-1":
+    "0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))",
+  "--shadow-2": `


these changes shouldn't be part of the PR 😅

argyleink · 2023-08-29T22:42:15Z

src/props.shadows.js

+    "inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))",
+  "--inner-shadow-1": `
+    inset 0 -.5px 0 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))`,
+  "--inner-shadow-2": `
+    inset 0 -.5px 0 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))`,
+  "--inner-shadow-3": `
+    inset 0 -.5px 0 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))`,
+  "--inner-shadow-4": `
+    inset 0 -.5px 0 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))`,
+};


looks like another typo here because the inner shadows are now only the highlight and don't have the inner shadow part

just to be clear too, this PR should really only be changing these lines. need to combine the highlights like you added above, with the previous shadows that were there. thinking about it too, the highlight could be another custom property, which would help us not repeat the same highlight shadow over and over.

argyleink · 2023-08-29T22:55:30Z

here! i wont merge this PR i'm linking because i want you to get contribution credit for all the work you've put in so far, but this is the PR shape I'm lookin for 🙂

#399

argyleink · 2023-09-18T20:18:42Z

hi @Vidhanvyrs, you still interested in contributing this? #399 is ready to go, shows all the changes needing to be made, but I'd still totally prefer if you got credit for the work you've done so far so I don't want to merge it 🙂

Vidhanvyrs · 2023-09-20T09:45:13Z

No thankyou its fine you lot can continue BTW thanx!!🙇‍♂️

changes done on props.shadows

aa240e9

argyleink requested changes Aug 18, 2023

View reviewed changes

Vidhanvyrs added 2 commits August 19, 2023 02:29

RecommitInsetShadows

7e9aa4c

allchangesdone

0d1ba17

Vidhanvyrs requested a review from argyleink August 18, 2023 21:08

argyleink requested changes Aug 18, 2023

View reviewed changes

donenewchanges

157808f

Vidhanvyrs requested a review from argyleink August 22, 2023 18:04

re-changes

0c73884

argyleink requested changes Aug 29, 2023

View reviewed changes

argyleink closed this Sep 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inset shadows #393

Inset shadows #393

Vidhanvyrs commented Aug 18, 2023

stackblitz bot commented Aug 18, 2023

argyleink left a comment

Vidhanvyrs commented Aug 18, 2023

Vidhanvyrs commented Aug 18, 2023

argyleink Aug 18, 2023

argyleink Aug 18, 2023

Vidhanvyrs Aug 19, 2023

argyleink Aug 18, 2023

Vidhanvyrs Aug 19, 2023

argyleink Aug 23, 2023

Vidhanvyrs commented Aug 22, 2023

argyleink Aug 29, 2023

argyleink Aug 29, 2023

argyleink Aug 29, 2023

argyleink commented Aug 29, 2023 •

edited

Loading

argyleink commented Sep 18, 2023

Vidhanvyrs commented Sep 20, 2023

Inset shadows #393

Inset shadows #393

Conversation

Vidhanvyrs commented Aug 18, 2023

stackblitz bot commented Aug 18, 2023

argyleink left a comment

Choose a reason for hiding this comment

Vidhanvyrs commented Aug 18, 2023

Vidhanvyrs commented Aug 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vidhanvyrs commented Aug 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

argyleink commented Aug 29, 2023 • edited Loading

argyleink commented Sep 18, 2023

Vidhanvyrs commented Sep 20, 2023

argyleink commented Aug 29, 2023 •

edited

Loading