diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 036b6591ac..fa1013931d 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -1,45 +1,244 @@ @import "../color-palette"; -//// Raw primitive values -//// Insertion of brand foundations +// Raw primitive values +// Insertion of brand foundations // Border // scss-docs-start ouds-raw-border -$ouds-border-base: 4px !default; - -$ouds-border-radius-0: 0 !default; -// $ouds-border-radius-25: $ouds-border-base * .25 !default; -// $ouds-border-radius-50: $ouds-border-base * .5 !default; -$ouds-border-radius-75: $ouds-border-base * .75 !default; -// $ouds-border-radius-100: $ouds-border-base !default; -$ouds-border-radius-150: $ouds-border-base * 1.5 !default; -// $ouds-border-radius-200: $ouds-border-base * 2 !default; -$ouds-border-radius-300: $ouds-border-base * 3 !default; -// $ouds-border-radius-400: $ouds-border-base * 4 !default; -// $ouds-border-radius-500: $ouds-border-base * 5 !default; -// $ouds-border-radius-600: $ouds-border-base * 6 !default; -// $ouds-border-radius-800: $ouds-border-base * 8 !default; +$ouds-border-base: 4px !default; $ouds-border-radius-9999: 2000px !default; +$ouds-border-style-dashed: "dashed" !default; +// $ouds-border-style-dotted: "dotted" !default; +// $ouds-border-style-none: "none" !default; +$ouds-border-style-solid: "solid" !default; +$ouds-border-radius-0: $ouds-border-base * 0 !default; // 0 +// $ouds-border-radius-25: $ouds-border-base * .25 !default; // 1 +// $ouds-border-radius-50: $ouds-border-base * .5 !default; // 2 +$ouds-border-radius-75: $ouds-border-base * .75 !default; // 3 +// $ouds-border-radius-100: $ouds-border-base * 1 !default; // 4 +$ouds-border-radius-150: $ouds-border-base * 1.5 !default; // 6 +// $ouds-border-radius-200: $ouds-border-base * 2 !default; // 8 +$ouds-border-radius-300: $ouds-border-base * 3 !default; // 12 +// $ouds-border-radius-400: $ouds-border-base * 4 !default; // 16 +// $ouds-border-radius-500: $ouds-border-base * 5 !default; // 20 +// $ouds-border-radius-600: $ouds-border-base * 6 !default; // 24 +// $ouds-border-radius-800: $ouds-border-base * 8 !default; // 32 +$ouds-border-width-0: $ouds-border-base * 0 !default; // 0 +$ouds-border-width-25: $ouds-border-base * .25 !default; // 1 +$ouds-border-width-50: $ouds-border-base * .5 !default; // 2 +$ouds-border-width-75: $ouds-border-base * .75 !default; // 3 +$ouds-border-width-100: $ouds-border-base * 1 !default; // 4 +// $ouds-border-width-150: $ouds-border-base * 1.5 !default; // 6 +// $ouds-border-width-200: $ouds-border-base * 2 !default; // 8 +// scss-docs-end ouds-raw-border -// $ouds-border-style-none: none !default; -$ouds-border-style-solid: solid !default; -$ouds-border-style-dashed: dashed !default; -// $ouds-border-style-dotted: dotted !default; +// Color -$ouds-border-width-0: 0 !default; -$ouds-border-width-25: $ouds-border-base * .25 !default; -$ouds-border-width-50: $ouds-border-base * .5 !default; -$ouds-border-width-75: $ouds-border-base * .75 !default; -$ouds-border-width-100: $ouds-border-base !default; -// $ouds-border-width-150: $ouds-border-base * 1.5 !default; -// $ouds-border-width-200: $ouds-border-base * 2 !default; -// scss-docs-end ouds-raw-border +// scss-docs-start ouds-raw-color +// $ouds-color-decorative-amber-100: #fff0cc !default; +// $ouds-color-decorative-amber-200: #ffe199 !default; +// $ouds-color-decorative-amber-300: #ffd266 !default; +// $ouds-color-decorative-amber-400: #ffc333 !default; +$ouds-color-decorative-amber-500: #ffb400 !default; +// $ouds-color-decorative-amber-600: #cc9000 !default; +// $ouds-color-decorative-amber-700: #996c00 !default; +// $ouds-color-decorative-amber-800: #664800 !default; +// $ouds-color-decorative-amber-900: #332400 !default; +// $ouds-color-decorative-amethyst-100: #f1ecf9 !default; +$ouds-color-decorative-amethyst-200: #e0d4f2 !default; +// $ouds-color-decorative-amethyst-300: #c5ade6 !default; +$ouds-color-decorative-amethyst-400: #a885d8 !default; +// $ouds-color-decorative-amethyst-500: #8d60cd !default; +$ouds-color-decorative-amethyst-600: #5b2f98 !default; +// $ouds-color-decorative-amethyst-700: #432371 !default; +$ouds-color-decorative-amethyst-800: #2c174a !default; +// $ouds-color-decorative-amethyst-900: #150b23 !default; +$ouds-color-decorative-deep-peach-100: #fbebdf !default; +$ouds-color-decorative-deep-peach-200: #f4cfb2 !default; +$ouds-color-decorative-deep-peach-300: #e3b591 !default; +$ouds-color-decorative-deep-peach-400: #c19372 !default; +$ouds-color-decorative-deep-peach-500: #cf7e3f !default; +$ouds-color-decorative-deep-peach-600: #aa6631 !default; +$ouds-color-decorative-deep-peach-700: #7e4f2a !default; +$ouds-color-decorative-deep-peach-800: #553720 !default; +$ouds-color-decorative-deep-peach-900: #2e2014 !default; +// $ouds-color-decorative-emerald-100: #e5f5ed !default; +$ouds-color-decorative-emerald-200: #c0e8d4 !default; +// $ouds-color-decorative-emerald-300: #9bdaba !default; +// $ouds-color-decorative-emerald-400: #75cca1 !default; +$ouds-color-decorative-emerald-500: #50be87 !default; +// $ouds-color-decorative-emerald-600: #3ba06e !default; +$ouds-color-decorative-emerald-700: #2e7b54 !default; +// $ouds-color-decorative-emerald-800: #20563b !default; +// $ouds-color-decorative-emerald-900: #123021 !default; +$ouds-color-decorative-shocking-pink-100: #ffe5f6 !default; +$ouds-color-decorative-shocking-pink-200: #ffb4e6 !default; +$ouds-color-decorative-shocking-pink-300: #ff80d4 !default; +// $ouds-color-decorative-shocking-pink-400: #ff4dc3 !default; +// $ouds-color-decorative-shocking-pink-500: #ff1ab2 !default; +// $ouds-color-decorative-shocking-pink-600: #e50099 !default; +// $ouds-color-decorative-shocking-pink-700: #b20077 !default; +// $ouds-color-decorative-shocking-pink-800: #800055 !default; +// $ouds-color-decorative-shocking-pink-900: #4d0033 !default; +// $ouds-color-decorative-sky-100: #d2ecf9 !default; +$ouds-color-decorative-sky-200: #a5daf3 !default; +// $ouds-color-decorative-sky-300: #79c7ec !default; +$ouds-color-decorative-sky-400: #4ab4e6 !default; +// $ouds-color-decorative-sky-500: #1fa2e0 !default; +// $ouds-color-decorative-sky-600: #1982b3 !default; +$ouds-color-decorative-sky-700: #136186 !default; +// $ouds-color-decorative-sky-800: #0c415a !default; +// $ouds-color-decorative-sky-900: #06202d !default; +$ouds-color-functional-black: #000 !default; +// $ouds-color-functional-dark-gray-80: #7a7a7a !default; +$ouds-color-functional-dark-gray-160: #707070 !default; +// $ouds-color-functional-dark-gray-240: #666 !default; +// $ouds-color-functional-dark-gray-320: #5c5c5c !default; +$ouds-color-functional-dark-gray-400: #555 !default; +$ouds-color-functional-dark-gray-480: #444 !default; +$ouds-color-functional-dark-gray-560: #3d3d3d !default; +$ouds-color-functional-dark-gray-640: #333 !default; +$ouds-color-functional-dark-gray-720: #272727 !default; +$ouds-color-functional-dark-gray-800: #1f1f1f !default; +$ouds-color-functional-dark-gray-880: #141414 !default; +// $ouds-color-functional-dark-gray-960: #0a0a0a !default; +$ouds-color-functional-dodger-blue-100: #f0faff !default; +// $ouds-color-functional-dodger-blue-200: #bde7ff !default; +// $ouds-color-functional-dodger-blue-300: #8ad5ff !default; +// $ouds-color-functional-dodger-blue-400: #57c3ff !default; +$ouds-color-functional-dodger-blue-500: #26b2ff !default; +// $ouds-color-functional-dodger-blue-600: #009bf0 !default; +// $ouds-color-functional-dodger-blue-700: #007abd !default; +// $ouds-color-functional-dodger-blue-800: #00598a !default; +$ouds-color-functional-dodger-blue-900: #003857 !default; +$ouds-color-functional-light-gray-80: #f4f4f4 !default; +$ouds-color-functional-light-gray-160: #eee !default; +// $ouds-color-functional-light-gray-240: #e0e0e0 !default; +// $ouds-color-functional-light-gray-320: #d6d6d6 !default; +$ouds-color-functional-light-gray-400: #ccc !default; +// $ouds-color-functional-light-gray-480: #c2c2c2 !default; +// $ouds-color-functional-light-gray-560: #bbb !default; +// $ouds-color-functional-light-gray-640: #adadad !default; +// $ouds-color-functional-light-gray-720: #a3a3a3 !default; +// $ouds-color-functional-light-gray-800: #999 !default; +// $ouds-color-functional-light-gray-880: #8f8f8f !default; +// $ouds-color-functional-light-gray-960: #858585 !default; +$ouds-color-functional-malachite-100: #edfcf0 !default; +// $ouds-color-functional-malachite-200: #c1f6ca !default; +// $ouds-color-functional-malachite-300: #94f0a4 !default; +// $ouds-color-functional-malachite-400: #67e97e !default; +$ouds-color-functional-malachite-500: #3de35a !default; +// $ouds-color-functional-malachite-600: #1ecd3c !default; +// $ouds-color-functional-malachite-700: #17a02f !default; +// $ouds-color-functional-malachite-800: #0e621d !default; +$ouds-color-functional-malachite-900: #0a4715 !default; +$ouds-color-functional-scarlet-100: #ffe5e6 !default; +// $ouds-color-functional-scarlet-200: #ffb2b3 !default; +// $ouds-color-functional-scarlet-300: #ff8081 !default; +// $ouds-color-functional-scarlet-400: #ff4d4e !default; +// $ouds-color-functional-scarlet-500: #ff1a1b !default; +$ouds-color-functional-scarlet-600: #ea0305 !default; +$ouds-color-functional-scarlet-700: #b20002 !default; +$ouds-color-functional-scarlet-800: #800001 !default; +$ouds-color-functional-scarlet-900: #4d0001 !default; +$ouds-color-functional-sun-100: #fff7d6 !default; +$ouds-color-functional-sun-200: #ffed99 !default; +// $ouds-color-functional-sun-300: #ffe270 !default; +// $ouds-color-functional-sun-400: #ffd73d !default; +$ouds-color-functional-sun-500: #ffd000 !default; +$ouds-color-functional-sun-600: #d6aa00 !default; +// $ouds-color-functional-sun-700: #a38200 !default; +// $ouds-color-functional-sun-800: #665100 !default; +$ouds-color-functional-sun-900: #3d3100 !default; +$ouds-color-functional-white: #fff !default; +$ouds-color-transparent-black-0: rgba(0, 0, 0, 0) !default; +// $ouds-color-transparent-black-100: rgba(0, 0, 0, .04) !default; +// $ouds-color-transparent-black-200: rgba(0, 0, 0, .08) !default; +$ouds-color-transparent-black-300: rgba(0, 0, 0, .16) !default; +$ouds-color-transparent-black-400: rgba(0, 0, 0, .24) !default; +$ouds-color-transparent-black-500: rgba(0, 0, 0, .32) !default; +// $ouds-color-transparent-black-600: rgba(0, 0, 0, .48) !default; +// $ouds-color-transparent-black-700: rgba(0, 0, 0, .64) !default; +// $ouds-color-transparent-black-800: rgba(0, 0, 0, .88) !default; +// $ouds-color-transparent-black-900: #000 !default; +// $ouds-color-transparent-white-0: rgba(255, 255, 255, 0) !default; +// $ouds-color-transparent-white-100: rgba(255, 255, 255, .04) !default; +// $ouds-color-transparent-white-200: rgba(255, 255, 255, .08) !default; +// $ouds-color-transparent-white-300: rgba(255, 255, 255, .16) !default; +// $ouds-color-transparent-white-400: rgba(255, 255, 255, .24) !default; +// $ouds-color-transparent-white-500: rgba(255, 255, 255, .32) !default; +// $ouds-color-transparent-white-600: rgba(255, 255, 255, .48) !default; +// $ouds-color-transparent-white-700: rgba(255, 255, 255, .64) !default; +// $ouds-color-transparent-white-800: rgba(255, 255, 255, .88) !default; +// $ouds-color-transparent-white-900: #fff !default; +// $ouds-color-orange-50: #fff2e6 !default; +// $ouds-color-orange-100: #ffd5b0 !default; +// $ouds-color-orange-200: #ffc18a !default; +// $ouds-color-orange-300: #ffa554 !default; +// $ouds-color-orange-400: #ff9433 !default; +$ouds-color-orange-500: #ff7900 !default; +$ouds-color-orange-550: #f16e00 !default; +// $ouds-color-orange-600: #e86e00 !default; +// $ouds-color-orange-700: #b55600 !default; +// $ouds-color-orange-800: #8c4300 !default; +// $ouds-color-orange-900: #6b3300 !default; +$ouds-color-warm-gray-100: #f9f5f0 !default; +// $ouds-color-warm-gray-200: #e9ddce !default; +// $ouds-color-warm-gray-300: #d6c4ae !default; +// $ouds-color-warm-gray-400: #c1ab90 !default; +// $ouds-color-warm-gray-500: #a99275 !default; +// $ouds-color-warm-gray-600: #8a7860 !default; +// $ouds-color-warm-gray-700: #685d50 !default; +// $ouds-color-warm-gray-800: #48433d !default; +$ouds-color-warm-gray-900: #353228 !default; +// scss-docs-end ouds-raw-color + +// Dimension + +// scss-docs-start ouds-raw-dimension +$ouds-dimension-base: 4px !default; +$ouds-dimension-0: $ouds-dimension-base * 0 !default; // 0 +$ouds-dimension-25: $ouds-dimension-base * .5 !default; // 2 +$ouds-dimension-50: $ouds-dimension-base * 1 !default; // 4 +$ouds-dimension-75: $ouds-dimension-base * 1.5 !default; // 6 +$ouds-dimension-100: $ouds-dimension-base * 2 !default; // 8 +// $ouds-dimension-125: $ouds-dimension-base * 2.5 !default; // 10 +$ouds-dimension-150: $ouds-dimension-base * 3 !default; // 12 +$ouds-dimension-200: $ouds-dimension-base * 4 !default; // 16 +$ouds-dimension-250: $ouds-dimension-base * 5 !default; // 20 +$ouds-dimension-300: $ouds-dimension-base * 6 !default; // 24 +$ouds-dimension-350: $ouds-dimension-base * 7 !default; // 28 +$ouds-dimension-400: $ouds-dimension-base * 8 !default; // 32 +$ouds-dimension-450: $ouds-dimension-base * 9 !default; // 36 +$ouds-dimension-500: $ouds-dimension-base * 10 !default; // 40 +$ouds-dimension-550: $ouds-dimension-base * 11 !default; // 44 +$ouds-dimension-600: $ouds-dimension-base * 12 !default; // 48 +$ouds-dimension-650: $ouds-dimension-base * 13 !default; // 52 +$ouds-dimension-700: $ouds-dimension-base * 14 !default; // 56 +$ouds-dimension-750: $ouds-dimension-base * 15 !default; // 60 +$ouds-dimension-800: $ouds-dimension-base * 16 !default; // 64 +// $ouds-dimension-850: $ouds-dimension-base * 17 !default; // 68 +$ouds-dimension-900: $ouds-dimension-base * 18 !default; // 72 +$ouds-dimension-1000: $ouds-dimension-base * 20 !default; // 80 +$ouds-dimension-1200: $ouds-dimension-base * 24 !default; // 96 +$ouds-dimension-1400: $ouds-dimension-base * 28 !default; // 112 +$ouds-dimension-1600: $ouds-dimension-base * 32 !default; // 128 +$ouds-dimension-1800: $ouds-dimension-base * 36 !default; // 144 +// $ouds-dimension-2000: $ouds-dimension-base * 40 !default; // 160 +// $ouds-dimension-3000: $ouds-dimension-base * 80 !default; // 320 +// $ouds-dimension-4000: $ouds-dimension-base * 120 !default; // 480 +// $ouds-dimension-5000: $ouds-dimension-base * 140 !default; // 560 +$ouds-dimension-6000: $ouds-dimension-base * 160 !default; // 640 +$ouds-dimension-7000: $ouds-dimension-base * 180 !default; // 720 +$ouds-dimension-9000: $ouds-dimension-base * 220 !default; // 880 +$ouds-dimension-11000: $ouds-dimension-base * 260 !default; // 1040 +// scss-docs-end ouds-raw-dimension // Elevation // scss-docs-start ouds-raw-elevation -$ouds-elevation-blur-0: 0 !default; +$ouds-elevation-blur-0: 0 !default; // $ouds-elevation-blur-100: 1px !default; $ouds-elevation-blur-200: 2px !default; $ouds-elevation-blur-300: 3px !default; @@ -47,29 +246,155 @@ $ouds-elevation-blur-400: 4px !default; // $ouds-elevation-blur-500: 8px !default; $ouds-elevation-blur-600: 12px !default; // $ouds-elevation-blur-700: 20px !default; +$ouds-elevation-spread-0: 0 !default; +// $ouds-elevation-spread-300: 3px !default; +$ouds-elevation-spread-n100: -1px !default; +// $ouds-elevation-spread-n200: -2px !default; +$ouds-elevation-spread-n300: -4px !default; +// $ouds-elevation-spread-n400: -8px !default; +$ouds-elevation-x-0: 0 !default; +$ouds-elevation-y-0: 0 !default; +$ouds-elevation-y-100: 1px !default; +$ouds-elevation-y-200: 2px !default; +$ouds-elevation-y-300: 4px !default; +// $ouds-elevation-y-400: 8px !default; +$ouds-elevation-y-500: 12px !default; +// $ouds-elevation-y-600: 20px !default; +// scss-docs-end ouds-raw-elevation -$ouds-elevation-spread-n100: -1px !default; -// $ouds-elevation-spread-n200: -2px !default; -$ouds-elevation-spread-n300: -4px !default; -// $ouds-elevation-spread-n400: -8px !default; -$ouds-elevation-spread-0: 0 !default; -$ouds-elevation-spread-300: 3px !default; +// Font -$ouds-elevation-x-0: 0 !default; +// scss-docs-start ouds-raw-font +$ouds-font-family-brand-default: "Helvetica Neue" !default; +// $ouds-font-family-brand-tv: "Helvetica Neue LT" !default; +// $ouds-font-family-monospace-courier-new: "Courier New" !default; +// $ouds-font-family-monospace-menlo: "Menlo" !default; +// $ouds-font-family-monospace-monaco: "Monaco" !default; +// $ouds-font-family-monospace-sf-mono: "SF Mono" !default; +// $ouds-font-family-system-arial: "Arial" !default; +// $ouds-font-family-system-helvetica: "Helvetica" !default; +// $ouds-font-family-system-noto-sans: "Noto Sans" !default; +// $ouds-font-family-system-roboto: "Roboto" !default; +// $ouds-font-family-system-sf-pro: "SF Pro" !default; +$ouds-font-letter-spacing-150: .18 !default; +// $ouds-font-letter-spacing-175: .19 !default; +$ouds-font-letter-spacing-200: .17 !default; +$ouds-font-letter-spacing-250: .2 !default; +$ouds-font-letter-spacing-300: .18 !default; +$ouds-font-letter-spacing-350: 0 !default; +$ouds-font-letter-spacing-450: -.12 !default; +$ouds-font-letter-spacing-550: -.28 !default; +$ouds-font-letter-spacing-650: -.32 !default; +$ouds-font-letter-spacing-750: -.36 !default; +$ouds-font-letter-spacing-850: -.4 !default; +// $ouds-font-letter-spacing-950: -.55 !default; +$ouds-font-letter-spacing-1050: -.6 !default; +// $ouds-font-letter-spacing-1150: -.65 !default; +$ouds-font-letter-spacing-1250: -.7 !default; +$ouds-font-letter-spacing-1450: -.96 !default; +$ouds-font-letter-spacing-1850: -1.08 !default; +$ouds-font-line-height-250: 16px !default; +$ouds-font-line-height-350: 20px !default; +$ouds-font-line-height-450: 24px !default; +$ouds-font-line-height-550: 28px !default; +$ouds-font-line-height-650: 32px !default; +$ouds-font-line-height-750: 36px !default; +$ouds-font-line-height-850: 40px !default; +$ouds-font-line-height-950: 44px !default; +$ouds-font-line-height-1050: 48px !default; +// $ouds-font-line-height-1150: 52px !default; +$ouds-font-line-height-1250: 56px !default; +// $ouds-font-line-height-1350: 60px !default; +$ouds-font-line-height-1450: 64px !default; +$ouds-font-line-height-1850: 72px !default; +$ouds-font-line-height-2050: 80px !default; +$ouds-font-size-150: 12px !default; +// $ouds-font-size-175: 13px !default; +$ouds-font-size-200: 14px !default; +$ouds-font-size-250: 16px !default; +$ouds-font-size-300: 18px !default; +$ouds-font-size-350: 20px !default; +$ouds-font-size-450: 24px !default; +$ouds-font-size-550: 28px !default; +$ouds-font-size-650: 32px !default; +$ouds-font-size-750: 36px !default; +$ouds-font-size-850: 40px !default; +// $ouds-font-size-950: 44px !default; +$ouds-font-size-1050: 48px !default; +// $ouds-font-size-1150: 52px !default; +$ouds-font-size-1250: 56px !default; +$ouds-font-size-1450: 64px !default; +$ouds-font-size-1850: 72px !default; +// $ouds-font-weight-100: 100 !default; +// $ouds-font-weight-200: 200 !default; +// $ouds-font-weight-300: 300 !default; +$ouds-font-weight-400: 400 !default; +// $ouds-font-weight-500: 500 !default; +// $ouds-font-weight-600: 600 !default; +$ouds-font-weight-700: 700 !default; +// $ouds-font-weight-800: 800 !default; +// $ouds-font-weight-900: 900 !default; +// $ouds-font-weight-950: 950 !default; +// scss-docs-end ouds-raw-font -$ouds-elevation-y-0: 0 !default; -$ouds-elevation-y-100: 1px !default; -$ouds-elevation-y-200: 2px !default; -$ouds-elevation-y-300: 4px !default; -// $ouds-elevation-y-400: 8px !default; -$ouds-elevation-y-500: 12px !default; -// $ouds-elevation-y-600: 20px !default; -// scss-docs-end ouds-raw-elevation +// Grid + +// scss-docs-start ouds-raw-grid +// $ouds-grid-column-count-100: 1px !default; +// $ouds-grid-column-count-200: 2px !default; +$ouds-grid-column-count-400: 4px !default; +$ouds-grid-column-count-600: 6px !default; +// $ouds-grid-column-count-800: 8px !default; +// $ouds-grid-column-count-1000: 10px !default; +$ouds-grid-column-count-1200: 12px !default; +$ouds-grid-max-width-100: 389px !default; +$ouds-grid-max-width-200: 479px !default; +$ouds-grid-max-width-300: 735px !default; +$ouds-grid-max-width-400: 1023px !default; +$ouds-grid-max-width-500: 1319px !default; +$ouds-grid-max-width-600: 1639px !default; +$ouds-grid-max-width-650: 1680px !default; +$ouds-grid-max-width-700: 1879px !default; +$ouds-grid-max-width-800: 1920px !default; +$ouds-grid-min-width-100: 1px !default; +$ouds-grid-min-width-200: 390px !default; +$ouds-grid-min-width-300: 480px !default; +$ouds-grid-min-width-400: 736px !default; +$ouds-grid-min-width-500: 1024px !default; +$ouds-grid-min-width-600: 1320px !default; +$ouds-grid-min-width-700: 1640px !default; +$ouds-grid-min-width-800: 1880px !default; +$ouds-grid-width-100: 360px !default; +$ouds-grid-width-200: 390px !default; +$ouds-grid-width-300: 480px !default; +$ouds-grid-width-400: 768px !default; +$ouds-grid-width-500: 1024px !default; +$ouds-grid-width-600: 1440px !default; +$ouds-grid-width-700: 1680px !default; +$ouds-grid-width-800: 1920px !default; +// $ouds-grid-column-gap-10: $ouds-dimension-base * .25 !default; // 1 +$ouds-grid-column-gap-100: $ouds-dimension-base * 2 !default; // 8 +$ouds-grid-column-gap-200: $ouds-dimension-base * 4 !default; // 16 +// $ouds-grid-column-gap-300: $ouds-dimension-base * 5 !default; // 20 +$ouds-grid-column-gap-400: $ouds-dimension-base * 6 !default; // 24 +$ouds-grid-column-gap-600: $ouds-dimension-base * 8 !default; // 32 +$ouds-grid-column-gap-800: $ouds-dimension-base * 10 !default; // 40 +$ouds-grid-margin-100: $ouds-dimension-base * 4 !default; // 16 +$ouds-grid-margin-300: $ouds-dimension-base * 6 !default; // 24 +$ouds-grid-margin-400: $ouds-dimension-base * 7 !default; // 28 +$ouds-grid-margin-500: $ouds-dimension-base * 8 !default; // 32 +// $ouds-grid-margin-600: $ouds-dimension-base * 9 !default; // 36 +$ouds-grid-margin-700: $ouds-dimension-base * 10 !default; // 40 +// $ouds-grid-margin-1000: $ouds-dimension-base * 13 !default; // 52 +$ouds-grid-margin-1100: $ouds-dimension-base * 14 !default; // 56 +$ouds-grid-margin-1700: $ouds-dimension-base * 20 !default; // 80 +$ouds-grid-margin-2500: $ouds-dimension-base * 28 !default; // 112 +// scss-docs-end ouds-raw-grid // Opacity // scss-docs-start ouds-raw-opacity -$ouds-opacity-0: 0 !default; +$ouds-opacity-0: 0 !default; $ouds-opacity-100: .04 !default; // $ouds-opacity-200: .08 !default; $ouds-opacity-300: .16 !default; @@ -77,6 +402,6 @@ $ouds-opacity-300: .16 !default; $ouds-opacity-500: .32 !default; // $ouds-opacity-600: .48 !default; $ouds-opacity-700: .64 !default; -// $ouds-opacity-800: .80 !default; +// $ouds-opacity-800: .8 !default; $ouds-opacity-900: 1 !default; // scss-docs-end ouds-raw-opacity diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 674ea9d304..48070c7d09 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -1,90 +1,843 @@ -//// Semantic applications -//// Depends on raw primitive values +// Semantic applications +// Depends on raw primitive values // Border // scss-docs-start ouds-semantic-border -$ouds-border-radius-none: $ouds-border-radius-0 !default; -$ouds-border-radius-default: $ouds-border-radius-0 !default; -$ouds-border-radius-short: $ouds-border-radius-75 !default; -$ouds-border-radius-medium: $ouds-border-radius-150 !default; -$ouds-border-radius-tall: $ouds-border-radius-300 !default; -$ouds-border-radius-pill: $ouds-border-radius-9999 !default; - -$ouds-border-style-default: $ouds-border-style-solid !default; -$ouds-border-style-drag: $ouds-border-style-dashed !default; - -$ouds-border-width-none: $ouds-border-width-0 !default; -$ouds-border-width-default: $ouds-border-width-25 !default; -// $ouds-border-width-focus: $ouds-border-width-50 !default; -// $ouds-border-width-focus-inset: $ouds-border-width-75 !default; -$ouds-border-width-thin: $ouds-border-width-25 !default; -$ouds-border-width-medium: $ouds-border-width-50 !default; -$ouds-border-width-thick: $ouds-border-width-75 !default; -$ouds-border-width-thicker: $ouds-border-width-100 !default; +$ouds-border-radius-default: $ouds-border-radius-0 !default; +$ouds-border-radius-medium: $ouds-border-radius-150 !default; +$ouds-border-radius-none: $ouds-border-radius-0 !default; +$ouds-border-radius-pill: $ouds-border-radius-9999 !default; +$ouds-border-radius-short: $ouds-border-radius-75 !default; +$ouds-border-radius-tall: $ouds-border-radius-300 !default; +$ouds-border-style-default: $ouds-border-style-solid !default; +$ouds-border-style-drag: $ouds-border-style-dashed !default; +$ouds-border-width-default: $ouds-border-width-25 !default; +$ouds-border-width-focus: $ouds-border-width-50 !default; +$ouds-border-width-focus-inset: $ouds-border-width-75 !default; +$ouds-border-width-medium: $ouds-border-width-50 !default; +$ouds-border-width-none: $ouds-border-width-0 !default; +$ouds-border-width-thick: $ouds-border-width-75 !default; +$ouds-border-width-thicker: $ouds-border-width-100 !default; +$ouds-border-width-thin: $ouds-border-width-25 !default; // scss-docs-end ouds-semantic-border +// Button + +// scss-docs-start ouds-semantic-button +$ouds-button-background-color-default-disabled: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-enabled: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-focus: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-focus-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-hover: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-hover-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-loading: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-loading-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-pressed: $ouds-color-transparent-default !default; +$ouds-button-background-color-default-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-minimal-disabled: $ouds-color-transparent-default !default; +$ouds-button-background-color-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-background-color-minimal-enabled: $ouds-color-transparent-default !default; +$ouds-button-background-color-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-disabled: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-enabled: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-focus: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-focus-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-hover: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-hover-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-loading: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-loading-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-pressed: $ouds-color-transparent-default !default; +$ouds-button-border-color-minimal-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-border-radius-radius: $ouds-border-radius-none !default; +$ouds-button-border-width-default: $ouds-border-width-default !default; +$ouds-button-border-width-minimal: $ouds-border-width-none !default; +$ouds-button-background-color-minimal-focus: $ouds-color-action-secondary-focus !default; +$ouds-button-background-color-minimal-focus-on-bg-emphasized: $ouds-color-action-secondary-focus-on-bg-emphasized !default; +$ouds-button-background-color-minimal-hover: $ouds-color-action-secondary-hover !default; +$ouds-button-background-color-minimal-hover-on-bg-emphasized: $ouds-color-action-secondary-hover-on-bg-emphasized !default; +$ouds-button-background-color-minimal-loading: $ouds-color-action-secondary-loading !default; +$ouds-button-background-color-minimal-loading-on-bg-emphasized: $ouds-color-action-secondary-loading-on-bg-emphasized !default; +$ouds-button-background-color-minimal-pressed: $ouds-color-action-secondary-pressed !default; +$ouds-button-background-color-minimal-pressed-on-bg-emphasized: $ouds-color-action-secondary-pressed-on-bg-emphasized !default; +$ouds-button-border-color-default-disabled: $ouds-color-action-disabled !default; +$ouds-button-border-color-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-border-color-default-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-border-color-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-border-color-default-focus: $ouds-color-action-primary-focus !default; +$ouds-button-border-color-default-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; +$ouds-button-border-color-default-hover: $ouds-color-action-primary-hover !default; +$ouds-button-border-color-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-border-color-default-loading: $ouds-color-action-primary-loading !default; +$ouds-button-border-color-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-border-color-default-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-border-color-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-content-color-default-disabled: $ouds-color-action-disabled !default; +$ouds-button-content-color-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-content-color-default-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-content-color-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-content-color-default-focus: $ouds-color-action-primary-focus !default; +$ouds-button-content-color-default-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; +$ouds-button-content-color-default-hover: $ouds-color-action-primary-hover !default; +$ouds-button-content-color-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-content-color-default-loading: $ouds-color-action-primary-loading !default; +$ouds-button-content-color-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-content-color-default-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-content-color-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-content-color-minimal-disabled: $ouds-color-action-disabled !default; +$ouds-button-content-color-minimal-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-content-color-minimal-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-content-color-minimal-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-content-color-minimal-focus: $ouds-color-action-primary-focus !default; +$ouds-button-content-color-minimal-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; +$ouds-button-content-color-minimal-hover: $ouds-color-action-primary-hover !default; +$ouds-button-content-color-minimal-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-content-color-minimal-loading: $ouds-color-action-primary-loading !default; +$ouds-button-content-color-minimal-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-content-color-minimal-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-content-color-minimal-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-size-icon: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-short !default; +$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-space-column-gap-icon-end: $ouds-space-column-gap-with-arrow-short !default; +$ouds-button-space-column-gap-icon-start: $ouds-space-column-gap-with-icon-medium !default; +$ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; +$ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; +$ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-taller !default; +$ouds-button-space-padding-inline-icon-end: $ouds-space-padding-inline-with-arrow-tall !default; +$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-tallest !default; +$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-with-icon-tall !default; +$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-taller !default; +// scss-docs-end ouds-semantic-button + +// Color + +// scss-docs-start ouds-semantic-color +$ouds-color-transparent-default: $ouds-color-transparent-black-0 !default; +$ouds-color-action-visited: $ouds-color-decorative-amethyst-600 !default; +$ouds-color-action-visited-on-bg-emphasized: $ouds-color-decorative-amethyst-400 !default; +$ouds-color-brand-accent-default: $ouds-color-functional-sun-500 !default; +$ouds-color-brand-accent-high: $ouds-color-functional-sun-600 !default; +$ouds-color-brand-accent-highest: $ouds-color-warm-gray-900 !default; +$ouds-color-brand-accent-lowest: $ouds-color-warm-gray-100 !default; +$ouds-color-brand-info-default: $ouds-color-functional-dodger-blue-500 !default; +$ouds-color-brand-info-highest: $ouds-color-functional-dodger-blue-900 !default; +$ouds-color-brand-info-lowest: $ouds-color-functional-dodger-blue-100 !default; +$ouds-color-brand-negative-default: $ouds-color-functional-scarlet-600 !default; +$ouds-color-brand-negative-high: $ouds-color-functional-scarlet-700 !default; +$ouds-color-brand-negative-higher: $ouds-color-functional-scarlet-800 !default; +$ouds-color-brand-negative-highest: $ouds-color-functional-scarlet-900 !default; +$ouds-color-brand-negative-lowest: $ouds-color-functional-scarlet-100 !default; +$ouds-color-brand-neutral-emphasized-black: $ouds-color-functional-black !default; +$ouds-color-brand-neutral-emphasized-high: $ouds-color-functional-dark-gray-720 !default; +$ouds-color-brand-neutral-emphasized-higher: $ouds-color-functional-dark-gray-800 !default; +$ouds-color-brand-neutral-emphasized-highest: $ouds-color-functional-dark-gray-880 !default; +$ouds-color-brand-neutral-emphasized-low: $ouds-color-functional-dark-gray-560 !default; +$ouds-color-brand-neutral-emphasized-lower: $ouds-color-functional-dark-gray-480 !default; +$ouds-color-brand-neutral-emphasized-lowest: $ouds-color-functional-dark-gray-400 !default; +$ouds-color-brand-neutral-emphasized-medium: $ouds-color-functional-dark-gray-640 !default; +$ouds-color-brand-neutral-muted-highest: $ouds-color-functional-dark-gray-160 !default; +$ouds-color-brand-neutral-muted-lower: $ouds-color-functional-light-gray-160 !default; +$ouds-color-brand-neutral-muted-lowest: $ouds-color-functional-light-gray-80 !default; +$ouds-color-brand-neutral-muted-medium: $ouds-color-functional-light-gray-400 !default; +$ouds-color-brand-neutral-muted-white: $ouds-color-functional-white !default; +$ouds-color-brand-positive-default: $ouds-color-functional-malachite-500 !default; +$ouds-color-brand-positive-highest: $ouds-color-functional-malachite-900 !default; +$ouds-color-brand-positive-lowest: $ouds-color-functional-malachite-100 !default; +$ouds-color-brand-primary-default: $ouds-color-orange-550 !default; +$ouds-color-brand-primary-low: $ouds-color-orange-500 !default; +$ouds-color-brand-warning-default: $ouds-color-functional-sun-500 !default; +$ouds-color-brand-warning-high: $ouds-color-functional-sun-600 !default; +$ouds-color-brand-warning-highest: $ouds-color-functional-sun-900 !default; +$ouds-color-brand-warning-lowest: $ouds-color-functional-sun-100 !default; +$ouds-color-decorative-accent-1-default: $ouds-color-decorative-emerald-500 !default; +$ouds-color-decorative-accent-1-emphasized: $ouds-color-decorative-emerald-700 !default; +$ouds-color-decorative-accent-1-muted: $ouds-color-decorative-emerald-200 !default; +$ouds-color-decorative-accent-2-default: $ouds-color-decorative-sky-400 !default; +$ouds-color-decorative-accent-2-emphasized: $ouds-color-decorative-sky-700 !default; +$ouds-color-decorative-accent-2-muted: $ouds-color-decorative-sky-200 !default; +$ouds-color-decorative-accent-3-default: $ouds-color-functional-sun-500 !default; +$ouds-color-decorative-accent-3-emphasized: $ouds-color-decorative-amber-500 !default; +$ouds-color-decorative-accent-3-muted: $ouds-color-functional-sun-200 !default; +$ouds-color-decorative-accent-4-default: $ouds-color-decorative-amethyst-400 !default; +$ouds-color-decorative-accent-4-emphasized: $ouds-color-decorative-amethyst-800 !default; +$ouds-color-decorative-accent-4-muted: $ouds-color-decorative-amethyst-200 !default; +$ouds-color-decorative-accent-5-default: $ouds-color-decorative-shocking-pink-200 !default; +$ouds-color-decorative-accent-5-emphasized: $ouds-color-decorative-shocking-pink-300 !default; +$ouds-color-decorative-accent-5-muted: $ouds-color-decorative-shocking-pink-100 !default; +$ouds-color-decorative-neutral-default: $ouds-color-functional-dark-gray-400 !default; +$ouds-color-decorative-neutral-emphasized: $ouds-color-functional-dark-gray-640 !default; +$ouds-color-decorative-neutral-muted: $ouds-color-functional-light-gray-160 !default; +$ouds-color-decorative-primary: $ouds-color-orange-500 !default; +$ouds-color-decorative-secondary: $ouds-color-functional-black !default; +$ouds-color-decorative-skin-tint-100: $ouds-color-decorative-deep-peach-100 !default; +$ouds-color-decorative-skin-tint-200: $ouds-color-decorative-deep-peach-200 !default; +$ouds-color-decorative-skin-tint-300: $ouds-color-decorative-deep-peach-300 !default; +$ouds-color-decorative-skin-tint-400: $ouds-color-decorative-deep-peach-400 !default; +$ouds-color-decorative-skin-tint-500: $ouds-color-decorative-deep-peach-500 !default; +$ouds-color-decorative-skin-tint-600: $ouds-color-decorative-deep-peach-600 !default; +$ouds-color-decorative-skin-tint-700: $ouds-color-decorative-deep-peach-700 !default; +$ouds-color-decorative-skin-tint-800: $ouds-color-decorative-deep-peach-800 !default; +$ouds-color-decorative-skin-tint-900: $ouds-color-decorative-deep-peach-900 !default; +$ouds-color-decorative-tertiary: $ouds-color-functional-white !default; +$ouds-color-action-disabled: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-action-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-action-negative-enabled: $ouds-color-brand-negative-default !default; +$ouds-color-action-negative-focus: $ouds-color-brand-negative-high !default; +$ouds-color-action-negative-hover: $ouds-color-brand-negative-high !default; +$ouds-color-action-negative-loading: $ouds-color-brand-negative-higher !default; +$ouds-color-action-negative-pressed: $ouds-color-brand-negative-higher !default; +$ouds-color-action-on-bg-action-disabled: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-enabled: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-focus: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-focus-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-hover: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-hover-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-loading: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-loading-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-pressed: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-pressed-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-enabled-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-enabled-on-bg-status-negative: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-action-primary-focus-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-focus-on-bg-status-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-hover-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-hover-on-bg-status-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-loading-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-loading-on-bg-status-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-pressed-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-primary-pressed-on-bg-status-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-disabled-on-bg-status-exc-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-action-disabled-on-bg-status-negative: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-status-exc-negative-action-disabled: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-action-on-bg-status-exc-negative-action-enabled: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-status-exc-negative-action-focus: $ouds-color-brand-neutral-emphasized-low !default; +$ouds-color-action-on-bg-status-exc-negative-action-hover: $ouds-color-brand-neutral-emphasized-low !default; +$ouds-color-action-on-bg-status-exc-negative-action-pressed: $ouds-color-brand-primary-default !default; +$ouds-color-action-on-bg-status-negative-action-disabled: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-action-on-bg-status-negative-action-enabled: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-action-on-bg-status-negative-action-focus: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-status-negative-action-hover: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-on-bg-status-negative-action-pressed: $ouds-color-brand-primary-default !default; +$ouds-color-action-primary-enabled: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-action-primary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-action-primary-focus: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-action-primary-focus-on-bg-emphasized: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-action-primary-hover: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-action-primary-hover-on-bg-emphasized: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-action-primary-loading: $ouds-color-brand-primary-default !default; +$ouds-color-action-primary-loading-on-bg-emphasized: $ouds-color-brand-primary-low !default; +$ouds-color-action-primary-pressed: $ouds-color-brand-primary-default !default; +$ouds-color-action-primary-pressed-on-bg-emphasized: $ouds-color-brand-primary-low !default; +$ouds-color-action-secondary-enabled: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-action-secondary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; +$ouds-color-action-secondary-focus: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-action-secondary-focus-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-action-secondary-hover: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-action-secondary-hover-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-action-secondary-loading: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-action-secondary-loading-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-action-secondary-pressed: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-action-secondary-pressed-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-action-selected: $ouds-color-brand-primary-default !default; +$ouds-color-action-selected-on-bg-emphasized: $ouds-color-brand-primary-low !default; +$ouds-color-always-accent: $ouds-color-brand-warning-default !default; +$ouds-color-always-black: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-info: $ouds-color-brand-info-default !default; +$ouds-color-always-negative: $ouds-color-brand-negative-default !default; +$ouds-color-always-on-bg-accent: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-bg-black: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-always-on-bg-info: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-bg-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-always-on-bg-positive: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-bg-warning: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-bg-white: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-positive: $ouds-color-brand-positive-default !default; +$ouds-color-always-warning: $ouds-color-brand-warning-default !default; +$ouds-color-always-white: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-bg-brand-primary: $ouds-color-brand-primary-default !default; +$ouds-color-bg-emphasized: $ouds-color-brand-neutral-emphasized-highest !default; +$ouds-color-bg-primary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-bg-secondary: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-bg-status-accent-emphasized: $ouds-color-brand-warning-default !default; +$ouds-color-bg-status-accent-muted: $ouds-color-brand-accent-lowest !default; +$ouds-color-bg-status-accent-muted-on-bg-emphasized: $ouds-color-brand-accent-highest !default; +$ouds-color-bg-status-info-emphasized: $ouds-color-brand-info-default !default; +$ouds-color-bg-status-info-muted: $ouds-color-brand-info-lowest !default; +$ouds-color-bg-status-info-muted-on-bg-emphasized: $ouds-color-brand-info-highest !default; +$ouds-color-bg-status-negative-emphasized: $ouds-color-brand-negative-default !default; +$ouds-color-bg-status-negative-muted: $ouds-color-brand-negative-lowest !default; +$ouds-color-bg-status-negative-muted-on-bg-emphasized: $ouds-color-brand-negative-highest !default; +$ouds-color-bg-status-neutral: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-bg-status-neutral-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; +$ouds-color-bg-status-positive-emphasized: $ouds-color-brand-positive-default !default; +$ouds-color-bg-status-positive-muted: $ouds-color-brand-positive-lowest !default; +$ouds-color-bg-status-positive-muted-on-bg-emphasized: $ouds-color-brand-positive-highest !default; +$ouds-color-bg-status-warning-emphasized: $ouds-color-brand-warning-default !default; +$ouds-color-bg-status-warning-muted: $ouds-color-brand-warning-lowest !default; +$ouds-color-bg-status-warning-muted-on-bg-emphasized: $ouds-color-brand-warning-highest !default; +$ouds-color-bg-tertiary: $ouds-color-brand-accent-lowest !default; +$ouds-color-border-brand-primary: $ouds-color-brand-primary-default !default; +$ouds-color-border-brand-primary-on-bg-emphasized: $ouds-color-brand-primary-low !default; +$ouds-color-border-default: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-border-default-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-border-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-border-emphasized-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-border-focus: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-border-focus-inset: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-border-on-bg-brand-primary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-brand-primary: $ouds-color-brand-primary-default !default; +$ouds-color-content-brand-primary-on-bg-emphasized: $ouds-color-brand-primary-low !default; +$ouds-color-content-default: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-default-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-disabled: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-content-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-content-muted: $ouds-color-brand-neutral-emphasized-lowest !default; +$ouds-color-content-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-content-on-bg-brand-primary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-bg-status-accent-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-accent-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-accent-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-bg-status-info-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-info-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-info-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-bg-status-negative-emphasized: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-bg-status-negative-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-negative-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-bg-status-positive-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-positive-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-positive-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-bg-status-warning-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-warning-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-bg-status-warning-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-status-info: $ouds-color-brand-info-default !default; +$ouds-color-content-status-negative: $ouds-color-brand-negative-default !default; +$ouds-color-content-status-positive: $ouds-color-brand-positive-default !default; +$ouds-color-content-status-warning: $ouds-color-brand-warning-default !default; +$ouds-color-elevation-drag: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-elevation-drag-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; +$ouds-color-elevation-drag-on-bg-secondary: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-elevation-modal: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-elevation-overlay-default: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-elevation-overlay-default-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; +$ouds-color-elevation-overlay-default-on-bg-secondary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-elevation-overlay-emphased-on-bg-emphasized: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-elevation-overlay-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-elevation-overlay-emphasized-on-bg-secondary: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-elevation-raised: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-elevation-raised-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-higher !default; +$ouds-color-elevation-raised-on-bg-secondary: $ouds-color-brand-neutral-muted-white !default; +// scss-docs-end ouds-semantic-color + +// Dimension + +// scss-docs-start ouds-semantic-dimension +$ouds-dimension-10xl: $ouds-dimension-1600 !default; +$ouds-dimension-10xs: $ouds-dimension-25 !default; +$ouds-dimension-11xl: $ouds-dimension-1800 !default; +$ouds-dimension-2xl: $ouds-dimension-650 !default; +$ouds-dimension-2xs: $ouds-dimension-350 !default; +$ouds-dimension-3xl: $ouds-dimension-700 !default; +$ouds-dimension-3xs: $ouds-dimension-300 !default; +$ouds-dimension-4xl: $ouds-dimension-750 !default; +$ouds-dimension-4xs: $ouds-dimension-250 !default; +$ouds-dimension-5xl: $ouds-dimension-800 !default; +$ouds-dimension-5xs: $ouds-dimension-200 !default; +$ouds-dimension-6xl: $ouds-dimension-900 !default; +$ouds-dimension-6xs: $ouds-dimension-150 !default; +$ouds-dimension-7xl: $ouds-dimension-1000 !default; +$ouds-dimension-7xs: $ouds-dimension-100 !default; +$ouds-dimension-8xl: $ouds-dimension-1200 !default; +$ouds-dimension-8xs: $ouds-dimension-75 !default; +$ouds-dimension-9xl: $ouds-dimension-1400 !default; +$ouds-dimension-9xs: $ouds-dimension-50 !default; +$ouds-dimension-lg: $ouds-dimension-550 !default; +$ouds-dimension-md: $ouds-dimension-500 !default; +$ouds-dimension-none: $ouds-dimension-0 !default; +$ouds-dimension-sm: $ouds-dimension-450 !default; +$ouds-dimension-xl: $ouds-dimension-600 !default; +$ouds-dimension-xs: $ouds-dimension-400 !default; +// scss-docs-end ouds-semantic-dimension + // Elevation // scss-docs-start ouds-semantic-elevation -$ouds-elevation-blur-drag: $ouds-elevation-blur-400 !default; -$ouds-elevation-blur-focus: $ouds-elevation-blur-0 !default; -$ouds-elevation-blur-none: $ouds-elevation-blur-0 !default; -$ouds-elevation-blur-overlay-default: $ouds-elevation-blur-300 !default; -$ouds-elevation-blur-overlay-emphasized: $ouds-elevation-blur-600 !default; -$ouds-elevation-blur-raised: $ouds-elevation-blur-200 !default; -$ouds-elevation-blur-sticky-default: $ouds-elevation-blur-400 !default; -$ouds-elevation-blur-sticky-emphasized: $ouds-elevation-blur-400 !default; +$ouds-elevation-blur-drag: $ouds-elevation-blur-400 !default; +$ouds-elevation-blur-none: $ouds-elevation-blur-0 !default; +$ouds-elevation-blur-overlay-default: $ouds-elevation-blur-300 !default; +$ouds-elevation-blur-overlay-emphasized: $ouds-elevation-blur-600 !default; +$ouds-elevation-blur-raised: $ouds-elevation-blur-200 !default; +$ouds-elevation-blur-sticky-default: $ouds-elevation-blur-400 !default; +$ouds-elevation-blur-sticky-emphasized: $ouds-elevation-blur-400 !default; $ouds-elevation-blur-sticky-navigation-scrolled: $ouds-elevation-blur-400 !default; - -$ouds-elevation-color-drag: rgba(0, 0, 0, .32) !default; -$ouds-elevation-color-focus: rgba(0, 0, 0, 1) !default; -$ouds-elevation-color-none: rgba(0, 0, 0, 0) !default; -$ouds-elevation-color-overlay-default: rgba(0, 0, 0, .24) !default; -$ouds-elevation-color-overlay-emphasized: rgba(0, 0, 0, .16) !default; -$ouds-elevation-color-raised: rgba(0, 0, 0, .32) !default; -$ouds-elevation-color-sticky-default: rgba(0, 0, 0, .16) !default; -$ouds-elevation-color-sticky-emphasized: rgba(0, 0, 0, .16) !default; -$ouds-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, .16) !default; - -$ouds-elevation-spread-drag: $ouds-elevation-spread-n100 !default; -$ouds-elevation-spread-focus: $ouds-elevation-spread-300 !default; -$ouds-elevation-spread-none: $ouds-elevation-spread-0 !default; -$ouds-elevation-spread-overlay-default: $ouds-elevation-spread-n100 !default; -$ouds-elevation-spread-overlay-emphasized: $ouds-elevation-spread-n300 !default; -$ouds-elevation-spread-raised: $ouds-elevation-spread-0 !default; -$ouds-elevation-spread-sticky-default: $ouds-elevation-spread-n100 !default; -$ouds-elevation-spread-sticky-emphasized: $ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-drag: $ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-none: $ouds-elevation-spread-0 !default; +$ouds-elevation-spread-overlay-default: $ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-overlay-emphasized: $ouds-elevation-spread-n300 !default; +$ouds-elevation-spread-raised: $ouds-elevation-spread-0 !default; +$ouds-elevation-spread-sticky-default: $ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-sticky-emphasized: $ouds-elevation-spread-n100 !default; $ouds-elevation-spread-sticky-navigation-scrolled: $ouds-elevation-spread-n100 !default; - -$ouds-elevation-x-drag: $ouds-elevation-x-0 !default; -$ouds-elevation-x-focus: $ouds-elevation-x-0 !default; -$ouds-elevation-x-none: $ouds-elevation-x-0 !default; -$ouds-elevation-x-overlay-default: $ouds-elevation-x-0 !default; -$ouds-elevation-x-overlay-emphasized: $ouds-elevation-x-0 !default; -$ouds-elevation-x-raised: $ouds-elevation-x-0 !default; -$ouds-elevation-x-sticky-default: $ouds-elevation-x-0 !default; -$ouds-elevation-x-sticky-emphasized: $ouds-elevation-x-0 !default; +$ouds-elevation-x-drag: $ouds-elevation-x-0 !default; +$ouds-elevation-x-none: $ouds-elevation-x-0 !default; +$ouds-elevation-x-overlay-default: $ouds-elevation-x-0 !default; +$ouds-elevation-x-overlay-emphasized: $ouds-elevation-x-0 !default; +$ouds-elevation-x-raised: $ouds-elevation-x-0 !default; +$ouds-elevation-x-sticky-default: $ouds-elevation-x-0 !default; +$ouds-elevation-x-sticky-emphasized: $ouds-elevation-x-0 !default; $ouds-elevation-x-sticky-navigation-scrolled: $ouds-elevation-x-0 !default; - -$ouds-elevation-y-drag: $ouds-elevation-y-300 !default; -$ouds-elevation-y-focus: $ouds-elevation-y-0 !default; -$ouds-elevation-y-none: $ouds-elevation-y-0 !default; -$ouds-elevation-y-overlay-default: $ouds-elevation-y-200 !default; -$ouds-elevation-y-overlay-emphasized: $ouds-elevation-y-500 !default; -$ouds-elevation-y-raised: $ouds-elevation-y-100 !default; -$ouds-elevation-y-sticky-default: $ouds-elevation-y-300 !default; -$ouds-elevation-y-sticky-emphasized: $ouds-elevation-y-300 !default; +$ouds-elevation-y-drag: $ouds-elevation-y-300 !default; +$ouds-elevation-y-none: $ouds-elevation-y-0 !default; +$ouds-elevation-y-overlay-default: $ouds-elevation-y-200 !default; +$ouds-elevation-y-overlay-emphasized: $ouds-elevation-y-500 !default; +$ouds-elevation-y-raised: $ouds-elevation-y-100 !default; +$ouds-elevation-y-sticky-default: $ouds-elevation-y-300 !default; +$ouds-elevation-y-sticky-emphasized: $ouds-elevation-y-300 !default; $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default; +$ouds-elevation-color-drag: $ouds-color-transparent-black-500 !default; +$ouds-elevation-color-none: $ouds-color-transparent-black-0 !default; +$ouds-elevation-color-overlay-default: $ouds-color-transparent-black-400 !default; +$ouds-elevation-color-overlay-emphasized: $ouds-color-transparent-black-300 !default; +$ouds-elevation-color-raised: $ouds-color-transparent-black-500 !default; +$ouds-elevation-color-sticky-default: $ouds-color-transparent-black-300 !default; +$ouds-elevation-color-sticky-emphasized: $ouds-color-transparent-black-300 !default; +$ouds-elevation-color-sticky-navigation-scrolled: $ouds-color-transparent-black-300 !default; // scss-docs-end ouds-semantic-elevation +// Font + +// scss-docs-start ouds-semantic-font +$ouds-font-family-web: $ouds-font-family-brand-default !default; +$ouds-font-letter-spacing-body-large-desktop: $ouds-font-letter-spacing-300 !default; +$ouds-font-letter-spacing-body-large-mobile: $ouds-font-letter-spacing-250 !default; +$ouds-font-letter-spacing-body-large-tablet: $ouds-font-letter-spacing-250 !default; +$ouds-font-letter-spacing-body-medium-desktop: $ouds-font-letter-spacing-250 !default; +$ouds-font-letter-spacing-body-medium-mobile: $ouds-font-letter-spacing-200 !default; +$ouds-font-letter-spacing-body-medium-tablet: $ouds-font-letter-spacing-200 !default; +$ouds-font-letter-spacing-body-small-desktop: $ouds-font-letter-spacing-200 !default; +$ouds-font-letter-spacing-body-small-mobile: $ouds-font-letter-spacing-150 !default; +$ouds-font-letter-spacing-body-small-tablet: $ouds-font-letter-spacing-150 !default; +$ouds-font-letter-spacing-code-medium: $ouds-font-letter-spacing-200 !default; +$ouds-font-letter-spacing-code-small: $ouds-font-letter-spacing-150 !default; +$ouds-font-letter-spacing-display-large-desktop: $ouds-font-letter-spacing-1850 !default; +$ouds-font-letter-spacing-display-large-mobile: $ouds-font-letter-spacing-850 !default; +$ouds-font-letter-spacing-display-large-tablet: $ouds-font-letter-spacing-1450 !default; +$ouds-font-letter-spacing-display-medium-desktop: $ouds-font-letter-spacing-1250 !default; +$ouds-font-letter-spacing-display-medium-mobile: $ouds-font-letter-spacing-750 !default; +$ouds-font-letter-spacing-display-medium-tablet: $ouds-font-letter-spacing-1050 !default; +$ouds-font-letter-spacing-display-small-desktop: $ouds-font-letter-spacing-1050 !default; +$ouds-font-letter-spacing-display-small-mobile: $ouds-font-letter-spacing-650 !default; +$ouds-font-letter-spacing-display-small-tablet: $ouds-font-letter-spacing-850 !default; +$ouds-font-letter-spacing-heading-large-desktop: $ouds-font-letter-spacing-650 !default; +$ouds-font-letter-spacing-heading-large-mobile: $ouds-font-letter-spacing-450 !default; +$ouds-font-letter-spacing-heading-large-tablet: $ouds-font-letter-spacing-550 !default; +$ouds-font-letter-spacing-heading-medium-desktop: $ouds-font-letter-spacing-550 !default; +$ouds-font-letter-spacing-heading-medium-mobile: $ouds-font-letter-spacing-350 !default; +$ouds-font-letter-spacing-heading-medium-tablet: $ouds-font-letter-spacing-450 !default; +$ouds-font-letter-spacing-heading-small-desktop: $ouds-font-letter-spacing-450 !default; +$ouds-font-letter-spacing-heading-small-mobile: $ouds-font-letter-spacing-300 !default; +$ouds-font-letter-spacing-heading-small-tablet: $ouds-font-letter-spacing-350 !default; +$ouds-font-letter-spacing-heading-xlarge-desktop: $ouds-font-letter-spacing-850 !default; +$ouds-font-letter-spacing-heading-xlarge-mobile: $ouds-font-letter-spacing-550 !default; +$ouds-font-letter-spacing-heading-xlarge-tablet: $ouds-font-letter-spacing-750 !default; +$ouds-font-letter-spacing-label-large: $ouds-font-letter-spacing-250 !default; +$ouds-font-letter-spacing-label-medium: $ouds-font-letter-spacing-200 !default; +$ouds-font-letter-spacing-label-small: $ouds-font-letter-spacing-150 !default; +$ouds-font-letter-spacing-label-xlarge: $ouds-font-letter-spacing-300 !default; +$ouds-font-line-height-body-large-desktop: $ouds-font-line-height-450 !default; +$ouds-font-line-height-body-large-mobile: $ouds-font-line-height-450 !default; +$ouds-font-line-height-body-large-tablet: $ouds-font-line-height-450 !default; +$ouds-font-line-height-body-medium-desktop: $ouds-font-line-height-450 !default; +$ouds-font-line-height-body-medium-mobile: $ouds-font-line-height-350 !default; +$ouds-font-line-height-body-medium-tablet: $ouds-font-line-height-350 !default; +$ouds-font-line-height-body-small-desktop: $ouds-font-line-height-350 !default; +$ouds-font-line-height-body-small-mobile: $ouds-font-line-height-250 !default; +$ouds-font-line-height-body-small-tablet: $ouds-font-line-height-250 !default; +$ouds-font-line-height-code-medium: $ouds-font-line-height-350 !default; +$ouds-font-line-height-code-small: $ouds-font-line-height-250 !default; +$ouds-font-line-height-display-large-desktop: $ouds-font-line-height-2050 !default; +$ouds-font-line-height-display-large-mobile: $ouds-font-line-height-1050 !default; +$ouds-font-line-height-display-large-tablet: $ouds-font-line-height-1850 !default; +$ouds-font-line-height-display-medium-desktop: $ouds-font-line-height-1450 !default; +$ouds-font-line-height-display-medium-mobile: $ouds-font-line-height-950 !default; +$ouds-font-line-height-display-medium-tablet: $ouds-font-line-height-1250 !default; +$ouds-font-line-height-display-small-desktop: $ouds-font-line-height-1250 !default; +$ouds-font-line-height-display-small-mobile: $ouds-font-line-height-850 !default; +$ouds-font-line-height-display-small-tablet: $ouds-font-line-height-1050 !default; +$ouds-font-line-height-heading-large-desktop: $ouds-font-line-height-850 !default; +$ouds-font-line-height-heading-large-mobile: $ouds-font-line-height-650 !default; +$ouds-font-line-height-heading-large-tablet: $ouds-font-line-height-750 !default; +$ouds-font-line-height-heading-medium-desktop: $ouds-font-line-height-750 !default; +$ouds-font-line-height-heading-medium-mobile: $ouds-font-line-height-550 !default; +$ouds-font-line-height-heading-medium-tablet: $ouds-font-line-height-650 !default; +$ouds-font-line-height-heading-small-desktop: $ouds-font-line-height-650 !default; +$ouds-font-line-height-heading-small-mobile: $ouds-font-line-height-450 !default; +$ouds-font-line-height-heading-small-tablet: $ouds-font-line-height-550 !default; +$ouds-font-line-height-heading-xlarge-desktop: $ouds-font-line-height-1050 !default; +$ouds-font-line-height-heading-xlarge-mobile: $ouds-font-line-height-750 !default; +$ouds-font-line-height-heading-xlarge-tablet: $ouds-font-line-height-950 !default; +$ouds-font-line-height-label-large: $ouds-font-line-height-450 !default; +$ouds-font-line-height-label-medium: $ouds-font-line-height-350 !default; +$ouds-font-line-height-label-small: $ouds-font-line-height-250 !default; +$ouds-font-line-height-label-xlarge: $ouds-font-line-height-450 !default; +$ouds-font-size-body-large-desktop: $ouds-font-size-300 !default; +$ouds-font-size-body-large-mobile: $ouds-font-size-250 !default; +$ouds-font-size-body-large-tablet: $ouds-font-size-250 !default; +$ouds-font-size-body-medium-desktop: $ouds-font-size-250 !default; +$ouds-font-size-body-medium-mobile: $ouds-font-size-200 !default; +$ouds-font-size-body-medium-tablet: $ouds-font-size-200 !default; +$ouds-font-size-body-small-desktop: $ouds-font-size-200 !default; +$ouds-font-size-body-small-mobile: $ouds-font-size-150 !default; +$ouds-font-size-body-small-tablet: $ouds-font-size-150 !default; +$ouds-font-size-code-medium: $ouds-font-size-200 !default; +$ouds-font-size-code-small: $ouds-font-size-150 !default; +$ouds-font-size-display-large-desktop: $ouds-font-size-1850 !default; +$ouds-font-size-display-large-mobile: $ouds-font-size-850 !default; +$ouds-font-size-display-large-tablet: $ouds-font-size-1450 !default; +$ouds-font-size-display-medium-desktop: $ouds-font-size-1250 !default; +$ouds-font-size-display-medium-mobile: $ouds-font-size-750 !default; +$ouds-font-size-display-medium-tablet: $ouds-font-size-1050 !default; +$ouds-font-size-display-small-desktop: $ouds-font-size-1050 !default; +$ouds-font-size-display-small-mobile: $ouds-font-size-650 !default; +$ouds-font-size-display-small-tablet: $ouds-font-size-850 !default; +$ouds-font-size-heading-large-desktop: $ouds-font-size-650 !default; +$ouds-font-size-heading-large-mobile: $ouds-font-size-450 !default; +$ouds-font-size-heading-large-tablet: $ouds-font-size-550 !default; +$ouds-font-size-heading-medium-desktop: $ouds-font-size-550 !default; +$ouds-font-size-heading-medium-mobile: $ouds-font-size-350 !default; +$ouds-font-size-heading-medium-tablet: $ouds-font-size-450 !default; +$ouds-font-size-heading-small-desktop: $ouds-font-size-450 !default; +$ouds-font-size-heading-small-mobile: $ouds-font-size-300 !default; +$ouds-font-size-heading-small-tablet: $ouds-font-size-350 !default; +$ouds-font-size-heading-xlarge-desktop: $ouds-font-size-850 !default; +$ouds-font-size-heading-xlarge-mobile: $ouds-font-size-550 !default; +$ouds-font-size-heading-xlarge-tablet: $ouds-font-size-750 !default; +$ouds-font-size-label-large: $ouds-font-size-250 !default; +$ouds-font-size-label-medium: $ouds-font-size-200 !default; +$ouds-font-size-label-small: $ouds-font-size-150 !default; +$ouds-font-size-label-xlarge: $ouds-font-size-300 !default; +$ouds-font-weight-web-code: $ouds-font-weight-400 !default; +$ouds-font-weight-web-default: $ouds-font-weight-400 !default; +$ouds-font-weight-web-strong: $ouds-font-weight-700 !default; +$ouds-font-weight-web-body-default: $ouds-font-weight-web-default !default; +$ouds-font-weight-web-body-strong: $ouds-font-weight-web-strong !default; +$ouds-font-weight-web-display: $ouds-font-weight-web-strong !default; +$ouds-font-weight-web-heading: $ouds-font-weight-web-strong !default; +$ouds-font-weight-web-label-default: $ouds-font-weight-web-default !default; +$ouds-font-weight-web-label-strong: $ouds-font-weight-web-strong !default; +// scss-docs-end ouds-semantic-font + +// Grid + +// scss-docs-start ouds-semantic-grid +$ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; +$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; +$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; +$ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; +$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; +$ouds-grid-2xl-width: $ouds-grid-width-700 !default; +$ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default; +$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default; +$ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default; +$ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default; +$ouds-grid-2xs-width: $ouds-grid-width-100 !default; +$ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default; +$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default; +$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default; +$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default; +$ouds-grid-3xl-width: $ouds-grid-width-800 !default; +$ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default; +$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default; +$ouds-grid-lg-margin: $ouds-grid-margin-700 !default; +$ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default; +$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default; +$ouds-grid-lg-width: $ouds-grid-width-500 !default; +$ouds-grid-md-column-count: $ouds-grid-column-count-600 !default; +$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default; +$ouds-grid-md-margin: $ouds-grid-margin-500 !default; +$ouds-grid-md-max-width: $ouds-grid-max-width-400 !default; +$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default; +$ouds-grid-md-width: $ouds-grid-width-400 !default; +$ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-sm-column-gap: $ouds-grid-column-gap-200 !default; +$ouds-grid-sm-margin: $ouds-grid-margin-400 !default; +$ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default; +$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default; +$ouds-grid-sm-width: $ouds-grid-width-300 !default; +$ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default; +$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default; +$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default; +$ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default; +$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default; +$ouds-grid-xl-width: $ouds-grid-width-600 !default; +$ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default; +$ouds-grid-xs-column-gap: $ouds-grid-column-gap-200 !default; +$ouds-grid-xs-margin: $ouds-grid-margin-300 !default; +$ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default; +$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default; +$ouds-grid-xs-width: $ouds-grid-width-200 !default; +// scss-docs-end ouds-semantic-grid + // Opacity // scss-docs-start ouds-semantic-opacity -$ouds-opacity-transparent: $ouds-opacity-0 !default; -$ouds-opacity-weaker: $ouds-opacity-100 !default; -$ouds-opacity-weak: $ouds-opacity-300 !default; -$ouds-opacity-medium: $ouds-opacity-500 !default; -$ouds-opacity-strong: $ouds-opacity-700 !default; -$ouds-opacity-opaque: $ouds-opacity-900 !default; +$ouds-opacity-medium: $ouds-opacity-500 !default; +$ouds-opacity-opaque: $ouds-opacity-900 !default; +$ouds-opacity-strong: $ouds-opacity-700 !default; +$ouds-opacity-transparent: $ouds-opacity-0 !default; +$ouds-opacity-weak: $ouds-opacity-300 !default; +$ouds-opacity-weaker: $ouds-opacity-100 !default; // scss-docs-end ouds-semantic-opacity + +// Size + +// scss-docs-start ouds-semantic-size +$ouds-size-icon-decorative-medium: $ouds-dimension-500 !default; +$ouds-size-icon-decorative-short: $ouds-dimension-400 !default; +$ouds-size-icon-decorative-shorter: $ouds-dimension-300 !default; +$ouds-size-icon-decorative-shortest: $ouds-dimension-200 !default; +$ouds-size-icon-decorative-tall: $ouds-dimension-600 !default; +$ouds-size-icon-decorative-taller: $ouds-dimension-700 !default; +$ouds-size-icon-decorative-tallest: $ouds-dimension-900 !default; +$ouds-size-icon-with-body-large-size-medium-desktop: $ouds-dimension-500 !default; +$ouds-size-icon-with-body-large-size-medium-mobile: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-large-size-medium-tablet: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-large-size-short-desktop: $ouds-dimension-400 !default; +$ouds-size-icon-with-body-large-size-short-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-large-size-short-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-large-size-tall-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-body-large-size-tall-mobile: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-large-size-tall-tablet: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-medium-size-medium-desktop: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-medium-size-medium-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-medium-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-short-desktop: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-short-mobile: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-medium-size-short-tablet: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-medium-size-tall-desktop: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-medium-size-tall-mobile: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-medium-size-tall-tablet: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-small-size-medium-desktop: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-small-size-medium-mobile: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-medium-tablet: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-short-desktop: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-short-mobile: $ouds-dimension-150 !default; +$ouds-size-icon-with-body-small-size-short-tablet: $ouds-dimension-150 !default; +$ouds-size-icon-with-body-small-size-tall-desktop: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-small-size-tall-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-small-size-tall-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-heading-large-size-medium-desktop: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-large-size-medium-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-large-size-medium-tablet: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-short-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-short-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-large-size-short-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-large-size-tall-desktop: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-large-size-tall-mobile: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-tall-tablet: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-medium-size-medium-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-medium-size-medium-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-medium-size-medium-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-short-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-short-mobile: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-medium-size-short-tablet: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-medium-size-tall-desktop: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-medium-size-tall-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-tall-tablet: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-small-size-medium-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-small-size-medium-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-medium-tablet: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-short-desktop: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-short-mobile: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-small-size-short-tablet: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-small-size-tall-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-small-size-tall-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-small-size-tall-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-xlarge-size-medium-desktop: $ouds-dimension-750 !default; +$ouds-size-icon-with-heading-xlarge-size-medium-mobile: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-xlarge-size-medium-tablet: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-xlarge-size-short-desktop: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-xlarge-size-short-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-xlarge-size-short-tablet: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-xlarge-size-tall-desktop: $ouds-dimension-800 !default; +$ouds-size-icon-with-heading-xlarge-size-tall-mobile: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-xlarge-size-tall-tablet: $ouds-dimension-800 !default; +$ouds-size-type-max-width-body-large-desktop: $ouds-dimension-7000 !default; +$ouds-size-type-max-width-body-large-mobile: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-large-tablet: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-medium-desktop: $ouds-dimension-7000 !default; +$ouds-size-type-max-width-body-medium-mobile: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-medium-tablet: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-small-desktop: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-small-mobile: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-body-small-tablet: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-display-large-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-display-large-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-display-large-tablet: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-display-medium-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-display-medium-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-display-medium-tablet: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-display-small-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-display-small-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-display-small-tablet: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-large-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-heading-large-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-large-tablet: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-medium-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-heading-medium-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-medium-tablet: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-small-desktop: $ouds-dimension-7000 !default; +$ouds-size-type-max-width-heading-small-mobile: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-heading-small-tablet: $ouds-dimension-6000 !default; +$ouds-size-type-max-width-heading-xlarge-desktop: $ouds-dimension-11000 !default; +$ouds-size-type-max-width-heading-xlarge-mobile: $ouds-dimension-9000 !default; +$ouds-size-type-max-width-heading-xlarge-tablet: $ouds-dimension-9000 !default; +$ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xs !default; +$ouds-size-icon-with-label-large-size-short: $ouds-dimension-3xs !default; +$ouds-size-icon-with-label-large-size-shorter: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-large-size-tall: $ouds-dimension-xs !default; +$ouds-size-icon-with-label-large-size-taller: $ouds-dimension-lg !default; +$ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-medium-size-short: $ouds-dimension-5xs !default; +$ouds-size-icon-with-label-medium-size-tall: $ouds-dimension-3xs !default; +$ouds-size-icon-with-label-small-size-medium: $ouds-dimension-5xs !default; +$ouds-size-icon-with-label-small-size-short: $ouds-dimension-6xs !default; +$ouds-size-icon-with-label-small-size-tall: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-md !default; +$ouds-size-icon-with-label-xlarge-size-short: $ouds-dimension-xs !default; +$ouds-size-icon-with-label-xlarge-size-tall: $ouds-dimension-lg !default; +// scss-docs-end ouds-semantic-size + +// Space + +// scss-docs-start ouds-semantic-space +$ouds-space-fixed-huge: $ouds-dimension-700 !default; +$ouds-space-fixed-jumbo: $ouds-dimension-800 !default; +$ouds-space-fixed-medium: $ouds-dimension-200 !default; +$ouds-space-fixed-none: $ouds-dimension-0 !default; +$ouds-space-fixed-short: $ouds-dimension-150 !default; +$ouds-space-fixed-shorter: $ouds-dimension-100 !default; +$ouds-space-fixed-shortest: $ouds-dimension-50 !default; +$ouds-space-fixed-smash: $ouds-dimension-25 !default; +$ouds-space-fixed-spacious: $ouds-dimension-600 !default; +$ouds-space-fixed-tall: $ouds-dimension-300 !default; +$ouds-space-fixed-taller: $ouds-dimension-400 !default; +$ouds-space-fixed-tallest: $ouds-dimension-500 !default; +$ouds-space-scaled-medium-desktop: $ouds-dimension-400 !default; +$ouds-space-scaled-medium-mobile: $ouds-dimension-200 !default; +$ouds-space-scaled-medium-tablet: $ouds-dimension-300 !default; +$ouds-space-scaled-none-desktop: $ouds-dimension-0 !default; +$ouds-space-scaled-none-mobile: $ouds-dimension-0 !default; +$ouds-space-scaled-none-tablet: $ouds-dimension-0 !default; +$ouds-space-scaled-short-desktop: $ouds-dimension-300 !default; +$ouds-space-scaled-short-mobile: $ouds-dimension-150 !default; +$ouds-space-scaled-short-tablet: $ouds-dimension-200 !default; +$ouds-space-scaled-shorter-desktop: $ouds-dimension-200 !default; +$ouds-space-scaled-shorter-mobile: $ouds-dimension-100 !default; +$ouds-space-scaled-shorter-tablet: $ouds-dimension-150 !default; +$ouds-space-scaled-shortest-desktop: $ouds-dimension-100 !default; +$ouds-space-scaled-shortest-mobile: $ouds-dimension-50 !default; +$ouds-space-scaled-shortest-tablet: $ouds-dimension-100 !default; +$ouds-space-scaled-smash-desktop: $ouds-dimension-50 !default; +$ouds-space-scaled-smash-mobile: $ouds-dimension-25 !default; +$ouds-space-scaled-smash-tablet: $ouds-dimension-50 !default; +$ouds-space-scaled-spacious-desktop: $ouds-dimension-800 !default; +$ouds-space-scaled-spacious-mobile: $ouds-dimension-600 !default; +$ouds-space-scaled-spacious-tablet: $ouds-dimension-700 !default; +$ouds-space-scaled-tall-desktop: $ouds-dimension-500 !default; +$ouds-space-scaled-tall-mobile: $ouds-dimension-300 !default; +$ouds-space-scaled-tall-tablet: $ouds-dimension-400 !default; +$ouds-space-scaled-taller-desktop: $ouds-dimension-600 !default; +$ouds-space-scaled-taller-mobile: $ouds-dimension-400 !default; +$ouds-space-scaled-taller-tablet: $ouds-dimension-500 !default; +$ouds-space-scaled-tallest-desktop: $ouds-dimension-700 !default; +$ouds-space-scaled-tallest-mobile: $ouds-dimension-500 !default; +$ouds-space-scaled-tallest-tablet: $ouds-dimension-600 !default; +$ouds-space-column-gap-medium: $ouds-dimension-5xs !default; +$ouds-space-column-gap-none: $ouds-dimension-none !default; +$ouds-space-column-gap-short: $ouds-dimension-7xs !default; +$ouds-space-column-gap-shorter: $ouds-dimension-9xs !default; +$ouds-space-column-gap-tall: $ouds-dimension-3xs !default; +$ouds-space-column-gap-taller: $ouds-dimension-xs !default; +$ouds-space-column-gap-with-arrow-medium: $ouds-dimension-7xs !default; +$ouds-space-column-gap-with-arrow-none: $ouds-dimension-none !default; +$ouds-space-column-gap-with-arrow-short: $ouds-dimension-8xs !default; +$ouds-space-column-gap-with-arrow-shorter: $ouds-dimension-9xs !default; +$ouds-space-column-gap-with-arrow-shortest: $ouds-dimension-10xs !default; +$ouds-space-column-gap-with-arrow-tall: $ouds-dimension-5xs !default; +$ouds-space-column-gap-with-icon-medium: $ouds-dimension-7xs !default; +$ouds-space-column-gap-with-icon-none: $ouds-dimension-none !default; +$ouds-space-column-gap-with-icon-short: $ouds-dimension-8xs !default; +$ouds-space-column-gap-with-icon-shorter: $ouds-dimension-9xs !default; +$ouds-space-column-gap-with-icon-shortest: $ouds-dimension-10xs !default; +$ouds-space-column-gap-with-icon-tall: $ouds-dimension-5xs !default; +$ouds-space-inset-medium: $ouds-dimension-6xs !default; +$ouds-space-inset-none: $ouds-dimension-none !default; +$ouds-space-inset-short: $ouds-dimension-7xs !default; +$ouds-space-inset-shorter: $ouds-dimension-8xs !default; +$ouds-space-inset-shortest: $ouds-dimension-9xs !default; +$ouds-space-inset-smash: $ouds-dimension-10xs !default; +$ouds-space-inset-spacious: $ouds-dimension-md !default; +$ouds-space-inset-tall: $ouds-dimension-5xs !default; +$ouds-space-inset-taller: $ouds-dimension-3xs !default; +$ouds-space-inset-tallest: $ouds-dimension-xs !default; +$ouds-space-padding-block-medium: $ouds-dimension-6xs !default; +$ouds-space-padding-block-none: $ouds-dimension-none !default; +$ouds-space-padding-block-short: $ouds-dimension-7xs !default; +$ouds-space-padding-block-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-block-tall: $ouds-dimension-5xs !default; +$ouds-space-padding-block-taller: $ouds-dimension-3xs !default; +$ouds-space-padding-block-tallest: $ouds-dimension-xs !default; +$ouds-space-padding-block-with-icon-medium: $ouds-dimension-7xs !default; +$ouds-space-padding-block-with-icon-none: $ouds-dimension-none !default; +$ouds-space-padding-block-with-icon-short: $ouds-dimension-8xs !default; +$ouds-space-padding-block-with-icon-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-block-with-icon-shortest: $ouds-dimension-10xs !default; +$ouds-space-padding-block-with-icon-tall: $ouds-dimension-6xs !default; +$ouds-space-padding-block-with-icon-taller: $ouds-dimension-5xs !default; +$ouds-space-padding-inline-medium: $ouds-dimension-5xs !default; +$ouds-space-padding-inline-none: $ouds-dimension-none !default; +$ouds-space-padding-inline-short: $ouds-dimension-7xs !default; +$ouds-space-padding-inline-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-inline-tall: $ouds-dimension-3xs !default; +$ouds-space-padding-inline-taller: $ouds-dimension-2xs !default; +$ouds-space-padding-inline-tallest: $ouds-dimension-xs !default; +$ouds-space-padding-inline-with-arrow-medium: $ouds-dimension-7xs !default; +$ouds-space-padding-inline-with-arrow-none: $ouds-dimension-none !default; +$ouds-space-padding-inline-with-arrow-short: $ouds-dimension-8xs !default; +$ouds-space-padding-inline-with-arrow-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-inline-with-arrow-shortest: $ouds-dimension-10xs !default; +$ouds-space-padding-inline-with-arrow-tall: $ouds-dimension-5xs !default; +$ouds-space-padding-inline-with-arrow-taller: $ouds-dimension-4xs !default; +$ouds-space-padding-inline-with-arrow-tallest: $ouds-dimension-3xs !default; +$ouds-space-padding-inline-with-icon-medium: $ouds-dimension-5xs !default; +$ouds-space-padding-inline-with-icon-none: $ouds-dimension-none !default; +$ouds-space-padding-inline-with-icon-short: $ouds-dimension-7xs !default; +$ouds-space-padding-inline-with-icon-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-inline-with-icon-shortest: $ouds-dimension-10xs !default; +$ouds-space-padding-inline-with-icon-tall: $ouds-dimension-4xs !default; +$ouds-space-padding-inline-with-icon-taller: $ouds-dimension-3xs !default; +$ouds-space-padding-inline-with-icon-tallest: $ouds-dimension-2xs !default; +$ouds-space-row-gap-medium: $ouds-dimension-7xs !default; +$ouds-space-row-gap-none: $ouds-dimension-none !default; +$ouds-space-row-gap-short: $ouds-dimension-8xs !default; +$ouds-space-row-gap-shorter: $ouds-dimension-9xs !default; +$ouds-space-row-gap-shortest: $ouds-dimension-10xs !default; +$ouds-space-row-gap-tall: $ouds-dimension-5xs !default; +$ouds-space-row-gap-with-icon-medium: $ouds-dimension-7xs !default; +$ouds-space-row-gap-with-icon-none: $ouds-dimension-none !default; +$ouds-space-row-gap-with-icon-short: $ouds-dimension-8xs !default; +$ouds-space-row-gap-with-icon-shorter: $ouds-dimension-9xs !default; +$ouds-space-row-gap-with-icon-shortest: $ouds-dimension-10xs !default; +$ouds-space-row-gap-with-icon-tall: $ouds-dimension-5xs !default; +// scss-docs-end ouds-semantic-space