Compare commits
2
Commits
e50638ab55
...
7b3e7d3d0c
| Author | SHA1 | Date | |
|---|---|---|---|
 vkuchenik
|
7b3e7d3d0c | ||
|
vkuchenik
|
58c6a40b06 |
@@ -234,6 +234,13 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right" gap={2}>
|
||||
<Flex w="fit" color="iconColor">
|
||||
{volcano[1][0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
<Text
|
||||
truncate
|
||||
pl={2}
|
||||
@@ -245,13 +252,6 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
>
|
||||
{volcano[1][0]?.alert_level_name}
|
||||
</Text>
|
||||
<Flex w="fit">
|
||||
{volcano[1][0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
@@ -270,18 +270,13 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
<Timeline.Connector>
|
||||
<Timeline.Indicator
|
||||
outline="none"
|
||||
bg="widgetBadgeBg"
|
||||
bg="transparent"
|
||||
color="iconColor"
|
||||
size="lg"
|
||||
>
|
||||
{object?.alert_scheme_domain ===
|
||||
"terrestrial" && <Footprints size={15} />}
|
||||
{object?.alert_scheme_domain === "aviation" && (
|
||||
<Plane size={15} />
|
||||
)}
|
||||
{object?.alert_scheme_domain === "maritime" && (
|
||||
<Sailboat size={15} />
|
||||
)}
|
||||
{object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
|
||||
{object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
|
||||
{object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
|
||||
</Timeline.Indicator>
|
||||
<Timeline.Indicator
|
||||
h="50%"
|
||||
@@ -313,8 +308,7 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
w="100%"
|
||||
h="100%"
|
||||
color={
|
||||
alertColors[object?.alert_level_name] ||
|
||||
"text"
|
||||
alertColors[object?.alert_level_name] || "text"
|
||||
}
|
||||
fontSize="md"
|
||||
fontWeight="semibold"
|
||||
@@ -328,18 +322,16 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
justify="left"
|
||||
align="center"
|
||||
>
|
||||
<Text color="widgetTextMuted">
|
||||
Alert Scale:{" "}
|
||||
<Text color="widgetTextMuted" mr={1}>
|
||||
Alert Scale:
|
||||
</Text>
|
||||
{Array.from(
|
||||
{
|
||||
length:
|
||||
Number(object?.alert_scheme_highest) -
|
||||
Number(object?.alert_scheme_lowest) +
|
||||
1,
|
||||
Number(object?.alert_scheme_lowest) + 1,
|
||||
},
|
||||
(v, i) =>
|
||||
Number(object?.alert_scheme_lowest) + i,
|
||||
(v, i) => Number(object?.alert_scheme_lowest) + i
|
||||
).map((num) => (
|
||||
<Center
|
||||
key={num}
|
||||
@@ -347,14 +339,12 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
h="100%"
|
||||
color="text"
|
||||
bg={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
? "widgetBadgeBg"
|
||||
num === Number(object?.alert_level_rank)
|
||||
? "widgetInnerBadgeBg"
|
||||
: "transparent"
|
||||
}
|
||||
borderRadius={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
num === Number(object?.alert_level_rank)
|
||||
? "xl"
|
||||
: "none"
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
|
||||
import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} from "@chakra-ui/react";
|
||||
import {useEffect, useMemo, useCallback } from 'react';
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
@@ -100,7 +100,7 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Text truncate>{item.volcano_name}</Text>
|
||||
<Text truncate color="text" fontWeight="medium">{item.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
@@ -112,31 +112,33 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
|
||||
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
|
||||
<Flex direction="column" gap={2} borderRadius="lg" p={2} align="start">
|
||||
<Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
|
||||
<Text w="fit" fontSize="sm" color="text" p={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
|
||||
<Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
|
||||
</Flex>
|
||||
{item?.files?.map((file, index) => {
|
||||
return (
|
||||
<Box w="100%" h="100%" key={index} p={1}>
|
||||
<Flex mb={2} justify="space-between">
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
|
||||
<Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
|
||||
<Flex direction="row" mb={2} gap={1} justify="space-between">
|
||||
<a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
|
||||
Open
|
||||
<Text mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
|
||||
File: {file?.name}
|
||||
</Text>
|
||||
</a>
|
||||
</Box>
|
||||
{/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
|
||||
{/* Open*/}
|
||||
{/*</Box>*/}
|
||||
</Flex>
|
||||
<object
|
||||
data={`${file?.url}#view=FitH&toolbar=1`}
|
||||
type="application/pdf"
|
||||
style={{ width: '100%', height: '100%', display: 'block' }}
|
||||
>
|
||||
<Flex w="100%" h="100%" p={4} color="widgetTextMuted">
|
||||
<Text mb={2}>
|
||||
<Flex direction="column" w="100%" h="100%" align="center" p={4} color="widgetTextMuted" bg="widgetBadgeBg" borderRadius="md">
|
||||
<Text mb={2} fontSize="xs" color="red.300">
|
||||
Your browser cannot display this PDF directly.
|
||||
</Text>
|
||||
<a href={file?.url} target="_blank">
|
||||
Download PDF
|
||||
<a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
|
||||
<Text fontSize="xs" bg="widgetInnerBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
|
||||
</a>
|
||||
</Flex>
|
||||
</object>
|
||||
|
||||
@@ -41,11 +41,11 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex direction="column" gap={4} pb={2} overflowY="auto">
|
||||
<Flex direction="column" pb={2} overflowY="auto">
|
||||
<Fieldset.Root>
|
||||
<Fieldset.Content>
|
||||
{/* SELECTING DATE RANGE */}
|
||||
<Flex direction="column" w="100%" h="100%" justify="center" gap="2">
|
||||
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
|
||||
<Flex direction="column">
|
||||
<Text w="100%" fontWeight="bold">
|
||||
Date Range Selection
|
||||
@@ -62,7 +62,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<Text w="50%" align="center" justify="center" color="gray.700">
|
||||
<Text w="50%" align="center" justify="center" color="text">
|
||||
Start Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
@@ -103,7 +103,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<Text w="50%" align="center" justify="center" color="gray.700">
|
||||
<Text w="50%" align="center" justify="center" color="text">
|
||||
End Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
|
||||
import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} from "@chakra-ui/react";
|
||||
import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
|
||||
import {useState} from "react";
|
||||
|
||||
@@ -20,11 +20,108 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
|
||||
{/* COPY TO CLIPBOARD */}
|
||||
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
|
||||
<Flex flexDirection="column" justifyContent="space-between" overflowY="auto">
|
||||
<Fieldset.Root>
|
||||
<Fieldset.Content>
|
||||
{/* SELECTING DATE RANGE */}
|
||||
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
|
||||
<Flex direction="column">
|
||||
<Text w="100%" fontWeight="bold">
|
||||
Date Range Selection
|
||||
</Text>
|
||||
<hr style={{borderColor: "red.700"}} /> {/*line seperator*/}
|
||||
</Flex>
|
||||
|
||||
{/* start date */}
|
||||
<Field.Root invalid={!!startError}>
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%"
|
||||
h="100%"
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<Text w="50%" align="center" justify="center" color="text">
|
||||
Start Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
type="date"
|
||||
w="100%"
|
||||
borderRadius="lg"
|
||||
value={currentSettings?.startDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {
|
||||
...currentSettings,
|
||||
startDate: value,
|
||||
});
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && dateSelected > today)
|
||||
setStartError("Can't Choose a Future Date");
|
||||
else setStartError("");
|
||||
}}
|
||||
/>
|
||||
{startError && (
|
||||
<Field.ErrorText>{startError}</Field.ErrorText>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
|
||||
{/* end date */}
|
||||
<Field.Root invalid={!!endError}>
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%"
|
||||
h="100%"
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<Text w="50%" align="center" justify="center" color="text">
|
||||
End Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
type="date"
|
||||
w="100%"
|
||||
borderRadius="lg"
|
||||
value={currentSettings?.endDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {
|
||||
...currentSettings,
|
||||
endDate: value,
|
||||
});
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && dateSelected > today)
|
||||
setEndError("Can't Choose a Future Date");
|
||||
else setEndError("");
|
||||
}}
|
||||
/>
|
||||
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
</Flex>
|
||||
|
||||
{/* SORTS */}
|
||||
<Flex direction="column">
|
||||
<Text w="100%" fontWeight="bold">
|
||||
Sorts
|
||||
</Text>
|
||||
<hr /> {/*line seperator*/}
|
||||
</Flex>
|
||||
|
||||
{/* time sort */}
|
||||
<Switch.Root
|
||||
checked={currentSettings?.activeSorts?.timeSort === "asc"}
|
||||
onCheckedChange={handleTimeSort}
|
||||
@@ -34,8 +131,10 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
|
||||
<Switch.Control>
|
||||
<Switch.Thumb />
|
||||
</Switch.Control>
|
||||
<Switch.Label>Sort Oldest to Newest</Switch.Label>
|
||||
<Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
|
||||
</Switch.Root>
|
||||
|
||||
{/* alphabetic sort */}
|
||||
<Switch.Root
|
||||
checked={currentSettings?.activeSorts?.volcanoSort}
|
||||
onCheckedChange={handleVolcanoSort}
|
||||
@@ -45,64 +144,53 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
|
||||
<Switch.Control>
|
||||
<Switch.Thumb />
|
||||
</Switch.Control>
|
||||
<Switch.Label>Sort by Volcano</Switch.Label>
|
||||
<Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
|
||||
</Switch.Root>
|
||||
|
||||
{/* SELECTING DATE RANGE */}
|
||||
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
|
||||
<Field.Root invalid={!!startError}>
|
||||
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||||
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||||
Start Date
|
||||
<Flex direction="column">
|
||||
<Text w="100%" fontWeight="bold">
|
||||
Filters
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
w="100%"
|
||||
type="date"
|
||||
value={currentSettings?.startDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {...currentSettings, startDate: value});
|
||||
<hr /> {/*line seperator*/}
|
||||
</Flex>
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
|
||||
else setStartError("");
|
||||
{/* elevated levels */}
|
||||
<CheckboxCard.Root
|
||||
size="sm"
|
||||
variant="surface"
|
||||
borderRadius="lg"
|
||||
defaultChecked={currentSettings?.filters?.elevatedLevels}
|
||||
onCheckedChange={(e) => {
|
||||
updateSettings(widgetId, {
|
||||
...currentSettings,
|
||||
filters: {
|
||||
...currentSettings.filters,
|
||||
elevatedLevels: e.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{startError && <Field.ErrorText>{startError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
<Field.Root invalid={!!endError}>
|
||||
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||||
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||||
End Date
|
||||
>
|
||||
<CheckboxCard.HiddenInput />
|
||||
<CheckboxCard.Control>
|
||||
<CheckboxCard.Content>
|
||||
<CheckboxCard.Label fontWeight={400}>
|
||||
Only Elevated Levels
|
||||
</CheckboxCard.Label>
|
||||
</CheckboxCard.Content>
|
||||
<CheckboxCard.Indicator />
|
||||
</CheckboxCard.Control>
|
||||
</CheckboxCard.Root>
|
||||
|
||||
{/* COPY TO CLIPBOARD */}
|
||||
<Flex direction="column">
|
||||
<Text w="100%" fontWeight="bold">
|
||||
Tools
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
w="100%"
|
||||
type="date"
|
||||
value={currentSettings?.endDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateSettings(widgetId, {...currentSettings, endDate: value});
|
||||
|
||||
const dateSelected = new Date(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
|
||||
else setEndError("");
|
||||
}}
|
||||
/>
|
||||
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
<hr /> {/*line seperator*/}
|
||||
<Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
|
||||
</Flex>
|
||||
</Fieldset.Content>
|
||||
</Fieldset.Root>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@@ -63,7 +63,6 @@ export const WIDGET_REGISTRY = {
|
||||
},
|
||||
allowedSizes: {
|
||||
small: { w: 3, h: 6 },
|
||||
medium: { w: 3, h: 9 },
|
||||
large: { w: 3, h: 12 },
|
||||
}
|
||||
},
|
||||
@@ -85,7 +84,6 @@ export const WIDGET_REGISTRY = {
|
||||
},
|
||||
allowedSizes: {
|
||||
small: { w: 3, h: 6 },
|
||||
medium: { w: 3, h: 9 },
|
||||
large: { w: 3, h: 12 },
|
||||
}
|
||||
},
|
||||
@@ -186,7 +184,7 @@ export const WIDGET_REGISTRY = {
|
||||
endDate: getEndDate(),
|
||||
},
|
||||
allowedSizes: {
|
||||
medium: { w: 3, h: 12 },
|
||||
large: { w: 3, h: 12 },
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
+16
-15
@@ -2,7 +2,7 @@ import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecip
|
||||
|
||||
// REUSABLE GLASS SURFACE
|
||||
const glassSurface = {
|
||||
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
|
||||
bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
border: "1px solid",
|
||||
@@ -353,7 +353,7 @@ const glassPopoverRecipe = defineSlotRecipe({
|
||||
borderRadius: "xl",
|
||||
p: 3,
|
||||
boxShadow: "lg",
|
||||
bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "rgba(20, 22, 25, 0.95)"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "#353742"},
|
||||
backdropFilter: "blur(15px)",
|
||||
WebkitBackdropFilter: "blur(15px)",
|
||||
},
|
||||
@@ -381,7 +381,7 @@ const glassDialogRecipe = defineSlotRecipe({
|
||||
maxW: "60%",
|
||||
minH: "80%",
|
||||
overflow: "hidden",
|
||||
bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgb(22 23 28 / 0.9)"},
|
||||
backdropFilter: "blur(15px)",
|
||||
WebkitBackdropFilter: "blur(15px)",
|
||||
},
|
||||
@@ -471,7 +471,7 @@ const glassTabRecipe = defineRecipe({
|
||||
|
||||
// --- THE GLASS EFFECT (Inactive) ---
|
||||
// Uses a highly transparent white/black depending on mode
|
||||
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
border: "1px solid",
|
||||
@@ -485,7 +485,7 @@ const glassTabRecipe = defineRecipe({
|
||||
pr: "16px",
|
||||
// --- THE GLASS EFFECT (Hover) ---
|
||||
// Becomes slightly more opaque when you mouse over
|
||||
bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
|
||||
bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
|
||||
borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
|
||||
color: "fg",
|
||||
textDecoration: "none",
|
||||
@@ -538,7 +538,7 @@ const config = defineConfig({
|
||||
opacity: "1 !important",
|
||||
borderRadius: "3xl",
|
||||
_dark: {
|
||||
background: "#393c3fff !important",
|
||||
background: "#3B3D49FF !important",
|
||||
borderColor: "#000000ff !important",
|
||||
boxShadow: "0 0 10px #16181bff !important",
|
||||
opacity: "1 !important",
|
||||
@@ -581,19 +581,20 @@ const config = defineConfig({
|
||||
theme: {
|
||||
semanticTokens: {
|
||||
colors: {
|
||||
text: { value: { base: "#000000", _dark: "#FFFFFF" } },
|
||||
text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
|
||||
textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
|
||||
MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
|
||||
titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
|
||||
iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode
|
||||
MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
|
||||
titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
|
||||
iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
|
||||
glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
|
||||
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
|
||||
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
|
||||
|
||||
// WIDGET SPECIFIC VALUES
|
||||
widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
|
||||
widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
|
||||
widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
|
||||
widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },
|
||||
widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
|
||||
widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
|
||||
widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
|
||||
widgetInnerBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(100 103 119)" } },
|
||||
widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
|
||||
|
||||
// ALERT COLORS
|
||||
alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
|
||||
|
||||
Reference in New Issue
Block a user