From 5354f9a55f2e5e4b831d9f51a571e8ad4fdf7957 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Wed, 20 Sep 2023 14:28:59 +0530
Subject: [PATCH] closes #123

---
 src/docs/styles/tokens/variables/main.stories.mdx | 11 ++++++++++-
 src/scss/mixins/_block.scss                       | 13 +++++--------
 src/scss/tokens/variables/_block.scss             |  6 ++++++
 src/scss/tokens/variables/_main.scss              |  1 +
 4 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 src/scss/tokens/variables/_block.scss

diff --git a/src/docs/styles/tokens/variables/main.stories.mdx b/src/docs/styles/tokens/variables/main.stories.mdx
index d7724e5a..b932c3e7 100644
--- a/src/docs/styles/tokens/variables/main.stories.mdx
+++ b/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]}
+/>
diff --git a/src/scss/mixins/_block.scss b/src/scss/mixins/_block.scss
index d7677d6e..99535410 100644
--- a/src/scss/mixins/_block.scss
+++ b/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);
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/tokens/variables/_block.scss b/src/scss/tokens/variables/_block.scss
new file mode 100644
index 00000000..758f2730
--- /dev/null
+++ b/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;
diff --git a/src/scss/tokens/variables/_main.scss b/src/scss/tokens/variables/_main.scss
index 65f9c53b..b2118579 100644
--- a/src/scss/tokens/variables/_main.scss
+++ b/src/scss/tokens/variables/_main.scss
@@ -1 +1,2 @@
 @forward 'theme';
+@forward 'block';