@patreon/studio
Version:
Patreon Studio Design System
1,103 lines • 35.4 kB
JSON
{
"components": {
"AbsorbClick": {},
"ActionBar": {},
"Alert": {},
"AreaSpan": {},
"Avatar": {},
"Badge": {},
"Banner": {},
"BodyText": {},
"BodyTextWithCss": {},
"Box": {},
"Button": {},
"Card": {},
"Card.Content": {},
"CardLayout": {},
"CardWithHeader": {},
"Checkbox": {},
"Chip": {},
"Col": {},
"Collapse": {},
"ColorSystemContainer": {},
"DataText": {},
"DataTextWithCss": {},
"Dialog": {},
"Dialog.Title": {},
"Dialog.Content": {},
"DisplayText": {},
"DisplayTextWithCss": {},
"Divider": {},
"Dropdown": {},
"Dropdown.List": {},
"FluidContent": {},
"Grid": {},
"HeadingText": {},
"HeadingTextWithCss": {},
"Image": {},
"ImpliedInput": {},
"InlineError": {},
"InlineHelpText": {},
"InlineSuccess": {},
"InputGroup": {},
"Label": {},
"LoadingSpinner": {},
"MiniContent": {},
"NarrowContent": {},
"OverlayStackComponent": {},
"PatreonMark": {},
"PatreonWordmark": {},
"Pill": {},
"Popover": {},
"PortalPassthrough": {},
"RadioButton": {},
"RadioGroup": {},
"RadioInput": {},
"Row": {},
"SegmentedControl": {},
"Select": {},
"SpacerWithCss": {},
"Stack": {},
"StackWithCss": {},
"StandaloneBadge": {},
"StudioLoggerProvider": {},
"StudioProvider": {},
"TextInput": {},
"TextLink": {},
"ThreeColumnArea": {},
"Toaster": {},
"ToasterConsumer": {},
"Toggle": {},
"TokenModeContainer": {},
"Tooltip": {},
"TopNav": {},
"TopNav.Search": {},
"TwoColumnArea": {},
"VisuallyHiddenText": {},
"WideContent": {},
"useClickArea": {},
"IconAccount": {},
"IconActivity": {},
"IconAirplay": {},
"IconAirplayAudio": {},
"IconAlarm": {},
"IconAlignCenter": {},
"IconAlignLeft": {},
"IconAlignSpan": {},
"IconAndroid": {},
"IconAnimation": {},
"IconApple": {},
"IconArchive": {},
"IconArrowDown": {},
"IconArrowLeft": {},
"IconArrowLeftRight": {},
"IconArrowNe": {},
"IconArrowNw": {},
"IconArrowRight": {},
"IconArrowSe": {},
"IconArrowSw": {},
"IconArrowUp": {},
"IconAtm": {},
"IconAttachment": {},
"IconAudio": {},
"IconAudioLive": {},
"IconBackpack": {},
"IconBell": {},
"IconBellCheck": {},
"IconBellOff": {},
"IconBellPlus": {},
"IconBinoculars": {},
"IconBlockquote": {},
"IconBluetooth": {},
"IconBook": {},
"IconBookmark": {},
"IconBookmarkOutline": {},
"IconBranch": {},
"IconBrandApple": {},
"IconBrandCrowdcast": {},
"IconBrandDiscord": {},
"IconBrandFacebook": {},
"IconBrandFigma": {},
"IconBrandGithub": {},
"IconBrandGoogle": {},
"IconBrandInstagram": {},
"IconBrandLinkedin": {},
"IconBrandMemberful": {},
"IconBrandNotion": {},
"IconBrandOBS": {},
"IconBrandOrigami": {},
"IconBrandPatreon": {},
"IconBrandPaypal": {},
"IconBrandPinterest": {},
"IconBrandReddit": {},
"IconBrandSpotify": {},
"IconBrandStripe": {},
"IconBrandTiktok": {},
"IconBrandTumblr": {},
"IconBrandTwitch": {},
"IconBrandTwitter": {},
"IconBrandVimeo": {},
"IconBrandYoutube": {},
"IconBrandshopify": {},
"IconBriefcase": {},
"IconBrightnessHigh": {},
"IconBrightnessLow": {},
"IconBrowserRefresh": {},
"IconBrowserStop": {},
"IconBrowserWindow": {},
"IconBrowserWindowGear": {},
"IconBubble": {},
"IconBubbleAlert": {},
"IconBubbleChat": {},
"IconBubbleChatAdd": {},
"IconBubbleChatOff": {},
"IconBubbleOutline": {},
"IconBubbleQuestion": {},
"IconBug": {},
"IconCalculator": {},
"IconCalendar": {},
"IconCalendarAdd": {},
"IconCalendarDay": {},
"IconCalendarMonth": {},
"IconCalendarNext": {},
"IconCalendarRemove": {},
"IconCalendarSchedule": {},
"IconCalendarScheduled": {},
"IconCalendarWeek": {},
"IconCamera": {},
"IconCameraFlip": {},
"IconCameraOff": {},
"IconCameraRoll": {},
"IconCash": {},
"IconCatalog": {},
"IconCategories": {},
"IconChart": {},
"IconCheck": {},
"IconCheckmark": {},
"IconCheckmarkAlt": {},
"IconChevronDown": {},
"IconChevronDownAlt": {},
"IconChevronLeft": {},
"IconChevronLeftAlt": {},
"IconChevronNe": {},
"IconChevronNw": {},
"IconChevronRight": {},
"IconChevronRightAlt": {},
"IconChevronSe": {},
"IconChevronSw": {},
"IconChevronUp": {},
"IconChevronUpAlt": {},
"IconChromecast": {},
"IconCircle": {},
"IconCircleCheck": {},
"IconCircleCheckOutline": {},
"IconCircleDashed": {},
"IconCircleIncomplete": {},
"IconCircleOutline": {},
"IconCirclePlus": {},
"IconClear": {},
"IconClock": {},
"IconClose": {},
"IconCloud": {},
"IconCloudDownload": {},
"IconCloudUpload": {},
"IconCode": {},
"IconColorPalette": {},
"IconColumn": {},
"IconCommandLine": {},
"IconCompass": {},
"IconCompose": {},
"IconComputer": {},
"IconConfetti": {},
"IconContract": {},
"IconContrast": {},
"IconCookingPot": {},
"IconCopy": {},
"IconCopyright": {},
"IconCreditCard": {},
"IconCreditCardBack": {},
"IconCrop": {},
"IconCube": {},
"IconCursor": {},
"IconCut": {},
"IconDashboard": {},
"IconDatabase": {},
"IconDelete": {},
"IconDesktop": {},
"IconDevices": {},
"IconDiscoball": {},
"IconDocument": {},
"IconDocumentAdd": {},
"IconDocumentCsv": {},
"IconDocumentDownload": {},
"IconDocumentOff": {},
"IconDocumentPdf": {},
"IconDocumentPercentage": {},
"IconDocumentUpload": {},
"IconDollar": {},
"IconDot": {},
"IconDownload": {},
"IconDrafts": {},
"IconDrag": {},
"IconEditorAlignCenter": {},
"IconEditorAlignJustifyAll": {},
"IconEditorAlignJustifyCenter": {},
"IconEditorAlignJustifyLeft": {},
"IconEditorAlignJustifyRight": {},
"IconEditorAlignLeft": {},
"IconEditorAlignRight": {},
"IconEditorAttachment": {},
"IconEditorBackColor": {},
"IconEditorBlockquote": {},
"IconEditorBold": {},
"IconEditorExpand": {},
"IconEditorExtract": {},
"IconEditorFontColor": {},
"IconEditorHeading": {},
"IconEditorIndent": {},
"IconEditorInsert": {},
"IconEditorItalic": {},
"IconEditorLink": {},
"IconEditorOrderedList": {},
"IconEditorOutdent": {},
"IconEditorParagraph": {},
"IconEditorRedo": {},
"IconEditorShrink": {},
"IconEditorStrikethrough": {},
"IconEditorText": {},
"IconEditorTextSize": {},
"IconEditorUnderline": {},
"IconEditorUndo": {},
"IconEditorUnorderedList": {},
"IconEducation": {},
"IconEject": {},
"IconElectricGuitar": {},
"IconEmojiAngry": {},
"IconEmojiFrown": {},
"IconEmojiGrinning": {},
"IconEmojiGrinningHeartEyes": {},
"IconEmojiGrinningSmilingEyes": {},
"IconEmojiGrinningSmilingEyesOff": {},
"IconEmojiMore": {},
"IconEmojiNeutral": {},
"IconEmojiSmile": {},
"IconEmojiSmilingEyes": {},
"IconEmojiSunglasses": {},
"IconEmojiWinking": {},
"IconEqualizer": {},
"IconError": {},
"IconExitPictInPict": {},
"IconExpand": {},
"IconEyedropper": {},
"IconFeed": {},
"IconFilter": {},
"IconFilterAlt": {},
"IconFlash": {},
"IconFlashAuto": {},
"IconFlashOff": {},
"IconFlashlight": {},
"IconFlex": {},
"IconFolder": {},
"IconFolderNew": {},
"IconGaiter": {},
"IconGear": {},
"IconGift": {},
"IconGo": {},
"IconGrid": {},
"IconGuitar": {},
"IconHammer": {},
"IconHand": {},
"IconHandshake": {},
"IconHashtag": {},
"IconHeadphones": {},
"IconHeart": {},
"IconHeartOutline": {},
"IconHeartbroken": {},
"IconHeartrate": {},
"IconHelp": {},
"IconHistory": {},
"IconHome": {},
"IconHoodie": {},
"IconHorizontalCrop": {},
"IconHourglass": {},
"IconId": {},
"IconInProgress": {},
"IconIncognito": {},
"IconIncome": {},
"IconIndeterminate": {},
"IconInfo": {},
"IconJourney": {},
"IconJunk": {},
"IconKey": {},
"IconKeyboard": {},
"IconKeypad": {},
"IconLanguage": {},
"IconLaptop": {},
"IconLaunch": {},
"IconLightBulb": {},
"IconLightning": {},
"IconLimit": {},
"IconLink": {},
"IconLivestream": {},
"IconLocation": {},
"IconLock": {},
"IconLogIn": {},
"IconLogOut": {},
"IconLongSleeveTShirt": {},
"IconManiculeUp": {},
"IconMap": {},
"IconMapPin": {},
"IconMegaphone": {},
"IconMegaphones": {},
"IconMembership": {},
"IconMembershipCollection": {},
"IconMenu": {},
"IconMenuWithCursor": {},
"IconMessage": {},
"IconMessageNew": {},
"IconMicrophone": {},
"IconMicrophoneOff": {},
"IconMinus": {},
"IconMoneyLock": {},
"IconMore": {},
"IconMoreAlternate": {},
"IconMovie": {},
"IconMovieCamera": {},
"IconMug": {},
"IconNarrowNe": {},
"IconNavigation": {},
"IconNewBadge": {},
"IconNewBadgeExclamation": {},
"IconNewMessage": {},
"IconNews": {},
"IconNo": {},
"IconNoEntry": {},
"IconPackage": {},
"IconPage": {},
"IconPaidMember": {},
"IconPaidMembers": {},
"IconPaintBrush": {},
"IconPaperAirplane": {},
"IconPassport": {},
"IconPatreon": {},
"IconPencil": {},
"IconPhone": {},
"IconPhoto": {},
"IconPictInPict": {},
"IconPlaybackCaptions": {},
"IconPlaybackFastForward": {},
"IconPlaybackNext": {},
"IconPlaybackNoCaptions": {},
"IconPlaybackPause": {},
"IconPlaybackPauseButton": {},
"IconPlaybackPlay": {},
"IconPlaybackPlayButton": {},
"IconPlaybackPrevious": {},
"IconPlaybackRewind": {},
"IconPlaybackShuffle": {},
"IconPlaybackSpeed": {},
"IconPlaybackStop": {},
"IconPlaylist": {},
"IconPlus": {},
"IconPodcast": {},
"IconPodcastAlt": {},
"IconPoll": {},
"IconPopOut": {},
"IconPostageStamp": {},
"IconPostcard": {},
"IconPoster": {},
"IconPosts": {},
"IconPrint": {},
"IconPromoted": {},
"IconPushpin": {},
"IconQRCode": {},
"IconQRCodeScan": {},
"IconQuill": {},
"IconRSS": {},
"IconRadio": {},
"IconRedo": {},
"IconRefund": {},
"IconRepeat": {},
"IconReplace": {},
"IconReplay": {},
"IconReply": {},
"IconReplyAll": {},
"IconReport": {},
"IconRepost": {},
"IconRotateClockwise": {},
"IconRotateCounterClockwise": {},
"IconSave": {},
"IconSaved": {},
"IconScience": {},
"IconScissors": {},
"IconSearch": {},
"IconSearchAlt": {},
"IconSecurity": {},
"IconSecurityAuto": {},
"IconSendTo": {},
"IconShare": {},
"IconShareAndroid": {},
"IconShoppingCart": {},
"IconShuffle": {},
"IconSidebarLeft": {},
"IconSidebarLeftClose": {},
"IconSidebarLeftOpen": {},
"IconSidebarRight": {},
"IconSidebarRightClose": {},
"IconSidebarRightOpen": {},
"IconSignIn": {},
"IconSignOut": {},
"IconSkipAhead10": {},
"IconSkipAhead15": {},
"IconSkipBack10": {},
"IconSkipBack15": {},
"IconSleepTimer": {},
"IconSlidersHorizontal": {},
"IconSlidersVertical": {},
"IconSort": {},
"IconSortingArrow": {},
"IconSparkles": {},
"IconStar": {},
"IconStore": {},
"IconSunset": {},
"IconSwipe": {},
"IconSwitch": {},
"IconSync": {},
"IconTShirt": {},
"IconTablet": {},
"IconTag": {},
"IconTarget": {},
"IconTheater": {},
"IconTicket": {},
"IconTiers": {},
"IconToken": {},
"IconToteBag": {},
"IconTrendDown": {},
"IconTrendDownAlt": {},
"IconTrendUp": {},
"IconTrendUpAlt": {},
"IconTrophy": {},
"IconTv": {},
"IconUnarchive": {},
"IconUnlink": {},
"IconUnlock": {},
"IconUnplayed": {},
"IconUnsave": {},
"IconUpload": {},
"IconUser": {},
"IconUserCheck": {},
"IconUserEdit": {},
"IconUserFollow": {},
"IconUserFriends": {},
"IconUserGroup": {},
"IconUserLock": {},
"IconUserSearch": {},
"IconUserUnfollow": {},
"IconUsername": {},
"IconVenmo": {},
"IconVerifiedBadge": {},
"IconVerticalCrop": {},
"IconVideo": {},
"IconVideoCamera": {},
"IconVideoCameraOff": {},
"IconVideoGame": {},
"IconView": {},
"IconViewOff": {},
"IconVolumeHigh": {},
"IconVolumeLow": {},
"IconVolumeMid": {},
"IconVolumeOff": {},
"IconVote": {},
"IconWarning": {},
"IconWifi": {},
"IconWorld": {},
"IconWorldPin": {},
"IconWorlds": {},
"IconWrench": {},
"IconZoomIn": {},
"IconZoomOut": {}
},
"functions": [
"OpaqueResponsive",
"classNameForBodyText",
"classNameForColor",
"classNameForDataBodyText",
"classNameForDataDisplayText",
"classNameForDataHeadingText",
"classNameForDisplayText",
"classNameForHeadingText",
"classNameForTextLayout",
"classNameForTextLinkStyle",
"colorMod",
"computeColorDistance",
"computeContrastRatio",
"convertLegacyUnitValue",
"convertLegacyUnitValues",
"css",
"cssForBodyText",
"cssForColorScheme",
"cssForCustomText",
"cssForDarkMode",
"cssForDisplayText",
"cssForEllipsis",
"cssForHeadingText",
"cssForLegacyResponsive",
"cssForLightMode",
"cssForResponsive",
"cssForResponsiveProp",
"cssWithTransparentToken",
"escapeForCustomText",
"generateColorPalette",
"hasResponsiveValue",
"hcta2hex",
"hex2hcta",
"isBreakpointAvailable",
"isResponsiveValueAvailable",
"isTokenColorMode",
"isValidHex",
"isValidHex3",
"isValidHex6",
"isValidHex8",
"legacyResponsiveProp",
"lerp",
"lerpColor",
"mediaForBreakpoint",
"mergeNamedResponsive",
"mergeResponsive",
"styled",
"tokenColorModeClassName",
"tokenDefinitionsClassName",
"tokenScreenModeClassName",
"tokenSharedModeClassName",
"tokenWithOpacity",
"wrapResponsive"
],
"hooks": [
"useColorSystemContainerState",
"useCurrentBreakpoint",
"useCurrentColorScheme",
"useCurrentResponsiveValue",
"useExtractTokenValuePair",
"useExtractedTokenCss",
"useLogger",
"useOverlayStack",
"useSwipe",
"useToaster",
"useTokenModes"
],
"data": {
"Spacer": {
"compare": null
},
"breakpointNames": [
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"breakpoints": {
"xs": 0,
"sm": 36.75,
"md": 49.75,
"lg": 61.125,
"xl": 80,
"xxl": 90
},
"breakpointsInPixels": {
"xs": 0,
"sm": 588,
"md": 796,
"lg": 978,
"xl": 1280,
"xxl": 1440
},
"tokens": {
"global": {
"bg": {
"base": {
"default": "var(--global-bg-base-default)",
"hover": "var(--global-bg-base-hover)",
"pressed": "var(--global-bg-base-pressed)"
},
"baseAlt": {
"default": "var(--global-bg-baseAlt-default)",
"hover": "var(--global-bg-baseAlt-hover)",
"pressed": "var(--global-bg-baseAlt-pressed)"
},
"elevated": {
"default": "var(--global-bg-elevated-default)",
"hover": "var(--global-bg-elevated-hover)",
"pressed": "var(--global-bg-elevated-pressed)"
},
"page": {
"default": "var(--global-bg-page-default)",
"hover": "var(--global-bg-page-hover)",
"pressed": "var(--global-bg-page-pressed)"
},
"pageAlt": {
"default": "var(--global-bg-pageAlt-default)",
"hover": "var(--global-bg-pageAlt-hover)",
"pressed": "var(--global-bg-pageAlt-pressed)"
}
},
"border": {
"action": {
"default": "var(--global-border-action-default)",
"hover": "var(--global-border-action-hover)",
"pressed": "var(--global-border-action-pressed)"
},
"muted": {
"default": "var(--global-border-muted-default)",
"hover": "var(--global-border-muted-hover)",
"pressed": "var(--global-border-muted-pressed)"
},
"strong": {
"default": "var(--global-border-strong-default)",
"hover": "var(--global-border-strong-hover)",
"pressed": "var(--global-border-strong-pressed)"
}
},
"borderWidth": {
"none": "var(--global-borderWidth-none)",
"thick": "var(--global-borderWidth-thick)",
"thin": "var(--global-borderWidth-thin)"
},
"boxShadow": {
"high": "var(--global-boxShadow-high)",
"low": "var(--global-boxShadow-low)",
"mid": "var(--global-boxShadow-mid)",
"subtle": "var(--global-boxShadow-subtle)"
},
"brand": {
"discord": "var(--global-brand-discord)",
"facebook": "var(--global-brand-facebook)",
"google": "var(--global-brand-google)",
"memberful": "var(--global-brand-memberful)",
"patreon": "var(--global-brand-patreon)",
"pinterest": "var(--global-brand-pinterest)",
"reddit": "var(--global-brand-reddit)",
"spotify": "var(--global-brand-spotify)",
"tumblr": "var(--global-brand-tumblr)",
"twitch": "var(--global-brand-twitch)",
"twitter": "var(--global-brand-twitter)",
"youtube": "var(--global-brand-youtube)",
"youtubeBlack": "var(--global-brand-youtubeBlack)"
},
"constant": {
"black": {
"default": "var(--global-constant-black-default)",
"hover": "var(--global-constant-black-hover)",
"pressed": "var(--global-constant-black-pressed)"
},
"blackMuted": {
"default": "var(--global-constant-blackMuted-default)",
"hover": "var(--global-constant-blackMuted-hover)",
"pressed": "var(--global-constant-blackMuted-pressed)"
},
"blackSubtle": {
"default": "var(--global-constant-blackSubtle-default)",
"hover": "var(--global-constant-blackSubtle-hover)",
"pressed": "var(--global-constant-blackSubtle-pressed)"
},
"white": {
"default": "var(--global-constant-white-default)",
"hover": "var(--global-constant-white-hover)",
"pressed": "var(--global-constant-white-pressed)"
},
"whiteMuted": {
"default": "var(--global-constant-whiteMuted-default)",
"hover": "var(--global-constant-whiteMuted-hover)",
"pressed": "var(--global-constant-whiteMuted-pressed)"
},
"whiteSubtle": {
"default": "var(--global-constant-whiteSubtle-default)",
"hover": "var(--global-constant-whiteSubtle-hover)",
"pressed": "var(--global-constant-whiteSubtle-pressed)"
}
},
"content": {
"critical": {
"default": "var(--global-content-critical-default)",
"hover": "var(--global-content-critical-hover)",
"pressed": "var(--global-content-critical-pressed)"
},
"decorative": {
"default": "var(--global-content-decorative-default)",
"hover": "var(--global-content-decorative-hover)",
"pressed": "var(--global-content-decorative-pressed)"
},
"muted": {
"default": "var(--global-content-muted-default)",
"hover": "var(--global-content-muted-hover)",
"pressed": "var(--global-content-muted-pressed)"
},
"primary": {
"default": "var(--global-content-primary-default)",
"hover": "var(--global-content-primary-hover)",
"pressed": "var(--global-content-primary-pressed)"
},
"regular": {
"default": "var(--global-content-regular-default)",
"hover": "var(--global-content-regular-hover)",
"pressed": "var(--global-content-regular-pressed)"
},
"success": {
"default": "var(--global-content-success-default)",
"hover": "var(--global-content-success-hover)",
"pressed": "var(--global-content-success-pressed)"
},
"warning": {
"default": "var(--global-content-warning-default)",
"hover": "var(--global-content-warning-hover)",
"pressed": "var(--global-content-warning-pressed)"
}
},
"control": {
"action": {
"default": "var(--global-control-action-default)",
"hover": "var(--global-control-action-hover)",
"pressed": "var(--global-control-action-pressed)"
},
"surface": {
"default": "var(--global-control-surface-default)",
"hover": "var(--global-control-surface-hover)",
"pressed": "var(--global-control-surface-pressed)"
}
},
"critical": {
"onSurface": {
"default": "var(--global-critical-onSurface-default)",
"hover": "var(--global-critical-onSurface-hover)",
"pressed": "var(--global-critical-onSurface-pressed)"
},
"onSurfaceMuted": {
"default": "var(--global-critical-onSurfaceMuted-default)",
"hover": "var(--global-critical-onSurfaceMuted-hover)",
"pressed": "var(--global-critical-onSurfaceMuted-pressed)"
},
"surface": {
"default": "var(--global-critical-surface-default)",
"hover": "var(--global-critical-surface-hover)",
"pressed": "var(--global-critical-surface-pressed)"
},
"surfaceMuted": {
"default": "var(--global-critical-surfaceMuted-default)",
"hover": "var(--global-critical-surfaceMuted-hover)",
"pressed": "var(--global-critical-surfaceMuted-pressed)"
}
},
"effects": {
"lg": "var(--global-effects-lg)",
"md": "var(--global-effects-md)",
"sm": "var(--global-effects-sm)"
},
"icon": {
"lg": "var(--global-icon-lg)",
"md": "var(--global-icon-md)",
"sm": "var(--global-icon-sm)",
"xl": "var(--global-icon-xl)",
"xs": "var(--global-icon-xs)"
},
"inverted": {
"decorative": {
"default": "var(--global-inverted-decorative-default)",
"hover": "var(--global-inverted-decorative-hover)",
"pressed": "var(--global-inverted-decorative-pressed)"
},
"muted": {
"default": "var(--global-inverted-muted-default)",
"hover": "var(--global-inverted-muted-hover)",
"pressed": "var(--global-inverted-muted-pressed)"
},
"regular": {
"default": "var(--global-inverted-regular-default)",
"hover": "var(--global-inverted-regular-hover)",
"pressed": "var(--global-inverted-regular-pressed)"
},
"surface": {
"default": "var(--global-inverted-surface-default)",
"hover": "var(--global-inverted-surface-hover)",
"pressed": "var(--global-inverted-surface-pressed)"
}
},
"layer": {
"z0": "var(--global-layer-z0)",
"z1": "var(--global-layer-z1)",
"z10": "var(--global-layer-z10)",
"z11": "var(--global-layer-z11)",
"z12": "var(--global-layer-z12)",
"z2": "var(--global-layer-z2)",
"z20": "var(--global-layer-z20)",
"z3": "var(--global-layer-z3)",
"z4": "var(--global-layer-z4)",
"z5": "var(--global-layer-z5)",
"z6": "var(--global-layer-z6)",
"z7": "var(--global-layer-z7)",
"z8": "var(--global-layer-z8)",
"z9": "var(--global-layer-z9)"
},
"nonSemantic": {
"blueberry": "var(--global-nonSemantic-blueberry)",
"holly": "var(--global-nonSemantic-holly)",
"honeycomb": "var(--global-nonSemantic-honeycomb)",
"jasper": "var(--global-nonSemantic-jasper)",
"lavender": "var(--global-nonSemantic-lavender)",
"lollipop": "var(--global-nonSemantic-lollipop)",
"moonshade": "var(--global-nonSemantic-moonshade)",
"ocean": "var(--global-nonSemantic-ocean)",
"pumpkin": "var(--global-nonSemantic-pumpkin)",
"raspberry": "var(--global-nonSemantic-raspberry)"
},
"opacity": {
"disabled": "var(--global-opacity-disabled)",
"enabled": "var(--global-opacity-enabled)"
},
"primary": {
"onSurface": {
"default": "var(--global-primary-onSurface-default)",
"hover": "var(--global-primary-onSurface-hover)",
"pressed": "var(--global-primary-onSurface-pressed)"
},
"onSurfaceMuted": {
"default": "var(--global-primary-onSurfaceMuted-default)",
"hover": "var(--global-primary-onSurfaceMuted-hover)",
"pressed": "var(--global-primary-onSurfaceMuted-pressed)"
},
"onSurfaceSubtle": {
"default": "var(--global-primary-onSurfaceSubtle-default)",
"hover": "var(--global-primary-onSurfaceSubtle-hover)",
"pressed": "var(--global-primary-onSurfaceSubtle-pressed)"
},
"surface": {
"default": "var(--global-primary-surface-default)",
"hover": "var(--global-primary-surface-hover)",
"pressed": "var(--global-primary-surface-pressed)"
},
"surfaceMuted": {
"default": "var(--global-primary-surfaceMuted-default)",
"hover": "var(--global-primary-surfaceMuted-hover)",
"pressed": "var(--global-primary-surfaceMuted-pressed)"
},
"surfaceSubtle": {
"default": "var(--global-primary-surfaceSubtle-default)",
"hover": "var(--global-primary-surfaceSubtle-hover)",
"pressed": "var(--global-primary-surfaceSubtle-pressed)"
}
},
"radius": {
"circle": "var(--global-radius-circle)",
"lg": "var(--global-radius-lg)",
"md": "var(--global-radius-md)",
"none": "var(--global-radius-none)",
"pill": "var(--global-radius-pill)",
"sm": "var(--global-radius-sm)",
"smMd": "var(--global-radius-smMd)",
"xl": "var(--global-radius-xl)"
},
"rich": {
"action": {
"default": "var(--global-rich-action-default)",
"hover": "var(--global-rich-action-hover)",
"pressed": "var(--global-rich-action-pressed)"
},
"muted": {
"default": "var(--global-rich-muted-default)",
"hover": "var(--global-rich-muted-hover)",
"pressed": "var(--global-rich-muted-pressed)"
},
"regular": {
"default": "var(--global-rich-regular-default)",
"hover": "var(--global-rich-regular-hover)",
"pressed": "var(--global-rich-regular-pressed)"
},
"surface": {
"default": "var(--global-rich-surface-default)",
"hover": "var(--global-rich-surface-hover)",
"pressed": "var(--global-rich-surface-pressed)"
},
"surfaceAlt": {
"default": "var(--global-rich-surfaceAlt-default)",
"hover": "var(--global-rich-surfaceAlt-hover)",
"pressed": "var(--global-rich-surfaceAlt-pressed)"
}
},
"space": {
"x0": "var(--global-space-x0)",
"x12": "var(--global-space-x12)",
"x16": "var(--global-space-x16)",
"x20": "var(--global-space-x20)",
"x24": "var(--global-space-x24)",
"x32": "var(--global-space-x32)",
"x4": "var(--global-space-x4)",
"x40": "var(--global-space-x40)",
"x48": "var(--global-space-x48)",
"x56": "var(--global-space-x56)",
"x8": "var(--global-space-x8)"
},
"success": {
"onSurface": {
"default": "var(--global-success-onSurface-default)",
"hover": "var(--global-success-onSurface-hover)",
"pressed": "var(--global-success-onSurface-pressed)"
},
"onSurfaceMuted": {
"default": "var(--global-success-onSurfaceMuted-default)",
"hover": "var(--global-success-onSurfaceMuted-hover)",
"pressed": "var(--global-success-onSurfaceMuted-pressed)"
},
"surface": {
"default": "var(--global-success-surface-default)",
"hover": "var(--global-success-surface-hover)",
"pressed": "var(--global-success-surface-pressed)"
},
"surfaceMuted": {
"default": "var(--global-success-surfaceMuted-default)",
"hover": "var(--global-success-surfaceMuted-hover)",
"pressed": "var(--global-success-surfaceMuted-pressed)"
}
},
"transition": {
"fast": {
"duration": "var(--global-transition-fast-duration)",
"easing": "var(--global-transition-fast-easing)"
},
"regular": {
"duration": "var(--global-transition-regular-duration)",
"easing": "var(--global-transition-regular-easing)"
},
"slow": {
"duration": "var(--global-transition-slow-duration)",
"easing": "var(--global-transition-slow-easing)"
}
},
"warning": {
"onSurface": {
"default": "var(--global-warning-onSurface-default)",
"hover": "var(--global-warning-onSurface-hover)",
"pressed": "var(--global-warning-onSurface-pressed)"
},
"onSurfaceMuted": {
"default": "var(--global-warning-onSurfaceMuted-default)",
"hover": "var(--global-warning-onSurfaceMuted-hover)",
"pressed": "var(--global-warning-onSurfaceMuted-pressed)"
},
"surface": {
"default": "var(--global-warning-surface-default)",
"hover": "var(--global-warning-surface-hover)",
"pressed": "var(--global-warning-surface-pressed)"
},
"surfaceMuted": {
"default": "var(--global-warning-surfaceMuted-default)",
"hover": "var(--global-warning-surfaceMuted-hover)",
"pressed": "var(--global-warning-surfaceMuted-pressed)"
}
}
}
},
"typeTokens": {
"body": {
"fontSizes": {
"lg": "var(--type-body-fontSizes-lg)",
"md": "var(--type-body-fontSizes-md)",
"sm": "var(--type-body-fontSizes-sm)",
"xs": "var(--type-body-fontSizes-xs)"
},
"fontStack": "var(--type-body-fontStack)",
"fontWeights": {
"bold": "var(--type-body-fontWeights-bold)",
"normal": "var(--type-body-fontWeights-normal)"
},
"letterSpacing": "var(--type-body-letterSpacing)",
"lineHeight": "var(--type-body-lineHeight)"
},
"dataBody": {
"fontSizes": {
"lg": "var(--type-dataBody-fontSizes-lg)",
"md": "var(--type-dataBody-fontSizes-md)",
"sm": "var(--type-dataBody-fontSizes-sm)",
"xs": "var(--type-dataBody-fontSizes-xs)"
},
"fontStack": "var(--type-dataBody-fontStack)",
"fontWeights": {
"bold": "var(--type-dataBody-fontWeights-bold)",
"normal": "var(--type-dataBody-fontWeights-normal)"
},
"fontWidth": "var(--type-dataBody-fontWidth)",
"letterSpacing": "var(--type-dataBody-letterSpacing)",
"lineHeight": "var(--type-dataBody-lineHeight)"
},
"dataDisplay": {
"fontSizes": {
"lg": "var(--type-dataDisplay-fontSizes-lg)",
"md": "var(--type-dataDisplay-fontSizes-md)",
"xl": "var(--type-dataDisplay-fontSizes-xl)",
"xxl": "var(--type-dataDisplay-fontSizes-xxl)",
"xxxl": "var(--type-dataDisplay-fontSizes-xxxl)"
},
"fontStack": "var(--type-dataDisplay-fontStack)",
"fontWeights": {
"light": "var(--type-dataDisplay-fontWeights-light)",
"medium": "var(--type-dataDisplay-fontWeights-medium)",
"normal": "var(--type-dataDisplay-fontWeights-normal)"
},
"fontWidth": "var(--type-dataDisplay-fontWidth)",
"letterSpacing": "var(--type-dataDisplay-letterSpacing)",
"lineHeight": "var(--type-dataDisplay-lineHeight)"
},
"dataHeading": {
"fontSizes": {
"lg": "var(--type-dataHeading-fontSizes-lg)",
"md": "var(--type-dataHeading-fontSizes-md)",
"sm": "var(--type-dataHeading-fontSizes-sm)",
"xl": "var(--type-dataHeading-fontSizes-xl)",
"xs": "var(--type-dataHeading-fontSizes-xs)"
},
"fontStack": "var(--type-dataHeading-fontStack)",
"fontWeights": {
"light": "var(--type-dataHeading-fontWeights-light)",
"medium": "var(--type-dataHeading-fontWeights-medium)",
"normal": "var(--type-dataHeading-fontWeights-normal)"
},
"fontWidth": "var(--type-dataHeading-fontWidth)",
"letterSpacing": "var(--type-dataHeading-letterSpacing)",
"lineHeight": "var(--type-dataHeading-lineHeight)"
},
"display": {
"fontSizes": {
"lg": "var(--type-display-fontSizes-lg)",
"md": "var(--type-display-fontSizes-md)",
"xl": "var(--type-display-fontSizes-xl)",
"xxl": "var(--type-display-fontSizes-xxl)",
"xxxl": "var(--type-display-fontSizes-xxxl)"
},
"fontStack": "var(--type-display-fontStack)",
"fontWeights": {
"light": "var(--type-display-fontWeights-light)",
"medium": "var(--type-display-fontWeights-medium)",
"normal": "var(--type-display-fontWeights-normal)"
},
"letterSpacing": "var(--type-display-letterSpacing)",
"lineHeight": "var(--type-display-lineHeight)"
},
"heading": {
"fontSizes": {
"lg": "var(--type-heading-fontSizes-lg)",
"md": "var(--type-heading-fontSizes-md)",
"sm": "var(--type-heading-fontSizes-sm)",
"xl": "var(--type-heading-fontSizes-xl)",
"xs": "var(--type-heading-fontSizes-xs)"
},
"fontStack": "var(--type-heading-fontStack)",
"fontWeights": {
"light": "var(--type-heading-fontWeights-light)",
"medium": "var(--type-heading-fontWeights-medium)",
"normal": "var(--type-heading-fontWeights-normal)"
},
"letterSpacing": "var(--type-heading-letterSpacing)",
"lineHeight": "var(--type-heading-lineHeight)"
}
}
}
}