@jrgermain/stylesheet 0.0.3

package/src/styles/_variables.scss

@@ -0,0 +1,344 @@
+@use "sass:map";
+@use "sass:color";
+@use "sass:math";
+
+:root,
+::backdrop {
+  --header-height: clamp(50px, 3.5rem, 70px);
+  --sidebar-width: clamp(300px, 18rem, 400px);
+  --opacity-low: 20%;
+  --opacity-medium: 40%;
+  --opacity-high: 70%;
+
+  // Brand
+  --color-brand-1: oklch(15% 55% 270deg);
+  --color-brand-2: oklch(25% 53% 270deg);
+  --color-brand-3: oklch(35% 52% 270deg);
+  --color-brand-4: oklch(45% 51% 270deg);
+  --color-brand-5: oklch(55% 50% 270deg);
+  --color-brand-6: oklch(65% 50% 270deg);
+  --color-brand-7: oklch(75% 45% 270deg);
+  --color-brand-8: oklch(85% 42% 270deg);
+  --color-brand-9: oklch(95% 36% 270deg);
+  --color-brand-transparent: oklch(55% 50% 270deg / var(--opacity-medium));
+  --color-brand-extra-transparent: oklch(55% 50% 270deg / var(--opacity-low));
+
+  // Red
+  --color-red-1: oklch(15% 55% 30deg);
+  --color-red-2: oklch(25% 52% 30deg);
+  --color-red-3: oklch(35% 54% 30deg);
+  --color-red-4: oklch(45% 52% 30deg);
+  --color-red-5: oklch(55% 50% 30deg);
+  --color-red-6: oklch(65% 50% 30deg);
+  --color-red-7: oklch(75% 45% 30deg);
+  --color-red-8: oklch(85% 45% 30deg);
+  --color-red-9: oklch(95% 38% 30deg);
+  --color-red-transparent: oklch(55% 50% 30deg / var(--opacity-medium));
+  --color-red-extra-transparent: oklch(55% 50% 30deg / var(--opacity-low));
+
+  // Orange
+  --color-orange-1: oklch(15% 55% 61deg);
+  --color-orange-2: oklch(25% 50% 61deg);
+  --color-orange-3: oklch(35% 49% 61deg);
+  --color-orange-4: oklch(45% 48% 61deg);
+  --color-orange-5: oklch(55% 50% 61deg);
+  --color-orange-6: oklch(65% 50% 61deg);
+  --color-orange-7: oklch(75% 45% 61deg);
+  --color-orange-8: oklch(85% 40% 61deg);
+  --color-orange-9: oklch(95% 35% 61deg);
+  --color-orange-transparent: oklch(55% 50% 61deg / var(--opacity-medium));
+  --color-orange-extra-transparent: oklch(55% 50% 61deg / var(--opacity-low));
+
+  // Yellow
+  --color-yellow-1: oklch(15% 50% 90deg);
+  --color-yellow-2: oklch(25% 50% 90deg);
+  --color-yellow-3: oklch(35% 50% 90deg);
+  --color-yellow-4: oklch(45% 44% 90deg);
+  --color-yellow-5: oklch(55% 44% 90deg);
+  --color-yellow-6: oklch(65% 44% 90deg);
+  --color-yellow-7: oklch(75% 40% 90deg);
+  --color-yellow-8: oklch(85% 37% 90deg);
+  --color-yellow-9: oklch(95% 29% 90deg);
+  --color-yellow-transparent: oklch(55% 44% 90deg / var(--opacity-medium));
+  --color-yellow-extra-transparent: oklch(55% 44% 90deg / var(--opacity-low));
+
+  // Green
+  --color-green-1: oklch(15% 55% 133deg);
+  --color-green-2: oklch(25% 55% 133deg);
+  --color-green-3: oklch(35% 50% 133deg);
+  --color-green-4: oklch(45% 50% 133deg);
+  --color-green-5: oklch(55% 49% 133deg);
+  --color-green-6: oklch(65% 49% 133deg);
+  --color-green-7: oklch(75% 45% 133deg);
+  --color-green-8: oklch(85% 43% 133deg);
+  --color-green-9: oklch(95% 30% 133deg);
+  --color-green-transparent: oklch(55% 49% 133deg / var(--opacity-medium));
+  --color-green-extra-transparent: oklch(55% 49% 133deg / var(--opacity-low));
+
+  // Sky
+  --color-sky-1: oklch(15% 55% 200deg);
+  --color-sky-2: oklch(25% 55% 200deg);
+  --color-sky-3: oklch(35% 50% 200deg);
+  --color-sky-4: oklch(45% 50% 200deg);
+  --color-sky-5: oklch(55% 52% 200deg);
+  --color-sky-6: oklch(65% 46% 200deg);
+  --color-sky-7: oklch(75% 36% 200deg);
+  --color-sky-8: oklch(85% 25% 200deg);
+  --color-sky-9: oklch(95% 17% 200deg);
+  --color-sky-transparent: oklch(55% 52% 200deg / var(--opacity-medium));
+  --color-sky-extra-transparent: oklch(55% 52% 200deg / var(--opacity-low));
+
+  // Blue
+  --color-blue-1: oklch(15% 55% 260deg);
+  --color-blue-2: oklch(25% 55% 260deg);
+  --color-blue-3: oklch(35% 53% 260deg);
+  --color-blue-4: oklch(45% 50% 260deg);
+  --color-blue-5: oklch(55% 52% 260deg);
+  --color-blue-6: oklch(65% 52% 260deg);
+  --color-blue-7: oklch(75% 52% 260deg);
+  --color-blue-8: oklch(85% 50% 260deg);
+  --color-blue-9: oklch(95% 39% 260deg);
+  --color-blue-transparent: oklch(55% 52% 260deg / var(--opacity-medium));
+  --color-blue-extra-transparent: oklch(55% 52% 260deg / var(--opacity-low));
+
+  // Purple
+  --color-purple-1: oklch(15% 55% 310deg);
+  --color-purple-2: oklch(25% 55% 310deg);
+  --color-purple-3: oklch(35% 53% 310deg);
+  --color-purple-4: oklch(45% 52% 310deg);
+  --color-purple-5: oklch(55% 52% 310deg);
+  --color-purple-6: oklch(65% 51% 310deg);
+  --color-purple-7: oklch(75% 48% 310deg);
+  --color-purple-8: oklch(85% 42% 310deg);
+  --color-purple-9: oklch(95% 40% 310deg);
+  --color-purple-transparent: oklch(55% 52% 310deg / var(--opacity-medium));
+  --color-purple-extra-transparent: oklch(55% 52% 310deg / var(--opacity-low));
+
+  // Magenta
+  --color-magenta-1: oklch(15% 55% 356deg);
+  --color-magenta-2: oklch(25% 55% 356deg);
+  --color-magenta-3: oklch(35% 54% 356deg);
+  --color-magenta-4: oklch(45% 51% 356deg);
+  --color-magenta-5: oklch(55% 50% 356deg);
+  --color-magenta-6: oklch(65% 47% 356deg);
+  --color-magenta-7: oklch(75% 43% 356deg);
+  --color-magenta-8: oklch(85% 38% 356deg);
+  --color-magenta-9: oklch(95% 30% 356deg);
+  --color-magenta-transparent: oklch(55% 50% 356deg / var(--opacity-medium));
+  --color-magenta-extra-transparent: oklch(55% 50% 356deg / var(--opacity-low));
+
+  // Gray
+  --color-gray-1: oklch(15% 2% 263deg);
+  --color-gray-2: oklch(25% 2% 263deg);
+  --color-gray-3: oklch(35% 2% 263deg);
+  --color-gray-4: oklch(45% 2% 263deg);
+  --color-gray-5: oklch(55% 2% 263deg);
+  --color-gray-6: oklch(65% 2% 263deg);
+  --color-gray-7: oklch(75% 2% 263deg);
+  --color-gray-8: oklch(85% 2% 263deg);
+  --color-gray-9: oklch(95% 2% 263deg);
+  --color-gray-transparent: oklch(55% 2% 263deg / var(--opacity-medium));
+  --color-gray-extra-transparent: oklch(55% 2% 263deg / var(--opacity-low));
+
+  // Individual colors
+  --color-body: oklch(98.5% 1% 263deg);
+  --color-body-alt: white;
+  --color-body-text: oklch(10% 2% 263deg);
+  --color-body-text-alt: oklch(38% 2% 263deg);
+  --color-shadow: oklch(40% 2% 263deg / 15%);
+  --color-outline: oklch(89% 2% 263deg);
+
+  @media (prefers-color-scheme: dark) {
+    // Brand
+    --color-brand-9: oklch(17% 55% 270deg);
+    --color-brand-8: oklch(27% 53% 270deg);
+    --color-brand-7: oklch(37% 52% 270deg);
+    --color-brand-6: oklch(47% 51% 270deg);
+    --color-brand-5: oklch(57% 50% 270deg);
+    --color-brand-4: oklch(67% 50% 270deg);
+    --color-brand-3: oklch(77% 45% 270deg);
+    --color-brand-2: oklch(87% 42% 270deg);
+    --color-brand-1: oklch(97% 36% 270deg);
+
+    // Red
+    --color-red-9: oklch(17% 55% 30deg);
+    --color-red-8: oklch(27% 52% 30deg);
+    --color-red-7: oklch(37% 54% 30deg);
+    --color-red-6: oklch(47% 52% 30deg);
+    --color-red-5: oklch(57% 50% 30deg);
+    --color-red-4: oklch(67% 50% 30deg);
+    --color-red-3: oklch(77% 45% 30deg);
+    --color-red-2: oklch(87% 45% 30deg);
+    --color-red-1: oklch(97% 38% 30deg);
+
+    // Orange
+    --color-orange-9: oklch(17% 55% 61deg);
+    --color-orange-8: oklch(27% 50% 61deg);
+    --color-orange-7: oklch(37% 49% 61deg);
+    --color-orange-6: oklch(47% 48% 61deg);
+    --color-orange-5: oklch(57% 50% 61deg);
+    --color-orange-4: oklch(67% 50% 61deg);
+    --color-orange-3: oklch(77% 45% 61deg);
+    --color-orange-2: oklch(87% 40% 61deg);
+    --color-orange-1: oklch(97% 35% 61deg);
+
+    // Yellow
+    --color-yellow-9: oklch(17% 50% 90deg);
+    --color-yellow-8: oklch(27% 50% 90deg);
+    --color-yellow-7: oklch(37% 50% 90deg);
+    --color-yellow-6: oklch(47% 44% 90deg);
+    --color-yellow-5: oklch(57% 44% 90deg);
+    --color-yellow-4: oklch(67% 44% 90deg);
+    --color-yellow-3: oklch(77% 40% 90deg);
+    --color-yellow-2: oklch(87% 37% 90deg);
+    --color-yellow-1: oklch(97% 29% 90deg);
+
+    // Green
+    --color-green-9: oklch(17% 55% 133deg);
+    --color-green-8: oklch(27% 55% 133deg);
+    --color-green-7: oklch(37% 50% 133deg);
+    --color-green-6: oklch(47% 50% 133deg);
+    --color-green-5: oklch(57% 49% 133deg);
+    --color-green-4: oklch(67% 49% 133deg);
+    --color-green-3: oklch(77% 45% 133deg);
+    --color-green-2: oklch(87% 43% 133deg);
+    --color-green-1: oklch(97% 30% 133deg);
+
+    // Sky
+    --color-sky-9: oklch(17% 55% 200deg);
+    --color-sky-8: oklch(27% 55% 200deg);
+    --color-sky-7: oklch(37% 50% 200deg);
+    --color-sky-6: oklch(47% 50% 200deg);
+    --color-sky-5: oklch(57% 52% 200deg);
+    --color-sky-4: oklch(67% 46% 200deg);
+    --color-sky-3: oklch(77% 36% 200deg);
+    --color-sky-2: oklch(87% 25% 200deg);
+    --color-sky-1: oklch(97% 17% 200deg);
+
+    // Blue
+    --color-blue-9: oklch(17% 55% 260deg);
+    --color-blue-8: oklch(27% 55% 260deg);
+    --color-blue-7: oklch(37% 53% 260deg);
+    --color-blue-6: oklch(47% 50% 260deg);
+    --color-blue-5: oklch(57% 52% 260deg);
+    --color-blue-4: oklch(67% 52% 260deg);
+    --color-blue-3: oklch(77% 52% 260deg);
+    --color-blue-2: oklch(87% 50% 260deg);
+    --color-blue-1: oklch(97% 39% 260deg);
+
+    // Purple
+    --color-purple-9: oklch(17% 55% 310deg);
+    --color-purple-8: oklch(27% 55% 310deg);
+    --color-purple-7: oklch(37% 53% 310deg);
+    --color-purple-6: oklch(47% 52% 310deg);
+    --color-purple-5: oklch(57% 52% 310deg);
+    --color-purple-4: oklch(67% 51% 310deg);
+    --color-purple-3: oklch(77% 48% 310deg);
+    --color-purple-2: oklch(87% 42% 310deg);
+    --color-purple-1: oklch(97% 40% 310deg);
+
+    // Magenta
+    --color-magenta-9: oklch(17% 55% 356deg);
+    --color-magenta-8: oklch(27% 55% 356deg);
+    --color-magenta-7: oklch(37% 54% 356deg);
+    --color-magenta-6: oklch(47% 51% 356deg);
+    --color-magenta-5: oklch(57% 50% 356deg);
+    --color-magenta-4: oklch(67% 47% 356deg);
+    --color-magenta-3: oklch(77% 43% 356deg);
+    --color-magenta-2: oklch(87% 38% 356deg);
+    --color-magenta-1: oklch(97% 30% 356deg);
+
+    // Gray
+    --color-gray-9: oklch(17% 2% 263deg);
+    --color-gray-8: oklch(27% 2% 263deg);
+    --color-gray-7: oklch(37% 2% 263deg);
+    --color-gray-6: oklch(47% 2% 263deg);
+    --color-gray-5: oklch(57% 2% 263deg);
+    --color-gray-4: oklch(67% 2% 263deg);
+    --color-gray-3: oklch(77% 2% 263deg);
+    --color-gray-2: oklch(87% 2% 263deg);
+    --color-gray-1: oklch(97% 2% 263deg);
+
+    // Darker replacements for semantic colors
+    --color-body: oklch(20% 2% 263deg);
+    --color-body-alt: oklch(8% 2% 263deg);
+    --color-body-text: white;
+    --color-body-text-alt: oklch(88% 1% 263deg);
+    --color-shadow: oklch(5% 2% 263deg / 25%);
+    --color-outline: oklch(39% 2% 263deg);
+
+    // Slightly decrease font weights
+    --font-weight-black: 900;
+    --font-weight-bold: 700;
+    --font-weight-semibold: 550;
+    --font-weight-normal: 375;
+
+    // Slightly increase opacity
+    --opacity-low: 35%;
+    --opacity-medium: 50%;
+    --opacity-high: 80%;
+  }
+
+  // Font sizes
+  --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);
+  --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);
+  --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
+  --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);
+  --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);
+  --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);
+  --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);
+
+  // Font weights
+  --font-weight-black: 950;
+  --font-weight-bold: 750;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --font-weight-light: 200;
+
+  // Font families
+  --font-family-body: "Manrope Variable", "Inter", "Roboto", "Helvetica Neue",
+    "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+  --font-family-heading: "Lexend Variable", "Inter", "Roboto", "Helvetica Neue",
+    "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+  --font-family-ui: var(--font-family-body);
+  --font-family-mono: "Source Code Pro Variable", ui-monospace,
+    "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+
+  // Spacing
+  --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);
+  --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);
+  --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);
+  --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);
+  --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);
+  --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);
+  --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);
+  --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);
+  --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);
+
+  // Between xs and m based on screen width
+  --space-body: clamp(12px, 6.7824px + 1.6304vw, 27px);
+
+  // Radii
+  --radius-none: 0;
+  --radius-s: 3px;
+  --radius-m: 6px;
+  --radius-l: 12px;
+  --radius-xl: 24px;
+  --radius-2xl: 64px;
+  --radius-full: 9999px;
+
+  // Shadows
+  --shadow-none: none;
+  --shadow-s: 0 1px 3px -1px var(--color-shadow);
+  --shadow-m: 0 1px 7px -1px var(--color-shadow);
+  --shadow-l: var(--shadow-s), 0 1px 11px -1px var(--color-shadow);
+  --shadow-xl: var(--shadow-m), 0 1px 15px -1px var(--color-shadow);
+
+  // Border widths
+  --border-none: 0;
+  --border-s: 1px;
+  --border-m: 2px;
+  --border-l: 5px;
+  --border-xl: 8px;
+}

package/src/styles/components/_alert.scss

@@ -0,0 +1,115 @@
+@use "../utils";
+
+.alert {
+  display: block;
+  border-radius: var(--radius-s);
+  border-start-start-radius: calc(var(--space-2xs) + 2em);
+  border-end-start-radius: calc(var(--space-2xs) + 2em);
+  padding: var(--space-2xs);
+  padding-inline-start: calc(var(--space-2xs) + 2em);
+  font-size: var(--font-size-m);
+  color: var(--color-body-text);
+  position: relative;
+  background:
+    linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,
+    linear-gradient(
+        to right,
+        var(--alert-border-start-color),
+        var(--alert-border-end-color)
+      )
+      border-box;
+  border: var(--border-m) solid transparent;
+  line-height: 1.4;
+
+  > * {
+    line-height: 1.4;
+  }
+
+  @media print {
+    & {
+      border-color: var(--alert-border-start-color);
+    }
+  }
+
+  &::before {
+    content: "";
+    print-color-adjust: exact;
+    z-index: 2;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--space-2xs) * 0.5);
+    margin: auto;
+    width: 2em;
+    height: 2em;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    background-color: var(--alert-border-start-color);
+    mask-image: var(--alert-icon);
+  }
+
+  &::after {
+    content: "";
+    print-color-adjust: exact;
+    z-index: 1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--space-2xs) * 0.5);
+    margin: auto;
+    width: 2em;
+    height: 2em;
+    background-color: #fffe;
+    border-radius: var(--radius-full);
+    scale: 0.75;
+    box-shadow: var(--shadow-s);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: #000e;
+    }
+  }
+
+  &.error {
+    --alert-bg-color: var(--color-red-9);
+    --alert-border-start-color: var(--color-red-5);
+    --alert-border-end-color: var(--color-red-6);
+    --alert-icon: #{utils.svg-to-data-url(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z" fill="#888888"/><path d="M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" fill="#888888"/></svg>'
+      )};
+  }
+
+  &.warning {
+    --alert-bg-color: var(--color-yellow-9);
+    --alert-border-start-color: var(--color-yellow-5);
+    --alert-border-end-color: var(--color-yellow-6);
+    --alert-icon: #{utils.svg-to-data-url(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="#888888" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 6Z"/><path fill="#888888" d="M256 367.91a20 20 0 1 1 20-20a20 20 0 0 1-20 20Z"/></svg>'
+      )};
+  }
+
+  &.success {
+    --alert-bg-color: var(--color-green-9);
+    --alert-border-start-color: var(--color-green-5);
+    --alert-border-end-color: var(--color-green-6);
+    --alert-icon: #{utils.svg-to-data-url(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" fill="#888888"/><path d="M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" fill="#888888"/></svg>'
+      )};
+  }
+
+  &.info {
+    --alert-bg-color: var(--color-sky-9);
+    --alert-border-start-color: var(--color-sky-5);
+    --alert-border-end-color: var(--color-sky-6);
+    --alert-icon: #{utils.svg-to-data-url(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M235.4 172.2c0-11.4 9.3-19.9 20.5-19.9 11.4 0 20.7 8.5 20.7 19.9s-9.3 20-20.7 20c-11.2 0-20.5-8.6-20.5-20zm1.4 35.7H275V352h-38.2V207.9z" fill="#888888"/><path d="M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" fill="#888888"/></svg>'
+      )};
+  }
+}
+
+.alert-title {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  color: var(--alert-border-start-color);
+  font-size: 0.85em;
+  margin: 0;
+  margin-block-end: 0.15em;
+}