@dxtmisha/d1 0.1.0

package/src/styles/Ui/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles" as variables;
+@use "./properties";
+
+@forward "@dxtmisha/styles/properties";
+
+@include variables.setDesignsDesign('d1');

package/src/styles/Ui/vars.scss

@@ -0,0 +1,669 @@
+@use "@dxtmisha/styles" as ui;
+
+:root {
+  --d1-ref-blur-0: blur(0);
+  --d1-ref-blur-2: blur(.2px);
+  --d1-ref-blur-4: blur(.4px);
+  --d1-ref-blur-8: blur(.8px);
+  --d1-ref-blur-16: blur(1.6px);
+  --d1-ref-blur-24: blur(2.4px);
+  --d1-ref-blur-32: blur(3.2px);
+  --d1-ref-blur-40: blur(4px);
+  --d1-ref-blur-48: blur(4.8px);
+  --d1-ref-blur-56: blur(5.6px);
+  --d1-ref-blur-64: blur(6.4px);
+  --d1-ref-blur-72: blur(7.2px);
+  --d1-ref-blur-80: blur(8px);
+  --d1-ref-blur-88: blur(8.8px);
+  --d1-ref-blur-96: blur(9.6px);
+  --d1-ref-font-family-roboto: Roboto;
+  --d1-ref-font-size-10: 10px;
+  --d1-ref-font-size-11: 11px;
+  --d1-ref-font-size-12: 12px;
+  --d1-ref-font-size-14: 14px;
+  --d1-ref-font-size-16: 16px;
+  --d1-ref-font-size-18: 18px;
+  --d1-ref-font-size-20: 20px;
+  --d1-ref-font-size-22: 22px;
+  --d1-ref-font-size-24: 24px;
+  --d1-ref-font-size-26: 26px;
+  --d1-ref-font-size-28: 28px;
+  --d1-ref-font-size-32: 32px;
+  --d1-ref-font-size-36: 36px;
+  --d1-ref-font-size-40: 40px;
+  --d1-ref-font-size-45: 45px;
+  --d1-ref-font-size-57: 57px;
+  --d1-ref-font-size-64: 64px;
+  --d1-ref-font-size-72: 72px;
+  --d1-ref-font-weight-300: 300;
+  --d1-ref-font-weight-400: 400;
+  --d1-ref-font-weight-500: 500;
+  --d1-ref-font-weight-600: 600;
+  --d1-ref-index-0: 0;
+  --d1-ref-index-1: 100;
+  --d1-ref-index-2: 200;
+  --d1-ref-index-3: 300;
+  --d1-ref-index-4: 400;
+  --d1-ref-index-5: 500;
+  --d1-ref-index-6: 600;
+  --d1-ref-index-7: 700;
+  --d1-ref-index-8: 800;
+  --d1-ref-index-9: 900;
+  --d1-ref-index-10: 1000;
+  --d1-ref-letterSpacing-0: 0;
+  --d1-ref-letterSpacing-10: 0.1px;
+  --d1-ref-letterSpacing-15: 0.15px;
+  --d1-ref-letterSpacing-20: 0.2px;
+  --d1-ref-letterSpacing-25: 0.25px;
+  --d1-ref-letterSpacing-30: 0.3px;
+  --d1-ref-letterSpacing-35: 0.35px;
+  --d1-ref-letterSpacing-40: 0.4px;
+  --d1-ref-letterSpacing-50: 0.5px;
+  --d1-ref-letterSpacing-60: 0.6px;
+  --d1-ref-letterSpacing-m10: -0.1px;
+  --d1-ref-letterSpacing-m15: -0.15px;
+  --d1-ref-letterSpacing-m20: -0.2px;
+  --d1-ref-letterSpacing-m25: -0.25px;
+  --d1-ref-letterSpacing-m30: -0.3px;
+  --d1-ref-lineHeight-16: 16px;
+  --d1-ref-lineHeight-20: 20px;
+  --d1-ref-lineHeight-24: 24px;
+  --d1-ref-lineHeight-28: 28px;
+  --d1-ref-lineHeight-32: 32px;
+  --d1-ref-lineHeight-36: 36px;
+  --d1-ref-lineHeight-40: 40px;
+  --d1-ref-lineHeight-44: 44px;
+  --d1-ref-lineHeight-48: 48px;
+  --d1-ref-lineHeight-52: 52px;
+  --d1-ref-lineHeight-60: 60px;
+  --d1-ref-lineHeight-64: 64px;
+  --d1-ref-opacity-0: 0;
+  --d1-ref-opacity-2: 0.02;
+  --d1-ref-opacity-4: 0.04;
+  --d1-ref-opacity-6: 0.06;
+  --d1-ref-opacity-8: 0.08;
+  --d1-ref-opacity-10: 0.10;
+  --d1-ref-opacity-12: 0.12;
+  --d1-ref-opacity-16: 0.16;
+  --d1-ref-opacity-20: 0.20;
+  --d1-ref-opacity-24: 0.24;
+  --d1-ref-opacity-28: 0.28;
+  --d1-ref-opacity-32: 0.32;
+  --d1-ref-opacity-36: 0.36;
+  --d1-ref-opacity-40: 0.40;
+  --d1-ref-opacity-44: 0.44;
+  --d1-ref-opacity-48: 0.48;
+  --d1-ref-opacity-52: 0.52;
+  --d1-ref-opacity-64: 0.64;
+  --d1-ref-opacity-72: 0.72;
+  --d1-ref-opacity-80: 0.80;
+  --d1-ref-opacity-88: 0.88;
+  --d1-ref-opacity-92: 0.92;
+  --d1-ref-opacity-96: 0.96;
+  --d1-ref-opacity-100: 1;
+  --d1-ref-palette-red-50: #{ui.toColorRbg(#fef2f2)};
+  --d1-ref-palette-red-100: #{ui.toColorRbg(#fee2e2)};
+  --d1-ref-palette-red-200: #{ui.toColorRbg(#fecaca)};
+  --d1-ref-palette-red-300: #{ui.toColorRbg(#fca5a5)};
+  --d1-ref-palette-red-400: #{ui.toColorRbg(#f87171)};
+  --d1-ref-palette-red-500: #{ui.toColorRbg(#ef4444)};
+  --d1-ref-palette-red-600: #{ui.toColorRbg(#dc2626)};
+  --d1-ref-palette-red-700: #{ui.toColorRbg(#b91c1c)};
+  --d1-ref-palette-red-800: #{ui.toColorRbg(#991b1b)};
+  --d1-ref-palette-red-900: #{ui.toColorRbg(#7f1d1d)};
+  --d1-ref-palette-red-950: #{ui.toColorRbg(#450a0a)};
+  --d1-ref-palette-orange-50: #{ui.toColorRbg(#fff7ed)};
+  --d1-ref-palette-orange-100: #{ui.toColorRbg(#ffedd5)};
+  --d1-ref-palette-orange-200: #{ui.toColorRbg(#fed7aa)};
+  --d1-ref-palette-orange-300: #{ui.toColorRbg(#fdba74)};
+  --d1-ref-palette-orange-400: #{ui.toColorRbg(#fb923c)};
+  --d1-ref-palette-orange-500: #{ui.toColorRbg(#f97316)};
+  --d1-ref-palette-orange-600: #{ui.toColorRbg(#ea580c)};
+  --d1-ref-palette-orange-700: #{ui.toColorRbg(#c2410c)};
+  --d1-ref-palette-orange-800: #{ui.toColorRbg(#9a3412)};
+  --d1-ref-palette-orange-900: #{ui.toColorRbg(#7c2d12)};
+  --d1-ref-palette-orange-950: #{ui.toColorRbg(#431407)};
+  --d1-ref-palette-amber-50: #{ui.toColorRbg(#fffbeb)};
+  --d1-ref-palette-amber-100: #{ui.toColorRbg(#fef3c7)};
+  --d1-ref-palette-amber-200: #{ui.toColorRbg(#fde68a)};
+  --d1-ref-palette-amber-300: #{ui.toColorRbg(#fcd34d)};
+  --d1-ref-palette-amber-400: #{ui.toColorRbg(#fbbf24)};
+  --d1-ref-palette-amber-500: #{ui.toColorRbg(#f59e0b)};
+  --d1-ref-palette-amber-600: #{ui.toColorRbg(#d97706)};
+  --d1-ref-palette-amber-700: #{ui.toColorRbg(#b45309)};
+  --d1-ref-palette-amber-800: #{ui.toColorRbg(#92400e)};
+  --d1-ref-palette-amber-900: #{ui.toColorRbg(#78350f)};
+  --d1-ref-palette-amber-950: #{ui.toColorRbg(#451a03)};
+  --d1-ref-palette-yellow-50: #{ui.toColorRbg(#fefce8)};
+  --d1-ref-palette-yellow-100: #{ui.toColorRbg(#fef9c3)};
+  --d1-ref-palette-yellow-200: #{ui.toColorRbg(#fef08a)};
+  --d1-ref-palette-yellow-300: #{ui.toColorRbg(#fde047)};
+  --d1-ref-palette-yellow-400: #{ui.toColorRbg(#facc15)};
+  --d1-ref-palette-yellow-500: #{ui.toColorRbg(#eab308)};
+  --d1-ref-palette-yellow-600: #{ui.toColorRbg(#ca8a04)};
+  --d1-ref-palette-yellow-700: #{ui.toColorRbg(#a16207)};
+  --d1-ref-palette-yellow-800: #{ui.toColorRbg(#854d0e)};
+  --d1-ref-palette-yellow-900: #{ui.toColorRbg(#713f12)};
+  --d1-ref-palette-yellow-950: #{ui.toColorRbg(#422006)};
+  --d1-ref-palette-lime-50: #{ui.toColorRbg(#f7fee7)};
+  --d1-ref-palette-lime-100: #{ui.toColorRbg(#ecfccb)};
+  --d1-ref-palette-lime-200: #{ui.toColorRbg(#d9f99d)};
+  --d1-ref-palette-lime-300: #{ui.toColorRbg(#bef264)};
+  --d1-ref-palette-lime-400: #{ui.toColorRbg(#a3e635)};
+  --d1-ref-palette-lime-500: #{ui.toColorRbg(#84cc16)};
+  --d1-ref-palette-lime-600: #{ui.toColorRbg(#65a30d)};
+  --d1-ref-palette-lime-700: #{ui.toColorRbg(#4d7c0f)};
+  --d1-ref-palette-lime-800: #{ui.toColorRbg(#3f6212)};
+  --d1-ref-palette-lime-900: #{ui.toColorRbg(#365314)};
+  --d1-ref-palette-lime-950: #{ui.toColorRbg(#1a2e05)};
+  --d1-ref-palette-green-50: #{ui.toColorRbg(#f0fdf4)};
+  --d1-ref-palette-green-100: #{ui.toColorRbg(#dcfce7)};
+  --d1-ref-palette-green-200: #{ui.toColorRbg(#bbf7d0)};
+  --d1-ref-palette-green-300: #{ui.toColorRbg(#86efac)};
+  --d1-ref-palette-green-400: #{ui.toColorRbg(#4ade80)};
+  --d1-ref-palette-green-500: #{ui.toColorRbg(#22c55e)};
+  --d1-ref-palette-green-600: #{ui.toColorRbg(#16a34a)};
+  --d1-ref-palette-green-700: #{ui.toColorRbg(#15803d)};
+  --d1-ref-palette-green-800: #{ui.toColorRbg(#166534)};
+  --d1-ref-palette-green-900: #{ui.toColorRbg(#14532d)};
+  --d1-ref-palette-green-950: #{ui.toColorRbg(#052e16)};
+  --d1-ref-palette-emerald-50: #{ui.toColorRbg(#ecfdf5)};
+  --d1-ref-palette-emerald-100: #{ui.toColorRbg(#d1fae5)};
+  --d1-ref-palette-emerald-200: #{ui.toColorRbg(#a7f3d0)};
+  --d1-ref-palette-emerald-300: #{ui.toColorRbg(#6ee7b7)};
+  --d1-ref-palette-emerald-400: #{ui.toColorRbg(#34d399)};
+  --d1-ref-palette-emerald-500: #{ui.toColorRbg(#10b981)};
+  --d1-ref-palette-emerald-600: #{ui.toColorRbg(#059669)};
+  --d1-ref-palette-emerald-700: #{ui.toColorRbg(#047857)};
+  --d1-ref-palette-emerald-800: #{ui.toColorRbg(#065f46)};
+  --d1-ref-palette-emerald-900: #{ui.toColorRbg(#064e3b)};
+  --d1-ref-palette-emerald-950: #{ui.toColorRbg(#022c22)};
+  --d1-ref-palette-teal-50: #{ui.toColorRbg(#f0fdfa)};
+  --d1-ref-palette-teal-100: #{ui.toColorRbg(#ccfbf1)};
+  --d1-ref-palette-teal-200: #{ui.toColorRbg(#99f6e4)};
+  --d1-ref-palette-teal-300: #{ui.toColorRbg(#5eead4)};
+  --d1-ref-palette-teal-400: #{ui.toColorRbg(#2dd4bf)};
+  --d1-ref-palette-teal-500: #{ui.toColorRbg(#14b8a6)};
+  --d1-ref-palette-teal-600: #{ui.toColorRbg(#0d9488)};
+  --d1-ref-palette-teal-700: #{ui.toColorRbg(#0f766e)};
+  --d1-ref-palette-teal-800: #{ui.toColorRbg(#115e59)};
+  --d1-ref-palette-teal-900: #{ui.toColorRbg(#134e4a)};
+  --d1-ref-palette-teal-950: #{ui.toColorRbg(#042f2e)};
+  --d1-ref-palette-cyan-50: #{ui.toColorRbg(#ecfeff)};
+  --d1-ref-palette-cyan-100: #{ui.toColorRbg(#cffafe)};
+  --d1-ref-palette-cyan-200: #{ui.toColorRbg(#a5f3fc)};
+  --d1-ref-palette-cyan-300: #{ui.toColorRbg(#67e8f9)};
+  --d1-ref-palette-cyan-400: #{ui.toColorRbg(#22d3ee)};
+  --d1-ref-palette-cyan-500: #{ui.toColorRbg(#06b6d4)};
+  --d1-ref-palette-cyan-600: #{ui.toColorRbg(#0891b2)};
+  --d1-ref-palette-cyan-700: #{ui.toColorRbg(#0e7490)};
+  --d1-ref-palette-cyan-800: #{ui.toColorRbg(#155e75)};
+  --d1-ref-palette-cyan-900: #{ui.toColorRbg(#164e63)};
+  --d1-ref-palette-cyan-950: #{ui.toColorRbg(#083344)};
+  --d1-ref-palette-sky-50: #{ui.toColorRbg(#f0f9ff)};
+  --d1-ref-palette-sky-100: #{ui.toColorRbg(#e0f2fe)};
+  --d1-ref-palette-sky-200: #{ui.toColorRbg(#bae6fd)};
+  --d1-ref-palette-sky-300: #{ui.toColorRbg(#7dd3fc)};
+  --d1-ref-palette-sky-400: #{ui.toColorRbg(#38bdf8)};
+  --d1-ref-palette-sky-500: #{ui.toColorRbg(#0ea5e9)};
+  --d1-ref-palette-sky-600: #{ui.toColorRbg(#0284c7)};
+  --d1-ref-palette-sky-700: #{ui.toColorRbg(#0369a1)};
+  --d1-ref-palette-sky-800: #{ui.toColorRbg(#075985)};
+  --d1-ref-palette-sky-900: #{ui.toColorRbg(#0c4a6e)};
+  --d1-ref-palette-sky-950: #{ui.toColorRbg(#082f49)};
+  --d1-ref-palette-blue-50: #{ui.toColorRbg(#eff6ff)};
+  --d1-ref-palette-blue-100: #{ui.toColorRbg(#dbeafe)};
+  --d1-ref-palette-blue-200: #{ui.toColorRbg(#bfdbfe)};
+  --d1-ref-palette-blue-300: #{ui.toColorRbg(#93c5fd)};
+  --d1-ref-palette-blue-400: #{ui.toColorRbg(#60a5fa)};
+  --d1-ref-palette-blue-500: #{ui.toColorRbg(#3b82f6)};
+  --d1-ref-palette-blue-600: #{ui.toColorRbg(#2563eb)};
+  --d1-ref-palette-blue-700: #{ui.toColorRbg(#1d4ed8)};
+  --d1-ref-palette-blue-800: #{ui.toColorRbg(#1e40af)};
+  --d1-ref-palette-blue-900: #{ui.toColorRbg(#1e3a8a)};
+  --d1-ref-palette-blue-950: #{ui.toColorRbg(#172554)};
+  --d1-ref-palette-indigo-50: #{ui.toColorRbg(#eef2ff)};
+  --d1-ref-palette-indigo-100: #{ui.toColorRbg(#e0e7ff)};
+  --d1-ref-palette-indigo-200: #{ui.toColorRbg(#c7d2fe)};
+  --d1-ref-palette-indigo-300: #{ui.toColorRbg(#a5b4fc)};
+  --d1-ref-palette-indigo-400: #{ui.toColorRbg(#818cf8)};
+  --d1-ref-palette-indigo-500: #{ui.toColorRbg(#6366f1)};
+  --d1-ref-palette-indigo-600: #{ui.toColorRbg(#4f46e5)};
+  --d1-ref-palette-indigo-700: #{ui.toColorRbg(#4338ca)};
+  --d1-ref-palette-indigo-800: #{ui.toColorRbg(#3730a3)};
+  --d1-ref-palette-indigo-900: #{ui.toColorRbg(#312e81)};
+  --d1-ref-palette-indigo-950: #{ui.toColorRbg(#1e1b4b)};
+  --d1-ref-palette-violet-50: #{ui.toColorRbg(#f5f3ff)};
+  --d1-ref-palette-violet-100: #{ui.toColorRbg(#ede9fe)};
+  --d1-ref-palette-violet-200: #{ui.toColorRbg(#ddd6fe)};
+  --d1-ref-palette-violet-300: #{ui.toColorRbg(#c4b5fd)};
+  --d1-ref-palette-violet-400: #{ui.toColorRbg(#a78bfa)};
+  --d1-ref-palette-violet-500: #{ui.toColorRbg(#8b5cf6)};
+  --d1-ref-palette-violet-600: #{ui.toColorRbg(#7c3aed)};
+  --d1-ref-palette-violet-700: #{ui.toColorRbg(#6d28d9)};
+  --d1-ref-palette-violet-800: #{ui.toColorRbg(#5b21b6)};
+  --d1-ref-palette-violet-900: #{ui.toColorRbg(#4c1d95)};
+  --d1-ref-palette-violet-950: #{ui.toColorRbg(#2e1065)};
+  --d1-ref-palette-purple-50: #{ui.toColorRbg(#faf5ff)};
+  --d1-ref-palette-purple-100: #{ui.toColorRbg(#f3e8ff)};
+  --d1-ref-palette-purple-200: #{ui.toColorRbg(#e9d5ff)};
+  --d1-ref-palette-purple-300: #{ui.toColorRbg(#d8b4fe)};
+  --d1-ref-palette-purple-400: #{ui.toColorRbg(#c084fc)};
+  --d1-ref-palette-purple-500: #{ui.toColorRbg(#a855f7)};
+  --d1-ref-palette-purple-600: #{ui.toColorRbg(#9333ea)};
+  --d1-ref-palette-purple-700: #{ui.toColorRbg(#7e22ce)};
+  --d1-ref-palette-purple-800: #{ui.toColorRbg(#6b21a8)};
+  --d1-ref-palette-purple-900: #{ui.toColorRbg(#581c87)};
+  --d1-ref-palette-purple-950: #{ui.toColorRbg(#3b0764)};
+  --d1-ref-palette-fuchsia-50: #{ui.toColorRbg(#fdf4ff)};
+  --d1-ref-palette-fuchsia-100: #{ui.toColorRbg(#fae8ff)};
+  --d1-ref-palette-fuchsia-200: #{ui.toColorRbg(#f5d0fe)};
+  --d1-ref-palette-fuchsia-300: #{ui.toColorRbg(#f0abfc)};
+  --d1-ref-palette-fuchsia-400: #{ui.toColorRbg(#e879f9)};
+  --d1-ref-palette-fuchsia-500: #{ui.toColorRbg(#d946ef)};
+  --d1-ref-palette-fuchsia-600: #{ui.toColorRbg(#c026d3)};
+  --d1-ref-palette-fuchsia-700: #{ui.toColorRbg(#a21caf)};
+  --d1-ref-palette-fuchsia-800: #{ui.toColorRbg(#86198f)};
+  --d1-ref-palette-fuchsia-900: #{ui.toColorRbg(#701a75)};
+  --d1-ref-palette-fuchsia-950: #{ui.toColorRbg(#4a044e)};
+  --d1-ref-palette-pink-50: #{ui.toColorRbg(#fdf2f8)};
+  --d1-ref-palette-pink-100: #{ui.toColorRbg(#fce7f3)};
+  --d1-ref-palette-pink-200: #{ui.toColorRbg(#fbcfe8)};
+  --d1-ref-palette-pink-300: #{ui.toColorRbg(#f9a8d4)};
+  --d1-ref-palette-pink-400: #{ui.toColorRbg(#f472b6)};
+  --d1-ref-palette-pink-500: #{ui.toColorRbg(#ec4899)};
+  --d1-ref-palette-pink-600: #{ui.toColorRbg(#db2777)};
+  --d1-ref-palette-pink-700: #{ui.toColorRbg(#be185d)};
+  --d1-ref-palette-pink-800: #{ui.toColorRbg(#9d174d)};
+  --d1-ref-palette-pink-900: #{ui.toColorRbg(#831843)};
+  --d1-ref-palette-pink-950: #{ui.toColorRbg(#500724)};
+  --d1-ref-palette-rose-50: #{ui.toColorRbg(#fff1f2)};
+  --d1-ref-palette-rose-100: #{ui.toColorRbg(#ffe4e6)};
+  --d1-ref-palette-rose-200: #{ui.toColorRbg(#fecdd3)};
+  --d1-ref-palette-rose-300: #{ui.toColorRbg(#fda4af)};
+  --d1-ref-palette-rose-400: #{ui.toColorRbg(#fb7185)};
+  --d1-ref-palette-rose-500: #{ui.toColorRbg(#f43f5e)};
+  --d1-ref-palette-rose-600: #{ui.toColorRbg(#e11d48)};
+  --d1-ref-palette-rose-700: #{ui.toColorRbg(#be123c)};
+  --d1-ref-palette-rose-800: #{ui.toColorRbg(#9f1239)};
+  --d1-ref-palette-rose-900: #{ui.toColorRbg(#881337)};
+  --d1-ref-palette-rose-950: #{ui.toColorRbg(#4c0519)};
+  --d1-ref-palette-slate-50: #{ui.toColorRbg(#f8fafc)};
+  --d1-ref-palette-slate-100: #{ui.toColorRbg(#f1f5f9)};
+  --d1-ref-palette-slate-200: #{ui.toColorRbg(#e2e8f0)};
+  --d1-ref-palette-slate-300: #{ui.toColorRbg(#cbd5e1)};
+  --d1-ref-palette-slate-400: #{ui.toColorRbg(#94a3b8)};
+  --d1-ref-palette-slate-500: #{ui.toColorRbg(#64748b)};
+  --d1-ref-palette-slate-600: #{ui.toColorRbg(#475569)};
+  --d1-ref-palette-slate-700: #{ui.toColorRbg(#334155)};
+  --d1-ref-palette-slate-800: #{ui.toColorRbg(#1e293b)};
+  --d1-ref-palette-slate-900: #{ui.toColorRbg(#0f172a)};
+  --d1-ref-palette-slate-950: #{ui.toColorRbg(#020617)};
+  --d1-ref-palette-gray-50: #{ui.toColorRbg(#f9fafb)};
+  --d1-ref-palette-gray-100: #{ui.toColorRbg(#f3f4f6)};
+  --d1-ref-palette-gray-200: #{ui.toColorRbg(#e5e7eb)};
+  --d1-ref-palette-gray-300: #{ui.toColorRbg(#d1d5db)};
+  --d1-ref-palette-gray-400: #{ui.toColorRbg(#9ca3af)};
+  --d1-ref-palette-gray-500: #{ui.toColorRbg(#6b7280)};
+  --d1-ref-palette-gray-600: #{ui.toColorRbg(#4b5563)};
+  --d1-ref-palette-gray-700: #{ui.toColorRbg(#374151)};
+  --d1-ref-palette-gray-800: #{ui.toColorRbg(#1f2937)};
+  --d1-ref-palette-gray-900: #{ui.toColorRbg(#111827)};
+  --d1-ref-palette-gray-950: #{ui.toColorRbg(#030712)};
+  --d1-ref-palette-zinc-50: #{ui.toColorRbg(#fafafa)};
+  --d1-ref-palette-zinc-100: #{ui.toColorRbg(#f4f4f5)};
+  --d1-ref-palette-zinc-200: #{ui.toColorRbg(#e4e4e7)};
+  --d1-ref-palette-zinc-300: #{ui.toColorRbg(#d4d4d8)};
+  --d1-ref-palette-zinc-400: #{ui.toColorRbg(#a1a1aa)};
+  --d1-ref-palette-zinc-500: #{ui.toColorRbg(#71717a)};
+  --d1-ref-palette-zinc-600: #{ui.toColorRbg(#52525b)};
+  --d1-ref-palette-zinc-700: #{ui.toColorRbg(#3f3f46)};
+  --d1-ref-palette-zinc-800: #{ui.toColorRbg(#27272a)};
+  --d1-ref-palette-zinc-900: #{ui.toColorRbg(#18181b)};
+  --d1-ref-palette-zinc-950: #{ui.toColorRbg(#09090b)};
+  --d1-ref-palette-neutral-50: #{ui.toColorRbg(#fafafa)};
+  --d1-ref-palette-neutral-100: #{ui.toColorRbg(#f5f5f5)};
+  --d1-ref-palette-neutral-200: #{ui.toColorRbg(#e5e5e5)};
+  --d1-ref-palette-neutral-300: #{ui.toColorRbg(#d4d4d4)};
+  --d1-ref-palette-neutral-400: #{ui.toColorRbg(#a3a3a3)};
+  --d1-ref-palette-neutral-500: #{ui.toColorRbg(#737373)};
+  --d1-ref-palette-neutral-600: #{ui.toColorRbg(#525252)};
+  --d1-ref-palette-neutral-700: #{ui.toColorRbg(#404040)};
+  --d1-ref-palette-neutral-800: #{ui.toColorRbg(#262626)};
+  --d1-ref-palette-neutral-900: #{ui.toColorRbg(#171717)};
+  --d1-ref-palette-neutral-950: #{ui.toColorRbg(#0a0a0a)};
+  --d1-ref-palette-stone-50: #{ui.toColorRbg(#fafaf9)};
+  --d1-ref-palette-stone-100: #{ui.toColorRbg(#f5f5f4)};
+  --d1-ref-palette-stone-200: #{ui.toColorRbg(#e7e5e4)};
+  --d1-ref-palette-stone-300: #{ui.toColorRbg(#d6d3d1)};
+  --d1-ref-palette-stone-400: #{ui.toColorRbg(#a8a29e)};
+  --d1-ref-palette-stone-500: #{ui.toColorRbg(#78716c)};
+  --d1-ref-palette-stone-600: #{ui.toColorRbg(#57534e)};
+  --d1-ref-palette-stone-700: #{ui.toColorRbg(#44403c)};
+  --d1-ref-palette-stone-800: #{ui.toColorRbg(#292524)};
+  --d1-ref-palette-stone-900: #{ui.toColorRbg(#1c1917)};
+  --d1-ref-palette-stone-950: #{ui.toColorRbg(#0c0a09)};
+  --d1-ref-palette-black-50: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-100: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-200: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-300: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-400: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-500: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-600: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-700: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-800: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-900: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-black-950: #{ui.toColorRbg(#000)};
+  --d1-ref-palette-white-50: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-100: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-200: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-300: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-400: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-500: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-600: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-700: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-800: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-900: #{ui.toColorRbg(#fff)};
+  --d1-ref-palette-white-950: #{ui.toColorRbg(#fff)};
+  --d1-ref-screen-sm: 640px;
+  --d1-ref-screen-md: 768px;
+  --d1-ref-screen-lg: 1024px;
+  --d1-ref-screen-xl: 1280px;
+  --d1-ref-screen-2xl: 1536px;
+  --d1-ref-shade-50: 50;
+  --d1-ref-shade-100: 100;
+  --d1-ref-shade-200: 200;
+  --d1-ref-shade-300: 300;
+  --d1-ref-shade-400: 400;
+  --d1-ref-shade-500: 500;
+  --d1-ref-shade-600: 600;
+  --d1-ref-shade-700: 700;
+  --d1-ref-shade-800: 800;
+  --d1-ref-shade-900: 900;
+  --d1-ref-shade-950: 950;
+  --d1-ref-shadow-0: none;
+  --d1-ref-shadow-1: 0px 1px rgba(15, 23, 43, 0.05);
+  --d1-ref-shadow-2: 0px 1px 2px 0px rgba(15, 23, 43, 0.05);
+  --d1-ref-shadow-3: 0px 1px 3px 0px rgba(15, 23, 43, 0.1), 0px 1px 2px -1px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-4: 0px 4px 6px -1px rgba(15, 23, 43, 0.1), 0px 2px 4px -2px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-5: 0px 10px 15px -3px rgba(15, 23, 43, 0.1), 0px 4px 6px -4px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-6: 0px 20px 25px -5px rgba(15, 23, 43, 0.1), 0px 8px 10px -6px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-7: 0px 25px 50px -12px rgba(15, 23, 43, 0.25);
+  --d1-ref-shadow-dark-1: 0px 1px rgba(15, 23, 43, 0.05);
+  --d1-ref-shadow-dark-2: 0px 1px 2px 0px rgba(15, 23, 43, 0.05);
+  --d1-ref-shadow-dark-3: 0px 1px 3px 0px rgba(15, 23, 43, 0.1), 0px 1px 2px -1px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-dark-4: 0px 4px 6px -1px rgba(15, 23, 43, 0.1), 0px 2px 4px -2px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-dark-5: 0px 10px 15px -3px rgba(15, 23, 43, 0.1), 0px 4px 6px -4px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-dark-6: 0px 20px 25px -5px rgba(15, 23, 43, 0.1), 0px 8px 10px -6px rgba(15, 23, 43, 0.1);
+  --d1-ref-shadow-dark-7: 0px 25px 50px -12px rgba(15, 23, 43, 0.25);
+  --d1-ref-spacing-0: 0;
+  --d1-ref-spacing-1: .25rem;
+  --d1-ref-spacing-2: 0.5rem;
+  --d1-ref-spacing-3: 0.75rem;
+  --d1-ref-spacing-4: 1rem;
+  --d1-ref-spacing-5: 1.25rem;
+  --d1-ref-spacing-6: 1.5rem;
+  --d1-ref-spacing-7: 1.75rem;
+  --d1-ref-spacing-8: 2rem;
+  --d1-ref-spacing-9: 2.25rem;
+  --d1-ref-spacing-10: 2.5rem;
+  --d1-ref-spacing-11: 2.75rem;
+  --d1-ref-spacing-12: 3rem;
+  --d1-ref-spacing-13: 3.25rem;
+  --d1-ref-spacing-14: 3.5rem;
+  --d1-ref-spacing-15: 3.75rem;
+  --d1-ref-spacing-16: 4rem;
+  --d1-ref-spacing-17: 4.25rem;
+  --d1-ref-spacing-18: 4.5rem;
+  --d1-ref-spacing-19: 4.75rem;
+  --d1-ref-spacing-20: 5rem;
+  --d1-ref-spacing-21: 5.25rem;
+  --d1-ref-spacing-22: 5.5rem;
+  --d1-ref-spacing-23: 5.75rem;
+  --d1-ref-spacing-24: 6rem;
+  --d1-ref-spacing-25: 6.25rem;
+  --d1-ref-spacing-26: 6.5rem;
+  --d1-ref-spacing-27: 6.75rem;
+  --d1-ref-spacing-28: 7rem;
+  --d1-ref-spacing-32: 8rem;
+  --d1-ref-spacing-36: 9rem;
+  --d1-ref-spacing-40: 10rem;
+  --d1-ref-spacing-44: 11rem;
+  --d1-ref-spacing-48: 12rem;
+  --d1-ref-spacing-52: 13rem;
+  --d1-ref-spacing-56: 14rem;
+  --d1-ref-spacing-60: 15rem;
+  --d1-ref-spacing-64: 16rem;
+  --d1-ref-spacing-68: 17rem;
+  --d1-ref-spacing-72: 18rem;
+  --d1-ref-spacing-76: 19rem;
+  --d1-ref-spacing-80: 20rem;
+  --d1-ref-spacing-84: 21rem;
+  --d1-ref-spacing-88: 22rem;
+  --d1-ref-spacing-92: 23rem;
+  --d1-ref-spacing-96: 24rem;
+  --d1-ref-spacing-128: 32rem;
+  --d1-ref-spacing-160: 40rem;
+  --d1-ref-spacing-192: 48rem;
+  --d1-ref-spacing-256: 64rem;
+  --d1-ref-spacing-384: 96rem;
+  --d1-ref-spacing-512: 128rem;
+  --d1-ref-spacing-640: 160rem;
+  --d1-ref-spacing-768: 192rem;
+  --d1-ref-spacing-896: 224rem;
+  --d1-ref-spacing-1024: 256rem;
+  --d1-ref-spacing-1280: 320rem;
+  --d1-ref-spacing-1536: 384rem;
+  --d1-ref-spacing-2048: 512rem;
+  --d1-ref-spacing-2560: 640rem;
+  --d1-ref-spacing-3072: 768rem;
+  --d1-ref-spacing-3584: 896rem;
+  --d1-ref-spacing-4096: 1024rem;
+  --d1-ref-spacing-px: 1px;
+  --d1-ref-spacing-2px: 2px;
+  --d1-ref-spacing-4px: 4px;
+  --d1-ref-spacing-6px: 6px;
+  --d1-ref-spacing-8px: 8px;
+  --d1-ref-spacing-10px: 10px;
+  --d1-ref-spacing-12px: 12px;
+  --d1-ref-spacing-16px: 16px;
+  --d1-ref-spacing-20px: 20px;
+  --d1-ref-spacing-24px: 24px;
+  --d1-sys-background-0: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-background-1: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-background-2: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-background-3: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-background-4: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-background-5: rgb(var(--d1-ref-palette-white-50));
+  --d1-sys-blur-none: var(--d1-ref-blur-0);
+  --d1-sys-blur-x: var(--d1-ref-blur-4);
+  --d1-sys-blur-xs: var(--d1-ref-blur-8);
+  --d1-sys-blur-sm: var(--d1-ref-blur-24);
+  --d1-sys-blur-md: var(--d1-ref-blur-48);
+  --d1-sys-blur-lg: var(--d1-ref-blur-64);
+  --d1-sys-blur-xl: var(--d1-ref-blur-80);
+  --d1-sys-font-family-basic: var(--d1-ref-font-family-roboto);
+  --d1-sys-font-size-x: var(--d1-ref-font-size-11);
+  --d1-sys-font-size-xs: var(--d1-ref-font-size-12);
+  --d1-sys-font-size-sm: var(--d1-ref-font-size-14);
+  --d1-sys-font-size-md: var(--d1-ref-font-size-16);
+  --d1-sys-font-size-lg: var(--d1-ref-font-size-22);
+  --d1-sys-font-size-xl: var(--d1-ref-font-size-24);
+  --d1-sys-font-size-headlineSmall: var(--d1-ref-font-size-24);
+  --d1-sys-font-size-headlineMedium: var(--d1-ref-font-size-28);
+  --d1-sys-font-size-headlineLarge: var(--d1-ref-font-size-32);
+  --d1-sys-font-size-displaySmall: var(--d1-ref-font-size-36);
+  --d1-sys-font-size-displayMedium: var(--d1-ref-font-size-45);
+  --d1-sys-font-size-displayLarge: var(--d1-ref-font-size-57);
+  --d1-sys-font-weight-regular: var(--d1-ref-font-weight-400);
+  --d1-sys-font-weight-medium: var(--d1-ref-font-weight-500);
+  --d1-sys-font-weight-bold: var(--d1-ref-font-weight-600);
+  --d1-sys-index-none: var(--d1-ref-index-0);
+  --d1-sys-index-xs: var(--d1-ref-index-2);
+  --d1-sys-index-sm: var(--d1-ref-index-3);
+  --d1-sys-index-md: var(--d1-ref-index-5);
+  --d1-sys-index-lg: var(--d1-ref-index-7);
+  --d1-sys-index-xl: var(--d1-ref-index-8);
+  --d1-sys-index-2xl: var(--d1-ref-index-9);
+  --d1-sys-letterSpacing-none: var(--d1-ref-letterSpacing-0);
+  --d1-sys-letterSpacing-xs: var(--d1-ref-letterSpacing-10);
+  --d1-sys-letterSpacing-sm: var(--d1-ref-letterSpacing-15);
+  --d1-sys-letterSpacing-md: var(--d1-ref-letterSpacing-25);
+  --d1-sys-letterSpacing-lg: var(--d1-ref-letterSpacing-40);
+  --d1-sys-letterSpacing-xl: var(--d1-ref-letterSpacing-50);
+  --d1-sys-letterSpacing-compress: var(--d1-ref-letterSpacing-m25);
+  --d1-sys-lineHeight-xs: var(--d1-ref-lineHeight-16);
+  --d1-sys-lineHeight-sm: var(--d1-ref-lineHeight-20);
+  --d1-sys-lineHeight-md: var(--d1-ref-lineHeight-24);
+  --d1-sys-lineHeight-lg: var(--d1-ref-lineHeight-28);
+  --d1-sys-lineHeight-headlineSmall: var(--d1-ref-lineHeight-32);
+  --d1-sys-lineHeight-headlineMedium: var(--d1-ref-lineHeight-36);
+  --d1-sys-lineHeight-headlineLarge: var(--d1-ref-lineHeight-40);
+  --d1-sys-lineHeight-displaySmall: var(--d1-ref-lineHeight-44);
+  --d1-sys-lineHeight-displayMedium: var(--d1-ref-lineHeight-52);
+  --d1-sys-lineHeight-displayLarge: var(--d1-ref-lineHeight-64);
+  --d1-sys-opacity-focus: var(--d1-ref-opacity-12);
+  --d1-sys-opacity-hover: var(--d1-ref-opacity-4);
+  --d1-sys-opacity-pressed: var(--d1-ref-opacity-10);
+  --d1-sys-opacity-dragged: var(--d1-ref-opacity-8);
+  --d1-sys-opacity-overlay: var(--d1-ref-opacity-8);
+  --d1-sys-opacity-selected: var(--d1-ref-opacity-8);
+  --d1-sys-opacity-disabled: var(--d1-ref-opacity-12);
+  --d1-sys-opacity-outline: var(--d1-ref-opacity-12);
+  --d1-sys-opacity-outlineMedium: var(--d1-ref-opacity-4);
+  --d1-sys-opacity-scrim: var(--d1-ref-opacity-32);
+  --d1-sys-opacity-primary-high: var(--d1-ref-opacity-92);
+  --d1-sys-opacity-primary-medium: var(--d1-ref-opacity-72);
+  --d1-sys-opacity-primary-disabled: var(--d1-ref-opacity-36);
+  --d1-sys-opacity-surface-high: var(--d1-ref-opacity-80);
+  --d1-sys-opacity-surface-medium: var(--d1-ref-opacity-64);
+  --d1-sys-opacity-surface-disabled: var(--d1-ref-opacity-36);
+  --d1-sys-palette-primary: var(--d1-ref-palette-blue-600);
+  --d1-sys-palette-primaryVariant: var(--d1-ref-palette-blue-800);
+  --d1-sys-palette-warning: var(--d1-ref-palette-yellow-600);
+  --d1-sys-palette-success: var(--d1-ref-palette-green-600);
+  --d1-sys-palette-error: var(--d1-ref-palette-red-600);
+  --d1-sys-palette-surface: var(--d1-ref-palette-white-50);
+  --d1-sys-palette-onPrimary: var(--d1-ref-palette-slate-50);
+  --d1-sys-palette-onSurface: var(--d1-ref-palette-slate-950);
+  --d1-sys-palette-outline: var(--d1-ref-palette-slate-800);
+  --d1-sys-palette-outlineVariant: var(--d1-ref-palette-slate-950);
+  --d1-sys-palette-scrim: var(--d1-ref-palette-slate-950);
+  --d1-sys-palette-inversePrimary: var(--d1-ref-palette-blue-200);
+  --d1-sys-palette-inversePrimaryVariant: var(--d1-ref-palette-blue-400);
+  --d1-sys-palette-inverseSurface: var(--d1-ref-palette-slate-800);
+  --d1-sys-palette-inverseOnPrimary: var(--d1-ref-palette-slate-950);
+  --d1-sys-palette-inverseOnSurface: var(--d1-ref-palette-slate-50);
+  --d1-sys-palette-shadow: var(--d1-ref-palette-neutral-950);
+  --d1-sys-rounded-none: var(--d1-ref-spacing-0);
+  --d1-sys-rounded-xs: var(--d1-ref-spacing-2px);
+  --d1-sys-rounded-sm: var(--d1-ref-spacing-4px);
+  --d1-sys-rounded-md: var(--d1-ref-spacing-6px);
+  --d1-sys-rounded-lg: var(--d1-ref-spacing-8px);
+  --d1-sys-rounded-xl: var(--d1-ref-spacing-4);
+  --d1-sys-rounded-2xl: var(--d1-ref-spacing-6);
+  --d1-sys-rounded-full: var(--d1-ref-spacing-32);
+  --d1-sys-rounded-adaptive-sm: .12;
+  --d1-sys-rounded-adaptive-md: .24;
+  --d1-sys-rounded-adaptive-lg: .32;
+  --d1-sys-rounded-adaptive-xl: .48;
+  --d1-sys-shade-primary: var(--d1-ref-shade-600);
+  --d1-sys-shade-primaryVariant: var(--d1-ref-shade-800);
+  --d1-sys-shade-surface: var(--d1-ref-shade-50);
+  --d1-sys-shade-onPrimary: var(--d1-ref-shade-50);
+  --d1-sys-shade-onSurface: var(--d1-ref-shade-950);
+  --d1-sys-shade-outline: var(--d1-ref-shade-800);
+  --d1-sys-shade-outlineVariant: var(--d1-ref-shade-950);
+  --d1-sys-shade-scrim: var(--d1-ref-shade-950);
+  --d1-sys-shade-inversePrimary: var(--d1-ref-shade-200);
+  --d1-sys-shade-inversePrimaryVariant: var(--d1-ref-shade-400);
+  --d1-sys-shade-inverseSurface: var(--d1-ref-shade-800);
+  --d1-sys-shade-inverseOnPrimary: var(--d1-ref-shade-950);
+  --d1-sys-shade-inverseOnSurface: var(--d1-ref-shade-50);
+  --d1-sys-shade-shadow: var(--d1-ref-shade-950);
+  --d1-sys-shade-dark-primary: var(--d1-ref-shade-200);
+  --d1-sys-shade-dark-primaryVariant: var(--d1-ref-shade-400);
+  --d1-sys-shade-dark-surface: var(--d1-ref-shade-800);
+  --d1-sys-shade-dark-onPrimary: var(--d1-ref-shade-950);
+  --d1-sys-shade-dark-onSurface: var(--d1-ref-shade-50);
+  --d1-sys-shade-dark-outline: var(--d1-ref-shade-200);
+  --d1-sys-shade-dark-outlineVariant: var(--d1-ref-shade-400);
+  --d1-sys-shade-dark-scrim: var(--d1-ref-shade-50);
+  --d1-sys-shade-dark-inversePrimary: var(--d1-ref-shade-600);
+  --d1-sys-shade-dark-inversePrimaryVariant: var(--d1-ref-shade-800);
+  --d1-sys-shade-dark-inverseSurface: var(--d1-ref-shade-200);
+  --d1-sys-shade-dark-inverseOnPrimary: var(--d1-ref-shade-50);
+  --d1-sys-shade-dark-inverseOnSurface: var(--d1-ref-shade-950);
+  --d1-sys-shade-dark-shadow: var(--d1-ref-shade-700);
+  --d1-sys-shadow-none: var(--d1-ref-shadow-0);
+  --d1-sys-shadow-xs: var(--d1-ref-shadow-2);
+  --d1-sys-shadow-sm: var(--d1-ref-shadow-3);
+  --d1-sys-shadow-md: var(--d1-ref-shadow-4);
+  --d1-sys-shadow-lg: var(--d1-ref-shadow-5);
+  --d1-sys-shadow-xl: var(--d1-ref-shadow-6);
+  --d1-sys-shadow-2xl: var(--d1-ref-shadow-7);
+  --d1-sys-spacing-x: var(--d1-ref-spacing-1);
+  --d1-sys-spacing-xs: var(--d1-ref-spacing-2);
+  --d1-sys-spacing-sm: var(--d1-ref-spacing-3);
+  --d1-sys-spacing-md: var(--d1-ref-spacing-4);
+  --d1-sys-spacing-lg: var(--d1-ref-spacing-5);
+  --d1-sys-spacing-xl: var(--d1-ref-spacing-6);
+  --d1-sys-spacing-outline: var(--d1-ref-spacing-px);
+  --d1-sys-spacing-grid-paddingX-md: var(--d1-ref-spacing-2);
+  --d1-sys-spacing-grid-paddingX-lg: var(--d1-ref-spacing-3);
+  --d1-sys-spacing-grid-paddingY: var(--d1-ref-spacing-2);
+  --d1-sys-spacing-grid-gapX-md: var(--d1-ref-spacing-4);
+  --d1-sys-spacing-grid-gapX-lg: var(--d1-ref-spacing-6);
+  --d1-sys-spacing-grid-gapY-md: var(--d1-ref-spacing-6);
+  --d1-sys-spacing-grid-gapY-lg: var(--d1-ref-spacing-8);
+  --d1-sys-spacing-block-x: var(--d1-ref-spacing-1);
+  --d1-sys-spacing-block-xs: var(--d1-ref-spacing-2);
+  --d1-sys-spacing-block-sm: var(--d1-ref-spacing-4);
+  --d1-sys-spacing-block-md: var(--d1-ref-spacing-6);
+  --d1-sys-spacing-block-lg: var(--d1-ref-spacing-8);
+  --d1-sys-spacing-block-xl: var(--d1-ref-spacing-10);
+  --d1-sys-spacing-size-xs: var(--d1-ref-spacing-4);
+  --d1-sys-spacing-size-sm: var(--d1-ref-spacing-6);
+  --d1-sys-spacing-size-md: var(--d1-ref-spacing-10);
+  --d1-sys-spacing-size-lg: var(--d1-ref-spacing-12);
+  --d1-sys-spacing-size-xl: var(--d1-ref-spacing-14);
+  --d1-sys-spacing-size-2xl: var(--d1-ref-spacing-16);
+  --d1-sys-spacing-size-3xl: var(--d1-ref-spacing-18);
+  --d1-sys-spacing-size-4xl: var(--d1-ref-spacing-20);
+  --d1-sys-spacing-size-5xl: var(--d1-ref-spacing-22);
+  --d1-sys-spacing-size-6xl: var(--d1-ref-spacing-24);
+  --d1-sys-spacing-adaptive-sm: .2;
+  --d1-sys-spacing-adaptive-md: .4;
+  --d1-sys-spacing-adaptive-lg: .6;
+  --d-ref-transitionDuration-1: 45ms;
+  --d-ref-transitionDuration-2: 75ms;
+  --d-ref-transitionDuration-3: 100ms;
+  --d-ref-transitionDuration-4: 150ms;
+  --d-ref-transitionDuration-5: 200ms;
+  --d-ref-transitionDuration-6: 250ms;
+  --d-ref-transitionDuration-7: 280ms;
+  --d-ref-transitionDuration-8: 300ms;
+  --d-ref-transitionFunction-linear: linear;
+  --d-ref-transitionFunction-e0i80: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --d-ref-transitionFunction-e40i0: cubic-bezier(0.4, 0.0, 1, 1);
+  --d-ref-transitionFunction-e40i80: cubic-bezier(0.4, 0.0, 0.2, 1);
+  --d-ref-transitionFunction-e40i40: cubic-bezier(0.4, 0.0, 0.6, 1);
+  --d-sys-transitionDuration-standard: var(--d-ref-transitionDuration-4);
+  --d-sys-transitionDuration-xs: var(--d-ref-transitionDuration-1);
+  --d-sys-transitionDuration-sm: var(--d-ref-transitionDuration-3);
+  --d-sys-transitionDuration-md-open: var(--d-ref-transitionDuration-6);
+  --d-sys-transitionDuration-md-close: var(--d-ref-transitionDuration-5);
+  --d-sys-transitionDuration-lg-open: var(--d-ref-transitionDuration-8);
+  --d-sys-transitionDuration-lg-close: var(--d-ref-transitionDuration-6);
+  --d-sys-transitionDuration-axis: var(--d-ref-transitionDuration-8);
+  --d-sys-transitionDuration-container-open: var(--d-ref-transitionDuration-8);
+  --d-sys-transitionDuration-container-close: var(--d-ref-transitionDuration-6);
+  --d-sys-transitionDuration-fade-enter: var(--d-ref-transitionDuration-4);
+  --d-sys-transitionDuration-fade-exit: var(--d-ref-transitionDuration-2);
+  --d-sys-transitionDuration-fade-through: var(--d-ref-transitionDuration-8);
+  --d-sys-transitionFunction-linear: linear;
+  --d-sys-transitionFunction-standard: var(--d-ref-transitionFunction-e40i80);
+  --d-sys-transitionFunction-emphasized: var(--d-ref-transitionFunction-e40i40);
+  --d-sys-transitionFunction-acceleration: var(--d-ref-transitionFunction-e40i0);
+  --d-sys-transitionFunction-deceleration: var(--d-ref-transitionFunction-e0i80);
+}