@vaadin/vaadin-lumo-styles 24.0.5 → 24.1.0-alpha10

package/badge-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { badge } from './badge.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('badge', badge);

package/color-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { color } from './color.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('color', color);

package/color.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const colorBase = css`
   :host {
@@ -78,11 +79,16 @@ const colorBase = css`
     --lumo-success-text-color: hsl(145, 85%, 25%);
     --lumo-success-contrast-color: #fff;
   }
+
+  /* forced-colors mode adjustments */
+  @media (forced-colors: active) {
+    html {
+      --lumo-disabled-text-color: GrayText;
+    }
+  }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('color-props', colorBase);
 
 const color = css`
   [theme~='dark'] {

package/global.js

@@ -0,0 +1,5 @@
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+export const addLumoGlobalStyles = (id, ...styles) => {
+  addGlobalThemeStyles(`lumo-${id}`, styles);
+};

package/mixins/input-field-shared.js

@@ -86,9 +86,15 @@ const inputField = css`
     opacity: 0;
   }
 
+  /* Read-only style */
+  :host([readonly]) {
+    --vaadin-input-field-border-color: transparent;
+  }
+
   /* Disabled style */
   :host([disabled]) {
     pointer-events: none;
+    --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
   }
 
   :host([disabled]) [part='label'],
@@ -98,6 +104,10 @@ const inputField = css`
   }
 
   /* Invalid style */
+  :host([invalid]) {
+    --vaadin-input-field-border-color: var(--lumo-error-color);
+  }
+
   :host([invalid][focus-ring]) [part='input-field'] {
     box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -41,8 +41,8 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "~24.0.5",
-    "@vaadin/vaadin-themable-mixin": "~24.0.5"
+    "@vaadin/icon": "24.1.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -51,5 +51,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

package/sizing.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const sizing = css`
   :host {
@@ -23,8 +24,6 @@ const sizing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('sizing-props', sizing);
 
 export { sizing };

package/spacing.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const spacing = css`
   :host {
@@ -31,8 +32,6 @@ const spacing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${spacing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('spacing-props', spacing);
 
 export { spacing };

package/style.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const style = css`
   :host {
@@ -36,8 +37,6 @@ const globals = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}$</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('style-props', style);
 
 export { globals, style };

package/typography-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { typography } from './typography.js';
+
+addLumoGlobalStyles('typography', typography);

package/typography.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const font = css`
   :host {
@@ -123,9 +124,6 @@ const typography = css`
 `;
 
 registerStyles('', typography, { moduleId: 'lumo-typography' });
-
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('typography-props', font);
 
 export { font, typography };

package/user-colors.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const userColors = css`
   :host {
@@ -28,8 +29,5 @@ const userColors = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${userColors.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
-
+addLumoGlobalStyles('user-color-props', userColors);
 export { userColors };

package/utility-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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/version.js

@@ -12,7 +12,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '24.0.5';
+    return '24.1.0-alpha10';
   }
 }