@vaadin/vaadin-lumo-styles 25.0.0-alpha5 → 25.0.0-alpha7

package/src/utilities/spacing.css

@@ -0,0 +1,682 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* === 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/src/utilities/transition.css

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+.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;
+}