{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"common-variables","__idx":0},"children":["Common Variables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["List of CSS variables that are reused in other CSS variables."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"colors","__idx":1},"children":["Colors"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Base colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-warm-grey-1: #fbfbfc;\n--color-warm-grey-2: #ededf2;\n--color-warm-grey-3: #dcdde5;\n--color-warm-grey-4: #c4c6d1;\n--color-warm-grey-5: #9b9ca8;\n--color-warm-grey-6: #6e6f7a;\n--color-warm-grey-7: #555761;\n--color-warm-grey-8: #3b3c45;\n--color-warm-grey-9: #2a2b33;\n--color-warm-grey-10: #22242b;\n--color-warm-grey-11: #1a1c21;\n\n--color-purple-1: #f3f1fe;\n--color-purple-2: #e6e1fe;\n--color-purple-3: #cec4fd;\n--color-purple-4: #b3a6f9;\n--color-purple-5: #9c8ef4;\n--color-purple-6: #7a69ee;\n--color-purple-7: #5b4ccc;\n--color-purple-8: #4034ab;\n--color-purple-9: #291f99;\n--color-purple-10: #2b2480;\n--color-purple-11: #2c2770;\n\n--color-blueberry-1: #F0F4FF;\n--color-blueberry-2: #dfe8ff;\n--color-blueberry-3: #bfd0ff;\n--color-blueberry-4: #9fb7ff;\n--color-blueberry-5: #87a3ff;\n--color-blueberry-6: #5f81ff;\n--color-blueberry-7: #4561db;\n--color-blueberry-8: #2f46b7;\n--color-blueberry-9: #1e2f93;\n--color-blueberry-10: #222d7a;\n--color-blueberry-11: #232a61;\n\n--color-blue-1: #edf5fc;\n--color-blue-2: #d9ebfc;\n--color-blue-3: #b3d7fc;\n--color-blue-4: #90c2fc;\n--color-blue-5: #6eabfa;\n--color-blue-6: #1f7cff;\n--color-blue-7: #3072db;\n--color-blue-8: #2558b8;\n--color-blue-9: #1f4399;\n--color-blue-10: #223d7a;\n--color-blue-11: #233061;\n\n--color-sky-1: #eafefe;\n--color-sky-2: #cefdfe;\n--color-sky-3: #9df4fe;\n--color-sky-4: #6ce5fe;\n--color-sky-5: #47d2fe;\n--color-sky-6: #0bb4fe;\n--color-sky-7: #088cda;\n--color-sky-8: #0569b6;\n--color-sky-9: #155393;\n--color-sky-10: #1d4479;\n--color-sky-11: #1f3757;\n\n--color-turquoise-1: #ebfdf9;\n--color-turquoise-2: #ccfdf3;\n--color-turquoise-3: #9afbef;\n--color-turquoise-4: #67f5ef;\n--color-turquoise-5: #41e6ec;\n--color-turquoise-6: #08c7e0;\n--color-turquoise-7: #059cc0;\n--color-turquoise-8: #0475a1;\n--color-turquoise-9: #125a81;\n--color-turquoise-10: #1c496b;\n--color-turquoise-11: #1c394f;\n\n--color-persian-green-1: #ebfaf3;\n--color-persian-green-2: #cafae4;\n--color-persian-green-3: #97f5d2;\n--color-persian-green-4: #5fe2be;\n--color-persian-green-5: #37c6ab;\n--color-persian-green-6: #06a192;\n--color-persian-green-7: #048a89;\n--color-persian-green-8: #036a73;\n--color-persian-green-9: #0f4f5d;\n--color-persian-green-10: #143d4d;\n--color-persian-green-11: #193b47;\n\n--color-green-1: #edfbec;\n--color-green-2: #d2fbd0;\n--color-green-3: #a3f7a9;\n--color-green-4: #72e985;\n--color-green-5: #4dd470;\n--color-green-6: #1cb854;\n--color-green-7: #149e53;\n--color-green-8: #0e8450;\n--color-green-9: #195848;\n--color-green-10: #1a4d40;\n\n--color-grass-1: #f0faeb;\n--color-grass-2: #e3fad6;\n--color-grass-3: #c2f6ae;\n--color-grass-4: #93e380;\n--color-grass-5: #66c95b;\n--color-grass-6: #2fa52d;\n--color-grass-7: #208d28;\n--color-grass-8: #167625;\n--color-grass-9: #135f25;\n--color-grass-10: #164f29;\n--color-grass-11: #1f4d2d;\n\n--color-carrot-1: #fff8e8;\n--color-carrot-2: #fff0cc;\n--color-carrot-3: #FFE4AB;\n--color-carrot-4: #FFD181;\n--color-carrot-5: #ffbe62;\n--color-carrot-6: #ffa02e;\n--color-carrot-7: #db7e21;\n--color-carrot-8: #b75f17;\n--color-carrot-9: #934c1a;\n--color-carrot-10: #7a4222;\n--color-carrot-11: #5c3721;\n\n--color-orange-1: #fff4e8;\n--color-orange-2: #ffead2;\n--color-orange-3: #ffcea6;\n--color-orange-4: #ffad7a;\n--color-orange-5: #ff8c59;\n--color-orange-6: #ff5722;\n--color-orange-7: #db3918;\n--color-orange-8: #b72111;\n--color-orange-9: #931e1a;\n--color-orange-10: #7a2024;\n--color-orange-11: #612729;\n\n--color-red-1: #fef1ea;\n--color-red-2: #fee3d4;\n--color-red-3: #fdc0ab;\n--color-red-4: #fb9580;\n--color-red-5: #f86d60;\n--color-red-6: #f42d2d;\n--color-red-7: #d12030;\n--color-red-8: #af1631;\n--color-red-9: #8d1c37;\n--color-red-10: #752137;\n--color-red-11: #612235;\n\n--color-raspberry-1: #fef0ef;\n--color-raspberry-2: #fed9d5;\n--color-raspberry-3: #feacad;\n--color-raspberry-4: #fd838f;\n--color-raspberry-5: #fb6382;\n--color-raspberry-6: #f9316d;\n--color-raspberry-7: #d6236a;\n--color-raspberry-8: #b3185e;\n--color-raspberry-9: #901d56;\n--color-raspberry-10: #77214c;\n--color-raspberry-11: #612241;\n\n--color-magenta-1: #feeff5;\n--color-magenta-2: #fecce0;\n--color-magenta-3: #fe99c3;\n--color-magenta-4: #fe66aa;\n--color-magenta-5: #fe409c;\n--color-magenta-6: #fe0184;\n--color-magenta-7: #da0078;\n--color-magenta-8: #b6006a;\n--color-magenta-9: #931a65;\n--color-magenta-10: #791f5a;\n--color-magenta-11: #5e1a48;\n\n--color-black: #000000;\n--color-white: #ffffff;\n--color-static-white: #ffffff;\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Primary colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-primary-bg: var(--color-blueberry-1);\n--color-primary-bg-hover: var(--color-blueberry-2);\n--color-primary-border: var(--color-blueberry-3);\n--color-primary-border-hover: var(--color-blueberry-4);\n--color-primary-hover: var(--color-blueberry-5);\n--color-primary-base: var(--color-blueberry-6);\n--color-primary-active: var(--color-blueberry-7);\n--color-primary-text-hover: var(--color-blueberry-8);\n--color-primary-text: var(--color-blueberry-9);\n--color-primary-text-active: var(--color-blueberry-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Success colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-success-bg: var(--color-green-1);\n--color-success-bg-hover: var(--color-green-2);\n--color-success-border: var(--color-green-3);\n--color-success-border-hover: var(--color-green-4);\n--color-success-hover: var(--color-green-5);\n--color-success-base: var(--color-green-6);\n--color-success-active: var(--color-green-7);\n--color-success-text-hover: var(--color-green-8);\n--color-success-text: var(--color-green-9);\n--color-success-text-active: var(--color-green-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Info colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-info-bg: var(--color-blue-1);\n--color-info-bg-hover: var(--color-blue-2);\n--color-info-border: var(--color-blue-3);\n--color-info-border-hover: var(--color-blue-4);\n--color-info-hover: var(--color-blue-5);\n--color-info-base: var(--color-blue-6);\n--color-info-active: var(--color-blue-7);\n--color-info-text-hover: var(--color-blue-8);\n--color-info-text: var(--color-blue-9);\n--color-info-text-active: var(--color-blue-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Warning colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-warning-bg: var(--color-carrot-1);\n--color-warning-bg-hover: var(--color-carrot-2);\n--color-warning-border: var(--color-carrot-3);\n--color-warning-border-hover: var(--color-carrot-4);\n--color-warning-hover: var(--color-carrot-5);\n--color-warning-base: var(--color-carrot-6);\n--color-warning-active: var(--color-carrot-7);\n--color-warning-text-hover: var(--color-carrot-8);\n--color-warning-text: var(--color-carrot-9);\n--color-warning-text-active: var(--color-carrot-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Error colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-error-bg: var(--color-raspberry-1);\n--color-error-bg-hover: var(--color-raspberry-2);\n--color-error-border: var(--color-raspberry-3);\n--color-error-border-hover: var(--color-raspberry-4);\n--color-error-hover: var(--color-raspberry-5);\n--color-error-base: var(--color-raspberry-6);\n--color-error-active: var(--color-raspberry-7);\n--color-error-text-hover: var(--color-raspberry-8);\n--color-error-text: var(--color-raspberry-9);\n--color-error-text-active: var(--color-raspberry-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Layer colors"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--layer-color: var(--color-warm-grey-1);\n--layer-color-hover: var(--color-warm-grey-2);\n--layer-color-active: var(--color-warm-grey-3);\n--layer-color-ontonal: var(--color-white);\n--layer-color-ontonal-hover: var(--color-hover-base);\n--layer-color-ontonal-active: var(--color-warm-grey-3);\n--layer-color-accent: var(--color-warm-grey-10);\n--layer-accent-hover: var(--color-warm-grey-9);\n--layer-color-onraised: var(--color-warm-grey-2);\n--layer-color-raised:  var(--color-white);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography","__idx":2},"children":["Typography"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Common typography"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--text-color-primary: var(--color-warm-grey-11);\n--text-color-secondary: var(--color-warm-grey-8);\n--text-color-description: var(--color-warm-grey-7);\n--text-color-helper: var(--color-warm-grey-6);\n--text-color-disabled: var(--color-warm-grey-5);\n--text-color-on-color: var(--color-static-white);\n--text-color-inverse: var(--color-white);\n\n--font-size-base: 14px;\n--font-size-sm: 12px;\n--font-size-lg: 16px;\n--font-size-xl: 20px;\n\n--line-height-base: 22px;\n--line-height-sm: 20px;\n--line-height-md: var(--line-height-base);\n--line-height-lg: 24px;\n--line-height-xl: 28px;\n--line-height-xxl: 30px;\n\n--font-weight-regular: 400;\n--font-weight-medium: 500;\n--font-weight-semibold: 600;\n--font-weight-bold: 700;\n--font-weight-italic: 'Regular Italic';\n\n--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;\n--font-family-monospaced: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',\n'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Fira Mono',\n'Droid Sans Mono', 'Courier New', monospace;\n\n--text-smoothing: antialiased;\n--text-rendering: optimizeSpeed;\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Headings typography"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--heading-font-family: var(--font-family-base);\n--heading-font-weight: var(--font-weight-semibold);\n--heading-text-color: var(--text-color-primary);\n\n--heading-anchor-offset-right: var(--spacing-xs);\n--heading-anchor-color: var(--icon-color-primary);\n--heading-anchor-icon: none;\n\n--h1-font-family: var(--heading-font-family);\n--h1-font-weight: var(--heading-font-weight);\n--h1-font-size: 36px;\n--h1-line-height: 44px;\n--h1-margin-top: var(--spacing-xl);\n--h1-margin-bottom: var(--spacing-base);\n--h1-text-color: var(--heading-text-color);\n--h1-code-line-height: 60px;\n\n--h2-font-family: var(--heading-font-family);\n--h2-font-weight: var(--heading-font-weight);\n--h2-font-size: 28px;\n--h2-line-height: 36px;\n--h2-margin-top: var(--spacing-xl);\n--h2-margin-bottom: var(--spacing-base);\n--h2-text-color: var(--heading-text-color);\n--h2-code-line-height: 48px;\n\n--h3-font-family: var(--heading-font-family);\n--h3-font-weight: var(--heading-font-weight);\n--h3-font-size: 24px;\n--h3-line-height: 32px;\n--h3-margin-top: var(--spacing-lg);\n--h3-margin-bottom: var(--spacing-base);\n--h3-text-color: var(--heading-text-color);\n--h3-code-line-height: var(--line-height-xxl);\n\n--h4-font-family: var(--heading-font-family);\n--h4-font-weight: var(--font-weight-semibold);\n--h4-font-size: 20px;\n--h4-line-height: 28px;\n--h4-margin-top: var(--spacing-base);\n--h4-margin-bottom: var(--spacing-base);\n--h4-text-color: var(--heading-text-color);\n--h4-code-line-height: var(--line-height-xl);\n\n--h5-font-family: var(--heading-font-family);\n--h5-font-weight: var(--heading-font-weight);\n--h5-font-size: 14px;\n--h5-line-height: 14px;\n--h5-margin-top: var(--spacing-xs);\n--h5-margin-bottom: var(--spacing-sm);\n--h5-text-color: var(--heading-text-color);\n--h5-code-line-height: var(--line-height-lg);\n\n--h6-font-family: var(--heading-font-family);\n--h6-font-weight: var(--heading-font-weight);\n--h6-font-size: 12px;\n--h6-line-height: 12px;\n--h6-margin-top: var(--spacing-xxs);\n--h6-margin-bottom: var(--spacing-xs);\n--h6-text-color: var(--heading-text-color);\n--h6-code-line-height: var(--line-height-md);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"borders-spacing-backgrounds-and-shadows","__idx":3},"children":["Borders, spacing, backgrounds and shadows"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Border"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every named border radius except ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--border-radius-none"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--border-radius-full"]}," is calculated from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--border-radius"]},","," ","so overriding that one value rescales the whole set."," ","Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--border-radius-none"]}," for square corners and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--border-radius-full"]}," for pill shapes and circles, such as switches and scrollbar thumbs."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--border-width: 1px;\n--border-style: solid;\n\n--border-radius-none: 0;\n--border-radius: 4px;\n--border-radius-md: calc(var(--border-radius) * 1.5);\n--border-radius-lg: calc(var(--border-radius) * 2);\n--border-radius-xl: calc(var(--border-radius) * 3);\n--border-radius-xxl: calc(var(--border-radius) * 4);\n--border-radius-xxxl: calc(var(--border-radius) * 6);\n--border-radius-full: 999px;\n\n--border-color-primary: var(--color-warm-grey-3);\n--border-color-secondary: var(--color-warm-grey-2);\n--border-color-inverse: var(--color-warm-grey-10);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Spacing"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--spacing-unit: 4px;\n\n--spacing-base: calc(var(--spacing-unit) * 4);\n--spacing-xxs: var(--spacing-unit);\n--spacing-xs: calc(var(--spacing-unit) * 2);\n--spacing-sm: calc(var(--spacing-unit) * 3);\n--spacing-md: calc(var(--spacing-unit) * 5);\n--spacing-lg: calc(var(--spacing-unit) * 6);\n--spacing-xl: calc(var(--spacing-unit) * 8);\n--spacing-xxl: calc(var(--spacing-unit) * 12);\n\n--spacing-horizontal: var(--spacing-xl);\n--spacing-vertical: var(--spacing-base);\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Height and width"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--container-width: 1200px;\n\n--control-height-base: 32px;\n--control-height-xs: 16px;\n--control-height-sm: 24px;\n--control-height-lg: 40px;\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Backgrounds and box shadows"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--color-hover-base: #F3F3F6;\n\n--bg-color: var(--color-white);\n--bg-color-hover: var(--color-hover-base);\n--bg-color-active: var(--color-warm-grey-2);\n--bg-color-tonal: var(--color-warm-grey-1);\n--bg-color-tonal-hover: var(--color-white);\n--bg-color-tonal-active: var(--color-white);\n\n--bg-color-raised: var(--color-white); //Dropdown, popup, tooltip\n--bg-color-modal-overlay: rgba(0, 0, 0, 0.2);\n\n\n--bg-raised-shadow: 0px 8px 24px 8px #0000000A, 0px 4px 12px 0px #00000014; // Hovers for base. Menu\n","lang":"css"},"children":[]}]}]},"frontmatter":{},"tagList":["html"],"title":"Common Variables","lastModified":"2026-08-27T13:34:43.000Z"}