G2 Components

WordPress Components

Reimagined.

A from-scratch reimagining of Gutenberg's user interface. Designed to accommodate the ever-growing and ever-expressive needs of the Editor and the Platform.

Coming Soon

Documentation

Learn More

A system of
systems.

Composed of a series of specialized systems. Systems designed to handle accessibility, context-awareness, styling, theming, animations, gestures, state management, and more. All working in harmony to form the foundations of this reimagined UI layer.

Modular
by design.

An extensive collection of modular components. Create richer experiences by combining components together.G2 is powered by a custom Style System. Designed to work out-of-the-box, in any React environment. No setup necessary.

Accessible
by default.

Built on top of Reakit, G2 provides strict WAI-ARIA 1.1 standards from a core level. G2 also accomodates visual accessibility with built-in modes for dark, high-contrast, color-blind, and reduced motion.

Dark Mode

High Contrast Mode

Themable.

G2's versatile built-in theming system allows you to easily customize the UI.
A series of Design Tokens can be refined, creating styles that ripple across the entire system.

{ "black": "#000000", "blueberry": "#3858E9", "blueberryDark": "#1D35B4", "greens": "#33F078", "grey": "#40464D", "greyBlack": "#1E1E1E", "lightBlue": "#33F078", "lightGrey": "#40464D", "lighterGrey": "#dddddd", "pomegrade": "#E26F56", "wordpressBlue": "#007cba", "white": "#ffffff", "darkGray100": "#8F98A1", "darkGray300": "#6C7781", "darkGray500": "#555D66", "darkGray700": "#32373C", "darkGray900": "#191E23", "darkGray100Text": "#000000", "darkGray300Text": "#000000", "darkGray500Text": "#b9bec4", "darkGray700Text": "#b9bec4", "darkGray900Text": "#b9bec4", "darkGrayRgba10": "rgba(134, 144, 155, 0.1)", "darkGrayRgba20": "rgba(134, 144, 155, 0.2)", "darkGrayRgba30": "rgba(134, 144, 155, 0.3)", "darkGrayRgba40": "rgba(134, 144, 155, 0.4)", "darkGrayRgba50": "rgba(134, 144, 155, 0.5)", "darkGrayRgba60": "rgba(134, 144, 155, 0.6)", "darkGrayRgba70": "rgba(134, 144, 155, 0.7)", "darkGrayRgba80": "rgba(134, 144, 155, 0.8)", "darkGrayRgba90": "rgba(134, 144, 155, 0.9)", "lightGray100": "#fbfbfc", "lightGray300": "#edeff0", "lightGray500": "#e2e4e7", "lightGray700": "#ccd0d4", "lightGray900": "#a2aab2", "lightGray100Text": "#78848f", "lightGray300Text": "#78848f", "lightGray500Text": "#78848f", "lightGray700Text": "#78848f", "lightGray900Text": "#ffffff", "lightGrayRgba10": "rgba(226, 228, 231, 0.1)", "lightGrayRgba20": "rgba(226, 228, 231, 0.2)", "lightGrayRgba30": "rgba(226, 228, 231, 0.3)", "lightGrayRgba40": "rgba(226, 228, 231, 0.4)", "lightGrayRgba50": "rgba(226, 228, 231, 0.5)", "lightGrayRgba60": "rgba(226, 228, 231, 0.6)", "lightGrayRgba70": "rgba(226, 228, 231, 0.7)", "lightGrayRgba80": "rgba(226, 228, 231, 0.8)", "lightGrayRgba90": "rgba(226, 228, 231, 0.9)", "red100": "#fcebeb", "red300": "#ea8484", "red500": "#dc3232", "red700": "#b02828", "red900": "#841e1e", "red100Text": "#461010", "red300Text": "#461010", "red500Text": "#ffffff", "red700Text": "#ffffff", "red900Text": "#ffffff", "redRgba10": "rgba(220, 50, 50, 0.1)", "redRgba20": "rgba(220, 50, 50, 0.2)", "redRgba30": "rgba(220, 50, 50, 0.3)", "redRgba40": "rgba(220, 50, 50, 0.4)", "redRgba50": "rgba(220, 50, 50, 0.5)", "redRgba60": "rgba(220, 50, 50, 0.6)", "redRgba70": "rgba(220, 50, 50, 0.7)", "redRgba80": "rgba(220, 50, 50, 0.8)", "redRgba90": "rgba(220, 50, 50, 0.9)", "orange100": "#fef1ea", "orange300": "#f9a87e", "orange500": "#F56E28", "orange700": "#ca4a1f", "orange900": "#aa3e1a", "orange100Text": "#682610", "orange300Text": "#682610", "orange500Text": "#682610", "orange700Text": "#ffffff", "orange900Text": "#ffffff", "orangeRgba10": "rgba(245, 110, 40, 0.1)", "orangeRgba20": "rgba(245, 110, 40, 0.2)", "orangeRgba30": "rgba(245, 110, 40, 0.3)", "orangeRgba40": "rgba(245, 110, 40, 0.4)", "orangeRgba50": "rgba(245, 110, 40, 0.5)", "orangeRgba60": "rgba(245, 110, 40, 0.6)", "orangeRgba70": "rgba(245, 110, 40, 0.7)", "orangeRgba80": "rgba(245, 110, 40, 0.8)", "orangeRgba90": "rgba(245, 110, 40, 0.9)", "yellow100": "#fff8e6", "yellow300": "#ffd566", "yellow500": "#ffb900", "yellow700": "#ee8e0d", "yellow900": "#dd631a", "yellow100Text": "#994412", "yellow300Text": "#994412", "yellow500Text": "#994412", "yellow700Text": "#994412", "yellow900Text": "#ffffff", "yellowRgba10": "rgba(255, 185, 0, 0.1)", "yellowRgba20": "rgba(255, 185, 0, 0.2)", "yellowRgba30": "rgba(255, 185, 0, 0.3)", "yellowRgba40": "rgba(255, 185, 0, 0.4)", "yellowRgba50": "rgba(255, 185, 0, 0.5)", "yellowRgba60": "rgba(255, 185, 0, 0.6)", "yellowRgba70": "rgba(255, 185, 0, 0.7)", "yellowRgba80": "rgba(255, 185, 0, 0.8)", "yellowRgba90": "rgba(255, 185, 0, 0.9)", "green100": "#edf8ee", "green300": "#90d296", "green500": "#46b450", "green700": "#328540", "green900": "#25612f", "green100Text": "#102a14", "green300Text": "#102a14", "green500Text": "#102a14", "green700Text": "#ffffff", "green900Text": "#ffffff", "greenRgba10": "rgba(70, 180, 80, 0.1)", "greenRgba20": "rgba(70, 180, 80, 0.2)", "greenRgba30": "rgba(70, 180, 80, 0.3)", "greenRgba40": "rgba(70, 180, 80, 0.4)", "greenRgba50": "rgba(70, 180, 80, 0.5)", "greenRgba60": "rgba(70, 180, 80, 0.6)", "greenRgba70": "rgba(70, 180, 80, 0.7)", "greenRgba80": "rgba(70, 180, 80, 0.8)", "greenRgba90": "rgba(70, 180, 80, 0.9)", "purple100": "#f3f1f8", "purple300": "#B4A8D2", "purple500": "#826eb4", "purple700": "#4e426c", "purple900": "#342c48", "purple100Text": "#120f18", "purple300Text": "#120f18", "purple500Text": "#120f18", "purple700Text": "#ffffff", "purple900Text": "#ffffff", "purpleRgba10": "rgba(130, 110, 180, 0.1)", "purpleRgba20": "rgba(130, 110, 180, 0.2)", "purpleRgba30": "rgba(130, 110, 180, 0.3)", "purpleRgba40": "rgba(130, 110, 180, 0.4)", "purpleRgba50": "rgba(130, 110, 180, 0.5)", "purpleRgba60": "rgba(130, 110, 180, 0.6)", "purpleRgba70": "rgba(130, 110, 180, 0.7)", "purpleRgba80": "rgba(130, 110, 180, 0.8)", "purpleRgba90": "rgba(130, 110, 180, 0.9)", "blue100": "#e6f6fb", "blue300": "#66c6e4", "blue500": "#00a0d2", "blue700": "#0085ba", "blue900": "#0072A8", "blue100Text": "#003e5b", "blue300Text": "#003e5b", "blue500Text": "#003e5b", "blue700Text": "#ffffff", "blue900Text": "#ffffff", "blueRgba10": "rgba(0, 160, 210, 0.1)", "blueRgba20": "rgba(0, 160, 210, 0.2)", "blueRgba30": "rgba(0, 160, 210, 0.3)", "blueRgba40": "rgba(0, 160, 210, 0.4)", "blueRgba50": "rgba(0, 160, 210, 0.5)", "blueRgba60": "rgba(0, 160, 210, 0.6)", "blueRgba70": "rgba(0, 160, 210, 0.7)", "blueRgba80": "rgba(0, 160, 210, 0.8)", "blueRgba90": "rgba(0, 160, 210, 0.9)", "colorBackgroundBlue": "var(--wp-g2-blue-rgba-10)", "colorBackgroundBlueText": "var(--wp-g2-blue-900)", "colorBackgroundDarkGray": "var(--wp-g2-dark-gray-rgba-10)", "colorBackgroundDarkGrayText": "var(--wp-g2-dark-gray-900)", "colorBackgroundGreen": "var(--wp-g2-green-rgba-10)", "colorBackgroundGreenText": "var(--wp-g2-green-900)", "colorBackgroundLightGray": "var(--wp-g2-light-gray-rgba-10)", "colorBackgroundLightGrayText": "var(--wp-g2-light-gray-900)", "colorBackgroundOrange": "var(--wp-g2-orange-rgba-10)", "colorBackgroundOrangeText": "var(--wp-g2-orange-900)", "colorBackgroundPurple": "var(--wp-g2-purple-rgba-10)", "colorBackgroundPurpleText": "var(--wp-g2-purple-900)", "colorBackgroundRed": "var(--wp-g2-red-rgba-10)", "colorBackgroundRedText": "var(--wp-g2-red-900)", "colorBackgroundYellow": "var(--wp-g2-yellow-rgba-10)", "colorBackgroundYellowText": "var(--wp-g2-yellow-900)", "colorAdmin": "#007cba", "colorDestructive": "#D94F4F", "colorBodyBackground": "var(--wp-g2-white)", "colorDivider": "rgba(0, 0, 0, 0.1)", "colorPositive": "var(--wp-g2-greens)", "colorScrollbarThumb": "rgba(0, 0, 0, 0.2)", "colorScrollbarThumbHover": "rgba(0, 0, 0, 0.5)", "colorScrollbarTrack": "rgba(0, 0, 0, 0.04)", "colorText": "#1e1e1e", "colorTextInverted": "var(--wp-g2-white)", "colorTextHeading": "#050505", "colorTextMuted": "#8a8b8c", "colorAdminRgba10": "rgba(0, 124, 186, 0.1)", "colorAdminRgba20": "rgba(0, 124, 186, 0.2)", "colorAdminRgba30": "rgba(0, 124, 186, 0.3)", "colorAdminRgba40": "rgba(0, 124, 186, 0.4)", "colorAdminRgba50": "rgba(0, 124, 186, 0.5)", "colorAdminRgba60": "rgba(0, 124, 186, 0.6)", "colorAdminRgba70": "rgba(0, 124, 186, 0.7)", "colorAdminRgba80": "rgba(0, 124, 186, 0.8)", "colorAdminRgba90": "rgba(0, 124, 186, 0.9)", "colorDestructiveRgba10": "rgba(217, 79, 79, 0.1)", "colorDestructiveRgba20": "rgba(217, 79, 79, 0.2)", "colorDestructiveRgba30": "rgba(217, 79, 79, 0.3)", "colorDestructiveRgba40": "rgba(217, 79, 79, 0.4)", "colorDestructiveRgba50": "rgba(217, 79, 79, 0.5)", "colorDestructiveRgba60": "rgba(217, 79, 79, 0.6)", "colorDestructiveRgba70": "rgba(217, 79, 79, 0.7)", "colorDestructiveRgba80": "rgba(217, 79, 79, 0.8)", "colorDestructiveRgba90": "rgba(217, 79, 79, 0.9)", "cardBorderRadius": "2px", "cardPaddingX": "calc(var(--wp-g2-grid-base) * 3)", "cardPaddingY": "calc(var(--wp-g2-grid-base) * 3)", "cardPadding": "var(--wp-g2-card-padding-x) var(--wp-g2-card-padding-y)", "cardHeaderFooterPaddingY": "calc(var(--wp-g2-grid-base) * 1)", "cardHeaderHeight": "44px", "controlBackgroundColor": "var(--wp-g2-white)", "controlBackgroundColorHover": "rgba(0, 0, 0, 0.05)", "controlBackgroundColorActive": "rgba(0, 0, 0, 0.05)", "controlBackgroundDimColor": "rgba(0, 0, 0, 0.1)", "controlBackgroundBrightColor": "rgba(0, 0, 0, 0.03)", "controlBorderColor": "#757575", "controlBorderColorHover": "var(--wp-g2-control-border-color)", "controlBorderColorSubtle": "transparent", "controlBorderRadius": "2px", "controlBorderSubtleColor": "rgba(0, 0, 0, 0.2)", "controlBoxShadowFocusSize": "0.5px", "controlBoxShadow": "transparent", "controlBoxShadowFocus": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) var(--wp-g2-color-admin)", "controlPseudoBoxShadowFocusWidth": "2px", "controlPseudoBoxShadowFocusRingSize": "calc(var(--wp-g2-control-pseudo-box-shadow-focus-width) + 1px + var(--wp-g2-control-box-shadow-focus-size))", "controlPseudoBoxShadowFocusRingSizeSmall": "calc(var(--wp-g2-control-pseudo-box-shadow-focus-width) + 1px)", "controlPseudoBoxShadowFocus": "0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-width) var(--wp-g2-surface-background-color) , 0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-ring-size) var(--wp-g2-color-admin) ", "controlPseudoBoxShadowFocusSmall": "0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-width) var(--wp-g2-surface-background-color) , 0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-ring-size-small) var(--wp-g2-color-admin) ", "controlDestructivePseudoBoxShadowFocus": "0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-width) var(--wp-g2-surface-background-color) , 0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-ring-size) var(--wp-g2-color-destructive) ", "controlDestructivePseudoBoxShadowFocusSmall": "0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-width) var(--wp-g2-surface-background-color) , 0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-ring-size-small) var(--wp-g2-color-destructive) ", "controlDestructiveBorderColor": "var(--wp-g2-color-destructive)", "controlDestructiveBorderColorFocus": "var(--wp-g2-control-destructive-border-color)", "controlDestructiveBoxShadowFocus": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) var(--wp-g2-color-destructive)", "controlHeight": "30px", "controlHeightLarge": "calc(var(--wp-g2-control-height) * 1.2)", "controlHeightSmall": "calc(var(--wp-g2-control-height) * 0.8)", "controlHeightXLarge": "calc(var(--wp-g2-control-height) * 1.4)", "controlHeightXSmall": "calc(var(--wp-g2-control-height) * 0.67)", "controlHeightXXSmall": "calc(var(--wp-g2-control-height) * 0.4)", "controlPaddingX": "12px", "controlPaddingXLarge": "calc(var(--wp-g2-control-padding-x) * 1.3334)", "controlPaddingXSmall": "calc(var(--wp-g2-control-padding-x) / 1.3334)", "controlPrimaryTextColorActive": "var(--wp-g2-white)", "controlPrimaryTextColor": "var(--wp-g2-white)", "controlSurfaceBoxShadow": "0 1px 1px rgba(0, 0, 0, 0.2) , 0 1px 2px rgba(0, 0, 0, 0.2) ", "controlSurfaceColor": "var(--wp-g2-white)", "controlTextActiveColor": "var(--wp-g2-color-admin)", "controlInnerControltextColor": "var(--wp-g2-color-admin)", "elevationIntensity": 1, "flexGap": "calc(var(--wp-g2-grid-base) * 2)", "flexItemMarginRight": "var(--wp-g2-flex-gap)", "fontFamily": "Inter,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",sans-serif", "fontFamilyMono": "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace", "fontSize": "13px", "fontSizeH1": "calc(2.44 * var(--wp-g2-font-size))", "fontSizeH2": "calc(1.95 * var(--wp-g2-font-size))", "fontSizeH3": "calc(1.56 * var(--wp-g2-font-size))", "fontSizeH4": "calc(1.25 * var(--wp-g2-font-size))", "fontSizeH5": "calc(1 * var(--wp-g2-font-size))", "fontSizeH6": "calc(0.8 * var(--wp-g2-font-size))", "fontSizeInputMobile": "16px", "fontSizeMobile": "15px", "fontSizeSmall": "calc(0.92 * var(--wp-g2-font-size))", "fontSizeXSmall": "calc(0.75 * var(--wp-g2-font-size))", "fontLineHeightBase": "1.2", "fontWeight": "normal", "fontWeightHeading": "600", "surfaceBackgroundColor": "var(--wp-g2-surface-color)", "surfaceBackgroundSubtleColor": "#F3F3F3", "surfaceBackgroundTintColor": "#F5F5F5", "surfaceBorderColor": "rgba(0, 0, 0, 0.1)", "surfaceBorderBoldColor": "rgba(0, 0, 0, 0.15)", "surfaceBorderSubtleColor": "rgba(0, 0, 0, 0.05)", "surfaceBackgroundTertiaryColor": "#ffffff", "surfaceColor": "var(--wp-g2-white)", "transitionDuration": "200ms", "transitionDurationFast": "160ms", "transitionDurationFaster": "120ms", "transitionDurationFastest": "100ms", "transitionTimingFunction": "cubic-bezier(0.08, 0.52, 0.52, 1)", "transitionTimingFunctionControl": "cubic-bezier(0.12, 0.8, 0.32, 1)", "buttonPaddingXRatio": "calc(4/3)", "buttonPaddingX": "calc(var(--wp-g2-control-padding-x) * var(--wp-g2-button-padding-x-ratio))", "buttonTextColor": "var(--wp-g2-color-admin)", "buttonTextColorActive": "var(--wp-g2-button-text-color)", "buttonPrimaryColor": "var(--wp-g2-color-admin)", "buttonPrimaryColorHover": "var(--wp-g2-button-primary-color)", "buttonPrimaryColorActive": "var(--wp-g2-color-text)", "buttonPrimaryColorFocus": "var(--wp-g2-button-primary-color)", "buttonPrimaryBorderColor": "var(--wp-g2-button-primary-color)", "buttonPrimaryBorderColorHover": "var(--wp-g2-button-primary-color)", "buttonPrimaryBorderColorFocus": "var(--wp-g2-button-primary-color)", "buttonPrimaryBorderColorActive": "var(--wp-g2-button-primary-color)", "buttonPrimaryTextColor": "var(--wp-g2-control-primary-text-color)", "buttonPrimaryTextColorHover": "var(--wp-g2-control-primary-text-color)", "buttonPrimaryTextColorActive": "var(--wp-g2-control-primary-text-color)", "buttonPrimaryTextColorFocus": "var(--wp-g2-control-primary-text-color)", "buttonSecondaryColor": "transparent", "buttonSecondaryColorHover": "var(--wp-g2-button-secondary-color)", "buttonSecondaryColorActive": "rgba(0, 0, 0, 0.05)", "buttonSecondaryColorFocus": "var(--wp-g2-button-secondary-color)", "buttonSecondaryBorderColor": "var(--wp-g2-button-primary-color)", "buttonSecondaryTextColor": "var(--wp-g2-button-primary-color)", "buttonSecondaryTextColorFocus": "var(--wp-g2-button-primary-color)", "buttonSecondaryTextColorActive": "var(--wp-g2-button-primary-color)", "buttonSecondaryBorderColorHover": "var(--wp-g2-button-primary-color)", "buttonSecondaryBorderColorActive": "var(--wp-g2-button-primary-color)", "buttonSecondaryBorderColorFocus": "var(--wp-g2-button-primary-color)", "buttonTertiaryColor": "transparent", "buttonTertiaryColorHover": "var(--wp-g2-button-tertiary-color)", "buttonTertiaryColorActive": "rgba(0, 0, 0, 0.05)", "buttonTertiaryColorFocus": "var(--wp-g2-button-tertiary-color)", "buttonTertiaryBorderColor": "transparent", "buttonTertiaryTextColor": "var(--wp-g2-button-primary-color)", "buttonTertiaryTextColorFocus": "var(--wp-g2-button-primary-color)", "buttonTertiaryTextColorActive": "var(--wp-g2-button-primary-color)", "buttonTertiaryBorderColorHover": "var(--wp-g2-button-primary-color)", "buttonTertiaryBorderColorActive": "var(--wp-g2-button-primary-color)", "buttonTertiaryBorderColorFocus": "var(--wp-g2-button-primary-color)", "buttonControlActiveStateColor": "var(--wp-g2-color-text)", "buttonControlActiveStateColorHover": "var(--wp-g2-button-control-active-state-color)", "buttonControlActiveStateColorActive": "var(--wp-g2-button-control-active-state-color)", "buttonControlActiveStateColorFocus": "var(--wp-g2-button-control-active-state-color)", "buttonControlActiveStateTextColor": "var(--wp-g2-button-primary-text-color)", "buttonControlActiveStateBorderColorFocus": "var(--wp-g2-button-primary-color)", "buttonControlActiveStateBoxShadowFocus": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) var(--wp-g2-color-admin) , 0 0 0 var(--wp-g2-control-pseudo-box-shadow-focus-width) var(--wp-g2-button-control-active-state-text-color) inset ", "checkboxBoxShadow": "none", "checkboxSize": "16px", "gridBase": "4px", "linkColor": "var(--wp-g2-color-admin)", "linkColorHover": "var(--wp-g2-color-admin)", "linkColorActive": "var(--wp-g2-color-admin)", "linkColorFocus": "var(--wp-g2-color-admin)", "menuItemBorderWidth": "1px", "menuItemFocusBackgroundColor": "transparent", "menuItemFocusBorderColor": "var(--wp-g2-color-admin)", "menuItemFocusTextColor": "var(--wp-g2-menu-item-focus-border-color)", "menuItemFocusBoxShadow": "var(--wp-g2-control-border-subtle-color)", "menuItemActiveBackgroundColor": "var(--wp-g2-control-background-color)", "menuItemActiveBorderColor": "var(--wp-g2-menu-item-focus-border-color)", "menuItemActiveTextColor": "var(--wp-g2-color-text)", "menuItemActiveBoxShadow": "var(--wp-g2-control-border-subtle-color)", "menuItemHeight": "30px", "menuItemHeightLarge": "calc(var(--wp-g2-menu-item-height) * 1.2)", "menuItemHeightSmall": "calc(var(--wp-g2-menu-item-height) * 0.8)", "menuItemHeightXLarge": "calc(var(--wp-g2-menu-item-height) * 1.4)", "menuItemHeightXSmall": "calc(var(--wp-g2-menu-item-height) * 0.67)", "menuItemHeightXXSmall": "calc(var(--wp-g2-menu-item-height) * 0.4)", "panelHeaderPadding": "calc(var(--wp-g2-grid-base) * 3) calc(var(--wp-g2-grid-base) * 4)", "panelBodyPadding": "calc(var(--wp-g2-grid-base) * 2) calc(var(--wp-g2-grid-base) * 4) calc(var(--wp-g2-grid-base) * 3)", "radioBoxShadow": "var(--wp-g2-checkbox-box-shadow)", "radioSize": "var(--wp-g2-checkbox-size)", "radioDotSize": "10px", "segmentedControlFontSize": "12px", "segmentedControlBackgroundColor": "var(--wp-g2-control-background-color)", "segmentedControlBorderColor": "var(--wp-g2-control-border-color)", "segmentedControlBackdropBackgroundColor": "var(--wp-g2-control-surface-color)", "segmentedControlBackdropBorderColor": "var(--wp-g2-control-border-color)", "segmentedControlBackdropBoxShadow": "transparent", "segmentedControlButtonColorActive": "var(--wp-g2-control-background-color)", "sliderThumbBorderColor": "transparent", "sliderThumbBoxShadow": "none", "sliderThumbBoxShadowSizeFocus": "3px", "sliderThumbBoxShadowColorFocus": "var(--wp-g2-color-admin-rgba-20)", "sliderThumbBackgroundColor": "var(--wp-g2-color-admin)", "switchBackdropBackgroundColor": "var(--wp-g2-light-gray-900)", "switchBackdropBackgroundColorActive": "var(--wp-g2-color-admin)", "switchBackdropBorderColor": "var(--wp-g2-light-gray-900)", "switchBackdropBorderColorActive": "var(--wp-g2-color-admin)", "switchBackdropBorderColorFocus": "var(--wp-g2-white)", "switchToggleBackgroundColor": "var(--wp-g2-color-text-inverted)", "switchToggleBackgroundColorActive": "var(--wp-g2-color-text-inverted)", "switchToggleBoxShadow": "none", "switchPaddingOffset": "6px" }

Card

Text Input

Card

Text Input

Card

Text Input

Coming soon.

G2 is currently in a proposal stage. The core systems have been architected and the code has been prepped to be integrated into Gutenberg.

Road Map and Progress

Try It Out