@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/grid/_index.scss

@@ -1,147 +0,0 @@
-@use "sass:string";
-@use "sass:math";
-
-/* ==========================================================================
-   Grid
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid {
-    display: flex;
-
-    &--orientation-horizontal {
-        flex-direction: row;
-    }
-
-    &--orientation-vertical {
-        flex-direction: column;
-    }
-}
-
-/* Grid wrap
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid--wrap-nowrap {
-    flex-wrap: nowrap;
-}
-
-.#{$lumx-base-prefix}-grid--wrap-wrap {
-    flex-wrap: wrap;
-}
-
-.#{$lumx-base-prefix}-grid--wrap-wrap-reverse {
-    flex-wrap: wrap-reverse;
-}
-
-/* Grid alignment
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-top,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-left {
-    align-items: flex-start;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-center,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-center {
-    align-items: center;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-bottom,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-right {
-    align-items: flex-end;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-left,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-top {
-    justify-content: flex-start;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-center,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-center {
-    justify-content: center;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-right,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-bottom {
-    justify-content: flex-end;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-space-around,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-space-around {
-    justify-content: space-around;
-}
-
-.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-space-between,
-.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-space-between {
-    justify-content: space-between;
-}
-
-/* Grid item
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid-item {
-    position: relative;
-    flex: 1 1 auto;
-
-    &--align-start {
-        align-self: flex-start;
-    }
-
-    &--align-center {
-        align-self: center;
-    }
-
-    &--align-end {
-        align-self: end;
-    }
-}
-
-/* Grid item order
-   ========================================================================== */
-
-@for $i from 1 through 12 {
-    .#{$lumx-base-prefix}-grid-item--order-#{$i} {
-        order: $i;
-    }
-}
-
-/* Grid spacings
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid--gutter-regular {
-    margin: 0 (math.div($lumx-spacing-unit, 2) * -1);
-
-    & > .#{$lumx-base-prefix}-grid-item {
-        padding: 0 math.div($lumx-spacing-unit, 2);
-    }
-}
-
-.#{$lumx-base-prefix}-grid--gutter-big {
-    margin: 0 ($lumx-spacing-unit * -1);
-
-    & > .#{$lumx-base-prefix}-grid-item {
-        padding: 0 $lumx-spacing-unit;
-    }
-}
-
-.#{$lumx-base-prefix}-grid--gutter-huge {
-    margin: 0 ($lumx-spacing-unit * 1.5) * -1;
-
-    & > .#{$lumx-base-prefix}-grid-item {
-        padding: 0 $lumx-spacing-unit * 1.5;
-    }
-}
-
-/* Grid widths
-   ========================================================================== */
-
-@for $i from 1 through 12 {
-    .#{$lumx-base-prefix}-grid--orientation-horizontal > .#{$lumx-base-prefix}-grid-item--width-#{$i} {
-        flex: string.unquote("0 0 #{math.div(100, 12) * $i + "%"}");
-        max-width: #{math.div(100, 12) * $i + "%"};
-    }
-
-    .#{$lumx-base-prefix}-grid--orientation-vertical > .#{$lumx-base-prefix}-grid-item--width-#{$i} {
-        flex: string.unquote("0 0 #{math.div(100, 12) * $i + "%"}");
-        max-height: #{math.div(100, 12) * $i + "%"};
-    }
-}

package/src/scss/components/grid-column/_index.scss

@@ -1,18 +0,0 @@
-/* ==========================================================================
-   Grid Column
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-grid-column {
-    --lumx-grid-column-gap: var(--lumx-spacing-unit-regular);
-    --lumx-grid-column-columns: 1;
-    --lumx-grid-column-item-min-width: 100%;
-
-    $min-width: var(--lumx-grid-column-item-min-width);
-    $gap: var(--lumx-grid-column-gap);
-    $columns: var(--lumx-grid-column-columns);
-    $column-max-width: max(min(#{$min-width}, 100%), calc((100% - (#{$columns} - 1) * #{$gap}) / #{$columns}));
-
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(#{$column-max-width}, 1fr));
-    gap: var(--lumx-grid-column-gap);
-}

package/src/scss/components/icon/_index.scss

@@ -1,106 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Icon
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-icon {
-    &--no-shape {
-        display: block;
-    }
-
-    &--has-shape {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-    }
-
-    &--path {
-        &::before {
-            display: none;
-        }
-
-        svg {
-            display: block;
-        }
-    }
-
-    &--font {
-        &::before {
-            display: block;
-        }
-
-        svg {
-            display: none;
-        }
-    }
-
-    &--has-dark-layer {
-        position: relative;
-
-        &::after {
-            position: absolute;
-            top: math.div($lumx-spacing-unit, 2);
-            right: math.div($lumx-spacing-unit, 2);
-            bottom: math.div($lumx-spacing-unit, 2);
-            left: math.div($lumx-spacing-unit, 2);
-            z-index: 0;
-            content: "";
-            background-color: lumx-color-variant("dark", "L1");
-            border-radius: 50%;
-        }
-
-        &::before,
-        svg {
-            position: relative;
-            z-index: 1;
-        }
-    }
-}
-
-/* Icon sizes
-   ========================================================================== */
-
-@each $size-key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-icon--no-shape.#{$lumx-base-prefix}-icon--size-#{$size-key} {
-        @include lumx-icon-size($size-key, false);
-    }
-}
-
-@each $size-key, $size in $lumx-icon-has-shape-size-map {
-    .#{$lumx-base-prefix}-icon--has-shape.#{$lumx-base-prefix}-icon--size-#{$size-key} {
-        @include lumx-icon-size($size-key, true);
-    }
-}
-
-/* Icon colors
-   ========================================================================== */
-
-@each $color-key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-icon--color-#{$color-key} {
-        &.#{$lumx-base-prefix}-icon--no-shape {
-            @include lumx-icon-color($color-key, false);
-        }
-
-        &.#{$lumx-base-prefix}-icon--has-shape {
-            @include lumx-icon-color($color-key, true, lumx-base-const("theme", "LIGHT"));
-
-            &.#{$lumx-base-prefix}-icon--theme-dark {
-                @include lumx-icon-color($color-key, true, lumx-base-const("theme", "DARK"));
-            }
-        }
-    }
-
-    @each $color-variant in $lumx-color-variants {
-        .#{$lumx-base-prefix}-icon--color-#{$color-key}.#{$lumx-base-prefix}-icon--color-variant-#{$color-variant} {
-            @if $color-key == "yellow" {
-                &.#{$lumx-base-prefix}-icon--has-shape {
-                    color: lumx-color-variant("dark", "L1");
-                }
-            }
-
-            color: lumx-color-variant($color-key, $color-variant);
-        }
-    }
-}

package/src/scss/components/icon/_mixins.scss

@@ -1,42 +0,0 @@
-@use "sass:map";
-
-@mixin lumx-icon-size($size, $has-shape: false) {
-    width: map.get($lumx-sizes, $size);
-    height: map.get($lumx-sizes, $size);
-
-    @if $has-shape == true {
-        font-size: map.get($lumx-sizes, map.get($lumx-icon-has-shape-size-map, $size));
-        line-height: map.get($lumx-sizes, map.get($lumx-icon-has-shape-size-map, $size));
-    } @else if $has-shape == false {
-        font-size: map.get($lumx-sizes, $size);
-        line-height: map.get($lumx-sizes, $size);
-    }
-}
-
-@mixin lumx-icon-color($color, $has-shape: false, $theme: light) {
-    @if $has-shape == true {
-        $base-color: lumx-color-variant($color, "L6");
-
-        @if $theme == lumx-base-const("theme", "DARK") and $color != "light" {
-            // adds a white background for dark theme
-            background-color: lumx-color-variant("light", "N");
-
-            // Custom color is set as a background gradient to be on top of background-color
-            background-image: linear-gradient(to right, $base-color, $base-color);
-        } @else {
-            background-color: $base-color;
-        }
-
-        @if $color == "yellow" {
-            color: lumx-color-variant("dark", "L1");
-        } @else {
-            color: lumx-color-variant($color, "N");
-        }
-    } @else if $has-shape == false {
-        @if $color == "dark" {
-            color: lumx-color-variant("dark", "L1");
-        } @else {
-            color: lumx-color-variant($color, "N");
-        }
-    }
-}

package/src/scss/components/icon/_variables.scss

@@ -1,6 +0,0 @@
-$lumx-icon-has-shape-size-map: (
-    "s": lumx-base-const("size", "XXS"),
-    "m": lumx-base-const("size", "XS"),
-    "l": lumx-base-const("size", "M"),
-    "xl": lumx-base-const("size", "L"),
-);

package/src/scss/components/image-block/_index.scss

@@ -1,108 +0,0 @@
-/* ==========================================================================
-   Image block
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-image-block {
-    $self: &;
-
-    position: relative;
-
-    &--fill-height {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-    }
-
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-
-        #{$self}--fill-height & {
-            flex-shrink: 0;
-        }
-
-        #{$self}--align-left & {
-            align-items: flex-start;
-        }
-
-        #{$self}--align-center & {
-            align-items: center;
-        }
-
-        #{$self}--align-right & {
-            align-items: flex-end;
-        }
-
-        #{$self}--caption-position-below & {
-            padding-top: $lumx-spacing-unit * 2;
-        }
-
-        #{$self}--caption-position-over & {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            padding: $lumx-spacing-unit * 2;
-        }
-
-        #{$self}--theme-light#{$self}--caption-position-over & {
-            background-color: lumx-color-variant("light", "L1");
-        }
-
-        #{$self}--theme-dark#{$self}--caption-position-over & {
-            background-color: lumx-color-variant("dark", "L1");
-        }
-    }
-
-    &__caption {
-        #{$self}--caption-position-over & {
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    &__title {
-        @include lumx-typography("subtitle1");
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "N");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-
-    &__description {
-        @include lumx-typography("body1");
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L2");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "L2");
-        }
-    }
-
-    &__tags {
-        margin-top: $lumx-spacing-unit;
-    }
-
-    &__actions {
-        position: absolute;
-        top: $lumx-spacing-unit * 1.5;
-        right: $lumx-spacing-unit * 1.5;
-    }
-}
-
-/* Image block sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-image-block--size-#{$key} {
-        width: $size;
-    }
-}

package/src/scss/components/inline-list/_index.scss

@@ -1,15 +0,0 @@
-@use "sass:list";
-
-/* ==========================================================================
-   Inline list
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-inline-list {
-    display: flex;
-    align-items: center;
-    list-style: none;
-
-    &__item {
-        display: contents;
-    }
-}

package/src/scss/components/input-helper/_index.scss

@@ -1,27 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Input helper
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-input-helper {
-    $self: &;
-
-    &--theme-light {
-        @include lumx-input-helper(lumx-base-const("theme", "LIGHT"));
-
-        @each $color in $lumx-input-helper-color-palette {
-            &#{$self}--color-#{$color} {
-                color: lumx-color-variant($color, "D1");
-            }
-        }
-    }
-
-    &--theme-dark {
-        @include lumx-input-helper(lumx-base-const("theme", "DARK"));
-    }
-
-    &__icon {
-        margin-right: math.div($lumx-spacing-unit, 2);
-    }
-}

package/src/scss/components/input-helper/_mixins.scss

@@ -1,12 +0,0 @@
-@mixin lumx-input-helper($theme) {
-    display: block;
-    font-size: var(--lumx-material-input-helper-font-size);
-    font-weight: var(--lumx-material-input-helper-font-weight);
-    line-height: var(--lumx-material-input-helper-line-height);
-
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        color: lumx-color-variant("dark", "L2");
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        color: lumx-color-variant("light", "L2");
-    }
-}

package/src/scss/components/input-helper/_variables.scss

@@ -1 +0,0 @@
-$lumx-input-helper-color-palette: ("yellow", "red", "green");

package/src/scss/components/input-label/_index.scss

@@ -1,23 +0,0 @@
-/* ==========================================================================
-   Input label
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-input-label {
-    &--is-required::before {
-        margin-right: $lumx-spacing-unit-tiny;
-        font-weight: 700;
-        content: "*";
-    }
-
-    &--theme-light {
-        @include lumx-input-label(lumx-base-const("theme", "LIGHT"));
-
-        &::before {
-            color: lumx-color-variant("red", "N");
-        }
-    }
-
-    &--theme-dark {
-        @include lumx-input-label(lumx-base-const("theme", "DARK"));
-    }
-}

package/src/scss/components/input-label/_mixins.scss

@@ -1,12 +0,0 @@
-@mixin lumx-input-label($theme) {
-    display: block;
-    font-size: var(--lumx-material-input-label-font-size);
-    font-weight: var(--lumx-material-input-label-font-weight);
-    line-height: var(--lumx-material-input-label-line-height);
-
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        color: lumx-color-variant("dark", "N");
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        color: lumx-color-variant("light", "N");
-    }
-}

package/src/scss/components/lightbox/_index.scss

@@ -1,59 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Lightbox
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-lightbox {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: map.get($lumx-base-layers, "high");
-    display: none;
-    overflow: auto;
-    background-color: lumx-color-variant("dark", "L1");
-    opacity: 1;
-    transition: opacity $lumx-lightbox-transition-duration;
-    animation: lumx-lightbox-show $lumx-lightbox-transition-duration;
-
-    @media (prefers-reduced-motion: reduce) {
-        transition: none;
-        animation: none;
-    }
-
-    &--is-shown {
-        display: block;
-    }
-
-    &--is-hidden {
-        opacity: 0;
-    }
-
-    &__close {
-        position: fixed;
-        top: $lumx-spacing-unit * 3;
-        right: $lumx-spacing-unit * 3;
-    }
-
-    &__wrapper {
-        position: absolute;
-        top: map.get($lumx-sizes, lumx-base-const("size", "L"));
-        right: map.get($lumx-sizes, lumx-base-const("size", "L"));
-        bottom: map.get($lumx-sizes, lumx-base-const("size", "L"));
-        left: map.get($lumx-sizes, lumx-base-const("size", "L"));
-        display: flex;
-        flex-direction: column;
-    }
-}
-
-@keyframes lumx-lightbox-show {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

package/src/scss/components/lightbox/_variables.scss

@@ -1 +0,0 @@
-$lumx-lightbox-transition-duration: 400ms;

package/src/scss/components/link/_index.scss

@@ -1,35 +0,0 @@
-/* ==========================================================================
-   Index
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-link {
-    @include lumx-link;
-
-    &__left-icon {
-        margin-right: $lumx-spacing-unit-tiny;
-    }
-
-    &__right-icon {
-        margin-left: $lumx-spacing-unit-tiny;
-    }
-
-    &:disabled,
-    &[aria-disabled="true"] {
-        @include lumx-state-disabled-input;
-    }
-}
-
-/* Link colors
-   ========================================================================== */
-
-@each $color-key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-link.#{$lumx-base-prefix}-link--color-#{$color-key} {
-        @include lumx-link-color($color-key, "N");
-    }
-
-    @each $color-variant in $lumx-color-variants {
-        .#{$lumx-base-prefix}-link.#{$lumx-base-prefix}-link--color-#{$color-key}.#{$lumx-base-prefix}-link--color-variant-#{$color-variant} {
-            @include lumx-link-color($color-key, $color-variant);
-        }
-    }
-}

package/src/scss/components/link/_mixins.scss

@@ -1,25 +0,0 @@
-@mixin lumx-link-base() {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    text-align: inherit;
-    text-decoration: none;
-    cursor: pointer;
-    background: none;
-    border: none;
-    outline: none;
-
-    &:hover,
-    &[data-focus-visible-added] {
-        text-decoration: underline;
-    }
-}
-
-@mixin lumx-link-color($color, $variant) {
-    color: lumx-color-variant($color, $variant);
-}
-
-@mixin lumx-link($color: "primary", $variant: "N") {
-    @include lumx-link-base;
-    @include lumx-link-color($color, $variant);
-}