@reuters-graphics/graphics-components 0.1.6 → 0.1.7--canary.99.331bdb0.0

package/dist/components/Table/Select.svelte

@@ -34,13 +34,13 @@ function input(event) {
 
 <style>.select {
   width: 256px;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--theme-font-family-sans-serif);
 }
 .select label {
   display: block;
   font-size: 0.8rem;
   font-weight: 300;
-  color: var(--theme-colour-text-primary, #404040);
+  color: var(--theme-colour-text-primary);
   padding: 0 0 0.125rem 0;
 }
 .select .select--input {
@@ -49,8 +49,8 @@ function input(event) {
   font-weight: 400;
   line-height: 1;
   height: 33px;
-  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
-  color: var(--theme-colour-text-primary, #404040);
+  border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
+  color: var(--theme-colour-text-primary);
   border-radius: 6px;
   width: 100%;
   padding: 0.5rem;

package/dist/components/Table/SortArrow.svelte

@@ -29,8 +29,8 @@ export let active = false;
 }
 
 path {
-  fill: var(--theme-colour-brand-rules, #d0d0d0);
+  fill: var(--theme-colour-brand-rules, var(--tr-muted-grey));
 }
 path.active {
-  fill: var(--theme-colour-text-primary, #404040);
+  fill: var(--theme-colour-text-primary, var(--tr-dark-grey));
 }</style>

package/dist/components/Table/Table.svelte

@@ -96,7 +96,8 @@ export let width = 'normal';
 /** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /** Import local helpers */
 import Block from '../Block/Block.svelte';
 import Pagination from './Pagination.svelte';
@@ -175,7 +176,7 @@ onMount(() => {
 });
 </script>
 
-<Block width="{width}" id="{id}" cls="{cls}">
+<Block width="{width}" id="{id}" class="{cls}">
   <article class="table-wrapper">
     {#if title || dek || searchable || filterList}
       <header class="table--header">
@@ -302,8 +303,8 @@ onMount(() => {
 
 <style>.table-wrapper {
   font-size: 1rem;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
+  font-family: var(--theme-font-family-sans-serif);
+  color: var(--theme-colour-text-primary);
 }
 
 .table--header {
@@ -311,14 +312,14 @@ onMount(() => {
 }
 .table--header h2.table--header--title {
   font-weight: 500;
-  color: var(--theme-colour-text-primary, #404040);
+  color: var(--theme-colour-text-primary);
   font-size: 1.33rem;
   padding: 0;
   margin: 0.5rem 0;
 }
 .table--header p.table--header--dek {
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
+  font-family: var(--theme-font-family-sans-serif);
+  color: var(--theme-colour-text-primary);
   font-size: 1rem;
   font-weight: 300;
   line-height: 1.4;
@@ -337,9 +338,9 @@ section.table table {
   width: 100%;
 }
 section.table table thead tr th {
-  border-bottom: 1px solid var(--theme-colour-text-primary, #666666);
-  color: var(--theme-colour-text-primary, #666666);
-  background-color: var(--theme-colour-background, #fff);
+  border-bottom: 1px solid var(--theme-colour-text-primary);
+  color: var(--theme-colour-text-primary);
+  background-color: var(--theme-colour-background);
   font-size: 0.85rem;
   font-weight: 500;
   text-align: inherit;
@@ -360,10 +361,10 @@ section.table table tbody td {
   font-weight: 300;
   padding: 0.5rem 0.75rem 0.5rem 0;
   vertical-align: top;
-  border-bottom: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  border-bottom: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
 }
 section.table table tbody td.no-results {
-  color: var(--theme-colour-text-secondary, #d0d0d0);
+  color: var(--theme-colour-text-secondary);
 }
 section.table table tfoot.table--tfoot {
   display: table-row;
@@ -373,7 +374,7 @@ section.table table tfoot.table--tfoot tr {
 }
 section.table table tfoot.table--tfoot td {
   font-weight: 300;
-  color: var(--theme-colour-text-primary, #404040);
+  color: var(--theme-colour-text-primary);
   font-size: 0.8rem;
   padding: 0.5rem 0 0 0;
 }
@@ -407,13 +408,13 @@ nav.show-all {
 }
 nav.show-all button {
   font-size: 0.8rem;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--theme-font-family-sans-serif);
   font-weight: 500;
   min-width: 175px;
   padding: 0.33rem 0.5rem;
-  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
   border-radius: 4px;
-  background: var(--theme-colour-background);
-  color: var(--theme-colour-text-primary, #666666);
+  background-color: var(--theme-colour-background);
+  color: var(--theme-colour-text-primary);
   cursor: pointer;
 }</style>

package/dist/components/Theme/themes/common.js

@@ -0,0 +1,28 @@
+/** @type {Omit<import('../@types/component').Theme, "colour">} */
+export default {
+  font: {
+    family: {
+      serif: 'FreightText, serif',
+      'sans-serif': 'Knowledge, sans-serif',
+      monospace:
+        '"Droid Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      hed: 'var(--theme-font-family-sans-serif)',
+      subhed: 'var(--theme-font-family-sans-serif)',
+      body: 'var(--theme-font-family-serif)',
+      note: 'var(--theme-font-family-sans-serif)',
+    },
+    size: {
+      xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',
+      xs: 'clamp(0.89rem, -0.08vw + 0.91rem, 0.84rem)',
+      sm: 'clamp(1rem, 0.08vw + 0.98rem, 1.05rem)',
+      base: 'clamp(1.13rem, 0.31vw + 1.06rem, 1.31rem)',
+      lg: 'clamp(1.27rem, 0.63vw + 1.14rem, 1.64rem)',
+      xl: 'clamp(1.42rem, 1.04vw + 1.21rem, 2.05rem)',
+      '2xl': 'clamp(1.6rem, 1.6vw + 1.28rem, 2.56rem)',
+      '3xl': 'clamp(1.8rem, 2.34vw + 1.33rem, 3.2rem)',
+      '4xl': 'clamp(2.03rem, 3.3vw + 1.37rem, 4.01rem)',
+      '5xl': 'clamp(2.28rem, 4.54vw + 1.37rem, 5.01rem)',
+      '6xl': 'clamp(2.57rem, 6.15vw + 1.33rem, 6.26rem)',
+    },
+  },
+};

package/dist/components/Theme/themes/dark.js

@@ -1,23 +1,15 @@
+import common from './common.js';
+
 /** @type {import('../@types/component').Theme} */
 export default {
+  ...common,
   colour: {
     background: '#2e3440',
     'text-primary': '#ffffff',
     'text-secondary': 'rgb(255 255 255 / 60%)',
-    accent: ' #ef3c2a',
+    accent: '#ef3c2a',
     'brand-logo': '#ffffff',
     'brand-rules': 'rgb(255 255 255 / 25%)',
     'brand-shadow': 'rgb(255 255 255 / 10%)',
   },
-  font: {
-    'size-base': '1.375',
-    'family-serif': 'freight-book, serif',
-    'family-sans-serif': 'Knowledge, sans-serif',
-    'family-monospace':
-      'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    'family-hed': 'var(--theme-font-family-sans-serif)',
-    'family-subhed': 'var(--theme-font-family-sans-serif)',
-    'family-body': 'var(--theme-font-family-serif)',
-    'family-note': 'var(--theme-font-family-sans-serif)',
-  },
 };

package/dist/components/Theme/themes/light.js

@@ -1,4 +1,8 @@
+import common from './common.js';
+
+/** @type {import('../@types/component').Theme} */
 export default {
+  ...common,
   colour: {
     background: '#ffffff',
     'text-primary': '#404040',
@@ -8,15 +12,4 @@ export default {
     'brand-rules': '#d0d0d0',
     'brand-shadow': 'rgb(64 64 64 / 80%)',
   },
-  font: {
-    'size-base': '1.375',
-    'family-serif': 'freight-book, serif',
-    'family-sans-serif': 'Knowledge, sans-serif',
-    'family-monospace':
-      'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    'family-hed': 'var(--theme-font-family-sans-serif)',
-    'family-subhed': 'var(--theme-font-family-sans-serif)',
-    'family-body': 'var(--theme-font-family-serif)',
-    'family-note': 'var(--theme-font-family-sans-serif)',
-  },
 };

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -2,7 +2,8 @@
 <script>/** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /**
  * Make the header stick when user scrolls.
  */
@@ -29,7 +30,7 @@ import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svel
 <header
   id="{id}"
   class="{cls}"
-  class:sticky
+  class:sticky="{sticky}"
   style:background="{background}"
   style:border-bottom="{borderBottom}"
 >

package/dist/components/Video/Video.svelte

@@ -104,7 +104,7 @@ if (ariaHidden && !ariaDescription) {
   on:touchstart="{setInteractedWithDom}"
 />
 
-<Block width="{width}" cls="video-container">
+<Block width="{width}" class="video-container">
   <div
     on:mouseover="{() => {
       interactiveControlsOpacity = controlsOpacity;
@@ -128,13 +128,13 @@ if (ariaHidden && !ariaDescription) {
         <!-- Video element with Intersection Observer -->
         <IntersectionObserver
           element="{element}"
-          bind:intersecting
+          bind:intersecting="{intersecting}"
           threshold="{playVideoThreshold}"
           once="{false}"
         >
           <div
             bind:this="{element}"
-            class="video-wrapper"
+            class="video-wrapper relative"
             aria-hidden="{ariaHidden}"
             bind:clientWidth="{widthVideoContainer}"
             bind:clientHeight="{heightVideoContainer}"
@@ -158,29 +158,28 @@ if (ariaHidden && !ariaDescription) {
                 />
               {:else}
                 <button
+                  class="border-0 m-0 p-0 bg-transparent absolute"
                   on:click="{() => {
                     paused === true ? (paused = false) : (paused = true);
                   }}"
-                  style="position: absolute; top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
+                  style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
                 ></button>
               {/if}
             {/if}
             <video
               bind:this="{videoElement}"
               src="{src}"
+              class="pointer-events-none relative"
               width="100%"
               muted="{muteVideo}"
               playsinline
               preload="{preloadVideo}"
               loop="{loopVideo}"
               bind:currentTime="{time}"
-              bind:duration
-              bind:paused
+              bind:duration="{duration}"
+              bind:paused="{paused}"
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
-              style="{showControls
-                ? 'position: relative'
-                : 'position: relative'}"
             >
               <track kind="captions" />
             </video>
@@ -189,7 +188,7 @@ if (ariaHidden && !ariaDescription) {
       {:else}
         <!-- Video element without Intersection observer -->
         <div
-          class="video-wrapper"
+          class="video-wrapper relative"
           aria-hidden="{ariaHidden}"
           bind:clientWidth="{widthVideoContainer}"
           bind:clientHeight="{heightVideoContainer}"
@@ -211,69 +210,37 @@ if (ariaHidden && !ariaDescription) {
               />
             {:else}
               <button
+                class="border-0 m-0 p-0 bg-transparent absolute"
                 on:click="{() => {
                   paused === true ? (paused = false) : (paused = true);
                 }}"
-                style="position: absolute; top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
+                style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
               ></button>
             {/if}
           {/if}
           <video
             bind:this="{videoElement}"
             src="{src}"
+            class="pointer-events-none relative"
             width="100%"
             muted="{muteVideo}"
             playsinline
             preload="{preloadVideo}"
             loop="{loopVideo}"
             bind:currentTime="{time}"
-            bind:duration
-            bind:paused
+            bind:duration="{duration}"
+            bind:paused="{paused}"
             autoplay
             bind:clientWidth="{widthVideo}"
             bind:clientHeight="{heightVideo}"
-            style="{showControls ? 'position: relative' : 'position: relative'}"
           >
             <track kind="captions" />
           </video>
         </div>
       {/if}
       {#if caption}
-        <div class="caption">{caption}</div>
+        <div class="caption text-secondary text-xs">{caption}</div>
       {/if}
     {/if}
   </div>
 </Block>
-
-<style>.video-wrapper {
-  position: relative;
-}
-.video-wrapper video {
-  pointer-events: none;
-}
-
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-div.caption {
-  font-size: 0.8rem;
-  color: var(--theme-colour-text-secondary, #666666);
-}
-
-button {
-  border: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-}</style>

package/dist/scss/_mixins.scss

@@ -1,6 +1,6 @@
-@import 'mixins/block';
-@import 'mixins/body-text';
-@import 'fonts/mixins';
-@import 'mixins/graphic';
-@import 'mixins/note-text';
-@import 'mixins/visually-hidden';
+@forward 'mixins/block';
+@forward 'tokens/accessibility/mixins/main';
+@forward 'tokens/backgrounds/mixins/main';
+@forward 'tokens/spacers/mixins/main';
+@forward 'tokens/text/mixins/main';
+@forward 'tokens/variables/main';

package/dist/scss/colours/_main.scss

@@ -0,0 +1,3 @@
+// Palettes included by default
+@forward 'primary/grey';
+@forward 'thematic/tr';

package/dist/scss/colours/primary/_amber.scss

@@ -0,0 +1,13 @@
+:root {
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
+}

package/dist/scss/colours/primary/_blue.scss

@@ -0,0 +1,13 @@
+:root {
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  --blue-950: #172554;
+}

package/dist/scss/colours/primary/_cyan.scss

@@ -0,0 +1,13 @@
+:root {
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --cyan-900: #164e63;
+  --cyan-950: #083344;
+}

package/dist/scss/colours/primary/_emerald.scss

@@ -0,0 +1,13 @@
+:root {
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d1fae5;
+  --emerald-200: #a7f3d0;
+  --emerald-300: #6ee7b7;
+  --emerald-400: #34d399;
+  --emerald-500: #10b981;
+  --emerald-600: #059669;
+  --emerald-700: #047857;
+  --emerald-800: #065f46;
+  --emerald-900: #064e3b;
+  --emerald-950: #022c22;
+}

package/dist/scss/colours/primary/_fuchsia.scss

@@ -0,0 +1,13 @@
+:root {
+  --fuchsia-50: #fdf4ff;
+  --fuchsia-100: #fae8ff;
+  --fuchsia-200: #f5d0fe;
+  --fuchsia-300: #f0abfc;
+  --fuchsia-400: #e879f9;
+  --fuchsia-500: #d946ef;
+  --fuchsia-600: #c026d3;
+  --fuchsia-700: #a21caf;
+  --fuchsia-800: #86198f;
+  --fuchsia-900: #701a75;
+  --fuchsia-950: #4a044e;
+}

package/dist/scss/colours/primary/_green.scss

@@ -0,0 +1,13 @@
+:root {
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #bbf7d0;
+  --green-300: #86efac;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #15803d;
+  --green-800: #166534;
+  --green-900: #14532d;
+  --green-950: #052e16;
+}

package/dist/scss/colours/primary/_grey.scss

@@ -0,0 +1,13 @@
+:root {
+  --grey-50: #f9fafb;
+  --grey-100: #f3f4f6;
+  --grey-200: #e5e7eb;
+  --grey-300: #d1d5db;
+  --grey-400: #9ca3af;
+  --grey-500: #6b7280;
+  --grey-600: #4b5563;
+  --grey-700: #374151;
+  --grey-800: #1f2937;
+  --grey-900: #111827;
+  --grey-950: #030712;
+}

package/dist/scss/colours/primary/_indigo.scss

@@ -0,0 +1,13 @@
+:root {
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --indigo-900: #312e81;
+  --indigo-950: #1e1b4b;
+}

package/dist/scss/colours/primary/_lime.scss

@@ -0,0 +1,13 @@
+:root {
+  --lime-50: #f7fee7;
+  --lime-100: #ecfccb;
+  --lime-200: #d9f99d;
+  --lime-300: #bef264;
+  --lime-400: #a3e635;
+  --lime-500: #84cc16;
+  --lime-600: #65a30d;
+  --lime-700: #4d7c0f;
+  --lime-800: #3f6212;
+  --lime-900: #365314;
+  --lime-950: #1a2e05;
+}

package/dist/scss/colours/primary/_neutral.scss

@@ -0,0 +1,13 @@
+:root {
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-300: #d4d4d4;
+  --neutral-400: #a3a3a3;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0a0a0a;
+}

package/dist/scss/colours/primary/_orange.scss

@@ -0,0 +1,13 @@
+:root {
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --orange-900: #7c2d12;
+  --orange-950: #431407;
+}

package/dist/scss/colours/primary/_pink.scss

@@ -0,0 +1,13 @@
+:root {
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #be185d;
+  --pink-800: #9d174d;
+  --pink-900: #831843;
+  --pink-950: #500724;
+}

package/dist/scss/colours/primary/_purple.scss

@@ -0,0 +1,13 @@
+:root {
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-200: #e9d5ff;
+  --purple-300: #d8b4fe;
+  --purple-400: #c084fc;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --purple-700: #7e22ce;
+  --purple-800: #6b21a8;
+  --purple-900: #581c87;
+  --purple-950: #3b0764;
+}

package/dist/scss/colours/primary/_red.scss

@@ -0,0 +1,13 @@
+:root {
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+  --red-950: #450a0a;
+}

package/dist/scss/colours/primary/_rose.scss

@@ -0,0 +1,13 @@
+:root {
+  --rose-50: #fff1f2;
+  --rose-100: #ffe4e6;
+  --rose-200: #fecdd3;
+  --rose-300: #fda4af;
+  --rose-400: #fb7185;
+  --rose-500: #f43f5e;
+  --rose-600: #e11d48;
+  --rose-700: #be123c;
+  --rose-800: #9f1239;
+  --rose-900: #881337;
+  --rose-950: #4c0519;
+}

package/dist/scss/colours/primary/_sky.scss

@@ -0,0 +1,13 @@
+:root {
+  --sky-50: #f0f9ff;
+  --sky-100: #e0f2fe;
+  --sky-200: #bae6fd;
+  --sky-300: #7dd3fc;
+  --sky-400: #38bdf8;
+  --sky-500: #0ea5e9;
+  --sky-600: #0284c7;
+  --sky-700: #0369a1;
+  --sky-800: #075985;
+  --sky-900: #0c4a6e;
+  --sky-950: #082f49;
+}

package/dist/scss/colours/primary/_slate.scss

@@ -0,0 +1,13 @@
+:root {
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --slate-950: #020617;
+}

package/dist/scss/colours/primary/_stone.scss

@@ -0,0 +1,13 @@
+:root {
+  --stone-50: #fafaf9;
+  --stone-100: #f5f5f4;
+  --stone-200: #e7e5e4;
+  --stone-300: #d6d3d1;
+  --stone-400: #a8a29e;
+  --stone-500: #78716c;
+  --stone-600: #57534e;
+  --stone-700: #44403c;
+  --stone-800: #292524;
+  --stone-900: #1c1917;
+  --stone-950: #0c0a09;
+}