lumir-design-system-shared
Version:
Lumir Design System - Shared Components & Tokens
833 lines (831 loc) • 19.3 kB
JavaScript
// Foundation 토큰 객체
export const foundationTokens = {
"foundation": {
"color": {
"transparent": {
"light": {
"100": "rgba(0, 0, 0, 0.12)",
"200": "rgba(0, 0, 0, 0.06)",
"300": "rgba(0, 0, 0, 0.20)",
"400": "rgba(0, 0, 0, 0.30)",
"500": "rgba(0, 0, 0, 0.14)",
"600": "rgba(0, 0, 0, 0.07)",
"700": "rgba(0, 0, 0, 0.24)",
"800": "rgba(0, 0, 0, 0.25)",
"900": "rgba(0, 0, 0, 0.40)",
"1000": "rgba(0, 0, 0, 1)"
},
"dark": {
"100": "rgba(0, 0, 0, 0.24)",
"200": "rgba(0, 0, 0, 0.12)",
"300": "rgba(0, 0, 0, 0.40)",
"400": "rgba(0, 0, 0, 0.30)",
"500": "rgba(0, 0, 0, 0.28)",
"600": "rgba(0, 0, 0, 0.14)",
"700": "rgba(0, 0, 0, 0.48)",
"800": "rgba(0, 0, 0, 0.25)",
"900": "rgba(0, 0, 0, 0.30)",
"1000": "rgba(0, 0, 0, 1)"
}
},
"grey": {
"light": {
"0": "#000000",
"2": "#050505",
"4": "#0A0A0A",
"6": "#0F0F0F",
"8": "#141414",
"10": "#191919",
"12": "#1E1E1E",
"14": "#232323",
"16": "#282828",
"18": "#2D2D2D",
"20": "#333333",
"22": "#383838",
"24": "#3D3D3D",
"26": "#424242",
"28": "#474747",
"30": "#4C4C4C",
"32": "#515151",
"34": "#565656",
"36": "#5B5B5B",
"38": "#606060",
"40": "#666666",
"42": "#6B6B6B",
"44": "#707070",
"46": "#757575",
"48": "#7A7A7A",
"50": "#7F7F7F",
"52": "#848484",
"54": "#898989",
"56": "#8E8E8E",
"58": "#939393",
"60": "#999999",
"62": "#9E9E9E",
"64": "#A3A3A3",
"66": "#A8A8A8",
"68": "#ADADAD",
"70": "#B2B2B2",
"72": "#B7B7B7",
"74": "#BCBCBC",
"76": "#C1C1C1",
"78": "#C6C6C6",
"80": "#CCCCCC",
"82": "#D1D1D1",
"84": "#D6D6D6",
"86": "#DBDBDB",
"88": "#E0E0E0",
"90": "#E5E5E5",
"92": "#EAEAEA",
"94": "#EFEFEF",
"96": "#F4F4F4",
"98": "#F9F9F9",
"100": "#FFFFFF"
},
"dark": {
"0": "#FFFFFF",
"2": "#F9F9F9",
"4": "#F4F4F4",
"6": "#EFEFEF",
"8": "#EAEAEA",
"10": "#E5E5E5",
"12": "#E0E0E0",
"14": "#DBDBDB",
"16": "#D6D6D6",
"18": "#D1D1D1",
"20": "#CCCCCC",
"22": "#C6C6C6",
"24": "#C1C1C1",
"26": "#BCBCBC",
"28": "#B7B7B7",
"30": "#B2B2B2",
"32": "#ADADAD",
"34": "#A8A8A8",
"36": "#A3A3A3",
"38": "#9E9E9E",
"40": "#999999",
"42": "#939393",
"44": "#8E8E8E",
"46": "#898989",
"48": "#848484",
"50": "#7F7F7F",
"52": "#7A7A7A",
"54": "#757575",
"56": "#707070",
"58": "#6B6B6B",
"60": "#666666",
"62": "#606060",
"64": "#5B5B5B",
"66": "#565656",
"68": "#515151",
"70": "#4C4C4C",
"72": "#474747",
"74": "#424242",
"76": "#3D3D3D",
"78": "#383838",
"80": "#333333",
"82": "#2D2D2D",
"84": "#282828",
"86": "#232323",
"88": "#1E1E1E",
"90": "#191919",
"92": "#141414",
"94": "#0F0F0F",
"96": "#0A0A0A",
"98": "#050505",
"100": "#000000"
}
},
"blue": {
"light": {
"0": "#E6F7FF",
"10": "#CCF0FF",
"20": "#99E0FF",
"30": "#66D1FF",
"40": "#33C1FF",
"50": "#00A0E9",
"60": "#0080BA",
"70": "#00608C",
"80": "#00405D",
"90": "#00202F",
"100": "#001018"
},
"dark": {
"0": "#001018",
"10": "#00202F",
"20": "#00405D",
"30": "#00608C",
"40": "#0080BA",
"50": "#00A0E9",
"60": "#33C1FF",
"70": "#66D1FF",
"80": "#99E0FF",
"90": "#CCF0FF",
"100": "#E6F7FF"
}
},
"red": {
"light": {
"0": "#FFEBEE",
"10": "#FFCDD2",
"20": "#EF9A9A",
"30": "#E57373",
"40": "#EF5350",
"50": "#F44336",
"60": "#E53935",
"70": "#D32F2F",
"80": "#C62828",
"90": "#B71C1C",
"100": "#8C0D0D"
},
"dark": {
"0": "#8C0D0D",
"10": "#B71C1C",
"20": "#C62828",
"30": "#D32F2F",
"40": "#E53935",
"50": "#F44336",
"60": "#EF5350",
"70": "#E57373",
"80": "#EF9A9A",
"90": "#FFCDD2",
"100": "#FFEBEE"
}
},
"green": {
"light": {
"0": "#E8F5E9",
"10": "#C8E6C9",
"20": "#A5D6A7",
"30": "#81C784",
"40": "#66BB6A",
"50": "#4CAF50",
"60": "#43A047",
"70": "#388E3C",
"80": "#2E7D32",
"90": "#1B5E20",
"100": "#15411B"
},
"dark": {
"0": "#15411B",
"10": "#1B5E20",
"20": "#2E7D32",
"30": "#388E3C",
"40": "#43A047",
"50": "#4CAF50",
"60": "#66BB6A",
"70": "#81C784",
"80": "#A5D6A7",
"90": "#C8E6C9",
"100": "#E8F5E9"
}
},
"yellow": {
"light": {
"0": "#FFFDE7",
"10": "#FFF9C4",
"20": "#FFF59D",
"30": "#FFF176",
"40": "#FFEE58",
"50": "#FFEB3B",
"60": "#FDD835",
"70": "#FBC02D",
"80": "#F9A825",
"90": "#F57F17",
"100": "#B26F11"
},
"dark": {
"0": "#B26F11",
"10": "#F57F17",
"20": "#F9A825",
"30": "#FBC02D",
"40": "#FDD835",
"50": "#FFEB3B",
"60": "#FFEE58",
"70": "#FFF176",
"80": "#FFF59D",
"90": "#FFF9C4",
"100": "#FFFDE7"
}
},
"orange": {
"light": {
"0": "#FFF3E0",
"10": "#FFE0B2",
"20": "#FFCC80",
"30": "#FFB74D",
"40": "#FFA726",
"50": "#FF9800",
"60": "#FB8C00",
"70": "#F57C00",
"80": "#EF6C00",
"90": "#E65100",
"100": "#BF360C"
},
"dark": {
"0": "#BF360C",
"10": "#E65100",
"20": "#EF6C00",
"30": "#F57C00",
"40": "#FB8C00",
"50": "#FF9800",
"60": "#FFA726",
"70": "#FFB74D",
"80": "#FFCC80",
"90": "#FFE0B2",
"100": "#FFF3E0"
}
},
"teal": {
"light": {
"0": "#E0F2F1",
"10": "#B2DFDB",
"20": "#80CBC4",
"30": "#4DB6AC",
"40": "#26A69A",
"50": "#009688",
"60": "#00897B",
"70": "#00796B",
"80": "#00695C",
"90": "#004D40",
"100": "#00251A"
},
"dark": {
"0": "#00251A",
"10": "#004D40",
"20": "#00695C",
"30": "#00796B",
"40": "#00897B",
"50": "#009688",
"60": "#26A69A",
"70": "#4DB6AC",
"80": "#80CBC4",
"90": "#B2DFDB",
"100": "#E0F2F1"
}
},
"purple": {
"light": {
"0": "#F4E6F7",
"10": "#E9CCEF",
"20": "#D399DF",
"30": "#BD66CF",
"40": "#A733BF",
"50": "#65127E",
"60": "#510E65",
"70": "#3D0B4C",
"80": "#290732",
"90": "#150419",
"100": "#0A020C"
},
"dark": {
"0": "#0A020C",
"10": "#150419",
"20": "#290732",
"30": "#3D0B4C",
"40": "#510E65",
"50": "#65127E",
"60": "#A733BF",
"70": "#BD66CF",
"80": "#D399DF",
"90": "#E9CCEF",
"100": "#F4E6F7"
}
},
"pink": {
"light": {
"0": "#FCE4EC",
"10": "#F8BBD0",
"20": "#F48FB1",
"30": "#F06292",
"40": "#EC407A",
"50": "#E91E63",
"60": "#D81B60",
"70": "#C2185B",
"80": "#AD1457",
"90": "#880E4F",
"100": "#560027"
},
"dark": {
"0": "#560027",
"10": "#880E4F",
"20": "#AD1457",
"30": "#C2185B",
"40": "#D81B60",
"50": "#E91E63",
"60": "#EC407A",
"70": "#F06292",
"80": "#F48FB1",
"90": "#F8BBD0",
"100": "#FCE4EC"
}
},
"brown": {
"light": {
"0": "#EFEBE9",
"10": "#D7CCC8",
"20": "#BCAAA4",
"30": "#A1887F",
"40": "#8D6E63",
"50": "#795548",
"60": "#6D4C41",
"70": "#5D4037",
"80": "#4E342E",
"90": "#3E2723",
"100": "#1E0F0A"
},
"dark": {
"0": "#1E0F0A",
"10": "#3E2723",
"20": "#4E342E",
"30": "#5D4037",
"40": "#6D4C41",
"50": "#795548",
"60": "#8D6E63",
"70": "#A1887F",
"80": "#BCAAA4",
"90": "#D7CCC8",
"100": "#EFEBE9"
}
}
},
"font": {
"fontFamily": {
"base": "'Pretendard', sans-serif"
},
"fontSize": {
"120": "12px",
"140": "14px",
"160": "16px",
"200": "20px",
"240": "24px",
"300": "30px",
"360": "36px",
"480": "48px",
"600": "60px",
"720": "72px"
},
"lineHeight": {
"12": "1.2",
"14": "1.4",
"16": "1.6",
"18": "1.8",
"20": "2.0",
"22": "2.2",
"24": "2.4",
"26": "2.6",
"28": "2.8",
"30": "3.0"
},
"letterSpacing": {
"10": "-0.05em",
"20": "-0.025em",
"30": "0em",
"40": "0.025em",
"50": "0.05em",
"60": "0.075em",
"70": "0.1em",
"80": "0.125em",
"90": "0.15em",
"100": "0.2em"
},
"fontWeight": {
"100": "100",
"200": "200",
"300": "300",
"400": "400",
"500": "500",
"600": "600",
"700": "700",
"800": "800",
"900": "900"
}
},
"spacing": {
"0": {
"vertical": "0px",
"horizontal": "0px"
},
"20": {
"vertical": "2px",
"horizontal": "2px"
},
"40": {
"vertical": "4px",
"horizontal": "4px"
},
"60": {
"vertical": "6px",
"horizontal": "6px"
},
"80": {
"vertical": "8px",
"horizontal": "8px"
},
"100": {
"vertical": "10px",
"horizontal": "10px"
},
"120": {
"vertical": "12px",
"horizontal": "12px"
},
"140": {
"vertical": "14px",
"horizontal": "14px"
},
"160": {
"vertical": "16px",
"horizontal": "16px"
},
"180": {
"vertical": "18px",
"horizontal": "18px"
},
"200": {
"vertical": "20px",
"horizontal": "20px"
},
"220": {
"vertical": "22px",
"horizontal": "22px"
},
"240": {
"vertical": "24px",
"horizontal": "24px"
},
"260": {
"vertical": "26px",
"horizontal": "26px"
},
"280": {
"vertical": "28px",
"horizontal": "28px"
},
"300": {
"vertical": "30px",
"horizontal": "30px"
},
"320": {
"vertical": "32px",
"horizontal": "32px"
},
"340": {
"vertical": "34px",
"horizontal": "34px"
},
"360": {
"vertical": "36px",
"horizontal": "36px"
},
"380": {
"vertical": "38px",
"horizontal": "38px"
},
"400": {
"vertical": "40px",
"horizontal": "40px"
}
},
"size": {
"0": "0px",
"20": "2px",
"40": "4px",
"60": "6px",
"80": "8px",
"100": "10px",
"120": "12px",
"140": "14px",
"160": "16px",
"180": "18px",
"200": "20px",
"220": "22px",
"240": "24px",
"260": "26px",
"280": "28px",
"300": "30px",
"320": "32px",
"340": "34px",
"360": "36px",
"380": "38px",
"400": "40px"
},
"radius": {
"0": "0px",
"20": "2px",
"40": "4px",
"60": "6px",
"80": "8px",
"100": "10px",
"120": "12px",
"140": "14px",
"160": "16px",
"180": "18px",
"200": "20px",
"1000": "10000px"
},
"strokeWidth": {
"10": "1px",
"20": "2px",
"30": "3px",
"40": "4px",
"50": "5px",
"60": "6px",
"70": "7px",
"80": "8px",
"90": "9px",
"100": "10px"
},
"height": {
"120": "12px",
"160": "16px",
"200": "20px",
"240": "24px",
"280": "28px",
"320": "32px",
"360": "36px",
"400": "40px",
"440": "44px",
"480": "48px",
"520": "52px",
"560": "56px",
"600": "60px",
"640": "64px",
"680": "68px",
"720": "72px",
"760": "76px",
"800": "80px",
"840": "84px",
"880": "88px"
},
"duration": {
"100": "100ms",
"200": "200ms",
"300": "300ms",
"400": "400ms",
"500": "500ms",
"600": "600ms",
"700": "700ms",
"800": "800ms",
"900": "900ms",
"1000": "1000ms"
},
"easing": {
"standard": {
"in": "cubic-bezier(0.4, 0.0, 1, 1)",
"out": "cubic-bezier(0.0, 0.0, 0.2, 1)",
"inOut": "cubic-bezier(0.4, 0.0, 0.2, 1)"
},
"emphasized": {
"in": "cubic-bezier(0.0, 0.0, 0.2, 1)",
"out": "cubic-bezier(0.4, 0.0, 1, 1)",
"inOut": "cubic-bezier(0.2, 0.0, 0.0, 1)"
},
"overshoot": {
"in": "cubic-bezier(0.34, 1.56, 0.64, 1)",
"out": "cubic-bezier(0.36, 0, 0.66, -0.56)",
"inOut": "cubic-bezier(0.34, 1.56, 0.64, 1)"
}
},
"zIndex": {
"0": "0",
"100": "100",
"200": "200",
"300": "300",
"400": "400",
"500": "500",
"600": "600",
"700": "700",
"800": "800",
"900": "900",
"1000": "1000"
},
"shadow": {
"light": {
"0": {
"x": "0px",
"y": "0px",
"blur": "0px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0)"
},
"10": {
"x": "0px",
"y": "1px",
"blur": "3px",
"spread": "-1px",
"color": "rgba(0, 0, 0, 0.08)"
},
"20": {
"x": "0px",
"y": "2px",
"blur": "8px",
"spread": "-2px",
"color": "rgba(0, 0, 0, 0.06)"
},
"30": {
"x": "0px",
"y": "4px",
"blur": "12px",
"spread": "-4px",
"color": "rgba(0, 0, 0, 0.08)"
},
"40": {
"x": "0px",
"y": "8px",
"blur": "16px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.1)"
},
"50": {
"x": "0px",
"y": "16px",
"blur": "24px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.11)"
}
},
"dark": {
"0": {
"x": "0px",
"y": "0px",
"blur": "0px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0)"
},
"10": {
"x": "0px",
"y": "1px",
"blur": "3px",
"spread": "-1px",
"color": "rgba(0, 0, 0, 0.15)"
},
"20": {
"x": "0px",
"y": "2px",
"blur": "8px",
"spread": "-2px",
"color": "rgba(0, 0, 0, 0.12)"
},
"30": {
"x": "0px",
"y": "4px",
"blur": "12px",
"spread": "-4px",
"color": "rgba(0, 0, 0, 0.15)"
},
"40": {
"x": "0px",
"y": "8px",
"blur": "16px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.2)"
},
"50": {
"x": "0px",
"y": "16px",
"blur": "24px",
"spread": "0px",
"color": "rgba(0, 0, 0, 0.22)"
}
}
},
"objectFit": {
"fill": "fill",
"contain": "contain",
"cover": "cover",
"none": "none",
"scaleDown": "scale-down",
"stretch": "fill",
"fitInside": "contain",
"fillArea": "fill",
"crop": "cover"
},
"objectPosition": {
"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"
},
"animation": {
"duration": {
"instant": "0ms",
"fast": "150ms",
"normal": "300ms",
"slow": "500ms"
},
"easing": {
"default": "ease",
"linear": "linear",
"easeIn": "ease-in",
"easeOut": "ease-out",
"easeInOut": "ease-in-out"
}
},
"opacity": {
"disabled": "0.5",
"hover": "0.8",
"active": "0.6",
"transparent": "0",
"opaque": "1"
},
"focus": {
"outline": {
"width": "2px",
"style": "solid",
"color": "#2196F3",
"offset": "2px"
}
},
"blur": {
"0": "0px",
"20": "2px",
"40": "4px",
"60": "6px",
"80": "8px",
"100": "10px",
"200": "20px",
"300": "30px"
},
"borderStyle": {
"solid": "solid",
"dashed": "dashed",
"dotted": "dotted",
"double": "double",
"groove": "groove",
"ridge": "ridge",
"outset": "outset",
"inset": "inset"
},
"scale": {
"0": "0",
"25": "0.25",
"50": "0.5",
"75": "0.75",
"90": "0.9",
"95": "0.95",
"98": "0.98",
"100": "1",
"105": "1.05",
"110": "1.1",
"125": "1.25",
"150": "1.5",
"200": "2"
}
}
};
export default foundationTokens;