stufflog2/svelte-ui/src/components/StatusColor.svelte

<script lang="ts">
  interface EntryCommon {
    active: boolean
    statusTag?: string
  }

  export let selected = false;
  export let entry: EntryCommon;
  export let affects: "project" | "task" = "project";

  let completed: boolean;
  let failed: boolean;
  let onhold: boolean;
  let todo: boolean;
  let wontdo: boolean;
  let project: boolean;
  let task: boolean;

  $: completed = !entry.active && entry.statusTag === "completed";
  $: failed = !entry.active && entry.statusTag === "failed";
  $: onhold = !entry.active && entry.statusTag === "on hold";
  $: todo = !entry.active && entry.statusTag === "to do";
  $: wontdo = !entry.active && entry.statusTag === "declined";
  $: task = affects === "task";
  $: project = affects === "project";

</script>

<div class="status-color-context" class:project class:task class:selected class:completed class:failed class:onhold class:todo class:wontdo>
  <slot></slot>
</div>

<style>
  .status-color-context.project :global(.sccfg) { color: #444 !important; }
  .status-color-context.project.selected :global(.sccfg) { color: #666 !important; }
  .status-color-context.project :global(.sccpb) { background-color: #78ff78 !important; }
  .status-color-context.project.completed :global(.sccfg) { color: #484 !important; }
  .status-color-context.project.completed.selected :global(.sccfg) { color: #78ff78 !important; }
  .status-color-context.project.completed :global(.sccpb) { background-color: #78ff78 !important; }
  .status-color-context.project.failed :global(.sccfg) { color: #852a24 !important; }
  .status-color-context.project.failed.selected :global(.sccfg) { color: #ff4545 !important; }
  .status-color-context.project.failed :global(.sccpb) { background-color: #ff4545 !important; }
  .status-color-context.project.onhold :global(.sccfg) { color: #446d88 !important; }
  .status-color-context.project.onhold.selected :global(.sccfg) { color: #78c9ff !important; }
  .status-color-context.project.onhold :global(.sccpb) { background-color: #78c9ff !important; }
  .status-color-context.project.todo :global(.sccfg) { color: #7a7429 !important; }
  .status-color-context.project.todo.selected :global(.sccfg) { color: #e7e55e !important; }
  .status-color-context.project.todo :global(.sccpb) { background-color: #e7e55e !important; }
  .status-color-context.project.wontdo :global(.sccfg) { color: #7a2973 !important; }
  .status-color-context.project.wontdo.selected :global(.sccfg) { color: #e75ed0 !important; }
  .status-color-context.project.wontdo :global(.sccpb) { background-color: #e75ed0 !important; }

  .status-color-context.task.completed :global(.sccsi) { background-color: #484 !important; color: #78ff78 !important; }
  .status-color-context.task.failed :global(.sccsi) { background-color: #85242c !important; color: #ff4545 !important; }
  .status-color-context.task.onhold :global(.sccsi) { background-color: #447288 !important; color: #78c9ff !important; }
  .status-color-context.task.todo :global(.sccsi) { background-color: #7a7429 !important; color: #e7e55e !important; }
  .status-color-context.task.wontdo :global(.sccsi) { background-color: #7a2973 !important; color: #e75ed0 !important; }
</style>