From 29a9138322d901461ede9f79d287a9499e06e7ba Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 29 Jul 2023 20:44:34 +0100
Subject: [PATCH] sizing tokens

---
 bin/css-to-js/index.js                        |   6 +-
 .../FeaturePhoto/FeaturePhoto.svelte          |   8 +-
 .../styles/tokens/sizing/main.stories.mdx     |  76 ++++++++
 src/scss/token-classes.scss                   |   1 +
 src/scss/tokens/sizing/_height.scss           | 168 ++++++++++++++++++
 src/scss/tokens/sizing/_main.scss             |   6 +
 src/scss/tokens/sizing/_max-height.scss       |  12 ++
 src/scss/tokens/sizing/_max-width.scss        |  12 ++
 src/scss/tokens/sizing/_min-height.scss       |  12 ++
 src/scss/tokens/sizing/_min-width.scss        |   6 +
 src/scss/tokens/sizing/_width.scss            | 168 ++++++++++++++++++
 11 files changed, 468 insertions(+), 7 deletions(-)
 create mode 100644 src/docs/styles/tokens/sizing/main.stories.mdx
 create mode 100644 src/scss/tokens/sizing/_height.scss
 create mode 100644 src/scss/tokens/sizing/_main.scss
 create mode 100644 src/scss/tokens/sizing/_max-height.scss
 create mode 100644 src/scss/tokens/sizing/_max-width.scss
 create mode 100644 src/scss/tokens/sizing/_min-height.scss
 create mode 100644 src/scss/tokens/sizing/_min-width.scss
 create mode 100644 src/scss/tokens/sizing/_width.scss

diff --git a/bin/css-to-js/index.js b/bin/css-to-js/index.js
index 835aebfb..26b5c402 100644
--- a/bin/css-to-js/index.js
+++ b/bin/css-to-js/index.js
@@ -135,11 +135,13 @@ const sanitize = function sanitize(name) {
     .replace(/\*/g, 'all-children')
     .replace(/#/g, '$')
     .replace(/\s\s+/g, ' ')
+    .replace(/(\d)\\\/(\d)/g, '$1~$2') // Added for escaped slashes like ".w-1/2"
     .replace(/(\d)\\\.(\d)/g, '$1|$2') // Added for escaped dots like ".mb-0\.5"
-    .replace(/[^a-zA-Z0-9$|]/g, '_')
+    .replace(/[^a-zA-Z0-9$|~]/g, '_')
     .replace(/^_+/g, '')
     .replace(/_+$/g, '')
-    .replace('|', '.');
+    .replace('|', '.') // Replace placeholder
+    .replace('~', '/'); // Replace placeholder
 };
 
 const fontface = function fontface(rule, result) {
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index a9252114..d18a186c 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -85,12 +85,12 @@
   <figure
     bind:this="{container}"
     aria-label="media"
-    class="mt-0 mx-0 mb-6 flex flex-col"
+    class="mt-0 mx-0 mb-6 flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
       <img class="m-0" src="{src}" alt="{altText}" />
     {:else}
-      <div class="placeholder" height="{`${height}px`}"></div>
+      <div class="placeholder" style="{`height: ${height}px;`}"></div>
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
@@ -100,7 +100,7 @@
       </PaddingReset>
     {/if}
     {#if !altText}
-      <div class="alt-warning text-xxs py-1 px-2">altText</div>
+      <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
     {/if}
   </figure>
 </Block>
@@ -108,7 +108,6 @@
 <style lang="scss">
   figure {
     width: 100%;
-    position: relative;
 
     img {
       width: 100%;
@@ -122,7 +121,6 @@
     div.alt-warning {
       background-color: red;
       color: white;
-      position: absolute;
       top: 0;
       right: 0;
     }
diff --git a/src/docs/styles/tokens/sizing/main.stories.mdx b/src/docs/styles/tokens/sizing/main.stories.mdx
new file mode 100644
index 00000000..aec04b29
--- /dev/null
+++ b/src/docs/styles/tokens/sizing/main.stories.mdx
@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+
+{/* @ts-ignore */}
+import height from '$lib/scss/tokens/sizing/\_height.scss?inline';
+
+{/* @ts-ignore */}
+import maxHeight from '$lib/scss/tokens/sizing/\_max-height.scss?inline';
+
+{/* @ts-ignore */}
+import maxWidth from '$lib/scss/tokens/sizing/\_max-width.scss?inline';
+
+{/* @ts-ignore */}
+import minHeight from '$lib/scss/tokens/sizing/\_min-height.scss?inline';
+
+{/* @ts-ignore */}
+import minWidth from '$lib/scss/tokens/sizing/\_min-width.scss?inline';
+
+{/* @ts-ignore */}
+import width from '$lib/scss/tokens/sizing/\_width.scss?inline';
+
+<Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Sizing tokens
+
+<CopyTable
+  title="Width"
+  mdnLink="width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(width)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Max-width"
+  mdnLink="max-width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(maxWidth)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Min-width"
+  mdnLink="min-width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(minWidth)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Height"
+  mdnLink="height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(height)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Max-height"
+  mdnLink="max-height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(maxHeight)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Min-height"
+  mdnLink="min-height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(minHeight)}
+  copyable={[true, false]}
+/>
diff --git a/src/scss/token-classes.scss b/src/scss/token-classes.scss
index 7b84b90c..899dd9b5 100644
--- a/src/scss/token-classes.scss
+++ b/src/scss/token-classes.scss
@@ -3,5 +3,6 @@
 @use 'tokens/borders/main' as *;
 @use 'tokens/interactivity/main' as *;
 @use 'tokens/layout/main' as *;
+@use 'tokens/sizing/main' as *;
 @use 'tokens/spacers/main' as *;
 @use 'tokens/text/main' as *;
diff --git a/src/scss/tokens/sizing/_height.scss b/src/scss/tokens/sizing/_height.scss
new file mode 100644
index 00000000..f69abd59
--- /dev/null
+++ b/src/scss/tokens/sizing/_height.scss
@@ -0,0 +1,168 @@
+.h-full {
+  height: 100%;
+}
+.h-screen {
+  height: 100vh;
+}
+.h-1\/2 {
+  height: 50%;
+}
+.h-1\/3 {
+  height: 33.333333%;
+}
+.h-2\/3 {
+  height: 66.666667%;
+}
+.h-1\/4 {
+  height: 25%;
+}
+.h-2\/4 {
+  height: 50%;
+}
+.h-3\/4 {
+  height: 75%;
+}
+.h-1\/5 {
+  height: 20%;
+}
+.h-2\/5 {
+  height: 40%;
+}
+.h-3\/5 {
+  height: 60%;
+}
+.h-4\/5 {
+  height: 80%;
+}
+.h-1\/6 {
+  height: 16.666667%;
+}
+.h-2\/6 {
+  height: 33.333333%;
+}
+.h-3\/6 {
+  height: 50%;
+}
+.h-4\/6 {
+  height: 66.666667%;
+}
+.h-5\/6 {
+  height: 83.333333%;
+}
+.h-1\/12 {
+  height: 8.333333%;
+}
+.h-2\/12 {
+  height: 16.666667%;
+}
+.h-3\/12 {
+  height: 25%;
+}
+.h-4\/12 {
+  height: 33.333333%;
+}
+.h-5\/12 {
+  height: 41.666667%;
+}
+.h-6\/12 {
+  height: 50%;
+}
+.h-7\/12 {
+  height: 58.333333%;
+}
+.h-8\/12 {
+  height: 66.666667%;
+}
+.h-9\/12 {
+  height: 75%;
+}
+.h-10\/12 {
+  height: 83.333333%;
+}
+.h-11\/12 {
+  height: 91.666667%;
+}
+.\!h-full {
+  height: 100% !important;
+}
+.\!h-screen {
+  height: 100vh !important;
+}
+.\!h-1\/2 {
+  height: 50% !important;
+}
+.\!h-1\/3 {
+  height: 33.333333% !important;
+}
+.\!h-2\/3 {
+  height: 66.666667% !important;
+}
+.\!h-1\/4 {
+  height: 25% !important;
+}
+.\!h-2\/4 {
+  height: 50% !important;
+}
+.\!h-3\/4 {
+  height: 75% !important;
+}
+.\!h-1\/5 {
+  height: 20% !important;
+}
+.\!h-2\/5 {
+  height: 40% !important;
+}
+.\!h-3\/5 {
+  height: 60% !important;
+}
+.\!h-4\/5 {
+  height: 80% !important;
+}
+.\!h-1\/6 {
+  height: 16.666667% !important;
+}
+.\!h-2\/6 {
+  height: 33.333333% !important;
+}
+.\!h-3\/6 {
+  height: 50% !important;
+}
+.\!h-4\/6 {
+  height: 66.666667% !important;
+}
+.\!h-5\/6 {
+  height: 83.333333% !important;
+}
+.\!h-1\/12 {
+  height: 8.333333% !important;
+}
+.\!h-2\/12 {
+  height: 16.666667% !important;
+}
+.\!h-3\/12 {
+  height: 25% !important;
+}
+.\!h-4\/12 {
+  height: 33.333333% !important;
+}
+.\!h-5\/12 {
+  height: 41.666667% !important;
+}
+.\!h-6\/12 {
+  height: 50% !important;
+}
+.\!h-7\/12 {
+  height: 58.333333% !important;
+}
+.\!h-8\/12 {
+  height: 66.666667% !important;
+}
+.\!h-9\/12 {
+  height: 75% !important;
+}
+.\!h-10\/12 {
+  height: 83.333333% !important;
+}
+.\!h-11\/12 {
+  height: 91.666667% !important;
+}
diff --git a/src/scss/tokens/sizing/_main.scss b/src/scss/tokens/sizing/_main.scss
new file mode 100644
index 00000000..a4355a08
--- /dev/null
+++ b/src/scss/tokens/sizing/_main.scss
@@ -0,0 +1,6 @@
+@forward 'height';
+@forward 'max-height';
+@forward 'max-width';
+@forward 'min-height';
+@forward 'min-width';
+@forward 'width';
diff --git a/src/scss/tokens/sizing/_max-height.scss b/src/scss/tokens/sizing/_max-height.scss
new file mode 100644
index 00000000..8d8e42a2
--- /dev/null
+++ b/src/scss/tokens/sizing/_max-height.scss
@@ -0,0 +1,12 @@
+.max-h-full {
+  max-height: 100%;
+}
+.max-h-screen {
+  max-height: 100vh;
+}
+.\!max-h-full {
+  max-height: 100% !important;
+}
+.\!max-h-screen {
+  max-height: 100vh !important;
+}
diff --git a/src/scss/tokens/sizing/_max-width.scss b/src/scss/tokens/sizing/_max-width.scss
new file mode 100644
index 00000000..4af1bda9
--- /dev/null
+++ b/src/scss/tokens/sizing/_max-width.scss
@@ -0,0 +1,12 @@
+.max-w-full {
+  max-width: 100%;
+}
+.max-w-screen {
+  max-width: 100vw;
+}
+.\!max-w-full {
+  max-width: 100% !important;
+}
+.\!max-w-screen {
+  max-width: 100vw !important;
+}
diff --git a/src/scss/tokens/sizing/_min-height.scss b/src/scss/tokens/sizing/_min-height.scss
new file mode 100644
index 00000000..a3c16925
--- /dev/null
+++ b/src/scss/tokens/sizing/_min-height.scss
@@ -0,0 +1,12 @@
+.min-h-full {
+  min-height: 100%;
+}
+.min-h-screen {
+  min-height: 100vh;
+}
+.\!min-h-full {
+  min-height: 100% !important;
+}
+.\!min-h-screen {
+  min-height: 100vh !important;
+}
diff --git a/src/scss/tokens/sizing/_min-width.scss b/src/scss/tokens/sizing/_min-width.scss
new file mode 100644
index 00000000..f831ec8a
--- /dev/null
+++ b/src/scss/tokens/sizing/_min-width.scss
@@ -0,0 +1,6 @@
+.min-w-full {
+  min-width: 100%;
+}
+.\!min-w-full {
+  min-width: 100% !important;
+}
diff --git a/src/scss/tokens/sizing/_width.scss b/src/scss/tokens/sizing/_width.scss
new file mode 100644
index 00000000..135a8776
--- /dev/null
+++ b/src/scss/tokens/sizing/_width.scss
@@ -0,0 +1,168 @@
+.w-full {
+  width: 100%;
+}
+.w-screen {
+  width: 100vw;
+}
+.w-1\/2 {
+  width: 50%;
+}
+.w-1\/3 {
+  width: 33.333333%;
+}
+.w-2\/3 {
+  width: 66.666667%;
+}
+.w-1\/4 {
+  width: 25%;
+}
+.w-2\/4 {
+  width: 50%;
+}
+.w-3\/4 {
+  width: 75%;
+}
+.w-1\/5 {
+  width: 20%;
+}
+.w-2\/5 {
+  width: 40%;
+}
+.w-3\/5 {
+  width: 60%;
+}
+.w-4\/5 {
+  width: 80%;
+}
+.w-1\/6 {
+  width: 16.666667%;
+}
+.w-2\/6 {
+  width: 33.333333%;
+}
+.w-3\/6 {
+  width: 50%;
+}
+.w-4\/6 {
+  width: 66.666667%;
+}
+.w-5\/6 {
+  width: 83.333333%;
+}
+.w-1\/12 {
+  width: 8.333333%;
+}
+.w-2\/12 {
+  width: 16.666667%;
+}
+.w-3\/12 {
+  width: 25%;
+}
+.w-4\/12 {
+  width: 33.333333%;
+}
+.w-5\/12 {
+  width: 41.666667%;
+}
+.w-6\/12 {
+  width: 50%;
+}
+.w-7\/12 {
+  width: 58.333333%;
+}
+.w-8\/12 {
+  width: 66.666667%;
+}
+.w-9\/12 {
+  width: 75%;
+}
+.w-10\/12 {
+  width: 83.333333%;
+}
+.w-11\/12 {
+  width: 91.666667%;
+}
+.\!w-full {
+  width: 100% !important;
+}
+.\!w-screen {
+  width: 100vw !important;
+}
+.\!w-1\/2 {
+  width: 50% !important;
+}
+.\!w-1\/3 {
+  width: 33.333333% !important;
+}
+.\!w-2\/3 {
+  width: 66.666667% !important;
+}
+.\!w-1\/4 {
+  width: 25% !important;
+}
+.\!w-2\/4 {
+  width: 50% !important;
+}
+.\!w-3\/4 {
+  width: 75% !important;
+}
+.\!w-1\/5 {
+  width: 20% !important;
+}
+.\!w-2\/5 {
+  width: 40% !important;
+}
+.\!w-3\/5 {
+  width: 60% !important;
+}
+.\!w-4\/5 {
+  width: 80% !important;
+}
+.\!w-1\/6 {
+  width: 16.666667% !important;
+}
+.\!w-2\/6 {
+  width: 33.333333% !important;
+}
+.\!w-3\/6 {
+  width: 50% !important;
+}
+.\!w-4\/6 {
+  width: 66.666667% !important;
+}
+.\!w-5\/6 {
+  width: 83.333333% !important;
+}
+.\!w-1\/12 {
+  width: 8.333333% !important;
+}
+.\!w-2\/12 {
+  width: 16.666667% !important;
+}
+.\!w-3\/12 {
+  width: 25% !important;
+}
+.\!w-4\/12 {
+  width: 33.333333% !important;
+}
+.\!w-5\/12 {
+  width: 41.666667% !important;
+}
+.\!w-6\/12 {
+  width: 50% !important;
+}
+.\!w-7\/12 {
+  width: 58.333333% !important;
+}
+.\!w-8\/12 {
+  width: 66.666667% !important;
+}
+.\!w-9\/12 {
+  width: 75% !important;
+}
+.\!w-10\/12 {
+  width: 83.333333% !important;
+}
+.\!w-11\/12 {
+  width: 91.666667% !important;
+}