@redgate/brand-web-toolkit 0.0.1 → 0.0.3

package/tailwindcss/input.css

@@ -0,0 +1,545 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import 'tailwindcss';
+
+@font-face {
+    font-family: Gatebase;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://cdn.red-gate.com/assets/fonts/redgate-type/redgate-type-medium.woff') format('woff');
+}
+
+@theme {
+    /* COLOURS */
+    /* Base */
+    --color-*: initial;
+    --color-white: #FFFFFF;
+    --color-black: #000000;
+    --color-transparent: rgba(255, 255, 255, 0);
+
+    /* Gray */
+    --color-gray-25: #FBFBFB;
+    --color-gray-50: #F7F7F7;
+    --color-gray-100: #F2F2F2;
+    --color-gray-200: #EBEBEB;
+    --color-gray-300: #DCDCDC;
+    --color-gray-400: #B6B6B6;
+    --color-gray-500: #858585;
+    --color-gray-600: #6E6E6E;
+    --color-gray-700: #373737;
+    --color-gray-800: #333333;
+    --color-gray-900: #222222;
+    --color-gray-950: #030712;
+
+    /* Red */
+    --color-red-25: #FBF2F2;
+    --color-red-50: #FBEAEA;
+    --color-red-100: #FADCDC;
+    --color-red-200: #EB9999;
+    --color-red-300: #E06666;
+    --color-red-400: #FF2828;
+    --color-red-500: #E51414;
+    --color-red-600: #CC0000;
+    --color-red-700: #A30000;
+    --color-red-800: #7A0000;
+    --color-red-900: #4F0101;
+    --color-red-950: #2C0101;
+
+    /* Blue */
+    --color-blue-25: #EBF3FC;
+    --color-blue-50: #D8E7F9;
+    --color-blue-100: #ADC5E7;
+    --color-blue-200: #85A7DA;
+    --color-blue-300: #5C8ACE;
+    --color-blue-400: #3C85DF;
+    --color-blue-500: #336DC2;
+    --color-blue-600: #29579B;
+    --color-blue-700: #1F4174;
+    --color-blue-800: #183559;
+    --color-blue-900: #0A1627;
+    --color-blue-950: #050B13;
+
+    /* Indigo */
+    --color-indigo-25: #F3F2F6;
+    --color-indigo-50: #E7E6ED;
+    --color-indigo-100: #D0CDDB;
+    --color-indigo-200: #A09BB7;
+    --color-indigo-300: #716892;
+    --color-indigo-400: #41366E;
+    --color-indigo-500: #12044A;
+    --color-indigo-600: #100443;
+    --color-indigo-700: #0E033B;
+    --color-indigo-800: #0B022C;
+    --color-indigo-900: #07021E;
+    --color-indigo-950: #04010F;
+
+    /* Orange */
+    --color-orange-25: #FFF9F2;
+    --color-orange-50: #FFF4E5;
+    --color-orange-100: #FFEBCC;
+    --color-orange-200: #FFD699;
+    --color-orange-300: #FEC267;
+    --color-orange-400: #FC9003;
+    --color-orange-500: #CA7302;
+    --color-orange-600: #975602;
+    --color-orange-700: #653A01;
+    --color-orange-800: #4C2B01;
+    --color-orange-900: #321D01;
+    --color-orange-950: #190E00;
+
+    /* Yellow */
+    --color-yellow-25: #FFFCEB;
+    --color-yellow-50: #FFF9D7;
+    --color-yellow-100: #FFF4AE;
+    --color-yellow-200: #FFEE86;
+    --color-yellow-300: #FFE95D;
+    --color-yellow-400: #FFE335;
+    --color-yellow-500: #CCB62A;
+    --color-yellow-600: #998820;
+    --color-yellow-700: #665B15;
+    --color-yellow-800: #4D4410;
+    --color-yellow-900: #332D0B;
+    --color-yellow-950: #422006;
+
+    /* Green */
+    --color-green-25: #F0FDF4;
+    --color-green-50: #D1EED2;
+    --color-green-100: #A3DEA5;
+    --color-green-200: #76CD78;
+    --color-green-300: #48BD4B;
+    --color-green-400: #1AAC1E;
+    --color-green-500: #158A18;
+    --color-green-600: #106712;
+    --color-green-700: #0A450C;
+    --color-green-800: #083409;
+    --color-green-900: #052206;
+    --color-green-950: #031103;
+
+    /* PASS */
+    --color-pass-pink: #9933FF;
+    --color-pass-orange: #FF8A33;
+    --color-pass-yellow: #FFFF00;
+    --color-pass-green: #33FF99;
+
+    /* COLOUR MODES */
+    --color-text-primary: var(--color-gray-950);
+    --color-text-primary_hover: var(--color-red-600);
+    --color-text-primary_on-accent-subtle: var(--color-red-950);
+    --color-text-primary_on-accent-strong: var(--color-white);
+    --color-text-primary_on-accent-strongest: var(--color-white);
+    --color-text-primary_on-accent-strongest-alt: var(--color-white);
+    --color-text-secondary: var(--color-gray-700);
+    --color-text-secondary_hover: var(--color-gray-950);
+    --color-text-secondary_on-accent-subtle: var(--color-red-700);
+    --color-text-secondary_on-accent-strong: var(--color-red-50);
+    --color-text-secondary_on-accent-strongest: var(--color-red-50);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-text-tertiary_hover: var(--color-gray-700);
+    --color-text-tertiary_on-accent-subtle: var(--color-red-600);
+    --color-text-tertiary_on-accent-strong: var(--color-red-100);
+    --color-text-tertiary_on-accent-strongest: var(--color-red-100);
+    --color-text-accent-primary: var(--color-red-600);
+    --color-text-accent-primary_hover: var(--color-red-700);
+    --color-text-accent-primary_on-accent-subtle: var(--color-red-600);
+    --color-text-accent-primary_on-accent-strong: var(--color-red-100);
+    --color-text-accent-primary_on-accent-strongest: var(--color-red-100);
+    --color-text-accent-secondary: var(--color-red-600);
+    --color-text-accent-secondary_hover: var(--color-red-700);
+    --color-text-accent-secondary_on-accent-subtle: var(--color-red-600);
+    --color-text-accent-secondary_on-accent-strong: var(--color-red-600);
+    --color-text-accent-secondary_on-accent-strongest: var(--color-red-600);
+    --color-text-accent-tertiary: var(--color-red-500);
+    --color-text-accent-tertiary_on-hover: var(--color-red-600);
+    --color-text-accent-tertiary_on-accent-subtle: var(--color-red-600);
+    --color-text-accent-tertiary_on-accent-strong: var(--color-red-600);
+    --color-text-accent-tertiary_on-accent-strongest: var(--color-red-600);
+    --color-border-primary: var(--color-gray-500);
+    --color-border-primary_on-accent-subtle: var(--color-gray-500);
+    --color-border-primary_on-accent-strong: var(--color-gray-500);
+    --color-border-primary_on-accent-strongest: var(--color-gray-500);
+    --color-border-secondary: var(--color-gray-400);
+    --color-border-secondary_on-accent-subtle: var(--color-gray-400);
+    --color-border-secondary_on-accent-strong: var(--color-gray-400);
+    --color-border-secondary_on-accent-strongest: var(--color-gray-400);
+    --color-border-secondary_alt: rgba(0, 0, 0, 0.1);
+    --color-border-tertiary: var(--color-gray-300);
+    --color-border-tertiary_on-accent-subtle: var(--color-gray-300);
+    --color-border-tertiary_on-accent-strong: var(--color-gray-300);
+    --color-border-tertiary_on-accent-strongest: var(--color-gray-300);
+    --color-border-accent: var(--color-red-600);
+    --color-border-accent_on-accent-subtle: var(--color-red-400);
+    --color-border-accent_on-accent-strong: var(--color-red-600);
+    --color-border-accent_on-accent-strongest: var(--color-red-600);
+    --color-border-accent_alt: var(--color-red-600);
+    --color-border-accent_interactive: var(--color-blue-600);
+    --color-border-accent-interactive_on-subtle: var(--color-blue-600);
+    --color-border-accent-interactive_on-strong: var(--color-blue-600);
+    --color-border-accent-interactive_on-strongest: var(--color-blue-600);
+    --color-border-error: var(--color-red-500);
+    --color-border-error_subtle: var(--color-red-300);
+    --color-fg-primary: 0;
+    --color-fg-primary_alt: 0;
+    --color-fg-primary_on-accent-subtle: 0;
+    --color-fg-primary_on-accent-strong: 0;
+    --color-fg-primary_on-accent-strongest: 0;
+    --color-fg-primary_on-accent-strongest-alt: var(--color-white);
+    --color-fg-secondary: var(--color-gray-700);
+    --color-fg-secondary_hover: var(--color-gray-950);
+    --color-fg-secondary_on-accent-subtle: var(--color-red-700);
+    --color-fg-secondary_on-accent-strong: var(--color-red-50);
+    --color-fg-secondary_on-accent-strongest: var(--color-red-50);
+    --color-fg-tertiary: var(--color-gray-600);
+    --color-fg-tertiary_hover: var(--color-gray-700);
+    --color-fg-tertiary_on-accent-subtle: var(--color-red-600);
+    --color-fg-tertiary_on-accent-strong: var(--color-red-100);
+    --color-fg-tertiary_on-accent-strongest: var(--color-red-100);
+    --color-fg-accent-primary: var(--color-red-600);
+    --color-fg-accent-primary_alt: var(--color-fg-accent-primary);
+    --color-fg-accent-secondary: var(--color-red-500);
+    --color-fg-accent-secondary_alt: var(--color-fg-accent-secondary);
+    --color-fg-accent-secondary_hover: var(--color-red-600);
+    --color-fg-error-primary: var(--color-red-600);
+    --color-fg-error-secondary: var(--color-red-500);
+    --color-fg-warning-primary: var(--color-yellow-600);
+    --color-fg-warning-secondary: var(--color-yellow-500);
+    --color-fg-success-primary: var(--color-green-600);
+    --color-fg-success-secondary: var(--color-green-500);
+    --color-bg-quaternary: var(--color-gray-200);
+    --color-bg-quaternary-hover: var(--color-gray-200);
+    --color-bg-overlay: var(--color-gray-950);
+    --color-bg-primary: var(--color-white);
+    --color-bg-primary_hover: var(--color-gray-50);
+    --color-bg-primary_on-accent-subtle: var(--color-red-25);
+    --color-bg-primary_alt: var(--color-white);
+    --color-bg-primary-static: var(--color-gray-950);
+    --color-bg-secondary: var(--color-gray-50);
+    --color-bg-secondary_hover: var(--color-gray-100);
+    --color-bg-secondary_alt: var(--color-gray-50);
+    --color-bg-secondary-static: var(--color-gray-600);
+    --color-bg-tertiary: var(--color-gray-100);
+    --color-bg-tertiary-hover: var(--color-gray-200);
+    --color-bg-accent-subtlest: var(--color-red-25);
+    --color-bg-accent-subtlest-hover: var(--color-red-50);
+    --color-bg-accent-subtle: var(--color-red-100);
+    --color-bg-accent-subtle-hover: var(--color-red-50);
+    --color-bg-accent-subtle_alt: var(--color-red-50);
+    --color-bg-accent-strong: var(--color-red-800);
+    --color-bg-accent-strong-hover: var(--color-red-700);
+    --color-bg-accent-strongest: var(--color-red-600);
+    --color-bg-accent-strongest_hover: var(--color-red-700);
+    --color-bg-accent-strongest-alt: var(--color-red-600);
+    --color-bg-accent-strongest-alt_hover: var(--color-red-700);
+    --color-bg-accent-strongest-alt_on-subtle: var(--color-red-600);
+    --color-bg-accent-strongest-alt_on-strong: var(--color-red-600);
+    --color-bg-accent-strongest-alt_on-strongest: var(--color-black);
+    --color-bg-accent-strong-primary-alt: var(--color-red-600);
+    --color-bg-accent-strong-primary-alt-hover: var(--color-red-600);
+    --color-bg-error-primary: var(--color-red-50);
+    --color-bg-error-secondary: var(--color-red-100);
+    --color-bg-error-solid: var(--color-red-600);
+    --color-bg-error-solid_hover: var(--color-red-700);
+    --color-bg-warning-primary: var(--color-yellow-50);
+    --color-bg-warning-secondary: var(--color-yellow-100);
+    --color-bg-warning-solid: var(--color-yellow-600);
+    --color-bg-success-primary: var(--color-green-50);
+    --color-bg-success-secondary: var(--color-green-100);
+    --color-bg-success-solid: var(--color-green-600);
+    --color-focus-ring: var(--color-red-500);
+    --color-focus-ring-error: var(--color-red-500);
+    --color-shadow-xs: rgba(0, 0, 0, 0.05);
+    --color-shadow-sm_01: rgba(0, 0, 0, 0.1);
+    --color-shadow-sm_02: rgba(0, 0, 0, 0.1);
+    --color-shadow-md_01: rgba(0, 0, 0, 0.1);
+    --color-shadow-md_02: rgba(0, 0, 0, 0.06);
+    --color-shadow-lg_01: rgba(0, 0, 0, 0.08);
+    --color-shadow-lg_02: rgba(0, 0, 0, 0.03);
+    --color-shadow-lg_03: rgba(0, 0, 0, 0.04);
+    --color-shadow-xl_01: rgba(0, 0, 0, 0.08);
+    --color-shadow-xl_02: rgba(0, 0, 0, 0.03);
+    --color-shadow-xl_03: rgba(0, 0, 0, 0.04);
+    --color-shadow-2xl_01: rgba(0, 0, 0, 0.18);
+    --color-shadow-2xl_02: rgba(0, 0, 0, 0.04);
+    --color-shadow-3xl_01: rgba(0, 0, 0, 0.14);
+    --color-shadow-3xl_02: rgba(0, 0, 0, 0.04);
+    --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
+    --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
+
+    /* SPACING */
+    --spacing: 4px;
+    --spacing-none: calc(0 * var(--spacing));
+    --spacing-xxs: calc(0.5 * var(--spacing));
+    --spacing-xs: calc(1 * var(--spacing));
+    --spacing-sm: calc(1.5 * var(--spacing));
+    --spacing-md: calc(2 * var(--spacing));
+    --spacing-lg: calc(3 * var(--spacing));
+    --spacing-xl: calc(4 * var(--spacing));
+    --spacing-2xl: calc(5 * var(--spacing));
+    --spacing-3xl: calc(6 * var(--spacing));
+    --spacing-4xl: calc(8 * var(--spacing));
+    --spacing-5xl: calc(10 * var(--spacing));
+    --spacing-6xl: calc(12 * var(--spacing));
+    --spacing-7xl: calc(16 * var(--spacing));
+    --spacing-8xl: calc(20 * var(--spacing));
+    --spacing-9xl: calc(24 * var(--spacing));
+    --spacing-10xl: calc(32 * var(--spacing));
+    --spacing-11xl: calc(40 * var(--spacing));
+
+    /* RADIUS */
+    --radius-*: initial;
+    --radius-none: 0;
+    --radius-xxs: 2px;
+    --radius-xs: 4px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-2xl: 16px;
+    --radius-3xl: 20px;
+    --radius-4xl: 24px;
+    --radius-full: 9999px;
+
+    /* Radius modes */
+    --radius-button-default: var(--radius-sm);
+    --radius-field-default: var(--radius-sm);
+    --radius-checkbox-default: var(--radius-xs);
+    --radius-dropdown: var(--radius-sm);
+    --radius-dropdown-item: var(--radius-sm);
+    --radius-card-default: var(--radius-lg);
+    --radius-card-medium: var(--radius-2xl);
+
+    /* WIDTHS */
+    --width-xxs: calc(80 * var(--spacing));
+    --width-xs: calc(96 * var(--spacing));
+    --width-sm: calc(120 * var(--spacing));
+    --width-md: calc(140 * var(--spacing));
+    --width-lg: calc(160 * var(--spacing));
+    --width-xl: calc(192 * var(--spacing));
+    --width-2xl: calc(256 * var(--spacing));
+    --width-3xl: calc(320 * var(--spacing));
+    --width-4xl: calc(360 * var(--spacing));
+    --width-5xl: calc(400 * var(--spacing));
+    --width-6xl: calc(480 * var(--spacing));
+    --paragraph-max-width: calc(180 * var(--spacing));
+
+    /* TYPOGRAPHY */
+    /* Font family */
+    --font-family-display: "Gatebase", sans-serif;
+    --font-family-body: "Roboto", sans-serif;
+    --default-font-family: var(--font-family-body);
+
+    /* Font sizes */
+    --text-xs: 12px;
+    --text-sm: 14px;
+    --text-md: 16px;
+    --text-lg: 18px;
+    --text-xl: 20px;
+    --text-2xl: 24px;
+    --text-3xl: 30px;
+    --text-4xl: 36px;
+    --text-display-xs: 24px;
+    --text-display-sm: 30px;
+    --text-display-md: 36px;
+    --text-display-lg: 48px;
+    --text-display-xl: 60px;
+    --text-display-2xl: 72px;
+    --text-display-3xl: 128px;
+
+    /* Line heights */
+    --text-xs--line-height: 18px;
+    --text-sm--line-height: 20px;
+    --text-md--line-height: 24px;
+    --text-lg--line-height: 28px;
+    --text-xl--line-height: 30px;
+    --text-display-xs--line-height: 32px;
+    --text-display-sm--line-height: 38px;
+    --text-display-md--line-height: 44px;
+    --text-display-lg--line-height: 48px;
+    --text-display-xl--line-height: 60px;
+    --text-display-2xl--line-height: 72px;
+    --text-display-3xl--line-height: 90px;
+}
+
+/* Dark mode overrides, using @variant rule */
+:root {
+    @variant dark {
+        --color-text-primary: var(--color-gray-25);
+        --color-text-primary_hover: var(--color-gray-50);
+        --color-text-primary_on-accent-subtle: var(--color-red-25);
+        --color-text-primary_on-accent-strong: var(--color-red-25);
+        --color-text-primary_on-accent-strongest: var(--color-red-25);
+        --color-text-primary_on-accent-strongest-alt: var(--color-white);
+        --color-text-secondary: var(--color-gray-100);
+        --color-text-secondary_hover: var(--color-gray-50);
+        --color-text-secondary_on-accent-subtle: var(--color-red-100);
+        --color-text-secondary_on-accent-strong: var(--color-red-50);
+        --color-text-secondary_on-accent-strongest: var(--color-red-50);
+        --color-text-tertiary: var(--color-gray-400);
+        --color-text-tertiary_hover: var(--color-gray-300);
+        --color-text-tertiary_on-accent-subtle: var(--color-red-100);
+        --color-text-tertiary_on-accent-strong: var(--color-red-100);
+        --color-text-tertiary_on-accent-strongest: var(--color-red-100);
+        --color-text-accent-primary: var(--color-red-200);
+        --color-text-accent-primary_hover: var(--color-red-100);
+        --color-text-accent-primary_on-accent-subtle: var(--color-red-100);
+        --color-text-accent-primary_on-accent-strong: var(--color-red-100);
+        --color-text-accent-primary_on-accent-strongest: var(--color-red-100);
+        --color-text-accent-secondary: var(--color-red-200);
+        --color-text-accent-secondary_hover: var(--color-red-200);
+        --color-text-accent-secondary_on-accent-subtle: var(--color-red-200);
+        --color-text-accent-secondary_on-accent-strong: var(--color-red-200);
+        --color-text-accent-secondary_on-accent-strongest: var(--color-red-200);
+        --color-text-accent-tertiary: var(--color-red-300);
+        --color-text-accent-tertiary_on-hover: var(--color-red-300);
+        --color-text-accent-tertiary_on-accent-subtle: var(--color-red-300);
+        --color-text-accent-tertiary_on-accent-strong: var(--color-red-300);
+        --color-text-accent-tertiary_on-accent-strongest: var(--color-red-300);
+        --color-border-primary: var(--color-gray-300);
+        --color-border-primary_on-accent-subtle: var(--color-gray-300);
+        --color-border-primary_on-accent-strong: var(--color-gray-300);
+        --color-border-primary_on-accent-strongest: var(--color-gray-300);
+        --color-border-secondary: var(--color-gray-400);
+        --color-border-secondary_on-accent-subtle: var(--color-gray-400);
+        --color-border-secondary_on-accent-strong: var(--color-gray-400);
+        --color-border-secondary_on-accent-strongest: var(--color-gray-400);
+        --color-border-secondary_alt: 0;
+        --color-border-tertiary: var(--color-gray-500);
+        --color-border-tertiary_on-accent-subtle: var(--color-gray-500);
+        --color-border-tertiary_on-accent-strong: var(--color-gray-500);
+        --color-border-tertiary_on-accent-strongest: var(--color-gray-500);
+        --color-border-accent: var(--color-red-500);
+        --color-border-accent_on-accent-subtle: var(--color-red-200);
+        --color-border-accent_on-accent-strong: var(--color-red-500);
+        --color-border-accent_on-accent-strongest: var(--color-red-500);
+        --color-border-accent_alt: 0;
+        --color-border-accent_interactive: var(--color-blue-400);
+        --color-border-accent-interactive_on-subtle: var(--color-blue-400);
+        --color-border-accent-interactive_on-strong: var(--color-blue-400);
+        --color-border-accent-interactive_on-strongest: var(--color-blue-400);
+        --color-border-error: var(--color-red-400);
+        --color-border-error_subtle: var(--color-red-500);
+        --color-fg-primary: var(--color-white);
+        --color-fg-primary_alt: var(--color-white);
+        --color-fg-primary_on-accent-subtle: var(--color-white);
+        --color-fg-primary_on-accent-strong: var(--color-white);
+        --color-fg-primary_on-accent-strongest: var(--color-white);
+        --color-fg-primary_on-accent-strongest-alt: var(--color-red-25);
+        --color-fg-secondary: var(--color-gray-100);
+        --color-fg-secondary_hover: var(--color-gray-50);
+        --color-fg-secondary_on-accent-subtle: var(--color-red-100);
+        --color-fg-secondary_on-accent-strong: var(--color-red-50);
+        --color-fg-secondary_on-accent-strongest: var(--color-red-50);
+        --color-fg-tertiary: var(--color-gray-400);
+        --color-fg-tertiary_hover: var(--color-gray-300);
+        --color-fg-tertiary_on-accent-subtle: var(--color-red-100);
+        --color-fg-tertiary_on-accent-strong: var(--color-red-100);
+        --color-fg-tertiary_on-accent-strongest: var(--color-red-100);
+        --color-fg-accent-primary: var(--color-red-500);
+        --color-fg-accent-primary_alt: 0;
+        --color-fg-accent-secondary: var(--color-red-500);
+        --color-fg-accent-secondary_alt: 0;
+        --color-fg-accent-secondary_hover: 0;
+        --color-fg-error-primary: var(--color-red-500);
+        --color-fg-error-secondary: var(--color-red-400);
+        --color-fg-warning-primary: var(--color-yellow-500);
+        --color-fg-warning-secondary: var(--color-yellow-400);
+        --color-fg-success-primary: var(--color-green-500);
+        --color-fg-success-secondary: var(--color-green-400);
+        --color-bg-quaternary: var(--color-gray-700);
+        --color-bg-quaternary-hover: var(--color-gray-700);
+        --color-bg-overlay: var(--color-gray-800);
+        --color-bg-primary: var(--color-gray-950);
+        --color-bg-primary_hover: var(--color-gray-900);
+        --color-bg-primary_on-accent-subtle: var(--color-red-800);
+        --color-bg-primary_alt: var(--color-bg-secondary);
+        --color-bg-primary-static: var(--color-bg-tertiary);
+        --color-bg-secondary: var(--color-gray-900);
+        --color-bg-secondary_hover: var(--color-gray-800);
+        --color-bg-secondary_alt: var(--color-bg-primary);
+        --color-bg-secondary-static: var(--color-gray-600);
+        --color-bg-tertiary: var(--color-gray-800);
+        --color-bg-tertiary-hover: var(--color-gray-700);
+        --color-bg-accent-subtlest: var(--color-red-900);
+        --color-bg-accent-subtlest-hover: var(--color-red-800);
+        --color-bg-accent-subtle: var(--color-red-800);
+        --color-bg-accent-subtle-hover: var(--color-red-700);
+        --color-bg-accent-subtle_alt: var(--color-bg-secondary);
+        --color-bg-accent-strong: var(--color-red-700);
+        --color-bg-accent-strong-hover: var(--color-red-600);
+        --color-bg-accent-strongest: var(--color-red-600);
+        --color-bg-accent-strongest_hover: var(--color-red-700);
+        --color-bg-accent-strongest-alt: var(--color-red-600);
+        --color-bg-accent-strongest-alt_hover: var(--color-red-500);
+        --color-bg-accent-strongest-alt_on-subtle: var(--color-red-600);
+        --color-bg-accent-strongest-alt_on-strong: var(--color-red-600);
+        --color-bg-accent-strongest-alt_on-strongest: var(--color-black);
+        --color-bg-accent-strong-primary-alt: var(--color-red-400);
+        --color-bg-accent-strong-primary-alt-hover: var(--color-red-600);
+        --color-bg-error-primary: var(--color-red-950);
+        --color-bg-error-secondary: var(--color-red-600);
+        --color-bg-error-solid: var(--color-red-600);
+        --color-bg-error-solid_hover: var(--color-red-500);
+        --color-bg-warning-primary: var(--color-yellow-950);
+        --color-bg-warning-secondary: var(--color-yellow-600);
+        --color-bg-warning-solid: var(--color-yellow-600);
+        --color-bg-success-primary: var(--color-green-950);
+        --color-bg-success-secondary: var(--color-green-600);
+        --color-bg-success-solid: var(--color-green-600);
+        --color-focus-ring: var(--color-red-500);
+        --color-focus-ring-error: var(--color-red-500);
+        --color-shadow-xs: var(--color-transparent);
+        --color-shadow-sm_01: var(--color-transparent);
+        --color-shadow-sm_02: var(--color-transparent);
+        --color-shadow-md_01: var(--color-transparent);
+        --color-shadow-md_02: var(--color-transparent);
+        --color-shadow-lg_01: var(--color-transparent);
+        --color-shadow-lg_02: var(--color-transparent);
+        --color-shadow-lg_03: var(--color-transparent);
+        --color-shadow-xl_01: var(--color-transparent);
+        --color-shadow-xl_02: var(--color-transparent);
+        --color-shadow-xl_03: var(--color-transparent);
+        --color-shadow-2xl_01: var(--color-transparent);
+        --color-shadow-2xl_02: var(--color-transparent);
+        --color-shadow-3xl_01: var(--color-transparent);
+        --color-shadow-3xl_02: var(--color-transparent);
+        --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
+        --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
+    }
+}
+
+@layer base {
+    html, :host {
+        font-size: var(--text-md);
+        line-height: var(--text-md--line-height);
+    }
+
+    h1, h2, h3, h4 {
+        font-family: var(--font-family-display);
+    }
+
+    h1 {
+        font-size: var(--text-display-md);
+        line-height: var(--text-display-md--line-height);
+    }
+
+    h2 {
+        font-size: var(--text-display-xs);
+        line-height: var(--text-display-xs--line-height);
+    }
+
+    h3 {
+        font-size: var(--text-xl);
+        line-height: var(--text-xl--line-height);
+    }
+
+    ul, ol {
+        list-style-position: inside;
+    }
+
+    ul {
+        list-style-type: disc;
+    }
+
+    ol {
+        list-style-type: decimal;
+    }
+}

package/tailwindcss/output.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 @layer properties;
 @layer theme, base, components, utilities;
@@ -220,6 +220,9 @@
   }
 }
 @layer utilities {
+  .static {
+    position: static;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -244,6 +247,9 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }