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

Added CTA buttons to welcome experience

Browse Source 
Co-authored-by: Nathan <nathan@zed.dev>
This commit is contained in:
Mikayla Maki
2023-03-06 14:26:32 -08:00
co-authored by Nathan
parent 9dee2ca2be
commit f89f33347d
5 changed files with 102 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/welcome.ts
+66 -45
View File
@@ -1,55 +1,76 @@
import { ColorScheme } from "../themes/common/colorScheme";
import { border } from "./components";
import { border, background, text } from "./components";
export default function welcome(colorScheme: ColorScheme) {
let layer = colorScheme.highest;
let layer = colorScheme.highest;
// TODO
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 8,
right: 8,
top: 4,
bottom: 4,
},
shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
left: -8,
},
};
// TODO
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 8,
right: 8,
top: 4,
bottom: 4,
},
shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
left: -8,
},
};
return {
checkbox: {
width: 9,
height: 9,
default: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
},
checked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
},
hovered: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
return {
button: {
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"),
},
},
checkbox: {
width: 9,
height: 9,
default: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
},
checked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
},
hovered: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
},
hoveredAndChecked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
}
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
},
hoveredAndChecked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
}
}
}
}