@studiolxd/brand 49.11.0 → 49.12.0

package/src/tokens/scss/molecules/_timeline.scss

@@ -0,0 +1,22 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-timeline-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del historial
+$lxd-timeline-gap: 1.5rem; // Separación vertical entre dos hitos
+$lxd-timeline-column-gap: 0.75rem; // Separación entre la marca y el cuerpo del hito
+$lxd-timeline-rail-width: 1px; // Grosor del carril que une las marcas
+$lxd-timeline-rail-color: #d0d0d0; // Color del carril — la línea del sistema, no un borde que destaque
+$lxd-timeline-rail-gap: 0.25rem; // Aire entre la marca y el carril, arriba y abajo
+$lxd-timeline-title-font-size: 1rem; // Tamaño del título del hito — texto corriente
+$lxd-timeline-title-font-weight: 500; // Peso del título del hito
+$lxd-timeline-title-line-height: 1.3; // Interlineado del título
+$lxd-timeline-title-color: #111e30; // Color del título del hito
+$lxd-timeline-meta-font-size: 0.875rem; // Tamaño de la fecha y el autor — letra menor
+$lxd-timeline-meta-color: #4a4a4a; // Color de la fecha y el autor
+$lxd-timeline-meta-gap: 0.5rem; // Separación entre fecha y autor
+$lxd-timeline-meta-separator-color: #d0d0d0; // Color del punto que separa fecha y autor
+$lxd-timeline-note-font-size: 1rem; // Tamaño de la nota — texto corriente
+$lxd-timeline-note-line-height: 1.5; // Interlineado de la nota
+$lxd-timeline-note-color: #111e30; // Color de la nota
+$lxd-timeline-body-gap: 0.25rem; // Separación entre título, metadatos y nota
+$lxd-timeline-actions-margin-block-start: 0.5rem; // Aire sobre las acciones del hito

package/src/tokens/surface-invert.css

@@ -495,6 +495,11 @@ html.dark .surface-invert {
   --checkbox-field-label-color: var(--text-color);
   --checkbox-field-error-color: var(--form-error-color);
   --checkbox-field-helper-color: var(--form-helper-color);
+  --clock-widget-date-color: var(--color-text-muted-on-light);
+  --clock-widget-status-color: var(--color-text-muted-on-light);
+  --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
+  --clock-widget-elapsed-color: var(--color-text-on-light);
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);
@@ -538,6 +543,27 @@ html.dark .surface-invert {
   --field-row-empty-color: var(--color-text-muted-on-light);
   --file-upload-field-error-color: var(--form-error-color);
   --file-upload-field-helper-color: var(--form-helper-color);
+  --heatmap-border-color: var(--color-primary);
+  --heatmap-row-header-color: var(--color-text-on-light);
+  --heatmap-row-header-bg: var(--color-background-light);
+  --heatmap-column-header-color: var(--color-text-muted-on-light);
+  --heatmap-column-header-bg: var(--color-background-light);
+  --heatmap-group-header-color: var(--color-text-muted-on-light);
+  --heatmap-empty-bg: var(--color-surface-secondary-on-light);
+  --heatmap-empty-pattern-color: var(--color-border-default-on-light);
+  --heatmap-legend-color: var(--color-text-muted-on-light);
+  --heatmap-step-1-bg: var(--color-chart-sequential-100);
+  --heatmap-step-1-color: var(--color-text-on-light);
+  --heatmap-step-2-bg: var(--color-chart-sequential-200);
+  --heatmap-step-2-color: var(--color-text-on-light);
+  --heatmap-step-3-bg: var(--color-chart-sequential-300);
+  --heatmap-step-3-color: var(--color-text-on-light);
+  --heatmap-step-4-bg: var(--color-chart-sequential-500);
+  --heatmap-step-4-color: var(--color-text-on-light);
+  --heatmap-step-5-bg: var(--color-chart-sequential-600);
+  --heatmap-step-5-color: var(--color-text-on-dark);
+  --heatmap-step-6-bg: var(--color-chart-sequential-700);
+  --heatmap-step-6-color: var(--color-text-on-dark);
   --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
   --input-field-search-icon-color: var(--color-primary);
   --input-field-search-clear-color: var(--color-primary);
@@ -589,6 +615,7 @@ html.dark .surface-invert {
   --radio-field-helper-color: var(--form-helper-color);
   --recovery-codes-color: var(--color-text-on-light);
   --recovery-codes-index-color: var(--color-text-muted-on-light);
+  --recurrence-field-legend-color: var(--color-text-on-light);
   --search-form-submit-color: var(--color-primary);
   --search-form-submit-hover-color: var(--color-primary);
   --search-form-submit-disabled-color: var(--input-disabled-color);
@@ -630,6 +657,11 @@ html.dark .surface-invert {
   --theme-switcher-focus-ring-color: var(--color-primary);
   --time-field-error-color: var(--form-error-color);
   --time-field-helper-color: var(--form-helper-color);
+  --timeline-rail-color: var(--color-border-default-on-light);
+  --timeline-title-color: var(--color-text-on-light);
+  --timeline-meta-color: var(--color-text-muted-on-light);
+  --timeline-meta-separator-color: var(--color-border-default-on-light);
+  --timeline-note-color: var(--color-text-on-light);
   --tree-view-color: var(--sidebar-nav-item-color);
   --tree-view-selected-color: var(--sidebar-nav-item-color);
   --tree-view-chevron-color: var(--color-text-muted-on-light);
@@ -684,4 +716,28 @@ html.dark .surface-invert {
   --chart-crosshair-color: var(--color-icon-secondary-on-light);
   --chat-shell-bg: var(--color-background-light);
   --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-light);
+  --org-chart-viewport-border-color: var(--color-border-default-on-light);
+  --org-chart-focus-ring-color: var(--color-primary);
+  --org-chart-connector-color: var(--color-border-default-on-light);
+  --org-chart-card-bg: var(--color-background-light);
+  --org-chart-card-border-color: var(--color-primary);
+  --org-chart-name-color: var(--color-text-on-light);
+  --org-chart-group-color: var(--color-text-muted-on-light);
+  --org-chart-person-color: var(--color-text-on-light);
+  --org-chart-person-role-color: var(--color-text-muted-on-light);
+  --org-chart-empty-color: var(--color-text-muted-on-light);
+  --planning-grid-border-color: var(--color-primary);
+  --planning-grid-row-header-color: var(--color-text-on-light);
+  --planning-grid-row-header-bg: var(--color-background-light);
+  --planning-grid-column-header-color: var(--color-text-on-light);
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-light);
+  --planning-grid-column-header-bg: var(--color-background-light);
+  --planning-grid-current-outline-color: var(--color-primary);
+  --planning-grid-cell-color: var(--color-text-on-light);
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-light);
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-light);
+  --planning-grid-footer-bg: var(--color-surface-secondary-on-light);
+  --planning-grid-footer-color: var(--color-text-on-light);
+  --planning-grid-over-color: var(--color-error-text-on-light);
 }

package/src/tokens/surface-light.css

@@ -496,6 +496,11 @@ html.dark .surface-light {
   --checkbox-field-label-color: var(--text-color);
   --checkbox-field-error-color: var(--form-error-color);
   --checkbox-field-helper-color: var(--form-helper-color);
+  --clock-widget-date-color: var(--color-text-muted-on-light);
+  --clock-widget-status-color: var(--color-text-muted-on-light);
+  --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
+  --clock-widget-elapsed-color: var(--color-text-on-light);
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);
@@ -539,6 +544,27 @@ html.dark .surface-light {
   --field-row-empty-color: var(--color-text-muted-on-light);
   --file-upload-field-error-color: var(--form-error-color);
   --file-upload-field-helper-color: var(--form-helper-color);
+  --heatmap-border-color: var(--color-primary);
+  --heatmap-row-header-color: var(--color-text-on-light);
+  --heatmap-row-header-bg: var(--color-background-light);
+  --heatmap-column-header-color: var(--color-text-muted-on-light);
+  --heatmap-column-header-bg: var(--color-background-light);
+  --heatmap-group-header-color: var(--color-text-muted-on-light);
+  --heatmap-empty-bg: var(--color-surface-secondary-on-light);
+  --heatmap-empty-pattern-color: var(--color-border-default-on-light);
+  --heatmap-legend-color: var(--color-text-muted-on-light);
+  --heatmap-step-1-bg: var(--color-chart-sequential-100);
+  --heatmap-step-1-color: var(--color-text-on-light);
+  --heatmap-step-2-bg: var(--color-chart-sequential-200);
+  --heatmap-step-2-color: var(--color-text-on-light);
+  --heatmap-step-3-bg: var(--color-chart-sequential-300);
+  --heatmap-step-3-color: var(--color-text-on-light);
+  --heatmap-step-4-bg: var(--color-chart-sequential-500);
+  --heatmap-step-4-color: var(--color-text-on-light);
+  --heatmap-step-5-bg: var(--color-chart-sequential-600);
+  --heatmap-step-5-color: var(--color-text-on-dark);
+  --heatmap-step-6-bg: var(--color-chart-sequential-700);
+  --heatmap-step-6-color: var(--color-text-on-dark);
   --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
   --input-field-search-icon-color: var(--color-primary);
   --input-field-search-clear-color: var(--color-primary);
@@ -590,6 +616,7 @@ html.dark .surface-light {
   --radio-field-helper-color: var(--form-helper-color);
   --recovery-codes-color: var(--color-text-on-light);
   --recovery-codes-index-color: var(--color-text-muted-on-light);
+  --recurrence-field-legend-color: var(--color-text-on-light);
   --search-form-submit-color: var(--color-primary);
   --search-form-submit-hover-color: var(--color-primary);
   --search-form-submit-disabled-color: var(--input-disabled-color);
@@ -631,6 +658,11 @@ html.dark .surface-light {
   --theme-switcher-focus-ring-color: var(--color-primary);
   --time-field-error-color: var(--form-error-color);
   --time-field-helper-color: var(--form-helper-color);
+  --timeline-rail-color: var(--color-border-default-on-light);
+  --timeline-title-color: var(--color-text-on-light);
+  --timeline-meta-color: var(--color-text-muted-on-light);
+  --timeline-meta-separator-color: var(--color-border-default-on-light);
+  --timeline-note-color: var(--color-text-on-light);
   --tree-view-color: var(--sidebar-nav-item-color);
   --tree-view-selected-color: var(--sidebar-nav-item-color);
   --tree-view-chevron-color: var(--color-text-muted-on-light);
@@ -685,4 +717,28 @@ html.dark .surface-light {
   --chart-crosshair-color: var(--color-icon-secondary-on-light);
   --chat-shell-bg: var(--color-background-light);
   --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-light);
+  --org-chart-viewport-border-color: var(--color-border-default-on-light);
+  --org-chart-focus-ring-color: var(--color-primary);
+  --org-chart-connector-color: var(--color-border-default-on-light);
+  --org-chart-card-bg: var(--color-background-light);
+  --org-chart-card-border-color: var(--color-primary);
+  --org-chart-name-color: var(--color-text-on-light);
+  --org-chart-group-color: var(--color-text-muted-on-light);
+  --org-chart-person-color: var(--color-text-on-light);
+  --org-chart-person-role-color: var(--color-text-muted-on-light);
+  --org-chart-empty-color: var(--color-text-muted-on-light);
+  --planning-grid-border-color: var(--color-primary);
+  --planning-grid-row-header-color: var(--color-text-on-light);
+  --planning-grid-row-header-bg: var(--color-background-light);
+  --planning-grid-column-header-color: var(--color-text-on-light);
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-light);
+  --planning-grid-column-header-bg: var(--color-background-light);
+  --planning-grid-current-outline-color: var(--color-primary);
+  --planning-grid-cell-color: var(--color-text-on-light);
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-light);
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-light);
+  --planning-grid-footer-bg: var(--color-surface-secondary-on-light);
+  --planning-grid-footer-color: var(--color-text-on-light);
+  --planning-grid-over-color: var(--color-error-text-on-light);
 }

package/src/tokens/surface-public.css

@@ -192,6 +192,9 @@
   --checkbox-field-label-line-height: var(--text-line-height);
   --checkbox-field-error-font-size: var(--form-error-font-size);
   --checkbox-field-helper-font-size: var(--form-helper-font-size);
+  --clock-widget-date-font-size: var(--text-paragraph-small-font-size);
+  --clock-widget-status-font-size: var(--text-paragraph-small-font-size);
+  --clock-widget-elapsed-label-font-size: var(--text-paragraph-small-font-size);
   --consent-banner-title-font-size: var(--text-size-3);
   --consent-banner-description-font-size: var(--text-font-size);
   --conversation-list-item-font-size: var(--text-font-size);
@@ -243,6 +246,7 @@
   --radio-field-error-font-size: var(--form-error-font-size);
   --radio-field-helper-font-size: var(--form-helper-font-size);
   --recovery-codes-font-size: var(--text-paragraph-small-font-size);
+  --recurrence-field-legend-font-size: var(--label-font-size);
   --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size);
   --select-field-error-font-size: var(--form-error-font-size);
   --select-field-helper-font-size: var(--form-helper-font-size);
@@ -262,6 +266,9 @@
   --textarea-field-helper-font-size: var(--form-helper-font-size);
   --time-field-error-font-size: var(--form-error-font-size);
   --time-field-helper-font-size: var(--form-helper-font-size);
+  --timeline-title-font-size: var(--text-font-size);
+  --timeline-meta-font-size: var(--text-paragraph-small-font-size);
+  --timeline-note-font-size: var(--text-font-size);
   --uptime-bars-footer-font-size: var(--text-paragraph-small-font-size);
   --user-message-author-font-size: var(--text-paragraph-small-font-size);
   --user-message-timestamp-font-size: var(--text-paragraph-small-font-size);

package/src/tokens/tokens.json

@@ -2348,6 +2348,25 @@
   "--checkbox-field-helper-font-weight": "300",
   "--checkbox-field-helper-line-height": "1.5",
   "--checkbox-field-helper-color": "#111e30",
+  "--clock-widget-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--clock-widget-gap": "1rem",
+  "--clock-widget-header-gap": "0.25rem",
+  "--clock-widget-date-font-size": "0.875rem",
+  "--clock-widget-date-color": "#4a4a4a",
+  "--clock-widget-status-gap": "0.5rem",
+  "--clock-widget-status-font-size": "0.875rem",
+  "--clock-widget-status-color": "#4a4a4a",
+  "--clock-widget-status-dot-size": "0.5rem",
+  "--clock-widget-status-dot-radius": "9999px",
+  "--clock-widget-status-dot-open-bg": "#006616",
+  "--clock-widget-status-dot-closed-bg": "#d0d0d0",
+  "--clock-widget-elapsed-font-size": "2rem",
+  "--clock-widget-elapsed-font-weight": "500",
+  "--clock-widget-elapsed-line-height": "1.1",
+  "--clock-widget-elapsed-color": "#111e30",
+  "--clock-widget-elapsed-label-font-size": "0.875rem",
+  "--clock-widget-elapsed-label-color": "#4a4a4a",
+  "--clock-widget-footer-margin-block-start": "0.5rem",
   "--command-palette-max-height": "min(24rem, 60vh)",
   "--command-palette-input-padding-block": "0.75rem",
   "--command-palette-input-padding-inline": "0.5rem",
@@ -2561,6 +2580,51 @@
   "--filter-bar-label-offset": "calc(0.875rem * 1.5 + 0.5rem)",
   "--filter-bar-control-block-size": "2.5rem",
   "--form-field-gap": "0.25rem",
+  "--heatmap-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--heatmap-radius": "0px",
+  "--heatmap-border-color": "#111e30",
+  "--heatmap-border-width": "1px",
+  "--heatmap-row-header-width": "10rem",
+  "--heatmap-row-header-font-size": "0.875rem",
+  "--heatmap-row-header-color": "#111e30",
+  "--heatmap-row-header-font-weight": "300",
+  "--heatmap-row-header-bg": "#ffffff",
+  "--heatmap-row-header-padding-block": "0.5rem",
+  "--heatmap-row-header-padding-inline": "0.75rem",
+  "--heatmap-column-header-font-size": "0.75rem",
+  "--heatmap-column-header-font-weight": "500",
+  "--heatmap-column-header-color": "#4a4a4a",
+  "--heatmap-column-header-bg": "#ffffff",
+  "--heatmap-column-header-padding-block": "0.5rem",
+  "--heatmap-column-header-padding-inline": "0.5rem",
+  "--heatmap-column-header-width": "3rem",
+  "--heatmap-group-header-font-size": "0.75rem",
+  "--heatmap-group-header-color": "#4a4a4a",
+  "--heatmap-cell-padding-block": "0.5rem",
+  "--heatmap-cell-padding-inline": "0.5rem",
+  "--heatmap-cell-font-size": "0.875rem",
+  "--heatmap-cell-font-weight": "500",
+  "--heatmap-empty-bg": "#f2f2f2",
+  "--heatmap-empty-pattern-color": "#d0d0d0",
+  "--heatmap-empty-pattern-width": "0.25rem",
+  "--heatmap-legend-gap": "0.5rem",
+  "--heatmap-legend-font-size": "0.875rem",
+  "--heatmap-legend-color": "#4a4a4a",
+  "--heatmap-legend-swatch-size": "0.75rem",
+  "--heatmap-legend-swatch-gap": "0.25rem",
+  "--heatmap-margin-block-start": "0.75rem",
+  "--heatmap-step-1-bg": "#dce9fc",
+  "--heatmap-step-1-color": "#111e30",
+  "--heatmap-step-2-bg": "#b6d2f8",
+  "--heatmap-step-2-color": "#111e30",
+  "--heatmap-step-3-bg": "#8fbaf5",
+  "--heatmap-step-3-color": "#111e30",
+  "--heatmap-step-4-bg": "#3b88ee",
+  "--heatmap-step-4-color": "#111e30",
+  "--heatmap-step-5-bg": "#236ac5",
+  "--heatmap-step-5-color": "#ffffff",
+  "--heatmap-step-6-bg": "#164b90",
+  "--heatmap-step-6-color": "#ffffff",
   "--image-crop-dialog-gap": "1rem",
   "--image-crop-dialog-area-max-height": "60vh",
   "--image-crop-dialog-area-min-height": "60vh",
@@ -2822,6 +2886,14 @@
   "--recovery-codes-line-height": "1.65",
   "--recovery-codes-color": "#111e30",
   "--recovery-codes-index-color": "#4a4a4a",
+  "--recurrence-field-gap": "1rem",
+  "--recurrence-field-row-gap": "0.75rem",
+  "--recurrence-field-interval-width": "8rem",
+  "--recurrence-field-weekdays-gap": "0.25rem",
+  "--recurrence-field-legend-font-size": "0.875rem",
+  "--recurrence-field-legend-color": "#111e30",
+  "--recurrence-field-legend-font-weight": "500",
+  "--recurrence-field-legend-margin-block-end": "0.25rem",
   "--search-form-inline-size": "100%",
   "--search-form-xl-height": "4rem",
   "--search-form-xl-padding-inline": "2rem",
@@ -3028,6 +3100,25 @@
   "--time-field-helper-font-weight": "300",
   "--time-field-helper-line-height": "1.5",
   "--time-field-helper-color": "#111e30",
+  "--timeline-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--timeline-gap": "1.5rem",
+  "--timeline-column-gap": "0.75rem",
+  "--timeline-rail-width": "1px",
+  "--timeline-rail-color": "#d0d0d0",
+  "--timeline-rail-gap": "0.25rem",
+  "--timeline-title-font-size": "1rem",
+  "--timeline-title-font-weight": "500",
+  "--timeline-title-line-height": "1.3",
+  "--timeline-title-color": "#111e30",
+  "--timeline-meta-font-size": "0.875rem",
+  "--timeline-meta-color": "#4a4a4a",
+  "--timeline-meta-gap": "0.5rem",
+  "--timeline-meta-separator-color": "#d0d0d0",
+  "--timeline-note-font-size": "1rem",
+  "--timeline-note-line-height": "1.5",
+  "--timeline-note-color": "#111e30",
+  "--timeline-body-gap": "0.25rem",
+  "--timeline-actions-margin-block-start": "0.5rem",
   "--tree-view-icon-size": "16px",
   "--tree-view-indent": "calc(16px + 0.5rem)",
   "--tree-view-row-gap": "0.5rem",
@@ -3240,6 +3331,75 @@
   "--onboarding-shell-actions-gap": "1rem",
   "--onboarding-shell-actions-margin-block-start": "2rem",
   "--onboarding-shell-actions-padding-block-start": "1.5rem",
+  "--org-chart-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--org-chart-gap": "0.75rem",
+  "--org-chart-viewport-block-size": "32rem",
+  "--org-chart-viewport-padding": "1.5rem",
+  "--org-chart-viewport-bg": "#f2f2f2",
+  "--org-chart-viewport-radius": "0px",
+  "--org-chart-viewport-border-color": "#d0d0d0",
+  "--org-chart-viewport-border-width": "1px",
+  "--org-chart-focus-ring-color": "#111e30",
+  "--org-chart-focus-ring-width": "2px",
+  "--org-chart-focus-ring-offset": "2px",
+  "--org-chart-sibling-gap": "1rem",
+  "--org-chart-connector-length": "2rem",
+  "--org-chart-connector-color": "#d0d0d0",
+  "--org-chart-connector-width": "1px",
+  "--org-chart-card-inline-size": "14rem",
+  "--org-chart-card-bg": "#ffffff",
+  "--org-chart-card-border-color": "#111e30",
+  "--org-chart-card-border-width": "1px",
+  "--org-chart-card-radius": "0px",
+  "--org-chart-card-padding-block": "0.5rem",
+  "--org-chart-card-padding-inline": "0.75rem",
+  "--org-chart-card-gap": "0.5rem",
+  "--org-chart-name-font-size": "0.875rem",
+  "--org-chart-name-font-weight": "500",
+  "--org-chart-name-color": "#111e30",
+  "--org-chart-group-font-size": "0.75rem",
+  "--org-chart-group-color": "#4a4a4a",
+  "--org-chart-group-gap": "0.25rem",
+  "--org-chart-group-margin-block-start": "0.5rem",
+  "--org-chart-person-font-size": "0.875rem",
+  "--org-chart-person-color": "#111e30",
+  "--org-chart-person-role-font-size": "0.75rem",
+  "--org-chart-person-role-color": "#4a4a4a",
+  "--org-chart-person-gap": "0.25rem",
+  "--org-chart-empty-color": "#4a4a4a",
+  "--planning-grid-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--planning-grid-radius": "0px",
+  "--planning-grid-border-color": "#111e30",
+  "--planning-grid-border-width": "1px",
+  "--planning-grid-row-header-width": "12rem",
+  "--planning-grid-row-header-font-size": "0.875rem",
+  "--planning-grid-row-header-font-weight": "300",
+  "--planning-grid-row-header-color": "#111e30",
+  "--planning-grid-row-header-bg": "#ffffff",
+  "--planning-grid-row-header-padding-block": "0.5rem",
+  "--planning-grid-row-header-padding-inline": "0.75rem",
+  "--planning-grid-column-header-font-size": "0.875rem",
+  "--planning-grid-column-header-font-weight": "500",
+  "--planning-grid-column-header-color": "#111e30",
+  "--planning-grid-column-header-sub-font-size": "0.75rem",
+  "--planning-grid-column-header-sub-color": "#4a4a4a",
+  "--planning-grid-column-header-bg": "#ffffff",
+  "--planning-grid-column-header-padding-block": "0.5rem",
+  "--planning-grid-column-width": "6rem",
+  "--planning-grid-current-outline-color": "#111e30",
+  "--planning-grid-current-outline-width": "2px",
+  "--planning-grid-cell-padding-block": "0.25rem",
+  "--planning-grid-cell-padding-inline": "0.25rem",
+  "--planning-grid-cell-font-size": "0.875rem",
+  "--planning-grid-cell-color": "#111e30",
+  "--planning-grid-cell-readonly-color": "#4a4a4a",
+  "--planning-grid-cell-readonly-bg": "#f2f2f2",
+  "--planning-grid-cell-input-width": "4.5rem",
+  "--planning-grid-footer-bg": "#f2f2f2",
+  "--planning-grid-footer-font-weight": "500",
+  "--planning-grid-footer-color": "#111e30",
+  "--planning-grid-over-color": "#b30000",
+  "--planning-grid-pending-opacity": "0.4",
   "--public-page-shell-preferences-padding-block": "1.5rem",
   "--public-page-shell-preferences-gap": "0.75rem",
   "--steps-gap": "1.5rem",