welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
379 lines (377 loc) • 11.8 kB
TypeScript
declare const _default: {
"border": {
"width": {
"$type": "dimension",
"lg": {
"$value": "3px"
},
"md": {
"$value": "2px"
},
"sm": {
"$value": "1px"
}
}
},
"color": {
"$type": "color",
"beige": {
"10": { "$value": "#fbf9f7" },
"20": { "$value": "#f6f3ef" },
"30": { "$value": "#eae4de" },
"40": { "$value": "#d2cbc3" },
"50": { "$value": "#a7a096" },
"60": { "$value": "#605b55" },
"70": { "$value": "#4d4944" },
"80": { "$value": "#33302d" },
"90": { "$value": "#1e1c1a" }
},
"blue": {
"10": { "$value": "#e0f5ff" },
"20": { "$value": "#bbeaff" },
"30": { "$value": "#9bdef7" },
"40": { "$value": "#55c3e9" },
"50": { "$value": "#27a5d0" },
"60": { "$value": "#057aa3" },
"70": { "$value": "#025a79" },
"80": { "$value": "#013c50" },
"90": { "$value": "#00202b" }
},
"green": {
"10": { "$value": "#eaffd4" },
"20": { "$value": "#d6f6b4" },
"30": { "$value": "#bade94" },
"40": { "$value": "#9fc873" },
"50": { "$value": "#83ad57" },
"60": { "$value": "#5a8034" },
"70": { "$value": "#40611f" },
"80": { "$value": "#2a4210" },
"90": { "$value": "#142603" }
},
"neutral": {
"10": { "$value": "#ffffff" },
"20": { "$value": "#f3f3f3" },
"30": { "$value": "#dedede" },
"40": { "$value": "#bdbdbd" },
"50": { "$value": "#989898" },
"60": { "$value": "#585858" },
"70": { "$value": "#444444" },
"80": { "$value": "#212121" },
"90": { "$value": "#000000" }
},
"orange": {
"10": { "$value": "#ffebce" },
"20": { "$value": "#ffd495" },
"30": { "$value": "#ffbb59" },
"40": { "$value": "#ff9f14" },
"50": { "$value": "#db860a" },
"60": { "$value": "#a6670a" },
"70": { "$value": "#824f06" },
"80": { "$value": "#573607" },
"90": { "$value": "#382303" }
},
"pink": {
"10": { "$value": "#ffeaf5" },
"20": { "$value": "#ffd5eb" },
"30": { "$value": "#feb7dc" },
"40": { "$value": "#f696c8" },
"50": { "$value": "#e468a8" },
"60": { "$value": "#c24887" },
"70": { "$value": "#972962" },
"80": { "$value": "#6d1142" },
"90": { "$value": "#3c0725" }
},
"red": {
"10": { "$value": "#fbdedc" },
"20": { "$value": "#fcc7c3" },
"30": { "$value": "#fdb3ae" },
"40": { "$value": "#ff9490" },
"50": { "$value": "#ff6165" },
"60": { "$value": "#e1003a" },
"70": { "$value": "#a80029" },
"80": { "$value": "#75001a" },
"90": { "$value": "#450101" }
},
"red-orange": {
"10": { "$value": "#ffded0" },
"20": { "$value": "#ffc9b2" },
"30": { "$value": "#ffb595" },
"40": { "$value": "#ff9868" },
"50": { "$value": "#e67b49" },
"60": { "$value": "#c45927" },
"70": { "$value": "#9f4217" },
"80": { "$value": "#6d2605" },
"90": { "$value": "#451701" }
},
"teal": {
"10": { "$value": "#d5fffa" },
"20": { "$value": "#aaf4eb" },
"30": { "$value": "#6de1d2" },
"40": { "$value": "#00c7ae" },
"50": { "$value": "#01aa95" },
"60": { "$value": "#008070" },
"70": { "$value": "#00544a" },
"80": { "$value": "#003d35" },
"90": { "$value": "#00211d" }
},
"transparent": {
"$value": "transparent"
},
"violet": {
"10": { "$value": "#f2f2ff" },
"20": { "$value": "#e0e0ff" },
"30": { "$value": "#c9c9ff" },
"40": { "$value": "#acacff" },
"50": { "$value": "#9080f0" },
"60": { "$value": "#7958d6" },
"70": { "$value": "#593cac" },
"80": { "$value": "#422a86" },
"90": { "$value": "#1f0e51" }
},
"yellow": {
"10": { "$value": "#fff8d9" },
"20": { "$value": "#fff1b2" },
"30": { "$value": "#ffe166" },
"40": { "$value": "#ffcd00" },
"50": { "$value": "#e5b800" },
"60": { "$value": "#b69200" },
"70": { "$value": "#846a01" },
"80": { "$value": "#604d00" },
"90": { "$value": "#423500" }
},
"brand": {
"10": { "$value": "{color.yellow.10}" },
"20": { "$value": "{color.yellow.20}" },
"30": { "$value": "{color.yellow.30}" },
"40": { "$value": "{color.yellow.40}" },
"50": { "$value": "{color.yellow.50}" },
"60": { "$value": "{color.yellow.60}" },
"70": { "$value": "{color.yellow.70}" },
"80": { "$value": "{color.yellow.80}" },
"90": { "$value": "{color.yellow.90}" }
},
"overlay": {
"$value": "color-mix(in oklab, {color.neutral.90} 55%, transparent)"
},
"secondary": {
"blue": { "$value": "{color.blue.40}" },
"green": { "$value": "{color.green.30}" },
"orange": { "$value": "{color.red-orange.40}" },
"pink": { "$value": "{color.pink.40}" },
"teal": { "$value": "{color.teal.40}" },
"violet": { "$value": "{color.violet.40}" }
}
},
"font": {
"family": {
"$type": "fontFamily",
"default": {
"$value": "'Work Sans', sans-serif"
},
"headings": {
"$value": "'welcome-font', sans-serif"
},
"icons": {
"$value": "'welcome-icon-font'"
}
},
"size": {
"$type": "dimension",
"11": { "$value": "0.6875rem" },
"12": { "$value": "0.75rem" },
"13": { "$value": "0.8125rem" },
"14": { "$value": "0.875rem" },
"16": { "$value": "1rem" },
"18": { "$value": "1.125rem" },
"20": { "$value": "1.25rem" },
"24": { "$value": "1.5rem" },
"26": { "$value": "1.625rem" },
"36": { "$value": "2.25rem" },
"45": { "$value": "2.8125rem" },
"65": { "$value": "4.0625rem" },
"h0": { "$value": "{font.size.65}" },
"h1": { "$value": "{font.size.45}" },
"h2": { "$value": "{font.size.36}" },
"h3": { "$value": "{font.size.26}" },
"h4": { "$value": "{font.size.20}" },
"h5": { "$value": "{font.size.16}" },
"h6": { "$value": "{font.size.14}" },
"lg": { "$value": "{font.size.18}" },
"md": { "$value": "{font.size.16}" },
"sm": { "$value": "{font.size.14}" },
"subtitle": {
"md": { "$value": "{font.size.13}" },
"sm": { "$value": "{font.size.11}" }
},
"xl": { "$value": "{font.size.24}" },
"xs": { "$value": "{font.size.12}" }
},
"weight": {
"$type": "fontWeight",
"400": { "$value": "400" },
"500": { "$value": "500" },
"600": { "$value": "600" },
"bold": { "$value": "{font.weight.600}" },
"medium": { "$value": "{font.weight.500}" },
"regular": { "$value": "{font.weight.400}" }
}
},
"height": {
"$type": "dimension",
"4": { "$value": "0.25rem" },
"8": { "$value": "0.5rem" },
"10": { "$value": "0.625rem" },
"12": { "$value": "0.75rem" },
"16": { "$value": "1rem" },
"20": { "$value": "1.25rem" },
"24": { "$value": "1.5rem" },
"30": { "$value": "1.875rem" },
"32": { "$value": "2rem" },
"40": { "$value": "2.5rem" },
"48": { "$value": "3rem" },
"50": { "$value": "3.125rem" },
"60": { "$value": "3.75rem" },
"64": { "$value": "4rem" },
"elements": {
"lg": { "$value": "{height.40}" },
"md": { "$value": "{height.32}" },
"sm": { "$value": "{height.24}" },
"xl": { "$value": "{height.48}" },
"xs": { "$value": "{height.16}" },
"xxl": { "$value": "{height.64}" },
"xxs": { "$value": "{height.12}" }
}
},
"letter-spacing": {
"$type": "dimension",
"h0": { "$value": "-0.10625rem" },
"h1": { "$value": "-0.075rem" },
"h2": { "$value": "-0.0625rem" },
"h3": { "$value": "-0.05625rem" },
"h4": { "$value": "-0.0375rem" },
"h5": { "$value": "-0.03125rem" },
"h6": { "$value": "-0.03125rem" },
"lg": { "$value": "-0.019rem" },
"md": { "$value": "-0.019rem" },
"sm": { "$value": "-0.019rem" },
"subtitle": {
"md": { "$value": "-0.0125rem" },
"sm": { "$value": "-0.0125rem" }
},
"xs": { "$value": "-0.0125rem" }
},
"line-height": {
"$type": "dimension",
"14": { "$value": "0.875rem" },
"16": { "$value": "1rem" },
"18": { "$value": "1.125rem" },
"20": { "$value": "1.25rem" },
"24": { "$value": "1.5rem" },
"32": { "$value": "2rem" },
"40": { "$value": "2.5rem" },
"48": { "$value": "3rem" },
"72": { "$value": "4.5rem" },
"iso-font-size": { "$value": "1" },
"h0": { "$value": "{line-height.72}" },
"h1": { "$value": "{line-height.48}" },
"h2": { "$value": "{line-height.40}" },
"h3": { "$value": "{line-height.32}" },
"h4": { "$value": "{line-height.24}" },
"h5": { "$value": "{line-height.20}" },
"h6": { "$value": "{line-height.18}" },
"lg": { "$value": "{line-height.24}" },
"md": { "$value": "{line-height.18}" },
"sm": { "$value": "{line-height.18}" },
"subtitle": {
"md": { "$value": "{line-height.iso-font-size}" },
"sm": { "$value": "{line-height.iso-font-size}" }
},
"xs": { "$value": "{line-height.14}" }
},
"radius": {
"$type": "dimension",
"2xl": { "$value": "1.5rem" },
"circle": { "$value": "calc(infinity * 1px)" },
"lg": { "$value": "0.5rem" },
"md": { "$value": "0.25rem" },
"sm": { "$value": "0.125rem" },
"xl": { "$value": "1rem" }
},
"breakpoint": {
"$type": "dimension",
"2xl": { "$value": "1440px" },
"3xl": { "$value": "1620px" },
"4xl": { "$value": "1920px" },
"lg": { "$value": "980px" },
"md": { "$value": "736px" },
"sm": { "$value": "480px" },
"xl": { "$value": "1280px" },
"xs": { "$value": "0px" }
},
"shadow": {
"$type": "shadow",
"focus": {
"$value": "0 0 0 2px {color.brand.40}"
},
"focus-danger": {
"$value": "0 0 0 2px {color.red.30}"
},
"focus-success": {
"$value": "0 0 0 2px {color.green.30}"
},
"focus-warning": {
"$value": "0 0 0 2px {color.orange.20}"
},
"md": {
"$value": "3px 4px 10px 0 color-mix(in oklab, {color.neutral.90} 7%, transparent)"
},
"sm": {
"$value": "1px 2px 4px 0 color-mix(in oklab, {color.neutral.90} 5%, transparent)"
}
},
"spacing": {
"$type": "dimension",
"0": { "$value": "0" },
"2": { "$value": "0.125rem" },
"3": { "$value": "0.1875rem" },
"4": { "$value": "0.25rem" },
"8": { "$value": "0.5rem" },
"12": { "$value": "0.75rem" },
"16": { "$value": "1rem" },
"24": { "$value": "1.5rem" },
"28": { "$value": "1.75rem" },
"32": { "$value": "2rem" },
"36": { "$value": "2.25rem" },
"48": { "$value": "3rem" },
"64": { "$value": "4rem" },
"96": { "$value": "6rem" },
"128": { "$value": "8rem" },
"192": { "$value": "12rem" },
"3xl": { "$value": "{spacing.48}" },
"4xl": { "$value": "{spacing.64}" },
"5xl": { "$value": "{spacing.96}" },
"6xl": { "$value": "{spacing.128}" },
"7xl": { "$value": "{spacing.192}" },
"lg": { "$value": "{spacing.16}" },
"md": { "$value": "{spacing.12}" },
"sm": { "$value": "{spacing.8}" },
"xl": { "$value": "{spacing.24}" },
"xs": { "$value": "{spacing.4}" },
"xxl": { "$value": "{spacing.32}" },
"xxs": { "$value": "{spacing.2}" }
},
"duration": {
"$type": "duration",
"fast": { "$value": "100ms" },
"medium": { "$value": "300ms" },
"slow": { "$value": "500ms" }
},
"timing": {
"$type": "cubicBezier",
"primary": { "$value": "ease" },
"secondary": { "$value": "linear" },
"tertiary": { "$value": "cubic-bezier(0.41, 0.094, 0.54, 0.07)" }
}
}
;
export default _default;