Omorphia Cleanup + Adding missing styles (#18)

* Add missing knossos styles + some knossos cleanup * remove yarn.lock * Update output syntax
2023-03-13 11:40:41 -07:00
parent c8a30e793a
commit 1b81a1f4a6
25 changed files with 882 additions and 489 deletions
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -16,10 +16,6 @@ const props = defineProps({
    type: Function,
    default: null,
  },
-  design: {
-    type: String,
-    default: 'default',
-  },
  color: {
    type: String,
    default: 'default',
@@ -30,57 +26,41 @@ const props = defineProps({
  },
 })

-const defaultDesign = computed(() => props.design === 'default')
 const accentedButton = computed(
-  () => defaultDesign.value && ['danger', 'primary'].includes(props.color)
+  () => ['danger', 'primary'].includes(props.color)
 )
 </script>

 <template>
-  <!--  <nuxt-link-->
-  <!--    v-if="link && link.startsWith('/')"-->
-  <!--    class="omorphia__button button-base button-color-base padding-block-sm padding-inline-lg radius-sm"-->
-  <!--    :class="{-->
-  <!--      'icon-only': props.iconOnly,-->
-  <!--      'bg-raised': raised,-->
-  <!--      'bg-red': danger,-->
-  <!--      'bg-brand': primary,-->
-  <!--      'color-accent-contrast': danger || primary,-->
-  <!--    }"-->
-  <!--    :to="link"-->
-  <!--    :target="external ? '_blank' : '_self'"-->
-  <!--  >-->
-  <!--    <slot />-->
-  <!--    <Icon v-if="external && !props.iconOnly" class="external-icon" icon="external" />-->
-  <!--    <Icon v-if="!$slots.default" icon="unknown" />-->
-  <!--  </nuxt-link>-->
-  <a
+  <router-link
    v-if="link"
-    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
+    class="btn"
    :class="{
-      'standard-button': defaultDesign,
      'icon-only': props.iconOnly,
-      'bg-raised': defaultDesign && color === 'raised',
-      'bg-red': defaultDesign && color === 'danger',
-      'bg-brand': defaultDesign && color === 'primary',
+      'btn-raised': color === 'raised',
+      'btn-danger': color === 'danger',
+      'btn-primary': color === 'primary',
+      'btn-secondary': color === 'secondary',
+      'btn-highlight': color === 'highlight',
      'color-accent-contrast': accentedButton,
    }"
-    :href="link"
+    :to="link"
    :target="external ? '_blank' : '_self'"
  >
    <slot />
    <ExternalIcon v-if="external && !iconOnly" class="external-icon" />
    <UnknownIcon v-if="!$slots.default" />
-  </a>
+  </router-link>
  <button
    v-else
-    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
+    class="btn"
    :class="{
-      'standard-button': defaultDesign,
      'icon-only': props.iconOnly,
-      'bg-raised': defaultDesign && color === 'raised',
-      'bg-red': defaultDesign && color === 'danger',
-      'bg-brand': defaultDesign && color === 'primary',
+      'btn-raised': color === 'raised',
+      'btn-danger': color === 'danger',
+      'btn-primary': color === 'primary',
+      'btn-secondary': color === 'secondary',
+      'btn-highlight': color === 'highlight',
      'color-accent-contrast': accentedButton,
    }"
    @click="action"
@@ -95,41 +75,4 @@ const accentedButton = computed(
  background: none;
  color: var(--color-base);
 }
-
-.omorphia__button {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  width: fit-content;
-  height: fit-content;
-  text-decoration: none;
-
-  :deep(svg) {
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
-  }
-
-  :deep(.external-icon) {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-bottom: auto;
-    margin-left: 0.25rem;
-    margin-right: 0;
-  }
-
-  &.icon-only {
-    padding: 0;
-    height: 2.25rem;
-    width: 2.25rem;
-
-    :deep(svg) {
-      min-width: 1.25rem;
-      max-width: 1.25rem;
-      min-height: 1.25rem;
-      max-height: 1.25rem;
-      margin: auto;
-    }
-  }
-}
 </style>
--- a/lib/components/base/Card.vue
+++ b/lib/components/base/Card.vue
@@ -29,12 +29,11 @@ function toggleCollapsed() {

 <template>
  <div
-    class="omorphia__card standard-body padding-xl bg-raised radius-lg margin-bottom-md"
-    :class="{ 'auto-body': !noAutoBody }"
+    class="card"
  >
    <div v-if="!!$slots.header || collapsible" class="header">
      <slot name="header"></slot>
-      <div v-if="collapsible" class="button-group margin-left-auto margin-right-0">
+      <div v-if="collapsible" class="btn-group">
        <Button :action="toggleCollapsed">
          <DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
        </Button>
@@ -45,9 +44,6 @@ function toggleCollapsed() {
 </template>

 <style lang="scss" scoped>
-.omorphia__card {
-}
-
 .header {
  display: flex;

@@ -59,4 +55,9 @@ function toggleCollapsed() {
    margin-bottom: var(--gap-lg);
  }
 }
+
+.btn-group {
+  margin-left: auto;
+  margin-right: 0;
+}
 </style>
--- a/lib/components/base/ProjectCard.vue
+++ b/lib/components/base/ProjectCard.vue
@@ -1,6 +1,6 @@
 <template>
  <article
-    class="project-card base-card padding-bg"
+    class="project-card base-card"
    :aria-label="name"
    role="listitem"
  >
@@ -18,7 +18,7 @@
      :to="`/${projectTypeUrl}/${id}`"
      :style="color ? `background-color: ${toColor};` : ''"
    >
-      <img v-if="featuredImage" :src="featuredImage" alt="gallery image" />
+      <img v-if="featuredImage" :src="featuredImage" alt="gallery image" loading="lazy" />
    </router-link>
    <div class="title">
      <router-link :to="`/${projectTypeUrl}/${id}`">
@@ -307,7 +307,7 @@ export default defineComponent({
    display: inline-block;
    width: 100%;
    height: 10rem;
-    background-color: var(--color-button-bg-active);
+    background-color: var(--color-button-bg);

    &.no-image {
      filter: brightness(0.7);
@@ -596,7 +596,7 @@ export default defineComponent({

    a {
      /* Uses active color to increase contrast */
-      color: var(--color-link-active);
+      color: var(--color-blue);
      text-decoration: underline;
    }
  }
--- a/lib/components/brand/AnimatedLogo.vue
+++ b/lib/components/brand/AnimatedLogo.vue
@@ -5,11 +5,8 @@
      width="100%"
      height="100%"
      viewBox="0 0 590 591"
-      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
      xml:space="preserve"
-      xmlns:serif="http://www.serif.com/"
      style="
        fill-rule: evenodd;
        clip-rule: evenodd;
@@ -32,11 +29,8 @@
    width="100%"
    height="100%"
    viewBox="0 0 590 591"
-    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve"
-    xmlns:serif="http://www.serif.com/"
    style="
        fill-rule: evenodd;
        clip-rule: evenodd;
--- a/lib/components/nav/NavRow.vue
+++ b/lib/components/nav/NavRow.vue
@@ -5,7 +5,7 @@ defineProps({})
 <template>
  <div class="omorphia__navrow">
    <slot />
-    <div class="margin-left-auto">
+    <div class="right-slot">
      <slot name="right" />
    </div>
  </div>
@@ -16,7 +16,11 @@ defineProps({})
  display: flex;
  flex-direction: row;

-  :deep(.omorphia__button) {
+  .right-slot {
+    margin-left: auto;
+  }
+
+  :deep(.btn) {
    position: relative;

    &::after {
--- a/lib/components/nav/NavStack.vue
+++ b/lib/components/nav/NavStack.vue
@@ -13,7 +13,7 @@ defineProps({})
  display: flex;
  flex-direction: column;

-  :deep(.omorphia__button) {
+  :deep(.btn) {
    position: relative;
    width: 100%;