@vaadin/vaadin-lumo-styles 25.0.0-alpha2 → 25.0.0-alpha21

package/utilities/spacing.js

@@ -1,542 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-export const spacing = css`
-  /* === Margin === */
-  .-m-xs {
-    margin: calc(var(--lumo-space-xs) / -1);
-  }
-  .-m-s {
-    margin: calc(var(--lumo-space-s) / -1);
-  }
-  .-m-m {
-    margin: calc(var(--lumo-space-m) / -1);
-  }
-  .-m-l {
-    margin: calc(var(--lumo-space-l) / -1);
-  }
-  .-m-xl {
-    margin: calc(var(--lumo-space-xl) / -1);
-  }
-  .m-0 {
-    margin: 0;
-  }
-  .m-xs {
-    margin: var(--lumo-space-xs);
-  }
-  .m-s {
-    margin: var(--lumo-space-s);
-  }
-  .m-m {
-    margin: var(--lumo-space-m);
-  }
-  .m-l {
-    margin: var(--lumo-space-l);
-  }
-  .m-xl {
-    margin: var(--lumo-space-xl);
-  }
-  .m-auto {
-    margin: auto;
-  }
-
-  /* === Margin (bottom) === */
-  .-mb-xs {
-    margin-bottom: calc(var(--lumo-space-xs) / -1);
-  }
-  .-mb-s {
-    margin-bottom: calc(var(--lumo-space-s) / -1);
-  }
-  .-mb-m {
-    margin-bottom: calc(var(--lumo-space-m) / -1);
-  }
-  .-mb-l {
-    margin-bottom: calc(var(--lumo-space-l) / -1);
-  }
-  .-mb-xl {
-    margin-bottom: calc(var(--lumo-space-xl) / -1);
-  }
-  .mb-0 {
-    margin-bottom: 0;
-  }
-  .mb-xs {
-    margin-bottom: var(--lumo-space-xs);
-  }
-  .mb-s {
-    margin-bottom: var(--lumo-space-s);
-  }
-  .mb-m {
-    margin-bottom: var(--lumo-space-m);
-  }
-  .mb-l {
-    margin-bottom: var(--lumo-space-l);
-  }
-  .mb-xl {
-    margin-bottom: var(--lumo-space-xl);
-  }
-  .mb-auto {
-    margin-bottom: auto;
-  }
-
-  /* === Margin (end) === */
-  .-me-xs {
-    margin-inline-end: calc(var(--lumo-space-xs) / -1);
-  }
-  .-me-s {
-    margin-inline-end: calc(var(--lumo-space-s) / -1);
-  }
-  .-me-m {
-    margin-inline-end: calc(var(--lumo-space-m) / -1);
-  }
-  .-me-l {
-    margin-inline-end: calc(var(--lumo-space-l) / -1);
-  }
-  .-me-xl {
-    margin-inline-end: calc(var(--lumo-space-xl) / -1);
-  }
-  .me-0 {
-    margin-inline-end: 0;
-  }
-  .me-xs {
-    margin-inline-end: var(--lumo-space-xs);
-  }
-  .me-s {
-    margin-inline-end: var(--lumo-space-s);
-  }
-  .me-m {
-    margin-inline-end: var(--lumo-space-m);
-  }
-  .me-l {
-    margin-inline-end: var(--lumo-space-l);
-  }
-  .me-xl {
-    margin-inline-end: var(--lumo-space-xl);
-  }
-  .me-auto {
-    margin-inline-end: auto;
-  }
-
-  /* === Margin (horizontal) === */
-  .-mx-xs {
-    margin-inline: calc(var(--lumo-space-xs) / -1);
-  }
-  .-mx-s {
-    margin-inline: calc(var(--lumo-space-s) / -1);
-  }
-  .-mx-m {
-    margin-inline: calc(var(--lumo-space-m) / -1);
-  }
-  .-mx-l {
-    margin-inline: calc(var(--lumo-space-l) / -1);
-  }
-  .-mx-xl {
-    margin-inline: calc(var(--lumo-space-xl) / -1);
-  }
-  .mx-0 {
-    margin-inline: 0;
-  }
-  .mx-xs {
-    margin-inline: var(--lumo-space-xs);
-  }
-  .mx-s {
-    margin-inline: var(--lumo-space-s);
-  }
-  .mx-m {
-    margin-inline: var(--lumo-space-m);
-  }
-  .mx-l {
-    margin-inline: var(--lumo-space-l);
-  }
-  .mx-xl {
-    margin-inline: var(--lumo-space-xl);
-  }
-  .mx-auto {
-    margin-inline: auto;
-  }
-
-  /* === Margin (left) === */
-  .-ml-xs {
-    margin-left: calc(var(--lumo-space-xs) / -1);
-  }
-  .-ml-s {
-    margin-left: calc(var(--lumo-space-s) / -1);
-  }
-  .-ml-m {
-    margin-left: calc(var(--lumo-space-m) / -1);
-  }
-  .-ml-l {
-    margin-left: calc(var(--lumo-space-l) / -1);
-  }
-  .-ml-xl {
-    margin-left: calc(var(--lumo-space-xl) / -1);
-  }
-  .ml-0 {
-    margin-left: 0;
-  }
-  .ml-xs {
-    margin-left: var(--lumo-space-xs);
-  }
-  .ml-s {
-    margin-left: var(--lumo-space-s);
-  }
-  .ml-m {
-    margin-left: var(--lumo-space-m);
-  }
-  .ml-l {
-    margin-left: var(--lumo-space-l);
-  }
-  .ml-xl {
-    margin-left: var(--lumo-space-xl);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
-
-  /* === Margin (right) === */
-  .-mr-xs {
-    margin-right: calc(var(--lumo-space-xs) / -1);
-  }
-  .-mr-s {
-    margin-right: calc(var(--lumo-space-s) / -1);
-  }
-  .-mr-m {
-    margin-right: calc(var(--lumo-space-m) / -1);
-  }
-  .-mr-l {
-    margin-right: calc(var(--lumo-space-l) / -1);
-  }
-  .-mr-xl {
-    margin-right: calc(var(--lumo-space-xl) / -1);
-  }
-  .mr-0 {
-    margin-right: 0;
-  }
-  .mr-xs {
-    margin-right: var(--lumo-space-xs);
-  }
-  .mr-s {
-    margin-right: var(--lumo-space-s);
-  }
-  .mr-m {
-    margin-right: var(--lumo-space-m);
-  }
-  .mr-l {
-    margin-right: var(--lumo-space-l);
-  }
-  .mr-xl {
-    margin-right: var(--lumo-space-xl);
-  }
-  .mr-auto {
-    margin-right: auto;
-  }
-
-  /* === Margin (start) === */
-  .-ms-xs {
-    margin-inline-start: calc(var(--lumo-space-xs) / -1);
-  }
-  .-ms-s {
-    margin-inline-start: calc(var(--lumo-space-s) / -1);
-  }
-  .-ms-m {
-    margin-inline-start: calc(var(--lumo-space-m) / -1);
-  }
-  .-ms-l {
-    margin-inline-start: calc(var(--lumo-space-l) / -1);
-  }
-  .-ms-xl {
-    margin-inline-start: calc(var(--lumo-space-xl) / -1);
-  }
-  .ms-0 {
-    margin-inline-start: 0;
-  }
-  .ms-xs {
-    margin-inline-start: var(--lumo-space-xs);
-  }
-  .ms-s {
-    margin-inline-start: var(--lumo-space-s);
-  }
-  .ms-m {
-    margin-inline-start: var(--lumo-space-m);
-  }
-  .ms-l {
-    margin-inline-start: var(--lumo-space-l);
-  }
-  .ms-xl {
-    margin-inline-start: var(--lumo-space-xl);
-  }
-  .ms-auto {
-    margin-inline-start: auto;
-  }
-
-  /* === Margin (top) === */
-  .-mt-xs {
-    margin-top: calc(var(--lumo-space-xs) / -1);
-  }
-  .-mt-s {
-    margin-top: calc(var(--lumo-space-s) / -1);
-  }
-  .-mt-m {
-    margin-top: calc(var(--lumo-space-m) / -1);
-  }
-  .-mt-l {
-    margin-top: calc(var(--lumo-space-l) / -1);
-  }
-  .-mt-xl {
-    margin-top: calc(var(--lumo-space-xl) / -1);
-  }
-  .mt-0 {
-    margin-top: 0;
-  }
-  .mt-xs {
-    margin-top: var(--lumo-space-xs);
-  }
-  .mt-s {
-    margin-top: var(--lumo-space-s);
-  }
-  .mt-m {
-    margin-top: var(--lumo-space-m);
-  }
-  .mt-l {
-    margin-top: var(--lumo-space-l);
-  }
-  .mt-xl {
-    margin-top: var(--lumo-space-xl);
-  }
-  .mt-auto {
-    margin-top: auto;
-  }
-
-  /* === Margin (vertical) === */
-  .-my-xs {
-    margin-block: calc(var(--lumo-space-xs) / -1);
-  }
-  .-my-s {
-    margin-block: calc(var(--lumo-space-s) / -1);
-  }
-  .-my-m {
-    margin-block: calc(var(--lumo-space-m) / -1);
-  }
-  .-my-l {
-    margin-block: calc(var(--lumo-space-l) / -1);
-  }
-  .-my-xl {
-    margin-block: calc(var(--lumo-space-xl) / -1);
-  }
-  .my-0 {
-    margin-block: 0;
-  }
-  .my-xs {
-    margin-block: var(--lumo-space-xs);
-  }
-  .my-s {
-    margin-block: var(--lumo-space-s);
-  }
-  .my-m {
-    margin-block: var(--lumo-space-m);
-  }
-  .my-l {
-    margin-block: var(--lumo-space-l);
-  }
-  .my-xl {
-    margin-block: var(--lumo-space-xl);
-  }
-  .my-auto {
-    margin-block: auto;
-  }
-
-  /* === Padding === */
-  .p-0 {
-    padding: 0;
-  }
-  .p-xs {
-    padding: var(--lumo-space-xs);
-  }
-  .p-s {
-    padding: var(--lumo-space-s);
-  }
-  .p-m {
-    padding: var(--lumo-space-m);
-  }
-  .p-l {
-    padding: var(--lumo-space-l);
-  }
-  .p-xl {
-    padding: var(--lumo-space-xl);
-  }
-
-  /* === Padding (bottom) === */
-  .pb-0 {
-    padding-bottom: 0;
-  }
-  .pb-xs {
-    padding-bottom: var(--lumo-space-xs);
-  }
-  .pb-s {
-    padding-bottom: var(--lumo-space-s);
-  }
-  .pb-m {
-    padding-bottom: var(--lumo-space-m);
-  }
-  .pb-l {
-    padding-bottom: var(--lumo-space-l);
-  }
-  .pb-xl {
-    padding-bottom: var(--lumo-space-xl);
-  }
-
-  /* === Padding (end) === */
-  .pe-0 {
-    padding-inline-end: 0;
-  }
-  .pe-xs {
-    padding-inline-end: var(--lumo-space-xs);
-  }
-  .pe-s {
-    padding-inline-end: var(--lumo-space-s);
-  }
-  .pe-m {
-    padding-inline-end: var(--lumo-space-m);
-  }
-  .pe-l {
-    padding-inline-end: var(--lumo-space-l);
-  }
-  .pe-xl {
-    padding-inline-end: var(--lumo-space-xl);
-  }
-
-  /* === Padding (horizontal) === */
-  .px-0 {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .px-xs {
-    padding-left: var(--lumo-space-xs);
-    padding-right: var(--lumo-space-xs);
-  }
-  .px-s {
-    padding-left: var(--lumo-space-s);
-    padding-right: var(--lumo-space-s);
-  }
-  .px-m {
-    padding-left: var(--lumo-space-m);
-    padding-right: var(--lumo-space-m);
-  }
-  .px-l {
-    padding-left: var(--lumo-space-l);
-    padding-right: var(--lumo-space-l);
-  }
-  .px-xl {
-    padding-left: var(--lumo-space-xl);
-    padding-right: var(--lumo-space-xl);
-  }
-
-  /* === Padding (left) === */
-  .pl-0 {
-    padding-left: 0;
-  }
-  .pl-xs {
-    padding-left: var(--lumo-space-xs);
-  }
-  .pl-s {
-    padding-left: var(--lumo-space-s);
-  }
-  .pl-m {
-    padding-left: var(--lumo-space-m);
-  }
-  .pl-l {
-    padding-left: var(--lumo-space-l);
-  }
-  .pl-xl {
-    padding-left: var(--lumo-space-xl);
-  }
-
-  /* === Padding (right) === */
-  .pr-0 {
-    padding-right: 0;
-  }
-  .pr-xs {
-    padding-right: var(--lumo-space-xs);
-  }
-  .pr-s {
-    padding-right: var(--lumo-space-s);
-  }
-  .pr-m {
-    padding-right: var(--lumo-space-m);
-  }
-  .pr-l {
-    padding-right: var(--lumo-space-l);
-  }
-  .pr-xl {
-    padding-right: var(--lumo-space-xl);
-  }
-
-  /* === Padding (start) === */
-  .ps-0 {
-    padding-inline-start: 0;
-  }
-  .ps-xs {
-    padding-inline-start: var(--lumo-space-xs);
-  }
-  .ps-s {
-    padding-inline-start: var(--lumo-space-s);
-  }
-  .ps-m {
-    padding-inline-start: var(--lumo-space-m);
-  }
-  .ps-l {
-    padding-inline-start: var(--lumo-space-l);
-  }
-  .ps-xl {
-    padding-inline-start: var(--lumo-space-xl);
-  }
-
-  /* === Padding (top) === */
-  .pt-0 {
-    padding-top: 0;
-  }
-  .pt-xs {
-    padding-top: var(--lumo-space-xs);
-  }
-  .pt-s {
-    padding-top: var(--lumo-space-s);
-  }
-  .pt-m {
-    padding-top: var(--lumo-space-m);
-  }
-  .pt-l {
-    padding-top: var(--lumo-space-l);
-  }
-  .pt-xl {
-    padding-top: var(--lumo-space-xl);
-  }
-
-  /* === Padding (vertical) === */
-  .py-0 {
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-  .py-xs {
-    padding-bottom: var(--lumo-space-xs);
-    padding-top: var(--lumo-space-xs);
-  }
-  .py-s {
-    padding-bottom: var(--lumo-space-s);
-    padding-top: var(--lumo-space-s);
-  }
-  .py-m {
-    padding-bottom: var(--lumo-space-m);
-    padding-top: var(--lumo-space-m);
-  }
-  .py-l {
-    padding-bottom: var(--lumo-space-l);
-    padding-top: var(--lumo-space-l);
-  }
-  .py-xl {
-    padding-bottom: var(--lumo-space-xl);
-    padding-top: var(--lumo-space-xl);
-  }
-`;

package/utilities/transition.js

@@ -1,49 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-export const transition = css`
-  .transition {
-    transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
-      fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-colors {
-    transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-shadow {
-    transition-property: box-shadow;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-transform {
-    transition-property: rotate, scale, transform, translate;
-    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--lumo-utility-transition-duration, 150ms);
-  }
-
-  .transition-none {
-    transition-property: none;
-  }
-`;