diff --git a/app/globals.css b/app/globals.css index a8947107..d689f2d6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,9 +4,13 @@ @layer base { :root { - --bg-page: 240 247 250; - --bg-card: 255 255 255; - --accent: 0 0 225; + --bg-page: hsl(198 50 96); + --bg-card: hsl(0 0 100); + + --primary: hsl(0 0 15); + + --accent: hsl(240 100 50); + --accent-text: hsl(0 0 100); } html, @@ -14,7 +18,7 @@ @apply bg-bg-page; @apply h-full; @apply p-0; - @apply text-grey-15; + @apply text-primary; @apply overscroll-y-none; min-height: -webkit-fill-available; @apply font-sans; @@ -66,16 +70,16 @@ /* START GLOBAL STYLING */ input, textarea { - @apply bg-white; + @apply bg-bg-card; @apply rounded-md; @apply border; - @apply border-grey-80; + @apply border-border; @apply px-2 py-0.5; @apply box-border !important; } ::placeholder { - @apply !text-grey-80; + @apply !text-tertiary; @apply italic; } /* END GLOBAL STYLING */ @@ -85,3 +89,67 @@ .no-scrollbar::-webkit-scrollbar { display: none; } + +.spectrum-ColorArea { + position: relative; + display: inline-block; + inline-size: var(--spectrum-colorarea-default-width); + block-size: var(--spectrum-colorarea-default-height); + min-inline-size: var(--spectrum-colorarea-min-width); + min-block-size: var(--spectrum-colorarea-min-height); + + border-radius: var(--spectrum-colorarea-border-radius); + + cursor: default; + + user-select: none; + + &.is-focused, + &.focus-ring { + z-index: 2; + + .spectrum-ColorArea-handle { + /* Bigger handle when focused */ + width: calc(var(--spectrum-colorhandle-size) * 2); + height: calc(var(--spectrum-colorhandle-size) * 2); + } + } + + &.is-disabled { + pointer-events: none; + } + + /* the floating inset box shadow must be a separate element since won't take it */ + &:before { + content: ""; + z-index: 1; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--spectrum-colorarea-border-radius); + } +} + +.spectrum-ColorArea-handle.spectrum-ColorArea-handle { + left: 0; + top: 0; + margin: 0; + + &:focus-within { + z-index: 2; + } +} + +.spectrum-ColorArea-slider { + opacity: 0.0001; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + margin: 0; + pointer-events: none; +} diff --git a/app/test/card.tsx b/app/test/card.tsx index 67168770..a72fa7eb 100644 --- a/app/test/card.tsx +++ b/app/test/card.tsx @@ -24,7 +24,7 @@ export const Card = (props: { grow flex flex-col gap-2 snap-center overflow-y-scroll no-scrollbar - ${props.focused ? "shadow-md border-grey-80" : "border-grey-90"}`} + ${props.focused ? "shadow-md border-border" : "border-border-light"}`} > {props.children} { return (
-
@@ -33,91 +19,13 @@ export const PageHeader = () => { ); }; -const ThemePopover = () => { - return ( - - - {" "} -
- - - -
- page bg color - - - -
-
page bg image
-
- card bg - - - -
-
text color
-
- accent color - - - -
- - -
-
- - ); -}; - const InvitePopover = () => { return ( Invite diff --git a/app/test/page.tsx b/app/test/page.tsx index 2c9ca521..0de2498f 100644 --- a/app/test/page.tsx +++ b/app/test/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { ButtonPrimary } from "../../components/Buttons"; import { useState } from "react"; import useMeasure from "react-use-measure"; import { PageHeader } from "./header"; @@ -14,7 +13,6 @@ export default function Index() { return (
-