Update KLogo with all brand book accepted variants.

learningequality · Mar 8, 2024 · 6d768c5 · 6d768c5
1 parent b96fd1c
commit 6d768c5
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 17 deletions.
diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue
@@ -62,6 +62,27 @@
           :maxWidth="150"
         />
       </DocsShowCode>
+      <p>Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.</p>
+
+      <DocsShow>
+        <template
+          v-for="colorScheme in ['monoBlack', 'monoWhite', 'monoPrimary', 'monoSecondary', 'whiteGrey', 'blackGrey']"
+        >
+          <p :key="colorScheme">
+            Color scheme: {{ colorScheme }}
+          </p>
+          <KLogo
+            :key="colorScheme"
+            class="halfsquare-background"
+            :colorScheme="colorScheme"
+            altText="Kolibri Logo"
+            :showBackground="true"
+            :height="150"
+            width="100%"
+            :maxWidth="150"
+          />
+        </template>
+      </DocsShow>
     </DocsPageSection>
 
     <DocsPageSection title="Usage" anchor="#usage">
@@ -91,3 +112,19 @@
   export default {};
 
 </script>
+
+
+<style scoped>
+
+  .halfsquare-background {
+    background-size: 10px 10px; /* size of the squares */
+    background-image: 
+      linear-gradient(45deg, #ffffff 50%, #F5F5F5 50%),
+      linear-gradient(45deg, #F5F5F5 50%, #ffffff 50%);
+    background-position:
+      0 0, /* this is the position of the first pattern */
+      5px 5px; /* this position offsets the second pattern to create the checker effect */
+    background-repeat: repeat;
+  }
+
+</style>
diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue
@@ -15,22 +15,21 @@
     :aria-label="altText"
   >
     <title>{{ altText }}</title>
-    <use href="#background" class="background" />
-    <use href="#body" />
-    <use href="#right-wing-inner" class="wing-inner" />
-    <use href="#right-wing-middle" class="wing-middle" />
-    <use href="#right-wing-outer" class="wing-outer" />
-    <use href="#left-wing-inner" class="wing-inner" />
-    <use href="#left-wing-middle" class="wing-middle" />
-    <use href="#left-wing-outer" class="wing-outer" />
+    <use href="#background" class="background" :fill="blobColor" :mask="applyMask ? 'url(#cutout-mask)' : null" />
+    <use v-if="!applyMask" href="#body" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-inner" class="wing-inner" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-middle" class="wing-middle" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#right-wing-outer" class="wing-outer" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-inner" class="wing-inner" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-middle" class="wing-middle" :stroke="strokeColor" />
+    <use v-if="!applyMask" href="#left-wing-outer" class="wing-outer" :stroke="strokeColor" />
     <defs>
       <g id="background">
         <path
           d="M0.648134 212.595C-2.51313 252.336 5.47948 295.575 33.7122 323.871C45.9596 336.111
           61.2887 344.835 76.9956 352.107C174.856 397.333 309.975 398.108 379.205 306.206C417.597
           255.297 401.353 177.046 375.427 122.68C353.079 75.8048 314.429 36.3018 266.731 15.676C200.424
           -13.077 139.704 -1.47245 87.056 43.8924C38.0266 86.1774 5.77773 147.936 0.648134 212.595Z"
-          fill="#FFCB00"
         />
       </g>
       <g id="body">
@@ -41,7 +40,6 @@
           218.711 134.8 222.5 143C233.5 169.5 250 196.67 216 251C214.022 254.16 212.36 259.788
           210 263M210 263C199.5 291.5 203.222 309.173 211.5 316C220.505 323.427 229 315 231
           306.5C233 298 225.5 280.5 210 263Z"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -50,7 +48,6 @@
       <g id="right-wing-inner">
         <path
           d="M261 158C271.333 168.667 285.8 196.4 261 222"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -59,7 +56,6 @@
       <g id="right-wing-middle">
         <path
           d="M282.5 138C299.102 155.333 322.344 200.4 282.5 242"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -68,7 +64,6 @@
       <g id="right-wing-outer">
         <path
           d="M303.5 116C326.893 140.667 359.644 204.8 303.5 264"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -77,7 +72,6 @@
       <g id="left-wing-inner">
         <path
           d="M141.5 158C131.167 168.667 116.7 196.4 141.5 222"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -86,7 +80,6 @@
       <g id="left-wing-middle">
         <path
           d="M120 138C103.398 155.333 80.1559 200.4 120 242"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -95,12 +88,23 @@
       <g id="left-wing-outer">
         <path
           d="M99 116C75.6067 140.667 42.856 204.8 99 264"
-          stroke="#4368F5"
           stroke-width="13"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
       </g>
+      <mask id="cutout-mask">
+        <!-- Start with a white rectangle as the base of the mask -->
+        <rect x="0" y="0" width="402" height="382" fill="white" />
+        <!-- Cut out the shapes that make up the logo from the mask -->
+        <use href="#body" stroke="black" />
+        <use href="#right-wing-inner" class="wing-inner" stroke="black" />
+        <use href="#right-wing-middle" class="wing-middle" stroke="black" />
+        <use href="#right-wing-outer" class="wing-outer" stroke="black" />
+        <use href="#left-wing-inner" class="wing-inner" stroke="black" />
+        <use href="#left-wing-middle" class="wing-middle" stroke="black" />
+        <use href="#left-wing-outer" class="wing-outer" stroke="black" />
+      </mask>
     </defs>
   </svg>
 
@@ -110,6 +114,37 @@
 <script>
 
   import { validateAndFormatUnits } from '../KImg/utils';
+  // We do not retheme the Kolibri logo, so we always reference default colors here
+  // rather than using the dynamic branding or themeing.
+  import { defaultBrandColors } from '../styles/colorsDefault';
+  import materialColors from '../styles/colorsMaterial';
+
+  const colorScheme = {
+    default: {
+      blobColor: defaultBrandColors.secondary.v_1000,
+      strokeColor: defaultBrandColors.primary.v_1000,
+    },
+    monoBlack: {
+      blobColor: materialColors.black,
+    },
+    monoWhite: {
+      blobColor: materialColors.white,
+    },
+    monoPrimary: {
+      blobColor: defaultBrandColors.primary.v_1000,
+    },
+    monoSecondary: {
+      blobColor: defaultBrandColors.secondary.v_1000,
+    },
+    whiteGrey: {
+      blobColor: materialColors.grey.v_200,
+      strokeColor: materialColors.white,
+    },
+    blackGrey: {
+      blobColor: materialColors.grey.v_200,
+      strokeColor: materialColors.black,
+    },
+  };
 
   export default {
     name: 'KLogo',
@@ -172,13 +207,35 @@
         default: false,
       },
       /**
-       * Whether to show the loading animation for the logo
+       * The color scheme for the logo: default, monoBlack, monoWhite, monoPrimary, monoSecondary, whiteGrey, blackGrey
+       */
+      colorScheme: {
+        type: String,
+        default: 'default',
+        validator: value => colorScheme[value] !== undefined,
+      },
+      /**
+       * Whether to show the loading animation for the logo - only works for non-mono colorSchemes
        */
       animate: {
         type: Boolean,
         default: false,
       },
     },
+    computed: {
+      scheme() {
+        return colorScheme[this.colorScheme] || colorScheme.default;
+      },
+      applyMask() {
+        return this.colorScheme.startsWith('mono');
+      },
+      blobColor() {
+        return this.scheme.blobColor;
+      },
+      strokeColor() {
+        return this.scheme.strokeColor;
+      },
+    },
     methods: {
       validateAndFormatUnits,
     },