diff options
Diffstat (limited to 'packages/ui')
33 files changed, 2529 insertions, 23 deletions
diff --git a/packages/ui/package.json b/packages/ui/package.json index 2a88f86a3..705d8648e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -4,21 +4,30 @@ "type": "module", "exports": { ".": "./src/components/index.ts", - "./*": "./src/components/*" + "./*": "./src/components/*.tsx", + "./styles": "./src/styles/index.css", + "./styles/tailwind": "./src/styles/tailwind/index.css", + "./fonts/*": "./src/assets/fonts/*" }, "scripts": { - "dev": "vite" + "dev": "vite", + "generate:tailwind": "bun run script/tailwind.ts" }, "devDependencies": { + "@types/bun": "catalog:", "typescript": "catalog:", "vite": "catalog:", - "vite-plugin-solid": "catalog:" + "vite-plugin-solid": "catalog:", + "tailwindcss": "catalog:", + "@tailwindcss/vite": "catalog:" }, "dependencies": { + "@kobalte/core": "catalog:", + "@solidjs/meta": "catalog:", "remeda": "catalog:", + "luxon": "catalog:", + "virtua": "catalog:", "solid-js": "catalog:", - "@solidjs/meta": "catalog:", - "@kobalte/core": "catalog:", - "@opencode-ai/css": "workspace:*" + "solid-list": "catalog:" } } diff --git a/packages/ui/script/colors.txt b/packages/ui/script/colors.txt new file mode 100644 index 000000000..15f8bb3d1 --- /dev/null +++ b/packages/ui/script/colors.txt @@ -0,0 +1,214 @@ + --background-base: #f8f7f7; + --background-weak: var(--smoke-light-3); + --background-strong: var(--smoke-light-1); + --background-stronger: #fcfcfc; + --base: var(--smoke-light-alpha-2); + --surface-base: var(--smoke-light-alpha-2); + --base2: var(--smoke-light-alpha-2); + --base3: var(--smoke-light-alpha-2); + --surface-inset-base: var(--smoke-light-alpha-3); + --surface-inset-base-hover: var(--smoke-light-alpha-3); + --surface-inset-strong: #1f000017; + --surface-inset-strong-hover: #1f000017; + --surface-raised-base: var(--smoke-light-alpha-1); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-light-alpha-2); + --surface-raised-strong: var(--smoke-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--smoke-light-alpha-3); + --surface-weaker: var(--smoke-light-alpha-4); + --surface-strong: #ffffff; + --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); + --surface-interactive-hover: var(--cobalt-light-4); + --surface-interactive-weak: var(--cobalt-light-2); + --surface-interactive-weak-hover: var(--cobalt-light-3); + --surface-success-base: var(--apple-light-3); + --surface-success-weak: var(--apple-light-2); + --surface-success-strong: var(--apple-light-9); + --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-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-skip-base: var(--smoke-light-3); + --surface-diff-unchanged-base: #ffffff00; + --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(--smoke-light-11); + --input-base: var(--smoke-light-1); + --input-hover: var(--smoke-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--smoke-light-4); + --text-weak: var(--smoke-light-9); + --text-weaker: var(--smoke-light-8); + --text-strong: var(--smoke-light-12); + --text-on-brand-base: var(--smoke-light-alpha-11); + --text-on-interactive-base: var(--smoke-light-1); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-dark-alpha-11); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-11); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); + --text-on-info-weak: var(--smoke-dark-alpha-9); + --text-on-info-strong: var(--smoke-dark-alpha-12); + --text-on-warning-weak: var(--smoke-dark-alpha-9); + --text-on-warning-strong: var(--smoke-dark-alpha-12); + --text-on-success-weak: var(--smoke-dark-alpha-9); + --text-on-success-strong: var(--smoke-dark-alpha-12); + --text-on-brand-weak: var(--smoke-light-alpha-9); + --text-on-brand-weaker: var(--smoke-light-alpha-8); + --text-on-brand-strong: var(--smoke-light-alpha-12); + --button-secondary-base: #fdfcfc; + --border-base: var(--smoke-light-alpha-7); + --border-hover: var(--smoke-light-alpha-8); + --border-active: var(--smoke-light-alpha-9); + --border-selected: var(--cobalt-light-alpha-9); + --border-disabled: var(--smoke-light-alpha-8); + --border-focus: var(--smoke-light-alpha-9); + --border-weak-base: var(--smoke-light-alpha-5); + --border-strong-base: var(--smoke-light-alpha-7); + --border-strong-hover: var(--smoke-light-alpha-8); + --border-strong-active: var(--smoke-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--smoke-light-alpha-6); + --border-strong-focus: var(--smoke-light-alpha-7); + --border-weak-hover: var(--smoke-light-alpha-6); + --border-weak-active: var(--smoke-light-alpha-7); + --border-weak-selected: var(--cobalt-light-alpha-6); + --border-weak-disabled: var(--smoke-light-alpha-6); + --border-weak-focus: var(--smoke-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(--smoke-light-8); + --border-interactive-focus: var(--cobalt-light-9); + --border-success-base: var(--apple-light-6); + --border-success-hover: var(--apple-light-7); + --border-success-selected: var(--apple-light-9); + --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-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(--smoke-light-9); + --icon-hover: var(--smoke-light-11); + --icon-active: var(--smoke-light-12); + --icon-selected: var(--smoke-light-12); + --icon-disabled: var(--smoke-light-8); + --icon-focus: var(--smoke-light-12); + --icon-weak-base: var(--smoke-light-7); + --icon-invert-base: #ffffff; + --icon-weak-hover: var(--smoke-light-8); + --icon-weak-active: var(--smoke-light-9); + --icon-weak-selected: var(--smoke-light-10); + --icon-weak-disabled: var(--smoke-light-6); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-light-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); + --icon-brand-base: var(--smoke-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-7); + --icon-critical-hover: var(--ember-light-8); + --icon-critical-active: var(--ember-light-11); + --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(--smoke-light-alpha-11); + --icon-on-brand-hover: var(--smoke-light-alpha-12); + --icon-on-brand-selected: var(--smoke-light-alpha-12); + --icon-on-interactive-base: var(--smoke-light-alpha-9); + --icon-on-interactive-hover: var(--smoke-light-alpha-10); + --icon-on-interactive-selected: var(--smoke-light-alpha-11); + --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(--blue-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-9); + --icon-diff-delete-hover: var(--ember-light-10); + --icon-diff-delete-active: var(--ember-light-11); + --syntax-comment: #ffffff; + --syntax-string: #ffffff; + --syntax-keyword: #ffffff; + --syntax-function: #ffffff; + --syntax-number: #ffffff; + --syntax-operator: #ffffff; + --syntax-variable: #ffffff; + --syntax-type: #ffffff; + --syntax-constant: #ffffff; + --syntax-punctuation: #ffffff; + --syntax-success: #ffffff; + --syntax-warning: #ffffff; + --syntax-critical: #ffffff; + --syntax-info: #ffffff; + --markdown-heading: #ffffff; + --markdown-text: #ffffff; + --markdown-link: #ffffff; + --markdown-link-text: #ffffff; + --markdown-code: #ffffff; + --markdown-block-quote: #ffffff; + --markdown-emph: #ffffff; + --markdown-strong: #ffffff; + --markdown-horizontal-rule: #ffffff; + --markdown-list-item: #ffffff; + --markdown-list-enumeration: #ffffff; + --markdown-image: #ffffff; + --markdown-image-text: #ffffff; + --markdown-code-block: #ffffff; + --border-color: #ffffff; diff --git a/packages/ui/script/tailwind.ts b/packages/ui/script/tailwind.ts new file mode 100644 index 000000000..1c7064690 --- /dev/null +++ b/packages/ui/script/tailwind.ts @@ -0,0 +1,23 @@ +#!/usr/bin/env bun + +const colors = await Bun.file(import.meta.dir + "/colors.txt").text() + +const variables = [] +for (const line of colors.split("\n")) { + if (!line.trim()) continue + const [variable] = line.trim().split(":") + const name = variable!.trim().substring(2) + variables.push(`--color-${name}: var(--${name});`) +} + +const output = ` +/* Generated by script/colors.ts */ +/* Do not edit this file manually */ + +@theme { + --color-*: initial; + ${variables.join("\n ")} +} +` + +await Bun.file(import.meta.dir + "/../src/styles/tailwind/colors.css").write(output.trim()) diff --git a/packages/ui/src/assets/fonts/geist-italic.ttf b/packages/ui/src/assets/fonts/geist-italic.ttf Binary files differnew file mode 100644 index 000000000..9d29a123b --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-italic.ttf diff --git a/packages/ui/src/assets/fonts/geist-italic.woff2 b/packages/ui/src/assets/fonts/geist-italic.woff2 Binary files differnew file mode 100644 index 000000000..29649a03e --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-italic.woff2 diff --git a/packages/ui/src/assets/fonts/geist-mono-italic.ttf b/packages/ui/src/assets/fonts/geist-mono-italic.ttf Binary files differnew file mode 100644 index 000000000..7f23cf1b6 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-mono-italic.ttf diff --git a/packages/ui/src/assets/fonts/geist-mono-italic.woff2 b/packages/ui/src/assets/fonts/geist-mono-italic.woff2 Binary files differnew file mode 100644 index 000000000..ad84c9979 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-mono-italic.woff2 diff --git a/packages/ui/src/assets/fonts/geist-mono.ttf b/packages/ui/src/assets/fonts/geist-mono.ttf Binary files differnew file mode 100644 index 000000000..41208ea87 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-mono.ttf diff --git a/packages/ui/src/assets/fonts/geist-mono.woff2 b/packages/ui/src/assets/fonts/geist-mono.woff2 Binary files differnew file mode 100644 index 000000000..6c2f194c7 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist-mono.woff2 diff --git a/packages/ui/src/assets/fonts/geist.ttf b/packages/ui/src/assets/fonts/geist.ttf Binary files differnew file mode 100644 index 000000000..e7adab279 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist.ttf diff --git a/packages/ui/src/assets/fonts/geist.woff2 b/packages/ui/src/assets/fonts/geist.woff2 Binary files differnew file mode 100644 index 000000000..38319ea37 --- /dev/null +++ b/packages/ui/src/assets/fonts/geist.woff2 diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css new file mode 100644 index 000000000..c9ccf4ecb --- /dev/null +++ b/packages/ui/src/components/button.css @@ -0,0 +1,106 @@ +[data-component="button"] { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + border-style: solid; + border-width: 1px; + border-radius: 6px; + text-decoration: none; + user-select: none; + + &[data-variant="primary"] { + border-color: var(--border-base); + background-color: var(--surface-brand-base); + color: var(--text-on-brand-strong); + + &:hover:not(:disabled) { + border-color: var(--border-hover); + background-color: var(--surface-brand-hover); + } + &:active:not(:disabled) { + border-color: var(--border-active); + background-color: var(--surface-brand-active); + } + &:focus:not(:disabled) { + border-color: var(--border-focus); + background-color: var(--surface-brand-focus); + } + } + + &[data-variant="secondary"] { + border-color: var(--border-weak-base); + background-color: var(--button-secondary-base); + color: var(--text-strong); + + /* shadow-xs */ + box-shadow: + 0 1px 2px -1px rgba(19, 16, 16, 0.04), + 0 1px 2px 0 rgba(19, 16, 16, 0.06), + 0 1px 3px 0 rgba(19, 16, 16, 0.08); + + &:hover:not(:disabled) { + border-color: var(--border-hover); + background-color: var(--surface-hover); + } + &:active:not(:disabled) { + border-color: var(--border-active); + background-color: var(--surface-active); + } + &:focus:not(:disabled) { + border-color: var(--border-focus); + background-color: var(--surface-focus); + } + } + + &[data-variant="ghost"] { + border-color: transparent; + background-color: transparent; + color: var(--text-strong); + + &:hover:not(:disabled) { + background-color: var(--surface-hover); + } + &:active:not(:disabled) { + border-color: var(--border-active); + background-color: var(--surface-active); + } + &:focus:not(:disabled) { + border-color: var(--border-focus); + background-color: var(--surface-focus); + } + } + + &[data-size="normal"] { + padding: 0 6px 0 6px; + + font-size: var(--font-size-small); + line-height: var(--line-height-large); + gap: calc(var(--spacing) * 0.5); + } + + &[data-size="large"] { + height: 32px; + padding: 0 8px 0 6px; + gap: 8px; + + /* text-12-medium */ + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 166.667% */ + letter-spacing: var(--letter-spacing-normal); + } + + &: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/ui/src/components/fonts.tsx b/packages/ui/src/components/fonts.tsx index 447c486e4..ff4fb7588 100644 --- a/packages/ui/src/components/fonts.tsx +++ b/packages/ui/src/components/fonts.tsx @@ -1,20 +1,20 @@ import { Style, Link } from "@solidjs/meta" -import geist from "@opencode-ai/css/fonts/geist.woff2" -import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2" +import geist from "../assets/fonts/geist.woff2" +import geistMono from "../assets/fonts/geist-mono.woff2" export const Fonts = () => { return ( <> <Style>{` @font-face { - font-family: "geist"; + font-family: "Geist"; src: url("${geist}") format("woff2-variations"); font-display: swap; font-style: normal; font-weight: 100 900; } @font-face { - font-family: "geist-fallback"; + font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 97%; @@ -22,14 +22,14 @@ export const Fonts = () => { line-gap-override: 1%; } @font-face { - font-family: "geist-mono"; + font-family: "Geist Mono"; src: url("${geistMono}") format("woff2-variations"); font-display: swap; font-style: normal; font-weight: 100 900; } @font-face { - font-family: "geist-mono-fallback"; + font-family: "Geist Mono Fallback"; src: local("Courier New"); size-adjust: 100%; ascent-override: 97%; diff --git a/packages/ui/src/components/icon.css b/packages/ui/src/components/icon.css new file mode 100644 index 000000000..abc193220 --- /dev/null +++ b/packages/ui/src/components/icon.css @@ -0,0 +1,6 @@ +[data-component="icon"] { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 2048ec639..d6ddc3ec0 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,6 +1,7 @@ export * from "./button" export * from "./icon" export * from "./fonts" +export * from "./list" export * from "./select" export * from "./tabs" export * from "./tooltip" diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css new file mode 100644 index 000000000..b98cae07c --- /dev/null +++ b/packages/ui/src/components/list.css @@ -0,0 +1,30 @@ +[data-component="list"] { + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 6px; + + /* Hide scrollbar */ + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; + + [data-slot="item"] { + cursor: pointer; + width: 100%; + padding: 4px 12px; + text-align: left; + + border-radius: 6px; + transition: background-color 0.2s ease-in-out; + + &[data-active="true"] { + background-color: var(--surface-raised-base-hover); + } + &:focus { + outline: none; + } + } +} diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx new file mode 100644 index 000000000..9704e4554 --- /dev/null +++ b/packages/ui/src/components/list.tsx @@ -0,0 +1,76 @@ +import { ComponentProps, createEffect, createSignal, type JSX } from "solid-js" +import { VirtualizerHandle, VList } from "virtua/solid" +import { createList } from "solid-list" +import { createStore } from "solid-js/store" + +export interface ListProps<T> { + data: T[] + children: (x: T) => JSX.Element + key: (x: T) => string + current?: T + onSelect?: (value: T | undefined) => void + class?: ComponentProps<"div">["class"] +} + +export function List<T>(props: ListProps<T>) { + const [virtualizer, setVirtualizer] = createSignal<VirtualizerHandle | undefined>(undefined) + const [store, setStore] = createStore({ + mouseActive: false, + }) + const list = createList({ + items: () => props.data.map(props.key), + initialActive: props.current ? props.key(props.current) : undefined, + loop: true, + }) + // const resetSelection = () => { + // if (props.data.length === 0) return + // list.setActive(props.key(props.data[0])) + // } + const handleSelect = (item: T) => { + props.onSelect?.(item) + } + + const handleKey = (e: KeyboardEvent) => { + setStore("mouseActive", false) + + if (e.key === "Enter") { + e.preventDefault() + const selected = props.data.find((x) => props.key(x) === list.active()) + if (selected) handleSelect(selected) + } else { + list.onKeyDown(e) + } + } + + createEffect(() => { + if (store.mouseActive || props.data.length === 0) return + const index = props.data.findIndex((x) => props.key(x) === list.active()) + if (index === 0) { + virtualizer()?.scrollTo(0) + return + } + // virtualizer()?.scrollTo(list.active()) + // const element = virtualizer()?.querySelector(`[data-key="${list.active()}"]`) + // element?.scrollIntoView({ block: "nearest", behavior: "smooth" }) + }) + + return ( + <VList data-component="list" ref={setVirtualizer} data={props.data} onKeyDown={handleKey} class={props.class}> + {(item) => ( + <button + data-slot="item" + data-key={props.key(item)} + data-active={props.key(item) === list.active()} + onClick={() => handleSelect(item)} + onMouseMove={(e) => { + e.currentTarget.focus() + setStore("mouseActive", true) + list.setActive(props.key(item)) + }} + > + {props.children(item)} + </button> + )} + </VList> + ) +} diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css new file mode 100644 index 000000000..b6b884a1f --- /dev/null +++ b/packages/ui/src/components/select.css @@ -0,0 +1,124 @@ +[data-component="select"] { + [data-slot="trigger"] { + padding: 0 4px 0 8px; + + [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; + } + } +} + +[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"] { + font-size: var(--text-xs); + line-height: var(--text-xs--line-height); + font-weight: var(--font-weight-light); + text-transform: uppercase; + color: var(--text-weak); + opacity: 0.6; + margin-top: calc(var(--spacing) * 3); + margin-left: calc(var(--spacing) * 2); + &:first-child { + margin-top: 0; + } + } + + [data-slot="item"] { + position: relative; + display: flex; + align-items: center; + padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2); + border-radius: var(--radius-sm); + font-size: var(--text-xs); + line-height: var(--text-xs--line-height); + color: var(--text-base); + cursor: pointer; + transition: + background-color 0.2s ease-in-out, + color 0.2s ease-in-out; + outline: none; + user-select: none; + + &[data-highlighted] { + background-color: var(--surface-base); + } + + &[data-disabled] { + background-color: var(--surface-disabled); + pointer-events: none; + } + + [data-slot="item-indicator"] { + margin-left: auto; + } + + &:focus { + outline: none; + } + + &:hover { + background-color: var(--surface-hover); + } + } +} + +@keyframes select-open { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes select-close { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.95); + } +} diff --git a/packages/ui/src/components/style.css b/packages/ui/src/components/style.css deleted file mode 100644 index 52539dc8f..000000000 --- a/packages/ui/src/components/style.css +++ /dev/null @@ -1,2 +0,0 @@ -/* re-exporting for convenience */ -@import "@opencode-ai/css"; diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css new file mode 100644 index 000000000..c6d09c656 --- /dev/null +++ b/packages/ui/src/components/tabs.css @@ -0,0 +1,95 @@ +[data-component="tabs"] { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + border-width: 1px; + border-style: solid; + border-radius: var(--radius-sm); + border-color: var(--border-weak-base); + background-color: var(--background-stronger); + overflow: clip; + + & [data-slot="list"] { + width: 100%; + position: relative; + display: flex; + align-items: center; + overflow-x: auto; + + /* Hide scrollbar */ + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + + /* After element to fill remaining space */ + &::after { + content: ""; + display: block; + flex-grow: 1; + height: 100%; + border-bottom: 1px solid var(--border-weak-base); + background-color: var(--background-base); + border-top-right-radius: var(--radius-sm); + } + + &:empty::after { + display: none; + } + } + + & [data-slot="trigger"] { + position: relative; + height: 36px; + padding: 8px 12px; + display: flex; + align-items: center; + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + color: var(--text-weak); + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + 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; + color: var(--text-weaker); + } + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--border-focus); + } + &[data-selected] { + color: var(--text-base); + background-color: transparent; + border-bottom-color: transparent; + } + &:hover:not(:disabled):not([data-selected]) { + color: var(--text-strong); + } + } + + & [data-slot="content"] { + overflow-y: auto; + flex: 1; + + /* Hide scrollbar */ + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + + &:focus-visible { + outline: none; + } + } +} diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css new file mode 100644 index 000000000..0577365d6 --- /dev/null +++ b/packages/ui/src/components/tooltip.css @@ -0,0 +1,59 @@ +/* [data-component="tooltip-trigger"] { */ +/* display: flex; */ +/* align-items: center; */ +/* } */ + +[data-component="tooltip"] { + z-index: 1000; + max-width: 320px; + border-radius: 12px; + background-color: var(--surface-float-base); + color: var(--white); + padding: 2px 12px 2px 12px; + 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); + + /* 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-large); /* 171.429% */ + letter-spacing: var(--letter-spacing-normal); + + &[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/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx index 7cb22b290..b975099fb 100644 --- a/packages/ui/src/components/tooltip.tsx +++ b/packages/ui/src/components/tooltip.tsx @@ -36,7 +36,7 @@ export function Tooltip(props: TooltipProps) { <KobalteTooltip.Portal> <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}> {typeof others.value === "function" ? others.value() : others.value} - <KobalteTooltip.Arrow data-slot="arrow" size={18} /> + {/* <KobalteTooltip.Arrow data-slot="arrow" size={18} /> */} </KobalteTooltip.Content> </KobalteTooltip.Portal> </KobalteTooltip> diff --git a/packages/ui/src/app.tsx b/packages/ui/src/demo.tsx index 6f3e388e9..b93dd2c75 100644 --- a/packages/ui/src/app.tsx +++ b/packages/ui/src/demo.tsx @@ -1,8 +1,8 @@ import type { Component } from "solid-js" -import { Button, Select, Tabs, Tooltip, Fonts } from "./components" +import { Button, Select, Tabs, Tooltip, Fonts, List } from "./components" import "./index.css" -const App: Component = () => { +const Demo: Component = () => { const Content = (props: { dark?: boolean }) => ( <div class={`${props.dark ? "dark" : ""}`}> <h3>Buttons</h3> @@ -111,6 +111,12 @@ const App: Component = () => { <Button variant="primary">Dynamic Tooltip</Button> </Tooltip> </section> + <h3>List</h3> + <section style={{ height: "300px" }}> + <List data={["Item 1", "Item 2", "Item 3"]} key={(x) => x}> + {(x) => <div>{x}</div>} + </List> + </section> </div> ) @@ -125,4 +131,4 @@ const App: Component = () => { ) } -export default App +export default Demo diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index ab8e72091..27bcac4da 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -1,4 +1,4 @@ -@import "@opencode-ai/css"; +@import "./styles/index.css"; :root { body { @@ -9,14 +9,12 @@ main { display: flex; flex-direction: row; - height: 100vh; overflow-x: hidden; } main > div { flex: 1; padding: 2rem; min-width: 0; - overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index caa8b1ccd..fa76ba9af 100644 --- a/packages/ui/src/index.tsx +++ b/packages/ui/src/index.tsx @@ -2,7 +2,7 @@ import { render } from "solid-js/web" import { MetaProvider } from "@solidjs/meta" -import App from "./app" +import Demo from "./demo" const root = document.getElementById("root") @@ -15,7 +15,7 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) { render( () => ( <MetaProvider> - <App /> + <Demo /> </MetaProvider> ), root!, diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css new file mode 100644 index 000000000..b80398e1d --- /dev/null +++ b/packages/ui/src/styles/base.css @@ -0,0 +1,374 @@ +/* + 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) + 2. Remove default margins and padding + 3. Reset all borders. +*/ + +*, +::after, +::before, +::backdrop, +::file-selector-button { + box-sizing: border-box; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 2 */ + border: 0 solid; /* 3 */ +} + +/* + 1. Use a consistent sensible line-height in all browsers. + 2. Prevent adjustments of font size after orientation changes in iOS. + 3. Use a more readable tab size. + 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS. +*/ + +html, +:host { + line-height: var(--line-height-large); /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + tab-size: 4; /* 3 */ + font-family: var(--font-family-sans); /* 4 */ + font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */ + font-variation-settings: var(--font-family-sans--font-variation-settings, normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ +} + +/* + 1. Add the correct height in Firefox. + 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) + 3. Reset the default border style to a 1px solid border. +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ +} + +/* + Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* + Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* + Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; +} + +/* + Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: var(--font-family-mono); /* 1 */ + font-feature-settings: var(--font-family-mono--font-feature-settings, normal); /* 2 */ + font-variation-settings: var(--font-family-mono--font-variation-settings, normal); /* 3 */ + font-size: 1em; /* 4 */ +} + +/* + Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* + Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* + 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) + 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) + 3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ +} + +/* + Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* + Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* + Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* + Make lists unstyled by default. +*/ + +ol, +ul, +menu { + list-style: none; +} + +/* + 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) + 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ +} + +/* + Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* + 1. Inherit font styles in all browsers. + 2. Remove border radius in all browsers. + 3. Remove background color in all browsers. + 4. Ensure consistent opacity for disabled states in all browsers. +*/ + +button, +input, +select, +optgroup, +textarea, +::file-selector-button { + font: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + border-radius: 0; /* 2 */ + background-color: transparent; /* 3 */ + opacity: 1; /* 4 */ +} + +/* + Restore default font weight. +*/ + +:where(select:is([multiple], [size])) optgroup { + font-weight: bolder; +} + +/* + Restore indentation. +*/ + +:where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; +} + +/* + Restore space after button. +*/ + +::file-selector-button { + margin-inline-end: 4px; +} + +/* + Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +*/ + +::placeholder { + opacity: 1; +} + +/* + Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not + crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) +*/ + +@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) + /* Safari 17+ */ { + ::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } +} + +/* + Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* + Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + 1. Ensure date/time inputs have the same height when empty in iOS Safari. + 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. +*/ + +::-webkit-date-and-time-value { + min-height: 1lh; /* 1 */ + text-align: inherit; /* 2 */ +} + +/* + Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. +*/ + +::-webkit-datetime-edit { + display: inline-flex; +} + +/* + Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. +*/ + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-datetime-edit, +::-webkit-datetime-edit-year-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-minute-field, +::-webkit-datetime-edit-second-field, +::-webkit-datetime-edit-millisecond-field, +::-webkit-datetime-edit-meridiem-field { + padding-block: 0; +} + +/* + Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499) +*/ + +::-webkit-calendar-picker-indicator { + line-height: 1; +} + +/* + Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* + Correct the inability to style the border radius in iOS Safari. +*/ + +button, +input:where([type="button"], [type="reset"], [type="submit"]), +::file-selector-button { + appearance: button; +} + +/* + Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* + Make elements with the HTML hidden attribute stay hidden by default. +*/ + +[hidden]:where(:not([hidden="until-found"])) { + display: none !important; +} diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css new file mode 100644 index 000000000..b0ddf36b7 --- /dev/null +++ b/packages/ui/src/styles/colors.css @@ -0,0 +1,496 @@ +:root { + --grey-dark-1: #ffffff; + --grey-dark-2: #ffffff; + --grey-dark-3: #ffffff; + --grey-dark-4: #ffffff; + --grey-dark-5: #ffffff; + --grey-dark-6: #ffffff; + --grey-dark-7: #ffffff; + --grey-dark-8: #ffffff; + --grey-dark-9: #ffffff; + --grey-dark-10: #ffffff; + --grey-dark-11: #ffffff; + --grey-dark-12: #ffffff; + --grey-light-1: #ffffff; + --grey-dark-alpha-1: #ffffff; + --grey-dark-alpha-2: #ffffff; + --grey-dark-alpha-3: #ffffff; + --grey-dark-alpha-4: #ffffff; + --grey-dark-alpha-5: #ffffff; + --grey-dark-alpha-6: #ffffff; + --grey-dark-alpha-7: #ffffff; + --grey-dark-alpha-8: #ffffff; + --grey-dark-alpha-9: #ffffff; + --grey-dark-alpha-10: #ffffff; + --grey-dark-alpha-11: #ffffff; + --grey-dark-alpha-12: #ffffff; + --smoke-dark-1: #131010; + --grey-light-2: #ffffff; + --grey-light-3: #ffffff; + --grey-light-4: #ffffff; + --grey-light-5: #ffffff; + --grey-light-6: #ffffff; + --grey-light-7: #ffffff; + --grey-light-8: #ffffff; + --grey-light-9: #ffffff; + --grey-light-10: #ffffff; + --grey-light-11: #ffffff; + --grey-light-12: #ffffff; + --smoke-dark-2: #1b1818; + --smoke-dark-3: #252121; + --smoke-dark-4: #2d2828; + --smoke-dark-5: #343030; + --smoke-dark-6: #3e3939; + --smoke-dark-7: #4b4646; + --smoke-dark-8: #645f5f; + --smoke-dark-9: #716c6b; + --smoke-dark-10: #7f7979; + --smoke-dark-11: #b7b1b1; + --smoke-dark-12: #f1ecec; + --smoke-light-1: #fdfcfc; + --smoke-light-2: #f9f8f8; + --smoke-light-3: #f1f0f0; + --smoke-light-4: #e9e8e8; + --smoke-light-5: #e2e0e0; + --smoke-light-6: #dad9d9; + --smoke-light-7: #cfcecd; + --smoke-light-8: #bcbbbb; + --smoke-light-9: #8e8b8b; + --smoke-light-10: #848181; + --smoke-light-11: #656363; + --smoke-light-12: #211e1e; + --smoke-dark-alpha-1: #bb000003; + --smoke-dark-alpha-2: #f9b4b40b; + --smoke-dark-alpha-3: #f9caca16; + --smoke-dark-alpha-4: #ffd5d51e; + --smoke-dark-alpha-5: #fce2e226; + --smoke-dark-alpha-6: #fce2e231; + --smoke-dark-alpha-7: #fce8e83f; + --smoke-dark-alpha-8: #fff1f159; + --smoke-dark-alpha-9: #fff3f067; + --smoke-dark-alpha-10: #fff2f276; + --smoke-dark-alpha-11: #fff7f7b2; + --smoke-light-alpha-1: #55000003; + --smoke-dark-alpha-12: #fffafaf0; + --smoke-light-alpha-2: #25000007; + --smoke-light-alpha-3: #1100000f; + --smoke-light-alpha-4: #0c000017; + --smoke-light-alpha-5: #1100001f; + --smoke-light-alpha-6: #07000026; + --smoke-light-alpha-7: #0b060032; + --smoke-light-alpha-8: #04000044; + --smoke-light-alpha-9: #07000074; + --smoke-light-alpha-10: #0400009c; + --smoke-light-alpha-11: #0700007e; + --smoke-light-alpha-12: #020000df; + --yuzu-dark-1: #11120c; + --yuzu-light-1: #fdfdfb; + --yuzu-light-2: #fbfceb; + --yuzu-light-3: #f8fac5; + --yuzu-light-4: #f2f4a5; + --yuzu-light-5: #e9eb9a; + --yuzu-light-6: #dcde8e; + --yuzu-light-7: #cccd7e; + --yuzu-light-8: #b6b768; + --yuzu-light-9: #dcde8d; + --yuzu-light-10: #d2d384; + --yuzu-light-11: #7c7c2c; + --yuzu-light-12: #3d3d23; + --yuzu-dark-2: #181810; + --yuzu-dark-3: #262614; + --yuzu-dark-4: #313115; + --yuzu-dark-5: #3d3d18; + --yuzu-dark-6: #4a4a21; + --yuzu-dark-7: #5a5b2c; + --yuzu-dark-8: #6f6f36; + --yuzu-dark-9: #fdffca; + --yuzu-dark-10: #f4f6c1; + --yuzu-dark-11: #dbdda0; + --yuzu-dark-12: #eff1bd; + --yuzu-dark-alpha-1: #11910002; + --yuzu-dark-alpha-2: #f1f10008; + --yuzu-dark-alpha-3: #fafa3317; + --yuzu-dark-alpha-4: #fbfb2f23; + --yuzu-dark-alpha-5: #fbfb3730; + --yuzu-dark-alpha-6: #fcfc533e; + --yuzu-dark-alpha-7: #fafd6750; + --yuzu-dark-alpha-8: #ffff6f65; + --yuzu-dark-alpha-9: #fdffca; + --yuzu-dark-alpha-10: #fcfec7f6; + --yuzu-dark-alpha-11: #fdffb8db; + --yuzu-dark-alpha-12: #fdffc8f0; + --yuzu-light-alpha-1: #80800004; + --yuzu-light-alpha-2: #ccd90014; + --yuzu-light-alpha-3: #e1ea003a; + --yuzu-light-alpha-4: #dbe0015a; + --yuzu-light-alpha-5: #c8cd0065; + --yuzu-light-alpha-6: #b1b50071; + --yuzu-light-alpha-7: #9b9d0081; + --yuzu-light-alpha-8: #84860097; + --yuzu-light-alpha-9: #b1b60072; + --yuzu-light-alpha-10: #a2a4017b; + --yuzu-light-alpha-11: #616100d3; + --yuzu-light-alpha-12: #1e1e00dc; + --cobalt-dark-1: #091120; + --cobalt-dark-2: #0d172b; + --cobalt-dark-3: #0c2255; + --cobalt-dark-4: #0c2a74; + --cobalt-dark-5: #113489; + --cobalt-dark-6: #18409b; + --cobalt-dark-7: #204cb1; + --cobalt-dark-8: #2558d0; + --cobalt-dark-9: #034cff; + --cobalt-dark-10: #0038ee; + --cobalt-dark-11: #89b5ff; + --cobalt-dark-12: #cde2ff; + --cobalt-light-1: #fcfdff; + --cobalt-light-2: #f5faff; + --cobalt-light-3: #eaf2ff; + --cobalt-light-4: #daeaff; + --cobalt-light-5: #c8e0ff; + --cobalt-light-6: #b4d2ff; + --cobalt-light-7: #98bfff; + --cobalt-dark-alpha-1: #0011f211; + --cobalt-dark-alpha-2: #0048fe1c; + --cobalt-dark-alpha-3: #004dff49; + --cobalt-dark-alpha-4: #064dfd6b; + --cobalt-dark-alpha-5: #1157ff81; + --cobalt-dark-alpha-6: #1e62ff94; + --cobalt-dark-alpha-7: #2768feac; + --cobalt-dark-alpha-8: #2a6affcd; + --cobalt-dark-alpha-9: #034cff; + --cobalt-dark-alpha-10: #003bffed; + --cobalt-dark-alpha-11: #89b5ff; + --cobalt-dark-alpha-12: #cde2ff; + --cobalt-light-8: #73a4ff; + --cobalt-light-9: #034cff; + --cobalt-light-10: #0443de; + --cobalt-light-11: #1251ec; + --cobalt-light-12: #0f2b6c; + --cobalt-light-alpha-1: #0055ff03; + --cobalt-light-alpha-2: #0080ff0a; + --cobalt-light-alpha-3: #0062ff15; + --cobalt-light-alpha-4: #006fff25; + --cobalt-light-alpha-5: #0070ff37; + --cobalt-light-alpha-6: #0167ff4b; + --cobalt-light-alpha-7: #0061ff67; + --cobalt-light-alpha-8: #005aff8c; + --cobalt-light-alpha-9: #004afffc; + --cobalt-light-alpha-10: #0040ddfb; + --cobalt-light-alpha-11: #0044ebed; + --cobalt-light-alpha-12: #001e63f0; + --apple-dark-1: #0c140b; + --apple-light-1: #fafefa; + --apple-light-2: #f4fcf3; + --apple-light-3: #e1fade; + --apple-light-4: #cef6c9; + --apple-light-5: #b9efb3; + --apple-light-6: #9fe598; + --apple-light-7: #7dd676; + --apple-light-8: #43c23b; + --apple-light-9: #12c905; + --apple-light-10: #00bd00; + --apple-light-11: #008600; + --apple-light-12: #184115; + --apple-dark-2: #121b11; + --apple-dark-3: #152d13; + --apple-dark-4: #123d0f; + --apple-dark-5: #174b14; + --apple-dark-6: #1d5b19; + --apple-dark-7: #226c1e; + --apple-dark-8: #267f20; + --apple-dark-9: #12c905; + --apple-dark-10: #17bb0d; + --apple-dark-11: #37db2e; + --apple-dark-12: #aff7a8; + --apple-dark-alpha-1: #00d10004; + --apple-dark-alpha-2: #29f9120b; + --apple-dark-alpha-3: #33ff221e; + --apple-dark-alpha-4: #17fb0730; + --apple-dark-alpha-5: #2afc1e3f; + --apple-dark-alpha-6: #37fd2b50; + --apple-dark-alpha-7: #3efe3362; + --apple-dark-alpha-8: #3fff3276; + --apple-dark-alpha-9: #12fe02c6; + --apple-dark-alpha-10: #19fe0cb7; + --apple-dark-alpha-11: #3dfe33d9; + --apple-dark-alpha-12: #b4feacf7; + --apple-light-alpha-1: #00cc0005; + --apple-light-alpha-2: #16c0000c; + --apple-light-alpha-3: #18d90021; + --apple-light-alpha-4: #18d50036; + --apple-light-alpha-5: #15ca004c; + --apple-light-alpha-6: #12bf0067; + --apple-light-alpha-7: #0db30089; + --apple-light-alpha-8: #0bb000c4; + --apple-light-alpha-9: #0dc800fa; + --apple-light-alpha-10: #00bd00; + --apple-light-alpha-11: #008600; + --apple-light-alpha-12: #033000ea; + --ember-dark-1: #170f0d; + --ember-dark-2: #201412; + --ember-dark-3: #3c140d; + --ember-dark-4: #530e05; + --ember-dark-5: #631409; + --ember-dark-6: #742216; + --ember-dark-7: #8d3324; + --ember-dark-8: #b64330; + --ember-dark-9: #fc533a; + --ember-dark-10: #ee462d; + --ember-dark-11: #ff917b; + --ember-dark-12: #ffd1c8; + --ember-light-1: #fffcfb; + --ember-light-2: #fff6f3; + --ember-light-3: #ffe9e4; + --ember-light-4: #ffd7cc; + --ember-light-5: #ffc8ba; + --ember-light-6: #ffb7a6; + --ember-light-7: #ffa392; + --ember-light-8: #f68975; + --ember-light-9: #fc533a; + --ember-light-10: #ef442a; + --ember-light-11: #da3319; + --ember-light-12: #5c281f; + --ember-dark-alpha-1: #ec000007; + --ember-dark-alpha-2: #f23e2011; + --ember-dark-alpha-3: #fb22002f; + --ember-dark-alpha-4: #ff070047; + --ember-dark-alpha-5: #ff1a0058; + --ember-dark-alpha-6: #fd3a1d6b; + --ember-dark-alpha-7: #ff533685; + --ember-dark-alpha-8: #ff5a3eb1; + --ember-dark-alpha-9: #ff553bfc; + --ember-dark-alpha-10: #ff4a2fed; + --ember-dark-alpha-11: #ff917b; + --ember-dark-alpha-12: #ffd1c8; + --ember-light-alpha-1: #ff400004; + --ember-light-alpha-2: #ff40000c; + --ember-light-alpha-3: #ff30001b; + --ember-light-alpha-4: #ff370033; + --ember-light-alpha-5: #ff340045; + --ember-light-alpha-6: #ff310059; + --ember-light-alpha-7: #ff28006d; + --ember-light-alpha-8: #ef25008a; + --ember-light-alpha-9: #fb2200c5; + --ember-light-alpha-10: #ec1f00d5; + --ember-light-alpha-11: #d61d00e6; + --ember-light-alpha-12: #460a00e0; + --solaris-dark-1: #13110b; + --solaris-dark-2: #1b180f; + --solaris-dark-3: #2a2307; + --solaris-dark-4: #382b00; + --solaris-dark-5: #443500; + --solaris-dark-6: #514307; + --solaris-dark-7: #64551a; + --solaris-dark-8: #7f6c25; + --solaris-dark-9: #fcd53a; + --solaris-dark-10: #f2cb2a; + --solaris-dark-11: #fdd63c; + --solaris-dark-12: #faebb5; + --solaris-light-1: #fefdfa; + --solaris-light-2: #fffbea; + --solaris-light-3: #fff6be; + --solaris-light-4: #ffee9c; + --solaris-light-5: #ffe47c; + --solaris-light-6: #f2d775; + --solaris-light-7: #e0c76f; + --solaris-light-8: #cdb047; + --solaris-light-9: #ffdc17; + --solaris-light-10: #fad337; + --solaris-light-11: #917500; + --solaris-light-12: #433c22; + --solaris-dark-alpha-1: #bb110003; + --solaris-dark-alpha-2: #f9b4000b; + --solaris-dark-alpha-3: #febb001b; + --solaris-dark-alpha-4: #feaf002a; + --solaris-dark-alpha-5: #feb80037; + --solaris-dark-alpha-6: #feca0045; + --solaris-dark-alpha-7: #ffd42b59; + --solaris-dark-alpha-8: #ffd63d76; + --solaris-dark-alpha-9: #ffd83bfc; + --solaris-dark-alpha-10: #fed52bf2; + --solaris-dark-alpha-11: #ffd83cfd; + --solaris-dark-alpha-12: #fff0b9fa; + --solaris-light-alpha-1: #cc990005; + --solaris-light-alpha-2: #ffcf0015; + --solaris-light-alpha-3: #ffdc0041; + --solaris-light-alpha-4: #ffd40063; + --solaris-light-alpha-5: #ffcb0083; + --solaris-light-alpha-6: #e7b6008a; + --solaris-light-alpha-7: #c89c0090; + --solaris-light-alpha-8: #ba9200b8; + --solaris-light-alpha-9: #ffd900e8; + --solaris-light-alpha-10: #f9c700c8; + --solaris-light-alpha-11: #917500; + --solaris-light-alpha-12: #261e00dd; + --lilac-dark-1: #140f14; + --lilac-dark-2: #1d141d; + --lilac-dark-3: #2f1e31; + --lilac-dark-4: #3e2440; + --lilac-dark-5: #4a2c4c; + --lilac-dark-6: #573859; + --lilac-dark-7: #6c486e; + --lilac-dark-8: #8a5e8d; + --lilac-dark-9: #edb2f1; + --lilac-dark-10: #e2a8e6; + --lilac-dark-11: #dca2e0; + --lilac-dark-12: #edd8ef; + --lilac-light-1: #fffcff; + --lilac-light-2: #fdf7fe; + --lilac-light-3: #fceafd; + --lilac-light-4: #faddfb; + --lilac-light-5: #f5cff7; + --lilac-light-6: #eebff1; + --lilac-light-7: #e3a9e7; + --lilac-light-8: #d78bdd; + --lilac-light-9: #a753ae; + --lilac-light-10: #9946a0; + --lilac-light-11: #95429c; + --lilac-light-12: #590b60; + --lilac-dark-alpha-1: #d100d104; + --lilac-dark-alpha-2: #fd4cfd0d; + --lilac-dark-alpha-3: #ec70fb23; + --lilac-dark-alpha-4: #f270fc33; + --lilac-dark-alpha-5: #f57dfd40; + --lilac-dark-alpha-6: #f691fd4e; + --lilac-dark-alpha-7: #fa9eff64; + --lilac-dark-alpha-8: #f9a5ff85; + --lilac-dark-alpha-9: #fbbcfff0; + --lilac-dark-alpha-10: #f9b9fee5; + --lilac-dark-alpha-11: #fab8ffde; + --lilac-dark-alpha-12: #fde6ffee; + --lilac-light-alpha-1: #ff00ff03; + --lilac-light-alpha-2: #c000e008; + --lilac-light-alpha-3: #db00e715; + --lilac-light-alpha-4: #da00e122; + --lilac-light-alpha-5: #ca00d530; + --lilac-light-alpha-6: #bc00c840; + --lilac-light-alpha-7: #ac00b856; + --lilac-light-alpha-8: #a800b574; + --lilac-light-alpha-9: #7d0087ac; + --lilac-light-alpha-10: #73007cb9; + --lilac-light-alpha-11: #70007abd; + --lilac-light-alpha-12: #520059f4; + --coral-dark-1: #160f0e; + --coral-light-1: #fffcfc; + --coral-light-2: #fff8f7; + --coral-light-3: #ffebe8; + --coral-light-4: #ffdbd5; + --coral-light-5: #ffcdc5; + --coral-light-6: #f9beb5; + --coral-light-7: #e9aea6; + --coral-light-8: #d49b93; + --coral-light-9: #af7871; + --coral-light-10: #a26c65; + --coral-light-11: #9c665f; + --coral-light-12: #592a24; + --coral-dark-2: #1f1413; + --coral-dark-3: #391613; + --coral-dark-4: #481b17; + --coral-dark-5: #542621; + --coral-dark-6: #63332d; + --coral-dark-7: #77453f; + --coral-dark-8: #935e57; + --coral-dark-9: #ffd6d0; + --coral-dark-10: #f5ccc6; + --coral-dark-11: #e2a8a0; + --coral-dark-12: #fcd3cd; + --coral-dark-alpha-1: #e6000006; + --coral-dark-alpha-2: #ff44330f; + --coral-dark-alpha-3: #ff2f1d2b; + --coral-dark-alpha-4: #ff3d2b3b; + --coral-dark-alpha-5: #ff5c4a48; + --coral-dark-alpha-6: #ff746358; + --coral-dark-alpha-7: #fd897c6e; + --coral-dark-alpha-8: #fe9d908c; + --coral-dark-alpha-9: #ffd6d0; + --coral-dark-alpha-10: #fed3cdf5; + --coral-dark-alpha-11: #ffbdb4e0; + --coral-dark-alpha-12: #ffd6cffc; + --coral-light-alpha-1: #ff000003; + --coral-light-alpha-2: #ff200008; + --coral-light-alpha-3: #ff220017; + --coral-light-alpha-4: #ff25002a; + --coral-light-alpha-5: #ff24003a; + --coral-light-alpha-6: #eb20014a; + --coral-light-alpha-7: #c0170059; + --coral-light-alpha-8: #9a13006c; + --coral-light-alpha-9: #700d008e; + --coral-light-alpha-10: #650c009a; + --coral-light-alpha-11: #620b00a0; + --coral-light-alpha-12: #3e0700db; + --mint-dark-alpha-1: #00bb0003; + --mint-dark-alpha-2: #2bf72b0a; + --mint-dark-alpha-3: #66fe5d1b; + --mint-dark-alpha-4: #63ff5d2c; + --mint-dark-alpha-5: #6cff643b; + --mint-dark-alpha-6: #71ff6a4b; + --mint-dark-alpha-7: #74fd6f5d; + --mint-dark-alpha-8: #74ff6f72; + --mint-dark-alpha-9: #c8ffc4f5; + --mint-dark-alpha-10: #c6fec2f5; + --mint-dark-alpha-11: #b4ffafdc; + --mint-dark-alpha-12: #c7ffc3fb; + --mint-dark-1: #0d130c; + --mint-dark-2: #121a12; + --mint-dark-3: #1a2a19; + --mint-dark-4: #1f3a1e; + --mint-dark-5: #264824; + --mint-dark-6: #2d572b; + --mint-dark-7: #356733; + --mint-dark-8: #3d7b3b; + --mint-dark-9: #c8ffc4; + --mint-dark-10: #bff5bb; + --mint-dark-11: #9dde99; + --mint-dark-12: #c4fbc0; + --mint-light-1: #fafefa; + --mint-light-2: #f4fcf3; + --mint-light-3: #dbfdd8; + --mint-light-4: #c3fabf; + --mint-light-5: #adf2a8; + --mint-light-6: #96e692; + --mint-light-7: #81d47d; + --mint-light-8: #6abc67; + --mint-light-9: #9ff29a; + --mint-light-10: #98e793; + --mint-light-11: #318430; + --mint-light-12: #1f461d; + --mint-dark-alpha-1: #00bb0003; + --mint-dark-alpha-2: #2bf72b09; + --mint-dark-alpha-3: #66fe5d1b; + --mint-dark-alpha-4: #63ff5d2b; + --mint-dark-alpha-5: #6cff643b; + --mint-dark-alpha-6: #71ff6a4a; + --mint-dark-alpha-7: #74fd6f5c; + --mint-dark-alpha-8: #74ff6f72; + --mint-dark-alpha-9: #c8ffc4f5; + --mint-dark-alpha-10: #c6fec2f5; + --mint-dark-alpha-11: #b4ffafdb; + --mint-dark-alpha-12: #c7ffc3fa; + --black: #000000; + --white: #ffffff; + --mint-light-alpha-1: #00cc0005; + --mint-light-alpha-2: #16c0000c; + --mint-light-alpha-3: #14f20027; + --mint-light-alpha-4: #10ec0040; + --mint-light-alpha-5: #0fd90057; + --mint-light-alpha-6: #0ac5006d; + --mint-light-alpha-7: #08ab0082; + --mint-light-alpha-8: #058f0098; + --mint-light-alpha-9: #0ddf0065; + --mint-light-alpha-10: #0cc7006c; + --mint-light-alpha-11: #016800cf; + --mint-light-alpha-12: #022e00e2; + --grey-light-alpha-1: #ffffff; + --grey-light-alpha-2: #ffffff; + --grey-light-alpha-3: #ffffff; + --grey-light-alpha-4: #ffffff; + --grey-light-alpha-5: #ffffff; + --grey-light-alpha-6: #ffffff; + --grey-light-alpha-7: #ffffff; + --grey-light-alpha-8: #ffffff; + --grey-light-alpha-9: #ffffff; + --grey-light-alpha-10: #ffffff; + --grey-light-alpha-11: #ffffff; + --grey-light-alpha-12: #ffffff; +} diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css new file mode 100644 index 000000000..0a89a4a0d --- /dev/null +++ b/packages/ui/src/styles/index.css @@ -0,0 +1,15 @@ +@layer theme, base, components, utilities; + +@import "./colors.css" layer(theme); +@import "./theme.css" layer(theme); + +@import "./base.css" layer(base); + +@import "../components/button.css" layer(components); +@import "../components/icon.css" layer(components); +@import "../components/list.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/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css new file mode 100644 index 000000000..2bf3fd772 --- /dev/null +++ b/packages/ui/src/styles/tailwind/colors.css @@ -0,0 +1,220 @@ +/* Generated by script/colors.ts */ +/* Do not edit this file manually */ + +@theme { + --color-*: initial; + --color-background-base: var(--background-base); + --color-background-weak: var(--background-weak); + --color-background-strong: var(--background-strong); + --color-background-stronger: var(--background-stronger); + --color-base: var(--base); + --color-surface-base: var(--surface-base); + --color-base2: var(--base2); + --color-base3: var(--base3); + --color-surface-inset-base: var(--surface-inset-base); + --color-surface-inset-base-hover: var(--surface-inset-base-hover); + --color-surface-inset-strong: var(--surface-inset-strong); + --color-surface-inset-strong-hover: var(--surface-inset-strong-hover); + --color-surface-raised-base: var(--surface-raised-base); + --color-surface-float-base: var(--surface-float-base); + --color-surface-float-base-hover: var(--surface-float-base-hover); + --color-surface-raised-base-hover: var(--surface-raised-base-hover); + --color-surface-raised-strong: var(--surface-raised-strong); + --color-surface-raised-strong-hover: var(--surface-raised-strong-hover); + --color-surface-raised-stronger: var(--surface-raised-stronger); + --color-surface-raised-stronger-hover: var(--surface-raised-stronger-hover); + --color-surface-weak: var(--surface-weak); + --color-surface-weaker: var(--surface-weaker); + --color-surface-strong: var(--surface-strong); + --color-surface-raised-stronger-non-alpha: var(--surface-raised-stronger-non-alpha); + --color-surface-brand-base: var(--surface-brand-base); + --color-surface-brand-hover: var(--surface-brand-hover); + --color-surface-interactive-base: var(--surface-interactive-base); + --color-surface-interactive-hover: var(--surface-interactive-hover); + --color-surface-interactive-weak: var(--surface-interactive-weak); + --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover); + --color-surface-success-base: var(--surface-success-base); + --color-surface-success-weak: var(--surface-success-weak); + --color-surface-success-strong: var(--surface-success-strong); + --color-surface-warning-base: var(--surface-warning-base); + --color-surface-warning-weak: var(--surface-warning-weak); + --color-surface-warning-strong: var(--surface-warning-strong); + --color-surface-critical-base: var(--surface-critical-base); + --color-surface-critical-weak: var(--surface-critical-weak); + --color-surface-critical-strong: var(--surface-critical-strong); + --color-surface-info-base: var(--surface-info-base); + --color-surface-info-weak: var(--surface-info-weak); + --color-surface-info-strong: var(--surface-info-strong); + --color-surface-diff-skip-base: var(--surface-diff-skip-base); + --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base); + --color-surface-diff-hidden-base: var(--surface-diff-hidden-base); + --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak); + --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker); + --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong); + --color-surface-diff-hidden-stronger: var(--surface-diff-hidden-stronger); + --color-surface-diff-add-base: var(--surface-diff-add-base); + --color-surface-diff-add-weak: var(--surface-diff-add-weak); + --color-surface-diff-add-weaker: var(--surface-diff-add-weaker); + --color-surface-diff-add-strong: var(--surface-diff-add-strong); + --color-surface-diff-add-stronger: var(--surface-diff-add-stronger); + --color-surface-diff-delete-base: var(--surface-diff-delete-base); + --color-surface-diff-delete-weak: var(--surface-diff-delete-weak); + --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker); + --color-surface-diff-delete-strong: var(--surface-diff-delete-strong); + --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger); + --color-text-base: var(--text-base); + --color-input-base: var(--input-base); + --color-input-hover: var(--input-hover); + --color-input-active: var(--input-active); + --color-input-selected: var(--input-selected); + --color-input-focus: var(--input-focus); + --color-input-disabled: var(--input-disabled); + --color-text-weak: var(--text-weak); + --color-text-weaker: var(--text-weaker); + --color-text-strong: var(--text-strong); + --color-text-on-brand-base: var(--text-on-brand-base); + --color-text-on-interactive-base: var(--text-on-interactive-base); + --color-text-on-success-base: var(--text-on-success-base); + --color-text-on-warning-base: var(--text-on-warning-base); + --color-text-on-info-base: var(--text-on-info-base); + --color-text-diff-add-base: var(--text-diff-add-base); + --color-text-diff-delete-base: var(--text-diff-delete-base); + --color-text-diff-delete-strong: var(--text-diff-delete-strong); + --color-text-diff-add-strong: var(--text-diff-add-strong); + --color-text-on-info-weak: var(--text-on-info-weak); + --color-text-on-info-strong: var(--text-on-info-strong); + --color-text-on-warning-weak: var(--text-on-warning-weak); + --color-text-on-warning-strong: var(--text-on-warning-strong); + --color-text-on-success-weak: var(--text-on-success-weak); + --color-text-on-success-strong: var(--text-on-success-strong); + --color-text-on-brand-weak: var(--text-on-brand-weak); + --color-text-on-brand-weaker: var(--text-on-brand-weaker); + --color-text-on-brand-strong: var(--text-on-brand-strong); + --color-button-secondary-base: var(--button-secondary-base); + --color-border-base: var(--border-base); + --color-border-hover: var(--border-hover); + --color-border-active: var(--border-active); + --color-border-selected: var(--border-selected); + --color-border-disabled: var(--border-disabled); + --color-border-focus: var(--border-focus); + --color-border-weak-base: var(--border-weak-base); + --color-border-strong-base: var(--border-strong-base); + --color-border-strong-hover: var(--border-strong-hover); + --color-border-strong-active: var(--border-strong-active); + --color-border-strong-selected: var(--border-strong-selected); + --color-border-strong-disabled: var(--border-strong-disabled); + --color-border-strong-focus: var(--border-strong-focus); + --color-border-weak-hover: var(--border-weak-hover); + --color-border-weak-active: var(--border-weak-active); + --color-border-weak-selected: var(--border-weak-selected); + --color-border-weak-disabled: var(--border-weak-disabled); + --color-border-weak-focus: var(--border-weak-focus); + --color-border-interactive-base: var(--border-interactive-base); + --color-border-interactive-hover: var(--border-interactive-hover); + --color-border-interactive-active: var(--border-interactive-active); + --color-border-interactive-selected: var(--border-interactive-selected); + --color-border-interactive-disabled: var(--border-interactive-disabled); + --color-border-interactive-focus: var(--border-interactive-focus); + --color-border-success-base: var(--border-success-base); + --color-border-success-hover: var(--border-success-hover); + --color-border-success-selected: var(--border-success-selected); + --color-border-warning-base: var(--border-warning-base); + --color-border-warning-hover: var(--border-warning-hover); + --color-border-warning-selected: var(--border-warning-selected); + --color-border-critical-base: var(--border-critical-base); + --color-border-critical-hover: var(--border-critical-hover); + --color-border-critical-selected: var(--border-critical-selected); + --color-border-info-base: var(--border-info-base); + --color-border-info-hover: var(--border-info-hover); + --color-border-info-selected: var(--border-info-selected); + --color-icon-base: var(--icon-base); + --color-icon-hover: var(--icon-hover); + --color-icon-active: var(--icon-active); + --color-icon-selected: var(--icon-selected); + --color-icon-disabled: var(--icon-disabled); + --color-icon-focus: var(--icon-focus); + --color-icon-weak-base: var(--icon-weak-base); + --color-icon-invert-base: var(--icon-invert-base); + --color-icon-weak-hover: var(--icon-weak-hover); + --color-icon-weak-active: var(--icon-weak-active); + --color-icon-weak-selected: var(--icon-weak-selected); + --color-icon-weak-disabled: var(--icon-weak-disabled); + --color-icon-weak-focus: var(--icon-weak-focus); + --color-icon-strong-base: var(--icon-strong-base); + --color-icon-strong-hover: var(--icon-strong-hover); + --color-icon-strong-active: var(--icon-strong-active); + --color-icon-strong-selected: var(--icon-strong-selected); + --color-icon-strong-disabled: var(--icon-strong-disabled); + --color-icon-strong-focus: var(--icon-strong-focus); + --color-icon-brand-base: var(--icon-brand-base); + --color-icon-interactive-base: var(--icon-interactive-base); + --color-icon-success-base: var(--icon-success-base); + --color-icon-success-hover: var(--icon-success-hover); + --color-icon-success-active: var(--icon-success-active); + --color-icon-warning-base: var(--icon-warning-base); + --color-icon-warning-hover: var(--icon-warning-hover); + --color-icon-warning-active: var(--icon-warning-active); + --color-icon-critical-base: var(--icon-critical-base); + --color-icon-critical-hover: var(--icon-critical-hover); + --color-icon-critical-active: var(--icon-critical-active); + --color-icon-info-base: var(--icon-info-base); + --color-icon-info-hover: var(--icon-info-hover); + --color-icon-info-active: var(--icon-info-active); + --color-icon-on-brand-base: var(--icon-on-brand-base); + --color-icon-on-brand-hover: var(--icon-on-brand-hover); + --color-icon-on-brand-selected: var(--icon-on-brand-selected); + --color-icon-on-interactive-base: var(--icon-on-interactive-base); + --color-icon-on-interactive-hover: var(--icon-on-interactive-hover); + --color-icon-on-interactive-selected: var(--icon-on-interactive-selected); + --color-icon-agent-plan-base: var(--icon-agent-plan-base); + --color-icon-agent-docs-base: var(--icon-agent-docs-base); + --color-icon-agent-ask-base: var(--icon-agent-ask-base); + --color-icon-agent-build-base: var(--icon-agent-build-base); + --color-icon-on-success-base: var(--icon-on-success-base); + --color-icon-on-success-hover: var(--icon-on-success-hover); + --color-icon-on-success-selected: var(--icon-on-success-selected); + --color-icon-on-warning-base: var(--icon-on-warning-base); + --color-icon-on-warning-hover: var(--icon-on-warning-hover); + --color-icon-on-warning-selected: var(--icon-on-warning-selected); + --color-icon-on-critical-base: var(--icon-on-critical-base); + --color-icon-on-critical-hover: var(--icon-on-critical-hover); + --color-icon-on-critical-selected: var(--icon-on-critical-selected); + --color-icon-on-info-base: var(--icon-on-info-base); + --color-icon-on-info-hover: var(--icon-on-info-hover); + --color-icon-on-info-selected: var(--icon-on-info-selected); + --color-icon-diff-add-base: var(--icon-diff-add-base); + --color-icon-diff-add-hover: var(--icon-diff-add-hover); + --color-icon-diff-add-active: var(--icon-diff-add-active); + --color-icon-diff-delete-base: var(--icon-diff-delete-base); + --color-icon-diff-delete-hover: var(--icon-diff-delete-hover); + --color-icon-diff-delete-active: var(--icon-diff-delete-active); + --color-syntax-comment: var(--syntax-comment); + --color-syntax-string: var(--syntax-string); + --color-syntax-keyword: var(--syntax-keyword); + --color-syntax-function: var(--syntax-function); + --color-syntax-number: var(--syntax-number); + --color-syntax-operator: var(--syntax-operator); + --color-syntax-variable: var(--syntax-variable); + --color-syntax-type: var(--syntax-type); + --color-syntax-constant: var(--syntax-constant); + --color-syntax-punctuation: var(--syntax-punctuation); + --color-syntax-success: var(--syntax-success); + --color-syntax-warning: var(--syntax-warning); + --color-syntax-critical: var(--syntax-critical); + --color-syntax-info: var(--syntax-info); + --color-markdown-heading: var(--markdown-heading); + --color-markdown-text: var(--markdown-text); + --color-markdown-link: var(--markdown-link); + --color-markdown-link-text: var(--markdown-link-text); + --color-markdown-code: var(--markdown-code); + --color-markdown-block-quote: var(--markdown-block-quote); + --color-markdown-emph: var(--markdown-emph); + --color-markdown-strong: var(--markdown-strong); + --color-markdown-horizontal-rule: var(--markdown-horizontal-rule); + --color-markdown-list-item: var(--markdown-list-item); + --color-markdown-list-enumeration: var(--markdown-list-enumeration); + --color-markdown-image: var(--markdown-image); + --color-markdown-image-text: var(--markdown-image-text); + --color-markdown-code-block: var(--markdown-code-block); + --color-border-color: var(--border-color); +}
\ No newline at end of file diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css new file mode 100644 index 000000000..9faa3f970 --- /dev/null +++ b/packages/ui/src/styles/tailwind/index.css @@ -0,0 +1,40 @@ +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@import "./utilities.css"; + +@import "../index.css"; + +@theme { + --*: initial; + + --spacing: 0.25rem; + /* --spacing: var(--spacing); */ + + --font-sans: var(--font-family-sans); + --font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings); + --font-mono: var(--font-family-mono); + --font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings); + + --text-sm: var(--font-size-small); + --text-base: var(--font-size-base); + --text-lg: var(--font-size-large); + --text-xl: var(--font-size-x-large); + + --font-weight-regular: var(--font-weight-regular); + --font-weight-medium: var(--font-weight-medium); + + --leading-lg: var(--line-height-large); + --leading-xl: var(--line-height-x-large); + --leading-2xl: var(--line-height-2x-large); + + --tracking-normal: var(--letter-spacing-normal); + --tracking-tight: var(--letter-spacing-tight); + --tracking-tightest: var(--letter-spacing-tightest); + + --shadow-xs: var(--shadow-xs); + --shadow-md: var(--shadow-md); + --shadow-xs-border-selected: var(--shadow-xs-border-selected); +} + +@import "./colors.css"; diff --git a/packages/ui/src/styles/tailwind/utilities.css b/packages/ui/src/styles/tailwind/utilities.css new file mode 100644 index 000000000..f3bedca37 --- /dev/null +++ b/packages/ui/src/styles/tailwind/utilities.css @@ -0,0 +1,9 @@ +@utility no-scrollbar { + &::-webkit-scrollbar { + display: none; + } + & { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css new file mode 100644 index 000000000..ccfebd4c2 --- /dev/null +++ b/packages/ui/src/styles/theme.css @@ -0,0 +1,498 @@ +:root { + --font-family-sans: "Geist", "Geist Fallback"; + --font-family-sans--font-feature-settings: "ss03" 1; + --font-family-mono: "Geist Mono", "Geist Mono Fallback"; + --font-family-mono--font-feature-settings: "ss02" 1; + + --font-size-small: 12px; + --font-size-base: 14px; + --font-size-large: 16px; + --font-size-x-large: 20px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --line-height-large: 20px; + --line-height-x-large: 24px; + --line-height-2x-large: 30px; + --letter-spacing-normal: 0; + --letter-spacing-tight: -0.1599999964237213; + --letter-spacing-tightest: -0.3199999928474426; + --paragraph-spacing-base: 0; + + --spacing: 0.25rem; + + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + + --radius-xs: 0.125rem; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + + --shadow-xs: + 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); + --shadow-md: + 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12); + --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); +} + +:root { + /* OC-1-Light */ + color-scheme: light; + --background-base: #f8f7f7; + --background-weak: var(--smoke-light-3); + --background-strong: var(--smoke-light-1); + --background-stronger: #fcfcfc; + --surface-base: var(--smoke-light-alpha-2); + --base: var(--smoke-light-alpha-2); + --base2: var(--smoke-light-alpha-2); + --base3: var(--smoke-light-alpha-2); + --surface-inset-base: var(--smoke-light-alpha-3); + --surface-inset-base-hover: var(--smoke-light-alpha-3); + --surface-inset-strong: #1f000017; + --surface-inset-strong-hover: #1f000017; + --surface-raised-base: var(--smoke-light-alpha-1); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-light-alpha-2); + --surface-raised-strong: var(--smoke-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--smoke-light-alpha-3); + --surface-weaker: var(--smoke-light-alpha-4); + --surface-strong: #ffffff; + --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); + --surface-interactive-hover: var(--cobalt-light-4); + --surface-interactive-weak: var(--cobalt-light-2); + --surface-interactive-weak-hover: var(--cobalt-light-3); + --surface-success-base: var(--apple-light-3); + --surface-success-weak: var(--apple-light-2); + --surface-success-strong: var(--apple-light-9); + --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-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-hidden-base: var(--blue-light-3); + --surface-diff-skip-base: var(--smoke-light-3); + --surface-diff-unchanged-base: #ffffff00; + --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(--smoke-light-11); + --input-base: var(--smoke-light-1); + --input-hover: var(--smoke-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--smoke-light-4); + --text-weak: var(--smoke-light-9); + --text-weaker: var(--smoke-light-8); + --text-strong: var(--smoke-light-12); + --text-on-brand-base: var(--smoke-light-alpha-11); + --text-on-interactive-base: var(--smoke-light-1); + --text-on-interactive-weak: var(--smoke-dark-alpha-11); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-dark-alpha-11); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-11); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); + --text-on-info-weak: var(--smoke-dark-alpha-9); + --text-on-info-strong: var(--smoke-dark-alpha-12); + --text-on-warning-weak: var(--smoke-dark-alpha-9); + --text-on-warning-strong: var(--smoke-dark-alpha-12); + --text-on-success-weak: var(--smoke-dark-alpha-9); + --text-on-success-strong: var(--smoke-dark-alpha-12); + --text-on-brand-weak: var(--smoke-light-alpha-9); + --text-on-brand-weaker: var(--smoke-light-alpha-8); + --text-on-brand-strong: var(--smoke-light-alpha-12); + --button-secondary-base: #fdfcfc; + --button-secondary-base-hover: var(--smoke-light-2); + --border-base: var(--smoke-light-alpha-7); + --border-hover: var(--smoke-light-alpha-8); + --border-active: var(--smoke-light-alpha-9); + --border-selected: var(--cobalt-light-alpha-9); + --border-disabled: var(--smoke-light-alpha-8); + --border-focus: var(--smoke-light-alpha-9); + --border-weak-base: var(--smoke-light-alpha-5); + --border-strong-base: var(--smoke-light-alpha-7); + --border-strong-hover: var(--smoke-light-alpha-8); + --border-strong-active: var(--smoke-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--smoke-light-alpha-6); + --border-strong-focus: var(--smoke-light-alpha-7); + --border-weak-hover: var(--smoke-light-alpha-6); + --border-weak-active: var(--smoke-light-alpha-7); + --border-weak-selected: var(--cobalt-light-alpha-4); + --border-weak-disabled: var(--smoke-light-alpha-6); + --border-weak-focus: var(--smoke-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(--smoke-light-8); + --border-interactive-focus: var(--cobalt-light-9); + --border-success-base: var(--apple-light-6); + --border-success-hover: var(--apple-light-7); + --border-success-selected: var(--apple-light-9); + --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-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(--smoke-light-9); + --icon-hover: var(--smoke-light-11); + --icon-active: var(--smoke-light-12); + --icon-selected: var(--smoke-light-12); + --icon-disabled: var(--smoke-light-8); + --icon-focus: var(--smoke-light-12); + --icon-weak-base: var(--smoke-light-7); + --icon-invert-base: #ffffff; + --icon-weak-hover: var(--smoke-light-8); + --icon-weak-active: var(--smoke-light-9); + --icon-weak-selected: var(--smoke-light-10); + --icon-weak-disabled: var(--smoke-light-6); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-light-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); + --icon-brand-base: var(--smoke-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-7); + --icon-critical-hover: var(--ember-light-8); + --icon-critical-active: var(--ember-light-11); + --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(--smoke-light-alpha-11); + --icon-on-brand-hover: var(--smoke-light-alpha-12); + --icon-on-brand-selected: var(--smoke-light-alpha-12); + --icon-on-interactive-base: var(--smoke-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(--blue-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-9); + --icon-diff-delete-hover: var(--ember-light-10); + --icon-diff-delete-active: var(--ember-light-11); + --syntax-comment: #8a8a8a; + --syntax-string: #d68c27; + --syntax-keyword: #3b7dd8; + --syntax-function: #d1383d; + --syntax-number: #3d9a57; + --syntax-operator: #d68c27; + --syntax-variable: #b0851f; + --syntax-type: #318795; + --syntax-constant: #953170; + --syntax-punctuation: #1a1a1a; + --syntax-success: var(--apple-dark-10); + --syntax-warning: var(--amber-light-10); + --syntax-critical: var(--ember-dark-9); + --syntax-info: var(--lilac-dark-11); + --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; + + .dark { + /* OC-1-Dark */ + color-scheme: dark; + --background-base: var(--smoke-dark-1); + --background-weak: #201d1d; + --background-strong: #151313; + --background-stronger: #201c1c; + --surface-base: var(--smoke-dark-alpha-3); + --base: var(--smoke-dark-alpha-2); + --base2: var(--smoke-dark-alpha-2); + --base3: var(--smoke-dark-alpha-2); + --surface-inset-base: #0e0b0b7f; + --surface-inset-base-hover: #0e0b0b7f; + --surface-inset-strong: #060505cc; + --surface-inset-strong-hover: #060505cc; + --surface-raised-base: var(--smoke-dark-alpha-3); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-dark-alpha-4); + --surface-raised-strong: var(--smoke-dark-alpha-4); + --surface-raised-strong-hover: var(--smoke-dark-alpha-6); + --surface-raised-stronger: var(--smoke-dark-alpha-6); + --surface-raised-stronger-hover: var(--smoke-dark-alpha-7); + --surface-weak: var(--smoke-dark-alpha-5); + --surface-weaker: var(--smoke-dark-alpha-6); + --surface-strong: var(--smoke-dark-alpha-7); + --surface-raised-stronger-non-alpha: var(--smoke-dark-4); + --surface-brand-base: var(--yuzu-light-9); + --surface-brand-hover: var(--yuzu-light-10); + --surface-interactive-base: var(--cobalt-light-3); + --surface-interactive-hover: var(--cobalt-light-4); + --surface-interactive-weak: var(--cobalt-light-2); + --surface-interactive-weak-hover: var(--cobalt-light-3); + --surface-success-base: var(--apple-light-3); + --surface-success-weak: var(--apple-light-2); + --surface-success-strong: var(--apple-light-9); + --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-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-hidden-base: var(--blue-dark-2); + --surface-diff-skip-base: var(--smoke-dark-alpha-2); + --surface-diff-unchanged-base: var(--smoke-dark-1); + --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(--smoke-dark-alpha-11); + --input-base: var(--smoke-dark-2); + --input-hover: var(--smoke-dark-2); + --input-active: var(--cobalt-dark-1); + --input-selected: var(--cobalt-dark-2); + --input-focus: var(--cobalt-dark-1); + --input-disabled: var(--smoke-dark-4); + --text-weak: var(--smoke-dark-alpha-9); + --text-weaker: var(--smoke-dark-alpha-8); + --text-strong: var(--smoke-dark-alpha-12); + --text-on-brand-base: var(--smoke-dark-alpha-11); + --text-on-interactive-base: var(--smoke-dark-12); + --text-on-interactive-weak: var(--smoke-dark-alpha-11); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-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-on-info-weak: var(--smoke-dark-alpha-9); + --text-on-info-strong: var(--smoke-dark-alpha-12); + --text-on-warning-weak: var(--smoke-dark-alpha-9); + --text-on-warning-strong: var(--smoke-dark-alpha-12); + --text-on-success-weak: var(--smoke-dark-alpha-9); + --text-on-success-strong: var(--smoke-dark-alpha-12); + --text-on-brand-weak: var(--smoke-dark-alpha-9); + --text-on-brand-weaker: var(--smoke-dark-alpha-8); + --text-on-brand-strong: var(--smoke-dark-alpha-12); + --button-secondary-base: var(--smoke-dark-6); + --button-secondary-base-hover: var(--smoke-dark-5); + --border-base: var(--smoke-dark-alpha-7); + --border-hover: var(--smoke-dark-alpha-8); + --border-active: var(--smoke-dark-alpha-9); + --border-selected: var(--cobalt-dark-alpha-9); + --border-disabled: var(--smoke-dark-alpha-8); + --border-focus: var(--smoke-dark-alpha-9); + --border-weak-base: var(--smoke-dark-alpha-6); + --border-strong-base: var(--smoke-dark-alpha-8); + --border-strong-hover: var(--smoke-dark-alpha-7); + --border-strong-active: var(--smoke-dark-alpha-8); + --border-strong-selected: var(--cobalt-dark-alpha-6); + --border-strong-disabled: var(--smoke-dark-alpha-6); + --border-strong-focus: var(--smoke-dark-alpha-8); + --border-weak-hover: var(--smoke-dark-alpha-7); + --border-weak-active: var(--smoke-dark-alpha-8); + --border-weak-selected: var(--cobalt-dark-alpha-3); + --border-weak-disabled: var(--smoke-dark-alpha-6); + --border-weak-focus: var(--smoke-dark-alpha-8); + --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(--smoke-light-8); + --border-interactive-focus: var(--cobalt-light-9); + --border-success-base: var(--apple-light-6); + --border-success-hover: var(--apple-light-7); + --border-success-selected: var(--apple-light-9); + --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-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(--smoke-dark-9); + --icon-hover: var(--smoke-dark-10); + --icon-active: var(--smoke-dark-11); + --icon-selected: var(--smoke-dark-12); + --icon-disabled: var(--smoke-dark-7); + --icon-focus: var(--smoke-dark-12); + --icon-weak-base: var(--smoke-dark-6); + --icon-invert-base: var(--smoke-dark-1); + --icon-weak-hover: var(--smoke-light-7); + --icon-weak-active: var(--smoke-light-8); + --icon-weak-selected: var(--smoke-light-9); + --icon-weak-disabled: var(--smoke-light-4); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-dark-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); + --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-7); + --icon-critical-hover: var(--ember-dark-8); + --icon-critical-active: var(--ember-dark-11); + --icon-info-base: var(--lilac-dark-7); + --icon-info-hover: var(--lilac-dark-8); + --icon-info-active: var(--lilac-dark-11); + --icon-on-brand-base: var(--smoke-light-alpha-11); + --icon-on-brand-hover: var(--smoke-light-alpha-12); + --icon-on-brand-selected: var(--smoke-light-alpha-12); + --icon-on-interactive-base: var(--smoke-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(--blue-dark-9); + --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-diff-delete-active: var(--ember-dark-11); + --syntax-comment: #808080; + --syntax-string: #9d7cd8; + --syntax-keyword: #fab283; + --syntax-function: #e06c75; + --syntax-number: #7fd88f; + --syntax-operator: #f5a742; + --syntax-variable: #e5c07b; + --syntax-type: #56b6c2; + --syntax-constant: #c2569a; + --syntax-punctuation: #eeeeee; + --syntax-success: var(--apple-dark-10); + --syntax-warning: var(--amber-dark-10); + --syntax-critical: var(--ember-dark-10); + --syntax-info: var(--lilac-dark-10); + --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: #ffffff; + } +} diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css new file mode 100644 index 000000000..f01a6b2ee --- /dev/null +++ b/packages/ui/src/styles/utilities.css @@ -0,0 +1,109 @@ +:root { + interpolate-size: allow-keywords; + + [data-popper-positioner] { + pointer-events: none; + } + + ::selection { + background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); + /* background-color: var(--color-primary); */ + /* color: var(--color-background); */ + } + + ::-webkit-scrollbar-track { + background: var(--theme-background-panel); + } + + ::-webkit-scrollbar-thumb { + background-color: var(--theme-border-subtle); + border-radius: 6px; + } + + * { + scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel); + } +} + +.no-scrollbar { + &::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge and Firefox */ + & { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} + +.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); +} + +.text-12-medium { + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 166.667% */ + letter-spacing: var(--letter-spacing-normal); +} + +.text-12-mono { + font-family: var(--font-family-mono); + 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); +} + +.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); +} + +.text-14-medium { + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 171.429% */ + letter-spacing: var(--letter-spacing-normal); +} + +.text-14-mono { + font-family: var(--font-family-mono); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); /* 171.429% */ + letter-spacing: var(--letter-spacing-normal); +} + +.text-16-medium { + font-family: var(--font-family-sans); + font-size: var(--font-size-large); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-x-large); /* 150% */ + letter-spacing: var(--letter-spacing-tight); +} + +.text-20-medium { + font-family: var(--font-family-sans); + font-size: var(--font-size-x-large); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-x-large); /* 120% */ + letter-spacing: var(--letter-spacing-tightest); +} |