@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.8

package/src/theme/appIdentityCss.ts

@@ -1,256 +1,236 @@
 export const appIdentityCss = `
-  /*
-   * Pure app identity layer.
-   *
-   * Identity owns only chrome: wordmark name, active tab marker, primary button,
-   * and one live/selected region. Theme/status colors remain separate. Hues are
-   * perceptually spaced and lightness-staggered so neighbouring apps differ by
-   * value as well as hue.
-   */
   :root,
   :where([data-app]) {
-    --pure-identity-default: #1f9d57;
-    --pure-identity-default-bg: #eef7f1;
-    --pure-identity-default-tx: #15703f;
-    --pure-identity-default-block: #235240;
-    --app-acc: var(--pure-identity-default);
-    --app-bg: var(--pure-identity-default-bg);
-    --app-text: var(--pure-identity-default-tx);
-    --app-block: var(--pure-identity-default-block);
-    --app-primary-fill: var(--app-acc);
+    /* App identity ring — 20 hues, one per app, evenly spaced (~18deg) at
+       matched lightness/chroma in oklch. Chrome-only; never overrides
+       --platform-colors-accent (theme/status meaning). */
+    --pure-coral: oklch(0.55 0.125 12);
+    --pure-coral-bg: oklch(0.955 0.03 12);
+    --pure-coral-tx: oklch(0.43 0.12 12);
+    --pure-coral-blk: oklch(0.4 0.07 12);
+    --pure-redclay: oklch(0.55 0.125 30);
+    --pure-redclay-bg: oklch(0.955 0.03 30);
+    --pure-redclay-tx: oklch(0.43 0.12 30);
+    --pure-redclay-blk: oklch(0.4 0.07 30);
+    --pure-terracotta: oklch(0.55 0.125 48);
+    --pure-terracotta-bg: oklch(0.93 0.05 48);
+    --pure-terracotta-tx: oklch(0.43 0.12 48);
+    --pure-terracotta-blk: oklch(0.4 0.07 48);
+    --pure-bronze: oklch(0.55 0.125 66);
+    --pure-bronze-bg: oklch(0.955 0.03 66);
+    --pure-bronze-tx: oklch(0.43 0.12 66);
+    --pure-bronze-blk: oklch(0.4 0.07 66);
+    --pure-gold: oklch(0.55 0.125 84);
+    --pure-gold-bg: oklch(0.955 0.03 84);
+    --pure-gold-tx: oklch(0.43 0.12 84);
+    --pure-gold-blk: oklch(0.4 0.07 84);
+    --pure-citron: oklch(0.55 0.125 102);
+    --pure-citron-bg: oklch(0.955 0.03 102);
+    --pure-citron-tx: oklch(0.43 0.12 102);
+    --pure-citron-blk: oklch(0.4 0.07 102);
+    --pure-olive: oklch(0.55 0.125 120);
+    --pure-olive-bg: oklch(0.955 0.03 120);
+    --pure-olive-tx: oklch(0.43 0.12 120);
+    --pure-olive-blk: oklch(0.4 0.07 120);
+    --pure-leaf: oklch(0.55 0.125 138);
+    --pure-leaf-bg: oklch(0.955 0.03 138);
+    --pure-leaf-tx: oklch(0.43 0.12 138);
+    --pure-leaf-blk: oklch(0.4 0.07 138);
+    --pure-fern: oklch(0.55 0.125 156);
+    --pure-fern-bg: oklch(0.955 0.03 156);
+    --pure-fern-tx: oklch(0.43 0.12 156);
+    --pure-fern-blk: oklch(0.4 0.07 156);
+    --pure-spruce: oklch(0.55 0.125 174);
+    --pure-spruce-bg: oklch(0.955 0.03 174);
+    --pure-spruce-tx: oklch(0.43 0.12 174);
+    --pure-spruce-blk: oklch(0.4 0.07 174);
+    --pure-teal: oklch(0.55 0.125 192);
+    --pure-teal-bg: oklch(0.955 0.03 192);
+    --pure-teal-tx: oklch(0.43 0.12 192);
+    --pure-teal-blk: oklch(0.4 0.07 192);
+    --pure-ocean: oklch(0.55 0.125 210);
+    --pure-ocean-bg: oklch(0.955 0.03 210);
+    --pure-ocean-tx: oklch(0.43 0.12 210);
+    --pure-ocean-blk: oklch(0.4 0.07 210);
+    --pure-azure: oklch(0.55 0.125 228);
+    --pure-azure-bg: oklch(0.955 0.03 228);
+    --pure-azure-tx: oklch(0.43 0.12 228);
+    --pure-azure-blk: oklch(0.4 0.07 228);
+    --pure-cerulean: oklch(0.55 0.125 246);
+    --pure-cerulean-bg: oklch(0.955 0.03 246);
+    --pure-cerulean-tx: oklch(0.43 0.12 246);
+    --pure-cerulean-blk: oklch(0.4 0.07 246);
+    --pure-indigo: oklch(0.55 0.125 264);
+    --pure-indigo-bg: oklch(0.955 0.03 264);
+    --pure-indigo-tx: oklch(0.43 0.12 264);
+    --pure-indigo-blk: oklch(0.4 0.07 264);
+    --pure-violet: oklch(0.55 0.125 282);
+    --pure-violet-bg: oklch(0.955 0.03 282);
+    --pure-violet-tx: oklch(0.43 0.12 282);
+    --pure-violet-blk: oklch(0.4 0.07 282);
+    --pure-purple: oklch(0.55 0.125 300);
+    --pure-purple-bg: oklch(0.955 0.03 300);
+    --pure-purple-tx: oklch(0.43 0.12 300);
+    --pure-purple-blk: oklch(0.4 0.07 300);
+    --pure-orchid: oklch(0.55 0.125 318);
+    --pure-orchid-bg: oklch(0.955 0.03 318);
+    --pure-orchid-tx: oklch(0.43 0.12 318);
+    --pure-orchid-blk: oklch(0.4 0.07 318);
+    --pure-magenta: oklch(0.55 0.125 336);
+    --pure-magenta-bg: oklch(0.955 0.03 336);
+    --pure-magenta-tx: oklch(0.43 0.12 336);
+    --pure-magenta-blk: oklch(0.4 0.07 336);
+    --pure-raspberry: oklch(0.55 0.125 354);
+    --pure-raspberry-bg: oklch(0.955 0.03 354);
+    --pure-raspberry-tx: oklch(0.43 0.12 354);
+    --pure-raspberry-blk: oklch(0.4 0.07 354);
+    --pure-house: #1f9d57;
+    --pure-house-bg: #eef7f1;
+    --pure-house-tx: #15703f;
+    --pure-house-blk: oklch(0.4 0.07 152);
+    --app-acc: var(--pure-house);
+    --app-block: var(--pure-house-blk);
+    --app-bg: var(--pure-house-bg);
+    --app-text: var(--pure-house-tx);
+  }
+
+  [data-app='teams'] {
+    --app-acc: var(--pure-coral);
+    --app-block: var(--pure-coral-blk);
+    --app-bg: var(--pure-coral-bg);
+    --app-text: var(--pure-coral-tx);
+  }
+
+  [data-app='vibes'] {
+    --app-acc: var(--pure-redclay);
+    --app-block: var(--pure-redclay-blk);
+    --app-bg: var(--pure-redclay-bg);
+    --app-text: var(--pure-redclay-tx);
+  }
+
+  [data-app='mail'] {
+    --app-acc: var(--pure-terracotta);
+    --app-block: var(--pure-terracotta-blk);
+    --app-bg: var(--pure-terracotta-bg);
+    --app-text: var(--pure-terracotta-tx);
+  }
+
+  [data-app='files'] {
+    --app-acc: var(--pure-bronze);
+    --app-block: var(--pure-bronze-blk);
+    --app-bg: var(--pure-bronze-bg);
+    --app-text: var(--pure-bronze-tx);
+  }
+
+  [data-app='slides'] {
+    --app-acc: var(--pure-gold);
+    --app-block: var(--pure-gold-blk);
+    --app-bg: var(--pure-gold-bg);
+    --app-text: var(--pure-gold-tx);
+  }
+
+  [data-app='writer'] {
+    --app-acc: var(--pure-citron);
+    --app-block: var(--pure-citron-blk);
+    --app-bg: var(--pure-citron-bg);
+    --app-text: var(--pure-citron-tx);
+  }
+
+  [data-app='manuscript'] {
+    --app-acc: var(--pure-olive);
+    --app-block: var(--pure-olive-blk);
+    --app-bg: var(--pure-olive-bg);
+    --app-text: var(--pure-olive-tx);
+  }
+
+  [data-app='book'] {
+    --app-acc: var(--pure-leaf);
+    --app-block: var(--pure-leaf-blk);
+    --app-bg: var(--pure-leaf-bg);
+    --app-text: var(--pure-leaf-tx);
+  }
+
+  [data-app='reports'] {
+    --app-acc: var(--pure-fern);
+    --app-block: var(--pure-fern-blk);
+    --app-bg: var(--pure-fern-bg);
+    --app-text: var(--pure-fern-tx);
+  }
+
+  [data-app='chart'] {
+    --app-acc: var(--pure-spruce);
+    --app-block: var(--pure-spruce-blk);
+    --app-bg: var(--pure-spruce-bg);
+    --app-text: var(--pure-spruce-tx);
+  }
+
+  [data-app='knowledge'] {
+    --app-acc: var(--pure-teal);
+    --app-block: var(--pure-teal-blk);
+    --app-bg: var(--pure-teal-bg);
+    --app-text: var(--pure-teal-tx);
   }
 
-  [data-app='teams'],
-  [data-app='pureteams'] {
-    --app-acc: oklch(0.58 0.13 8);
-    --app-bg: oklch(0.955 0.03 8);
-    --app-text: oklch(0.40 0.12 8);
-    --app-block: oklch(0.40 0.06 8);
+  [data-app='research'] {
+    --app-acc: var(--pure-ocean);
+    --app-block: var(--pure-ocean-blk);
+    --app-bg: var(--pure-ocean-bg);
+    --app-text: var(--pure-ocean-tx);
   }
 
-  [data-app='vibes'],
-  [data-app='purevibes'] {
-    --app-acc: oklch(0.50 0.14 26);
-    --app-bg: oklch(0.955 0.03 26);
-    --app-text: oklch(0.40 0.12 26);
-    --app-block: oklch(0.40 0.06 26);
+  [data-app='sheets'] {
+    --app-acc: var(--pure-azure);
+    --app-block: var(--pure-azure-blk);
+    --app-bg: var(--pure-azure-bg);
+    --app-text: var(--pure-azure-tx);
   }
 
-  [data-app='mail'],
-  [data-app='puremail'] {
-    --app-acc: oklch(0.60 0.12 44);
-    --app-bg: oklch(0.93 0.05 44);
-    --app-text: oklch(0.40 0.12 44);
-    --app-block: oklch(0.40 0.06 44);
+  [data-app='calendar'] {
+    --app-acc: var(--pure-cerulean);
+    --app-block: var(--pure-cerulean-blk);
+    --app-bg: var(--pure-cerulean-bg);
+    --app-text: var(--pure-cerulean-tx);
   }
 
-  [data-app='files'],
-  [data-app='purefiles'] {
-    --app-acc: oklch(0.50 0.13 64);
-    --app-bg: oklch(0.955 0.03 64);
-    --app-text: oklch(0.40 0.12 64);
-    --app-block: oklch(0.40 0.06 64);
+  [data-app='desktop'] {
+    --app-acc: var(--pure-indigo);
+    --app-block: var(--pure-indigo-blk);
+    --app-bg: var(--pure-indigo-bg);
+    --app-text: var(--pure-indigo-tx);
   }
 
-  [data-app='slides'],
-  [data-app='pureslides'] {
-    --app-acc: oklch(0.61 0.11 84);
-    --app-bg: oklch(0.955 0.03 84);
-    --app-text: oklch(0.40 0.11 84);
-    --app-block: oklch(0.40 0.06 84);
+  [data-app='whiteboard'] {
+    --app-acc: var(--pure-violet);
+    --app-block: var(--pure-violet-blk);
+    --app-bg: var(--pure-violet-bg);
+    --app-text: var(--pure-violet-tx);
   }
 
-  [data-app='writer'],
-  [data-app='purewriter'] {
-    --app-acc: oklch(0.50 0.12 102);
-    --app-bg: oklch(0.955 0.03 102);
-    --app-text: oklch(0.40 0.12 102);
-    --app-block: oklch(0.40 0.06 102);
+  [data-app='review'] {
+    --app-acc: var(--pure-purple);
+    --app-block: var(--pure-purple-blk);
+    --app-bg: var(--pure-purple-bg);
+    --app-text: var(--pure-purple-tx);
   }
 
-  [data-app='manuscript'],
-  [data-app='puremanuscript'] {
-    --app-acc: oklch(0.61 0.12 124);
-    --app-bg: oklch(0.955 0.03 124);
-    --app-text: oklch(0.40 0.12 124);
-    --app-block: oklch(0.40 0.06 124);
+  [data-app='tasks'] {
+    --app-acc: var(--pure-orchid);
+    --app-block: var(--pure-orchid-blk);
+    --app-bg: var(--pure-orchid-bg);
+    --app-text: var(--pure-orchid-tx);
   }
 
-  [data-app='book'],
-  [data-app='purebook'] {
-    --app-acc: oklch(0.48 0.14 148);
-    --app-bg: oklch(0.955 0.03 148);
-    --app-text: oklch(0.40 0.12 148);
-    --app-block: oklch(0.40 0.06 148);
+  [data-app='assistant'] {
+    --app-acc: var(--pure-magenta);
+    --app-block: var(--pure-magenta-blk);
+    --app-bg: var(--pure-magenta-bg);
+    --app-text: var(--pure-magenta-tx);
   }
 
-  [data-app='reports'],
-  [data-app='purereports'] {
-    --app-acc: oklch(0.61 0.12 166);
-    --app-bg: oklch(0.955 0.03 166);
-    --app-text: oklch(0.40 0.12 166);
-    --app-block: oklch(0.40 0.06 166);
-  }
-
-  [data-app='chart'],
-  [data-app='purechart'] {
-    --app-acc: oklch(0.48 0.13 184);
-    --app-bg: oklch(0.955 0.03 184);
-    --app-text: oklch(0.40 0.12 184);
-    --app-block: oklch(0.40 0.06 184);
-  }
-
-  [data-app='knowledge'],
-  [data-app='pureknowledge'] {
-    --app-acc: oklch(0.46 0.11 198);
-    --app-bg: oklch(0.955 0.03 198);
-    --app-text: oklch(0.40 0.11 198);
-    --app-block: oklch(0.40 0.06 198);
-  }
-
-  [data-app='research'],
-  [data-app='pureresearch'] {
-    --app-acc: oklch(0.63 0.12 222);
-    --app-bg: oklch(0.955 0.03 222);
-    --app-text: oklch(0.40 0.12 222);
-    --app-block: oklch(0.40 0.06 222);
-  }
-
-  [data-app='sheets'],
-  [data-app='puresheets'] {
-    --app-acc: oklch(0.50 0.13 244);
-    --app-bg: oklch(0.955 0.03 244);
-    --app-text: oklch(0.40 0.12 244);
-    --app-block: oklch(0.40 0.06 244);
-  }
-
-  [data-app='calendar'],
-  [data-app='purecalendar'] {
-    --app-acc: oklch(0.63 0.13 258);
-    --app-bg: oklch(0.955 0.03 258);
-    --app-text: oklch(0.40 0.12 258);
-    --app-block: oklch(0.40 0.06 258);
-  }
-
-  [data-app='desktop'],
-  [data-app='puredesktop'] {
-    --app-acc: oklch(0.48 0.13 274);
-    --app-bg: oklch(0.955 0.03 274);
-    --app-text: oklch(0.40 0.12 274);
-    --app-block: oklch(0.40 0.06 274);
-  }
-
-  [data-app='plan'],
-  [data-app='pureplan'] {
-    --app-acc: oklch(0.61 0.14 290);
-    --app-bg: oklch(0.955 0.03 290);
-    --app-text: oklch(0.40 0.12 290);
-    --app-block: oklch(0.40 0.06 290);
-  }
-
-  [data-app='review'],
-  [data-app='purereview'] {
-    --app-acc: oklch(0.50 0.15 308);
-    --app-bg: oklch(0.955 0.03 308);
-    --app-text: oklch(0.40 0.12 308);
-    --app-block: oklch(0.40 0.06 308);
-  }
-
-  [data-app='tasks'],
-  [data-app='puretasks'] {
-    --app-acc: oklch(0.63 0.15 324);
-    --app-bg: oklch(0.955 0.03 324);
-    --app-text: oklch(0.40 0.12 324);
-    --app-block: oklch(0.40 0.06 324);
-  }
-
-  [data-app='assistant'],
-  [data-app='pureassistant'] {
-    --app-acc: oklch(0.50 0.15 340);
-    --app-bg: oklch(0.955 0.03 340);
-    --app-text: oklch(0.40 0.12 340);
-    --app-block: oklch(0.40 0.06 340);
-  }
-
-  [data-app='people'],
-  [data-app='purepeople'] {
-    --app-acc: oklch(0.61 0.14 356);
-    --app-bg: oklch(0.955 0.03 356);
-    --app-text: oklch(0.40 0.12 356);
-    --app-block: oklch(0.40 0.06 356);
-  }
-
-  [data-app='slides'],
-  [data-app='pureslides'],
-  [data-app='manuscript'],
-  [data-app='puremanuscript'],
-  [data-app='reports'],
-  [data-app='purereports'],
-  [data-app='research'],
-  [data-app='pureresearch'],
-  [data-app='calendar'],
-  [data-app='purecalendar'],
-  [data-app='plan'],
-  [data-app='pureplan'],
-  [data-app='tasks'],
-  [data-app='puretasks'],
-  [data-app='people'],
-  [data-app='purepeople'] {
-    --app-primary-fill: var(--app-block);
-  }
-
-  .pure-wordmark__prefix {
-    color: var(--platform-colors-text-tertiary, #9a9aa0);
-  }
-
-  .pure-wordmark__name {
-    color: var(--app-acc, var(--platform-colors-text));
-    font-weight: 700;
-  }
-
-  .pure-tab.is-active {
-    box-shadow: inset 0 -2px 0 0 var(--app-acc, var(--platform-colors-text));
-  }
-
-  .pure-viewtab.is-active {
-    border-bottom-color: var(--app-acc, var(--platform-colors-text));
-  }
-
-  .pure-btn--primary {
-    background: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
-    border-color: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
-    color: #fff;
-  }
-
-  .pure-btn--primary.is-light {
-    background: var(--app-block, var(--platform-colors-text));
-    border-color: var(--app-block, var(--platform-colors-text));
-  }
-
-  .pure-btn--bordered {
-    background: var(--platform-colors-surface, #fff);
-    border-color: var(--app-acc, var(--platform-colors-text));
-    color: var(--app-text, var(--platform-colors-text));
-  }
-
-  .pure-selected {
-    border-left-color: var(--app-acc, var(--platform-colors-accent));
-    background: var(--platform-colors-surface, #fff);
-  }
-
-  .pure-selected--chip {
-    background: var(--app-bg, var(--platform-colors-surface-muted));
-  }
-
-  .pure-active-col {
-    border-color: var(--app-acc, var(--platform-colors-accent));
-    border-top-color: var(--app-acc, var(--platform-colors-accent));
-    border-radius: 0;
-    background: var(--platform-colors-surface, #fff);
-  }
-
-  .pure-block {
-    background: var(--app-block, var(--platform-colors-text));
-    color: #fff;
+  [data-app='people'] {
+    --app-acc: var(--pure-raspberry);
+    --app-block: var(--pure-raspberry-blk);
+    --app-bg: var(--pure-raspberry-bg);
+    --app-text: var(--pure-raspberry-tx);
   }
 `