@natachah/vanilla-frontend 0.4.1 → 1.0.1

package/docs/base/typography.md

@@ -0,0 +1,296 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Typography
+
+All website have some typographic elements, here some basic styling.
+
+```scss
+@use '@natachah/vanilla-frontend/scss/base/typography'
+```
+
+## Headings
+
+The headings use the default `<h*>` tags.
+
+<ComponentPreview>
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+```
+
+```css [css properties]
+--font-size-h*
+--heading-font-weight
+--heading-line-height
+--heading-color
+```
+
+:::
+
+## Paragraph
+
+The paragraph use the default `<h*>` tags.
+
+As each website is uniq, there is no default margin-block for the paragraph.
+
+<ComponentPreview>
+    <p>
+        Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?
+    </p>
+    <p>
+        Velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus? Lorem ipsum sit amet consectetur adipisicing elit.
+    </p>
+    <p>
+        Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero.
+    </p>
+</ComponentPreview>
+
+## Anchor
+
+Use the default `<a>` tag to create links.
+
+You can add the `aria-current` or `aria-selected` attribute to make the link with an active state.
+
+By default if there is no `href` attribute, it will render as disabled state. And if it's an external link with `target="_blank"` attribute, the anchor will have an icon for accessibility.
+
+<ComponentPreview>
+    <a href="#">Anchor</a> <a href="#" aria-current="page">Active</a> <a>Disabled</a> <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<a href="#">Anchor</a>
+<a href="#" aria-current="page">Active</a>
+<a>Disabled</a>
+<a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
+```
+
+```css [css properties]
+--anchor-decoration
+--anchor-color
+--anchor-hover-color
+--anchor-focus-color
+--anchor-active-color
+--anchor-disabled-opacity
+--anchor-outline-size
+--anchor-outline-style
+--anchor-outline-color
+--anchor-outline-offset
+
+--icon-external
+```
+
+:::
+
+## Inline
+
+<ComponentPreview>
+<div class="grid" style="--grid-columns:3">
+<p><abbr title="Abbreviation">Abbr.</abbr></p>
+<p><small>Small</small></p>
+<p><q>An inline quote</q></p>
+<p><b>Bold</b></p>
+<p><b>b</b></p>
+<p><em>Emphasis</em></p>
+<p><i>Idiomatic</i></p>
+<p><s>Strikethrough</s></p>
+<p><u>Underline</u></p>
+<p><span>Text <sub>Sub</sub></span></p>
+<p><span>Text <sup>Sup</sup></span></p>
+<p><cite>Citation</cite></p>
+<p><mark>Highlight</mark></p>
+<p><kbd>Ctrl + S</kbd></p>
+<p><code>&lt;Code&gt;</code></p>
+<p><ins>Inserted</ins></p>
+<p><del>Deleted</del></p>
+</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<p><abbr title="Abbreviation">Abbr.</abbr></p>
+<p><small>Small</small></p>
+<p><q>An inline quote</q></p>
+<p><b>Bold</b></p>
+<p><b>b</b></p>
+<p><em>Emphasis</em></p>
+<p><i>Idiomatic</i></p>
+<p><s>Strikethrough</s></p>
+<p><u>Underline</u></p>
+<p><span>Text <sub>Sub</sub></span></p>
+<p><span>Text <sup>Sup</sup></span></p>
+<p><cite>Citation</cite></p>
+<p><mark>Highlight</mark></p>
+<p><kbd>Ctrl + S</kbd></p>
+<p><code>&lt;Code&gt;</code></p>
+<p><ins>Inserted</ins></p>
+<p><del>Deleted</del></p>
+```
+
+```css [css properties]
+--mark-padding-block
+--mark-padding-inline
+--mark-background
+--kbd-padding-block
+--kbd-padding-inline
+--kbd-font-family
+--kbd-color
+--kbd-background
+--kbd-border-radius
+--code-padding-block
+--code-padding-inline
+--code-font-family
+--code-color
+--code-background
+--code-border-radius
+```
+
+:::
+
+## Blockquote
+
+The quotes use the default `<blockquote>` tags. Because the blockquote is usully design per website, their is no custom properties for them.
+
+<ComponentPreview>
+    <blockquote>
+        <p>
+            “It's only after we've lost everything that we're free to do anything.”
+        </p>
+        <footer>
+            - Chuck Palahniuk, <cite>Fight Club</cite>
+        </footer>
+    </blockquote>
+</ComponentPreview>
+
+```html
+<blockquote>
+    <p>
+        “It's only after we've lost everything that we're free to do anything.”
+    </p>
+    <footer>
+        - Chuck Palahniuk, <cite>Fight Club</cite>
+    </footer>
+</blockquote>
+```
+
+## Code
+
+Use the `<pre>` tag with a `<code>` tag inside. The design of a block of code is not the same as the inline element.
+
+<ComponentPreview>
+<pre><code><!--
+-->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
+-->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<pre><code><!--
+-->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
+-->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
+```
+
+```css [css properties]
+--pre-padding-block
+--pre-padding-inline
+--pre-font-family
+--pre-color
+--pre-background
+--pre-border-radius
+```
+
+:::
+
+## List
+
+The lists use the default `<ul>`, `<ol>` and `<dl>` tags. Because the lists are usully design per website/situation, their is not too much custom properties for them.
+
+<ComponentPreview>
+    <ul>
+        <li><p>Coffee</p></li>
+        <li><p>Milk</p></li>
+        <li><p>...</p></li>
+    </ul>
+    <ol>
+        <li><p>Make coffee</p></li>
+        <li><p>Add the milk</p></li>
+        <li><p>Drink it !</p></li>
+    </ol>
+    <dl>
+        <dt>Coffee</dt>
+        <dd>Black hot drink</dd>
+        <dt>Milk</dt>
+        <dd>White cold drink</dd>
+    </dl>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<ul>
+    <li><p>Coffee</p></li>
+    <li><p>Milk</p></li>
+    <li><p>...</p></li>
+</ul>
+
+<ol>
+    <li><p>Make coffee</p></li>
+    <li><p>Add the milk</p></li>
+    <li><p>Drink it !</p></li>
+</ol>
+
+<dl>
+    <dt>Coffee</dt>
+    <dd>Black hot drink</dd>
+    <dt>Milk</dt>
+    <dd>White cold drink</dd>
+</dl>
+```
+
+```css [css properties]
+--list-bullet
+--list-offset
+```
+
+:::
+
+## Break line
+
+Use the default `<hr>` tag render a horizontal line.
+
+<ComponentPreview>
+    <hr>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<hr>
+```
+
+```css [css properties]
+--hr-border-size
+--hr-border-style
+--hr-border-color
+```
+
+:::

package/docs/classes/badge.md

@@ -0,0 +1,146 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Badge
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/badge'
+```
+
+## Syntax
+
+The badge is using a `<span>` tag with the class `.badge`.
+
+<ComponentPreview>
+<span class="badge">Badge</span>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<span class="badge">Badge</span>
+```
+
+```css [css properties]
+--badge-color
+--badge-background
+--badge-border-size
+--badge-border-style
+--badge-border-color
+--badge-border-radius
+--badge-padding-inline
+--badge-padding-block
+--badge-font-size
+```
+
+:::
+
+## Variants
+
+The badges have multiple variations to play with.
+
+### Icon
+
+You can add an `<svg>` icon inside the button.
+
+<ComponentPreview>
+<span class="badge">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" /><path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z" /><path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" /></svg>
+    Badge
+</span>
+</ComponentPreview>
+
+```html
+<span class="badge">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" /><path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z" /><path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" /></svg>
+    Badge
+</span>
+```
+
+### Size
+
+You can adapte the size of the badges by changing their `font-size`.
+
+By default the badge have a font-size set at **.875em**.
+
+<ComponentPreview>
+<span class="badge" style="font-size: .75em">Small</span>&nbsp;
+<span class="badge">Normal</span>&nbsp;
+<span class="badge" style="font-size: var(--font-size-large)">Large</span>
+</ComponentPreview>
+
+```html
+<span class="badge" style="font-size: .75em">Small</span>
+            <span class="badge">Normal</span>
+            <span class="badge" style="font-size: var(--font-size-large)">Large</span>
+```
+
+### Outline
+
+You can create an outline variation by enable the option and adding the class `.outline`.
+
+<ComponentPreview>
+<span class="badge outline">Badge</span>
+</ComponentPreview>
+
+::: code-group
+```html
+<span class="badge outline">Badge</span>
+```
+
+```scss {2}
+@use "@natachah/vanilla-frontend/scss/components/badge" with (
+    $outline: true
+);
+```
+:::
+
+### Color
+
+You can create some color variation by including the colors classes name into the import and then by adding the class as `.{COLOR}`.
+
+<ComponentPreview>
+<span class="badge primary">Primary</span>&nbsp;
+<span class="badge outline primary">Outline</span>
+</ComponentPreview>
+
+::: code-group
+```html
+<span class="badge primary">Primary</span>
+<span class="badge outline primary">Outline</span>
+```
+
+```scss {2}
+@use "@natachah/vanilla-frontend/scss/components/badge" with (
+    $colors: ('primary'),
+    $outline: true
+);
+```
+:::
+
+### Group
+
+You can group some badges by putting them in a `<div>` with the class `.group`.
+
+<ComponentPreview>
+<div class="group">
+    <span class="badge">Badge A</span>
+    <span class="badge">Badge B</span>
+    <span class="badge">Badge C</span>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="group">
+    <span class="badge">Badge A</span>
+    <span class="badge">Badge B</span>
+    <span class="badge">Badge C</span>
+</div>
+```
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/group';
+```
+:::

package/docs/classes/breadcrumb.md

@@ -0,0 +1,54 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Breadcrumb
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/breadcrumb'
+```
+
+## Syntax
+
+To create a breadcrumb navigation, always use `<ol>` with a class `.breadcrumb` inside a `<nav>` tag.
+
+<ComponentPreview>
+<nav aria-label="Breadcrumb navigaton">
+    <ol class="breadcrumb">
+        <li><a href="#">One</a></li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+        <li aria-current="location">Four</li>
+    </ol>
+</nav>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<nav aria-label="Breadcrumb navigaton">
+    <ol class="breadcrumb">
+        <li><a href="#">One</a></li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+        <li aria-current="location">Four</li>
+    </ol>
+</nav>
+```
+
+```css [css properties]
+--breadcrumb-divider
+--breadcrumb-divider-color
+--breadcrumb-gap
+--breadcrumb-decoration
+--breadcrumb-color
+--breadcrumb-hover-color
+--breadcrumb-active-color
+--breadcrumb-disabled-opacity
+```
+
+:::
+
+::: warning
+The custom properties for the breadcrumb is overriding the default ones in the typography setting.
+:::

package/docs/classes/card.md

@@ -0,0 +1,171 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Card
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/card'
+```
+
+## Syntax
+
+The card is using a `<div>` or an `<article>` tag with the class `.card`.
+
+<ComponentPreview>
+<div class="card">Hello there !</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<div class="card">Hello there !</div>
+```
+
+```css [css properties]
+--card-color
+--card-background
+--card-border-size
+--card-border-style
+--card-border-color
+--card-border-radius
+--card-padding-inline
+--card-padding-block
+--card-divider-size
+--card-divider-style
+--card-divider-color
+```
+
+:::
+
+### Layout
+
+The card can have a `<header>` and/or `<footer>` inside to create a more complexe layout.
+
+<ComponentPreview>
+<article class="card">
+    <header>Header</header>
+    <p>Content</p>
+    <footer>Footer</footer>
+</article>
+</ComponentPreview>
+
+
+```html
+<article class="card">
+    <header>Header</header>
+    <p>Content</p>
+    <footer>Footer</footer>
+</article>
+```
+
+You also can add a `<picture>` on the top, center or bottom of a card.
+
+To make the picture full width add the class `.flush``
+
+<ComponentPreview>
+<div class="card">
+    <picture class="flush">
+        <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
+    </picture>
+    <h3>Title of the card</h3>
+    <p>Content of the card</p>
+</div>
+</ComponentPreview>
+
+
+```html
+<div class="card">
+    <picture class="flush">
+        <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
+    </picture>
+    <h3>Title of the card</h3>
+    <p>Content of the card</p>
+</div>
+```
+
+The card is compatible with the components group and list.
+
+To make them full width add the class `.flush`.
+
+<ComponentPreview>
+<div class="card" style="--card-border-color:#000">
+    <h3>Mycard</h3>
+    <p>Content of the card</p>
+    <div class="group flush">
+        <button>Button A</button>
+        <button>Button B</button>
+    </div>
+    <p>Content of the card</p>
+    <ul class="list flush">
+        <li>List D</li>
+        <li><a>List E</a></li>
+        <li><span>List F</span><button>Button</button></li>
+        <li><a href="#" role="button">List F</a></li>
+    </ul>
+</div>
+</ComponentPreview>
+
+
+```html
+<div class="card" style="--card-border-color:#000">
+    <h3>Mycard</h3>
+    <p>Content of the card</p>
+    <div class="group flush">
+        <button>Button A</button>
+        <button>Button B</button>
+    </div>
+    <p>Content of the card</p>
+    <ul class="list flush">
+        <li>List D</li>
+        <li><a>List E</a></li>
+        <li><span>List F</span><button>Button</button></li>
+        <li><a href="#" role="button">List F</a></li>
+    </ul>
+</div>
+```
+
+## Variants
+
+### Outline
+
+You can create an outline variation by enable the option and adding the class `.outline`.
+
+<ComponentPreview>
+<div class="card outline">Hello there !</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="card outline">Hello there !</div>
+```
+
+```scss {2}
+@use "@natachah/vanilla-frontend/scss/components/card" with (
+    $outline: true
+);
+```
+:::
+
+### Color
+
+You can create some color variation by including the colors classes name into the import and then by adding the class as `.{COLOR}`.
+
+<ComponentPreview>
+<div class="card primary">Hello there !</div><br>
+<div class="card outline primary">Hello there !</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="card primary">Hello there !</div><br>
+<div class="card outline primary">Hello there !</div>
+```
+
+```scss {2}
+@use "@natachah/vanilla-frontend/scss/components/card" with (
+    $colors: ('primary'),
+    $outline: true
+);
+```
+:::