@natachah/vanilla-frontend 0.2.8 → 0.3.0

package/scss/abstracts/_mixins.scss

@@ -13,7 +13,6 @@
 @use "sass:meta";
 @use "sass:list";
 @use "./default";
-@use "./options" as *;
 
 /// Create a basic item that can be interactive or not
 ///
@@ -37,6 +36,7 @@
 
     $default-hover-background: color-mix(in srgb, $default-background, var(--hover-color) var(--hover-percent));
     $default-active-background: color-mix(in srgb, $default-background, var(--active-color) var(--active-percent));
+    $default-outline-color: color-mix(in srgb, var(--focus-color, $default-color), transparent var(--focus-percent));
 
     // Define the CSS
     color: $default-color;
@@ -56,9 +56,6 @@
         }
     }
 
-    // Define the outline variations
-    @include with-outline-variations($name, $states);
-
     // Define the interactive states
     @if($states !=()) {
 
@@ -74,29 +71,22 @@
         // State: focus
         @if(list.index($states, 'focus')) {
 
-            @if(list.index($states, 'hover')) {
+            &:focus,
+            &:focus-visible {
 
-                &:focus,
-                &:focus-visible {
+                @if(list.index($states, 'hover')) {
                     color: var(--#{$name}-focus-color, var(--#{$name}-hover-color, $default-color));
                     background-color: var(--#{$name}-focus-background, var(--#{$name}-hover-background, $default-hover-background));
                     border-color: var(--#{$name}-focus-border-color, var(--#{$name}-hover-border-color, $default-border-color));
                 }
-            }
-
-            @else {
 
-                &:focus,
-                &:focus-visible {
+                @else {
                     color: var(--#{$name}-focus-color, $default-color);
                     background-color: var(--#{$name}-focus-background, $default-hover-background);
                     border-color: var(--#{$name}-focus-border-color, $default-border-color);
                 }
-            }
 
-            &:focus,
-            &:focus-visible {
-                outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb, var(--#{$name}-border-color, currentcolor), transparent var(--outline-opacity)));
+                outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, var(--outline-color, $default-outline-color));
                 outline-offset: var(--#{$name}-outline-offset, var(--outline-offset));
             }
 
@@ -109,10 +99,21 @@
             &[aria-current],
             &[aria-selected=true],
             &[aria-pressed=true] {
-                color: var(--#{$name}-active-color, $default-color);
-                background-color: var(--#{$name}-active-background, $default-active-background);
-                border-color: var(--#{$name}-active-border-color, $default-border-color);
+
+                @if(list.index($states, 'hover')) {
+                    color: var(--#{$name}-active-color, var(--#{$name}-hover-color, $default-color));
+                    background-color: var(--#{$name}-active-background, var(--#{$name}-hover-background, $default-active-background));
+                    border-color: var(--#{$name}-active-border-color, var(--#{$name}-hover-border-color, $default-border-color));
+                }
+
+                @else {
+                    color: var(--#{$name}-active-color, $default-color);
+                    background-color: var(--#{$name}-active-background, $default-active-background);
+                    border-color: var(--#{$name}-active-border-color, $default-border-color);
+                }
+
             }
+
         }
 
         // State: disabled
@@ -125,9 +126,6 @@
 
     }
 
-    // Define the color variations
-    @include with-color-variations($name, $states);
-
 }
 
 /// Create a basic list group that can be interactive
@@ -228,45 +226,33 @@
 
 }
 
-/// Create some outline variations
+/// Create a outline variation
 ///
-/// @require {variable} $outline-variations - Map variable
 /// @param {string} $name - Name of the component
 /// @param {array} $states - List of interactions
-/// @param {string} $color - The initial color of the item (used for color, border and :hover background)
-/// @param {string} $contrast - The initial contrast color of the item (:hover color)
+/// @param {string} $color - The color of the item
+/// @param {string} $contrast - The color contrast of the item
 /// @access public
 ///
-@mixin with-outline-variations($name, $states: (), $color: var(--#{$name}-background, var(--color-font)), $contrast: var(--#{$name}-color, var(--color-body))) {
-
-    @if(meta.global-variable-exists('outline-variations') and list.index($outline-variations, $name)) {
-
-        &.outline {
+@mixin with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body)) {
 
-            color: $color;
-            background-color: transparent;
-            border-color: currentColor;
+    &.outline {
 
-            @if(list.index($states, 'hover')) {
-
-                &:hover {
-                    color: $contrast;
-                    background-color: $color;
-                    border-color: $color;
-                }
-
-            }
+        --#{$name}-color: #{$color};
+        --#{$name}-background: transparent;
+        --#{$name}-border-color: #{$color};
 
-            @if(list.index($states, 'active')) {
+        // Define the interactive states
+        @if($states !=()) {
 
-                &:active,
-                &[aria-current],
-                &[aria-pressed=true] {
-                    color: $contrast;
-                    background-color: $color;
-                    border-color: $color;
-                }
+            // Update the default focus color
+            --focus-color: #{$color};
 
+            // State :hover and it wil auto set for hover exept if you custom the colors
+            @if(list.index($states, 'hover')) {
+                --#{$name}-hover-color: #{$contrast};
+                --#{$name}-hover-background: #{$color};
+                --#{$name}-hover-border-color: #{$color};
             }
 
         }
@@ -277,52 +263,36 @@
 
 /// Create some color variations
 ///
-/// @require {variable} color-variations - Map variable
 /// @param {string} $name - Name of the component
-/// @param {boolean} @param {array} $states - List of interactions
+/// @param {array} $states - List of interactions
+/// @param {array} $colors - List of colors
+/// @param {boolean} $withOutline - Thit outline colored version
 /// @access public
 ///
-@mixin with-color-variations($name, $states: ()) {
-
-    @if(meta.global-variable-exists('color-variations') and map.get($color-variations, #{$name})) {
-
-        @each $colorname in map.get($color-variations, #{$name}) {
+@mixin with-color-variations($name, $states: (), $colors: (), $withOutline: false) {
 
-            &.#{$colorname} {
 
-                // Define the variables
-                $color: var(--color-#{$colorname});
-                $contrast: var(--color-#{$colorname}-contrast, white);
+    @each $colorname in $colors {
 
-                // Define the custom properties
-                --#{$name}-color: #{$contrast};
-                --#{$name}-background: #{$color};
-                --#{$name}-border-color: #{$color};
+        &.#{$colorname} {
 
-                @if(list.index($states, 'hover')) {
-
-                    // Define the variables
-                    $hover: color-mix(in srgb, $color, var(--hover-color) var(--hover-percent));
-
-                    // Define the custom properties
-                    --#{$name}-hover-color: #{$contrast};
-                    --#{$name}-hover-background: #{$hover};
-                    --#{$name}-hover-border-color: #{$hover};
-
-                }
+            // Define the variables
+            $color: var(--color-#{$colorname});
+            $contrast: var(--color-#{$colorname}-contrast, white);
 
-                @if(list.index($states, 'active')) {
+            // Define the custom properties
+            --#{$name}-color: #{$contrast};
+            --#{$name}-background: #{$color};
+            --#{$name}-border-color: #{$color};
 
-                    // Define the variables
-                    $active: color-mix(in srgb, $color, var(--active-color) var(--active-percent));
-
-                    // Define the custom properties
-                    --#{$name}-active-color: #{$contrast};
-                    --#{$name}-active-background: #{$active};
-                    --#{$name}-active-border-color: #{$active};
-
-                }
+            // Define colored outline colored version
+            @if($withOutline) {
+                @include with-outline-variation($name, $states, $color, $contrast);
+            }
 
+            // Update the default focus color
+            @if($states !=()) {
+                --focus-color: #{$color};
             }
 
         }
@@ -331,6 +301,7 @@
 
 }
 
+
 /// Create a responsive table
 ///
 /// @access public

package/scss/base/_layout.scss

@@ -0,0 +1,61 @@
+////
+/// ------------------------------------------------------------------
+/// Layout
+/// ------------------------------------------------------------------
+/// Create the layout
+///
+/// @group base
+/// @author Natacha Herth
+///
+////
+
+// Reset value for html and body
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+// Define the layout into the body
+body {
+    --layout-content-width: minmax(0, calc((var(--layout-width, 1280) - ((var(--layout-columns, 12) - 1) * var(--layout-gap-inline, 1rem))) / var(--layout-columns, 12)));
+
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: [full-start] minmax(var(--layout-gap-inline, 1rem), 1fr) [content-start] repeat(var(--layout-columns, 12), var(--layout-content-width)) [content-end] minmax(var(--layout-gap-inline, 1rem), 1fr) [full-end];
+    grid-template-rows: auto 1fr auto;
+    gap: var(--layout-gap-block, 1rem) var(--layout-gap-inline, 1rem);
+
+    // Add animation exept on first load
+    @media screen and (prefers-reduced-motion: no-preference) {
+        &:not([data-preload]) {
+            transition: all .5s ease-in-out;
+        }
+    }
+
+    // Add the subgrid to direct child of the body as <header>, <main> and <footer>
+    > header,
+    > main,
+    > footer {
+        grid-column: full;
+        display: grid;
+        grid-template-columns: subgrid;
+        gap: var(--subgrid-gap-block, 0) var(--subgrid-gap-inline, var(--layout-gap-inline, 1rem));
+
+        .container {
+            grid-column: content;
+        }
+
+        .container-full {
+            grid-column: full;
+        }
+
+        .subgrid {
+            display: grid;
+            grid-template-columns: subgrid;
+            gap: var(--subgrid-gap-block, 0) var(--subgrid-gap-inline, var(--layout-gap-inline, 1rem));
+        }
+    }
+
+}

package/scss/base/_media.scss

@@ -15,6 +15,7 @@ img {
     width: var(--image-width, auto);
     height: var(--image-height, auto);
     object-fit: var(--image-fit, cover);
+    object-position: var(--image-position, center);
     aspect-ratio: var(--image-ratio, auto);
 }
 
@@ -22,6 +23,7 @@ video {
     width: var(--video-width, 100%);
     height: var(--video-height, auto);
     object-fit: var(--video-fit, cover);
+    object-position: var(--video-position, center);
     aspect-ratio: var(--video-ratio, 16/9);
 }
 

package/scss/base/_typography.scss

@@ -14,7 +14,7 @@
         font-size: var(--font-size-h#{$i});
         font-weight: var(--heading-font-weight, var(--font-weight));
         line-height: var(--heading-line-height, var(--line-height));
-        color: var(--heading-color, currentColor);
+        color: var(--heading-color, var(--color-font, currentColor));
         text-wrap: balance;
     }
 }
@@ -33,7 +33,7 @@ button[role=link] {
     &:focus,
     &:focus-visible {
         color: var(--anchor-focus-color, var(--anchor-hover-color, var(--anchor-color, currentColor)));
-        outline: var(--anchor-outline-size, var(--outline-size)) var(--anchor-outline-style, var(--outline-style)) var(--anchor-outline-color, color-mix(in srgb, currentColor, transparent var(--outline-opacity)));
+        outline: var(--anchor-outline-size, var(--outline-size)) var(--anchor-outline-style, var(--outline-style)) var(--anchor-outline-color, var(--outline-color, color-mix(in srgb, var(--focus-color, currentColor), transparent var(--focus-percent))));
         outline-offset: var(--anchor-outline-offset, var(--outline-offset));
     }
 

package/scss/base/index.scss

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

package/scss/components/_badge.scss

@@ -16,6 +16,10 @@
 @use "../abstracts/default";
 @use "../abstracts/mixins" as *;
 
+$colors: () !default;
+
+$outline: false !default;
+
 $customBadge: (
     background: color-mix(in srgb, transparent, var(--hover-color) var(--hover-percent)),
     padding-block: .25em,
@@ -35,4 +39,12 @@ $customBadgeProperties: map.merge(default.$item-properties, $customBadge);
     // Define as an item
     @include as-item('badge', (), $customBadgeProperties);
 
+    // Define the outline variation
+    @if($outline) {
+        @include with-outline-variation('badge');
+    }
+
+    // Define the color variations
+    @include with-color-variations('badge', (), $colors, $outline);
+
 }

package/scss/components/_button.scss

@@ -14,6 +14,10 @@
 
 @use "../abstracts/mixins" as *;
 
+$colors: () !default;
+
+$outline: false !default;
+
 button:not([role=link]),
 [type=button],
 [type=reset],
@@ -33,4 +37,12 @@ button:not([role=link]),
         opacity: var(--button-disabled-opacity, var(--disabled-opacity));
     }
 
+    // Define the outline variation
+    @if($outline) {
+        @include with-outline-variation('button', ('focus', 'hover', 'active', 'disabled'));
+    }
+
+    // Define the color variations
+    @include with-color-variations('button', ('focus', 'hover', 'active', 'disabled'), $colors, $outline);
+
 }

package/scss/components/_card.scss

@@ -16,6 +16,10 @@
 @use "../abstracts/default";
 @use "../abstracts/mixins" as *;
 
+$colors: () !default;
+
+$outline: false !default;
+
 $customCard: (
     padding-block: 1rem,
     padding-inline: 1rem
@@ -29,6 +33,14 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
     // Design as item
     @include as-item('card', (), $customCardProperties);
 
+    // Define the outline variation
+    @if($outline) {
+        @include with-outline-variation('card');
+    }
+
+    // Define the color variations
+    @include with-color-variations('card', (), $colors, $outline);
+
     // Design the layout
     > header,
     > footer,

package/scss/components/_disclosure.scss

@@ -49,9 +49,6 @@ details {
 
     }
 
-    // Include the color variation on the parent
-    @include with-color-variations('disclosure');
-
 }
 
 .accordion {

package/scss/components/index.scss

@@ -1,7 +1,7 @@
-@forward "./badge";
+@forward "./badge" as badge-*;
 @forward "./breadcrumb";
-@forward "./button";
-@forward "./card";
+@forward "./button" as button-*;
+@forward "./card" as card-*;
 @forward "./dialog";
 @forward "./disclosure";
 @forward "./drawer";

package/scss/themes/_root.scss

@@ -16,6 +16,9 @@
     --line-height: 1.5;
     --font-family: Arial;
     --font-weight: normal;
+    --font-weight-light: 300;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
 
     --font-size-h1: 2.25em; // 36px
     --font-size-h2: 2.00em; // 32px
@@ -23,8 +26,9 @@
     --font-size-h4: 1.50em; // 24px
     --font-size-h5: 1.25em; // 20px
     --font-size-h6: 1.125em; // 18px
-    --font-size-large: 1.125em; // 18px
-    --font-size-small: .875em; // 14px
+    --font-size-large: 1.25em;
+    --font-size-medium: 1.125em;
+    --font-size-small: .875em;
 
     // Anchor
     --decoration: none;
@@ -42,7 +46,10 @@
     --outline-size: 3px;
     --outline-style: solid;
     --outline-offset: 0;
-    --outline-opacity: 50%;
+    // --outline-color: var(--color-primary);
+
+    // Backdrop
+    --backdrop-color: rgba(0, 0, 0, .5);
 
     // Hover (color-mix)
     --hover-color: black;
@@ -52,6 +59,10 @@
     --active-color: black;
     --active-percent: 10%;
 
+    // Focus (color-mix)
+    --focus-color: currentColor;
+    --focus-percent: 50%;
+
     // Disabled
     --disabled-opacity: 50%;
 
@@ -66,6 +77,10 @@
     // Contrasts
     --color-warning-contrast: black;
 
+    // Form
+    --form-border-color: currentColor;
+    --form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
+
     // Icons
     --icon-external: url('data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" /><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" /></svg>');
     --icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
@@ -75,4 +90,29 @@
     --icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>');
     --icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
     --icon-switch: var(--icon-radio);
+
+    // Layout
+    --layout-width: 1280px;
+    --layout-gap-block: 1rem;
+    --layout-gap-inline: 1rem;
+    --layout-columns: 1;
+
+    @media (min-width: 720px) {
+        --layout-columns: 6;
+        --layout-gap-block: 1rem;
+        --layout-gap-inline: 1rem;
+    }
+
+    @media (min-width: 1024px) {
+        --layout-columns: 12;
+        --layout-gap-block: 2rem;
+        --layout-gap-inline: 2rem;
+    }
+
+    @media (min-width: 1440px) {
+        --layout-columns: 12;
+        --layout-gap-block: 4rem;
+        --layout-gap-inline: 2rem;
+    }
+
 }

package/scss/vanilla-frontend-doc.scss

@@ -0,0 +1,34 @@
+////
+/// ------------------------------------------------------------------
+/// Main
+/// ------------------------------------------------------------------
+/// This is the main scss generated
+///
+/// @author Natacha Herth
+///
+
+
+// Themes
+@use "./themes/root";
+
+// Base
+@use "./base/reset";
+@use "./base/typography";
+@use "./base/media";
+
+// Components
+@use "./components/badge" with ($colors: ('primary'), $outline: true);
+@use "./components/breadcrumb";
+@use "./components/button" with ($colors: ('primary'), $outline: true);
+@use "./components/card" with ($colors: ('primary'), $outline: true);
+@use "./components/dialog";
+@use "./components/disclosure";
+@use "./components/drawer";
+@use "./components/dropdown";
+@use "./components/form";
+@use "./components/grid";
+@use "./components/list";
+@use "./components/loading";
+@use "./components/progress";
+@use "./components/table";
+@use "./components/slider";

package/docs/pages/test.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Javascript ></title>
-</head>
-
-<body data-preload>
-    <doc-layout></doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-
-</html>

package/scss/abstracts/_options.scss

@@ -1,44 +0,0 @@
-////
-/// ------------------------------------------------------------------
-/// Setting
-/// ------------------------------------------------------------------
-/// Setting variables
-///
-/// @group abstracts
-/// @author Natacha Herth
-/// 
-////
-
-/// Define the default list of colors available
-/// 
-/// @access public
-///
-$colors: (
-    primary,
-    success,
-    error,
-    warning) !default;
-
-/// Define the components that have some color variations
-///
-/// @example button: (error) // <button class="error"></button>
-/// @access public
-///
-$color-variations: (
-    badge: $colors,
-    button: $colors,
-    card: $colors,
-    disclosure: $colors,
-    list: $colors) !default;
-
-/// Define the components that have an outline variation
-///
-/// @example button // <button class="outline"></button>
-/// @access public
-///
-$outline-variations: (
-    badge,
-    button,
-    card,
-    disclosure,
-    list) !default;