= { elevation: value / 100 }; // normalize value back to 0..1
101 | setTarget(data);
102 | }
103 | return valid;
104 | };
105 | useEffect(() => {
106 | setTempElevation(clamp(percent(elevation), 0, 100) + "%");
107 | }, [elevation]);
108 |
109 | return (
110 |
111 | ) => setTempAzimuth(e.currentTarget.value)}
115 | value={tempAzimuth}
116 | suffix={"°"}
117 | validateOnBlur={validateAzimuth}
118 | noBorder
119 | />
120 | ) => setTempDistance(e.currentTarget.value)}
124 | value={tempDistance}
125 | validateOnBlur={validateDistance}
126 | noBorder
127 | />
128 | }
131 | onInput={(e: JSX.TargetedEvent) => setTempBrightness(e.currentTarget.value)}
132 | value={tempBrightness}
133 | suffix={"%"}
134 | validateOnBlur={validateBrightness}
135 | noBorder
136 | />
137 | }
140 | onInput={(e: JSX.TargetedEvent) => setTempElevation(e.currentTarget.value)}
141 | value={tempElevation}
142 | suffix={"%"}
143 | validateOnBlur={validateElevation}
144 | noBorder
145 | />
146 |
147 | );
148 | };
149 |
150 | /**
151 | * Icons
152 | */
153 | const IconBrightness16 = ({ v = 0 }) => {
154 | const inc = Math.cos(v);
155 | return (
156 |
172 | );
173 | };
174 |
175 | const IconElevation16 = ({ v = 0 }) => {
176 | return (
177 |
181 | );
182 | };
183 |
184 | export default Parameters;
185 |
--------------------------------------------------------------------------------
/src/ui/Menu/OptionsPanel/options/Type.tsx:
--------------------------------------------------------------------------------
1 | import { h, JSX } from 'preact'
2 | import useStore from '../../../../store/useStore'
3 | import { Dropdown } from '@create-figma-plugin/ui'
4 | import { ShadowType } from '../../../../store/createShadowProps'
5 |
6 | type DropdownOption = { value: ShadowType; children: string }
7 | const options: DropdownOption[] = [
8 | { value: 'DROP_SHADOW', children: 'Drop Shadow' },
9 | { value: 'INNER_SHADOW', children: 'Inner Shadow' }
10 | ]
11 |
12 | const Type = () => {
13 | const { shadowType, setShadowType } = useStore((state) => ({
14 | shadowType: state.type,
15 | setShadowType: state.setType
16 | }))
17 |
18 | const handleDropdownChange = (e: JSX.TargetedEvent) => {
19 | const newValue = e.currentTarget.value as ShadowType
20 | setShadowType(newValue)
21 | }
22 |
23 | return (
24 |
25 |
31 |
32 | )
33 | }
34 |
35 | export default Type
36 |
--------------------------------------------------------------------------------
/src/ui/Menu/OptionsPanel/options/parameters.css:
--------------------------------------------------------------------------------
1 | .parameters {
2 | display: grid;
3 | grid-gap: 4px;
4 | grid-template-columns: 1fr 1fr;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/Menu/OptionsPanel/panel.css:
--------------------------------------------------------------------------------
1 | .panel {
2 | position: absolute;
3 | z-index: 99999;
4 | right: 0;
5 | bottom: 0;
6 | width: auto;
7 | height: auto;
8 | background: var(--color-white);
9 | border-radius: var(--border-radius-2);
10 | box-shadow: var(--box-shadow-modal);
11 | opacity: 0;
12 | pointer-events: none;
13 | touch-action: none;
14 | visibility: hidden;
15 | }
16 |
17 | .panel.open {
18 | opacity: 1;
19 | pointer-events: all;
20 | visibility: visible;
21 | }
22 |
23 | .titlebar {
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | padding: 4px 4px 4px 5px;
28 | border-bottom: 1px solid var(--color-black-6-translucent);
29 | }
30 |
--------------------------------------------------------------------------------
/src/ui/Menu/menu.css:
--------------------------------------------------------------------------------
1 | .menu {
2 | position: absolute;
3 | right: 1rem;
4 | bottom: 1rem;
5 | padding: var(--space-extra-small);
6 | background: #fff;
7 | border-radius: 8px;
8 | box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
9 | }
10 |
--------------------------------------------------------------------------------
/src/ui/Menu/menu.tsx:
--------------------------------------------------------------------------------
1 | import { h } from 'preact'
2 | import useStore from '../../store/useStore'
3 | import { useRef, useState, useEffect, useCallback } from 'preact/hooks'
4 | import { emit } from '@create-figma-plugin/utilities'
5 | import {
6 | Button,
7 | Columns,
8 | IconButton,
9 | IconEllipsis32,
10 | IconCode32
11 | } from '@create-figma-plugin/ui'
12 | import OptionsPanel from './OptionsPanel'
13 | import styles from './menu.css'
14 |
15 | const Menu = ({ bounds }: any) => {
16 | const selection = useStore((state) => state.selection)
17 |
18 | const [optionsPanelOpen, setOptionsPanelOpen] = useState(false)
19 | const menuRef = useRef()
20 |
21 | const applyShadowsToSelectedCanvasElement = useCallback(() => {
22 | emit('APPLY')
23 | }, [])
24 |
25 | return (
26 |
27 |
28 | setOptionsPanelOpen((prev) => !prev)}
30 | value={optionsPanelOpen}>
31 |
32 |
33 |
43 |
44 | setOptionsPanelOpen(false)}
49 | />
50 |
51 | )
52 | }
53 |
54 | export default Menu
55 |
--------------------------------------------------------------------------------
/src/ui/Preview/components/Badge/badge.css:
--------------------------------------------------------------------------------
1 | .badge {
2 | display: inline-block;
3 | padding: 1px 6px;
4 | background: var(--color-blue);
5 | border-radius: 3px;
6 | color: #fff;
7 | font-size: 10px;
8 | pointer-events: none;
9 | white-space: nowrap;
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/Preview/components/Badge/badge.tsx:
--------------------------------------------------------------------------------
1 | import { h } from 'preact'
2 | import styles from './badge.css'
3 |
4 | const Badge = ({
5 | visible = true,
6 | children,
7 | style,
8 | ...rest
9 | }: {
10 | visible?: boolean
11 | children: any
12 | style?: any
13 | }) => {
14 | return (
15 |
19 | {children}
20 |
21 | )
22 | }
23 |
24 | export default Badge
25 |
--------------------------------------------------------------------------------
/src/ui/Preview/components/Light/BrightnessSlider.tsx:
--------------------------------------------------------------------------------
1 | import { h, Fragment } from 'preact'
2 | import useStore from '../../../../store/useStore'
3 | import { useEffect } from 'preact/hooks'
4 | import { useDrag } from '@use-gesture/react'
5 | import { useSpring, animated } from '@react-spring/web'
6 | import { stepped, normalize, denormalize, clamp } from '../../../../utils/math'
7 | import styles from './brightness-slider.css'
8 | import { LIGHT_INITIAL_BRIGHTNESS } from '../../../../constants'
9 |
10 | // Types
11 | import { Light } from '../../../../store/createLight'
12 |
13 | /**
14 | * Constants
15 | */
16 | const brightnessDragMin = 0
17 | const brightnessDragMax = -20
18 | const sunRayMinWidth = 4
19 | const sunRayMaxWidth = 16
20 | const sunRayThickness = 1
21 | const sunRayRadius = 24
22 | const opacity_min = 0.4
23 | const opacity_max = 1
24 |
25 | const BrightnessSlider = ({
26 | isHuggingTop,
27 | children
28 | }: {
29 | isHuggingTop: boolean
30 | children: any
31 | }) => {
32 | /**
33 | * 💾 Store
34 | */
35 | const { brightness, positionPointerDown, brightnessPointerDown, setLight } =
36 | useStore((state) => ({
37 | brightness: state.light.brightness,
38 | positionPointerDown: state.light.positionPointerDown,
39 | brightnessPointerDown: state.light.brightnessPointerDown,
40 | setLight: state.setLight
41 | }))
42 |
43 | const [{ y, opacity, translateSunRays, sunRayWidth }, animateSlider] =
44 | useSpring(() => ({
45 | y: brightnessDragMax * LIGHT_INITIAL_BRIGHTNESS,
46 | opacity: opacity_min,
47 | translateSunRays: sunRayRadius * 1.5,
48 | sunRayWidth: sunRayMaxWidth * LIGHT_INITIAL_BRIGHTNESS
49 | }))
50 | const slide: any = useDrag(
51 | ({ event, down: brightnessPointerDown, shiftKey, offset: [_, oy] }) => {
52 | event.stopPropagation()
53 | const value = shiftKey
54 | ? stepped(oy, 2)
55 | : isHuggingTop
56 | ? Math.abs(oy) - Math.abs(brightnessDragMax)
57 | : oy
58 | const normalized = Math.min(
59 | normalize(value, brightnessDragMin, brightnessDragMax),
60 | 1
61 | )
62 | const data: Pick = {
63 | brightness: normalized,
64 | brightnessPointerDown
65 | }
66 | setLight(data)
67 | },
68 | {
69 | bounds: { bottom: brightnessDragMin, top: brightnessDragMax },
70 | from: () =>
71 | !isHuggingTop
72 | ? [0, y.get()]
73 | : [0, -y.get() - Math.abs(brightnessDragMax)]
74 | }
75 | )
76 |
77 | useEffect(() => {
78 | const denormalized = denormalize(
79 | brightness,
80 | brightnessDragMin,
81 | brightnessDragMax
82 | )
83 | animateSlider.set({
84 | y: denormalized,
85 | opacity: clamp(brightness, opacity_min, opacity_max),
86 | translateSunRays: Math.abs(denormalized) + sunRayRadius,
87 | sunRayWidth: clamp(
88 | Math.abs(denormalized),
89 | sunRayMinWidth,
90 | sunRayMaxWidth
91 | )
92 | })
93 | }, [brightness])
94 |
95 | // Show a few sunrays that visualize the current brightness value during drag.
96 | const sunRayNum = 8
97 | const sunRays = Array.from({ length: sunRayNum }, (el, i) => {
98 | const deg = -90 + (360 / sunRayNum) * i
99 | return (
100 |
114 | )
115 | })
116 |
117 | return (
118 |
119 |
125 | {sunRays}
126 |
127 |
128 |
137 | {children}
138 |
139 |
132 |
133 |
134 |
135 | {children}
136 |
137 | )
138 | })
139 |
140 | export default Preview
141 |
--------------------------------------------------------------------------------
/src/utils/color.ts:
--------------------------------------------------------------------------------
1 | import chroma, { Color } from 'chroma-js'
2 |
3 | export function hexToGL(color: Color | string): RGBA {
4 | const hexToRGBA = chroma(color).gl()
5 | return {
6 | r: hexToRGBA[0],
7 | g: hexToRGBA[1],
8 | b: hexToRGBA[2],
9 | a: hexToRGBA[3]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/utils/debounce.ts:
--------------------------------------------------------------------------------
1 | export function debounce(callback: (...args: any[]) => any, wait: number) {
2 | let timeout = 0
3 | return (...args: Parameters): ReturnType => {
4 | let result: any
5 | clearTimeout(timeout)
6 | timeout = setTimeout(() => {
7 | result = callback(...args)
8 | }, wait)
9 | return result
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/utils/grid.ts:
--------------------------------------------------------------------------------
1 | export function alignGridToCenter(viewport: number, gridSize: number): number {
2 | const howMuchGridFitsIntoViewport = viewport / gridSize
3 | const getPositionOfMostCenterDot =
4 | (howMuchGridFitsIntoViewport / 2) * gridSize
5 | const shift = viewport - getPositionOfMostCenterDot - gridSize / 2
6 |
7 | // return remainder to keep the shift motion as reduced as possible
8 | return Math.round(shift % gridSize)
9 | }
10 |
--------------------------------------------------------------------------------
/src/utils/math.ts:
--------------------------------------------------------------------------------
1 | export function stepped(value: number, steps: number) {
2 | return Math.ceil(value / steps) * steps
3 | }
4 |
5 | export function clamp(num: number, min: number, max: number): number {
6 | return Math.min(Math.max(num, min), max)
7 | }
8 |
9 | export function normalize(value: number, min: number, max: number): number {
10 | return (value - min) / (max - min)
11 | }
12 |
13 | export function denormalize(value: number, min: number, max: number): number {
14 | return value * (max - min) + min
15 | }
16 |
17 | export function percent(value: number, roundValue: boolean = true) {
18 | return roundValue ? Math.round(value * 100) : value * 100
19 | }
20 |
21 | export function round(value: number, decimals: number = 0) {
22 | return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals)
23 | }
24 |
25 | export function angleFromLightToTarget(vec1: Vector, vec2: Vector): number {
26 | const deg = Math.atan2(vec1.y - vec2.y, vec1.x - vec2.x) * (180 / Math.PI)
27 | return deg < 0 ? 360 + deg : deg
28 | }
29 |
30 | export function distanceFromLightToTarget(vec1: Vector, vec2: Vector): number {
31 | const p1 = vec1.x - vec2.x
32 | const p2 = vec1.y - vec2.y
33 | //return (Math.sqrt(p1 * p1 + p2 * p2) * 180) / Math.PI
34 | return Math.sqrt(p1 * p1 + p2 * p2)
35 | }
36 |
37 | export function deriveXYFromAngle(
38 | angle: number,
39 | distance: number
40 | ): { dx: number; dy: number } {
41 | const theta = angle * (Math.PI / 180)
42 | const dx = distance * Math.cos(theta)
43 | const dy = distance * Math.sin(theta)
44 | return { dx, dy }
45 | }
46 |
47 | export function degreeToRadian(degree: number) {
48 | return degree * (Math.PI / 180)
49 | }
50 |
51 | export function resizeAndRetainAspectRatio(
52 | ogWidth: number,
53 | ogHeight: number,
54 | maxWidth: number,
55 | maxHeight: number
56 | ) {
57 | const ratio = Math.min(maxWidth / ogWidth, maxHeight / ogHeight)
58 | return {
59 | width: ogWidth * ratio,
60 | height: ogHeight * ratio,
61 | ratio
62 | }
63 | }
64 |
65 | export function dottedGridOffset(viewport: number, gridSize: number): number {
66 | const howMuchDotsFitIntoViewport = viewport / gridSize
67 | const getPositionOfMostCenterDot =
68 | (howMuchDotsFitIntoViewport / 2) * gridSize
69 | const shift = viewport - getPositionOfMostCenterDot - gridSize / 2
70 | return shift % gridSize
71 | }
72 |
--------------------------------------------------------------------------------
/src/utils/node.ts:
--------------------------------------------------------------------------------
1 | export function isSymbol(property: any) {
2 | return typeof property === "symbol";
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/selection.ts:
--------------------------------------------------------------------------------
1 | export type SelectionState =
2 | | "MULTIPLE"
3 | | "VALID"
4 | | "INVALID"
5 | | "HAS_COMPONENT_CHILD"
6 | | "IS_WITHIN_COMPONENT"
7 | | "IS_WITHIN_INSTANCE"
8 | | "EMPTY";
9 |
10 | /**
11 | * Checks if current selection is empty, multiple, valid or updateable.
12 | * @param selection - Current page selection
13 | * @returns {SelectionState}
14 | */
15 | export function validateSelection(
16 | selection: ReadonlyArray,
17 | validNodeTypes: Array
18 | ): SelectionState {
19 | if (selection.length) {
20 | if (selection.length > 1) {
21 | return "MULTIPLE";
22 | }
23 | const node: SceneNode = selection[0];
24 | if (validNodeTypes.indexOf(node.type) >= 0) {
25 | if (isWithinNodeType(node, "COMPONENT")) {
26 | //
27 | // TODO: Remove these guards?
28 | // When trying to derive the background color of the shadow node, (deeply) nested components
29 | // caused a lot of issues hence I disabled shadows for components/nested components altogether.
30 | // This was a poor decision though as it is very unexpected for the user.
31 | // In a future refactor, I should either refactor the deriveBgColor or remove it altogether.
32 | //
33 | // return 'IS_WITHIN_COMPONENT'
34 | return "VALID";
35 | } else if (node.type === "GROUP" && hasComponentChild(node)) {
36 | // return "HAS_COMPONENT_CHILD";
37 | return "VALID";
38 | } else {
39 | return "VALID";
40 | }
41 | } else {
42 | return "INVALID";
43 | }
44 | } else {
45 | return "EMPTY";
46 | }
47 | }
48 |
49 | /**
50 | * Check if node is parented under certain node type.
51 | * @param node
52 | * @param type
53 | * @returns
54 | */
55 | export function isWithinNodeType(node: SceneNode, type: NodeType): boolean {
56 | const parent = node.parent;
57 | if (parent === null || parent.type === "DOCUMENT" || parent.type === "PAGE") {
58 | return false;
59 | }
60 | if (parent.type === type) {
61 | return true;
62 | }
63 | return isWithinNodeType(parent, type);
64 | }
65 |
66 | /**
67 | * Search group for component child nodes, that would throw a re-componentizing error.
68 | * @param selection
69 | * @returns - truthy value if component child has been found
70 | */
71 | export function hasComponentChild(selection: SceneNode): boolean | undefined {
72 | let hasComponent;
73 | if (selection.type === "COMPONENT") {
74 | return true;
75 | } else if (selection.type !== "GROUP") {
76 | return false;
77 | }
78 | selection.children.some((child) => (hasComponent = hasComponentChild(child)));
79 | return hasComponent;
80 | }
81 |
--------------------------------------------------------------------------------
/src/utils/shadow.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @file This is where the magic happens. Generate an array of shadow objects,
3 | * which is consumed by both the UI and canvas/main.ts.
4 | *
5 | * A lot of the values and easing is based on trial & error and gut feeling.
6 | * The technique of tinting the shadows is adapted from Josh W. Comeau's amazing
7 | * read about designing shadows in CSS: https://www.joshwcomeau.com/css/designing-shadows/
8 | */
9 |
10 | import { normalize, round, degreeToRadian } from "./math";
11 | import { easeQuadOut, easeQuadIn, easeCubicInOut } from "d3-ease";
12 | import { SHADOW_BASE_BLUR } from "../constants";
13 | import { ShadowType } from "../store/createShadowProps";
14 |
15 | interface ShadowParameter {
16 | numShadows: number;
17 | azimuth: number;
18 | distance: number;
19 | elevation: number;
20 | brightness: number;
21 | color: RGBA;
22 | shadowType: ShadowType;
23 | size: { width: number; height: number };
24 | }
25 |
26 | export function getCastedShadows({
27 | numShadows,
28 | azimuth,
29 | distance,
30 | elevation,
31 | brightness,
32 | color,
33 | shadowType,
34 | size,
35 | }: ShadowParameter): DropShadowEffect[] | InnerShadowEffect[] {
36 | const azimuthRad = degreeToRadian(azimuth);
37 |
38 | /**
39 | * Match shadow between UI and canvas.
40 | * The UI element is always 100*100px, whereas the canvas element size is indefinite.
41 | * To create the same shadow offset between the UI and canvas layer, we need to scale the offset respectively.
42 | */
43 | const { width, height } = size;
44 | const longestSide = Math.max(width, height);
45 | const factor = longestSide / 100; // ui element is 100*100 by default
46 | const scale = distance * factor; // 20 -> arbitrary value that felt good
47 |
48 | const increaseRadiusWithDistance = Math.max(scale / 100, 0.1); // values are purely based on gut feel
49 |
50 | const shadows: DropShadowEffect[] | InnerShadowEffect[] = Array.from({ length: numShadows }, (_, i) => {
51 | const type: any = shadowType;
52 | // opacity/ shadow alpha
53 | const easeOpacity = easeCubicInOut(normalize(i, 0, numShadows));
54 | const a = round(brightness - brightness * easeOpacity, 2);
55 |
56 | // offset
57 | const easeOffset = easeQuadIn(normalize(i, 0, numShadows)) * 5;
58 | const x = round(Math.cos(azimuthRad) * (scale * elevation * easeOffset));
59 | const y = round(Math.sin(azimuthRad) * (scale * elevation * easeOffset));
60 |
61 | // radius/ shadow blur
62 | const easeRadius = easeQuadOut(normalize(i, 0, numShadows));
63 | const radius = round(SHADOW_BASE_BLUR * increaseRadiusWithDistance * easeRadius * (elevation * 2));
64 |
65 | return {
66 | type,
67 | blendMode: "NORMAL",
68 | visible: true,
69 | color: { ...color, a },
70 | offset: {
71 | x,
72 | y,
73 | },
74 | radius,
75 | spread: 0,
76 | };
77 | });
78 | // due to the way the easing function works, we'll always end up with an almost transparent 0px 0px 0px 0px shadow. we'll just filter that one out...
79 | let _shadows: any[] = shadows;
80 | let filtered = _shadows.filter((shadow) => !(shadow.offset.x === 0 && shadow.offset.y === 0 && shadow.radius === 0));
81 | return filtered as DropShadowEffect[] | InnerShadowEffect[];
82 | }
83 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@create-figma-plugin/tsconfig",
3 | "compilerOptions": {
4 | "typeRoots": ["node_modules/@figma", "node_modules/@types"]
5 | },
6 | "include": ["src/**/*.ts", "src/**/*.tsx"]
7 | }
8 |
--------------------------------------------------------------------------------
2 |
3 | [
](https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows)
4 |
5 | Create beautiful, smooth shadows in Figma.
6 | The plugin allows the user to create realistic shadows by adding a 'light source' which casts a shadow on selected elements.
7 |
8 | Instead of thinking in abstract offsets, radius and spreads, the shadows are parameterized by `azimuth` (angle between light and element), `distance` (between light and element), `brightness` (of the light source) and `elevation` (of the shadow-receiving element).
9 |
10 | The shadow effect is achieved by layering and easing multiple drop-shadows to create a skeuomorphic umbra and penumbra.
11 |
12 | The plugin is cultivated by [Josh W. Comeau's](https://www.joshwcomeau.com/) amazing resource and read about [Designing beautiful shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/).
13 |
14 | ## 🌀 Misc
15 |
16 | This plugin uses the amazing [create-figma-plugin](https://github.com/yuanqing/create-figma-plugin) library.
17 |
18 | ## 📝 License
19 |
20 | [MIT](LICENSE)
21 |
--------------------------------------------------------------------------------
/media/button.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/media/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexwidua/figma-beautiful-shadows/d4ce0e7b71cd95c78207c1a71f48977ce7cbb7d3/media/hero.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "@alexwidua/create-figma-plugin-components": "^0.1.10",
4 | "@create-figma-plugin/ui": "^1.8.2",
5 | "@create-figma-plugin/utilities": "^1.8.2",
6 | "@react-spring/web": "^9.4.2",
7 | "@types/chroma-js": "^2.1.3",
8 | "@types/d3-ease": "^3.0.0",
9 | "@use-gesture/react": "^10.2.4",
10 | "chroma-js": "^2.1.2",
11 | "d3-ease": "^3.0.1",
12 | "preact": "^10",
13 | "stylelint": "^14.3.0",
14 | "stylelint-config-idiomatic-order": "^8.1.0",
15 | "zustand": "^3.6.9"
16 | },
17 | "devDependencies": {
18 | "@create-figma-plugin/build": "^2.6.1",
19 | "@create-figma-plugin/tsconfig": "^2.6.1",
20 | "@figma/plugin-typings": "1.40.0",
21 | "@types/react": "^17.0.38",
22 | "react": "^17.0.2",
23 | "typescript": "^4"
24 | },
25 | "scripts": {
26 | "build": "build-figma-plugin --typecheck --minify",
27 | "watch": "build-figma-plugin --typecheck --watch"
28 | },
29 | "figma-plugin": {
30 | "editorType": [
31 | "figma"
32 | ],
33 | "id": "1068595505353552645",
34 | "name": "Beautiful Shadows",
35 | "main": "src/main.ts",
36 | "ui": "src/ui.tsx",
37 | "relaunchButtons": {
38 | "editShadow": {
39 | "name": "Edit shadow",
40 | "main": "src/main.ts",
41 | "ui": "src/ui.tsx"
42 | }
43 | },
44 | "networkAccess": {
45 | "allowedDomains": [
46 | "none"
47 | ]
48 | }
49 | },
50 | "stylelint": {
51 | "extends": "stylelint-config-idiomatic-order"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | import { ShadowType } from "../store/createShadowProps";
2 |
3 | /**
4 | * Plugin window
5 | */
6 |
7 | export const WINDOW_INITIAL_WIDTH = 375;
8 | export const WINDOW_INITIAL_HEIGHT = 375;
9 | export const WINDOW_MIN_WIDTH = 340;
10 | export const WINDOW_MIN_HEIGHT = 340;
11 | export const WINDOW_MAX_WIDTH = 900;
12 | export const WINDOW_MAX_HEIGHT = 900;
13 |
14 | /**
15 | * Performance
16 | */
17 | export const DEBOUNCE_CANVAS_UPDATES = 8; // ms
18 |
19 | /**
20 | * Light source
21 | */
22 | export const LIGHT_SIZE = 32;
23 | export const LIGHT_INITIAL_POSITION = {
24 | x: WINDOW_INITIAL_WIDTH / 2 - LIGHT_SIZE / 2,
25 | y: WINDOW_INITIAL_WIDTH / 2 - 148,
26 | };
27 | export const LIGHT_INITIAL_BRIGHTNESS = 0.1; // value between 0-1
28 | export const LIGHT_MIN_BRIGHTNESS = 0.01; // value between 0-1
29 |
30 | /**
31 | * Target element which casts the shadow
32 | */
33 | export const TARGET_INITIAL_ELEVATION = 0.15;
34 |
35 | /**
36 | * Background
37 | */
38 | export const BACKGROUND_DEFAULT_COLOR = "#e5e5e5";
39 |
40 | /**
41 | * Shadow
42 | */
43 | export const SHADOW_DEFAULT_COLOR = "000000";
44 | export const SHADOW_DEFAULT_TYPE: ShadowType = "DROP_SHADOW";
45 | export const SHADOW_BASE_BLUR = 50;
46 |
47 | /**
48 | * Preview
49 | */
50 | export const LIGHT_SNAP_TO_AXIS_TRESHOLD = 6; //px
51 | export const GRID_SIZE = 32;
52 | export const GRID_OPACITY = 0.25;
53 |
--------------------------------------------------------------------------------
/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'preact/hooks'
2 |
3 | function useDebounce