@tcn/ui 0.0.4 → 0.2.0

package/dist/themes/themes/ergo/ergo_theme.js

@@ -0,0 +1,664 @@
+const n = `/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+legend {
+  all: unset;
+  display: block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+/* ===== CSS VARIABLES ===== */
+:root {
+  --scalar: 1;
+  --gap-small: 4px;
+  --gap-medium: 8px;
+  --gap-large: 16px;
+
+  --padding-small: 4px;
+  --padding-medium: 8px;
+  --padding-large: 16px;
+
+  --status-color-disabled: #7f7f7f;
+  --status-color-info: #008cff;
+  --status-color-warning: #ffff00;
+  --status-color-positive: #00ff00;
+  --status-color-error: #ff0000;
+
+  --async-color-initial: #c0c0c0;
+  --async-color-pending: #008cff;
+  --async-color-success: #00ff00;
+  --async-color-failed: #ff0000;
+
+  --primary-color-faint: #c0c0c0;
+  --primary-color: #008cff;
+  --primary-color-strong: #008cff;
+
+  --secondary-color-faint: #c0c0c0;
+  --secondary-color: #008cff;
+  --secondary-color-strong: #008cff;
+
+  --tertiary-color-faint: #c0c0c0;
+  --tertiary-color: #008cff;
+  --tertiary-color-strong: #008cff;
+
+  --quaternary-color-faint: #c0c0c0;
+  --quaternary-color: #008cff;
+  --quaternary-color-strong: #008cff;
+
+  --font-color: #395578;
+  --font-family: "Lato", sans-serif;
+  --font-size: 12px;
+
+  --background-color-primary: #ffffff;
+  --background-color-secondary: #ffffff;
+  --background-color-tertiary: #ffffff;
+  --background-color-quaternary: #ffffff;
+
+  --foreground-color-primary: #aaa;
+  --foreground-color-secondary: #222222;
+  --foreground-color-tertiary: #222222;
+  --foreground-color-quaternary: #222222;
+
+  --material-disabled: #d3d3d3;
+  --material-secondary-dark: 197 29.1% 40.4%;
+  --material-tan: 33, 22%, 84%;
+
+  --shape-radius-small: 2px;
+  --shape-radius-medium: 4px;
+  --shape-radius-large: 8px;
+
+  --accent-color: #cd6b2c;
+
+  --action: 23, 65%, 49%;
+  --on-action: 0, 0%, 100%;
+  --material: 0, 0%, 100%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+* {
+  position: relative;
+  box-sizing: border-box;
+}
+/* ===== Actions ===== */
+
+.tcn-interactive {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    transform 0.1s,
+    background 0.1s,
+    color 0.1s;
+
+  --act: hsl(var(--action));
+  --on-act: hsl(var(--on-action));
+  /* Could use hsl here if we made three color variables for each of the hsl values */
+  --act-down: color-mix(in srgb, var(--act), black 8%);
+  --act-raised: color-mix(in srgb, var(--act), white 8%);
+  --act-faint: hsla(var(--action), 0.2);
+  --on-mat: hsl(var(--on-material));
+  --on-mat-faint: hsla(var(--on-material), 0.2);
+  --mat: hsl(var(--material));
+  --mat-down: color-mix(in srgb, var(--mat), black 8%);
+  --mat-raised: color-mix(in srgb, var(--mat), white 8%);
+}
+
+.tcn-interactive[data-is-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.tcn-interactive[data-hierarchy="primary"] {
+  background: var(--act);
+  color: var(--on-act);
+  border: 1px solid var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:focus-visible {
+  outline: 2px dashed var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
+  background: var(--material-disabled);
+  color: white;
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:hover {
+  background: var(--act-raised);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:active {
+  background: var(--act-down);
+}
+
+.tcn-interactive[data-hierarchy="secondary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:hover {
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:active {
+  background: var(--mat-down);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid transparent;
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--on-mat);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  color: var(--on-mat);
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:active {
+  background: var(--mat-down);
+}
+
+/* Button */
+.tcn-button {
+  border-radius: 4px;
+}
+
+.tcn-button[data-size="sm"] {
+  padding: 0px 8px;
+  min-height: 22px;
+}
+
+.tcn-button[data-size="md"] {
+  padding: 0px 12px;
+  min-height: 26px;
+}
+
+.tcn-button[data-size="lg"] {
+  padding: 0px 16px;
+  min-height: 32px;
+}
+
+.tcn-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+.tcn-button:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tcn-slim-button {
+  height: auto;
+  width: auto;
+  padding: 0;
+}
+
+.tcn-slim-button[data-size="sm"] {
+  min-height: 12px;
+  min-width: 12px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 10px;
+    min-width: 10px;
+  }
+}
+
+.tcn-slim-button[data-size="md"] {
+  min-height: 18px;
+  min-width: 18px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 14px;
+    min-width: 14px;
+  }
+}
+
+.tcn-slim-button[data-size="lg"] {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 20px;
+    min-width: 20px;
+  }
+}
+
+/* ===== Materials ===== */
+
+/* White on Gray */
+.material-status-disabled {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 0%, 49.8%;
+  --material: 0, 0%, 49.8%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Blue */
+.material-status-info {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Yellow */
+.material-status-warning {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 60, 100%, 50%;
+  --material: 60, 100%, 50%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Red  */
+.material-status-error {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Light Grey */
+.material-async-initial {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 0, 0%, 75.3%;
+  --material: 0, 0%, 75.3%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Loading Blue */
+.material-async-pending {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Green */
+.material-async-success {
+  --action: 0, 0%, 100%;
+  --on-action: 120, 100%, 50%;
+  --material: 120, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Red */
+.material-async-failed {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+.material {
+  background-color: hsl(var(--material));
+  color: hsl(var(--on-material));
+}
+
+/* ===== SURFACES ===== */
+.tcn-draggable[data-is-draggable="true"] {
+  .tcn-drag-handle {
+    cursor: move;
+  }
+}
+
+.tcn-frame[data-is-veil="true"] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.tcn-list {
+  gap: var(--gap-medium);
+  .tcn-item {
+    height: 24px;
+    padding: 0px var(--padding-medium);
+    border-radius: var(--shape-radius-medium);
+  }
+}
+
+.tcn-veil {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */
+/* MODAL: */
+.tcn-modal {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  /* TODO: This should be a variable */
+  border: 1px solid rgba(170, 170, 170, 1);
+  overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
+  :where(.tcn-header) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    border-bottom: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+
+    :where(.tcn-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+    }
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    border-top: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+  }
+}
+
+/* WINDOW: */
+.tcn-window {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  /* TODO: This should be a variable */
+  border: 1px solid rgba(170, 170, 170, 1);
+  overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
+  :where(.tcn-header) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    border-bottom: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+
+    :where(.tcn-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+    }
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    border-top: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+  }
+}
+
+/* PANEL */
+.tcn-panel {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+
+  :where(.tcn-header) {
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-title) {
+      font-weight: 700;
+    }
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  /* Border appears on body only when it follows header or utility-bar */
+  :where(.tcn-header) + :where(.tcn-body),
+  :where(.tcn-utility-bar) + :where(.tcn-body) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    padding: 0 var(--v-inset);
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+  }
+}
+
+/* Card */
+.tcn-card {
+  padding: 0;
+  gap: 0px;
+  border: 1px solid var(--foreground-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+  :where(.tcn-header) {
+    /* TODO: Color header */
+    min-height: 32px;
+  }
+  :where(.tcn-body) {
+    padding: var(--padding-medium) var(--v-inset);
+  }
+}
+`, a = new CSSStyleSheet();
+a.replaceSync(n);
+export {
+  a as ergoStyleSheet
+};
+//# sourceMappingURL=ergo_theme.js.map

package/dist/themes/themes/ergo/ergo_theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  --accent-color: #cd6b2c;\\n\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n/* ===== Materials ===== */\\n\\n/* White on Gray */\\n.material-status-disabled {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 0%, 49.8%;\\n  --material: 0, 0%, 49.8%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Blue */\\n.material-status-info {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Yellow */\\n.material-status-warning {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 60, 100%, 50%;\\n  --material: 60, 100%, 50%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Red  */\\n.material-status-error {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Light Grey */\\n.material-async-initial {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 0, 0%, 75.3%;\\n  --material: 0, 0%, 75.3%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Loading Blue */\\n.material-async-pending {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Green */\\n.material-async-success {\\n  --action: 0, 0%, 100%;\\n  --on-action: 120, 100%, 50%;\\n  --material: 120, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Red */\\n.material-async-failed {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n.tcn-veil {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */\\n/* MODAL: */\\n.tcn-modal {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-title) {\\n      font-weight: 700;\\n    }\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    padding: 0 var(--v-inset);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* Card */\\n.tcn-card {\\n  padding: 0;\\n  gap: 0px;\\n  border: 1px solid var(--foreground-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n  :where(.tcn-header) {\\n    /* TODO: Color header */\\n    min-height: 32px;\\n  }\\n  :where(.tcn-body) {\\n    padding: var(--padding-medium) var(--v-inset);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}