HomeFrameworksGreenshift

Greenshift / WordPress

WordPress CSS custom properties mapped to the Altitude Design System. These variables integrate seamlessly with Greenshift blocks and the WordPress block editor, appearing in color pickers and style panels.

Preset Colors

Custom Props

Style Globals

Total Variables

Framework Adapter Layer

Greenshift tokens sit at layer 5 of the token architecture, bridging the Altitude Design System with WordPress. They follow the --wp--preset--,--wp--custom--, and--wp--style-- naming conventions.

Preset Colors

WordPress color presets mapped to semantic tokens. These appear in the Gutenberg color picker.

Primary brand color palette

brand

--wp--preset--color--brand

#34d399

Emerald.400

Color.Brand.Default

Preset.Color.Brand

brand-hover

--wp--preset--color--brand-hover

#10b981

Emerald.500

Color.Brand.Hover

Preset.Color.Brand-hover

brand-light

--wp--preset--color--brand-light

#d1fae5

Emerald.100

Color.Brand.Light

Preset.Color.Brand-light

brand-dark

--wp--preset--color--brand-dark

#047857

Emerald.700

Color.Brand.Dark

Preset.Color.Brand-dark

Supporting color palette

secondary

--wp--preset--color--secondary

#4c1d95

Violet.900

Color.Secondary.Default

Preset.Color.Secondary

secondary-hover

--wp--preset--color--secondary-hover

#2e1065

Violet.950

Color.Secondary.Hover

Preset.Color.Secondary-hover

secondary-light

--wp--preset--color--secondary-light

#ede9fe

Violet.100

Color.Secondary.Light

Preset.Color.Secondary-light

Page and content backgrounds

background

--wp--preset--color--background

#f9fafb

Gray.50

Color.Background.Default

Preset.Color.Background

background-alt

--wp--preset--color--background-alt

#f3f4f6

Gray.100

Color.Background.Alt

Preset.Color.Background-alt

surface

--wp--preset--color--surface

#ffffff

Base.White

Color.Surface

Preset.Color.Surface

Card component specific colors

card-base

--wp--preset--color--card-base

#ffffff

Base.White

Color.Card.Background

Preset.Color.Card-base

card-border

--wp--preset--color--card-border

#e5e7eb

Gray.200

Color.Card.Border

Preset.Color.Card-border

card-text

--wp--preset--color--card-text

#111827

Gray.900

Color.Text.Foreground

Preset.Color.Card-text

Typography and contrast colors

muted

--wp--preset--color--muted

#6b7280

Gray.500

Color.Text.Muted

Preset.Color.Muted

subtle

--wp--preset--color--subtle

#9ca3af

Gray.400

Color.Text.Subtle

Preset.Color.Subtle

text-on-brand

--wp--preset--color--text-on-brand

#ffffff

Base.White

Color.Text.OnBrand

Preset.Color.Text-on-brand

text-on-secondary

--wp--preset--color--text-on-secondary

#ffffff

Base.White

Color.Text.OnSecondary

Preset.Color.Text-on-secondary

Border and divider colors

border

--wp--preset--color--border

#e5e7eb

Gray.200

Color.Border.Default

Preset.Color.Border

border-strong

--wp--preset--color--border-strong

#d1d5db

Gray.300

Color.Border.Strong

Preset.Color.Border-strong

Feedback and status indication

success

--wp--preset--color--success

#22c55e

Green.500

Color.Status.Success

Preset.Color.Success

warning

--wp--preset--color--warning

#f59e0b

Amber.500

Color.Status.Warning

Preset.Color.Warning

error

--wp--preset--color--error

#ef4444

Red.500

Color.Status.Error

Preset.Color.Error

info

--wp--preset--color--info

#3b82f6

Blue.500

Color.Status.Info

Preset.Color.Info

Base dark color

base

--wp--preset--color--base

#020617

Slate.950

Color.Base

Preset.Color.Base

Custom Properties

Component-specific custom properties for advanced styling in Greenshift blocks.

Button component styling tokens

background

--wp--custom--button--background

#34d399

Emerald.400

Components.Button.Background.Default

Custom.Button.Background

background-hover

--wp--custom--button--background-hover

#10b981

Emerald.500

Components.Button.Background.Hover

Custom.Button.Background-hover

text

--wp--custom--button--text

#ffffff

Base.White

Components.Button.Text

Custom.Button.Text

border-radius

--wp--custom--button--border-radius

0.5rem

Radius.lg

Radius.Button

Custom.Button.Border-radius

spacing-horizontal

--wp--custom--button--spacing--horizontal

1.25rem

Spacing.5

Custom.Button.Spacing.Horizontal

spacing-vertical

--wp--custom--button--spacing--vertical

0.625rem

Spacing.2-5

Custom.Button.Spacing.Vertical

Card component styling tokens

border-radius

--wp--custom--card--border-radius

0.75rem

Radius.xl

Radius.Card

Custom.Card.Border-radius

spacing

--wp--custom--card--spacing

1.5rem

Spacing.6

Custom.Card.Spacing

Form input styling tokens

background

--wp--custom--input--background

#ffffff

Base.White

Color.Surface

Custom.Input.Background

border

--wp--custom--input--border

#e5e7eb

Gray.200

Color.Border.Default

Custom.Input.Border

border-radius

--wp--custom--input--border-radius

0.375rem

Radius.md

Radius.Input

Custom.Input.Border-radius

spacing-horizontal

--wp--custom--input--spacing--horizontal

0.75rem

Spacing.3

Custom.Input.Spacing.Horizontal

spacing-vertical

--wp--custom--input--spacing--vertical

0.5rem

Spacing.2

Custom.Input.Spacing.Vertical

Badge component styling

border-radius

--wp--custom--badge--border-radius

9999px

Radius.full

Radius.Badge

Custom.Badge.Border-radius

Modal/dialog styling

border-radius

--wp--custom--modal--border-radius

1rem

Radius.2xl

Radius.Modal

Custom.Modal.Border-radius

Style Globals

WordPress global styles for content width and layout constraints.

Content and wide width settings

content-size

--wp--style--global--content-size

64rem

Layout.5xl

Layout.ContentWidth

Style.Global.Content-size

wide-size

--wp--style--global--wide-size

90rem

Layout.WideWidth

Style.Global.Wide-size

Copy-Ready CSS

Ready-to-use CSS variable declarations for your WordPress theme

preset-colors.css

:root {
  /* Brand Colors */
  --wp--preset--color--brand: #34d399;
  --wp--preset--color--brand-hover: #10b981;
  --wp--preset--color--brand-light: #d1fae5;
  --wp--preset--color--brand-dark: #047857;
  
  /* Secondary Colors */
  --wp--preset--color--secondary: #4c1d95;
  --wp--preset--color--secondary-hover: #2e1065;
  --wp--preset--color--secondary-light: #ede9fe;
  
  /* Background & Surface */
  --wp--preset--color--background: #f9fafb;
  --wp--preset--color--background-alt: #f3f4f6;
  --wp--preset--color--surface: #ffffff;
  
  /* Status Colors */
  --wp--preset--color--success: #22c55e;
  --wp--preset--color--warning: #f59e0b;
  --wp--preset--color--error: #ef4444;
  --wp--preset--color--info: #3b82f6;
}

custom-properties.css

:root {
  /* Button Component */
  --wp--custom--button--background: #34d399;
  --wp--custom--button--background-hover: #10b981;
  --wp--custom--button--text: #ffffff;
  --wp--custom--button--border-radius: 0.5rem;
  --wp--custom--button--spacing--horizontal: 1.25rem;
  --wp--custom--button--spacing--vertical: 0.625rem;
  
  /* Card Component */
  --wp--custom--card--border-radius: 0.75rem;
  --wp--custom--card--spacing: 1.5rem;
  
  /* Input Component */
  --wp--custom--input--background: #ffffff;
  --wp--custom--input--border: #e5e7eb;
  --wp--custom--input--border-radius: 0.375rem;
}

global-styles.css

:root {
  /* Global Layout */
  --wp--style--global--content-size: 64rem;
  --wp--style--global--wide-size: 90rem;
}

Usage in WordPress

These CSS custom properties can be used in your WordPress theme's theme.json file, custom CSS, or directly in Greenshift blocks. Colors with the --wp--preset--color-- prefix will automatically appear in the Gutenberg color picker.

Preset colors appear in the block editor color picker

Custom properties for component-specific styling

Style globals control layout constraints