@jrgermain/stylesheet 0.2.1 → 0.3.0

package/src/styles/{_variables.scss → utils/variables.css}

@@ -1,14 +1,11 @@
-@use "sass:map";
-@use "sass:color";
-@use "sass:math";
-
 :root,
 ::backdrop {
   --opacity-low: 20%;
   --opacity-medium: 40%;
   --opacity-high: 70%;
+  --opacity-disabled: 65%;
 
-  // Brand
+  /* Brand */
   --color-brand-1: oklch(15% 55% 275deg);
   --color-brand-2: oklch(25% 52% 275deg);
   --color-brand-3: oklch(35% 52% 275deg);
@@ -21,7 +18,7 @@
   --color-brand-transparent: oklch(55% 52% 275deg / var(--opacity-medium));
   --color-brand-extra-transparent: oklch(55% 52% 275deg / var(--opacity-low));
 
-  // Red
+  /* Red */
   --color-red-1: oklch(15% 55% 30deg);
   --color-red-2: oklch(25% 52% 30deg);
   --color-red-3: oklch(35% 54% 30deg);
@@ -34,7 +31,7 @@
   --color-red-transparent: oklch(55% 50% 30deg / var(--opacity-medium));
   --color-red-extra-transparent: oklch(55% 50% 30deg / var(--opacity-low));
 
-  // Orange
+  /* Orange */
   --color-orange-1: oklch(15% 60% 55deg);
   --color-orange-2: oklch(25% 60% 55deg);
   --color-orange-3: oklch(35% 55% 55deg);
@@ -47,7 +44,7 @@
   --color-orange-transparent: oklch(55% 50% 55deg / var(--opacity-medium));
   --color-orange-extra-transparent: oklch(55% 50% 55deg / var(--opacity-low));
 
-  // Yellow
+  /* Yellow */
   --color-yellow-1: oklch(15% 55% 88deg);
   --color-yellow-2: oklch(25% 55% 88deg);
   --color-yellow-3: oklch(35% 55% 88deg);
@@ -60,7 +57,7 @@
   --color-yellow-transparent: oklch(55% 45% 88deg / var(--opacity-medium));
   --color-yellow-extra-transparent: oklch(55% 45% 88deg / var(--opacity-low));
 
-  // Green
+  /* Green */
   --color-green-1: oklch(15% 55% 133deg);
   --color-green-2: oklch(25% 50% 133deg);
   --color-green-3: oklch(35% 48% 133deg);
@@ -73,7 +70,7 @@
   --color-green-transparent: oklch(55% 46% 133deg / var(--opacity-medium));
   --color-green-extra-transparent: oklch(55% 46% 133deg / var(--opacity-low));
 
-  // Sky
+  /* Sky */
   --color-sky-1: oklch(15% 55% 195deg);
   --color-sky-2: oklch(25% 55% 195deg);
   --color-sky-3: oklch(35% 50% 195deg);
@@ -86,7 +83,7 @@
   --color-sky-transparent: oklch(55% 52% 195deg / var(--opacity-medium));
   --color-sky-extra-transparent: oklch(55% 52% 195deg / var(--opacity-low));
 
-  // Blue
+  /* Blue */
   --color-blue-1: oklch(15% 52% 260deg);
   --color-blue-2: oklch(25% 48% 260deg);
   --color-blue-3: oklch(35% 46% 260deg);
@@ -99,7 +96,7 @@
   --color-blue-transparent: oklch(55% 50% 260deg / var(--opacity-medium));
   --color-blue-extra-transparent: oklch(55% 50% 260deg / var(--opacity-low));
 
-  // Purple
+  /* Purple */
   --color-purple-1: oklch(15% 55% 310deg);
   --color-purple-2: oklch(25% 55% 310deg);
   --color-purple-3: oklch(35% 53% 310deg);
@@ -112,7 +109,7 @@
   --color-purple-transparent: oklch(55% 52% 310deg / var(--opacity-medium));
   --color-purple-extra-transparent: oklch(55% 52% 310deg / var(--opacity-low));
 
-  // Magenta
+  /* Magenta */
   --color-magenta-1: oklch(15% 55% 356deg);
   --color-magenta-2: oklch(25% 55% 356deg);
   --color-magenta-3: oklch(35% 54% 356deg);
@@ -125,7 +122,7 @@
   --color-magenta-transparent: oklch(55% 50% 356deg / var(--opacity-medium));
   --color-magenta-extra-transparent: oklch(55% 50% 356deg / var(--opacity-low));
 
-  // Gray
+  /* Gray */
   --color-gray-1: oklch(15% 2% 263deg);
   --color-gray-2: oklch(25% 2% 263deg);
   --color-gray-3: oklch(35% 2% 263deg);
@@ -138,8 +135,8 @@
   --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);
+  /* Individual colors */
+  --color-body: oklch(98.5% 0.8% 263deg);
   --color-body-alt: white;
   --color-body-text: oklch(10% 2% 263deg);
   --color-body-text-alt: oklch(38% 2% 263deg);
@@ -147,7 +144,7 @@
   --color-outline: oklch(89% 2% 263deg);
 
   @media (prefers-color-scheme: dark) {
-    // Brand
+    /* Brand */
     --color-brand-9: oklch(15% 55% 275deg);
     --color-brand-8: oklch(25% 52% 275deg);
     --color-brand-7: oklch(35% 52% 275deg);
@@ -157,7 +154,7 @@
     --color-brand-2: oklch(85% 42% 275deg);
     --color-brand-1: oklch(95% 36% 275deg);
 
-    // Red
+    /* Red */
     --color-red-9: oklch(15% 55% 30deg);
     --color-red-8: oklch(25% 52% 30deg);
     --color-red-7: oklch(35% 54% 30deg);
@@ -167,7 +164,7 @@
     --color-red-2: oklch(85% 45% 30deg);
     --color-red-1: oklch(95% 38% 30deg);
 
-    // Orange
+    /* Orange */
     --color-orange-9: oklch(15% 60% 55deg);
     --color-orange-8: oklch(25% 60% 55deg);
     --color-orange-7: oklch(35% 55% 55deg);
@@ -177,7 +174,7 @@
     --color-orange-2: oklch(85% 40% 55deg);
     --color-orange-1: oklch(95% 38% 55deg);
 
-    // Yellow
+    /* Yellow */
     --color-yellow-9: oklch(15% 55% 88deg);
     --color-yellow-8: oklch(25% 55% 88deg);
     --color-yellow-7: oklch(35% 55% 88deg);
@@ -187,7 +184,7 @@
     --color-yellow-2: oklch(85% 30% 88deg);
     --color-yellow-1: oklch(95% 28% 88deg);
 
-    // Green
+    /* Green */
     --color-green-9: oklch(15% 55% 133deg);
     --color-green-8: oklch(25% 50% 133deg);
     --color-green-7: oklch(35% 48% 133deg);
@@ -197,7 +194,7 @@
     --color-green-2: oklch(85% 40% 133deg);
     --color-green-1: oklch(95% 20% 133deg);
 
-    // Sky
+    /* Sky */
     --color-sky-9: oklch(15% 55% 195deg);
     --color-sky-8: oklch(25% 55% 195deg);
     --color-sky-7: oklch(35% 50% 195deg);
@@ -207,7 +204,7 @@
     --color-sky-2: oklch(85% 25% 195deg);
     --color-sky-1: oklch(95% 12% 195deg);
 
-    // Blue
+    /* Blue */
     --color-blue-9: oklch(15% 52% 260deg);
     --color-blue-8: oklch(25% 48% 260deg);
     --color-blue-7: oklch(35% 46% 260deg);
@@ -217,7 +214,7 @@
     --color-blue-2: oklch(85% 45% 260deg);
     --color-blue-1: oklch(95% 42% 260deg);
 
-    // Purple
+    /* Purple */
     --color-purple-9: oklch(15% 55% 310deg);
     --color-purple-8: oklch(25% 55% 310deg);
     --color-purple-7: oklch(35% 53% 310deg);
@@ -227,7 +224,7 @@
     --color-purple-2: oklch(85% 42% 310deg);
     --color-purple-1: oklch(95% 40% 310deg);
 
-    // Magenta
+    /* Magenta */
     --color-magenta-9: oklch(15% 55% 356deg);
     --color-magenta-8: oklch(25% 55% 356deg);
     --color-magenta-7: oklch(35% 54% 356deg);
@@ -237,7 +234,7 @@
     --color-magenta-2: oklch(85% 36% 356deg);
     --color-magenta-1: oklch(95% 34% 356deg);
 
-    // Gray
+    /* Gray */
     --color-gray-9: oklch(15% 2% 263deg);
     --color-gray-8: oklch(25% 2% 263deg);
     --color-gray-7: oklch(35% 2% 263deg);
@@ -247,7 +244,7 @@
     --color-gray-2: oklch(85% 2% 263deg);
     --color-gray-1: oklch(95% 2% 263deg);
 
-    // Darker replacements for semantic colors
+    /* Darker replacements for semantic colors */
     --color-body: oklch(20% 2% 263deg);
     --color-body-alt: oklch(8% 2% 263deg);
     --color-body-text: white;
@@ -255,19 +252,14 @@
     --color-shadow: oklch(5% 2% 263deg / 40%);
     --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
+    /* Slightly increase opacity */
     --opacity-low: 35%;
     --opacity-medium: 50%;
     --opacity-high: 80%;
+    --opacity-disabled: 50%;
   }
 
-  // Font sizes
+  /* 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);
@@ -277,22 +269,21 @@
   --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 weights */
+  --font-weight-light: 300;
   --font-weight-normal: 400;
-  --font-weight-light: 200;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
 
-  // 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-mono: "Source Code Pro Variable", ui-monospace,
-    "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  /* Font families */
+  --font-family-body: "Avenir Next", avenir, corbel, source-sans-pro,
+    "DejaVu Sans", ui-sans-serif, sans-serif;
+  --font-family-heading: seravek, "Gill Sans Nova", verdana, "DejaVu Sans",
+    source-sans-pro, ui-sans-serif, sans-serif;
+  --font-family-mono: ui-monospace, "Source Code Pro", ui-monospace, monospace;
 
-  // Spacing
+  /* 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);
@@ -303,10 +294,10 @@
   --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
+  /* Between xs and m based on screen width */
   --space-body: clamp(12px, 6.7824px + 1.6304vw, 27px);
 
-  // Radii
+  /* Radii */
   --radius-none: 0;
   --radius-s: 3px;
   --radius-m: 6px;
@@ -315,14 +306,14 @@
   --radius-2xl: 64px;
   --radius-full: 9999px;
 
-  // Shadows
+  /* 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 widths */
   --border-none: 0;
   --border-s: 1px;
   --border-m: 2px;

package/src/svg/dropdown-invert-thick.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown-invert.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown-thick.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
     d="m6 9l6 6l6-6" />
 </svg>

package/src/styles/_utils.scss

@@ -1,87 +0,0 @@
-@use "sass:string";
-@use "sass:list";
-
-// Adapted from https://css-tricks.com/snippets/sass/str-replace-function/
-@function replace-all($string, $search, $replace) {
-  $index: string.index($string, $search);
-
-  @if $index {
-    /* stylelint-disable-next-line scss/operator-no-newline-after */
-    @return string.slice($string, 1, $index - 1) + $replace +
-      replace-all(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-@function svg-to-data-url($svg) {
-  $svg: replace-all($svg, "%", "%25");
-  $svg: replace-all($svg, '"', "'");
-  $svg: replace-all($svg, "#", "%23");
-  $svg: replace-all($svg, "<", "%3C");
-  $svg: replace-all($svg, ">", "%3E");
-  $svg: replace-all($svg, "[", "%5B");
-  $svg: replace-all($svg, "]", "%5D");
-  $svg: replace-all($svg, "^", "%5E");
-  $svg: replace-all($svg, "`", "%60");
-  $svg: replace-all($svg, "{", "%7B");
-  $svg: replace-all($svg, "|", "%7C");
-  $svg: replace-all($svg, "}", "%7D");
-
-  // The below characters are tolerated by browsers, so don't NEED to be escaped:
-  // $svg: replace-all($svg, " ", "%20");
-  // $svg: replace-all($svg, "!", "%21");
-  // $svg: replace-all($svg, "$", "%24");
-  // $svg: replace-all($svg, "&", "%26");
-  // $svg: replace-all($svg, "'", "%27");
-  // $svg: replace-all($svg, "(", "%28");
-  // $svg: replace-all($svg, ")", "%29");
-  // $svg: replace-all($svg, "*", "%2A");
-  // $svg: replace-all($svg, "+", "%2B");
-  // $svg: replace-all($svg, ",", "%2C");
-  // $svg: replace-all($svg, "-", "%2D");
-  // $svg: replace-all($svg, ".", "%2E");
-  // $svg: replace-all($svg, "/", "%2F");
-  // $svg: replace-all($svg, ":", "%3A");
-  // $svg: replace-all($svg, ";", "%3B");
-  // $svg: replace-all($svg, "=", "%3D");
-  // $svg: replace-all($svg, "?", "%3F");
-  // $svg: replace-all($svg, "@", "%40");
-  // $svg: replace-all($svg, "\\", "%5C");
-  // $svg: replace-all($svg, "_", "%5F");
-  // $svg: replace-all($svg, "~", "%7F");
-
-  @return 'url("data:image/svg+xml,#{$svg}")';
-}
-
-@mixin transition($properties, $duration: 200ms, $timing-function: "ease") {
-  $properties-string: "";
-
-  @if type-of($properties) != list and type-of($properties) != string {
-    @error 'Properties must be a string or list of strings';
-  }
-
-  @each $property in $properties {
-    @if $properties-string != "" {
-      $properties-string: $properties-string + ", ";
-    }
-
-    $properties-string: $properties-string + $property;
-  }
-
-  @if list.length($properties) == 1 {
-    transition: #{string.unquote($properties-string)}
-      $duration
-      #{string.unquote($timing-function)};
-  }
-
-  @if list.length($properties) > 1 {
-    transition-property: string.unquote($properties-string);
-    transition-duration: $duration;
-    transition-timing-function: string.unquote($timing-function);
-  }
-}

package/src/styles/components/_alert.scss

@@ -1,178 +0,0 @@
-@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,
-  &::after {
-    content: "";
-    print-color-adjust: exact;
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: calc(var(--space-2xs) * 0.5);
-    margin: auto;
-    width: 2em;
-    height: 2em;
-  }
-
-  &::before {
-    z-index: 2;
-    mask-image: var(--alert-icon);
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    background-color: var(--alert-border-start-color);
-    scale: 0.5;
-  }
-
-  &::after {
-    z-index: 1;
-    background-color: #fffe;
-    border-radius: var(--radius-full);
-    border: 3px solid var(--alert-border-start-color);
-    scale: 0.75;
-
-    @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-dismiss-icon-color: var(--color-red-4);
-    --alert-dismiss-hover-bg: var(--color-red-extra-transparent);
-    --alert-dismiss-focus-bg: var(--color-red-transparent);
-    --alert-icon: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="64" d="M368 368L144 144M368 144L144 368"/></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-dismiss-icon-color: var(--color-yellow-4);
-    --alert-dismiss-hover-bg: var(--color-yellow-extra-transparent);
-    --alert-dismiss-focus-bg: var(--color-yellow-transparent);
-    --alert-icon: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="64"/><circle cx="256" cy="436" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"/></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-dismiss-icon-color: var(--color-green-4);
-    --alert-dismiss-hover-bg: var(--color-green-extra-transparent);
-    --alert-dismiss-focus-bg: var(--color-green-transparent);
-    --alert-icon: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="64" d="M416 128L192 384l-96-96"/></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-dismiss-icon-color: var(--color-sky-4);
-    --alert-dismiss-hover-bg: var(--color-sky-extra-transparent);
-    --alert-dismiss-focus-bg: var(--color-sky-transparent);
-    --alert-icon: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="64" d="M196 220h64v172"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="64" d="M187 396h138"/><circle cx="253 " cy="118" r="44"/></svg>'
-      )};
-  }
-
-  &.banner {
-    border-radius: 0;
-    border-width: var(--border-m) 0;
-    width: 100%;
-    padding: var(--space-xs);
-    padding-inline-start: calc(var(--space-xs) + 2em);
-
-    &:has(.button.dismiss) {
-      padding-inline-end: calc(var(--space-xs) + 2em);
-    }
-
-    &::before,
-    &::after {
-      inset-inline-start: calc(var(--space-xs) * 0.5);
-      margin: auto;
-      width: 2em;
-      height: 2em;
-    }
-
-    .button.dismiss {
-      --button-fg-color: var(--alert-dismiss-icon-color);
-      --button-bg-color: transparent;
-      --button-border-color: transparent;
-      --button-hover-bg-color: var(--alert-dismiss-hover-bg);
-      --button-focus-ring-color: transparent;
-      --button-shadow: none;
-
-      font-size: 0.75rem;
-      position: absolute;
-      inset-block: 0;
-      inset-inline-end: var(--space-3xs);
-      margin: auto;
-      width: 3em;
-      height: 3em;
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--alert-dismiss-focus-bg);
-        --button-hover-bg-color: transparent;
-      }
-
-      &::after {
-        content: "";
-        width: 1.8em;
-        height: 1.8em;
-        mask-image: #{utils.svg-to-data-url(
-            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>'
-          )};
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        background-color: currentcolor;
-      }
-    }
-  }
-}
-
-.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;
-}