@truenas/ui-components 0.1.2

package/src/styles/themes.css

@@ -0,0 +1,665 @@
+/* ================================
+   Global Styles: Typography
+   ================================ */
+:root {
+  --tn-primary: #007db3; /* WCAG fix #007db3 */
+  --tn-primary-txt: #ffffff;
+  --tn-btn-default-bg: #545454;
+  --tn-btn-default-txt: #ffffff;
+  --tn-topbar: #111111;
+  --tn-topbar-txt: rgba(255,255,255,0.85);
+  --tn-accent: #545454;
+  --tn-bg1: #1E1E1E;
+  --tn-bg2: #282828;
+  --tn-fg1: #ffffff;
+  --tn-fg2: rgba(255,255,255,0.85);
+  --tn-alt-bg1: #383838;
+  --tn-alt-bg2: #545454;
+  --tn-alt-fg1: rgba(194,194,194,0.5);
+  --tn-alt-fg2: #e1e1e1;
+  --tn-lines: #383838;
+  --tn-yellow: #DED142;
+  --tn-orange: #E68D37;
+  --tn-red: #CE2929;
+  --tn-magenta: #C006C7;
+  --tn-violet: #7617D8;
+  --tn-blue: #007db3;
+  --tn-cyan: #00d0d6;
+  --tn-green: #71BF44;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+  --tn-font-family-header: "Titillium Web", sans-serif;
+  --tn-font-family-body: "IBM Plex Sans", "Roboto", "Helvetica Neue", sans-serif;
+  --tn-font-family-monospace: "Droid Sans Mono", "Courier New", Courier, monospace;
+  --tn-font-family-body2: "Roboto", "Helvetica Neue", sans-serif;
+  --tn-black: #000000;
+  --tn-white: #ffffff;
+
+  /* Icon sizing variables */
+  --tn-icon-xs: 12px;
+  --tn-icon-sm: 16px;
+  --tn-icon-md: 20px;
+  --tn-icon-lg: 24px;
+  --tn-icon-xl: 32px;
+
+  /* Dialog content padding */
+  --tn-content-padding: 24px;
+}
+
+
+/* ================================
+   TN Dark - TrueNAS default theme
+   ================================ */
+.tn-dark {
+  --tn-primary: var(--tn-blue);
+  --tn-topbar: #111111;
+  --tn-topbar-txt: rgba(255,255,255,0.85);
+  --tn-accent: var(--tn-yellow);
+  --tn-bg1: #1E1E1E;
+  --tn-bg2: #282828;
+  --tn-fg1: #808080;
+  --tn-fg2: rgba(255,255,255,0.85);
+  --tn-alt-bg1: #383838;
+  --tn-alt-bg2: #545454;
+  --tn-alt-fg1: rgba(194,194,194,0.5);
+  --tn-alt-fg2: #e1e1e1;
+  --tn-lines: #4a4a4a;
+  --tn-yellow: #DED142;
+  --tn-orange: #E68D37;
+  --tn-red: #CE2929;
+  --tn-magenta: #C006C7;
+  --tn-violet: #7617D8;
+  --tn-blue: #007db3;
+  --tn-cyan: #00d0d6;
+  --tn-green: #71BF44;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   TN Blue - Official TrueNAS System Colors on light
+   ================================ */
+.tn-blue {
+  --tn-primary: var(--tn-blue);
+  --tn-primary-txt: #ffffff;
+  --tn-topbar: #007db3;
+  --tn-accent: #DED142;
+  --tn-bg1: #f2f2f2;
+  --tn-bg2: #ffffff;
+  --tn-fg1: #585858;
+  --tn-fg2: #666666;
+  --tn-alt-bg1: #f0f0f0;
+  --tn-alt-bg2: #e8e8e8;
+  --tn-alt-fg1: #181a26;
+  --tn-alt-fg2: #282a36;
+  --tn-lines: #d0d0d0;
+  --tn-yellow: #DED142;
+  --tn-orange: #E68D37;
+  --tn-red: #CE2929;
+  --tn-magenta: #C006C7;
+  --tn-violet: #7617D8;
+  --tn-blue: #007db3;
+  --tn-cyan: #00d0d6;
+  --tn-green: #71BF44;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   Dracula - Popular dark theme
+   ================================ */
+.tn-dracula {
+  --tn-primary: #6272a4;
+  --tn-primary-txt: #ffffff;
+  --tn-topbar: #6272a4;
+  --tn-topbar-txt: #efefef;
+  --tn-accent: #bd93f9;
+  --tn-bg1: #181a26;
+  --tn-bg2: #282a36;
+  --tn-fg1: #efefef;
+  --tn-fg2: #cacac5;
+  --tn-alt-bg1: #3a3d4a;
+  --tn-alt-bg2: #44475a;
+  --tn-alt-fg1: #f8f8f2;
+  --tn-alt-fg2: #fafaf5;
+  --tn-lines: #50526e;
+  --tn-yellow: #f1fa8c;
+  --tn-orange: #ffb86c;
+  --tn-red: #ff5555;
+  --tn-magenta: #ff79c6;
+  --tn-violet: #bd93f9;
+  --tn-blue: #6272a4;
+  --tn-cyan: #8be9fd;
+  --tn-green: #50fa7b;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   Nord - Inspired by the Nord color palette
+   ================================ */
+.tn-nord {
+  --tn-primary: #88c0d0;
+  --tn-primary-txt: #333333;
+  --tn-topbar: #4c566a;
+  --tn-topbar-txt: #eceff4;
+  --tn-accent: #5e81aC;
+  --tn-bg1: #2e3440;
+  --tn-bg2: #3b4252;
+  --tn-fg1: #eceff4;
+  --tn-fg2: #e5e9f0;
+  --tn-alt-bg1: #434c5e;
+  --tn-alt-bg2: #4c566a;
+  --tn-alt-fg1: #d8dee9;
+  --tn-alt-fg2: #d8dee9;
+  --tn-lines: #576277;
+  --tn-yellow: #ebcb8b;
+  --tn-orange: #d08770;
+  --tn-red: #bf616a;
+  --tn-magenta: #b48ead;
+  --tn-violet: #775daa;
+  --tn-blue: #5e81aC;
+  --tn-cyan: #88c0d0;
+  --tn-green: #a3be8c;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   Paper - FreeNAS 11.2 default theme
+   ================================ */
+.tn-paper {
+  --tn-primary: #0D5687;
+  --tn-primary-txt: #ffffff;
+  --tn-topbar: #0D5687;
+  --tn-accent: #f0cb00;
+  --tn-bg1: #F2F2F2;
+  --tn-bg2: #FAFAFA;
+  --tn-fg1: #3f3f3f;
+  --tn-fg2: #666666;
+  --tn-alt-bg1: #f0f0f0;
+  --tn-alt-bg2: #e8e8e8;
+  --tn-alt-fg1: #181a26;
+  --tn-alt-fg2: #282a36;
+  --tn-lines: #d5d5d5;
+  --tn-yellow: #f0cb00;
+  --tn-orange: #ee9302;
+  --tn-red: #ff0013;
+  --tn-magenta: #d238ff;
+  --tn-violet: #c17ecc;
+  --tn-blue: #0D5687;
+  --tn-cyan: #00d0d6;
+  --tn-green: #1F9642;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   Solarized Dark - Solarized dark color scheme
+   ================================ */
+.tn-solarized-dark {
+  --tn-primary: var(--tn-fg1);
+  --tn-primary-txt: #ffffff;
+  --tn-btn-default-bg: #0b4f60;
+  --tn-btn-default-txt: var(--tn-fg2);
+  --tn-topbar: var(--tn-fg1);
+  --tn-topbar-txt: #cdcdcd;
+  --tn-accent: var(--tn-cyan);
+  --tn-bg1: #002b36;
+  --tn-bg2: #073642;
+  --tn-fg1: #586e75;
+  --tn-fg2: #7f99a2;
+  --tn-alt-bg1: #0e4853;
+  --tn-alt-bg2: #155a68;
+  --tn-alt-fg1: #839496;
+  --tn-alt-fg2: #282a36;
+  --tn-lines: #586e75;
+  --tn-yellow: #b58900;
+  --tn-orange: #cb4b16;
+  --tn-red: #dc322f;
+  --tn-magenta: #d33682;
+  --tn-violet: #6c71c4;
+  --tn-blue: #268bd2;
+  --tn-cyan: #2aa198;
+  --tn-green: #859900;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+
+/* ================================
+   Midnight - Dark theme with blues and greys
+   ================================ */
+.tn-midnight {
+  --tn-primary: var(--tn-blue);
+  --tn-primary-txt: #ffffff;
+  --tn-topbar: var(--tn-blue);
+  --tn-topbar-txt: var(--tn-fg2);
+  --tn-accent: var(--tn-violet);
+  --tn-bg1: #212a35;
+  --tn-bg2: #303d48;
+  --tn-fg1: #aaaaaa;
+  --tn-fg2: #cccccc;
+  --tn-alt-bg1: #3d4a55;
+  --tn-alt-bg2: #4a5762;
+  --tn-alt-fg1: #c1c1c1;
+  --tn-alt-fg2: #e1e1e1;
+  --tn-lines: #56646f;
+  --tn-yellow: #f0cb00;
+  --tn-orange: #ee9302;
+  --tn-red: #ff0013;
+  --tn-magenta: #d238ff;
+  --tn-violet: #c17ecc;
+  --tn-blue: #1274b5;
+  --tn-cyan: #00d0d6;
+  --tn-green: #1F9642;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+   High Contrast - High contrast theme based on Legacy Django UI color scheme
+   ================================ */
+.tn-high-contrast {
+  --tn-primary: var(--tn-blue); /* WCAG fix try another shade of blue #007db3 or black #000000 */
+  --tn-topbar: var(--tn-black);
+  --tn-accent: var(--tn-magenta);
+  --tn-bg1: #dddddd;
+  --tn-bg2: #ffffff;
+  --tn-fg1: #222222;
+  --tn-fg2: #333333;
+  --tn-alt-bg1: #f0f0f0;
+  --tn-alt-bg2: #e8e8e8;
+  --tn-alt-fg1: #181a26;
+  --tn-alt-fg2: #282a36;
+  --tn-lines: #c0c0c0;
+  --tn-yellow: #f0cb00;
+  --tn-orange: #ee9302;
+  --tn-red: #ff0013;
+  --tn-magenta: #d238ff;
+  --tn-violet: #9844b1;
+  --tn-blue: #4784ac;
+  --tn-cyan: #00d0d6;
+  --tn-green: #59d600;
+  --tn-pink: #ffc0cb;
+  --tn-aqua: #00ffff;
+  --tn-tomato: #ff6347;
+  --tn-teal: #008080;
+  --tn-slategray: #708090;
+  --tn-salmon: #fa8072;
+}
+
+/* ================================
+  Global autofill styling for all input types
+  ================================ */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+textarea:-webkit-autofill:active,
+.tn-input:-webkit-autofill,
+.tn-input:-webkit-autofill:hover,
+.tn-input:-webkit-autofill:focus,
+.tn-input:-webkit-autofill:active {
+  /* Use a very long transition to effectively override the browser's background */
+  -webkit-transition: background-color 5000s ease-in-out 0s;
+  transition: background-color 5000s ease-in-out 0s;
+  /* Set the text color to match our theme */
+  -webkit-text-fill-color: var(--tn-fg1) !important;
+  /* Override the background with our theme colors */
+  background-color: var(--tn-bg1) !important;
+  border-color: var(--tn-lines) !important;
+}
+
+/* For Firefox and other browsers */
+input:-moz-autofill,
+textarea:-moz-autofill,
+.tn-input:-moz-autofill {
+  background-color: var(--tn-bg1) !important;
+  color: var(--tn-fg1) !important;
+}
+
+/* ================================
+  ixInput directive styles
+  ================================ */
+.tn-input-directive,
+input.tn-input-directive,
+textarea.tn-input-directive {
+  display: block;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--tn-fg1, #212529);
+  background-color: var(--tn-bg1, #ffffff);
+  border: 1px solid var(--tn-lines, #d1d5db);
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  outline: none;
+  font-family: var(--tn-font-family-body, 'Inter'), sans-serif;
+}
+
+.tn-input-directive::placeholder,
+input.tn-input-directive::placeholder,
+textarea.tn-input-directive::placeholder {
+  color: var(--tn-fg2, #6c757d);
+  opacity: 1;
+}
+
+.tn-input-directive:focus,
+input.tn-input-directive:focus,
+textarea.tn-input-directive:focus {
+  border-color: var(--tn-primary, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.tn-input-directive:disabled,
+input.tn-input-directive:disabled,
+textarea.tn-input-directive:disabled {
+  background-color: var(--tn-alt-bg1, #f8f9fa);
+  color: var(--tn-fg2, #6c757d);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.tn-input-directive.error,
+input.tn-input-directive.error,
+textarea.tn-input-directive.error {
+  border-color: var(--tn-red, #dc3545);
+}
+
+.tn-input-directive.error:focus,
+input.tn-input-directive.error:focus,
+textarea.tn-input-directive.error:focus {
+  border-color: var(--tn-red, #dc3545);
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
+}
+
+/* Textarea-specific styles */
+textarea.tn-input-directive {
+  min-height: 6rem;
+  resize: vertical;
+  line-height: 1.4;
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .tn-input-directive,
+  input.tn-input-directive,
+  textarea.tn-input-directive {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .tn-input-directive,
+  input.tn-input-directive,
+  textarea.tn-input-directive {
+    border-width: 2px;
+  }
+}
+
+/* ================================
+   Let's apply these variables to
+   the preview and story book docs elements
+   ================================ */
+
+html, body, #storybook-docs > .sbdocs-wrapper {
+  font-family: var(--tn-font-family-body);
+  color: var(--tn-fg2) !important;
+  background-color: var(--tn-bg1) !important;
+}
+
+h1, h2, h3,h4,
+.sbdocs-title h1, .sbdocs-title h2, .sbdocs-title h3,.sbdocs-title h4 {
+  font-family: var(--tn-font-family-header);
+  color: var(--tn-fg1) !important;
+}
+
+p, li, td {
+  color: var(--tn-fg2) !important;
+}
+
+.docs-story,
+.sb-bar,
+.sbdocs-wrapper td,
+.sbdocs-preview {
+  background-color: var(--tn-bg2) !important;
+  color: var(--tn-fg2) !important;
+}
+
+thead, th {
+  background-color: var(--tn-topbar);
+  color: var(--tn-topbar-txt) !important;
+}
+
+/* Form field styles */
+input:not([role="switch"]),
+.sbdocs-wrapper select,
+.sbdocs-wrapper textarea {
+  background-color: var(--tn-bg1) !important;
+  color: var(--tn-fg2) !important;
+}
+
+.docblock-code-toggle {
+  background-color: var(--tn-btn-default-bg) !important;
+  color: var(--tn-btn-default-txt) !important;
+}
+
+.docblock-argstable-body span {
+  color: var(--tn-fg1);
+  background-color: unset;
+  border: unset;
+}
+
+.docs-story > div {
+  background-color: unset;
+}
+
+.docblock-source > div {
+  background: #000000 !important;
+  color: #dedede;
+  border: unset;
+}
+
+.docblock-source button {
+  background: var(--tn-bg2) !important;
+  color: var(--tn-fg2);
+}
+
+.docblock-source {
+  border: solid 1px var(--tn-alt-bg2) !important;
+}
+
+/* ================================
+   IX Dialog Styles
+   ================================ */
+
+/* Dialog panel - the main dialog container */
+.tn-dialog-panel {
+  display: flex;
+  flex-direction: column;
+  /* make the panel fit the viewport without causing page scroll */
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 8px;
+  background: var(--tn-bg1, #ffffff);
+  color: var(--tn-fg1, #000000);
+  box-shadow: 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);
+}
+
+/* Shell component wrapper */
+tn-dialog-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* allow inner area to shrink */
+  width: 100%;
+  height: 100%;
+}
+
+/* Dialog header and actions - fixed size */
+.tn-dialog__header,
+.tn-dialog__actions {
+  flex: 0 0 auto;
+  padding: 16px;
+}
+
+/* Dialog header styling */
+.tn-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--tn-lines, #e5e7eb);
+}
+
+.tn-dialog__title {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--tn-fg1, #000000);
+  flex: 1; /* Take up remaining space */
+}
+
+/* Close button */
+.tn-dialog__close,
+.tn-dialog__fullscreen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--tn-alt-fg1, #6c757d);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0; /* Don't shrink */
+  margin-left: 16px; /* Space between title and button */
+}
+
+.tn-dialog__close:hover {
+  background: var(--tn-alt-bg1, #f8f9fa);
+  color: var(--tn-fg1, #000000);
+}
+
+.tn-dialog__close:focus {
+  outline: 2px solid var(--tn-primary, #007bff);
+  outline-offset: 2px;
+}
+
+.tn-dialog__close:active {
+  transform: scale(0.95);
+}
+
+/* Dialog content - the only scrolling area */
+.tn-dialog__content {
+  /* the only scrolling area */
+  flex: 1 1 auto;
+  min-height: 0;           /* CRITICAL in flex parents */
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+/* Dialog actions */
+.tn-dialog__actions {
+  border-top: 1px solid var(--tn-lines, #e5e7eb);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tn-dialog__actions tn-button:not(:first-child) {
+  margin-left: 16px;
+}
+
+/* Destructive variant */
+.tn-dialog--destructive .tn-dialog__header {
+  border-bottom-color: var(--tn-lines, #e5e7eb);
+}
+
+.tn-dialog--destructive .tn-dialog__title {
+  color: var(--tn-red, #dc3545);
+}
+
+/* Dialog backdrop */
+.cdk-dialog-backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* Container positioning */
+.cdk-dialog-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+/* Fullscreen dialog support */
+.tn-dialog--fullscreen .cdk-dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  max-width: none;
+  max-height: none;
+  padding: 0;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.tn-dialog--fullscreen .cdk-dialog-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+}