/* ------------------------------------------- * Autogenerated by ⛋ Terrazzo. DO NOT EDIT! * ------------------------------------------- */ :root { --wpds-border-radius-large: 8px; /* Large radius */ --wpds-border-radius-medium: 4px; /* Medium radius */ --wpds-border-radius-small: 2px; /* Small radius */ --wpds-border-radius-x-small: 1px; /* Extra small radius */ --wpds-border-width-focus: 2px; /* Border width for focus ring */ --wpds-color-bg-interactive-brand: #0000; /* Background color for interactive elements with brand tone and normal emphasis. */ --wpds-color-bg-interactive-brand-active: var(--wpds-color-private-primary-surface2); /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-brand-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */ --wpds-color-bg-interactive-brand-strong: var(--wpds-color-private-primary-bg-fill1); /* Background color for interactive elements with brand tone and strong emphasis. */ --wpds-color-bg-interactive-brand-strong-active: var(--wpds-color-private-primary-bg-fill2); /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-brand-strong-disabled: var(--wpds-color-private-bg-surface6); /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */ --wpds-color-bg-interactive-brand-weak: #0000; /* Background color for interactive elements with brand tone and weak emphasis. */ --wpds-color-bg-interactive-brand-weak-active: var(--wpds-color-private-primary-surface4); /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-brand-weak-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral: #0000; /* Background color for interactive elements with neutral tone and normal emphasis. */ --wpds-color-bg-interactive-neutral-active: var(--wpds-color-private-bg-surface4); /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral-strong: var(--wpds-color-private-bg-bg-fill-inverted1); /* Background color for interactive elements with neutral tone and strong emphasis. */ --wpds-color-bg-interactive-neutral-strong-active: var(--wpds-color-private-bg-bg-fill-inverted2); /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-strong-disabled: var(--wpds-color-private-bg-surface6); /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral-weak: #0000; /* Background color for interactive elements with neutral tone and weak emphasis. */ --wpds-color-bg-interactive-neutral-weak-active: var(--wpds-color-private-bg-surface4); /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ --wpds-color-bg-interactive-neutral-weak-disabled: var(--wpds-color-private-bg-surface5); /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ --wpds-color-bg-surface-brand: var(--wpds-color-private-primary-surface1); /* Background color for surfaces with brand tone and normal emphasis. */ --wpds-color-bg-surface-caution: var(--wpds-color-private-caution-surface4); /* Background color for surfaces with caution tone and normal emphasis. */ --wpds-color-bg-surface-caution-weak: var(--wpds-color-private-caution-surface2); /* Background color for surfaces with caution tone and weak emphasis. */ --wpds-color-bg-surface-error: var(--wpds-color-private-error-surface4); /* Background color for surfaces with error tone and normal emphasis. */ --wpds-color-bg-surface-error-weak: var(--wpds-color-private-error-surface2); /* Background color for surfaces with error tone and weak emphasis. */ --wpds-color-bg-surface-info: var(--wpds-color-private-info-surface4); /* Background color for surfaces with info tone and normal emphasis. */ --wpds-color-bg-surface-info-weak: var(--wpds-color-private-info-surface2); /* Background color for surfaces with info tone and weak emphasis. */ --wpds-color-bg-surface-neutral: var(--wpds-color-private-bg-surface2); /* Background color for surfaces with normal emphasis. */ --wpds-color-bg-surface-neutral-strong: var(--wpds-color-private-bg-surface3); /* Background color for surfaces with strong emphasis. */ --wpds-color-bg-surface-neutral-weak: var(--wpds-color-private-bg-surface1); /* Background color for surfaces with weak emphasis. */ --wpds-color-bg-surface-success: var(--wpds-color-private-success-surface4); /* Background color for surfaces with success tone and normal emphasis. */ --wpds-color-bg-surface-success-weak: var(--wpds-color-private-success-surface2); /* Background color for surfaces with success tone and weak emphasis. */ --wpds-color-bg-surface-warning: var(--wpds-color-private-warning-surface4); /* Background color for surfaces with warning tone and normal emphasis. */ --wpds-color-bg-surface-warning-weak: var(--wpds-color-private-warning-surface2); /* Background color for surfaces with warning tone and weak emphasis. */ --wpds-color-bg-thumb-brand: var(--wpds-color-private-primary-stroke3); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */ --wpds-color-bg-thumb-brand-active: var(--wpds-color-private-primary-stroke3); /* 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-brand-disabled: var(--wpds-color-private-bg-stroke2); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */ --wpds-color-bg-thumb-neutral-weak: var(--wpds-color-private-bg-stroke3); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */ --wpds-color-bg-thumb-neutral-weak-active: var(--wpds-color-private-bg-stroke4); /* 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: var(--wpds-color-private-bg-stroke2); /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */ --wpds-color-bg-track-neutral-weak: var(--wpds-color-private-bg-stroke1); /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */ --wpds-color-fg-content-caution: var(--wpds-color-private-caution-fg-surface4); /* Foreground color for content like text with caution tone and normal emphasis. */ --wpds-color-fg-content-caution-weak: var(--wpds-color-private-caution-fg-surface3); /* Foreground color for content like text with caution tone and weak emphasis. */ --wpds-color-fg-content-error: var(--wpds-color-private-error-fg-surface4); /* Foreground color for content like text with error tone and normal emphasis. */ --wpds-color-fg-content-error-weak: var(--wpds-color-private-error-fg-surface3); /* Foreground color for content like text with error tone and weak emphasis. */ --wpds-color-fg-content-info: var(--wpds-color-private-info-fg-surface4); /* Foreground color for content like text with info tone and normal emphasis. */ --wpds-color-fg-content-info-weak: var(--wpds-color-private-info-fg-surface3); /* Foreground color for content like text with info tone and weak emphasis. */ --wpds-color-fg-content-neutral: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for content like text with normal emphasis. */ --wpds-color-fg-content-neutral-weak: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for content like text with weak emphasis. */ --wpds-color-fg-content-success: var(--wpds-color-private-success-fg-surface4); /* Foreground color for content like text with success tone and normal emphasis. */ --wpds-color-fg-content-success-weak: var(--wpds-color-private-success-fg-surface3); /* Foreground color for content like text with success tone and weak emphasis. */ --wpds-color-fg-content-warning: var(--wpds-color-private-warning-fg-surface4); /* Foreground color for content like text with warning tone and normal emphasis. */ --wpds-color-fg-content-warning-weak: var(--wpds-color-private-warning-fg-surface3); /* Foreground color for content like text with warning tone and weak emphasis. */ --wpds-color-fg-interactive-brand: var(--wpds-color-private-primary-fg-surface3); /* Foreground color for interactive elements with brand tone and normal emphasis. */ --wpds-color-fg-interactive-brand-active: var(--wpds-color-private-primary-fg-surface3); /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-brand-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */ --wpds-color-fg-interactive-brand-strong: var(--wpds-color-private-primary-fg-fill); /* Foreground color for interactive elements with brand tone and strong emphasis. */ --wpds-color-fg-interactive-brand-strong-active: var(--wpds-color-private-primary-fg-fill); /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-brand-strong-disabled: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */ --wpds-color-fg-interactive-neutral: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for interactive elements with neutral tone and normal emphasis. */ --wpds-color-fg-interactive-neutral-active: var(--wpds-color-private-bg-fg-surface4); /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-neutral-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ --wpds-color-fg-interactive-neutral-strong: var(--wpds-color-private-bg-fg-fill-inverted); /* Foreground color for interactive elements with neutral tone and strong emphasis. */ --wpds-color-fg-interactive-neutral-strong-active: var(--wpds-color-private-bg-fg-fill-inverted); /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ --wpds-color-fg-interactive-neutral-strong-disabled: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ --wpds-color-fg-interactive-neutral-weak: var(--wpds-color-private-bg-fg-surface3); /* Foreground color for interactive elements with neutral tone and weak emphasis. */ --wpds-color-fg-interactive-neutral-weak-disabled: var(--wpds-color-private-bg-fg-surface2); /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ --wpds-color-private-bg-bg-fill-dark: #1e1e1e; --wpds-color-private-bg-bg-fill-inverted1: #2f2f2f; --wpds-color-private-bg-bg-fill-inverted2: #1e1e1e; --wpds-color-private-bg-bg-fill1: #555; --wpds-color-private-bg-bg-fill2: #474747; --wpds-color-private-bg-fg-fill: #f0f0f0; --wpds-color-private-bg-fg-fill-dark: #f0f0f0; --wpds-color-private-bg-fg-fill-inverted: #f0f0f0; --wpds-color-private-bg-fg-surface1: #a9a9a9; --wpds-color-private-bg-fg-surface2: #898989; --wpds-color-private-bg-fg-surface3: #6d6d6d; --wpds-color-private-bg-fg-surface4: #1e1e1e; --wpds-color-private-bg-stroke1: #d0d0d0; --wpds-color-private-bg-stroke2: #adadad; --wpds-color-private-bg-stroke3: #898989; --wpds-color-private-bg-stroke4: #6a6a6a; --wpds-color-private-bg-surface1: #f0f0f0; --wpds-color-private-bg-surface2: #f8f8f8; --wpds-color-private-bg-surface3: #fff; --wpds-color-private-bg-surface4: #eaeaea; --wpds-color-private-bg-surface5: #dfdfdf; --wpds-color-private-bg-surface6: #d0d0d0; --wpds-color-private-caution-bg-fill-dark: #1f1e1b; --wpds-color-private-caution-bg-fill-inverted1: #3d2d00; --wpds-color-private-caution-bg-fill-inverted2: #1f1e1b; --wpds-color-private-caution-bg-fill1: #f0d149; --wpds-color-private-caution-bg-fill2: #dabb2b; --wpds-color-private-caution-fg-fill: #1f1e1b; --wpds-color-private-caution-fg-fill-dark: #f6f1da; --wpds-color-private-caution-fg-fill-inverted: #f6f1da; --wpds-color-private-caution-fg-surface1: #c6a800; --wpds-color-private-caution-fg-surface2: #a58700; --wpds-color-private-caution-fg-surface3: #866a00; --wpds-color-private-caution-fg-surface4: #291d00; --wpds-color-private-caution-stroke1: #b8ab76; --wpds-color-private-caution-stroke2: #988d60; --wpds-color-private-caution-stroke3: #866a00; --wpds-color-private-caution-stroke4: #644e00; --wpds-color-private-caution-surface1: #faf1cb; --wpds-color-private-caution-surface2: #fdf9e7; --wpds-color-private-caution-surface3: #fff; --wpds-color-private-caution-surface4: #f8ebb6; --wpds-color-private-caution-surface5: #f4e08c; --wpds-color-private-caution-surface6: #e7d070; --wpds-color-private-error-bg-fill-dark: #241c1b; --wpds-color-private-error-bg-fill-inverted1: #6d0000; --wpds-color-private-error-bg-fill-inverted2: #241c1b; --wpds-color-private-error-bg-fill1: #e10006; --wpds-color-private-error-bg-fill2: #c90000; --wpds-color-private-error-fg-fill: #f3f0ef; --wpds-color-private-error-fg-fill-dark: #f2efef; --wpds-color-private-error-fg-fill-inverted: #f2efef; --wpds-color-private-error-fg-surface1: #ff8072; --wpds-color-private-error-fg-surface2: #ff3632; --wpds-color-private-error-fg-surface3: #df0003; --wpds-color-private-error-fg-surface4: #4a0000; --wpds-color-private-error-stroke1: #e0978d; --wpds-color-private-error-stroke2: #d66c61; --wpds-color-private-error-stroke3: #df0003; --wpds-color-private-error-stroke4: #ac0000; --wpds-color-private-error-surface1: #fcecea; --wpds-color-private-error-surface2: #fef6f5; --wpds-color-private-error-surface3: #fff; --wpds-color-private-error-surface4: #fbe5e2; --wpds-color-private-error-surface5: #f9d8d3; --wpds-color-private-error-surface6: #f6c4bd; --wpds-color-private-info-bg-fill-dark: #1b1e23; --wpds-color-private-info-bg-fill-inverted1: #00297a; --wpds-color-private-info-bg-fill-inverted2: #1b1e23; --wpds-color-private-info-bg-fill1: #0090ff; --wpds-color-private-info-bg-fill2: #007eec; --wpds-color-private-info-fg-fill: #1b1e23; --wpds-color-private-info-fg-fill-dark: #eff0f2; --wpds-color-private-info-fg-fill-inverted: #eff0f2; --wpds-color-private-info-fg-surface1: #4dafff; --wpds-color-private-info-fg-surface2: #008bfa; --wpds-color-private-info-fg-surface3: #006cd8; --wpds-color-private-info-fg-surface4: #001758; --wpds-color-private-info-stroke1: #8baed6; --wpds-color-private-info-stroke2: #5e90c7; --wpds-color-private-info-stroke3: #006cd8; --wpds-color-private-info-stroke4: #004bb5; --wpds-color-private-info-surface1: #e9f1fa; --wpds-color-private-info-surface2: #f5f9fd; --wpds-color-private-info-surface3: #fff; --wpds-color-private-info-surface4: #e1ecf8; --wpds-color-private-info-surface5: #d1e1f5; --wpds-color-private-info-surface6: #bad3f0; --wpds-color-private-primary-bg-fill-dark: #1b1e26; --wpds-color-private-primary-bg-fill-inverted1: #1401a4; --wpds-color-private-primary-bg-fill-inverted2: #1b1e26; --wpds-color-private-primary-bg-fill1: #3858e9; --wpds-color-private-primary-bg-fill2: #2c47d7; --wpds-color-private-primary-fg-fill: #eff0f2; --wpds-color-private-primary-fg-fill-dark: #eff0f2; --wpds-color-private-primary-fg-fill-inverted: #eff0f2; --wpds-color-private-primary-fg-surface1: #81a7ff; --wpds-color-private-primary-fg-surface2: #5780ff; --wpds-color-private-primary-fg-surface3: #3858e9; --wpds-color-private-primary-fg-surface4: #080071; --wpds-color-private-primary-stroke1: #92a4cf; --wpds-color-private-primary-stroke2: #6f85c0; --wpds-color-private-primary-stroke3: #3858e9; --wpds-color-private-primary-stroke4: #2236c7; --wpds-color-private-primary-surface1: #ecf0f9; --wpds-color-private-primary-surface2: #f6f8fc; --wpds-color-private-primary-surface3: #fff; --wpds-color-private-primary-surface4: #e5eaf7; --wpds-color-private-primary-surface5: #d8e0f3; --wpds-color-private-primary-surface6: #c4d0ee; --wpds-color-private-success-bg-fill-dark: #1b1f1c; --wpds-color-private-success-bg-fill-inverted1: #003a00; --wpds-color-private-success-bg-fill-inverted2: #1b1f1c; --wpds-color-private-success-bg-fill1: #4ab866; --wpds-color-private-success-bg-fill2: #34a554; --wpds-color-private-success-fg-fill: #1b1f1c; --wpds-color-private-success-fg-fill-dark: #edf2ed; --wpds-color-private-success-fg-fill-inverted: #edf2ed; --wpds-color-private-success-fg-surface1: #52bf6d; --wpds-color-private-success-fg-surface2: #2a9e4d; --wpds-color-private-success-fg-surface3: #008030; --wpds-color-private-success-fg-surface4: #002b00; --wpds-color-private-success-stroke1: #78ba84; --wpds-color-private-success-stroke2: #62996c; --wpds-color-private-success-stroke3: #008030; --wpds-color-private-success-stroke4: #006113; --wpds-color-private-success-surface1: #ddf8e0; --wpds-color-private-success-surface2: #f0fcf2; --wpds-color-private-success-surface3: #fff; --wpds-color-private-success-surface4: #cdf5d3; --wpds-color-private-success-surface5: #acf0b7; --wpds-color-private-success-surface6: #7be792; --wpds-color-private-warning-bg-fill-dark: #201e1b; --wpds-color-private-warning-bg-fill-inverted1: #522100; --wpds-color-private-warning-bg-fill-inverted2: #201e1b; --wpds-color-private-warning-bg-fill1: #f09f49; --wpds-color-private-warning-bg-fill2: #db8c33; --wpds-color-private-warning-fg-fill: #201e1b; --wpds-color-private-warning-fg-fill-dark: #f2f0ed; --wpds-color-private-warning-fg-fill-inverted: #f2f0ed; --wpds-color-private-warning-fg-surface1: #e89841; --wpds-color-private-warning-fg-surface2: #c57713; --wpds-color-private-warning-fg-surface3: #a55a00; --wpds-color-private-warning-fg-surface4: #361200; --wpds-color-private-warning-stroke1: #cfa278; --wpds-color-private-warning-stroke2: #aa8562; --wpds-color-private-warning-stroke3: #a55a00; --wpds-color-private-warning-stroke4: #823d00; --wpds-color-private-warning-surface1: #faeee3; --wpds-color-private-warning-surface2: #fdf7f2; --wpds-color-private-warning-surface3: #fff; --wpds-color-private-warning-surface4: #f9e7d8; --wpds-color-private-warning-surface5: #f5dbc3; --wpds-color-private-warning-surface6: #f1c9a4; --wpds-color-stroke-focus-brand: var(--wpds-color-private-primary-stroke3); /* Accessible stroke color applied to focus rings. */ --wpds-color-stroke-interactive-brand: var(--wpds-color-private-primary-stroke3); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */ --wpds-color-stroke-interactive-brand-active: var(--wpds-color-private-primary-stroke4); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */ --wpds-color-stroke-interactive-brand-disabled: var(--wpds-color-private-bg-stroke2); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */ --wpds-color-stroke-interactive-error-strong: var(--wpds-color-private-error-stroke3); /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */ --wpds-color-stroke-interactive-neutral: var(--wpds-color-private-bg-stroke3); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */ --wpds-color-stroke-interactive-neutral-active: var(--wpds-color-private-bg-stroke4); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */ --wpds-color-stroke-interactive-neutral-disabled: var(--wpds-color-private-bg-stroke2); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */ --wpds-color-stroke-interactive-neutral-strong: var(--wpds-color-private-bg-stroke4); /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */ --wpds-color-stroke-surface-brand: var(--wpds-color-private-primary-stroke1); /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-brand-strong: var(--wpds-color-private-primary-stroke3); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-error: var(--wpds-color-private-error-stroke1); /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-error-strong: var(--wpds-color-private-error-stroke3); /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-info: var(--wpds-color-private-info-stroke1); /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-info-strong: var(--wpds-color-private-info-stroke3); /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-neutral: var(--wpds-color-private-bg-stroke2); /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-neutral-strong: var(--wpds-color-private-bg-stroke3); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-neutral-weak: var(--wpds-color-private-bg-stroke1); /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */ --wpds-color-stroke-surface-success: var(--wpds-color-private-success-stroke1); /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-success-strong: var(--wpds-color-private-success-stroke3); /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */ --wpds-color-stroke-surface-warning: var(--wpds-color-private-warning-stroke1); /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */ --wpds-color-stroke-surface-warning-strong: var(--wpds-color-private-warning-stroke3); /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */ --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-2x-large: 40px; /* 2X large line height */ --wpds-font-line-height-large: 28px; /* Large line height */ --wpds-font-line-height-medium: 24px; /* Medium line height */ --wpds-font-line-height-small: 20px; /* Small line height */ --wpds-font-line-height-x-large: 32px; /* Extra large line height */ --wpds-font-line-height-x-small: 16px; /* Extra small line height */ --wpds-font-size-2x-large: 32px; /* 2X large font size */ --wpds-font-size-large: 15px; /* Large font size */ --wpds-font-size-medium: 13px; /* Medium font size */ --wpds-font-size-small: 12px; /* Small font size */ --wpds-font-size-x-large: 20px; /* Extra large font size */ --wpds-font-size-x-small: 11px; /* Extra small font size */ --wpds-spacing-05: 4px; /* Extra small spacing */ --wpds-spacing-10: 8px; /* Small spacing */ --wpds-spacing-15: 12px; /* Medium spacing */ --wpds-spacing-20: 16px; /* Large spacing */ --wpds-spacing-30: 24px; /* Extra large spacing */ --wpds-spacing-40: 32px; /* 2X large spacing */ --wpds-spacing-50: 40px; /* 3X large spacing */ --wpds-spacing-60: 48px; /* 4X large spacing */ --wpds-spacing-70: 56px; /* 5X large spacing */ --wpds-spacing-80: 64px; /* 6X large spacing */ } @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) { :root { --wpds-border-width-focus: 1.5px; /* Border width for focus ring */ } }