@conduction/nextcloud-vue 2.98.0 → 2.100.0

package/src/components/CnWorkingCalendarWidget/index.js

@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnWorkingCalendarWidget — self-registers the `working-calendar` widget type
+ * (one month of a working calendar kept as an OpenRegister object, with its
+ * closed dates and Add day) into the shared dashboardWidgetRegistry at module
+ * load. Renderer only: the calendar object is named in the manifest.
+ */
+
+import CnWorkingCalendarWidget from './CnWorkingCalendarWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('working-calendar', {
+	renderer: CnWorkingCalendarWidget,
+	form: null,
+	defaultContent: {
+		calendar: { register: 'flow-timers', schema: 'working-calendar', filter: {} },
+	},
+	displayName: 'Working calendar',
+	icon: 'CalendarMonthOutline',
+	surfaces: ['app-dashboard', 'detail-page'],
+})
+
+export { CnWorkingCalendarWidget }
+export default CnWorkingCalendarWidget

package/src/components/index.js

@@ -13,6 +13,8 @@ export { CnStatusBadge } from './CnStatusBadge/index.js'
 export { CnPagination } from './CnPagination/index.js'
 export { CnSettingsCard } from './CnSettingsCard/index.js'
 export { CnSettingsSection } from './CnSettingsSection/index.js'
+export { CnSettingsField } from './CnSettingsField/index.js'
+export { CnSettingsFieldsSection } from './CnSettingsFieldsSection/index.js'
 export { CnLeafDependencySettings } from './CnLeafDependencySettings/index.js'
 export { CnStatsBlock } from './CnStatsBlock/index.js'
 export { CnStructuredDocReview } from './CnStructuredDocReview/index.js'
@@ -223,6 +225,7 @@ export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
 export { CnDeviceFramesWidget } from './CnDeviceFramesWidget/index.js'
 export { CnChecklistRunWidget } from './CnChecklistRunWidget/index.js'
+export { CnWorkingCalendarWidget } from './CnWorkingCalendarWidget/index.js'
 export { CnPartyActionsWidget } from './CnPartyActionsWidget/index.js'
 export { CnFieldListWidget } from './CnFieldListWidget/index.js'
 export { CnSettingsFormWidget } from './CnSettingsFormWidget/index.js'

package/src/composables/useFlowStore.js

@@ -23,6 +23,7 @@
 //      vocabulary.
 
 import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
 import { layoutFlowNodes, needsFullLayout, placeLooseNodes } from './flowGraphLayout.js'
@@ -968,7 +969,7 @@ export const useFlowStore = defineStore('cnFlow', {
 				// A new flow is runnable on demand until its author picks a real
 				// trigger, so the flow-level trigger and the seeded start node
 				// say the same thing.
-				this.flow = { ...emptyFlow(), name: 'New flow', app: app || 'openregister', trigger: 'manual' }
+				this.flow = { ...emptyFlow(), name: t('nextcloud-vue', 'New flow'), app: app || 'openregister', trigger: 'manual' }
 				this.seedStartNode()
 				this.dirty = false
 				return

package/src/css/badge.css

@@ -31,84 +31,100 @@
 
 /* Color variants */
 .cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--primary {
+	--cn-status-badge-ink: var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--success {
+	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
 	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success-text, var(--color-success));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
 	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
+	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
 	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error-text, var(--color-error));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
+	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
 	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info-text, var(--color-info, #0082c9));
+	color: var(--cn-status-badge-ink);
 }
 
 /* Work in progress ("In behandeling"), a board tone. */
 .cn-status-badge--purple {
+	--cn-status-badge-ink: var(--cn-status-purple-text);
 	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Handed on ("Omgezet naar een zaak"), a board tone. */
 .cn-status-badge--teal {
+	--cn-status-badge-ink: var(--cn-status-teal-text);
 	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--primary {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-primary-element);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--success {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-success);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-primary-text);
 	background-color: var(--color-warning);
-	color: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--error {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-error);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--info {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-info, #0082c9);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--purple {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-purple-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--teal {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-teal-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }

package/src/css/detail-page.css

@@ -525,3 +525,18 @@
 	align-items: center;
 	gap: 4px;
 }
+
+/* The tag after an admin-only entry in a board detail page's Actions menu
+   ("beheerder", DqZaakMeer): 12px muted text at the end of the row. The menu
+   opens outside the page, so the rule keys on the attribute CnDetailPage sets
+   only in the board look. */
+.action-button[data-cn-admin-tag]::after,
+.action-link[data-cn-admin-tag]::after {
+	content: attr(data-cn-admin-tag);
+	margin-inline-start: auto;
+	padding-inline: 12px 4px;
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 400;
+	white-space: nowrap;
+}

package/src/css/dialog.css

@@ -173,6 +173,54 @@
 	color: var(--color-main-text);
 }
 
+/* A Nextcloud text field or text area in a board dialog is the board's field:
+   its label above the control at 14px/600, the control 40px with a 1px grey
+   border and radius 8 (PlanItemDialog, DqWerkvoorraad). NcInputField draws
+   its border as a 65%-transparent shadow, which on the white dialog read as
+   an empty band, and floats its label inside the border. A field with
+   `labelOutside` keeps the app's own label and takes the same control. */
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label),
+.cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+/* The doubled class outranks NcInputField's raised-label rule (focused or
+   filled), which would pin the label's top as well and squash it. */
+.cn-dialog-board .dialog__content .input-field__input + .input-field__label.input-field__label,
+.cn-dialog-board .dialog__content .textarea__input + .textarea__label.textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: var(--cn-field-label-size, 14px);
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-dialog-board .dialog__content .input-field__main-wrapper {
+	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
+}
+
+.cn-dialog-board .dialog__content .input-field__input,
+.cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
+.cn-dialog-board .dialog__content .textarea__input,
+.cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border-radius: 8px;
+	box-shadow: 0 0 0 1px var(--color-border-dark);
+	font-size: var(--cn-field-text-size, 15px);
+}
+
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
+	opacity: 1 !important;
+}
+
 /* Type-to-confirm: a labelled 40px field with a monospace value and a hint. */
 .cn-dialog__confirm-field {
 	display: flex;

package/src/css/look-board-detail.css

@@ -152,6 +152,32 @@
 	margin-top: 16px;
 }
 
+/* ---- The stages bars (CnStagesWidget `variant: "bars"`) ---------------- */
+/* DqZaak's "Voortgang": the bars sit flush with the content edge (the
+   widget's 4px pad is room for the 32px circles, which the bars variant does
+   not draw), the label 8px under its bar and the date 8px under the label at
+   the normal line height, open steps muted and the done and current ones in
+   the main text. Each hands its ink to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads instead. */
+.cn-look-board .cn-stages-widget:has(> .cn-stages-widget__bars):not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--done .cn-stages-widget__bar-label:not(.cn-look-nextcloud *),
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--current .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-date:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
 /* ---- The body and the side column ------------------------------------- */
 
 .cn-look-board.cn-detail-page--with-side {
@@ -185,6 +211,7 @@
    The open tab overlaps that top border by 1px (the nav's -1px margin) and
    paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
+	align-items: flex-end;
 	border-bottom: none;
 	gap: 4px;
 	position: relative;
@@ -227,6 +254,9 @@
 	row-gap: 4px;
 }
 
+/* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` `margin: 3px 3px 3px 0`, which put the strip
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -234,6 +264,7 @@
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
 	font-weight: 400;
+	margin: 0;
 	min-height: 34px;
 	padding: 8px 12px;
 }
@@ -267,9 +298,12 @@
 	padding: 0 6px;
 }
 
-/* The Actions button at the end of the strip, level with the tabs. */
+/* The Actions button at the end of the strip: at the top, 8px in from the
+   end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
+   lower than the button (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
+	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
@@ -327,21 +361,26 @@
 
 /* ---- Body cards and side cards ----------------------------------------- */
 
+/* A CnDetailCard takes the board card wherever it sits, not only on a detail
+   page: a dashboard or a custom page that mounts one drew the Nextcloud card
+   (a 12px 16px header over a rule). The doubled class keeps the specificity
+   the page-scoped rule had. */
+
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
-.cn-look-board .cn-detail-page .cn-detail-card {
+.cn-look-board .cn-detail-card.cn-detail-card:not(.cn-detail-card--chromeless) {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius);
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__header,
-.cn-look-board .cn-detail-page .cn-detail-card__header {
+.cn-look-board .cn-detail-card .cn-detail-card__header {
 	border-bottom: none;
 	padding: 20px 22px 0;
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__title,
-.cn-look-board .cn-detail-page .cn-detail-card__title {
+.cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
 	line-height: 1.3;
@@ -351,7 +390,7 @@
 	padding: 12px 22px 20px;
 }
 
-.cn-look-board .cn-detail-page .cn-detail-card__content {
+.cn-look-board .cn-detail-card .cn-detail-card__content {
 	padding: 12px 22px 20px;
 }
 
@@ -398,10 +437,12 @@
 	font-weight: 500;
 }
 
-/* Side cards: the heading is a 15px muted label, not a title. */
+/* Side cards: the heading is a 15px muted label, not a title. The tone
+   carries `!important` against a theme that colours every h3 that way
+   (thematiq's heading colour). */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__title,
 .cn-look-board .cn-detail-page__side .cn-detail-card__title {
-	color: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast) !important;
 	font-size: var(--cn-board-side-heading-size);
 	font-weight: 600;
 }
@@ -456,17 +497,23 @@
 
 /* ---- The next-step card ------------------------------------------------- */
 
+/* The board sets the card at the browser's normal line height: a step row is
+   the 20px marker, 28px apart (DqZaak "Wat nu?"). */
 .cn-look-board .cn-next-step-card--board {
 	border-radius: 12px;
 	gap: 16px 32px;
+	line-height: normal;
 	padding: 20px 24px 20px 28px;
 }
 
+/* The kicker keeps its tone under a theme that colours every h3 with
+   `!important` (thematiq's heading colour); only `!important` beats it. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__title.cn-next-step-card__title {
-	color: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light-text) !important;
 	font-size: 13px !important;
 	font-weight: 700;
 	letter-spacing: 0.06em;
+	line-height: normal;
 	text-transform: uppercase;
 }
 
@@ -497,11 +544,36 @@
 	padding: 0 20px;
 }
 
+/* The label alone sets the width (DqZaak: 198px for "Verder met beoordelen"):
+   NcButton pads its text 4px a side inside the button's own padding, from a
+   rule that reaches it through `:has()`, hence the doubled class. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__side .button-vue .button-vue__text.button-vue__text {
+	margin-inline: 0;
+	padding-inline: 0;
+}
+
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
 
+/* Done and open steps are muted, the current one in the main text. Each hands
+   its ink to --nldesign-color-on-surface, which a theme that forces the body
+   ink onto every li and span (thematiq) reads instead. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__hint,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current .cn-next-step-card__hint {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
 /* ---- History: the activity tab ------------------------------------------ */
 
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__board-head {

package/src/css/look-board-index.css

@@ -184,10 +184,15 @@
 	outline-offset: 2px;
 }
 
+/* The selected chip is light on dark, so it hands its ink to
+   --nldesign-color-on-surface: thematiq forces the body ink onto every span
+   with `!important` and reads it from that property, which left the label
+   dark on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
+	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
@@ -208,8 +213,12 @@
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
+/* On the selected chip the count is a lighter bubble on the dark chip
+   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
+   text, the chip's own colour, which hid the bubble. */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	background: var(--cn-board-text-soft);
+	--nldesign-color-on-surface: var(--color-primary-element-text);
+	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
 	color: var(--color-primary-element-text);
 }
 
@@ -481,12 +490,16 @@
 	border-radius: 0;
 }
 
-/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
+/* The header row is near-white on the boards (#fafbfc), not the hover grey,
+   its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	padding: 12px 16px;
 	border-bottom: 0;
 	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	font-weight: 600;
 }
 
@@ -497,6 +510,20 @@
 	font-size: 14px;
 }
 
+/* The board sets its table at the normal line height: a row with a title and
+   a secondary line is 66px and the header row 50px (DqZaken). Nextcloud's 1.5
+   made them 71px and 67px, and the header's sort button kept the 34px
+   clickable area. */
+.cn-look-board .cn-table-container--board .cn-data-table {
+	line-height: normal;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-row {
 	border-bottom: 0;
 }
@@ -552,7 +579,9 @@
 	margin-inline-start: 4px;
 }
 
-/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+/* The selection column: 18px checkboxes, 28px of content between 16px of
+   padding either side, 60px in all (DqZaken and 130 other boards; the title
+   column starts 77px in).
    The box model is set with `!important` and the widths include the padding:
    Nextcloud's server.css sets `box-sizing: border-box` on everything under
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
@@ -560,9 +589,9 @@
    header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
-	width: 44px;
-	min-width: 44px;
-	padding-inline: 16px 0;
+	width: 60px;
+	min-width: 60px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
@@ -570,6 +599,16 @@
 	--icon-size: 18px;
 }
 
+/* The checkbox is the 18px box alone, as the board draws it: NcCheckboxRadioSwitch
+   wraps it in a 34px clickable area with 4px 7px of padding, a 42px block that
+   set every row's height (71px where DqZaken's rows are 66). The cell around it
+   stays the click target's room: 44px wide, a full row high. */
+.cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch .checkbox-radio-switch__content {
+	min-height: 0;
+	height: auto;
+	padding: 0;
+}
+
 /* The title column: a 15px weight 600 link, the secondary line under it. */
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title {
 	color: var(--color-main-text);
@@ -580,6 +619,7 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -621,10 +661,14 @@
 	gap: 10px;
 }
 
+/* The initials sit on the light primary tint in the primary ink, the board's
+   person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
 	font-size: 12px;
+	font-weight: 700;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {