Resolve #3514165 "Add drupal logo"

starshot_demo/components/01-atoms/drupal-logo/drupal-logo.component.yml

+'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
+name: Drupal Logo
+description: The Drupal logo displayed as an SVG.
+status: stable
+props:
+  type: object
+  required:
+    - variant
+    - color
+    - size
+  properties:
+    variant:
+      type: string
+      title: Variant
+      description: The variant of the Drupal logo to display.
+      enum:
+        - Horizontal
+        - Vertical
+        - Drop icon
+      examples: [Horizontal]
+    color:
+      type: string
+      title: Color
+      description: The color of the Drupal logo.
+      enum:
+        - Drupal Blue
+        - Drupal Navy
+        - White
+        - Black
+      examples: [Drupal Blue]
+    size:
+      type: string
+      title: Size
+      description: The size of the Drupal logo.
+      enum:
+        - Default
+        - Full Width
+        - Full Height
+      examples: [Default]

starshot_demo/components/01-atoms/drupal-logo/drupal-logo.scss

+.drupal-logo {
+  display: block;
+}
+
+.drupal-logo--color-drupal-blue {
+  fill: #009cde;
+}
+
+.drupal-logo--color-drupal-navy {
+  fill: #12285f;
+}
+
+.drupal-logo--color-white {
+  fill: #fff;
+}
+
+.drupal-logo--color-black {
+  fill: #000;
+}
+
+.drupal-logo--size-default {
+  width: 150px; /* Size used in Drupal.org's header. */
+  height: auto;
+}
+
+.drupal-logo--size-default.drupal-logo--variant-drop-icon {
+  width: 60px; /* Size used in Drupal.org's header — only for the icon part. */
+  height: auto;
+}
+
+.drupal-logo--size-full-width {
+  width: 100%;
+  height: auto;
+}
+
+.drupal-logo--size-full-height {
+  width: auto;
+  height: 100%;
+}

starshot_demo/components/01-atoms/drupal-logo/drupal-logo.twig

+{% set logo_attributes = attributes
+  .setAttribute('class', [
+    'drupal-logo',
+    'drupal-logo--variant-' ~ variant|lower|replace({' ': '-'}),
+    'drupal-logo--color-' ~ color|lower|replace({' ': '-'}),
+    'drupal-logo--size-' ~ size|lower|replace({' ': '-'}),
+  ])
+%}
+
+{% if variant == 'Horizontal' %}
+	<svg {{ logo_attributes }} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 515.7 179.7">
+		<path d="M126 66.3c-.1-.2-.2-.3-.4-.5-9.8-11-23.7-26.6-33.7-37.7-3.1-3.3-6.2-6.6-9.1-10-.7-.8-1.3-1.6-2-2.4-.6-.6-.9-1-.9-1h.1c-3.4-4-6.1-8.5-8-13.3L71.5.3c0-.1-.1-.1-.2-.2-.1 0-.3-.1-.4-.1h-.1c-.2 0-.3.1-.4.1l-.2.2-.5 1.1c-2 4.8-4.7 9.3-8 13.3h.1s-.3.4-.9 1c-.7.8-1.3 1.6-2 2.4-3 3.4-6 6.7-9.1 10-10 11.1-24 26.7-33.8 37.7-.1.2-.2.3-.4.5-37 49.3 3.2 89.5 3.2 89.5h-.1c11.9 13.8 28.8 22.3 46.9 23.6 1.6.2 3.3.3 5.1.3h.1c1.7 0 3.4-.1 5.1-.3 18.2-1.3 35-9.8 46.9-23.6h-.1c.1 0 40.3-40.2 3.3-89.5zM39.8 101l-.9 1.4-.1.1c-6.8 8.2-10.8 17-12.1 25.7-.2 1.1-1.2 1.8-2.2 1.6-.7-.1-1.2-.6-1.5-1.2-1.8-4.2-3-8.6-3.6-13.1-2.2-15.9 2.6-29.8 12.8-41.7l12.3-14.1c.7-.8 1.9-.9 2.7-.2l.2.2c3.3 3.8 7.6 8.7 12.4 14.3.6.7.6 1.8 0 2.6-6.6 7.9-13.6 16.3-19.9 24.3l-.1.1zm56.9 41.2c-3.8 10-11.3 16-21.9 17.7-15.1 2.3-29.2-8-31.5-23.1 0-.2 0-.3-.1-.5-1.2-8.5 1.4-16 6.9-22.4 6.4-7.5 20.5-24.9 20.7-25.2.3.3 15.3 19 20.9 25.6 7.1 8.3 8.8 17.8 5 27.9zm22.3-15.7c-.1.3-.3.7-.4 1-.4 1-1.5 1.5-2.5 1.1-.6-.3-1.1-.8-1.2-1.5-1.4-8.4-5.4-16.8-11.9-24.7l-.1-.1-.6-.9-.4-.5C96.7 94.3 69.2 62.1 57.2 48c-.6-.7-.6-1.8 0-2.6 4-4.4 8-8.8 11.9-13.3.7-.8 1.9-.8 2.7-.1l.1.1c1.8 1.9 3.5 3.8 5.2 5.8C88 50.1 99 62.1 109.6 74.4c13.4 15.5 16.5 33.3 9.4 52.1z"/>
+		<path d="M485.1 56.9h12.5v2.5h-5v12.4h-2.5V59.5h-5v-2.6z"/>
+		<path d="M513.2 71.8 512.1 61l-.7 3.6-2.6 7.2h-3.2l-2.6-7.2-.7-3.6-1.1 10.8h-2.6l1.5-14.9h2.8l4.3 11.9 4.3-11.9h2.8l1.5 14.9h-2.6z"/>
+		<path d="M194.2 60.9h-28v73.2h28c20.2 0 36.6-16.4 36.6-36.6 0-20.2-16.4-36.6-36.6-36.6m17.3 53.9c-4.6 4.6-10.8 7.2-17.3 7.1h-15.8V73h15.8c13.6.1 24.5 11.2 24.4 24.7 0 6.4-2.6 12.6-7.1 17.1m256.2 19.3h12.2V56.6h-12.2v77.5zM251.4 84.3v-4.5h-12.2v54.4h12.2v-33.6c0-5.9 4.9-8.6 9.5-8.6h7.6V79.7h-7.6c-3.6.1-7.1 1.8-9.5 4.6m65.1 23.6c.1 4.2-1.2 8.2-3.7 11.6-2.5 3.1-6.3 4.8-10.3 4.7-3.3.1-6.5-1.1-9-3.3-2.6-2.5-3.9-6.2-3.9-11V80.8h-12.2v31.9c-.1 6.1 2.4 12 6.9 16.2 4.6 4.3 10.7 6.6 16.9 6.5 5.6.1 11.1-1.9 15.2-5.8v4.6h12.2V80.8h-12.2v27.1h.1zm51.2-28.5c-6.2 0-12.2 2.2-16.9 6.3v-5h-12.2v77.7h12.2v-29.3c4.7 4.1 10.7 6.3 16.9 6.3 15 0 27.3-12.5 27.3-27.9 0-15.5-12.2-28.1-27.3-28.1m10.6 39.2c-2.8 2.9-6.6 4.6-10.6 4.6-8.6-.2-15.4-7.2-15.3-15.8 0-4.2 1.6-8.2 4.5-11.3 2.8-3 6.7-4.6 10.8-4.6 8.3 0 15.1 7.1 15.1 15.9 0 4.2-1.6 8.2-4.5 11.2m66.6-32.9c-4.7-4.1-10.7-6.4-16.9-6.3-15 0-27.3 12.5-27.3 27.9s12.2 28 27.3 28c6.2.1 12.3-2.2 16.9-6.3v5.1h12.2V80.6h-12.2v5.1zM428 123.3c-8.4 0-15.2-7.1-15.2-15.9 0-8.7 6.8-15.8 15.2-15.8s15.2 7.1 15.2 15.8-6.9 15.9-15.2 15.9"/>
+	</svg>
+{% elseif variant == 'Vertical' %}
+	<svg {{ logo_attributes }} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 349.5 291.1">
+		<path d="M216.2 66.3c-.1-.2-.2-.3-.4-.5-9.8-11-23.7-26.6-33.7-37.7-3.1-3.3-6.2-6.6-9.1-10-.7-.8-1.3-1.6-2-2.4-.6-.6-.9-1-.9-1h.1c-3.4-4-6.1-8.5-8-13.3l-.5-1.1c0-.1-.1-.1-.2-.2s-.3-.1-.4-.1h-.1c-.2 0-.3.1-.4.1l-.2.2-.5 1.1c-2 4.8-4.7 9.3-8 13.3h.1s-.3.4-.9 1c-.7.8-1.3 1.6-2 2.4-3 3.4-6 6.7-9.1 10-9.9 11.1-23.9 26.7-33.7 37.7-.1.2-.2.3-.4.5-37 49.3 3.2 89.5 3.2 89.5h-.1c11.9 13.8 28.8 22.3 46.9 23.6 1.6.2 3.3.3 5.1.3h.1c1.7 0 3.4-.1 5.1-.3 18.2-1.3 35-9.8 46.9-23.6h-.1s40.2-40.2 3.2-89.5zM130.1 101l-.9 1.4-.1.1c-6.8 8.2-10.8 17-12.1 25.7-.2 1.1-1.2 1.8-2.2 1.6-.7-.1-1.2-.6-1.5-1.2-1.8-4.2-3-8.6-3.6-13.1-2.2-15.9 2.6-29.8 12.8-41.7l12.3-14.1c.7-.8 1.9-.9 2.7-.2l.2.2c3.3 3.8 7.6 8.7 12.4 14.3.6.7.6 1.8 0 2.6-6.6 7.9-13.6 16.3-19.9 24.3l-.1.1zm56.8 41.2c-3.8 10-11.3 16-21.9 17.7-15.1 2.3-29.2-8-31.5-23.1 0-.2 0-.3-.1-.5-1.2-8.5 1.4-16 6.9-22.4 6.4-7.5 20.5-24.9 20.7-25.2.3.3 15.3 19 20.9 25.6 7.2 8.3 8.8 17.8 5 27.9zm22.4-15.7c-.1.3-.3.7-.4 1-.4 1-1.5 1.5-2.5 1.1-.6-.3-1.1-.8-1.2-1.5-1.4-8.4-5.4-16.8-11.9-24.7l-.1-.1-.6-.9-.4-.5c-5.2-6.6-32.7-38.8-44.7-52.8-.6-.7-.6-1.8 0-2.6 4-4.4 8-8.8 11.9-13.3.7-.8 1.9-.8 2.7-.1l.1.1c1.8 1.9 3.5 3.8 5.2 5.8 10.9 12.2 21.9 24.2 32.5 36.5 13.3 15.4 16.4 33.2 9.4 52z"/>
+		<path d="M318.9 189.8h12.5v2.5h-5v12.4h-2.5v-12.4h-5v-2.5z"/>
+		<path d="m347 204.7-1.1-10.8-.7 3.6-2.6 7.2h-3.2l-2.6-7.2-.7-3.6-1.1 10.8h-2.6l1.5-14.9h2.8l4.3 11.9 4.3-11.9h2.8l1.5 14.9H347z"/>
+		<path d="M28 193.7H0v73.2h28c20.2 0 36.6-16.4 36.6-36.6 0-20.2-16.4-36.5-36.6-36.6m17.3 53.9c-4.6 4.6-10.8 7.2-17.3 7.1H12.2v-48.9H28c13.6.1 24.5 11.2 24.4 24.7-.1 6.5-2.6 12.6-7.1 17.1M301.5 267h12.2v-77.6h-12.2V267zM85.2 217.1v-4.5H73V267h12.2v-33.6c0-5.9 4.9-8.6 9.5-8.6h7.6v-12.2h-7.6c-3.7 0-7.1 1.7-9.5 4.5m65.1 23.7c.1 4.2-1.2 8.2-3.7 11.6-2.5 3.1-6.3 4.8-10.3 4.7-3.3.1-6.5-1.1-9-3.3-2.6-2.5-3.9-6.2-3.9-11v-29.1h-12.2v31.9c-.1 6.1 2.4 12 6.9 16.2 4.6 4.3 10.7 6.6 16.9 6.5 5.6.1 11.1-1.9 15.2-5.8v4.6h12.2v-53.4h-12.2l.1 27.1zm51.2-28.5c-6.2 0-12.2 2.2-16.9 6.3v-5h-12.2v77.7h12.2v-29.2c4.7 4.1 10.7 6.3 16.9 6.3 15.1 0 27.3-12.5 27.3-27.9 0-15.7-12.3-28.2-27.3-28.2m10.6 39.2c-2.8 2.9-6.6 4.6-10.6 4.6-8.6-.2-15.4-7.2-15.3-15.8 0-4.2 1.6-8.2 4.5-11.3 2.8-3 6.7-4.6 10.8-4.6 8.3 0 15.1 7.1 15.1 15.9 0 4.1-1.6 8.2-4.5 11.2m66.6-32.9c-4.7-4.1-10.7-6.4-16.9-6.3-15.1 0-27.3 12.5-27.3 27.9s12.2 28 27.3 28c6.2.1 12.3-2.2 16.9-6.3v5.1h12.2v-53.5h-12.2v5.1zm-17 37.5c-8.4 0-15.2-7.1-15.2-15.9 0-8.7 6.8-15.8 15.2-15.8s15.2 7.1 15.2 15.8c0 8.7-6.8 15.9-15.2 15.9"/>
+	</svg>
+{% elseif variant == 'Drop icon' %}
+	<svg {{ logo_attributes }} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000">
+		<path d="M806.6 369.2c-.6-1.1-1.1-1.7-2.2-2.8C750 305.3 672.8 218.7 617.2 157c-17.2-18.3-34.4-36.7-50.5-55.5-3.9-4.4-7.2-8.9-11.1-13.3-3.3-3.3-5-5.6-5-5.6h.6c-18.9-22.2-33.9-47.2-44.4-73.9L504 2.6c0-.6-.6-.6-1.1-1.1-.6 0-1.7-.6-2.2-.6h-.7c-1.1 0-1.7.6-2.2.6l-1.1 1.1-2.8 6.1c-11.1 26.7-26.1 51.6-44.4 73.9h.6s-1.7 2.2-5 5.6c-3.9 4.4-7.2 8.9-11.1 13.3-16.7 18.9-33.3 37.2-50.5 55.5-55.5 61.6-133.3 148.3-187.7 209.4-.6 1.1-1.1 1.7-2.2 2.8C-12 643 211.2 866.3 211.2 866.3h-.6c66.1 76.6 159.9 123.8 260.5 131.1 8.9 1.1 18.3 1.7 28.3 1.7h.6c9.4 0 18.9-.6 28.3-1.7 101.1-7.2 194.4-54.4 260.5-131.1h-.6c.6 0 223.9-223.3 18.4-497.1zM328.4 561.9l-5 7.8-.6.6c-37.8 45.5-60 94.4-67.2 142.7-1.1 6.1-6.7 10-12.2 8.9-3.9-.6-6.7-3.3-8.3-6.7-10-23.3-16.7-47.8-20-72.8-12.8-88.3 13.9-165.4 70.5-231.5 22.8-26.1 45.5-52.2 68.3-78.3 3.9-4.4 10.6-5 15-1.1l1.1 1.1c18.3 21.1 42.2 48.3 68.9 79.4 3.3 3.9 3.3 10 0 14.4-36.7 43.9-75.5 90.5-110.5 135v.5zm315.4 228.8c-21.1 55.5-62.8 88.9-121.6 98.3-83.9 12.8-162.2-44.4-174.9-128.3 0-1.1 0-1.7-.6-2.8-6.7-47.2 7.8-88.9 38.3-124.4 35.5-41.7 113.9-138.3 115-140 1.7 1.7 85 105.5 116.1 142.2 39.4 46.2 48.9 98.9 27.7 155zm123.9-87.2c-.6 1.7-1.7 3.9-2.2 5.6-2.2 5.6-8.3 8.3-13.9 6.1-3.3-1.7-6.1-4.4-6.7-8.3-7.8-46.7-30-93.3-66.1-137.2l-.6-.6-3.3-5-2.2-2.8c-28.9-36.7-181.6-215.5-248.3-293.8-3.3-3.9-3.3-10 0-14.4 22.2-24.4 44.4-48.9 66.1-73.9 3.9-4.4 10.6-4.4 15-.6l.6.6c10 10.6 19.4 21.1 28.9 32.2 60.5 67.8 121.6 134.4 180.5 202.7 74.4 86.2 91.6 185 52.2 289.4z"/>
+	</svg>
+{% endif %}