@datalayer/primer-addons 1.0.18 → 1.0.19

package/lib/theme/themes/ivoryTheme.js

@@ -0,0 +1,257 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Ivory Theme for Primer React.
+ *
+ * Soft, warm off-white neutrals with a deep-taupe accent — a calm,
+ * refined, and welcoming look. Uses an elegant humanist-serif type stack
+ * (Palatino-led) for a gentle, hospitable, printed feel.
+ * Theming is applied via **CSS custom-property overrides**.
+ */
+import { theme as primerTheme } from '@primer/react';
+import { ivoryColors } from '../colors/ivoryColors';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
+/* ── Light-mode colour definitions ───────────────────────────────────── */
+const ivoryLight = {
+    canvas: {
+        default: ivoryColors.white,
+        subtle: '#F4EDDE',
+    },
+    fg: {
+        default: '#2C2318',
+        muted: ivoryColors.gray,
+        onEmphasis: '#FBF7EF',
+    },
+    accent: {
+        fg: ivoryColors.ivoryText,
+        emphasis: ivoryColors.ivoryText,
+        muted: ivoryColors.ivoryAccent,
+        subtle: ivoryColors.ivoryTint,
+    },
+    success: {
+        fg: '#3E6B47',
+        emphasis: '#3E6B47',
+        muted: '#5E8A5E',
+        subtle: '#E1EEE0',
+    },
+    attention: {
+        fg: ivoryColors.attentionBrand,
+        emphasis: ivoryColors.attentionBrand,
+        muted: ivoryColors.attentionAccent,
+        subtle: ivoryColors.attentionTint,
+    },
+    danger: {
+        fg: ivoryColors.dangerBrand,
+        emphasis: ivoryColors.dangerBrand,
+        muted: ivoryColors.dangerAccent,
+        subtle: ivoryColors.dangerTint,
+    },
+    severe: {
+        fg: ivoryColors.severeBrand,
+        emphasis: ivoryColors.severeBrand,
+        muted: ivoryColors.severeAccent,
+        subtle: ivoryColors.severeTint,
+    },
+    done: {
+        fg: ivoryColors.doneBrand,
+        emphasis: ivoryColors.doneBrand,
+        muted: ivoryColors.doneAccent,
+        subtle: ivoryColors.doneTint,
+    },
+    border: {
+        default: '#E0D3BC',
+        muted: '#EBE1CE',
+    },
+    btn: {
+        text: '#2C2318',
+        bg: '#FDF9F1',
+        border: '#DDCEB2',
+        hoverBg: ivoryColors.ivoryTint,
+        hoverBorder: ivoryColors.gray,
+        activeBg: ivoryColors.ivoryTint,
+        activeBorder: ivoryColors.gray,
+        selectedBg: '#FDF9F1',
+        counterBg: ivoryColors.gray,
+        primary: {
+            text: '#FBF7EF',
+            bg: ivoryColors.ivoryText,
+            border: ivoryColors.ivoryText,
+            hoverBg: ivoryColors.ivoryHover,
+            hoverBorder: ivoryColors.ivoryHover,
+            selectedBg: ivoryColors.ivoryHover,
+            disabledText: 'rgba(255, 255, 255, 0.8)',
+            disabledBg: '#D8C9AE',
+            disabledBorder: '#D8C9AE',
+            icon: '#FBF7EF',
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: ivoryColors.ivoryText,
+            hoverText: '#FBF7EF',
+            hoverBg: ivoryColors.ivoryText,
+            hoverBorder: ivoryColors.ivoryText,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FBF7EF',
+            selectedBg: ivoryColors.ivoryHover,
+            selectedBorder: ivoryColors.ivoryHover,
+            disabledText: ivoryColors.gray,
+            disabledBg: ivoryColors.ivoryTint,
+            disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+            counterBg: 'rgba(0, 0, 0, 0.05)',
+            counterFg: ivoryColors.ivoryText,
+            hoverCounterFg: '#FBF7EF',
+            disabledCounterFg: ivoryColors.gray,
+        },
+        danger: {
+            text: '#B42318',
+            hoverText: '#FBF7EF',
+            hoverBg: '#B42318',
+            hoverBorder: '#B42318',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FBF7EF',
+            selectedBg: '#8E1B12',
+            selectedBorder: '#8E1B12',
+            disabledText: 'rgba(180, 35, 24, 0.5)',
+            disabledBg: ivoryColors.ivoryTint,
+            disabledCounterBg: 'rgba(180, 35, 24, 0.05)',
+            counterBg: 'rgba(180, 35, 24, 0.1)',
+            counterFg: '#B42318',
+            hoverCounterFg: '#FBF7EF',
+            disabledCounterFg: 'rgba(180, 35, 24, 0.5)',
+            icon: '#B42318',
+        },
+    },
+};
+/* ── Dark-mode colour definitions ────────────────────────────────────── */
+const ivoryDark = {
+    canvas: {
+        default: ivoryColors.black,
+        subtle: '#2A2219',
+    },
+    fg: {
+        default: '#EFE6D6',
+        muted: '#BBAC97',
+        onEmphasis: '#FBF7EF',
+    },
+    accent: {
+        fg: ivoryColors.ivoryBright,
+        emphasis: '#836A18',
+        muted: ivoryColors.ivoryBrand,
+        subtle: '#332A18',
+    },
+    success: {
+        fg: '#7CB07E',
+        emphasis: '#3E6B47',
+        muted: '#5E8A5E',
+        subtle: '#16261A',
+    },
+    attention: {
+        fg: '#E7C24E',
+        emphasis: '#8A6D08',
+        muted: ivoryColors.attentionAccent,
+        subtle: '#2E2606',
+    },
+    danger: {
+        fg: '#F08A70',
+        emphasis: '#A34632',
+        muted: ivoryColors.dangerAccent,
+        subtle: '#2E140E',
+    },
+    severe: {
+        fg: '#E6A566',
+        emphasis: '#9C6221',
+        muted: ivoryColors.severeAccent,
+        subtle: '#2E1D0A',
+    },
+    done: {
+        fg: '#B09AD0',
+        emphasis: '#6A5591',
+        muted: ivoryColors.doneAccent,
+        subtle: '#1F1830',
+    },
+    btn: {
+        text: '#EFE6D6',
+        bg: '#2E2519',
+        border: 'rgba(239, 230, 214, 0.12)',
+        hoverBg: '#3A2F1F',
+        hoverBorder: '#BBAC97',
+        activeBg: '#2E2519',
+        activeBorder: '#8C7C64',
+        selectedBg: '#241D12',
+        counterBg: '#3A2F1F',
+        primary: {
+            text: '#211A12',
+            bg: ivoryColors.ivoryBright,
+            border: 'rgba(239, 230, 214, 0.12)',
+            hoverBg: ivoryColors.ivoryAccent,
+            hoverBorder: 'rgba(239, 230, 214, 0.12)',
+            selectedBg: ivoryColors.ivoryAccent,
+            disabledText: 'rgba(33, 26, 18, 0.5)',
+            disabledBg: 'rgba(239, 223, 194, 0.35)',
+            disabledBorder: 'rgba(239, 223, 194, 0.2)',
+            icon: '#211A12',
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: ivoryColors.ivoryBright,
+            hoverText: '#211A12',
+            hoverBg: ivoryColors.ivoryBright,
+            hoverBorder: ivoryColors.ivoryBright,
+            hoverCounterBg: 'rgba(0, 0, 0, 0.2)',
+            selectedText: '#211A12',
+            selectedBg: ivoryColors.ivoryAccent,
+            selectedBorder: ivoryColors.ivoryAccent,
+            disabledText: 'rgba(239, 223, 194, 0.5)',
+            disabledBg: 'rgba(239, 223, 194, 0.1)',
+            disabledCounterBg: 'rgba(239, 223, 194, 0.05)',
+            counterBg: 'rgba(239, 223, 194, 0.1)',
+            counterFg: ivoryColors.ivoryBright,
+            hoverCounterFg: '#211A12',
+            disabledCounterFg: 'rgba(239, 223, 194, 0.5)',
+        },
+        danger: {
+            text: '#f85149',
+            hoverText: '#FBF7EF',
+            hoverBg: '#da3633',
+            hoverBorder: '#f85149',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FBF7EF',
+            selectedBg: '#b62324',
+            selectedBorder: '#ff7b72',
+            disabledText: 'rgba(248, 81, 73, 0.5)',
+            disabledBg: 'rgba(248, 81, 73, 0.1)',
+            disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+            counterBg: 'rgba(248, 81, 73, 0.1)',
+            counterFg: '#f85149',
+            hoverCounterFg: '#FBF7EF',
+            disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+            icon: '#f85149',
+        },
+    },
+};
+/* ── Exports ─────────────────────────────────────────────────────────── */
+/**
+ * The Primer theme object.
+ *
+ * Since theming is done entirely via CSS custom properties
+ * (see `ivoryThemeStyles`), this is just the unmodified default Primer
+ * theme kept for backward compatibility.
+ */
+export const ivoryTheme = primerTheme;
+/**
+ * Elegant humanist-serif font stack for the Ivory aesthetic.
+ *
+ * Leads with Palatino — a soft, calligraphic, welcoming transitional
+ * serif — with metric-compatible fallbacks across macOS / Windows /
+ * Linux (URW Palladio L / P052) so the refined, hospitable feel renders
+ * consistently everywhere without web-font loading (same no-download
+ * approach as the Matrix monospace stack).
+ */
+const ivoryFontFamily = '"Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif';
+/** Comprehensive Primer CSS-variable overrides for light & dark mode. */
+export const ivoryThemeStyles = buildThemeStyles(ivoryLight, ivoryDark, {
+    fontFamily: ivoryFontFamily,
+});
+export default ivoryTheme;

package/lib/theme/themes/lovelyTheme.js

@@ -15,6 +15,7 @@ import { buildThemeStyles } from '../css/createThemeCSSVars';
 const lovelyLight = {
     canvas: {
         default: lovelyColors.white,
+        subtle: '#F8E9ED',
     },
     fg: {
         default: '#2D1B28',
@@ -25,11 +26,37 @@ const lovelyLight = {
         fg: lovelyColors.roseText,
         emphasis: lovelyColors.roseBrand,
         muted: lovelyColors.roseAccent,
+        subtle: lovelyColors.roseTint,
     },
     success: {
-        fg: lovelyColors.roseText,
-        emphasis: lovelyColors.roseBrand,
-        muted: lovelyColors.roseAccent,
+        fg: '#1a7f37',
+        emphasis: '#2da44e',
+        muted: '#4ac26b',
+        subtle: '#dafbe1',
+    },
+    attention: {
+        fg: lovelyColors.attentionBrand,
+        emphasis: lovelyColors.attentionAccent,
+        muted: lovelyColors.attentionBrand,
+        subtle: lovelyColors.attentionTint,
+    },
+    danger: {
+        fg: lovelyColors.dangerBrand,
+        emphasis: lovelyColors.dangerBrand,
+        muted: lovelyColors.dangerAccent,
+        subtle: lovelyColors.dangerTint,
+    },
+    severe: {
+        fg: lovelyColors.severeBrand,
+        emphasis: lovelyColors.severeBrand,
+        muted: lovelyColors.severeAccent,
+        subtle: lovelyColors.severeTint,
+    },
+    done: {
+        fg: lovelyColors.doneBrand,
+        emphasis: lovelyColors.doneBrand,
+        muted: lovelyColors.doneAccent,
+        subtle: lovelyColors.doneTint,
     },
     btn: {
         text: '#2D1B28',
@@ -109,10 +136,34 @@ const lovelyDark = {
         subtle: '#3B0A2A',
     },
     success: {
-        fg: lovelyColors.roseAccent,
-        emphasis: lovelyColors.roseBright,
-        muted: lovelyColors.roseBrand,
-        subtle: '#3B0A2A',
+        fg: '#3fb950',
+        emphasis: '#238636',
+        muted: '#2ea043',
+        subtle: '#0f2a18',
+    },
+    attention: {
+        fg: '#ffd8a8',
+        emphasis: '#b7791f',
+        muted: lovelyColors.attentionBrand,
+        subtle: '#34210f',
+    },
+    danger: {
+        fg: '#ff8fb1',
+        emphasis: '#d61f69',
+        muted: lovelyColors.dangerBrand,
+        subtle: '#3b1225',
+    },
+    severe: {
+        fg: '#ffc299',
+        emphasis: '#c05621',
+        muted: lovelyColors.severeBrand,
+        subtle: '#352012',
+    },
+    done: {
+        fg: '#d6bcfa',
+        emphasis: '#805ad5',
+        muted: lovelyColors.doneBrand,
+        subtle: '#2a1f44',
     },
     btn: {
         text: '#FCE7F3',

package/lib/theme/themes/matrixTheme.js

@@ -15,6 +15,7 @@ import { buildThemeStyles } from '../css/createThemeCSSVars';
 const matrixLight = {
     canvas: {
         default: matrixColors.white,
+        subtle: '#E4F5E4',
     },
     fg: {
         default: '#0A2E1A',
@@ -28,10 +29,34 @@ const matrixLight = {
         subtle: matrixColors.greenTint,
     },
     success: {
-        fg: matrixColors.greenText,
-        emphasis: matrixColors.greenBrand,
-        muted: matrixColors.greenAccent,
-        subtle: matrixColors.greenTint,
+        fg: '#1a7f37',
+        emphasis: '#2da44e',
+        muted: '#4ac26b',
+        subtle: '#dafbe1',
+    },
+    attention: {
+        fg: '#3B3200',
+        emphasis: matrixColors.attentionAccent,
+        muted: '#CBB100',
+        subtle: '#FFF7C2',
+    },
+    danger: {
+        fg: matrixColors.dangerBrand,
+        emphasis: matrixColors.dangerBrand,
+        muted: matrixColors.dangerAccent,
+        subtle: '#ffd7df',
+    },
+    severe: {
+        fg: matrixColors.severeBrand,
+        emphasis: matrixColors.severeBrand,
+        muted: matrixColors.severeAccent,
+        subtle: '#ffe3c2',
+    },
+    done: {
+        fg: matrixColors.doneBrand,
+        emphasis: matrixColors.doneBrand,
+        muted: matrixColors.doneAccent,
+        subtle: '#d9fbff',
     },
     btn: {
         text: '#0A2E1A',
@@ -111,10 +136,34 @@ const matrixDark = {
         subtle: '#0A1F0A',
     },
     success: {
-        fg: matrixColors.greenPhosphor,
-        emphasis: matrixColors.greenGlow,
-        muted: matrixColors.greenAccent,
-        subtle: '#0A1F0A',
+        fg: '#56d364',
+        emphasis: '#238636',
+        muted: '#2ea043',
+        subtle: '#0f2a18',
+    },
+    attention: {
+        fg: '#ffea00',
+        emphasis: '#a78e00',
+        muted: '#ffd000',
+        subtle: '#332b00',
+    },
+    danger: {
+        fg: '#ff5a77',
+        emphasis: '#c62828',
+        muted: matrixColors.dangerAccent,
+        subtle: '#2f0f17',
+    },
+    severe: {
+        fg: '#ffad4d',
+        emphasis: '#c75b12',
+        muted: matrixColors.severeAccent,
+        subtle: '#302000',
+    },
+    done: {
+        fg: '#6af7ff',
+        emphasis: '#008b8b',
+        muted: matrixColors.doneAccent,
+        subtle: '#062327',
     },
     btn: {
         text: '#C8E6C9',