diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 0fb2d35aee..468b91dc7d 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -36,6 +36,12 @@ $ouds-border-width-100: $ouds-border-base !default; // $ouds-border-width-200: $ouds-border-base * 2 !default; // scss-docs-end ouds-raw-border +// Dimension + +// scss-docs-start ouds-raw-dimension +$ouds-dimension-base: 4px !default; +// scss-docs-end ouds-raw-dimension + // Elevation // scss-docs-start ouds-raw-elevation @@ -69,60 +75,55 @@ $ouds-elevation-y-500: 12px !default; // Grid // scss-docs-start ouds-raw-grid -//$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-min-width-100: 1px !default; // 2xs -$ouds-grid-min-width-200: 390px !default; // xs -$ouds-grid-min-width-300: 480px !default; // sm -$ouds-grid-min-width-400: 736px !default; // md -$ouds-grid-min-width-500: 1024px !default; // lg -$ouds-grid-min-width-600: 1320px !default; // xl -$ouds-grid-min-width-700: 1640px !default; // xxl -$ouds-grid-min-width-800: 1880px !default; // 3xl - -//$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-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-700: 1879px !default; $ouds-grid-max-width-800: 1920px !default; - -$ouds-grid-margin-100: 16px !default; -$ouds-grid-margin-300: 24px !default; -$ouds-grid-margin-400: 28px !default; -$ouds-grid-margin-500: 32px !default; -//$ouds-grid-margin-600: 36px !default; -$ouds-grid-margin-700: 40px !default; -//$ouds-grid-margin-1000: 52px !default; -$ouds-grid-margin-1100: 56px !default; -$ouds-grid-margin-1700: 80px !default; -$ouds-grid-margin-2500: 112px !default; - -//$ouds-grid-column-gap-10: 1px !default; -$ouds-grid-column-gap-100: 8px !default; -$ouds-grid-column-gap-200: 16px !default; -//$ouds-grid-column-gap-300: 20px !default; -$ouds-grid-column-gap-400: 24px !default; -$ouds-grid-column-gap-600: 32px !default; -$ouds-grid-column-gap-800: 40px !default; - -//$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-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 diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index f4ae7db76f..06e1fb77fa 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -80,62 +80,55 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default; // Grid // scss-docs-start ouds-semantic-grid -//$ouds-grid-2xs-width: $ouds-grid-width-100 !default; -//$ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default; -//$ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default; -$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default; -$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default; -//$ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-xs-width: $ouds-grid-width-200 !default; -$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default; -//$ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default; -$ouds-grid-xs-margin: $ouds-grid-margin-300 !default; -$ouds-grid-xs-column-gap: $ouds-grid-column-gap-200 !default; -//$ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-sm-width: $ouds-grid-width-300 !default; -$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default; -//$ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default; -$ouds-grid-sm-margin: $ouds-grid-margin-400 !default; -$ouds-grid-sm-column-gap: $ouds-grid-column-gap-200 !default; -//$ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default; - -//$ouds-grid-md-width: $ouds-grid-width-400 !default; -$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default; -//$ouds-grid-md-max-width: $ouds-grid-max-width-400 !default; -$ouds-grid-md-margin: $ouds-grid-margin-500 !default; -$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default; -//$ouds-grid-md-column-count: $ouds-grid-column-count-600 !default; - -//$ouds-grid-lg-width: $ouds-grid-width-500 !default; -$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default; -//$ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default; -$ouds-grid-lg-margin: $ouds-grid-margin-700 !default; -$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default; -//$ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default; - -//$ouds-grid-xl-width: $ouds-grid-width-600 !default; -$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default; -//$ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default; -$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default; -$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default; -//$ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default; - -//$ouds-grid-2xl-width: $ouds-grid-width-700 !default; -$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; -//$ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; -$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; -$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; -$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; -//$ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default; - -//$ouds-grid-3xl-width: $ouds-grid-width-800 !default; -$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default; -$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default; -$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default; -$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default; -//$ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default; +// $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