-
,
Partial<
Pick<
@@ -20,13 +22,13 @@ export interface InputProps
> {
label?: string
hideLabel?: boolean
- hidden?: boolean
description?: string
error?: string
variant?: "normal" | "ghost"
+ copyable?: boolean
}
-export function Input(props: InputProps) {
+export function TextField(props: TextFieldProps) {
const [local, others] = splitProps(props, [
"name",
"defaultValue",
@@ -39,12 +41,21 @@ export function Input(props: InputProps) {
"readOnly",
"class",
"label",
- "hidden",
"hideLabel",
"description",
"error",
"variant",
+ "copyable",
])
+ const [copied, setCopied] = createSignal(false)
+
+ async function handleCopy() {
+ const value = local.value ?? local.defaultValue ?? ""
+ await navigator.clipboard.writeText(value)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }
+
return (
@@ -65,7 +75,20 @@ export function Input(props: InputProps) {
{local.label}
-
+
+
+
+
+
+
+
+
{local.description}
@@ -73,3 +96,8 @@ export function Input(props: InputProps) {
)
}
+
+/** @deprecated Use TextField instead */
+export const Input = TextField
+/** @deprecated Use TextFieldProps instead */
+export type InputProps = TextFieldProps
diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css
new file mode 100644
index 000000000000..3389f477ab58
--- /dev/null
+++ b/packages/ui/src/components/toast.css
@@ -0,0 +1,203 @@
+[data-component="toast-region"] {
+ position: fixed;
+ bottom: 32px;
+ right: 32px;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ max-width: 400px;
+ width: 100%;
+ pointer-events: none;
+
+ [data-slot="toast-list"] {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+}
+
+[data-component="toast"] {
+ display: flex;
+ align-items: flex-start;
+ gap: 20px;
+ padding: 16px 20px;
+ pointer-events: auto;
+ transition: all 150ms ease-out;
+
+ border-radius: var(--radius-lg);
+ border: 1px solid var(--border-weak-base);
+ background: var(--surface-float-base);
+ color: rgba(253, 252, 252, 0.94);
+ box-shadow: var(--shadow-md);
+
+ [data-slot="toast-inner"] {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ }
+
+ &[data-opened] {
+ animation: toastPopIn 150ms ease-out;
+ }
+
+ &[data-closed] {
+ animation: toastPopOut 100ms ease-in forwards;
+ }
+
+ &[data-swipe="move"] {
+ transform: translateX(var(--kb-toast-swipe-move-x));
+ }
+
+ &[data-swipe="cancel"] {
+ transform: translateX(0);
+ transition: transform 200ms ease-out;
+ }
+
+ &[data-swipe="end"] {
+ animation: toastSwipeOut 100ms ease-out forwards;
+ }
+
+ &[data-variant="success"] {
+ border-color: var(--color-semantic-positive);
+ }
+
+ &[data-variant="error"] {
+ border-color: var(--color-semantic-danger);
+ }
+
+ &[data-variant="loading"] {
+ border-color: var(--color-semantic-info);
+ }
+
+ [data-slot="toast-icon"] {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ [data-component="icon"] {
+ color: rgba(253, 252, 252, 0.94);
+ }
+ }
+
+ [data-slot="toast-content"] {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ }
+
+ [data-slot="toast-title"] {
+ color: rgba(253, 252, 252, 0.94);
+
+ /* text-14-medium */
+ font-family: var(--font-family-sans);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large); /* 142.857% */
+ letter-spacing: var(--letter-spacing-normal);
+
+ margin: 0;
+ }
+
+ [data-slot="toast-description"] {
+ color: rgba(253, 249, 249, 0.7);
+
+ /* text-14-regular */
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-base);
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-x-large); /* 171.429% */
+ letter-spacing: var(--letter-spacing-normal);
+
+ margin: 0;
+ }
+
+ [data-slot="toast-actions"] {
+ display: flex;
+ gap: 16px;
+ margin-top: 8px;
+ }
+
+ [data-slot="toast-action"] {
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+
+ color: rgba(253, 252, 252, 0.94);
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:last-child {
+ color: rgba(253, 249, 249, 0.5);
+ }
+ }
+
+ [data-slot="toast-close-button"] {
+ flex-shrink: 0;
+ }
+
+ [data-slot="toast-progress-track"] {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background-color: var(--surface-base);
+ border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+ overflow: hidden;
+ }
+
+ [data-slot="toast-progress-fill"] {
+ height: 100%;
+ width: var(--kb-toast-progress-fill-width);
+ background-color: var(--color-primary);
+ transition: width 250ms linear;
+ }
+}
+
+@keyframes toastPopIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes toastPopOut {
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+}
+
+@keyframes toastSwipeOut {
+ from {
+ transform: translateX(var(--kb-toast-swipe-end-x));
+ }
+ to {
+ transform: translateX(100%);
+ }
+}
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
new file mode 100644
index 000000000000..5869f8a6b22f
--- /dev/null
+++ b/packages/ui/src/components/toast.tsx
@@ -0,0 +1,160 @@
+import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
+import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
+import type { ComponentProps, JSX } from "solid-js"
+import { Show } from "solid-js"
+import { Portal } from "solid-js/web"
+import { Icon, type IconProps } from "./icon"
+import { IconButton } from "./icon-button"
+
+export interface ToastRegionProps extends ComponentProps
{}
+
+function ToastRegion(props: ToastRegionProps) {
+ return (
+
+
+
+
+
+ )
+}
+
+export interface ToastRootComponentProps extends ToastRootProps {
+ class?: string
+ classList?: ComponentProps<"li">["classList"]
+ children?: JSX.Element
+}
+
+function ToastRoot(props: ToastRootComponentProps) {
+ return (
+
+ )
+}
+
+function ToastIcon(props: { name: IconProps["name"] }) {
+ return (
+
+
+
+ )
+}
+
+function ToastContent(props: ComponentProps<"div">) {
+ return
+}
+
+function ToastTitle(props: ToastTitleProps & ComponentProps<"div">) {
+ return
+}
+
+function ToastDescription(props: ToastDescriptionProps & ComponentProps<"div">) {
+ return
+}
+
+function ToastActions(props: ComponentProps<"div">) {
+ return
+}
+
+function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+ return
+}
+
+function ToastProgressTrack(props: ComponentProps) {
+ return
+}
+
+function ToastProgressFill(props: ComponentProps) {
+ return
+}
+
+export const Toast = Object.assign(ToastRoot, {
+ Region: ToastRegion,
+ Icon: ToastIcon,
+ Content: ToastContent,
+ Title: ToastTitle,
+ Description: ToastDescription,
+ Actions: ToastActions,
+ CloseButton: ToastCloseButton,
+ ProgressTrack: ToastProgressTrack,
+ ProgressFill: ToastProgressFill,
+})
+
+export { toaster }
+
+export type ToastVariant = "default" | "success" | "error" | "loading"
+
+export interface ToastAction {
+ label: string
+ onClick: () => void
+}
+
+export interface ToastOptions {
+ title?: string
+ description?: string
+ icon?: IconProps["name"]
+ variant?: ToastVariant
+ duration?: number
+ actions?: ToastAction[]
+}
+
+export function showToast(options: ToastOptions | string) {
+ const opts = typeof options === "string" ? { description: options } : options
+ return toaster.show((props) => (
+
+
+
+
+
+
+ {opts.title}
+
+
+ {opts.description}
+
+
+
+ {opts.actions!.map((action) => (
+
+ ))}
+
+
+
+
+
+ ))
+}
+
+export interface ToastPromiseOptions {
+ loading?: JSX.Element
+ success?: (data: T) => JSX.Element
+ error?: (error: U) => JSX.Element
+}
+
+export function showPromiseToast(
+ promise: Promise | (() => Promise),
+ options: ToastPromiseOptions,
+) {
+ return toaster.promise(promise, (props) => (
+
+
+
+ {props.state === "pending" && options.loading}
+ {props.state === "fulfilled" && options.success?.(props.data!)}
+ {props.state === "rejected" && options.error?.(props.error)}
+
+
+
+
+ ))
+}
diff --git a/packages/ui/src/hooks/use-filtered-list.tsx b/packages/ui/src/hooks/use-filtered-list.tsx
index 110a069111d7..cade02889ac0 100644
--- a/packages/ui/src/hooks/use-filtered-list.tsx
+++ b/packages/ui/src/hooks/use-filtered-list.tsx
@@ -5,7 +5,7 @@ import { createStore } from "solid-js/store"
import { createList } from "solid-list"
export interface FilteredListProps {
- items: T[] | ((filter: string) => Promise)
+ items: (filter: string) => T[] | Promise
key: (item: T) => string
filterKeys?: string[]
current?: T
@@ -22,7 +22,7 @@ export function useFilteredList(props: FilteredListProps) {
() => store.filter,
async (filter) => {
const needle = filter?.toLowerCase()
- const all = (typeof props.items === "function" ? await props.items(needle) : props.items) || []
+ const all = (await props.items(needle)) || []
const result = pipe(
all,
(x) => {
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 4c7f6e80ba10..d60082d931d5 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -21,7 +21,7 @@
@import "../components/provider-icon.css" layer(components);
@import "../components/icon.css" layer(components);
@import "../components/icon-button.css" layer(components);
-@import "../components/input.css" layer(components);
+@import "../components/text-field.css" layer(components);
@import "../components/list.css" layer(components);
@import "../components/logo.css" layer(components);
@import "../components/markdown.css" layer(components);
@@ -38,6 +38,7 @@
@import "../components/sticky-accordion-header.css" layer(components);
@import "../components/tabs.css" layer(components);
@import "../components/tag.css" layer(components);
+@import "../components/toast.css" layer(components);
@import "../components/tooltip.css" layer(components);
@import "../components/typewriter.css" layer(components);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 8703a0a25090..2da926673a57 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -1,6 +1,6 @@
:root {
- --font-family-sans: "meslo", "Menlo", "Monaco", "Courier New", monospace;
- --font-family-sans--font-feature-settings: normal;
+ --font-family-sans: "Geist", "Geist Fallback";
+ --font-family-sans--font-feature-settings: "ss03" 1;
--font-family-mono: "Berkeley Mono", "Berkeley Mono Fallback";
--font-family-mono--font-feature-settings: "ss01" 1;
@@ -307,27 +307,18 @@
--border-weaker-focus: var(--smoke-light-alpha-6);
--button-ghost-hover: var(--smoke-light-alpha-2);
--button-ghost-hover2: var(--smoke-light-alpha-3);
-
- /* Terminal theme colors - Default light */
- --terminal-background: #f8f7f7;
- --terminal-foreground: #211e1e;
- --terminal-cursor: #211e1e;
- --terminal-black: #211e1e;
- --terminal-red: #da3319;
- --terminal-green: #008600;
- --terminal-yellow: #917500;
- --terminal-blue: #034cff;
- --terminal-magenta: #95429c;
- --terminal-cyan: #007663;
- --terminal-white: #f8f7f7;
- --terminal-bright-black: #656363;
- --terminal-bright-red: #ef442a;
- --terminal-bright-green: #12c905;
- --terminal-bright-yellow: #fad337;
- --terminal-bright-blue: #0443de;
- --terminal-bright-magenta: #a753ae;
- --terminal-bright-cyan: #00b2b9;
- --terminal-bright-white: #fdfcfc;
+ --avatar-background-pink: #feeef8;
+ --avatar-background-mint: #e1fbf4;
+ --avatar-background-orange: #fff1e7;
+ --avatar-background-purple: #f9f1fe;
+ --avatar-background-cyan: #e7f9fb;
+ --avatar-background-lime: #eefadc;
+ --avatar-text-pink: #cd1d8d;
+ --avatar-text-mint: #147d6f;
+ --avatar-text-orange: #ed5f00;
+ --avatar-text-purple: #8445bc;
+ --avatar-text-cyan: #0894b3;
+ --avatar-text-lime: #5d770d;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
@@ -572,292 +563,21 @@
--border-weaker-focus: var(--smoke-dark-alpha-6);
--button-ghost-hover: var(--smoke-dark-alpha-2);
--button-ghost-hover2: var(--smoke-dark-alpha-3);
-
- /* Terminal theme colors - Default dark */
- --terminal-background: #131010;
- --terminal-foreground: #f1ecec;
- --terminal-cursor: #f1ecec;
- --terminal-black: #131010;
- --terminal-red: #ff917b;
- --terminal-green: #37db2e;
- --terminal-yellow: #fdd63c;
- --terminal-blue: #89b5ff;
- --terminal-magenta: #dca2e0;
- --terminal-cyan: #00ceb9;
- --terminal-white: #f1ecec;
- --terminal-bright-black: #b7b1b1;
- --terminal-bright-red: #ffd1c8;
- --terminal-bright-green: #aff7a8;
- --terminal-bright-yellow: #faebb5;
- --terminal-bright-blue: #cde2ff;
- --terminal-bright-magenta: #edd8ef;
- --terminal-bright-cyan: #93e9f6;
- --terminal-bright-white: #fdfcfc;
+ --avatar-background-pink: #501b3f;
+ --avatar-background-mint: #033a34;
+ --avatar-background-orange: #5f2a06;
+ --avatar-background-purple: #432155;
+ --avatar-background-cyan: #0f3058;
+ --avatar-background-lime: #2b3711;
+ --avatar-text-pink: #e34ba9;
+ --avatar-text-mint: #95f3d9;
+ --avatar-text-orange: #ff802b;
+ --avatar-text-purple: #9d5bd2;
+ --avatar-text-cyan: #369eff;
+ --avatar-text-lime: #c4f042;
}
}
-html[data-theme="nightowl"] {
- color-scheme: dark;
- --text-mix-blend-mode: plus-lighter;
-
- /* Night Owl Theme */
- --background-base: #011627;
- --background-weak: #0b253a;
- --background-strong: #011627;
- --background-stronger: #0b253a;
- --surface-base: rgba(11, 37, 58, 0.5);
- --base: rgba(11, 37, 58, 0.5);
- --surface-base-hover: rgba(11, 37, 58, 0.7);
- --surface-base-active: rgba(11, 37, 58, 0.8);
- --surface-base-interactive-active: rgba(130, 170, 255, 0.2);
- --base2: rgba(11, 37, 58, 0.5);
- --base3: rgba(11, 37, 58, 0.5);
- --surface-inset-base: rgba(1, 22, 39, 0.8);
- --surface-inset-base-hover: rgba(1, 22, 39, 0.8);
- --surface-inset-strong: rgba(1, 22, 39, 0.9);
- --surface-inset-strong-hover: rgba(1, 22, 39, 0.9);
- --surface-raised-base: rgba(11, 37, 58, 0.6);
- --surface-float-base: #0b253a;
- --surface-float-base-hover: #0d2b44;
- --surface-raised-base-hover: rgba(130, 170, 255, 0.15);
- --surface-raised-base-active: rgba(130, 170, 255, 0.25);
- --surface-raised-strong: rgba(11, 37, 58, 0.7);
- --surface-raised-strong-hover: rgba(11, 37, 58, 0.8);
- --surface-raised-stronger: rgba(11, 37, 58, 0.8);
- --surface-raised-stronger-hover: rgba(11, 37, 58, 0.9);
- --surface-weak: rgba(11, 37, 58, 0.6);
- --surface-weaker: rgba(11, 37, 58, 0.7);
- --surface-strong: rgba(11, 37, 58, 0.9);
- --surface-raised-stronger-non-alpha: #0b253a;
- --surface-brand-base: #82aaff;
- --surface-brand-hover: #9dbfff;
- --surface-interactive-base: rgba(130, 170, 255, 0.2);
- --surface-interactive-hover: rgba(130, 170, 255, 0.3);
- --surface-interactive-weak: rgba(130, 170, 255, 0.1);
- --surface-interactive-weak-hover: rgba(130, 170, 255, 0.2);
- --surface-success-base: rgba(197, 228, 120, 0.2);
- --surface-success-weak: rgba(197, 228, 120, 0.1);
- --surface-success-strong: #c5e478;
- --surface-warning-base: rgba(236, 196, 141, 0.2);
- --surface-warning-weak: rgba(236, 196, 141, 0.1);
- --surface-warning-strong: #ecc48d;
- --surface-critical-base: rgba(239, 83, 80, 0.2);
- --surface-critical-weak: rgba(239, 83, 80, 0.1);
- --surface-critical-strong: #ef5350;
- --surface-info-base: rgba(199, 146, 234, 0.2);
- --surface-info-weak: rgba(199, 146, 234, 0.1);
- --surface-info-strong: #c792ea;
- --surface-diff-unchanged-base: #011627;
- --surface-diff-skip-base: rgba(11, 37, 58, 0.5);
- --surface-diff-hidden-base: rgba(130, 170, 255, 0.2);
- --surface-diff-hidden-weak: rgba(130, 170, 255, 0.1);
- --surface-diff-hidden-weaker: rgba(130, 170, 255, 0.15);
- --surface-diff-hidden-strong: rgba(130, 170, 255, 0.3);
- --surface-diff-hidden-stronger: #82aaff;
- --surface-diff-add-base: #0a2e1a;
- --surface-diff-add-weak: rgba(197, 228, 120, 0.15);
- --surface-diff-add-weaker: rgba(197, 228, 120, 0.1);
- --surface-diff-add-strong: rgba(197, 228, 120, 0.3);
- --surface-diff-add-stronger: #c5e478;
- --surface-diff-delete-base: #2d1b1b;
- --surface-diff-delete-weak: rgba(239, 83, 80, 0.15);
- --surface-diff-delete-weaker: rgba(239, 83, 80, 0.1);
- --surface-diff-delete-strong: rgba(239, 83, 80, 0.3);
- --surface-diff-delete-stronger: #ef5350;
- --text-base: #d6deeb;
- --input-base: #0b253a;
- --input-hover: #0d2b44;
- --input-active: rgba(130, 170, 255, 0.1);
- --input-selected: rgba(130, 170, 255, 0.2);
- --input-focus: rgba(130, 170, 255, 0.1);
- --input-disabled: #5f7e97;
- --text-weak: #89a4bb;
- --text-weaker: #5f7e97;
- --text-strong: #d6deeb;
- --text-interactive-base: #82aaff;
- --text-on-brand-base: #011627;
- --text-on-interactive-base: #011627;
- --text-on-interactive-weak: #d6deeb;
- --text-on-success-base: #c5e478;
- --text-on-critical-base: #ef5350;
- --text-on-critical-weak: rgba(239, 83, 80, 0.8);
- --text-on-critical-strong: #ff7875;
- --text-on-warning-base: #ecc48d;
- --text-on-info-base: #c792ea;
- --text-diff-add-base: #c5e478;
- --text-diff-delete-base: #ef5350;
- --text-diff-delete-strong: #ff7875;
- --text-diff-add-strong: #d4ed8c;
- --text-on-info-weak: rgba(199, 146, 234, 0.8);
- --text-on-info-strong: #d4a8f0;
- --text-on-warning-weak: rgba(236, 196, 141, 0.8);
- --text-on-warning-strong: #f2d4a8;
- --text-on-success-weak: rgba(197, 228, 120, 0.8);
- --text-on-success-strong: #d4ed8c;
- --text-on-brand-weak: rgba(1, 22, 39, 0.8);
- --text-on-brand-weaker: rgba(1, 22, 39, 0.6);
- --text-on-brand-strong: #011627;
- --button-secondary-base: #0b253a;
- --button-secondary-hover: #0d2b44;
- --border-base: #5f7e97;
- --border-hover: #89a4bb;
- --border-active: #82aaff;
- --border-selected: #82aaff;
- --border-disabled: rgba(95, 126, 151, 0.5);
- --border-focus: #82aaff;
- --border-weak-base: rgba(95, 126, 151, 0.5);
- --border-strong-base: #5f7e97;
- --border-strong-hover: #89a4bb;
- --border-strong-active: #5f7e97;
- --border-strong-selected: #82aaff;
- --border-strong-disabled: rgba(95, 126, 151, 0.4);
- --border-strong-focus: #5f7e97;
- --border-weak-hover: rgba(95, 126, 151, 0.6);
- --border-weak-active: rgba(95, 126, 151, 0.7);
- --border-weak-selected: rgba(130, 170, 255, 0.5);
- --border-weak-disabled: rgba(95, 126, 151, 0.3);
- --border-weak-focus: rgba(95, 126, 151, 0.7);
- --border-interactive-base: #82aaff;
- --border-interactive-hover: #9dbfff;
- --border-interactive-active: #82aaff;
- --border-interactive-selected: #82aaff;
- --border-interactive-disabled: rgba(95, 126, 151, 0.5);
- --border-interactive-focus: #82aaff;
- --border-success-base: #c5e478;
- --border-success-hover: #d4ed8c;
- --border-success-selected: #c5e478;
- --border-warning-base: #ecc48d;
- --border-warning-hover: #f2d4a8;
- --border-warning-selected: #ecc48d;
- --border-critical-base: #ef5350;
- --border-critical-hover: #ff7875;
- --border-critical-selected: #ef5350;
- --border-info-base: #c792ea;
- --border-info-hover: #d4a8f0;
- --border-info-selected: #c792ea;
- --icon-base: #89a4bb;
- --icon-hover: #d6deeb;
- --icon-active: #d6deeb;
- --icon-selected: #d6deeb;
- --icon-disabled: #5f7e97;
- --icon-focus: #d6deeb;
- --icon-invert-base: #011627;
- --icon-weak-base: #5f7e97;
- --icon-weak-hover: #89a4bb;
- --icon-weak-active: #89a4bb;
- --icon-weak-selected: #d6deeb;
- --icon-weak-disabled: rgba(95, 126, 151, 0.5);
- --icon-weak-focus: #89a4bb;
- --icon-strong-base: #d6deeb;
- --icon-strong-hover: #e8eef4;
- --icon-strong-active: #ffffff;
- --icon-strong-selected: #ffffff;
- --icon-strong-disabled: #5f7e97;
- --icon-strong-focus: #ffffff;
- --icon-brand-base: #82aaff;
- --icon-interactive-base: #82aaff;
- --icon-success-base: #c5e478;
- --icon-success-hover: #d4ed8c;
- --icon-success-active: #e0f5a0;
- --icon-warning-base: #ecc48d;
- --icon-warning-hover: #f2d4a8;
- --icon-warning-active: #f8e4c0;
- --icon-critical-base: #ef5350;
- --icon-critical-hover: #ff7875;
- --icon-critical-active: #ff9a98;
- --icon-info-base: #c792ea;
- --icon-info-hover: #d4a8f0;
- --icon-info-active: #e0bef5;
- --icon-on-brand-base: #011627;
- --icon-on-brand-hover: #011627;
- --icon-on-brand-selected: #011627;
- --icon-on-interactive-base: #011627;
- --icon-agent-plan-base: #c792ea;
- --icon-agent-docs-base: #ecc48d;
- --icon-agent-ask-base: #7fdbca;
- --icon-agent-build-base: #82aaff;
- --icon-on-success-base: rgba(197, 228, 120, 0.9);
- --icon-on-success-hover: #c5e478;
- --icon-on-success-selected: #d4ed8c;
- --icon-on-warning-base: rgba(236, 196, 141, 0.9);
- --icon-on-warning-hover: #ecc48d;
- --icon-on-warning-selected: #f2d4a8;
- --icon-on-critical-base: rgba(239, 83, 80, 0.9);
- --icon-on-critical-hover: #ef5350;
- --icon-on-critical-selected: #ff7875;
- --icon-on-info-base: #c792ea;
- --icon-on-info-hover: #d4a8f0;
- --icon-on-info-selected: #e0bef5;
- --icon-diff-add-base: #c5e478;
- --icon-diff-add-hover: #d4ed8c;
- --icon-diff-add-active: #e0f5a0;
- --icon-diff-delete-base: #ef5350;
- --icon-diff-delete-hover: #ff7875;
- --syntax-comment: #637777;
- --syntax-regexp: #d6deeb;
- --syntax-string: #ecc48d;
- --syntax-keyword: #c792ea;
- --syntax-primitive: #f78c6c;
- --syntax-operator: #7fdbca;
- --syntax-variable: #d6deeb;
- --syntax-property: #82aaff;
- --syntax-type: #c5e478;
- --syntax-constant: #7fdbca;
- --syntax-punctuation: #d6deeb;
- --syntax-object: #d6deeb;
- --syntax-success: #c5e478;
- --syntax-warning: #ecc48d;
- --syntax-critical: #ef5350;
- --syntax-info: #7fdbca;
- --syntax-diff-add: #c5e478;
- --syntax-diff-delete: #ef5350;
- --syntax-diff-unknown: #ff5874;
- --markdown-heading: #82aaff;
- --markdown-text: #d6deeb;
- --markdown-link: #7fdbca;
- --markdown-link-text: #82aaff;
- --markdown-code: #c5e478;
- --markdown-block-quote: #5f7e97;
- --markdown-emph: #c792ea;
- --markdown-strong: #ecc48d;
- --markdown-horizontal-rule: #5f7e97;
- --markdown-list-item: #82aaff;
- --markdown-list-enumeration: #7fdbca;
- --markdown-image: #7fdbca;
- --markdown-image-text: #82aaff;
- --markdown-code-block: #d6deeb;
- --border-color: #5f7e97;
- --border-weaker-base: rgba(95, 126, 151, 0.3);
- --border-weaker-hover: rgba(95, 126, 151, 0.4);
- --border-weaker-active: rgba(95, 126, 151, 0.5);
- --border-weaker-selected: rgba(130, 170, 255, 0.4);
- --border-weaker-disabled: rgba(95, 126, 151, 0.2);
- --border-weaker-focus: rgba(95, 126, 151, 0.5);
- --button-ghost-hover: rgba(11, 37, 58, 0.5);
- --button-ghost-hover2: rgba(11, 37, 58, 0.6);
-
- /* Terminal theme colors - Night Owl */
- --terminal-background: #011627;
- --terminal-foreground: #d6deeb;
- --terminal-cursor: #82aaff;
- --terminal-black: #011627;
- --terminal-red: #ef5350;
- --terminal-green: #c5e478;
- --terminal-yellow: #ecc48d;
- --terminal-blue: #82aaff;
- --terminal-magenta: #c792ea;
- --terminal-cyan: #7fdbca;
- --terminal-white: #d6deeb;
- --terminal-bright-black: #5f7e97;
- --terminal-bright-red: #ff7875;
- --terminal-bright-green: #d4ed8c;
- --terminal-bright-yellow: #f2d4a8;
- --terminal-bright-blue: #9dbfff;
- --terminal-bright-magenta: #d4a8f0;
- --terminal-bright-cyan: #7fdbca;
- --terminal-bright-white: #ffffff;
-}
-
html[data-theme="oc-2-paper"] {
/* OC-2-paper */
--background-base: #f7f8f8;
@@ -1095,60 +815,35 @@ html[data-theme="oc-2-paper"] {
--button-ghost-hover: var(--ink-light-alpha-2);
--button-ghost-hover2: var(--ink-light-alpha-3);
- /* Terminal theme colors - Paper light */
- --terminal-background: #f7f8f8;
- --terminal-foreground: #1e2121;
- --terminal-cursor: #1e2121;
- --terminal-black: #1e2121;
- --terminal-red: #da3319;
- --terminal-green: #008600;
- --terminal-yellow: #917500;
- --terminal-blue: #034cff;
- --terminal-magenta: #95429c;
- --terminal-cyan: #007663;
- --terminal-white: #f7f8f8;
- --terminal-bright-black: #636565;
- --terminal-bright-red: #ef442a;
- --terminal-bright-green: #12c905;
- --terminal-bright-yellow: #fad337;
- --terminal-bright-blue: #0443de;
- --terminal-bright-magenta: #a753ae;
- --terminal-bright-cyan: #00b2b9;
- --terminal-bright-white: #fcfdfd;
-
@media (prefers-color-scheme: dark) {
- color-scheme: dark;
- --text-mix-blend-mode: plus-lighter;
-
- /* OC-2-paper dark */
--background-base: var(--ink-dark-1);
--background-weak: #171c1c;
--background-strong: #131515;
--background-stronger: #151919;
--surface-base: var(--ink-dark-alpha-2);
--base: var(--ink-dark-alpha-2);
- --surface-base-hover: #b8e0e016;
+ --surface-base-hover: #b8e0e00f;
--surface-base-active: var(--ink-dark-alpha-3);
- --surface-base-interactive-active: var(--cobalt-dark-alpha-2);
+ --surface-base-interactive-active: var(--cobalt-light-alpha-3);
--base2: var(--ink-dark-alpha-2);
--base3: var(--ink-dark-alpha-2);
--surface-inset-base: #0b0e0e7f;
--surface-inset-base-hover: #0b0e0e7f;
--surface-inset-strong: #050606cc;
--surface-inset-strong-hover: #050606cc;
- --surface-raised-base: var(--ink-dark-alpha-3);
+ --surface-raised-base: var(--ink-light-alpha-1);
--surface-float-base: var(--ink-dark-1);
--surface-float-base-hover: var(--ink-dark-2);
- --surface-raised-base-hover: var(--ink-dark-alpha-4);
- --surface-raised-base-active: var(--ink-dark-alpha-5);
- --surface-raised-strong: var(--ink-dark-alpha-4);
- --surface-raised-strong-hover: var(--ink-dark-alpha-6);
- --surface-raised-stronger: var(--ink-dark-alpha-6);
- --surface-raised-stronger-hover: var(--ink-dark-alpha-7);
+ --surface-raised-base-hover: var(--ink-light-alpha-2);
+ --surface-raised-base-active: var(--ink-light-alpha-3);
+ --surface-raised-strong: var(--ink-light-1);
+ --surface-raised-strong-hover: var(--white);
+ --surface-raised-stronger: var(--white);
+ --surface-raised-stronger-hover: var(--white);
--surface-weak: var(--ink-dark-alpha-4);
--surface-weaker: var(--ink-dark-alpha-5);
--surface-strong: var(--ink-dark-alpha-7);
- --surface-raised-stronger-non-alpha: var(--ink-dark-3);
+ --surface-raised-stronger-non-alpha: var(--white);
--surface-brand-base: var(--yuzu-light-9);
--surface-brand-hover: var(--yuzu-light-10);
--surface-interactive-base: var(--cobalt-light-3);
@@ -1161,87 +856,87 @@ html[data-theme="oc-2-paper"] {
--surface-warning-base: var(--solaris-light-3);
--surface-warning-weak: var(--solaris-light-2);
--surface-warning-strong: var(--solaris-light-9);
- --surface-critical-base: var(--ember-dark-3);
- --surface-critical-weak: var(--ember-dark-2);
- --surface-critical-strong: var(--ember-dark-9);
+ --surface-critical-base: var(--ember-light-3);
+ --surface-critical-weak: var(--ember-light-2);
+ --surface-critical-strong: var(--ember-light-9);
--surface-info-base: var(--lilac-light-3);
--surface-info-weak: var(--lilac-light-2);
--surface-info-strong: var(--lilac-light-9);
- --surface-diff-unchanged-base: var(--ink-dark-1);
- --surface-diff-skip-base: var(--ink-dark-alpha-1);
- --surface-diff-hidden-base: var(--blue-dark-2);
- --surface-diff-hidden-weak: var(--blue-dark-1);
- --surface-diff-hidden-weaker: var(--blue-dark-3);
- --surface-diff-hidden-strong: var(--blue-dark-5);
- --surface-diff-hidden-stronger: var(--blue-dark-11);
- --surface-diff-add-base: var(--mint-dark-3);
- --surface-diff-add-weak: var(--mint-dark-4);
- --surface-diff-add-weaker: var(--mint-dark-3);
- --surface-diff-add-strong: var(--mint-dark-5);
- --surface-diff-add-stronger: var(--mint-dark-11);
- --surface-diff-delete-base: var(--ember-dark-3);
- --surface-diff-delete-weak: var(--ember-dark-4);
- --surface-diff-delete-weaker: var(--ember-dark-3);
- --surface-diff-delete-strong: var(--ember-dark-5);
- --surface-diff-delete-stronger: var(--ember-dark-11);
- --text-base: var(--ink-dark-alpha-11);
- --input-base: var(--ink-dark-2);
- --input-hover: var(--ink-dark-2);
- --input-active: var(--cobalt-dark-1);
- --input-selected: var(--cobalt-dark-2);
- --input-focus: var(--cobalt-dark-1);
- --input-disabled: var(--ink-dark-4);
- --text-weak: var(--ink-dark-alpha-9);
- --text-weaker: var(--ink-dark-alpha-8);
- --text-strong: var(--ink-dark-alpha-12);
- --text-interactive-base: var(--cobalt-dark-11);
- --text-on-brand-base: var(--ink-dark-alpha-11);
- --text-on-interactive-base: var(--ink-dark-12);
- --text-on-interactive-weak: var(--ink-dark-alpha-11);
- --text-on-success-base: var(--apple-dark-9);
- --text-on-critical-base: var(--ember-dark-9);
- --text-on-critical-weak: var(--ember-dark-8);
- --text-on-critical-strong: var(--ember-dark-12);
+ --surface-diff-unchanged-base: #ffffff00;
+ --surface-diff-skip-base: var(--ink-light-2);
+ --surface-diff-hidden-base: var(--blue-light-3);
+ --surface-diff-hidden-weak: var(--blue-light-2);
+ --surface-diff-hidden-weaker: var(--blue-light-1);
+ --surface-diff-hidden-strong: var(--blue-light-5);
+ --surface-diff-hidden-stronger: var(--blue-light-9);
+ --surface-diff-add-base: var(--mint-light-3);
+ --surface-diff-add-weak: var(--mint-light-2);
+ --surface-diff-add-weaker: var(--mint-light-1);
+ --surface-diff-add-strong: var(--mint-light-5);
+ --surface-diff-add-stronger: var(--mint-light-9);
+ --surface-diff-delete-base: var(--ember-light-3);
+ --surface-diff-delete-weak: var(--ember-light-2);
+ --surface-diff-delete-weaker: var(--ember-light-1);
+ --surface-diff-delete-strong: var(--ember-light-6);
+ --surface-diff-delete-stronger: var(--ember-light-9);
+ --text-base: var(--ink-light-11);
+ --input-base: var(--ink-light-1);
+ --input-hover: var(--ink-light-2);
+ --input-active: var(--cobalt-light-1);
+ --input-selected: var(--cobalt-light-4);
+ --input-focus: var(--cobalt-light-1);
+ --input-disabled: var(--ink-light-4);
+ --text-weak: var(--ink-light-9);
+ --text-weaker: var(--ink-light-8);
+ --text-strong: var(--ink-light-12);
+ --text-interactive-base: var(--cobalt-light-9);
+ --text-on-brand-base: var(--ink-light-alpha-11);
+ --text-on-interactive-base: var(--ink-light-1);
+ --text-on-interactive-weak: var(--ink-light-alpha-11);
+ --text-on-success-base: var(--apple-light-10);
+ --text-on-critical-base: var(--ember-light-10);
+ --text-on-critical-weak: var(--ember-light-8);
+ --text-on-critical-strong: var(--ember-light-12);
--text-on-warning-base: var(--ink-dark-alpha-11);
--text-on-info-base: var(--ink-dark-alpha-11);
- --text-diff-add-base: var(--mint-dark-11);
- --text-diff-delete-base: var(--ember-dark-9);
- --text-diff-delete-strong: var(--ember-dark-12);
- --text-diff-add-strong: var(--mint-dark-8);
+ --text-diff-add-base: var(--mint-light-11);
+ --text-diff-delete-base: var(--ember-light-10);
+ --text-diff-delete-strong: var(--ember-light-12);
+ --text-diff-add-strong: var(--mint-light-12);
--text-on-info-weak: var(--ink-dark-alpha-9);
--text-on-info-strong: var(--ink-dark-alpha-12);
--text-on-warning-weak: var(--ink-dark-alpha-9);
--text-on-warning-strong: var(--ink-dark-alpha-12);
- --text-on-success-weak: var(--apple-dark-8);
- --text-on-success-strong: var(--apple-dark-12);
- --text-on-brand-weak: var(--ink-dark-alpha-9);
- --text-on-brand-weaker: var(--ink-dark-alpha-8);
- --text-on-brand-strong: var(--ink-dark-alpha-12);
- --button-secondary-base: #1f2323;
- --button-secondary-hover: #272a2a;
- --border-base: var(--ink-dark-alpha-7);
- --border-hover: var(--ink-dark-alpha-8);
- --border-active: var(--ink-dark-alpha-9);
- --border-selected: var(--cobalt-dark-alpha-11);
- --border-disabled: var(--ink-dark-alpha-8);
- --border-focus: var(--ink-dark-alpha-9);
- --border-weak-base: var(--ink-dark-alpha-6);
- --border-strong-base: var(--ink-dark-alpha-8);
- --border-strong-hover: var(--ink-dark-alpha-7);
- --border-strong-active: var(--ink-dark-alpha-8);
- --border-strong-selected: var(--cobalt-dark-alpha-6);
- --border-strong-disabled: var(--ink-dark-alpha-6);
- --border-strong-focus: var(--ink-dark-alpha-8);
- --border-weak-hover: var(--ink-dark-alpha-7);
- --border-weak-active: var(--ink-dark-alpha-8);
- --border-weak-selected: var(--cobalt-dark-alpha-6);
- --border-weak-disabled: var(--ink-dark-alpha-6);
- --border-weak-focus: var(--ink-dark-alpha-8);
+ --text-on-success-weak: var(--apple-light-6);
+ --text-on-success-strong: var(--apple-light-12);
+ --text-on-brand-weak: var(--ink-light-alpha-9);
+ --text-on-brand-weaker: var(--ink-light-alpha-8);
+ --text-on-brand-strong: var(--ink-light-alpha-12);
+ --button-secondary-base: #fcfdfd;
+ --button-secondary-hover: #f9fafa;
+ --border-base: var(--ink-light-alpha-7);
+ --border-hover: var(--ink-light-alpha-8);
+ --border-active: var(--ink-light-alpha-9);
+ --border-selected: var(--cobalt-light-alpha-9);
+ --border-disabled: var(--ink-light-alpha-8);
+ --border-focus: var(--ink-light-alpha-9);
+ --border-weak-base: var(--ink-light-alpha-5);
+ --border-strong-base: var(--ink-light-alpha-7);
+ --border-strong-hover: var(--ink-light-alpha-8);
+ --border-strong-active: var(--ink-light-alpha-7);
+ --border-strong-selected: var(--cobalt-light-alpha-6);
+ --border-strong-disabled: var(--ink-light-alpha-6);
+ --border-strong-focus: var(--ink-light-alpha-7);
+ --border-weak-hover: var(--ink-light-alpha-6);
+ --border-weak-active: var(--ink-light-alpha-7);
+ --border-weak-selected: var(--cobalt-light-alpha-5);
+ --border-weak-disabled: var(--ink-light-alpha-6);
+ --border-weak-focus: var(--ink-light-alpha-7);
--border-interactive-base: var(--cobalt-light-7);
--border-interactive-hover: var(--cobalt-light-8);
--border-interactive-active: var(--cobalt-light-9);
--border-interactive-selected: var(--cobalt-light-9);
- --border-interactive-disabled: var(--ink-dark-8);
+ --border-interactive-disabled: var(--ink-light-8);
--border-interactive-focus: var(--cobalt-light-9);
--border-success-base: var(--apple-light-6);
--border-success-hover: var(--apple-light-7);
@@ -1249,132 +944,111 @@ html[data-theme="oc-2-paper"] {
--border-warning-base: var(--solaris-light-6);
--border-warning-hover: var(--solaris-light-7);
--border-warning-selected: var(--solaris-light-9);
- --border-critical-base: var(--ember-dark-5);
- --border-critical-hover: var(--ember-dark-7);
- --border-critical-selected: var(--ember-dark-9);
+ --border-critical-base: var(--ember-light-6);
+ --border-critical-hover: var(--ember-light-7);
+ --border-critical-selected: var(--ember-light-9);
--border-info-base: var(--lilac-light-6);
--border-info-hover: var(--lilac-light-7);
--border-info-selected: var(--lilac-light-9);
- --icon-base: var(--ink-dark-9);
- --icon-hover: var(--ink-dark-10);
- --icon-active: var(--ink-dark-11);
- --icon-selected: var(--ink-dark-12);
- --icon-disabled: var(--ink-dark-7);
- --icon-focus: var(--ink-dark-12);
- --icon-invert-base: var(--ink-dark-1);
- --icon-weak-base: var(--ink-dark-6);
- --icon-weak-hover: var(--ink-dark-7);
- --icon-weak-active: var(--ink-dark-8);
- --icon-weak-selected: var(--ink-dark-9);
- --icon-weak-disabled: var(--ink-dark-4);
- --icon-weak-focus: var(--ink-dark-9);
- --icon-strong-base: var(--ink-dark-12);
- --icon-strong-hover: #f3f5f5;
- --icon-strong-active: #fcfcfc;
- --icon-strong-selected: #fdfcfc;
- --icon-strong-disabled: var(--ink-dark-8);
- --icon-strong-focus: #fdfcfc;
- --icon-brand-base: var(--white);
- --icon-interactive-base: var(--cobalt-dark-9);
- --icon-success-base: var(--apple-dark-7);
- --icon-success-hover: var(--apple-dark-8);
- --icon-success-active: var(--apple-dark-11);
- --icon-warning-base: var(--amber-dark-7);
- --icon-warning-hover: var(--amber-dark-8);
- --icon-warning-active: var(--amber-dark-11);
- --icon-critical-base: var(--ember-dark-9);
- --icon-critical-hover: var(--ember-dark-11);
- --icon-critical-active: var(--ember-dark-12);
- --icon-info-base: var(--lilac-dark-7);
- --icon-info-hover: var(--lilac-dark-8);
- --icon-info-active: var(--lilac-dark-11);
+ --icon-base: var(--ink-light-9);
+ --icon-hover: var(--ink-light-11);
+ --icon-active: var(--ink-light-12);
+ --icon-selected: var(--ink-light-12);
+ --icon-disabled: var(--ink-light-8);
+ --icon-focus: var(--ink-light-12);
+ --icon-invert-base: #ffffff;
+ --icon-weak-base: var(--ink-light-7);
+ --icon-weak-hover: var(--ink-light-8);
+ --icon-weak-active: var(--ink-light-9);
+ --icon-weak-selected: var(--ink-light-10);
+ --icon-weak-disabled: var(--ink-light-6);
+ --icon-weak-focus: var(--ink-light-9);
+ --icon-strong-base: var(--ink-light-12);
+ --icon-strong-hover: #131515;
+ --icon-strong-active: #020202;
+ --icon-strong-selected: #020202;
+ --icon-strong-disabled: var(--ink-light-8);
+ --icon-strong-focus: #020202;
+ --icon-brand-base: var(--ink-light-12);
+ --icon-interactive-base: var(--cobalt-light-9);
+ --icon-success-base: var(--apple-light-7);
+ --icon-success-hover: var(--apple-light-8);
+ --icon-success-active: var(--apple-light-11);
+ --icon-warning-base: var(--amber-light-7);
+ --icon-warning-hover: var(--amber-light-8);
+ --icon-warning-active: var(--amber-light-11);
+ --icon-critical-base: var(--ember-light-10);
+ --icon-critical-hover: var(--ember-light-11);
+ --icon-critical-active: var(--ember-light-12);
+ --icon-info-base: var(--lilac-light-7);
+ --icon-info-hover: var(--lilac-light-8);
+ --icon-info-active: var(--lilac-light-11);
--icon-on-brand-base: var(--ink-light-alpha-11);
--icon-on-brand-hover: var(--ink-light-alpha-12);
--icon-on-brand-selected: var(--ink-light-alpha-12);
- --icon-on-interactive-base: var(--ink-dark-12);
- --icon-agent-plan-base: var(--purple-dark-9);
- --icon-agent-docs-base: var(--amber-dark-9);
- --icon-agent-ask-base: var(--cyan-dark-9);
- --icon-agent-build-base: var(--cobalt-dark-11);
- --icon-on-success-base: var(--apple-dark-alpha-9);
- --icon-on-success-hover: var(--apple-dark-alpha-10);
- --icon-on-success-selected: var(--apple-dark-alpha-11);
- --icon-on-warning-base: var(--amber-darkalpha-9);
- --icon-on-warning-hover: var(--amber-darkalpha-10);
- --icon-on-warning-selected: var(--amber-darkalpha-11);
- --icon-on-critical-base: var(--ember-dark-alpha-9);
- --icon-on-critical-hover: var(--ember-dark-alpha-10);
- --icon-on-critical-selected: var(--ember-dark-alpha-11);
- --icon-on-info-base: var(--lilac-dark-9);
- --icon-on-info-hover: var(--lilac-dark-alpha-10);
- --icon-on-info-selected: var(--lilac-dark-alpha-11);
- --icon-diff-add-base: var(--mint-dark-11);
- --icon-diff-add-hover: var(--mint-dark-10);
- --icon-diff-add-active: var(--mint-dark-11);
- --icon-diff-delete-base: var(--ember-dark-9);
- --icon-diff-delete-hover: var(--ember-dark-10);
+ --icon-on-interactive-base: var(--ink-light-1);
+ --icon-agent-plan-base: var(--purple-light-9);
+ --icon-agent-docs-base: var(--amber-light-9);
+ --icon-agent-ask-base: var(--cyan-light-9);
+ --icon-agent-build-base: var(--cobalt-light-9);
+ --icon-on-success-base: var(--apple-light-alpha-9);
+ --icon-on-success-hover: var(--apple-light-alpha-10);
+ --icon-on-success-selected: var(--apple-light-alpha-11);
+ --icon-on-warning-base: var(--amber-lightalpha-9);
+ --icon-on-warning-hover: var(--amber-lightalpha-10);
+ --icon-on-warning-selected: var(--amber-lightalpha-11);
+ --icon-on-critical-base: var(--ember-light-alpha-9);
+ --icon-on-critical-hover: var(--ember-light-alpha-10);
+ --icon-on-critical-selected: var(--ember-light-alpha-11);
+ --icon-on-info-base: var(--lilac-light-9);
+ --icon-on-info-hover: var(--lilac-light-alpha-10);
+ --icon-on-info-selected: var(--lilac-light-alpha-11);
+ --icon-diff-add-base: var(--mint-light-11);
+ --icon-diff-add-hover: var(--mint-light-12);
+ --icon-diff-add-active: var(--mint-light-12);
+ --icon-diff-delete-base: var(--ember-light-10);
+ --icon-diff-delete-hover: var(--ember-light-11);
--syntax-comment: var(--text-weaker);
--syntax-regexp: var(--text-base);
- --syntax-string: #00ceb9;
+ --syntax-string: #007663;
--syntax-keyword: var(--text-weak);
- --syntax-primitive: #ffba92;
+ --syntax-primitive: #fb7f51;
--syntax-operator: var(--text-weak);
--syntax-variable: var(--text-strong);
- --syntax-property: #ff9ae2;
- --syntax-type: #ecf58c;
- --syntax-constant: #93e9f6;
+ --syntax-property: #ec6cc8;
+ --syntax-type: #738400;
+ --syntax-constant: #00b2b9;
--syntax-punctuation: var(--text-weaker);
--syntax-object: var(--text-strong);
- --syntax-success: var(--apple-dark-10);
- --syntax-warning: var(--amber-dark-10);
- --syntax-critical: var(--ember-dark-10);
- --syntax-info: #93e9f6;
- --syntax-diff-add: var(--mint-dark-11);
- --syntax-diff-delete: var(--ember-dark-11);
+ --syntax-success: var(--apple-light-10);
+ --syntax-warning: var(--amber-light-10);
+ --syntax-critical: var(--ember-light-9);
+ --syntax-info: #0091a7;
+ --syntax-diff-add: var(--mint-light-11);
+ --syntax-diff-delete: var(--ember-light-11);
--syntax-diff-unknown: #ff0000;
- --markdown-heading: #9d7cd8;
- --markdown-text: #eeeeee;
- --markdown-link: #fab283;
- --markdown-link-text: #56b6c2;
- --markdown-code: #7fd88f;
- --markdown-block-quote: #e5c07b;
- --markdown-emph: #e5c07b;
- --markdown-strong: #f5a742;
- --markdown-horizontal-rule: #808080;
- --markdown-list-item: #fab283;
- --markdown-list-enumeration: #56b6c2;
- --markdown-image: #fab283;
- --markdown-image-text: #56b6c2;
- --markdown-code-block: #eeeeee;
- --border-color: #5f7e97;
- --border-weaker-base: var(--ink-dark-alpha-3);
- --border-weaker-hover: var(--ink-dark-alpha-4);
- --border-weaker-active: var(--ink-dark-alpha-6);
- --border-weaker-selected: var(--cobalt-dark-alpha-3);
- --border-weaker-disabled: var(--ink-dark-alpha-2);
- --border-weaker-focus: var(--ink-dark-alpha-6);
- --button-ghost-hover: var(--ink-dark-alpha-2);
- --button-ghost-hover2: var(--ink-dark-alpha-3);
-
- /* Terminal theme colors - Paper dark */
- --terminal-background: #101313;
- --terminal-foreground: #ecf1f1;
- --terminal-cursor: #ecf1f1;
- --terminal-black: #101313;
- --terminal-red: #ff917b;
- --terminal-green: #37db2e;
- --terminal-yellow: #fdd63c;
- --terminal-blue: #89b5ff;
- --terminal-magenta: #dca2e0;
- --terminal-cyan: #00ceb9;
- --terminal-white: #ecf1f1;
- --terminal-bright-black: #b1b7b7;
- --terminal-bright-red: #ffd1c8;
- --terminal-bright-green: #aff7a8;
- --terminal-bright-yellow: #faebb5;
- --terminal-bright-blue: #cde2ff;
- --terminal-bright-magenta: #edd8ef;
- --terminal-bright-cyan: #93e9f6;
- --terminal-bright-white: #fcfdfd;
+ --markdown-heading: #d68c27;
+ --markdown-text: #1a1a1a;
+ --markdown-link: #3b7dd8;
+ --markdown-link-text: #318795;
+ --markdown-code: #3d9a57;
+ --markdown-block-quote: #b0851f;
+ --markdown-emph: #b0851f;
+ --markdown-strong: #d68c27;
+ --markdown-horizontal-rule: #8a8a8a;
+ --markdown-list-item: #3b7dd8;
+ --markdown-list-enumeration: #318795;
+ --markdown-image: #3b7dd8;
+ --markdown-image-text: #318795;
+ --markdown-code-block: #1a1a1a;
+ --border-color: #ffffff;
+ --border-weaker-base: var(--ink-light-alpha-3);
+ --border-weaker-hover: var(--ink-light-alpha-4);
+ --border-weaker-active: var(--ink-light-alpha-6);
+ --border-weaker-selected: var(--cobalt-light-alpha-4);
+ --border-weaker-disabled: var(--ink-light-alpha-2);
+ --border-weaker-focus: var(--ink-light-alpha-6);
+ --button-ghost-hover: var(--ink-light-alpha-2);
+ --button-ghost-hover2: var(--ink-light-alpha-3);
}
}
diff --git a/packages/util/package.json b/packages/util/package.json
index f3b9c9cc3d7f..496987ebb3c7 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/util",
- "version": "1.0.147",
+ "version": "1.0.150",
"private": true,
"type": "module",
"exports": {
diff --git a/packages/web/package.json b/packages/web/package.json
index 74ccf3c8d3df..5b82ae78bb81 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,7 +1,7 @@
{
"name": "@opencode-ai/web",
"type": "module",
- "version": "1.0.147",
+ "version": "1.0.150",
"scripts": {
"dev": "astro dev",
"dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
diff --git a/packages/web/src/content/docs/keybinds.mdx b/packages/web/src/content/docs/keybinds.mdx
index 273ecf5245a9..d9e99cd03747 100644
--- a/packages/web/src/content/docs/keybinds.mdx
+++ b/packages/web/src/content/docs/keybinds.mdx
@@ -73,8 +73,8 @@ OpenCode has a list of keybinds that you can customize through the OpenCode conf
"input_delete_to_line_start": "ctrl+u",
"input_backspace": "backspace,shift+backspace",
"input_delete": "ctrl+d,delete,shift+delete",
- "input_undo": "ctrl+-,cmd+z",
- "input_redo": "ctrl+.,cmd+shift+z",
+ "input_undo": "ctrl+-,super+z",
+ "input_redo": "ctrl+.,super+shift+z",
"input_word_forward": "alt+f,alt+right,ctrl+right",
"input_word_backward": "alt+b,alt+left,ctrl+left",
"input_select_word_forward": "alt+shift+f,alt+shift+right",
diff --git a/sdks/vscode/package.json b/sdks/vscode/package.json
index ddd6f1b96fcd..22c0e05786f1 100644
--- a/sdks/vscode/package.json
+++ b/sdks/vscode/package.json
@@ -2,7 +2,7 @@
"name": "opencode",
"displayName": "opencode",
"description": "opencode for VS Code",
- "version": "1.0.147",
+ "version": "1.0.150",
"publisher": "sst-dev",
"repository": {
"type": "git",