@vaadin/vaadin-lumo-styles 25.0.0-alpha6 → 25.0.0-alpha8

package/src/utilities/typography.css

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

@@ -1,5 +1,3 @@
 import type { CSSResult } from 'lit';
 
-export const globals: CSSResult;
-
 export const style: CSSResult;

package/style.js

@@ -26,94 +26,6 @@ const style = css`
   }
 `;
 
-/**
- * Default values for component-specific custom properties.
- */
-const globals = css`
-  html {
-    /* Button */
-    --vaadin-button-background: var(--lumo-contrast-5pct);
-    --vaadin-button-border: none;
-    --vaadin-button-border-radius: var(--lumo-border-radius-m);
-    --vaadin-button-font-size: var(--lumo-font-size-m);
-    --vaadin-button-font-weight: 500;
-    --vaadin-button-height: var(--lumo-size-m);
-    --vaadin-button-margin: var(--lumo-space-xs) 0;
-    --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-    --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-    --vaadin-button-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-primary-background: var(--lumo-primary-color);
-    --vaadin-button-primary-border: none;
-    --vaadin-button-primary-font-weight: 600;
-    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-    --vaadin-button-tertiary-background: transparent !important;
-    --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-tertiary-font-weight: 500;
-    --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-    /* Checkbox */
-    --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-    --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-    --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-    --vaadin-checkbox-checkmark-char-indeterminate: '';
-    --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-    --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-    --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-    --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
-    --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
-    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
-    /* Radio button */
-    --vaadin-radio-button-background: var(--lumo-contrast-20pct);
-    --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
-    --vaadin-radio-button-dot-size: 3px;
-    --vaadin-radio-button-label-color: var(--lumo-body-text-color);
-    --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
-    --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
-      var(--lumo-space-xs);
-    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
-    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
-    --vaadin-selection-color: var(--lumo-primary-color);
-    --vaadin-selection-color-text: var(--lumo-primary-text-color);
-    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-    --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-    --vaadin-focus-ring-width: 2px;
-    /* Label */
-    --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-    --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-    --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-    --vaadin-input-field-label-font-weight: 500;
-    /* Helper */
-    --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-helper-font-weight: 400;
-    --vaadin-input-field-helper-spacing: 0.4em;
-    /* Error message */
-    --vaadin-input-field-error-color: var(--lumo-error-text-color);
-    --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-error-font-weight: 400;
-    /* Input field */
-    --vaadin-input-field-background: var(--lumo-contrast-10pct);
-    --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-    --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
-    --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
-    --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
-    --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
-    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
-    --vaadin-input-field-height: var(--lumo-size-m);
-    --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
-    --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-    --vaadin-input-field-value-color: var(--lumo-body-text-color);
-    --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-    --vaadin-input-field-value-font-weight: 500;
-  }
-`;
-
 addLumoGlobalStyles('style-props', style);
 
-export { globals, style };
+export { style };

package/utility.css

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './props.css';
+@import './src/utilities/accessibility.css';
+@import './src/utilities/background.css';
+@import './src/utilities/border.css';
+@import './src/utilities/filter.css';
+@import './src/utilities/flexbox-grid.css';
+@import './src/utilities/layout.css';
+@import './src/utilities/shadows.css';
+@import './src/utilities/sizing.css';
+@import './src/utilities/spacing.css';
+@import './src/utilities/transition.css';
+@import './src/utilities/typography.css';