superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/components/_theme-selector.scss

@@ -0,0 +1,221 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.sd-theme-selector__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: dimensions.$sd-base-increment * 2;
+    flex-grow: 1;
+    align-self: stretch;
+}
+
+.sd-theme-selector__list--small {
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+
+.sd-theme-selector__list--medium {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+
+.sd-theme-selector__list--large {
+    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+    gap: dimensions.$sd-base-increment * 3;
+}
+
+.sd-theme-selector__item {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    position: relative;
+    overflow: visible;
+    transition: all 0.3s ease;
+
+    &:disabled {
+        opacity: 0.75;
+        cursor: not-allowed;
+    }
+}
+
+.sd-theme-selector__item-thumb {
+    display: flex;
+    aspect-ratio: 1.66;
+    border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
+    overflow: hidden;
+
+    svg {
+        width: 100%;
+        height: auto;
+    }
+}
+
+.sd-theme-selector__item-action {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: dimensions.$sd-base-increment;
+    height: dimensions.$sd-base-increment * 5;
+    border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
+    overflow: hidden;
+    color: var(--color-text);
+    padding: 0 dimensions.$sd-base-increment * 1.5;
+    box-shadow: 0 -3px 6px -2px hsla(0, 0%, 0%, 0.12);
+}
+
+.sd-theme-selector__input {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 0px;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    padding: 0px;
+    border-width: 0px;
+    overflow: hidden;
+    outline: none !important;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.sd-theme-selector__label {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 0px;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border-radius: var(--b-radius--medium);
+    border: 1px solid var(--sd-colour-line--medium);
+    transition: all 0.3s ease;
+    font-size: 1px;
+    color: transparent;
+    user-select: none;
+}
+
+.sd-theme-selector__label-text {
+    font-size: 1.4rem;
+    color: var(--color-text);
+}
+
+.sd-theme-selector__item {
+    input:hover {
+
+        &~.sd-check-new,
+        &~.sd-radio-new {
+            border-color: var(--color-checkbox-border-hover);
+        }
+
+        &:not(:checked) {
+            &~label {
+                box-shadow: var(--sd-shadow--z1);
+                border-color: var(--sd-colour-line--strong);
+            }
+
+        }
+    }
+
+    input:checked {
+        &~.sd-radio-new {
+            border-color: colors.$sd-colour-interactive;
+            background: colors.$sd-colour-interactive;
+
+            &::after {
+                opacity: 1;
+                transform: scale(1, 1);
+            }
+        }
+
+        &~.sd-radio-new {
+            background: transparent;
+        }
+
+        &~label {
+            box-shadow: 0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
+        }
+
+        &~.sd-theme-selector__label-text {
+            color: colors.$sd-colour-interactive;
+        }
+    }
+
+    input:focus-visible {
+        &~label {
+            box-shadow: 0 0 0 2px var(--sd-colour-interactive--alpha-30);
+        }
+    }
+
+    input:disabled {
+        z-index: 1;
+        cursor: not-allowed;
+        pointer-events: none;
+
+        &~label {
+            z-index: 2;
+            cursor: not-allowed;
+            box-shadow: none !important;
+            border-color: var(--sd-colour-line--light) !important;
+        }
+
+        &~.sd-theme-selector__label-text {
+            opacity: 0.4;
+        }
+
+        &~.sd-radio-new {
+            opacity: 0.4;
+            border-color: var(--color-checkbox-border) !important;
+        }
+    }
+}
+
+[data-theme="dark-ui"] {
+    input[type="time"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+    }
+
+    figure[data-theme="dark-ui"] {
+        --color-text: hsla(0, 0%, 96%, 1);
+        --color-text-light: hsla(214, 13%, 96%, 0.75);
+        --color-text-lighter: hsla(214, 13%, 96%, 0.55);
+        --color-icon-default: hsla(214, 13%, 96%, 0.65);
+
+        --sd-colour-panel-bg--100: hsla(214, 13%, 16%, 1);
+        --sd-colour-interactive: hsla(160, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 25%, 1);
+        --color-icon-default: hsla(214, 13%, 96%, 0.65);
+        --sd-colour--shadow-line: hsla(214, 13%, 74%, 0.2);
+        --sd-colour-line--medium: hsla(214, 13%, 70%, 0.2);
+
+    }
+
+    figure[data-theme="light-ui"] {
+        --color-text: hsla(0, 0%, 20%, 1);
+        --color-text-light: hsla(214, 13%, 20%, 0.75);
+        --color-text-lighter: hsla(214, 13%, 20%, 0.55);
+        --color-icon-default: hsla(214, 13%, 30%, 1);
+
+        --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
+        --sd-colour-interactive: hsla(198, 50%, 50%, 1);
+        --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 85%, 1);
+        --sd-colour--shadow-line: hsla(214, 13%, 70%, 0);
+        --sd-colour-line--medium: hsla(214, 13%, 20%, 0.2);
+
+
+    }
+
+    figure[data-theme="contrast-light-ui"] {
+        --color-text: hsla(0, 0%, 0%, 1);
+        --color-text-light: hsla(214, 13%, 10%, 0.85);
+        --color-text-lighter: hsla(214, 13%, 10%, 0.65);
+        --color-icon-default: hsla(214, 13%, 20%, 1);
+
+        --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
+        --sd-colour-sidebar-menu--00: hsla(214, 13%, 90%, 1);
+        --sd-colour--shadow-line: hsla(214, 13%, 60%, 0);
+        --sd-colour-line--medium: hsla(214, 13%, 20%, 0.4);
+    }
+}

package/app/styles/components/sd-slider.scss

@@ -0,0 +1,125 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-color .4s cubic-bezier(.25,.8,.25,1), opacity .4s cubic-bezier(.25,.8,.25,1);
+
+.sd-slider__range, input[type="range"] {
+    width: 100%;
+    position: relative;
+    height: 0.2rem;
+    margin-block-start: 1.25rem;
+    margin-block-end: 1.25rem;
+    background-color: rgba(123, 123, 123, 0.5);
+    cursor: pointer;
+    user-select: none;
+    touch-action: none;
+    border: 0;
+    padding: 0;
+    min-height: 0;
+    -webkit-appearance: none;
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 1.6rem;
+        height: 1.6rem;
+        transform: scale(1);
+        border-radius: dimensions.$border-radius__base--full;
+        background-color: colors.$sd-colour-interactive;
+        transition: $sd-slider-transition;
+        touch-action: manipulation;
+        cursor: pointer;
+        cursor: -webkit-grab;
+        cursor: grab;
+
+        &:hover {
+            background-color: var(--sd-colour-interactive--darken-10);
+        }
+
+        &:active {
+            transform: scale(1.4);
+            cursor: -webkit-grabbing;
+            cursor: grabbing;
+        }
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 1px rgba(123, 123, 123, 0.3);
+
+        &::-webkit-slider-thumb {
+            background-color: var(--sd-colour-interactive--darken-10);
+        }
+    }
+}
+
+.sd-slider {
+    position: relative;
+    height: 0.2rem;
+    margin-block-start: 1.25rem;
+    margin-block-end: 2.25rem;
+    background-color: rgba(123, 123, 123, 0.5);
+    cursor: pointer;
+    user-select: none;
+    touch-action: none;
+    -webkit-appearance: none;
+}
+
+.sd-slider__handle {
+    position: absolute;
+    inset-block-start: -0.7rem;
+    inset-inline-start: 0;
+    z-index: 1;
+    display: inline-block;
+    width: 1.6rem;
+    height: 1.6rem;
+    transform: scale(1);
+    border-radius: dimensions.$border-radius__base--full;
+    background-color: colors.$sd-colour-interactive;
+    transition: $sd-slider-transition;
+    touch-action: manipulation;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    cursor: grab;
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--darken-10);
+    }
+}
+
+.sd-slider__handle:active, .sd-slider__handle--active {
+    transform: scale(1.4);
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.sd-slider__focus-ring {
+    position: absolute;
+    inset-block-start: -1.4rem;
+    inset-inline-start: 0;
+    z-index: 0;
+    margin-inline-start: -0.7rem;
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    transform: scale(0);
+    border-radius: dimensions.$border-radius__base--full;
+    background-color: var(--sd-colour-interactive--alpha-30);
+    opacity: 0;
+    transition: $sd-slider-transition;
+    
+    &:focus {
+        transform: scale(1);
+        opacity: 1;
+        background-color: var(--sd-colour-interactive--darken-10);
+    }
+}
+
+.sd-slider__fill {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    display: inline-block;
+    max-width: 100%;
+    height: 0.2rem;
+    background-color: colors.$sd-colour-interactive;
+    transition: $sd-slider-transition;
+}

package/app/styles/design-tokens/_brand-colors.scss

@@ -0,0 +1,36 @@
+:root {
+    --brand-primary-l-base: 60%;
+    --brand-primary-c-base: 40;
+
+    --brand-secondary-l-base: 60%;
+    --brand-secondary-c-base: 40  ;
+
+    // Brand primary
+    --brand-primary: lch(var(--brand-primary-l-base) var(--brand-primary-c-base) 237);
+    --brand-primary-100: lch(from var(--brand-primary) calc(l + 36) calc(c - 34) h);
+    --brand-primary-200: lch(from var(--brand-primary) calc(l + var(--l-200-add)) calc(c - 32) h);
+    --brand-primary-300: lch(from var(--brand-primary) calc(l + var(--l-300-add)) calc(c - 22) h);
+    --brand-primary-400: lch(from var(--brand-primary) calc(l + var(--l-400-add)) calc(c - 10) h);
+    --brand-primary-600: lch(from var(--brand-primary) calc(l - var(--l-600-remove)) calc(c + 0) h);
+    --brand-primary-700: lch(from var(--brand-primary) calc(l - var(--l-700-remove)) calc(c + 0) h);
+    --brand-primary-800: lch(from var(--brand-primary) calc(l - 28) calc(c + 0) h);
+    --brand-primary-950: lch(from var(--brand-primary) calc(l - 50) calc(c - 10) h);
+    --brand-primary-a32: hsl(from var(--brand-primary) h s l / .32);
+    --brand-primary-a24: hsl(from var(--brand-primary) h s l / .24);
+    --brand-primary-a16: hsl(from var(--brand-primary) h s l / .16);
+    --brand-primary-a12: hsl(from var(--brand-primary) h s l / .12);
+
+    // Brand secondary
+    --brand-secondary: lch(var(--brand-secondary-l-base) var(--brand-secondary-c-base) 166);
+    --brand-secondary-200: lch(from var(--brand-secondary) calc(l + var(--l-200-add)) calc(c - 36) h);
+    --brand-secondary-300: lch(from var(--brand-secondary) calc(l + var(--l-300-add)) calc(c - 20) h);
+    --brand-secondary-400: lch(from var(--brand-secondary) calc(l + var(--l-400-add)) calc(c - 8) h);
+    --brand-secondary-600: lch(from var(--brand-secondary) calc(l - var(--l-600-remove)) calc(c + 0) h);
+    --brand-secondary-700: lch(from var(--brand-secondary) calc(l - var(--l-700-remove)) calc(c + 0) h);
+    --brand-secondary-800: lch(from var(--brand-secondary) calc(l - 28) calc(c + 0) h);
+    --brand-secondary-950: lch(from var(--brand-secondary) calc(l - 40) calc(c + 10) h);
+    --brand-secondary-a32: hsl(from var(--brand-secondary) h s l / .32);
+    --brand-secondary-a24: hsl(from var(--brand-secondary) h s l / .24);
+    --brand-secondary-a16: hsl(from var(--brand-secondary) h s l / .16);
+    --brand-secondary-a12: hsl(from var(--brand-secondary) h s l / .12);
+}

package/app/styles/design-tokens/_component-tokens.scss

@@ -0,0 +1,11 @@
+:root,
+[data-theme="dark-ui"],
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
+    // Drag Handle
+    --drag-handle-boxed-color-bg-normal: var(--sd-colour-line--medium);
+    --drag-handle-boxed-color-bg-hover: var(--sd-colour-line--strong);
+    --drag-handle-boxed-color-bg-active: var(--sd-colour-interactive);
+    --drag-handle-boxed-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+    --drag-handle-boxed-padding: var(--space--1);
+}

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -0,0 +1,145 @@
+// DESIGN TOKENS
+
+:root {
+    // GENERAL
+    --base-increment: 0.8rem; // 8px
+    --space--0: 0; // 0px
+    --space--0-5: calc(0.5 * var(--base-increment)); // 4px
+    --space--1: calc(1 * var(--base-increment)); // 8px
+    --space--1-5: calc(1.5 * var(--base-increment)); // 12px
+    --space--2: calc(2 * var(--base-increment)); // 16px
+    --space--3: calc(3 * var(--base-increment)); // 24px;
+    --space--4: calc(4 * var(--base-increment)); // 32px;
+    --space--5: calc(5 * var(--base-increment)); // 40px;
+    --space--6: calc(6 * var(--base-increment)); // 48px;
+    --space--7: calc(7 * var(--base-increment)); // 56px;
+    --space--8: calc(8 * var(--base-increment)); // 64px;
+
+    --gap--none: 0; // 0px
+    --gap-0: 0;
+    --gap--x-small: calc(0.5 * var(--base-increment)); // 4px
+    --gap-0-5: calc(0.5 * var(--base-increment)); // 4px
+    --gap--small: calc(1 * var(--base-increment)); // 8px
+    --gap-1: calc(1 * var(--base-increment)); // 8px
+    --gap--medium-small: calc(1.5 * var(--base-increment)); // 12px
+    --gap-1-5: calc(1.5 * var(--base-increment)); // 12px
+    --gap--medium: calc(2 * var(--base-increment)); // 16px
+    --gap-2: calc(2 * var(--base-increment)); // 16px
+    --gap--large: calc(3 * var(--base-increment)); // 24px;
+    --gap-3: calc(3 * var(--base-increment)); // 24px;
+    --gap--x-large: calc(4 * var(--base-increment)); // 32px;
+    --gap-4: calc(4 * var(--base-increment)); // 32px;
+    --gap--xx-large: calc(5 * var(--base-increment)); // 40px;
+    --gap-5: calc(5 * var(--base-increment)); // 40px;
+
+    --gap--auto: auto;
+
+    // BORDER RADIUS
+    --b-radius--x-small: 2px;
+    --b-radius--small: 3px;
+    --b-radius--medium: 4px;
+    --b-radius--large: 6px;
+    --b-radius--x-large: 8px;
+    --b-radius--full: 9999px;
+
+    // WIDTHS
+    --width__container--xxx-small: 20rem;
+    --width__container--xx-small: 24rem;
+    --width__container--x-small: 32rem;
+    --width__container--small: 40rem;
+    --width__container--medium: 48rem;
+    --width__container--large: 56rem;
+    --width__container--x-large: 72rem;
+    --width__container--xx-large: 80rem;
+    --width__container--xxx-large: 120rem;
+    --width__container--full: 100vw;
+
+    // MODAL SIZES
+    --width__modal--small: 40rem;
+    --width__modal--medium: 64rem;
+    --width__modal--large: 80rem;
+    --width__modal--x-large: 80vw;
+
+    // TEXT SIZE
+    --text-size--base: 1rem;
+    --text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
+    --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
+    --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
+    --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
+    --text-size-large: calc(var(--text-size--base) * 2); // 20px;
+    --text-size-x-large: calc(var(--text-size--base) * 2.4); // 24px;
+    --text-size-xx-large: calc(var(--text-size--base) * 3.2); // 32px;
+
+    // LINE HEIGHT
+    --l-height-none: 1;
+    --l-height-xs: 1.1;    
+    --l-height-sm: 1.2;
+    --l-height-md: 1.4;
+    --l-height-lg: 1.5;
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.12));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--none: drop-shadow(0 0 0 transparent);
+
+    // FORM ELEMENTS
+    // Size
+    --form-element-height-default: var(--space--4);
+    --form-element-height-small: var(--space--3);
+    --form-element-height-large: var(--space--5);
+
+    // TRANSITIONS
+    --transition__menu-item: background-color ease 0.1s
+}
+
+
+:root,
+[data-theme="light-ui"] {
+    --sd-shadow-outline: hsla(0, 0%, 0%, 0);
+    --sd-shadow-outline--2: hsl(214, 13%, 0%, 0.06);
+    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
+    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
+    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.12), 0 8px 12px hsla(0, 0%, 0%, 0.16);
+    --sd-shadow__sliding-toolbar: 0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
+    --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+}
+
+[data-theme="dark-ui"],
+.dark-ui {
+    --sd-shadow-outline: hsl(214, 13%, 60%, 0.28);
+    --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
+    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
+    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26);
+    --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.36), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.36), 0 2px 6px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.36), 0 3px 8px hsla(0, 0%, 0%, 0.48), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 6px 16px hsla(0, 0%, 0%, 0.6), 0 0 1px hsla(0, 0%, 0%, 0.2);
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.28)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.50)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.44)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.64)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+
+}
+
+.sd-top-menu,
+#top-menu {
+    .navbtn,
+    .sd-navbtn {
+        --color-navbutton-border: hsla(214, 13%, 70%, 0.2) !important;
+        --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.2) !important;
+    }
+}