| 1 |
@charset "UTF-8"; |
| 2 |
/* ------------------------------------------- |
| 3 |
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT! |
| 4 |
* ------------------------------------------- */ |
| 5 |
:root { |
| 6 |
/* Cards, dialogs, notices, and other larger content containers. */ |
| 7 |
--wpds-border-radius-lg: 8px; |
| 8 |
/* Menus, popovers, and other small portaled overlays. */ |
| 9 |
--wpds-border-radius-md: 4px; |
| 10 |
/* Standalone buttons, inputs, and compact controls. */ |
| 11 |
--wpds-border-radius-sm: 2px; |
| 12 |
/* Page and app shell surfaces. */ |
| 13 |
--wpds-border-radius-xl: 12px; |
| 14 |
/* Buttons and other elements nested inside controls. */ |
| 15 |
--wpds-border-radius-xs: 1px; |
| 16 |
/* Border width for focus ring */ |
| 17 |
--wpds-border-width-focus: 2px; |
| 18 |
/* Large width */ |
| 19 |
--wpds-border-width-lg: 8px; |
| 20 |
/* Medium width */ |
| 21 |
--wpds-border-width-md: 4px; |
| 22 |
/* Small width */ |
| 23 |
--wpds-border-width-sm: 2px; |
| 24 |
/* Extra small width */ |
| 25 |
--wpds-border-width-xs: 1px; |
| 26 |
/* Background color for interactive elements with brand tone and strong emphasis. */ |
| 27 |
--wpds-color-background-interactive-brand-strong: #3858e9; |
| 28 |
/* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ |
| 29 |
--wpds-color-background-interactive-brand-strong-active: #2e49d9; |
| 30 |
/* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */ |
| 31 |
--wpds-color-background-interactive-brand-strong-disabled: #e6e6e6; |
| 32 |
/* Background color for interactive elements with brand tone and weak emphasis. */ |
| 33 |
--wpds-color-background-interactive-brand-weak: #0000; |
| 34 |
/* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */ |
| 35 |
--wpds-color-background-interactive-brand-weak-active: #e5eaf7; |
| 36 |
/* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */ |
| 37 |
--wpds-color-background-interactive-brand-weak-disabled: #0000; |
| 38 |
/* Background color for interactive elements with error tone and normal emphasis. */ |
| 39 |
--wpds-color-background-interactive-error: #0000; |
| 40 |
/* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */ |
| 41 |
--wpds-color-background-interactive-error-active: #fff6f5; |
| 42 |
/* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */ |
| 43 |
--wpds-color-background-interactive-error-disabled: #0000; |
| 44 |
/* Background color for interactive elements with error tone and strong emphasis. */ |
| 45 |
--wpds-color-background-interactive-error-strong: #cc1818; |
| 46 |
/* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */ |
| 47 |
--wpds-color-background-interactive-error-strong-active: #b90000; |
| 48 |
/* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */ |
| 49 |
--wpds-color-background-interactive-error-strong-disabled: #e6e6e6; |
| 50 |
/* Background color for interactive elements with error tone and weak emphasis. */ |
| 51 |
--wpds-color-background-interactive-error-weak: #0000; |
| 52 |
/* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */ |
| 53 |
--wpds-color-background-interactive-error-weak-active: #fae5e1; |
| 54 |
/* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */ |
| 55 |
--wpds-color-background-interactive-error-weak-disabled: #0000; |
| 56 |
/* Solid background color for neutral interactive controls, such as input fields and unchecked checkboxes. */ |
| 57 |
--wpds-color-background-interactive-neutral: #fff; |
| 58 |
/* Solid background color for neutral interactive controls that are hovered, focused, or active. */ |
| 59 |
--wpds-color-background-interactive-neutral-active: #fff; |
| 60 |
/* Solid background color for neutral interactive controls in their disabled state. */ |
| 61 |
--wpds-color-background-interactive-neutral-disabled: #fff; |
| 62 |
/* Background color for interactive elements with neutral tone and strong emphasis. */ |
| 63 |
--wpds-color-background-interactive-neutral-strong: #2d2d2d; |
| 64 |
/* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ |
| 65 |
--wpds-color-background-interactive-neutral-strong-active: #1e1e1e; |
| 66 |
/* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ |
| 67 |
--wpds-color-background-interactive-neutral-strong-disabled: #e6e6e6; |
| 68 |
/* Background color for interactive elements with neutral tone and weak emphasis. */ |
| 69 |
--wpds-color-background-interactive-neutral-weak: #0000; |
| 70 |
/* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ |
| 71 |
--wpds-color-background-interactive-neutral-weak-active: #ededed; |
| 72 |
/* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ |
| 73 |
--wpds-color-background-interactive-neutral-weak-disabled: #0000; |
| 74 |
/* Background color for surfaces with brand tone and normal emphasis. */ |
| 75 |
--wpds-color-background-surface-brand: #ecf0fa; |
| 76 |
/* Background color for surfaces with caution tone and normal emphasis. */ |
| 77 |
--wpds-color-background-surface-caution: #fee995; |
| 78 |
/* Background color for surfaces with caution tone and weak emphasis. */ |
| 79 |
--wpds-color-background-surface-caution-weak: #fff9ca; |
| 80 |
/* Background color for surfaces with error tone and normal emphasis. */ |
| 81 |
--wpds-color-background-surface-error: #fae5e1; |
| 82 |
/* Background color for surfaces with error tone and weak emphasis. */ |
| 83 |
--wpds-color-background-surface-error-weak: #fff6f5; |
| 84 |
/* Background color for surfaces with info tone and normal emphasis. */ |
| 85 |
--wpds-color-background-surface-info: #deebfa; |
| 86 |
/* Background color for surfaces with info tone and weak emphasis. */ |
| 87 |
--wpds-color-background-surface-info-weak: #f3f9ff; |
| 88 |
/* Background color for surfaces with normal emphasis. */ |
| 89 |
--wpds-color-background-surface-neutral: #fcfcfc; |
| 90 |
/* Background color for surfaces with strong emphasis. */ |
| 91 |
--wpds-color-background-surface-neutral-strong: #fff; |
| 92 |
/* Background color for surfaces with weak emphasis. */ |
| 93 |
--wpds-color-background-surface-neutral-weak: #f4f4f4; |
| 94 |
/* Background color for surfaces with success tone and normal emphasis. */ |
| 95 |
--wpds-color-background-surface-success: #c2f8ca; |
| 96 |
/* Background color for surfaces with success tone and weak emphasis. */ |
| 97 |
--wpds-color-background-surface-success-weak: #ebffed; |
| 98 |
/* Background color for surfaces with warning tone and normal emphasis. */ |
| 99 |
--wpds-color-background-surface-warning: #fde6be; |
| 100 |
/* Background color for surfaces with warning tone and weak emphasis. */ |
| 101 |
--wpds-color-background-surface-warning-weak: #fff7e1; |
| 102 |
/* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */ |
| 103 |
--wpds-color-background-thumb-brand: #3858e9; |
| 104 |
/* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */ |
| 105 |
--wpds-color-background-thumb-brand-active: #3858e9; |
| 106 |
/* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */ |
| 107 |
--wpds-color-background-thumb-brand-disabled: #dbdbdb; |
| 108 |
/* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */ |
| 109 |
--wpds-color-background-thumb-neutral-weak: #8d8d8d; |
| 110 |
/* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */ |
| 111 |
--wpds-color-background-thumb-neutral-weak-active: #6e6e6e; |
| 112 |
/* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb), in their disabled state. */ |
| 113 |
--wpds-color-background-thumb-neutral-weak-disabled: #dbdbdb; |
| 114 |
/* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */ |
| 115 |
--wpds-color-background-track-neutral: #dbdbdb; |
| 116 |
/* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */ |
| 117 |
--wpds-color-background-track-neutral-weak: #f0f0f0; |
| 118 |
/* Foreground color for content like text with caution tone and normal emphasis. */ |
| 119 |
--wpds-color-foreground-content-caution: #281d00; |
| 120 |
/* Foreground color for content like text with caution tone and weak emphasis. */ |
| 121 |
--wpds-color-foreground-content-caution-weak: #836a00; |
| 122 |
/* Foreground color for content like text with error tone and normal emphasis. */ |
| 123 |
--wpds-color-foreground-content-error: #470000; |
| 124 |
/* Foreground color for content like text with error tone and weak emphasis. */ |
| 125 |
--wpds-color-foreground-content-error-weak: #cc1818; |
| 126 |
/* Foreground color for content like text with info tone and normal emphasis. */ |
| 127 |
--wpds-color-foreground-content-info: #001b4f; |
| 128 |
/* Foreground color for content like text with info tone and weak emphasis. */ |
| 129 |
--wpds-color-foreground-content-info-weak: #006bd7; |
| 130 |
/* Foreground color for content like text with normal emphasis. */ |
| 131 |
--wpds-color-foreground-content-neutral: #1e1e1e; |
| 132 |
/* Foreground color for content like text with weak emphasis. */ |
| 133 |
--wpds-color-foreground-content-neutral-weak: #707070; |
| 134 |
/* Foreground color for content like text with success tone and normal emphasis. */ |
| 135 |
--wpds-color-foreground-content-success: #002900; |
| 136 |
/* Foreground color for content like text with success tone and weak emphasis. */ |
| 137 |
--wpds-color-foreground-content-success-weak: #008030; |
| 138 |
/* Foreground color for content like text with warning tone and normal emphasis. */ |
| 139 |
--wpds-color-foreground-content-warning: #2e1900; |
| 140 |
/* Foreground color for content like text with warning tone and weak emphasis. */ |
| 141 |
--wpds-color-foreground-content-warning-weak: #936300; |
| 142 |
/* Foreground color for interactive elements with brand tone and normal emphasis. */ |
| 143 |
--wpds-color-foreground-interactive-brand: #3858e9; |
| 144 |
/* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ |
| 145 |
--wpds-color-foreground-interactive-brand-active: #0b0070; |
| 146 |
/* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */ |
| 147 |
--wpds-color-foreground-interactive-brand-disabled: #8d8d8d; |
| 148 |
/* Foreground color for interactive elements with brand tone and strong emphasis. */ |
| 149 |
--wpds-color-foreground-interactive-brand-strong: #eff0f2; |
| 150 |
/* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ |
| 151 |
--wpds-color-foreground-interactive-brand-strong-active: #eff0f2; |
| 152 |
/* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */ |
| 153 |
--wpds-color-foreground-interactive-brand-strong-disabled: #8d8d8d; |
| 154 |
/* Foreground color for interactive elements with error tone and normal emphasis. */ |
| 155 |
--wpds-color-foreground-interactive-error: #cc1818; |
| 156 |
/* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */ |
| 157 |
--wpds-color-foreground-interactive-error-active: #470000; |
| 158 |
/* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */ |
| 159 |
--wpds-color-foreground-interactive-error-disabled: #8d8d8d; |
| 160 |
/* Foreground color for interactive elements with error tone and strong emphasis. */ |
| 161 |
--wpds-color-foreground-interactive-error-strong: #f2efef; |
| 162 |
/* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */ |
| 163 |
--wpds-color-foreground-interactive-error-strong-active: #f2efef; |
| 164 |
/* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */ |
| 165 |
--wpds-color-foreground-interactive-error-strong-disabled: #8d8d8d; |
| 166 |
/* Foreground color for interactive elements with neutral tone and normal emphasis. */ |
| 167 |
--wpds-color-foreground-interactive-neutral: #1e1e1e; |
| 168 |
/* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ |
| 169 |
--wpds-color-foreground-interactive-neutral-active: #1e1e1e; |
| 170 |
/* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ |
| 171 |
--wpds-color-foreground-interactive-neutral-disabled: #8d8d8d; |
| 172 |
/* Foreground color for interactive elements with neutral tone and strong emphasis. */ |
| 173 |
--wpds-color-foreground-interactive-neutral-strong: #f0f0f0; |
| 174 |
/* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ |
| 175 |
--wpds-color-foreground-interactive-neutral-strong-active: #f0f0f0; |
| 176 |
/* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ |
| 177 |
--wpds-color-foreground-interactive-neutral-strong-disabled: #8d8d8d; |
| 178 |
/* Foreground color for interactive elements with neutral tone and weak emphasis. */ |
| 179 |
--wpds-color-foreground-interactive-neutral-weak: #707070; |
| 180 |
/* Foreground color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ |
| 181 |
--wpds-color-foreground-interactive-neutral-weak-active: #1e1e1e; |
| 182 |
/* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ |
| 183 |
--wpds-color-foreground-interactive-neutral-weak-disabled: #8d8d8d; |
| 184 |
/* Accessible stroke color applied to focus rings. */ |
| 185 |
--wpds-color-stroke-focus: #3858e9; |
| 186 |
/* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */ |
| 187 |
--wpds-color-stroke-interactive-brand: #3858e9; |
| 188 |
/* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */ |
| 189 |
--wpds-color-stroke-interactive-brand-active: #2337c8; |
| 190 |
/* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */ |
| 191 |
--wpds-color-stroke-interactive-brand-disabled: #dbdbdb; |
| 192 |
/* Accessible stroke color used for interactive error-toned elements with normal emphasis. */ |
| 193 |
--wpds-color-stroke-interactive-error: #cc1818; |
| 194 |
/* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */ |
| 195 |
--wpds-color-stroke-interactive-error-active: #9d0000; |
| 196 |
/* Accessible stroke color used for interactive error-toned elements with normal emphasis, in their disabled state. */ |
| 197 |
--wpds-color-stroke-interactive-error-disabled: #dbdbdb; |
| 198 |
/* Accessible stroke color used for interactive error-toned elements with strong emphasis. */ |
| 199 |
--wpds-color-stroke-interactive-error-strong: #cc1818; |
| 200 |
/* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */ |
| 201 |
--wpds-color-stroke-interactive-neutral: #8d8d8d; |
| 202 |
/* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */ |
| 203 |
--wpds-color-stroke-interactive-neutral-active: #6e6e6e; |
| 204 |
/* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */ |
| 205 |
--wpds-color-stroke-interactive-neutral-disabled: #dbdbdb; |
| 206 |
/* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */ |
| 207 |
--wpds-color-stroke-interactive-neutral-strong: #6e6e6e; |
| 208 |
/* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */ |
| 209 |
--wpds-color-stroke-surface-brand: #aebbda; |
| 210 |
/* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */ |
| 211 |
--wpds-color-stroke-surface-brand-strong: #3858e9; |
| 212 |
/* Decorative stroke color used to define caution-toned surface boundaries with normal emphasis. */ |
| 213 |
--wpds-color-stroke-surface-caution: #d0c28b; |
| 214 |
/* Decorative stroke color used to define caution-toned surface boundaries with strong emphasis. */ |
| 215 |
--wpds-color-stroke-surface-caution-strong: #836a00; |
| 216 |
/* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */ |
| 217 |
--wpds-color-stroke-surface-error: #e0afa7; |
| 218 |
/* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */ |
| 219 |
--wpds-color-stroke-surface-error-strong: #cc1818; |
| 220 |
/* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */ |
| 221 |
--wpds-color-stroke-surface-info: #adc6e2; |
| 222 |
/* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */ |
| 223 |
--wpds-color-stroke-surface-info-strong: #006bd7; |
| 224 |
/* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */ |
| 225 |
--wpds-color-stroke-surface-neutral: #dbdbdb; |
| 226 |
/* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ |
| 227 |
--wpds-color-stroke-surface-neutral-strong: #8d8d8d; |
| 228 |
/* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */ |
| 229 |
--wpds-color-stroke-surface-neutral-weak: #f0f0f0; |
| 230 |
/* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */ |
| 231 |
--wpds-color-stroke-surface-success: #92d39d; |
| 232 |
/* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */ |
| 233 |
--wpds-color-stroke-surface-success-strong: #008030; |
| 234 |
/* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */ |
| 235 |
--wpds-color-stroke-surface-warning: #e1bd7c; |
| 236 |
/* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */ |
| 237 |
--wpds-color-stroke-surface-warning-strong: #936300; |
| 238 |
/* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */ |
| 239 |
--wpds-cursor-control: pointer; |
| 240 |
/* 2x extra large gap */ |
| 241 |
--wpds-dimension-gap-2xl: 32px; |
| 242 |
/* 3x extra large gap */ |
| 243 |
--wpds-dimension-gap-3xl: 40px; |
| 244 |
/* Large gap */ |
| 245 |
--wpds-dimension-gap-lg: 16px; |
| 246 |
/* Medium gap */ |
| 247 |
--wpds-dimension-gap-md: 12px; |
| 248 |
/* Small gap */ |
| 249 |
--wpds-dimension-gap-sm: 8px; |
| 250 |
/* Extra large gap */ |
| 251 |
--wpds-dimension-gap-xl: 24px; |
| 252 |
/* Extra small gap */ |
| 253 |
--wpds-dimension-gap-xs: 4px; |
| 254 |
/* 2x extra large padding */ |
| 255 |
--wpds-dimension-padding-2xl: 24px; |
| 256 |
/* 3x extra large padding */ |
| 257 |
--wpds-dimension-padding-3xl: 32px; |
| 258 |
/* Large padding */ |
| 259 |
--wpds-dimension-padding-lg: 16px; |
| 260 |
/* Medium padding */ |
| 261 |
--wpds-dimension-padding-md: 12px; |
| 262 |
/* Small padding */ |
| 263 |
--wpds-dimension-padding-sm: 8px; |
| 264 |
/* Extra large padding */ |
| 265 |
--wpds-dimension-padding-xl: 20px; |
| 266 |
/* Extra small padding */ |
| 267 |
--wpds-dimension-padding-xs: 4px; |
| 268 |
/* For small controls like checkboxes and radios, or small decorative icons */ |
| 269 |
--wpds-dimension-size-2xs: 16px; |
| 270 |
/* Small markers */ |
| 271 |
--wpds-dimension-size-3xs: 12px; |
| 272 |
/* Visual size for small interactive elements like resize handles */ |
| 273 |
--wpds-dimension-size-4xs: 8px; |
| 274 |
/* Notification indicators */ |
| 275 |
--wpds-dimension-size-5xs: 4px; |
| 276 |
/* Default size for buttons and inputs */ |
| 277 |
--wpds-dimension-size-lg: 40px; |
| 278 |
/* For medium-sized buttons and inputs */ |
| 279 |
--wpds-dimension-size-md: 32px; |
| 280 |
/* For icons and small buttons */ |
| 281 |
--wpds-dimension-size-sm: 24px; |
| 282 |
/* For medium sized icons */ |
| 283 |
--wpds-dimension-size-xs: 20px; |
| 284 |
/* 2x extra large surface width */ |
| 285 |
--wpds-dimension-surface-width-2xl: 960px; |
| 286 |
/* Large surface width */ |
| 287 |
--wpds-dimension-surface-width-lg: 560px; |
| 288 |
/* Medium surface width */ |
| 289 |
--wpds-dimension-surface-width-md: 400px; |
| 290 |
/* Small surface width */ |
| 291 |
--wpds-dimension-surface-width-sm: 320px; |
| 292 |
/* Extra large surface width */ |
| 293 |
--wpds-dimension-surface-width-xl: 720px; |
| 294 |
/* Extra small surface width */ |
| 295 |
--wpds-dimension-surface-width-xs: 240px; |
| 296 |
/* Deliberate animations like slides and reveals */ |
| 297 |
--wpds-motion-duration-lg: 300ms; |
| 298 |
/* Standard transitions like menus and popovers */ |
| 299 |
--wpds-motion-duration-md: 200ms; |
| 300 |
/* Micro-interactions like focus rings and state changes */ |
| 301 |
--wpds-motion-duration-sm: 100ms; |
| 302 |
/* Extended animations like complex or multi-step transitions */ |
| 303 |
--wpds-motion-duration-xl: 400ms; |
| 304 |
/* Micro-delays and transition offsets */ |
| 305 |
--wpds-motion-duration-xs: 50ms; |
| 306 |
/* General-purpose easing for on-screen movement like resizing, morphing, and layout shifts */ |
| 307 |
--wpds-motion-easing-balanced: cubic-bezier(0.4, 0, 0.2, 1); |
| 308 |
/* Noticeable easing for enter/exit and spatial transitions like menus, popovers, dialogs, and drawers */ |
| 309 |
--wpds-motion-easing-expressive: cubic-bezier(0.25, 0, 0, 1); |
| 310 |
/* Nearly imperceptible easing for hover, color, and background transitions */ |
| 311 |
--wpds-motion-easing-subtle: cubic-bezier(0.15, 0, 0.15, 1); |
| 312 |
/* Body font family */ |
| 313 |
--wpds-typography-font-family-body: |
| 314 |
-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", |
| 315 |
"Cantarell", "Helvetica Neue", sans-serif; |
| 316 |
/* Headings font family */ |
| 317 |
--wpds-typography-font-family-heading: |
| 318 |
-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", |
| 319 |
"Cantarell", "Helvetica Neue", sans-serif; |
| 320 |
/* Monospace font family */ |
| 321 |
--wpds-typography-font-family-mono: "Menlo", "Consolas", monaco, monospace; |
| 322 |
/* 2X large font size */ |
| 323 |
--wpds-typography-font-size-2xl: 32px; |
| 324 |
/* Large font size */ |
| 325 |
--wpds-typography-font-size-lg: 15px; |
| 326 |
/* Medium font size */ |
| 327 |
--wpds-typography-font-size-md: 13px; |
| 328 |
/* Small font size */ |
| 329 |
--wpds-typography-font-size-sm: 12px; |
| 330 |
/* Extra large font size */ |
| 331 |
--wpds-typography-font-size-xl: 20px; |
| 332 |
/* Extra small font size */ |
| 333 |
--wpds-typography-font-size-xs: 11px; |
| 334 |
/* Baseline text weight for body copy and UI text */ |
| 335 |
--wpds-typography-font-weight-default: 400; |
| 336 |
/* Elevated text weight for labels, controls, and headings */ |
| 337 |
--wpds-typography-font-weight-emphasis: 600; |
| 338 |
/* 2X large line height */ |
| 339 |
--wpds-typography-line-height-2xl: 40px; |
| 340 |
/* Large line height */ |
| 341 |
--wpds-typography-line-height-lg: 28px; |
| 342 |
/* Medium line height */ |
| 343 |
--wpds-typography-line-height-md: 24px; |
| 344 |
/* Small line height */ |
| 345 |
--wpds-typography-line-height-sm: 20px; |
| 346 |
/* Extra large line height */ |
| 347 |
--wpds-typography-line-height-xl: 32px; |
| 348 |
/* Extra small line height */ |
| 349 |
--wpds-typography-line-height-xs: 16px; |
| 350 |
} |
| 351 |
|
| 352 |
@media (min-resolution: 192dpi) { |
| 353 |
:root { |
| 354 |
/* Border width for focus ring */ |
| 355 |
--wpds-border-width-focus: 1.5px; |
| 356 |
} |
| 357 |
} |
| 358 |
[data-wpds-corner-radius=none], |
| 359 |
:root[data-wpds-root-provider=true][data-wpds-corner-radius=none] { |
| 360 |
/* Cards, dialogs, notices, and other larger content containers. */ |
| 361 |
--wpds-border-radius-lg: 0px; |
| 362 |
/* Menus, popovers, and other small portaled overlays. */ |
| 363 |
--wpds-border-radius-md: 0px; |
| 364 |
/* Standalone buttons, inputs, and compact controls. */ |
| 365 |
--wpds-border-radius-sm: 0px; |
| 366 |
/* Page and app shell surfaces. */ |
| 367 |
--wpds-border-radius-xl: 0px; |
| 368 |
/* Buttons and other elements nested inside controls. */ |
| 369 |
--wpds-border-radius-xs: 0px; |
| 370 |
} |
| 371 |
|
| 372 |
[data-wpds-corner-radius=subtle], |
| 373 |
:root[data-wpds-root-provider=true][data-wpds-corner-radius=subtle] { |
| 374 |
/* Cards, dialogs, notices, and other larger content containers. */ |
| 375 |
--wpds-border-radius-lg: 8px; |
| 376 |
/* Menus, popovers, and other small portaled overlays. */ |
| 377 |
--wpds-border-radius-md: 4px; |
| 378 |
/* Standalone buttons, inputs, and compact controls. */ |
| 379 |
--wpds-border-radius-sm: 2px; |
| 380 |
/* Page and app shell surfaces. */ |
| 381 |
--wpds-border-radius-xl: 12px; |
| 382 |
/* Buttons and other elements nested inside controls. */ |
| 383 |
--wpds-border-radius-xs: 1px; |
| 384 |
} |
| 385 |
|
| 386 |
[data-wpds-corner-radius=moderate], |
| 387 |
:root[data-wpds-root-provider=true][data-wpds-corner-radius=moderate] { |
| 388 |
/* Cards, dialogs, notices, and other larger content containers. */ |
| 389 |
--wpds-border-radius-lg: 16px; |
| 390 |
/* Menus, popovers, and other small portaled overlays. */ |
| 391 |
--wpds-border-radius-md: 12px; |
| 392 |
/* Standalone buttons, inputs, and compact controls. */ |
| 393 |
--wpds-border-radius-sm: 8px; |
| 394 |
/* Page and app shell surfaces. */ |
| 395 |
--wpds-border-radius-xl: 20px; |
| 396 |
/* Buttons and other elements nested inside controls. */ |
| 397 |
--wpds-border-radius-xs: 6px; |
| 398 |
} |
| 399 |
|
| 400 |
[data-wpds-corner-radius=pronounced], |
| 401 |
:root[data-wpds-root-provider=true][data-wpds-corner-radius=pronounced] { |
| 402 |
/* Cards, dialogs, notices, and other larger content containers. */ |
| 403 |
--wpds-border-radius-lg: 24px; |
| 404 |
/* Menus, popovers, and other small portaled overlays. */ |
| 405 |
--wpds-border-radius-md: 22px; |
| 406 |
/* Standalone buttons, inputs, and compact controls. */ |
| 407 |
--wpds-border-radius-sm: 20px; |
| 408 |
/* Page and app shell surfaces. */ |
| 409 |
--wpds-border-radius-xl: 26px; |
| 410 |
/* Buttons and other elements nested inside controls. */ |
| 411 |
--wpds-border-radius-xs: 18px; |
| 412 |
} |
