Remove deprecated dropshadows

[MisRob]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Blocked by

• Update dropshadows to the latest Kolibri Design System guidelines kolibri#12552
• Update dropshadows to the latest guidelines #724

Summary

For both internal KDS components styling and external use by non-KDS components in our products, according to the updated guidelines in the "Elevation and shadow > Drop shadows" documentation section, we only need to keep %dropshadow-1dp , %dropshadow-2dp , and %dropshadow-6dp in the definitions.scss:

kolibri-design-system/lib/styles/definitions.scss

Lines 59 to 157 in 0cbdf57

	// dropshadows from Angular Material via https://stackoverflow.com/a/39199702
	%dropshadow-1dp {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
	0 2px 1px -1px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-2dp {
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
	0 3px 1px -2px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-3dp {
	box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
	0 3px 3px -2px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-4dp {
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
	0 1px 10px 0 rgba(0, 0, 0, 0.12);
	}
	%dropshadow-5dp {
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
	0 1px 14px 0 rgba(0, 0, 0, 0.12);
	}
	%dropshadow-6dp {
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
	0 1px 18px 0 rgba(0, 0, 0, 0.12);
	}
	%dropshadow-7dp {
	box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
	0 2px 16px 1px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-8dp {
	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
	0 3px 14px 2px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-9dp {
	box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
	0 3px 16px 2px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-10dp {
	box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
	0 4px 18px 3px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-11dp {
	box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
	0 4px 20px 3px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-12dp {
	box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
	0 5px 22px 4px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-13dp {
	box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
	0 5px 24px 4px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-14dp {
	box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
	0 5px 26px 4px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-15dp {
	box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
	0 6px 28px 5px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-16dp {
	box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
	0 6px 30px 5px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-17dp {
	box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
	0 6px 32px 5px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-18dp {
	box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
	0 7px 34px 6px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-19dp {
	box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
	0 7px 36px 6px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-20dp {
	box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
	0 8px 38px 7px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-21dp {
	box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
	0 8px 40px 7px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-22dp {
	box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
	0 8px 42px 7px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-23dp {
	box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
	0 9px 44px 8px rgba(0, 0, 0, 0.12);
	}
	%dropshadow-24dp {
	box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
	0 9px 46px 8px rgba(0, 0, 0, 0.12);
	}

All other %dropshadow-... should not be available for use.

Guidance

• I think it’d be fine to just comment them out rather than delete, in case we need some of them in the future - as long as there’s a note that uncommenting needs to be discussed with designers and should be aligned with the guidelines.
• Issues in "Blocked by" should be resolved first to ensure that KDS version upgrade is not demanding in Kolibri that has many drop shadows. Still needs to be communicated as a breaking change and consumers should double-check before installing the corresponding release (the issues mentioned should cover most of it, however there may be one or two places in Studio to update as well)

[lokesh-sagi125]

i've already finished commenting the deprecated drop shadows , can you assign this to me, so i can PR my changes?

[MisRob]

Thanks @lokesh-sagi125. I'll assign you. Just a note it's better to get assigned first in case some clarification is needed, so please always message us and wait for assignment.

Would you mind splitting #734 into two pull requests? One that resolves #724 and another that resolves this issue.

These are deliberately two issues because #724 can be merged soon, whereas for the other one we will be waiting until learningequality/kolibri#12552, otherwise it'd break many places in Kolibri. We will then review both pull requests.