@raylang/elements 0.0.0-stage → 0.3.0

package/tokens.css

@@ -0,0 +1,796 @@
+/* Generated by ray-elements tools from tokens.toml. Do not edit. */
+
+@layer ray.tokens, ray.base;
+
+@layer ray.tokens {
+  :root {
+    color-scheme: light dark;
+
+    /* base */
+    --ray-white: #ffffff;
+    --ray-black: #000000;
+
+    /* palette */
+    --ray-dark-0: #c9c9c9;
+    --ray-dark-1: #b8b8b8;
+    --ray-dark-2: #828282;
+    --ray-dark-3: #696969;
+    --ray-dark-4: #424242;
+    --ray-dark-5: #3b3b3b;
+    --ray-dark-6: #2e2e2e;
+    --ray-dark-7: #242424;
+    --ray-dark-8: #1f1f1f;
+    --ray-dark-9: #141414;
+    --ray-gray-0: #f8f9fa;
+    --ray-gray-1: #f1f3f5;
+    --ray-gray-2: #e9ecef;
+    --ray-gray-3: #dee2e6;
+    --ray-gray-4: #ced4da;
+    --ray-gray-5: #adb5bd;
+    --ray-gray-6: #868e96;
+    --ray-gray-7: #495057;
+    --ray-gray-8: #343a40;
+    --ray-gray-9: #212529;
+    --ray-red-0: #fff5f5;
+    --ray-red-1: #ffe3e3;
+    --ray-red-2: #ffc9c9;
+    --ray-red-3: #ffa8a8;
+    --ray-red-4: #ff8787;
+    --ray-red-5: #ff6b6b;
+    --ray-red-6: #fa5252;
+    --ray-red-7: #f03e3e;
+    --ray-red-8: #e03131;
+    --ray-red-9: #c92a2a;
+    --ray-pink-0: #fff0f6;
+    --ray-pink-1: #ffdeeb;
+    --ray-pink-2: #fcc2d7;
+    --ray-pink-3: #faa2c1;
+    --ray-pink-4: #f783ac;
+    --ray-pink-5: #f06595;
+    --ray-pink-6: #e64980;
+    --ray-pink-7: #d6336c;
+    --ray-pink-8: #c2255c;
+    --ray-pink-9: #a61e4d;
+    --ray-violet-0: #f3f0ff;
+    --ray-violet-1: #e5dbff;
+    --ray-violet-2: #d0bfff;
+    --ray-violet-3: #b197fc;
+    --ray-violet-4: #9775fa;
+    --ray-violet-5: #845ef7;
+    --ray-violet-6: #7950f2;
+    --ray-violet-7: #7048e8;
+    --ray-violet-8: #6741d9;
+    --ray-violet-9: #5f3dc4;
+    --ray-indigo-0: #edf2ff;
+    --ray-indigo-1: #dbe4ff;
+    --ray-indigo-2: #bac8ff;
+    --ray-indigo-3: #91a7ff;
+    --ray-indigo-4: #748ffc;
+    --ray-indigo-5: #5c7cfa;
+    --ray-indigo-6: #4c6ef5;
+    --ray-indigo-7: #4263eb;
+    --ray-indigo-8: #3b5bdb;
+    --ray-indigo-9: #364fc7;
+    --ray-blue-0: #e7f5ff;
+    --ray-blue-1: #d0ebff;
+    --ray-blue-2: #a5d8ff;
+    --ray-blue-3: #74c0fc;
+    --ray-blue-4: #4dabf7;
+    --ray-blue-5: #339af0;
+    --ray-blue-6: #228be6;
+    --ray-blue-7: #1c7ed6;
+    --ray-blue-8: #1971c2;
+    --ray-blue-9: #1864ab;
+    --ray-cyan-0: #e3fafc;
+    --ray-cyan-1: #c5f6fa;
+    --ray-cyan-2: #99e9f2;
+    --ray-cyan-3: #66d9e8;
+    --ray-cyan-4: #3bc9db;
+    --ray-cyan-5: #22b8cf;
+    --ray-cyan-6: #15aabf;
+    --ray-cyan-7: #1098ad;
+    --ray-cyan-8: #0c8599;
+    --ray-cyan-9: #0b7285;
+    --ray-teal-0: #e6fcf5;
+    --ray-teal-1: #c3fae8;
+    --ray-teal-2: #96f2d7;
+    --ray-teal-3: #63e6be;
+    --ray-teal-4: #38d9a9;
+    --ray-teal-5: #20c997;
+    --ray-teal-6: #12b886;
+    --ray-teal-7: #0ca678;
+    --ray-teal-8: #099268;
+    --ray-teal-9: #087f5b;
+    --ray-green-0: #ebfbee;
+    --ray-green-1: #d3f9d8;
+    --ray-green-2: #b2f2bb;
+    --ray-green-3: #8ce99a;
+    --ray-green-4: #69db7c;
+    --ray-green-5: #51cf66;
+    --ray-green-6: #40c057;
+    --ray-green-7: #37b24d;
+    --ray-green-8: #2f9e44;
+    --ray-green-9: #2b8a3e;
+    --ray-yellow-0: #fff9db;
+    --ray-yellow-1: #fff3bf;
+    --ray-yellow-2: #ffec99;
+    --ray-yellow-3: #ffe066;
+    --ray-yellow-4: #ffd43b;
+    --ray-yellow-5: #fcc419;
+    --ray-yellow-6: #fab005;
+    --ray-yellow-7: #f59f00;
+    --ray-yellow-8: #f08c00;
+    --ray-yellow-9: #e67700;
+    --ray-orange-0: #fff4e6;
+    --ray-orange-1: #ffe8cc;
+    --ray-orange-2: #ffd8a8;
+    --ray-orange-3: #ffc078;
+    --ray-orange-4: #ffa94d;
+    --ray-orange-5: #ff922b;
+    --ray-orange-6: #fd7e14;
+    --ray-orange-7: #f76707;
+    --ray-orange-8: #e8590c;
+    --ray-orange-9: #d9480f;
+    --ray-custom-0: var(--ray-custom-src-0, #e7f5ff);
+    --ray-custom-1: var(--ray-custom-src-1, #d0ebff);
+    --ray-custom-2: var(--ray-custom-src-2, #a5d8ff);
+    --ray-custom-3: var(--ray-custom-src-3, #74c0fc);
+    --ray-custom-4: var(--ray-custom-src-4, #4dabf7);
+    --ray-custom-5: var(--ray-custom-src-5, #339af0);
+    --ray-custom-6: var(--ray-custom-src-6, #228be6);
+    --ray-custom-7: var(--ray-custom-src-7, #1c7ed6);
+    --ray-custom-8: var(--ray-custom-src-8, #1971c2);
+    --ray-custom-9: var(--ray-custom-src-9, #1864ab);
+
+    /* variant */
+    --ray-dark-filled: light-dark(var(--ray-dark-6), var(--ray-gray-1));
+    --ray-dark-filled-hover: light-dark(var(--ray-dark-7), var(--ray-gray-3));
+    --ray-dark-light: light-dark(color-mix(in srgb, var(--ray-dark-6) 10%, transparent), color-mix(in srgb, var(--ray-gray-1) 10%, transparent));
+    --ray-dark-light-hover: light-dark(color-mix(in srgb, var(--ray-dark-6) 16%, transparent), color-mix(in srgb, var(--ray-gray-1) 16%, transparent));
+    --ray-dark-light-color: light-dark(var(--ray-dark-9), var(--ray-gray-1));
+    --ray-dark-outline: light-dark(var(--ray-dark-8), var(--ray-gray-3));
+    --ray-dark-outline-hover: light-dark(color-mix(in srgb, var(--ray-dark-6) 8%, transparent), color-mix(in srgb, var(--ray-gray-1) 8%, transparent));
+    --ray-dark-contrast: light-dark(var(--ray-white), var(--ray-black));
+    --ray-gray-filled: var(--ray-gray-7);
+    --ray-gray-filled-hover: var(--ray-gray-8);
+    --ray-gray-light: light-dark(color-mix(in srgb, var(--ray-gray-6) 10%, transparent), color-mix(in srgb, var(--ray-gray-6) 15%, transparent));
+    --ray-gray-light-hover: light-dark(color-mix(in srgb, var(--ray-gray-6) 16%, transparent), color-mix(in srgb, var(--ray-gray-6) 22%, transparent));
+    --ray-gray-light-color: light-dark(var(--ray-gray-9), var(--ray-gray-3));
+    --ray-gray-outline: light-dark(var(--ray-gray-8), var(--ray-gray-4));
+    --ray-gray-outline-hover: light-dark(color-mix(in srgb, var(--ray-gray-6) 8%, transparent), color-mix(in srgb, var(--ray-gray-4) 8%, transparent));
+    --ray-gray-contrast: var(--ray-white);
+    --ray-red-filled: var(--ray-red-9);
+    --ray-red-filled-hover: color-mix(in srgb, var(--ray-red-9) 85%, var(--ray-black));
+    --ray-red-light: light-dark(color-mix(in srgb, var(--ray-red-6) 10%, transparent), color-mix(in srgb, var(--ray-red-6) 15%, transparent));
+    --ray-red-light-hover: light-dark(color-mix(in srgb, var(--ray-red-6) 16%, transparent), color-mix(in srgb, var(--ray-red-6) 22%, transparent));
+    --ray-red-light-color: light-dark(color-mix(in srgb, var(--ray-red-9) 90%, var(--ray-black)), var(--ray-red-3));
+    --ray-red-outline: light-dark(var(--ray-red-8), var(--ray-red-4));
+    --ray-red-outline-hover: light-dark(color-mix(in srgb, var(--ray-red-6) 8%, transparent), color-mix(in srgb, var(--ray-red-4) 8%, transparent));
+    --ray-red-contrast: var(--ray-white);
+    --ray-pink-filled: var(--ray-pink-8);
+    --ray-pink-filled-hover: var(--ray-pink-9);
+    --ray-pink-light: light-dark(color-mix(in srgb, var(--ray-pink-6) 10%, transparent), color-mix(in srgb, var(--ray-pink-6) 15%, transparent));
+    --ray-pink-light-hover: light-dark(color-mix(in srgb, var(--ray-pink-6) 16%, transparent), color-mix(in srgb, var(--ray-pink-6) 22%, transparent));
+    --ray-pink-light-color: light-dark(var(--ray-pink-9), var(--ray-pink-3));
+    --ray-pink-outline: light-dark(var(--ray-pink-8), var(--ray-pink-4));
+    --ray-pink-outline-hover: light-dark(color-mix(in srgb, var(--ray-pink-6) 8%, transparent), color-mix(in srgb, var(--ray-pink-4) 8%, transparent));
+    --ray-pink-contrast: var(--ray-white);
+    --ray-violet-filled: var(--ray-violet-8);
+    --ray-violet-filled-hover: var(--ray-violet-9);
+    --ray-violet-light: light-dark(color-mix(in srgb, var(--ray-violet-6) 10%, transparent), color-mix(in srgb, var(--ray-violet-6) 15%, transparent));
+    --ray-violet-light-hover: light-dark(color-mix(in srgb, var(--ray-violet-6) 16%, transparent), color-mix(in srgb, var(--ray-violet-6) 22%, transparent));
+    --ray-violet-light-color: light-dark(var(--ray-violet-9), var(--ray-violet-3));
+    --ray-violet-outline: light-dark(var(--ray-violet-8), var(--ray-violet-4));
+    --ray-violet-outline-hover: light-dark(color-mix(in srgb, var(--ray-violet-6) 8%, transparent), color-mix(in srgb, var(--ray-violet-4) 8%, transparent));
+    --ray-violet-contrast: var(--ray-white);
+    --ray-indigo-filled: var(--ray-indigo-8);
+    --ray-indigo-filled-hover: var(--ray-indigo-9);
+    --ray-indigo-light: light-dark(color-mix(in srgb, var(--ray-indigo-6) 10%, transparent), color-mix(in srgb, var(--ray-indigo-6) 15%, transparent));
+    --ray-indigo-light-hover: light-dark(color-mix(in srgb, var(--ray-indigo-6) 16%, transparent), color-mix(in srgb, var(--ray-indigo-6) 22%, transparent));
+    --ray-indigo-light-color: light-dark(var(--ray-indigo-9), var(--ray-indigo-3));
+    --ray-indigo-outline: light-dark(var(--ray-indigo-8), var(--ray-indigo-4));
+    --ray-indigo-outline-hover: light-dark(color-mix(in srgb, var(--ray-indigo-6) 8%, transparent), color-mix(in srgb, var(--ray-indigo-4) 8%, transparent));
+    --ray-indigo-contrast: var(--ray-white);
+    --ray-blue-filled: var(--ray-blue-8);
+    --ray-blue-filled-hover: var(--ray-blue-9);
+    --ray-blue-light: light-dark(color-mix(in srgb, var(--ray-blue-6) 10%, transparent), color-mix(in srgb, var(--ray-blue-6) 15%, transparent));
+    --ray-blue-light-hover: light-dark(color-mix(in srgb, var(--ray-blue-6) 16%, transparent), color-mix(in srgb, var(--ray-blue-6) 22%, transparent));
+    --ray-blue-light-color: light-dark(var(--ray-blue-9), var(--ray-blue-3));
+    --ray-blue-outline: light-dark(var(--ray-blue-8), var(--ray-blue-4));
+    --ray-blue-outline-hover: light-dark(color-mix(in srgb, var(--ray-blue-6) 8%, transparent), color-mix(in srgb, var(--ray-blue-4) 8%, transparent));
+    --ray-blue-contrast: var(--ray-white);
+    --ray-cyan-filled: var(--ray-cyan-9);
+    --ray-cyan-filled-hover: color-mix(in srgb, var(--ray-cyan-9) 85%, var(--ray-black));
+    --ray-cyan-light: light-dark(color-mix(in srgb, var(--ray-cyan-6) 10%, transparent), color-mix(in srgb, var(--ray-cyan-6) 15%, transparent));
+    --ray-cyan-light-hover: light-dark(color-mix(in srgb, var(--ray-cyan-6) 16%, transparent), color-mix(in srgb, var(--ray-cyan-6) 22%, transparent));
+    --ray-cyan-light-color: light-dark(color-mix(in srgb, var(--ray-cyan-9) 90%, var(--ray-black)), var(--ray-cyan-3));
+    --ray-cyan-outline: light-dark(var(--ray-cyan-light-color), var(--ray-cyan-4));
+    --ray-cyan-outline-hover: light-dark(color-mix(in srgb, var(--ray-cyan-6) 8%, transparent), color-mix(in srgb, var(--ray-cyan-4) 8%, transparent));
+    --ray-cyan-contrast: var(--ray-white);
+    --ray-teal-filled: var(--ray-teal-9);
+    --ray-teal-filled-hover: color-mix(in srgb, var(--ray-teal-9) 85%, var(--ray-black));
+    --ray-teal-light: light-dark(color-mix(in srgb, var(--ray-teal-6) 10%, transparent), color-mix(in srgb, var(--ray-teal-6) 15%, transparent));
+    --ray-teal-light-hover: light-dark(color-mix(in srgb, var(--ray-teal-6) 16%, transparent), color-mix(in srgb, var(--ray-teal-6) 22%, transparent));
+    --ray-teal-light-color: light-dark(color-mix(in srgb, var(--ray-teal-9) 90%, var(--ray-black)), var(--ray-teal-3));
+    --ray-teal-outline: light-dark(var(--ray-teal-light-color), var(--ray-teal-4));
+    --ray-teal-outline-hover: light-dark(color-mix(in srgb, var(--ray-teal-6) 8%, transparent), color-mix(in srgb, var(--ray-teal-4) 8%, transparent));
+    --ray-teal-contrast: var(--ray-white);
+    --ray-green-filled: color-mix(in srgb, var(--ray-green-9) 90%, var(--ray-black));
+    --ray-green-filled-hover: color-mix(in srgb, var(--ray-green-9) 80%, var(--ray-black));
+    --ray-green-light: light-dark(color-mix(in srgb, var(--ray-green-6) 10%, transparent), color-mix(in srgb, var(--ray-green-6) 15%, transparent));
+    --ray-green-light-hover: light-dark(color-mix(in srgb, var(--ray-green-6) 16%, transparent), color-mix(in srgb, var(--ray-green-6) 22%, transparent));
+    --ray-green-light-color: light-dark(color-mix(in srgb, var(--ray-green-9) 80%, var(--ray-black)), var(--ray-green-3));
+    --ray-green-outline: light-dark(var(--ray-green-light-color), var(--ray-green-4));
+    --ray-green-outline-hover: light-dark(color-mix(in srgb, var(--ray-green-6) 8%, transparent), color-mix(in srgb, var(--ray-green-4) 8%, transparent));
+    --ray-green-contrast: var(--ray-white);
+    --ray-yellow-filled: var(--ray-yellow-5);
+    --ray-yellow-filled-hover: var(--ray-yellow-6);
+    --ray-yellow-light: light-dark(color-mix(in srgb, var(--ray-yellow-6) 10%, transparent), color-mix(in srgb, var(--ray-yellow-6) 15%, transparent));
+    --ray-yellow-light-hover: light-dark(color-mix(in srgb, var(--ray-yellow-6) 16%, transparent), color-mix(in srgb, var(--ray-yellow-6) 22%, transparent));
+    --ray-yellow-light-color: light-dark(color-mix(in srgb, var(--ray-yellow-9) 62%, var(--ray-black)), var(--ray-yellow-3));
+    --ray-yellow-outline: light-dark(var(--ray-yellow-light-color), var(--ray-yellow-4));
+    --ray-yellow-outline-hover: light-dark(color-mix(in srgb, var(--ray-yellow-6) 8%, transparent), color-mix(in srgb, var(--ray-yellow-4) 8%, transparent));
+    --ray-yellow-contrast: var(--ray-black);
+    --ray-orange-filled: color-mix(in srgb, var(--ray-orange-9) 90%, var(--ray-black));
+    --ray-orange-filled-hover: color-mix(in srgb, var(--ray-orange-9) 80%, var(--ray-black));
+    --ray-orange-light: light-dark(color-mix(in srgb, var(--ray-orange-6) 10%, transparent), color-mix(in srgb, var(--ray-orange-6) 15%, transparent));
+    --ray-orange-light-hover: light-dark(color-mix(in srgb, var(--ray-orange-6) 16%, transparent), color-mix(in srgb, var(--ray-orange-6) 22%, transparent));
+    --ray-orange-light-color: light-dark(color-mix(in srgb, var(--ray-orange-9) 78%, var(--ray-black)), var(--ray-orange-3));
+    --ray-orange-outline: light-dark(var(--ray-orange-light-color), var(--ray-orange-4));
+    --ray-orange-outline-hover: light-dark(color-mix(in srgb, var(--ray-orange-6) 8%, transparent), color-mix(in srgb, var(--ray-orange-4) 8%, transparent));
+    --ray-orange-contrast: var(--ray-white);
+    --ray-custom-filled: var(--ray-custom-src-filled, var(--ray-custom-8));
+    --ray-custom-filled-hover: var(--ray-custom-src-filled-hover, var(--ray-custom-9));
+    --ray-custom-light: light-dark(color-mix(in srgb, var(--ray-custom-6) 10%, transparent), color-mix(in srgb, var(--ray-custom-6) 15%, transparent));
+    --ray-custom-light-hover: light-dark(color-mix(in srgb, var(--ray-custom-6) 16%, transparent), color-mix(in srgb, var(--ray-custom-6) 22%, transparent));
+    --ray-custom-light-color: light-dark(var(--ray-custom-9), var(--ray-custom-3));
+    --ray-custom-outline: light-dark(var(--ray-custom-8), var(--ray-custom-4));
+    --ray-custom-outline-hover: light-dark(color-mix(in srgb, var(--ray-custom-6) 8%, transparent), color-mix(in srgb, var(--ray-custom-4) 8%, transparent));
+    --ray-custom-contrast: var(--ray-custom-src-contrast, var(--ray-white));
+
+    /* primary */
+    --ray-primary-0: var(--ray-blue-0);
+    --ray-primary-1: var(--ray-blue-1);
+    --ray-primary-2: var(--ray-blue-2);
+    --ray-primary-3: var(--ray-blue-3);
+    --ray-primary-4: var(--ray-blue-4);
+    --ray-primary-5: var(--ray-blue-5);
+    --ray-primary-6: var(--ray-blue-6);
+    --ray-primary-7: var(--ray-blue-7);
+    --ray-primary-8: var(--ray-blue-8);
+    --ray-primary-9: var(--ray-blue-9);
+    --ray-primary-filled: var(--ray-blue-filled);
+    --ray-primary-filled-hover: var(--ray-blue-filled-hover);
+    --ray-primary-light: var(--ray-blue-light);
+    --ray-primary-light-hover: var(--ray-blue-light-hover);
+    --ray-primary-light-color: var(--ray-blue-light-color);
+    --ray-primary-outline: var(--ray-blue-outline);
+    --ray-primary-outline-hover: var(--ray-blue-outline-hover);
+    --ray-primary-contrast: var(--ray-blue-contrast);
+
+    /* semantic */
+    --ray-background: light-dark(var(--ray-white), var(--ray-dark-9));
+    --ray-foreground: light-dark(var(--ray-gray-9), var(--ray-gray-1));
+    --ray-card: light-dark(var(--ray-white), var(--ray-dark-8));
+    --ray-card-foreground: light-dark(var(--ray-gray-9), var(--ray-gray-1));
+    --ray-popover: light-dark(var(--ray-white), var(--ray-dark-8));
+    --ray-popover-foreground: light-dark(var(--ray-gray-9), var(--ray-gray-1));
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-secondary: light-dark(var(--ray-gray-1), var(--ray-dark-6));
+    --ray-secondary-hover: light-dark(var(--ray-gray-2), var(--ray-dark-5));
+    --ray-secondary-foreground: light-dark(var(--ray-gray-9), var(--ray-gray-1));
+    --ray-default: light-dark(var(--ray-white), color-mix(in srgb, var(--ray-white) 3%, transparent));
+    --ray-default-hover: light-dark(var(--ray-gray-1), color-mix(in srgb, var(--ray-white) 7%, transparent));
+    --ray-raised: light-dark(var(--ray-white), var(--ray-dark-4));
+    --ray-muted: light-dark(var(--ray-gray-0), var(--ray-dark-6));
+    --ray-muted-foreground: light-dark(color-mix(in srgb, var(--ray-gray-7) 50%, var(--ray-gray-6)), color-mix(in srgb, var(--ray-dark-1) 75%, var(--ray-dark-2)));
+    --ray-accent: light-dark(var(--ray-gray-1), var(--ray-dark-6));
+    --ray-accent-foreground: light-dark(var(--ray-gray-9), var(--ray-gray-1));
+    --ray-destructive: var(--ray-red-filled);
+    --ray-destructive-hover: var(--ray-red-filled-hover);
+    --ray-destructive-foreground: var(--ray-white);
+    --ray-success: light-dark(var(--ray-green-light-color), var(--ray-green-5));
+    --ray-warning: light-dark(var(--ray-yellow-light-color), var(--ray-yellow-5));
+    --ray-info: light-dark(var(--ray-cyan-light-color), var(--ray-cyan-4));
+    --ray-border: light-dark(var(--ray-gray-3), var(--ray-dark-6));
+    --ray-input: light-dark(var(--ray-gray-4), var(--ray-dark-5));
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-overlay: light-dark(color-mix(in srgb, var(--ray-black) 10%, transparent), color-mix(in srgb, var(--ray-black) 50%, transparent));
+    --ray-overlay-border: light-dark(color-mix(in srgb, var(--ray-black) 16%, transparent), color-mix(in srgb, var(--ray-white) 14%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+
+    /* chart */
+    --ray-chart-1: light-dark(var(--ray-blue-6), var(--ray-blue-5));
+    --ray-chart-2: light-dark(var(--ray-orange-8), var(--ray-orange-6));
+    --ray-chart-3: light-dark(var(--ray-teal-8), var(--ray-teal-5));
+    --ray-chart-4: light-dark(var(--ray-violet-6), var(--ray-violet-5));
+    --ray-chart-5: light-dark(var(--ray-pink-6), var(--ray-pink-5));
+    --ray-chart-6: light-dark(color-mix(in srgb, var(--ray-yellow-9) 70%, var(--ray-green-9)), var(--ray-yellow-5));
+    --ray-chart-7: light-dark(var(--ray-cyan-9), var(--ray-cyan-5));
+    --ray-chart-8: var(--ray-gray-6);
+    --ray-chart-grid: light-dark(var(--ray-gray-2), var(--ray-dark-6));
+    --ray-chart-axis: var(--ray-muted-foreground);
+    --ray-chart-text: var(--ray-foreground);
+    --ray-chart-tooltip: var(--ray-popover);
+    --ray-chart-tooltip-text: var(--ray-popover-foreground);
+    --ray-chart-tooltip-border: var(--ray-border);
+
+    /* code */
+    --ray-code-background: light-dark(var(--ray-gray-0), #19191a);
+    --ray-code-text: var(--ray-foreground);
+    --ray-code-tag: var(--ray-green-light-color);
+    --ray-code-attr: var(--ray-violet-light-color);
+    --ray-code-string: var(--ray-blue-light-color);
+    --ray-code-keyword: var(--ray-pink-light-color);
+    --ray-code-number: var(--ray-orange-light-color);
+    --ray-code-comment: var(--ray-muted-foreground);
+    --ray-code-punctuation: var(--ray-muted-foreground);
+    --ray-code-function: var(--ray-indigo-light-color);
+    --ray-code-type: var(--ray-teal-light-color);
+    --ray-code-added: var(--ray-green-light-color);
+    --ray-code-removed: var(--ray-red-light-color);
+
+    /* font */
+    --ray-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --ray-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+    /* font-size */
+    --ray-font-size-xs: 0.75rem;
+    --ray-font-size-sm: 0.875rem;
+    --ray-font-size-md: 1rem;
+    --ray-font-size-lg: 1.125rem;
+    --ray-font-size-xl: 1.25rem;
+    --ray-font-size-2xl: 1.5rem;
+    --ray-font-size-3xl: 1.875rem;
+    --ray-font-size-4xl: 2.25rem;
+
+    /* line-height */
+    --ray-line-height-tight: 1.25;
+    --ray-line-height-heading: 1.3;
+    --ray-line-height-xs: 1.4;
+    --ray-line-height-sm: 1.45;
+    --ray-line-height-md: 1.55;
+    --ray-line-height-lg: 1.6;
+    --ray-line-height-xl: 1.65;
+
+    /* font-weight */
+    --ray-font-weight-regular: 400;
+    --ray-font-weight-medium: 500;
+    --ray-font-weight-semibold: 600;
+    --ray-font-weight-bold: 700;
+
+    /* space */
+    --ray-space-0: 0;
+    --ray-space-1: 0.25rem;
+    --ray-space-2: 0.5rem;
+    --ray-space-3: 0.75rem;
+    --ray-space-4: 1rem;
+    --ray-space-5: 1.25rem;
+    --ray-space-6: 1.5rem;
+    --ray-space-8: 2rem;
+    --ray-space-10: 2.5rem;
+    --ray-space-12: 3rem;
+    --ray-space-16: 4rem;
+    --ray-space-xs: 0.625rem;
+    --ray-space-sm: 0.75rem;
+    --ray-space-md: 1rem;
+    --ray-space-lg: 1.25rem;
+    --ray-space-xl: 2rem;
+
+    /* radius */
+    --ray-radius-xs: 0.125rem;
+    --ray-radius-sm: 0.25rem;
+    --ray-radius-md: 0.5rem;
+    --ray-radius-lg: 1rem;
+    --ray-radius-xl: 2rem;
+    --ray-radius-full: 9999px;
+    --ray-radius-default: var(--ray-radius-md);
+
+    /* control-height */
+    --ray-control-height-xs: 1.875rem;
+    --ray-control-height-sm: 2.25rem;
+    --ray-control-height-md: 2.625rem;
+    --ray-control-height-lg: 3.125rem;
+    --ray-control-height-xl: 3.75rem;
+
+    /* shadow */
+    --ray-shadow-xs: 0 1px 3px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 1px 2px color-mix(in srgb, var(--ray-black) 10%, transparent);
+    --ray-shadow-sm: 0 1px 3px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 10px 15px -5px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 7px 7px -5px color-mix(in srgb, var(--ray-black) 4%, transparent);
+    --ray-shadow-md: 0 1px 3px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 20px 25px -5px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 10px 10px -5px color-mix(in srgb, var(--ray-black) 4%, transparent);
+    --ray-shadow-lg: 0 1px 3px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 28px 23px -7px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 12px 12px -7px color-mix(in srgb, var(--ray-black) 4%, transparent);
+    --ray-shadow-xl: 0 1px 3px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 36px 28px -7px color-mix(in srgb, var(--ray-black) 5%, transparent), 0 17px 17px -7px color-mix(in srgb, var(--ray-black) 4%, transparent);
+
+    /* gradient */
+    --ray-gradient-from: var(--ray-indigo-8);
+    --ray-gradient-to: var(--ray-violet-8);
+    --ray-gradient-deg: 45deg;
+
+    /* overlay */
+    --ray-overlay-blur: 4px;
+
+    /* focus */
+    --ray-focus-ring-width: 2px;
+    --ray-focus-ring-offset: 2px;
+
+    /* duration */
+    --ray-duration-fast: 120ms;
+    --ray-duration-base: 200ms;
+    --ray-duration-slow: 300ms;
+
+    /* easing */
+    --ray-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ray-easing-in: cubic-bezier(0.3, 0, 1, 1);
+    --ray-easing-out: cubic-bezier(0, 0, 0, 1);
+
+    /* z */
+    --ray-z-base: 0;
+    --ray-z-sticky: 200;
+    --ray-z-dropdown: 300;
+    --ray-z-overlay: 400;
+    --ray-z-modal: 500;
+    --ray-z-popover: 600;
+    --ray-z-toast: 700;
+    --ray-z-tooltip: 800;
+  }
+
+  [data-theme="light"] { color-scheme: light; }
+  [data-theme="dark"] { color-scheme: dark; }
+
+  [data-primary="dark"] {
+    --ray-primary-0: var(--ray-dark-0);
+    --ray-primary-1: var(--ray-dark-1);
+    --ray-primary-2: var(--ray-dark-2);
+    --ray-primary-3: var(--ray-dark-3);
+    --ray-primary-4: var(--ray-dark-4);
+    --ray-primary-5: var(--ray-dark-5);
+    --ray-primary-6: var(--ray-dark-6);
+    --ray-primary-7: var(--ray-dark-7);
+    --ray-primary-8: var(--ray-dark-8);
+    --ray-primary-9: var(--ray-dark-9);
+    --ray-primary-filled: var(--ray-dark-filled);
+    --ray-primary-filled-hover: var(--ray-dark-filled-hover);
+    --ray-primary-light: var(--ray-dark-light);
+    --ray-primary-light-hover: var(--ray-dark-light-hover);
+    --ray-primary-light-color: var(--ray-dark-light-color);
+    --ray-primary-outline: var(--ray-dark-outline);
+    --ray-primary-outline-hover: var(--ray-dark-outline-hover);
+    --ray-primary-contrast: var(--ray-dark-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="gray"] {
+    --ray-primary-0: var(--ray-gray-0);
+    --ray-primary-1: var(--ray-gray-1);
+    --ray-primary-2: var(--ray-gray-2);
+    --ray-primary-3: var(--ray-gray-3);
+    --ray-primary-4: var(--ray-gray-4);
+    --ray-primary-5: var(--ray-gray-5);
+    --ray-primary-6: var(--ray-gray-6);
+    --ray-primary-7: var(--ray-gray-7);
+    --ray-primary-8: var(--ray-gray-8);
+    --ray-primary-9: var(--ray-gray-9);
+    --ray-primary-filled: var(--ray-gray-filled);
+    --ray-primary-filled-hover: var(--ray-gray-filled-hover);
+    --ray-primary-light: var(--ray-gray-light);
+    --ray-primary-light-hover: var(--ray-gray-light-hover);
+    --ray-primary-light-color: var(--ray-gray-light-color);
+    --ray-primary-outline: var(--ray-gray-outline);
+    --ray-primary-outline-hover: var(--ray-gray-outline-hover);
+    --ray-primary-contrast: var(--ray-gray-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="red"] {
+    --ray-primary-0: var(--ray-red-0);
+    --ray-primary-1: var(--ray-red-1);
+    --ray-primary-2: var(--ray-red-2);
+    --ray-primary-3: var(--ray-red-3);
+    --ray-primary-4: var(--ray-red-4);
+    --ray-primary-5: var(--ray-red-5);
+    --ray-primary-6: var(--ray-red-6);
+    --ray-primary-7: var(--ray-red-7);
+    --ray-primary-8: var(--ray-red-8);
+    --ray-primary-9: var(--ray-red-9);
+    --ray-primary-filled: var(--ray-red-filled);
+    --ray-primary-filled-hover: var(--ray-red-filled-hover);
+    --ray-primary-light: var(--ray-red-light);
+    --ray-primary-light-hover: var(--ray-red-light-hover);
+    --ray-primary-light-color: var(--ray-red-light-color);
+    --ray-primary-outline: var(--ray-red-outline);
+    --ray-primary-outline-hover: var(--ray-red-outline-hover);
+    --ray-primary-contrast: var(--ray-red-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="pink"] {
+    --ray-primary-0: var(--ray-pink-0);
+    --ray-primary-1: var(--ray-pink-1);
+    --ray-primary-2: var(--ray-pink-2);
+    --ray-primary-3: var(--ray-pink-3);
+    --ray-primary-4: var(--ray-pink-4);
+    --ray-primary-5: var(--ray-pink-5);
+    --ray-primary-6: var(--ray-pink-6);
+    --ray-primary-7: var(--ray-pink-7);
+    --ray-primary-8: var(--ray-pink-8);
+    --ray-primary-9: var(--ray-pink-9);
+    --ray-primary-filled: var(--ray-pink-filled);
+    --ray-primary-filled-hover: var(--ray-pink-filled-hover);
+    --ray-primary-light: var(--ray-pink-light);
+    --ray-primary-light-hover: var(--ray-pink-light-hover);
+    --ray-primary-light-color: var(--ray-pink-light-color);
+    --ray-primary-outline: var(--ray-pink-outline);
+    --ray-primary-outline-hover: var(--ray-pink-outline-hover);
+    --ray-primary-contrast: var(--ray-pink-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="violet"] {
+    --ray-primary-0: var(--ray-violet-0);
+    --ray-primary-1: var(--ray-violet-1);
+    --ray-primary-2: var(--ray-violet-2);
+    --ray-primary-3: var(--ray-violet-3);
+    --ray-primary-4: var(--ray-violet-4);
+    --ray-primary-5: var(--ray-violet-5);
+    --ray-primary-6: var(--ray-violet-6);
+    --ray-primary-7: var(--ray-violet-7);
+    --ray-primary-8: var(--ray-violet-8);
+    --ray-primary-9: var(--ray-violet-9);
+    --ray-primary-filled: var(--ray-violet-filled);
+    --ray-primary-filled-hover: var(--ray-violet-filled-hover);
+    --ray-primary-light: var(--ray-violet-light);
+    --ray-primary-light-hover: var(--ray-violet-light-hover);
+    --ray-primary-light-color: var(--ray-violet-light-color);
+    --ray-primary-outline: var(--ray-violet-outline);
+    --ray-primary-outline-hover: var(--ray-violet-outline-hover);
+    --ray-primary-contrast: var(--ray-violet-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="indigo"] {
+    --ray-primary-0: var(--ray-indigo-0);
+    --ray-primary-1: var(--ray-indigo-1);
+    --ray-primary-2: var(--ray-indigo-2);
+    --ray-primary-3: var(--ray-indigo-3);
+    --ray-primary-4: var(--ray-indigo-4);
+    --ray-primary-5: var(--ray-indigo-5);
+    --ray-primary-6: var(--ray-indigo-6);
+    --ray-primary-7: var(--ray-indigo-7);
+    --ray-primary-8: var(--ray-indigo-8);
+    --ray-primary-9: var(--ray-indigo-9);
+    --ray-primary-filled: var(--ray-indigo-filled);
+    --ray-primary-filled-hover: var(--ray-indigo-filled-hover);
+    --ray-primary-light: var(--ray-indigo-light);
+    --ray-primary-light-hover: var(--ray-indigo-light-hover);
+    --ray-primary-light-color: var(--ray-indigo-light-color);
+    --ray-primary-outline: var(--ray-indigo-outline);
+    --ray-primary-outline-hover: var(--ray-indigo-outline-hover);
+    --ray-primary-contrast: var(--ray-indigo-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="blue"] {
+    --ray-primary-0: var(--ray-blue-0);
+    --ray-primary-1: var(--ray-blue-1);
+    --ray-primary-2: var(--ray-blue-2);
+    --ray-primary-3: var(--ray-blue-3);
+    --ray-primary-4: var(--ray-blue-4);
+    --ray-primary-5: var(--ray-blue-5);
+    --ray-primary-6: var(--ray-blue-6);
+    --ray-primary-7: var(--ray-blue-7);
+    --ray-primary-8: var(--ray-blue-8);
+    --ray-primary-9: var(--ray-blue-9);
+    --ray-primary-filled: var(--ray-blue-filled);
+    --ray-primary-filled-hover: var(--ray-blue-filled-hover);
+    --ray-primary-light: var(--ray-blue-light);
+    --ray-primary-light-hover: var(--ray-blue-light-hover);
+    --ray-primary-light-color: var(--ray-blue-light-color);
+    --ray-primary-outline: var(--ray-blue-outline);
+    --ray-primary-outline-hover: var(--ray-blue-outline-hover);
+    --ray-primary-contrast: var(--ray-blue-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="cyan"] {
+    --ray-primary-0: var(--ray-cyan-0);
+    --ray-primary-1: var(--ray-cyan-1);
+    --ray-primary-2: var(--ray-cyan-2);
+    --ray-primary-3: var(--ray-cyan-3);
+    --ray-primary-4: var(--ray-cyan-4);
+    --ray-primary-5: var(--ray-cyan-5);
+    --ray-primary-6: var(--ray-cyan-6);
+    --ray-primary-7: var(--ray-cyan-7);
+    --ray-primary-8: var(--ray-cyan-8);
+    --ray-primary-9: var(--ray-cyan-9);
+    --ray-primary-filled: var(--ray-cyan-filled);
+    --ray-primary-filled-hover: var(--ray-cyan-filled-hover);
+    --ray-primary-light: var(--ray-cyan-light);
+    --ray-primary-light-hover: var(--ray-cyan-light-hover);
+    --ray-primary-light-color: var(--ray-cyan-light-color);
+    --ray-primary-outline: var(--ray-cyan-outline);
+    --ray-primary-outline-hover: var(--ray-cyan-outline-hover);
+    --ray-primary-contrast: var(--ray-cyan-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="teal"] {
+    --ray-primary-0: var(--ray-teal-0);
+    --ray-primary-1: var(--ray-teal-1);
+    --ray-primary-2: var(--ray-teal-2);
+    --ray-primary-3: var(--ray-teal-3);
+    --ray-primary-4: var(--ray-teal-4);
+    --ray-primary-5: var(--ray-teal-5);
+    --ray-primary-6: var(--ray-teal-6);
+    --ray-primary-7: var(--ray-teal-7);
+    --ray-primary-8: var(--ray-teal-8);
+    --ray-primary-9: var(--ray-teal-9);
+    --ray-primary-filled: var(--ray-teal-filled);
+    --ray-primary-filled-hover: var(--ray-teal-filled-hover);
+    --ray-primary-light: var(--ray-teal-light);
+    --ray-primary-light-hover: var(--ray-teal-light-hover);
+    --ray-primary-light-color: var(--ray-teal-light-color);
+    --ray-primary-outline: var(--ray-teal-outline);
+    --ray-primary-outline-hover: var(--ray-teal-outline-hover);
+    --ray-primary-contrast: var(--ray-teal-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="green"] {
+    --ray-primary-0: var(--ray-green-0);
+    --ray-primary-1: var(--ray-green-1);
+    --ray-primary-2: var(--ray-green-2);
+    --ray-primary-3: var(--ray-green-3);
+    --ray-primary-4: var(--ray-green-4);
+    --ray-primary-5: var(--ray-green-5);
+    --ray-primary-6: var(--ray-green-6);
+    --ray-primary-7: var(--ray-green-7);
+    --ray-primary-8: var(--ray-green-8);
+    --ray-primary-9: var(--ray-green-9);
+    --ray-primary-filled: var(--ray-green-filled);
+    --ray-primary-filled-hover: var(--ray-green-filled-hover);
+    --ray-primary-light: var(--ray-green-light);
+    --ray-primary-light-hover: var(--ray-green-light-hover);
+    --ray-primary-light-color: var(--ray-green-light-color);
+    --ray-primary-outline: var(--ray-green-outline);
+    --ray-primary-outline-hover: var(--ray-green-outline-hover);
+    --ray-primary-contrast: var(--ray-green-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="yellow"] {
+    --ray-primary-0: var(--ray-yellow-0);
+    --ray-primary-1: var(--ray-yellow-1);
+    --ray-primary-2: var(--ray-yellow-2);
+    --ray-primary-3: var(--ray-yellow-3);
+    --ray-primary-4: var(--ray-yellow-4);
+    --ray-primary-5: var(--ray-yellow-5);
+    --ray-primary-6: var(--ray-yellow-6);
+    --ray-primary-7: var(--ray-yellow-7);
+    --ray-primary-8: var(--ray-yellow-8);
+    --ray-primary-9: var(--ray-yellow-9);
+    --ray-primary-filled: var(--ray-yellow-filled);
+    --ray-primary-filled-hover: var(--ray-yellow-filled-hover);
+    --ray-primary-light: var(--ray-yellow-light);
+    --ray-primary-light-hover: var(--ray-yellow-light-hover);
+    --ray-primary-light-color: var(--ray-yellow-light-color);
+    --ray-primary-outline: var(--ray-yellow-outline);
+    --ray-primary-outline-hover: var(--ray-yellow-outline-hover);
+    --ray-primary-contrast: var(--ray-yellow-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="orange"] {
+    --ray-primary-0: var(--ray-orange-0);
+    --ray-primary-1: var(--ray-orange-1);
+    --ray-primary-2: var(--ray-orange-2);
+    --ray-primary-3: var(--ray-orange-3);
+    --ray-primary-4: var(--ray-orange-4);
+    --ray-primary-5: var(--ray-orange-5);
+    --ray-primary-6: var(--ray-orange-6);
+    --ray-primary-7: var(--ray-orange-7);
+    --ray-primary-8: var(--ray-orange-8);
+    --ray-primary-9: var(--ray-orange-9);
+    --ray-primary-filled: var(--ray-orange-filled);
+    --ray-primary-filled-hover: var(--ray-orange-filled-hover);
+    --ray-primary-light: var(--ray-orange-light);
+    --ray-primary-light-hover: var(--ray-orange-light-hover);
+    --ray-primary-light-color: var(--ray-orange-light-color);
+    --ray-primary-outline: var(--ray-orange-outline);
+    --ray-primary-outline-hover: var(--ray-orange-outline-hover);
+    --ray-primary-contrast: var(--ray-orange-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+
+  [data-primary="custom"] {
+    --ray-custom-0: var(--ray-custom-src-0, #e7f5ff);
+    --ray-custom-1: var(--ray-custom-src-1, #d0ebff);
+    --ray-custom-2: var(--ray-custom-src-2, #a5d8ff);
+    --ray-custom-3: var(--ray-custom-src-3, #74c0fc);
+    --ray-custom-4: var(--ray-custom-src-4, #4dabf7);
+    --ray-custom-5: var(--ray-custom-src-5, #339af0);
+    --ray-custom-6: var(--ray-custom-src-6, #228be6);
+    --ray-custom-7: var(--ray-custom-src-7, #1c7ed6);
+    --ray-custom-8: var(--ray-custom-src-8, #1971c2);
+    --ray-custom-9: var(--ray-custom-src-9, #1864ab);
+    --ray-custom-filled: var(--ray-custom-src-filled, var(--ray-custom-8));
+    --ray-custom-filled-hover: var(--ray-custom-src-filled-hover, var(--ray-custom-9));
+    --ray-custom-light: light-dark(color-mix(in srgb, var(--ray-custom-6) 10%, transparent), color-mix(in srgb, var(--ray-custom-6) 15%, transparent));
+    --ray-custom-light-hover: light-dark(color-mix(in srgb, var(--ray-custom-6) 16%, transparent), color-mix(in srgb, var(--ray-custom-6) 22%, transparent));
+    --ray-custom-light-color: light-dark(var(--ray-custom-9), var(--ray-custom-3));
+    --ray-custom-outline: light-dark(var(--ray-custom-8), var(--ray-custom-4));
+    --ray-custom-outline-hover: light-dark(color-mix(in srgb, var(--ray-custom-6) 8%, transparent), color-mix(in srgb, var(--ray-custom-4) 8%, transparent));
+    --ray-custom-contrast: var(--ray-custom-src-contrast, var(--ray-white));
+    --ray-primary-0: var(--ray-custom-0);
+    --ray-primary-1: var(--ray-custom-1);
+    --ray-primary-2: var(--ray-custom-2);
+    --ray-primary-3: var(--ray-custom-3);
+    --ray-primary-4: var(--ray-custom-4);
+    --ray-primary-5: var(--ray-custom-5);
+    --ray-primary-6: var(--ray-custom-6);
+    --ray-primary-7: var(--ray-custom-7);
+    --ray-primary-8: var(--ray-custom-8);
+    --ray-primary-9: var(--ray-custom-9);
+    --ray-primary-filled: var(--ray-custom-filled);
+    --ray-primary-filled-hover: var(--ray-custom-filled-hover);
+    --ray-primary-light: var(--ray-custom-light);
+    --ray-primary-light-hover: var(--ray-custom-light-hover);
+    --ray-primary-light-color: var(--ray-custom-light-color);
+    --ray-primary-outline: var(--ray-custom-outline);
+    --ray-primary-outline-hover: var(--ray-custom-outline-hover);
+    --ray-primary-contrast: var(--ray-custom-contrast);
+    --ray-primary: var(--ray-primary-filled);
+    --ray-primary-hover: var(--ray-primary-filled-hover);
+    --ray-primary-foreground: var(--ray-primary-contrast);
+    --ray-ring: light-dark(color-mix(in srgb, var(--ray-primary-6) 55%, transparent), color-mix(in srgb, var(--ray-primary-4) 60%, transparent));
+    --ray-selection: light-dark(color-mix(in srgb, var(--ray-primary-6) 22%, transparent), color-mix(in srgb, var(--ray-primary-4) 30%, transparent));
+  }
+}