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