@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/shop/2019/background-colours.twig

@@ -0,0 +1,100 @@
+
+<br/>
+<br/>
+
+<h3>Primary colour backgrounds</h3>
+<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--white</p>
+
+<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--red</p>
+
+<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--deep-violet</p>
+
+
+<h3>Secondary colour backgrounds</h3>
+<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--grey</p>
+
+<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--coral</p>
+
+<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--orange</p>
+
+<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--yellow</p>
+
+<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--green</p>
+
+<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--blue</p>
+
+<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--magenta</p>
+
+<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--purple</p>
+
+<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--teal</p>
+
+
+<h3>Secondary light colour backgrounds</h3>
+<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-grey</p>
+
+<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-coral</p>
+
+<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-orange</p>
+
+<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-yellow</p>
+
+<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-green</p>
+
+<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-blue</p>
+
+<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-magenta</p>
+
+<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-purple</p>
+
+<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--light-teal</p>
+
+
+<h3>Secondary dark colour backgrounds</h3>
+<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-grey</p>
+
+<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-coral</p>
+
+<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--orange</p>
+
+<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-yellow</p>
+
+<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-green</p>
+
+<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-blue</p>
+
+<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-magenta</p>
+
+<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-purple</p>
+
+<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
+<p>.bg--dark-teal</p>

package/src/sass/themes/shop/2019/base_header.twig

@@ -0,0 +1,16 @@
+<header role="banner">
+  <div class="header__top-wrapper">
+  </div>
+  <div class="header__inner-wrapper">
+
+    {# Manually adding this for Shop developers as our branding block isn't currently a PL element #}
+    <div id="block-comicrelief-branding" class="block block-system block-system-branding-block">
+      <a href="/" title="Home" rel="home" class="site-logo" tabindex="2">
+      </a>
+    </div>
+
+  	{% include directory ~ '../../../base/components/navigation/main-nav.twig' %}
+  	{% include directory ~ '../../../base/components/meta-icons/meta-icons.twig' %}
+    
+  </div>
+</header>

package/src/sass/themes/shop/2019/colour.twig

@@ -0,0 +1,162 @@
+<h3>Primary colours</h3>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--white" style="height: 100px; margin-bottom: 10px; display:block; width: 100px; border: 1px solid black;"></div>
+	<h5>white</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--deep-violet" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Deep violet</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Red</h5>
+</div>
+
+
+<h3>Secondary colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>teal</h5>
+</div>
+
+
+
+<h3>Secondary light colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light teal</h5>
+</div>
+
+
+<h3>Secondary dark colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark teal</h5>
+</div>
+

package/src/sass/themes/shop/2019/form.twig

@@ -0,0 +1,133 @@
+<form novalidate>
+	<div id="field-wrapper--standard" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--standard" for="field-input--standard" class="form__field-label required">Input required with paragraph text and hint</label>
+		<p class="form-help-text">This is support text, for example information on how long the password should be</p>
+		<input 
+			type="text" 
+			id="field-input--standard" 
+			name="standard" 
+			class="form__field form__field--text" 
+			required="required" 
+			placeholder="This is hint text" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div id="field-wrapper--standard-error" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--firstname" for="field-input--firstname" class="form__field-label required">Input with error mesaage</label>
+		<input 
+			type="text" 
+			id="field-input--standard-error" 
+			name="firstname" 
+			class="form__field form__field--text form__field--error-outline" 
+			required="" 
+			placeholder="Field completed incorrectly" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+		<div id="field-error--standard-error" class="form__field-error-container form__field-error-container--text" aria-live="assertive" role="status">
+			<span class="form-error">This is an error message</span>
+		</div>
+	</div>
+	<div id="field-wrapper--standard-optional" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-wrapper--standard-optional" for="field-input--standard" class="form__field-label">Simple input <span>(optional)</span></label>
+		<input 
+			type="text" 
+			id="field-wrapper--standard-optional" 
+			name="standard" 
+			class="form__field form__field--text error-border" 
+			placeholder="" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-1" 
+			class="form__field form__field--select"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+	</div>
+
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-2" 
+			class="form__field form__field--country form__field--error-outline"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+		</select>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail require">Long copy/Message field</label>
+        <textarea class="form__field">This is text area</textarea>
+    </div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail">Long copy/Message field</label>
+        <textarea class="form__field form__field--error-outline">This is text area</textarea>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+    </div>
+	<div class="form__row form__field--wrapper form__field-wrapper--radio">
+		<p class="form__fieldset--label"> List of radio buttons </p>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-1">Option 1</label>
+			<input type="radio" id="radio-1" name="radio-group" value="1" checked/>
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-2">Option 2</label>
+			<input type="radio" id="radio-2" name="radio-group" value="2" />
+			<span>&nbsp;</span>
+			<div class="form__fieldset form__field--wrapper form__field-additional-text">
+			 <div>
+			 	<p>Here's some additional text </p>
+			 	</div>
+			</div>
+		</div>
+	</div>
+	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
+		<p class="form__fieldset--label"> List of checkboxes </p>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-1">Option 1</label>
+			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-2">Option 2</label>
+			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
+			<span></span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__field-wrapper--checkbox form__checkbox-paragraph">
+		<p class="form__fieldset--label">Single checkbox with paragraph text (optional)</p>
+		<p>This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.</p>
+		<div class="form__checkbox--inline">
+			<label class="form__field-label" for="singlecheckbox">Option 1</label>
+			<input type="checkbox" id="singlecheckbox" name="singlecheckbox" value="1" />
+			<span></span>
+		</div>
+    </div>
+    <div class="form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background">
+        <div class="form__checkbox--inline">
+            <label class="form__field-label" for="singlecheckbox1">Single checkbox with background colour</label>
+            <input type="checkbox" id="singlecheckbox1" name="singlecheckbox1" value="2" />
+            <span></span>
+        </div>
+    </div>
+</div>
+
+</form>

package/src/sass/themes/shop/2019/shop19.scss

@@ -0,0 +1,62 @@
+// ==========================================================================
+// Core variables
+// ==========================================================================
+
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_typography.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_theme.scss";
+
+// ==========================================================================
+// Sub Theme variables
+// ==========================================================================
+
+// SR variables
+@import "../../cr/2019/variables/_colours.scss";
+@import "../../cr/2019/variables/_typography.scss";
+@import "../../cr/2019/variables/_mixins.scss";
+@import "variables/_main-nav.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+@import "../../../base/_core";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+//Or choose components one by one
+@import "../../../base/components/animations/animations";
+@import "../../../base/components/card-block/card";
+@import "../../../base/components/cards/cards";
+@import "../../../base/components/external-link/external-link";
+@import "../../../base/components/footer/footer";
+@import "../../../base/components/form/form";
+@import "../../../base/components/grid/grid";
+@import "../../../base/components/header/base-header";
+@import "../../../base/components/media/media";
+@import "../../../base/components/meta-icons/meta-icons";
+@import "../../../base/components/navigation/footer-nav";
+@import "../../../base/components/navigation/hamburger-menu-button";
+@import "../../../base/components/navigation/main-nav";
+@import "../../../base/components/promo-header/promo-header";
+@import "../../../base/components/progress-indicator/progress-indicator";
+@import "../../../base/components/social/social";
+@import "../../../base/components/table/table";
+@import "../../../base/components/tooltips/tooltips";
+@import "../../../base/components/typography/typography";
+@import "../../../base/components/partners-row/partners-row";
+@import "../../../base/components/partners-grid/partners-grid";
+@import "../../../base/components/partners/partners";
+@import "../../../base/components/just-in-time-block/_just-in-time";
+@import "../../../base/components/form/_standard-form";
+
+// ==========================================================================
+// Sub theme components overrides
+// ==========================================================================
+
+@import "_shop19-components";
+@import "_shop19-styleguide";

package/src/sass/themes/shop/2019/typography.twig

@@ -0,0 +1,128 @@
+<style>
+.breakpoint-lg, .breakpoint-md{display:none}
+.breakpoint-sm{display:inline-block}
+@media (min-width: 740px){
+  .breakpoint-md{display:inline-block}
+  .breakpoint-sm, .breakpoint-lg {display:none}
+}
+@media (min-width: 1024px){
+  .breakpoint-lg {display:inline-block}
+  .breakpoint-sm, .breakpoint-md{display:none}
+}
+</style>
+<p>Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.</p>
+
+<h1>Fonts</h1>
+<br/>
+<br/>
+<h3>Type Sizes</h3>
+<p>All type sizes and line heights come from a typographic scale, using multiples of 8.</p>
+<br/>
+<br/>
+<h3>Headings</h3>
+<p>There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>
+
+<h1 class="text--title">'Title' Header 1</h1>
+  <span class="font--red"><b>.text--title</b> (Used for headers and landing pages, noted as 'Title' H1 in the Design System)</span><br/>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 100px / line-height: 104px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 100px / line-height: 104px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 54px / line-height: 62px</span>
+<br/>
+<br/>
+<br/>
+
+<h1>Header 1</h1>
+ <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 64px / line-height: 72px</span>
+ <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 64px / line-height: 72px</span>
+ <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 42px / line-height: 48px</span>
+<br/>
+<br/>
+<br/>
+
+<h2>Header 2</h2>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 42px / line-height: 48px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 42px / line-height: 48px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 34px / line-height: 40px</span>
+<br/>
+<br/>
+<br/>
+
+<h3>Header 3</h3>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 26px / line-height: 32px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 26px / line-height: 32px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 26px / line-height: 32px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<h3>Copy, labels etc.</h3>
+
+<p>I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>Standard paragraph, p.text--body </b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 20px / line-height: 32px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 20px / line-height: 32px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<p class="text--body-small">I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>Standard paragraph, p.text--body-small </b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<p class="text--subtitle">I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Subtitle' .text--subtitle</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
+</p>
+<br/>
+<br/>
+<br/>
+
+<p class="text--subtitle-small">I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Subtitle small' .text--subtitle--small</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
+</p>
+<br/>
+<br/>
+<br/>
+
+<p class="text--label">I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Label' .text--label</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+
+<p class="text--label">I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Label' .text--label</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+
+
+<p class="text--footnote">I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Footnote' .text--footnote</b><br/></span>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+

package/src/sass/themes/shop/2019/variables/_main-nav.scss

@@ -0,0 +1,3 @@
+$sm-nav-height: 50px;
+$md-nav-height: 60px;
+$lg-nav-height: 75px;