@dartbot/segment
Version:
Segmented display implementd as a vanilla Web Component
60 lines (59 loc) • 1.9 kB
TypeScript
export interface Theme {
elementSpacing: number;
elementPadding: number;
segmentBackground: string;
segmentWidth: number;
segmentInterval: number;
bevelWidth: number;
sideBevelEnabled: boolean;
fillOff: string;
fillOn: string;
strokeOff: string;
strokeOn: string;
strokeWidth: number;
shear: number;
align: Align;
glowInner: number;
glowOuter: number;
}
export declare enum Align {
Left = "left",
Right = "right"
}
export declare const enum Token {
segmentBackground = "--dartbot-segment-bg",
elementSpacing = "--dartbot-element-spacing",
elementPadding = "--dartbot-element-padding",
segmentWidth = "--dartbot-segment-width",
segmentInterval = "--dartbot-segment-interval",
bevelWidth = "--dartbot-bevel-width",
sideBevelEnabled = "--dartbot-side-bevel-enabled",
fillOn = "--dartbot-fill-on",
fillOff = "--dartbot-fill-off",
strokeOn = "--dartbot-stroke-on",
strokeOff = "--dartbot-stroke-off",
strokeWidth = "--dartbot-stroke-width",
shear = "--dartbot-shear",
align = "--dartbot-align",
glowInner = "--dartbot-glow-inner",
glowOuter = "--dartbot-glow-outer"
}
export declare const tokenDefaults: {
"--dartbot-element-spacing": string;
"--dartbot-element-padding": string;
"--dartbot-segment-bg": string;
"--dartbot-segment-width": string;
"--dartbot-segment-interval": string;
"--dartbot-bevel-width": string;
"--dartbot-side-bevel-enabled": string;
"--dartbot-fill-on": string;
"--dartbot-fill-off": string;
"--dartbot-stroke-on": string;
"--dartbot-stroke-off": string;
"--dartbot-stroke-width": string;
"--dartbot-shear": string;
"--dartbot-align": Align;
"--dartbot-glow-inner": string;
"--dartbot-glow-outer": string;
};
export declare const createTheme: (style: CSSStyleDeclaration) => Theme;