mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-27 04:44:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Create a baseline for ramps to start tweaking from

Browse source
This commit is contained in:
Nate Butler 2022-09-26 15:07:24 -04:00
parent c2ffc7086c
commit c9786fe464
1 changed files with 464 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

876
styles/src/themes/common/ramps.ts
View file

@ -191,394 +191,536 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
function bottomLayer(ramps: RampSet, isLight: boolean): Layer { function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
let baseSet = buildStyleSet(ramps.neutral, { let baseSet = buildStyleSet(ramps.neutral, {
background: { background: {
default: 0.15, default: 0.16,
hovered: 0.25, hovered: 0.31,
pressed: 0.55, pressed: 0.41,
active: 0.8, active: 1,
disabled: 0.25, disabled: 0.16,
}, },
border: { border: {
default: 0.2, default: 0.2,
hovered: 1.0, hovered: 0.2,
pressed: 0.9, pressed: 0.2,
active: 0.8, active: 0.5,
disabled: 1, disabled: 0.2,
}, },
foreground: { foreground: {
default: 1, default: 1,
hovered: 0.9, hovered: 1,
pressed: 0.9, pressed: 1,
active: 0.1, active: 0,
disabled: 0.9, disabled: 0.4,
}, },
}); });
let onSet: StyleSet = { let variantSet = buildStyleSet(ramps.neutral, {
default: { background: {
background: ramps.neutral(0.15).hex(), default: 0.16,
border: ramps.neutral(0.2).hex(), hovered: 0.31,
foreground: ramps.neutral(1).hex(), pressed: 0.41,
active: 1,
disabled: 0.16,
}, },
hovered: { border: {
background: ramps.neutral(0.4).hex(), default: 0.2,
border: ramps.neutral(1.0).hex(), hovered: 0.2,
foreground: ramps.neutral(0.9).hex(), pressed: 0.2,
active: 0.5,
disabled: 0.2,
}, },
pressed: { foreground: {
background: ramps.neutral(0.55).hex(), default: 0.7,
border: ramps.neutral(0.9).hex(), hovered: 0.7,
foreground: ramps.neutral(0.9).hex(), pressed: 0.7,
active: 0,
disabled: 0.4,
}, },
active: { });
background: ramps.neutral(0.8).hex(),
border: ramps.neutral(0.8).hex(), let onSet = buildStyleSet(ramps.neutral, {
foreground: ramps.neutral(0.1).hex(), background: {
default: 0.08,
hovered: 0.23,
pressed: 0.33,
active: 1,
disabled: 0.08,
}, },
disabled: { border: {
background: ramps.neutral(0.25).hex(), default: 0.2,
border: ramps.neutral(1).hex(), hovered: 0.2,
foreground: ramps.neutral(0.9).hex(), pressed: 0.2,
active: 0.5,
disabled: 0.2,
}, },
} foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let defaultStyle: Style = { let infoSet = buildStyleSet(ramps.blue, {
background: ramps.neutral(0.2).hex(), background: {
border: ramps.neutral(0.25).hex(), default: 0,
foreground: ramps.neutral(1).hex(), hovered: 0.15,
}; pressed: 0.25,
active: 1,
disabled: 0,
},
border: {
default: 0.2,
hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let hoveredStyle: Style = { let positiveSet = buildStyleSet(ramps.green, {
background: ramps.neutral(0.1).hex(), background: {
border: ramps.neutral(1.0).hex(), default: 0,
foreground: ramps.neutral(0.9).hex(), hovered: 0.15,
}; pressed: 0.25,
active: 1,
disabled: 0,
},
border: {
default: 0.2,
hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let pressedStyle: Style = { let warningSet = buildStyleSet(ramps.yellow, {
background: ramps.neutral(0.55).hex(), background: {
border: ramps.neutral(0.9).hex(), default: 0,
foreground: ramps.neutral(0.9).hex(), hovered: 0.15,
}; pressed: 0.25,
active: 1,
disabled: 0,
},
border: {
default: 0.2,
hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let activeStyle: Style = { let negativeSet = buildStyleSet(ramps.red, {
background: ramps.neutral(0.8).hex(), background: {
border: ramps.neutral(0.8).hex(), default: 0,
foreground: ramps.neutral(0.1).hex(), hovered: 0.15,
}; pressed: 0.25,
active: 1,
let disabledStyle: Style = { disabled: 0,
background: ramps.neutral(0.25).hex(), },
border: ramps.neutral(1).hex(), border: {
foreground: ramps.neutral(0.9).hex(), default: 0.2,
}; hovered: 0.2,
pressed: 0.2,
let styleSet: StyleSet = { active: 0.5,
default: defaultStyle, disabled: 0.2,
hovered: hoveredStyle, },
pressed: pressedStyle, foreground: {
active: activeStyle, default: 1,
disabled: disabledStyle, hovered: 1,
}; pressed: 1,
active: 0,
disabled: 0.4,
},
});
return { return {
base: baseSet, base: baseSet,
variant: styleSet, variant: variantSet,
on: onSet, on: onSet,
info: styleSet, info: infoSet,
positive: styleSet, positive: positiveSet,
warning: styleSet, warning: warningSet,
negative: styleSet negative: negativeSet
}; };
} }
function middleLayer(ramps: RampSet, isLight: boolean): Layer { function middleLayer(ramps: RampSet, isLight: boolean): Layer {
let defaultStyle: Style = { let baseSet = buildStyleSet(ramps.neutral, {
background: ramps.neutral(0.2).hex(), background: {
border: ramps.neutral(0.4).hex(), default: 0.08,
foreground: ramps.neutral(1).hex(), hovered: 0.23,
}; pressed: 0.33,
active: 1,
let hoveredStyle: Style = { disabled: 0.08,
background: ramps.neutral(0.4).hex(), },
border: ramps.neutral(1.0).hex(), border: {
foreground: ramps.neutral(0.9).hex(), default: 0.2,
}; hovered: 0.2,
pressed: 0.2,
let pressedStyle: Style = { active: 0.5,
background: ramps.neutral(0.55).hex(), disabled: 0.2,
border: ramps.neutral(0.9).hex(), },
foreground: ramps.neutral(0.9).hex(), foreground: {
}; default: 1,
hovered: 1,
let activeStyle: Style = { pressed: 1,
background: ramps.neutral(0.8).hex(), active: 0,
border: ramps.neutral(0.8).hex(), disabled: 0.4,
foreground: ramps.neutral(0.1).hex(), },
}; });
let disabledStyle: Style = { let variantSet = buildStyleSet(ramps.neutral, {
background: ramps.neutral(0.25).hex(), background: {
border: ramps.neutral(1).hex(), default: 0.08,
foreground: ramps.neutral(0.9).hex(), hovered: 0.23,
}; pressed: 0.33,
active: 1,
let baseSet: StyleSet = { disabled: 0.08,
default: { },
background: ramps.neutral(0.1).hex(), border: {
border: ramps.neutral(0.2).hex(), default: 0.2,
foreground: ramps.neutral(1).hex(), hovered: 0.2,
}, pressed: 0.2,
hovered: { active: 0.5,
background: ramps.neutral(0.4).hex(), disabled: 0.2,
border: ramps.neutral(1.0).hex(), },
foreground: ramps.neutral(0.9).hex(), foreground: {
}, default: 0.7,
pressed: { hovered: 0.7,
background: ramps.neutral(0.55).hex(), pressed: 0.7,
border: ramps.neutral(0.9).hex(), active: 0,
foreground: ramps.neutral(0.9).hex(), disabled: 0.4,
}, },
active: { });
background: ramps.neutral(0.8).hex(),
border: ramps.neutral(0.8).hex(), let onSet = buildStyleSet(ramps.neutral, {
foreground: ramps.neutral(0.1).hex(), background: {
}, default: 0,
disabled: { hovered: 0.15,
background: ramps.neutral(0.25).hex(), pressed: 0.25,
border: ramps.neutral(1).hex(), active: 1,
foreground: ramps.neutral(0.9).hex(), disabled: 0,
}, },
} border: {
default: 0.2,
let styleSet: StyleSet = { hovered: 0.2,
default: defaultStyle, pressed: 0.2,
hovered: hoveredStyle, active: 0.5,
pressed: pressedStyle, disabled: 0.2,
active: activeStyle, },
disabled: disabledStyle, foreground: {
}; default: 1,
hovered: 1,
return { pressed: 1,
base: baseSet, active: 0,
variant: styleSet, disabled: 0.4,
on: styleSet, },
info: styleSet, });
positive: styleSet,
warning: styleSet, let infoSet = buildStyleSet(ramps.blue, {
negative: styleSet background: {
}; default: 0,
} hovered: 0.15,
pressed: 0.25,
function topLayer(ramps: RampSet, isLight: boolean): Layer { active: 1,
disabled: 0,
let baseSet: StyleSet = { },
default: { border: {
background: ramps.neutral(0).hex(), default: 0.2,
border: ramps.neutral(0.2).hex(), hovered: 0.2,
foreground: ramps.neutral(1).hex(), pressed: 0.2,
}, active: 0.5,
hovered: { disabled: 0.2,
background: ramps.neutral(0.4).hex(), },
border: ramps.neutral(1.0).hex(), foreground: {
foreground: ramps.neutral(0.9).hex(), default: 1,
}, hovered: 1,
pressed: { pressed: 1,
background: ramps.neutral(0.55).hex(), active: 0,
border: ramps.neutral(0.9).hex(), disabled: 0.4,
foreground: ramps.neutral(0.9).hex(), },
}, });
active: {
background: ramps.neutral(0.8).hex(), let positiveSet = buildStyleSet(ramps.green, {
border: ramps.neutral(0.8).hex(), background: {
foreground: ramps.neutral(0.1).hex(), default: 0,
}, hovered: 0.15,
disabled: { pressed: 0.25,
background: ramps.neutral(0.25).hex(), active: 1,
border: ramps.neutral(1).hex(), disabled: 0,
foreground: ramps.neutral(0.9).hex(), },
}, border: {
} default: 0.2,
hovered: 0.2,
let onSet: StyleSet = { pressed: 0.2,
default: { active: 0.5,
background: ramps.neutral(0.3).hex(), disabled: 0.2,
border: ramps.neutral(0.5).hex(), },
foreground: ramps.neutral(1).hex(), foreground: {
}, default: 1,
hovered: { hovered: 1,
background: ramps.neutral(0.4).hex(), pressed: 1,
border: ramps.neutral(1.0).hex(), active: 0,
foreground: ramps.neutral(0.9).hex(), disabled: 0.4,
}, },
pressed: { });
background: ramps.neutral(0.55).hex(),
border: ramps.neutral(0.9).hex(), let warningSet = buildStyleSet(ramps.yellow, {
foreground: ramps.neutral(0.9).hex(), background: {
}, default: 0,
active: { hovered: 0.15,
background: ramps.neutral(0.8).hex(), pressed: 0.25,
border: ramps.neutral(0.8).hex(), active: 1,
foreground: ramps.neutral(0.1).hex(), disabled: 0,
}, },
disabled: { border: {
background: ramps.neutral(0.25).hex(), default: 0.2,
border: ramps.neutral(1).hex(), hovered: 0.2,
foreground: ramps.neutral(0.9).hex(), pressed: 0.2,
}, active: 0.5,
} disabled: 0.2,
},
let infoSet: StyleSet = { foreground: {
default: { default: 1,
background: ramps.blue(0.3).hex(), hovered: 1,
border: ramps.blue(0.5).hex(), pressed: 1,
foreground: ramps.blue(1).hex(), active: 0,
}, disabled: 0.4,
hovered: { },
background: ramps.blue(0.4).hex(), });
border: ramps.blue(1.0).hex(),
foreground: ramps.blue(0.9).hex(), let negativeSet = buildStyleSet(ramps.red, {
}, background: {
pressed: { default: 0,
background: ramps.blue(0.55).hex(), hovered: 0.15,
border: ramps.blue(0.9).hex(), pressed: 0.25,
foreground: ramps.blue(0.9).hex(), active: 1,
}, disabled: 0,
active: { },
background: ramps.blue(0.8).hex(), border: {
border: ramps.blue(0.8).hex(), default: 0.2,
foreground: ramps.blue(0.1).hex(), hovered: 0.2,
}, pressed: 0.2,
disabled: { active: 0.5,
background: ramps.blue(0.25).hex(), disabled: 0.2,
border: ramps.blue(1).hex(), },
foreground: ramps.blue(0.9).hex(), foreground: {
}, default: 1,
} hovered: 1,
pressed: 1,
let positiveSet: StyleSet = { active: 0,
default: { disabled: 0.4,
background: ramps.green(0.3).hex(), },
border: ramps.green(0.5).hex(), });
foreground: ramps.green(1).hex(),
}, return {
hovered: { base: baseSet,
background: ramps.green(0.4).hex(), variant: variantSet,
border: ramps.green(1.0).hex(), on: onSet,
foreground: ramps.green(0.9).hex(), info: infoSet,
}, positive: positiveSet,
pressed: { warning: warningSet,
background: ramps.green(0.55).hex(), negative: negativeSet
border: ramps.green(0.9).hex(), };
foreground: ramps.green(0.9).hex(), }
},
active: { function topLayer(ramps: RampSet, isLight: boolean): Layer {
background: ramps.green(0.8).hex(),
border: ramps.green(0.8).hex(), let baseSet = buildStyleSet(ramps.neutral, {
foreground: ramps.green(0.1).hex(), background: {
}, default: 0,
disabled: { hovered: 0.15,
background: ramps.green(0.25).hex(), pressed: 0.25,
border: ramps.green(1).hex(), active: 1,
foreground: ramps.green(0.9).hex(), disabled: 0,
}, },
} border: {
default: 0.2,
let warningSet: StyleSet = { hovered: 0.2,
default: { pressed: 0.2,
background: ramps.yellow(0.3).hex(), active: 0.5,
border: ramps.yellow(0.5).hex(), disabled: 0.2,
foreground: ramps.yellow(1).hex(), },
}, foreground: {
hovered: { default: 1,
background: ramps.yellow(0.4).hex(), hovered: 1,
border: ramps.yellow(1.0).hex(), pressed: 1,
foreground: ramps.yellow(0.9).hex(), active: 0,
}, disabled: 0.4,
pressed: { },
background: ramps.yellow(0.55).hex(), });
border: ramps.yellow(0.9).hex(),
foreground: ramps.yellow(0.9).hex(), let variantSet = buildStyleSet(ramps.neutral, {
}, background: {
active: { default: 0,
background: ramps.yellow(0.8).hex(), hovered: 0.15,
border: ramps.yellow(0.8).hex(), pressed: 0.25,
foreground: ramps.yellow(0.1).hex(), active: 1,
}, disabled: 0,
disabled: { },
background: ramps.yellow(0.25).hex(), border: {
border: ramps.yellow(1).hex(), default: 0.2,
foreground: ramps.yellow(0.9).hex(), hovered: 0.2,
}, pressed: 0.2,
} active: 0.5,
disabled: 0.2,
let negativeSet: StyleSet = { },
default: { foreground: {
background: ramps.red(0.3).hex(), default: 0.7,
border: ramps.red(0.5).hex(), hovered: 0.7,
foreground: ramps.red(1).hex(), pressed: 0.7,
}, active: 0,
hovered: { disabled: 0.4,
background: ramps.red(0.4).hex(), },
border: ramps.red(1.0).hex(), });
foreground: ramps.red(0.9).hex(),
}, let onSet = buildStyleSet(ramps.neutral, {
pressed: { background: {
background: ramps.red(0.55).hex(), default: 0.15,
border: ramps.red(0.9).hex(), hovered: 0.3,
foreground: ramps.red(0.9).hex(), pressed: 0.4,
}, active: 1,
active: { disabled: 0,
background: ramps.red(0.8).hex(), },
border: ramps.red(0.8).hex(), border: {
foreground: ramps.red(0.1).hex(), default: 0.2,
}, hovered: 0.2,
disabled: { pressed: 0.2,
background: ramps.red(0.25).hex(), active: 0.5,
border: ramps.red(1).hex(), disabled: 0.2,
foreground: ramps.red(0.9).hex(), },
}, foreground: {
} default: 1,
hovered: 1,
let defaultStyle: Style = { pressed: 1,
background: ramps.neutral(0).hex(), active: 0,
border: ramps.neutral(0.7).hex(), disabled: 0.4,
foreground: ramps.neutral(1).hex(), },
}; });
let hoveredStyle: Style = { let infoSet = buildStyleSet(ramps.blue, {
background: ramps.neutral(0.4).hex(), background: {
border: ramps.neutral(1.0).hex(), default: 0,
foreground: ramps.neutral(0.9).hex(), hovered: 0.15,
}; pressed: 0.25,
active: 1,
let pressedStyle: Style = { disabled: 0,
background: ramps.neutral(0.55).hex(), },
border: ramps.neutral(0.9).hex(), border: {
foreground: ramps.neutral(0.9).hex(), default: 0.2,
}; hovered: 0.2,
pressed: 0.2,
let activeStyle: Style = { active: 0.5,
background: ramps.neutral(0.8).hex(), disabled: 0.2,
border: ramps.neutral(0.8).hex(), },
foreground: ramps.neutral(0.1).hex(), foreground: {
}; default: 1,
hovered: 1,
let disabledStyle: Style = { pressed: 1,
background: ramps.neutral(0.25).hex(), active: 0,
border: ramps.neutral(1).hex(), disabled: 0.4,
foreground: ramps.neutral(0.9).hex(), },
}; });
let styleSet: StyleSet = { let positiveSet = buildStyleSet(ramps.green, {
default: defaultStyle, background: {
hovered: hoveredStyle, default: 0,
pressed: pressedStyle, hovered: 0.15,
active: activeStyle, pressed: 0.25,
disabled: disabledStyle, active: 1,
}; disabled: 0,
},
return { border: {
base: baseSet, default: 0.2,
variant: styleSet, hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let warningSet = buildStyleSet(ramps.yellow, {
background: {
default: 0,
hovered: 0.15,
pressed: 0.25,
active: 1,
disabled: 0,
},
border: {
default: 0.2,
hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
let negativeSet = buildStyleSet(ramps.red, {
background: {
default: 0,
hovered: 0.15,
pressed: 0.25,
active: 1,
disabled: 0,
},
border: {
default: 0.2,
hovered: 0.2,
pressed: 0.2,
active: 0.5,
disabled: 0.2,
},
foreground: {
default: 1,
hovered: 1,
pressed: 1,
active: 0,
disabled: 0.4,
},
});
return {
base: baseSet,
variant: variantSet,
on: onSet, on: onSet,
info: infoSet, info: infoSet,
positive: positiveSet, positive: positiveSet,