@inglorious/ui 9.5.1 → 9.6.0

package/src/styles/themes/material-ui.css

@@ -0,0 +1,687 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+.iw-theme-material-ui {
+  --iw-font-family-sans: "Roboto", "Helvetica", "Arial", sans-serif;
+  /* The theme on the page itself: the element with the theme class, usually
+     <body>, takes its background, text color and font. */
+  background-color: var(--iw-color-bg);
+  color: var(--iw-color-text);
+  font-family: var(--iw-font-family-sans);
+
+  /* ========================================
+     MATERIAL UI THEME - Material UI defaults
+     ======================================== */
+
+  /* Semantic Colors */
+  --iw-color-bg: var(--iw-color-white);
+  --iw-color-bg-secondary: #f5f5f5;
+  --iw-color-bg-tertiary: #eeeeee;
+  --iw-color-surface: var(--iw-color-white);
+  --iw-color-surface-hover: rgba(0, 0, 0, 0.04);
+  --iw-color-surface-active: rgba(0, 0, 0, 0.08);
+
+  --iw-color-text: rgba(0, 0, 0, 0.87);
+  --iw-color-text-secondary: rgba(0, 0, 0, 0.6);
+  --iw-color-text-muted: rgba(0, 0, 0, 0.6);
+
+  --iw-color-border: rgba(0, 0, 0, 0.12);
+  --iw-color-border-focus: #1976d2;
+
+  --iw-color-primary: #1976d2;
+  --iw-color-primary-hover: #1565c0;
+  --iw-color-primary-active: #1565c0;
+  --iw-color-primary-text: var(--iw-color-white);
+
+  /* Material UI's secondary color */
+  --iw-color-accent: #9c27b0;
+  --iw-color-accent-hover: #7b1fa2;
+  --iw-color-accent-active: #7b1fa2;
+
+  --iw-color-success: #2e7d32;
+  --iw-color-success-dark: #1b5e20;
+  --iw-color-warning: #ed6c02;
+  --iw-color-warning-dark: #e65100;
+  --iw-color-error: #d32f2f;
+  --iw-color-error-dark: #c62828;
+  --iw-color-info: #0288d1;
+  --iw-color-info-dark: #01579b;
+
+  /* Elevations 1, 2, 4, 8 and 24 */
+  --iw-shadow-sm:
+    0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  --iw-shadow-md:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  --iw-shadow-lg:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  --iw-shadow-xl:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --iw-shadow-2xl:
+    0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12);
+
+  /* One corner radius for everything, as Material UI's shape */
+  --iw-radius-sm: 4px;
+  --iw-radius-md: 4px;
+  --iw-radius-lg: 4px;
+
+  /* Buttons and tabs carry their labels as Material UI does */
+  --iw-label-text-transform: uppercase;
+  --iw-label-letter-spacing: 0.02857em;
+  --iw-label-font-weight: var(--iw-font-weight-medium);
+
+  /* ========================================
+     COMPONENT TOKENS
+     ======================================== */
+
+  /* Button */
+  --iw-button-bg: var(--iw-color-primary);
+  --iw-button-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-bg-active: var(--iw-color-primary-active);
+  --iw-button-text: var(--iw-color-primary-text);
+  --iw-button-border: var(--iw-color-primary);
+  --iw-button-radius: var(--iw-radius-md);
+  --iw-button-shadow: var(--iw-shadow-md);
+  --iw-button-shadow-hover: var(--iw-shadow-lg);
+  --iw-button-shadow-active: var(--iw-shadow-xl);
+
+  /* A button's default color is primary, as in Material UI */
+  --iw-button-default-color: var(--iw-color-primary);
+  --iw-button-default-bg: var(--iw-color-primary);
+  --iw-button-default-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-default-bg-active: var(--iw-color-primary-active);
+  --iw-button-default-border: var(--iw-color-primary);
+  --iw-button-default-text: var(--iw-color-primary-text);
+
+  /* Input: an outlined text field */
+  --iw-input-bg: transparent;
+  --iw-input-bg-hover: transparent;
+  --iw-input-bg-focus: transparent;
+  --iw-input-text: var(--iw-color-text);
+  --iw-input-text-placeholder: rgba(0, 0, 0, 0.42);
+  --iw-input-border: rgba(0, 0, 0, 0.23);
+  --iw-input-border-hover: var(--iw-color-text);
+  --iw-input-border-focus: var(--iw-color-primary);
+  --iw-input-radius: var(--iw-radius-md);
+  /* With the border, a 2px outline */
+  --iw-input-shadow-focus: inset 0 0 0 1px var(--iw-input-border-focus);
+
+  /* App bar */
+  --iw-app-bar-bg: #f5f5f5;
+
+  /* Drawer */
+  --iw-drawer-bg: var(--iw-color-surface);
+
+  /* Card: a Paper at elevation 1 */
+  --iw-card-bg: var(--iw-color-surface);
+  --iw-card-border: transparent;
+  --iw-card-radius: var(--iw-radius-md);
+  --iw-card-shadow: var(--iw-shadow-sm);
+  --iw-card-shadow-hover: var(--iw-shadow-xl);
+
+  /* Badge */
+  --iw-badge-radius: var(--iw-radius-full);
+
+  /* Chip */
+  --iw-chip-bg: rgba(0, 0, 0, 0.08);
+
+  /* List */
+  --iw-list-item: transparent;
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 8%,
+    transparent
+  );
+
+  /* Alert */
+  --iw-alert-radius: var(--iw-radius-md);
+  --iw-alert-shadow: none;
+  color-scheme: light;
+}
+
+/* Dark variant */
+.iw-theme-material-ui.iw-theme-dark {
+  color-scheme: dark;
+
+  --iw-color-bg: #121212;
+  --iw-color-bg-secondary: #1e1e1e;
+  --iw-color-bg-tertiary: #2c2c2c;
+  /* A raised surface is lightened, as Material UI's elevation overlay */
+  --iw-color-surface: #1e1e1e;
+  --iw-color-surface-hover: rgba(255, 255, 255, 0.08);
+  --iw-color-surface-active: rgba(255, 255, 255, 0.16);
+  --iw-color-text: var(--iw-color-white);
+  --iw-color-text-secondary: rgba(255, 255, 255, 0.7);
+  --iw-color-text-muted: rgba(255, 255, 255, 0.7);
+  --iw-color-border: rgba(255, 255, 255, 0.12);
+
+  --iw-color-primary: #90caf9;
+  --iw-color-primary-hover: #42a5f5;
+  --iw-color-primary-active: #42a5f5;
+  --iw-color-primary-text: rgba(0, 0, 0, 0.87);
+
+  --iw-color-border-focus: #90caf9;
+
+  --iw-color-accent: #ce93d8;
+  --iw-color-accent-hover: #ab47bc;
+  --iw-color-accent-active: #ab47bc;
+
+  --iw-color-success: #66bb6a;
+  --iw-color-success-dark: #388e3c;
+  --iw-color-warning: #ffa726;
+  --iw-color-warning-dark: #f57c00;
+  --iw-color-error: #f44336;
+  --iw-color-error-dark: #d32f2f;
+  --iw-color-info: #29b6f6;
+  --iw-color-info-dark: #0288d1;
+
+  --iw-input-text-placeholder: rgba(255, 255, 255, 0.5);
+  --iw-input-border: rgba(255, 255, 255, 0.23);
+
+  /* Dark app bars are surfaces, as Material UI's enableColorOnDark is off */
+  --iw-app-bar-bg: #272727;
+
+  --iw-chip-bg: rgba(255, 255, 255, 0.16);
+
+  --iw-list-item: transparent;
+  --iw-list-item-active: rgba(255, 255, 255, 0.08);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 16%,
+    transparent
+  );
+}
+
+.iw-theme-material-ui {
+  /* Contained buttons: Material UI's sizes and colors, raised on hover */
+  .iw-button {
+    padding: 6px 16px;
+    font-size: 0.875rem;
+    line-height: 1.75;
+    border: 0 none;
+
+    &:not(.iw-button-shape-round, .iw-button-shape-square) {
+      min-width: 64px;
+    }
+
+    &.iw-button-sm {
+      padding: 4px 10px;
+      font-size: 0.8125rem;
+    }
+
+    &.iw-button-lg {
+      padding: 8px 22px;
+      font-size: 0.9375rem;
+    }
+
+    &.iw-button-xs {
+      padding: 2px 8px;
+      font-size: 0.75rem;
+    }
+
+    &.iw-button-secondary {
+      --iw-button-color: var(--iw-color-accent);
+      --iw-button-bg: var(--iw-color-accent);
+      --iw-button-bg-hover: var(--iw-color-accent-hover);
+      --iw-button-border: var(--iw-color-accent);
+    }
+
+    &.iw-button-secondary,
+    &.iw-button-success,
+    &.iw-button-warning,
+    &.iw-button-error,
+    &.iw-button-info {
+      --iw-button-text: var(--iw-color-primary-text);
+    }
+
+    &.iw-button-default,
+    &.iw-button-primary,
+    &.iw-button-secondary,
+    &.iw-button-success,
+    &.iw-button-warning,
+    &.iw-button-error,
+    &.iw-button-info {
+      --iw-button-bg-active: var(--iw-button-bg-hover);
+    }
+
+    &:active:not(:disabled),
+    &.iw-button-pressed {
+      box-shadow: var(--iw-button-shadow-active);
+    }
+
+    &.iw-button-outline {
+      border: 1px solid
+        color-mix(in srgb, var(--iw-button-color) 50%, transparent);
+      /* One pixel less, for the border */
+      padding: 5px 15px;
+
+      &.iw-button-sm {
+        padding: 3px 9px;
+      }
+
+      &.iw-button-lg {
+        padding: 7px 21px;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: var(--iw-button-color);
+      }
+    }
+
+    &.iw-button-ghost {
+      padding: 6px 8px;
+
+      &.iw-button-sm {
+        padding: 4px 5px;
+      }
+
+      &.iw-button-lg {
+        padding: 8px 11px;
+      }
+    }
+
+    &.iw-button-outline,
+    &.iw-button-ghost {
+      &:hover:not(:disabled) {
+        background-color: color-mix(
+          in srgb,
+          var(--iw-button-color) 4%,
+          transparent
+        );
+      }
+
+      &:active:not(:disabled),
+      &.iw-button-pressed {
+        color: var(--iw-button-color);
+        background-color: color-mix(
+          in srgb,
+          var(--iw-button-color) 12%,
+          transparent
+        );
+        box-shadow: none;
+      }
+    }
+
+    &:disabled,
+    &.iw-button-disabled {
+      opacity: 1;
+      color: color-mix(in srgb, var(--iw-color-text) 30%, transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--iw-color-text) 14%,
+        transparent
+      );
+      box-shadow: none;
+
+      &.iw-button-outline {
+        background-color: transparent;
+        border-color: color-mix(in srgb, var(--iw-color-text) 14%, transparent);
+      }
+
+      &.iw-button-ghost {
+        background-color: transparent;
+      }
+    }
+  }
+
+  /* Outlined text fields: the label and helper text sit as Material UI's do,
+     and the label takes the primary color while the field has focus */
+  .iw-input,
+  .iw-select,
+  .iw-textarea-field {
+    .iw-input-label,
+    .iw-select-label,
+    .iw-textarea-label {
+      color: var(--iw-color-text-secondary);
+    }
+
+    .iw-input-frame,
+    .iw-select-frame {
+      padding-inline: 14px;
+    }
+
+    &:focus-within {
+      .iw-input-label,
+      .iw-select-label,
+      .iw-textarea-label {
+        color: var(--iw-color-primary);
+      }
+    }
+
+    .iw-input-hint,
+    .iw-input-error-message,
+    .iw-select-hint,
+    .iw-select-error-message {
+      margin-inline: 14px;
+      font-size: 0.75rem;
+      letter-spacing: 0.03333em;
+    }
+
+    .iw-input-frame:has(.iw-input-control-error):focus-within,
+    .iw-select-frame:has(.iw-select-control-error):focus-within {
+      box-shadow: inset 0 0 0 1px var(--iw-color-error);
+    }
+  }
+
+  .iw-input:has(.iw-input-control-error),
+  .iw-select:has(.iw-select-control-error) {
+    .iw-input-label,
+    .iw-select-label {
+      color: var(--iw-color-error);
+    }
+  }
+
+  /* Switch: a thin track under a larger, raised thumb that takes the color */
+  .iw-switch {
+    .iw-switch-track {
+      width: 2.125rem;
+      height: 0.875rem;
+      /* Room for the thumb, which overhangs the track */
+      margin-inline: 3px;
+      padding: 0;
+      overflow: visible;
+      background: color-mix(in srgb, var(--iw-color-black) 38%, transparent);
+    }
+
+    .iw-switch-thumb {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-inline-start: -3px;
+      background: var(--iw-color-white);
+      box-shadow: var(--iw-shadow-sm);
+    }
+
+    .iw-switch-input:checked + .iw-switch-track {
+      background: color-mix(
+        in srgb,
+        var(--iw-switch-active-bg) 50%,
+        transparent
+      );
+
+      .iw-switch-thumb {
+        background: var(--iw-switch-active-bg);
+        transform: translateX(calc(1.25rem * var(--iw-dir-sign, 1)));
+      }
+    }
+
+    &.iw-switch-sm {
+      .iw-switch-track {
+        width: 1.625rem;
+        height: 0.625rem;
+      }
+
+      .iw-switch-thumb {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+        transform: translateX(calc(1rem * var(--iw-dir-sign, 1)));
+      }
+    }
+
+    &.iw-switch-lg {
+      .iw-switch-track {
+        width: 2.625rem;
+        height: 1.125rem;
+      }
+
+      .iw-switch-thumb {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+        transform: translateX(calc(1.5rem * var(--iw-dir-sign, 1)));
+      }
+    }
+  }
+
+  &.iw-theme-dark .iw-switch {
+    .iw-switch-track {
+      background: color-mix(in srgb, var(--iw-color-white) 30%, transparent);
+    }
+
+    .iw-switch-thumb {
+      background: #e0e0e0;
+    }
+  }
+
+  /* Tabs */
+  .iw-tabs-list {
+    gap: 0;
+  }
+
+  .iw-tab {
+    min-height: 48px;
+    padding: 12px 16px;
+    font-size: 0.875rem;
+    color: var(--iw-color-text-secondary);
+  }
+
+  .iw-tab-selected {
+    color: var(--iw-color-primary);
+  }
+
+  /* Chips: Material UI's height, and filled when they have a color */
+  .iw-chip {
+    min-height: 2rem;
+    padding-inline: 12px;
+    border-radius: 16px;
+    font-size: 0.8125rem;
+
+    &.iw-chip-sm {
+      min-height: 1.5rem;
+      padding-inline: 8px;
+    }
+
+    &.iw-chip-primary,
+    &.iw-chip-secondary,
+    &.iw-chip-success,
+    &.iw-chip-warning,
+    &.iw-chip-error,
+    &.iw-chip-info {
+      color: var(--iw-color-primary-text);
+    }
+
+    &.iw-chip-primary {
+      background: var(--iw-color-primary);
+    }
+
+    &.iw-chip-secondary {
+      background: var(--iw-color-accent);
+    }
+
+    &.iw-chip-success {
+      background: var(--iw-color-success);
+    }
+
+    &.iw-chip-warning {
+      background: var(--iw-color-warning);
+    }
+
+    &.iw-chip-error {
+      background: var(--iw-color-error);
+    }
+
+    &.iw-chip-info {
+      background: var(--iw-color-info);
+    }
+
+    &.iw-chip-selected {
+      border-color: transparent;
+      background: var(--iw-color-primary);
+      color: var(--iw-color-primary-text);
+    }
+
+    &.iw-chip-shape-rounded {
+      border-radius: var(--iw-radius-md);
+    }
+
+    &.iw-chip-shape-square {
+      border-radius: var(--iw-radius-none);
+    }
+  }
+
+  .iw-badge {
+    font-weight: var(--iw-font-weight-medium);
+  }
+
+  /* Cards: a raised Paper, with no rules between its parts */
+  .iw-card-header,
+  .iw-card-footer {
+    border: 0 none;
+  }
+
+  .iw-card-footer {
+    background-color: transparent;
+  }
+
+  /* Unless given a padding of its own */
+  .iw-card-footer:not([class*="iw-card-footer-padding-"]) {
+    padding: var(--iw-space-2);
+  }
+
+  .iw-card-title {
+    font-size: 1.25rem;
+    font-weight: var(--iw-font-weight-medium);
+    line-height: 1.6;
+  }
+
+  .iw-card-subtitle {
+    margin: 0;
+  }
+
+  /* Alerts: tinted with the color, the text a deep shade of it */
+  .iw-alert {
+    padding: 6px 16px;
+    font-size: 0.875rem;
+    line-height: 1.43;
+    align-items: center;
+
+    .iw-alert-icon {
+      margin-top: 0;
+      font-size: 1.375rem;
+    }
+
+    .iw-alert-title {
+      font-size: 1rem;
+      font-weight: var(--iw-font-weight-medium);
+    }
+
+    .iw-alert-description {
+      color: inherit;
+    }
+  }
+
+  .iw-alert-filled,
+  .iw-alert-outlined {
+    color: color-mix(in srgb, var(--iw-alert-color) 40%, var(--iw-color-black));
+  }
+
+  .iw-alert-filled {
+    border-color: transparent;
+    background: color-mix(
+      in srgb,
+      var(--iw-alert-color) 10%,
+      var(--iw-color-white)
+    );
+  }
+
+  .iw-alert-outlined {
+    border-color: var(--iw-alert-color);
+  }
+
+  &.iw-theme-dark {
+    .iw-alert-filled,
+    .iw-alert-outlined {
+      color: color-mix(
+        in srgb,
+        var(--iw-alert-color) 40%,
+        var(--iw-color-white)
+      );
+    }
+
+    .iw-alert-filled {
+      background: color-mix(
+        in srgb,
+        var(--iw-alert-color) 10%,
+        var(--iw-color-black)
+      );
+    }
+  }
+
+  /* Tables sit on a Paper, which draws no border of its own */
+  .iw-table {
+    border: 0 none;
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  .iw-table-header-cell,
+  .iw-table-cell {
+    padding: 16px;
+  }
+
+  .iw-table-header-cell {
+    font-weight: var(--iw-font-weight-medium);
+  }
+
+  /* Dialogs: a Paper at elevation 24 */
+  .iw-dialog {
+    border: 0 none;
+    box-shadow: var(--iw-shadow-2xl);
+
+    &::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: none;
+    }
+  }
+
+  &.iw-theme-dark .iw-dialog {
+    background: #383838;
+  }
+
+  .iw-dialog-surface {
+    padding: 16px 24px 8px;
+  }
+
+  .iw-dialog-title {
+    font-size: 1.25rem;
+    font-weight: var(--iw-font-weight-medium);
+    line-height: 1.6;
+  }
+
+  .iw-dialog-description {
+    color: var(--iw-color-text-secondary);
+  }
+
+  .iw-dialog-actions {
+    margin: var(--iw-space-4) -16px 0;
+    padding: 0;
+  }
+
+  /* App bars: no border, and raised to elevation 4 */
+  .iw-app-bar {
+    border-bottom: 0 none;
+  }
+
+  .iw-app-bar-elevated {
+    box-shadow: var(--iw-shadow-lg);
+  }
+
+  .iw-app-bar-title {
+    font-size: 1.25rem;
+    font-weight: var(--iw-font-weight-medium);
+    line-height: 1.6;
+  }
+
+  &.iw-theme-dark .iw-app-bar.iw-app-bar-color-primary,
+  &.iw-theme-dark .iw-app-bar.iw-app-bar-color-secondary {
+    background: var(--iw-app-bar-bg);
+    color: var(--iw-color-text);
+  }
+}