@datalayer/primer-addons 1.0.18 → 1.0.20

package/lib/theme/css/createThemeCSSVars.js

@@ -33,11 +33,33 @@
  * | Legacy aliases   | `--color-btn-primary-bg`               |
  * | Brand (custom)   | `--brand-color-canvas-default`         |
  */
-export function colorDefsToCSS(defs) {
+export function colorDefsToCSS(defs, mode = 'light') {
     const optional = {};
     if (defs.canvas.subtle) {
         optional['--bgColor-muted'] = defs.canvas.subtle;
     }
+    /* ── Semantic role fallbacks ─────────────────────────────────────
+     * Themes may override `attention` / `danger` / `severe` / `done`,
+     * but when they don't we supply sensible, mode-aware defaults so the
+     * full Primer semantic palette is always defined (apps do not load
+     * @primer/primitives CSS). */
+    const roleFallbacks = mode === 'dark'
+        ? {
+            attention: { fg: '#d29922', emphasis: '#9e6a03', muted: '#bb8009', subtle: '#341a00' },
+            danger: { fg: '#f85149', emphasis: '#da3633', muted: '#b62324', subtle: '#25171c' },
+            severe: { fg: '#db6d28', emphasis: '#bd561d', muted: '#9e5122', subtle: '#2a1801' },
+            done: { fg: '#a371f7', emphasis: '#8957e5', muted: '#6e40c9', subtle: '#221530' },
+        }
+        : {
+            attention: { fg: '#9a6700', emphasis: '#bf8700', muted: '#d4a72c', subtle: '#fff8c5' },
+            danger: { fg: '#cf222e', emphasis: '#cf222e', muted: '#ff8182', subtle: '#ffebe9' },
+            severe: { fg: '#bc4c00', emphasis: '#bc4c00', muted: '#fdaa7f', subtle: '#fff1e5' },
+            done: { fg: '#8250df', emphasis: '#8250df', muted: '#d8b9ff', subtle: '#fbefff' },
+        };
+    const attention = defs.attention ?? roleFallbacks.attention;
+    const danger = defs.danger ?? roleFallbacks.danger;
+    const severe = defs.severe ?? roleFallbacks.severe;
+    const done = defs.done ?? roleFallbacks.done;
     return {
         /* ── Canvas / Background ─────────────────────────────────────── */
         '--bgColor-default': defs.canvas.default,
@@ -68,6 +90,30 @@ export function colorDefsToCSS(defs) {
         '--bgColor-success-muted': defs.success.subtle ?? defs.success.muted,
         '--borderColor-success-emphasis': defs.success.emphasis,
         '--borderColor-success-muted': defs.success.muted,
+        /* ── Attention (amber) ───────────────────────────────────────── */
+        '--fgColor-attention': attention.fg,
+        '--bgColor-attention-emphasis': attention.emphasis,
+        '--bgColor-attention-muted': attention.subtle ?? attention.muted,
+        '--borderColor-attention-emphasis': attention.emphasis,
+        '--borderColor-attention-muted': attention.muted,
+        /* ── Danger (red) ────────────────────────────────────────────── */
+        '--fgColor-danger': danger.fg,
+        '--bgColor-danger-emphasis': danger.emphasis,
+        '--bgColor-danger-muted': danger.subtle ?? danger.muted,
+        '--borderColor-danger-emphasis': danger.emphasis,
+        '--borderColor-danger-muted': danger.muted,
+        /* ── Severe (orange) ─────────────────────────────────────────── */
+        '--fgColor-severe': severe.fg,
+        '--bgColor-severe-emphasis': severe.emphasis,
+        '--bgColor-severe-muted': severe.subtle ?? severe.muted,
+        '--borderColor-severe-emphasis': severe.emphasis,
+        '--borderColor-severe-muted': severe.muted,
+        /* ── Done (purple) ───────────────────────────────────────────── */
+        '--fgColor-done': done.fg,
+        '--bgColor-done-emphasis': done.emphasis,
+        '--bgColor-done-muted': done.subtle ?? done.muted,
+        '--borderColor-done-emphasis': done.emphasis,
+        '--borderColor-done-muted': done.muted,
         /* ── Border (generic) ────────────────────────────────────────── */
         '--borderColor-default': defs.border?.default ?? defs.btn.border,
         '--borderColor-muted': defs.border?.muted ?? defs.btn.border,
@@ -173,6 +219,13 @@ export function colorDefsToCSS(defs) {
         '--control-transparent-bgColor-selected': defs.btn.selectedBg,
         '--control-transparent-borderColor-hover': 'transparent',
         '--control-transparent-borderColor-active': 'transparent',
+        /* ── Disabled controls / fields ─────────────────────────────── */
+        '--control-bgColor-disabled': defs.canvas.subtle ?? defs.btn.bg,
+        '--control-borderColor-disabled': defs.border?.default ?? defs.btn.border,
+        '--control-fgColor-disabled': defs.fg.muted,
+        '--fgColor-disabled': defs.fg.muted,
+        '--color-input-disabled-bg': defs.canvas.subtle ?? defs.btn.bg,
+        '--color-primer-fg-disabled': defs.fg.muted,
         /* ── Menu ────────────────────────────────────────────────────── */
         '--menu-bgColor-active': defs.btn.hoverBg,
         /* ── Legacy / compat aliases ─────────────────────────────────── */
@@ -226,7 +279,7 @@ export function buildThemeStyles(light, dark, options) {
             color: light.fg.default,
             fontSize: 'var(--text-body-size-medium)',
             ...(options?.fontFamily ? { fontFamily: options.fontFamily } : {}),
-            ...colorDefsToCSS(light),
+            ...colorDefsToCSS(light, 'light'),
             ...fontVars,
         },
         dark: {
@@ -234,7 +287,7 @@ export function buildThemeStyles(light, dark, options) {
             color: dark.fg.default,
             fontSize: 'var(--text-body-size-medium)',
             ...(options?.fontFamily ? { fontFamily: options.fontFamily } : {}),
-            ...colorDefsToCSS(dark),
+            ...colorDefsToCSS(dark, 'dark'),
             ...fontVars,
         },
     };

package/lib/theme/index.d.ts

@@ -8,6 +8,9 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes/earthTheme';
+export * from './themes/sandTheme';
+export * from './themes/ivoryTheme';
+export * from './themes/sunTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
 export * from './palettes';

package/lib/theme/index.js

@@ -12,6 +12,9 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes/earthTheme';
+export * from './themes/sandTheme';
+export * from './themes/ivoryTheme';
+export * from './themes/sunTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
 export * from './palettes';

package/lib/theme/palettes/ColorPalette.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Shared palette types, theme-aware colour resolution, and reusable
  * gradient / grid definitions.
  */
-import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../colors';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, sandColors, ivoryColors, sunColors, } from '../colors';
 import { getBrightPalette, } from '../themeRegistry';
 import { useThemeStore } from '../useThemeStore';
 const dlBrightDark = getBrightPalette('datalayer');
@@ -21,6 +21,12 @@ const mxBrightDark = getBrightPalette('matrix');
 const mxBrightLight = getBrightPalette('matrix', 'light');
 const eaBrightDark = getBrightPalette('earth');
 const eaBrightLight = getBrightPalette('earth', 'light');
+const saBrightDark = getBrightPalette('sand');
+const saBrightLight = getBrightPalette('sand', 'light');
+const ivBrightDark = getBrightPalette('ivory');
+const ivBrightLight = getBrightPalette('ivory', 'light');
+const suBrightDark = getBrightPalette('sun');
+const suBrightLight = getBrightPalette('sun', 'light');
 const palettes = {
     datalayer: {
         light: {
@@ -212,6 +218,120 @@ const palettes = {
             isLight: false,
         },
     },
+    sand: {
+        light: {
+            bg: '#FBF7EF',
+            bgPanel: '#ffffff',
+            bgAlt: sandColors.sandTint,
+            primary: sandColors.sandBrand,
+            secondary: sandColors.sandText,
+            accent: sandColors.sandAccent,
+            glow: saBrightLight.glow,
+            pop: saBrightLight.pop,
+            spark: saBrightLight.spark,
+            blaze: saBrightLight.blaze,
+            surge: saBrightLight.surge,
+            flame: saBrightLight.flame,
+            gold: saBrightLight.gold,
+            textLight: '#2B2118',
+            textMuted: sandColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: sandColors.black,
+            bgPanel: '#2A2118',
+            bgAlt: '#33281A',
+            primary: sandColors.sandAccent,
+            secondary: sandColors.sandBrand,
+            accent: sandColors.sandBright,
+            glow: saBrightDark.glow,
+            pop: saBrightDark.pop,
+            spark: saBrightDark.spark,
+            blaze: saBrightDark.blaze,
+            surge: saBrightDark.surge,
+            flame: saBrightDark.flame,
+            gold: saBrightDark.gold,
+            textLight: '#EDE3D3',
+            textMuted: '#B7A793',
+            isLight: false,
+        },
+    },
+    ivory: {
+        light: {
+            bg: '#FBF6EC',
+            bgPanel: '#ffffff',
+            bgAlt: ivoryColors.ivoryTint,
+            primary: ivoryColors.ivoryBrand,
+            secondary: ivoryColors.ivoryText,
+            accent: ivoryColors.ivoryAccent,
+            glow: ivBrightLight.glow,
+            pop: ivBrightLight.pop,
+            spark: ivBrightLight.spark,
+            blaze: ivBrightLight.blaze,
+            surge: ivBrightLight.surge,
+            flame: ivBrightLight.flame,
+            gold: ivBrightLight.gold,
+            textLight: '#2C2318',
+            textMuted: ivoryColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: ivoryColors.black,
+            bgPanel: '#2A2219',
+            bgAlt: '#33291B',
+            primary: ivoryColors.ivoryAccent,
+            secondary: ivoryColors.ivoryBrand,
+            accent: ivoryColors.ivoryBright,
+            glow: ivBrightDark.glow,
+            pop: ivBrightDark.pop,
+            spark: ivBrightDark.spark,
+            blaze: ivBrightDark.blaze,
+            surge: ivBrightDark.surge,
+            flame: ivBrightDark.flame,
+            gold: ivBrightDark.gold,
+            textLight: '#EFE6D6',
+            textMuted: '#BBAC97',
+            isLight: false,
+        },
+    },
+    sun: {
+        light: {
+            bg: '#FFF9EC',
+            bgPanel: '#ffffff',
+            bgAlt: sunColors.sunTint,
+            primary: sunColors.sunBrand,
+            secondary: sunColors.sunText,
+            accent: sunColors.sunAccent,
+            glow: suBrightLight.glow,
+            pop: suBrightLight.pop,
+            spark: suBrightLight.spark,
+            blaze: suBrightLight.blaze,
+            surge: suBrightLight.surge,
+            flame: suBrightLight.flame,
+            gold: suBrightLight.gold,
+            textLight: '#2A2210',
+            textMuted: sunColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: sunColors.black,
+            bgPanel: '#2A2109',
+            bgAlt: '#33290C',
+            primary: sunColors.sunAccent,
+            secondary: sunColors.sunBrand,
+            accent: sunColors.sunBright,
+            glow: suBrightDark.glow,
+            pop: suBrightDark.pop,
+            spark: suBrightDark.spark,
+            blaze: suBrightDark.blaze,
+            surge: suBrightDark.surge,
+            flame: suBrightDark.flame,
+            gold: suBrightDark.gold,
+            textLight: '#F3E9CF',
+            textMuted: '#BEAC82',
+            isLight: false,
+        },
+    },
 };
 export function getColorPalette(theme = 'datalayer', colorMode = 'auto') {
     const mode = colorMode === 'auto'

package/lib/theme/themeRegistry.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties } from 'react';
 import { type ColorMode } from './DatalayerBrandThemeProvider';
 /** Available theme variants. */
-export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix' | 'earth';
+export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix' | 'earth' | 'sand' | 'ivory' | 'sun';
 /** A pair of colours for a two-stop gradient. */
 export interface GradientPair {
     /** Start colour (brighter / brand). */

package/lib/theme/themeRegistry.js

@@ -7,11 +7,17 @@ import { spatialTheme, spatialThemeStyles } from './themes/spatialTheme';
 import { lovelyTheme, lovelyThemeStyles } from './themes/lovelyTheme';
 import { matrixTheme, matrixThemeStyles } from './themes/matrixTheme';
 import { earthTheme, earthThemeStyles } from './themes/earthTheme';
+import { sandTheme, sandThemeStyles } from './themes/sandTheme';
+import { ivoryTheme, ivoryThemeStyles } from './themes/ivoryTheme';
+import { sunTheme, sunThemeStyles } from './themes/sunTheme';
 import { datalayerColors } from './colors/datalayerColors';
 import { spatialColors } from './colors/spatialColors';
 import { lovelyColors } from './colors/lovelyColors';
 import { matrixColors } from './colors/matrixColors';
 import { earthColors } from './colors/earthColors';
+import { sandColors } from './colors/sandColors';
+import { ivoryColors } from './colors/ivoryColors';
+import { sunColors } from './colors/sunColors';
 /* ─── Registry ────────────────────────────────────────────────────────── */
 export const themeConfigs = {
     datalayer: {
@@ -174,9 +180,105 @@ export const themeConfigs = {
             gold: earthColors.brightLightGold, // #A16207 — deep gold
         },
     },
+    sand: {
+        label: 'Sand',
+        description: 'Warm, pale desert neutrals with a golden accent — calm & editorial.',
+        brandColor: sandColors.sandBrand,
+        defaultColorMode: 'light',
+        primerTheme: sandTheme,
+        themeStyles: sandThemeStyles,
+        cardGradient: {
+            light: { from: sandColors.sandBrand, to: sandColors.sandText }, // #B07A4E → #8A5A34
+            dark: { from: sandColors.sandAccent, to: sandColors.sandBrand }, // #C99A6B → #B07A4E
+        },
+        brightPalette: {
+            glow: sandColors.brightGlow, // #E0A15C — warm sand glow
+            onGlow: '#211A12', // dark text on warm sand
+            pop: sandColors.brightPop, // #D98A5A — clay
+            spark: sandColors.brightSpark, // #E7C24E — wheat gold
+            blaze: sandColors.brightBlaze, // #E06A45 — terracotta
+            surge: sandColors.brightSurge, // #8FA98A — sage
+            flame: sandColors.brightFlame, // #E68A34 — amber
+            gold: sandColors.brightGold, // #EBCB5E — golden wheat
+        },
+        brightPaletteLight: {
+            glow: sandColors.brightLightGlow, // #8A5A34 — deep clay
+            onGlow: '#ffffff', // white text on deep clay
+            pop: sandColors.brightLightPop, // #A9633B — deep terracotta-clay
+            spark: sandColors.brightLightSpark, // #B08A16 — deep wheat gold
+            blaze: sandColors.brightLightBlaze, // #B0432A — deep terracotta
+            surge: sandColors.brightLightSurge, // #5E7A5A — deep sage
+            flame: sandColors.brightLightFlame, // #B0661E — deep amber
+            gold: sandColors.brightLightGold, // #997B1A — deep gold
+        },
+    },
+    ivory: {
+        label: 'Ivory',
+        description: 'Soft, warm off-white that creates a calm, refined, and welcoming feeling.',
+        brandColor: ivoryColors.ivoryBrand,
+        defaultColorMode: 'light',
+        primerTheme: ivoryTheme,
+        themeStyles: ivoryThemeStyles,
+        cardGradient: {
+            light: { from: ivoryColors.ivoryBrand, to: ivoryColors.ivoryText }, // #E6D2B5 → #6B5A3E
+            dark: { from: ivoryColors.ivoryAccent, to: ivoryColors.ivoryBrand }, // #D8C09B → #E6D2B5
+        },
+        brightPalette: {
+            glow: ivoryColors.brightGlow, // #E6D2B5 — ivory glow
+            onGlow: '#211A12', // dark text on warm ivory
+            pop: ivoryColors.brightPop, // #D8B27E — warm tan
+            spark: ivoryColors.brightSpark, // #EFDFC2 — bright ivory
+            blaze: ivoryColors.brightBlaze, // #DD7048 — soft terracotta
+            surge: ivoryColors.brightSurge, // #98A783 — sage
+            flame: ivoryColors.brightFlame, // #E0912F — amber
+            gold: ivoryColors.brightGold, // #EACF6A — soft gold
+        },
+        brightPaletteLight: {
+            glow: ivoryColors.brightLightGlow, // #6B5A3E — deep taupe
+            onGlow: '#ffffff', // white text on deep taupe
+            pop: ivoryColors.brightLightPop, // #9C6626 — deep amber-tan
+            spark: ivoryColors.brightLightSpark, // #8A7320 — deep gold
+            blaze: ivoryColors.brightLightBlaze, // #AB4229 — deep terracotta
+            surge: ivoryColors.brightLightSurge, // #5C6C4C — deep sage
+            flame: ivoryColors.brightLightFlame, // #9C6221 — deep amber
+            gold: ivoryColors.brightLightGold, // #836A18 — deep gold
+        },
+    },
+    sun: {
+        label: 'Sun',
+        description: 'Warm, radiant theme inspired by golden light, bringing energy, optimism, and a welcoming atmosphere.',
+        brandColor: sunColors.sunBrand,
+        defaultColorMode: 'light',
+        primerTheme: sunTheme,
+        themeStyles: sunThemeStyles,
+        cardGradient: {
+            light: { from: sunColors.sunBrand, to: sunColors.sunText }, // #FFC107 → #8A5300
+            dark: { from: sunColors.sunAccent, to: sunColors.sunBrand }, // #F0A800 → #FFC107
+        },
+        brightPalette: {
+            glow: sunColors.brightGlow, // #FFC107 — amber glow
+            onGlow: '#211A08', // dark text on radiant amber
+            pop: sunColors.brightPop, // #FF9F1C — vivid orange-amber
+            spark: sunColors.brightSpark, // #FFD54A — bright sun
+            blaze: sunColors.brightBlaze, // #FF6B35 — coral-orange
+            surge: sunColors.brightSurge, // #4FB0C6 — sky blue
+            flame: sunColors.brightFlame, // #FF8500 — amber flame
+            gold: sunColors.brightGold, // #FFD700 — gold
+        },
+        brightPaletteLight: {
+            glow: sunColors.brightLightGlow, // #8A5300 — deep amber-brown
+            onGlow: '#ffffff', // white text on deep amber
+            pop: sunColors.brightLightPop, // #B8560F — deep orange-amber
+            spark: sunColors.brightLightSpark, // #9A7B00 — deep gold
+            blaze: sunColors.brightLightBlaze, // #B23A1E — deep coral
+            surge: sunColors.brightLightSurge, // #2A7C8E — deep sky-teal
+            flame: sunColors.brightLightFlame, // #A85D0C — deep amber
+            gold: sunColors.brightLightGold, // #8A6E00 — deep gold
+        },
+    },
 };
 /** All available theme variants in display order. */
-export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix', 'earth'];
+export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix', 'earth', 'sand', 'ivory', 'sun'];
 /** Look up a theme config by variant name. */
 export function getThemeConfig(variant) {
     return themeConfigs[variant];
@@ -313,6 +415,54 @@ const avatarColorPalettes = {
             earthColors.brightFlame, // #F59E0B — amber gold
         ],
     },
+    sand: {
+        light: [
+            sandColors.sandText, // #8A5A34 — deep clay
+            sandColors.sandBrand, // #B07A4E — camel dune
+            sandColors.brightLightPop, // #A9633B — deep terracotta-clay
+            sandColors.brightLightGold, // #997B1A — deep gold
+            sandColors.gray, // #6B5D4F — taupe
+        ],
+        dark: [
+            sandColors.sandAccent, // #C99A6B — light tan
+            sandColors.sandBright, // #D9B589 — bright sand
+            sandColors.brightPop, // #D98A5A — clay
+            sandColors.brightSpark, // #E7C24E — wheat gold
+            sandColors.brightFlame, // #E68A34 — amber
+        ],
+    },
+    ivory: {
+        light: [
+            ivoryColors.ivoryText, // #6B5A3E — deep taupe
+            ivoryColors.ivoryBrand, // #E6D2B5 — light ivory
+            ivoryColors.brightLightPop, // #9C6626 — deep amber-tan
+            ivoryColors.brightLightGold, // #836A18 — deep gold
+            ivoryColors.gray, // #6F6353 — warm taupe
+        ],
+        dark: [
+            ivoryColors.ivoryAccent, // #D8C09B — deeper ivory
+            ivoryColors.ivoryBright, // #EFDFC2 — bright ivory
+            ivoryColors.brightPop, // #D8B27E — warm tan
+            ivoryColors.brightSpark, // #EFDFC2 — bright ivory
+            ivoryColors.brightFlame, // #E0912F — amber
+        ],
+    },
+    sun: {
+        light: [
+            sunColors.sunText, // #8A5300 — deep amber-brown
+            sunColors.sunBrand, // #FFC107 — radiant amber
+            sunColors.brightLightPop, // #B8560F — deep orange-amber
+            sunColors.brightLightBlaze, // #B23A1E — deep coral
+            sunColors.gray, // #7A6A3A — amber-taupe
+        ],
+        dark: [
+            sunColors.sunAccent, // #F0A800 — deep amber
+            sunColors.sunBright, // #FFD54A — bright sun
+            sunColors.brightPop, // #FF9F1C — vivid orange-amber
+            sunColors.brightBlaze, // #FF6B35 — coral-orange
+            sunColors.brightSurge, // #4FB0C6 — sky blue
+        ],
+    },
 };
 /**
  * Get a 5-colour avatar palette for the given theme variant and colour mode.

package/lib/theme/themes/datalayerTheme.js

@@ -16,6 +16,7 @@ import { buildThemeStyles } from '../css/createThemeCSSVars';
 const datalayerLight = {
     canvas: {
         default: datalayerColors.white,
+        subtle: '#f4f5f6',
     },
     fg: {
         default: datalayerColors.black,
@@ -26,11 +27,37 @@ const datalayerLight = {
         fg: datalayerColors.greenText,
         emphasis: datalayerColors.greenBrand,
         muted: datalayerColors.greenAccent,
+        subtle: datalayerColors.greenTint,
     },
     success: {
-        fg: datalayerColors.greenText,
-        emphasis: datalayerColors.greenBrand,
-        muted: datalayerColors.greenAccent,
+        fg: '#1a7f37',
+        emphasis: '#2da44e',
+        muted: '#4ac26b',
+        subtle: '#dafbe1',
+    },
+    attention: {
+        fg: datalayerColors.attentionBrand,
+        emphasis: datalayerColors.attentionAccent,
+        muted: datalayerColors.attentionBrand,
+        subtle: datalayerColors.attentionTint,
+    },
+    danger: {
+        fg: datalayerColors.dangerBrand,
+        emphasis: datalayerColors.dangerBrand,
+        muted: datalayerColors.dangerAccent,
+        subtle: datalayerColors.dangerTint,
+    },
+    severe: {
+        fg: datalayerColors.severeBrand,
+        emphasis: datalayerColors.severeBrand,
+        muted: datalayerColors.severeAccent,
+        subtle: datalayerColors.severeTint,
+    },
+    done: {
+        fg: datalayerColors.doneBrand,
+        emphasis: datalayerColors.doneBrand,
+        muted: datalayerColors.doneAccent,
+        subtle: datalayerColors.doneTint,
     },
     border: {
         default: '#d1d9e0',
@@ -114,10 +141,34 @@ const datalayerDark = {
         subtle: '#1f352d',
     },
     success: {
-        fg: datalayerColors.greenAccent,
-        emphasis: datalayerColors.greenBright,
-        muted: datalayerColors.greenBrand,
-        subtle: '#1f352d',
+        fg: '#3fb950',
+        emphasis: '#238636',
+        muted: '#2ea043',
+        subtle: '#0f2a18',
+    },
+    attention: {
+        fg: '#e3b341',
+        emphasis: '#9e6a03',
+        muted: '#d4a72c',
+        subtle: '#341a00',
+    },
+    danger: {
+        fg: '#ff7b72',
+        emphasis: '#da3633',
+        muted: datalayerColors.dangerBrand,
+        subtle: '#25171c',
+    },
+    severe: {
+        fg: '#f0883e',
+        emphasis: '#bd561d',
+        muted: datalayerColors.severeBrand,
+        subtle: '#2a1801',
+    },
+    done: {
+        fg: '#79c0ff',
+        emphasis: '#1f6feb',
+        muted: datalayerColors.doneBrand,
+        subtle: '#0d1f3a',
     },
     btn: {
         text: '#c9d1d9',

package/lib/theme/themes/earthTheme.js

@@ -16,6 +16,7 @@ import { buildThemeStyles } from '../css/createThemeCSSVars';
 const earthLight = {
     canvas: {
         default: earthColors.white,
+        subtle: '#EBF0F4',
     },
     fg: {
         default: '#1A2332',
@@ -26,12 +27,37 @@ const earthLight = {
         fg: earthColors.oceanText,
         emphasis: earthColors.oceanBrand,
         muted: earthColors.oceanAccent,
+        subtle: earthColors.oceanTint,
     },
     success: {
         fg: earthColors.forestBrand,
         emphasis: earthColors.forestBrand,
         muted: earthColors.forestAccent,
     },
+    attention: {
+        fg: earthColors.attentionBrand,
+        emphasis: earthColors.attentionAccent,
+        muted: earthColors.attentionBrand,
+        subtle: earthColors.attentionTint,
+    },
+    danger: {
+        fg: earthColors.dangerBrand,
+        emphasis: earthColors.dangerBrand,
+        muted: earthColors.dangerAccent,
+        subtle: earthColors.dangerTint,
+    },
+    severe: {
+        fg: earthColors.severeBrand,
+        emphasis: earthColors.severeBrand,
+        muted: earthColors.severeAccent,
+        subtle: earthColors.severeTint,
+    },
+    done: {
+        fg: earthColors.doneBrand,
+        emphasis: earthColors.doneBrand,
+        muted: earthColors.doneAccent,
+        subtle: earthColors.doneTint,
+    },
     border: {
         default: '#C1D0DD',
         muted: '#DAE4ED',
@@ -119,6 +145,30 @@ const earthDark = {
         muted: earthColors.forestBrand,
         subtle: '#0C2D18',
     },
+    attention: {
+        fg: '#facc15',
+        emphasis: '#ca8a04',
+        muted: earthColors.attentionAccent,
+        subtle: '#352700',
+    },
+    danger: {
+        fg: '#f97066',
+        emphasis: '#b42318',
+        muted: earthColors.dangerAccent,
+        subtle: '#3a1514',
+    },
+    severe: {
+        fg: '#fbbf24',
+        emphasis: '#b45309',
+        muted: earthColors.severeAccent,
+        subtle: '#342100',
+    },
+    done: {
+        fg: '#60a5fa',
+        emphasis: '#1d4ed8',
+        muted: earthColors.doneAccent,
+        subtle: '#112545',
+    },
     btn: {
         text: '#D4E4DC',
         bg: '#162236',