lumir-design-system-01
Version:
Lumir Design System 01 - Professional & Clean
841 lines • 20.7 kB
JavaScript
export const tokens = {
"semantic": {
"color": {
"primary": {
"background": {
"1": {
"rest": "#00A0E9",
"hovered": "#00608C",
"pressed": "#66D1FF",
"selected": "#0080BA",
"disabled": "#CCF0FF"
},
"2": {
"rest": "#33C1FF",
"hovered": "#0080BA",
"pressed": "#99E0FF",
"selected": "#00A0E9",
"disabled": "#E6F7FF"
}
},
"foreground": {
"1": {
"rest": "#00A0E9",
"hovered": "#00608C",
"pressed": "#66D1FF",
"selected": "#0080BA",
"disabled": "#CCF0FF"
}
},
"stroke": {
"1": {
"rest": "#0080BA",
"hovered": "#00405D",
"pressed": "#33C1FF",
"disabled": "#66D1FF"
}
},
"oncolor": {
"global": "#FFFFFF"
}
},
"secondary": {
"background": {
"1": {
"rest": "#F4F4F4",
"hovered": "#E0E0E0",
"pressed": "#CCCCCC",
"selected": "#D6D6D6",
"disabled": "#F9F9F9"
},
"2": {
"rest": "#EAEAEA",
"hovered": "#D6D6D6",
"pressed": "#C1C1C1",
"selected": "#CCCCCC",
"disabled": "#F4F4F4"
},
"3": {
"rest": "#E0E0E0",
"hovered": "#CCCCCC",
"pressed": "#B7B7B7",
"selected": "#C1C1C1",
"disabled": "#EFEFEF"
},
"inverse": {
"rest": "#FFFFFF"
}
},
"foreground": {
"1": {
"rest": "#333333",
"hovered": "#7F7F7F",
"pressed": "#B2B2B2",
"selected": "#999999",
"disabled": "#CCCCCC"
},
"2": {
"rest": "#666666",
"hovered": "#B2B2B2",
"pressed": "#E5E5E5",
"selected": "#CCCCCC",
"disabled": "#E5E5E5"
},
"3": {
"rest": "#999999",
"hovered": "#E5E5E5",
"pressed": "#FFFFFF",
"selected": "#EFEFEF",
"disabled": "#B2B2B2"
},
"inverse": {
"rest": "#000000"
}
},
"stroke": {
"1": {
"rest": "#999999",
"hovered": "#CCCCCC",
"pressed": "#E5E5E5",
"disabled": "#7F7F7F"
},
"2": {
"rest": "#CCCCCC",
"hovered": "#E5E5E5",
"pressed": "#F4F4F4",
"disabled": "#B2B2B2"
},
"3": {
"rest": "#FFFFFF",
"hovered": "#F4F4F4",
"pressed": "#EFEFEF",
"disabled": "#E5E5E5"
},
"inverse": {
"rest": "#000000"
}
},
"oncolor": {
"global": "#FFFFFF"
}
},
"cta": {
"background": {
"1": {
"rest": "#66BB6A",
"hovered": "#43A047",
"pressed": "#A5D6A7",
"disabled": "#C8E6C9"
},
"2": {
"rest": "#81C784",
"hovered": "#4CAF50",
"pressed": "#C8E6C9",
"disabled": "#E8F5E9"
}
},
"foreground": {
"1": {
"rest": "#43A047",
"hovered": "#2E7D32",
"pressed": "#66BB6A",
"selected": "#388E3C",
"disabled": "#81C784"
},
"2": {
"rest": "#2E7D32",
"hovered": "#15411B",
"pressed": "#43A047",
"selected": "#1B5E20",
"disabled": "#4CAF50"
}
},
"stroke": {
"1": {
"rest": "#43A047",
"hovered": "#2E7D32",
"pressed": "#66BB6A",
"disabled": "#81C784"
},
"2": {
"rest": "#2E7D32",
"hovered": "#15411B",
"pressed": "#43A047",
"disabled": "#4CAF50"
}
},
"oncolor": {
"global": "#FFFFFF"
}
},
"status": {
"error": {
"global": "#EF5350"
},
"warning": {
"global": "#FF9800"
},
"success": {
"global": "#66BB6A"
},
"info": {
"global": "#33C1FF"
},
"focused": {
"global": "#666666"
}
},
"overlay": {
"background": {
"light": {
"global": "rgba(0, 0, 0, 0.12)",
"subtle": "rgba(0, 0, 0, 0.12)",
"medium": "rgba(0, 0, 0, 0.06)",
"heavy": "rgba(0, 0, 0, 0.20)"
}
}
}
},
"shadow": {
"interaction": {
"button": {
"rest": "0px 1px 2px 0px rgba(0, 0, 0, 0.1)",
"hovered": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"pressed": "0px 0px 0px 0px rgba(0, 0, 0, 0)",
"disabled": "0px 0px 0px 0px rgba(0, 0, 0, 0)"
},
"card": {
"rest": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"hovered": "0px 4px 8px 0px rgba(0, 0, 0, 0.1)",
"pressed": "0px 1px 2px 0px rgba(0, 0, 0, 0.1)"
},
"input": {
"rest": "0px 0px 0px 0px rgba(0, 0, 0, 0)",
"focused": "0px 1px 2px 0px rgba(0, 0, 0, 0.1)",
"error": "0px 1px 2px 0px rgba(0, 0, 0, 0.1)"
}
},
"surface": {
"overlay": "0px 4px 8px 0px rgba(0, 0, 0, 0.1)",
"dropdown": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"modal": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
"tooltip": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"toast": "0px 4px 8px 0px rgba(0, 0, 0, 0.1)",
"sidebar": "0px 4px 8px 0px rgba(0, 0, 0, 0.1)"
},
"feedback": {
"error": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"success": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"warning": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)",
"info": "0px 2px 4px 0px rgba(0, 0, 0, 0.1)"
}
},
"typography": {
"hero-1": {
"regular": {
"fontSize": "48px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "48px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "48px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "700"
}
},
"hero-2": {
"regular": {
"fontSize": "36px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "36px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "36px",
"lineHeight": "1.6",
"letterSpacing": "-0.025em",
"fontWeight": "700"
}
},
"title-1": {
"regular": {
"fontSize": "30px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "30px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "30px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "700"
}
},
"title-2": {
"regular": {
"fontSize": "24px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "24px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "24px",
"lineHeight": "1.4",
"letterSpacing": "-0.025em",
"fontWeight": "700"
}
},
"heading-1": {
"regular": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "400"
},
"medium": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "500"
},
"bold": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "600"
}
},
"heading-2": {
"regular": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "400"
},
"medium": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "500"
},
"bold": {
"fontSize": "20px",
"lineHeight": "1.4",
"letterSpacing": "-0.05em",
"fontWeight": "600"
}
},
"heading-3": {
"regular": {
"fontSize": "16px",
"lineHeight": "1.4",
"letterSpacing": "0em",
"fontWeight": "400"
},
"medium": {
"fontSize": "16px",
"lineHeight": "1.4",
"letterSpacing": "0em",
"fontWeight": "500"
},
"bold": {
"fontSize": "16px",
"lineHeight": "1.4",
"letterSpacing": "0em",
"fontWeight": "600"
}
},
"body-1": {
"regular": {
"fontSize": "16px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "16px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "16px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "700"
}
},
"body-2": {
"regular": {
"fontSize": "14px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "400"
},
"medium": {
"fontSize": "14px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "500"
},
"bold": {
"fontSize": "14px",
"lineHeight": "1.6",
"letterSpacing": "0.025em",
"fontWeight": "700"
}
},
"label-1": {
"regular": {
"fontSize": "14px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "400"
},
"medium": {
"fontSize": "14px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "500"
},
"bold": {
"fontSize": "14px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
},
"label-2": {
"regular": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "400"
},
"medium": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "500"
},
"bold": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
},
"caption-1": {
"regular": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.075em",
"fontWeight": "400"
},
"medium": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.075em",
"fontWeight": "500"
},
"bold": {
"fontSize": "12px",
"lineHeight": "1.4",
"letterSpacing": "0.075em",
"fontWeight": "700"
}
},
"caption-2": {
"regular": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "400"
},
"medium": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "500"
},
"bold": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "700"
}
},
"caption-3": {
"regular": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "400"
},
"medium": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "500"
},
"bold": {
"fontSize": "12px",
"lineHeight": "1.2",
"letterSpacing": "0.075em",
"fontWeight": "700"
}
},
"reading": {
"regular": {
"fontSize": "16px",
"lineHeight": "1.8",
"letterSpacing": "0.05em",
"fontWeight": "400"
},
"medium": {
"fontSize": "16px",
"lineHeight": "1.8",
"letterSpacing": "0.05em",
"fontWeight": "500"
},
"bold": {
"fontSize": "16px",
"lineHeight": "1.8",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
}
},
"spacingVer": {
"global": {
"none": "0px",
"xxxs": "2px",
"xxs": "4px",
"xs": "6px",
"sm": "8px",
"md": "10px",
"lg": "12px",
"xl": "16px",
"xxl": "20px",
"xxxl": "24px"
}
},
"spacingHor": {
"global": {
"none": "0px",
"xxxs": "2px",
"xxs": "4px",
"xs": "6px",
"sm": "8px",
"md": "10px",
"lg": "12px",
"xl": "16px",
"xxl": "20px",
"xxxl": "24px"
}
},
"size": {
"global": {
"none": "0px",
"xxxs": "2px",
"xxs": "4px",
"xs": "12px",
"sm": "16px",
"md": "20px",
"lg": "24px",
"xl": "28px",
"xxl": "32px",
"xxxl": "36px",
"xxxxl": "40px"
}
},
"radius": {
"global": {
"none": "0px",
"sm": "2px",
"md": "4px",
"lg": "6px",
"xl": "8px",
"xxl": "10px",
"circular": "10000px",
"pill": "10000px"
}
},
"height": {
"global": {
"xxxs": "12px",
"xxs": "16px",
"xs": "20px",
"sm": "24px",
"md": "28px",
"lg": "32px",
"xl": "36px",
"xxl": "40px",
"xxxl": "44px"
}
},
"layout": {
"spacing": {
"inset": {
"xs": "0px",
"sm": "0px",
"md": "0px",
"lg": "0px",
"xl": "0px"
},
"stack": {
"xs": "0px",
"sm": "0px",
"md": "0px",
"lg": "0px",
"xl": "0px"
},
"inline": {
"xs": "0px",
"sm": "0px",
"md": "0px",
"lg": "0px",
"xl": "0px"
}
},
"grid": {
"gutter": {
"sm": "0px",
"md": "0px",
"lg": "0px"
},
"margin": {
"sm": "0px",
"md": "0px",
"lg": "0px"
},
"columns": {
"sm": "4px",
"md": "8px",
"lg": "12px"
}
},
"breakpoint": {
"small": "479px",
"medium": "639px",
"large": "1023px",
"xlarge": "1365px",
"xxlarge": "1919px"
}
},
"shape": {
"radius": {
"button": {
"sm": "2px",
"md": "4px",
"lg": "6px"
},
"card": "4px",
"input": "4px",
"badge": {
"default": "2px",
"pill": "10000px"
},
"avatar": "10000px",
"popover": "6px",
"modal": "6px"
},
"borderWidth": {
"thin": "1px",
"medium": "2px",
"thick": "3px",
"thicker": "4px",
"button": "1px",
"card": "1px",
"input": {
"default": "1px",
"focused": "2px"
},
"divider": "1px"
},
"form": {
"rectangle": {
"default": {
"borderRadius": "2px"
},
"sharp": {
"borderRadius": "0px"
}
},
"circular": {
"borderRadius": "10000px"
},
"pill": {
"borderRadius": "10000px"
},
"beak": {
"width": "8px",
"height": "8px"
}
}
},
"animation": {
"duration": {
"global": {
"instant": "100ms",
"fast": "200ms",
"normal": "300ms",
"slow": "500ms",
"slower": "700ms"
},
"transition": {
"button": "200ms",
"card": "300ms",
"dropdown": "200ms",
"modal": {
"enter": "300ms",
"exit": "200ms"
},
"tooltip": "200ms",
"toast": "200ms"
},
"feedback": {
"success": "400ms",
"error": "600ms",
"loading": "800ms"
}
},
"easing": {
"global": {
"default": "cubic-bezier(0.4, 0.0, 0.2, 1)",
"enter": "cubic-bezier(0.0, 0.0, 0.2, 1)",
"exit": "cubic-bezier(0.4, 0.0, 1, 1)",
"emphasis": "cubic-bezier(0.2, 0.0, 0.0, 1)"
},
"interaction": {
"button": "cubic-bezier(0.0, 0.0, 0.2, 1)",
"card": "cubic-bezier(0.4, 0.0, 0.2, 1)",
"dropdown": {
"open": "cubic-bezier(0.4, 0.0, 1, 1)",
"close": "cubic-bezier(0.0, 0.0, 0.2, 1)"
},
"modal": {
"enter": "cubic-bezier(0.4, 0.0, 1, 1)",
"exit": "cubic-bezier(0.0, 0.0, 0.2, 1)"
},
"tooltip": "cubic-bezier(0.4, 0.0, 1, 1)",
"toast": "cubic-bezier(0.4, 0.0, 1, 1)"
}
}
},
"elevation": {
"z": {
"base": "0",
"raised": "100",
"navigation": "200",
"header": "300",
"dropdown": "400",
"sticky": "500",
"overlay": "600",
"modal": "700",
"toast": "800",
"popover": "900",
"tooltip": "1000"
}
},
"focus": {
"outline": {
"width": "2px",
"style": "solid",
"color": "#00A0E9",
"offset": "2px"
},
"ring": {
"width": "2px",
"color": "#00A0E9",
"offset": "2px"
}
},
"object": {
"fit": {
"fill": "fill",
"contain": "contain",
"cover": "cover",
"none": "none",
"scaleDown": "scale-down",
"stretch": "fill",
"fitInside": "contain",
"fillArea": "cover",
"crop": "cover"
},
"position": {
"center": "center",
"top": "top",
"bottom": "bottom",
"left": "left",
"right": "right",
"topLeft": "top left",
"topRight": "top right",
"bottomLeft": "bottom left",
"bottomRight": "bottom right",
"cropCenter": "center",
"cropTop": "top",
"cropBottom": "bottom",
"cropLeft": "left",
"cropRight": "right",
"cropTopLeft": "top left",
"cropTopRight": "top right",
"cropBottomLeft": "bottom left",
"cropBottomRight": "bottom right"
}
},
"boxSizing": {
"contentBox": "content-box",
"borderBox": "border-box"
},
"aspectRatio": {
"square": "1/1",
"landscape": {
"classic": "4/3",
"wide": "16/9",
"ultraWide": "21/9",
"film": "3/2"
},
"portrait": {
"classic": "3/4",
"tall": "9/16",
"book": "2/3"
}
},
"opacity": {
"hover": "0.8",
"disabled": "0.4",
"overlay": {
"light": "0.2",
"medium": "0.4",
"heavy": "0.6"
}
}
}
};