oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust some of the styles to the new Toggleable format

Browse Source
This commit is contained in:
Piotr Osiewicz
2023-06-20 16:05:23 -07:00
committed by Mikayla Maki
parent 198a446b03
commit 31c1177737
15 changed files with 1932 additions and 1808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/collab_ui/src/collab_titlebar_item.rs
+2 -2
View File
@@ -491,7 +491,7 @@ impl CollabTitlebarItem {
.with_child(
MouseEventHandler::<ShareUnshare, Self>::new(0, cx, |state, _| {
//TODO: Ensure this button has consistent width for both text variations
let style = titlebar.share_button.style_for(state);
let style = titlebar.share_button.inactive_state().style_for(state);
Label::new(label, style.text.clone())
.contained()
.with_style(style.container)
@@ -567,7 +567,7 @@ impl CollabTitlebarItem {
fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
let titlebar = &theme.workspace.titlebar;
MouseEventHandler::<SignIn, Self>::new(0, cx, |state, _| {
let style = titlebar.sign_in_prompt.style_for(state);
let style = titlebar.sign_in_prompt.inactive_state().style_for(state);
Label::new("Sign In", style.text.clone())
.contained()
.with_style(style.container)
crates/theme/src/theme.rs
+4 -4
View File
@@ -128,12 +128,12 @@ pub struct Titlebar {
pub leader_avatar: AvatarStyle,
pub follower_avatar: AvatarStyle,
pub inactive_avatar_grayscale: bool,
pub sign_in_prompt: Interactive<ContainedText>,
pub sign_in_prompt: Toggleable<Interactive<ContainedText>>,
pub outdated_warning: ContainedText,
pub share_button: Interactive<ContainedText>,
pub share_button: Toggleable<Interactive<ContainedText>>,
pub call_control: Interactive<IconButton>,
pub toggle_contacts_button: Toggleable<Interactive<IconButton>>,
pub user_menu_button: Interactive<IconButton>,
pub user_menu_button: Toggleable<Interactive<IconButton>>,
pub toggle_contacts_badge: ContainerStyle,
}
@@ -339,7 +339,7 @@ pub struct Toolbar {
pub container: ContainerStyle,
pub height: f32,
pub item_spacing: f32,
pub nav_button: Toggleable<Interactive<IconButton>>,
pub nav_button: Interactive<IconButton>,
}
#[derive(Clone, Deserialize, Default)]
crates/workspace/src/toolbar.rs
+3 -3
View File
@@ -219,7 +219,7 @@ impl View for Toolbar {
#[allow(clippy::too_many_arguments)]
fn nav_button<A: Action, F: 'static + Fn(&mut Toolbar, &mut ViewContext<Toolbar>)>(
svg_path: &'static str,
style: theme::Toggleable<theme::Interactive<theme::IconButton>>,
style: theme::Interactive<theme::IconButton>,
nav_button_height: f32,
tooltip_style: TooltipStyle,
enabled: bool,
@@ -231,9 +231,9 @@ fn nav_button<A: Action, F: 'static + Fn(&mut Toolbar, &mut ViewContext<Toolbar>
) -> AnyElement<Toolbar> {
MouseEventHandler::<A, _>::new(0, cx, |state, _| {
let style = if enabled {
style.inactive_state().style_for(state)
style.style_for(state)
} else {
style.inactive_state().disabled_style()
style.disabled_style()
};
Svg::new(svg_path)
.with_color(style.color)
styles/src/styleTree/components.ts
+218 -218
View File
@@ -2,297 +2,297 @@ import { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
function isStyleSet(key: any): key is StyleSets {
return [
"base",
"variant",
"on",
"accent",
"positive",
"warning",
"negative",
].includes(key)
return [
"base",
"variant",
"on",
"accent",
"positive",
"warning",
"negative",
].includes(key)
}
function isStyle(key: any): key is Styles {
return [
"default",
"active",
"disabled",
"hovered",
"pressed",
"inverted",
].includes(key)
return [
"default",
"active",
"disabled",
"hovered",
"pressed",
"inverted",
].includes(key)
}
function getStyle(
layer: Layer,
possibleStyleSetOrStyle?: any,
possibleStyle?: any
layer: Layer,
possibleStyleSetOrStyle?: any,
possibleStyle?: any
): Style {
let styleSet: StyleSets = "base"
let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle
} else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle
}
let styleSet: StyleSets = "base"
let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle
} else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle
}
if (isStyle(possibleStyle)) {
style = possibleStyle
}
if (isStyle(possibleStyle)) {
style = possibleStyle
}
return layer[styleSet][style]
return layer[styleSet][style]
}
export function background(layer: Layer, style?: Styles): string
export function background(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string
export function background(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).background
return getStyle(layer, styleSetOrStyles, style).background
}
export function borderColor(layer: Layer, style?: Styles): string
export function borderColor(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string
export function borderColor(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).border
return getStyle(layer, styleSetOrStyles, style).border
}
export function foreground(layer: Layer, style?: Styles): string
export function foreground(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string
export function foreground(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).foreground
return getStyle(layer, styleSetOrStyles, style).foreground
}
interface Text {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
interface Text extends Object {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
}
export interface TextProperties {
size?: keyof typeof fontSizes
weight?: FontWeight
underline?: boolean
color?: string
features?: FontFeatures
size?: keyof typeof fontSizes
weight?: FontWeight
underline?: boolean
color?: string
features?: FontFeatures
}
interface FontFeatures {
/** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
calt?: boolean
/** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
case?: boolean
/** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
cpsp?: boolean
/** Fractions: Replaces figures separated by a slash with diagonal fractions */
frac?: boolean
/** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
liga?: boolean
/** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
onum?: boolean
/** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
ordn?: boolean
/** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
pnum?: boolean
/** Stylistic set 01 */
ss01?: boolean
/** Stylistic set 02 */
ss02?: boolean
/** Stylistic set 03 */
ss03?: boolean
/** Stylistic set 04 */
ss04?: boolean
/** Stylistic set 05 */
ss05?: boolean
/** Stylistic set 06 */
ss06?: boolean
/** Stylistic set 07 */
ss07?: boolean
/** Stylistic set 08 */
ss08?: boolean
/** Stylistic set 09 */
ss09?: boolean
/** Stylistic set 10 */
ss10?: boolean
/** Stylistic set 11 */
ss11?: boolean
/** Stylistic set 12 */
ss12?: boolean
/** Stylistic set 13 */
ss13?: boolean
/** Stylistic set 14 */
ss14?: boolean
/** Stylistic set 15 */
ss15?: boolean
/** Stylistic set 16 */
ss16?: boolean
/** Stylistic set 17 */
ss17?: boolean
/** Stylistic set 18 */
ss18?: boolean
/** Stylistic set 19 */
ss19?: boolean
/** Stylistic set 20 */
ss20?: boolean
/** Subscript: Replaces default glyphs with subscript glyphs */
subs?: boolean
/** Superscript: Replaces default glyphs with superscript glyphs */
sups?: boolean
/** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
swsh?: boolean
/** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
titl?: boolean
/** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
tnum?: boolean
/** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
zero?: boolean
/** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
calt?: boolean
/** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
case?: boolean
/** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
cpsp?: boolean
/** Fractions: Replaces figures separated by a slash with diagonal fractions */
frac?: boolean
/** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
liga?: boolean
/** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
onum?: boolean
/** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
ordn?: boolean
/** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
pnum?: boolean
/** Stylistic set 01 */
ss01?: boolean
/** Stylistic set 02 */
ss02?: boolean
/** Stylistic set 03 */
ss03?: boolean
/** Stylistic set 04 */
ss04?: boolean
/** Stylistic set 05 */
ss05?: boolean
/** Stylistic set 06 */
ss06?: boolean
/** Stylistic set 07 */
ss07?: boolean
/** Stylistic set 08 */
ss08?: boolean
/** Stylistic set 09 */
ss09?: boolean
/** Stylistic set 10 */
ss10?: boolean
/** Stylistic set 11 */
ss11?: boolean
/** Stylistic set 12 */
ss12?: boolean
/** Stylistic set 13 */
ss13?: boolean
/** Stylistic set 14 */
ss14?: boolean
/** Stylistic set 15 */
ss15?: boolean
/** Stylistic set 16 */
ss16?: boolean
/** Stylistic set 17 */
ss17?: boolean
/** Stylistic set 18 */
ss18?: boolean
/** Stylistic set 19 */
ss19?: boolean
/** Stylistic set 20 */
ss20?: boolean
/** Subscript: Replaces default glyphs with subscript glyphs */
subs?: boolean
/** Superscript: Replaces default glyphs with superscript glyphs */
sups?: boolean
/** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
swsh?: boolean
/** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
titl?: boolean
/** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
tnum?: boolean
/** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
zero?: boolean
}
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
style: Styles,
properties?: TextProperties
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
style: Styles,
properties?: TextProperties
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
properties?: TextProperties
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
properties?: TextProperties
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
properties?: TextProperties
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
properties?: TextProperties
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
properties?: TextProperties
layer: Layer,
fontFamily: keyof typeof fontFamilies,
properties?: TextProperties
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties,
properties?: TextProperties
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties,
properties?: TextProperties
) {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
}
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
}
let size = fontSizes[properties?.size || "sm"]
let color = properties?.color || style.foreground
let size = fontSizes[properties?.size || "sm"]
let color = properties?.color || style.foreground
return {
family: fontFamilies[fontFamily],
...properties,
color,
size,
}
return {
family: fontFamilies[fontFamily],
...properties,
color,
size,
}
}
export interface Border {
color: string
width: number
top?: boolean
bottom?: boolean
left?: boolean
right?: boolean
overlay?: boolean
color: string
width: number
top?: boolean
bottom?: boolean
left?: boolean
right?: boolean
overlay?: boolean
}
export interface BorderProperties {
width?: number
top?: boolean
bottom?: boolean
left?: boolean
right?: boolean
overlay?: boolean
width?: number
top?: boolean
bottom?: boolean
left?: boolean
right?: boolean
overlay?: boolean
}
export function border(
layer: Layer,
styleSet: StyleSets,
style: Styles,
properties?: BorderProperties
layer: Layer,
styleSet: StyleSets,
style: Styles,
properties?: BorderProperties
): Border
export function border(
layer: Layer,
styleSet: StyleSets,
properties?: BorderProperties
layer: Layer,
styleSet: StyleSets,
properties?: BorderProperties
): Border
export function border(
layer: Layer,
style: Styles,
properties?: BorderProperties
layer: Layer,
style: Styles,
properties?: BorderProperties
): Border
export function border(layer: Layer, properties?: BorderProperties): Border
export function border(
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties,
properties?: BorderProperties
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties,
properties?: BorderProperties
): Border {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
}
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties
}
return {
color: style.border,
width: 1,
...properties,
}
return {
color: style.border,
width: 1,
...properties,
}
}
export function svg(
color: string,
asset: String,
width: Number,
height: Number
color: string,
asset: String,
width: Number,
height: Number
) {
return {
color,
asset,
dimensions: {
width,
height,
},
}
return {
color,
asset,
dimensions: {
width,
height,
},
}
}
styles/src/styleTree/contactList.ts
+192 -168
View File
@@ -1,182 +1,206 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, foreground, text } from "./components"
import { toggleable } from "./toggle"
import { interactive } from "./interactive"
export default function contactsPanel(colorScheme: ColorScheme) {
const nameMargin = 8
const sidePadding = 12
const nameMargin = 8
const sidePadding = 12
let layer = colorScheme.middle
let layer = colorScheme.middle
const contactButton = {
background: background(layer, "on"),
color: foreground(layer, "on"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
}
const projectRow = {
guestAvatarSpacing: 4,
height: 24,
guestAvatar: {
cornerRadius: 8,
width: 14,
const contactButton = {
background: background(layer, "on"),
color: foreground(layer, "on"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
}
const projectRow = {
guestAvatarSpacing: 4,
height: 24,
guestAvatar: {
cornerRadius: 8,
width: 14,
},
name: {
...text(layer, "mono", { size: "sm" }),
margin: {
left: nameMargin,
right: 6,
},
},
guests: {
margin: {
left: nameMargin,
right: nameMargin,
},
},
padding: {
left: sidePadding,
right: sidePadding,
},
}
return {
background: background(layer),
padding: { top: 12 },
userQueryEditor: {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: 6,
},
},
userQueryEditorHeight: 33,
addContactButton: {
margin: { left: 6, right: 12 },
color: foreground(layer, "on"),
buttonWidth: 28,
iconWidth: 16,
},
rowHeight: 28,
sectionIconSize: 8,
headerRow: toggleable(interactive({
...text(layer, "mono", { size: "sm" }),
margin: { top: 14 },
padding: {
left: sidePadding,
right: sidePadding,
},
background: background(layer, "default"),// posiewic: breaking change
}, {}),
{
default: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
name: {
...text(layer, "mono", { size: "sm" }),
margin: {
left: nameMargin,
right: 6,
},
},
guests: {
margin: {
left: nameMargin,
right: nameMargin,
},
},
padding: {
}),
leaveCall: interactive({
background: background(layer),
border: border(layer),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(layer, "sans", "variant", { size: "xs" }),
},
{
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
}
}
),
contactRow: {
inactive: {
default: {
padding: {
left: sidePadding,
right: sidePadding,
}
},
}
},
active: {
default: {
background: background(layer, "active"),
padding: {
left: sidePadding,
right: sidePadding,
}
}
},
},
return {
background: background(layer),
padding: { top: 12 },
userQueryEditor: {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: 6,
},
contactAvatar: {
cornerRadius: 10,
width: 18,
},
contactStatusFree: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "positive"),
},
contactStatusBusy: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "negative"),
},
contactUsername: {
...text(layer, "mono", { size: "sm" }),
margin: {
left: nameMargin,
},
},
contactButtonSpacing: nameMargin,
contactButton: interactive(
contactButton,
{
hover: {
background: background(layer, "hovered"),
},
userQueryEditorHeight: 33,
addContactButton: {
margin: { left: 6, right: 12 },
color: foreground(layer, "on"),
buttonWidth: 28,
iconWidth: 16,
}),
disabledButton: {
...contactButton,
background: background(layer, "on"),
color: foreground(layer, "on"),
},
callingIndicator: {
...text(layer, "mono", "variant", { size: "xs" }),
},
treeBranch: toggleable(interactive({
color: borderColor(layer),
width: 1,
},
{
hover: {
color: borderColor(layer),
},
rowHeight: 28,
sectionIconSize: 8,
headerRow: {
...text(layer, "mono", { size: "sm" }),
margin: { top: 14 },
padding: {
left: sidePadding,
right: sidePadding,
},
active: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
}),
{
default: {
color: borderColor(layer),
},
leaveCall: {
background: background(layer),
border: border(layer),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(layer, "sans", "variant", { size: "xs" }),
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
},
},
contactRow: {
padding: {
left: sidePadding,
right: sidePadding,
},
active: {
background: background(layer, "active"),
},
},
contactAvatar: {
cornerRadius: 10,
width: 18,
},
contactStatusFree: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "positive"),
},
contactStatusBusy: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "negative"),
},
contactUsername: {
...text(layer, "mono", { size: "sm" }),
margin: {
left: nameMargin,
},
},
contactButtonSpacing: nameMargin,
contactButton: {
...contactButton,
hover: {
background: background(layer, "hovered"),
},
},
disabledButton: {
...contactButton,
background: background(layer, "on"),
color: foreground(layer, "on"),
},
callingIndicator: {
...text(layer, "mono", "variant", { size: "xs" }),
},
treeBranch: {
color: borderColor(layer),
width: 1,
hover: {
color: borderColor(layer),
},
active: {
color: borderColor(layer),
},
},
projectRow: {
...projectRow,
background: background(layer),
icon: {
margin: { left: nameMargin },
color: foreground(layer, "variant"),
width: 12,
},
name: {
...projectRow.name,
...text(layer, "mono", { size: "sm" }),
},
hover: {
background: background(layer, "hovered"),
},
active: {
background: background(layer, "active"),
},
},
}
}
),
projectRow: {
...projectRow,
background: background(layer),
icon: {
margin: { left: nameMargin },
color: foreground(layer, "variant"),
width: 12,
},
name: {
...projectRow.name,
...text(layer, "mono", { size: "sm" }),
},
hover: {
background: background(layer, "hovered"),
},
active: {
background: background(layer, "active"),
},
},
}
}
styles/src/styleTree/contactNotification.ts
+44 -37
View File
@@ -1,45 +1,52 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, foreground, text } from "./components"
import { interactive } from "./interactive"
const avatarSize = 12
const headerPadding = 8
export default function contactNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.lowest
return {
headerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: 6,
let layer = colorScheme.lowest
return {
headerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: 6,
},
headerMessage: {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding },
},
headerHeight: 18,
bodyMessage: {
...text(layer, "sans", { size: "xs" }),
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
},
button:
interactive({
...text(layer, "sans", "on", { size: "xs" }),
background: background(layer, "on"),
padding: 4,
cornerRadius: 6,
margin: { left: 6 }
},
{
hover: {
background: background(layer, "on", "hovered"),
}
}),
dismissButton: {
default: {
color: foreground(layer, "variant"),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: foreground(layer, "hovered"),
},
headerMessage: {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding },
},
headerHeight: 18,
bodyMessage: {
...text(layer, "sans", { size: "xs" }),
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
},
button: {
...text(layer, "sans", "on", { size: "xs" }),
background: background(layer, "on"),
padding: 4,
cornerRadius: 6,
margin: { left: 6 },
hover: {
background: background(layer, "on", "hovered"),
},
},
dismissButton: {
color: foreground(layer, "variant"),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: foreground(layer, "hovered"),
},
},
}
}
},
}
}
styles/src/styleTree/contextMenu.ts
+48 -43
View File
@@ -1,49 +1,54 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function contextMenu(colorScheme: ColorScheme) {
let layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
item: {
iconSpacing: 8,
iconWidth: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
hover: {
background: background(layer, "hovered"),
label: text(layer, "sans", "hovered", { size: "sm" }),
keystroke: {
...text(layer, "sans", "hovered", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
},
active: {
background: background(layer, "active"),
},
activeHover: {
background: background(layer, "active"),
},
let layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
item: toggleable(interactive({
iconSpacing: 8,
iconWidth: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
}
}, {
hover: {
background: background(layer, "hovered"),
label: text(layer, "sans", "hovered", { size: "sm" }),
keystroke: {
...text(layer, "sans", "hovered", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
separator: {
background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
}
}
}), {
default: {
background: background(layer, "active"),
},
hover: {
background: background(layer, "active"),
},
}),
separator: {
background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
}
}
styles/src/styleTree/copilot.ts
+263 -252
View File
@@ -1,267 +1,278 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, svg, text } from "./components"
import { interactive } from "./interactive"
export default function copilot(colorScheme: ColorScheme) {
let layer = colorScheme.middle
let layer = colorScheme.middle
let content_width = 264
let content_width = 264
let ctaButton = {
// Copied from welcome screen. FIXME: Move this into a ZDS component
background: background(layer),
border: border(layer, "default"),
cornerRadius: 4,
margin: {
let ctaButton =
// Copied from welcome screen. FIXME: Move this into a ZDS component
interactive({
background: background(layer),
border: border(layer, "default"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
left: 8,
right: 8,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
},
{
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
});
return {
outLinkIcon:
interactive({
icon: svg(
foreground(layer, "variant"),
"icons/link_out_12.svg",
12,
12
),
container: {
cornerRadius: 6,
padding: { left: 6 },
},
},
{
hover: {
icon: {
color:
foreground(layer, "hovered")
}
},
}),
modal: {
titleText: {
default: {
...text(layer, "sans", { size: "xs", weight: "bold" })
}
},
titlebar: {
background: background(colorScheme.lowest),
border: border(layer, "active"),
padding: {
top: 4,
bottom: 4,
left: 8,
right: 8,
},
},
container: {
background: background(colorScheme.lowest),
padding: {
top: 0,
left: 0,
right: 0,
bottom: 8,
},
},
closeIcon: interactive(
{
icon: svg(
foreground(layer, "variant"),
"icons/x_mark_8.svg",
8,
8
),
container: {
cornerRadius: 2,
padding: {
top: 4,
bottom: 4,
left: 4,
right: 4,
},
margin: {
right: 0,
},
}
},
{
hover: {
icon: svg(
foreground(layer, "on"),
"icons/x_mark_8.svg",
8,
8
),
},
clicked: {
icon: svg(
foreground(layer, "base"),
"icons/x_mark_8.svg",
8,
8
),
},
}),
dimensions: {
width: 280,
height: 280,
},
},
auth: {
content_width,
ctaButton,
header: {
icon: svg(
foreground(layer, "default"),
"icons/zed_plus_copilot_32.svg",
92,
32
),
container: {
margin: {
top: 35,
bottom: 5,
left: 0,
right: 0,
},
},
},
prompting: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 6,
bottom: 12,
left: 0,
right: 0,
},
},
hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 6,
bottom: 2,
},
},
deviceCode: {
text: text(layer, "mono", { size: "sm" }),
cta: {
...ctaButton,
background: background(colorScheme.lowest),
border: border(colorScheme.lowest, "inverted"),
padding: {
top: 0,
bottom: 0,
left: 16,
right: 16,
},
margin: {
left: 16,
right: 16,
},
},
left: content_width / 2,
leftContainer: {
padding: {
top: 3,
bottom: 3,
left: 0,
right: 6,
},
},
right: (content_width * 1) / 3,
rightContainer: interactive({
border: border(colorScheme.lowest, "inverted", {
bottom: false,
right: false,
top: false,
left: true,
}),
padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
}
}, {
hover: {
border: border(layer, "active", {
bottom: false,
right: false,
top: false,
left: true,
}),
},
})
},
},
notAuthorized: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 16,
bottom: 16,
left: 0,
right: 0,
},
},
warning: {
...text(layer, "sans", {
size: "xs",
color: foreground(layer, "warning"),
}),
border: border(layer, "warning"),
background: background(layer, "warning"),
cornerRadius: 2,
padding: {
top: 4,
left: 4,
bottom: 4,
right: 4,
},
margin: {
bottom: 16,
left: 8,
right: 8,
},
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" }),
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
}
},
return {
outLinkIcon: {
icon: svg(
foreground(layer, "variant"),
"icons/link_out_12.svg",
12,
12
),
container: {
cornerRadius: 6,
padding: { left: 6 },
},
hover: {
icon: svg(
foreground(layer, "hovered"),
"icons/link_out_12.svg",
12,
12
),
},
},
modal: {
titleText: {
...text(layer, "sans", { size: "xs", weight: "bold" }),
},
titlebar: {
background: background(colorScheme.lowest),
border: border(layer, "active"),
padding: {
top: 4,
bottom: 4,
left: 8,
right: 8,
},
},
container: {
background: background(colorScheme.lowest),
padding: {
top: 0,
left: 0,
right: 0,
bottom: 8,
},
},
closeIcon: {
icon: svg(
foreground(layer, "variant"),
"icons/x_mark_8.svg",
8,
8
),
container: {
cornerRadius: 2,
padding: {
top: 4,
bottom: 4,
left: 4,
right: 4,
},
margin: {
right: 0,
},
},
hover: {
icon: svg(
foreground(layer, "on"),
"icons/x_mark_8.svg",
8,
8
),
},
clicked: {
icon: svg(
foreground(layer, "base"),
"icons/x_mark_8.svg",
8,
8
),
},
},
dimensions: {
width: 280,
height: 280,
},
authorized: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 16,
bottom: 16,
},
},
auth: {
content_width,
ctaButton,
header: {
icon: svg(
foreground(layer, "default"),
"icons/zed_plus_copilot_32.svg",
92,
32
),
container: {
margin: {
top: 35,
bottom: 5,
left: 0,
right: 0,
},
},
},
prompting: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 6,
bottom: 12,
left: 0,
right: 0,
},
},
hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 6,
bottom: 2,
},
},
deviceCode: {
text: text(layer, "mono", { size: "sm" }),
cta: {
...ctaButton,
background: background(colorScheme.lowest),
border: border(colorScheme.lowest, "inverted"),
padding: {
top: 0,
bottom: 0,
left: 16,
right: 16,
},
margin: {
left: 16,
right: 16,
},
},
left: content_width / 2,
leftContainer: {
padding: {
top: 3,
bottom: 3,
left: 0,
right: 6,
},
},
right: (content_width * 1) / 3,
rightContainer: {
border: border(colorScheme.lowest, "inverted", {
bottom: false,
right: false,
top: false,
left: true,
}),
padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
},
hover: {
border: border(layer, "active", {
bottom: false,
right: false,
top: false,
left: true,
}),
},
},
},
},
notAuthorized: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 16,
bottom: 16,
left: 0,
right: 0,
},
},
warning: {
...text(layer, "sans", {
size: "xs",
color: foreground(layer, "warning"),
}),
border: border(layer, "warning"),
background: background(layer, "warning"),
cornerRadius: 2,
padding: {
top: 4,
left: 4,
bottom: 4,
right: 4,
},
margin: {
bottom: 16,
left: 8,
right: 8,
},
},
},
authorized: {
subheading: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: 16,
bottom: 16,
},
},
hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 24,
bottom: 4,
},
},
},
hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 24,
bottom: 4,
},
},
}
},
},
}
}
styles/src/styleTree/editor.ts
+273 -264
View File
@@ -4,275 +4,284 @@ import { background, border, borderColor, foreground, text } from "./components"
import hoverPopover from "./hoverPopover"
import { buildSyntax } from "../theme/syntax"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function editor(colorScheme: ColorScheme) {
const { isLight } = colorScheme
const { isLight } = colorScheme
let layer = colorScheme.highest
let layer = colorScheme.highest
const autocompleteItem = {
cornerRadius: 6,
padding: {
bottom: 2,
left: 6,
right: 6,
top: 2,
},
}
function diagnostic(layer: Layer, styleSet: StyleSets) {
return {
textScaleFactor: 0.857,
header: {
border: border(layer, {
top: true,
}),
},
message: {
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
highlightText: text(layer, "sans", styleSet, "default", {
size: "sm",
weight: "bold",
}),
},
}
}
const syntax = buildSyntax(colorScheme)
const autocompleteItem = {
cornerRadius: 6,
padding: {
bottom: 2,
left: 6,
right: 6,
top: 2,
},
}
function diagnostic(layer: Layer, styleSet: StyleSets) {
return {
textColor: syntax.primary.color,
background: background(layer),
activeLineBackground: withOpacity(background(layer, "on"), 0.75),
highlightedLineBackground: background(layer, "on"),
// Inline autocomplete suggestions, Co-pilot suggestions, etc.
suggestion: syntax.predictive,
codeActions: {
indicator: {
color: foreground(layer, "variant"),
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
active: {
color: foreground(layer, "on"),
},
},
verticalScale: 0.55,
},
folds: {
iconMarginScale: 2.5,
foldedIcon: "icons/chevron_right_8.svg",
foldableIcon: "icons/chevron_down_8.svg",
indicator: {
color: foreground(layer, "variant"),
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
active: {
color: foreground(layer, "on"),
},
},
ellipses: {
textColor: colorScheme.ramps.neutral(0.71).hex(),
cornerRadiusFactor: 0.15,
background: {
// Copied from hover_popover highlight
color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
hover: {
color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
},
clicked: {
color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(),
},
},
},
foldBackground: foreground(layer, "variant"),
},
diff: {
deleted: isLight
? colorScheme.ramps.red(0.5).hex()
: colorScheme.ramps.red(0.4).hex(),
modified: isLight
? colorScheme.ramps.yellow(0.5).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.4).hex()
: colorScheme.ramps.green(0.5).hex(),
removedWidthEm: 0.275,
widthEm: 0.15,
cornerRadius: 0.05,
},
/** Highlights matching occurrences of what is under the cursor
* as well as matched brackets
*/
documentHighlightReadBackground: withOpacity(
foreground(layer, "accent"),
0.1
),
documentHighlightWriteBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
errorColor: background(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: withOpacity(foreground(layer), 0.35),
lineNumberActive: foreground(layer),
renameFade: 0.6,
unnecessaryCodeFade: 0.5,
selection: colorScheme.players[0],
whitespace: colorScheme.ramps.neutral(0.5).hex(),
guestSelections: [
colorScheme.players[1],
colorScheme.players[2],
colorScheme.players[3],
colorScheme.players[4],
colorScheme.players[5],
colorScheme.players[6],
colorScheme.players[7],
],
autocomplete: {
background: background(colorScheme.middle),
cornerRadius: 8,
padding: 4,
margin: {
left: -14,
},
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
matchHighlight: foreground(colorScheme.middle, "accent"),
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"hovered"
),
background: background(colorScheme.middle, "hovered"),
},
selectedItem: {
...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"active"
),
background: background(colorScheme.middle, "active"),
},
},
diagnosticHeader: {
background: background(colorScheme.middle),
iconWidthFactor: 1.5,
textScaleFactor: 0.857,
border: border(colorScheme.middle, {
bottom: true,
top: true,
}),
code: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 10,
},
},
source: {
text: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
},
message: {
highlightText: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
text: text(colorScheme.middle, "sans", { size: "sm" }),
},
},
diagnosticPathHeader: {
background: background(colorScheme.middle),
textScaleFactor: 0.857,
filename: text(colorScheme.middle, "mono", { size: "sm" }),
path: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 12,
},
},
},
errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
hoverPopover: hoverPopover(colorScheme),
linkDefinition: {
color: syntax.linkUri.color,
underline: syntax.linkUri.underline,
},
jumpIcon: {
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
padding: {
top: 6,
bottom: 6,
left: 6,
right: 6,
},
hover: {
background: background(layer, "on", "hovered"),
},
},
scrollbar: {
width: 12,
minHeightFactor: 1.0,
track: {
border: border(layer, "variant", { left: true }),
},
thumb: {
background: withOpacity(background(layer, "inverted"), 0.3),
border: {
width: 1,
color: borderColor(layer, "variant"),
top: false,
right: true,
left: true,
bottom: false,
},
},
git: {
deleted: isLight
? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
modified: isLight
? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
inserted: isLight
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
},
},
compositionMark: {
underline: {
thickness: 1.0,
color: borderColor(layer),
},
},
syntax,
textScaleFactor: 0.857,
header: {
border: border(layer, {
top: true,
}),
},
message: {
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
highlightText: text(layer, "sans", styleSet, "default", {
size: "sm",
weight: "bold",
}),
},
}
}
const syntax = buildSyntax(colorScheme)
return {
textColor: syntax.primary.color,
background: background(layer),
activeLineBackground: withOpacity(background(layer, "on"), 0.75),
highlightedLineBackground: background(layer, "on"),
// Inline autocomplete suggestions, Co-pilot suggestions, etc.
suggestion: syntax.predictive,
codeActions: {
indicator: toggleable(interactive({
color: foreground(layer, "variant"),
}, {
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
}),
{
default: {
color: foreground(layer, "on"),
}
}),
verticalScale: 0.55,
},
folds: {
iconMarginScale: 2.5,
foldedIcon: "icons/chevron_right_8.svg",
foldableIcon: "icons/chevron_down_8.svg",
indicator: toggleable(interactive({
color: foreground(layer, "variant"),
}, {
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
}),
{
default: {
color: foreground(layer, "on"),
}
}),
ellipses: {
textColor: colorScheme.ramps.neutral(0.71).hex(),
cornerRadiusFactor: 0.15,
background: {
// Copied from hover_popover highlight
default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() },
hover: {
color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
},
clicked: {
color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(),
},
},
},
foldBackground: foreground(layer, "variant"),
},
diff: {
deleted: isLight
? colorScheme.ramps.red(0.5).hex()
: colorScheme.ramps.red(0.4).hex(),
modified: isLight
? colorScheme.ramps.yellow(0.5).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.4).hex()
: colorScheme.ramps.green(0.5).hex(),
removedWidthEm: 0.275,
widthEm: 0.15,
cornerRadius: 0.05,
},
/** Highlights matching occurrences of what is under the cursor
* as well as matched brackets
*/
documentHighlightReadBackground: withOpacity(
foreground(layer, "accent"),
0.1
),
documentHighlightWriteBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
errorColor: background(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: withOpacity(foreground(layer), 0.35),
lineNumberActive: foreground(layer),
renameFade: 0.6,
unnecessaryCodeFade: 0.5,
selection: colorScheme.players[0],
whitespace: colorScheme.ramps.neutral(0.5).hex(),
guestSelections: [
colorScheme.players[1],
colorScheme.players[2],
colorScheme.players[3],
colorScheme.players[4],
colorScheme.players[5],
colorScheme.players[6],
colorScheme.players[7],
],
autocomplete: {
background: background(colorScheme.middle),
cornerRadius: 8,
padding: 4,
margin: {
left: -14,
},
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
matchHighlight: foreground(colorScheme.middle, "accent"),
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"hovered"
),
background: background(colorScheme.middle, "hovered"),
},
selectedItem: {
...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"active"
),
background: background(colorScheme.middle, "active"),
},
},
diagnosticHeader: {
background: background(colorScheme.middle),
iconWidthFactor: 1.5,
textScaleFactor: 0.857,
border: border(colorScheme.middle, {
bottom: true,
top: true,
}),
code: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 10,
},
},
source: {
text: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
},
message: {
highlightText: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
text: text(colorScheme.middle, "sans", { size: "sm" }),
},
},
diagnosticPathHeader: {
background: background(colorScheme.middle),
textScaleFactor: 0.857,
filename: text(colorScheme.middle, "mono", { size: "sm" }),
path: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 12,
},
},
},
errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
hoverPopover: hoverPopover(colorScheme),
linkDefinition: {
color: syntax.linkUri.color,
underline: syntax.linkUri.underline,
},
jumpIcon: interactive({
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
padding: {
top: 6,
bottom: 6,
left: 6,
right: 6,
}
}, {
hover: {
background: background(layer, "on", "hovered"),
}
}),
scrollbar: {
width: 12,
minHeightFactor: 1.0,
track: {
border: border(layer, "variant", { left: true }),
},
thumb: {
background: withOpacity(background(layer, "inverted"), 0.3),
border: {
width: 1,
color: borderColor(layer, "variant"),
top: false,
right: true,
left: true,
bottom: false,
},
},
git: {
deleted: isLight
? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
modified: isLight
? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
inserted: isLight
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
},
},
compositionMark: {
underline: {
thickness: 1.0,
color: borderColor(layer),
},
},
syntax,
}
}
styles/src/styleTree/picker.ts
+79 -75
View File
@@ -1,82 +1,86 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, text } from "./components"
import { toggleable } from "./toggle"
import { interactive } from "./interactive"
export default function picker(colorScheme: ColorScheme): any {
let layer = colorScheme.lowest
const container = {
background: background(layer),
border: border(layer),
shadow: colorScheme.modalShadow,
cornerRadius: 12,
padding: {
bottom: 4,
},
}
const inputEditor = {
placeholderText: text(layer, "sans", "on", "disabled"),
selection: colorScheme.players[0],
text: text(layer, "mono", "on"),
border: border(layer, { bottom: true }),
padding: {
bottom: 8,
left: 16,
right: 16,
top: 8,
},
margin: {
bottom: 4,
},
}
const emptyInputEditor: any = { ...inputEditor }
delete emptyInputEditor.border
delete emptyInputEditor.margin
let layer = colorScheme.lowest
const container = {
background: background(layer),
border: border(layer),
shadow: colorScheme.modalShadow,
cornerRadius: 12,
padding: {
bottom: 4,
},
}
const inputEditor = {
placeholderText: text(layer, "sans", "on", "disabled"),
selection: colorScheme.players[0],
text: text(layer, "mono", "on"),
border: border(layer, { bottom: true }),
padding: {
bottom: 8,
left: 16,
right: 16,
top: 8,
},
margin: {
bottom: 4,
},
}
const emptyInputEditor: any = { ...inputEditor }
delete emptyInputEditor.border
delete emptyInputEditor.margin
return {
...container,
emptyContainer: {
...container,
padding: {},
},
item: {
padding: {
bottom: 4,
left: 12,
right: 12,
top: 4,
},
margin: {
top: 1,
left: 4,
right: 4,
},
cornerRadius: 8,
text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
active: {
background: withOpacity(
background(layer, "base", "active"),
0.5
),
text: text(layer, "sans", "base", "active"),
highlightText: text(layer, "sans", "accent", {
weight: "bold",
}),
},
hover: {
background: withOpacity(background(layer, "hovered"), 0.5),
},
},
inputEditor,
emptyInputEditor,
noMatches: {
text: text(layer, "sans", "variant"),
padding: {
bottom: 8,
left: 16,
right: 16,
top: 8,
},
},
}
return {
...container,
emptyContainer: {
...container,
padding: {},
},
item: toggleable(interactive({
padding: {
bottom: 4,
left: 12,
right: 12,
top: 4,
},
margin: {
top: 1,
left: 4,
right: 4,
},
cornerRadius: 8,
text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "accent", { weight: "bold" }),
}, {
hover: {
background: withOpacity(background(layer, "hovered"), 0.5),
}
}),
{
default: {
background: withOpacity(
background(layer, "base", "active"),
0.5
),
//text: text(layer, "sans", "base", "active"),
}
}),
inputEditor,
emptyInputEditor,
noMatches: {
text: text(layer, "sans", "variant"),
padding: {
bottom: 8,
left: 16,
right: 16,
top: 8,
},
},
}
}
styles/src/styleTree/projectPanel.ts
+110 -98
View File
@@ -1,107 +1,119 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function projectPanel(colorScheme: ColorScheme) {
const { isLight } = colorScheme
const { isLight } = colorScheme
let layer = colorScheme.middle
let layer = colorScheme.middle
let baseEntry = {
height: 22,
let baseEntry = {
height: 22,
iconColor: foreground(layer, "variant"),
iconSize: 7,
iconSpacing: 5,
}
let status = {
git: {
modified: isLight
? colorScheme.ramps.yellow(0.6).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.45).hex()
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex(),
},
}
let entry = toggleable(interactive({
...baseEntry,
text: text(layer, "mono", "variant", { size: "sm" }),
status,
},
{
hover: {
background: background(layer, "variant", "hovered"),
}
}),
{
default: {
/*background: colorScheme.isLight
? withOpacity(background(layer, "active"), 0.5)
: background(layer, "active") ,*/ // todo posiewic
text: text(layer, "mono", "active", { size: "sm" }),
},
hover: {
//background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
});
return {
openProjectButton: interactive({
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
margin: {
top: 16,
left: 16,
right: 16,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
}, {
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
}),
background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12,
entry,
draggedEntry: {
...baseEntry,
text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
status,
},
ignoredEntry: {
...entry,
iconColor: foreground(layer, "disabled"),
text: text(layer, "mono", "disabled"),
active: {
...entry.active,
iconColor: foreground(layer, "variant"),
iconSize: 7,
iconSpacing: 5,
}
},
},
cutEntry: {
...entry,
text: text(layer, "mono", "disabled"),
active: {
...entry.active,
default: {
...entry.active.default,
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
let status = {
git: {
modified: isLight
? colorScheme.ramps.yellow(0.6).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.45).hex()
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex(),
},
}
let entry = {
...baseEntry,
text: text(layer, "mono", "variant", { size: "sm" }),
hover: {
background: background(layer, "variant", "hovered"),
},
active: {
background: colorScheme.isLight
? withOpacity(background(layer, "active"), 0.5)
: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
activeHover: {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
status,
}
return {
openProjectButton: {
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
margin: {
top: 16,
left: 16,
right: 16,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" }),
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12,
entry,
draggedEntry: {
...baseEntry,
text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
status,
},
ignoredEntry: {
...entry,
iconColor: foreground(layer, "disabled"),
text: text(layer, "mono", "disabled"),
active: {
...entry.active,
iconColor: foreground(layer, "variant"),
},
},
cutEntry: {
...entry,
text: text(layer, "mono", "disabled"),
active: {
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
},
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0],
},
}
},
},
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0],
},
}
}
styles/src/styleTree/statusBar.ts
+125 -116
View File
@@ -1,126 +1,135 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function statusBar(colorScheme: ColorScheme) {
let layer = colorScheme.lowest
let layer = colorScheme.lowest
const statusContainer = {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 },
}
const statusContainer = {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 },
}
const diagnosticStatusContainer = {
cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 },
}
const diagnosticStatusContainer = {
cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 },
}
return {
height: 30,
itemSpacing: 8,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
return {
height: 30,
itemSpacing: 8,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"),
activeLanguage: interactive({
padding: { left: 6, right: 6 },
...text(layer, "sans", "variant")
},
{
hover: {
...text(layer, "sans", "on"),
}
},
),
autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: interactive({
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer)
},
{
hover: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer, "hovered"),
}
}),
diagnosticMessage: interactive({
...text(layer, "sans")
},
{ hover: text(layer, "sans", "hovered") },
),
diagnosticSummary:
interactive({
height: 20,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"),
activeLanguage: {
padding: { left: 6, right: 6 },
...text(layer, "sans", "variant"),
hover: {
...text(layer, "sans", "on"),
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning"),
border: border(layer, "warning"),
},
autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer),
hover: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer, "hovered"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative"),
border: border(layer, "negative"),
}
}, {
hover: {
iconColorOk: foreground(layer, "on"),
containerOk: {
background: background(layer, "on", "hovered"),
},
containerWarning: {
background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"),
},
containerError: {
background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"),
}
}
}
),
panelButtons: {
groupLeft: {},
groupBottom: {},
groupRight: {},
button: toggleable(interactive({
...statusContainer,
iconSize: 16,
iconColor: foreground(layer, "variant"),
label: {
margin: { left: 6 },
...text(layer, "sans", { size: "sm" }),
},
diagnosticMessage: {
...text(layer, "sans"),
hover: text(layer, "sans", "hovered"),
},
diagnosticSummary: {
height: 20,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning"),
border: border(layer, "warning"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative"),
border: border(layer, "negative"),
},
hover: {
iconColorOk: foreground(layer, "on"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
background: background(layer, "on", "hovered"),
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"),
},
},
},
panelButtons: {
groupLeft: {},
groupBottom: {},
groupRight: {},
button: {
...statusContainer,
iconSize: 16,
iconColor: foreground(layer, "variant"),
label: {
margin: { left: 6 },
...text(layer, "sans", { size: "sm" }),
},
hover: {
iconColor: foreground(layer, "hovered"),
background: background(layer, "variant"),
},
active: {
iconColor: foreground(layer, "active"),
background: background(layer, "active"),
},
},
badge: {
cornerRadius: 3,
padding: 2,
margin: { bottom: -1, right: -1 },
border: border(layer),
background: background(layer, "accent"),
},
},
}
}, {
hover: {
iconColor: foreground(layer, "hovered"),
background: background(layer, "variant"),
}
}),
{
default: {
iconColor: foreground(layer, "active"),
background: background(layer, "active"),
}
}),
badge: {
cornerRadius: 3,
padding: 2,
margin: { bottom: -1, right: -1 },
border: border(layer),
background: background(layer, "accent"),
},
},
}
}
styles/src/styleTree/tabBar.ts
+99 -92
View File
@@ -1,109 +1,116 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { text, border, background, foreground } from "./components"
import { toggleable } from "./toggle"
import { interactive } from "./interactive"
export default function tabBar(colorScheme: ColorScheme) {
const height = 32
const height = 32
let activeLayer = colorScheme.highest
let layer = colorScheme.middle
let activeLayer = colorScheme.highest
let layer = colorScheme.middle
const tab = {
height,
text: text(layer, "sans", "variant", { size: "sm" }),
background: background(layer),
border: border(layer, {
right: true,
bottom: true,
overlay: true,
}),
padding: {
left: 8,
right: 12,
},
spacing: 8,
const tab = {
height,
text: text(layer, "sans", "variant", { size: "sm" }),
background: background(layer),
border: border(layer, {
right: true,
bottom: true,
overlay: true,
}),
padding: {
left: 8,
right: 12,
},
spacing: 8,
// Tab type icons (e.g. Project Search)
typeIconWidth: 14,
// Tab type icons (e.g. Project Search)
typeIconWidth: 14,
// Close icons
closeIconWidth: 8,
iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"),
// Close icons
closeIconWidth: 8,
iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"),
// Indicators
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "accent"),
// Indicators
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "accent"),
// When two tabs of the same name are open, a label appears next to them
description: {
margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }),
},
}
// When two tabs of the same name are open, a label appears next to them
description: {
margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }),
},
}
const activePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(activeLayer, "sans", "active", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
const activePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(activeLayer, "sans", "active", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }),
}
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }),
}
const inactivePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(layer, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
const inactivePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(layer, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.9),
border: undefined as any,
shadow: colorScheme.popoverShadow,
}
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.9),
border: undefined as any,
shadow: colorScheme.popoverShadow,
}
return {
height,
background: background(layer),
activePane: {
activeTab: activePaneActiveTab,
inactiveTab: tab,
},
inactivePane: {
activeTab: inactivePaneActiveTab,
inactiveTab: inactivePaneInactiveTab,
},
draggedTab,
paneButton: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
hover: {
color: foreground(layer, "hovered"),
},
active: {
color: foreground(layer, "accent"),
},
},
paneButtonContainer: {
background: tab.background,
border: {
...tab.border,
right: false,
},
},
}
return {
height,
background: background(layer),
activePane: {
activeTab: activePaneActiveTab,
inactiveTab: tab,
},
inactivePane: {
activeTab: inactivePaneActiveTab,
inactiveTab: inactivePaneInactiveTab,
},
draggedTab,
paneButton: toggleable(interactive({
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
},
{
hover: {
color: foreground(layer, "hovered"),
}
}),
{
default: {
color: foreground(layer, "accent"),
}
},
),
paneButtonContainer: {
background: tab.background,
border: {
...tab.border,
right: false,
},
},
}
}
styles/src/styleTree/welcome.ts
+121 -119
View File
@@ -1,129 +1,131 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import {
border,
background,
foreground,
text,
TextProperties,
svg,
border,
background,
foreground,
text,
TextProperties,
svg,
} from "./components"
import { interactive } from "./interactive"
export default function welcome(colorScheme: ColorScheme) {
let layer = colorScheme.highest
let layer = colorScheme.highest
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 3,
right: 3,
top: 3,
bottom: 3,
},
// shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
right: 8,
top: 5,
bottom: 5,
},
}
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 3,
right: 3,
top: 3,
bottom: 3,
},
// shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
right: 8,
top: 5,
bottom: 5,
},
}
let interactive_text_size: TextProperties = { size: "sm" }
let interactive_text_size: TextProperties = { size: "sm" }
return {
pageWidth: 320,
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
logoSubheading: {
...text(layer, "sans", "variant", { size: "md" }),
margin: {
top: 10,
bottom: 7,
},
},
buttonGroup: {
margin: {
top: 8,
bottom: 16,
},
},
headingGroup: {
margin: {
top: 8,
bottom: 12,
},
},
checkboxGroup: {
border: border(layer, "variant"),
background: withOpacity(background(layer, "hovered"), 0.25),
cornerRadius: 4,
padding: {
left: 12,
top: 2,
bottom: 2,
},
},
button: {
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", interactive_text_size),
hover: {
...text(layer, "sans", "default", interactive_text_size),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
usageNote: {
...text(layer, "sans", "variant", { size: "2xs" }),
padding: {
top: -4,
},
},
checkboxContainer: {
margin: {
top: 4,
},
padding: {
bottom: 8,
},
},
checkbox: {
label: {
...text(layer, "sans", interactive_text_size),
// Also supports margin, container, border, etc.
},
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
default: {
...checkboxBase,
background: background(layer, "default"),
border: border(layer, "active"),
},
checked: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
hovered: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
hoveredAndChecked: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
}
return {
pageWidth: 320,
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
logoSubheading: {
...text(layer, "sans", "variant", { size: "md" }),
margin: {
top: 10,
bottom: 7,
},
},
buttonGroup: {
margin: {
top: 8,
bottom: 16,
},
},
headingGroup: {
margin: {
top: 8,
bottom: 12,
},
},
checkboxGroup: {
border: border(layer, "variant"),
background: withOpacity(background(layer, "hovered"), 0.25),
cornerRadius: 4,
padding: {
left: 12,
top: 2,
bottom: 2,
},
},
button: interactive({
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", interactive_text_size)
}, {
hover: {
...text(layer, "sans", "default", interactive_text_size),
background: background(layer, "hovered"),
}
}),
usageNote: {
...text(layer, "sans", "variant", { size: "2xs" }),
padding: {
top: -4,
},
},
checkboxContainer: {
margin: {
top: 4,
},
padding: {
bottom: 8,
},
},
checkbox: {
label: {
...text(layer, "sans", interactive_text_size),
// Also supports margin, container, border, etc.
},
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
default: {
...checkboxBase,
background: background(layer, "default"),
border: border(layer, "active"),
},
checked: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
hovered: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
hoveredAndChecked: {
...checkboxBase,
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
}
}
styles/src/styleTree/workspace.ts
+351 -317
View File
@@ -1,338 +1,372 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { toggleable } from "./toggle"
import {
background,
border,
borderColor,
foreground,
svg,
text,
background,
border,
borderColor,
foreground,
svg,
text,
} from "./components"
import statusBar from "./statusBar"
import tabBar from "./tabBar"
import { interactive } from "./interactive"
import merge from 'ts-deepmerge';
export default function workspace(colorScheme: ColorScheme) {
const layer = colorScheme.lowest
const isLight = colorScheme.isLight
const itemSpacing = 8
const titlebarButton = {
cornerRadius: 6,
padding: {
top: 1,
bottom: 1,
const layer = colorScheme.lowest
const isLight = colorScheme.isLight
const itemSpacing = 8
const titlebarButton = toggleable(interactive({
cornerRadius: 6,
padding: {
top: 1,
bottom: 1,
left: 8,
right: 8,
},
...text(layer, "sans", "variant", { size: "xs" }),
background: background(layer, "variant"),
border: border(layer),
}, {
hover: {
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
background: background(layer, "variant", "hovered"),
border: border(layer, "variant", "hovered"),
},
clicked: {
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
background: background(layer, "variant", "pressed"),
border: border(layer, "variant", "pressed"),
}
}),
{
default: {
...text(layer, "sans", "variant", "active", { size: "xs" }),
background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"),
}
},
);
const avatarWidth = 18
const avatarOuterWidth = avatarWidth + 4
const followerAvatarWidth = 14
const followerAvatarOuterWidth = followerAvatarWidth + 4
return {
background: background(colorScheme.lowest),
blankPane: {
logoContainer: {
width: 256,
height: 256,
},
logo: svg(
withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
"icons/logo_96.svg",
256,
256
),
logoShadow: svg(
withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
),
"icons/logo_96.svg",
256,
256
),
keyboardHints: {
margin: {
top: 96,
},
cornerRadius: 4,
},
keyboardHint:
interactive({
...text(layer, "sans", "variant", { size: "sm" }),
padding: {
top: 3,
left: 8,
right: 8,
bottom: 3,
},
cornerRadius: 8
}, {
hover: {
...text(layer, "sans", "active", { size: "sm" }),
}
}),
keyboardHintWidth: 320,
},
joiningProjectAvatar: {
cornerRadius: 40,
width: 80,
},
joiningProjectMessage: {
padding: 12,
...text(layer, "sans", { size: "lg" }),
},
externalLocationMessage: {
background: background(colorScheme.middle, "accent"),
border: border(colorScheme.middle, "accent"),
cornerRadius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tabBar: tabBar(colorScheme),
modal: {
margin: {
bottom: 52,
top: 52,
},
cursor: "Arrow",
},
zoomedBackground: {
cursor: "Arrow",
background: isLight
? withOpacity(background(colorScheme.lowest), 0.8)
: withOpacity(background(colorScheme.highest), 0.6),
},
zoomedPaneForeground: {
margin: 16,
shadow: colorScheme.modalShadow,
border: border(colorScheme.lowest, { overlay: true }),
},
zoomedPanelForeground: {
margin: 16,
border: border(colorScheme.lowest, { overlay: true }),
},
dock: {
left: {
border: border(layer, { right: true }),
},
bottom: {
border: border(layer, { top: true }),
},
right: {
border: border(layer, { left: true }),
},
},
paneDivider: {
color: borderColor(layer),
width: 1,
},
statusBar: statusBar(colorScheme),
titlebar: {
itemSpacing,
facePileSpacing: 2,
height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
background: background(layer),
border: border(layer, { bottom: true }),
padding: {
left: 80,
right: itemSpacing,
},
// Project
title: text(layer, "sans", "variant"),
highlight_color: text(layer, "sans", "active").color,
// Collaborators
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
followerAvatarOverlap: 8,
leaderSelection: {
margin: {
top: 4,
bottom: 4,
},
...text(layer, "sans", "variant", { size: "xs" }),
background: background(layer, "variant"),
border: border(layer),
padding: {
left: 2,
right: 2,
top: 2,
bottom: 2,
},
cornerRadius: 6,
},
avatarRibbon: {
height: 3,
width: 12,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
},
// Sign in buttom
// FlatButton, Variant
signInPrompt:
merge(titlebarButton,
{
inactive: {
default: {
margin: {
left: itemSpacing,
},
}
}
}),
// Offline Indicator
offlineIcon: {
color: foreground(layer, "variant"),
width: 16,
margin: {
left: itemSpacing,
},
padding: {
right: 4,
},
},
// Notice that the collaboration server is out of date
outdatedWarning: {
...text(layer, "sans", "warning", { size: "xs" }),
background: withOpacity(background(layer, "warning"), 0.3),
border: border(layer, "warning"),
margin: {
left: itemSpacing,
},
padding: {
left: 8,
right: 8,
},
cornerRadius: 6,
},
callControl: interactive({
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 20,
}, {
hover: {
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
background: background(layer, "variant", "hovered"),
border: border(layer, "variant", "hovered"),
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
},
clicked: {
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
}),
toggleContactsButton: toggleable(interactive({
margin: { left: itemSpacing },
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 14,
buttonWidth: 20,
},
{
clicked: {
background: background(layer, "variant", "pressed"),
border: border(layer, "variant", "pressed"),
},
active: {
...text(layer, "sans", "variant", "active", { size: "xs" }),
color: foreground(layer, "variant", "pressed"),
},
hover: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
}
}),
{
default: {
background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"),
color: foreground(layer, "variant", "active")
}
},
}
const avatarWidth = 18
const avatarOuterWidth = avatarWidth + 4
const followerAvatarWidth = 14
const followerAvatarOuterWidth = followerAvatarWidth + 4
),
userMenuButton: merge(titlebarButton, {
inactive: {
default: {
buttonWidth: 20,
iconWidth: 12
}
}, active: { // posiewic: these properties are not currently set on main
default: {
iconWidth: 12,
button_width: 20,
}
}
}),
return {
background: background(colorScheme.lowest),
blankPane: {
logoContainer: {
width: 256,
height: 256,
},
logo: svg(
withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
"icons/logo_96.svg",
256,
256
),
logoShadow: svg(
withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
),
"icons/logo_96.svg",
256,
256
),
keyboardHints: {
margin: {
top: 96,
},
cornerRadius: 4,
},
keyboardHint: {
...text(layer, "sans", "variant", { size: "sm" }),
padding: {
top: 3,
left: 8,
right: 8,
bottom: 3,
},
cornerRadius: 8,
hover: {
...text(layer, "sans", "active", { size: "sm" }),
},
},
keyboardHintWidth: 320,
},
joiningProjectAvatar: {
cornerRadius: 40,
width: 80,
},
joiningProjectMessage: {
padding: 12,
...text(layer, "sans", { size: "lg" }),
},
externalLocationMessage: {
background: background(colorScheme.middle, "accent"),
border: border(colorScheme.middle, "accent"),
cornerRadius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tabBar: tabBar(colorScheme),
modal: {
margin: {
bottom: 52,
top: 52,
},
cursor: "Arrow",
},
zoomedBackground: {
cursor: "Arrow",
background: isLight
? withOpacity(background(colorScheme.lowest), 0.8)
: withOpacity(background(colorScheme.highest), 0.6),
},
zoomedPaneForeground: {
margin: 16,
shadow: colorScheme.modalShadow,
border: border(colorScheme.lowest, { overlay: true }),
},
zoomedPanelForeground: {
margin: 16,
border: border(colorScheme.lowest, { overlay: true }),
},
dock: {
left: {
border: border(layer, { right: true }),
},
bottom: {
border: border(layer, { top: true }),
},
right: {
border: border(layer, { left: true }),
},
},
paneDivider: {
color: borderColor(layer),
width: 1,
},
statusBar: statusBar(colorScheme),
titlebar: {
itemSpacing,
facePileSpacing: 2,
height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
background: background(layer),
border: border(layer, { bottom: true }),
padding: {
left: 80,
right: itemSpacing,
},
toggleContactsBadge: {
cornerRadius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(layer),
background: foreground(layer, "accent"),
},
shareButton: {
...titlebarButton,
},
},
// Project
title: text(layer, "sans", "variant"),
highlight_color: text(layer, "sans", "active").color,
// Collaborators
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
followerAvatarOverlap: 8,
leaderSelection: {
margin: {
top: 4,
bottom: 4,
},
padding: {
left: 2,
right: 2,
top: 2,
bottom: 2,
},
cornerRadius: 6,
},
avatarRibbon: {
height: 3,
width: 12,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
},
// Sign in buttom
// FlatButton, Variant
signInPrompt: {
margin: {
left: itemSpacing,
},
...titlebarButton,
},
// Offline Indicator
offlineIcon: {
color: foreground(layer, "variant"),
width: 16,
margin: {
left: itemSpacing,
},
padding: {
right: 4,
},
},
// Notice that the collaboration server is out of date
outdatedWarning: {
...text(layer, "sans", "warning", { size: "xs" }),
background: withOpacity(background(layer, "warning"), 0.3),
border: border(layer, "warning"),
margin: {
left: itemSpacing,
},
padding: {
left: 8,
right: 8,
},
cornerRadius: 6,
},
callControl: {
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 20,
hover: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
},
},
toggleContactsButton: {
margin: { left: itemSpacing },
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 14,
buttonWidth: 20,
active: {
background: background(layer, "variant", "active"),
color: foreground(layer, "variant", "active"),
},
clicked: {
background: background(layer, "variant", "pressed"),
color: foreground(layer, "variant", "pressed"),
},
hover: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
},
},
userMenuButton: {
buttonWidth: 20,
iconWidth: 12,
...titlebarButton,
},
toggleContactsBadge: {
cornerRadius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(layer),
background: foreground(layer, "accent"),
},
shareButton: {
...titlebarButton,
},
toolbar: {
height: 34,
background: background(colorScheme.highest),
border: border(colorScheme.highest, { bottom: true }),
itemSpacing: 8,
navButton: interactive(
{
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
}, {
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(
colorScheme.highest,
"on",
"hovered"
),
},
toolbar: {
height: 34,
background: background(colorScheme.highest),
border: border(colorScheme.highest, { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(
colorScheme.highest,
"on",
"hovered"
),
},
disabled: {
color: foreground(colorScheme.highest, "on", "disabled"),
},
},
padding: { left: 8, right: 8, top: 4, bottom: 4 },
disabled: {
color: foreground(colorScheme.highest, "on", "disabled"),
},
breadcrumbHeight: 24,
breadcrumbs: {
...text(colorScheme.highest, "sans", "variant"),
cornerRadius: 6,
padding: {
left: 6,
right: 6,
},
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
},
},
disconnectedOverlay: {
...text(layer, "sans"),
background: withOpacity(background(layer), 0.8),
},
notification: {
margin: { top: 10 },
background: background(colorScheme.middle),
cornerRadius: 6,
padding: 12,
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
},
notifications: {
width: 400,
margin: { right: 10, bottom: 10 },
},
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
}
}),
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbHeight: 24,
breadcrumbs: interactive({
...text(colorScheme.highest, "sans", "variant"),
cornerRadius: 6,
padding: {
left: 6,
right: 6,
}
}, {
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
},
}),
disconnectedOverlay: {
...text(layer, "sans"),
background: withOpacity(background(layer), 0.8),
},
notification: {
margin: { top: 10 },
background: background(colorScheme.middle),
cornerRadius: 6,
padding: 12,
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
},
notifications: {
width: 400,
margin: { right: 10, bottom: 10 },
},
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
}
}