✨ feat(default.scss): Add flag for disabling reset styles

Spiderpig86 · Feb 24, 2022 · c6e7f1d · c6e7f1d
1 parent 27c905a
commit c6e7f1d
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 132 deletions.
diff --git a/src/base/default.scss b/src/base/default.scss
@@ -34,154 +34,158 @@
     --color-opacity: 1;
 }
 
-/* RESET */
-/* Box Sizing */
-*,
-*::before,
-*::after {
-    /* Prevent setting borders from increasing the size of an element */
-    box-sizing: border-box;
-    text-rendering: optimizeLegibility;
-    -webkit-tap-highlight-color: transparent;
-}
-
-/* Remove default margin and padding */
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin: 0;
-    padding: 0;
-}
+$generate-reset: should-generate-classes($RESET);
 
-/* Allow % styles to work on page */
-html,
-body {
-    border: none;
-    height: 100%;
-}
+@if $generate-reset {
+    /* RESET */
+    /* Box Sizing */
+    *,
+    *::before,
+    *::after {
+        /* Prevent setting borders from increasing the size of an element */
+        box-sizing: border-box;
+        text-rendering: optimizeLegibility;
+        -webkit-tap-highlight-color: transparent;
+    }
 
-/* Nunito Sans for the font */
-body {
-    letter-spacing: 0.01rem;
-    line-height: 1.8; /* Globally adjust line height */
-    font-size: 1rem;
-    font-weight: 400;
-    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
-        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    color: var(--cirrus-fg);
-}
+    /* Remove default margin and padding */
+    html,
+    body,
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        padding: 0;
+    }
 
-/* Remove bullets from unordered lists */
-ul {
-    list-style: none;
-}
+    /* Allow % styles to work on page */
+    html,
+    body {
+        border: none;
+        height: 100%;
+    }
 
-/* Setting up embedded content */
-audio,
-canvas,
-iframe,
-img,
-embed,
-object,
-svg,
-video {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
+    /* Nunito Sans for the font */
+    body {
+        letter-spacing: 0.01rem;
+        line-height: 1.8; /* Globally adjust line height */
+        font-size: 1rem;
+        font-weight: 400;
+        font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
+            sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        color: var(--cirrus-fg);
+    }
 
-iframe {
-    outline: 0;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
+    /* Remove bullets from unordered lists */
+    ul {
+        list-style: none;
+    }
 
-/* Page sections set to block */
-article,
-aside,
-figure,
-footer,
-header,
-hgroup,
-section {
-    display: block;
-}
+    /* Setting up embedded content */
+    audio,
+    canvas,
+    iframe,
+    img,
+    embed,
+    object,
+    svg,
+    video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+    }
 
-// Inputs must inherit font
-button,
-input,
-optgroup,
-select,
-textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-}
+    iframe {
+        outline: 0;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 3px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
 
-/* Base styling for labels */
-label {
-    display: inline-block;
-    margin: 0.25rem 0;
-}
+    /* Page sections set to block */
+    article,
+    aside,
+    figure,
+    footer,
+    header,
+    hgroup,
+    section {
+        display: block;
+    }
 
-/* Base styling for fieldsets */
-fieldset {
-    padding: 1rem;
+    // Inputs must inherit font
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        margin: 0;
+        font-family: inherit;
+        font-size: inherit;
+    }
 
-    legend {
-        font-weight: bold;
+    /* Base styling for labels */
+    label {
+        display: inline-block;
+        margin: 0.25rem 0;
     }
-}
 
-/* Hidden elements must not show */
-[hidden] {
-    display: none !important;
-}
+    /* Base styling for fieldsets */
+    fieldset {
+        padding: 1rem;
 
-/* Selection Color */
-::selection {
-    background-color: var(--cirrus-select-bg);
-}
+        legend {
+            font-weight: bold;
+        }
+    }
 
-/* When focusing any element */
-:focus {
-    box-shadow: var(--cirrus-focus-size) var(--cirrus-focus-color);
-    outline: none;
-}
+    /* Hidden elements must not show */
+    [hidden] {
+        display: none !important;
+    }
 
-/* Remove all animations based on preference */
-@media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-        scroll-behavior: auto;
+    /* Selection Color */
+    ::selection {
+        background-color: var(--cirrus-select-bg);
     }
 
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
+    /* When focusing any element */
+    :focus {
+        box-shadow: var(--cirrus-focus-size) var(--cirrus-focus-color);
+        outline: none;
+    }
+
+    /* Remove all animations based on preference */
+    @media (prefers-reduced-motion: reduce) {
+        html:focus-within {
+            scroll-behavior: auto;
+        }
+
+        *,
+        *::before,
+        *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+            scroll-behavior: auto !important;
+        }
     }
 }
diff --git a/src/internal/_flags.scss b/src/internal/_flags.scss
@@ -12,6 +12,7 @@ $MAX-HEIGHT: 'MAX-HEIGHT';
 $MIN-WIDTH: 'MIN-WIDTH';
 $MAX-WIDTH: 'MAX-WIDTH';
 $MARGIN-PADDING: 'MARGIN-PADDING';
+$RESET: 'RESET';
 
 // Components
 $AVATAR: 'AVATAR';