summaryrefslogtreecommitdiffhomepage
path: root/packages/css/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/css/src')
-rw-r--r--packages/css/src/assets/fonts/geist-italic.ttfbin0 -> 153700 bytes
-rw-r--r--packages/css/src/assets/fonts/geist-italic.woff2bin0 -> 65488 bytes
-rw-r--r--packages/css/src/assets/fonts/geist-mono-italic.ttfbin0 -> 165204 bytes
-rw-r--r--packages/css/src/assets/fonts/geist-mono-italic.woff2bin0 -> 72328 bytes
-rw-r--r--packages/css/src/assets/fonts/geist-mono.ttfbin0 -> 155792 bytes
-rw-r--r--packages/css/src/assets/fonts/geist-mono.woff2bin0 -> 66232 bytes
-rw-r--r--packages/css/src/assets/fonts/geist.ttfbin0 -> 151032 bytes
-rw-r--r--packages/css/src/assets/fonts/geist.woff2bin0 -> 64048 bytes
-rw-r--r--packages/css/src/base.css31
-rw-r--r--packages/css/src/components/button.css71
-rw-r--r--packages/css/src/components/select.css102
-rw-r--r--packages/css/src/components/tabs.css53
-rw-r--r--packages/css/src/components/tooltip.css53
-rw-r--r--packages/css/src/index.css1
-rw-r--r--packages/css/src/tailwind.css5
-rw-r--r--packages/css/src/theme.css28
16 files changed, 195 insertions, 149 deletions
diff --git a/packages/css/src/assets/fonts/geist-italic.ttf b/packages/css/src/assets/fonts/geist-italic.ttf
new file mode 100644
index 000000000..9d29a123b
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-italic.ttf
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist-italic.woff2 b/packages/css/src/assets/fonts/geist-italic.woff2
new file mode 100644
index 000000000..29649a03e
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-italic.woff2
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist-mono-italic.ttf b/packages/css/src/assets/fonts/geist-mono-italic.ttf
new file mode 100644
index 000000000..7f23cf1b6
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-mono-italic.ttf
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist-mono-italic.woff2 b/packages/css/src/assets/fonts/geist-mono-italic.woff2
new file mode 100644
index 000000000..ad84c9979
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-mono-italic.woff2
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist-mono.ttf b/packages/css/src/assets/fonts/geist-mono.ttf
new file mode 100644
index 000000000..41208ea87
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-mono.ttf
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist-mono.woff2 b/packages/css/src/assets/fonts/geist-mono.woff2
new file mode 100644
index 000000000..6c2f194c7
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist-mono.woff2
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist.ttf b/packages/css/src/assets/fonts/geist.ttf
new file mode 100644
index 000000000..e7adab279
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist.ttf
Binary files differ
diff --git a/packages/css/src/assets/fonts/geist.woff2 b/packages/css/src/assets/fonts/geist.woff2
new file mode 100644
index 000000000..38319ea37
--- /dev/null
+++ b/packages/css/src/assets/fonts/geist.woff2
Binary files differ
diff --git a/packages/css/src/base.css b/packages/css/src/base.css
index fe0525d37..41ee9a5ec 100644
--- a/packages/css/src/base.css
+++ b/packages/css/src/base.css
@@ -30,18 +30,9 @@ html,
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
tab-size: 4; /* 3 */
- font-family: --theme(
- --default-font-family,
- ui-sans-serif,
- system-ui,
- sans-serif,
- "Apple Color Emoji",
- "Segoe UI Emoji",
- "Segoe UI Symbol",
- "Noto Color Emoji"
- ); /* 4 */
- font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
- font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+ font-family: var(--font-sans); /* 4 */
+ font-feature-settings: var(--font-sans--font-feature-settings, normal); /* 5 */
+ font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
@@ -110,19 +101,9 @@ code,
kbd,
samp,
pre {
- font-family: --theme(
- --default-mono-font-family,
- ui-monospace,
- SFMono-Regular,
- Menlo,
- Monaco,
- Consolas,
- "Liberation Mono",
- "Courier New",
- monospace
- ); /* 1 */
- font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
- font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+ font-family: var(--font-mono); /* 1 */
+ font-feature-settings: var(--font-mono--font-feature-settings, normal); /* 2 */
+ font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
font-size: 1em; /* 4 */
}
diff --git a/packages/css/src/components/button.css b/packages/css/src/components/button.css
index 5833d05e9..c50d76412 100644
--- a/packages/css/src/components/button.css
+++ b/packages/css/src/components/button.css
@@ -6,76 +6,66 @@
border-style: solid;
border-width: 1px;
border-radius: var(--radius-md);
- font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--text-base--line-height);
font-weight: var(--font-weight-normal);
text-decoration: none;
user-select: none;
- gap: calc(var(--spacing) * 2);
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-
- &:focus {
- outline: none;
- }
+ gap: calc(var(--spacing) * 0.5);
&[data-variant="primary"] {
- border-color: var(--border-default-border);
- background-color: var(--surface-brand-surface-brand);
- color: var(--text-on-brand-text-strong-on-brand);
+ border-color: var(--border-base);
+ background-color: var(--surface-brand-base);
+ color: var(--text-on-brand-strong);
&:hover:not(:disabled) {
- border-color: var(--border-default-border-hover);
- background-color: var(--surface-brand-surface-brand-hover);
+ border-color: var(--border-hover);
+ background-color: var(--surface-brand-hover);
}
&:active:not(:disabled) {
- border-color: var(--border-default-border-active);
- background-color: var(--surface-brand-surface-brand-active);
+ border-color: var(--border-active);
+ background-color: var(--surface-brand-active);
}
&:focus:not(:disabled) {
- border-color: var(--border-default-border-focus);
- background-color: var(--surface-brand-surface-brand-focus);
+ border-color: var(--border-focus);
+ background-color: var(--surface-brand-focus);
}
}
&[data-variant="secondary"] {
- border-color: var(--border-default-border);
- background-color: var(--surface-default-surface);
- color: var(--text-default-text);
+ border-color: var(--border-base);
+ background-color: var(--surface-base);
+ color: var(--text-strong);
&:hover:not(:disabled) {
- border-color: var(--border-default-border-hover);
- background-color: var(--surface-default-surface-hover);
+ border-color: var(--border-hover);
+ background-color: var(--surface-hover);
}
&:active:not(:disabled) {
- border-color: var(--border-default-border-active);
- background-color: var(--surface-default-surface-active);
+ border-color: var(--border-active);
+ background-color: var(--surface-active);
}
&:focus:not(:disabled) {
- border-color: var(--border-default-border-focus);
- background-color: var(--surface-default-surface-focus);
+ border-color: var(--border-focus);
+ background-color: var(--surface-focus);
}
}
&[data-variant="ghost"] {
border-color: transparent;
background-color: transparent;
- color: var(--text-default-text);
+ color: var(--text-strong);
&:hover:not(:disabled) {
- background-color: var(--surface-default-surface-hover);
+ background-color: var(--surface-hover);
}
&:active:not(:disabled) {
- border-color: var(--border-default-border-active);
- background-color: var(--surface-default-surface-active);
+ border-color: var(--border-active);
+ background-color: var(--surface-active);
}
&:focus:not(:disabled) {
- border-color: var(--border-default-border-focus);
- background-color: var(--surface-default-surface-focus);
+ border-color: var(--border-focus);
+ background-color: var(--surface-focus);
}
}
@@ -90,4 +80,15 @@
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
}
+
+ &:disabled {
+ border-color: var(--border-disabled);
+ background-color: var(--surface-disabled);
+ color: var(--text-weak);
+ cursor: not-allowed;
+ }
+
+ &:focus {
+ outline: none;
+ }
}
diff --git a/packages/css/src/components/select.css b/packages/css/src/components/select.css
index 2403bfb26..da3334853 100644
--- a/packages/css/src/components/select.css
+++ b/packages/css/src/components/select.css
@@ -1,12 +1,49 @@
[data-component="select"] {
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
+ [data-slot="trigger"] {
+ [data-slot="value"] {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ [data-slot="icon"] {
+ width: fit-content;
+ height: fit-content;
+ flex-shrink: 0;
+ color: var(--text-weak);
+ transition: transform 0.1s ease-in-out;
+ }
}
+}
- &:focus {
- outline: none;
- box-shadow: 0 0 0 2px var(--color-primary);
+[data-component="select-content"] {
+ min-width: 8rem;
+ overflow: hidden;
+ border-radius: var(--radius-md);
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--border-weak-base);
+ background-color: var(--surface-raised-base);
+ padding: calc(var(--spacing) * 1);
+ box-shadow: var(--shadow-md);
+ z-index: 50;
+
+ &[data-closed] {
+ animation: select-close 0.15s ease-out;
+ }
+
+ &[data-expanded] {
+ animation: select-open 0.15s ease-out;
+ }
+
+ [data-slot="list"] {
+ overflow-y: auto;
+ max-height: 12rem;
+ white-space: nowrap;
+ overflow-x: hidden;
+
+ &:focus {
+ outline: none;
+ }
}
[data-slot="section"] {
@@ -14,7 +51,7 @@
line-height: var(--text-xs--line-height);
font-weight: var(--font-weight-light);
text-transform: uppercase;
- color: var(--text-default-text-weak);
+ color: var(--text-weak);
opacity: 0.6;
margin-top: calc(var(--spacing) * 3);
margin-left: calc(var(--spacing) * 2);
@@ -31,7 +68,7 @@
border-radius: var(--radius-sm);
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
- color: var(--text-default-text);
+ color: var(--text-base);
cursor: pointer;
transition:
background-color 0.2s ease-in-out,
@@ -40,60 +77,25 @@
user-select: none;
&[data-highlighted] {
- background-color: var(--surface-default-surface);
+ background-color: var(--surface-base);
}
&[data-disabled] {
+ background-color: var(--surface-disabled);
pointer-events: none;
- opacity: 0.5;
}
[data-slot="item-indicator"] {
margin-left: auto;
}
- }
- [data-slot="trigger"] {
- [data-slot="value"] {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &:focus {
+ outline: none;
}
- [data-slot="icon"] {
- width: fit-content;
- height: fit-content;
- flex-shrink: 0;
- color: var(--text-default-text-weak);
- transition: transform 0.1s ease-in-out;
- }
- }
-}
-
-[data-component="select-content"] {
- min-width: 8rem;
- overflow: hidden;
- border-radius: var(--radius-md);
- border-width: 1px;
- border-style: solid;
- border-color: var(--border-default-border-weak);
- background-color: var(--surface-raised-surface-raised);
- padding: calc(var(--spacing) * 1);
- box-shadow: var(--shadow-md);
- z-index: 50;
- &[data-closed] {
- animation: select-close 0.15s ease-out;
- }
-
- &[data-expanded] {
- animation: select-open 0.15s ease-out;
- }
-
- [data-slot="list"] {
- overflow-y: auto;
- max-height: 12rem;
- white-space: nowrap;
- overflow-x: hidden;
+ &:hover {
+ background-color: var(--surface-hover);
+ }
}
}
diff --git a/packages/css/src/components/tabs.css b/packages/css/src/components/tabs.css
index 3a70b4867..3790859d1 100644
--- a/packages/css/src/components/tabs.css
+++ b/packages/css/src/components/tabs.css
@@ -1,98 +1,95 @@
[data-component="tabs"] {
+ width: 100%;
+ height: 100%;
display: flex;
flex-direction: column;
- height: 100%;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: var(--radius-sm);
+ border-color: var(--border-weak-base);
+ background-color: var(--background-weaker);
+ overflow: clip;
& [data-slot="list"] {
+ width: 100%;
position: relative;
display: flex;
align-items: center;
- background-color: var(--surface-default-surface);
overflow-x: auto;
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
-
&::-webkit-scrollbar {
display: none;
}
- /* Divider between tabs */
- & > [data-slot="trigger"]:not(:first-child) {
- border-left: 1px solid var(--border-default-border-weak);
- }
-
/* After element to fill remaining space */
&::after {
content: "";
display: block;
flex-grow: 1;
- height: calc(var(--spacing) * 8);
- border-left: 1px solid var(--border-default-border-weak);
- border-bottom: 1px solid var(--border-default-border-weak);
+ height: 100%;
+ border-bottom: 1px solid var(--border-weak-base);
+ background-color: var(--background-weak);
+ border-top-right-radius: var(--radius-sm);
}
&:empty::after {
- border-left: none;
+ display: none;
}
}
& [data-slot="trigger"] {
position: relative;
- padding: 0 calc(var(--spacing) * 3);
- height: calc(var(--spacing) * 8);
+ height: 36px;
+ padding: 8px 12px;
display: flex;
align-items: center;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
- color: var(--text-default-text-weak);
+ color: var(--text-weak);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
- border-bottom: 1px solid var(--border-default-border-weak);
- background-color: transparent;
+ border-bottom: 1px solid var(--border-weak-base);
+ border-right: 1px solid var(--border-weak-base);
+ background-color: var(--background-weak);
transition:
background-color 0.15s ease,
color 0.15s ease;
&:disabled {
pointer-events: none;
- opacity: 0.5;
+ color: var(--text-weaker);
}
-
&:focus-visible {
outline: none;
- box-shadow: 0 0 0 2px var(--border-default-border-focus);
+ box-shadow: 0 0 0 2px var(--border-focus);
}
-
&[data-selected] {
- color: var(--text-default-text);
- background-color: var(--surface-panel-surface);
+ color: var(--text-base);
+ background-color: transparent;
border-bottom-color: transparent;
}
-
&:hover:not(:disabled):not([data-selected]) {
- color: var(--text-default-text);
+ color: var(--text-strong);
}
}
& [data-slot="content"] {
- background-color: var(--surface-panel-surface);
overflow-y: auto;
flex: 1;
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
-
&::-webkit-scrollbar {
display: none;
}
&:focus-visible {
outline: none;
- box-shadow: 0 0 0 2px var(--border-default-border-focus);
}
}
}
diff --git a/packages/css/src/components/tooltip.css b/packages/css/src/components/tooltip.css
new file mode 100644
index 000000000..a17ed4026
--- /dev/null
+++ b/packages/css/src/components/tooltip.css
@@ -0,0 +1,53 @@
+/* [data-component="tooltip-trigger"] { */
+/* display: flex; */
+/* align-items: center; */
+/* } */
+
+[data-component="tooltip"] {
+ z-index: 1000;
+ max-width: 320px;
+ border-radius: var(--radius-md);
+ background-color: var(--surface-base);
+ padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
+ font-size: var(--text-xs);
+ font-weight: var(--font-weight-medium);
+ color: var(--text-base);
+ box-shadow: var(--shadow-md);
+ pointer-events: none !important;
+ transition: all 150ms ease-out;
+ transform: translate3d(0, 0, 0);
+ transform-origin: var(--kb-tooltip-content-transform-origin);
+
+ &[data-expanded] {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+
+ &[data-closed] {
+ opacity: 0;
+ }
+
+ &[data-placement="top"] {
+ &[data-closed] {
+ transform: translate3d(0, 4px, 0);
+ }
+ }
+
+ &[data-placement="bottom"] {
+ &[data-closed] {
+ transform: translate3d(0, -4px, 0);
+ }
+ }
+
+ &[data-placement="left"] {
+ &[data-closed] {
+ transform: translate3d(4px, 0, 0);
+ }
+ }
+
+ &[data-placement="right"] {
+ &[data-closed] {
+ transform: translate3d(-4px, 0, 0);
+ }
+ }
+}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
index 1ac357fe1..ff67c6a60 100644
--- a/packages/css/src/index.css
+++ b/packages/css/src/index.css
@@ -9,5 +9,6 @@
@import "./components/icon.css" layer(components);
@import "./components/select.css" layer(components);
@import "./components/tabs.css" layer(components);
+@import "./components/tooltip.css" layer(components);
@import "./utilities.css" layer(utilities);
diff --git a/packages/css/src/tailwind.css b/packages/css/src/tailwind.css
index 35cbbd074..327eba298 100644
--- a/packages/css/src/tailwind.css
+++ b/packages/css/src/tailwind.css
@@ -1,8 +1,9 @@
-@import "./index.css";
-
+@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
+@import "./index.css";
+
@theme {
--shadow-*: initial;
--shadow-xs-border-selected: var(--shadow-xs-border-selected);
diff --git a/packages/css/src/theme.css b/packages/css/src/theme.css
index e3c523b13..cb4931035 100644
--- a/packages/css/src/theme.css
+++ b/packages/css/src/theme.css
@@ -1,8 +1,13 @@
:root {
--font-sans:
- ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ geist, geist-fallback, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol", "Noto Color Emoji";
+ --font-sans--font-feature-settings: "ss02" 1;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ --font-mono:
+ geist-mono, geist-mono-fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+ "Courier New", monospace;
+ --font-mono--font-feature-settings: "ss02" 1;
--size-12: 12;
--size-14: 14;
@@ -99,13 +104,18 @@
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
- --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+ --shadow-xs-border-selected:
+ 0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
+ 0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+ 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+
+ /* --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); */
+ /* --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
+ /* --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
+ /* --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
+ /* --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
+ /* --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); */
+ /* --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); */
/* --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); */
/* --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); */
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-30 10:22:44 +0000