Add core components for task management and navigation
This commit introduces the foundational UI components and logic for the task management application, including task creation, calendar views, Kanban boards, and navigation elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/yy9YLEW
This commit is contained in:
paul-nothaft
@@ -0,0 +1,328 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* LIGHT MODE */
|
||||
:root {
|
||||
--button-outline: rgba(0,0,0, .10);
|
||||
--badge-outline: rgba(0,0,0, .05);
|
||||
|
||||
/* Automatic computation of border around primary / danger buttons */
|
||||
--opaque-button-border-intensity: -8; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(0,0,0, .03);
|
||||
--elevate-2: rgba(0,0,0, .08);
|
||||
|
||||
--background: 0 0% 98%;
|
||||
|
||||
--foreground: 220 9% 15%;
|
||||
|
||||
--border: 220 13% 91%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
|
||||
--card-foreground: 220 9% 15%;
|
||||
|
||||
--card-border: 220 13% 89%;
|
||||
|
||||
--sidebar: 0 0% 96%;
|
||||
|
||||
--sidebar-foreground: 220 9% 15%;
|
||||
|
||||
--sidebar-border: 220 13% 87%;
|
||||
|
||||
--sidebar-primary: 210 100% 56%;
|
||||
|
||||
--sidebar-primary-foreground: 210 17% 98%;
|
||||
|
||||
--sidebar-accent: 0 0% 94%;
|
||||
|
||||
--sidebar-accent-foreground: 220 9% 15%;
|
||||
|
||||
--sidebar-ring: 210 100% 56%;
|
||||
|
||||
--popover: 0 0% 99%;
|
||||
|
||||
--popover-foreground: 220 9% 15%;
|
||||
|
||||
--popover-border: 220 13% 85%;
|
||||
|
||||
--primary: 210 100% 56%;
|
||||
|
||||
--primary-foreground: 210 17% 98%;
|
||||
|
||||
--secondary: 0 0% 93%;
|
||||
|
||||
--secondary-foreground: 220 9% 15%;
|
||||
|
||||
--muted: 0 0% 95%;
|
||||
|
||||
--muted-foreground: 220 9% 46%;
|
||||
|
||||
--accent: 210 15% 94%;
|
||||
|
||||
--accent-foreground: 220 9% 15%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--input: 220 13% 85%;
|
||||
--ring: 210 100% 56%;
|
||||
--chart-1: 210 100% 50%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
|
||||
--font-sans: Inter, Open Sans, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Menlo, monospace;
|
||||
--radius: .5rem; /* 8px */
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 1px 2px -1px hsl(220 13% 91% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 1px 2px -1px hsl(220 13% 91% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 2px 4px -1px hsl(220 13% 91% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 4px 6px -1px hsl(220 13% 91% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 8px 10px -1px hsl(220 13% 91% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
||||
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
||||
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--primary-border: hsl(var(--primary));
|
||||
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--secondary-border: hsl(var(--secondary));
|
||||
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--muted-border: hsl(var(--muted));
|
||||
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--accent-border: hsl(var(--accent));
|
||||
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
|
||||
/* Fallback for older browsers */
|
||||
--destructive-border: hsl(var(--destructive));
|
||||
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--button-outline: rgba(255,255,255, .10);
|
||||
--badge-outline: rgba(255,255,255, .05);
|
||||
|
||||
--opaque-button-border-intensity: 9; /* In terms of percentages */
|
||||
|
||||
/* Backgrounds applied on top of other backgrounds when hovered/active */
|
||||
--elevate-1: rgba(255,255,255, .04);
|
||||
--elevate-2: rgba(255,255,255, .09);
|
||||
|
||||
--background: 220 13% 9%;
|
||||
|
||||
--foreground: 210 17% 98%;
|
||||
|
||||
--border: 215 25% 27%;
|
||||
|
||||
--card: 220 13% 14%;
|
||||
|
||||
--card-foreground: 210 17% 98%;
|
||||
|
||||
--card-border: 215 25% 29%;
|
||||
|
||||
--sidebar: 220 13% 11%;
|
||||
|
||||
--sidebar-foreground: 210 17% 98%;
|
||||
|
||||
--sidebar-border: 215 25% 31%;
|
||||
|
||||
--sidebar-primary: 210 100% 66%;
|
||||
|
||||
--sidebar-primary-foreground: 210 17% 98%;
|
||||
|
||||
--sidebar-accent: 220 13% 16%;
|
||||
|
||||
--sidebar-accent-foreground: 210 17% 98%;
|
||||
|
||||
--sidebar-ring: 210 100% 66%;
|
||||
|
||||
--popover: 220 13% 17%;
|
||||
|
||||
--popover-foreground: 210 17% 98%;
|
||||
|
||||
--popover-border: 215 25% 33%;
|
||||
|
||||
--primary: 210 100% 66%;
|
||||
|
||||
--primary-foreground: 210 17% 98%;
|
||||
|
||||
--secondary: 220 13% 19%;
|
||||
|
||||
--secondary-foreground: 210 17% 98%;
|
||||
|
||||
--muted: 220 13% 15%;
|
||||
|
||||
--muted-foreground: 215 16% 65%;
|
||||
|
||||
--accent: 220 13% 17%;
|
||||
|
||||
--accent-foreground: 210 17% 98%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--input: 215 25% 35%;
|
||||
--ring: 210 100% 66%;
|
||||
--chart-1: 210 100% 70%;
|
||||
--chart-2: 173 58% 59%;
|
||||
--chart-3: 197 37% 44%;
|
||||
--chart-4: 43 74% 76%;
|
||||
--chart-5: 27 87% 77%;
|
||||
|
||||
--shadow-2xs: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);
|
||||
--shadow-xs: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);
|
||||
--shadow-sm: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 1px 2px -1px hsl(215 25% 27% / 0.00);
|
||||
--shadow: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 1px 2px -1px hsl(215 25% 27% / 0.00);
|
||||
--shadow-md: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 2px 4px -1px hsl(215 25% 27% / 0.00);
|
||||
--shadow-lg: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 4px 6px -1px hsl(215 25% 27% / 0.00);
|
||||
--shadow-xl: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 8px 10px -1px hsl(215 25% 27% / 0.00);
|
||||
--shadow-2xl: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);
|
||||
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Using the elevate system.
|
||||
* Automatic contrast adjustment.
|
||||
*
|
||||
* <element className="hover-elevate" />
|
||||
* <element className="active-elevate-2" />
|
||||
*
|
||||
* // Using the tailwind utility when a data attribute is "on"
|
||||
* <element className="toggle-elevate data-[state=on]:toggle-elevated" />
|
||||
* // Or manually controlling the toggle state
|
||||
* <element className="toggle-elevate toggle-elevated" />
|
||||
*
|
||||
* Elevation systems have to handle many states.
|
||||
* - not-hovered, vs. hovered vs. active (three mutually exclusive states)
|
||||
* - toggled or not
|
||||
* - focused or not (this is not handled with these utilities)
|
||||
*
|
||||
* Even without handling focused or not, this is six possible combinations that
|
||||
* need to be distinguished from eachother visually.
|
||||
*/
|
||||
@layer utilities {
|
||||
|
||||
/* Hide ugly search cancel button in Chrome until we can style it properly */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* Placeholder styling for contentEditable div */
|
||||
[contenteditable][data-placeholder]:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: hsl(var(--muted-foreground));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
|
||||
* buttons/badges can remove the automatic brightness adjustment on interactions
|
||||
* and program their own. */
|
||||
.no-default-hover-elevate {}
|
||||
|
||||
.no-default-active-elevate {}
|
||||
|
||||
|
||||
/**
|
||||
* Toggleable backgrounds go behind the content. Hoverable/active goes on top.
|
||||
* This way they can stack/compound. Both will overlap the parent's borders!
|
||||
* So borders will be automatically adjusted both on toggle, and hover/active,
|
||||
* and they will be compounded.
|
||||
*/
|
||||
.toggle-elevate::before,
|
||||
.toggle-elevate-2::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
/* sits behind content but above backdrop */
|
||||
}
|
||||
|
||||
.toggle-elevate.toggle-elevated::before {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.toggle-elevate::before {
|
||||
inset: -1px;
|
||||
}
|
||||
|
||||
/* Does not work on elements with overflow:hidden! */
|
||||
.hover-elevate:not(.no-default-hover-elevate),
|
||||
.active-elevate:not(.no-default-active-elevate),
|
||||
.hover-elevate-2:not(.no-default-hover-elevate),
|
||||
.active-elevate-2:not(.no-default-active-elevate) {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hover-elevate:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:not(.no-default-active-elevate)::after,
|
||||
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:not(.no-default-active-elevate)::after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
/*border-radius: inherit; match rounded corners */
|
||||
border-radius: inherit;
|
||||
z-index: 999;
|
||||
/* sits in front of content */
|
||||
}
|
||||
|
||||
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-1);
|
||||
}
|
||||
|
||||
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
||||
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
||||
background-color: var(--elevate-2);
|
||||
}
|
||||
|
||||
/* If there's a 1px border, adjust the inset so that it covers that parent's border */
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
||||
.border.active-elevate-2:not(.no-active-interaction-elevate)::after,
|
||||
.border.hover-elevate:not(.no-hover-interaction-elevate)::after {
|
||||
inset: -1px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user