@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/variables/_lists.scss

@@ -0,0 +1,66 @@
+/**
+ * Parameters
+ * $inlinelink[1] = name
+ * $inlinelink[2] = border-color
+ * $inlinelink[3] = border-color for hover & focus
+ */
+$linkList: (
+  ("red" $colour-red $colour-purple),
+  ("blue" $colour-blue $colour-yellow), 
+  ("yellow" $colour-yellow $colour-blue),
+  ("green" $colour-green $colour-teal), 
+  ("teal" $colour-teal $colour-pink), 
+  ("royal-blue" $colour-royal-blue $colour-red), 
+  ("purple" $colour-purple $colour-royal-blue),
+  ("pink" $colour-pink $colour-green),
+  ("white" $colour-white $colour-black),
+  ("jasper-grey" $colour-jasper-grey $colour-red),
+  ("gainsboro-grey" $colour-gainsboro-grey $colour-red),
+  ("light-grey" $colour-light-grey $colour-red),
+  ("smoke-grey" $colour-smoke-grey $colour-red)
+);
+
+/**
+ * Parameters
+ * $color[1] = name
+ * $color[2] = background colour/font colour
+ */
+$colorList: (
+  ("red" $colour-red),
+  ("blue" $colour-blue), 
+  ("yellow" $colour-yellow),
+  ("green" $colour-green), 
+  ("teal" $colour-teal), 
+  ("royal-blue" $colour-royal-blue), 
+  ("purple" $colour-purple),
+  ("dark-purple" $colour-dark-purple),
+  ("pink" $colour-pink),
+  ("black" $colour-black),
+  ("dark-blue" $colour-dark-blue),
+  ("white" $colour-white),
+  ("jasper-grey" $colour-jasper-grey),
+  ("gainsboro-grey" $colour-gainsboro-grey),
+  ("light-grey" $colour-light-grey),
+  ("smoke-grey" $colour-smoke-grey)
+);
+
+/**
+ * Parameters
+ * $button[1] = name
+ * $button[2] = background-color
+ * $button[3] = background-color for hover & focus
+ * $button[4] = text color
+ */
+$buttonList: (
+  ("black-ghost" transparent $colour-dark-blue $colour-dark-blue),
+  ("white-ghost" transparent $colour-white $colour-white),
+  ("red" $colour-red $colour-purple $colour-white),
+  ("blue" $colour-blue $colour-yellow $colour-black), 
+  ("yellow" $colour-yellow $colour-blue $colour-black),
+  ("green" $colour-green $colour-teal $colour-black), 
+  ("teal" $colour-teal $colour-pink $colour-black), 
+  ("royal-blue" $colour-royal-blue $colour-red $colour-white), 
+  ("purple" $colour-purple $colour-royal-blue $colour-white),
+  ("pink" $colour-pink $colour-green $colour-black),
+  ("white" $colour-white $colour-black $colour-black)
+);

package/src/sass/base/variables/_theme.scss

@@ -0,0 +1,3 @@
+// General theme variables
+
+$image-path: "/images/" !default;

package/src/sass/base/variables/_typography.scss

@@ -0,0 +1,88 @@
+// Fonts
+
+$font-stack: helvetica, arial, sans-serif;
+
+$font-black-oblique: "GT-Walsheim-Black-Oblique", $font-stack;
+$font-black: "GT-Walsheim-Black", $font-stack;
+$font-bold-oblique: "GT-Walsheim-Black-Bold-Oblique", $font-stack;
+$font-bold: "GT-Walsheim-Bold", $font-stack;
+$font-medium-oblique: "GT-Walsheim-Medium-Oblique", $font-stack;
+$font-medium: "GT-Walsheim-Medium", $font-stack;
+$font-regular-oblique: "GT-Walsheim-Regular-Oblique", $font-stack;
+$font-regular: "GT-Walsheim-Regular", $font-stack;
+$font-light-oblique: "GT-Walsheim-Light-Oblique", $font-stack;
+$font-light: "GT-Walsheim-Light", $font-stack;
+$body-font: "GT-Walsheim-Regular", $font-stack;
+
+// breakpoint: (font-size, line-height)
+$h1-xlarge-font-size: (
+  null: (36px, 38px),
+  $screen-md: (64px, 64px),
+  $screen-lg: (90px, 90px)
+);
+
+$h1-blackshadow-font-size: (
+  null: (40px, 40px),
+  $screen-md: (64px, 64px),
+  $screen-lg: (70px, 70px)
+);
+
+$h1-black-font-size: (
+  null: (40px, 36px),
+  $screen-md: (64px, 54px),
+  $screen-lg: (70px, 60px)
+);
+
+$h1-font-size: (
+  null: (40px, 40px),
+  $screen-md: (64px, 64px),
+  $screen-lg: (70px, 70px)
+);
+
+$h2-font-size: (
+  null: (32px, 34px),
+  $screen-md: (34px, 38px),
+  $screen-lg: (40px, 44px)
+);
+
+$h3-font-size: (
+  null: (28px, 30px),
+  $screen-md: (30px, 34px),
+  $screen-lg: (34px, 38px)
+);
+
+$h4-font-size: (
+  null: (24px, 26px),
+  $screen-md: (26px, 28px),
+  $screen-lg: (30px, 32px)
+);
+
+$p-xlarge-font-size: (
+  null: (18px, 24px),
+  $screen-md: (22px, 28px),
+  $screen-lg: (24px, 30px)
+);
+
+$p-large-font-size: (
+  null: (18px, 24px),
+  $screen-md: (20px, 26px),
+  $screen-lg: (20px, 26px)
+);
+
+$p-font-size: (
+  null: (16px, 22px),
+  $screen-md: (18px, 24px),
+  $screen-lg: (18px, 24px)
+);
+
+$p-small-font-size: (
+  null: (14px, 18px),
+  $screen-md: (16px, 20px),
+  $screen-lg: (16px, 20px)
+);
+
+$p-xsmall-font-size: (
+  null: (12px, 16px),
+  $screen-md: (14px, 18px),
+  $screen-lg: (14px, 18px)
+);

package/src/sass/base/variables/colour.twig

@@ -0,0 +1,82 @@
+<h3>Primary palette</h3>
+<p>Across the site we use</p>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--red" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-red</p>
+	<p>#f04257</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
+	<p><br/>$colour-white</p>
+	<p>#fff</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--purple" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-purple</p>
+	<p>#7d2ca9</p>
+</div>
+<h3>Secondary palette</h3>
+<p>Across the site we use</p>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--blue" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-blue</p>
+	<p>#22d2dc</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--yellow" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-yellow</p>
+	<p>#fbef51</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--green" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-green</p>
+	<p>#b2e55e</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--teal"  style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-teal</p>
+	<p>#00beca</p>
+</div>
+<br/>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--royal-blue" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-royal-blue</p>
+	<p>#0565d1</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--pink" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-pink</p>
+	<p>#fc9eb9</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-blue" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-dark-blue</p>
+	<p>#061d38</p>
+</div>
+<h3>Greyscale palette</h3>
+<p>Across the site we use</p>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--black" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-black</p>
+	<p>#030e1a</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--jasper-grey" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-jasper-grey</p>
+	<p>#666</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--gainsboro-grey" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-gainsboro-grey</p>
+	<p>#c7c7c7</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-grey" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-light-grey</p>
+	<p>#e6e3dc</p>
+</div>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--smoke-grey" style="height: 100px; display:block; width: 100px;"></div>
+	<p><br/>$colour-smoke-grey</p>
+	<p>#f0f0f0</p>
+</div>