@momo-webplatform/mobase-next 1.0.1

package/src/styles/globals.css

@@ -0,0 +1,456 @@
+/* @import 'tailwindcss';
+@import 'tw-animate-css'; */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: var(--color-background-2-value);
+  --foreground: var(--color-gray-10-value);
+  --card: var(--color-background-1-value);
+  --card-foreground: var(--color-gray-10-value);
+  --popover: var(--color-background-1-value);
+  --popover-foreground: var(--color-gray-10-value);
+  --primary: var(--color-pink-7-value);
+  --primary-foreground: var(--color-pink-1-value);
+  --secondary: var(--color-gray-1-value);
+  --secondary-foreground: var(--color-gray-10-value);
+  --muted: var(--color-gray-1-value);
+  --muted-foreground: var(--color-gray-9-value);
+  --subtle: var(--color-gray-1-value);
+  --subtle-foreground: var(--color-gray-7-value);
+  --accent: var(--color-gray-1-value);
+  --accent-foreground: var(--color-gray-10-value);
+  --destructive: var(--color-red-7-value);
+  --destructive-foreground: var(--color-red-7-value);
+  --border: var(--color-gray-4-value);
+  --input: var(--color-gray-4-value);
+  --ring: var(--color-pink-7-value);
+  --chart-1: var(--color-pink-1-value);
+  --chart-2: var(--color-pink-4-value);
+  --chart-3: var(--color-pink-5-value);
+  --chart-4: var(--color-pink-7-value);
+  --chart-5: var(--color-pink-8-value);
+  --sidebar: var(--color-gray-1-value);
+  --sidebar-foreground: var(--color-gray-10-value);
+  --sidebar-primary: var(--color-pink-7-value);
+  --sidebar-primary-foreground: var(--color-pink-1-value);
+  --sidebar-accent: var(--color-gray-1-value);
+  --sidebar-accent-foreground: var(--color-gray-10-value);
+  --sidebar-border: var(--color-gray-4-value);
+  --sidebar-ring: var(--color-pink-6-value);
+  --info: var(--color-blue-7-value);
+  --info-foreground: var(--color-blue-9-value);
+  --success: var(--color-green-7-value);
+  --success-foreground: var(--color-green-9-value);
+  --warning: var(--color-amber-7-value);
+  --warning-foreground: var(--color-amber-9-value);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: var(--color-background-2-value);
+  --foreground: var(--color-gray-10-value);
+  --card: var(--color-background-1-value);
+  --card-foreground: var(--color-gray-10-value);
+  --popover: var(--color-background-1-value);
+  --popover-foreground: var(--color-gray-10-value);
+  --primary: var(--color-pink-7-value);
+  --primary-foreground: var(--color-pink-1-value);
+  --secondary: var(--color-gray-1-value);
+  --secondary-foreground: var(--color-gray-10-value);
+  --muted: var(--color-gray-1-value);
+  --muted-foreground: var(--color-gray-9-value);
+  --subtle: var(--color-gray-1-value);
+  --subtle-foreground: var(--color-gray-7-value);
+  --accent: var(--color-gray-1-value);
+  --accent-foreground: var(--color-gray-10-value);
+  --destructive: var(--color-red-7-value);
+  --destructive-foreground: var(--color-red-7-value);
+  --border: var(--color-gray-4-value);
+  --input: var(--color-gray-4-value);
+  --ring: var(--color-pink-7-value);
+  --chart-1: var(--color-pink-1-value);
+  --chart-2: var(--color-pink-4-value);
+  --chart-3: var(--color-pink-5-value);
+  --chart-4: var(--color-pink-7-value);
+  --chart-5: var(--color-pink-8-value);
+  --sidebar: var(--color-background-2-value);
+  --sidebar-foreground: var(--color-gray-10-value);
+  --sidebar-primary: var(--color-pink-7-value);
+  --sidebar-primary-foreground: var(--color-pink-1-value);
+  --sidebar-accent: var(--color-gray-1-value);
+  --sidebar-accent-foreground: var(--color-gray-10-value);
+  --sidebar-border: var(--color-gray-4-value);
+  --sidebar-ring: var(--color-pink-6-value);
+  --info: var(--color-blue-7-value);
+  --info-foreground: var(--color-blue-9-value);
+  --success: var(--color-green-7-value);
+  --success-foreground: var(--color-green-9-value);
+  --warning: var(--color-amber-7-value);
+  --warning-foreground: var(--color-amber-9-value);
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle: var(--subtle);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .wrapper {
+    @apply max-w-6xl mx-auto px-5 md:px-6;
+  }
+}
+
+:root {
+  --color-blue-1-value: oklch(97.32% 0.0141 251.56);
+  --color-blue-2-value: oklch(96.29% 0.0195 250.59);
+  --color-blue-3-value: oklch(94.58% 0.0293 249.84870859673202);
+  --color-blue-4-value: oklch(91.58% 0.0473 245.11621922481282);
+  --color-blue-5-value: oklch(82.75% 0.0979 248.48);
+  --color-blue-6-value: oklch(73.08% 0.1583 248.133320980386);
+  --color-blue-7-value: oklch(57.61% 0.2508 258.23);
+  --color-blue-8-value: oklch(51.51% 0.2399 257.85);
+  --color-blue-9-value: oklch(53.18% 0.2399 256.9900584162342);
+  --color-blue-10-value: oklch(26.67% 0.1099 254.34);
+
+  --color-red-1-value: oklch(96.5% 0.0223 13.09);
+  --color-red-2-value: oklch(95.41% 0.0299 14.252646656611997);
+  --color-red-3-value: oklch(94.33% 0.0369 15.011509923860523);
+  --color-red-4-value: oklch(91.51% 0.0471 19.8);
+  --color-red-5-value: oklch(84.47% 0.1018 17.71);
+  --color-red-6-value: oklch(71.12% 0.1881 21.22);
+  --color-red-7-value: oklch(62.56% 0.2524 23.03);
+  --color-red-8-value: oklch(58.19% 0.2482 25.15);
+  --color-red-9-value: oklch(54.99% 0.232 25.29);
+  --color-red-10-value: oklch(24.8% 0.1041 18.86);
+
+  --color-amber-1-value: oklch(97.48% 0.0331 85.79);
+  --color-amber-2-value: oklch(96.81% 0.0495 90.24227879900472);
+  --color-amber-3-value: oklch(95.93% 0.0636 90.52);
+  --color-amber-4-value: oklch(91.02% 0.1322 88.25);
+  --color-amber-5-value: oklch(86.55% 0.1583 79.63);
+  --color-amber-6-value: oklch(80.25% 0.1953 73.59);
+  --color-amber-7-value: oklch(81.87% 0.1969 76.46);
+  --color-amber-8-value: oklch(77.21% 0.1991 64.28);
+  --color-amber-9-value: oklch(52.79% 0.1496 54.65);
+  --color-amber-10-value: oklch(30.83% 0.099 45.48);
+
+  --color-green-1-value: oklch(97.59% 0.0289 145.42);
+  --color-green-2-value: oklch(96.92% 0.037 147.15);
+  --color-green-3-value: oklch(94.6% 0.0674 144.23);
+  --color-green-4-value: oklch(91.49% 0.0976 146.24);
+  --color-green-5-value: oklch(85.45% 0.1627 146.3);
+  --color-green-6-value: oklch(80.25% 0.214 145.18);
+  --color-green-7-value: oklch(64.58% 0.1746 147.27);
+  --color-green-8-value: oklch(57.81% 0.1507 147.5);
+  --color-green-9-value: oklch(51.75% 0.1453 147.65);
+  --color-green-10-value: oklch(29.15% 0.1197 147.38);
+
+  --color-teal-1-value: oklch(97.72% 0.0359 186.7);
+  --color-teal-2-value: oklch(97.06% 0.0347 180.66);
+  --color-teal-3-value: oklch(94.92% 0.0478 182.07);
+  --color-teal-4-value: oklch(92.76% 0.0718 183.78);
+  --color-teal-5-value: oklch(86.88% 0.1344 182.42);
+  --color-teal-6-value: oklch(81.5% 0.161 178.96);
+  --color-teal-7-value: oklch(64.92% 0.1572 181.95);
+  --color-teal-8-value: oklch(57.53% 0.1392 181.66);
+  --color-teal-9-value: oklch(52.08% 0.1251 182.93);
+  --color-teal-10-value: oklch(32.11% 0.0788 179.82);
+
+  --color-purple-1-value: oklch(96.65% 0.0244 312.1890119359961);
+  --color-purple-2-value: oklch(96.73% 0.0228 309.8);
+  --color-purple-3-value: oklch(94.85% 0.0364 310.15);
+  --color-purple-4-value: oklch(91.77% 0.0614 312.82);
+  --color-purple-5-value: oklch(81.26% 0.1409 310.8);
+  --color-purple-6-value: oklch(72.07% 0.2083 308.19);
+  --color-purple-7-value: oklch(55.5% 0.3008 306.12);
+  --color-purple-8-value: oklch(48.58% 0.2638 305.73);
+  --color-purple-9-value: oklch(47.18% 0.2579 304);
+  --color-purple-10-value: oklch(23.96% 0.13 305.66);
+
+  --color-pink-1-value: oklch(95.4% 0.0295 353.2);
+  --color-pink-2-value: oklch(92.5% 0.0458 353.2);
+  --color-pink-3-value: oklch(89.3% 0.0598 353.2);
+  --color-pink-4-value: oklch(85.5% 0.0727 353.2);
+  --color-pink-5-value: oklch(80.8% 0.0894 353.2);
+  --color-pink-6-value: oklch(75.1% 0.1137 353.2);
+  --color-pink-7-value: oklch(63.4% 0.2345 353.2);
+  --color-pink-8-value: oklch(59.3% 0.233 353.2);
+  --color-pink-9-value: oklch(55.4% 0.2301 353.2);
+  --color-pink-10-value: oklch(34.5% 0.1334 353.2);
+
+  --color-gray-1-value: oklch(95.6% 0.0083 341.9);
+  --color-gray-2-value: oklch(93.2% 0.011 341.9);
+  --color-gray-3-value: oklch(90.9% 0.0142 341.9);
+  --color-gray-4-value: oklch(88.6% 0.0163 341.9);
+  --color-gray-5-value: oklch(85.4% 0.0201 341.9);
+  --color-gray-6-value: oklch(79.4% 0.0272 341.9);
+  --color-gray-7-value: oklch(64.6% 0.0274 341.9);
+  --color-gray-8-value: oklch(61.1% 0.026 341.9);
+  --color-gray-9-value: oklch(50.5% 0.0225 341.9);
+  --color-gray-10-value: oklch(24.5% 0.0189 341.9);
+
+  --color-background-1-value: oklch(99.2% 0.0025 341.9);
+  --color-background-2-value: oklch(98.3% 0.0046 341.9);
+}
+
+.dark {
+  --color-blue-1-value: oklch(22.17% 0.069 259.89);
+  --color-blue-2-value: oklch(25.45% 0.0811 255.8);
+  --color-blue-3-value: oklch(30.86% 0.1022 255.21);
+  --color-blue-4-value: oklch(34.1% 0.121 254.74);
+  --color-blue-5-value: oklch(38.5% 0.1403 254.4);
+  --color-blue-6-value: oklch(64.94% 0.1982 251.8131841760864);
+  --color-blue-7-value: oklch(57.61% 0.2321 258.23);
+  --color-blue-8-value: oklch(51.51% 0.2307 257.85);
+  --color-blue-9-value: oklch(71.7% 0.1648 250.79360374054167);
+  --color-blue-10-value: oklch(96.75% 0.0179 242.4234217368056);
+
+  --color-red-1-value: oklch(22.1% 0.0657 15.11);
+  --color-red-2-value: oklch(25.93% 0.0834 19.02);
+  --color-red-3-value: oklch(31.47% 0.1105 20.96);
+  --color-red-4-value: oklch(35.27% 0.1273 21.23);
+  --color-red-5-value: oklch(40.68% 0.1479 23.16);
+  --color-red-6-value: oklch(62.56% 0.2277 23.03);
+  --color-red-7-value: oklch(62.56% 0.2234 23.03);
+  --color-red-8-value: oklch(58.01% 0.227 25.12);
+  --color-red-9-value: oklch(69.96% 0.2136 22.03);
+  --color-red-10-value: oklch(95.6% 0.0293 6.61);
+
+  --color-amber-1-value: oklch(22.46% 0.0538 76.04);
+  --color-amber-2-value: oklch(24.95% 0.0642 64.78);
+  --color-amber-3-value: oklch(32.34% 0.0837 63.83);
+  --color-amber-4-value: oklch(35.53% 0.0903 66.29707162673735);
+  --color-amber-5-value: oklch(41.55% 0.1044 67.98);
+  --color-amber-6-value: oklch(75.04% 0.1737 74.49);
+  --color-amber-7-value: oklch(81.87% 0.1969 76.46);
+  --color-amber-8-value: oklch(77.21% 0.1991 64.28);
+  --color-amber-9-value: oklch(77.21% 0.1991 64.28);
+  --color-amber-10-value: oklch(96.7% 0.0418 84.59);
+
+  --color-green-1-value: oklch(23.09% 0.0716 149.68);
+  --color-green-2-value: oklch(27.12% 0.0895 150.09);
+  --color-green-3-value: oklch(29.84% 0.096 149.25);
+  --color-green-4-value: oklch(34.39% 0.1039 147.78);
+  --color-green-5-value: oklch(44.19% 0.1484 147.2);
+  --color-green-6-value: oklch(58.11% 0.1815 146.55);
+  --color-green-7-value: oklch(64.58% 0.1746 147.27);
+  --color-green-8-value: oklch(57.81% 0.1507 147.5);
+  --color-green-9-value: oklch(73.1% 0.2158 148.29);
+  --color-green-10-value: oklch(96.76% 0.056 154.18);
+
+  --color-teal-1-value: oklch(22.1% 0.0544 178.74);
+  --color-teal-2-value: oklch(25.06% 0.062 178.76);
+  --color-teal-3-value: oklch(31.5% 0.0767 180.99);
+  --color-teal-4-value: oklch(32.43% 0.0763 180.13);
+  --color-teal-5-value: oklch(43.35% 0.1055 180.97);
+  --color-teal-6-value: oklch(60.71% 0.1485 180.24);
+  --color-teal-7-value: oklch(64.92% 0.1572 181.95);
+  --color-teal-8-value: oklch(57.53% 0.1392 181.66);
+  --color-teal-9-value: oklch(74.56% 0.1765 182.8);
+  --color-teal-10-value: oklch(96.46% 0.056 180.29);
+
+  --color-purple-1-value: oklch(22.34% 0.0779 316.87);
+  --color-purple-2-value: oklch(25.91% 0.0921 314.41);
+  --color-purple-3-value: oklch(31.98% 0.1219 312.41);
+  --color-purple-4-value: oklch(35.93% 0.1504 309.78);
+  --color-purple-5-value: oklch(40.99% 0.1721 307.92);
+  --color-purple-6-value: oklch(55.5% 0.2191 306.12);
+  --color-purple-7-value: oklch(55.5% 0.2186 306.12);
+  --color-purple-8-value: oklch(48.58% 0.2102 305.73);
+  --color-purple-9-value: oklch(69.87% 0.2037 309.51);
+  --color-purple-10-value: oklch(96.1% 0.0304 316.46);
+
+  --color-pink-1-value: oklch(25.7% 0.0668 353.2);
+  --color-pink-2-value: oklch(29.5% 0.1066 353.2);
+  --color-pink-3-value: oklch(33.5% 0.1161 353.2);
+  --color-pink-4-value: oklch(38.5% 0.1203 353.2);
+  --color-pink-5-value: oklch(45.4% 0.1332 353.2);
+  --color-pink-6-value: oklch(54.3% 0.1633 353.2);
+  --color-pink-7-value: oklch(63.4% 0.2345 353.2);
+  --color-pink-8-value: oklch(59.3% 0.2345 353.2);
+  --color-pink-9-value: oklch(78.8% 0.1962 353.2);
+  --color-pink-10-value: oklch(90.7% 0.0626 353.2);
+
+  --color-gray-10-value: oklch(94.9% 0.0033 342.5);
+  --color-gray-9-value: oklch(77% 0.0176 342.5);
+  --color-gray-8-value: oklch(58.6% 0.0209 342.5);
+  --color-gray-7-value: oklch(54% 0.0212 342.5);
+  --color-gray-6-value: oklch(49.2% 0.02 342.5);
+  --color-gray-5-value: oklch(40.2% 0.0153 342.5);
+  --color-gray-4-value: oklch(35% 0.0126 342.5);
+  --color-gray-3-value: oklch(31.4% 0.0112 342.5);
+  --color-gray-2-value: oklch(28.4% 0.0095 342.5);
+  --color-gray-1-value: oklch(25.5% 0.0069 342.5);
+
+  --color-background-1-value: oklch(18.5% 0.0139 341.9);
+  --color-background-2-value: oklch(0% 0.0145 341.9);
+}
+
+@theme inline {
+  --color-blue-1: var(--color-blue-1-value);
+  --color-blue-2: var(--color-blue-2-value);
+  --color-blue-3: var(--color-blue-3-value);
+  --color-blue-4: var(--color-blue-4-value);
+  --color-blue-5: var(--color-blue-5-value);
+  --color-blue-6: var(--color-blue-6-value);
+  --color-blue-7: var(--color-blue-7-value);
+  --color-blue-8: var(--color-blue-8-value);
+  --color-blue-9: var(--color-blue-9-value);
+  --color-blue-10: var(--color-blue-10-value);
+
+  --color-red-1: var(--color-red-1-value);
+  --color-red-2: var(--color-red-2-value);
+  --color-red-3: var(--color-red-3-value);
+  --color-red-4: var(--color-red-4-value);
+  --color-red-5: var(--color-red-5-value);
+  --color-red-6: var(--color-red-6-value);
+  --color-red-7: var(--color-red-7-value);
+  --color-red-8: var(--color-red-8-value);
+  --color-red-9: var(--color-red-9-value);
+  --color-red-10: var(--color-red-10-value);
+
+  --color-amber-1: var(--color-amber-1-value);
+  --color-amber-2: var(--color-amber-2-value);
+  --color-amber-3: var(--color-amber-3-value);
+  --color-amber-4: var(--color-amber-4-value);
+  --color-amber-5: var(--color-amber-5-value);
+  --color-amber-6: var(--color-amber-6-value);
+  --color-amber-7: var(--color-amber-7-value);
+  --color-amber-8: var(--color-amber-8-value);
+  --color-amber-9: var(--color-amber-9-value);
+  --color-amber-10: var(--color-amber-10-value);
+
+  --color-green-1: var(--color-green-1-value);
+  --color-green-2: var(--color-green-2-value);
+  --color-green-3: var(--color-green-3-value);
+  --color-green-4: var(--color-green-4-value);
+  --color-green-5: var(--color-green-5-value);
+  --color-green-6: var(--color-green-6-value);
+  --color-green-7: var(--color-green-7-value);
+  --color-green-8: var(--color-green-8-value);
+  --color-green-9: var(--color-green-9-value);
+  --color-green-10: var(--color-green-10-value);
+
+  --color-teal-1: var(--color-teal-1-value);
+  --color-teal-2: var(--color-teal-2-value);
+  --color-teal-3: var(--color-teal-3-value);
+  --color-teal-4: var(--color-teal-4-value);
+  --color-teal-5: var(--color-teal-5-value);
+  --color-teal-6: var(--color-teal-6-value);
+  --color-teal-7: var(--color-teal-7-value);
+  --color-teal-8: var(--color-teal-8-value);
+  --color-teal-9: var(--color-teal-9-value);
+  --color-teal-10: var(--color-teal-10-value);
+
+  --color-purple-1: var(--color-purple-1-value);
+  --color-purple-2: var(--color-purple-2-value);
+  --color-purple-3: var(--color-purple-3-value);
+  --color-purple-4: var(--color-purple-4-value);
+  --color-purple-5: var(--color-purple-5-value);
+  --color-purple-6: var(--color-purple-6-value);
+  --color-purple-7: var(--color-purple-7-value);
+  --color-purple-8: var(--color-purple-8-value);
+  --color-purple-9: var(--color-purple-9-value);
+  --color-purple-10: var(--color-purple-10-value);
+
+  --color-pink-1: var(--color-pink-1-value);
+  --color-pink-2: var(--color-pink-2-value);
+  --color-pink-3: var(--color-pink-3-value);
+  --color-pink-4: var(--color-pink-4-value);
+  --color-pink-5: var(--color-pink-5-value);
+  --color-pink-6: var(--color-pink-6-value);
+  --color-pink-7: var(--color-pink-7-value);
+  --color-pink-8: var(--color-pink-8-value);
+  --color-pink-9: var(--color-pink-9-value);
+  --color-pink-10: var(--color-pink-10-value);
+
+  --color-gray-1: var(--color-gray-1-value);
+  --color-gray-2: var(--color-gray-2-value);
+  --color-gray-3: var(--color-gray-3-value);
+  --color-gray-4: var(--color-gray-4-value);
+  --color-gray-5: var(--color-gray-5-value);
+  --color-gray-6: var(--color-gray-6-value);
+  --color-gray-7: var(--color-gray-7-value);
+  --color-gray-8: var(--color-gray-8-value);
+  --color-gray-9: var(--color-gray-9-value);
+  --color-gray-10: var(--color-gray-10-value);
+
+  --color-background-1: var(--color-background-1-value);
+  --color-background-2: var(--color-background-2-value);
+}
+
+/* Default variables */
+@theme {
+  --shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06),
+    0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08),
+    0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12),
+    0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --text-tiny: 0.8125rem;
+  --text-tiny--line-height: 1.0625rem;
+}
+
+.dark {
+  color-scheme: dark;
+  color: var(--color-gray-10-value);
+}
+
+html {
+  -webkit-locale: "vi";
+  box-sizing: border-box;
+  tab-size: 4;
+  touch-action: manipulation;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}