@lumx/core 3.20.1-alpha.44 → 3.20.1-alpha.46

package/js/constants/index.js

@@ -1,188 +1,4 @@
-export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes.js';
-
-/**
- * Key codes.
- */
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-const SLIDESHOW_TRANSITION_DURATION = 5000;
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-const TOOLTIP_HOVER_DELAY = {
-    open: 500,
-    close: 500,
-};
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-const TOOLTIP_LONG_PRESS_DELAY = {
-    open: 250,
-    close: 3000,
-};
-/**
- * Alignments.
- */
-const Alignment = {
-    bottom: 'bottom',
-    center: 'center',
-    end: 'end',
-    left: 'left',
-    right: 'right',
-    spaceAround: 'space-around',
-    spaceBetween: 'space-between',
-    spaceEvenly: 'space-evenly',
-    start: 'start',
-    top: 'top',
-};
-const Theme = {
-    light: 'light',
-    dark: 'dark',
-};
-const Size = {
-    xxs: 'xxs',
-    xs: 'xs',
-    s: 's',
-    m: 'm',
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl',
-    tiny: 'tiny',
-    regular: 'regular',
-    medium: 'medium',
-    big: 'big',
-    huge: 'huge',
-};
-const Orientation = {
-    horizontal: 'horizontal',
-    vertical: 'vertical',
-};
-const Emphasis = {
-    low: 'low',
-    medium: 'medium',
-    high: 'high',
-};
-/**
- * List of typographies that can't be customized.
- */
-const TypographyInterface = {
-    overline: 'overline',
-    caption: 'caption',
-    body1: 'body1',
-    body2: 'body2',
-    subtitle1: 'subtitle1',
-    subtitle2: 'subtitle2',
-    title: 'title',
-    headline: 'headline',
-    display1: 'display1',
-};
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-const TypographyTitleCustom = {
-    title1: 'custom-title1',
-    title2: 'custom-title2',
-    title3: 'custom-title3',
-    title4: 'custom-title4',
-    title5: 'custom-title5',
-    title6: 'custom-title6',
-};
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-const TypographyCustom = {
-    ...TypographyTitleCustom,
-    intro: 'custom-intro',
-    'body-large': 'custom-body-large',
-    body: 'custom-body',
-    quote: 'custom-quote',
-    'publish-info': 'custom-publish-info',
-    button: 'custom-button',
-};
-/**
- * List of all typographies.
- */
-const Typography = {
-    ...TypographyInterface,
-    custom: TypographyCustom,
-};
-/**
- * All available aspect ratios.
- */
-const AspectRatio = {
-    /** Intrinsic content ratio. */
-    original: 'original',
-    /** Ratio 3:1 */
-    panoramic: 'panoramic',
-    /** Ratio 16:9 */
-    wide: 'wide',
-    /** Ratio 3:2 */
-    horizontal: 'horizontal',
-    /** Ratio 3:2 */
-    vertical: 'vertical',
-    /** Ratio 1:1 */
-    square: 'square',
-    /** Ratio constrained by the parent. */
-    free: 'free',
-};
-/**
- * Semantic info about the purpose of the component
- */
-const Kind = {
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
-/**
- * All available white-space values
- * */
-const WhiteSpace = {
-    normal: 'normal',
-    nowrap: 'nowrap',
-    pre: 'pre',
-    'pre-wrap': 'pre-wrap',
-    'pre-line': 'pre-line',
-    'break-spaces': 'break-spaces',
-};
-/**
- * See SCSS variable $lumx-color-palette
- */
-const ColorPalette = {
-    primary: 'primary',
-    secondary: 'secondary',
-    blue: 'blue',
-    dark: 'dark',
-    green: 'green',
-    yellow: 'yellow',
-    red: 'red',
-    light: 'light',
-    grey: 'grey',
-};
-/**
- * See SCSS variable $lumx-color-variants
- */
-const ColorVariant = {
-    D1: 'D1',
-    D2: 'D2',
-    L1: 'L1',
-    L2: 'L2',
-    L3: 'L3',
-    L4: 'L4',
-    L5: 'L5',
-    L6: 'L6',
-    N: 'N',
-};
-/**
- * Visually hidden a11y utility class name
- */
-const VISUALLY_HIDDEN = 'visually-hidden';
-
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, Kind, NOTIFICATION_TRANSITION_DURATION, Orientation, SLIDESHOW_TRANSITION_DURATION, Size, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, VISUALLY_HIDDEN, WhiteSpace };
+export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes/index.js';
+export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { VISUALLY_HIDDEN } from './className/index.js';

package/js/utils/{color → _internal/color}/resolveColorWithVariants.d.ts

@@ -1,3 +1,3 @@
-import type { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';
+import type { ColorPalette, ColorVariant, ColorWithVariants } from '../../../constants';
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
 export declare function resolveColorWithVariants(colorWithVariants?: ColorWithVariants, colorVariant?: ColorVariant): [color?: ColorPalette, colorVariant?: ColorVariant];

package/js/utils/className/color/index.js

@@ -1,5 +1,5 @@
-import { ColorVariant } from '../../../constants/index.js';
-import { resolveColorWithVariants } from '../../color/resolveColorWithVariants.js';
+import { ColorVariant } from '../../../constants/enums/index.js';
+import { resolveColorWithVariants } from '@lumx/core/js/utils/_internal/color';
 
 /**
  * Generates a Lumx color class name for the given type, color and variant.

package/js/utils/className/visually-hidden/index.js

@@ -1,4 +1,5 @@
-import { VISUALLY_HIDDEN } from '../../../constants/index.js';
+import '../../../constants/enums/index.js';
+import { VISUALLY_HIDDEN } from '../../../constants/className/index.js';
 
 /**
  * Visually hidden class name.

package/js/utils/index.d.ts

@@ -1,3 +1,2 @@
 export * as cls from './className';
-export * from './color';
 export * from './events';

package/js/utils/index.js

@@ -1,5 +1,4 @@
 import * as index from './className/index.js';
 export { index as cls };
-export { resolveColorWithVariants } from './color/resolveColorWithVariants.js';
 export { onButtonPressed, onEnterPressed, onEscapePressed } from './events/keyboard.js';
 export { detectHorizontalSwipe } from './events/swipe.js';

package/lumx.css

@@ -12056,7 +12056,10 @@ table {
   flex: 1 1 auto;
   padding: var(--lumx-text-field-wrapper-padding-vertical) 0;
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native {
+.lumx-text-field__input-native {
+  resize: none;
+}
+.lumx-text-field--theme-light .lumx-text-field__input-native, .lumx-text-field__input-native--theme-light {
   display: block;
   width: 100%;
   padding: 0;
@@ -12069,16 +12072,16 @@ table {
   color: var(--lumx-color-dark-N);
   color: var(--lumx-text-field-state-default-theme-light-input-content-color);
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button {
+.lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-outer-spin-button {
   opacity: 1;
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder {
+.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-light::-moz-placeholder {
   color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
 }
-.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder {
+.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-light::placeholder {
   color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native {
+.lumx-text-field--theme-dark .lumx-text-field__input-native, .lumx-text-field__input-native--theme-dark {
   display: block;
   width: 100%;
   padding: 0;
@@ -12091,13 +12094,13 @@ table {
   color: var(--lumx-color-light-N);
   color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button {
+.lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-outer-spin-button {
   opacity: 1;
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder {
+.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-dark::-moz-placeholder {
   color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
 }
-.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder {
+.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-dark::placeholder {
   color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
 }
 .lumx-text-field--has-chips .lumx-text-field__input-native {
@@ -12106,9 +12109,6 @@ table {
   min-width: 100px;
   line-height: var(--lumx-material-chip-size-s-height);
 }
-.lumx-text-field__input-native--textarea {
-  resize: none;
-}
 .lumx-text-field__input-clear, .lumx-text-field__after-element {
   flex-shrink: 0;
   margin: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-button-height) / 1.5) / 2) 4px;

package/package.json

@@ -35,7 +35,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.44",
+    "version": "3.20.1-alpha.46",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@types/react": "^17.0.2",

package/scss/components/text-field/_index.scss

@@ -104,7 +104,9 @@
     }
 
     &__input-native {
-        #{$self}--theme-light & {
+        resize: none;
+
+        #{$self}--theme-light &, &--theme-light {
             @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -119,7 +121,7 @@
             }
         }
 
-        #{$self}--theme-dark & {
+        #{$self}--theme-dark &, &--theme-dark {
             @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -140,10 +142,6 @@
             min-width: $lumx-text-field-min-width;
             line-height: var(--lumx-material-chip-size-s-height);
         }
-
-        &--textarea {
-            resize: none;
-        }
     }
 
     &__input-clear,