Design system 1/3: blockr.ui's tokens, dark mode, card layout

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: blockr.dock
 Title: A Docking Layout Manager for 'blockr'
-Version: 0.1.3.9000
+Version: 0.1.3.9001
 Authors@R:
     c(person(given = "Nicolas",
              family = "Bennett",

NEWS.md

@@ -1,5 +1,23 @@
 # blockr.dock (development version)
 
+* The dock reads its colours, radii and surfaces from blockr.ui's design
+  tokens, so a board follows blockr.ui's dark scheme: the dockview frame and
+  tabs, block headers, sidebars, the block browser and the block menu. Font
+  sizes, weights and families read the type tokens.
+  The options of `dock_board_options()` now include the light/dark switch,
+  light by default, and core's thematic switch, off by default, which lets
+  plots take the board's colours.
+
+* The block header drops its subtitle: a 42px mark in the block's category
+  colour carries the status dot, and the block type, with the package as a
+  badge, is the mark's tooltip. The controls sit just under the header with
+  no rules around them; one rule separates them from the preview while both
+  are open.
+
+* The dock's chrome (block header, navbar, view menu, sidebars) shows
+  blockr.ui's light-card tooltip (`Blockr.tooltip`) in place of the browser's
+  native one. The "…" menu and the board options gear have one.
+
 * A parked block's status badge is drawn from the status blockr.core now
   reports for it in place of `dormant`: the outcome of the block's last
   check, `stale` once that is out of date, or `unevaluated` without one.

R/action-ui.R

@@ -3,7 +3,7 @@ css_modal <- function() {
     HTML(
       "#shiny-modal .modal-header {
         padding: 12px 20px;
-        border-bottom: 1px solid #e2e8f0;
+        border-bottom: 1px solid var(--blockr-color-border-default);
       }
       #shiny-modal .modal-title {
         font-size: 1.125rem;
@@ -26,13 +26,13 @@ css_modal <- function() {
       }
       #shiny-modal .modal-body .control-label {
         font-size: 0.875rem;
-        color: #6c757d;
+        color: var(--blockr-color-text-muted);
         margin-bottom: 4px;
         font-weight: normal;
       }
       #shiny-modal .modal-footer {
         padding: 12px 20px;
-        border-top: 1px solid #e2e8f0;
+        border-top: 1px solid var(--blockr-color-border-default);
         gap: 8px;
       }
       #shiny-modal .modal-footer .btn {
@@ -67,7 +67,7 @@ css_modal_advanced <- function(id) {
             display: flex;
             align-items: center;
             gap: 6px;
-            color: #6c757d;
+            color: var(--blockr-color-text-muted);
             font-size: 0.875rem;
           }
           .modal-chevron {
@@ -127,12 +127,12 @@ css_block_selectize <- function() {
       .block-name {
         font-weight: 600;
         font-size: 15px;
-        color: #212529;
+        color: var(--blockr-color-text-default);
         flex: 1;
       }
       .block-desc {
         font-size: 13px;
-        color: #6c757d;
+        color: var(--blockr-color-text-muted);
         line-height: 1.4;
       }
       .badge-two-tone {
@@ -147,18 +147,18 @@ css_block_selectize <- function() {
         flex-shrink: 0;
       }
       .selectize-dropdown .block-option {
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid var(--blockr-color-border-default);
       }
       .selectize-dropdown .block-option:last-child {
         border-bottom: none;
       }
       .selectize-dropdown .block-option:hover,
       .selectize-dropdown .block-option.active {
-        background-color: #e9ecef;
+        background-color: var(--blockr-color-bg-hover);
       }
       .selectize-input .remove {
         text-decoration: none !important;
-        color: #6c757d !important;
+        color: var(--blockr-color-text-muted) !important;
         font-weight: normal !important;
         border: none !important;
         margin-left: 8px !important;
@@ -167,8 +167,8 @@ css_block_selectize <- function() {
         transition: background-color 0.2s ease, color 0.2s ease;
       }
       .selectize-input .remove:hover {
-        background-color: rgba(108, 117, 125, 0.1) !important;
-        color: #495057 !important;
+        background-color: var(--blockr-color-bg-hover) !important;
+        color: var(--blockr-color-text-default) !important;
       }"
     )
   )
@@ -243,8 +243,10 @@ js_blk_selectize_render <- function() {
 
               var containerStyle =
                 'display: inline-flex; align-items: center; gap: 8px; ' +
-                'padding: 4px 8px; background-color: #f8f9fa; ' +
-                'border-radius: 6px; border: 1px solid #e9ecef;';
+                'padding: 4px 8px; ' +
+                'background-color: var(--blockr-color-bg-subtle); ' +
+                'border-radius: 6px; ' +
+                'border: 1px solid var(--blockr-color-border-default);';
               var iconWrapperStyle =
                 'background-color: ' + bgColor + '; width: 24px; ' +
                 'height: 24px; border-radius: 4px; display: flex; ' +

R/block-meta.R

@@ -12,9 +12,8 @@
 #'   into square-shaped icons.
 #' - `block_status_badge()`: Derives a block's status badge from its eval
 #'   status and error count -- the single derivation the dock card icon and
-#'   the blockr.dag node badge share, so they always render the same colour
-#'   and styling. Returns a styling list (draw the badge) or `NULL` (no
-#'   badge).
+#'   the blockr.dag node badge share, so both show the same status. Returns a
+#'   styling list (draw the badge) or `NULL` (no badge).
 #'
 #' @param blocks Blocks passed as `blocks` or `block` object
 #'
@@ -29,9 +28,12 @@
 #'
 #' @return Metadata is returned from `blks_metadata()` as a `data.frame` with
 #' each row corresponding to a block. Both `blk_color()` and
-#' `blk_icon_data_uri()` return character vectors. `block_status_badge()`
-#' returns a list with `color`, `label`, `size`, `ring` and `ring_color` (the
-#' badge to draw), or `NULL` for a status with no badge.
+#' `blk_icon_data_uri()` return character vectors. The badge
+#' `block_status_badge()` draws is a list with its `label`; its fill as the
+#' blockr.ui `token` and that token's light value `color`; `hollow` and
+#' `outline`, for a badge drawn as an `outline`-wide ring in its fill; and the
+#' dot's `size` and the width of the `ring` around it, in `ring_token` with the
+#' light value `ring_color`. It is `NULL` for a status with no badge.
 #'
 #' @rdname meta
 #' @export

R/board-ui.R

@@ -23,9 +23,12 @@ board_ui.dock_board <- function(
     # Ahead of blockr_dock_dep(), so the shared tokens and theme land first
     # and this package's own rules override them by source order.
     blockr.ui::theme_dep(),
+    blockr.ui::controls_dep(),
     show_block_dep(),
     attr_output_dep(),
+    block_rename_dep(),
     blockr_dock_dep(),
+    tooltip_dep(),
     viewport_probe_ui(id),
     rail_dep(),
     off_canvas(
@@ -97,6 +100,7 @@ board_ui.dock_board <- function(
           class = "btn action-button blockr-navbar-icon-btn",
           `data-blockr-sidebar-target` = NS(id, "settings_sidebar"),
           `aria-label` = "Board options",
+          title = "Board options",
           bsicons::bs_icon("gear")
         )
       )
@@ -323,3 +327,14 @@ blockr_dock_dep <- function() {
     stylesheet = "blockr-dock.css"
   )
 }
+
+# The dock chrome's tooltips go to Blockr.tooltip, blockr.ui's light card,
+# which `blockr.ui::controls_dep()` brings (see block-tooltips.js).
+tooltip_dep <- function() {
+  htmltools::htmlDependency(
+    "blockr-dock-tooltips",
+    pkg_version(),
+    src = pkg_file("assets", "js"),
+    script = "block-tooltips.js"
+  )
+}

R/dock-board.R

@@ -40,7 +40,10 @@
 #' `is_dock_board()`, which returns a boolean. The `dock_extensions()` and
 #' `dock_extensions<-()` accessors return / set the board's `dock_extension`
 #' objects. A character vector of IDs is returned by `dock_ext_ids()` and
-#' `dock_board_options()` returns a `board_options` object.
+#' `dock_board_options()` returns a `board_options` object: the board name, a
+#' thematic switch, off unless the `thematic` blockr option says otherwise, so
+#' that plots can take the board's colours, and a light/dark switch, light
+#' unless the `dark_mode` blockr option says otherwise.
 #'
 #' @rdname dock
 #' @export
@@ -226,7 +229,9 @@ extension_ids <- function(x, class = NULL) {
 #' @export
 dock_board_options <- function() {
   new_board_options(
-    new_board_name_option()
+    new_board_name_option(),
+    new_thematic_option(),
+    new_dark_mode_option(value = blockr_option("dark_mode", "light"))
   )
 }