wip: desktop work

1 files changed, 102 insertions, 0 deletions

diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
new file mode 100644
index 000000000..c8dfdfab1
--- /dev/null
+++ b/packages/ui/src/components/accordion.css
@@ -0,0 +1,102 @@
+[data-component="accordion"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--border-weak-base);
+
+  [data-slot="accordion-item"] {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0px;
+    align-self: stretch;
+
+    [data-slot="accordion-header"] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+
+      [data-slot="accordion-trigger"] {
+        width: 100%;
+        display: flex;
+        height: 40px;
+        padding: 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        cursor: default;
+        user-select: none;
+
+        background-color: var(--surface-base);
+        border-bottom: 1px solid var(--border-weak-base);
+        color: var(--text-strong);
+        transition: background-color 0.15s ease;
+
+        /* text-12-regular */
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-small);
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 166.667% */
+        letter-spacing: var(--letter-spacing-normal);
+
+        &:hover {
+          background-color: var(--surface-base);
+        }
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &[data-disabled] {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &:last-child {
+      [data-slot="accordion-trigger"] {
+        border-bottom: none;
+      }
+    }
+
+    &[data-expanded] {
+      border-bottom: 1px solid var(--border-weak-base);
+    }
+
+    [data-slot="accordion-content"] {
+      overflow: hidden;
+      width: 100%;
+
+      /* animation: slideUp 250ms cubic-bezier(0.87, 0, 0.13, 1); */
+      /**/
+      /* &[data-expanded] { */
+      /*   animation: slideDown 250ms cubic-bezier(0.87, 0, 0.13, 1); */
+      /* } */
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}