mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 14:02:21 -04:00
9f55cf26fc
* Update to latest Node LTS * Add sveltekit * Split tslib into separate @generated and @tslib components SvelteKit's path aliases don't support multiple locations, so our old approach of using @tslib to refer to both ts/lib and out/ts/lib will no longer work. Instead, all generated sources and their includes are placed in a separate out/ts/generated folder, and imported via @generated instead. This also allows us to generate .ts files, instead of needing to output separate .d.ts and .js files. * Switch package.json to module type * Avoid usage of baseUrl Incompatible with SvelteKit * Move sass into ts; use relative links SvelteKit's default sass support doesn't allow overriding loadPaths * jest->vitest, graphs example working with yarn dev * most pages working in dev mode * Some fixes after rebasing * Fix/silence some svelte-check errors * Get image-occlusion working with Fabric types * Post-rebase lock changes * Editor is now checked * SvelteKit build integrated into ninja * Use the new SvelteKit entrypoint for pages like congrats/deck options/etc * Run eslint once for ts/**; fix some tests * Fix a bunch of issues introduced when rebasing over latest main * Run eslint fix * Fix remaining eslint+pylint issues; tests now all pass * Fix some issues with a clean build * Latest bufbuild no longer requires @__PURE__ hack * Add a few missed dependencies * Add yarn.bat to fix Windows build * Fix pages failing to show when ANKI_API_PORT not defined * Fix svelte-check and vitest on Windows * Set node path in ./yarn * Move svelte-kit output to ts/.svelte-kit Sadly, I couldn't figure out a way to store it in out/ if out/ is a symlink, as it breaks module resolution when SvelteKit is run. * Allow HMR inside Anki * Skip SvelteKit build when HMR is defined * Fix some post-rebase issues I should have done a normal merge instead.
87 lines
2 KiB
SCSS
87 lines
2 KiB
SCSS
// Heavily inspired by https://github.com/material-components/material-components-web/tree/master/packages/mdc-elevation
|
|
@use "sass:color";
|
|
@use "sass:map";
|
|
@use "sass:list";
|
|
|
|
/**
|
|
* The maps correspond to dp levels:
|
|
* 0: 0dp
|
|
* 1: 1dp
|
|
* 2: 2dp
|
|
* 3: 3dp
|
|
* 4: 4dp
|
|
* 5: 6dp
|
|
* 6: 8dp
|
|
* 7: 12dp
|
|
* 8: 16dp
|
|
* 9: 24dp
|
|
*/
|
|
|
|
$umbra-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 2px 1px -1px",
|
|
2: "0px 3px 1px -2px",
|
|
3: "0px 3px 3px -2px",
|
|
4: "0px 2px 4px -1px",
|
|
5: "0px 3px 5px -1px",
|
|
6: "0px 5px 5px -3px",
|
|
7: "0px 7px 8px -4px",
|
|
8: "0px 8px 10px -5px",
|
|
9: "0px 11px 15px -7px",
|
|
);
|
|
|
|
$penumbra-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 1px 1px 0px",
|
|
2: "0px 2px 2px 0px",
|
|
3: "0px 3px 4px 0px",
|
|
4: "0px 4px 5px 0px",
|
|
5: "0px 6px 10px 0px",
|
|
6: "0px 8px 10px 1px",
|
|
7: "0px 12px 17px 2px",
|
|
8: "0px 16px 24px 2px",
|
|
9: "0px 24px 38px 3px",
|
|
);
|
|
|
|
$ambient-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 1px 3px 0px",
|
|
2: "0px 1px 5px 0px",
|
|
3: "0px 1px 8px 0px",
|
|
4: "0px 1px 10px 0px",
|
|
5: "0px 1px 18px 0px",
|
|
6: "0px 3px 14px 2px",
|
|
7: "0px 5px 22px 4px",
|
|
8: "0px 6px 30px 5px",
|
|
9: "0px 9px 46px 8px",
|
|
);
|
|
|
|
$umbra-opacity: 0.2;
|
|
$penumbra-opacity: 0.14;
|
|
$ambient-opacity: 0.12;
|
|
|
|
@function box-shadow($level, $opacity-boost, $color) {
|
|
$umbra-z-value: map.get($umbra-map, $level);
|
|
$penumbra-z-value: map.get($penumbra-map, $level);
|
|
$ambient-z-value: map.get($ambient-map, $level);
|
|
|
|
$umbra-color: color.adjust(rgba($color, $umbra-opacity), $alpha: $opacity-boost);
|
|
$penumbra-color: color.adjust(
|
|
rgba($color, $penumbra-opacity),
|
|
$alpha: $opacity-boost
|
|
);
|
|
$ambient-color: color.adjust(
|
|
rgba($color, $ambient-opacity),
|
|
$alpha: $opacity-boost
|
|
);
|
|
|
|
@return (
|
|
#{$umbra-z-value} $umbra-color,
|
|
#{$penumbra-z-value} $penumbra-color,
|
|
#{$ambient-z-value} $ambient-color
|
|
);
|
|
}
|
|
|
|
@mixin elevation($level, $opacity-boost: 0, $color: #141414) {
|
|
box-shadow: box-shadow($level, $opacity-boost, $color);
|
|
}
|