ringcentral-widgets
Version:
RingCentral Integration Widget Library
551 lines (550 loc) • 15.1 kB
JSON
{
"breakpoints": {
"values": {
"xs": 0,
"sm": 641,
"md": 960,
"lg": 1280,
"xl": 1920
}
},
"palette": {
"primary": {
"50": "#e1f4fb",
"100": "#b2e3f4",
"200": "#82d1ed",
"300": "#66bffa",
"400": "#34b1e2",
"500": "#6990fd",
"600": "#4475fd",
"700": "#4475fd",
"800": "#2f51b1",
"900": "#005488",
"light": "#6990fd",
"main": "#4475fd",
"dark": "#2f51b1"
},
"secondary": {
"50": "#fff3e0",
"100": "#ffdfb1",
"200": "#ffca7f",
"300": "#ffb44c",
"400": "#ffa424",
"500": "#ff9f33",
"600": "#ff8800",
"700": "#f97802",
"800": "#b25f00",
"900": "#ea4b04",
"light": "#ff9f33",
"main": "#ff8800",
"dark": "#b25f00"
},
"semantic": {
"negative": "#f44336",
"positive": "#26a304",
"critical": "#f6ad16",
"neutral": "#616161"
},
"accent": {
"ash": "#bfbfbf",
"lake": "#69a3eb",
"tiffany": "#22c2d6",
"cateye": "#52d2b1",
"grass": "#bdd655",
"olive": "#4cd964",
"gold": "#edb63c",
"lemon": "#ffd800",
"tomato": "#ff3737",
"indigo": "#4a1e8c",
"purple": "#4A44FD",
"persimmon": "#ff793d",
"black": "#212121",
"red": "#f44336",
"blue": "#4475fd",
"orange": "#FF8800",
"yellow": "#EDB63C",
"green": "#26A304"
},
"grey": {
"100": "#f5f6fb",
"200": "#EEEEEE",
"400": "#8F98A8",
"500": "#8192AF",
"600": "#737983",
"900": "#212121"
},
"background": {
"disabled": "rgba(255,55,55,.05)",
"default": "#fff"
},
"action": {
"hoverOpacity": 0.12,
"active": "#EBF6FA",
"grayLight": "#666666",
"grayDark": "#494949",
"primary": "#066FAC"
},
"tooltip": {
"dark": "#616161"
},
"avatar": {
"tomato": "#C93637",
"blueberry": "#5A5ABF",
"oasis": "#04549F",
"gold": "#7A7000",
"sage": "#047C68",
"ash": "#666666",
"persimmon": "#A14B00",
"pear": "#3C7E44",
"brass": "#8E6B2B",
"lake": "#1A70C1",
"red": "#f54c3d",
"orange": "#FF8800",
"yellow": "#F6AD16",
"green": "#299e0b",
"tiffany": "#3096a8",
"primary": "#6990FD",
"purple": "#8c79e7",
"neutral": "#8D93A5",
"global": "#509AC4"
},
"common": {
"white": "#fff"
},
"bg": {
"paper": "#FFFFFF",
"light": "#F9F9FA",
"dark": "#F0F1F4",
"primaryLightest": "#F5F6FB",
"primary": "#4475FD",
"secondary": "#FF8800",
"negative": "#f54c3d",
"positive": "#299e0b",
"neutral": "#6C7489",
"critical": "#F6AD16",
"redLight": "#F9EBE9",
"orangeLight": "#FAECDF",
"yellowLight": "#f7edd7",
"greenLight": "#e8f1e8",
"tiffanyLight": "#E8F0F2",
"blueLight": "#EAEEF5",
"purpleLight": "#EDEDF5",
"redLightest": "#fbf5f4",
"orangeLightest": "#fbf5ef",
"yellowLightest": "#f9f6ec",
"greenLightest": "#f3f8f3",
"tiffanyLightest": "#f3f7f8",
"blueLightest": "#F5F6FB",
"purpleLightest": "#f6f6fa",
"buttonDisabled": "#F0F1F4",
"transparentDark": "rgba(66, 73, 92, 0.72)",
"transparentDarkDisabled": "rgba(66, 73, 92, 0.32)",
"primaryLight": "#EAEEF5"
},
"element": {
"default": "#8D93A5",
"primary": "#4475FD",
"negative": "#f54c3d",
"disabled": "#CED1D9"
},
"border": {
"default": "#CED1D9",
"primary": "#4475FD",
"negative": "#f54c3d",
"disabled": "#E8E9ED",
"inverse": "#FFFFFF",
"light": "#E8E9ED",
"secondary": "#FF8800",
"redLight": "#F9EBE9",
"dark": "#282B33"
},
"text": {
"dark": "#282B33",
"default": "#464B59",
"subdued": "#6C7489",
"info": "#4475FD",
"negative": "#c64335",
"positive": "#31841d",
"critical": "#FF8800",
"inverse": "#FFFFFF",
"bgPrimary": "#FFFFFF",
"bgSecondary": "#FFFFFF",
"bgNegative": "#FFFFFF",
"bgPositive": "#FFFFFF",
"bgNeutral": "#FFFFFF",
"hint": "#81899D",
"disabled": "#B5B9C5",
"button": "#4475FD",
"secondaryInfo": "#FF8800"
},
"icon": {
"subdued": "#81899D",
"default": "#6C7489",
"dark": "#282B33",
"primary": "#4475FD",
"negative": "#f54c3d",
"positive": "#299e0b",
"critical": "#F6AD16",
"secondary": "#FF8800",
"inverse": "#FFFFFF",
"inverseDisabled": "#FFFFFF",
"disabled": "#B5B9C5",
"bookmark": "#4475FD"
},
"label": {
"red": {
"icon": "#f54c3d",
"text": "#c64335"
},
"orange": {
"icon": "#FF8800",
"text": "#FF8800"
},
"yellow": {
"icon": "#F6AD16",
"text": "#8e6b2b"
},
"green": {
"icon": "#299e0b",
"text": "#31841d"
},
"tiffany": {
"icon": "#3096a8",
"text": "#367987"
},
"blue": {
"icon": "#4475FD",
"text": "#4475FD"
},
"purple": {
"icon": "#8c79e7",
"text": "#7265b3"
},
"black": {
"icon": "#282B33",
"text": "#282B33"
},
"red01": "#E6413C",
"red02": "#BE3933",
"orange01": "#CD6E0D",
"orange02": "#A15600",
"yellow01": "#B17D1A",
"yellow02": "#896219",
"green01": "#3C9949",
"green02": "#32773B",
"teal01": "#3093A4",
"teal02": "#2B727F",
"blue01": "#066FAC",
"blue02": "#066FAC",
"purple01": "#8A77E3",
"purple02": "#6C5DAF",
"black02": "#121212"
},
"globalHeader": {
"bgLight": "#66bffa",
"bgDark": "#4475FD",
"bgTransparent": "rgba(255, 255, 255, 0.16)",
"bgTransparentDisabled": "rgba(255, 255, 255, 0.08)",
"text": "#FFFFFF",
"textHint": "rgba(255, 255, 255, 0.48)",
"icon": "#FFFFFF",
"iconDisabled": "rgba(255, 255, 255, 0.32)",
"border": "#FFFFFF",
"critical": "#F6AD16",
"positive": "rgb(116, 200, 158)"
},
"header": {
"bgLeft": "#066FAC",
"bgRight": "#509AC4",
"bgOverlay": "rgba(255, 255, 255, 0.16)",
"bgOverlayDisabled": "rgba(255, 255, 255, 0.08)",
"fabBg": "#FFFFFF",
"fabIcon": "#121212",
"border": "transparent",
"divider": "rgba(0, 0, 0, 0.12)",
"focusBorder": "#FFFFFF",
"text": "#FFFFFF",
"textHint": "rgba(255, 255, 255, 0.48)",
"icon": "#FFFFFF",
"iconDisabled": "rgba(255, 255, 255, 0.32)"
},
"dialHeader": {
"bg": "#066FAC",
"text": "#FFFFFF",
"textHint": "rgba(255, 255, 255, 0.88)",
"icon": "#FFFFFF",
"avatarBg": "#FFFFFF",
"avatarIcon": "#066FAC",
"focusBorder": "#FFFFFF"
},
"nav": {
"iconDefault": "#121212",
"iconSelected": "#066FAC",
"b01": "#FFFFFF",
"b02": "#F9F9F9",
"line": "#E5E5E5",
"menuBg": "#066FAC",
"menuText": "#FFFFFF",
"f01": "#757575",
"f02": "#666666",
"f03": "#494949",
"f04": "#121212",
"bookmark": "#066FAC",
"mention": "#FF8800",
"ctlDefault": "#939393",
"ctlSelected": "#066FAC"
},
"tab": {
"default": "#121212",
"selected": "#066FAC"
},
"subAction": "#066FAC",
"umi": {
"bg": "#666666",
"text": "#FFFFFF",
"mentioned": "#FF8800"
},
"content": {
"brand": "#066FAC"
},
"interactive": {
"f01": "#066FAC",
"b01": "#E6F2F8",
"b02": "#066FAC"
},
"success": {
"b01": "#F0FCEF",
"b02": "#CEF4CE",
"b03": "#3C9949",
"b04": "#368541",
"b05": "#3C9949",
"f01": "#CEF4CE",
"f02": "#32773B",
"f11": "#46BE59"
},
"warning": {
"b01": "#FFF7EB",
"b02": "#FFE7C1",
"b03": "#F6AD16",
"f01": "#F6AD16",
"f02": "#896219",
"f11": "#F6AD16"
},
"danger": {
"b01": "#FFF7F5",
"b02": "#FFE5E0",
"b03": "#E6413C",
"b04": "#D63E39",
"f01": "#FFE5E0",
"f02": "#BE3933",
"f11": "#F88878"
},
"highlight": {
"b01": "#FF8800",
"b02": "#FFDFB1",
"b03": "#FF8800",
"f01": "#121212",
"f02": "#FF8800"
},
"informative": {
"b01": "#F6F9FC",
"f01": "#E3EBF4",
"f02": "#066FAC"
},
"neutral": {
"f01": "#FFFFFF",
"f02": "#939393",
"f03": "#757575",
"f04": "#666666",
"f05": "#494949",
"f06": "#121212",
"f07": "#121212",
"f11": "#FFFFFF",
"elevation": "#FFFFFF",
"transparent": "transparent",
"b01": "#FFFFFF",
"b02": "#F9F9F9",
"b03": "#F3F3F3",
"b04": "#666666",
"b05": "#494949",
"b06": "#000000",
"l01": "#FFFFFF",
"l02": "#E5E5E5",
"l03": "#C7C7C7",
"l04": "#666666"
},
"disabled": {
"f01": "#FFFFFF",
"f02": "#B9B9B9",
"b01": "#B9B9B9"
},
"presence": {
"busy": "#E6413C",
"available": "#3C9949",
"invisible": "#939393"
},
"highContrast": "transparent"
},
"radius": {
"circle": "50%",
"zero": "0px",
"sm": "2px",
"md": "3px",
"lg": "4px",
"xl": "8px",
"xxl": "16px",
"round": "100vw"
},
"shape": {
"borderRadius": 4
},
"shadows": [
"none",
"0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12)",
"0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
"0px 1px 8px 0px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 3px 3px -2px rgba(0, 0, 0, 0.12)",
"0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)",
"0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12)",
"0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
"0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0, 0, 0, 0.12)",
"0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12)",
"0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0, 0, 0, 0.12)",
"0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12)",
"0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0, 0, 0, 0.12)",
"0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12)",
"0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0, 0, 0, 0.12)",
"0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0, 0, 0, 0.12)",
"0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0, 0, 0, 0.12)",
"0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12)",
"0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0, 0, 0, 0.12)",
"0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0, 0, 0, 0.12)",
"0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0, 0, 0, 0.12)",
"0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0, 0, 0, 0.12)",
"0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0, 0, 0, 0.12)",
"0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0, 0, 0, 0.12)",
"0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0, 0, 0, 0.12)",
"0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12)"
],
"zIndex": {
"default": 1,
"banner": 9500,
"snackbar": 10000,
"dialog": 6000,
"mask": 5000,
"popup": 3000,
"spinner": 9050,
"model": 9000,
"dropdown": 7000,
"ripple": 1,
"elementOnRipple": 2,
"loading": 1000,
"dragging": 2000,
"moreMenu": 999,
"toast": 3000,
"memberListHeader": 100,
"floatButton": 10,
"makeZIndexStackingContext": 1,
"codeEditor": 0
},
"typography": {
"fontFamily": "Lato, Helvetica, Arial, sans-serif",
"codeFontFamily": "Courier",
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500,
"display4": {
"fontSize": "6rem",
"fontWeight": 700,
"lineHeight": "112px"
},
"display3": {
"fontSize": "3.5rem",
"fontWeight": 700,
"lineHeight": "72px"
},
"display2": {
"fontSize": "2.8125rem",
"fontWeight": 400,
"lineHeight": "56px"
},
"display1": {
"fontSize": "2.125rem",
"fontWeight": 400,
"lineHeight": "40px"
},
"headline2": {
"fontSize": "1.5rem",
"fontWeight": 700,
"lineHeight": "32px"
},
"headline": {
"fontSize": "1.5rem",
"fontWeight": 400,
"lineHeight": "32px"
},
"title2": {
"fontSize": "1.25rem",
"fontWeight": 700,
"lineHeight": "28px"
},
"title1": {
"fontSize": "1.25rem",
"fontWeight": 400,
"lineHeight": "28px"
},
"subheading2": {
"fontSize": "1rem",
"fontWeight": 700,
"lineHeight": "24px"
},
"subheading1": {
"fontSize": "1rem",
"fontWeight": 400,
"lineHeight": "24px"
},
"body2": {
"fontSize": "0.9375rem",
"fontWeight": 700,
"lineHeight": "22px"
},
"body1": {
"fontSize": "0.9375rem",
"fontWeight": 400,
"lineHeight": "22px"
},
"caption2": {
"fontSize": "0.75rem",
"fontWeight": 700,
"lineHeight": "16px"
},
"caption1": {
"fontSize": "0.75rem",
"fontWeight": 400,
"lineHeight": "16px"
},
"button": {
"fontSize": "0.9375rem",
"fontWeight": 700,
"lineHeight": "20px",
"textTransform": "none"
}
},
"transitions": {
"easing": {
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
"easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
"sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
},
"duration": {
"shortest": 150,
"shorter": 200,
"short": 250,
"standard": 300,
"complex": 375,
"enteringScreen": 225,
"leavingScreen": 195
}
}
}