update color palette

src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts

@@ -2,10 +2,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { SapiAtlasModel, SapiParcellationModel, SapiSpaceModel } from "src/atlasComponents/sapi/type";
 import { FilterGroupedParcellationPipe, GroupedParcellation } from "src/atlasComponents/sapiViews/core/parcellation";
 
-export const defaultColorPalette = [
-  "#480202",
-  "#6b1205",
-  "#921d1d",
+export const darkThemePalette = [
+  "#141414",
+  "#242424",
+  "#333333",
+]
+
+export const lightThemePalette = [
+  "#ffffff",
+  "#fafafa",
+  "#f5f5f5",
 ]
 
 export type ATP = {
@@ -37,7 +43,7 @@ const pipe = new FilterGroupedParcellationPipe()
 export class PureATPSelector implements OnChanges{
 
   @Input('sxplr-pure-atp-selector-color-palette')
-  colorPalette: string[] = defaultColorPalette
+  colorPalette: string[] = darkThemePalette
 
   @Input(`sxplr-pure-atp-selector-selected-atp`)
   public selectedATP: ATP

src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.stories.ts

@@ -7,7 +7,7 @@ import { atlasId, provideDarkTheme } from "src/atlasComponents/sapi/stories.base
 import { SapiAtlasModel, SapiParcellationModel, SapiSpaceModel } from "src/atlasComponents/sapi/type";
 import { UtilModule } from "src/util";
 import { ATPSelectorModule } from "../module";
-import { defaultColorPalette } from "./pureATPSelector.components"
+import { darkThemePalette } from "./pureATPSelector.components"
 import { loadAtlasEtcData, wrapperDecoratorFn } from "../story.base"
 import { provideMockStore } from "@ngrx/store/testing";
 
@@ -39,9 +39,9 @@ import { provideMockStore } from "@ngrx/store/testing";
   ]
 })
 class AtlasLayerSelectorWrapper {
-  atlasColor: string = defaultColorPalette[0]
-  spaceColor: string = defaultColorPalette[1]
-  parcellationColor: string = defaultColorPalette[2]
+  atlasColor: string = darkThemePalette[0]
+  spaceColor: string = darkThemePalette[1]
+  parcellationColor: string = darkThemePalette[2]
   allAtlases: SapiAtlasModel[]
   availableTemplates: SapiSpaceModel[]
   selectedATP: {
@@ -122,9 +122,9 @@ const Template: Story<AtlasLayerSelectorWrapper> = (args: AtlasLayerSelectorWrap
 
 export const Default = Template.bind({})
 Default.args = {
-  atlasColor: defaultColorPalette[0],
-  spaceColor: defaultColorPalette[1],
-  parcellationColor: defaultColorPalette[2],
+  atlasColor: darkThemePalette[0],
+  spaceColor: darkThemePalette[1],
+  parcellationColor: darkThemePalette[2],
 }
 Default.loaders = [
   async () => {

src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts

-import { Component, OnDestroy } from "@angular/core";
+import { Component, Inject, OnDestroy } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { Store } from "@ngrx/store";
 import { Observable, of, Subject, Subscription } from "rxjs";
@@ -8,8 +8,9 @@ import { ParcellationSupportedInSpacePipe } from "src/atlasComponents/sapiViews/
 import { atlasSelection } from "src/state";
 import { fromRootStore } from "src/state/atlasSelection";
 import { DialogFallbackCmp } from "src/ui/dialogInfo";
+import { DARKTHEME } from "src/util/injectionTokens";
 import { ParcellationVisibilityService } from "../../../parcellation/parcellationVis.service";
-import { defaultColorPalette, ATP } from "../pureDumb/pureATPSelector.components"
+import { darkThemePalette, lightThemePalette, ATP } from "../pureDumb/pureATPSelector.components"
 
 function isATPGuard(obj: any): obj is ATP {
   if (!obj) return false
@@ -25,7 +26,8 @@ function isATPGuard(obj: any): obj is ATP {
 })
 
 export class WrapperATPSelector implements OnDestroy{
-  defaultColorPalette = defaultColorPalette
+  darkThemePalette = darkThemePalette
+  lightThemePalette = lightThemePalette
 
   #subscription: Subscription[] = []
   #parcSupportedInSpacePipe = new ParcellationSupportedInSpacePipe(this.sapi)
@@ -63,6 +65,7 @@ export class WrapperATPSelector implements OnDestroy{
     private store$: Store,
     private sapi: SAPI,
     private svc: ParcellationVisibilityService,
+    @Inject(DARKTHEME) public darktheme$: Observable<boolean>
   ){
     this.#subscription.push(
       this.selectLeaf$.pipe(

src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html

 <sxplr-pure-atp-selector
-  [sxplr-pure-atp-selector-color-palette]="defaultColorPalette"
+  [sxplr-pure-atp-selector-color-palette]="(darktheme$ | async) ? darkThemePalette : lightThemePalette"
   [sxplr-pure-atp-selector-selected-atp]="selectedATP$ | async"
   [sxplr-pure-atp-selector-atlases]="allAtlases$ | async"
   [sxplr-pure-atp-selector-templates]="availableTemplates$ | async"

src/components/smartChip/component/smartChip.component.ts

@@ -3,7 +3,7 @@ import { SmartChipContent } from "../smartChip.content.directive"
 import { SmartChipMenu } from "../smartChip.menu.directive";
 import { rgbToHsl, hexToRgb } from 'common/util'
 
-const cssColorIsDark = (input: string) => {
+const cssColorToHsl = (input: string) => {
   if (/rgb/i.test(input)) {
     const match = /\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(input)
     if (!match) throw new Error(`rgb cannot be extracted ${input}`)
@@ -13,7 +13,7 @@ const cssColorIsDark = (input: string) => {
       parseInt(match[3]),
     ]
     const [_h, _s, l] = rgbToHsl(...rgb)
-    return l < 0.4
+    return l
   }
   if (/hsl/i.test(input)) {
     const match = /\((.*)\)/.exec(input)
@@ -21,13 +21,13 @@ const cssColorIsDark = (input: string) => {
     const trimmedL = l.trim()
     if (/%$/.test(trimmedL)) {
       const match = /^([0-9]+)%/.exec(trimmedL)
-      return (parseInt(match[1]) / 100) < 0.4
+      return parseInt(match[1]) / 100
     }
   }
   if (/^#/i.test(input) && input.length === 7) {
     const [r, g, b] = hexToRgb(input)
     const [_h, _s, l] = rgbToHsl(r, g, b)
-    return l < 0.6
+    return l
   }
   throw new Error(`Cannot parse css color: ${input}`)
 }
@@ -73,7 +73,8 @@ export class SmartChip<T extends object> implements OnChanges{
 
   ngOnChanges(simpleChanges: SimpleChanges) {
     if (simpleChanges.color) {
-      this.darkTheme = cssColorIsDark(this.color)
+      const brightness = cssColorToHsl(this.color)
+      this.darkTheme = brightness < 0.4
         ? 'darktheme'
         : 'lighttheme'
     }

src/components/smartChip/component/smartChip.style.css

@@ -7,9 +7,9 @@
 
 .smart-chip
 {
+  box-sizing: border-box;
   height: 100%;
 
-  display: inline-block;
   padding: 0.5rem 1rem;
   border-radius: 1rem;