diff --git a/app/[slug]/layout.tsx b/app/[slug]/layout.tsx new file mode 100644 index 0000000..5348788 --- /dev/null +++ b/app/[slug]/layout.tsx @@ -0,0 +1,23 @@ +import '../styles/frensday.css'; +import '../styles/generic.css'; + +import React from 'react'; + +// export const metadata = { +// title: 'Next.js', +// description: 'Generated by Next.js', +// }; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; + params: { slug: string }; + searchParams: { event?: string; iykRef?: string }; +}) { + return ( + // +
{children}
+ // + ); +} diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx index 08baf06..0955bfe 100644 --- a/app/[slug]/page.tsx +++ b/app/[slug]/page.tsx @@ -1,8 +1,10 @@ /* eslint-disable unicorn/prevent-abbreviations */ import { ens_normalize } from '@adraffy/ens-normalize'; +import clsx from 'clsx'; import { Metadata } from 'next'; -import { MonsterOverlay } from '../../components/Monsters/Overlay'; +import { MonsterOverlay } from '../../components/events/frensday/Monsters/Overlay'; +import { EventHeader } from '../../components/Headers/EventHeader'; import { SPOAPModal } from '../../components/POAPModal/SPOAPModal'; import { RecordsSection } from '../../components/Records/records'; import { XMTPSection } from '../../components/XMTP/section'; @@ -10,6 +12,10 @@ import { useEnstate } from '../../hooks/useEnstate'; import { useIYKRef } from '../../hooks/useIYKRef'; import { useWarpcast } from '../../hooks/useWarpcast'; +const theme2Class = { + frensday2023: 'theme-frensday2023', +}; + export default async function ({ params: { slug }, searchParams: { event, iykRef }, @@ -19,6 +25,7 @@ export default async function ({ }) { const raw_name = slug; const name = ens_normalize(raw_name.toLowerCase()); + const ad_class: string = theme2Class[event] || 'theme-generic'; if (raw_name.toLowerCase() !== name) { throw new Error('Invalid ENS name'); @@ -31,16 +38,9 @@ export default async function ({ ]); return ( -
+
-
- frensday -
November 13 2023, Istanbul Türkiye
-
+
@@ -50,9 +50,11 @@ export default async function ({ className="w-full h-full" />
-
- -
+ {event == 'frensday2023' && ( +
+ +
+ )}
@@ -64,7 +66,12 @@ export default async function ({
- + {event == 'frensday2023' && ( + + )} {iykData && }
diff --git a/app/global.css b/app/global.css index 4de72b6..f44f351 100644 --- a/app/global.css +++ b/app/global.css @@ -2,10 +2,6 @@ @tailwind components; @tailwind utilities; -.btn { - @apply bg-[#7116EB] relative rounded-lg flex items-center justify-center gap-2 hover:bg-[#781dff] transition-colors duration-200 ease-in-out active:bg-[#5e0fc8]; -} - .balance { text-wrap: pretty; text-wrap: balance; diff --git a/app/layout.tsx b/app/layout.tsx index 26b13c5..c0018a1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -14,7 +14,8 @@ export default function RootLayout({ }) { return ( - {children} + {children} + {/* {children} */} ); } diff --git a/app/styles/frensday.css b/app/styles/frensday.css new file mode 100644 index 0000000..87106e4 --- /dev/null +++ b/app/styles/frensday.css @@ -0,0 +1,8 @@ +html:has(.theme-frensday2023) { + body { + @apply bg-[#2A2244] text-white; + } + .btn { + @apply bg-[#7116EB] hover:bg-[#781dff] active:bg-[#5e0fc8]; + } +} diff --git a/app/styles/generic.css b/app/styles/generic.css new file mode 100644 index 0000000..b5a7bd5 --- /dev/null +++ b/app/styles/generic.css @@ -0,0 +1,21 @@ +.btn { + @apply relative rounded-lg flex items-center justify-center gap-2 transition-colors duration-200 ease-in-out; +} + +html:has(.theme-generic) { + body { + @apply bg-ens-light-background-secondary text-ens-light-text-primary; + } + .btn { + @apply bg-ens-light-blue-primary text-ens-light-text-accent hover:bg-ens-light-blue-bright active:bg-ens-light-blue-active; + } + .btn-twitter { + @apply bg-black text-white hover:bg-[#222] active:bg-[#333]; + } + .btn-telegram { + @apply bg-[#33ABE0] hover:bg-[#33ABE0] active:bg-[#33ABE0] hover:brightness-105 active:brightness-95; + } + .btn-url { + @apply bg-ens-light-purple-primary hover:bg-ens-light-purple-bright active:bg-ens-light-purple-active; + } +} diff --git a/components/AButton/button.tsx b/components/AButton/button.tsx index 6bf91dc..6df79e5 100644 --- a/components/AButton/button.tsx +++ b/components/AButton/button.tsx @@ -1,11 +1,15 @@ +import clsx from 'clsx'; import { FC, PropsWithChildren } from 'react'; -export const AButton: FC> = ({ - children, - href, -}) => { +export const AButton: FC< + PropsWithChildren<{ href: string; className?: string }> +> = ({ children, href, className }) => { return ( - + {children} ); diff --git a/components/Headers/EventHeader.tsx b/components/Headers/EventHeader.tsx new file mode 100644 index 0000000..326f861 --- /dev/null +++ b/components/Headers/EventHeader.tsx @@ -0,0 +1,16 @@ +export const EventHeader = ({ event }) => { + if (event == 'frensday2023') { + return ( +
+ frensday +
November 13 2023, Istanbul Türkiye
+
+ ); + } + + return <>; +}; diff --git a/components/POAPModal/POAPModal.tsx b/components/POAPModal/POAPModal.tsx index d3724e1..ff84a88 100644 --- a/components/POAPModal/POAPModal.tsx +++ b/components/POAPModal/POAPModal.tsx @@ -7,7 +7,7 @@ import { IYKRefResponse as IYKReferenceResponse } from '../../hooks/useIYKRef'; import { POAPMetadata } from '../../hooks/usePOAPData'; import { Creeper } from './Creeper'; -const SHOW_POAP_ANYWAYS = true; +const SHOW_POAP_ANYWAYS = false; // 10 days const HIDE_AFTER_TIME = 1000 * 60 * 60 * 24 * 100; diff --git a/components/Records/records.tsx b/components/Records/records.tsx index ff991f0..212f506 100644 --- a/components/Records/records.tsx +++ b/components/Records/records.tsx @@ -14,7 +14,10 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => { if (key == 'com.twitter') { return ( - + {formatted || value} @@ -25,7 +28,7 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => { const { hostname } = new URL(formatted || value); return ( - + {hostname} @@ -34,7 +37,10 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => { if (key == 'com.github') { return ( - + {formatted || value} @@ -45,6 +51,7 @@ const buttonControls = (key: string, value: string): ReactNode | undefined => { return ( {formatted || value} diff --git a/components/Monsters/Monster.tsx b/components/events/frensday/Monsters/Monster.tsx similarity index 100% rename from components/Monsters/Monster.tsx rename to components/events/frensday/Monsters/Monster.tsx diff --git a/components/Monsters/Overlay.tsx b/components/events/frensday/Monsters/Overlay.tsx similarity index 100% rename from components/Monsters/Overlay.tsx rename to components/events/frensday/Monsters/Overlay.tsx diff --git a/package.json b/package.json index 3d4d46c..dc042e7 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,9 @@ "@ens-tools/format": "^0.0.2", "autoprefixer": "^10.4.14", "clsx": "^2.0.0", - "next": "^13.5.0", + "next": "^13.4.10", "postcss": "^8.4.26", + "postcss-nested": "^6.0.1", "react": "^18.2.0", "react-icons": "^4.11.0", "short-number": "^1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d3ab61..6f459ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@adraffy/ens-normalize': specifier: ^1.10.0 @@ -18,11 +14,14 @@ dependencies: specifier: ^2.0.0 version: 2.0.0 next: - specifier: ^13.5.0 - version: 13.5.0(react-dom@18.2.0)(react@18.2.0) + specifier: ^13.4.10 + version: 13.4.10(react-dom@18.2.0)(react@18.2.0) postcss: specifier: ^8.4.26 version: 8.4.26 + postcss-nested: + specifier: ^6.0.1 + version: 6.0.1(postcss@8.4.26) react: specifier: ^18.2.0 version: 18.2.0 @@ -195,12 +194,12 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: false - /@next/env@13.5.0: - resolution: {integrity: sha512-mxhf/BskjPURT+qEjNP7wBvqre2q6OXEIbydF8BrH+duSSJQnB4/vzzuJDoahYwTXiUaXpouAnMWHZdG0HU62g==} + /@next/env@13.4.10: + resolution: {integrity: sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==} dev: false - /@next/swc-darwin-arm64@13.5.0: - resolution: {integrity: sha512-DavPD8oRjSoCRJana5DCAWdRZ4nbS7/pPw13DlnukFfMPJUk5hCAC3+NbqEyekS/X1IBFdZWSV2lJIdzTn4s6w==} + /@next/swc-darwin-arm64@13.4.10: + resolution: {integrity: sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -208,8 +207,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@13.5.0: - resolution: {integrity: sha512-s5QSKKB0CTKFWp3CNMC5GH1YOipH1Jjr5P3w+RQTC4Aybo6xPqeWp/UyDW0fxmLRq0e1zgnOMgDQRdxAkoThrw==} + /@next/swc-darwin-x64@13.4.10: + resolution: {integrity: sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -217,8 +216,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@13.5.0: - resolution: {integrity: sha512-E0fCKA8F2vfgZWwcv4iq642No75EiACSNUBNGvc5lx/ylqAUdNwE/9+x2SHv+LPUXFhZ6hZLR0Qox/oKgZqFlg==} + /@next/swc-linux-arm64-gnu@13.4.10: + resolution: {integrity: sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -226,8 +225,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@13.5.0: - resolution: {integrity: sha512-jG/blDDLndFRUcafCQO4TOI3VuoIZh3jQriZ7JaVCgAEZe0D1EUrxKdbBarZ74isutHZ6DpNGRDi/0OHFZpJAA==} + /@next/swc-linux-arm64-musl@13.4.10: + resolution: {integrity: sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -235,8 +234,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@13.5.0: - resolution: {integrity: sha512-6JWR7U41uNL6HGwNbGg3Oedt+FN4YuA126sHWKTq3ic5kkhEusIIdVo7+WcswVJl8nTMB1yT3gEPwygQbVYVUA==} + /@next/swc-linux-x64-gnu@13.4.10: + resolution: {integrity: sha512-WDv1YtAV07nhfy3i1visr5p/tjiH6CeXp4wX78lzP1jI07t4PnHHG1WEDFOduXh3WT4hG6yN82EQBQHDi7hBrQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -244,8 +243,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@13.5.0: - resolution: {integrity: sha512-uY+wrYfD5QUossqznwidOpJYmmcBwojToZx55shihtbTl6afVYzOxsUbRXLdWmZAa36ckxXpqkvuFNS8icQuug==} + /@next/swc-linux-x64-musl@13.4.10: + resolution: {integrity: sha512-zFkzqc737xr6qoBgDa3AwC7jPQzGLjDlkNmt/ljvQJ/Veri5ECdHjZCUuiTUfVjshNIIpki6FuP0RaQYK9iCRg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -253,8 +252,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@13.5.0: - resolution: {integrity: sha512-lWZ5vJTULxTOdLcRmrllNgAdDRSDwk8oqJMyDxpqS691NG5uhle9ZwRj3g1F1/vHNkDa+B7PmWhQgG0nmlbKZg==} + /@next/swc-win32-arm64-msvc@13.4.10: + resolution: {integrity: sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -262,8 +261,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@13.5.0: - resolution: {integrity: sha512-jirQXnVCU9hi3cHzgd33d4qSBXn1/0gUT/KtXqy9Ux9OTcIcjJT3TcAzoLJLTdhRg7op3MZoSnuFeWl8kmGGNw==} + /@next/swc-win32-ia32-msvc@13.4.10: + resolution: {integrity: sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -271,8 +270,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@13.5.0: - resolution: {integrity: sha512-Q8QYLyWcMMUp3DohI04VyJbLNCfFMNTxYNhujvJD2lowuqnqApUBP2DxI/jCZRMFWgKi76n5u8UboLVeYXn6jA==} + /@next/swc-win32-x64-msvc@13.4.10: + resolution: {integrity: sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -298,8 +297,8 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - /@swc/helpers@0.5.2: - resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} + /@swc/helpers@0.5.1: + resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==} dependencies: tslib: 2.6.0 dev: false @@ -1814,23 +1813,26 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true - /next@13.5.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-mhguN5JPZXhhrD/nNcezXgKoxN8GT8xZvvGhUQV2ETiaNm+KHRWT1rCbrF5FlbG2XCcLRKOmOe3D5YQgXmJrDQ==} - engines: {node: '>=16.14.0'} + /next@13.4.10(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-4ep6aKxVTQ7rkUW2fBLhpBr/5oceCuf4KmlUpvG/aXuDTIf9mexNSpabUD6RWPspu6wiJJvozZREhXhueYO36A==} + engines: {node: '>=16.8.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 + fibers: '>= 3.1.0' react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true + fibers: + optional: true sass: optional: true dependencies: - '@next/env': 13.5.0 - '@swc/helpers': 0.5.2 + '@next/env': 13.4.10 + '@swc/helpers': 0.5.1 busboy: 1.6.0 caniuse-lite: 1.0.30001516 postcss: 8.4.14 @@ -1840,15 +1842,15 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.5.0 - '@next/swc-darwin-x64': 13.5.0 - '@next/swc-linux-arm64-gnu': 13.5.0 - '@next/swc-linux-arm64-musl': 13.5.0 - '@next/swc-linux-x64-gnu': 13.5.0 - '@next/swc-linux-x64-musl': 13.5.0 - '@next/swc-win32-arm64-msvc': 13.5.0 - '@next/swc-win32-ia32-msvc': 13.5.0 - '@next/swc-win32-x64-msvc': 13.5.0 + '@next/swc-darwin-arm64': 13.4.10 + '@next/swc-darwin-x64': 13.4.10 + '@next/swc-linux-arm64-gnu': 13.4.10 + '@next/swc-linux-arm64-musl': 13.4.10 + '@next/swc-linux-x64-gnu': 13.4.10 + '@next/swc-linux-x64-musl': 13.4.10 + '@next/swc-win32-arm64-msvc': 13.4.10 + '@next/swc-win32-ia32-msvc': 13.4.10 + '@next/swc-win32-x64-msvc': 13.4.10 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -2702,3 +2704,7 @@ packages: /zod@3.21.4: resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/postcss.config.js b/postcss.config.js index b304d33..3522657 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,7 @@ // eslint-disable-next-line unicorn/no-empty-file module.exports = { plugins: { + 'postcss-nested': {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/tailwind.config.js b/tailwind.config.js index 5cbaded..2ee2067 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,6 +18,195 @@ module.exports = { md2: '420px', md3: '458px', }, + colors: { + ens: { + light: { + blue: { + DEFAULT: '#5298FF', + 50: '#FFFFFF', + 100: '#F5F9FF', + 200: '#CCE1FF', + 300: '#A4C9FF', + 400: '#7BB0FF', + 500: '#5298FF', + 600: '#1A77FF', + 700: '#005BE1', + 800: '#0044A9', + 900: '#002E71', + active: '#003685', + dim: '#056AFF', + primary: '#3889FF', + bright: '#569AFF', + light: '#D1E4FF', + surface: '#EEF5FF', + }, + indigo: { + active: '#19175F', + dim: '#342FC5', + primary: '#5854D6', + bright: '#7E7BDF', + light: '#C7C5F1', + surface: '#E3E2F8', + }, + purple: { + active: '#3D1353', + dim: '#8A2BBA', + primary: '#A343D3', + bright: '#B86EDD', + light: '#E3C6F1', + surface: '#EBD6F5', + }, + pink: { + active: '#440E28', + dim: '#AE2366', + primary: '#D52E7E', + bright: '#DE5999', + light: '#F4CDE0', + surface: '#EBD6F5', + }, + red: { + active: '#280A06', + dim: '#992515', + primary: '#C6301B', + bright: '#E34631', + light: '#F0C2C2', + surface: '#F9E7E7', + }, + orange: { + active: '#492C03', + dim: '#C37609', + primary: '#F3930B', + bright: '#F6A93C', + light: '#FBE1BC', + surface: '#FDF0DD', + }, + yellow: { + active: '#423505', + dim: '#B9930E', + primary: '#E9B911', + bright: '#F0C93C', + light: '#FFEFAD', + surface: '#FFF5CD', + }, + green: { + active: '#072C21', + dim: '#158463', + primary: '#199C75', + bright: '#1EB789', + green: '#CBE7DC', + surface: '#E7F4EF', + }, + grey: { + active: '#1E2122', + dim: '#595959', + primary: '#9B9BA7', + bright: '#B6B6BF', + light: '#E8E8E8', + surface: '#F6F6F6', + }, + text: { + primary: '#1E2122', + secondary: '#9B9BA7', + accent: '#FFFFFF', + disabled: '#B6B6BF', + }, + background: { + primary: '#FFFFFF', + secondary: '#F6F6F6', + disabled: '#E8E8E8', + }, + // Additional + border: '#E8E8E8', + }, + dark: { + blue: { + active: '#EEF5FF', + dim: '#D1E4FF', + primary: '#3889FF', + bright: '#056AFF', + light: '#0C4597', + surface: '#20395F', + }, + indigo: { + active: '#E3E2F8', + dim: '#C7C5F1', + primary: '#6B67E9', + bright: '#342FC5', + light: '#221E90', + surface: '#23216D', + }, + purple: { + active: '#EBD6F5', + dim: '#E3C6F1', + primary: '#A343D3', + bright: '#8A2BBA', + light: '#5E1683', + surface: '#42145A', + }, + pink: { + active: '#FAE8F1', + dim: '#F4CDE0', + primary: '#D52E7E', + bright: '#AE2366', + light: '#761544', + surface: '#5B1135', + }, + red: { + active: '#F9E7E7', + dim: '#F0C2C2', + primary: '#C6301B', + bright: '#A72614', + light: '#7F1313', + surface: '#3F2424', + }, + orange: { + active: '#FDF0DD', + dim: '#FBE1BC', + primary: '#F3930B', + bright: '#C37609', + light: '#6D4308', + surface: '#583503', + }, + yellow: { + active: '#FFF5CD', + dim: '#FFEFAD', + primary: '#E9B911', + bright: '#B9930E', + light: '#5C4B0C', + surface: '#373222', + }, + green: { + active: '#E7F4EF', + dim: '#CBE7DC', + primary: '#199C75', + bright: '#158463', + green: '#104A38', + surface: '#153C31', + }, + grey: { + active: '#F6F6F6', + dim: '#E8E8E8', + primary: '#9B9BA7', + bright: '#5D5C62', + light: '#424347', + surface: '#141416', + }, + text: { + primary: '#FFFFFF', + secondary: '#9B9BA7', + accent: '##FFFFFF', + disabled: '#5D5C62', + }, + background: { + primary: '#1E2122', + secondary: '#141416', + disabled: '##424347', + }, + // Additional + border: '#42464E', + }, + }, + }, }, }, plugins: [],