@natachah/vanilla-frontend 0.0.5 → 0.1.0

package/scss/{utilities → base}/_typography.scss

@@ -4,9 +4,8 @@
 /// ------------------------------------------------------------------
 /// This file define the basic typographic elements.
 ///
-/// @group typography
+/// @group base
 /// @author Natacha Herth
-/// @since 1.0.0
 /// 
 ////
 

package/scss/base/index.scss

@@ -0,0 +1,3 @@
+@forward "./reset";
+@forward "./typography";
+@forward "./media";

package/scss/{_badge.scss → components/_badge.scss}

@@ -9,20 +9,21 @@
 /// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
 @use "sass:map";
+@use "../abstracts/default";
+@use "../abstracts/mixins" as *;
 
-$custom: (
+$customBadge: (
     background: color-mix(in srgb, transparent, var(--hover-color) var(--hover-percent)),
     padding-block: .25em,
     padding-inline: .375em
 );
 
 // Change default properties
-$properties: map.merge($default-item-properties, $custom);
+$customBadgeProperties: map.merge(default.$item-properties, $customBadge);
 
 .badge {
 
@@ -32,6 +33,6 @@ $properties: map.merge($default-item-properties, $custom);
     line-height: 1;
 
     // Define as an item
-    @include as-item('badge', (), $properties);
+    @include as-item('badge', (), $customBadgeProperties);
 
 }

package/scss/{_breadcrumb.scss → components/_breadcrumb.scss}

@@ -8,7 +8,6 @@
 ///
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{_button.scss → components/_button.scss}

@@ -9,10 +9,11 @@
 /// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
+@use "../abstracts/mixins" as *;
+
 button,
 [type=button],
 [type=reset],

package/scss/{_card.scss → components/_card.scss}

@@ -9,24 +9,25 @@
 /// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
 @use "sass:map";
+@use "../abstracts/default";
+@use "../abstracts/mixins" as *;
 
-$custom: (
+$customCard: (
     padding-block: 1rem,
     padding-inline: 1rem
 );
 
 // Change default properties
-$properties: map.merge($default-item-properties, $custom);
+$customCardProperties: map.merge(default.$item-properties, $customCard);
 
 .card {
 
     // Design as item
-    @include as-item('card', (), $properties);
+    @include as-item('card', (), $customCardProperties);
 
     // Design the layout
     > header,
@@ -35,17 +36,17 @@ $properties: map.merge($default-item-properties, $custom);
     > .list,
     > .accordion,
     > .group {
-        margin-inline: calc(var(--card-padding-inline, map.get($custom, padding-inline)) * -1);
+        margin-inline: calc(var(--card-padding-inline, map.get($customCard, padding-inline)) * -1);
     }
 
     > header,
     > footer {
-        padding: calc(var(--card-padding-block, map.get($custom, padding-block)) / 2) var(--card-padding-inline, map.get($custom, padding-inline));
+        padding: calc(var(--card-padding-block, map.get($customCard, padding-block)) / 2) var(--card-padding-inline, map.get($customCard, padding-inline));
     }
 
     > header,
     > :first-child:is(picture, .list, .group) {
-        margin-top: calc(var(--card-padding-block, map.get($custom, padding-block)) * -1);
+        margin-top: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
         border-start-start-radius: inherit;
         border-start-end-radius: inherit;
         border-bottom: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
@@ -53,7 +54,7 @@ $properties: map.merge($default-item-properties, $custom);
 
     > footer,
     > :last-child:is(picture, .list, .group) {
-        margin-bottom: calc(var(--card-padding-block, map.get($custom, padding-block)) * -1);
+        margin-bottom: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
         border-end-start-radius: inherit;
         border-end-end-radius: inherit;
         border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));

package/scss/{_dialog.scss → components/_dialog.scss}

@@ -6,22 +6,24 @@
 ///
 /// @example <dialog>My dialog</dialog>
 ///
+/// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
 @use "sass:map";
+@use "../abstracts/default";
+@use "../abstracts/mixins" as *;
 
-$custom: (
+$customDialog: (
     background: var(--color-body),
     padding-block: 2rem,
     padding-inline: 2rem
 );
 
 // Change default properties
-$properties: map.merge($default-item-properties, $custom);
+$customDialogProperties: map.merge(default.$item-properties, $customDialog);
 
 dialog {
 
@@ -38,7 +40,7 @@ dialog {
     overflow: auto;
 
     // Design as item
-    @include as-item('dialog', (), $properties);
+    @include as-item('dialog', (), $customDialogProperties);
 
     // Animate the dialog
     @media screen and (prefers-reduced-motion: no-preference) {
@@ -64,25 +66,7 @@ dialog {
     }
 
     // Design the layout
-    > header,
-    > footer {
-        margin-inline: calc(var(--dialog-padding-inline, map.get($custom, padding-inline)) * -1);
-        padding: calc(var(--dialog-padding-block, map.get($custom, padding-block)) / 2) var(--dialog-padding-inline, map.get($custom, padding-inline));
-    }
-
-    > header {
-        margin-top: calc(var(--dialog-padding-block, map.get($custom, padding-block)) * -1);
-        border-start-start-radius: inherit;
-        border-start-end-radius: inherit;
-        border-bottom: var(--dialog-divider-size, var(--dialog-border-size, var(--border-size))) var(--dialog-divider-style, var(--dialog-border-style, var(--border-style))) var(--dialog-divider-color, var(--dialog-border-color, transparent));
-    }
-
-    > footer {
-        margin-bottom: calc(var(--dialog-padding-block, map.get($custom, padding-block)) * -1);
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-        border-top: var(--dialog-divider-size, var(--dialog-border-size, var(--border-size))) var(--dialog-divider-style, var(--dialog-border-style, var(--border-style))) var(--dialog-divider-color, var(--dialog-border-color, transparent));
-    }
+    @include with-header-and-footer('dialog', $customDialogProperties);
 
 }
 

package/scss/{_disclosure.scss → components/_disclosure.scss}

@@ -9,10 +9,11 @@
 /// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
+@use "../abstracts/mixins" as *;
+
 details {
 
     > summary {

package/scss/{_dropdown.scss → components/_dropdown.scss}

@@ -6,22 +6,23 @@
 ///
 /// @example <div class="dropdown"><button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">Button</button><ul id="myDropdown" hidden>...</ul></div>
 ///
+/// @require {mixin} as-item
 /// @require {mixin} as-list
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
 @use "sass:map";
+@use "../abstracts/default";
+@use "../abstracts/mixins" as *;
 
-$custom: (
+$customDropdown: (
     background: var(--color-body)
 );
 
 // Change default properties
-$properties: map.merge($default-item-properties, $custom);
-
+$customDropdownProperties: map.merge(default.$item-properties, $customDropdown);
 
 .dropdown {
 
@@ -55,12 +56,12 @@ $properties: map.merge($default-item-properties, $custom);
 
         // Simple bloc
         &:not(ul, li) {
-            @include as-item('dropdown', (), $properties);
+            @include as-item('dropdown', (), $customDropdownProperties);
         }
 
         // As list
         &:is(ul, ol) {
-            @include as-list('dropdown', ('focus', 'hover', 'active', 'disabled'), $properties);
+            @include as-list('dropdown', ('focus', 'hover', 'active', 'disabled'), $customDropdownProperties);
         }
 
     }

package/scss/{_form.scss → components/_form.scss}

@@ -9,10 +9,11 @@
 /// @require {mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
+@use "../abstracts/mixins" as *;
+
 label,
 fieldset legend {
     display: block;

package/scss/{_group.scss → components/_group.scss}

@@ -6,12 +6,14 @@
 ///
 /// @example <div class="group">...</div>
 ///
+/// @require { mixin} as-item
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
+@use "../abstracts/mixins" as *;
+
 .group {
 
     display: flex;

package/scss/{_list.scss → components/_list.scss}

@@ -6,13 +6,14 @@
 ///
 /// @example <ul class="list">...</ul>, <ol class="list">...</ol> or <div class="list">...</div>
 ///
-/// @require {mixin} as-item
+/// @require {mixin} as-list
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 
+@use "../abstracts/mixins" as *;
+
 .list {
-    @include as-list('list', ('focus', 'hover', 'active', 'disabled'), $properties)
+    @include as-list('list', ('focus', 'hover', 'active', 'disabled'))
 }

package/scss/{_loading.scss → components/_loading.scss}

@@ -8,7 +8,6 @@
 ///
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{_progress.scss → components/_progress.scss}

@@ -8,7 +8,6 @@
 ///
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{_slider.scss → components/_slider.scss}

@@ -8,7 +8,6 @@
 ///
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{_table.scss → components/_table.scss}

@@ -8,7 +8,6 @@
 ///
 /// @group components
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/components/index.scss

@@ -0,0 +1,14 @@
+@forward "./badge";
+@forward "./breadcrumb";
+@forward "./button";
+@forward "./card";
+@forward "./dialog";
+@forward "./disclosure";
+@forward "./dropdown";
+@forward "./form";
+@forward "./group";
+@forward "./list";
+@forward "./loading";
+@forward "./progress";
+@forward "./slider";
+@forward "./table";

package/scss/{_grid.scss → layouts/_grid.scss}

@@ -6,9 +6,8 @@
 ///
 /// @example <div class="grid">...</div> or <div class="flex-grid">...</div>
 ///
-/// @group components
+/// @group layouts
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{variables → themes}/_root.scss

@@ -6,7 +6,6 @@
 ///
 /// @group themes
 /// @author Natacha Herth
-/// @since 0.0.1
 ///
 ////
 

package/scss/vanilla-frontend.scss

@@ -1,23 +1,21 @@
-@import './variables/_root';
-@import './variables/_setting';
+////
+/// ------------------------------------------------------------------
+/// Main
+/// ------------------------------------------------------------------
+/// This is the main scss generated
+///
+/// @author Natacha Herth
+///
 
-@import './utilities/_mixin';
-@import './utilities/_reset';
-@import './utilities/_typography';
 
-@import './_badge';
-@import './_breadcrumb';
-@import './_button';
-@import './_card';
-@import './_dialog';
-@import './_disclosure';
-@import './_dropdown';
-@import './_form';
-@import './_grid';
-@import './_group';
-@import './_list';
-@import './_loading';
-@import './_media';
-@import './_progress';
-@import './_slider';
-@import './_table';
+// Themes
+@use "./themes/root";
+
+// Base
+@use "./base";
+
+// Layouts
+@use "./layouts/grid";
+
+// Components
+@use "./components";