From fa546c281c283c5de972a9ca15576c3d28fcbccf Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 10 Jul 2024 14:28:41 +0200
Subject: [PATCH] Add an example illustrations

---
 .../themes/components/theme_test.stories.js   |  26 +
 .../themes/components/theme_test.vue          | 528 ++++++++++++++++++
 locale/gitlab.pot                             |   6 -
 3 files changed, 554 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/themes/components/theme_test.stories.js
 create mode 100644 app/assets/javascripts/themes/components/theme_test.vue

diff --git a/app/assets/javascripts/themes/components/theme_test.stories.js b/app/assets/javascripts/themes/components/theme_test.stories.js
new file mode 100644
index 00000000000000..748de4ed8e08e3
--- /dev/null
+++ b/app/assets/javascripts/themes/components/theme_test.stories.js
@@ -0,0 +1,26 @@
+import ThemeTest from './theme_test.vue';
+
+export default {
+  component: ThemeTest,
+  title: 'themes/theme_test',
+};
+
+const Template = () => ({
+  components: { ThemeTest },
+  template: `
+    <div>
+      <theme-test theme="ui-indigo" />
+      <theme-test theme="ui-light-indigo" />
+      <theme-test theme="ui-blue" />
+      <theme-test theme="ui-light-blue" />
+      <theme-test theme="ui-green" />
+      <theme-test theme="ui-light-green" />
+      <theme-test theme="ui-red" />
+      <theme-test theme="ui-light-red" />
+      <theme-test theme="ui-gray" />
+      <theme-test theme="ui-neutral" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
diff --git a/app/assets/javascripts/themes/components/theme_test.vue b/app/assets/javascripts/themes/components/theme_test.vue
new file mode 100644
index 00000000000000..187d4bcc57353c
--- /dev/null
+++ b/app/assets/javascripts/themes/components/theme_test.vue
@@ -0,0 +1,528 @@
+<script>
+export default {
+  props: {
+    theme: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="[theme, 'test_grid']">
+    <div class="test_cell gl-light">
+      <div class="test_illustrations">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M104 45H40v62l12-12h44a8 8 0 0 0 8-8V45Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M74 101h22c7.732 0 14-6.268 14-14V67M53 77h29M53 69h36M53 61h36"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M40 45v62l12-12h44a8 8 0 0 0 8-8V45H47.059"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47" cy="89" r="23" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.717 98.99a23 23 0 1 0-4.1 5.913"
+          />
+          <circle cx="47" cy="89" r="15" fill="var(--orange-02)" />
+          <path
+            fill="var(--gray)"
+            fill-rule="evenodd"
+            d="M44 81h-1v3h-4v2h2.184l.82 10.081.074.919H51.922l.075-.919L52.816 86H55v-2h-4v-3h-7Zm6.809 5H48v9h2.078l.731-9ZM46 95v-9h-2.81l.732 9H46Zm3-11h-4v-1h4v1Z"
+            clip-rule="evenodd"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47.5" cy="89.5" r="22.5" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.767 99.272a22.5 22.5 0 1 0-4.012 5.785"
+          />
+          <circle cx="47.5" cy="89.5" r="15" fill="var(--purple-03)" />
+          <path
+            fill="var(--gray)"
+            fill-rule="evenodd"
+            d="m49.82 84.288-.258.966-2.42 9.03-.259.966-1.931-.518.259-.966 2.419-9.03.259-.965 1.932.517Zm-5.945 8.02-.707-.708-2.09-2.09 2.09-2.089.707-.707-1.414-1.414-.707.707-2.797 2.797-.707.707.707.707 2.797 2.797.707.707 1.414-1.414Zm7.96-.708-.708.708 1.415 1.414.707-.707 2.796-2.797.707-.707-.707-.707-2.796-2.797-.707-.707-1.415 1.414.707.707 2.09 2.09-2.09 2.09Z"
+            clip-rule="evenodd"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47" cy="89" r="23" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.717 98.99a23 23 0 1 0-4.1 5.913"
+          />
+          <circle cx="47" cy="89" r="15" fill="var(--teal-02)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M46.103 80.817a1 1 0 0 1 1.794 0l1.81 3.667a1 1 0 0 0 .752.547l4.046.587a1 1 0 0 1 .555 1.706l-2.928 2.854a1 1 0 0 0-.288.885l.691 4.03a1 1 0 0 1-1.45 1.054l-3.62-1.902a1 1 0 0 0-.93 0l-3.62 1.902a1 1 0 0 1-1.45-1.054l.69-4.03a1 1 0 0 0-.287-.885l-2.928-2.854a1 1 0 0 1 .555-1.706l4.046-.587a1 1 0 0 0 .753-.547l1.81-3.667ZM93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="test_cell gl-dark">
+      <div class="test_illustrations">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M104 45H40v62l12-12h44a8 8 0 0 0 8-8V45Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M74 101h22c7.732 0 14-6.268 14-14V67M53 77h29M53 69h36M53 61h36"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M40 45v62l12-12h44a8 8 0 0 0 8-8V45H47.059"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47" cy="89" r="23" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.717 98.99a23 23 0 1 0-4.1 5.913"
+          />
+          <circle cx="47" cy="89" r="15" fill="var(--orange-02)" />
+          <path
+            fill="var(--gray)"
+            fill-rule="evenodd"
+            d="M44 81h-1v3h-4v2h2.184l.82 10.081.074.919H51.922l.075-.919L52.816 86H55v-2h-4v-3h-7Zm6.809 5H48v9h2.078l.731-9ZM46 95v-9h-2.81l.732 9H46Zm3-11h-4v-1h4v1Z"
+            clip-rule="evenodd"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47.5" cy="89.5" r="22.5" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.767 99.272a22.5 22.5 0 1 0-4.012 5.785"
+          />
+          <circle cx="47.5" cy="89.5" r="15" fill="var(--purple-03)" />
+          <path
+            fill="var(--gray)"
+            fill-rule="evenodd"
+            d="m49.82 84.288-.258.966-2.42 9.03-.259.966-1.931-.518.259-.966 2.419-9.03.259-.965 1.932.517Zm-5.945 8.02-.707-.708-2.09-2.09 2.09-2.089.707-.707-1.414-1.414-.707.707-2.797 2.797-.707.707.707.707 2.797 2.797.707.707 1.414-1.414Zm7.96-.708-.708.708 1.415 1.414.707-.707 2.796-2.797.707-.707-.707-.707-2.796-2.797-.707-.707-1.415 1.414.707.707 2.09 2.09-2.09 2.09Z"
+            clip-rule="evenodd"
+          />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="144"
+          height="144"
+          fill="none"
+          viewBox="0 0 144 144"
+          style="fill: none"
+        >
+          <rect
+            width="144"
+            height="144"
+            fill="var(--purple-02)"
+            rx="72"
+            transform="matrix(-1 0 0 1 144 0)"
+          />
+          <path fill="var(--white)" d="M89 31.65 55 48v36l34 16.35v-68.7Z" />
+          <path fill="var(--purple-04)" d="M89 39h14v46a8 8 0 0 1-8 8h-6V39Z" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M89 93h6a8 8 0 0 0 8-8V39H89M55 53v-5l34-16.35v68.7L55 84V61"
+          />
+          <circle cx="47" cy="89" r="23" fill="var(--white)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M67.717 98.99a23 23 0 1 0-4.1 5.913"
+          />
+          <circle cx="47" cy="89" r="15" fill="var(--teal-02)" />
+          <path
+            stroke="var(--gray)"
+            stroke-linecap="square"
+            stroke-width="2"
+            d="M46.103 80.817a1 1 0 0 1 1.794 0l1.81 3.667a1 1 0 0 0 .752.547l4.046.587a1 1 0 0 1 .555 1.706l-2.928 2.854a1 1 0 0 0-.288.885l.691 4.03a1 1 0 0 1-1.45 1.054l-3.62-1.902a1 1 0 0 0-.93 0l-3.62 1.902a1 1 0 0 1-1.45-1.054l.69-4.03a1 1 0 0 0-.287-.885l-2.928-2.854a1 1 0 0 1 .555-1.706l4.046-.587a1 1 0 0 0 .753-.547l1.81-3.667ZM93 108a21.992 21.992 0 0 0 15.556-6.444A21.992 21.992 0 0 0 115 86"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* INDIGO */
+.ui-indigo .gl-light {
+  --super-sidebar-bg: #f8f8ff;
+  --super-sidebar-user-bar-bg: #222261;
+}
+.ui-indigo .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #222261;
+}
+
+/* LIGHT INDIGO */
+.ui-light-indigo .gl-light {
+  --super-sidebar-bg: #f8f8ff;
+  --super-sidebar-user-bar-bg: #41419f;
+}
+.ui-light-indigo .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #41419f;
+}
+
+/* BLUE */
+.ui-blue .gl-light {
+  --super-sidebar-bg: #e6ecf0;
+  --super-sidebar-user-bar-bg: #0b2640;
+}
+.ui-blue .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #0b2640;
+}
+
+/* LIGHT BLUE */
+.ui-light-blue .gl-light {
+  --super-sidebar-bg: #eef3f7;
+  --super-sidebar-user-bar-bg: #0e4d8d;
+}
+.ui-light-blue .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #0e4d8d;
+}
+
+/* GREEN */
+.ui-green .gl-light {
+  --super-sidebar-bg: #eef4ef;
+  --super-sidebar-user-bar-bg: #0e4328;
+}
+.ui-green .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #0e4328;
+}
+
+/* LIGHT GREEN */
+.ui-light-green .gl-light {
+  --super-sidebar-bg: #eef4ef;
+  --super-sidebar-user-bar-bg: #155635;
+}
+.ui-light-green .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #155635;
+}
+
+/* RED */
+.ui-red .gl-light {
+  --super-sidebar-bg: #faf4f3;
+  --super-sidebar-user-bar-bg: #580d02;
+}
+.ui-red .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #580d02;
+}
+
+/* LIGHT RED */
+.ui-light-red .gl-light {
+  --super-sidebar-bg: #fdf9f8;
+  --super-sidebar-user-bar-bg: #a02e1c;
+}
+.ui-light-red .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #751709;
+}
+
+/* GRAY */
+.ui-gray .gl-light {
+  --super-sidebar-bg: #fbfafd;
+  --super-sidebar-user-bar-bg: #333238;
+
+  --tpurple: #657787;
+}
+.ui-gray .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: #333238;
+
+  --tpurple: #657787;
+}
+
+/* NEUTRAL */
+.ui-neutral .gl-light {
+  --super-sidebar-bg: #fbfafd;
+  --super-sidebar-user-bar-bg: rgba(31, 30, 36, 0.04);
+
+  --tpurple: #4b6c87;
+}
+.ui-neutral .gl-dark {
+  --super-sidebar-bg: #1f1e24;
+  --super-sidebar-user-bar-bg: rgba(255, 255, 255, 0.04);
+
+  --tpurple: #4b6c87;
+}
+
+.gl-light {
+  --bg: #fff;
+  --gl-text-primary: #333238;
+}
+.gl-dark {
+  --bg: #333238;
+  --gl-text-primary: #ececef;
+}
+
+.test_grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.test_cell {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  border-radius: 8px;
+  border: 1px solid var(--super-sidebar-user-bar-bg);
+  background: var(--bg);
+  overflow: hidden;
+
+  --purple-05: hsl(
+    from var(--tpurple, var(--super-sidebar-user-bar-bg)) calc(h + 19) calc(s + 20) calc(l + 22)
+  );
+  --purple-04: color-mix(
+    in srgb,
+    hsl(from var(--tpurple, var(--super-sidebar-user-bar-bg)) calc(h + 15) s calc(l + 17)) 45%,
+    var(--bg)
+  );
+  --purple-03: color-mix(
+    in srgb,
+    hsl(from var(--tpurple, var(--super-sidebar-user-bar-bg)) calc(h + 19) s calc(l + 15)) 28%,
+    var(--bg)
+  );
+  --purple-02: color-mix(
+    in srgb,
+    hsl(
+        from var(--tpurple, var(--super-sidebar-user-bar-bg)) calc(h + 19) calc(s - 20) calc(l + 30)
+      )
+      20%,
+    var(--bg)
+  );
+  --purple-01: color-mix(
+    in srgb,
+    hsl(from var(--tpurple, var(--super-sidebar-user-bar-bg)) h s calc(l + 25)) 6%,
+    var(--bg)
+  );
+
+  --orange-03: color-mix(in srgb, #fb4c00 75%, var(--bg));
+  --orange-02: color-mix(in srgb, #fb4c00 54%, var(--bg));
+  --orange-01: color-mix(in srgb, #fb4c00 35%, var(--bg));
+
+  --teal-03: color-mix(in srgb, hsl(from #009696 h calc(s + 10) l) 82%, var(--bg));
+  --teal-02: color-mix(
+    in srgb,
+    hsl(from #009696 calc(h - 8) calc(s - 20) calc(l + 14)) 64%,
+    var(--bg)
+  );
+  --teal-01: color-mix(in srgb, hsl(from #009696 calc(h - 10) calc(s + 60) l) 18%, var(--bg));
+
+  --white: hsl(from var(--purple-01) h calc(s + 5) calc(l + 20));
+
+  --gray: hsl(from var(--gl-text-primary) h s calc(l - 5));
+}
+.test_cell::before {
+  content: '';
+  display: block;
+  background: linear-gradient(
+    180deg,
+    var(--super-sidebar-user-bar-bg) 50px,
+    var(--super-sidebar-bg) 0
+  );
+}
+.test_illustrations {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 50px;
+}
+</style>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fe04b87ae2ef2f..68f1a753c691a7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -60576,9 +60576,6 @@ msgstr ""
 msgid "Workspaces|Creating"
 msgstr ""
 
-msgid "Workspaces|Develop anywhere"
-msgstr ""
-
 msgid "Workspaces|Devfile location"
 msgstr ""
 
@@ -60597,9 +60594,6 @@ msgstr ""
 msgid "Workspaces|Git reference"
 msgstr ""
 
-msgid "Workspaces|GitLab Workspaces is a powerful collaborative platform that provides a comprehensive set of tools for software development teams to manage their entire development lifecycle."
-msgstr ""
-
 msgid "Workspaces|Group agents"
 msgstr ""
 
-- 
GitLab