closes #123

src/docs/styles/tokens/variables/main.stories.mdx

@@ -5,16 +5,25 @@ import { scssVariablesToTableArray } from '../../../utils/parseCss';
 
 {/* @ts-ignore */}
 import theme from '$lib/scss/tokens/variables/\_theme.scss?raw';
+import block from '$lib/scss/tokens/variables/\_block.scss?raw';
 
-<Meta title="Styles/Tokens/Variables" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
 # Token variables
 
+These are SCSS mirrors of some of the default CSS variables used in the `Theme`. Use them in places where CSS variables cannot be used. e.g. You can write `media-queries` to target the block widths using the `block` vars, which is not possible using CSS variables.
+
 <CopyTable
   title="Theme"
   header={['Variable', 'Properties']}
   body={scssVariablesToTableArray(theme)}
   copyable={[true, false]}
 />
+<CopyTable
+  title="Block"
+  header={['Variable', 'Properties']}
+  body={scssVariablesToTableArray(block)}
+  copyable={[true, false]}
+/>

src/scss/mixins/_block.scss

@@ -1,8 +1,4 @@
-$column-width-narrower: 330px !default;
-$column-width-narrow: 510px !default;
-$column-width-normal: 660px !default;
-$column-width-wide: 930px !default;
-$column-width-wider: 1200px !default;
+@use '../tokens/variables/block' as *;
 
 @mixin block-snap-widths($article-padding: 30px) {
   width: $column-width-narrower;
@@ -52,11 +48,12 @@ $column-width-wider: 1200px !default;
     }
   }
 
-  &.widest, &.fluid {
+  &.widest,
+  &.fluid {
     width: inherit;
   }
-  
+
   &.fluid {
     width: calc(100% + $article-padding);
   }
-}
+}

src/scss/tokens/variables/_block.scss

@@ -0,0 +1,6 @@
+// SCSS mirrors for default block widths
+$column-width-narrower: 330px !default;
+$column-width-narrow: 510px !default;
+$column-width-normal: 660px !default;
+$column-width-wide: 930px !default;
+$column-width-wider: 1200px !default;

src/scss/tokens/variables/_main.scss

@@ -1 +1,2 @@
 @forward 'theme';
+@forward 'block';