Use the SCSS as given Below
//**Paste the following code into the Sass file for the page that you would like to display the Style Guide on**//
//Color classes for style table
.sc-color-primary-cell {
background-color: $sc-color-primary;
text-align: center;
}
.sc-color-secondary-cell {
background-color: $sc-color-secondary;
text-align: center;
}
.sc-neutral-shade-cell {
background-color: $sc-neutral-shade;
text-align: center;
}
.sc-neutral-shade-700-cell {
background-color: $sc-neutral-shade-700;
text-align: center;
}
.sc-neutral-shade-500-cell {
background-color: $sc-neutral-shade-500;
text-align: center;
}
.sc-neutral-shade-300-cell {
background-color: $sc-neutral-shade-300;
text-align: center;
}
.sc-neutral-shade-0-cell {
background-color: $sc-neutral-shade-0;
text-align: center;
}
.sc-color-theme-cell {
background-color: $sc-color-theme;
text-align: center;
}
.sc-color-theme-900-cell {
background-color: $sc-color-theme-900;
text-align: center;
}
.sc-color-theme-700-cell {
background-color: $sc-color-theme-700;
text-align: center;
}
.sc-color-theme-500-cell {
background-color: $sc-color-theme-500;
text-align: center;
}
.sc-color-theme-300-cell {
background-color: $sc-color-theme-300;
text-align: center;
}
.sc-color-theme-100-cell {
background-color: $sc-color-theme-100;
text-align: center;
}
.sc-color-theme-border-cell {
background-color: $sc-color-theme-border;
text-align: center;
}
.sc-color-theme-border-light-cell {
background-color: $sc-color-theme-border-light;
text-align: center;
}
.sc-color-theme-background-cell {
background-color: $sc-color-theme-background;
text-align: center;
}
.sc-color-link-cell {
background-color: $sc-color-link;
text-align: center;
}
.sc-color-link-hover-cell {
background-color: $sc-color-link-hover;
text-align: center;
}
.sc-color-link-active-cell {
background-color: $sc-color-link-active;
text-align: center;
}
.sc-color-copy-dark-cell {
background-color: $sc-color-copy-dark;
text-align: center;
}
.sc-color-copy-cell {
background-color: $sc-color-copy;
text-align: center;
}
.sc-color-copy-light-cell {
background-color: $sc-color-copy-light;
text-align: center;
}
.sc-color-custom1-cell {
background-color: white;
text-align: center;
}
.sc-color-custom2-cell {
background-color: white;
text-align: center;
}
//Typography classes for style table
.sc-font-family-font-size-base-cell {
font-family: $sc-font-family;
font-size:$sc-font-size-base;
text-align: center;
}
.sc-font-family-font-size-xxs-cell {
font-family: $sc-font-family;
font-size:$sc-font-size-xxs;
text-align: center;
}
.sc-font-family-font-size-xs-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-xs;
text-align: center;
}
.sc-font-family-font-size-s-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-s;
text-align: center;
}
.sc-font-family-font-size-m-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-m;
text-align: center;
}
.sc-font-family-font-size-l-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-l;
text-align: center;
}
.sc-font-family-font-size-xl-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-xl;
text-align: center;
}
.sc-font-family-font-size-xxl-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-xxl;
text-align: center;
}
.sc-font-family-font-size-xxxl-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-xxxl;
text-align: center;
}
.sc-font-weight-light-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-l;
font-weight: $sc-font-weight-light;
text-align: center;
}
.sc-font-weight-normal-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-l;
font-weight: $sc-font-weight-normal;
text-align: center;
}
.sc-font-weight-semibold-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-l;
font-weight: $sc-font-weight-semibold;
text-align: center;
}
.sc-font-weight-bold-cell {
font-family: $sc-font-family;
font-size: $sc-font-size-l;
font-weight: $sc-font-weight-bold;
text-align: center;
}
Use the template as
<!-- Paste the following code into the HTML file for the page that you would like to display the Style Guide on -->
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 1500px">
<colgroup>
<col style="width: 500px">
<col style="width: 500px">
<col style="width: 500px">
</colgroup>
<tbody>
<tr>
<td style="text-align:center">Colors</td>
<td style="text-align:center">Buttons</td>
<td style="text-align:center">Typography</td>
</tr>
<tr>
<td class="sc-color-primary-cell">$sc-color-primary</td>
<td class="tg-0pky"><button class="button-small button-primary">small primary</button></td>
<td><div class="sc-font-family-font-size-base-cell">Base</div></td>
</tr>
<tr>
<td class="sc-color-secondary-cell">$sc-color-secondary</td>
<td class="tg-0pky"><button class="button-small button-secondary">small secondary</button></td>
<td><div class="sc-font-family-font-size-xxs-cell">Extra Extra Small</div></td>
</tr>
<tr>
<td class="sc-neutral-shade-cell">$sc-neutral-shade</td>
<td class="tg-0pky"><button class="button-small button-tertiary">small tertiary</button></td>
<td><div class="sc-font-family-font-size-xs-cell">Extra Small</div></td>
</tr>
<tr>
<td class="sc-neutral-shade-700-cell">$sc-neutral-shade-700</td>
<td class="tg-0pky"><button class="button-medium button-primary">medium primary</button></td>
<td><div class="sc-font-family-font-size-s-cell">Small</div></td>
</tr>
<tr>
<td class="sc-neutral-shade-500-cell">$sc-neutral-shade-500</td>
<td class="tg-0pky"><button class="button-medium button-secondary">medium secondary</button></td>
<td><div class="sc-font-family-font-size-m-cell">Medium</div></td>
</tr>
<tr>
<td class="sc-neutral-shade-300-cell">$sc-neutral-shade-300</td>
<td class="tg-0pky"><button class="button-medium button-tertiary">medium tertiary</button></td>
<td><div class="sc-font-family-font-size-l-cell">Large</div></td>
</tr>
<tr>
<td class="sc-neutral-shade-0-cell">$sc-neutral-shade-0</td>
<td class="tg-0pky"><button class="button-large button-primary">large primary</button></td>
<td><div class="sc-font-family-font-size-xl-cell">Extra Large</div></td>
</tr>
<tr>
<td class="sc-color-theme-cell">$sc-color-theme</td>
<td class="tg-0pky"><button class="button-large button-secondary">large secondary</button></td>
<td><div class="sc-font-family-font-size-xxl-cell">Extra Extra Large</div></td>
</tr>
<tr>
<td class="sc-color-theme-900-cell">$sc-color-theme-900</td>
<td class="tg-0pky"><button class="button-large button-tertiary">large tertiary</button></td>
<td><div class="sc-font-family-font-size-xxxl-cell">Extra Extra Extra Large</div></td>
</tr>
<tr>
<td class="sc-color-theme-700-cell">$sc-color-theme-700</td>
<td></td>
<td><div class="sc-font-weight-light-cell">Light Weight</div></td>
</tr>
<tr>
<td class="sc-color-theme-500-cell">$sc-color-theme-500</td>
<td></td>
<td><div class="sc-font-weight-normal-cell">Normal Weight</div></td>
</tr>
<tr>
<td class="sc-color-theme-300-cell">$sc-color-theme-300</td>
<td></td>
<td><div class="sc-font-weight-semibold-cell">Semibold Weight</div></td>
</tr>
<tr>
<td class="sc-color-theme-100-cell">$sc-color-theme-100</td>
<td></td>
<td><div class="sc-font-weight-bold-cell">Bold Weight</div></td>
</tr>
<tr>
<td class="sc-color-theme-border-cell">$sc-color-theme-border</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-theme-border-light-cell">$sc-color-theme-border-light</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-theme-background-cell">$sc-color-theme-background</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-link-cell">$sc-color-link</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-link-hover-cell">$sc-color-link-hover</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-link-active-cell">$sc-color-link-active</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-copy-dark-cell">$sc-color-copy-dark</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-copy-cell">$sc-color-copy</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-copy-light-cell">$sc-color-copy-light</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-custom1-cell">Custom Color 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="sc-color-custom2-cell">Custom Color 2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Colors set at Modules_BaseSassStyles_variables_colors.scss</td>
<td>Buttons set at Modules_BaseSassStyles_atoms_buttons.scss</td>
<td>Typography set at Modules_BaseSassStyles_atoms_typography.scss</td>
</tr>
</tbody>
</table>
This will show as a table so that we can pick the variables we need
