npm - ogm-viewer - Versions diffs - 0.3.0 → 0.4.0 - Mend

ogm-viewer 0.3.0 → 0.4.0

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 (197) hide show

package/dist/ogm-viewer/assets/webawesome/styles/themes/awesome.css ADDED Viewed

@@ -0,0 +1,614 @@
+@import url('../layers.css');
+@import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the <html> element */
+@import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
+@layer wa-theme {
+  .wa-theme-awesome,
+  .wa-theme-awesome.wa-light,
+  .wa-theme-awesome .wa-light,
+  .wa-theme-awesome.wa-dark .wa-invert,
+  .wa-theme-awesome .wa-dark .wa-invert,
+  .wa-light .wa-theme-awesome,
+  .wa-dark .wa-theme-awesome.wa-invert,
+  .wa-dark .wa-theme-awesome .wa-invert {
+    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
+    color-scheme: light;
+    color: var(--wa-color-text-normal);
+    --wa-color-surface-raised: white;
+    --wa-color-surface-default: white;
+    --wa-color-surface-lowered: var(--wa-color-neutral-95);
+    --wa-color-surface-border: var(--wa-color-neutral-90);
+    --wa-color-text-normal: var(--wa-color-neutral-20);
+    --wa-color-text-quiet: var(--wa-color-neutral-40);
+    --wa-color-text-link: var(--wa-color-brand-40);
+    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
+    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
+    --wa-color-shadow: color-mix(
+      in oklab,
+      var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
+      transparent
+    );
+    --wa-color-focus: var(--wa-color-brand-60);
+    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 15%;
+    --wa-color-mix-active: var(--wa-color-surface-default) 10%;
+    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+    --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+    --wa-color-brand-border-quiet: var(--wa-color-brand-70);
+    --wa-color-brand-border-normal: var(--wa-color-brand-50);
+    --wa-color-brand-border-loud: var(--wa-color-brand-30);
+    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+    --wa-color-brand-on-normal: var(--wa-color-brand-40);
+    --wa-color-brand-on-loud: var(--wa-color-text-normal);
+    --wa-color-success-fill-quiet: var(--wa-color-success-95);
+    --wa-color-success-fill-normal: var(--wa-color-success-90);
+    --wa-color-success-fill-loud: var(--wa-color-success-80);
+    --wa-color-success-border-quiet: var(--wa-color-success-70);
+    --wa-color-success-border-normal: var(--wa-color-success-50);
+    --wa-color-success-border-loud: var(--wa-color-success-30);
+    --wa-color-success-on-quiet: var(--wa-color-success-40);
+    --wa-color-success-on-normal: var(--wa-color-success-40);
+    --wa-color-success-on-loud: var(--wa-color-text-normal);
+    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+    --wa-color-warning-fill-loud: var(--wa-color-warning-80);
+    --wa-color-warning-border-quiet: var(--wa-color-warning-70);
+    --wa-color-warning-border-normal: var(--wa-color-warning-50);
+    --wa-color-warning-border-loud: var(--wa-color-warning-30);
+    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+    --wa-color-warning-on-normal: var(--wa-color-warning-40);
+    --wa-color-warning-on-loud: var(--wa-color-text-normal);
+    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+    --wa-color-danger-fill-loud: var(--wa-color-danger-70);
+    --wa-color-danger-border-quiet: var(--wa-color-danger-70);
+    --wa-color-danger-border-normal: var(--wa-color-danger-50);
+    --wa-color-danger-border-loud: var(--wa-color-danger-30);
+    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+    --wa-color-danger-on-normal: var(--wa-color-danger-40);
+    --wa-color-danger-on-loud: var(--wa-color-text-normal);
+    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+    --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+    --wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
+    --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+    --wa-color-neutral-border-loud: var(--wa-color-neutral-30);
+    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+    --wa-color-neutral-on-normal: var(--wa-color-neutral-40);
+    --wa-color-neutral-on-loud: var(--wa-color-text-normal);
+    /* #endregion */
+  }
+  .wa-theme-awesome.wa-dark,
+  .wa-theme-awesome .wa-dark,
+  .wa-theme-awesome.wa-invert,
+  .wa-theme-awesome .wa-invert,
+  .wa-dark .wa-theme-awesome,
+  .wa-light .wa-theme-awesome.wa-invert,
+  .wa-light .wa-theme-awesome .wa-invert {
+    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
+    color-scheme: dark;
+    color: var(--wa-color-text-normal);
+    --wa-color-surface-raised: var(--wa-color-neutral-10);
+    --wa-color-surface-default: var(--wa-color-neutral-05);
+    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
+    --wa-color-surface-border: var(--wa-color-neutral-20);
+    --wa-color-text-normal: var(--wa-color-neutral-95);
+    --wa-color-text-quiet: var(--wa-color-neutral-60);
+    --wa-color-text-link: var(--wa-color-brand-70);
+    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
+    --wa-color-shadow: color-mix(
+      in oklab,
+      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
+      transparent
+    );
+    --wa-color-focus: var(--wa-color-brand-60);
+    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
+    --wa-color-mix-active: var(--wa-color-surface-default) 20%;
+    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+    --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+    --wa-color-brand-border-normal: var(--wa-color-brand-50);
+    --wa-color-brand-border-loud: var(--wa-color-brand-80);
+    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+    --wa-color-brand-on-normal: var(--wa-color-brand-80);
+    --wa-color-brand-on-loud: white;
+    --wa-color-success-fill-quiet: var(--wa-color-success-10);
+    --wa-color-success-fill-normal: var(--wa-color-success-20);
+    --wa-color-success-fill-loud: var(--wa-color-success-50);
+    --wa-color-success-border-quiet: var(--wa-color-success-30);
+    --wa-color-success-border-normal: var(--wa-color-success-50);
+    --wa-color-success-border-loud: var(--wa-color-success-80);
+    --wa-color-success-on-quiet: var(--wa-color-success-70);
+    --wa-color-success-on-normal: var(--wa-color-success-80);
+    --wa-color-success-on-loud: white;
+    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+    --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+    --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+    --wa-color-warning-border-normal: var(--wa-color-warning-50);
+    --wa-color-warning-border-loud: var(--wa-color-warning-80);
+    --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+    --wa-color-warning-on-normal: var(--wa-color-warning-80);
+    --wa-color-warning-on-loud: var(--wa-color-warning-05);
+    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+    --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+    --wa-color-danger-border-normal: var(--wa-color-danger-50);
+    --wa-color-danger-border-loud: var(--wa-color-danger-80);
+    --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+    --wa-color-danger-on-normal: var(--wa-color-danger-80);
+    --wa-color-danger-on-loud: white;
+    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+    --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+    --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+    --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+    --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+    --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+    --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
+    --wa-color-neutral-on-loud: white;
+    /* #endregion */
+  }
+  .wa-theme-awesome,
+  .wa-theme-awesome.wa-light,
+  .wa-theme-awesome .wa-light,
+  .wa-theme-awesome.wa-dark,
+  .wa-theme-awesome .wa-dark,
+  .wa-theme-awesome.wa-invert,
+  .wa-theme-awesome .wa-invert {
+    font-family: var(--wa-font-family-body);
+    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-font-family-body: 'Quicksand', sans-serif;
+    --wa-font-family-heading: var(--wa-font-family-body);
+    --wa-font-family-code: ui-monospace, monospace;
+    --wa-font-family-longform: 'Crimson Pro', serif;
+    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
+     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
+     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
+    --wa-font-size-scale: 1;
+    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
+    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
+    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
+    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
+    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
+    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
+    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
+    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
+    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
+    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
+    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */
+    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
+    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
+    --wa-font-weight-light: 400;
+    --wa-font-weight-normal: 500;
+    --wa-font-weight-semibold: 600;
+    --wa-font-weight-bold: 700;
+    --wa-font-weight-body: var(--wa-font-weight-normal);
+    --wa-font-weight-heading: var(--wa-font-weight-bold);
+    --wa-font-weight-code: var(--wa-font-weight-normal);
+    --wa-font-weight-longform: var(--wa-font-weight-normal);
+    --wa-font-weight-action: var(--wa-font-weight-bold);
+    --wa-line-height-condensed: 1.2;
+    --wa-line-height-normal: 1.6;
+    --wa-line-height-expanded: 2;
+    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
+    --wa-link-decoration-hover: underline;
+    /* #endregion */
+    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-space-scale: 1;
+    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
+    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
+    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
+    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
+    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
+    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
+    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
+    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
+    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
+    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
+    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */
+    --wa-content-spacing: var(--wa-space-l);
+    /* #endregion */
+    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-border-style: solid;
+    --wa-border-width-scale: 2;
+    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
+    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
+    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
+    /* #endregion */
+    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-border-radius-scale: 1.5;
+    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
+    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
+    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
+    --wa-border-radius-pill: 9999px;
+    --wa-border-radius-circle: 50%;
+    --wa-border-radius-square: 0px;
+    /* #endregion */
+    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-focus-ring-style: solid;
+    --wa-focus-ring-width: 0.1875rem; /* 3px */
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
+    --wa-focus-ring-offset: 0.0625rem; /* 1px */
+    /* #endregion */
+    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-shadow-offset-x-scale: 0;
+    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
+    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
+    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
+    --wa-shadow-offset-y-scale: 2;
+    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
+    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
+    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
+    --wa-shadow-blur-scale: 0;
+    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
+    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
+    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
+    --wa-shadow-spread-scale: 0;
+    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
+    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
+    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
+    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+      var(--wa-shadow-spread-s) var(--wa-color-shadow);
+    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+      var(--wa-shadow-spread-m) var(--wa-color-shadow);
+    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
+      var(--wa-shadow-spread-l) var(--wa-color-shadow);
+    /* #endregion */
+    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
+    --wa-transition-easing: ease-in;
+    --wa-transition-slow: 300ms;
+    --wa-transition-normal: 150ms;
+    --wa-transition-fast: 75ms;
+    /* #endregion */
+    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
+    /* Form Controls */
+    --wa-form-control-background-color: var(--wa-color-surface-default);
+    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
+    --wa-form-control-border-style: var(--wa-border-style);
+    --wa-form-control-border-width: var(--wa-border-width-s);
+    --wa-form-control-border-radius: var(--wa-border-radius-m);
+    --wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
+    --wa-form-control-label-color: var(--wa-color-text-normal);
+    --wa-form-control-label-font-weight: var(--wa-font-weight-bold);
+    --wa-form-control-label-line-height: var(--wa-line-height-normal);
+    --wa-form-control-value-color: var(--wa-color-text-normal);
+    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
+    --wa-form-control-value-line-height: var(--wa-line-height-condensed);
+    --wa-form-control-hint-color: var(--wa-color-text-quiet);
+    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
+    --wa-form-control-hint-line-height: var(--wa-line-height-normal);
+    --wa-form-control-placeholder-color: var(--wa-color-gray-50);
+    --wa-form-control-required-content: '*';
+    --wa-form-control-required-content-color: inherit;
+    --wa-form-control-required-content-offset: 0.1em;
+    --wa-form-control-padding-block: 1.375em;
+    --wa-form-control-padding-inline: 1.5em;
+    --wa-form-control-height: round(
+      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
+      1px
+    );
+    --wa-form-control-toggle-size: round(1.25em, 1px);
+    /* Buttons */
+    --wa-button-transform-hover: none;
+    --wa-button-transform-active: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
+    /* Panels */
+    --wa-panel-border-style: var(--wa-border-style);
+    --wa-panel-border-width: var(--wa-border-width-s);
+    --wa-panel-border-radius: var(--wa-border-radius-l);
+    /* Tooltips */
+    --wa-tooltip-arrow-size: 0.375rem;
+    --wa-tooltip-background-color: var(--wa-color-text-normal);
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
+    --wa-tooltip-border-radius: var(--wa-border-radius-s);
+    --wa-tooltip-content-color: var(--wa-color-surface-default);
+    --wa-tooltip-font-size: var(--wa-font-size-s);
+    --wa-tooltip-line-height: var(--wa-line-height-normal);
+    /* #endregion */
+  }
+}
+@layer wa-theme-dimension {
+  .wa-theme-awesome {
+    wa-button,
+    button,
+    input:is([type='button'], [type='reset'], [type='submit']),
+    a.wa-button {
+      /* Match the shadow color to the button's variant */
+      --wa-color-shadow: var(--wa-color-border-normal);
+      &[appearance='outlined'],
+      &.wa-outlined:not(.wa-filled) {
+        --wa-color-shadow: var(--wa-color-border-loud);
+      }
+      /* Disable transitions for a snappy, tactile feel */
+      --wa-transition-slow: 0;
+      --wa-transition-normal: 0;
+      --wa-transition-fast: 0;
+      &:not([appearance='plain'], .wa-plain) {
+        /* Give buttons a raised effect via solid box-shadow
+         * and adjust height to visually match other inputs */
+        &:where(:not(wa-button)),
+        &::part(base) {
+          height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
+          box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
+          /* Because shadow offsets don't change with writing mode,
+           * use physical margin properties to accommodate shadows
+           * instead of their logical equivalents */
+          margin-bottom: var(--wa-shadow-offset-y-s);
+          margin-right: var(--wa-shadow-offset-x-s);
+        }
+        /* Give active buttons a "punch in" effect */
+        &:not([disabled], :disabled):active {
+          &:where(:not(wa-button)),
+          &::part(base) {
+            color: var(--wa-color-fill-quiet);
+            background-color: var(--wa-color-shadow);
+            border-color: var(--wa-color-shadow);
+            box-shadow: none;
+          }
+        }
+      }
+    }
+    /* Give active buttons in vertical button groups a "punch in" effect
+     * without leaving a visible gap between buttons */
+    wa-button-group[orientation='vertical'] {
+      & > *:not(:last-child) {
+        &:is(wa-button:not([appearance='plain'], .wa-plain)),
+        & wa-button:not([appearance='plain'], .wa-plain) {
+          &::part(base) {
+            height: var(--wa-form-control-height);
+            margin-bottom: 0;
+            margin-right: 0;
+            box-shadow: none;
+          }
+          &:not([disabled], :disabled):active {
+            &::part(base) {
+              height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
+              margin-top: var(--wa-shadow-offset-y-s);
+              transform: none;
+            }
+          }
+        }
+      }
+      & > *:not(:first-child) {
+        &:is(wa-button:not([appearance='plain'], .wa-plain)),
+        & wa-button:not([appearance='plain'], .wa-plain) {
+          &:not([disabled], :disabled):active {
+            &::part(base) {
+              box-shadow: var(--wa-shadow-offset-x-s) calc(var(--wa-shadow-offset-y-s) * -1) 0 0 var(--wa-color-shadow);
+            }
+          }
+        }
+      }
+    }
+    wa-radio[appearance='button'] {
+      &:state(checked) {
+        background-color: var(--wa-form-control-activated-color);
+        border-color: var(--wa-form-control-activated-color);
+        color: var(--wa-color-surface-default);
+      }
+    }
+    /* Add inset shadow to text-based form controls */
+    :is(
+        wa-input,
+        wa-textarea,
+        wa-select,
+        wa-combobox,
+        input:not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          ),
+        textarea,
+        select
+      ):not(:focus, [appearance='filled']) {
+      &:where(:not(wa-input, wa-textarea, wa-select, wa-combobox)),
+      &:where(wa-input)::part(base),
+      &:where(wa-textarea)::part(base),
+      &:where(wa-select)::part(combobox),
+      &:where(wa-combobox)::part(combobox) {
+        box-shadow: inset var(--wa-shadow-offset-x-s)
+          max(var(--wa-shadow-offset-y-s), var(--wa-form-control-border-width)) 0 0 var(--wa-color-shadow);
+      }
+    }
+  }
+  /* Dark mode only */
+  .wa-theme-awesome.wa-dark,
+  .wa-theme-awesome .wa-dark,
+  .wa-theme-awesome.wa-invert,
+  .wa-theme-awesome .wa-invert,
+  .wa-dark .wa-theme-awesome,
+  .wa-light .wa-theme-awesome.wa-invert,
+  .wa-light .wa-theme-awesome .wa-invert {
+    wa-button,
+    button,
+    input:is([type='button'], [type='reset'], [type='submit']),
+    a.wa-button {
+      &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)),
+      &[appearance='accent'],
+      &.wa-accent {
+        --wa-color-shadow: var(--wa-color-border-quiet);
+        &:not([disabled], :disabled):active {
+          &:where(:not(wa-button)),
+          &::part(base) {
+            color: var(--wa-color-on-quiet);
+          }
+        }
+      }
+    }
+  }
+}
+@layer wa-theme-overrides {
+  .wa-theme-awesome {
+    /* Give opinionated borders to accent buttons */
+    wa-button,
+    button,
+    input:is([type='button'], [type='reset'], [type='submit']),
+    a.wa-button {
+      &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)),
+      &[appearance='accent'],
+      &.wa-accent {
+        --wa-color-shadow: var(--wa-color-on-loud);
+        &:where(:not(wa-button)),
+        &::part(base) {
+          border-color: var(--wa-color-shadow);
+        }
+      }
+    }
+    /* Treat accent buttons as outlined in button groups */
+    wa-button-group {
+      &[orientation='horizontal'] wa-button[appearance='accent'] {
+        margin-inline-start: var(--_button-horizontal-indent-outlined);
+      }
+      &[orientation='vertical'] wa-button[appearance='accent'] {
+        margin-block-start: var(--_button-vertical-indent-outlined);
+      }
+    }
+    wa-badge {
+      border-radius: var(--wa-border-radius-m);
+      font-weight: var(--wa-font-weight-bold);
+      text-transform: uppercase;
+    }
+    wa-callout {
+      &:is(:not([appearance]), [appearance='outlined'], [appearance='filled-outlined']) {
+        border-color: var(--wa-color-border-normal);
+      }
+    }
+    wa-card {
+      &::part(header) {
+        border-bottom-style: dotted;
+      }
+      &::part(footer) {
+        border-top-style: dotted;
+      }
+    }
+    wa-checkbox,
+    wa-tree-item::part(checkbox),
+    input[type='checkbox'] {
+      --checked-icon-color: var(--wa-color-surface-default);
+    }
+    wa-option {
+      --current-text-color: var(--wa-color-surface-default);
+    }
+    wa-switch {
+      --height: 1.5em;
+    }
+    wa-tag {
+      font-weight: var(--wa-font-weight-bold);
+    }
+  }
+  /* Dark mode only */
+  .wa-theme-awesome.wa-dark,
+  .wa-theme-awesome .wa-dark,
+  .wa-theme-awesome.wa-invert,
+  .wa-theme-awesome .wa-invert,
+  .wa-dark .wa-theme-awesome,
+  .wa-light .wa-theme-awesome.wa-invert,
+  .wa-light .wa-theme-awesome .wa-invert {
+    wa-button,
+    button,
+    input:is([type='button'], [type='reset'], [type='submit']),
+    a.wa-button {
+      /* Accent button shadows only match the text color in light mode
+       * Revert to the wa-theme-dimension layer for shadow color in dark mode */
+      &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)),
+      &[appearance='accent'],
+      &.wa-accent {
+        --wa-color-shadow: revert-layer;
+      }
+    }
+  }
+}