@nkootstra/block-kit 0.1.0 → 0.1.1

package/dist/styles.css

@@ -1,6 +1,8 @@
 /* Entry stylesheet. The build inlines these imports into dist/styles.css. */
 /* Values measured from Slack's Block Kit Builder (light theme, desktop). */
-:root {
+:root,
+[data-theme="light"] {
+  --sbk-hover-actions-shadow: 0 0 0 1px rgba(29, 28, 29, 0.13), 0 1px 3px 0 #00000014;
   --sbk-font: "Slack-Lato", Lato, appleLogo, sans-serif;
   --sbk-font-mono:
     "Slack-Roboto-Mono", "Roboto Mono", Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -895,9 +897,11 @@
 
 /* Dark theme: Slack's `.sk-client-theme--dark` design tokens (base-pry #1a1d21, content-pry
    #f8f8f8, content-hgl-1 #2ba5ce, ...), with hover/press overlays blended with `lighten` as Slack
-   does. Applies under `prefers-color-scheme: dark` unless an ancestor sets `data-theme="light"`,
-   or always with `data-theme="dark"` on the root. Component tokens are remapped here too so the
-   whole dark palette lives in one place. */
+   does. Applies under `prefers-color-scheme: dark` unless the root sets `data-theme="light"`, and
+   always inside an element with `data-theme="dark"` (BlockKitProvider's `theme` prop sets it on its
+   wrapper). Inside `data-theme="light"` the light tokens apply again (base.css). Component tokens
+   are remapped here too so the whole dark palette lives in one place. `:root[data-theme="dark"]`
+   outranks the `:root` light tokens of the block stylesheets loaded after this one. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --sbk-text: #f8f8f8;
@@ -969,22 +973,29 @@
     --sbk-data-table-sep: #797c814d;
     --sbk-data-table-active: #3daa7c;
     --sbk-plan-text: #9a9b9e;
-    --sbk-plan-complete: #3daa7c;
-    --sbk-plan-in-progress: #2ba5ce;
-    --sbk-plan-pending: #9a9b9e;
-    --sbk-plan-sep: #797c814d;
     --sbk-task-card-text: #9a9b9e;
-    --sbk-task-card-in-progress: #2ba5ce;
     --sbk-alert-default-bg: #f8f8f81a;
     --sbk-alert-default-icon: #b9babd;
     --sbk-alert-info-icon: #2ba5ce;
     --sbk-alert-warning-icon: #e8a723;
     --sbk-alert-error-icon: #d94c75;
     --sbk-alert-success-icon: #3daa7c;
+    --sbk-callout-border: #797c814d;
+    --sbk-callout-green-bg: #203430;
+    --sbk-callout-blue-bg: #1d333d;
+    --sbk-callout-red-bg: #39252e;
+    --sbk-callout-yellow-bg: #3b3321;
+    --sbk-callout-purple-bg: #312c3f;
+    --sbk-callout-gray-bg: #272a2e;
+    --sbk-chart-area-1: #583422;
+    --sbk-chart-area-2: #1c4539;
+    --sbk-chart-area-3: #4d3756;
+    --sbk-chart-area-4: #164356;
   }
 }
 
-:root[data-theme="dark"] {
+:root[data-theme="dark"],
+[data-theme="dark"] {
   --sbk-text: #f8f8f8;
   --sbk-link: #2ba5ce;
   --sbk-code-text: #de678a;
@@ -1054,18 +1065,24 @@
   --sbk-data-table-sep: #797c814d;
   --sbk-data-table-active: #3daa7c;
   --sbk-plan-text: #9a9b9e;
-  --sbk-plan-complete: #3daa7c;
-  --sbk-plan-in-progress: #2ba5ce;
-  --sbk-plan-pending: #9a9b9e;
-  --sbk-plan-sep: #797c814d;
   --sbk-task-card-text: #9a9b9e;
-  --sbk-task-card-in-progress: #2ba5ce;
   --sbk-alert-default-bg: #f8f8f81a;
   --sbk-alert-default-icon: #b9babd;
   --sbk-alert-info-icon: #2ba5ce;
   --sbk-alert-warning-icon: #e8a723;
   --sbk-alert-error-icon: #d94c75;
   --sbk-alert-success-icon: #3daa7c;
+  --sbk-callout-border: #797c814d;
+  --sbk-callout-green-bg: #203430;
+  --sbk-callout-blue-bg: #1d333d;
+  --sbk-callout-red-bg: #39252e;
+  --sbk-callout-yellow-bg: #3b3321;
+  --sbk-callout-purple-bg: #312c3f;
+  --sbk-callout-gray-bg: #272a2e;
+  --sbk-chart-area-1: #583422;
+  --sbk-chart-area-2: #1c4539;
+  --sbk-chart-area-3: #4d3756;
+  --sbk-chart-area-4: #164356;
 }
 
 /* A clickable user mention and its profile card popover (Slack's `p-member_profile_card`): a
@@ -1238,11 +1255,7 @@
   padding: 4px;
   background: var(--sbk-menu-bg);
   border-radius: 12px;
-  box-shadow: var(
-    --sbk-hover-actions-shadow,
-    0 0 0 1px rgba(29, 28, 29, 0.13),
-    0 1px 3px 0 #00000014
-  );
+  box-shadow: var(--sbk-hover-actions-shadow);
   opacity: 0;
   pointer-events: none;
 }
@@ -1320,7 +1333,8 @@ a.sbk-hover-actions__button {
 
 /* Measured from the Builder's modal preview (`c-alert--boxed`). Dark values aren't measured; they
    reuse the dark palette's matching hues. */
-:root {
+:root,
+[data-theme="light"] {
   --sbk-alert-default-bg: rgb(234, 234, 234);
   --sbk-alert-default-icon: rgb(94, 93, 96);
   --sbk-alert-info-bg: rgba(54, 197, 240, 0.13);
@@ -1388,9 +1402,23 @@ a.sbk-hover-actions__button {
   color: var(--sbk-alert-success-icon);
 }
 
+/* Light values measured from Builder references (green, blue); the other light values are
+   extrapolated. Dark values (Message.css) aren't measured: each is its hue from the dark palette
+   at 16% over the dark background (gray: 6% white), like the alert colours. */
+:root,
+[data-theme="light"] {
+  --sbk-callout-border: rgba(94, 93, 96, 0.13);
+  --sbk-callout-green-bg: #f4ffdb;
+  --sbk-callout-blue-bg: #e3f8ff;
+  --sbk-callout-red-bg: #ffeceb;
+  --sbk-callout-yellow-bg: #fff8db;
+  --sbk-callout-purple-bg: #f3ecff;
+  --sbk-callout-gray-bg: #f4f4f4;
+}
+
 .sbk-callout {
   padding: 12px;
-  border: 1px solid rgba(94, 93, 96, 0.13);
+  border: 1px solid var(--sbk-callout-border);
   border-radius: 12px;
   overflow: hidden;
 }
@@ -1949,7 +1977,8 @@ a.sbk-hover-actions__button {
 }
 
 /* Values measured from Slack's Block Kit Builder for the `data_table` block. */
-:root {
+:root,
+[data-theme="light"] {
   --sbk-data-table-bg: rgba(29, 28, 29, 0.06);
   --sbk-data-table-sep: rgba(94, 93, 96, 0.13);
   --sbk-data-table-active: #007a5a;
@@ -2312,7 +2341,15 @@ a.sbk-hover-actions__button {
   padding: 1px 3px;
 }
 
-:root {
+:root,
+[data-theme="light"] {
+  /* Area fills: measured for the first two series colours, tinted 88% toward white for the
+     others. Dark values (Message.css) aren't measured: the series colour at 30% over the dark
+     background. */
+  --sbk-chart-area-1: rgb(255, 237, 229);
+  --sbk-chart-area-2: rgb(227, 255, 243);
+  --sbk-chart-area-3: rgb(248, 238, 250);
+  --sbk-chart-area-4: rgb(226, 243, 250);
   --sbk-dataviz-border: rgba(94, 93, 96, 0.13);
   --sbk-dataviz-tick: #5e5d60;
 }
@@ -2735,7 +2772,8 @@ a.sbk-hover-actions__button {
   border-bottom-right-radius: 4px;
 }
 
-:root {
+:root,
+[data-theme="light"] {
   --sbk-plan-text: rgb(94, 93, 96);
 }
 
@@ -3163,7 +3201,8 @@ a.sbk-hover-actions__button {
 }
 
 /* Values measured from Slack's Block Kit Builder for the `table` block. */
-:root {
+:root,
+[data-theme="light"] {
   --sbk-table-border: rgba(94, 93, 96, 0.13);
 }
 
@@ -3230,7 +3269,8 @@ a.sbk-hover-actions__button {
   border-bottom-right-radius: 4px;
 }
 
-:root {
+:root,
+[data-theme="light"] {
   --sbk-task-card-text: rgb(94, 93, 96);
 }
 

package/dist/transport.d.ts

@@ -1,5 +1,5 @@
 
-import { N as BlockKitProviderProps, ht as ViewResponseAction } from "./index-BV_5_J_Q.js";
+import { N as BlockKitProviderProps, ht as ViewResponseAction } from "./index-FPjJcmn3.js";
 //#region src/interactivity/transport.d.ts
 export interface InteractionResult {
   ok: boolean;

package/dist/web-api.d.ts

@@ -1,5 +1,5 @@
 
-import { z as Resolvers } from "./index-BV_5_J_Q.js";
+import { z as Resolvers } from "./index-FPjJcmn3.js";
 import { WebClient } from "@slack/web-api";
 //#region src/web-api/resolvers.d.ts
 interface WebApiResolversOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkootstra/block-kit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Render Slack Block Kit JSON in React, pixel-for-pixel the way Slack does.",
   "keywords": [
     "block-kit",
@@ -42,8 +42,7 @@
     "build": "tsdown",
     "dev": "tsdown --watch",
     "test": "vitest run",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "tsdown"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@slack/types": "3.1.0",