@lumx/core 3.0.7 → 3.1.0

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

@@ -0,0 +1,147 @@
+@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

@@ -0,0 +1,18 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,106 @@
+@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

@@ -0,0 +1,42 @@
+@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

@@ -0,0 +1,6 @@
+$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

@@ -0,0 +1,108 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,27 @@
+@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

@@ -0,0 +1,12 @@
+@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

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

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

@@ -0,0 +1,23 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,12 @@
+@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

@@ -0,0 +1,59 @@
+@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

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

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

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,25 @@
+@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);
+}