@m11g/library 0.0.0

package/src/assets/css/variables/chakra.css

@@ -0,0 +1,160 @@
+:root {
+  --chakra-aspect-ratios-square: 1 / 1;
+  --chakra-aspect-ratios-landscape: 4 / 3;
+  --chakra-aspect-ratios-portrait: 3 / 4;
+  --chakra-aspect-ratios-wide: 16 / 9;
+  --chakra-aspect-ratios-ultrawide: 18 / 5;
+  --chakra-aspect-ratios-golden: 1.618 / 1;
+  --chakra-animations-spin: spin 1s linear infinite;
+  --chakra-animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --chakra-animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --chakra-animations-bounce: bounce 1s infinite;
+  --chakra-blurs-sm: 4px;
+  --chakra-blurs-md: 8px;
+  --chakra-blurs-lg: 12px;
+  --chakra-blurs-xl: 16px;
+  --chakra-blurs-2xl: 24px;
+  --chakra-blurs-3xl: 40px;
+  --chakra-blurs-4xl: 64px;
+  --chakra-borders-xs: 0.5px solid;
+  --chakra-borders-sm: 1px solid;
+  --chakra-borders-md: 2px solid;
+  --chakra-borders-lg: 4px solid;
+  --chakra-borders-xl: 8px solid;
+  --chakra-colors-transparent: transparent;
+  --chakra-colors-current: currentcolor;
+  --chakra-colors-black: oklch(14.1% 0.004 285.8deg);
+  --chakra-colors-white: oklch(100% 0 0deg);
+  --chakra-colors-white-alpha-50: oklch(100% 0 0deg / 4%);
+  --chakra-colors-white-alpha-100: oklch(100% 0 0deg / 6%);
+  --chakra-colors-white-alpha-200: oklch(100% 0 0deg / 8%);
+  --chakra-colors-white-alpha-300: oklch(100% 0 0deg / 16%);
+  --chakra-colors-white-alpha-400: oklch(100% 0 0deg / 24%);
+  --chakra-colors-white-alpha-500: oklch(100% 0 0deg / 36%);
+  --chakra-colors-white-alpha-600: oklch(100% 0 0deg / 48%);
+  --chakra-colors-white-alpha-700: oklch(100% 0 0deg / 64%);
+  --chakra-colors-white-alpha-800: oklch(100% 0 0deg / 80%);
+  --chakra-colors-white-alpha-900: oklch(100% 0 0deg / 92%);
+  --chakra-colors-white-alpha-950: oklch(100% 0 0deg / 95%);
+  --chakra-colors-black-alpha-50: oklch(0% 0 0deg / 4%);
+  --chakra-colors-black-alpha-100: oklch(0% 0 0deg / 6%);
+  --chakra-colors-black-alpha-200: oklch(0% 0 0deg / 8%);
+  --chakra-colors-black-alpha-300: oklch(0% 0 0deg / 16%);
+  --chakra-colors-black-alpha-400: oklch(0% 0 0deg / 24%);
+  --chakra-colors-black-alpha-500: oklch(0% 0 0deg / 36%);
+  --chakra-colors-black-alpha-600: oklch(0% 0 0deg / 48%);
+  --chakra-colors-black-alpha-700: oklch(0% 0 0deg / 64%);
+  --chakra-colors-black-alpha-800: oklch(0% 0 0deg / 80%);
+  --chakra-colors-black-alpha-900: oklch(0% 0 0deg / 92%);
+  --chakra-colors-black-alpha-950: oklch(0% 0 0deg / 95%);
+  --chakra-colors-gray-50: oklch(98.5% 0 0deg);
+  --chakra-colors-gray-100: oklch(96.7% 0.001 286.4deg);
+  --chakra-colors-gray-200: oklch(92% 0.004 286.3deg);
+  --chakra-colors-gray-300: oklch(87.1% 0.005 286.3deg);
+  --chakra-colors-gray-400: oklch(71.2% 0.013 286.1deg);
+  --chakra-colors-gray-500: oklch(55.2% 0.014 285.9deg);
+  --chakra-colors-gray-600: oklch(44.2% 0.015 285.8deg);
+  --chakra-colors-gray-700: oklch(37% 0.012 285.8deg);
+  --chakra-colors-gray-800: oklch(27.4% 0.005 286deg);
+  --chakra-colors-gray-900: oklch(21% 0.006 285.9deg);
+  --chakra-colors-gray-950: oklch(17.8% 0 0deg);
+  --chakra-colors-red-50: oklch(97.1% 0.013 17.4deg);
+  --chakra-colors-red-100: oklch(93.6% 0.031 17.7deg);
+  --chakra-colors-red-200: oklch(88.5% 0.059 18.3deg);
+  --chakra-colors-red-300: oklch(80.8% 0.103 19.6deg);
+  --chakra-colors-red-400: oklch(71.1% 0.166 22.2deg);
+  --chakra-colors-red-500: oklch(63.7% 0.208 25.3deg);
+  --chakra-colors-red-600: oklch(57.7% 0.215 27.3deg);
+  --chakra-colors-red-700: oklch(44.2% 0.163 27.1deg);
+  --chakra-colors-red-800: oklch(29.1% 0.095 25.3deg);
+  --chakra-colors-red-900: oklch(21.6% 0.059 23.4deg);
+  --chakra-colors-red-950: oklch(17.4% 0.04 22.2deg);
+  --chakra-colors-orange-50: oklch(98% 0.016 73.7deg);
+  --chakra-colors-orange-100: oklch(95.4% 0.037 75.2deg);
+  --chakra-colors-orange-200: oklch(90.1% 0.073 70.7deg);
+  --chakra-colors-orange-300: oklch(83.7% 0.117 66.3deg);
+  --chakra-colors-orange-400: oklch(75.8% 0.159 55.9deg);
+  --chakra-colors-orange-500: oklch(70.5% 0.187 47.6deg);
+  --chakra-colors-orange-600: oklch(64.6% 0.194 41.1deg);
+  --chakra-colors-orange-700: oklch(45.2% 0.138 38.8deg);
+  --chakra-colors-orange-800: oklch(37.1% 0.104 38deg);
+  --chakra-colors-orange-900: oklch(24.5% 0.07 36.1deg);
+  --chakra-colors-orange-950: oklch(18.3% 0.044 38.1deg);
+  --chakra-colors-yellow-50: oklch(98.7% 0.026 102.2deg);
+  --chakra-colors-yellow-100: oklch(97.3% 0.069 103.2deg);
+  --chakra-colors-yellow-200: oklch(94.5% 0.124 101.5deg);
+  --chakra-colors-yellow-300: oklch(90.5% 0.166 98.1deg);
+  --chakra-colors-yellow-400: oklch(86.1% 0.173 91.9deg);
+  --chakra-colors-yellow-500: oklch(79.5% 0.162 86deg);
+  --chakra-colors-yellow-600: oklch(68.1% 0.142 75.8deg);
+  --chakra-colors-yellow-700: oklch(48.4% 0.102 68.2deg);
+  --chakra-colors-yellow-800: oklch(42.1% 0.09 57.7deg);
+  --chakra-colors-yellow-900: oklch(28.6% 0.064 53.8deg);
+  --chakra-colors-yellow-950: oklch(21.3% 0.044 55.6deg);
+  --chakra-colors-green-50: oklch(98.2% 0.018 155.8deg);
+  --chakra-colors-green-100: oklch(96.2% 0.043 156.7deg);
+  --chakra-colors-green-200: oklch(92.5% 0.081 156deg);
+  --chakra-colors-green-300: oklch(87.1% 0.136 154.4deg);
+  --chakra-colors-green-400: oklch(80% 0.182 151.7deg);
+  --chakra-colors-green-500: oklch(72.3% 0.192 149.6deg);
+  --chakra-colors-green-600: oklch(62.7% 0.17 149.2deg);
+  --chakra-colors-green-700: oklch(45.8% 0.117 150.3deg);
+  --chakra-colors-green-800: oklch(36.4% 0.082 152.6deg);
+  --chakra-colors-green-900: oklch(24.2% 0.055 154.1deg);
+  --chakra-colors-green-950: oklch(19% 0.04 155.8deg);
+  --chakra-colors-teal-50: oklch(98.4% 0.014 180.7deg);
+  --chakra-colors-teal-100: oklch(95.3% 0.05 180.8deg);
+  --chakra-colors-teal-200: oklch(91% 0.093 180.4deg);
+  --chakra-colors-teal-300: oklch(85.5% 0.125 181.1deg);
+  --chakra-colors-teal-400: oklch(78.5% 0.133 181.9deg);
+  --chakra-colors-teal-500: oklch(70.4% 0.123 182.5deg);
+  --chakra-colors-teal-600: oklch(60% 0.104 184.7deg);
+  --chakra-colors-teal-700: oklch(43.2% 0.072 185.7deg);
+  --chakra-colors-teal-800: oklch(34.7% 0.051 191.2deg);
+  --chakra-colors-teal-900: oklch(24.8% 0.04 192.2deg);
+  --chakra-colors-teal-950: oklch(18.6% 0.029 190.9deg);
+  --chakra-colors-blue-50: oklch(97% 0.014 254.6deg);
+  --chakra-colors-blue-100: oklch(93.2% 0.032 255.6deg);
+  --chakra-colors-blue-200: oklch(88.2% 0.057 254.1deg);
+  --chakra-colors-blue-300: oklch(84% 0.082 251deg);
+  --chakra-colors-blue-400: oklch(71.4% 0.143 254.6deg);
+  --chakra-colors-blue-500: oklch(62.3% 0.188 259.8deg);
+  --chakra-colors-blue-600: oklch(54.6% 0.215 262.9deg);
+  --chakra-colors-blue-700: oklch(40.8% 0.174 264.4deg);
+  --chakra-colors-blue-800: oklch(34.9% 0.121 264.9deg);
+  --chakra-colors-blue-900: oklch(26% 0.08 268.4deg);
+  --chakra-colors-blue-950: oklch(20% 0.053 268.4deg);
+  --chakra-colors-cyan-50: oklch(98.4% 0.019 200.9deg);
+  --chakra-colors-cyan-100: oklch(95.6% 0.044 203.4deg);
+  --chakra-colors-cyan-200: oklch(91.7% 0.077 205deg);
+  --chakra-colors-cyan-300: oklch(86.5% 0.115 207.1deg);
+  --chakra-colors-cyan-400: oklch(79.7% 0.134 211.5deg);
+  --chakra-colors-cyan-500: oklch(71.5% 0.126 215.2deg);
+  --chakra-colors-cyan-600: oklch(60.9% 0.111 221.7deg);
+  --chakra-colors-cyan-700: oklch(44.2% 0.078 222.6deg);
+  --chakra-colors-cyan-800: oklch(35.3% 0.057 226.6deg);
+  --chakra-colors-cyan-900: oklch(26.8% 0.046 229.2deg);
+  --chakra-colors-cyan-950: oklch(20.9% 0.033 227.7deg);
+  --chakra-colors-purple-50: oklch(97.7% 0.014 308.3deg);
+  --chakra-colors-purple-100: oklch(94.6% 0.033 307.2deg);
+  --chakra-colors-purple-200: oklch(90.2% 0.06 306.7deg);
+  --chakra-colors-purple-300: oklch(82.7% 0.108 306.4deg);
+  --chakra-colors-purple-400: oklch(72.2% 0.177 305.5deg);
+  --chakra-colors-purple-500: oklch(62.7% 0.233 303.9deg);
+  --chakra-colors-purple-600: oklch(55.8% 0.252 302.3deg);
+  --chakra-colors-purple-700: oklch(42% 0.197 302.4deg);
+  --chakra-colors-purple-800: oklch(33.9% 0.146 305.1deg);
+  --chakra-colors-purple-900: oklch(25.4% 0.125 301.7deg);
+  --chakra-colors-purple-950: oklch(18% 0.083 304.1deg);
+  --chakra-colors-pink-50: oklch(97.1% 0.014 343.2deg);
+  --chakra-colors-pink-100: oklch(94.8% 0.028 342.3deg);
+  --chakra-colors-pink-200: oklch(89.9% 0.059 343.2deg);
+  --chakra-colors-pink-300: oklch(82.3% 0.11 346deg);
+  --chakra-colors-pink-400: oklch(72.5% 0.175 349.8deg);
+  --chakra-colors-pink-500: oklch(65.6% 0.212 354.3deg);
+  --chakra-colors-pink-600: oklch(59.2% 0.218 0.6deg);
+  --chakra-colors-pink-700: oklch(47.3% 0.177 3deg);
+  --chakra-colors-pink-800: oklch(35.4% 0.129 3.6deg);
+  --chakra-colors-pink-900: oklch(25.9% 0.094 3.3deg);
+  --chakra-colors-pink-950: oklch(19.9% 0.066 1.1deg);
+}

package/src/assets/css/variables/colors.css

@@ -0,0 +1,205 @@
+:root {
+  --color-black: var(--chakra-colors-black);
+  --color-white: var(--chakra-colors-white);
+
+  /* PANEL */
+  --shadow:
+    0px 8px 16px color-mix(in srgb, black 64%, transparent),
+    0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent);
+
+  /* PRIMARY */
+  --color-primary-fg: var(--color-teal-fg);
+  --color-primary-subtle: var(--color-teal-subtle);
+  --color-primary-muted: var(--color-teal-muted);
+  --color-primary-emphasized: var(--color-teal-emphasized);
+  --color-primary-solid: var(--color-teal-solid);
+  --color-primary-focusring: var(--color-teal-focusring);
+  --color-primary-border: var(--color-teal-border);
+
+  /* BODY */
+  --color-body-background: var(--chakra-colors-black);
+  --color-body-text: var(--chakra-colors-gray-50);
+
+  /* CAKRA */
+  --color-bg: light-dark(var(--chakra-colors-white), var(--chakra-colors-black));
+  --color-bg-subtle: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-gray-950));
+  --color-bg-muted: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
+  --color-bg-emphasized: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
+  --color-bg-inverted: light-dark(var(--chakra-colors-black), var(--chakra-colors-white));
+  --color-bg-panel: light-dark(var(--chakra-colors-white), var(--chakra-colors-gray-950));
+  --color-bg-error: light-dark(var(--chakra-colors-red-50), var(--chakra-colors-red-950));
+  --color-bg-warning: light-dark(var(--chakra-colors-orange-50), var(--chakra-colors-orange-950));
+  --color-bg-success: light-dark(var(--chakra-colors-green-50), var(--chakra-colors-green-950));
+  --color-bg-info: light-dark(var(--chakra-colors-blue-50), var(--chakra-colors-blue-950));
+  --color-fg: light-dark(var(--chakra-colors-black), var(--chakra-colors-gray-50));
+  --color-fg-muted: light-dark(var(--chakra-colors-gray-600), var(--chakra-colors-gray-400));
+  --color-fg-subtle: light-dark(var(--chakra-colors-gray-400), var(--chakra-colors-gray-500));
+  --color-fg-inverted: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-black));
+  --color-fg-error: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
+  --color-fg-warning: light-dark(var(--chakra-colors-orange-600), var(--chakra-colors-orange-300));
+  --color-fg-success: light-dark(var(--chakra-colors-green-600), var(--chakra-colors-green-300));
+  --color-fg-info: light-dark(var(--chakra-colors-blue-600), var(--chakra-colors-blue-300));
+  --color-border: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
+  --color-border-muted: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
+  --color-border-subtle: light-dark(var(--chakra-colors-gray-50), var(--chakra-colors-gray-950));
+  --color-border-emphasized: light-dark(var(--chakra-colors-gray-300), var(--chakra-colors-gray-700));
+  --color-border-inverted: light-dark(var(--chakra-colors-gray-800), var(--chakra-colors-gray-200));
+  --color-border-error: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
+  --color-border-warning: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-400));
+  --color-border-success: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-400));
+  --color-border-info: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-400));
+
+  /* gray */
+  --color-gray-contrast: light-dark(var(--chakra-colors-white), var(--chakra-colors-black));
+  --color-gray-fg: light-dark(var(--chakra-colors-gray-800), var(--chakra-colors-gray-200));
+  --color-gray-subtle: light-dark(var(--chakra-colors-gray-100), var(--chakra-colors-gray-900));
+  --color-gray-muted: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
+  --color-gray-emphasized: light-dark(var(--chakra-colors-gray-300), var(--chakra-colors-gray-700));
+  --color-gray-solid: light-dark(var(--chakra-colors-gray-900), var(--chakra-colors-white));
+  --color-gray-focus-ring: light-dark(var(--chakra-colors-gray-400), var(--chakra-colors-gray-400));
+  --color-gray-border: light-dark(var(--chakra-colors-gray-200), var(--chakra-colors-gray-800));
+
+  /* red */
+  --color-red-contrast: light-dark(white, white);
+  --color-red-fg: light-dark(var(--chakra-colors-red-700), var(--chakra-colors-red-300));
+  --color-red-subtle: light-dark(var(--chakra-colors-red-100), var(--chakra-colors-red-900));
+  --color-red-muted: light-dark(var(--chakra-colors-red-200), var(--chakra-colors-red-800));
+  --color-red-emphasized: light-dark(var(--chakra-colors-red-300), var(--chakra-colors-red-700));
+  --color-red-solid: light-dark(var(--chakra-colors-red-600), var(--chakra-colors-red-600));
+  --color-red-focus-ring: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-500));
+  --color-red-border: light-dark(var(--chakra-colors-red-500), var(--chakra-colors-red-400));
+
+  /* orange */
+  --color-orange-contrast: light-dark(white, black);
+  --color-orange-fg: light-dark(var(--chakra-colors-orange-700), var(--chakra-colors-orange-300));
+  --color-orange-subtle: light-dark(var(--chakra-colors-orange-100), var(--chakra-colors-orange-900));
+  --color-orange-muted: light-dark(var(--chakra-colors-orange-200), var(--chakra-colors-orange-800));
+  --color-orange-emphasized: light-dark(var(--chakra-colors-orange-300), var(--chakra-colors-orange-700));
+  --color-orange-solid: light-dark(var(--chakra-colors-orange-600), var(--chakra-colors-orange-500));
+  --color-orange-focus-ring: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-500));
+  --color-orange-border: light-dark(var(--chakra-colors-orange-500), var(--chakra-colors-orange-400));
+
+  /* green */
+  --color-green-contrast: light-dark(white, white);
+  --color-green-fg: light-dark(var(--chakra-colors-green-700), var(--chakra-colors-green-300));
+  --color-green-subtle: light-dark(var(--chakra-colors-green-100), var(--chakra-colors-green-900));
+  --color-green-muted: light-dark(var(--chakra-colors-green-200), var(--chakra-colors-green-800));
+  --color-green-emphasized: light-dark(var(--chakra-colors-green-300), var(--chakra-colors-green-700));
+  --color-green-solid: light-dark(var(--chakra-colors-green-600), var(--chakra-colors-green-600));
+  --color-green-focus-ring: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-500));
+  --color-green-border: light-dark(var(--chakra-colors-green-500), var(--chakra-colors-green-400));
+
+  /* blue */
+  --color-blue-contrast: light-dark(white, white);
+  --color-blue-fg: light-dark(var(--chakra-colors-blue-700), var(--chakra-colors-blue-300));
+  --color-blue-subtle: light-dark(var(--chakra-colors-blue-100), var(--chakra-colors-blue-900));
+  --color-blue-muted: light-dark(var(--chakra-colors-blue-200), var(--chakra-colors-blue-800));
+  --color-blue-emphasized: light-dark(var(--chakra-colors-blue-300), var(--chakra-colors-blue-700));
+  --color-blue-solid: light-dark(var(--chakra-colors-blue-600), var(--chakra-colors-blue-600));
+  --color-blue-focus-ring: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-500));
+  --color-blue-border: light-dark(var(--chakra-colors-blue-500), var(--chakra-colors-blue-400));
+
+  /* yellow */
+  --color-yellow-contrast: light-dark(black, black);
+  --color-yellow-fg: light-dark(var(--chakra-colors-yellow-800), var(--chakra-colors-yellow-300));
+  --color-yellow-subtle: light-dark(var(--chakra-colors-yellow-100), var(--chakra-colors-yellow-900));
+  --color-yellow-muted: light-dark(var(--chakra-colors-yellow-200), var(--chakra-colors-yellow-800));
+  --color-yellow-emphasized: light-dark(var(--chakra-colors-yellow-300), var(--chakra-colors-yellow-700));
+  --color-yellow-solid: light-dark(var(--chakra-colors-yellow-300), var(--chakra-colors-yellow-300));
+  --color-yellow-focus-ring: light-dark(var(--chakra-colors-yellow-500), var(--chakra-colors-yellow-500));
+  --color-yellow-border: light-dark(var(--chakra-colors-yellow-500), var(--chakra-colors-yellow-500));
+
+  /* teal */
+  --color-teal-contrast: light-dark(white, white);
+  --color-teal-fg: light-dark(var(--chakra-colors-teal-700), var(--chakra-colors-teal-300));
+  --color-teal-subtle: light-dark(var(--chakra-colors-teal-100), var(--chakra-colors-teal-900));
+  --color-teal-muted: light-dark(var(--chakra-colors-teal-200), var(--chakra-colors-teal-800));
+  --color-teal-emphasized: light-dark(var(--chakra-colors-teal-300), var(--chakra-colors-teal-700));
+  --color-teal-solid: light-dark(var(--chakra-colors-teal-600), var(--chakra-colors-teal-600));
+  --color-teal-focus-ring: light-dark(var(--chakra-colors-teal-500), var(--chakra-colors-teal-500));
+  --color-teal-border: light-dark(var(--chakra-colors-teal-500), var(--chakra-colors-teal-400));
+
+  /* purple */
+  --color-purple-contrast: light-dark(white, white);
+  --color-purple-fg: light-dark(var(--chakra-colors-purple-700), var(--chakra-colors-purple-300));
+  --color-purple-subtle: light-dark(var(--chakra-colors-purple-100), var(--chakra-colors-purple-900));
+  --color-purple-muted: light-dark(var(--chakra-colors-purple-200), var(--chakra-colors-purple-800));
+  --color-purple-emphasized: light-dark(var(--chakra-colors-purple-300), var(--chakra-colors-purple-700));
+  --color-purple-solid: light-dark(var(--chakra-colors-purple-600), var(--chakra-colors-purple-600));
+  --color-purple-focus-ring: light-dark(var(--chakra-colors-purple-500), var(--chakra-colors-purple-500));
+  --color-purple-border: light-dark(var(--chakra-colors-purple-500), var(--chakra-colors-purple-400));
+
+  /* pink */
+  --color-pink-contrast: light-dark(white, white);
+  --color-pink-fg: light-dark(var(--chakra-colors-pink-700), var(--chakra-colors-pink-300));
+  --color-pink-subtle: light-dark(var(--chakra-colors-pink-100), var(--chakra-colors-pink-900));
+  --color-pink-muted: light-dark(var(--chakra-colors-pink-200), var(--chakra-colors-pink-800));
+  --color-pink-emphasized: light-dark(var(--chakra-colors-pink-300), var(--chakra-colors-pink-700));
+  --color-pink-solid: light-dark(var(--chakra-colors-pink-600), var(--chakra-colors-pink-600));
+  --color-pink-focus-ring: light-dark(var(--chakra-colors-pink-500), var(--chakra-colors-pink-500));
+  --color-pink-border: light-dark(var(--chakra-colors-pink-500), var(--chakra-colors-pink-400));
+
+  /* cyan */
+  --color-cyan-contrast: light-dark(white, white);
+  --color-cyan-fg: light-dark(var(--chakra-colors-cyan-700), var(--chakra-colors-cyan-300));
+  --color-cyan-subtle: light-dark(var(--chakra-colors-cyan-100), var(--chakra-colors-cyan-900));
+  --color-cyan-muted: light-dark(var(--chakra-colors-cyan-200), var(--chakra-colors-cyan-800));
+  --color-cyan-emphasized: light-dark(var(--chakra-colors-cyan-300), var(--chakra-colors-cyan-700));
+  --color-cyan-solid: light-dark(var(--chakra-colors-cyan-600), var(--chakra-colors-cyan-600));
+  --color-cyan-focus-ring: light-dark(var(--chakra-colors-cyan-500), var(--chakra-colors-cyan-500));
+  --color-cyan-border: light-dark(var(--chakra-colors-cyan-500), var(--chakra-colors-cyan-400));
+
+  /* shadows */
+  --shadows-xs:
+    light-dark(
+      0px 1px 2px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 20%, transparent),
+      0px 1px 1px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 20%, transparent)
+    );
+  --shadows-sm:
+    light-dark(
+      0px 2px 4px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
+      0px 2px 4px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
+    );
+  --shadows-md:
+    light-dark(
+      0px 4px 8px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
+      0px 4px 8px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
+    );
+  --shadows-lg:
+    light-dark(
+      0px 8px 16px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
+      0px 8px 16px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
+    );
+  --shadows-xl:
+    light-dark(
+      0px 16px 24px color-mix(in srgb, var(--chakra-colors-gray-900) 10%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
+      0px 16px 24px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
+    );
+  --shadows-2xl:
+    light-dark(
+      0px 24px 40px color-mix(in srgb, var(--chakra-colors-gray-900) 16%, transparent),
+      0px 0px 1px color-mix(in srgb, var(--chakra-colors-gray-900) 30%, transparent),
+      0px 24px 40px color-mix(in srgb, black 64%, transparent),
+      0px 0px 1px inset color-mix(in srgb, var(--chakra-colors-gray-300) 30%, transparent)
+    );
+  --shadows-inner:
+    light-dark(
+      inset 0 2px 4px 0 color-mix(in srgb, black 5%, transparent),
+      inset 0 2px 4px 0 black
+    );
+  --shadows-inset:
+    light-dark(
+      inset 0 0 0 1px color-mix(in srgb, black 5%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, var(--chakra-colors-gray-300) 5%, transparent)
+    );
+}

package/src/assets/css/variables/grid.css

@@ -0,0 +1,6 @@
+:root {
+  --container-size-sm: 26rem;
+  --container-size-md: 48rem;
+  --container-size-lg: 64rem;
+  --gutter: var(--spacing-4);
+}

package/src/assets/css/variables/spacings.css

@@ -0,0 +1,10 @@
+:root {
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+}

package/src/assets/css/variables/transitions.css

@@ -0,0 +1,10 @@
+:root {
+  --transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+  --transition-duration: 0.01s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    --transition-duration: 0.25s;
+  }
+
+  --transition: var(--transition-timing-function) var(--transition-duration);
+}

package/src/assets/css/variables/typography.css

@@ -0,0 +1,17 @@
+:root {
+  --font-size-base: clamp(16px, 2.75vw, 18px);
+  --scale-base: 1rem;
+  --scale-ratio: 1.1;
+  --font-size-h1: calc(var(--scale-base) * pow(var(--scale-ratio), 4));
+  --font-size-h2: calc(var(--scale-base) * pow(var(--scale-ratio), 3));
+  --font-size-h3: calc(var(--scale-base) * pow(var(--scale-ratio), 2));
+  --font-size-h4: calc(var(--scale-base) * pow(var(--scale-ratio), 1));
+  --font-size-sm: calc(var(--scale-base) * pow(var(--scale-ratio), -1));
+  --line-height: 1.5;
+  --line-height-heading: 1.1;
+  --font-family: "Domine", arial, helvetica, sans-serif;
+  --font-family-heading: "Sora", var(--font-family);
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+}

package/src/components/AppBreadcrumb.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { RouterLink, type RouteLocationRaw } from "vue-router";
+
+defineProps<{
+  pages: {
+    title: string;
+    to: RouteLocationRaw;
+  }[];
+}>();
+</script>
+
+<template>
+  <nav v-if="pages.length" aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+      <li v-for="(page, index) in pages" :key="page.title">
+        <router-link :aria-current="index === pages.length - 1 ? 'page' : undefined" :to="page.to">
+          {{ page.title }}
+        </router-link>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style lang="css" scoped>
+@scope (.breadcrumb) {
+  :scope {
+    margin-block-end: var(--spacing-4);
+  }
+
+  ol {
+    display: flex;
+    gap: var(--spacing-2);
+    padding: 0;
+    margin: 0;
+    list-style: none outside;
+  }
+
+  li {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+
+    &:not(:last-child)::after {
+      content: "/";
+    }
+  }
+
+  a {
+    &[aria-current="page"] {
+      color: var(--color-fg);
+
+      &:not(:hover) {
+        text-decoration: none;
+      }
+    }
+  }
+
+  svg {
+    inline-size: 1.25em;
+    translate: 0 -1px;
+  }
+}
+</style>

package/src/components/AppButton.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import useTheme from "@/composables/useTheme";
+import type { Theme } from "@/types/Theme";
+import { computed, resolveComponent } from "vue";
+import type { RouteLocationRaw } from "vue-router";
+
+const props = withDefaults(
+  defineProps<{
+    to?: RouteLocationRaw;
+    type?: "submit" | "button";
+    variant?: "primary" | "ghost" | "secondary";
+    theme?: Theme
+    title: string;
+    disabled?: boolean;
+  }>(),
+  {
+    theme: undefined,
+    to: undefined,
+    variant: "primary",
+    type: "button",
+    disabled: false,
+  },
+);
+
+const { colors } = useTheme(props.theme);
+
+const component = computed(() => {
+  if (props.to) {
+    return resolveComponent("RouterLink");
+  } else {
+    return "button";
+  }
+});
+
+</script>
+
+<template>
+  <component
+    :is="component"
+    :to
+    :class="variant"
+    :type="component === 'button' ? type : undefined"
+    :disabled
+  >
+    {{ title }}
+  </component>
+</template>
+
+<style lang="css" scoped>
+a,
+button {
+  --btn-border-radius: 0.5em;
+
+  &.primary {
+    --btn-background-color: v-bind(colors.solid);
+    --btn-background-color-hover: v-bind(colors.emphasized);
+    --btn-text-color: v-bind(colors.contrast);
+    --focus-ring-color: v-bind(colors.focusRing);
+  }
+
+  &.ghost {
+    --btn-background-color: transparant;
+    --btn-background-color-hover: v-bind(colors.subtle);
+    --btn-text-color: v-bind(colors.solid);
+    --btn-border-color: currentcolor;
+    --focus-ring-color: var(--btn-text-color);
+  }
+
+  display: inline-block;
+  inline-size: auto;
+  padding: var(--spacing-2) var(--spacing-8);
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  color: var(--btn-text-color);
+  text-align: center;
+  text-transform: uppercase;
+  text-decoration: none;
+  background-color: var(--btn-background-color);
+  border: 2px solid var(--btn-border-color);
+  border-radius: var(--btn-border-radius);
+  transition:
+    background-color var(--transition),
+    text-decoration var(--transition),
+    opacity var(--transition);
+
+  &:hover:not(:disabled) {
+    background-color: var(--btn-background-color-hover);
+  }
+
+  &:active:not(:disabled) {
+    padding-block: calc(var(--spacing-2) + 1px) calc(var(--spacing-2) - 1px);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-color) solid 2px;
+    outline-offset: 2px;
+  }
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+</style>