@charset "UTF-8"; /** * WordPress Design System theme styles. * This exports the design tokens (CSS custom properties) for use across WordPress packages. */ /* ------------------------------------------- * Autogenerated by ⛋ Terrazzo. DO NOT EDIT! * ------------------------------------------- */ :root { --wpds-border-radius-lg: 8px; /* Large radius */ --wpds-border-radius-md: 4px; /* Medium radius */ --wpds-border-radius-sm: 2px; /* Small radius */ --wpds-border-radius-xs: 1px; /* Extra small radius */ --wpds-border-width-focus: 2px; /* Border width for focus ring */ --wpds-border-width-lg: 8px; /* Large width */ --wpds-border-width-md: 4px; /* Medium width */ --wpds-border-width-sm: 2px; /* Small width */ --wpds-border-width-xs: 1px; /* Extra small width */ --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */ --wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */ --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */ --wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */ --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */ --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-strong: #2d2d2d; /* Background color for interactive elements with neutral tone and strong emphasis. */ --wpds-color-bg-interactive-neutral-strong-active: #1e1e1e; /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-strong-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */ --wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-weak-disabled: #00000000; /* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */ --wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */ --wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */ --wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */ --wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */ --wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */ --wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */ --wpds-color-bg-surface-info-weak: #f2f9ff; /* Background color for surfaces with info tone and weak emphasis. */ --wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */ --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */ --wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */ --wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */ --wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */ --wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */ --wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */ --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */ --wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */ --wpds-color-bg-thumb-neutral-disabled: #d8d8d8; /* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */ --wpds-color-bg-thumb-neutral-weak: #8a8a8a; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */ --wpds-color-bg-thumb-neutral-weak-active: #6c6c6c; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */ --wpds-color-bg-track-neutral: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */ --wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */ --wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */ --wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */ --wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */ --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */ --wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */ --wpds-color-fg-content-info-weak: #006bd7; /* Foreground color for content like text with info tone and weak emphasis. */ --wpds-color-fg-content-neutral: #1e1e1e; /* Foreground color for content like text with normal emphasis. */ --wpds-color-fg-content-neutral-weak: #6d6d6d; /* Foreground color for content like text with weak emphasis. */ --wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */ --wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */ --wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */ --wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */ --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */ --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */ --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */ --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */ --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */ --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */ --wpds-color-fg-interactive-neutral-strong: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis. */ --wpds-color-fg-interactive-neutral-strong-active: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-neutral-strong-disabled: #8a8a8a; /* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */ --wpds-color-fg-interactive-neutral-weak: #6d6d6d; /* Foreground color for interactive elements with neutral tone and weak emphasis. */ --wpds-color-fg-interactive-neutral-weak-disabled: #8a8a8a; /* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */ --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */ --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */ --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */ --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */ --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */ --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */ --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */ --wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */ --wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */ --wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */ --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */ --wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */ --wpds-dimension-base: 4px; /* Base dimension unit */ --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */ --wpds-dimension-gap-lg: 24px; /* Large gap */ --wpds-dimension-gap-md: 16px; /* Medium gap */ --wpds-dimension-gap-sm: 12px; /* Small gap */ --wpds-dimension-gap-xl: 40px; /* Extra large gap */ --wpds-dimension-gap-xs: 8px; /* Extra small gap */ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */ --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */ --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */ --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */ --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */ --wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */ --wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005; /* For components that offer additional actions. Example: Menus, Command Palette */ --wpds-elevation-small: 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */ --wpds-elevation-x-small: 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */ --wpds-font-family-body: -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Body font family */ --wpds-font-family-heading: -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Headings font family */ --wpds-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */ --wpds-font-line-height-2xl: 40px; /* 2X large line height */ --wpds-font-line-height-lg: 28px; /* Large line height */ --wpds-font-line-height-md: 24px; /* Medium line height */ --wpds-font-line-height-sm: 20px; /* Small line height */ --wpds-font-line-height-xl: 32px; /* Extra large line height */ --wpds-font-line-height-xs: 16px; /* Extra small line height */ --wpds-font-size-2xl: 32px; /* 2X large font size */ --wpds-font-size-lg: 15px; /* Large font size */ --wpds-font-size-md: 13px; /* Medium font size */ --wpds-font-size-sm: 12px; /* Small font size */ --wpds-font-size-xl: 20px; /* Extra large font size */ --wpds-font-size-xs: 11px; /* Extra small font size */ --wpds-font-weight-medium: 499; /* Medium font weight for emphasis and headings */ --wpds-font-weight-regular: 400; /* Regular font weight for body text */ } [data-wpds-theme-provider-id][data-wpds-density=default] { --wpds-dimension-base: 4px; /* Base dimension unit */ --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */ --wpds-dimension-gap-lg: 24px; /* Large gap */ --wpds-dimension-gap-md: 16px; /* Medium gap */ --wpds-dimension-gap-sm: 12px; /* Small gap */ --wpds-dimension-gap-xl: 40px; /* Extra large gap */ --wpds-dimension-gap-xs: 8px; /* Extra small gap */ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */ --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */ --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */ --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */ --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */ } [data-wpds-theme-provider-id][data-wpds-density=compact] { --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */ --wpds-dimension-gap-lg: 20px; /* Large gap */ --wpds-dimension-gap-md: 12px; /* Medium gap */ --wpds-dimension-gap-sm: 8px; /* Small gap */ --wpds-dimension-gap-xl: 32px; /* Extra large gap */ --wpds-dimension-gap-xs: 4px; /* Extra small gap */ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */ --wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */ --wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */ --wpds-dimension-padding-surface-sm: 12px; /* Small spacing for surfaces */ --wpds-dimension-padding-surface-xs: 4px; /* Extra small spacing for surfaces */ } [data-wpds-theme-provider-id][data-wpds-density=comfortable] { --wpds-dimension-gap-2xs: 8px; /* 2x extra small gap */ --wpds-dimension-gap-lg: 32px; /* Large gap */ --wpds-dimension-gap-md: 20px; /* Medium gap */ --wpds-dimension-gap-sm: 16px; /* Small gap */ --wpds-dimension-gap-xl: 48px; /* Extra large gap */ --wpds-dimension-gap-xs: 12px; /* Extra small gap */ --wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */ --wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */ --wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */ --wpds-dimension-padding-surface-sm: 20px; /* Small spacing for surfaces */ --wpds-dimension-padding-surface-xs: 12px; /* Extra small spacing for surfaces */ } @media (min-resolution: 192dpi) { :root { --wpds-border-width-focus: 1.5px; /* Border width for focus ring */ } }