From 4069999b782cc00d4e707f5eca32082bdfad45bc Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 14 Nov 2025 12:38:52 -0600
Subject: wip(desktop): new layout work
---
packages/ui/src/components/button.css | 42 ++++++++++++++----------------
packages/ui/src/components/icon-button.css | 41 +++++++++++++++--------------
packages/ui/src/components/icon.tsx | 4 +++
packages/ui/src/components/index.ts | 1 +
packages/ui/src/components/logo.css | 4 +++
packages/ui/src/components/logo.tsx | 14 ++++++++++
packages/ui/src/styles/index.css | 1 +
7 files changed, 65 insertions(+), 42 deletions(-)
create mode 100644 packages/ui/src/components/logo.css
create mode 100644 packages/ui/src/components/logo.tsx
(limited to 'packages/ui/src')
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 0fdb49cdc..7015ea88d 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -19,13 +19,29 @@
border-color: var(--border-hover);
background-color: var(--surface-brand-hover);
}
+ &:focus:not(:disabled) {
+ border-color: var(--border-focus);
+ background-color: var(--surface-brand-focus);
+ }
&:active:not(:disabled) {
border-color: var(--border-active);
background-color: var(--surface-brand-active);
}
+ }
+
+ &[data-variant="ghost"] {
+ border-color: transparent;
+ background-color: transparent;
+ color: var(--text-strong);
+
+ &:hover:not(:disabled) {
+ background-color: var(--surface-raised-base-hover);
+ }
&:focus:not(:disabled) {
- border-color: var(--border-focus);
- background-color: var(--surface-brand-focus);
+ background-color: var(--surface-raised-base-hover);
+ }
+ &:active:not(:disabled) {
+ background-color: var(--surface-raised-base-active);
}
}
@@ -38,9 +54,6 @@
&:hover:not(:disabled) {
background-color: var(--button-secondary-hover);
}
- &:active:not(:disabled) {
- background-color: var(--button-secondary-base);
- }
&:focus:not(:disabled) {
background-color: var(--button-secondary-base);
}
@@ -51,7 +64,8 @@
&:focus-visible:active {
box-shadow: none;
}
- &:active {
+ &:active:not(:disabled) {
+ background-color: var(--button-secondary-base);
scale: 0.99;
transition: all 150ms ease-out;
}
@@ -61,22 +75,6 @@
}
}
- &[data-variant="ghost"] {
- border-color: transparent;
- background-color: transparent;
- color: var(--text-strong);
-
- &:hover:not(:disabled) {
- background-color: var(--button-ghost-hover);
- }
- &:active:not(:disabled) {
- background-color: var(--button-ghost-hover-2);
- }
- &:focus:not(:disabled) {
- background-color: var(--button-ghost-hover);
- }
- }
-
&[data-size="normal"] {
height: 24px;
padding: 0 6px;
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index 9e1c51cb2..3449adaeb 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -26,12 +26,12 @@
&:hover:not(:disabled) {
background-color: var(--icon-strong-hover);
}
- &:active:not(:disabled) {
- background-color: var(--icon-string-active);
- }
&:focus:not(:disabled) {
background-color: var(--icon-strong-focus);
}
+ &:active:not(:disabled) {
+ background-color: var(--icon-string-active);
+ }
&:disabled {
background-color: var(--icon-strong-disabled);
@@ -50,9 +50,6 @@
&:hover:not(:disabled) {
background-color: var(--button-secondary-hover);
}
- &:active:not(:disabled) {
- background-color: var(--button-secondary-base);
- }
&:focus:not(:disabled) {
background-color: var(--button-secondary-base);
}
@@ -63,6 +60,9 @@
&:focus-visible:active {
box-shadow: none;
}
+ &:active:not(:disabled) {
+ background-color: var(--button-secondary-base);
+ }
[data-slot="icon"] {
color: var(--icon-strong-base);
@@ -78,25 +78,26 @@
}
&:hover:not(:disabled) {
- background-color: var(--surface-base-hover);
+ background-color: var(--surface-raised-base-hover);
- [data-slot="icon"] {
- color: var(--icon-hover);
- }
+ /* [data-slot="icon"] { */
+ /* color: var(--icon-hover); */
+ /* } */
+ }
+ &:focus:not(:disabled) {
+ background-color: var(--surface-focus);
}
&:active:not(:disabled) {
- [data-slot="icon"] {
- color: var(--icon-active);
- }
+ background-color: var(--surface-raised-base-active);
+ /* [data-slot="icon"] { */
+ /* color: var(--icon-active); */
+ /* } */
}
&:selected:not(:disabled) {
- background-color: var(--surface-base-active);
- [data-slot="icon"] {
- color: var(--icon-selected);
- }
- }
- &:focus:not(:disabled) {
- background-color: var(--surface-focus);
+ background-color: var(--surface-raised-base-active);
+ /* [data-slot="icon"] { */
+ /* color: var(--icon-selected); */
+ /* } */
}
}
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index c69d04f7a..da893564e 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -153,7 +153,11 @@ const newIcons = {
stop: ``,
enter: ``,
"layout-left": ``,
+ "layout-left-partial": ``,
+ "layout-left-full": ``,
"layout-right": ``,
+ "layout-right-partial": ``,
+ "layout-right-full": ``,
"speech-bubble": ``,
"align-right": ``,
expand: ``,
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index ebc897a1f..7dc7ee0f1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -13,6 +13,7 @@ export * from "./input"
export * from "./favicon"
export * from "./fonts"
export * from "./list"
+export * from "./logo"
export * from "./markdown"
export * from "./message-part"
export * from "./progress-circle"
diff --git a/packages/ui/src/components/logo.css b/packages/ui/src/components/logo.css
new file mode 100644
index 000000000..36e871859
--- /dev/null
+++ b/packages/ui/src/components/logo.css
@@ -0,0 +1,4 @@
+[data-component="logo-mark"] {
+ width: 16px;
+ height: 20px;
+}
diff --git a/packages/ui/src/components/logo.tsx b/packages/ui/src/components/logo.tsx
new file mode 100644
index 000000000..d3588f301
--- /dev/null
+++ b/packages/ui/src/components/logo.tsx
@@ -0,0 +1,14 @@
+export const Mark = (props: { class?: string }) => {
+ return (
+
+ )
+}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 60ce76ffe..b009b6daa 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -19,6 +19,7 @@
@import "../components/icon-button.css" layer(components);
@import "../components/input.css" layer(components);
@import "../components/list.css" layer(components);
+@import "../components/logo.css" layer(components);
@import "../components/markdown.css" layer(components);
@import "../components/message-part.css" layer(components);
@import "../components/progress-circle.css" layer(components);
--
cgit v1.2.3