@lumx/core 3.1.0 → 3.1.2

package/src/scss/core/base/_normalize.scss

@@ -1,353 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-     ========================================================================== */
-
-/**
-   * Remove the margin in all browsers.
-   */
-
-body {
-    margin: 0;
-}
-
-/**
-   * Render the `main` element consistently in IE.
-   */
-
-main {
-    display: block;
-}
-
-/**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
-   */
-
-h1 {
-    margin: 0.67em 0;
-    font-size: 2em;
-}
-
-/* Grouping content
-     ========================================================================== */
-
-/**
-   * 1. Add the correct box sizing in Firefox.
-   * 2. Show the overflow in Edge and IE.
-   */
-
-hr {
-    overflow: visible; /* 2 */
-    height: 0; /* 1 */
-    box-sizing: content-box; /* 1 */
-}
-
-/**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-pre {
-    /* stylelint-disable-next-line font-family-no-duplicate-names */
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-     ========================================================================== */
-
-/**
-   * Remove the gray background on active links in IE 10.
-   */
-
-a {
-    background-color: transparent;
-}
-
-/**
-   * 1. Remove the bottom border in Chrome 57-
-   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-   */
-
-abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-}
-
-/**
-   * Add the correct font weight in Chrome, Edge, and Safari.
-   */
-
-b,
-strong {
-    font-weight: bolder;
-}
-
-/**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-code,
-kbd,
-samp {
-    /* stylelint-disable-next-line font-family-no-duplicate-names */
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-}
-
-/**
-   * Add the correct font size in all browsers.
-   */
-
-small {
-    font-size: 80%;
-}
-
-/**
-   * Prevent `sub` and `sup` elements from affecting the line height in
-   * all browsers.
-   */
-
-sub,
-sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-sup {
-    top: -0.5em;
-}
-
-/* Embedded content
-     ========================================================================== */
-
-/**
-   * Remove the border on images inside links in IE 10.
-   */
-
-img {
-    border-style: none;
-}
-
-/* Forms
-     ========================================================================== */
-
-/**
-   * 1. Change the font styles in all browsers.
-   * 2. Remove the margin in Firefox and Safari.
-   */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-    margin: 0; /* 2 */
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-}
-
-/**
-   * Show the overflow in IE.
-   * 1. Show the overflow in Edge.
-   */
-
-button,
-input {
-    /* 1 */
-    overflow: visible;
-}
-
-/**
-   * Remove the inheritance of text transform in Edge, Firefox, and IE.
-   * 1. Remove the inheritance of text transform in Firefox.
-   */
-
-button,
-select {
-    /* 1 */
-    text-transform: none;
-}
-
-/**
-   * Correct the inability to style clickable types in iOS and Safari.
-   */
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-    -webkit-appearance: button;
-}
-
-/**
-   * Remove the inner border and padding in Firefox.
-   */
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-}
-
-/**
-   * Restore the focus styles unset by the previous rule.
-   */
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
-}
-
-/**
-   * Correct the padding in Firefox.
-   */
-
-fieldset {
-    padding: 0.35em 0.75em 0.625em;
-}
-
-/**
-   * 1. Correct the text wrapping in Edge and IE.
-   * 2. Correct the color inheritance from `fieldset` elements in IE.
-   * 3. Remove the padding so developers are not caught out when they zero out
-   *    `fieldset` elements in all browsers.
-   */
-
-legend {
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 3 */
-    color: inherit; /* 2 */
-    white-space: normal; /* 1 */
-}
-
-/**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-
-progress {
-    vertical-align: baseline;
-}
-
-/**
-   * Remove the default vertical scrollbar in IE 10+.
-   */
-
-textarea {
-    overflow: auto;
-}
-
-/**
-   * 1. Add the correct box sizing in IE 10.
-   * 2. Remove the padding in IE 10.
-   */
-
-[type='checkbox'],
-[type='radio'] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
-   * Correct the cursor style of increment and decrement buttons in Chrome.
-   */
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-    height: auto;
-}
-
-/**
-   * 1. Correct the odd appearance in Chrome and Safari.
-   * 2. Correct the outline style in Safari.
-   */
-
-[type='search'] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-}
-
-/**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-
-[type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/**
-   * 1. Correct the inability to style clickable types in iOS and Safari.
-   * 2. Change font properties to `inherit` in Safari.
-   */
-
-::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-}
-
-/* Interactive
-     ========================================================================== */
-
-/*
-   * Add the correct display in Edge, IE 10+, and Firefox.
-   */
-
-details {
-    display: block;
-}
-
-/*
-   * Add the correct display in all browsers.
-   */
-
-summary {
-    display: list-item;
-}
-
-/* Misc
-     ========================================================================== */
-
-/**
-   * Add the correct display in IE 10+.
-   */
-
-template {
-    display: none;
-}
-
-/**
-   * Add the correct display in IE 10.
-   */
-
-[hidden] {
-    display: none;
-}

package/src/scss/core/base/_variables.scss

@@ -1,39 +0,0 @@
-$lumx-base-prefix: "lumx";
-$lumx-base-constants: (
-    "emphasis": (
-        "HIGH": "emphasis-high",
-        "MEDIUM": "emphasis-medium",
-        "LOW": "emphasis-low",
-        "SELECTED": "emphasis-selected",
-    ),
-    "position": (
-        "TOP": "position-top",
-        "RIGHT": "position-right",
-        "BOTTOM": "position-bottom",
-        "LEFT": "position-left",
-        "CENTER": "position-center",
-    ),
-    "size": (
-        "XXS": "xxs",
-        "XS": "xs",
-        "S": "s",
-        "M": "m",
-        "L": "l",
-        "XL": "xl",
-        "XXL": "xxl",
-    ),
-    "state": (
-        "DEFAULT": "state-default",
-        "HOVER": "state-hover",
-        "ACTIVE": "state-active",
-        "FOCUS": "state-focus",
-    ),
-    "theme": (
-        "LIGHT": "theme-light",
-        "DARK": "theme-dark",
-    ),
-);
-$lumx-base-layers: (
-    "high": 999,
-    "higher": 9999,
-);

package/src/scss/core/color/_functions.scss

@@ -1,7 +0,0 @@
-@function lumx-color-variant($color, $variant) {
-    @if map-has-key($lumx-color-palette, $color) {
-        @return var(--lumx-color-#{$color}-#{$variant});
-    } @else {
-        @return var(--lumx-color-dark-N);
-    }
-}

package/src/scss/core/color/_index.scss

@@ -1,15 +0,0 @@
-/* ==========================================================================
-   Color (font & background)
-   ========================================================================== */
-
-@each $color-key, $color in $lumx-color-palette {
-    @each $color-variant in $lumx-color-variants {
-        .#{$lumx-base-prefix}-color-background-#{$color-key}-#{$color-variant} {
-            background-color: lumx-color-variant($color-key, $color-variant);
-        }
-
-        .#{$lumx-base-prefix}-color-font-#{$color-key}-#{$color-variant} {
-            color: lumx-color-variant($color-key, $color-variant);
-        }
-    }
-}

package/src/scss/core/color/_variables.scss

@@ -1,4 +0,0 @@
-@use "sass:map";
-
-$lumx-color-palette: map.get($lumx-design-tokens, "color") !default;
-$lumx-color-variants: ("D2", "D1", "N", "L1", "L2", "L3", "L4", "L5", "L6");

package/src/scss/core/elevation/_mixins.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "sass:string";
-
-@mixin lumx-elevation($elevation, $variant: "L4") {
-    @if $elevation == 0 {
-        box-shadow: none;
-    } @else {
-        box-shadow: string.unquote(map.get($lumx-elevation-shadows, $elevation)) lumx-color-variant("dark", $variant);
-    }
-}

package/src/scss/core/elevation/_variables.scss

@@ -1,7 +0,0 @@
-$lumx-elevation-shadows: (
-    1: "0 0 2px 0",
-    2: "0 1px 4px 0",
-    3: "0 2px 8px 0",
-    4: "0 4px 16px 0",
-    5: "0 8px 32px 0",
-);

package/src/scss/core/size/_variables.scss

@@ -1,3 +0,0 @@
-@use "sass:map";
-
-$lumx-sizes: map.get($lumx-design-tokens, "size");

package/src/scss/core/spacing/_index.scss

@@ -1,15 +0,0 @@
-/* ==========================================================================
-   Spacing
-   ========================================================================== */
-
-@each $property-namespace, $property in $lumx-spacing-properties {
-    @each $direction-namespace, $direction-rules in $lumx-spacing-directions {
-        @each $size-namespace, $size in $lumx-spacing-sizes {
-            .#{$lumx-base-prefix}-spacing-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
-                @each $direction in $direction-rules {
-                    #{$property}#{$direction}: $size !important;
-                }
-            }
-        }
-    }
-}

package/src/scss/core/spacing/_variables.scss

@@ -1,22 +0,0 @@
-$lumx-spacing-unit: $lumx-spacing-unit-regular;
-$lumx-spacing-directions: (
-    null: null,
-    "-top": "-top",
-    "-right": "-right",
-    "-bottom": "-bottom",
-    "-left": "-left",
-    "-horizontal": "-left" "-right",
-    "-vertical": "-top" "-bottom",
-);
-$lumx-spacing-properties: (
-    "padding": "padding",
-    "margin": "margin",
-);
-$lumx-spacing-sizes: (
-    null: $lumx-spacing-unit-regular,
-    "-tiny": $lumx-spacing-unit-tiny,
-    "-regular": $lumx-spacing-unit-regular,
-    "-big": $lumx-spacing-unit-big,
-    "-huge": $lumx-spacing-unit-huge,
-    "-none": 0,
-);

package/src/scss/core/state/_mixins.scss

@@ -1,127 +0,0 @@
-@mixin lumx-state-high($state, $color, $theme) {
-    @if $state == lumx-base-const("state", "DEFAULT") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            background-color: lumx-color-variant($color, "N");
-
-            @if $color == "yellow" {
-                color: lumx-color-variant("dark", "L1");
-            } @else {
-                color: lumx-color-variant("light", "N");
-            }
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            color: lumx-color-variant($color, "N");
-            background-color: lumx-color-variant("light", "N");
-        }
-    } @else if $state == lumx-base-const("state", "HOVER") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            background-color: lumx-color-variant($color, "D1");
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            background-color: lumx-color-variant("light", "L1");
-        }
-    } @else if $state == lumx-base-const("state", "ACTIVE") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            background-color: lumx-color-variant($color, "D2");
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            background-color: lumx-color-variant("light", "L2");
-        }
-    } @else if $state == lumx-base-const("state", "FOCUS") {
-        outline-offset: 2px;
-
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            outline: 2px solid lumx-color-variant("dark", "N");
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            outline: 2px solid lumx-color-variant("light", "N");
-        }
-    }
-}
-
-@mixin lumx-state-medium($state, $color) {
-    @if $state == lumx-base-const("state", "DEFAULT") {
-        background-color: lumx-color-variant($color, "L5");
-
-        @if $color == "yellow" {
-            color: lumx-color-variant("dark", "L1");
-        } @else {
-            color: lumx-color-variant($color, "N");
-        }
-    } @else if $state == lumx-base-const("state", "HOVER") {
-        background-color: lumx-color-variant($color, "L4");
-    } @else if $state == lumx-base-const("state", "ACTIVE") {
-        background-color: lumx-color-variant($color, "L3");
-    } @else if $state == lumx-base-const("state", "FOCUS") {
-        outline: 2px solid lumx-color-variant($color, "N");
-        outline-offset: 2px;
-    }
-}
-
-@mixin lumx-state-as-selected($state, $theme) {
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        @if $state == lumx-base-const("state", "DEFAULT") {
-            color: lumx-color-variant("primary", "D2");
-            background-color: lumx-color-variant("primary", "L5");
-        } @else if $state == lumx-base-const("state", "HOVER") {
-            background-color: lumx-color-variant("primary", "L4");
-        } @else if $state == lumx-base-const("state", "ACTIVE") {
-            background-color: lumx-color-variant("primary", "L3");
-        } @else if $state == lumx-base-const("state", "FOCUS") {
-            outline: 2px solid lumx-color-variant("dark", "N");
-            outline-offset: 2px;
-        }
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        @if $state == lumx-base-const("state", "DEFAULT") {
-            color: lumx-color-variant("light", "N");
-            background-color: lumx-color-variant("light", "L3");
-        } @else if $state == lumx-base-const("state", "HOVER") {
-            background-color: lumx-color-variant("light", "L4");
-        } @else if $state == lumx-base-const("state", "ACTIVE") {
-            background-color: lumx-color-variant("light", "L5");
-        } @else if $state == lumx-base-const("state", "FOCUS") {
-            outline: 2px solid lumx-color-variant("light", "N");
-            outline-offset: 2px;
-        }
-    }
-}
-
-@mixin lumx-state-low($state, $color) {
-    @if $state == lumx-base-const("state", "DEFAULT") {
-        color: lumx-color-variant($color, "N");
-        background-color: transparent;
-    } @else if $state == lumx-base-const("state", "HOVER") {
-        background-color: lumx-color-variant($color, "L5");
-    } @else if $state == lumx-base-const("state", "ACTIVE") {
-        background-color: lumx-color-variant($color, "L4");
-    } @else if $state == lumx-base-const("state", "FOCUS") {
-        outline: 2px solid lumx-color-variant($color, "N");
-        outline-offset: 2px;
-    }
-}
-
-@mixin lumx-state-disabled-text($theme) {
-    pointer-events: none;
-
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        color: lumx-color-variant("dark", "L3");
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        color: lumx-color-variant("light", "L3");
-    }
-}
-
-@mixin lumx-state-disabled-input() {
-    pointer-events: none;
-    opacity: 0.5;
-}
-
-@mixin lumx-state($state, $emphasis, $color, $theme: null) {
-    @if $emphasis == lumx-base-const("emphasis", "HIGH") {
-        @include lumx-state-high($state, $color, $theme);
-    } @else if $emphasis == lumx-base-const("emphasis", "MEDIUM") or $emphasis == lumx-base-const("emphasis", "SELECTED") {
-        @include lumx-state-medium($state, $color);
-    } @else if $emphasis == lumx-base-const("emphasis", "LOW") {
-        @include lumx-state-low($state, $color);
-    }
-}
-
-@mixin lumx-state-transition() {
-    transition-duration: $lumx-state-transition-duration;
-    transition-property: background-color, box-shadow, color;
-}

package/src/scss/core/state/_variables.scss

@@ -1 +0,0 @@
-$lumx-state-transition-duration: 150ms;

package/src/scss/core/typography/_index.scss

@@ -1,16 +0,0 @@
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-@each $key, $style in $lumx-typography-interface {
-    .#{$lumx-base-prefix}-typography-#{$key},
-    .#{$lumx-base-prefix}-typography-interface-#{$key} {
-        @include lumx-typography($key);
-    }
-}
-
-@each $key, $style in $lumx-typography-custom {
-    .#{$lumx-base-prefix}-typography-custom-#{$key} {
-        @include lumx-typography($key, "custom");
-    }
-}

package/src/scss/core/typography/_mixins.scss

@@ -1,25 +0,0 @@
-@use "sass:map";
-
-@mixin lumx-typography-base() {
-    font-family: var(--lumx-typography-font-family);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-
-@mixin lumx-typography($key, $type: "interface") {
-    @if $type == "custom" {
-        font-family: var(--lumx-typography-custom-#{$key}-font-family);
-        font-size: var(--lumx-typography-custom-#{$key}-font-size);
-        font-style: var(--lumx-typography-custom-#{$key}-font-style);
-        font-weight: var(--lumx-typography-custom-#{$key}-font-weight);
-        line-height: var(--lumx-typography-custom-#{$key}-line-height);
-    } @else if $type == "interface" {
-        font-size: map.get(map.get($lumx-typography-interface, $key), "font-size");
-        font-weight: var(--lumx-typography-interface-#{$key}-font-weight);
-        line-height: map.get(map.get($lumx-typography-interface, $key), "line-height");
-    }
-
-    @if $key == "overline" {
-        text-transform: uppercase;
-    }
-}

package/src/scss/core/typography/_variables.scss

@@ -1,6 +0,0 @@
-@use "sass:map";
-
-$lumx-typography-default-font-size: 16px;
-$lumx-typography-default-line-height: 24px;
-$lumx-typography-interface: map.get(map.get($lumx-design-tokens, "typography"), "interface");
-$lumx-typography-custom: map.get(map.get($lumx-design-tokens, "typography"), "custom");