@vaadin/vaadin-lumo-styles 25.0.0-alpha9 → 25.0.0-beta1

package/utilities/layout.js

@@ -1,504 +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 layout = css`
-  /* === Aspect ratio === */
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
-  .aspect-video {
-    aspect-ratio: 16 / 9;
-  }
-
-  /* === Box sizing === */
-  .box-border {
-    box-sizing: border-box;
-  }
-  .box-content {
-    box-sizing: content-box;
-  }
-
-  /* === Display === */
-  .block {
-    display: block;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline {
-    display: inline;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .inline-grid {
-    display: inline-grid;
-  }
-
-  /* === Overflow === */
-  .overflow-auto {
-    overflow: auto;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .overflow-scroll {
-    overflow: scroll;
-  }
-
-  /* === Position === */
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .static {
-    position: static;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .relative {
-    position: relative;
-  }
-
-  /* === Top, end, bottom, start === */
-  .-bottom-xs {
-    bottom: calc(var(--lumo-space-xs) / -1);
-  }
-  .-bottom-s {
-    bottom: calc(var(--lumo-space-s) / -1);
-  }
-  .-bottom-m {
-    bottom: calc(var(--lumo-space-m) / -1);
-  }
-  .-bottom-l {
-    bottom: calc(var(--lumo-space-l) / -1);
-  }
-  .-bottom-xl {
-    bottom: calc(var(--lumo-space-xl) / -1);
-  }
-  .-bottom-full {
-    bottom: -100%;
-  }
-  .bottom-0 {
-    bottom: 0;
-  }
-  .bottom-xs {
-    bottom: var(--lumo-space-xs);
-  }
-  .bottom-s {
-    bottom: var(--lumo-space-s);
-  }
-  .bottom-m {
-    bottom: var(--lumo-space-m);
-  }
-  .bottom-l {
-    bottom: var(--lumo-space-l);
-  }
-  .bottom-xl {
-    bottom: var(--lumo-space-xl);
-  }
-  .bottom-auto {
-    bottom: auto;
-  }
-  .bottom-full {
-    bottom: 100%;
-  }
-
-  .-end-xs {
-    inset-inline-end: calc(var(--lumo-space-xs) / -1);
-  }
-  .-end-s {
-    inset-inline-end: calc(var(--lumo-space-s) / -1);
-  }
-  .-end-m {
-    inset-inline-end: calc(var(--lumo-space-m) / -1);
-  }
-  .-end-l {
-    inset-inline-end: calc(var(--lumo-space-l) / -1);
-  }
-  .-end-xl {
-    inset-inline-end: calc(var(--lumo-space-xl) / -1);
-  }
-  .-end-full {
-    inset-inline-end: -100%;
-  }
-  .end-0 {
-    inset-inline-end: 0;
-  }
-  .end-xs {
-    inset-inline-end: var(--lumo-space-xs);
-  }
-  .end-s {
-    inset-inline-end: var(--lumo-space-s);
-  }
-  .end-m {
-    inset-inline-end: var(--lumo-space-m);
-  }
-  .end-l {
-    inset-inline-end: var(--lumo-space-l);
-  }
-  .end-xl {
-    inset-inline-end: var(--lumo-space-xl);
-  }
-  .end-auto {
-    inset-inline-end: auto;
-  }
-  .end-full {
-    inset-inline-end: 100%;
-  }
-
-  .-start-xs {
-    inset-inline-start: calc(var(--lumo-space-xs) / -1);
-  }
-  .-start-s {
-    inset-inline-start: calc(var(--lumo-space-s) / -1);
-  }
-  .-start-m {
-    inset-inline-start: calc(var(--lumo-space-m) / -1);
-  }
-  .-start-l {
-    inset-inline-start: calc(var(--lumo-space-l) / -1);
-  }
-  .-start-xl {
-    inset-inline-start: calc(var(--lumo-space-xl) / -1);
-  }
-  .-start-full {
-    inset-inline-start: -100%;
-  }
-  .start-0 {
-    inset-inline-start: 0;
-  }
-  .start-xs {
-    inset-inline-start: var(--lumo-space-xs);
-  }
-  .start-s {
-    inset-inline-start: var(--lumo-space-s);
-  }
-  .start-m {
-    inset-inline-start: var(--lumo-space-m);
-  }
-  .start-l {
-    inset-inline-start: var(--lumo-space-l);
-  }
-  .start-xl {
-    inset-inline-start: var(--lumo-space-xl);
-  }
-  .start-auto {
-    inset-inline-start: auto;
-  }
-  .start-full {
-    inset-inline-start: 100%;
-  }
-
-  .-top-xs {
-    top: calc(var(--lumo-space-xs) / -1);
-  }
-  .-top-s {
-    top: calc(var(--lumo-space-s) / -1);
-  }
-  .-top-m {
-    top: calc(var(--lumo-space-m) / -1);
-  }
-  .-top-l {
-    top: calc(var(--lumo-space-l) / -1);
-  }
-  .-top-xl {
-    top: calc(var(--lumo-space-xl) / -1);
-  }
-  .-top-full {
-    top: -100%;
-  }
-  .top-0 {
-    top: 0;
-  }
-  .top-xs {
-    top: var(--lumo-space-xs);
-  }
-  .top-s {
-    top: var(--lumo-space-s);
-  }
-  .top-m {
-    top: var(--lumo-space-m);
-  }
-  .top-l {
-    top: var(--lumo-space-l);
-  }
-  .top-xl {
-    top: var(--lumo-space-xl);
-  }
-  .top-auto {
-    top: auto;
-  }
-  .top-full {
-    top: 100%;
-  }
-
-  /* === Visibility === */
-  .invisible {
-    visibility: hidden;
-  }
-  .visible {
-    visibility: visible;
-  }
-
-  /* === Z-index === */
-  .z-0 {
-    z-index: 0;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .z-20 {
-    z-index: 20;
-  }
-  .z-30 {
-    z-index: 30;
-  }
-  .z-40 {
-    z-index: 40;
-  }
-  .z-50 {
-    z-index: 50;
-  }
-  .z-auto {
-    z-index: auto;
-  }
-
-  /* === Responsive design === */
-  @media (min-width: 640px) {
-    /* Display */
-    .sm\\:block {
-      display: block;
-    }
-    .sm\\:flex {
-      display: flex;
-    }
-    .sm\\:grid {
-      display: grid;
-    }
-    .sm\\:hidden {
-      display: none;
-    }
-    .sm\\:inline {
-      display: inline;
-    }
-    .sm\\:inline-block {
-      display: inline-block;
-    }
-    .sm\\:inline-flex {
-      display: inline-flex;
-    }
-    .sm\\:inline-grid {
-      display: inline-grid;
-    }
-
-    /* Position */
-    .sm\\:absolute {
-      position: absolute;
-    }
-    .sm\\:fixed {
-      position: fixed;
-    }
-    .sm\\:relative {
-      position: relative;
-    }
-    .sm\\:static {
-      position: static;
-    }
-    .sm\\:sticky {
-      position: sticky;
-    }
-  }
-  @media (min-width: 768px) {
-    /* Display */
-    .md\\:block {
-      display: block;
-    }
-    .md\\:flex {
-      display: flex;
-    }
-    .md\\:grid {
-      display: grid;
-    }
-    .md\\:hidden {
-      display: none;
-    }
-    .md\\:inline {
-      display: inline;
-    }
-    .md\\:inline-block {
-      display: inline-block;
-    }
-    .md\\:inline-flex {
-      display: inline-flex;
-    }
-    .md\\:inline-grid {
-      display: inline-grid;
-    }
-
-    /* Position */
-    .md\\:absolute {
-      position: absolute;
-    }
-    .md\\:fixed {
-      position: fixed;
-    }
-    .md\\:relative {
-      position: relative;
-    }
-    .md\\:static {
-      position: static;
-    }
-    .md\\:sticky {
-      position: sticky;
-    }
-  }
-  @media (min-width: 1024px) {
-    /* Display */
-    .lg\\:block {
-      display: block;
-    }
-    .lg\\:flex {
-      display: flex;
-    }
-    .lg\\:grid {
-      display: grid;
-    }
-    .lg\\:hidden {
-      display: none;
-    }
-    .lg\\:inline {
-      display: inline;
-    }
-    .lg\\:inline-block {
-      display: inline-block;
-    }
-    .lg\\:inline-flex {
-      display: inline-flex;
-    }
-    .lg\\:inline-grid {
-      display: inline-grid;
-    }
-
-    /* Position */
-    .lg\\:absolute {
-      position: absolute;
-    }
-    .lg\\:fixed {
-      position: fixed;
-    }
-    .lg\\:relative {
-      position: relative;
-    }
-    .lg\\:static {
-      position: static;
-    }
-    .lg\\:sticky {
-      position: sticky;
-    }
-  }
-  @media (min-width: 1280px) {
-    /* Display */
-    .xl\\:block {
-      display: block;
-    }
-    .xl\\:flex {
-      display: flex;
-    }
-    .xl\\:grid {
-      display: grid;
-    }
-    .xl\\:hidden {
-      display: none;
-    }
-    .xl\\:inline {
-      display: inline;
-    }
-    .xl\\:inline-block {
-      display: inline-block;
-    }
-    .xl\\:inline-flex {
-      display: inline-flex;
-    }
-    .xl\\:inline-grid {
-      display: inline-grid;
-    }
-
-    /* Position */
-    .xl\\:absolute {
-      position: absolute;
-    }
-    .xl\\:fixed {
-      position: fixed;
-    }
-    .xl\\:relative {
-      position: relative;
-    }
-    .xl\\:static {
-      position: static;
-    }
-    .xl\\:sticky {
-      position: sticky;
-    }
-  }
-  @media (min-width: 1536px) {
-    /* Display */
-    .\\32xl\\:block {
-      display: block;
-    }
-    .\\32xl\\:flex {
-      display: flex;
-    }
-    .\\32xl\\:grid {
-      display: grid;
-    }
-    .\\32xl\\:hidden {
-      display: none;
-    }
-    .\\32xl\\:inline {
-      display: inline;
-    }
-    .\\32xl\\:inline-block {
-      display: inline-block;
-    }
-    .\\32xl\\:inline-flex {
-      display: inline-flex;
-    }
-    .\\32xl\\:inline-grid {
-      display: inline-grid;
-    }
-
-    /* Position */
-    .\\32xl\\:absolute {
-      position: absolute;
-    }
-    .\\32xl\\:fixed {
-      position: fixed;
-    }
-    .\\32xl\\:relative {
-      position: relative;
-    }
-    .\\32xl\\:static {
-      position: static;
-    }
-    .\\32xl\\:sticky {
-      position: sticky;
-    }
-  }
-`;

package/utilities/shadows.js

@@ -1,28 +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 shadows = css`
-  /* === Box shadow === */
-  .shadow-none {
-    box-shadow: none;
-  }
-  .shadow-xs {
-    box-shadow: var(--lumo-box-shadow-xs);
-  }
-  .shadow-s {
-    box-shadow: var(--lumo-box-shadow-s);
-  }
-  .shadow-m {
-    box-shadow: var(--lumo-box-shadow-m);
-  }
-  .shadow-l {
-    box-shadow: var(--lumo-box-shadow-l);
-  }
-  .shadow-xl {
-    box-shadow: var(--lumo-box-shadow-xl);
-  }
-`;

package/utilities/sizing.js

@@ -1,121 +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 sizing = css`
-  /* === Height === */
-  .h-0 {
-    height: 0;
-  }
-  .h-xs {
-    height: var(--lumo-size-xs);
-  }
-  .h-s {
-    height: var(--lumo-size-s);
-  }
-  .h-m {
-    height: var(--lumo-size-m);
-  }
-  .h-l {
-    height: var(--lumo-size-l);
-  }
-  .h-xl {
-    height: var(--lumo-size-xl);
-  }
-  .h-auto {
-    height: auto;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .h-screen {
-    height: 100vh;
-  }
-
-  /* === Height (max) === */
-  .max-h-full {
-    max-height: 100%;
-  }
-  .max-h-screen {
-    max-height: 100vh;
-  }
-
-  /* === Height (min) === */
-  .min-h-0 {
-    min-height: 0;
-  }
-  .min-h-full {
-    min-height: 100%;
-  }
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
-  /* === Icon sizing === */
-  .icon-s {
-    height: var(--lumo-icon-size-s);
-    width: var(--lumo-icon-size-s);
-  }
-  .icon-m {
-    height: var(--lumo-icon-size-m);
-    width: var(--lumo-icon-size-m);
-  }
-  .icon-l {
-    height: var(--lumo-icon-size-l);
-    width: var(--lumo-icon-size-l);
-  }
-
-  /* === Width === */
-  .w-xs {
-    width: var(--lumo-size-xs);
-  }
-  .w-s {
-    width: var(--lumo-size-s);
-  }
-  .w-m {
-    width: var(--lumo-size-m);
-  }
-  .w-l {
-    width: var(--lumo-size-l);
-  }
-  .w-xl {
-    width: var(--lumo-size-xl);
-  }
-  .w-auto {
-    width: auto;
-  }
-  .w-full {
-    width: 100%;
-  }
-
-  /* === Width (max) === */
-  .max-w-full {
-    max-width: 100%;
-  }
-  .max-w-screen-sm {
-    max-width: 640px;
-  }
-  .max-w-screen-md {
-    max-width: 768px;
-  }
-  .max-w-screen-lg {
-    max-width: 1024px;
-  }
-  .max-w-screen-xl {
-    max-width: 1280px;
-  }
-  .max-w-screen-2xl {
-    max-width: 1536px;
-  }
-
-  /* === Width (min) === */
-  .min-w-0 {
-    min-width: 0;
-  }
-  .min-w-full {
-    min-width: 100%;
-  }
-`;