fluxgrid-css 1.0.0

package/src/css/spacing.css

@@ -0,0 +1,530 @@
+.c-m-0 {
+  margin: 0;
+}
+.c-m-auto {
+  margin: auto;
+}
+.c-m-1 {
+  margin: 4px;
+}
+.c-m-2 {
+  margin: 8px;
+}
+.c-m-3 {
+  margin: 12px;
+}
+.c-m-4 {
+  margin: 16px;
+}
+.c-m-5 {
+  margin: 20px;
+}
+.c-m-6 {
+  margin: 24px;
+}
+.c-m-8 {
+  margin: 32px;
+}
+.c-m-10 {
+  margin: 40px;
+}
+.c-m-12 {
+  margin: 48px;
+}
+
+.c-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.c-mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+.c-mx-1 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.c-mx-2 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.c-mx-4 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+.c-mx-6 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+.c-mx-8 {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.c-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.c-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.c-my-1 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.c-my-2 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.c-my-4 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.c-my-6 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+.c-my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+.c-my-10 {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.c-my-12 {
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+.c-my-16 {
+  margin-top: 64px;
+  margin-bottom: 64px;
+}
+.c-my-20 {
+  margin-top: 80px;
+  margin-bottom: 80px;
+}
+
+.c-mt-0 {
+  margin-top: 0;
+}
+.c-mt-auto {
+  margin-top: auto;
+}
+.c-mt-px {
+  margin-top: 1px;
+}
+.c-mt-1 {
+  margin-top: 4px;
+}
+.c-mt-2 {
+  margin-top: 8px;
+}
+.c-mt-3 {
+  margin-top: 12px;
+}
+.c-mt-4 {
+  margin-top: 16px;
+}
+.c-mt-5 {
+  margin-top: 20px;
+}
+.c-mt-6 {
+  margin-top: 24px;
+}
+.c-mt-7 {
+  margin-top: 28px;
+}
+.c-mt-8 {
+  margin-top: 32px;
+}
+.c-mt-10 {
+  margin-top: 40px;
+}
+.c-mt-12 {
+  margin-top: 48px;
+}
+.c-mt-14 {
+  margin-top: 56px;
+}
+.c-mt-16 {
+  margin-top: 64px;
+}
+.c-mt-20 {
+  margin-top: 80px;
+}
+.c-mt-24 {
+  margin-top: 96px;
+}
+.c-mt-28 {
+  margin-top: 112px;
+}
+.c-mt-32 {
+  margin-top: 128px;
+}
+
+.c-mb-0 {
+  margin-bottom: 0;
+}
+.c-mb-auto {
+  margin-bottom: auto;
+}
+.c-mb-px {
+  margin-bottom: 1px;
+}
+.c-mb-1 {
+  margin-bottom: 4px;
+}
+.c-mb-2 {
+  margin-bottom: 8px;
+}
+.c-mb-3 {
+  margin-bottom: 12px;
+}
+.c-mb-4 {
+  margin-bottom: 16px;
+}
+.c-mb-5 {
+  margin-bottom: 20px;
+}
+.c-mb-6 {
+  margin-bottom: 24px;
+}
+.c-mb-7 {
+  margin-bottom: 28px;
+}
+.c-mb-8 {
+  margin-bottom: 32px;
+}
+.c-mb-10 {
+  margin-bottom: 40px;
+}
+.c-mb-12 {
+  margin-bottom: 48px;
+}
+.c-mb-14 {
+  margin-bottom: 56px;
+}
+.c-mb-16 {
+  margin-bottom: 64px;
+}
+.c-mb-18 {
+  margin-bottom: 72px;
+}
+.c-mb-20 {
+  margin-bottom: 80px;
+}
+.c-mb-24 {
+  margin-bottom: 96px;
+}
+.c-mb-28 {
+  margin-bottom: 112px;
+}
+.c-mb-32 {
+  margin-bottom: 128px;
+}
+
+.c-ml-0 {
+  margin-left: 0;
+}
+.c-ml-auto {
+  margin-left: auto;
+}
+.c-ml-1 {
+  margin-left: 4px;
+}
+.c-ml-2 {
+  margin-left: 8px;
+}
+.c-ml-4 {
+  margin-left: 16px;
+}
+.c-ml-6 {
+  margin-left: 24px;
+}
+.c-ml-8 {
+  margin-left: 32px;
+}
+
+.c-mr-0 {
+  margin-right: 0;
+}
+.c-mr-auto {
+  margin-right: auto;
+}
+.c-mr-1 {
+  margin-right: 4px;
+}
+.c-mr-2 {
+  margin-right: 8px;
+}
+.c-mr-4 {
+  margin-right: 16px;
+}
+.c-mr-6 {
+  margin-right: 24px;
+}
+.c-mr-8 {
+  margin-right: 32px;
+}
+
+.c-p-0 {
+  padding: 0;
+}
+.c-p-px {
+  padding: 1px;
+}
+.c-p-1 {
+  padding: 4px;
+}
+.c-p-2 {
+  padding: 8px;
+}
+.c-p-3 {
+  padding: 12px;
+}
+.c-p-4 {
+  padding: 16px;
+}
+.c-p-5 {
+  padding: 20px;
+}
+.c-p-6 {
+  padding: 24px;
+}
+.c-p-8 {
+  padding: 32px;
+}
+.c-p-10 {
+  padding: 40px;
+}
+.c-p-12 {
+  padding: 48px;
+}
+.c-p-16 {
+  padding: 64px;
+}
+.c-p-20 {
+  padding: 80px;
+}
+
+.c-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+.c-px-px {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+.c-px-1 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.c-px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.c-px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.c-px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.c-px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.c-px-6 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.c-px-8 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.c-px-10 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+.c-px-12 {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+.c-px-16 {
+  padding-left: 64px;
+  padding-right: 64px;
+}
+
+.c-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.c-py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.c-py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.c-py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.c-py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.c-py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.c-py-5 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.c-py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+.c-py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+.c-py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.c-py-12 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+.c-py-16 {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+.c-py-20 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+.c-py-24 {
+  padding-top: 96px;
+  padding-bottom: 96px;
+}
+.c-py-28 {
+  padding-top: 112px;
+  padding-bottom: 112px;
+}
+.c-py-32 {
+  padding-top: 128px;
+  padding-bottom: 128px;
+}
+
+.c-pt-0 {
+  padding-top: 0;
+}
+.c-pt-1 {
+  padding-top: 4px;
+}
+.c-pt-2 {
+  padding-top: 8px;
+}
+.c-pt-4 {
+  padding-top: 16px;
+}
+.c-pt-6 {
+  padding-top: 24px;
+}
+.c-pt-8 {
+  padding-top: 32px;
+}
+.c-pt-10 {
+  padding-top: 40px;
+}
+.c-pt-12 {
+  padding-top: 48px;
+}
+.c-pt-16 {
+  padding-top: 64px;
+}
+.c-pt-20 {
+  padding-top: 80px;
+}
+.c-pt-24 {
+  padding-top: 96px;
+}
+.c-pt-32 {
+  padding-top: 128px;
+}
+
+.c-pb-0 {
+  padding-bottom: 0;
+}
+.c-pb-1 {
+  padding-bottom: 4px;
+}
+.c-pb-2 {
+  padding-bottom: 8px;
+}
+.c-pb-4 {
+  padding-bottom: 16px;
+}
+.c-pb-6 {
+  padding-bottom: 24px;
+}
+.c-pb-8 {
+  padding-bottom: 32px;
+}
+.c-pb-10 {
+  padding-bottom: 40px;
+}
+.c-pb-12 {
+  padding-bottom: 48px;
+}
+.c-pb-16 {
+  padding-bottom: 64px;
+}
+.c-pb-20 {
+  padding-bottom: 80px;
+}
+.c-pb-24 {
+  padding-bottom: 96px;
+}
+.c-pb-32 {
+  padding-bottom: 128px;
+}
+
+.c-pl-0 {
+  padding-left: 0;
+}
+.c-pl-2 {
+  padding-left: 8px;
+}
+.c-pl-4 {
+  padding-left: 16px;
+}
+.c-pl-6 {
+  padding-left: 24px;
+}
+.c-pl-8 {
+  padding-left: 32px;
+}
+
+.c-pr-0 {
+  padding-right: 0;
+}
+.c-pr-2 {
+  padding-right: 8px;
+}
+.c-pr-4 {
+  padding-right: 16px;
+}
+.c-pr-6 {
+  padding-right: 24px;
+}
+.c-pr-8 {
+  padding-right: 32px;
+}

package/src/css/tokens.css

@@ -0,0 +1,180 @@
+:root {
+  --c-font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --c-font-mono:
+    "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
+  --c-font-serif: Georgia, "Times New Roman", serif;
+
+  --c-text-xs: 0.75rem;
+  --c-text-sm: 0.875rem;
+  --c-text-base: 1rem;
+  --c-text-lg: 1.125rem;
+  --c-text-xl: 1.25rem;
+  --c-text-2xl: 1.5rem;
+  --c-text-3xl: 1.875rem;
+  --c-text-4xl: 2.25rem;
+  --c-text-5xl: 3rem;
+  --c-text-6xl: 3.75rem;
+  --c-text-7xl: 4.5rem;
+  --c-text-8xl: 6rem;
+
+  --c-weight-thin: 100;
+  --c-weight-light: 300;
+  --c-weight-normal: 400;
+  --c-weight-medium: 500;
+  --c-weight-semibold: 600;
+  --c-weight-bold: 700;
+  --c-weight-extrabold: 800;
+  --c-weight-black: 900;
+
+  --c-leading-none: 1;
+  --c-leading-tight: 1.25;
+  --c-leading-snug: 1.375;
+  --c-leading-normal: 1.5;
+  --c-leading-relaxed: 1.625;
+  --c-leading-loose: 2;
+
+  --c-tracking-tighter: -0.05em;
+  --c-tracking-tight: -0.025em;
+  --c-tracking-normal: 0em;
+  --c-tracking-wide: 0.025em;
+  --c-tracking-wider: 0.05em;
+  --c-tracking-widest: 0.1em;
+
+  --c-space-0: 0px;
+  --c-space-px: 1px;
+  --c-space-0-5: 2px;
+  --c-space-1: 4px;
+  --c-space-1-5: 6px;
+  --c-space-2: 8px;
+  --c-space-2-5: 10px;
+  --c-space-3: 12px;
+  --c-space-3-5: 14px;
+  --c-space-4: 16px;
+  --c-space-5: 20px;
+  --c-space-6: 24px;
+  --c-space-7: 28px;
+  --c-space-8: 32px;
+  --c-space-9: 36px;
+  --c-space-10: 40px;
+  --c-space-11: 44px;
+  --c-space-12: 48px;
+  --c-space-14: 56px;
+  --c-space-16: 64px;
+  --c-space-18: 72px;
+  --c-space-20: 80px;
+  --c-space-24: 96px;
+  --c-space-28: 112px;
+  --c-space-32: 128px;
+  --c-space-36: 144px;
+  --c-space-40: 160px;
+
+  --c-radius-none: 0px;
+  --c-radius-sm: 4px;
+  --c-radius-md: 8px;
+  --c-radius-lg: 12px;
+  --c-radius-xl: 16px;
+  --c-radius-2xl: 24px;
+  --c-radius-3xl: 32px;
+  --c-radius-full: 9999px;
+
+  --c-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --c-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.1);
+  --c-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --c-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);
+  --c-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16);
+  --c-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2);
+  --c-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.08);
+  --c-shadow-none: none;
+
+  --c-duration-75: 75ms;
+  --c-duration-100: 100ms;
+  --c-duration-150: 150ms;
+  --c-duration-200: 200ms;
+  --c-duration-300: 300ms;
+  --c-duration-500: 500ms;
+  --c-duration-700: 700ms;
+  --c-duration-1000: 1000ms;
+
+  --c-ease-linear: linear;
+  --c-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --c-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --c-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --c-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --c-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  --c-white: #ffffff;
+  --c-black: #000000;
+
+  --c-gray-50: #f9fafb;
+  --c-gray-100: #f3f4f6;
+  --c-gray-200: #e5e7eb;
+  --c-gray-300: #d1d5db;
+  --c-gray-400: #9ca3af;
+  --c-gray-500: #6b7280;
+  --c-gray-600: #4b5563;
+  --c-gray-700: #374151;
+  --c-gray-800: #1f2937;
+  --c-gray-900: #111827;
+  --c-gray-950: #030712;
+
+  --c-primary-50: #eff6ff;
+  --c-primary-100: #dbeafe;
+  --c-primary-200: #bfdbfe;
+  --c-primary-300: #93c5fd;
+  --c-primary-400: #60a5fa;
+  --c-primary-500: #3b82f6;
+  --c-primary-600: #2563eb;
+  --c-primary-700: #1d4ed8;
+  --c-primary-800: #1e40af;
+  --c-primary-900: #1e3a8a;
+
+  --c-success-50: #f0fdf4;
+  --c-success-100: #dcfce7;
+  --c-success-500: #22c55e;
+  --c-success-600: #16a34a;
+  --c-success-700: #15803d;
+
+  --c-warning-50: #fffbeb;
+  --c-warning-100: #fef3c7;
+  --c-warning-500: #f59e0b;
+  --c-warning-600: #d97706;
+  --c-warning-700: #b45309;
+
+  --c-error-50: #fef2f2;
+  --c-error-100: #fee2e2;
+  --c-error-500: #ef4444;
+  --c-error-600: #dc2626;
+  --c-error-700: #b91c1c;
+
+  --c-info-50: #f0f9ff;
+  --c-info-100: #e0f2fe;
+  --c-info-500: #0ea5e9;
+  --c-info-600: #0284c7;
+  --c-info-700: #0369a1;
+
+  --c-bg: var(--c-white);
+  --c-fg: var(--c-gray-900);
+  --c-muted: var(--c-gray-500);
+  --c-border: var(--c-gray-200);
+  --c-focus: var(--c-primary-500);
+  --c-accent: var(--c-primary-600);
+}
+
+[data-theme="dark"] {
+  --c-bg: var(--c-gray-950);
+  --c-fg: var(--c-gray-50);
+  --c-muted: var(--c-gray-400);
+  --c-border: var(--c-gray-700);
+  --c-accent: var(--c-primary-400);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --c-bg: var(--c-gray-950);
+    --c-fg: var(--c-gray-50);
+    --c-muted: var(--c-gray-400);
+    --c-border: var(--c-gray-700);
+    --c-accent: var(--c-primary-400);
+  }
+}