release

CHANGELOG.md

@@ -2,6 +2,13 @@ Changelog
 =========
 
 
+
+## v9.5.2 *(2024-05-15)*
+- Fix `--ui-shadow-large` in light-mode (was a bit too dark).
+- Animation speed increased from 0.3 to 0.25s.
+- Fix `Dialog`'s rendering artifacts in Safari. 
+
+
 ## v9.5.1, v9.5.0 *(2024-05-12)*
 - New property for `Dialog`: `modal`.
 - Fix square radiobuttons bug.

docs-src/pages/changelog.svelte

@@ -1,4 +1,10 @@
 <h1>Changelog</h1>
+<h2>v9.5.2 <em>(2024-05-15)</em></h2>
+<ul>
+<li>Fix <code>--ui-shadow-large</code> in light-mode (was a bit too dark).</li>
+<li>Animation speed increased from 0.3 to 0.25s.</li>
+<li>Fix <code>Dialog</code>&#39;s rendering artifacts in Safari.</li>
+</ul>
 <h2>v9.5.1, v9.5.0 <em>(2024-05-12)</em></h2>
 <ul>
 <li>New property for <code>Dialog</code>: <code>modal</code>.</li>

gulpfile.js

@@ -2,7 +2,7 @@
 import { createGulpEsbuild } from 'gulp-esbuild';
 import { deleteAsync } from 'del';
 import cache from 'gulp-cached';
-import cleanCSS from 'gulp-clean-css';
+import cleanCSS from 'gulp-cleaner-css';
 import clear from 'screen-clear';
 import concat from 'gulp-concat';
 import fs from 'fs';

package.json

@@ -53,7 +53,7 @@
     "globals": "^15.2.0",
     "gulp": "^5.0.0",
     "gulp-cached": "^1.1.1",
-    "gulp-clean-css": "^4.3.0",
+    "gulp-cleaner-css": "^4.3.2",
     "gulp-concat": "^2.6.1",
     "gulp-esbuild": "^0.12.0",
     "gulp-eslint-new": "^2.0.0",

src/dialog/Dialog.css

@@ -21,6 +21,9 @@
 
 
 .dialog {
+	--ui-dialog-border-radius: var(--ui-border-radius-l);
+	--ui-dialog-inner-border-radius: calc(var(--ui-dialog-border-radius) - 1px);
+
 	opacity: 0;
 	transform: scale(0.8);
 	transition:
@@ -30,15 +33,14 @@
 	min-width: 15rem;
 	max-width: 95vw;
 	color: var(--ui-color-text);
-	border-radius: var(--ui-border-radius-m);
+	border-radius: var(--ui-dialog-border-radius);
 	background: var(--ui-popup-background);
 	border: var(--ui-popup-border);
 	box-shadow: var(--ui-shadow-large);
 	display: flex;
 	flex-flow: column;
 	align-items: stretch;
 	justify-content: stretch;
-	overflow: hidden;
 }
 
 .opened .dialog { opacity: 1; transform: scale(1); }
@@ -51,9 +53,7 @@
 	font-size: var(--ui-font-xl);
 	font-weight: 300;
 	margin: 0;
-	border-bottom: 1px solid var(--ui-color-border);
-	border-top-left-radius: calc(var(--ui-border-radius-m) - 1px);
-	border-top-right-radius: calc(var(--ui-border-radius-m) - 1px);
+	border-bottom: 0.5px solid var(--ui-color-border);
 }
 
 .dialog-content {
@@ -73,12 +73,10 @@
 	box-shadow: var(--ui-shadow-focus) inset;
 }
 
-
 .dialog-footer {
-	border-top: 1px solid var(--ui-color-border);
-
-	border-bottom-left-radius: calc(var(--ui-border-radius-m) - 1px);
-	border-bottom-right-radius: calc(var(--ui-border-radius-m) - 1px);
+	border-top: 0.5px solid var(--ui-color-border);
+	border-bottom-left-radius: var(--ui-dialog-inner-border-radius);
+	border-bottom-right-radius: var(--ui-dialog-inner-border-radius);
 }
 
 .dialog-footer [slot="footer"] {
@@ -90,9 +88,14 @@
 	gap: 0.5rem;
 }
 
+.dialog-footer .button-has-text { min-width: 9ch; }
 
 
-.dialog-footer .button-has-text { min-width: 9ch; }
+.dialog-header,
+.dialog.no-title .dialog-content {
+	border-top-left-radius: var(--ui-dialog-inner-border-radius);
+	border-top-right-radius: var(--ui-dialog-inner-border-radius);
+}
 
 .dialog-header:empty { display: none; }
 
@@ -105,9 +108,6 @@
 	box-shadow: none;
 }
 
-
-
-
 @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
 	.dialog-backdrop.opened {
 		-webkit-backdrop-filter: contrast(0.8) grayscale(0.5) brightness(0.5) blur(1px);

src/dialog/Dialog.svelte

@@ -11,7 +11,7 @@
 	bind:this="{element}"
 	on:mousedown="{onBackdropMousedown}"
 	on:click="{onBackdropClick}">
-	<div class="dialog" bind:this="{dialogEl}">
+	<div class="dialog" class:no-title="{!title}" bind:this="{dialogEl}">
 		<div tabindex="0" class="focus-trap focus-trap-top" on:focus="{focusLast}"></div>
 		<h1 class="dialog-header">{title}</h1>
 		<div class="dialog-content" bind:this="{contentEl}"><slot/></div>

src/root.css

@@ -14,7 +14,7 @@
 	--ui-margin-l: 1rem;			/* 16px */
 
 
-	--ui-animation-speed: .3s;
+	--ui-animation-speed: .25s;
 	--ui-button-height: 2.25rem;    /* 36px */
 
 
@@ -31,7 +31,7 @@
 	--ui-shadow-focus: 0 0 2px 1px var(--ui-color-accent);
 	--ui-shadow-danger: 0 0 2px 1px var(--ui-color-danger);
 	--ui-shadow-small: 0 0 0 0.5px #fff4, 0 3px 10px #0006;
-	--ui-shadow-large: 0 0 0 1px #000, 0 5px 20px #000a;
+	--ui-shadow-large: 0 0 0 1px #0003, 0 5px 20px #000a;
 	--ui-shadow-fancy:
 		0 0 0 0.5px #111,
 		0 1px 5px rgb(0 0 0 / 30%),