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

prettier format

Browse Source
This commit is contained in:
Mikayla Maki
2023-06-28 10:35:28 -07:00
parent bf2c2fe242
commit 1d4a922185
9 changed files with 288 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/component/icon_button.ts
+33 -22
View File
@@ -1,25 +1,32 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element";
import { background, foreground } from "../styleTree/components";
import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"
import { background, foreground } from "../styleTree/components"
export type Margin = {
top: number;
bottom: number;
left: number;
right: number;
top: number
bottom: number
left: number
right: number
}
interface IconButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
}
type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
type ToggleableIconButtonOptions = IconButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
}
export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
if (!color)
color = "base";
export function icon_button(
theme: ColorScheme,
{ color, margin, layer }: IconButtonOptions
) {
if (!color) color = "base"
const m = {
top: margin?.top ?? 0,
@@ -51,25 +58,29 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
})
}
export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) {
if (!color)
color = "base";
export function toggleable_icon_button(
theme: ColorScheme,
{ color, active_color, margin }: ToggleableIconButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: icon_button(theme, { color, margin }),
active: icon_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
active: icon_button(theme, {
color: active_color ? active_color : color,
margin,
layer: theme.middle,
}),
},
})
}
styles/src/component/text_button.ts
+38 -22
View File
@@ -1,25 +1,37 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element";
import { TextProperties, background, foreground, text } from "../styleTree/components";
import { Margin } from "./icon_button";
import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"
import {
TextProperties,
background,
foreground,
text,
} from "../styleTree/components"
import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
text_properties?: TextProperties;
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties
}
type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
type ToggleableTextButtonOptions = TextButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
}
export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
if (!color)
color = "base";
export function text_button(
theme: ColorScheme,
{ color, layer, margin, text_properties }: TextButtonOptions
) {
if (!color) color = "base"
const text_options: TextProperties = {
size: "xs",
weight: "normal",
...text_properties
...text_properties,
}
const m = {
@@ -40,7 +52,7 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
},
margin: m,
button_height: 22,
...text(layer ?? theme.lowest, "sans", color, text_options)
...text(layer ?? theme.lowest, "sans", color, text_options),
},
state: {
default: {
@@ -50,25 +62,29 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
})
}
export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
if (!color)
color = "base";
export function toggleable_text_button(
theme: ColorScheme,
{ color, active_color, margin }: ToggleableTextButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: text_button(theme, { color, margin }),
active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
active: text_button(theme, {
color: active_color ? active_color : color,
margin,
layer: theme.middle,
}),
},
})
}