feat: add street theme

theodorusclarence · Feb 6, 2022 · abfa0a1 · abfa0a1
1 parent fbdacd0
commit abfa0a1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -9,7 +9,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className={theme}>
       <div
-        className={clsx('dark:bg-dark dark:text-white', 'milky:bg-[#fff5e3]')}
+        className={clsx(
+          'dark:bg-dark dark:text-white',
+          'milky:bg-[#fff5e3] street:bg-street-800'
+        )}
       >
         {demoMode && (
           <select
@@ -21,6 +24,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             <option value='light'>light</option>
             <option value='dark'>dark</option>
             <option value='theme-milky'>milky</option>
+            <option value='theme-street dark'>street</option>
           </select>
         )}
         {children}

diff --git a/src/components/links/TreeLink.tsx b/src/components/links/TreeLink.tsx
@@ -23,7 +23,8 @@ export default function TreeLink({
           'accent-gradient bg-gradient-to-r',
           'transition duration-300 group-hover:duration-200',
           'milky:rounded-full',
-          'pointer-events-none'
+          'pointer-events-none',
+          'street:group-hover:animate-flickerStreet'
         )}
       />
 
@@ -36,7 +37,8 @@ export default function TreeLink({
           'focus:outline-none focus-visible:ring focus-visible:ring-primary-500',
           'border-gray-400 bg-white',
           'dark:border-gray-600 dark:bg-dark',
-          'milky:rounded-full milky:bg-milky-100 milky:text-milky-500'
+          'milky:rounded-full milky:bg-milky-100 milky:text-milky-500',
+          'street:bg-street-800'
         )}
       >
         {icon ? (

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -31,6 +31,10 @@
   --tw-clr-milky-100: 255, 245, 227; /* #fff5e3 */
   --tw-clr-milky-400: 129, 100, 82; /* #81644a */
   --tw-clr-milky-500: 112, 77, 55; /* #70554f */
+
+  --tw-clr-street-400: 184, 105, 255; /* #b869ff */
+  --tw-clr-street-500: 104, 107, 253; /* #686afd */
+  --tw-clr-street-800: 1, 22, 39; /* #011627 */
 }
 
 @layer base {
@@ -115,4 +119,13 @@
 .theme-milky .accent-gradient {
   @apply from-milky-400 to-milky-500;
 }
+
+.theme-street {
+  --tw-clr-primary-400: var(--tw-clr-street-400);
+  --tw-clr-primary-500: var(--tw-clr-street-500);
+  --tw-clr-primary-800: var(--tw-clr-street-800);
+}
+.theme-street .accent-gradient {
+  @apply from-street-400 to-street-500;
+}
 /* #endregion  /**======== Theme =========== */
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
   theme: {
-    themeVariants: ['light', 'milky'],
+    themeVariants: ['light', 'milky', 'street'],
     extend: {
       fontFamily: {
         primary: ['Inter', ...fontFamily.sans],
@@ -40,6 +40,11 @@ module.exports = {
           400: withOpacity('--tw-clr-milky-400'),
           500: withOpacity('--tw-clr-milky-500'),
         },
+        street: {
+          400: withOpacity('--tw-clr-street-400'),
+          500: withOpacity('--tw-clr-street-500'),
+          800: withOpacity('--tw-clr-street-800'),
+        },
         dark: '#222222',
       },
       keyframes: {
@@ -54,6 +59,17 @@ module.exports = {
             filter: 'none',
           },
         },
+        flickerStreet: {
+          '0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': {
+            opacity: 0.99,
+            filter:
+              'drop-shadow(0 0 1px rgba(184, 105, 255)) drop-shadow(0 0 15px rgba(104, 107, 253)) drop-shadow(0 0 1px rgba(184, 105, 255))',
+          },
+          '20%, 21.999%, 63%, 63.999%, 65%, 69.999%': {
+            opacity: 0.4,
+            filter: 'none',
+          },
+        },
         tilt: {
           '0%, 50%, 100%': {
             transform: 'rotate(0deg)',
@@ -68,6 +84,7 @@ module.exports = {
       },
       animation: {
         flicker: 'flicker 3s linear infinite',
+        flickerStreet: 'flickerStreet 3s linear infinite',
         tilt: 'tilt 10s infinite linear',
       },
     },