@natachah/vanilla-frontend 0.0.2

package/scss/utilities/_mixin.scss

@@ -0,0 +1,322 @@
+////
+/// ------------------------------------------------------------------
+/// Mixin
+/// ------------------------------------------------------------------
+/// Regroup all mixins of the package
+///
+/// @group mixins
+/// @author Natacha Herth
+/// @since 1.0.0
+/// 
+////
+
+@use "sass:map";
+
+/// Create a basic item that can be interactive or not
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+@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
+    $default-color: var(--#{$name}-color, map.get($properties, color));
+    $default-background: var(--#{$name}-background, map.get($properties, background));
+    $default-border-size: var(--#{$name}-border-size, map.get($properties, border-size));
+    $default-border-style: var(--#{$name}-border-style, map.get($properties, border-style));
+    $default-border-color: var(--#{$name}-border-color, map.get($properties, border-color));
+    $default-border-radius: var(--#{$name}-border-radius, map.get($properties, border-radius));
+    $default-padding-inline: var(--#{$name}-padding-inline, map.get($properties, padding-inline));
+    $default-padding-block: var(--#{$name}-padding-block, map.get($properties, padding-block));
+
+    // Define the CSS
+    color: $default-color;
+    background-color: $default-background;
+    border: $default-border-size $default-border-style $default-border-color;
+    border-radius: $default-border-radius;
+    padding: $default-padding-block $default-padding-inline;
+
+    // Add cursor, text decoration and transition if needed
+    // ! Must be before any custom things SASS and CSS new convention 
+    @if($states !=()) {
+        cursor: var(--#{$name}-cursor, pointer);
+        text-decoration: var(--#{$name}-decoration, var(--decoration));
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+            transition: var(--#{$name}-transition, all .25s ease-in-out);
+        }
+    }
+
+    // Define the outline variations
+    @include with-outline-variations($name, $states);
+
+    // Define the interactive states
+    @if($states !=()) {
+
+        // State: focus
+        @if(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));
+            }
+        }
+
+        // State: hover
+        @if(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)));
+                border-color: var(--#{$name}-hover-border-color, $default-border-color);
+            }
+        }
+
+        // State: active
+        @if(index($states, 'active')) {
+
+            &:active,
+            &[aria-current],
+            &[aria-selected=true],
+            &[aria-pressed=true] {
+                color: var(--#{$name}-active-color, $default-color);
+                background-color: var(--#{$name}-active-background, color-mix(in srgb, $default-background, var(--active-color) var(--active-percent)));
+                border-color: var(--#{$name}-active-border-color, $default-border-color);
+            }
+        }
+
+        // State: disabled
+        @if(index($states, 'disabled')) {
+            &:disabled {
+                pointer-events: none;
+                opacity: var(--#{$name}-disabled-opacity, var(--disabled-opacity));
+            }
+        }
+
+    }
+
+    // Define the color variations
+    @include with-color-variations($name, $states);
+
+}
+
+/// Create a basic list group that can be interactive
+///
+/// @require {mixin} as-item
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+@mixin as-list($name, $states: (), $properties: $default-item-properties) {
+
+    // Reset
+    margin: 0;
+    padding: 0;
+
+    &:is(ul, ol) {
+        list-style: none;
+    }
+
+    > * {
+
+        position: relative;
+        margin: 0;
+
+        // Simple item
+        &:not(:has(> a:first-child:last-child)) {
+            @include as-item($name, (), $properties);
+        }
+
+        // Item with links
+        &:has(> a:first-child:last-child) > a {
+            display: block;
+            @include as-item($name, $states, $properties);
+        }
+
+        // Remove extra border
+        & + *,
+        & + * > a {
+            border-top: none !important;
+        }
+
+        // Remove radius on middle child
+        &:not(:first-child, :last-child),
+        &:not(:first-child, :last-child) > a {
+            border-radius: 0 !important;
+        }
+
+        // Remove the radius
+        &:not(:only-child) {
+
+            // Remove radius bottom on first child
+            &:first-child,
+            &:first-child > a {
+                border-end-start-radius: 0 !important;
+                border-end-end-radius: 0 !important;
+            }
+
+            // Remove radius top on last child
+            &:last-child,
+            &:last-child > a {
+                border-start-start-radius: 0 !important;
+                border-start-end-radius: 0 !important;
+            }
+
+        }
+
+    }
+}
+
+/// Create some outline variations
+///
+/// @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)
+/// @access public
+///
+@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)) {
+
+        &.outline {
+
+            color: $color;
+            background-color: transparent;
+            border-color: currentColor;
+
+            @if(index($states, 'hover')) {
+
+                &:hover {
+                    color: $contrast;
+                    background-color: $color;
+                    border-color: $color;
+                }
+
+            }
+
+            @if(index($states, 'active')) {
+
+                &:active,
+                &[aria-current],
+                &[aria-pressed=true] {
+                    color: $contrast;
+                    background-color: $color;
+                    border-color: $color;
+                }
+
+            }
+
+        }
+
+    }
+
+}
+
+/// 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
+/// @access public
+///
+@mixin with-color-variations($name, $states: ()) {
+
+    @if(variable-exists(color-variations) and map-get($color-variations, #{$name})) {
+
+        @each $colorname in map-get($color-variations, #{$name}) {
+
+            &.#{$colorname} {
+
+                // Define the variables
+                $color: var(--color-#{$colorname});
+                $contrast: var(--color-#{$colorname}-contrast, white);
+
+                // Define the custom properties
+                --#{$name}-color: #{$contrast};
+                --#{$name}-background: #{$color};
+                --#{$name}-border-color: #{$color};
+
+                @if(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};
+
+                }
+
+                @if(index($states, 'active')) {
+
+                    // 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};
+
+                }
+
+            }
+
+        }
+    }
+
+}
+
+/// Create a responsive table
+///
+/// @access public
+///
+@mixin as-responsive-table() {
+
+    // Remove the header & the border
+    thead {
+        display: none;
+    }
+
+    // Remove the header border
+    tbody tr:first-child {
+        border-top: none;
+    }
+
+    // Display as a grid
+    th,
+    td {
+        display: grid;
+        grid-template-columns: var(--table-grid-template, 15ch 1fr);
+
+        &[data-label] {
+            &::before {
+                padding-right: var(--table-padding-inline, var(--padding-inline));
+                content: attr(data-label);
+            }
+        }
+    }
+
+}
+
+/// Offset a flex grid column 
+///
+/// @param {int} $number - Number of column to offset
+/// @access public
+///
+@mixin flex-grid-offset-column($number: 1) {
+    margin-left: calc(($number * 100%) / var(--grid-columns, 12))
+}
+
+/// Make a flex grid column wider
+///
+/// @param {int} $number - Number of column width
+/// @access public
+///
+@mixin flex-grid-wider-column($number: 2) {
+    flex-basis: calc($number / var(--grid-columns, 12) * 100% - var(--grid-gap-inline, 1rem) * (var(--grid-columns, 12) - 1) / var(--grid-columns, 12))
+}

package/scss/utilities/_reset.scss

@@ -0,0 +1,145 @@
+////
+/// ------------------------------------------------------------------
+/// Reset
+/// ------------------------------------------------------------------
+/// This file is the CSS default reset
+///
+/// @group reset
+/// @author Natacha Herth
+/// @since 1.0.0
+/// 
+////
+
+// Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+*:where(:not(iframe, canvas, img, svg, video, abbr, b, strong, i, em, cite, s, u, sub, sup, mark, code):not(svg *)) {
+    all: unset;
+    display: revert;
+}
+
+// Preferred box-sizing value
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+// For media to not be able to exceed their container
+img,
+picture,
+video,
+audio,
+canvas,
+figure {
+    max-width: 100%;
+    display: block;
+}
+
+// Avoid overflow of text
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+// SVG default size and re-align with text 
+svg {
+    width: 1em;
+    height: 1em;
+    vertical-align: -.125em;
+    pointer-events: none; // For avoid e.target to get the SVG on clicked
+}
+
+// Basic table remove collapsing and set as block
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+// Remove the default summary style
+summary {
+    list-style: none;
+}
+
+// Force the hidden
+[hidden] {
+    display: none;
+}
+
+// Change cursor for draggable
+[draggable] {
+
+    &:not(:has([data-handle])),
+    [data-handle] {
+        cursor: grab;
+    }
+
+    &[aria-grabbed=true],
+    &[aria-grabbed=true] [data-handle] {
+        cursor: grabbing;
+    }
+
+}
+
+// Change cursor for tree + basic animation on svg
+[role=tree],
+[role=treegrid] {
+
+    [aria-expanded]:not(:has([data-handle])),
+    [data-handle] {
+        cursor: pointer;
+    }
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+        [data-handle] > svg {
+            transition: all .25s ease-in-out;
+        }
+    }
+
+    [aria-expanded=true] > [data-handle] > svg {
+        transform: rotate(90deg);
+    }
+
+}
+
+// Reduce animation on scroll for #target
+@media screen and (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
+}
+
+// Define the bases for the body 
+body {
+
+    // Define Typography
+    font-size: var(--font-size, 1rem);
+    line-height: var(--line-height, 1.5);
+    font-family: var(--font-family, default);
+    font-weight: var(--font-weight, normal);
+
+    // Define color
+    color: var(--color-font, black);
+    background-color: var(--color-body, white);
+
+    // Trick to avoid reposition with or withour scrollbar 
+    overflow-x: hidden;
+    margin-right: calc(100% - 100vw);
+
+    // Avoid scroll when a dialog is opened
+    &[inert] {
+        overflow: hidden;
+        pointer-events: none;
+        touch-action: none;
+    }
+
+    // Data attribute to prevent animation on first load DOM
+    &[data-preload] * {
+        transition-duration: 0s !important;
+    }
+
+}

package/scss/utilities/_typography.scss

@@ -0,0 +1,107 @@
+////
+/// ------------------------------------------------------------------
+/// Typography
+/// ------------------------------------------------------------------
+/// This file define the basic typographic elements.
+///
+/// @group typography
+/// @author Natacha Herth
+/// @since 1.0.0
+/// 
+////
+
+@for $i from 1 through 6 {
+    h#{$i} {
+        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);
+        text-wrap: balance;
+    }
+}
+
+a {
+
+    cursor: pointer;
+    text-decoration: var(--anchor-decoration, var(--decoration));
+    color: var(--anchor-color, currentColor);
+
+    &:hover {
+        color: var(--anchor-hover-color, var(--anchor-color, currentColor));
+    }
+
+    &:active,
+    &[aria-current],
+    &[aria-selected=true] {
+        color: var(--anchor-active-color, var(--nav-hover-color, var(--nav-color, currentColor)));
+    }
+
+    &:disabled,
+    &:not([href]) {
+        pointer-events: none;
+        opacity: var(--anchor-disabled-opacity, var(--disabled-opacity));
+    }
+
+}
+
+small {
+    font-size: var(--font-size-small);
+}
+
+mark {
+    padding: var(--mark-padding-block, .175em) var(--mark-padding-inline, .175em);
+    background-color: var(--mark-background, #fff3cd);
+}
+
+kbd {
+    white-space: nowrap;
+    padding: var(--kbd-padding-block, .25em) var(--kbd-padding-inline, .375em);
+    font-family: var(--kbd-font-family, monospace);
+    color: var(--kbd-color, var(--color-body));
+    background-color: var(--kbd-background, var(--color-font));
+    border-radius: var(--kbd-border-radius, var(--border-radius));
+}
+
+:not(pre) > code {
+    white-space: nowrap;
+    padding: var(--code-padding-block, .25em) var(--code-padding-inline, .375em);
+    font-family: var(--code-font-family, monospace);
+    color: var(--code-color, currentColor);
+    background-color: var(--code-background, #f5f2f0);
+    border-radius: var(--code-border-radius, var(--border-radius));
+}
+
+ins {
+    color: var(--color-success, green);
+}
+
+del {
+    text-decoration: line-through;
+    color: var(--color-error, red);
+}
+
+pre {
+    white-space: nowrap;
+    padding: var(--pre-padding-block, 1em) var(--pre-padding-inline, 1em);
+    font-family: var(--pre-font-family, monospace);
+    color: var(--pre-color, currentColor);
+    background-color: var(--pre-background, #f5f2f0);
+    border-radius: var(--pre-border-radius, var(--border-radius));
+}
+
+ul,
+ol {
+    padding-left: var(--list-offset, 1.25rem);
+}
+
+ul {
+    list-style: var(--list-bullet, disc);
+}
+
+ol {
+    list-style: var(--list-bullet, decimal);
+}
+
+hr {
+    border-top: var(--hr-border-size, 1px) var(--hr-border-style, solid) var(--hr-border-color, currentColor);
+}

package/scss/vanilla-frontend.scss

@@ -0,0 +1,23 @@
+@import './variables/_root';
+@import './variables/_setting';
+
+@import './utilities/_mixin';
+@import './utilities/_reset';
+@import './utilities/_typography';
+
+@import './_badge';
+@import './_button';
+@import './_card';
+@import './_dialog';
+@import './_disclosure';
+@import './_dropdown';
+@import './_form';
+@import './_grid';
+@import './_group';
+@import './_list';
+@import './_loading';
+@import './_media';
+@import './_nav';
+@import './_progress';
+@import './_slider';
+@import './_table';

package/scss/variables/_root.scss

@@ -0,0 +1,70 @@
+////
+/// ------------------------------------------------------------------
+/// Root
+/// ------------------------------------------------------------------
+/// Regroup all the default CSS custom properties
+///
+/// @group themes
+/// @author Natacha Herth
+/// @since 0.0.1
+///
+////
+
+:root {
+
+    // Typography
+    --font-size: 16px;
+    --line-height: 1.5;
+    --font-family: Arial;
+    --font-weight: normal;
+
+    --font-size-h1: 2.25em; // 36px
+    --font-size-h2: 2.00em; // 32px
+    --font-size-h3: 1.75em; // 28px
+    --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
+
+    // Anchor
+    --decoration: none;
+
+    // Layouts
+    --padding-inline: .75em;
+    --padding-block: .5em;
+
+    // Border
+    --border-size: 1px;
+    --border-style: solid;
+    --border-radius: .25rem;
+
+    // Focus (outline)
+    --focus-size: 3px;
+    --focus-style: solid;
+    --focus-offset: 0;
+    --focus-opacity: 50%;
+
+    // Hover (color-mix)
+    --hover-color: black;
+    --hover-percent: 5%;
+
+    // Active (color-mix)
+    --active-color: black;
+    --active-percent: 10%;
+
+    // Disabled
+    --disabled-opacity: 50%;
+
+    // Colors
+    --color-body: white;
+    --color-font: black;
+    --color-primary: #B790E5;
+    --color-error: #DC3030;
+    --color-success: #008A00;
+    --color-warning: #FFA500;
+
+    // Contrasts
+    --color-warning-contrast: black;
+
+}