@nordcode/ui 1.0.0

package/src/styles/utils/easings.css

@@ -0,0 +1,364 @@
+@layer config.easings {
+    :where(html) {
+        --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+        --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+        --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+        --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+        --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+        --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
+        --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
+        --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
+        --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
+        --ease-in-5: cubic-bezier(1, 0, 1, 1);
+        --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+        --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+        --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+        --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
+        --ease-out-5: cubic-bezier(0, 0, 0, 1);
+        --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
+        --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
+        --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
+        --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
+        --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
+        --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+        --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+        --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+        --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+        --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+        --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1);
+        --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1);
+        --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1);
+        --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1);
+        --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1);
+        --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
+        --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
+        --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
+        --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
+        --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
+        --ease-step-1: steps(2);
+        --ease-step-2: steps(3);
+        --ease-step-3: steps(4);
+        --ease-step-4: steps(7);
+        --ease-step-5: steps(10);
+        --ease-elastic-1: var(--ease-elastic-out-1);
+        --ease-elastic-2: var(--ease-elastic-out-2);
+        --ease-elastic-3: var(--ease-elastic-out-3);
+        --ease-elastic-4: var(--ease-elastic-out-4);
+        --ease-elastic-5: var(--ease-elastic-out-5);
+        --ease-squish-1: var(--ease-elastic-in-out-1);
+        --ease-squish-2: var(--ease-elastic-in-out-2);
+        --ease-squish-3: var(--ease-elastic-in-out-3);
+        --ease-squish-4: var(--ease-elastic-in-out-4);
+        --ease-squish-5: var(--ease-elastic-in-out-5);
+        --ease-spring-1: linear(0,
+                0.006,
+                0.025 2.8%,
+                0.101 6.1%,
+                0.539 18.9%,
+                0.721 25.3%,
+                0.849 31.5%,
+                0.937 38.1%,
+                0.968 41.8%,
+                0.991 45.7%,
+                1.006 50.1%,
+                1.015 55%,
+                1.017 63.9%,
+                1.001);
+        --ease-spring-2: linear(0,
+                0.007,
+                0.029 2.2%,
+                0.118 4.7%,
+                0.625 14.4%,
+                0.826 19%,
+                0.902,
+                0.962,
+                1.008 26.1%,
+                1.041 28.7%,
+                1.064 32.1%,
+                1.07 36%,
+                1.061 40.5%,
+                1.015 53.4%,
+                0.999 61.6%,
+                0.995 71.2%,
+                1);
+        --ease-spring-3: linear(0,
+                0.009,
+                0.035 2.1%,
+                0.141 4.4%,
+                0.723 12.9%,
+                0.938 16.7%,
+                1.017,
+                1.077,
+                1.121,
+                1.149 24.3%,
+                1.159,
+                1.163,
+                1.161,
+                1.154 29.9%,
+                1.129 32.8%,
+                1.051 39.6%,
+                1.017 43.1%,
+                0.991,
+                0.977 51%,
+                0.974 53.8%,
+                0.975 57.1%,
+                0.997 69.8%,
+                1.003 76.9%,
+                1);
+        --ease-spring-4: linear(0,
+                0.009,
+                0.037 1.7%,
+                0.153 3.6%,
+                0.776 10.3%,
+                1.001,
+                1.142 16%,
+                1.185,
+                1.209 19%,
+                1.215 19.9% 20.8%,
+                1.199,
+                1.165 25%,
+                1.056 30.3%,
+                1.008 33%,
+                0.973,
+                0.955 39.2%,
+                0.953 41.1%,
+                0.957 43.3%,
+                0.998 53.3%,
+                1.009 59.1% 63.7%,
+                0.998 78.9%,
+                1);
+        --ease-spring-5: linear(0,
+                0.01,
+                0.04 1.6%,
+                0.161 3.3%,
+                0.816 9.4%,
+                1.046,
+                1.189 14.4%,
+                1.231,
+                1.254 17%,
+                1.259,
+                1.257 18.6%,
+                1.236,
+                1.194 22.3%,
+                1.057 27%,
+                0.999 29.4%,
+                0.955 32.1%,
+                0.942,
+                0.935 34.9%,
+                0.933,
+                0.939 38.4%,
+                1 47.3%,
+                1.011,
+                1.017 52.6%,
+                1.016 56.4%,
+                1 65.2%,
+                0.996 70.2%,
+                1.001 87.2%,
+                1);
+        --ease-bounce-1: linear(0,
+                0.004,
+                0.016,
+                0.035,
+                0.063,
+                0.098,
+                0.141,
+                0.191,
+                0.25,
+                0.316,
+                0.391 36.8%,
+                0.563,
+                0.766,
+                1 58.8%,
+                0.946,
+                0.908 69.1%,
+                0.895,
+                0.885,
+                0.879,
+                0.878,
+                0.879,
+                0.885,
+                0.895,
+                0.908 89.7%,
+                0.946,
+                1);
+        --ease-bounce-2: linear(0,
+                0.004,
+                0.016,
+                0.035,
+                0.063,
+                0.098,
+                0.141 15.1%,
+                0.25,
+                0.391,
+                0.562,
+                0.765,
+                1,
+                0.892 45.2%,
+                0.849,
+                0.815,
+                0.788,
+                0.769,
+                0.757,
+                0.753,
+                0.757,
+                0.769,
+                0.788,
+                0.815,
+                0.85,
+                0.892 75.2%,
+                1 80.2%,
+                0.973,
+                0.954,
+                0.943,
+                0.939,
+                0.943,
+                0.954,
+                0.973,
+                1);
+        --ease-bounce-3: linear(0,
+                0.004,
+                0.016,
+                0.035,
+                0.062,
+                0.098,
+                0.141 11.4%,
+                0.25,
+                0.39,
+                0.562,
+                0.764,
+                1 30.3%,
+                0.847 34.8%,
+                0.787,
+                0.737,
+                0.699,
+                0.672,
+                0.655,
+                0.65,
+                0.656,
+                0.672,
+                0.699,
+                0.738,
+                0.787,
+                0.847 61.7%,
+                1 66.2%,
+                0.946,
+                0.908,
+                0.885 74.2%,
+                0.879,
+                0.878,
+                0.879,
+                0.885 79.5%,
+                0.908,
+                0.946,
+                1 87.4%,
+                0.981,
+                0.968,
+                0.96,
+                0.957,
+                0.96,
+                0.968,
+                0.981,
+                1);
+        --ease-bounce-4: linear(0,
+                0.004,
+                0.016 3%,
+                0.062,
+                0.141,
+                0.25,
+                0.391,
+                0.562 18.2%,
+                1 24.3%,
+                0.81,
+                0.676 32.3%,
+                0.629,
+                0.595,
+                0.575,
+                0.568,
+                0.575,
+                0.595,
+                0.629,
+                0.676 48.2%,
+                0.811,
+                1 56.2%,
+                0.918,
+                0.86,
+                0.825,
+                0.814,
+                0.825,
+                0.86,
+                0.918,
+                1 77.2%,
+                0.94 80.6%,
+                0.925,
+                0.92,
+                0.925,
+                0.94 87.5%,
+                1 90.9%,
+                0.974,
+                0.965,
+                0.974,
+                1);
+        --ease-bounce-5: linear(0,
+                0.004,
+                0.016 2.5%,
+                0.063,
+                0.141,
+                0.25 10.1%,
+                0.562,
+                1 20.2%,
+                0.783,
+                0.627,
+                0.534 30.9%,
+                0.511,
+                0.503,
+                0.511,
+                0.534 38%,
+                0.627,
+                0.782,
+                1 48.7%,
+                0.892,
+                0.815,
+                0.769 56.3%,
+                0.757,
+                0.753,
+                0.757,
+                0.769 61.3%,
+                0.815,
+                0.892,
+                1 68.8%,
+                0.908 72.4%,
+                0.885,
+                0.878,
+                0.885,
+                0.908 79.4%,
+                1 83%,
+                0.954 85.5%,
+                0.943,
+                0.939,
+                0.943,
+                0.954 90.5%,
+                1 93%,
+                0.977,
+                0.97,
+                0.977,
+                1);
+
+        --transition-duration-instant: 0ms;
+        --transition-duration-short: 100ms;
+        --transition-duration-base: 200ms;
+        --transition-duration-long: 300ms;
+        --transition-duration-entry: 0s;
+        --transition-duration-exit: 0s;
+
+        --transition-target-scale: 0.9;
+
+        @media (--motionNotOK) {
+            --transition-duration-instant: 0ms;
+            --transition-duration-short: 0ms;
+            --transition-duration-base: 0ms;
+            --transition-duration-long: 0ms;
+            --transition-duration-entry: 0s;
+            --transition-duration-exit: 0s;
+        }
+    }
+}

package/src/styles/utils/layouts.css

@@ -0,0 +1,298 @@
+@layer utils {
+    /* Layout classes that handle 80% of the layout*/
+    :where(.nc-box) {
+        padding: var(--spacing-base);
+
+        &.-bordered {
+            border: var(--border-width-thin) solid var(--border, var(--color-border-base));
+            border-radius: var(--border-radius-medium);
+        }
+
+        &.-tiny {
+            padding: var(--spacing-tiny);
+        }
+
+        &.-nearest {
+            padding: var(--spacing-nearest);
+        }
+
+        &.-near {
+            padding: var(--spacing-near);
+        }
+
+        &.-base {
+            padding: var(--spacing-base);
+        }
+
+        &.-far {
+            padding: var(--spacing-far);
+        }
+
+        &.-farthest {
+            padding: var(--spacing-farthest);
+        }
+    }
+
+    :where(.nc-stack) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-base);
+        align-items: flex-start;
+
+        &.-inherit {
+            gap: var(--stack-gap, var(--spacing-base));
+        }
+
+        &.-stretched {
+            inline-size: 100%;
+
+            & > * {
+                inline-size: 100%;
+            }
+        }
+
+        &.-contained > * {
+            max-inline-size: 100%;
+        }
+    }
+
+    :where(.nc-flow) {
+        > * + * {
+            margin-block-start: var(--flow-gap, 0.6lh);
+        }
+
+        > * {
+            max-inline-size: var(--flow-base-meassure, 72ch);
+        }
+
+        > *:is(h1, h2, h3, h4, h5, h6) {
+            max-inline-size: var(--flow-headline-meassure, 32ch);
+            --flow-gap: 1.3lh;
+        }
+
+        > *:is(h1, h2, h3, h4, h5, h6) + p {
+            --flow-gap: 0.5lh;
+        }
+
+        > p + p {
+            --flow-gap: 0.8lh;
+        }
+
+        > figure {
+            margin-inline: 0;
+            margin-block: 1lh;
+        }
+
+        .breakAfter {
+            margin-block-end: auto;
+        }
+    }
+
+    /**
+     * Center your content.
+     * Can be used as a layout wrapper.
+     */
+    :where(.nc-center) {
+        box-sizing: content-box;
+        margin-inline: auto;
+        max-inline-size: var(--center-measure, max-content);
+        padding-inline: var(--center-padding, 0);
+        position: relative;
+    }
+
+    /**
+      A consistently spaced section to bring some white space to your blocks.
+     */
+    :where(.nc-region) {
+        padding-block: var(--region-space, var(--spacing-farthest));
+    }
+
+    :where(.nc-cluster) {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--spacing-base);
+        align-items: flex-start;
+
+        &.-inherit {
+            gap: var(--cluster-gap, var(--spacing-base));
+        }
+
+        &.-centered {
+            align-items: center;
+        }
+
+        &.-nowrap {
+            flex-wrap: nowrap;
+        }
+
+        &.-between {
+            justify-content: space-between;
+        }
+    }
+
+    :where(.nc-with-sidebar) {
+        inline-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: var(--with-sidebar-gap, var(--spacing-far));
+
+        & > [data-aside] {
+            flex-grow: 1;
+            min-width: min-content;
+            flex-basis: var(--with-sidebar-target-width, 20rem);
+        }
+
+        & > [data-grow] {
+            flex-basis: 0;
+            flex-grow: 999;
+            min-width: var(--with-sidebar-min-size, 50%);
+        }
+
+        &[data-direction="rtl"] {
+            flex-direction: row-reverse;
+        }
+
+        &.-centered {
+            align-items: center;
+        }
+    }
+
+    /* AUTO GRID
+    Related Every Layout: https://every-layout.dev/layouts/grid/
+    More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
+    A flexible layout that will create an auto-fill grid with
+    configurable grid item sizes
+
+    CUSTOM PROPERTIES AND CONFIGURATION
+    --gutter (var(--space-s-m)): This defines the space
+    between each item.
+
+    --grid-min-item-size (14rem): How large each item should be
+    ideally, as a minimum.
+
+    --grid-placement (auto-fill): Set either auto-fit or auto-fill
+    to change how empty grid tracks are handled
+    */
+    :where(.nc-grid) {
+        display: grid;
+        grid-template-columns: repeat(
+                var(--grid-placement, auto-fill),
+                minmax(var(--grid-min-item-size, 16rem), 1fr)
+            );
+        gap: var(--grid-gap, var(--spacing-base));
+
+        /* A split 50/50 layout */
+
+        &[data-layout="50-50"] {
+            --grid-placement: auto-fit;
+            --grid-min-item-size: clamp(16rem, 50vw, 33rem);
+        }
+
+        /* Three column grid layout */
+
+        &[data-layout="thirds"] {
+            --grid-placement: auto-fit;
+            --grid-min-item-size: clamp(16rem, 33%, 20rem);
+        }
+    }
+
+    /*
+    SWITCHER
+    More info: https://every-layout.dev/layouts/switcher/
+    A layout that allows you to lay **3** items next to each other
+    until there is not enough horizontal space to allow that.
+
+    CUSTOM PROPERTIES AND CONFIGURATION
+    --gutter (var(--space-size-1)): This defines the space
+    between each item
+
+    --switcher-target-container-width (40rem): How large the container
+    needs to be to allow items to sit inline with each other
+
+    --switcher-vertical-alignment How items should align vertically.
+    Can be any acceptable flexbox alignment value.
+    */
+    :where(.nc-switcher) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--switcher-gap, var(--spacing-base));
+        align-items: var(--switcher-vertical-alignment, flex-start);
+
+        & > * {
+            flex-grow: 1;
+            flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
+        }
+
+        /* Max 2 items,
+        so anything greater than 2 is ful width */
+
+        & > :nth-child(n + 4) {
+            flex-basis: 100%;
+        }
+    }
+
+    /* PILE
+     * Pile items on top of each other Prefer this over position absolute.
+     */
+    :where(.nc-pile) {
+        display: grid;
+        place-items: center;
+        grid: [pile] 1fr / [pile] 1fr;
+
+        & > * {
+            grid-area: pile;
+        }
+    }
+
+    :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher) {
+        &.-inherit {
+            gap: inherit;
+        }
+
+        &.-tiny {
+            gap: var(--spacing-tiny);
+        }
+
+        &.-nearest {
+            gap: var(--spacing-nearest);
+        }
+
+        &.-near {
+            gap: var(--spacing-near);
+        }
+
+        &.-base {
+            gap: var(--spacing-base);
+        }
+
+        &.-far {
+            gap: var(--spacing-far);
+        }
+
+        &.-farthest {
+            gap: var(--spacing-farthest);
+        }
+
+        &.-nogap {
+            gap: 0;
+        }
+    }
+
+    :where(.nc-ram-grid) {
+        --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+        --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+        --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+        --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+        --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+
+        display: grid;
+        row-gap: var(--_nc-ram-grid-gap-row);
+        column-gap: var(--_nc-ram-grid-gap-column);
+        grid-template-columns: repeat(
+                var(--_nc-ram-grid-repeat-count),
+                minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr)
+            );
+    }
+}

package/src/styles/utils/media.css

@@ -0,0 +1,55 @@
+@custom-media --motionOK (prefers-reduced-motion: no-preference);
+@custom-media --motionNotOK (prefers-reduced-motion: reduce);
+@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
+@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
+@custom-media --useDataOK (prefers-reduced-data: no-preference);
+@custom-media --useDataNotOK (prefers-reduced-data: reduce);
+
+@custom-media --OSdark (prefers-color-scheme: dark);
+@custom-media --OSlight (prefers-color-scheme: light);
+
+@custom-media --highContrast (prefers-contrast: more);
+@custom-media --lowContrast (prefers-contrast: less);
+
+@custom-media --portrait (orientation: portrait);
+@custom-media --landscape (orientation: landscape);
+
+@custom-media --HDcolor (dynamic-range: high);
+
+@custom-media --touch (hover: none) and (pointer: coarse);
+@custom-media --stylus (hover: none) and (pointer: fine);
+@custom-media --pointer (hover) and (pointer: coarse);
+@custom-media --mouse (hover) and (pointer: fine);
+
+@custom-media --xxs-only (0px <= width <= 240px);
+@custom-media --xxs-n-above (width >= 240px);
+@custom-media --xxs-n-below (width <= 240px);
+@custom-media --xxs-phone (--xxs-only) and (--portrait);
+
+@custom-media --xs-only (240px <= width <= 360px);
+@custom-media --xs-n-above (width >= 360px);
+@custom-media --xs-n-below (width <= 360px);
+@custom-media --xs-phone (--xs-only) and (--portrait);
+
+@custom-media --sm-only (360px <= width <= 480px);
+@custom-media --sm-n-above (width >= 480px);
+@custom-media --sm-n-below (width <= 480px);
+@custom-media --sm-phone (--sm-only) and (--portrait);
+
+@custom-media --md-only (480px <= width <= 768px);
+@custom-media --md-n-above (width >= 768px);
+@custom-media --md-n-below (width <= 768px);
+@custom-media --md-phone (--md-only) and (--portrait);
+
+@custom-media --lg-only (768px <= width <= 1024px);
+@custom-media --lg-n-above (width >= 1024px);
+@custom-media --lg-n-below (width <= 1024px);
+@custom-media --lg-phone (--lg-only) and (--portrait);
+
+@custom-media --xl-only (1024px <= width <= 1440px);
+@custom-media --xl-n-above (width >= 1440px);
+@custom-media --xl-n-below (width <= 1440px);
+
+@custom-media --xxl-only (1440px <= width <= 1920px);
+@custom-media --xxl-n-above (width >= 1920px);
+@custom-media --xxl-n-below (width <= 1920px);