@natachah/vanilla-frontend 0.0.4 → 0.1.0

package/scss/{utilities/_mixin.scss → abstracts/_mixins.scss}

@@ -4,13 +4,16 @@
 /// ------------------------------------------------------------------
 /// Regroup all mixins of the package
 ///
-/// @group mixins
+/// @group abstracts
 /// @author Natacha Herth
-/// @since 1.0.0
 /// 
 ////
 
 @use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "./default";
+@use "./options" as *;
 
 /// Create a basic item that can be interactive or not
 ///
@@ -19,7 +22,7 @@
 /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
 /// @access public
 ///
-@mixin as-item($name, $states: (), $properties: $default-item-properties) {
+@mixin as-item($name, $states: (), $properties: default.$item-properties) {
 
     // Define the default variables
     // INFO: The choice of SASS variables other CSS private properties if for better readability of the final code
@@ -57,7 +60,7 @@
     @if($states !=()) {
 
         // State: focus
-        @if(index($states, 'focus')) {
+        @if(list.index($states, 'focus')) {
             &:focus {
                 outline: var(--#{$name}-focus-size, var(--focus-size)) var(--#{$name}-focus-style, var(--focus-style)) var(--#{$name}-focus-color, color-mix(in srgb, var(--#{$name}-border-color, var(--#{$name}-background, $default-color)), transparent var(--focus-opacity)));
                 outline-offset: var(--#{$name}-focus-offset, var(--focus-offset));
@@ -65,7 +68,7 @@
         }
 
         // State: hover
-        @if(index($states, 'hover')) {
+        @if(list.index($states, 'hover')) {
             &:hover {
                 color: var(--#{$name}-hover-color, $default-color);
                 background-color: var(--#{$name}-hover-background, color-mix(in srgb, $default-background, var(--hover-color) var(--hover-percent)));
@@ -74,7 +77,7 @@
         }
 
         // State: active
-        @if(index($states, 'active')) {
+        @if(list.index($states, 'active')) {
 
             &:active,
             &[aria-current],
@@ -87,7 +90,7 @@
         }
 
         // State: disabled
-        @if(index($states, 'disabled')) {
+        @if(list.index($states, 'disabled')) {
             &:disabled {
                 pointer-events: none;
                 opacity: var(--#{$name}-disabled-opacity, var(--disabled-opacity));
@@ -109,7 +112,7 @@
 /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
 /// @access public
 ///
-@mixin as-list($name, $states: (), $properties: $default-item-properties) {
+@mixin as-list($name, $states: (), $properties: default.$item-properties) {
 
     // Reset
     margin: 0;
@@ -179,6 +182,36 @@
     }
 }
 
+/// Create a basic item with an header and a footer style
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+@mixin with-header-and-footer($name, $properties: default.$item-properties) {
+
+    > header,
+    > footer {
+        margin-inline: calc(var(--#{$name}-padding-inline, map.get($properties, padding-inline)) * -1);
+        padding: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) / 2) var(--#{$name}-padding-inline, map.get($properties, padding-inline));
+    }
+
+    > header {
+        margin-top: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) * -1);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-bottom: var(--#{$name}-divider-size, var(--#{$name}-border-size, var(--border-size))) var(--#{$name}-divider-style, var(--#{$name}-border-style, var(--border-style))) var(--#{$name}-divider-color, var(--#{$name}-border-color, transparent));
+    }
+
+    > footer {
+        margin-bottom: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) * -1);
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        border-top: var(--#{$name}-divider-size, var(--#{$name}-border-size, var(--border-size))) var(--#{$name}-divider-style, var(--#{$name}-border-style, var(--border-style))) var(--#{$name}-divider-color, var(--#{$name}-border-color, transparent));
+    }
+
+}
+
 /// Create some outline variations
 ///
 /// @require {variable} $outline-variations - Map variable
@@ -190,7 +223,7 @@
 ///
 @mixin with-outline-variations($name, $states: (), $color: var(--#{$name}-background, var(--color-font)), $contrast: var(--#{$name}-color, var(--color-body))) {
 
-    @if(variable-exists(outline-variations) and index($outline-variations, $name)) {
+    @if(meta.global-variable-exists('outline-variations') and list.index($outline-variations, $name)) {
 
         &.outline {
 
@@ -198,7 +231,7 @@
             background-color: transparent;
             border-color: currentColor;
 
-            @if(index($states, 'hover')) {
+            @if(list.index($states, 'hover')) {
 
                 &:hover {
                     color: $contrast;
@@ -208,7 +241,7 @@
 
             }
 
-            @if(index($states, 'active')) {
+            @if(list.index($states, 'active')) {
 
                 &:active,
                 &[aria-current],
@@ -235,9 +268,9 @@
 ///
 @mixin with-color-variations($name, $states: ()) {
 
-    @if(variable-exists(color-variations) and map-get($color-variations, #{$name})) {
+    @if(meta.global-variable-exists('color-variations') and map.get($color-variations, #{$name})) {
 
-        @each $colorname in map-get($color-variations, #{$name}) {
+        @each $colorname in map.get($color-variations, #{$name}) {
 
             &.#{$colorname} {
 
@@ -250,7 +283,7 @@
                 --#{$name}-background: #{$color};
                 --#{$name}-border-color: #{$color};
 
-                @if(index($states, 'hover')) {
+                @if(list.index($states, 'hover')) {
 
                     // Define the variables
                     $hover: color-mix(in srgb, $color, var(--hover-color) var(--hover-percent));
@@ -262,7 +295,7 @@
 
                 }
 
-                @if(index($states, 'active')) {
+                @if(list.index($states, 'active')) {
 
                     // Define the variables
                     $active: color-mix(in srgb, $color, var(--active-color) var(--active-percent));
@@ -277,6 +310,7 @@
             }
 
         }
+
     }
 
 }

package/scss/{variables/_setting.scss → abstracts/_options.scss}

@@ -2,11 +2,10 @@
 /// ------------------------------------------------------------------
 /// Setting
 /// ------------------------------------------------------------------
-/// Setting variables for default theme
+/// Setting variables
 ///
-/// @group setting
+/// @group abstracts
 /// @author Natacha Herth
-/// @since 0.0.1
 /// 
 ////
 
@@ -18,8 +17,7 @@ $colors: (
     primary,
     success,
     error,
-    warning
-);
+    warning) !default;
 
 /// Define the components that have some color variations
 ///
@@ -31,8 +29,7 @@ $color-variations: (
     button: $colors,
     card: $colors,
     disclosure: $colors,
-    list: $colors
-);
+    list: $colors) !default;
 
 /// Define the components that have an outline variation
 ///
@@ -44,20 +41,4 @@ $outline-variations: (
     button,
     card,
     disclosure,
-    list
-);
-
-/// Define the default properties for item
-///
-/// @access public
-///
-$default-item-properties: (
-    color: var(--color-font),
-    background: transparent,
-    border-size: var(--border-size),
-    border-style: var(--border-style),
-    border-color: transparent,
-    border-radius: var(--border-radius),
-    padding-inline: var(--padding-inline),
-    padding-block: var(--padding-block)
-);
+    list) !default;

package/scss/{_media.scss → base/_media.scss}

@@ -6,9 +6,8 @@
 ///
 /// @example <img>, <picture>, <figure>, <video> and <audio>
 ///
-/// @group components
+/// @group base
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

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

@@ -4,9 +4,8 @@
 /// ------------------------------------------------------------------
 /// This file is the CSS default reset
 ///
-/// @group reset
+/// @group base
 /// @author Natacha Herth
-/// @since 1.0.0
 /// 
 ////
 
@@ -67,7 +66,7 @@ summary {
 
 // Force the hidden
 [hidden] {
-    display: none;
+    display: none !important;
 }
 
 // Change cursor for draggable

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
 ///
 ////