Survey form fixes with tailwind and new js (#54)

* survey form with tailwind and new js

* change the tracking method

* temporary segment key change

* revert the segment key change

* rename partial

* reorganize js files

Author: colegoldsmith

src/css/ds-blocks.css

@@ -246,167 +246,3 @@ html[data-theme="dark"] .doc .source-toolbox {
 html[data-theme="dark"] .doc .admonitionblock .icon::before {
   color: var(--ds-primary-text);
 }
-
-/*
- *
- * Dialog component
- *
- */
-
-dialog {
-  display: none;
-  padding: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 6px;
-  border: 1px solid var(--ds-neutral-300);
-  width: 90%;
-  max-width: 640px;
-  background: var(--body-background);
-  color: var(--doc-font-color);
-}
-
-/* dialog header */
-dialog .header {
-  display: flex;
-  padding: var(--ds-space-3);
-  padding-bottom: var(--ds-space-2);
-  align-items: center;
-  gap: var(--ds-space-2);
-  align-self: stretch;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--ds-neutral-200);
-}
-
-dialog .header .title {
-  @include text-h1;
-
-  color: var(--heading-font-color);
-}
-
-dialog .header .close-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--ds-space-1);
-}
-
-dialog .header kbd {
-  border: none;
-  box-shadow: none;
-  background: var(--ds-neutral-100);
-}
-
-dialog .header button {
-  background: transparent;
-  border: none;
-  line-height: 1;
-}
-
-dialog .header .material-icons {
-  color: var(--link-font-color);
-}
-
-/* dialog content */
-dialog form {
-  width: 100%;
-}
-
-dialog .content {
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  border-bottom: 1px solid var(--ds-neutral-200);
-  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-3);
-}
-
-dialog .content .message {
-  @include text-h2;
-
-  color: var(--heading-font-color);
-  margin-bottom: var(--ds-space-4);
-}
-
-dialog .content .question {
-  font-size: calc(13 / var(--rem-base) * 1rem);
-  color: var(--ds-neutral-700);
-  font-weight: 600;
-  letter-spacing: 0.65px;
-}
-
-dialog .content textarea {
-  font-family: var(--body-font-family);
-  color: var(--doc-font-color);
-  background: var(--body-background);
-  height: calc(160 / var(--rem-base) * 1rem);
-  margin-top: var(--ds-space-h);
-  resize: none;
-  padding: var(--ds-space-1);
-  border-radius: 6px;
-  border: 1px solid var(--ds-neutral-300);
-}
-
-dialog .action {
-  display: flex;
-  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3) var(--ds-space-3);
-  align-items: center;
-  gap: var(--ds-space-1);
-  align-self: stretch;
-  justify-content: flex-end;
-}
-
-dialog[open] {
-  display: flex;
-}
-
-dialog::backdrop {
-  background: rgba(10, 10, 10, 0.6);
-}
-
-.dialog-action,
-.dialog-action--response {
-  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition-delay: 300ms;
-}
-
-.dialog-action + .dialog-action--response {
-  position: absolute;
-  top: 0;
-  line-height: var(--ds-space-5);
-  height: var(--ds-space-5);
-}
-
-.dialog-action--response {
-  font-weight: 600;
-  transition-delay: 1200ms;
-}
-
-.dialog-action--container {
-  position: relative;
-
-  & .dialog-action {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  & .dialog-action--response {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  &:not(.first-time) .dialog-action {
-    transition-delay: 2000ms;
-  }
-
-  &.dialog-action--animate {
-    & .dialog-action {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    & .dialog-action--response {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}

src/css/ds-dark.css

@@ -152,6 +152,10 @@ html[data-theme="dark"] .for-light {
   display: none;
 }
 
+html[data-theme="dark"] ::backdrop {
+  --ds-background-backdrop: rgba(10, 10, 10, 0.6);
+}
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) {
     @include dark-theme;

src/css/ds-input.css

@@ -152,6 +152,10 @@ html[data-theme="light"] .for-dark {
   display: none;
 }
 
+html[data-theme="light"] ::backdrop {
+  --ds-background-backdrop: rgba(0, 0, 0, 0.6);
+}
+
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) {
     @include light-theme;

src/css/ds-light.css

@@ -13,7 +13,6 @@
 @import "nav.css";
 @import "main.css";
 @import "ds-button.css";
-@import "ds-input.css";
 @import "ds-logo.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";

src/css/site.css

@@ -1,4 +1,4 @@
-@mixin btn {
+@layer components {
   .btn {
     @apply px-1.5 py-1 h-5 transition ease-in-out rounded-xl whitespace-nowrap text-button border border-transparent flex items-center justify-center;
   }

src/css/tailwind/btn.css

@@ -0,0 +1,14 @@
+@layer components {
+  .dialog {
+    @apply rounded-xl border;
+
+    overscroll-behavior: contain;
+    box-shadow: 0 6px 16px 0 #0a0a0a1f;
+    background: var(--ds-background-body);
+    color: var(--ds-text-primary);
+
+    &::backdrop {
+      background-color: var(--ds-background-backdrop);
+    }
+  }
+}

src/css/tailwind/dialog.css

@@ -0,0 +1,24 @@
+
+@layer components {
+  .input {
+    @include text-body;
+
+    @apply transition-colors rounded-xl border p-1 w-full;
+
+    color: var(--ds-text-primary);
+    background: none;
+
+    &:hover {
+      border-color: var(--ds-neutral-outlined-hover-border);
+    }
+
+    &:focus {
+      outline: 2px solid var(--ds-focus-visible);
+      outline-offset: -2px;
+    }
+
+    &::placeholder {
+      color: var(--ds-text-placeholder);
+    }
+  }
+}

src/css/tailwind/input.css

@@ -1,14 +1,12 @@
 @import "../ds-typography.css";
 @import "btn.css";
+@import "dialog.css";
+@import "input.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  @include btn;
-}
-
 @layer base {
   *,
   ::before,

src/css/tailwind/tailwind.css

@@ -28,4 +28,5 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: 'liga';
+  vertical-align: middle;
 }