Skip to content

Commit

Permalink
#61 updates style guide section description documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@JulesKhong
JulesKhong committed Mar 9, 2024
1 parent 5b7eb87 commit 2d14a08
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 30 deletions.
16 changes: 8 additions & 8 deletions views/organisms/styleguide-sections/_elements/colorways.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
}
%}
{#Pre-renders Tailwind classes so they work before they're in use.#}
<span class="hidden ts-bg-neutral-500 ts-text-md-contrast"></span>
<span class="hidden ts-bg-neutral-500 mt-lg ts-text-md-contrast"></span>

<h3 class="h4 mb-md" id="fontmodifiers">Dynamic color palettes</h3>
<h3 class="body-sm">Text colors change based on the bg color class</h3>
<p class="body-sm mt-zero">tokens/src/color.tokens.json</p>
<p class="body-sm mt-zero">css/common/colors.css</p>
<p class="utility-xs text-high-contrast mt-sm mb-md">In twig: .ts-text-high-contrast in CSS: var
<h3 class="h4 mb-md" id="fontmodifiers">Colorways</h3>
<h3 class="body-sm">Colorways are color relationships between background colors, text, buttons and other elements.
Using a block with a different colorway can help break up a longer page or change the tone.</h3>
<p class="utility-sm mt-sm"> Development notes: defined in tokens/src/color.tokens.json, and css/common/colors.css</p>
<p class="utility-sm text-high-contrast mb-md">Variable names: .ts-text-high-contrast in CSS: var
(--color-high-contrast) </p>
{% for key, bgcolor in bgColors %}
<h3 class="h5 mt-md">{{ key }}</h3>
<div class="grid grid-cols-4 gap-base">
<h3 class="h5 mt-md mb-sm">{{ key }}</h3>
<div class="grid grid-cols-4 gap-base mb-md">
{% for color in textColors %}
<div class="{{ bgcolor }} col-span-1 inline-block">
<p class="ts-text-{{ color }} font-bold utility p-base">{{ color }}</p>
Expand Down
24 changes: 13 additions & 11 deletions views/organisms/styleguide-sections/_elements/grids.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,33 @@

<div class="">
<h2 class="h3 mb-xs">Grids</h2>
<p class="body-sm m-zero">Defined in tailwind-grids.json. Use "xl:container p-site" for site container and padding.</p>
<p class="utility-sm m-zero">Developer notes: Defined in tailwind-grids.json. Use "xl:container p-site" for site
container and padding
.</p>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-1</h3>
<h3 class="{{ headerClasses }}">ts-grid-col-1</h3>
<div class="ts-grid-col-1">
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-2</h3>
<h3 class="{{ headerClasses }}">ts-grid-col-2</h3>
<div class="ts-grid-col-2">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-3</h3>
<h3 class="{{ headerClasses }}">ts-grid-col-3</h3>
<div class="ts-grid-col-3">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-4</h3>
<h3 class="{{ headerClasses }}">ts-grid-col-4</h3>
<div class="ts-grid-col-4">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-6</h3>
<h3 class="{{ headerClasses }}">ts-grid-col-6</h3>
<div class="ts-grid-col-6">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
Expand All @@ -39,27 +41,27 @@
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-4-8</h3>
<h3 class="{{ headerClasses }}">ts-grid-4-8</h3>
<div class="ts-grid-4-8">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-7-5</h3>
<h3 class="{{ headerClasses }}">ts-grid-7-5</h3>
<div class="ts-grid-7-5">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-8-4</h3>
<h3 class="{{ headerClasses }}">ts-grid-8-4</h3>
<div class="ts-grid-8-4">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-9-3</h3>
<h3 class="{{ headerClasses }}">ts-grid-9-3</h3>
<div class="ts-grid-9-3">
<div class="{{ gridStyle }}"></div>
<div class="{{ gridStyle }}"></div>
</div>
<h3 class="{{ headerClasses }}">Wrapped in ts-grid-center</h3>
<h3 class="{{ headerClasses }}">ts-grid-center</h3>
<div class="ts-grid-center">
<div class="{{ gridStyle }}"></div>
</div>
Expand Down
11 changes: 5 additions & 6 deletions views/organisms/styleguide-sections/atoms/buttons-&-links.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,13 @@
<span class="hidden bg-black bg-neutral-100 bg-neutral-500 bg-white btn--sm btn--md
btn--lg ts-bg-brand-1"></span>
<span class="py-xs py-2xs px-sm px-md "></span>
<p class="body-lg mt-zero">css/common/_buttons-links.css</p>
<p class="body-lg mt-zero">views/btns</p>
<p class="body-lg gray mt-sm mb-md">Buttons and links with icons are reusable components found in twig
<p class="body-sm gray mt-sm mb-md">Buttons and links with icons are reusable components found in twig
"views/btns"</p>
<hr class="mt-sm mb-sm">
Button styles
<p class="utility-xs">All button and links use an included template. <br/>
<em>See views/atoms/btns/[btn name] for templates and docs</em></p>
<p class="utility-sm">All button and links can be included in a template, or applied with "@" syntax in CSS.
<p class="utility-sm mt-zero">CSS: tokens/tailwind-btns.json</p>
<p class="utility-sm mt-zero">HTML: views/atoms/btns</p>
<hr class="mt-sm mb-sm">

{# Loops through buttons, prints them on all backgrounds at all sizes #}
{% for key, bgColor in bgColors %}
Expand Down
2 changes: 1 addition & 1 deletion views/organisms/styleguide-sections/molecules/cards.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,5 @@
{% include ("molecules/cards/example--card.html.twig") with {
size: 'event',
number_of_columns: '1',
number_of_cards: 4
number_of_cards: 2
} %}
16 changes: 12 additions & 4 deletions views/templates/pages/page-style-guide.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
{% endblock %}

{% block content %}
{% set section_title_classes = "h2 mb-xs" %}
{% set section_description_classes = "body-xl" %}
{% set section_title_classes = "h2 mb-xs ts-text-high-contrast" %}
{% set section_description_classes = "ts-text-md-contrast body-xl" %}
{% set block_title_classes = "h3 mb-xs" %}
{% set block_description_classes = "body-sm max-w-[900px] mb-sm" %}
{% set limited_message = "*Available on limited pages." %}
Expand All @@ -18,7 +18,7 @@
{# Menu#}
<div class="styleguide-nav ts-bg-white">
<div class="pt-base text-gray-dk">
<h1 class="h4 pl-sm pt-xs pb-xs">Styleguide</h1>
<h2 class="h4 pl-sm pt-xs pb-xs">Style guide</h2>
<div class="">
<ul>
{% set nav_classes = "body-base-bold bg-gray-100 block pl-sm py-xs rounded-md hover:underline
Expand Down Expand Up @@ -90,6 +90,14 @@

<div class="styleguide-menu-padding">

{# WELCOME #}
<div class="ts-bg-dk py-block xl:container p-site" id="welcome">
<h2 class="ts-text-high-contrast h1 mb-lg">Welcome to your Design System</h2>
<p class="{{ section_description_classes }}">The "Foundations" section outlines the color tokens, typography
styles, grids, and spacing rules used throughout the design system.
</p>
</div>

{# FOUNDATION #}
<div class="py-block xl:container p-site" id="elements">
<h2 class="{{ section_title_classes }}">Global Elements</h2>
Expand All @@ -99,7 +107,7 @@
</div>

{% for element in elements %}
<div class="my-block xl:container p-site" id="{{ section }}">
<div class="my-block xl:container p-site" id="{{ element }}">
{% include "/organisms/styleguide-sections/_elements/" ~ element ~ ".twig" %}
</div>
{% endfor %}
Expand Down

0 comments on commit 2d14a08

Please sign in to comment.