K Simmons created
crates/theme/src/theme.rs | 2
crates/theme_testbench/src/theme_testbench.rs | 29
styles/src/styleTree/components.ts | 106 +
styles/src/styleTree/contactFinder.ts | 6
styles/src/styleTree/contactsPanel.ts | 18
styles/src/styleTree/contextMenu.ts | 14
styles/src/styleTree/editor.ts | 12
styles/src/styleTree/picker.ts | 6
styles/src/styleTree/projectDiagnostics.ts | 2
styles/src/styleTree/projectPanel.ts | 8
styles/src/styleTree/search.ts | 6
styles/src/styleTree/statusBar.ts | 10
styles/src/styleTree/tabBar.ts | 12
styles/src/styleTree/updateNotification.ts | 4
styles/src/styleTree/workspace.ts | 8
styles/src/themes/common/colorScheme.ts | 2
styles/src/themes/common/ramps.ts | 1111 ++++++++++----------
17 files changed, 657 insertions(+), 699 deletions(-)
@@ -775,6 +775,7 @@ pub struct RampSet {
#[derive(Clone, Deserialize, Default)]
pub struct Layer {
pub base: StyleSet,
+ pub variant: StyleSet,
pub on: StyleSet,
pub info: StyleSet,
pub positive: StyleSet,
@@ -785,7 +786,6 @@ pub struct Layer {
#[derive(Clone, Deserialize, Default)]
pub struct StyleSet {
pub default: Style,
- pub variant: Style,
pub active: Style,
pub disabled: Style,
pub hovered: Style,
@@ -2,8 +2,8 @@ use gpui::{
actions,
color::Color,
elements::{
- Canvas, ConstrainedBox, Container, ContainerStyle, ElementBox, Flex, Label, Margin,
- MouseEventHandler, Padding, ParentElement,
+ Canvas, Container, ContainerStyle, ElementBox, Flex, Label, Margin, MouseEventHandler,
+ Padding, ParentElement,
},
fonts::TextStyle,
Border, Element, Entity, MutableAppContext, Quad, RenderContext, View, ViewContext,
@@ -97,27 +97,32 @@ impl ThemeTestbench {
.boxed(),
)
.with_child(
- Self::render_button_set(1, layer_index, "on", &layer.on, cx)
+ Self::render_button_set(1, layer_index, "variant", &layer.variant, cx)
.flex(1., false)
.boxed(),
)
.with_child(
- Self::render_button_set(2, layer_index, "info", &layer.info, cx)
+ Self::render_button_set(2, layer_index, "on", &layer.on, cx)
.flex(1., false)
.boxed(),
)
.with_child(
- Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
+ Self::render_button_set(3, layer_index, "info", &layer.info, cx)
.flex(1., false)
.boxed(),
)
.with_child(
- Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
+ Self::render_button_set(4, layer_index, "positive", &layer.positive, cx)
.flex(1., false)
.boxed(),
)
.with_child(
- Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
+ Self::render_button_set(5, layer_index, "warning", &layer.warning, cx)
+ .flex(1., false)
+ .boxed(),
+ )
+ .with_child(
+ Self::render_button_set(6, layer_index, "negative", &layer.negative, cx)
.flex(1., false)
.boxed(),
)
@@ -153,21 +158,13 @@ impl ThemeTestbench {
.with_child(Self::render_button(
set_index * 4 + 1,
layer_index,
- "variant",
- &style_set,
- Some(|style_set| &style_set.variant),
- cx,
- ))
- .with_child(Self::render_button(
- set_index * 4 + 2,
- layer_index,
"active",
&style_set,
Some(|style_set| &style_set.active),
cx,
))
.with_child(Self::render_button(
- set_index * 4 + 3,
+ set_index * 4 + 2,
layer_index,
"disabled",
&style_set,
@@ -1,16 +1,45 @@
import { fontFamilies, fontSizes, FontWeight } from "../common";
-import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
+import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
- return layer[styleSet ?? "base"][style ?? "default"].background;
+function isStyleSet(key: any): key is StyleSets {
+ return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
}
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
- return layer[styleSet ?? "base"][style ?? "default"].border;
+function isStyle(key: any): key is Styles {
+ return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
}
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
- return layer[styleSet ?? "base"][style ?? "default"].foreground;
+function getStyle(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;
+ }
+
+ if (isStyle(possibleStyle)) {
+ style = possibleStyle;
+ }
+
+ return layer[styleSet][style];
+}
+
+export function background(layer: Layer, style?: Styles): string;
+export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+ return getStyle(layer, styleSetOrStyles, style).background;
}
+export function borderColor(layer: Layer, style?: Styles): string;
+export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+ return getStyle(layer, styleSetOrStyles, style).border;
+}
+
+export function foreground(layer: Layer, style?: Styles): string;
+export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+ return getStyle(layer, styleSetOrStyles, style).foreground;
+}
interface Text {
family: keyof typeof fontFamilies,
@@ -38,6 +67,11 @@ export function text(
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
properties?: TextProperties): Text;
+export function text(
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ style: Styles,
+ properties?: TextProperties): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
@@ -45,29 +79,15 @@ export function text(
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
- styleSetOrProperties?: StyleSets | TextProperties,
+ styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
styleOrProperties?: Styles | TextProperties,
properties?: TextProperties
) {
- let styleSet: StyleSets = "base";
- let style: Styles = "default";
-
- if (typeof styleSetOrProperties === "string") {
- styleSet = styleSetOrProperties
- } else if (styleSetOrProperties !== undefined) {
- properties = styleSetOrProperties;
- }
-
- if (typeof styleOrProperties === "string") {
- style = styleOrProperties;
- } else if (styleOrProperties !== undefined) {
- properties = styleOrProperties;
- }
-
+ let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
let size = fontSizes[properties?.size || "sm"];
return {
family: fontFamilies[fontFamily],
- color: layer[styleSet][style].foreground,
+ color: style.foreground,
...properties,
size,
};
@@ -84,7 +104,7 @@ export interface Border {
overlay?: boolean;
}
-export interface BorderOptions {
+export interface BorderProperties {
width?: number;
top?: boolean;
bottom?: boolean;
@@ -97,41 +117,33 @@ export function border(
layer: Layer,
styleSet: StyleSets,
style: Styles,
- options?: BorderOptions
+ properties?: BorderProperties
): Border;
export function border(
layer: Layer,
styleSet: StyleSets,
- options?: BorderOptions
+ properties?: BorderProperties
): Border;
export function border(
layer: Layer,
- options?: BorderOptions
+ style: Styles,
+ properties?: BorderProperties
): Border;
export function border(
layer: Layer,
- styleSetOrOptions?: StyleSets | BorderOptions,
- styleOrOptions?: Styles | BorderOptions,
- options?: BorderOptions
+ properties?: BorderProperties
+): Border;
+export function border(
+ layer: Layer,
+ styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+ styleOrProperties?: Styles | BorderProperties,
+ properties?: BorderProperties
): Border {
- let styleSet: StyleSets = "base";
- let style: Styles = "default";
-
- if (typeof styleSetOrOptions === "string") {
- styleSet = styleSetOrOptions
- } else if (styleSetOrOptions !== undefined) {
- options = styleSetOrOptions;
- }
-
- if (typeof styleOrOptions === "string") {
- style = styleOrOptions;
- } else if (styleOrOptions !== undefined) {
- options = styleOrOptions;
- }
+ let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
return {
- color: layer[styleSet][style].border,
+ color: style.border,
width: 1,
- ...options,
+ ...properties,
};
}
@@ -27,13 +27,13 @@ export default function contactFinder(colorScheme: ColorScheme) {
contactButton: {
...contactButton,
hover: {
- background: background(layer, "base", "hovered"),
+ background: background(layer, "hovered"),
},
},
disabledContactButton: {
...contactButton,
- background: background(layer, "base", "disabled"),
- color: foreground(layer, "base", "disabled"),
+ background: background(layer, "disabled"),
+ color: foreground(layer, "disabled"),
},
};
}
@@ -91,8 +91,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
right: sidePadding,
},
active: {
- ...text(layer, "mono", "base", "active", { size: "sm" }),
- background: background(layer, "base", "active"),
+ ...text(layer, "mono", "active", { size: "sm" }),
+ background: background(layer, "active"),
},
},
contactRow: {
@@ -101,17 +101,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
right: sidePadding,
},
active: {
- background: background(layer, "base", "active"),
+ background: background(layer, "active"),
},
},
treeBranch: {
color: borderColor(layer),
width: 1,
hover: {
- color: borderColor(layer, "base", "hovered"),
+ color: borderColor(layer, "hovered"),
},
active: {
- color: borderColor(layer, "base", "active"),
+ color: borderColor(layer, "active"),
},
},
contactAvatar: {
@@ -128,7 +128,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
contactButton: {
...contactButton,
hover: {
- background: background(layer, "base", "hovered"),
+ background: background(layer, "hovered"),
},
},
disabledButton: {
@@ -144,10 +144,10 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", { size: "sm" }),
},
hover: {
- background: background(layer, "base", "hovered"),
+ background: background(layer, "hovered"),
},
active: {
- background: background(layer, "base", "active"),
+ background: background(layer, "active"),
},
},
inviteRow: {
@@ -158,7 +158,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
border: border(layer, { top: true }),
text: text(layer, "sans", { size: "sm" }),
hover: {
- text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+ text: text(layer, "sans", "hovered", { size: "sm" }),
},
},
};
@@ -23,20 +23,20 @@ export default function contextMenu(colorScheme: ColorScheme) {
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
- ...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }),
+ ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 },
},
hover: {
- background: background(layer, "base", "hovered"),
- text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+ background: background(layer, "hovered"),
+ text: text(layer, "sans", "hovered", { size: "sm" }),
},
active: {
- background: background(layer, "base", "active"),
- text: text(layer, "sans", "base", "active", { size: "sm" }),
+ background: background(layer, "active"),
+ text: text(layer, "sans", "active", { size: "sm" }),
},
activeHover: {
- background: background(layer, "base", "active"),
- text: text(layer, "sans", "base", "active", { size: "sm" }),
+ background: background(layer, "active"),
+ text: text(layer, "sans", "active", { size: "sm" }),
},
},
separator: {
@@ -133,10 +133,10 @@ export default function editor(colorScheme: ColorScheme) {
return {
textColor: syntax.primary.color,
background: background(layer),
- activeLineBackground: background(layer, "base", "variant"),
- highlightedLineBackground: background(layer, "base", "variant"),
+ activeLineBackground: background(layer, "variant"),
+ highlightedLineBackground: background(layer, "variant"),
codeActions: {
- indicator: foreground(layer, "base", "variant"),
+ indicator: foreground(layer, "variant"),
verticalScale: 0.618
},
diffBackgroundDeleted: background(layer, "negative"),
@@ -147,7 +147,7 @@ export default function editor(colorScheme: ColorScheme) {
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: foreground(layer),
- lineNumberActive: foreground(layer, "base", "active"),
+ lineNumberActive: foreground(layer, "active"),
renameFade: 0.6,
unnecessaryCodeFade: 0.5,
selection: colorScheme.players[0],
@@ -169,7 +169,7 @@ export default function editor(colorScheme: ColorScheme) {
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
- background: background(elevation.above.top, "base", "hovered"),
+ background: background(elevation.above.top, "hovered"),
},
margin: {
left: -14,
@@ -177,7 +177,7 @@ export default function editor(colorScheme: ColorScheme) {
matchHighlight: elevation.above.ramps.blue(0.5).hex(),
selectedItem: {
...autocompleteItem,
- background: background(elevation.above.top, "base", "active"),
+ background: background(elevation.above.top, "active"),
},
},
diagnosticHeader: {
@@ -23,11 +23,11 @@ export default function picker(colorScheme: ColorScheme) {
text: text(layer, "sans"),
highlightText: text(layer, "sans", { weight: "bold" }),
active: {
- background: background(layer, "base", "active"),
- text: text(layer, "sans", "base", "active"),
+ background: background(layer, "active"),
+ text: text(layer, "sans", "active"),
},
hover: {
- background: background(layer, "base", "hovered"),
+ background: background(layer, "hovered"),
},
},
border: border(layer),
@@ -8,6 +8,6 @@ export default function projectDiagnostics(colorScheme: ColorScheme) {
tabIconSpacing: 4,
tabIconWidth: 13,
tabSummarySpacing: 10,
- emptyMessage: text(layer, "sans", "base", "variant", { size: "md" }),
+ emptyMessage: text(layer, "sans", "variant", { size: "md" }),
};
}
@@ -17,12 +17,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "on", "hovered"),
},
active: {
- background: background(layer, "base", "active"),
- text: text(layer, "mono", "base", "active", { size: "sm" }),
+ background: background(layer, "active"),
+ text: text(layer, "mono", "active", { size: "sm" }),
},
activeHover: {
- background: background(layer, "base", "hovered"),
- text: text(layer, "mono", "base", "active", { size: "sm" }),
+ background: background(layer, "hovered"),
+ text: text(layer, "mono", "active", { size: "sm" }),
},
},
cutEntryFade: 0.4,
@@ -10,9 +10,9 @@ export default function search(colorScheme: ColorScheme) {
cornerRadius: 8,
minWidth: 200,
maxWidth: 500,
- placeholderText: text(layer, "mono", "base", "disabled"),
+ placeholderText: text(layer, "mono", "disabled"),
selection: colorScheme.players[0],
- text: text(layer, "mono", "base", "active"),
+ text: text(layer, "mono", "active"),
border: border(layer),
margin: {
right: 12,
@@ -65,7 +65,7 @@ export default function search(colorScheme: ColorScheme) {
border: border(layer, "negative"),
},
matchIndex: {
- ...text(layer, "mono", "on", "variant"),
+ ...text(layer, "mono", "variant"),
padding: 6,
},
optionButtonGroup: {
@@ -42,7 +42,7 @@ export default function statusBar(colorScheme: ColorScheme) {
},
diagnosticMessage: {
...text(layer, "sans"),
- hover: text(layer, "sans", "base", "hovered"),
+ hover: text(layer, "sans", "hovered"),
},
feedback: {
...text(layer, "sans"),
@@ -98,12 +98,12 @@ export default function statusBar(colorScheme: ColorScheme) {
iconSize: 16,
iconColor: foreground(layer),
hover: {
- iconColor: foreground(layer, "base", "hovered"),
- background: background(layer, "base", "hovered"),
+ iconColor: foreground(layer, "hovered"),
+ background: background(layer, "hovered"),
},
active: {
- iconColor: foreground(layer, "base", "active"),
- background: background(layer, "base", "active"),
+ iconColor: foreground(layer, "active"),
+ background: background(layer, "active"),
},
},
badge: {
@@ -17,19 +17,19 @@ export default function tabBar(colorScheme: ColorScheme) {
overlay: true,
}),
iconClose: foreground(layer),
- iconCloseActive: foreground(layer, "base", "active"),
+ iconCloseActive: foreground(layer, "active"),
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "info"),
iconWidth: 8,
spacing: 8,
- text: text(layer, "sans", "base", "variant", { size: "sm" }),
+ text: text(layer, "sans", "variant", { size: "sm" }),
padding: {
left: 8,
right: 8,
},
description: {
margin: { left: 6, top: 1 },
- ...text(layer, "sans", "base", "variant", { size: "2xs" })
+ ...text(layer, "sans", "variant", { size: "2xs" })
}
};
@@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
- text: text(layer, "sans", "base", "variant", { size: "sm" }),
+ text: text(layer, "sans", "variant", { size: "sm" }),
};
const inactivePaneActiveTab = {
...tab,
background: background(elevation.top),
- text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
+ text: text(elevation.top, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false
@@ -84,7 +84,7 @@ export default function tabBar(colorScheme: ColorScheme) {
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
hover: {
- color: foreground(layer, "base", "hovered"),
+ color: foreground(layer, "hovered"),
},
},
paneButtonContainer: {
@@ -14,7 +14,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
- color: foreground(layer, "base", "hovered"),
+ color: foreground(layer, "hovered"),
},
},
dismissButton: {
@@ -24,7 +24,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
buttonWidth: 8,
buttonHeight: 8,
hover: {
- color: foreground(layer, "base", "hovered"),
+ color: foreground(layer, "hovered"),
},
},
};
@@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
},
border: border(layer, { bottom: true, overlay: true }),
signInPrompt: {
- background: background(layer, "on", "default"),
- border: border(layer, "on", "default"),
+ background: background(layer, "on"),
+ border: border(layer, "on"),
cornerRadius: 6,
margin: {
top: 1,
@@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
toolbar: {
height: 34,
background: background(elevation.top),
- border: border(elevation.top, "base", "variant", { bottom: true }),
+ border: border(elevation.top, "variant", { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(elevation.top, "on"),
@@ -136,7 +136,7 @@ export default function workspace(colorScheme: ColorScheme) {
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbs: {
- ...text(layer, "mono", "on", "variant"),
+ ...text(layer, "mono", "variant"),
padding: { left: 6 },
},
disconnectedOverlay: {
@@ -47,6 +47,7 @@ export interface Shadow {
export type StyleSets = keyof Layer;
export interface Layer {
base: StyleSet,
+ variant: StyleSet,
on: StyleSet,
info: StyleSet,
positive: StyleSet,
@@ -69,7 +70,6 @@ export interface RampSet {
export type Styles = keyof StyleSet;
export interface StyleSet {
default: Style,
- variant: Style,
active: Style,
disabled: Style,
hovered: Style,
@@ -2,617 +2,566 @@ 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 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]);
+ // 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]);
}
-
- 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([1, 0]);
+ } else {
+ for (var rampName in colorRamps) {
+ baseRamps[rampName] = chroma
+ .scale((colorRamps[rampName].colors as any)())
+ .domain([0, 1]);
}
-
- return {
- name,
- isLight,
-
- lowest,
- middle,
- highest,
-
- players,
- };
+ 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,
+ };
+
+ 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),
+ }
+
+ return {
+ name,
+ isLight,
+
+ lowest,
+ middle,
+ highest,
+
+ 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 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 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 defaultStyle: Style = {
- background: ramps.neutral(0.2).hex(),
- border: ramps.neutral(0.25).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 hoveredStyle: Style = {
- background: ramps.neutral(0.1).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: styleSet,
- positive: styleSet,
- warning: styleSet,
- negative: styleSet
- };
+ let baseSet: StyleSet = {
+ default: {
+ background: ramps.neutral(0.15).hex(),
+ border: ramps.neutral(0.2).hex(),
+ foreground: ramps.neutral(1).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 onSet: StyleSet = {
+ default: {
+ background: ramps.neutral(0.15).hex(),
+ border: ramps.neutral(0.2).hex(),
+ foreground: ramps.neutral(1).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 defaultStyle: Style = {
+ background: ramps.neutral(0.2).hex(),
+ border: ramps.neutral(0.25).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 hoveredStyle: Style = {
+ background: ramps.neutral(0.1).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,
+ hovered: hoveredStyle,
+ pressed: pressedStyle,
+ active: activeStyle,
+ disabled: disabledStyle,
+ };
+
+ return {
+ base: baseSet,
+ variant: styleSet,
+ 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.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 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 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(),
- },
- }
-
- 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
- };
+ 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 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 baseSet: StyleSet = {
+ default: {
+ background: ramps.neutral(0.1).hex(),
+ border: ramps.neutral(0.2).hex(),
+ foreground: ramps.neutral(1).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 styleSet: StyleSet = {
+ default: defaultStyle,
+ hovered: hoveredStyle,
+ pressed: pressedStyle,
+ active: activeStyle,
+ disabled: disabledStyle,
+ };
+
+ return {
+ base: baseSet,
+ variant: styleSet,
+ on: styleSet,
+ info: styleSet,
+ positive: styleSet,
+ warning: styleSet,
+ negative: styleSet
+ };
}
function topLayer(ramps: RampSet, isLight: boolean): Layer {
- 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 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 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 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 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 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(),
- },
- }
-
- 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
- };
+ let baseSet: StyleSet = {
+ default: {
+ background: ramps.neutral(0).hex(),
+ border: ramps.neutral(0.2).hex(),
+ foreground: ramps.neutral(1).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 onSet: StyleSet = {
+ default: {
+ background: ramps.neutral(0.3).hex(),
+ border: ramps.neutral(0.5).hex(),
+ foreground: ramps.neutral(1).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 infoSet: StyleSet = {
+ default: {
+ background: ramps.blue(0.3).hex(),
+ border: ramps.blue(0.5).hex(),
+ foreground: ramps.blue(1).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 positiveSet: StyleSet = {
+ default: {
+ background: ramps.green(0.3).hex(),
+ border: ramps.green(0.5).hex(),
+ foreground: ramps.green(1).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 warningSet: StyleSet = {
+ default: {
+ background: ramps.yellow(0.3).hex(),
+ border: ramps.yellow(0.5).hex(),
+ foreground: ramps.yellow(1).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 negativeSet: StyleSet = {
+ default: {
+ background: ramps.red(0.3).hex(),
+ border: ramps.red(0.5).hex(),
+ foreground: ramps.red(1).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(),
+ },
+ }
+
+ let defaultStyle: Style = {
+ background: ramps.neutral(0).hex(),
+ border: ramps.neutral(0.7).hex(),
+ foreground: ramps.neutral(1).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,
+ hovered: hoveredStyle,
+ pressed: pressedStyle,
+ active: activeStyle,
+ disabled: disabledStyle,
+ };
+
+ return {
+ base: baseSet,
+ variant: styleSet,
+ on: onSet,
+ info: infoSet,
+ positive: positiveSet,
+ warning: warningSet,
+ negative: negativeSet
+ };
}