aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2026-01-18 15:24:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: desktop work

Browse Source
This commit is contained in:
Adam
2025-10-17 12:05:52 -05:00
parent fe8b3a2515
commit 887a819f24
46 changed files with 514 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/ui/src/assets/fonts/geist-italic.ttf Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist-italic.woff2 Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist-mono-italic.ttf Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist-mono-italic.woff2 Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist-mono.ttf Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist-mono.woff2 Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist.ttf Normal file
View File

Binary file not shown.

BIN
packages/ui/src/assets/fonts/geist.woff2 Normal file
View File

Binary file not shown.

106
packages/ui/src/components/button.css Normal file
View File

@@ -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;
}
}

12
packages/ui/src/components/fonts.tsx
View File

@@ -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%;

6
packages/ui/src/components/icon.css Normal file
View File

@@ -0,0 +1,6 @@
[data-component="icon"] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

1
packages/ui/src/components/index.ts
View File

@@ -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"

30
packages/ui/src/components/list.css Normal file
View File

@@ -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;
}
}
}

76
packages/ui/src/components/list.tsx Normal file
View File

@@ -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>
)
}

124
packages/ui/src/components/select.css Normal file
View File

@@ -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);
}
}

2
packages/ui/src/components/style.css
View File

@@ -1,2 +0,0 @@
/* re-exporting for convenience */
@import "@opencode-ai/css";

95
packages/ui/src/components/tabs.css Normal file
View File

@@ -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;
}
}
}

59
packages/ui/src/components/tooltip.css Normal file
View File

@@ -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);
}
}
}

2
packages/ui/src/components/tooltip.tsx
View File

@@ -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>

12
packages/ui/src/app.tsx → packages/ui/src/demo.tsx
View File

@@ -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

4
packages/ui/src/index.css
View File

@@ -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;

4
packages/ui/src/index.tsx
View File

@@ -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!,

374
packages/ui/src/styles/base.css Normal file
View File

@@ -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;
}

496
packages/ui/src/styles/colors.css Normal file
View File

@@ -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;
}

15
packages/ui/src/styles/index.css Normal file
View File

@@ -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);

220
packages/ui/src/styles/tailwind/colors.css Normal file
View File

@@ -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);
}

40
packages/ui/src/styles/tailwind/index.css Normal file
View File

@@ -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";

9
packages/ui/src/styles/tailwind/utilities.css Normal file
View File

@@ -0,0 +1,9 @@
@utility no-scrollbar {
&::-webkit-scrollbar {
display: none;
}
& {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}

498
packages/ui/src/styles/theme.css Normal file
View File

@@ -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;
}
}

109
packages/ui/src/styles/utilities.css Normal file
View File

@@ -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);
}