@vaadin/aura 25.0.0-alpha18 → 25.0.0-alpha20

package/src/surface.css

@@ -0,0 +1,54 @@
+:where(:root, :host) {
+  --aura-surface-level: 1;
+}
+
+/* List all elements that are surfaces */
+:is(:root, :host),
+.aura-surface,
+.aura-surface-solid,
+vaadin-app-layout::part(navbar),
+vaadin-app-layout::part(drawer),
+vaadin-button,
+vaadin-card,
+vaadin-checkbox::part(checkbox),
+vaadin-master-detail-layout::part(detail),
+vaadin-menu-bar-button,
+vaadin-message-input,
+vaadin-radio-button::part(radio),
+vaadin-side-nav-item::part(content),
+::part(input-field),
+::part(overlay) {
+  --aura-surface-opacity: 0.5;
+
+  --aura-surface-solid: light-dark(
+    oklch(
+      from var(--aura-background-light)
+        min(
+          1,
+          l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) -
+            var(--aura-surface-opacity) / 20
+        )
+        clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
+    ),
+    oklch(
+      from var(--aura-background-dark)
+        calc(
+          max(l + 0.03, 0.25) + var(--aura-surface-level) * (0.03 - 0.008 * var(--aura-contrast)) -
+            var(--aura-surface-opacity) / 40
+        )
+        clamp(0, c * (1 + l), 0.2) h
+    )
+  );
+
+  --aura-surface: color-mix(in oklab, var(--aura-surface-solid) calc(100% * var(--aura-surface-opacity)), transparent);
+  --vaadin-background-color: var(--aura-surface-solid);
+}
+
+.aura-surface {
+  background: var(--aura-surface) padding-box;
+}
+
+.aura-surface-solid {
+  --aura-surface-opacity: 1;
+  background: var(--aura-surface-solid) padding-box;
+}

package/src/typography.css

@@ -0,0 +1,101 @@
+@import './fonts/InstrumentSans/InstrumentSans.css';
+
+:where(:root, :host) {
+  --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
+  --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
+
+  --aura-font-family: var(--aura-font-family-instrument-sans);
+
+  --aura-base-font-size: 16;
+  --aura-font-size-scale: 1.125;
+  --aura-base-line-height: 1.4;
+
+  --aura-font-weight: 400;
+  --aura-font-weight-medium: 500;
+  --aura-font-weight-semibold: 600;
+}
+
+@media (pointer: fine) {
+  :where(:root, :host) {
+    --aura-base-font-size: 14;
+  }
+}
+
+@supports not (-webkit-touch-callout: none) {
+  @media (pointer: coarse) {
+    /* Android optimizations */
+  }
+}
+
+@supports (-webkit-touch-callout: none) {
+  @media (pointer: coarse) {
+    :where(:root, :host) {
+      /* iOS/iPadOS optimizations */
+
+      /* Support iOS dynamic text size */
+      font: -apple-system-body;
+      --aura-base-font-size: 14;
+    }
+  }
+}
+
+:where(:root, :host, [theme]) {
+  --aura-font-size-xs: round(var(--aura-font-size-s) / var(--aura-font-size-scale), 0.0625rem);
+  --aura-font-size-s: round(var(--aura-font-size-m) / var(--aura-font-size-scale), 0.0625rem);
+  --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
+  --aura-font-size-l: round(var(--aura-font-size-m) * var(--aura-font-size-scale), 0.0625rem);
+  --aura-font-size-xl: round(var(--aura-font-size-l) * var(--aura-font-size-scale), 0.0625rem);
+
+  /* TODO sometimes in the Aura dev page in Safari, when switching  back to Components view, some of the side nav menu item texts disappear after the view transition. Removing these line heights "fixes" the issue. Another fix is to use system fonts. It sometimes also depends on the browser viewport size. */
+  --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), 0.125rem);
+  --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), 0.125rem);
+  --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), 0.125rem);
+  --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), 0.125rem);
+  --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem);
+}
+
+:where(body, :host) {
+  font-family: var(--aura-font-family);
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: var(--aura-font-weight);
+
+  /* Set to auto to disable grayscale/anti-aliased font smoothing (and use default sub-pixel anti-aliasing) */
+  -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
+  -moz-osx-font-smoothing: var(--aura-font-smoothing, grayscale);
+
+  /* We assume apps are built with responsive layouting in mind */
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+:where(body, :host, [theme]:not(html)) {
+  font-size: var(--aura-font-size-m);
+  line-height: var(--aura-line-height-m);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+  margin: 0;
+  font-weight: var(--aura-font-weight-semibold);
+}
+
+:where(h1) {
+  font-size: var(--aura-font-size-xl);
+  line-height: var(--aura-line-height-xl);
+}
+
+:where(h2, h3) {
+  font-size: var(--aura-font-size-l);
+  line-height: var(--aura-line-height-l);
+}
+
+:where(h4, h5) {
+  font-size: var(--aura-font-size-m);
+  line-height: var(--aura-line-height-m);
+}
+
+:where(h6) {
+  font-size: var(--aura-font-size-s);
+  line-height: var(--aura-line-height-s);
+}