✨ Add table for CSS resets

Author: Frontendland

scripts/utilityTypes.js

@@ -1,17 +1,17 @@
 export const utilityTypes = `
-type ModalCallback = {
+export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
 }
 
-type Modal = {
+export type Modal = {
     trigger: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
 }
 
-type PopoverPosition = 'top'
+export type PopoverPosition = 'top'
     | 'top-start'
     | 'top-end'
     | 'left'
@@ -24,13 +24,13 @@ type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
-type PopoverCallback = {
+export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
     position: PopoverPosition | undefined
 }
 
-type Popover = {
+export type Popover = {
     trigger: string
     popover: string
     position?: PopoverPosition
@@ -40,7 +40,7 @@ type Popover = {
     onClose?: (args: PopoverCallback) => unknown
 }
 
-type Toast = {
+export type Toast = {
     element: string
     timeout?: number
     title?: string

src/pages/resets.astro

@@ -49,5 +49,45 @@ import Card from '@components/Card/Card.astro'
                 </figcaption>
             </figure>
         </div>
+
+        <h2 class="reset">Other ways to configure CSS</h2>
+
+        <p>You can use the following options in your <code>setup</code> mixin to further configure your CSS.</p>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>Option</th>
+                    <th>Default value</th>
+                    <th>Purpose</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><code>includeResets</code></td>
+                    <td><code>true</code></td>
+                    <td>
+                        Include reset styles for native HTML elements.
+                    </td>
+                </tr>
+                <tr>
+                    <td><code>includeUtilities</code></td>
+                    <td><code>true</code></td>
+                    <td>
+                        Adds utility classes for CSS.
+                    </td>
+                </tr>
+                <tr>
+                    <td><code>includeTooltip</code></td>
+                    <td><code>true</code></td>
+                    <td>Adds global styles for tooltips.</td>
+                </tr>
+                <tr>
+                    <td><code>includeScrollbarStyles</code></td>
+                    <td><code>true</code></td>
+                    <td>Adds global styles for scrollbars.</td>
+                </tr>
+            </tbody>
+        </table>
     </Card>
 </Layout>

src/scss/resets.scss

@@ -103,4 +103,30 @@
         @include border(0);
         @include background(primary-50);
     }
+
+    table {
+        @include size('w100%');
+        @include typography(left);
+
+        border-collapse: collapse;
+    }
+
+    thead,
+    tfoot {
+        @include typography(bold);
+    }
+
+    th,
+    td {
+        @include spacing(py-xs, px-sm);
+    }
+
+    thead,
+    tr {
+        @include border(bottom, primary-50);
+
+        &:last-child {
+            @include border(bottom, 0);
+        }
+    }
 }    

src/static/Layout.astro

@@ -91,13 +91,13 @@ const externalLinks = [
         margin-bottom: 100px;
     }
 
-    h1 {
+    h1:not(.reset) {
         margin: 100px 0 10px;
         font-size: 48px;
         text-align: center;
     }
 
-    h2 {
+    h2:not(.reset) {
         color: var(--w-color-primary-10);
         font-family: Regular;
         font-weight: 400;