ics-ui-kit 0.1.12 → 0.1.14

package/dist/theme.css

@@ -1,362 +1,364 @@
-:root, .light {
-	--radius: 0.5rem;
-
-	/**
-	* @tokens Light Theme
-	* @presenter Color
-	*/
-
-	--background: var(--secondary-bg);
-	--foreground: 0 0% 3.9%;
-
-	--primary: 222 47% 11%;
-	--primary-hover: 217 33% 17%;
-	--primary-foreground: 0 0% 98%;
-
-	--secondary: 0 0% 96.1%;
-	--secondary-foreground: 0 0% 9%;
-
-	--card: 0 0% 100%;
-
-	--card-foreground: 0 0% 3.9%;
-
-	--popover: 0 0% 100%;
-
-	--popover-foreground: 0 0% 3.9%;
-
-	--muted-foreground: 0 0% 45.1%;
-
-	--accent: 222 47% 11%;
-
-	--accent-foreground: 0 0% 9%;
-
-	--destructive: 0 84.2% 60.2%;
-
-	--destructive-foreground: 0 0% 98%;
-
-	--border: 0 0% 89.8%;
-
-	--input: 0 0% 89.8%;
-
-	--ring: 0 0% 3.9%;
-
-	--chart-1: 173 58% 39%;
-	--chart-2: 12 76% 61%;
-	--chart-3: 197 37% 24%;
-	--chart-4: 43 74% 66%;
-	--chart-5: 27 87% 67%;
-
-	/** Base **/
-	--primary-accent: 222 47% 11%;
-	--primary-accent-hover: 217 33% 17%;
-	--primary-fg: 222 47% 11%;
-	--primary-bg: 210 40% 98%;
-	--primary-bg-hover: 214 32% 91%;
-	--primary-border: 213 27% 84%;
-	--secondary-accent: 222 47% 11%;
-	--secondary-fg: 215 25% 27%;
-	--secondary-bg: 0 0% 100%;
-	--secondary-bg-hover: 210 40% 96%;
-	--secondary-border: 214 32% 91%;
-	--tertiary-accent: 215 16% 47%;
-	--muted: 215 16% 47%;
-	--sidebar-bg: 210 40% 98%;
-
-	/** Inverse **/
-	--inverse-primary-bg: 222 47% 11%;
-	--inverse-secondary-bg: 217 33% 17%;
-	--inverse-hover: 215 25% 27%;
-	--inverse-active: 215 19% 35%;
-	--inverse-border: 215 25% 27%;
-	--inverse-muted: 215 20% 65%;
-	--inverse-secondary-fg: 214 32% 91%;
-	--inverse-primary-fg: 210 40% 98%;
-
-	/** Status **/
-	--status-default: 222 47% 11%;
-	--status-default-hover: 217 33% 17%;
-	--status-default-border: 215 25% 27%;
-	--status-default-muted: 215 20% 65%;
-	--status-default-bg-hover: 214 32% 91%;
-	--status-default-bg: 210 40% 96%;
-	--status-default-fg: 210 40% 98%;
-	--status-info: 201 96% 32%;
-	--status-info-fg: 201 96% 32%;
-	--status-info-hover: 200 98% 39%;
-	--status-info-bg: 204 100% 97%;
-	--status-info-primary-bg: 204 94% 94%;
-	--status-info-bg-hover: 204 94% 94%;
-	--status-info-primary-border: 199 95% 74%;
-	--status-info-secondary-border: 201 94% 86%;
-	--status-success: 142 72% 29%;
-	--status-success-fg: 142 72% 29%;
-	--status-success-hover: 142 76% 36%;
-	--status-success-bg: 138 76% 97%;
-	--status-success-primary-bg: 141 84% 93%;
-	--status-success-bg-hover: 141 84% 93%;
-	--status-success-primary-border: 142 77% 73%;
-	--status-success-secondary-border: 141 79% 85%;
-	--status-warning: 26 90% 37%;
-	--status-warning-fg: 26 90% 37%;
-	--status-warning-hover: 32 95% 44%;
-	--status-warning-bg: 33 100% 96%;
-	--status-warning-primary-bg: 34 100% 92%;
-	--status-warning-bg-hover: 34 100% 92%;
-	--status-warning-primary-border: 31 97% 72%;
-	--status-warning-secondary-border: 32 98% 83%;
-	--status-error: 0 74% 42%;
-	--status-error-fg: 0 74% 42%;
-	--status-error-hover: 0 72% 51%;
-	--status-error-bg: 0 86% 97%;
-	--status-error-primary-bg: 0 93% 94%;
-	--status-error-bg-hover: 0 93% 94%;
-	--status-error-primary-border: 0 94% 82%;
-	--status-error-secondary-border: 0 96% 89%;
-
-	/** Alpha **/
-	--alpha-03: 210 40% 96% / 3%;
-	--alpha-05: 210 40% 96% / 5%;
-	--alpha-08: 210 40% 96% / 8%;
-	--alpha-10: 210 40% 96% / 10%;
-	--alpha-20: 210 40% 96% / 20%;
-	--alpha-30: 210 40% 96% / 30%;
-	--alpha-40: 210 40% 96% / 40%;
-	--alpha-50: 210 40% 96% / 50%;
-	--alpha-60: 210 40% 96% / 60%;
-	--alpha-70: 210 40% 96% / 70%;
-	--alpha-80: 210 40% 96% / 80%;
-	--alpha-90: 210 40% 96% / 90%;
-
-	--alpha-high-03: 229 84% 5% / 3%;
-	--alpha-high-05: 229 84% 5% / 5%;
-	--alpha-high-08: 229 84% 5% / 8%;
-	--alpha-high-10: 229 84% 5% / 10%;
-	--alpha-high-20: 229 84% 5% / 20%;
-	--alpha-high-30: 229 84% 5% / 30%;
-	--alpha-high-40: 229 84% 5% / 40%;
-	--alpha-high-50: 229 84% 5% / 50%;
-	--alpha-high-60: 229 84% 5% / 60%;
-	--alpha-high-70: 229 84% 5% / 70%;
-	--alpha-high-80: 229 84% 5% / 80%;
-	--alpha-high-90: 229 84% 5% / 90%;
-
-	--alpha-accent-primary: 210 40% 96% / 12%;
-	--alpha-accent-secondary: 210 40% 96% / 8%;
-
-	/** Autofill **/
-	--autofill-bg: 213 100% 96%;
-
-	/** Palette **/
-	--peony: 351 100% 81%;
-	--garnet: 0 100% 91%;
-	--cinnamon: 16 100% 89%;
-	--caramel: 28 100% 86%;
-	--hazel: 37 100% 84%;
-	--honey: 44 98% 82%;
-	--lemon: 54 100% 81%;
-	--olive: 66 67% 78%;
-	--sage: 87 71% 81%;
-	--mint: 120 71% 85%;
-	--bazil: 149 81% 81%;
-	--spruce: 165 84% 77%;
-	--aqua: 174 86% 75%;
-	--azure: 180 84% 73%;
-	--tiffany: 186 100% 75%;
-	--marine: 189 100% 77%;
-	--turquoise: 194 100% 80%;
-	--frost: 202 100% 85%;
-	--bosphorus: 216 100% 89%;
-	--lavender: 247 100% 92%;
-	--orchid: 276 100% 90%;
-	--lilac: 296 100% 89%;
-	--plume: 305 100% 88%;
-	--velvet: 320 100% 87%;
-
-	/** Glass **/
-	--glass-thin: blur(8px) brightness(108%) saturate(120%);
-	--glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
-	--glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
-	--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
-
-	--shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
-	--shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
-	--shadow-glass-lg: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
-}
-
-.dark {
-	/**
-	* @tokens Dark Theme
-	* @presenter Color
-	*/
-
-	--foreground: 0 0% 98%;
-	--card: 0 0% 3.9%;
-	--card-foreground: 0 0% 98%;
-	--popover: 0 0% 3.9%;
-	--popover-foreground: 0 0% 98%;
-	--primary: 210 40% 98%;
-	--primary-hover: 214 32% 91%;
-	--primary-foreground: 0 0% 9%;
-	--secondary: 0 0% 14.9%;
-	--secondary-foreground: 0 0% 98%;
-	--muted-foreground: 0 0% 63.9%;
-	--accent: 210 40% 98%;
-	--accent-foreground: 0 0% 98%;
-	--destructive: 0 62.8% 30.6%;
-	--destructive-foreground: 0 0% 98%;
-	--border: 0 0% 14.9%;
-	--input: 0 0% 14.9%;
-	--ring: 0 0% 83.1%;
-
-	--chart-1: 220 70% 50%;
-	--chart-2: 340 75% 55%;
-	--chart-3: 30 80% 55%;
-	--chart-4: 280 65% 60%;
-	--chart-5: 160 60% 45%;
-
-	/** Base **/
-	--primary-accent: 210 40% 98%;
-	--primary-accent-hover: 214 32% 91%;
-	--primary-fg: 210 40% 98%;
-	--primary-border: 215 19% 35%;
-	--primary-bg: 229 84% 5%;
-	--primary-bg-hover: 215 25% 27%;
-	--secondary-accent: 210 40% 98%;
-	--secondary-fg: 214 32% 91%;
-	--secondary-border: 215 25% 27%;
-	--secondary-bg: 222 47% 11%;
-	--secondary-bg-hover: 217 33% 17%;
-	--tertiary-accent: 215 20% 65%;
-	--muted: 215 20% 65%;
-	--sidebar-bg: 229 84% 5%;
-
-	/** Inverse **/
-	--inverse-primary-bg: 210 40% 98%;
-	--inverse-secondary-bg: 210 40% 96%;
-	--inverse-hover: 214 32% 91%;
-	--inverse-active: 213 27% 84%;
-	--inverse-border: 214 32% 91%;
-	--inverse-muted: 215 16% 47%;
-	--inverse-secondary-fg: 215 25% 27%;
-	--inverse-primary-fg: 222 47% 11%;
-
-	/** Status **/
-	--status-default: 210 40% 98%;
-	--status-default-hover: 210 40% 96%;
-	--status-default-border: 214 32% 91%;
-	--status-default-muted: 215 16% 47%;
-	--status-default-bg-hover: 215 25% 27%;
-	--status-default-bg: 217 33% 17%;
-	--status-default-fg: 222 47% 11%;
-	--status-info: 200 98% 39%;
-	--status-info-fg: 199 89% 48%;
-	--status-info-hover: 199 89% 48%;
-	--status-info-bg: var(--status-default-bg);
-	--status-info-primary-bg: 204 80% 16%;
-	--status-info-bg-hover: var(--status-default-bg-hover);
-	--status-info-primary-border: 201 90% 27%;
-	--status-info-secondary-border: 202 80% 24%;
-	--status-success: 142 76% 36%;
-	--status-success-fg: 142 71% 45%;
-	--status-success-hover: 142 71% 45%;
-	--status-success-bg: var(--status-default-bg);
-	--status-success-primary-bg: 145 80% 10%;
-	--status-success-bg-hover: var(--status-default-bg-hover);
-	--status-success-primary-border: 143 64% 24%;
-	--status-success-secondary-border: 144 61% 20%;
-	--status-warning: 32 95% 44%;
-	--status-warning-fg: 38 92% 50%;
-	--status-warning-hover: 38 92% 50%;
-	--status-warning-bg: var(--status-default-bg);
-	--status-warning-primary-bg: 26 83% 14%;
-	--status-warning-bg-hover: var(--status-default-bg-hover);
-	--status-warning-primary-border: 32 81% 29%;
-	--status-warning-secondary-border: 28 73% 26%;
-	--status-error: 0 74% 42%;
-	--status-error-fg: 0 84% 60%;
-	--status-error-hover: 0 84% 60%;
-	--status-error-bg: var(--status-default-bg);
-	--status-error-primary-bg: 0 75% 15%;
-	--status-error-bg-hover: var(--status-default-bg-hover);
-	--status-error-primary-border: 0 70% 35%;
-	--status-error-secondary-border: 0 63% 31%;
-
-	/** Alpha **/
-	--alpha-03: 229 84% 5% / 3%;
-	--alpha-05: 229 84% 5% / 5%;
-	--alpha-08: 229 84% 5% / 8%;
-	--alpha-10: 229 84% 5% / 10%;
-	--alpha-20: 229 84% 5% / 20%;
-	--alpha-30: 229 84% 5% / 30%;
-	--alpha-40: 229 84% 5% / 40%;
-	--alpha-50: 229 84% 5% / 50%;
-	--alpha-60: 229 84% 5% / 60%;
-	--alpha-70: 229 84% 5% / 70%;
-	--alpha-80: 229 84% 5% / 80%;
-	--alpha-90: 229 84% 5% / 90%;
-
-	--alpha-high-03: 210 40% 96% / 3%;
-	--alpha-high-05: 210 40% 96% / 5%;
-	--alpha-high-08: 210 40% 96% / 8%;
-	--alpha-high-10: 210 40% 96% / 10%;
-	--alpha-high-20: 210 40% 96% / 20%;
-	--alpha-high-30: 210 40% 96% / 30%;
-	--alpha-high-40: 210 40% 96% / 40%;
-	--alpha-high-50: 210 40% 96% / 50%;
-	--alpha-high-60: 210 40% 96% / 60%;
-	--alpha-high-70: 210 40% 96% / 70%;
-	--alpha-high-80: 210 40% 96% / 80%;
-	--alpha-high-90: 210 40% 96% / 90%;
-
-	--alpha-accent-primary: 222 47% 11% / 8%;
-	--alpha-accent-secondary: 222 47% 11% / 5%;
-
-	/** Palette **/
-	--peony: 340 35% 47%;
-	--garnet: 0 35% 48%;
-	--cinnamon: 15 35% 43%;
-	--caramel: 29 35% 39%;
-	--hazel: 38 35% 36%;
-	--honey: 44 35% 35%;
-	--lemon: 49 52% 36%;
-	--olive: 67 35% 32%;
-	--sage: 87 35% 33%;
-	--mint: 120 34% 34%;
-	--bazil: 149 35% 34%;
-	--spruce: 165 35% 34%;
-	--aqua: 174 35% 33%;
-	--azure: 180 35% 33%;
-	--tiffany: 187 35% 35%;
-	--marine: 190 35% 35%;
-	--turquoise: 195 35% 37%;
-	--frost: 201 35% 39%;
-	--bosphorus: 217 35% 45%;
-	--lavender: 247 35% 53%;
-	--orchid: 275 35% 49%;
-	--lilac: 296 35% 45%;
-	--plume: 305 35% 45%;
-	--velvet: 320 35% 46%;
-
-	/** Glass **/
-	--glass-thin: blur(8px) brightness(68%) saturate(130%);
-	--glass-regular: blur(16px);
-	--glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
-	--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
-
-	--shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
-	--shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
-	--shadow-glass-lg: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
-}
-
-.backdrop-glass-clear {
-	backdrop-filter: var(--glass-clear);
-}
-.backdrop-glass-thin {
-	backdrop-filter: var(--glass-thin);
-}
-.backdrop-glass-regular {
-	backdrop-filter: var(--glass-regular);
-}
-.backdrop-glass-thick {
-	backdrop-filter: var(--glass-thick);
-}
+:root, .light {
+	--radius: 0.5rem;
+
+	/**
+	* @tokens Light Theme
+	* @presenter Color
+	*/
+
+	--background: var(--secondary-bg);
+	--foreground: 0 0% 3.9%;
+
+	--primary: 222 47% 11%;
+	--primary-hover: 217 33% 17%;
+	--primary-foreground: 0 0% 98%;
+
+	--secondary: 0 0% 96.1%;
+	--secondary-foreground: 0 0% 9%;
+
+	--card: 0 0% 100%;
+
+	--card-foreground: 0 0% 3.9%;
+
+	--popover: 0 0% 100%;
+
+	--popover-foreground: 0 0% 3.9%;
+
+	--muted-foreground: 0 0% 45.1%;
+
+	--accent: 222 47% 11%;
+
+	--accent-foreground: 0 0% 9%;
+
+	--destructive: 0 84.2% 60.2%;
+
+	--destructive-foreground: 0 0% 98%;
+
+	--border: 0 0% 89.8%;
+
+	--input: 0 0% 89.8%;
+
+	--ring: 0 0% 3.9%;
+
+	--chart-1: 173 58% 39%;
+	--chart-2: 12 76% 61%;
+	--chart-3: 197 37% 24%;
+	--chart-4: 43 74% 66%;
+	--chart-5: 27 87% 67%;
+
+	/** Base **/
+	--primary-accent: 222 47% 11%;
+	--primary-accent-hover: 217 33% 17%;
+	--primary-fg: 222 47% 11%;
+	--primary-bg: 210 40% 98%;
+	--primary-bg-hover: 214 32% 91%;
+	--primary-border: 213 27% 84%;
+	--secondary-accent: 222 47% 11%;
+	--secondary-fg: 215 25% 27%;
+	--secondary-bg: 0 0% 100%;
+	--secondary-bg-hover: 210 40% 96%;
+	--secondary-border: 214 32% 91%;
+	--tertiary-accent: 215 16% 47%;
+	--muted: 215 16% 47%;
+	--sidebar-bg: 210 40% 98%;
+	--focus: var(--muted);
+
+	/** Inverse **/
+	--inverse-primary-bg: 222 47% 11%;
+	--inverse-secondary-bg: 217 33% 17%;
+	--inverse-hover: 215 25% 27%;
+	--inverse-active: 215 19% 35%;
+	--inverse-border: 215 25% 27%;
+	--inverse-muted: 215 20% 65%;
+	--inverse-secondary-fg: 214 32% 91%;
+	--inverse-primary-fg: 210 40% 98%;
+
+	/** Status **/
+	--status-default: 222 47% 11%;
+	--status-default-hover: 217 33% 17%;
+	--status-default-border: 215 25% 27%;
+	--status-default-muted: 215 20% 65%;
+	--status-default-bg-hover: 214 32% 91%;
+	--status-default-bg: 210 40% 96%;
+	--status-default-fg: 210 40% 98%;
+	--status-info: 201 96% 32%;
+	--status-info-fg: 201 96% 32%;
+	--status-info-hover: 200 98% 39%;
+	--status-info-bg: 204 100% 97%;
+	--status-info-primary-bg: 204 94% 94%;
+	--status-info-bg-hover: 204 94% 94%;
+	--status-info-primary-border: 199 95% 74%;
+	--status-info-secondary-border: 201 94% 86%;
+	--status-success: 142 72% 29%;
+	--status-success-fg: 142 72% 29%;
+	--status-success-hover: 142 76% 36%;
+	--status-success-bg: 138 76% 97%;
+	--status-success-primary-bg: 141 84% 93%;
+	--status-success-bg-hover: 141 84% 93%;
+	--status-success-primary-border: 142 77% 73%;
+	--status-success-secondary-border: 141 79% 85%;
+	--status-warning: 26 90% 37%;
+	--status-warning-fg: 26 90% 37%;
+	--status-warning-hover: 32 95% 44%;
+	--status-warning-bg: 33 100% 96%;
+	--status-warning-primary-bg: 34 100% 92%;
+	--status-warning-bg-hover: 34 100% 92%;
+	--status-warning-primary-border: 31 97% 72%;
+	--status-warning-secondary-border: 32 98% 83%;
+	--status-error: 0 74% 42%;
+	--status-error-fg: 0 74% 42%;
+	--status-error-hover: 0 72% 51%;
+	--status-error-bg: 0 86% 97%;
+	--status-error-primary-bg: 0 93% 94%;
+	--status-error-bg-hover: 0 93% 94%;
+	--status-error-primary-border: 0 94% 82%;
+	--status-error-secondary-border: 0 96% 89%;
+
+	/** Alpha **/
+	--alpha-03: 210 40% 96% / 3%;
+	--alpha-05: 210 40% 96% / 5%;
+	--alpha-08: 210 40% 96% / 8%;
+	--alpha-10: 210 40% 96% / 10%;
+	--alpha-20: 210 40% 96% / 20%;
+	--alpha-30: 210 40% 96% / 30%;
+	--alpha-40: 210 40% 96% / 40%;
+	--alpha-50: 210 40% 96% / 50%;
+	--alpha-60: 210 40% 96% / 60%;
+	--alpha-70: 210 40% 96% / 70%;
+	--alpha-80: 210 40% 96% / 80%;
+	--alpha-90: 210 40% 96% / 90%;
+
+	--alpha-high-03: 229 84% 5% / 3%;
+	--alpha-high-05: 229 84% 5% / 5%;
+	--alpha-high-08: 229 84% 5% / 8%;
+	--alpha-high-10: 229 84% 5% / 10%;
+	--alpha-high-20: 229 84% 5% / 20%;
+	--alpha-high-30: 229 84% 5% / 30%;
+	--alpha-high-40: 229 84% 5% / 40%;
+	--alpha-high-50: 229 84% 5% / 50%;
+	--alpha-high-60: 229 84% 5% / 60%;
+	--alpha-high-70: 229 84% 5% / 70%;
+	--alpha-high-80: 229 84% 5% / 80%;
+	--alpha-high-90: 229 84% 5% / 90%;
+
+	--alpha-accent-primary: 210 40% 96% / 12%;
+	--alpha-accent-secondary: 210 40% 96% / 8%;
+
+	/** Autofill **/
+	--autofill-bg: 213 100% 96%;
+
+	/** Palette **/
+	--peony: 351 100% 81%;
+	--garnet: 0 100% 91%;
+	--cinnamon: 16 100% 89%;
+	--caramel: 28 100% 86%;
+	--hazel: 37 100% 84%;
+	--honey: 44 98% 82%;
+	--lemon: 54 100% 81%;
+	--olive: 66 67% 78%;
+	--sage: 87 71% 81%;
+	--mint: 120 71% 85%;
+	--bazil: 149 81% 81%;
+	--spruce: 165 84% 77%;
+	--aqua: 174 86% 75%;
+	--azure: 180 84% 73%;
+	--tiffany: 186 100% 75%;
+	--marine: 189 100% 77%;
+	--turquoise: 194 100% 80%;
+	--frost: 202 100% 85%;
+	--bosphorus: 216 100% 89%;
+	--lavender: 247 100% 92%;
+	--orchid: 276 100% 90%;
+	--lilac: 296 100% 89%;
+	--plume: 305 100% 88%;
+	--velvet: 320 100% 87%;
+
+	/** Glass **/
+	--glass-thin: blur(8px) brightness(108%) saturate(120%);
+	--glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
+	--glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
+	--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
+
+	--shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-500, #71717A), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-500, #71717A), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+	--shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
+	--shadow-glass-lg: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+}
+
+.dark {
+	/**
+	* @tokens Dark Theme
+	* @presenter Color
+	*/
+
+	--foreground: 0 0% 98%;
+	--card: 0 0% 3.9%;
+	--card-foreground: 0 0% 98%;
+	--popover: 0 0% 3.9%;
+	--popover-foreground: 0 0% 98%;
+	--primary: 210 40% 98%;
+	--primary-hover: 214 32% 91%;
+	--primary-foreground: 0 0% 9%;
+	--secondary: 0 0% 14.9%;
+	--secondary-foreground: 0 0% 98%;
+	--muted-foreground: 0 0% 63.9%;
+	--accent: 210 40% 98%;
+	--accent-foreground: 0 0% 98%;
+	--destructive: 0 62.8% 30.6%;
+	--destructive-foreground: 0 0% 98%;
+	--border: 0 0% 14.9%;
+	--input: 0 0% 14.9%;
+	--ring: 0 0% 83.1%;
+
+	--chart-1: 220 70% 50%;
+	--chart-2: 340 75% 55%;
+	--chart-3: 30 80% 55%;
+	--chart-4: 280 65% 60%;
+	--chart-5: 160 60% 45%;
+
+	/** Base **/
+	--primary-accent: 210 40% 98%;
+	--primary-accent-hover: 214 32% 91%;
+	--primary-fg: 210 40% 98%;
+	--primary-border: 215 19% 35%;
+	--primary-bg: 229 84% 5%;
+	--primary-bg-hover: 215 25% 27%;
+	--secondary-accent: 210 40% 98%;
+	--secondary-fg: 214 32% 91%;
+	--secondary-border: 215 25% 27%;
+	--secondary-bg: 222 47% 11%;
+	--secondary-bg-hover: 217 33% 17%;
+	--tertiary-accent: 215 20% 65%;
+	--muted: 215 20% 65%;
+	--sidebar-bg: 229 84% 5%;
+	--focus: var(--muted);
+
+	/** Inverse **/
+	--inverse-primary-bg: 210 40% 98%;
+	--inverse-secondary-bg: 210 40% 96%;
+	--inverse-hover: 214 32% 91%;
+	--inverse-active: 213 27% 84%;
+	--inverse-border: 214 32% 91%;
+	--inverse-muted: 215 16% 47%;
+	--inverse-secondary-fg: 215 25% 27%;
+	--inverse-primary-fg: 222 47% 11%;
+
+	/** Status **/
+	--status-default: 210 40% 98%;
+	--status-default-hover: 210 40% 96%;
+	--status-default-border: 214 32% 91%;
+	--status-default-muted: 215 16% 47%;
+	--status-default-bg-hover: 215 25% 27%;
+	--status-default-bg: 217 33% 17%;
+	--status-default-fg: 222 47% 11%;
+	--status-info: 200 98% 39%;
+	--status-info-fg: 199 89% 48%;
+	--status-info-hover: 199 89% 48%;
+	--status-info-bg: var(--status-default-bg);
+	--status-info-primary-bg: 204 80% 16%;
+	--status-info-bg-hover: var(--status-default-bg-hover);
+	--status-info-primary-border: 201 90% 27%;
+	--status-info-secondary-border: 202 80% 24%;
+	--status-success: 142 76% 36%;
+	--status-success-fg: 142 71% 45%;
+	--status-success-hover: 142 71% 45%;
+	--status-success-bg: var(--status-default-bg);
+	--status-success-primary-bg: 145 80% 10%;
+	--status-success-bg-hover: var(--status-default-bg-hover);
+	--status-success-primary-border: 143 64% 24%;
+	--status-success-secondary-border: 144 61% 20%;
+	--status-warning: 32 95% 44%;
+	--status-warning-fg: 38 92% 50%;
+	--status-warning-hover: 38 92% 50%;
+	--status-warning-bg: var(--status-default-bg);
+	--status-warning-primary-bg: 26 83% 14%;
+	--status-warning-bg-hover: var(--status-default-bg-hover);
+	--status-warning-primary-border: 32 81% 29%;
+	--status-warning-secondary-border: 28 73% 26%;
+	--status-error: 0 74% 42%;
+	--status-error-fg: 0 84% 60%;
+	--status-error-hover: 0 84% 60%;
+	--status-error-bg: var(--status-default-bg);
+	--status-error-primary-bg: 0 75% 15%;
+	--status-error-bg-hover: var(--status-default-bg-hover);
+	--status-error-primary-border: 0 70% 35%;
+	--status-error-secondary-border: 0 63% 31%;
+
+	/** Alpha **/
+	--alpha-03: 229 84% 5% / 3%;
+	--alpha-05: 229 84% 5% / 5%;
+	--alpha-08: 229 84% 5% / 8%;
+	--alpha-10: 229 84% 5% / 10%;
+	--alpha-20: 229 84% 5% / 20%;
+	--alpha-30: 229 84% 5% / 30%;
+	--alpha-40: 229 84% 5% / 40%;
+	--alpha-50: 229 84% 5% / 50%;
+	--alpha-60: 229 84% 5% / 60%;
+	--alpha-70: 229 84% 5% / 70%;
+	--alpha-80: 229 84% 5% / 80%;
+	--alpha-90: 229 84% 5% / 90%;
+
+	--alpha-high-03: 210 40% 96% / 3%;
+	--alpha-high-05: 210 40% 96% / 5%;
+	--alpha-high-08: 210 40% 96% / 8%;
+	--alpha-high-10: 210 40% 96% / 10%;
+	--alpha-high-20: 210 40% 96% / 20%;
+	--alpha-high-30: 210 40% 96% / 30%;
+	--alpha-high-40: 210 40% 96% / 40%;
+	--alpha-high-50: 210 40% 96% / 50%;
+	--alpha-high-60: 210 40% 96% / 60%;
+	--alpha-high-70: 210 40% 96% / 70%;
+	--alpha-high-80: 210 40% 96% / 80%;
+	--alpha-high-90: 210 40% 96% / 90%;
+
+	--alpha-accent-primary: 222 47% 11% / 8%;
+	--alpha-accent-secondary: 222 47% 11% / 5%;
+
+	/** Palette **/
+	--peony: 340 35% 47%;
+	--garnet: 0 35% 48%;
+	--cinnamon: 15 35% 43%;
+	--caramel: 29 35% 39%;
+	--hazel: 38 35% 36%;
+	--honey: 44 35% 35%;
+	--lemon: 49 52% 36%;
+	--olive: 67 35% 32%;
+	--sage: 87 35% 33%;
+	--mint: 120 34% 34%;
+	--bazil: 149 35% 34%;
+	--spruce: 165 35% 34%;
+	--aqua: 174 35% 33%;
+	--azure: 180 35% 33%;
+	--tiffany: 187 35% 35%;
+	--marine: 190 35% 35%;
+	--turquoise: 195 35% 37%;
+	--frost: 201 35% 39%;
+	--bosphorus: 217 35% 45%;
+	--lavender: 247 35% 53%;
+	--orchid: 275 35% 49%;
+	--lilac: 296 35% 45%;
+	--plume: 305 35% 45%;
+	--velvet: 320 35% 46%;
+
+	/** Glass **/
+	--glass-thin: blur(8px) brightness(68%) saturate(130%);
+	--glass-regular: blur(16px);
+	--glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
+	--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
+
+	--shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
+	--shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
+	--shadow-glass-lg: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
+}
+
+.backdrop-glass-clear {
+	backdrop-filter: var(--glass-clear);
+}
+.backdrop-glass-thin {
+	backdrop-filter: var(--glass-thin);
+}
+.backdrop-glass-regular {
+	backdrop-filter: var(--glass-regular);
+}
+.backdrop-glass-thick {
+	backdrop-filter: var(--glass-thick);
+}