@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/sr/2018/variables/_typography.scss

@@ -0,0 +1,106 @@
+// Fonts
+
+// Fonts
+$font-stack: helvetica, arial, sans-serif;
+$montserrat: "Montserrat", Helvetica, Arial, sans-serif;
+
+//SR20 fonts
+$font-black--sr18: "Founders-GroteskXCondensed-Bold", $font-stack;
+$font-bold--sr18: "Founders-Grotesk-Semibold", $font-stack;
+$font-regular--sr18: "Founders-Grotesk-Regular", $font-stack;
+
+/* family=Montserrat:300,500,700,900
+300 light
+500 regular and medium, body-font
+700 bold
+900 black */
+
+// Keep base font variables otherwise all components will need to be overriden with the new variables
+$font-black-oblique: $font-black--sr18;
+$font-black: $font-black--sr18;
+$font-bold-oblique: $font-bold--sr18;
+$font-bold: $font-bold--sr18;
+$font-medium-oblique: $font-bold--sr18;
+$font-medium: $font-bold--sr18;
+$font-regular-oblique: $font-regular--sr18;
+$font-regular: $font-regular--sr18;
+$font-light-oblique: $font-regular--sr18;
+$font-light: $font-regular--sr18;
+$body-font:$font-regular--sr18;
+
+// breakpoint: (font-size, line-height)
+// $h1-black-font-size: (
+//   null: (40px, 36px),
+//   $screen-md: (64px, 54px),
+//   $screen-lg: (70px, 60px)
+// );
+$h1-large-font-size: (
+  null: (65px, 49px),
+  $screen-md: (132px, 99px),
+  $screen-lg: (167px, 125px)
+);
+$h1-font-size: (
+  null: (58px, 43px),
+  $screen-md: (92px, 69px),
+  $screen-lg: (117px, 88px)
+);
+$h1-small-font-size: (
+  null: (40px, 33px),
+  $screen-md: (82px, 65px),
+  $screen-lg: (82px, 65px)
+);
+$h2-font-size: (
+  null: (28px, 31px),
+  $screen-md: (32px, 35px),
+  $screen-lg: (66px, 60px)
+);
+$h3-font-size: (
+  null: (23px, 25px),
+  $screen-md: (25px, 28px),
+  $screen-lg: (38px, 41px)
+);
+$h4-font-size: (
+  null: (18px, 20px),
+  $screen-md: (20px, 22px),
+  $screen-lg: (23px, 25px)
+);
+$h5-font-size: (
+  null: (16px, 17px),
+  $screen-md: (16px, 17px),
+  $screen-lg: (18px, 20px)
+);
+$p-xxlarge-font-size: (
+  null: (32px, 42px),
+  $screen-md: (36px, 47px),
+  $screen-lg: (36px, 47px)
+);
+$p-xlarge-font-size: (
+  null: (25px, 33px),
+  $screen-md: (28px, 37px),
+  $screen-lg: (28px, 37px)
+);
+$p-large-font-size: (
+  null: (23px, 29px),
+  $screen-md: (23px, 29px),
+  $screen-lg: (23px, 29px)
+);
+$p-font-size: (
+  null: (20px, 26px),
+  $screen-md: (20px, 26px),
+  $screen-lg: (20px, 26px)
+);
+$p-small-font-size: (
+  null: (18px, 23px),
+  $screen-md: (18px, 23px),
+  $screen-lg: (18px, 23px)
+);
+$p-xsmall-font-size: (
+  null: (16px, 21px),
+  $screen-md: (16px, 21px),
+  $screen-lg: (16px, 21px)
+);
+$p-xxsmall-font-size: (
+  null: (14px, 18px),
+  $screen-md: (14px, 18px),
+  $screen-lg: (14px, 18px)
+);

package/src/sass/themes/sr/2018/variables/colour.twig

@@ -0,0 +1,58 @@
+<h3>Primary palette</h3>
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-deep-violet" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-deep-violet <br><br><br></p>
+  <p>#2c0230</p>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-red" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-red <br><br><br></p>
+  <p>#e52530</p>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-dark-blue" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-dark-blue <br><br><br></p>
+  <p>#3a4972</p>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-white" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-white <br><br><br></p>
+  <p>#ffffff</p>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-yellow" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-yellow <br><br><br></p>
+  <p>#FFE400</p>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-green" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-green <br><br><br></p>
+  <p>#4ecd57</p>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-cyan-blue" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-cyan-blue <br><br><br></p>
+  <p>#22CFD8</p>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-light-grey" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-light-grey <br><br><br></p>
+  <p>#f4f2f4</p>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+  <div class="bg--SR20-purple" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
+  <p><br/>$colour-SR20-purple <br><br><br></p>
+  <p>#7F58A5</p>
+</div>