@natachah/vanilla-frontend 0.0.5 → 0.1.1

package/scss/abstracts/_default.scss

@@ -0,0 +1,21 @@
+////
+/// ------------------------------------------------------------------
+/// Default values for items
+/// ------------------------------------------------------------------
+/// Setting variables
+///
+/// @group abstracts
+/// @author Natacha Herth
+/// 
+////
+
+$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)
+);

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;
@@ -120,56 +123,43 @@
     }
 
     > * {
-
         position: relative;
         margin: 0;
+        text-align: var(--list-text-align, left);
 
-        // Simple item
-        &:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
-            @include as-item($name, (), $properties);
-        }
-
-        // Item with links
-        &:has(> a:first-child:last-child) > a {
+        &:has(a[role=button]:only-child, button:only-child) > * {
             display: block;
+            width: 100%;
+            text-align: var(--list-text-align, left);
             @include as-item($name, $states, $properties);
         }
 
-        // Item with button
-        &:has(> button:first-child:last-child) > button {
-            width: 100%;
-            text-align: left;
+        &:not(:has(a[role=button]:only-child, button:only-child)) {
+            @include as-item($name, (), $properties);
         }
 
-        // Remove extra border
         & + *,
-        & + * > a,
-        & + * > button {
+        & + * > :only-child {
             border-top: none !important;
         }
 
         // Remove radius on middle child
         &:not(:first-child, :last-child),
-        &:not(:first-child, :last-child) > a,
-        &:not(:first-child, :last-child) > button {
+        &:not(:first-child, :last-child) > :only-child {
             border-radius: 0 !important;
         }
 
-        // Remove the radius
+        // Remove radius on first/last child
         &:not(:only-child) {
 
-            // Remove radius bottom on first child
             &:first-child,
-            &:first-child > a,
-            &:first-child > button {
+            &:first-child > :only-child {
                 border-end-start-radius: 0 !important;
                 border-end-end-radius: 0 !important;
             }
 
-            // Remove radius top on last child
             &:last-child,
-            &:last-child > a,
-            &:last-child > button {
+            &:last-child > :only-child {
                 border-start-start-radius: 0 !important;
                 border-start-end-radius: 0 !important;
             }
@@ -177,6 +167,37 @@
         }
 
     }
+
+}
+
+/// 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
@@ -190,7 +211,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 +219,7 @@
             background-color: transparent;
             border-color: currentColor;
 
-            @if(index($states, 'hover')) {
+            @if(list.index($states, 'hover')) {
 
                 &:hover {
                     color: $contrast;
@@ -208,7 +229,7 @@
 
             }
 
-            @if(index($states, 'active')) {
+            @if(list.index($states, 'active')) {
 
                 &:active,
                 &[aria-current],
@@ -235,9 +256,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 +271,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 +283,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 +298,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
 ///
 ////