Skip to content

Commit

Permalink
Use generated tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien-deramond
julien-deramond committed Oct 16, 2024
1 parent 3b56854 commit 7236052
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 108 deletions.
105 changes: 53 additions & 52 deletions scss/tokens/_raw.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
105 changes: 49 additions & 56 deletions scss/tokens/_semantic.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 7236052

Please sign in to comment.