@sinchsmb/ui-kit

{ "ref": { "palette": { "gray": { "25": "rgb(247, 247, 247)", "50": "rgb(240, 240, 240)", "100": "rgb(225, 225, 225)", "150": "rgb(212, 212, 212)", "200": "rgb(198, 198, 198)", "250": "rgb(185, 185, 185)", "300": "rgb(171, 171, 171)", "350": "rgb(158, 158, 158)", "400": "rgb(145, 145, 145)", "450": "rgb(132, 132, 132)", "500": "rgb(119, 119, 119)", "550": "rgb(106, 106, 106)", "600": "rgb(94, 94, 94)", "700": "rgb(71, 71, 71)", "800": "rgb(48, 48, 48)", "900": "rgb(27, 27, 27)" }, "green": { "25": "rgb(245, 250, 247)", "50": "rgb(233, 244, 236)", "100": "rgb(206, 231, 217)", "150": "rgb(183, 220, 203)", "200": "rgb(157, 209, 190)", "250": "rgb(131, 198, 178)", "300": "rgb(102, 186, 165)", "350": "rgb(71, 174, 156)", "400": "rgb(38, 162, 146)", "450": "rgb(5, 148, 135)", "500": "rgb(3, 133, 126)", "550": "rgb(1, 118, 116)", "600": "rgb(0, 105, 105)", "700": "rgb(0, 79, 79)", "800": "rgb(0, 54, 54)", "900": "rgb(0, 31, 31)" }, "blue": { "25": "rgb(242, 250, 255)", "50": "rgb(224, 243, 255)", "100": "rgb(197, 230, 251)", "150": "rgb(172, 218, 247)", "200": "rgb(145, 205, 243)", "250": "rgb(121, 193, 240)", "300": "rgb(88, 179, 236)", "350": "rgb(58, 166, 232)", "400": "rgb(54, 152, 216)", "450": "rgb(50, 138, 198)", "500": "rgb(45, 124, 180)", "550": "rgb(41, 110, 162)", "600": "rgb(37, 98, 146)", "700": "rgb(30, 73, 116)", "800": "rgb(18, 50, 79)", "900": "rgb(7, 28, 45)" }, "purple": { "25": "rgb(250, 247, 254)", "50": "rgb(245, 239, 252)", "100": "rgb(234, 221, 249)", "150": "rgb(222, 204, 246)", "200": "rgb(212, 188, 243)", "250": "rgb(202, 172, 240)", "300": "rgb(191, 155, 237)", "350": "rgb(181, 139, 234)", "400": "rgb(170, 122, 231)", "450": "rgb(159, 105, 228)", "500": "rgb(145, 91, 216)", "550": "rgb(131, 77, 202)", "600": "rgb(118, 64, 189)", "700": "rgb(91, 38, 163)", "800": "rgb(63, 21, 120)", "900": "rgb(37, 12, 70)" }, "pink": { "25": "rgb(253, 246, 251)", "50": "rgb(252, 237, 248)", "100": "rgb(248, 216, 239)", "150": "rgb(245, 199, 233)", "200": "rgb(242, 178, 224)", "250": "rgb(238, 160, 217)", "300": "rgb(234, 139, 209)", "350": "rgb(231, 118, 201)", "400": "rgb(223, 98, 190)", "450": "rgb(209, 84, 176)", "500": "rgb(194, 69, 161)", "550": "rgb(179, 54, 146)", "600": "rgb(165, 40, 132)", "700": "rgb(130, 23, 101)", "800": "rgb(89, 16, 70)", "900": "rgb(52, 9, 41)" }, "red": { "25": "rgb(255, 246, 245)", "50": "rgb(255, 237, 234)", "100": "rgb(255, 216, 213)", "150": "rgb(255, 198, 197)", "200": "rgb(254, 179, 179)", "250": "rgb(251, 160, 160)", "300": "rgb(248, 140, 140)", "350": "rgb(244, 120, 120)", "400": "rgb(241, 98, 98)", "450": "rgb(230, 79, 81)", "500": "rgb(213, 65, 69)", "550": "rgb(192, 56, 61)", "600": "rgb(171, 50, 54)", "700": "rgb(130, 38, 41)", "800": "rgb(89, 26, 28)", "900": "rgb(51, 15, 16)" }, "orange": { "25": "rgb(255, 246, 240)", "50": "rgb(255, 238, 224)", "100": "rgb(255, 218, 190)", "150": "rgb(255, 201, 160)", "200": "rgb(255, 182, 126)", "250": "rgb(255, 163, 93)", "300": "rgb(255, 141, 53)", "350": "rgb(239, 129, 44)", "400": "rgb(222, 117, 36)", "450": "rgb(204, 105, 28)", "500": "rgb(187, 93, 20)", "550": "rgb(170, 80, 11)", "600": "rgb(154, 69, 4)", "700": "rgb(117, 52, 2)", "800": "rgb(80, 35, 1)", "900": "rgb(46, 20, 1)" }, "yellow": { "25": "rgb(254, 248, 235)", "50": "rgb(253, 240, 215)", "100": "rgb(255, 222, 154)", "150": "rgb(255, 204, 100)", "200": "rgb(251, 187, 59)", "250": "rgb(234, 175, 55)", "300": "rgb(217, 161, 51)", "350": "rgb(200, 149, 47)", "400": "rgb(184, 137, 43)", "450": "rgb(167, 125, 39)", "500": "rgb(151, 112, 36)", "550": "rgb(135, 100, 32)", "600": "rgb(120, 89, 28)", "700": "rgb(91, 67, 21)", "800": "rgb(61, 45, 14)", "900": "rgb(34, 26, 8)" } }, "font-family": { "body": "\"DM Sans\", sans-serif", "mono": "\"DM Mono\", monospace" } }, "sys": { "radius": { "form-item": "8px" }, "color": { "danger": "rgb(209, 61, 66)", "warning": "rgb(243, 91, 28)", "success": "rgb(70, 166, 90)", "divider": "rgb(212, 212, 212)", "background": "rgb(247, 247, 247)", "white": "rgb(255, 255, 255)", "transparent": "rgba(0, 0, 0, 0)", "primary": { "default": "rgb(94, 37, 159)", "backdrop": { "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)" } }, "input": { "border": { "default": "rgb(171, 171, 171)", "focus": "rgb(58, 166, 232)", "invalid": "rgb(209, 61, 66)", "disabled": "rgb(171, 171, 171)" }, "background": { "default": "rgb(255, 255, 255)", "disabled": "rgb(247, 247, 247)" } }, "text": { "primary": "rgb(27, 27, 27)", "secondary": "rgb(119, 119, 119)", "disabled": "rgb(158, 158, 158)" }, "list": { "hover": "rgb(247, 247, 247)", "selected": "rgb(240, 240, 240)" } }, "shadow": { "focus": "0px 0px 0px 2px rgba(58, 166, 232, 0.5)", "selection": "0px 0px 0px 2px rgb(58, 166, 232)", "elevation": { "0": "0px 0px 0px 0px rgba(0, 0, 0, 0)", "2": "0px 0px 2px 0px rgba(0, 0, 0, 0.30196078431372547)", "4": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)", "8": "0px 2px 8px 0px rgba(0, 0, 0, 0.2)", "16": "0px 4px 16px 0px rgba(0, 0, 0, 0.1607843137254902)", "32": "0px 8px 32px 0px rgba(0, 0, 0, 0.1411764705882353)" } }, "timing-function": { "smooth": "cubic-bezier(0.12, 0.9, 0.3, 0.9)" }, "typography": { "section-headline": "font-family: \"DM Sans\", sans-serif; font-weight: 500; line-height: 36px; font-size: 28px", "card-title": "font-family: \"DM Sans\", sans-serif; font-weight: 500; line-height: 22px; font-size: 19px", "card-subtitle": "font-family: \"DM Sans\", sans-serif; font-weight: 400; line-height: 22px; font-size: 19px", "group-header": "font-family: \"DM Sans\", sans-serif; font-weight: 500; line-height: 20px; font-size: 17px", "body": "font-family: \"DM Sans\", sans-serif; font-weight: 400; line-height: 19px; font-size: 16px", "body-strong": "font-family: \"DM Sans\", sans-serif; font-weight: 500; line-height: 19px; font-size: 16px", "body-link": "font-family: \"DM Sans\", sans-serif; font-weight: 400; line-height: 19px; font-size: 16px", "caption": "font-family: \"DM Sans\", sans-serif; font-weight: 400; line-height: 16px; font-size: 14px", "caption-link": "font-family: \"DM Sans\", sans-serif; font-weight: 400; line-height: 16px; font-size: 14px" } }, "comp": { "button": { "primary": { "background": { "default": "rgb(94, 37, 159)", "hover": "rgb(131, 81, 188)", "active": "rgb(66, 15, 124)", "toggled": "rgb(66, 15, 124)", "disabled": "rgb(158, 158, 158)" }, "border": { "default": "rgb(94, 37, 159)", "hover": "rgb(131, 81, 188)", "active": "rgb(66, 15, 124)", "toggled": "rgb(66, 15, 124)", "disabled": "rgb(158, 158, 158)" }, "text": { "default": "rgb(255, 255, 255)", "hover": "rgb(255, 255, 255)", "active": "rgb(255, 255, 255)", "toggled": "rgb(255, 255, 255)", "disabled": "rgb(255, 255, 255)" }, "elevation": { "default": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)", "hover": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)" } }, "default": { "background": { "default": "rgb(255, 255, 255)", "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)", "toggled": "rgb(221, 206, 237)", "disabled": "rgb(255, 255, 255)" }, "border": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)", "active": "rgb(94, 37, 159)", "toggled": "rgb(94, 37, 159)", "disabled": "rgb(158, 158, 158)" }, "text": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)", "active": "rgb(94, 37, 159)", "toggled": "rgb(94, 37, 159)", "disabled": "rgb(158, 158, 158)" }, "elevation": { "default": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)", "hover": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)" } }, "subtle": { "background": { "default": "rgba(0, 0, 0, 0)", "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)", "toggled": "rgb(221, 206, 237)", "disabled": "rgb(255, 255, 255)" }, "border": { "default": "rgba(0, 0, 0, 0)", "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)", "toggled": "rgb(221, 206, 237)", "disabled": "rgba(0, 0, 0, 0)" }, "text": { "default": "rgb(27, 27, 27)", "hover": "rgb(27, 27, 27)", "active": "rgb(27, 27, 27)", "toggled": "rgb(27, 27, 27)", "disabled": "rgb(158, 158, 158)" } }, "subtlePrimary": { "background": { "default": "rgba(0, 0, 0, 0)", "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)", "toggled": "rgb(221, 206, 237)", "disabled": "rgb(255, 255, 255)" }, "border": { "default": "rgba(0, 0, 0, 0)", "hover": "rgb(243, 238, 249)", "active": "rgb(221, 206, 237)", "toggled": "rgb(221, 206, 237)", "disabled": "rgba(0, 0, 0, 0)" }, "text": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)", "active": "rgb(94, 37, 159)", "toggled": "rgb(94, 37, 159)", "disabled": "rgb(158, 158, 158)" } }, "danger": { "background": { "default": "rgb(255, 255, 255)", "hover": "rgb(255, 237, 234)", "active": "rgb(255, 216, 213)", "toggled": "rgb(255, 216, 213)", "disabled": "rgb(255, 255, 255)" }, "border": { "default": "rgb(209, 61, 66)", "hover": "rgb(209, 61, 66)", "active": "rgb(209, 61, 66)", "toggled": "rgb(209, 61, 66)", "disabled": "rgb(254, 179, 179)" }, "text": { "default": "rgb(209, 61, 66)", "hover": "rgb(209, 61, 66)", "active": "rgb(209, 61, 66)", "toggled": "rgb(209, 61, 66)", "disabled": "rgb(254, 179, 179)" }, "elevation": { "default": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)", "hover": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)" } } }, "segmented-control": { "item": { "radius": "5px", "background": { "default": "rgba(0, 0, 0, 0)", "active": "rgb(255, 255, 255)" }, "border": { "default": "rgba(0, 0, 0, 0)", "active": "rgb(94, 37, 159)" }, "text": { "default": "rgb(71, 71, 71)", "active": "rgb(94, 37, 159)" }, "elevation": { "active": "0px 1px 4px 0px rgba(0, 0, 0, 0.23921568627450981)" } }, "container": { "background": "rgb(240, 240, 240)", "radius": "8px" } }, "card": { "radius": "8px" }, "modal": { "radius": "12px" }, "section": { "headline": { "background": "rgb(247, 247, 247)" }, "footer": { "background": "rgb(247, 247, 247)" } }, "skeleton": { "rounded": { "radius": "8px" }, "gradient": "linear-gradient(90deg, rgb(238, 238, 238) 0.3%, rgb(238, 238, 238) 13.54%, rgb(247, 247, 247) 39.58%, rgb(238, 238, 238) 49.48%, rgb(238, 238, 238) 100%);", "background": "rgb(238, 238, 238)" }, "button-group": { "radius-between": "0px" }, "checkbox": { "background": { "checked": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)" } } }, "radio": { "background": { "checked": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)" } } }, "switch": { "background": { "toggled": { "default": "rgb(94, 37, 159)", "hover": "rgb(94, 37, 159)" } } }, "datepicker": { "day": { "text": { "default": "rgb(27, 27, 27)", "hover": "rgb(94, 37, 159)", "selected": "rgb(255, 255, 255)", "outsideMonth": "rgb(158, 158, 158)", "outsideMonthSelected": "rgb(255, 255, 255)" }, "background": { "default": "rgba(0, 0, 0, 0)", "hover": "rgb(243, 238, 249)", "selected": "rgb(94, 37, 159)", "outsideMonth": "rgba(0, 0, 0, 0)", "outsideMonthSelected": "rgb(158, 158, 158)" } } }, "numberfield": { "suffix-button": { "radius": "4px", "background": { "hover": "rgb(243, 238, 249)" } } } } }