matrix-design-system 1.0.0

package/src/styles/theme.css

@@ -0,0 +1,254 @@
+/**
+ * The design system's design tokens: colours, fonts, shadows and the overridden breakpoint scale.
+ * Tailwind v4 turns every entry here into a utility, so consumers can write `bg-general-background`
+ * or `md:` (992px, not Tailwind's 768px) against this theme.
+ *
+ * It also defines the `hide-scrollbar` utility, which base.css and the site's article styling both
+ * use: a token-only import of this file would break them.
+ */
+@theme {
+    --font-sans: "Open Sans", Arial, sans-serif;
+    --font-mono: "Courier Prime", "Courier New", monospace;
+
+    --color-primary: #00ff41;
+    --color-primary-alpha-0: #00ff4100;
+    --color-secondary: #00cc33;
+    --color-primary-dark: #003d10;
+    --color-primary-light: #39ff14;
+    --color-general-background: #001100;
+    --color-general-background-alpha-60: #001100a0;
+    --color-text-above-primary: #000000;
+    --color-primary-text: #e8ffe8;
+    --color-secondary-text: #00cc33;
+    --color-accent: #39ff14;
+    --color-accent-alpha-70: #39ff14b3;
+    --color-accent-alpha-50: #39ff1480;
+    --color-accent-alpha-40: #39ff1466;
+    --color-accent-alpha-25: #39ff1440;
+    --color-accent-alpha-15: #39ff1426;
+    --color-accent-alpha-10: #39ff141a;
+    --color-general-background-light: #002200;
+    --color-box-shadow-light: rgba(0, 255, 65, 0.3);
+    --color-divider: #00cc33;
+    --color-confirm: #ff2a2a;
+    --color-confirm-alpha-60: #ff2a2aa0;
+    --color-confirm-alpha-25: #ff2a2a40;
+    --color-confirm-alpha-20: #ff2a2a33;
+    --color-undo: #33aaff;
+    --color-undo-alpha-60: #33aaffa0;
+    --color-undo-alpha-25: #33aaff40;
+    --color-undo-alpha-20: #33aaff33;
+    --color-black-alpha-75: #000000bf;
+
+    --spacing: 0.25rem;
+
+    --shadow-2xs: 0 0 1px var(--color-accent-alpha-40);
+    --shadow-xs: 0 0px 2px 0 var(--color-accent-alpha-40);
+    --shadow-sm: 0 0px 3px 0 var(--color-accent-alpha-40);
+    --shadow-md: 0 0px 6px 0 var(--color-accent-alpha-40);
+    --shadow-lg: 0 0px 15px 0 var(--color-accent-alpha-40);
+    --shadow-xl: 0 0px 25px 0 var(--color-accent-alpha-40);
+    --shadow-2xl: 0 0px 50px 0 var(--color-accent-alpha-40);
+
+    --inset-shadow-2xs: inset 0 1px 0 var(--color-accent-alpha-10);
+    --inset-shadow-xs: inset 0 1px 1px var(--color-accent-alpha-10);
+    --inset-shadow-sm: inset 0 2px 4px var(--color-accent-alpha-10);
+
+    --drop-shadow-xs: 0 1px 1px var(--color-accent-alpha-10);
+    --drop-shadow-sm: 0 1px 2px var(--color-accent-alpha-25);
+    --drop-shadow-md: 0 3px 3px var(--color-accent-alpha-25);
+    --drop-shadow-lg: 0 4px 4px var(--color-accent-alpha-25);
+    --drop-shadow-xl: 0 9px 7px var(--color-accent-alpha-25);
+    --drop-shadow-2xl: 0 25px 25px var(--color-accent-alpha-25);
+
+    --text-shadow-2xs: 0px 0px 1px var(--color-accent-alpha-50), 0px 0px 6px var(--color-accent-alpha-25);
+    --text-shadow-xs: 0px 0px 3px var(--color-accent-alpha-50), 0px 0px 8px var(--color-accent-alpha-25);
+    --text-shadow-sm:
+        0px 0px 5px var(--color-accent-alpha-50), 0px 0px 10px var(--color-accent-alpha-25),
+        0px 0px 15px var(--color-accent-alpha-10);
+    --text-shadow-md:
+        0px 0px 7px var(--color-accent-alpha-50), 0px 0px 12px var(--color-accent-alpha-25),
+        0px 0px 17px var(--color-accent-alpha-10);
+    --text-shadow-lg:
+        0px 0px 9px var(--color-accent-alpha-50), 0px 0px 14px var(--color-accent-alpha-25),
+        0px 0px 19px var(--color-accent-alpha-10);
+
+    --blur-xs: 1px;
+    --blur-sm: 4px;
+    --blur-md: 8px;
+    --blur-lg: 12px;
+    --blur-xl: 16px;
+    --blur-2xl: 20px;
+    --blur-3xl: 24px;
+
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+
+    --leading-tight: 1.4;
+    --leading-snug: 1.6;
+    --leading-normal: 1.8;
+    --leading-relaxed: 2;
+    --leading-loose: 2.2;
+
+    --breakpoint-xs: 576px;
+    --breakpoint-sm: 768px;
+    --breakpoint-md: 992px;
+    --breakpoint-lg: 1200px;
+    --breakpoint-xl: 1600px;
+    --breakpoint-2xl: 2000px;
+
+    --animate-glitch: glitch 2s infinite;
+    --animate-pulse: pulse 2s infinite;
+    --animate-bounce: bounce 2s infinite;
+    --animate-opacity: opacity 0.3s;
+    --animate-blink: blink 1s infinite;
+    /* Every easter egg opens the same way: a plain fade, no slide and no scale. */
+    --animate-ee-fade: ee-fade 0.35s ease-out both;
+
+    @keyframes ee-fade {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes glitch {
+        0%,
+        100% {
+            transform: translateX(0);
+        }
+
+        20% {
+            transform: translateX(-6px);
+        }
+
+        40% {
+            transform: translateX(6px);
+        }
+
+        60% {
+            transform: translateX(-2px);
+        }
+
+        80% {
+            transform: translateX(2px);
+        }
+    }
+
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 var(--color-accent-alpha-70);
+        }
+
+        70% {
+            box-shadow: 0 0 0 10px var(--color-primary-alpha-0);
+        }
+
+        100% {
+            box-shadow: 0 0 0 0 var(--color-primary-alpha-0);
+        }
+    }
+
+    @keyframes bounce {
+        0%,
+        20%,
+        50%,
+        80%,
+        100% {
+            transform: translateY(0);
+        }
+
+        40% {
+            transform: translateY(-8px);
+        }
+
+        60% {
+            transform: translateY(-4px);
+        }
+    }
+
+    @keyframes opacity {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes blink {
+        0%,
+        50% {
+            opacity: 1;
+        }
+
+        51%,
+        100% {
+            opacity: 0;
+        }
+    }
+}
+
+@utility hide-scrollbar {
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    & {
+        scrollbar-width: none;
+    }
+}