@vaadin/component-base 25.0.0-beta4 → 25.0.0-beta6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +5 -5
  2. package/src/define.js +1 -1
  3. package/src/slot-controller.js +11 -1
  4. package/src/styles/style-props.js +45 -10
  5. package/src/styles/user-colors.js +9 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/component-base",
3
- "version": "25.0.0-beta4",
3
+ "version": "25.0.0-beta6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -33,15 +33,15 @@
33
33
  "dependencies": {
34
34
  "@open-wc/dedupe-mixin": "^1.3.0",
35
35
  "@vaadin/vaadin-development-mode-detector": "^2.0.0",
36
- "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
36
+ "@vaadin/vaadin-themable-mixin": "25.0.0-beta6",
37
37
  "@vaadin/vaadin-usage-statistics": "^2.1.0",
38
38
  "lit": "^3.0.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@vaadin/chai-plugins": "25.0.0-beta4",
42
- "@vaadin/test-runner-commands": "25.0.0-beta4",
41
+ "@vaadin/chai-plugins": "25.0.0-beta6",
42
+ "@vaadin/test-runner-commands": "25.0.0-beta6",
43
43
  "@vaadin/testing-helpers": "^2.0.0",
44
44
  "sinon": "^21.0.0"
45
45
  },
46
- "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
46
+ "gitHead": "b6b638bee18aa62f095e0a0b7bf16a39db756f84"
47
47
  }
package/src/define.js CHANGED
@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
13
13
 
14
14
  const experimentalMap = {};
15
15
 
16
- export function defineCustomElement(CustomElement, version = '25.0.0-beta4') {
16
+ export function defineCustomElement(CustomElement, version = '25.0.0-beta6') {
17
17
  Object.defineProperty(CustomElement, 'version', {
18
18
  get() {
19
19
  return version;
package/src/slot-controller.js CHANGED
@@ -129,6 +129,10 @@ export class SlotController extends EventTarget {
129
129
  getSlotChildren() {
130
130
  const { slotName } = this;
131
131
  return Array.from(this.host.childNodes).filter((node) => {
132
+ // Ignore nodes with data-slot-ignore attribute
133
+ if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-slot-ignore')) {
134
+ return false;
135
+ }
132
136
  // Either an element (any slot) or a text node (only un-named slot).
133
137
  return (
134
138
  (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -203,7 +207,13 @@ export class SlotController extends EventTarget {
203
207
 
204
208
  // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
205
209
  // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
206
- const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
210
+ // Also ignore nodes with data-slot-ignore attribute.
211
+ const newNodes = addedNodes.filter(
212
+ (node) =>
213
+ !isEmptyTextNode(node) &&
214
+ !current.includes(node) &&
215
+ !(node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-slot-ignore')),
216
+ );
207
217
 
208
218
  if (removedNodes.length) {
209
219
  this.nodes = current.filter((node) => !removedNodes.includes(node));
package/src/styles/style-props.js CHANGED
@@ -6,6 +6,28 @@
6
6
  import { css } from 'lit';
7
7
  import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
8
8
 
9
+ // NOTE: Base color CSS custom properties are explicitly registered as `<color>`
10
+ // here to avoid performance issues in Aura. Aura overrides these properties with
11
+ // values that use complex, nested relative color functions, and without explicit
12
+ // typing, Chrome 142 was found to render components that use them roughly 40% slower.
13
+ [
14
+ '--vaadin-text-color',
15
+ '--vaadin-text-color-disabled',
16
+ '--vaadin-text-color-secondary',
17
+ '--vaadin-border-color',
18
+ '--vaadin-border-color-secondary',
19
+ '--vaadin-background-color',
20
+ ].forEach((propertyName) => {
21
+ CSS.registerProperty({
22
+ name: propertyName,
23
+ syntax: '<color>',
24
+ inherits: true,
25
+ // Use this initial value so the color stays visible when the property
26
+ // is set to an invalid value to make debugging a bit easier.
27
+ initialValue: 'light-dark(black, white)',
28
+ });
29
+ });
30
+
9
31
  addGlobalThemeStyles(
10
32
  'vaadin-base',
11
33
  css`
@@ -40,7 +62,8 @@ addGlobalThemeStyles(
40
62
  --vaadin-padding-m: 12px;
41
63
  --vaadin-padding-l: 16px;
42
64
  --vaadin-padding-xl: 24px;
43
- --vaadin-padding-container: var(--vaadin-padding-xs) var(--vaadin-padding-s);
65
+ --vaadin-padding-block-container: var(--vaadin-padding-xs);
66
+ --vaadin-padding-inline-container: var(--vaadin-padding-s);
44
67
 
45
68
  /* Gap/spacing */
46
69
  --vaadin-gap-xs: 6px;
@@ -59,11 +82,11 @@ addGlobalThemeStyles(
59
82
  --vaadin-focus-ring-color: var(--vaadin-text-color);
60
83
 
61
84
  /* Icons, used as mask-image */
62
- --_vaadin-icon-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /></svg>');
63
- --_vaadin-icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>');
85
+ --_vaadin-icon-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>');
86
+ --_vaadin-icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
64
87
  --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
65
- --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
66
- --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>');
88
+ --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
89
+ --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>');
67
90
  --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
68
91
  --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');
69
92
  --_vaadin-icon-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');
@@ -72,23 +95,35 @@ addGlobalThemeStyles(
72
95
  --_vaadin-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
73
96
  --_vaadin-icon-link: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
74
97
  --_vaadin-icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>');
75
- --_vaadin-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
98
+ --_vaadin-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>');
76
99
  --_vaadin-icon-paper-airplane: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>');
77
100
  --_vaadin-icon-pen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>');
78
101
  --_vaadin-icon-play: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>');
79
- --_vaadin-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>');
102
+ --_vaadin-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>');
80
103
  --_vaadin-icon-redo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>');
81
104
  --_vaadin-icon-refresh: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22 10C22 10 19.995 7.26822 18.3662 5.63824C16.7373 4.00827 14.4864 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.1031 21 19.5649 18.2543 20.6482 14.5M22 10V4M22 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
82
105
  --_vaadin-icon-resize: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967c.2929.29289.2929.76777 0 1.06066L8.53033 18.5304c-.29289.2929-.76777.2929-1.06066 0s-.29289-.7678 0-1.0607L17.4697 7.46967c.2929-.29289.7677-.29289 1.0606 0Zm0 4.50003c.2929.2929.2929.7678 0 1.0607l-5.5 5.5c-.2929.2928-.7677.2928-1.0606 0-.2929-.2929-.2929-.7678 0-1.0607l5.4999-5.5c.2929-.2929.7678-.2929 1.0607 0Zm0 4.5c.2929.2928.2929.7677 0 1.0606l-1 1.0001c-.2929.2928-.7677.2929-1.0606 0-.2929-.2929-.2929-.7678 0-1.0607l1-1c.2929-.2929.7677-.2929 1.0606 0Z" fill="currentColor"/></svg>');
83
106
  --_vaadin-icon-sort: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none"><path d="M7.49854 6.99951C7.92795 6.99951 8.15791 7.50528 7.87549 7.82861L4.37646 11.8296C4.17728 12.0571 3.82272 12.0571 3.62354 11.8296L0.125488 7.82861C-0.157248 7.50531 0.0719873 6.99956 0.501465 6.99951H7.49854ZM3.62354 0.17041C3.82275 -0.0573875 4.17725 -0.0573848 4.37646 0.17041L7.87549 4.17041C8.15825 4.49373 7.92806 5.00049 7.49854 5.00049L0.501465 4.99951C0.0719873 4.99946 -0.157248 4.49371 0.125488 4.17041L3.62354 0.17041Z" fill="black"/></svg>');
84
107
  --_vaadin-icon-undo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>');
85
- --_vaadin-icon-upload: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>');
86
- --_vaadin-icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M3 20C5.33579 17.5226 8.50702 16 12 16C15.493 16 18.6642 17.5226 21 20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
87
- --_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>');
108
+ --_vaadin-icon-upload: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>');
109
+ --_vaadin-icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
110
+ --_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
88
111
 
89
112
  /* Cursors for interactive elements */
90
113
  --vaadin-clickable-cursor: pointer;
91
114
  --vaadin-disabled-cursor: not-allowed;
115
+
116
+ /* Use units so that the values can be used in calc() */
117
+ --safe-area-inset-top: env(safe-area-inset-top, 0px);
118
+ --safe-area-inset-right: env(safe-area-inset-right, 0px);
119
+ --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
120
+ --safe-area-inset-left: env(safe-area-inset-left, 0px);
121
+ }
122
+
123
+ @supports not (color: hsl(0 0 0)) {
124
+ :where(html) {
125
+ --_vaadin-safari-17-deg: 1deg;
126
+ }
92
127
  }
93
128
 
94
129
  @media (forced-colors: active) {
package/src/styles/user-colors.js CHANGED
@@ -16,44 +16,37 @@ addGlobalThemeStyles(
16
16
  --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
17
17
  --vaadin-user-color-1: oklch(
18
18
  from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
19
- calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
19
+ calc(h - var(--_hue-step) * 2 * var(--_vaadin-safari-17-deg, 1))
20
20
  );
21
21
  --vaadin-user-color-2: oklch(
22
- from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
22
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(--_vaadin-safari-17-deg, 1))
23
23
  );
24
24
  --vaadin-user-color-3: oklch(
25
25
  from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
26
- calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
26
+ calc(h - var(--_hue-step) * 0 * var(--_vaadin-safari-17-deg, 1))
27
27
  );
28
28
  --vaadin-user-color-4: oklch(
29
- from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
29
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(--_vaadin-safari-17-deg, 1))
30
30
  );
31
31
  --vaadin-user-color-5: oklch(
32
32
  from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
33
- calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
33
+ calc(h - var(--_hue-step) * -2 * var(--_vaadin-safari-17-deg, 1))
34
34
  );
35
35
  --vaadin-user-color-6: oklch(
36
- from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
36
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(--_vaadin-safari-17-deg, 1))
37
37
  );
38
38
  --vaadin-user-color-7: oklch(
39
39
  from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
40
- calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
40
+ calc(h - var(--_hue-step) * 4 * var(--_vaadin-safari-17-deg, 1))
41
41
  );
42
42
  --vaadin-user-color-8: oklch(
43
- from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
43
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(--_vaadin-safari-17-deg, 1))
44
44
  );
45
45
  --vaadin-user-color-9: oklch(
46
46
  from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
47
- calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
47
+ calc(h - var(--_hue-step) * 6 * var(--_vaadin-safari-17-deg, 1))
48
48
  );
49
49
  }
50
-
51
- @supports not (color: hsl(0 0 0)) {
52
- :where(:root),
53
- :where(:host) {
54
- ---_vaadin-safari-17-deg: 1deg;
55
- }
56
- }
57
50
  }
58
51
  `,
59
52
  );