Add new links card and feature flag system for incremental dev. (#1714)

* Add new links card and feature flag system for incremental dev.

* Switch to env variable for dev flags

* Add members card

* fix order of creators card

* Fix owner icon color and bring org owner to top of list

* lint + other fixes

* Revamp feature flag system, add flag config page

* Add button to flags page in dev mode

* fix env overrides

* make typescript happy with the refs

assets/styles/components.scss

@@ -3,7 +3,7 @@
 */
 
 .known-error .multiselect__tags {
-  border-color: var(--color-special-red) !important;
+  border-color: var(--color-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -104,7 +104,7 @@
       font-weight: bold;
 
       .required {
-        color: var(--color-special-red);
+        color: var(--color-red);
       }
 
       &.size-card-header {
@@ -285,6 +285,10 @@
   }
 
   > :first-child {
+    :first-child {
+      margin-block-start: 0;
+    }
+
     margin-block-start: 0;
   }
 
@@ -476,7 +480,7 @@
   }
 
   &.danger-button {
-    color: var(--color-special-red);
+    color: var(--color-red);
   }
 }
 
@@ -636,12 +640,12 @@ tr.button-transparent {
 }
 
 .danger-button {
-  --background-color: var(--color-special-red);
+  --background-color: var(--color-red);
   --text-color: var(--color-brand-inverted);
 }
 
 .moderation-button {
-  --background-color: var(--color-special-orange);
+  --background-color: var(--color-orange);
   --text-color: var(--color-brand-inverted);
 }
 
@@ -670,7 +674,7 @@ tr.button-transparent {
 }
 
 .known-error .multiselect__tags {
-  border-color: var(--color-special-red) !important;
+  border-color: var(--color-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -913,7 +917,7 @@ tr.button-transparent {
 .text-input-wrapper.known-error,
 input.known-error,
 textarea.known-error {
-  outline: 2px solid var(--color-special-red);
+  outline: 2px solid var(--color-red);
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -923,7 +927,7 @@ textarea.known-error {
 
 .known-errors {
   min-height: 0;
-  color: var(--color-special-red);
+  color: var(--color-red);
 
   ul {
     margin: 0;
@@ -1269,3 +1273,179 @@ a.subtle-link {
 svg.inline-svg {
   vertical-align: middle;
 }
+
+// START STUFF FOR OMORPHIA
+
+.experimental-styles-within {
+  .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-4);
+  }
+
+  .tag-list__item {
+    background-color: var(--color-button-bg);
+    padding: var(--gap-2) var(--gap-6);
+    border-radius: var(--radius-max);
+    font-weight: var(--weight-bold);
+    font-size: var(--text-14);
+    display: flex;
+    gap: var(--gap-4);
+    align-items: center;
+    vertical-align: middle;
+    color: var(--_color, var(--color-secondary));
+
+    svg {
+      width: var(--icon-14);
+      height: var(--icon-14);
+      display: flex;
+    }
+  }
+
+  .status-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-8);
+    padding-left: var(--gap-6);
+
+    color: var(--color-base);
+    font-weight: var(--weight-bold);
+  }
+
+  .status-list__item {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-4);
+
+    svg {
+      width: var(--icon-16);
+      height: var(--icon-16);
+      margin-right: var(--gap-4);
+    }
+
+    span {
+      color: var(--color-secondary);
+      font-style: italic;
+      font-weight: var(--weight-normal);
+    }
+  }
+
+  .status-list__item--color-green svg {
+    color: var(--color-green);
+  }
+
+  .status-list__item--color-orange svg {
+    color: var(--color-orange);
+  }
+
+  .status-list__item--color-red svg {
+    color: var(--color-red);
+  }
+
+  .status-list__item--color-blue svg {
+    color: var(--color-blue);
+  }
+
+  .status-list__item--color-purple svg {
+    color: var(--color-purple);
+  }
+
+  &.flex-card,
+  .flex-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-12);
+    padding: var(--gap-16) var(--gap-24);
+
+    h2 {
+      font-size: var(--text-18);
+      font-weight: var(--weight-extrabold);
+      color: var(--color-contrast);
+      margin: 0;
+    }
+
+    h3 {
+      font-size: var(--text-16);
+      font-weight: var(--weight-bold);
+      color: var(--color-base);
+      margin: 0;
+    }
+
+    > section {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap-8);
+    }
+  }
+
+  .list-style {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-12);
+    font-weight: var(--weight-bold);
+
+    hr {
+      width: 100%;
+      border-color: var(--color-button-border);
+      margin-block: var(--gap-2);
+    }
+  }
+
+  .iconified-list-item {
+    display: flex;
+    gap: var(--gap-8);
+    vertical-align: middle;
+    align-items: center;
+    width: fit-content;
+
+    svg {
+      width: var(--icon-16);
+      height: var(--icon-16);
+    }
+  }
+
+  .links-list {
+    @extend .list-style;
+
+    > a {
+      @extend .iconified-list-item;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .details-list {
+    @extend .list-style;
+  }
+
+  .details-list__item {
+    @extend .iconified-list-item;
+
+    .details-list__item__text--style-secondary {
+      color: var(--color-secondary);
+      font-weight: var(--weight-normal);
+      font-size: var(--text-14);
+    }
+  }
+
+  .icon {
+    --_size: 1rem;
+    width: var(--_size, var(--icon-16)) !important;
+    height: var(--_size, var(--icon-16)) !important;
+    border: 1px solid var(--color-button-border);
+
+    &[data-size='32'] {
+      --_size: var(--icon-32);
+    }
+
+    &[data-shape='circle'] {
+      border-radius: var(--radius-max) !important;
+    }
+
+    &[data-shape='square'] {
+      border-radius: calc(2.25 * (var(--_size) / 16)) !important;
+    }
+  }
+}