mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-12 13:24:19 +00:00
WIP work on bottom and middle layer sets
This commit is contained in:
Nate Butler
parent
eabd687cbc
commit
ebe8c952e4
3 changed files with 561 additions and 261 deletions
|
|
@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
|
|||
},
|
||||
border: border(layer, { bottom: true, overlay: true }),
|
||||
signInPrompt: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
background: background(layer, "on", "default"),
|
||||
border: border(layer, "on", "default"),
|
||||
cornerRadius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
|
|
|
|||
|
|
@ -2,319 +2,617 @@ import chroma, { Color, Scale } from "chroma-js";
|
|||
import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
|
||||
|
||||
export function colorRamp(color: Color): Scale {
|
||||
let hue = color.hsl()[0];
|
||||
let endColor = chroma.hsl(hue, 0.88, 0.96);
|
||||
let startColor = chroma.hsl(hue, 0.68, 0.12);
|
||||
return chroma.scale([startColor, color, endColor]).mode("hsl");
|
||||
let hue = color.hsl()[0];
|
||||
let endColor = chroma.hsl(hue, 0.88, 0.96);
|
||||
let startColor = chroma.hsl(hue, 0.68, 0.12);
|
||||
return chroma.scale([startColor, color, endColor]).mode("hsl");
|
||||
}
|
||||
|
||||
export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
|
||||
// Chromajs scales from 0 to 1 flipped if isLight is true
|
||||
let baseRamps: typeof colorRamps = {};
|
||||
// Chromajs scales from 0 to 1 flipped if isLight is true
|
||||
let baseRamps: typeof colorRamps = {};
|
||||
|
||||
// Chromajs mutates the underlying ramp when you call domain. This causes problems because
|
||||
// we now store the ramps object in the theme so that we can pull colors out of them.
|
||||
// So instead of calling domain and storing the result, we have to construct new ramps for each
|
||||
// theme so that we don't modify the passed in ramps.
|
||||
// This combined with an error in the type definitions for chroma js means we have to cast the colors
|
||||
// function to any in order to get the colors back out from the original ramps.
|
||||
if (isLight) {
|
||||
for (var rampName in colorRamps) {
|
||||
baseRamps[rampName] = chroma
|
||||
.scale((colorRamps[rampName].colors as any)())
|
||||
.domain([1, 0]);
|
||||
// Chromajs mutates the underlying ramp when you call domain. This causes problems because
|
||||
// we now store the ramps object in the theme so that we can pull colors out of them.
|
||||
// So instead of calling domain and storing the result, we have to construct new ramps for each
|
||||
// theme so that we don't modify the passed in ramps.
|
||||
// This combined with an error in the type definitions for chroma js means we have to cast the colors
|
||||
// function to any in order to get the colors back out from the original ramps.
|
||||
if (isLight) {
|
||||
for (var rampName in colorRamps) {
|
||||
baseRamps[rampName] = chroma
|
||||
.scale((colorRamps[rampName].colors as any)())
|
||||
.domain([1, 0]);
|
||||
}
|
||||
baseRamps.neutral = chroma
|
||||
.scale((colorRamps.neutral.colors as any)())
|
||||
.domain([1, 0]);
|
||||
} else {
|
||||
for (var rampName in colorRamps) {
|
||||
baseRamps[rampName] = chroma
|
||||
.scale((colorRamps[rampName].colors as any)())
|
||||
.domain([0, 1]);
|
||||
}
|
||||
baseRamps.neutral = chroma
|
||||
.scale((colorRamps.neutral.colors as any)())
|
||||
.domain([0, 1]);
|
||||
}
|
||||
baseRamps.neutral = chroma
|
||||
.scale((colorRamps.neutral.colors as any)())
|
||||
.domain([1, 0]);
|
||||
} else {
|
||||
for (var rampName in colorRamps) {
|
||||
baseRamps[rampName] = chroma
|
||||
.scale((colorRamps[rampName].colors as any)())
|
||||
.domain([0, 1]);
|
||||
|
||||
let baseSet = {
|
||||
neutral: baseRamps.neutral,
|
||||
red: baseRamps.red,
|
||||
orange: baseRamps.orange,
|
||||
yellow: baseRamps.yellow,
|
||||
green: baseRamps.green,
|
||||
cyan: baseRamps.cyan,
|
||||
blue: baseRamps.blue,
|
||||
violet: baseRamps.violet,
|
||||
magenta: baseRamps.magenta,
|
||||
};
|
||||
|
||||
let lowest = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0, 1)
|
||||
),
|
||||
isLight,
|
||||
);
|
||||
|
||||
let middle = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0.125, 1)
|
||||
),
|
||||
isLight,
|
||||
{
|
||||
blur: 4,
|
||||
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
|
||||
offset: [1, 2],
|
||||
}
|
||||
);
|
||||
lowest.above = middle;
|
||||
|
||||
let highest = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0.25, 1)
|
||||
),
|
||||
isLight,
|
||||
{
|
||||
blur: 16,
|
||||
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
|
||||
offset: [0, 2],
|
||||
}
|
||||
);
|
||||
middle.above = highest;
|
||||
|
||||
let players = {
|
||||
"0": player(baseSet.blue),
|
||||
"1": player(baseSet.green),
|
||||
"2": player(baseSet.magenta),
|
||||
"3": player(baseSet.orange),
|
||||
"4": player(baseSet.violet),
|
||||
"5": player(baseSet.cyan),
|
||||
"6": player(baseSet.red),
|
||||
"7": player(baseSet.yellow),
|
||||
}
|
||||
baseRamps.neutral = chroma
|
||||
.scale((colorRamps.neutral.colors as any)())
|
||||
.domain([0, 1]);
|
||||
}
|
||||
|
||||
let baseSet = {
|
||||
neutral: baseRamps.neutral,
|
||||
red: baseRamps.red,
|
||||
orange: baseRamps.orange,
|
||||
yellow: baseRamps.yellow,
|
||||
green: baseRamps.green,
|
||||
cyan: baseRamps.cyan,
|
||||
blue: baseRamps.blue,
|
||||
violet: baseRamps.violet,
|
||||
magenta: baseRamps.magenta,
|
||||
};
|
||||
return {
|
||||
name,
|
||||
isLight,
|
||||
|
||||
let lowest = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0, 1)
|
||||
),
|
||||
isLight,
|
||||
);
|
||||
lowest,
|
||||
middle,
|
||||
highest,
|
||||
|
||||
let middle = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0.125, 1)
|
||||
),
|
||||
isLight,
|
||||
{
|
||||
blur: 4,
|
||||
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
|
||||
offset: [1, 2],
|
||||
}
|
||||
);
|
||||
lowest.above = middle;
|
||||
|
||||
let highest = elevation(
|
||||
resampleSet(
|
||||
baseSet,
|
||||
evenSamples(0.25, 1)
|
||||
),
|
||||
isLight,
|
||||
{
|
||||
blur: 16,
|
||||
color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
|
||||
offset: [0, 2],
|
||||
}
|
||||
);
|
||||
middle.above = highest;
|
||||
|
||||
let players = {
|
||||
"0": player(baseSet.blue),
|
||||
"1": player(baseSet.green),
|
||||
"2": player(baseSet.magenta),
|
||||
"3": player(baseSet.orange),
|
||||
"4": player(baseSet.violet),
|
||||
"5": player(baseSet.cyan),
|
||||
"6": player(baseSet.red),
|
||||
"7": player(baseSet.yellow),
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
isLight,
|
||||
|
||||
lowest,
|
||||
middle,
|
||||
highest,
|
||||
|
||||
players,
|
||||
};
|
||||
players,
|
||||
};
|
||||
}
|
||||
|
||||
function player(ramp: Scale): Player {
|
||||
return {
|
||||
selection: ramp(0.5).alpha(0.24).hex(),
|
||||
cursor: ramp(0.5).hex(),
|
||||
}
|
||||
return {
|
||||
selection: ramp(0.5).alpha(0.24).hex(),
|
||||
cursor: ramp(0.5).hex(),
|
||||
}
|
||||
}
|
||||
|
||||
function evenSamples(min: number, max: number): number[] {
|
||||
return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
|
||||
return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
|
||||
}
|
||||
|
||||
function resampleSet(ramps: RampSet, samples: number[]): RampSet {
|
||||
return {
|
||||
neutral: resample(ramps.neutral, samples),
|
||||
red: resample(ramps.red, samples),
|
||||
orange: resample(ramps.orange, samples),
|
||||
yellow: resample(ramps.yellow, samples),
|
||||
green: resample(ramps.green, samples),
|
||||
cyan: resample(ramps.cyan, samples),
|
||||
blue: resample(ramps.blue, samples),
|
||||
violet: resample(ramps.violet, samples),
|
||||
magenta: resample(ramps.magenta, samples),
|
||||
}
|
||||
return {
|
||||
neutral: resample(ramps.neutral, samples),
|
||||
red: resample(ramps.red, samples),
|
||||
orange: resample(ramps.orange, samples),
|
||||
yellow: resample(ramps.yellow, samples),
|
||||
green: resample(ramps.green, samples),
|
||||
cyan: resample(ramps.cyan, samples),
|
||||
blue: resample(ramps.blue, samples),
|
||||
violet: resample(ramps.violet, samples),
|
||||
magenta: resample(ramps.magenta, samples),
|
||||
}
|
||||
}
|
||||
|
||||
function resample(scale: Scale, samples: number[]): Scale {
|
||||
let newColors = samples.map((sample) => scale(sample));
|
||||
return chroma.scale(newColors);
|
||||
let newColors = samples.map((sample) => scale(sample));
|
||||
return chroma.scale(newColors);
|
||||
}
|
||||
|
||||
function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
|
||||
return {
|
||||
ramps,
|
||||
return {
|
||||
ramps,
|
||||
|
||||
bottom: bottomLayer(ramps, isLight),
|
||||
middle: middleLayer(ramps, isLight),
|
||||
top: topLayer(ramps, isLight),
|
||||
bottom: bottomLayer(ramps, isLight),
|
||||
middle: middleLayer(ramps, isLight),
|
||||
top: topLayer(ramps, isLight),
|
||||
|
||||
shadow,
|
||||
};
|
||||
shadow,
|
||||
};
|
||||
}
|
||||
|
||||
function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
let baseSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.neutral(0.15).hex(),
|
||||
border: ramps.neutral(0.2).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(0.15).hex(),
|
||||
foreground: ramps.neutral(0.7).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.3).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
let onSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.neutral(0.15).hex(),
|
||||
border: ramps.neutral(0.2).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(0.15).hex(),
|
||||
foreground: ramps.neutral(0.7).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.25).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.3).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
|
||||
return {
|
||||
base: styleSet,
|
||||
on: styleSet,
|
||||
info: styleSet,
|
||||
positive: styleSet,
|
||||
warning: styleSet,
|
||||
negative: styleSet
|
||||
};
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
|
||||
return {
|
||||
base: baseSet,
|
||||
on: onSet,
|
||||
info: styleSet,
|
||||
positive: styleSet,
|
||||
warning: styleSet,
|
||||
negative: styleSet
|
||||
};
|
||||
}
|
||||
|
||||
function middleLayer(ramps: RampSet, isLight: boolean): Layer {
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.7).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.4).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.3).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.3).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
let baseSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(0.2).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(0.15).hex(),
|
||||
foreground: ramps.neutral(0.7).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
base: styleSet,
|
||||
on: styleSet,
|
||||
info: styleSet,
|
||||
positive: styleSet,
|
||||
warning: styleSet,
|
||||
negative: styleSet
|
||||
};
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
|
||||
return {
|
||||
base: baseSet,
|
||||
on: styleSet,
|
||||
info: styleSet,
|
||||
positive: styleSet,
|
||||
warning: styleSet,
|
||||
negative: styleSet
|
||||
};
|
||||
}
|
||||
|
||||
function topLayer(ramps: RampSet, isLight: boolean): Layer {
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0).hex(),
|
||||
border: ramps.neutral(0.7).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
let baseSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.neutral(0).hex(),
|
||||
border: ramps.neutral(0.2).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.neutral(0.1).hex(),
|
||||
border: ramps.neutral(0.15).hex(),
|
||||
foreground: ramps.neutral(0.7).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let onSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.neutral(0.3).hex(),
|
||||
border: ramps.neutral(0.5).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let infoSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.blue(0.3).hex(),
|
||||
border: ramps.blue(0.5).hex(),
|
||||
foreground: ramps.blue(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.blue(0.2).hex(),
|
||||
border: ramps.blue(0.6).hex(),
|
||||
foreground: ramps.blue(0.8).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.blue(0.4).hex(),
|
||||
border: ramps.blue(1.0).hex(),
|
||||
foreground: ramps.blue(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.blue(0.55).hex(),
|
||||
border: ramps.blue(0.9).hex(),
|
||||
foreground: ramps.blue(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.blue(0.8).hex(),
|
||||
border: ramps.blue(0.8).hex(),
|
||||
foreground: ramps.blue(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.blue(0.25).hex(),
|
||||
border: ramps.blue(1).hex(),
|
||||
foreground: ramps.blue(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
let positiveSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.green(0.3).hex(),
|
||||
border: ramps.green(0.5).hex(),
|
||||
foreground: ramps.green(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.green(0.2).hex(),
|
||||
border: ramps.green(0.6).hex(),
|
||||
foreground: ramps.green(0.8).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.green(0.4).hex(),
|
||||
border: ramps.green(1.0).hex(),
|
||||
foreground: ramps.green(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.green(0.55).hex(),
|
||||
border: ramps.green(0.9).hex(),
|
||||
foreground: ramps.green(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.green(0.8).hex(),
|
||||
border: ramps.green(0.8).hex(),
|
||||
foreground: ramps.green(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.green(0.25).hex(),
|
||||
border: ramps.green(1).hex(),
|
||||
foreground: ramps.green(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
let warningSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.yellow(0.3).hex(),
|
||||
border: ramps.yellow(0.5).hex(),
|
||||
foreground: ramps.yellow(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.yellow(0.2).hex(),
|
||||
border: ramps.yellow(0.6).hex(),
|
||||
foreground: ramps.yellow(0.8).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.yellow(0.4).hex(),
|
||||
border: ramps.yellow(1.0).hex(),
|
||||
foreground: ramps.yellow(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.yellow(0.55).hex(),
|
||||
border: ramps.yellow(0.9).hex(),
|
||||
foreground: ramps.yellow(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.yellow(0.8).hex(),
|
||||
border: ramps.yellow(0.8).hex(),
|
||||
foreground: ramps.yellow(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.yellow(0.25).hex(),
|
||||
border: ramps.yellow(1).hex(),
|
||||
foreground: ramps.yellow(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
let negativeSet: StyleSet = {
|
||||
default: {
|
||||
background: ramps.red(0.3).hex(),
|
||||
border: ramps.red(0.5).hex(),
|
||||
foreground: ramps.red(1).hex(),
|
||||
},
|
||||
variant: {
|
||||
background: ramps.red(0.2).hex(),
|
||||
border: ramps.red(0.6).hex(),
|
||||
foreground: ramps.red(0.8).hex(),
|
||||
},
|
||||
hovered: {
|
||||
background: ramps.red(0.4).hex(),
|
||||
border: ramps.red(1.0).hex(),
|
||||
foreground: ramps.red(0.9).hex(),
|
||||
},
|
||||
pressed: {
|
||||
background: ramps.red(0.55).hex(),
|
||||
border: ramps.red(0.9).hex(),
|
||||
foreground: ramps.red(0.9).hex(),
|
||||
},
|
||||
active: {
|
||||
background: ramps.red(0.8).hex(),
|
||||
border: ramps.red(0.8).hex(),
|
||||
foreground: ramps.red(0.1).hex(),
|
||||
},
|
||||
disabled: {
|
||||
background: ramps.red(0.25).hex(),
|
||||
border: ramps.red(1).hex(),
|
||||
foreground: ramps.red(0.9).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
base: styleSet,
|
||||
on: styleSet,
|
||||
info: styleSet,
|
||||
positive: styleSet,
|
||||
warning: styleSet,
|
||||
negative: styleSet
|
||||
};
|
||||
let defaultStyle: Style = {
|
||||
background: ramps.neutral(0).hex(),
|
||||
border: ramps.neutral(0.7).hex(),
|
||||
foreground: ramps.neutral(1).hex(),
|
||||
};
|
||||
|
||||
let variantStyle: Style = {
|
||||
background: ramps.neutral(0.2).hex(),
|
||||
border: ramps.neutral(0.6).hex(),
|
||||
foreground: ramps.neutral(0.8).hex(),
|
||||
};
|
||||
|
||||
let hoveredStyle: Style = {
|
||||
background: ramps.neutral(0.4).hex(),
|
||||
border: ramps.neutral(1.0).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let pressedStyle: Style = {
|
||||
background: ramps.neutral(0.55).hex(),
|
||||
border: ramps.neutral(0.9).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let activeStyle: Style = {
|
||||
background: ramps.neutral(0.8).hex(),
|
||||
border: ramps.neutral(0.8).hex(),
|
||||
foreground: ramps.neutral(0.1).hex(),
|
||||
};
|
||||
|
||||
let disabledStyle: Style = {
|
||||
background: ramps.neutral(0.25).hex(),
|
||||
border: ramps.neutral(1).hex(),
|
||||
foreground: ramps.neutral(0.9).hex(),
|
||||
};
|
||||
|
||||
let styleSet: StyleSet = {
|
||||
default: defaultStyle,
|
||||
variant: variantStyle,
|
||||
hovered: hoveredStyle,
|
||||
pressed: pressedStyle,
|
||||
active: activeStyle,
|
||||
disabled: disabledStyle,
|
||||
};
|
||||
|
||||
return {
|
||||
base: baseSet,
|
||||
on: onSet,
|
||||
info: infoSet,
|
||||
positive: positiveSet,
|
||||
warning: warningSet,
|
||||
negative: negativeSet
|
||||
};
|
||||
}
|
||||
2
styles/src/themes/common/styleSets.ts
Normal file
2
styles/src/themes/common/styleSets.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export const top = {
|
||||
}
|
||||
Loading…
Reference in a new issue