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

package/utilities/typography.js

@@ -1,344 +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 typography = css`
-  /* === Font size === */
-  .text-2xs {
-    font-size: var(--lumo-font-size-xxs);
-  }
-  .text-xs {
-    font-size: var(--lumo-font-size-xs);
-  }
-  .text-s {
-    font-size: var(--lumo-font-size-s);
-  }
-  .text-m {
-    font-size: var(--lumo-font-size-m);
-  }
-  .text-l {
-    font-size: var(--lumo-font-size-l);
-  }
-  .text-xl {
-    font-size: var(--lumo-font-size-xl);
-  }
-  .text-2xl {
-    font-size: var(--lumo-font-size-xxl);
-  }
-  .text-3xl {
-    font-size: var(--lumo-font-size-xxxl);
-  }
-
-  /* === Font weight === */
-  .font-thin {
-    font-weight: 100;
-  }
-  .font-extralight {
-    font-weight: 200;
-  }
-  .font-light {
-    font-weight: 300;
-  }
-  .font-normal {
-    font-weight: 400;
-  }
-  .font-medium {
-    font-weight: 500;
-  }
-  .font-semibold {
-    font-weight: 600;
-  }
-  .font-bold {
-    font-weight: 700;
-  }
-  .font-extrabold {
-    font-weight: 800;
-  }
-  .font-black {
-    font-weight: 900;
-  }
-
-  /* === Line clamp === */
-  [class*='line-clamp-'] {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-  }
-  .line-clamp-1 {
-    -webkit-line-clamp: 1;
-  }
-  .line-clamp-2 {
-    -webkit-line-clamp: 2;
-  }
-  .line-clamp-3 {
-    -webkit-line-clamp: 3;
-  }
-  .line-clamp-4 {
-    -webkit-line-clamp: 4;
-  }
-  .line-clamp-5 {
-    -webkit-line-clamp: 5;
-  }
-  .line-clamp-6 {
-    -webkit-line-clamp: 6;
-  }
-
-  /* === Line height === */
-  .leading-none {
-    line-height: 1;
-  }
-  .leading-xs {
-    line-height: var(--lumo-line-height-xs);
-  }
-  .leading-s {
-    line-height: var(--lumo-line-height-s);
-  }
-  .leading-m {
-    line-height: var(--lumo-line-height-m);
-  }
-
-  /* === List style type === */
-  .list-none {
-    list-style-type: none;
-  }
-
-  /* === Text alignment === */
-  .text-left {
-    text-align: left;
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-right {
-    text-align: right;
-  }
-  .text-justify {
-    text-align: justify;
-  }
-
-  /* === Text color === */
-  .text-header {
-    color: var(--lumo-header-text-color);
-  }
-  .text-body {
-    color: var(--lumo-body-text-color);
-  }
-  .text-secondary {
-    color: var(--lumo-secondary-text-color);
-  }
-  .text-tertiary {
-    color: var(--lumo-tertiary-text-color);
-  }
-  .text-disabled {
-    color: var(--lumo-disabled-text-color);
-  }
-  .text-primary {
-    color: var(--lumo-primary-text-color);
-  }
-  .text-primary-contrast {
-    color: var(--lumo-primary-contrast-color);
-  }
-  .text-error {
-    color: var(--lumo-error-text-color);
-  }
-  .text-error-contrast {
-    color: var(--lumo-error-contrast-color);
-  }
-  .text-success {
-    color: var(--lumo-success-text-color);
-  }
-  .text-success-contrast {
-    color: var(--lumo-success-contrast-color);
-  }
-  .text-warning {
-    color: var(--lumo-warning-text-color);
-  }
-  .text-warning-contrast {
-    color: var(--lumo-warning-contrast-color);
-  }
-
-  /* == Text decoration === */
-  .line-through {
-    text-decoration-line: line-through;
-  }
-  .no-underline {
-    text-decoration-line: none;
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
-
-  /* === Text overflow === */
-  .overflow-clip {
-    text-overflow: clip;
-  }
-  .overflow-ellipsis {
-    text-overflow: ellipsis;
-  }
-
-  /* === Text transform === */
-  .capitalize {
-    text-transform: capitalize;
-  }
-  .lowercase {
-    text-transform: lowercase;
-  }
-  .uppercase {
-    text-transform: uppercase;
-  }
-
-  /* === Whitespace === */
-  .whitespace-normal {
-    white-space: normal;
-  }
-  .whitespace-break-spaces {
-    white-space: normal;
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .whitespace-pre {
-    white-space: pre;
-  }
-  .whitespace-pre-line {
-    white-space: pre-line;
-  }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
-
-  /* === Responsive design === */
-  @media (min-width: 640px) {
-    .sm\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .sm\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .sm\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .sm\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .sm\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .sm\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .sm\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .sm\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 768px) {
-    .md\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .md\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .md\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .md\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .md\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .md\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .md\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .md\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1024px) {
-    .lg\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .lg\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .lg\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .lg\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .lg\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .lg\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .lg\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .lg\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1280px) {
-    .xl\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .xl\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .xl\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .xl\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .xl\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .xl\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .xl\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .xl\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1536px) {
-    .\\32xl\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .\\32xl\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .\\32xl\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .\\32xl\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .\\32xl\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .\\32xl\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .\\32xl\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .\\32xl\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-`;

package/utility-global.js

@@ -1,9 +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 { addLumoGlobalStyles } from './global.js';
-import { utility } from './utility.js';
-
-addLumoGlobalStyles('utility', utility);

package/utility.d.ts

@@ -1,3 +0,0 @@
-import type { CSSResult } from 'lit';
-
-export const utility: CSSResult;

package/utility.js

@@ -1,34 +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, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { accessibility } from './utilities/accessibility.js';
-import { background } from './utilities/background.js';
-import { border } from './utilities/border.js';
-import { filter } from './utilities/filter.js';
-import { flexboxAndGrid } from './utilities/flexbox-grid.js';
-import { layout } from './utilities/layout.js';
-import { shadows } from './utilities/shadows.js';
-import { sizing } from './utilities/sizing.js';
-import { spacing } from './utilities/spacing.js';
-import { transition } from './utilities/transition.js';
-import { typography } from './utilities/typography.js';
-
-/* prettier-ignore */
-export const utility = css`
-${accessibility}
-${background}
-${border}
-${filter}
-${flexboxAndGrid}
-${layout}
-${shadows}
-${sizing}
-${spacing}
-${transition}
-${typography}
-`;
-
-registerStyles('', utility, { moduleId: 'lumo-utility' });