@cratis/scene.blueprint.default 4.41.0 → 4.42.0

package/shell/layout.css

@@ -2538,3 +2538,222 @@
         grid-column: auto !important;
     }
 }
+
+/* Dialogs: the box the host draws for a dialog template, once a dialogFrame has taken it on. */
+.foundation-dialog-host {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--foundation-space-4);
+    background: color-mix(in srgb, var(--foundation-text) 45%, transparent);
+    font-family: inherit;
+}
+
+.foundation-dialog-host > .scene-template {
+    display: flex;
+    flex-direction: column;
+    inline-size: min(34rem, 100%);
+    max-block-size: 100%;
+    overflow: hidden;
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+    color: var(--foundation-text);
+    box-shadow: 0 var(--foundation-space-2) var(--foundation-space-6) color-mix(in srgb, var(--foundation-text) 30%, transparent);
+}
+
+.foundation-dialog-host[data-tone='danger'] > .scene-template {
+    border-color: var(--foundation-danger);
+}
+
+.foundation-dialog-host[data-placement='side'] {
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 0;
+}
+
+.foundation-dialog-host[data-placement='side'] > .scene-template {
+    inline-size: min(30rem, 100%);
+    block-size: 100%;
+    border-radius: 0;
+    border-block: 0;
+    border-inline-end: 0;
+}
+
+.foundation-dialog-host[data-placement='full'] {
+    padding: 0;
+}
+
+.foundation-dialog-host[data-placement='full'] > .scene-template {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 0;
+    border: 0;
+}
+
+.foundation-dialog-host > .scene-template > div {
+    display: contents;
+}
+
+.foundation-dialog-host > .scene-template > [data-slot] {
+    padding: var(--foundation-space-3) var(--foundation-space-4);
+}
+
+.foundation-dialog-host [data-slot='header'] {
+    flex: none;
+    padding: 0;
+}
+
+.foundation-dialog-host [data-slot='body'],
+.foundation-dialog-host [data-slot='content'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow-y: auto;
+}
+
+.foundation-dialog-host [data-slot='actions'] {
+    flex: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--foundation-space-2);
+    border-block-start: 1px solid var(--foundation-border);
+    background: var(--foundation-surface);
+}
+
+.foundation-dialog-frame {
+    padding: var(--foundation-space-4);
+    border-block-end: 1px solid var(--foundation-border);
+}
+
+.foundation-dialog-frame[data-tone='danger'] .foundation-dialog-title {
+    color: var(--foundation-danger);
+}
+
+.foundation-dialog-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--foundation-space-3);
+}
+
+.foundation-dialog-title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+}
+
+.foundation-dialog-subtitle,
+.foundation-dialog-message {
+    margin: var(--foundation-space-1) 0 0;
+    color: var(--foundation-muted);
+}
+
+.foundation-dialog-message {
+    color: var(--foundation-text);
+    margin-block-start: var(--foundation-space-3);
+}
+
+.foundation-dialog-consequences {
+    margin: var(--foundation-space-2) 0 0;
+    padding-inline-start: var(--foundation-space-6);
+}
+
+.foundation-dialog-close {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border: 0;
+    border-radius: var(--foundation-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+
+.foundation-dialog-close:hover {
+    background: var(--foundation-hover);
+}
+
+@media (max-width: 40rem) {
+    .foundation-dialog-host {
+        padding: 0;
+    }
+
+    .foundation-dialog-host > .scene-template {
+        inline-size: 100%;
+        block-size: 100%;
+        border-radius: 0;
+        border: 0;
+    }
+}
+
+.foundation-notice {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--foundation-space-2);
+    border-radius: var(--foundation-radius);
+    color: var(--foundation-text);
+}
+
+.foundation-notice[data-empty] {
+    block-size: 0;
+    overflow: hidden;
+}
+
+.foundation-notice:not([data-empty]) {
+    padding: var(--foundation-space-2) var(--foundation-space-3);
+    border: 1px solid var(--foundation-border);
+}
+
+.foundation-notice p {
+    margin: 0;
+}
+
+.foundation-notice[data-tone='danger'] {
+    border-color: var(--foundation-danger);
+    background: var(--foundation-danger-background);
+}
+
+.foundation-notice[data-tone='warning'] {
+    border-color: var(--foundation-warning);
+    background: var(--foundation-warning-background);
+}
+
+.foundation-notice[data-tone='info'] {
+    border-color: var(--foundation-info);
+    background: var(--foundation-info-background);
+}
+
+.foundation-notice[data-tone='success'] {
+    border-color: var(--foundation-success);
+    background: var(--foundation-success-background);
+}
+
+.foundation-dialog-host [data-slot='actions'] > * {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--foundation-space-2);
+}
+
+.scene-template-slot[data-slot='providers'] > * {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-2);
+}
+
+.foundation-button[data-emphasis='danger'] {
+    border-color: var(--foundation-danger);
+    background: var(--foundation-danger);
+    color: var(--foundation-primary-contrast);
+}
+
+.foundation-action {
+    display: inline-flex;
+}

package/thumbnails/ConfirmDialog.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="ConfirmDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="80" y="50" width="160" height="100" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="62" width="100" height="8" rx="2" fill="#dc2626"/>
+    <rect x="92" y="78" width="130" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="104" y="92" width="96" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="104" y="102" width="80" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="130" y="128" width="50" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+    <rect x="186" y="128" width="44" height="14" rx="3" fill="#dc2626" stroke="#dc2626"/>
+</svg>

package/thumbnails/DetailDialog.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="DetailDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="60" y="32" width="200" height="136" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="72" y="44" width="70" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="72" y="60" width="120" height="60" rx="3" fill="#f4f5f7" stroke="#d5d9df"/>
+    <rect x="198" y="60" width="52" height="60" rx="3" fill="#f4f5f7" stroke="#d5d9df"/>
+    <rect x="186" y="146" width="64" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="116" y="146" width="56" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/ErrorScreen.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="ErrorScreen">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="100" y="26" width="120" height="150" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <circle cx="160" cy="62" r="18" fill="#fbd0d0"/>
+    <rect x="156" y="52" width="8" height="16" rx="2" fill="#dc2626"/>
+    <rect x="120" y="92" width="80" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="116" y="108" width="88" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="116" y="122" width="88" height="12" rx="3" fill="#f4f5f7" stroke="#d5d9df"/>
+    <rect x="124" y="144" width="72" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="130" y="162" width="60" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/FilterDialog.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="FilterDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="70" y="30" width="180" height="140" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="42" width="60" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="82" y="58" width="52" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="138" y="58" width="40" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="182" y="58" width="56" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="78" width="52" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="138" y="78" width="40" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="182" y="78" width="56" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="100" width="50" height="6" rx="2" fill="#4f46e5"/>
+    <rect x="184" y="146" width="54" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="122" y="146" width="54" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/ForbiddenScreen.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="ForbiddenScreen">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="100" y="26" width="120" height="150" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <circle cx="160" cy="62" r="18" fill="#fde7c3"/>
+    <rect x="153" y="58" width="14" height="12" rx="2" fill="#b45309" stroke="#b45309"/>
+    <rect x="120" y="92" width="80" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="116" y="108" width="88" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="124" y="132" width="72" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="130" y="152" width="60" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/FormDialog.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="FormDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="70" y="34" width="180" height="132" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="46" width="80" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="82" y="64" width="156" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="88" width="156" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="112" width="156" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="172" y="142" width="62" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="106" y="142" width="58" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/LoginScreen.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="LoginScreen">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="100" y="26" width="120" height="150" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="144" y="36" width="32" height="16" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="112" y="62" width="96" height="8" rx="2" fill="#d5d9df"/>
+    <rect x="112" y="76" width="96" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="112" y="98" width="96" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="112" y="122" width="96" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="112" y="142" width="44" height="12" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="164" y="142" width="44" height="12" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="130" y="162" width="60" height="6" rx="2" fill="#d5d9df"/>
+</svg>

package/thumbnails/LookupDialog.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="LookupDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="70" y="30" width="180" height="140" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="42" width="80" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="82" y="58" width="156" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="78" width="156" height="14" rx="3" fill="#e0e7ff" stroke="#4f46e5"/>
+    <rect x="82" y="96" width="156" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="82" y="114" width="156" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="184" y="146" width="54" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="122" y="146" width="54" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/NotFoundScreen.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="NotFoundScreen">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="100" y="26" width="120" height="150" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <circle cx="160" cy="62" r="18" fill="#e3e5ea"/>
+    <rect x="124" y="92" width="72" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="116" y="108" width="88" height="6" rx="2" fill="#d5d9df"/>
+    <rect x="116" y="124" width="88" height="16" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="130" y="150" width="60" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/QuickCreateDialog.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="QuickCreateDialog">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="80" y="38" width="160" height="124" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="50" width="70" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="92" y="68" width="136" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="88" width="136" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="108" width="136" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="176" y="138" width="52" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="116" y="138" width="54" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>

package/thumbnails/SideSheet.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="SideSheet">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect width="320" height="200" rx="8" fill="#9aa0ab" opacity="0.45"/>
+    <rect x="0" y="0" width="320" height="22" rx="0" fill="#c7c9d1" stroke="#c7c9d1"/>
+    <rect x="180" y="0" width="140" height="200" rx="0" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="192" y="12" width="70" height="8" rx="2" fill="#9aa0ab"/>
+    <rect x="192" y="34" width="116" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="192" y="54" width="116" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="192" y="74" width="116" height="14" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="192" y="94" width="116" height="40" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="176" width="60" height="14" rx="3" fill="#4f46e5" stroke="#4f46e5"/>
+    <rect x="192" y="176" width="44" height="14" rx="3" fill="#e3e5ea" stroke="#d5d9df"/>
+</svg>