@textui/core 0.8.0 → 0.9.0

package/dist/themes/builtin.d.ts

@@ -7,10 +7,6 @@ export declare const CONSOLE: ThemeDefinition;
 export declare const PAPER: ThemeDefinition;
 /** Borderless. Whitespace and alignment do the separating. */
 export declare const PAPER_LIGHT: ThemeDefinition;
-/** Rounded chrome around a persistent frame. */
-export declare const WORKBENCH: ThemeDefinition;
-/** No colour at all. What a `colorDepth: 0` terminal or a pipe gets. */
-export declare const MONO: ThemeDefinition;
 /**
  * Paper, after dark.
  *
@@ -20,5 +16,9 @@ export declare const MONO: ThemeDefinition;
  * reader moving between them is not moving between two different products.
  */
 export declare const PAPER_DARK: ThemeDefinition;
+/** Rounded chrome around a persistent frame. */
+export declare const WORKBENCH: ThemeDefinition;
+/** No colour at all. What a `colorDepth: 0` terminal or a pipe gets. */
+export declare const MONO: ThemeDefinition;
 export declare const BUILTIN_THEMES: ThemeDefinition[];
 //# sourceMappingURL=builtin.d.ts.map

package/dist/themes/builtin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builtin.d.ts","sourceRoot":"","sources":["../../src/themes/builtin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AA8EzD,eAAO,MAAM,IAAI,EAAE,eA8ClB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,eA8CnB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,eAuCrB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,KAAK,EAAE,eAyDnB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,SAAS,EAAE,eAqCvB,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,IAAI,EAAE,eAiElB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,eA+BxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAAe,EAE3C,CAAC"}
+{"version":3,"file":"builtin.d.ts","sourceRoot":"","sources":["../../src/themes/builtin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAgFzD,eAAO,MAAM,IAAI,EAAE,eAgDlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,eAgDnB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,eA0CrB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,KAAK,EAAE,eAyDnB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,eAiCxB,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,SAAS,EAAE,eAsCvB,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,IAAI,EAAE,eAiElB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAAe,EAE3C,CAAC"}

package/dist/themes/builtin.js

@@ -21,7 +21,7 @@
  * otherwise moves with it, while a theme that states `components.List.focused`
  * moves the list and leaves the table where it was.
  */
-const SELECTION_FOCUSED = { bg: 'selected', fg: 'onSelected', dim: true };
+const SELECTION_FOCUSED = { bg: 'selected', fg: 'onSelected', bold: true };
 const SELECTION_UNFOCUSED = { bg: 'active', fg: 'onActive' };
 const SELECTION_HOVER = { bg: 'hover', fg: 'onActive' };
 // The other way to draw a selection: reverse video, which is legible whatever
@@ -50,7 +50,8 @@ const STATE_STYLES = {
     // A marked line is a selection. The caret line is that selection plus the
     // keyboard, so it takes the next fill up rather than a colour of its own.
     CodeViewer: { selected: SELECTION_UNFOCUSED, focus: SELECTION_HOVER },
-    Menu: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+    Menu: { base: { fg: 'text' }, selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+    TextInput: { base: { fg: 'text' } },
     // A tab is open, not selected. Dimming it when the strip does not have the
     // keyboard would say no document is open, which is a different claim and a
     // wrong one - so it has one state and no second.
@@ -66,10 +67,11 @@ const STATE_STYLES = {
     ToolCallRow: { selected: SELECTION_FOCUSED },
     ReasoningBlock: { selected: SELECTION_FOCUSED },
     ComposerChip: { focus: SELECTION_FOCUSED },
-    // A range in a document is a selection, and it keeps the colours the text
-    // under it was already drawn in - the syntax of a selection is the syntax of
-    // the code it covers.
-    Editor: { selected: { bg: 'active' } },
+    // A range in a document is a selection, drawn in reverse video so it keeps
+    // the colours the text under it was already drawn in - the syntax of a
+    // selection is the syntax of the code it covers - and shows whether or not
+    // the theme's `active` is a fill.
+    Editor: { selected: { inverse: true } },
 };
 export const DARK = {
     id: 'dark',
@@ -86,9 +88,9 @@ export const DARK = {
         borderStrong: '#484f58',
         borderSubtle: '#21262d',
         divider: '#484f58',
-        text: '#e6edf3',
+        text: '#f3e6f1',
         muted: '#8b949e',
-        subtle: '#6e7681',
+        subtle: '#546f94',
         inverted: '#0d1117',
         accent: '#58a6ff',
         primary: '#388bfd',
@@ -107,8 +109,10 @@ export const DARK = {
         onWarning: '#0d1117',
         onDanger: '#0d1117',
         hover: '#1f2937',
-        active: '#264466',
-        selected: '#1f6feb',
+        active: 'default',
+        onActive: '#3191ff',
+        selected: 'default',
+        onSelected: '#3191ff',
         focus: '#58a6ff',
         disabled: '#484f58',
         scrim: '#010409',
@@ -154,8 +158,10 @@ export const LIGHT = {
         onWarning: '#ffffff',
         onDanger: '#ffffff',
         hover: '#eaeef2',
-        active: '#a5bdd8',
-        selected: '#0969da',
+        active: 'default',
+        onActive: '#0969da',
+        selected: 'default',
+        onSelected: '#0969da',
         focus: '#0969da',
         disabled: '#8c959f',
         scrim: '#8c959f',
@@ -195,6 +201,9 @@ export const CONSOLE = {
         info: '#88c0d0',
         selected: '#6ba3b2',
         active: '#1e3d47',
+        // Stated, because `dark` states its own for a selection with no fill.
+        onSelected: '#0a0e14',
+        onActive: '#d8dee9',
         onAccent: '#0a0e14',
         onPrimary: '#0a0e14',
         onInfo: '#0a0e14',
@@ -291,6 +300,9 @@ export const PAPER_LIGHT = {
         hover: '#f7f1e7',
         active: '#efe4d2',
         selected: '#eadcc6',
+        // Stated, because `light` states its own for a selection with no fill.
+        onActive: '#2b2a27',
+        onSelected: '#2b2a27',
         inverted: '#2b2a27',
         focus: '#b4531f',
     },
@@ -300,6 +312,48 @@ export const PAPER_LIGHT = {
         Button: { base: { padding: [0, 2] } },
     },
 };
+/**
+ * Paper, after dark.
+ *
+ * The same airy, borderless, warm-accented character as `paper` - the point of
+ * it is the restraint, not the brightness - with the ink and the page swapped.
+ * A warm dark rather than a blue one, so the two read as one family and a
+ * reader moving between them is not moving between two different products.
+ */
+export const PAPER_DARK = {
+    id: 'paper-dark',
+    name: 'Paper Dark',
+    appearance: 'dark',
+    extends: 'dark',
+    border: 'none',
+    density: 'airy',
+    colors: {
+        canvas: '#1c1a17',
+        surface: '#1c1a17',
+        surfaceAlt: '#26231f',
+        border: '#3a352e',
+        borderSubtle: '#2a2621',
+        divider: 'default',
+        subtle: '#db8c4c',
+        text: '#e8e3d9',
+        muted: '#9a9287',
+        accent: '#e0873f',
+        primary: '#e0873f',
+        // The same restraint, the other way up.
+        hover: '#26231f',
+        active: 'default',
+        onActive: '#e0873f',
+        selected: 'default',
+        onSelected: '#e0873f',
+        inverted: '#f4efe6',
+        focus: '#e0873f',
+    },
+    spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
+    components: {
+        Panel: { base: { border: 'none', padding: [1, 2] } },
+        Button: { base: { padding: [0, 2] } },
+    },
+};
 /** Rounded chrome around a persistent frame. */
 export const WORKBENCH = {
     id: 'workbench',
@@ -332,6 +386,7 @@ export const WORKBENCH = {
         // The selection is a mid grey, so the light text is what reads on it; the
         // inherited `inverted` is darker than the fill and nearly disappears.
         onSelected: '#cdd6f4',
+        onActive: '#cdd6f4',
         focus: '#89b4fa',
         scrim: '#11111b',
     },
@@ -406,46 +461,6 @@ export const MONO = {
         Button: { base: { padding: [0, 1] } },
     }
 };
-/**
- * Paper, after dark.
- *
- * The same airy, borderless, warm-accented character as `paper` - the point of
- * it is the restraint, not the brightness - with the ink and the page swapped.
- * A warm dark rather than a blue one, so the two read as one family and a
- * reader moving between them is not moving between two different products.
- */
-export const PAPER_DARK = {
-    id: 'paper-dark',
-    name: 'Paper Dark',
-    appearance: 'dark',
-    extends: 'dark',
-    border: 'none',
-    density: 'airy',
-    colors: {
-        canvas: '#1c1a17',
-        surface: '#1c1a17',
-        surfaceAlt: '#26231f',
-        border: '#3a352e',
-        borderSubtle: '#2a2621',
-        divider: 'default',
-        subtle: '#db8c4c',
-        text: '#e8e3d9',
-        muted: '#9a9287',
-        accent: '#e0873f',
-        primary: '#e0873f',
-        // The same restraint, the other way up.
-        hover: '#26231f',
-        active: '#332e27',
-        selected: '#3d362c',
-        inverted: '#f4efe6',
-        focus: '#e0873f',
-    },
-    spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
-    components: {
-        Panel: { base: { border: 'none', padding: [1, 2] } },
-        Button: { base: { padding: [0, 2] } },
-    },
-};
 export const BUILTIN_THEMES = [
     DARK, LIGHT, CONSOLE, PAPER, PAPER_LIGHT, PAPER_DARK, WORKBENCH, MONO,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/core",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Graph-mounted terminal UI runtime - store, registries, renderer, host primitives",
   "keywords": [
     "terminal",

package/src/themes/builtin.ts

@@ -25,7 +25,7 @@ import type { ThemeDefinition } from '../types/theme.js';
  * otherwise moves with it, while a theme that states `components.List.focused`
  * moves the list and leaves the table where it was.
  */
-const SELECTION_FOCUSED: Style = { bg: 'selected', fg: 'onSelected', dim: true };
+const SELECTION_FOCUSED: Style = { bg: 'selected', fg: 'onSelected', bold: true };
 const SELECTION_UNFOCUSED: Style = { bg: 'active', fg: 'onActive' };
 const SELECTION_HOVER: Style = { bg: 'hover', fg: 'onActive' };
 // The other way to draw a selection: reverse video, which is legible whatever
@@ -55,7 +55,8 @@ const STATE_STYLES: ThemeDefinition['components'] = {
   // A marked line is a selection. The caret line is that selection plus the
   // keyboard, so it takes the next fill up rather than a colour of its own.
   CodeViewer: { selected: SELECTION_UNFOCUSED, focus: SELECTION_HOVER },
-  Menu: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  Menu: { base: { fg: 'text' }, selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  TextInput: { base: { fg: 'text' } },
   // A tab is open, not selected. Dimming it when the strip does not have the
   // keyboard would say no document is open, which is a different claim and a
   // wrong one - so it has one state and no second.
@@ -71,10 +72,11 @@ const STATE_STYLES: ThemeDefinition['components'] = {
   ToolCallRow: { selected: SELECTION_FOCUSED },
   ReasoningBlock: { selected: SELECTION_FOCUSED },
   ComposerChip: { focus: SELECTION_FOCUSED },
-  // A range in a document is a selection, and it keeps the colours the text
-  // under it was already drawn in - the syntax of a selection is the syntax of
-  // the code it covers.
-  Editor: { selected: { bg: 'active' } },
+  // A range in a document is a selection, drawn in reverse video so it keeps
+  // the colours the text under it was already drawn in - the syntax of a
+  // selection is the syntax of the code it covers - and shows whether or not
+  // the theme's `active` is a fill.
+  Editor: { selected: { inverse: true } },
 };
 
 export const DARK: ThemeDefinition = {
@@ -92,9 +94,9 @@ export const DARK: ThemeDefinition = {
     borderStrong: '#484f58',
     borderSubtle: '#21262d',
     divider: '#484f58',
-    text: '#e6edf3',
+    text: '#f3e6f1',
     muted: '#8b949e',
-    subtle: '#6e7681',
+    subtle: '#546f94',
     inverted: '#0d1117',
     accent: '#58a6ff',
     primary: '#388bfd',
@@ -113,8 +115,10 @@ export const DARK: ThemeDefinition = {
     onWarning: '#0d1117',
     onDanger: '#0d1117',
     hover: '#1f2937',
-    active: '#264466',
-    selected: '#1f6feb',
+    active: 'default',
+    onActive: '#3191ff',
+    selected: 'default',
+    onSelected: '#3191ff',
     focus: '#58a6ff',
     disabled: '#484f58',
     scrim: '#010409',
@@ -161,8 +165,10 @@ export const LIGHT: ThemeDefinition = {
     onWarning: '#ffffff',
     onDanger: '#ffffff',
     hover: '#eaeef2',
-    active: '#a5bdd8',
-    selected: '#0969da',
+    active: 'default',
+    onActive: '#0969da',
+    selected: 'default',
+    onSelected: '#0969da',
     focus: '#0969da',
     disabled: '#8c959f',
     scrim: '#8c959f',
@@ -203,6 +209,9 @@ export const CONSOLE: ThemeDefinition = {
     info: '#88c0d0',
     selected: '#6ba3b2',
     active: '#1e3d47',
+    // Stated, because `dark` states its own for a selection with no fill.
+    onSelected: '#0a0e14',
+    onActive: '#d8dee9',
     onAccent: '#0a0e14',
     onPrimary: '#0a0e14',
     onInfo: '#0a0e14',
@@ -302,6 +311,9 @@ export const PAPER_LIGHT: ThemeDefinition = {
     hover: '#f7f1e7',
     active: '#efe4d2',
     selected: '#eadcc6',
+    // Stated, because `light` states its own for a selection with no fill.
+    onActive: '#2b2a27',
+    onSelected: '#2b2a27',
     inverted: '#2b2a27',
     focus: '#b4531f',
   },
@@ -312,6 +324,49 @@ export const PAPER_LIGHT: ThemeDefinition = {
   },
 };
 
+/**
+ * Paper, after dark.
+ *
+ * The same airy, borderless, warm-accented character as `paper` - the point of
+ * it is the restraint, not the brightness - with the ink and the page swapped.
+ * A warm dark rather than a blue one, so the two read as one family and a
+ * reader moving between them is not moving between two different products.
+ */
+export const PAPER_DARK: ThemeDefinition = {
+  id: 'paper-dark',
+  name: 'Paper Dark',
+  appearance: 'dark',
+  extends: 'dark',
+  border: 'none',
+  density: 'airy',
+  colors: {
+    canvas: '#1c1a17',
+    surface: '#1c1a17',
+    surfaceAlt: '#26231f',
+    border: '#3a352e',
+    borderSubtle: '#2a2621',
+    divider: 'default',
+    subtle: '#db8c4c',
+    text: '#e8e3d9',
+    muted: '#9a9287',
+    accent: '#e0873f',
+    primary: '#e0873f',
+    // The same restraint, the other way up.
+    hover: '#26231f',
+    active: 'default',
+    onActive: '#e0873f',
+    selected: 'default',
+    onSelected: '#e0873f',
+    inverted: '#f4efe6',
+    focus: '#e0873f',
+  },
+  spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
+  components: {
+    Panel: { base: { border: 'none', padding: [1, 2] } },
+    Button: { base: { padding: [0, 2] } },
+  },
+};
+
 /** Rounded chrome around a persistent frame. */
 export const WORKBENCH: ThemeDefinition = {
   id: 'workbench',
@@ -344,6 +399,7 @@ export const WORKBENCH: ThemeDefinition = {
     // The selection is a mid grey, so the light text is what reads on it; the
     // inherited `inverted` is darker than the fill and nearly disappears.
     onSelected: '#cdd6f4',
+    onActive: '#cdd6f4',
     focus: '#89b4fa',
     scrim: '#11111b',
   },
@@ -420,47 +476,6 @@ export const MONO: ThemeDefinition = {
   }
 };
 
-/**
- * Paper, after dark.
- *
- * The same airy, borderless, warm-accented character as `paper` - the point of
- * it is the restraint, not the brightness - with the ink and the page swapped.
- * A warm dark rather than a blue one, so the two read as one family and a
- * reader moving between them is not moving between two different products.
- */
-export const PAPER_DARK: ThemeDefinition = {
-  id: 'paper-dark',
-  name: 'Paper Dark',
-  appearance: 'dark',
-  extends: 'dark',
-  border: 'none',
-  density: 'airy',
-  colors: {
-    canvas: '#1c1a17',
-    surface: '#1c1a17',
-    surfaceAlt: '#26231f',
-    border: '#3a352e',
-    borderSubtle: '#2a2621',
-    divider: 'default',
-    subtle: '#db8c4c',
-    text: '#e8e3d9',
-    muted: '#9a9287',
-    accent: '#e0873f',
-    primary: '#e0873f',
-    // The same restraint, the other way up.
-    hover: '#26231f',
-    active: '#332e27',
-    selected: '#3d362c',
-    inverted: '#f4efe6',
-    focus: '#e0873f',
-  },
-  spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
-  components: {
-    Panel: { base: { border: 'none', padding: [1, 2] } },
-    Button: { base: { padding: [0, 2] } },
-  },
-};
-
 export const BUILTIN_THEMES: ThemeDefinition[] = [
   DARK, LIGHT, CONSOLE, PAPER, PAPER_LIGHT, PAPER_DARK, WORKBENCH, MONO,
 ];