Respect users chosen accent colour in grids

This commit is contained in:
Andrew Kingston 2023-06-19 11:41:09 +01:00
parent f3de39b0c5
commit 3f3e9fca56
6 changed files with 6 additions and 12 deletions

View File

@ -132,7 +132,7 @@
--cell-color: var(--user-color); --cell-color: var(--user-color);
} }
.cell.focused { .cell.focused {
--cell-color: var(--spectrum-global-color-blue-400); --cell-color: var(--accent-color);
} }
.cell.error { .cell.error {
--cell-color: var(--spectrum-global-color-red-500); --cell-color: var(--spectrum-global-color-red-500);

View File

@ -132,10 +132,7 @@
{option} {option}
</div> </div>
{#if values.includes(option)} {#if values.includes(option)}
<Icon <Icon name="Checkmark" color="var(--accent-color)" />
name="Checkmark"
color="var(--spectrum-global-color-blue-400)"
/>
{/if} {/if}
</div> </div>
{/each} {/each}

View File

@ -323,11 +323,7 @@
</span> </span>
</div> </div>
{#if isRowSelected(row)} {#if isRowSelected(row)}
<Icon <Icon size="S" name="Checkmark" color="var(--accent-color)" />
size="S"
name="Checkmark"
color="var(--spectrum-global-color-blue-400)"
/>
{/if} {/if}
</div> </div>
{/each} {/each}

View File

@ -190,6 +190,7 @@
/* Core grid */ /* Core grid */
.grid { .grid {
/* Variables */ /* Variables */
--accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
--grid-background: var(--spectrum-global-color-gray-50); --grid-background: var(--spectrum-global-color-gray-50);
--grid-background-alt: var(--spectrum-global-color-gray-100); --grid-background-alt: var(--spectrum-global-color-gray-100);
--cell-background: var(--grid-background); --cell-background: var(--grid-background);

View File

@ -57,7 +57,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 2px; width: 2px;
background: var(--spectrum-global-color-blue-400); background: var(--accent-color);
margin-left: -2px; margin-left: -2px;
} }
</style> </style>

View File

@ -65,6 +65,6 @@
margin-left: -1px; margin-left: -1px;
width: 2px; width: 2px;
height: 100%; height: 100%;
background: var(--spectrum-global-color-blue-400); background: var(--accent-color);
} }
</style> </style>