code output update

imhul · Feb 2, 2024 · 592462a · 592462a
1 parent 140982f
commit 592462a
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 13 deletions.
diff --git a/src/lib/components/Config/code.svelte b/src/lib/components/Config/code.svelte
@@ -3,9 +3,10 @@
     import Prism from 'prismjs';
     import 'prismjs/themes/prism.min.css';
 
-    type State = 'css' | 'scss' | 'less';
+    type State = 'css' | 'sass' | 'scss' | 'less';
     const state: Record<State, boolean> = {
         css: true,
+        sass: false,
         scss: false,
         less: false
     };
@@ -31,7 +32,30 @@
             `   background: linear-gradient(${$angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom});\n` +
             `   box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
             `   ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` +
+            `}\n .text {\n` +
+            `   text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` +
+            `       ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` +
             `}\n`,
+        sass:
+            `.shape \n` +
+            `   background-color: ${$cssData.shapeBg}\n` +
+            `   &-default \n` +
+            `       box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
+            `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` +
+            `   &-active \n` +
+            `      box-shadow: inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
+            `      inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` +
+            `   &-focused \n` +
+            `      background: linear-gradient(${$angle}, ${$cssData.gradientFocusedFrom}, ${$cssData.gradientFocusedTo})\n` +
+            `      box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
+            `      ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` +
+            `   &-disabled \n` +
+            `      background: linear-gradient(${$angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom})\n` +
+            `      box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
+            `      ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` +
+            `.text \n` +
+            `   text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` +
+            `       ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset}\n`,
         scss:
             `.shape {\n` +
             `   background-color: ${$cssData.shapeBg};\n` +
@@ -50,6 +74,9 @@
             `      box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
             `      ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` +
             `   }\n` +
+            `}\n .text {\n` +
+            `   text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` +
+            `       ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` +
             `}\n`,
         less:
             `.shape {\n` +
@@ -69,6 +96,9 @@
             `      box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` +
             `      ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` +
             `   }\n` +
+            `}\n .text {\n` +
+            `   text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` +
+            `       ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` +
             `}\n`
     };
 
@@ -111,7 +141,13 @@
     </div>
 
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="copy" on:click={copy} role="button" tabindex="0">
+    <div
+        class="copy"
+        on:click={copy}
+        role="button"
+        aria-label="copy"
+        tabindex="0"
+    >
         <div class:active={copied} class="tooltip" />
         <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/src/lib/components/Config/index.svelte b/src/lib/components/Config/index.svelte
@@ -35,11 +35,13 @@
     <div class="flex-wrapper">
         <div class="flex">
             <div class="info title">Background Color</div>
-            <input
-                class="circle color-picker"
-                bind:value={$color}
-                type="color"
-            />
+            <label class="circle-label">
+                <input
+                    class="circle color-picker"
+                    bind:value={$color}
+                    type="color"
+                />
+            </label>
             <label class="info">
                 <div class="btn-wrapper">
                     {#if $color !== '#ffffff'}
@@ -65,6 +67,7 @@
                 on:click={() => (clicked = !clicked)}
                 role="button"
                 tabindex="0"
+                aria-label="Light Source"
             >
                 <div
                     class="radius"
@@ -352,6 +355,7 @@
                         width: rem(50);
                         height: rem(50);
                         display: block;
+                        margin-bottom: 0;
                         appearance: none;
                         border: 0;
 

diff --git a/src/lib/components/Shapes/index.svelte b/src/lib/components/Shapes/index.svelte
@@ -8,7 +8,10 @@
         cssData,
         showIcons
     } from '$lib/store';
-    import { transformColor } from '$lib/utils/colors';
+    import {
+        transformColor,
+        getOppositeColor
+    } from '$lib/utils/colors';
     import { shapes, states } from '$lib/utils/config';
     import { getOffsetX, getOffsetY } from '$lib/utils/offset';
     import Icon from '$lib/components/Icon/index.svelte';
@@ -21,6 +24,8 @@
     $: gradientFocusedTo = transformColor($color, 70 + $coeff);
     $: offsetX = getOffsetX($angle, $offset);
     $: offsetY = getOffsetY($angle, $offset);
+    $: textShadowWidth = ($width / 2).toFixed(1) + 'px';
+    $: iconColor = getOppositeColor($color);
     $: styleObj = {
         '--angle:': $angle,
         '--offset-x:': offsetX + 'px',
@@ -30,8 +35,10 @@
         '--box-shadow:': boxShadow,
         '--box-shadow-inset: ': boxShadowInset,
         '--shadow-width:': $width + 'px',
+        '--text-shadow-width:': textShadowWidth,
         '--gradient-focused-from:': gradientFocusedFrom,
-        '--gradient-focused-to:': gradientFocusedTo
+        '--gradient-focused-to:': gradientFocusedTo,
+        '--icon-color:': iconColor
     };
 
     $: {
@@ -40,6 +47,7 @@
             shapeBg,
             boxShadow,
             boxShadowInset,
+            textShadowWidth,
             gradientFocusedFrom,
             gradientFocusedTo,
             offsetX: offsetX + 'px',
@@ -66,7 +74,7 @@
                                 <Icon
                                     size={40}
                                     name="hashtag"
-                                    color="var(--primary)"
+                                    color="var(--icon-color)"
                                 />
                             {:else}
                                 <div class="helper" />
@@ -97,8 +105,10 @@
 
 <style lang="scss">
     .container {
-        // --text-shadow: var(--offset-y) var(--offset-x)
-        //     var(--shadow-width) var(--box-shadow);
+        --text-shadow: var(--offset-y) var(--offset-x)
+                var(--text-shadow-width) var(--box-shadow),
+            var(--offset-y) var(--offset-x) var(--text-shadow-width)
+                var(--box-shadow-inset);
         --shadow: var(--offset-y) var(--offset-x) var(--shadow-width)
                 var(--box-shadow),
             var(--offset-y) var(--offset-x) var(--shadow-width)
@@ -200,7 +210,7 @@
                 }
 
                 .text {
-                    text-shadow: var(--shadow);
+                    text-shadow: var(--text-shadow);
                     font-size: rem(32);
                     font-weight: 900;
                     text-transform: uppercase;

diff --git a/src/lib/store/index.ts b/src/lib/store/index.ts
@@ -12,6 +12,7 @@ const defaults = {
     boxShadow: '',
     boxShadowInset: '',
     shadowWidth: '',
+    textShadowWidth: '',
     gradientFocusedFrom: '',
     gradientFocusedTo: '',
     showIcons: true

diff --git a/src/lib/utils/colors.ts b/src/lib/utils/colors.ts
@@ -19,3 +19,23 @@ export const transformColor = (color: string, coeff: number) => {
         b.toString(16)
     );
 };
+
+export const getOppositeColor = (color: string) => {
+    const r = parseInt(color.substring(1, 3), 16);
+    const g = parseInt(color.substring(3, 5), 16);
+    const b = parseInt(color.substring(5, 7), 16);
+
+    const oppositeR = 255 - r;
+    const oppositeG = 255 - g;
+    const oppositeB = 255 - b;
+
+    return (
+        '#' +
+        (oppositeR < 16 ? '0' : '') +
+        oppositeR.toString(16) +
+        (oppositeG < 16 ? '0' : '') +
+        oppositeG.toString(16) +
+        (oppositeB < 16 ? '0' : '') +
+        oppositeB.toString(16)
+    );
+};