huncholaneuse variables for text-shadow
huncholane2 files changed, +22 -4
+6-4twench_landing_page/app/globals.css
| @@ -5,6 +5,10 @@ | ||
| 5 | 5 | :root { |
| 6 | 6 | --background: #394b37; |
| 7 | 7 | --foreground: #171717; |
| 8 | + --ts-small: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, | |
| 9 | + 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; | |
| 10 | + --ts-medium: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, | |
| 11 | + -4px 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000; | |
| 8 | 12 | } |
| 9 | 13 | |
| 10 | 14 | body { |
| @@ -23,11 +27,9 @@ body { | ||
| 23 | 27 | } |
| 24 | 28 | |
| 25 | 29 | .small-text-shadow { |
| 26 | - text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, | |
| 27 | - -2px 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; | |
| 30 | + text-shadow: var(--ts-small); | |
| 28 | 31 | } |
| 29 | 32 | |
| 30 | 33 | .text-shadow { |
| 31 | - text-shadow: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, | |
| 32 | - -4px 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000; | |
| 34 | + text-shadow: var(--ts-medium); | |
| 33 | 35 | } |
+16-0twench_landing_page/plugins/text-shadow.ts
| @@ -0,0 +1,16 @@ | ||
| 1 | +import plugin from "tailwindcss/plugin"; | |
| 2 | + | |
| 3 | +const textShadowPlugin = plugin(function ({ matchUtilities, theme }) { | |
| 4 | + matchUtilities( | |
| 5 | + { | |
| 6 | + "text-shadow": (value: string) => ({ | |
| 7 | + textShadow: value, | |
| 8 | + }), | |
| 9 | + }, | |
| 10 | + { | |
| 11 | + values: theme("textShadow"), | |
| 12 | + } | |
| 13 | + ); | |
| 14 | +}); | |
| 15 | + | |
| 16 | +export default textShadowPlugin; |