@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/data-display/calendar-view/calendar-view.styles.js

@@ -3,12 +3,78 @@ export const calendarViewStyles = () => css `
 	:host {
 		display: block;
 		font-family: var(--ml-font-sans);
+
+		/* ── Calendar View: surface ── */
+		--ml-calendar-view-bg: var(--ml-color-surface);
+		--ml-calendar-view-border-width: var(--ml-border);
+		--ml-calendar-view-border-color: var(--ml-color-border);
+		--ml-calendar-view-radius: var(--ml-radius-lg);
+
+		/* ── Calendar View: header ── */
+		--ml-calendar-view-header-padding: var(--ml-space-4) var(--ml-space-5);
+		--ml-calendar-view-title-size: var(--ml-text-lg);
+		--ml-calendar-view-title-weight: var(--ml-font-semibold);
+		--ml-calendar-view-title-color: var(--ml-color-text);
+		--ml-calendar-view-subtitle-color: var(--ml-color-text-muted);
+
+		/* ── Calendar View: today badge ── */
+		--ml-calendar-view-today-badge-bg: var(--ml-color-primary);
+		--ml-calendar-view-today-badge-color: var(--ml-color-text-inverse);
+
+		/* ── Calendar View: navigation buttons ── */
+		--ml-calendar-view-nav-color: var(--ml-color-text-muted);
+		--ml-calendar-view-nav-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-view-nav-hover-color: var(--ml-color-text);
+
+		/* ── Calendar View: day cells ── */
+		--ml-calendar-view-cell-min-height: 120px;
+		--ml-calendar-view-cell-hover-bg: var(--ml-color-surface-sunken);
+		--ml-calendar-view-cell-other-bg: var(--ml-color-surface-sunken);
+		--ml-calendar-view-cell-other-color: var(--ml-color-text-disabled);
+
+		/* ── Calendar View: today indicator ── */
+		--ml-calendar-view-today-bg: var(--ml-color-primary);
+		--ml-calendar-view-today-color: var(--ml-color-text-inverse);
+
+		/* ── Calendar View: weekday header ── */
+		--ml-calendar-view-weekday-color: var(--ml-color-text-muted);
+		--ml-calendar-view-weekday-today-color: var(--ml-color-primary);
+
+		/* ── Calendar View: event pill ── */
+		--ml-calendar-view-event-radius: var(--ml-radius-sm);
+		--ml-calendar-view-event-border-width: 3px;
+
+		/* ── Calendar View: week badge ── */
+		--ml-calendar-view-week-badge-color: var(--ml-color-primary);
+		--ml-calendar-view-week-badge-bg: var(--ml-purple-50);
+
+		/* ── Calendar View: add button ── */
+		--ml-calendar-view-add-bg: var(--ml-color-primary);
+		--ml-calendar-view-add-hover-bg: var(--ml-color-primary-hover);
+		--ml-calendar-view-add-color: var(--ml-color-text-inverse);
+
+		/* ── Calendar View: view menu ── */
+		--ml-calendar-view-menu-bg: var(--ml-color-surface);
+		--ml-calendar-view-menu-shadow: var(--ml-shadow-lg);
+		--ml-calendar-view-menu-active-color: var(--ml-color-primary);
+
+		/* ── Calendar View: sidebar ── */
+		--ml-calendar-view-sidebar-event-hover-bg: var(--ml-color-surface-raised);
+
+		/* ── Calendar View: mini calendar ── */
+		--ml-calendar-view-mini-selected-bg: var(--ml-color-primary);
+		--ml-calendar-view-mini-selected-hover-bg: var(--ml-color-primary-hover);
+		--ml-calendar-view-mini-selected-color: var(--ml-color-text-inverse);
+		--ml-calendar-view-mini-dot-color: var(--ml-color-primary);
+
+		/* ── Calendar View: focus ring ── */
+		--ml-calendar-view-focus-ring: var(--ml-shadow-focus-ring);
 	}
 
 	.ml-cv {
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
+		border-radius: var(--ml-calendar-view-radius);
+		background-color: var(--ml-calendar-view-bg);
 		overflow: hidden;
 	}
 
@@ -18,8 +84,8 @@ export const calendarViewStyles = () => css `
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--ml-space-4);
-		padding: var(--ml-space-4) var(--ml-space-5);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		padding: var(--ml-calendar-view-header-padding);
+		border-bottom: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__header-left {
@@ -35,9 +101,9 @@ export const calendarViewStyles = () => css `
 		justify-content: center;
 		width: 2.75rem;
 		height: 2.75rem;
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		border-radius: var(--ml-calendar-view-radius);
+		background-color: var(--ml-calendar-view-today-badge-bg);
+		color: var(--ml-calendar-view-today-badge-color);
 		line-height: 1;
 		flex-shrink: 0;
 	}
@@ -67,24 +133,24 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__title {
-		font-size: var(--ml-text-lg);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-size: var(--ml-calendar-view-title-size);
+		font-weight: var(--ml-calendar-view-title-weight);
+		color: var(--ml-calendar-view-title-color);
 		margin: 0;
 	}
 
 	.ml-cv__week-badge {
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-primary);
-		background-color: var(--ml-purple-50);
+		color: var(--ml-calendar-view-week-badge-color);
+		background-color: var(--ml-calendar-view-week-badge-bg);
 		padding: var(--ml-space-0-5) var(--ml-space-2);
 		border-radius: var(--ml-radius-full);
 	}
 
 	.ml-cv__subtitle {
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-subtitle-color);
 	}
 
 	.ml-cv__header-right {
@@ -109,7 +175,7 @@ export const calendarViewStyles = () => css `
 	.ml-cv__nav-group {
 		display: flex;
 		align-items: center;
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		border-radius: var(--ml-radius-md);
 		overflow: hidden;
 	}
@@ -122,47 +188,47 @@ export const calendarViewStyles = () => css `
 		height: 2.25rem;
 		border: none;
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-nav-color);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out), color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
 	.ml-cv__nav-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
+		color: var(--ml-calendar-view-nav-hover-color);
 	}
 
 	.ml-cv__nav-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-view-focus-ring);
 		z-index: 1;
 	}
 
 	.ml-cv__nav-btn + .ml-cv__nav-btn {
-		border-left: var(--ml-border) solid var(--ml-color-border);
+		border-left: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__today-btn {
 		height: 2.25rem;
 		padding: 0 var(--ml-space-3);
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		border-radius: var(--ml-radius-md);
 		background: none;
 		font-family: var(--ml-font-sans);
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
 	.ml-cv__today-btn:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
 	}
 
 	.ml-cv__today-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-view-focus-ring);
 	}
 
 	/* View dropdown */
@@ -176,24 +242,24 @@ export const calendarViewStyles = () => css `
 		gap: var(--ml-space-1-5);
 		height: 2.25rem;
 		padding: 0 var(--ml-space-3);
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		border-radius: var(--ml-radius-md);
 		background: none;
 		font-family: var(--ml-font-sans);
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
 	.ml-cv__view-trigger:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
 	}
 
 	.ml-cv__view-trigger:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-view-focus-ring);
 	}
 
 	.ml-cv__view-trigger ml-icon {
@@ -209,10 +275,10 @@ export const calendarViewStyles = () => css `
 		top: calc(100% + 4px);
 		right: 0;
 		min-width: 140px;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
+		background-color: var(--ml-calendar-view-menu-bg);
+		border: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		border-radius: var(--ml-radius-md);
-		box-shadow: var(--ml-shadow-lg);
+		box-shadow: var(--ml-calendar-view-menu-shadow);
 		padding: var(--ml-space-1);
 		z-index: 10;
 	}
@@ -227,18 +293,18 @@ export const calendarViewStyles = () => css `
 		background: none;
 		font-family: var(--ml-font-sans);
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
 	.ml-cv__view-option:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
 	}
 
 	.ml-cv__view-option--active {
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-primary);
+		color: var(--ml-calendar-view-menu-active-color);
 	}
 
 	.ml-cv__add-btn {
@@ -249,22 +315,22 @@ export const calendarViewStyles = () => css `
 		padding: 0 var(--ml-space-3);
 		border: none;
 		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-calendar-view-add-bg);
 		font-family: var(--ml-font-sans);
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-inverse);
+		color: var(--ml-calendar-view-add-color);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
 	.ml-cv__add-btn:hover {
-		background-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-calendar-view-add-hover-bg);
 	}
 
 	.ml-cv__add-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-view-focus-ring);
 	}
 
 	/* ── Month View ── */
@@ -276,19 +342,19 @@ export const calendarViewStyles = () => css `
 	.ml-cv__weekday-header {
 		display: grid;
 		grid-template-columns: repeat(7, minmax(0, 1fr));
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__weekday {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 		text-align: center;
 	}
 
 	.ml-cv__weekday--today {
-		color: var(--ml-color-primary);
+		color: var(--ml-calendar-view-weekday-today-color);
 		font-weight: var(--ml-font-semibold);
 	}
 
@@ -299,9 +365,9 @@ export const calendarViewStyles = () => css `
 
 	.ml-cv__day-cell {
 		position: relative;
-		min-height: 120px;
-		border-right: var(--ml-border) solid var(--ml-color-border);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		min-height: var(--ml-calendar-view-cell-min-height);
+		border-right: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
+		border-bottom: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		padding: var(--ml-space-1);
 		cursor: pointer;
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
@@ -312,15 +378,15 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__day-cell:hover {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-calendar-view-cell-hover-bg);
 	}
 
 	.ml-cv__day-cell--other-month {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-calendar-view-cell-other-bg);
 	}
 
 	.ml-cv__day-cell--other-month .ml-cv__day-number {
-		color: var(--ml-color-text-disabled);
+		color: var(--ml-calendar-view-cell-other-color);
 	}
 
 	.ml-cv__day-number {
@@ -330,13 +396,13 @@ export const calendarViewStyles = () => css `
 		width: 1.75rem;
 		height: 1.75rem;
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		margin-bottom: var(--ml-space-0-5);
 	}
 
 	.ml-cv__day-number--today {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-view-today-bg);
+		color: var(--ml-calendar-view-today-color);
 		border-radius: var(--ml-radius-full);
 		font-weight: var(--ml-font-semibold);
 	}
@@ -352,8 +418,8 @@ export const calendarViewStyles = () => css `
 		align-items: center;
 		gap: var(--ml-space-1);
 		padding: 1px var(--ml-space-1-5);
-		border-radius: var(--ml-radius-sm);
-		border-left: 3px solid;
+		border-radius: var(--ml-calendar-view-event-radius);
+		border-left: var(--ml-calendar-view-event-border-width) solid;
 		font-size: 0.6875rem;
 		line-height: 1.45;
 		cursor: pointer;
@@ -388,7 +454,7 @@ export const calendarViewStyles = () => css `
 	.ml-cv__more-link {
 		font-size: 0.6875rem;
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 		padding: 1px var(--ml-space-1-5);
 		cursor: pointer;
 		border: none;
@@ -398,7 +464,7 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__more-link:hover {
-		color: var(--ml-color-primary);
+		color: var(--ml-calendar-view-menu-active-color);
 	}
 
 	.ml-cv__day-add {
@@ -412,8 +478,8 @@ export const calendarViewStyles = () => css `
 		height: 1.25rem;
 		border: none;
 		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-view-add-bg);
+		color: var(--ml-calendar-view-add-color);
 		font-size: var(--ml-text-sm);
 		cursor: pointer;
 		line-height: 1;
@@ -431,7 +497,7 @@ export const calendarViewStyles = () => css `
 
 	.ml-cv__time-header {
 		display: grid;
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__time-header--week {
@@ -443,7 +509,7 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__time-header-gutter {
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__time-header-day {
@@ -451,7 +517,7 @@ export const calendarViewStyles = () => css `
 		flex-direction: column;
 		align-items: center;
 		padding: var(--ml-space-2) 0;
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__time-header-day:last-child {
@@ -461,13 +527,13 @@ export const calendarViewStyles = () => css `
 	.ml-cv__time-header-label {
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 	}
 
 	.ml-cv__time-header-number {
 		font-size: var(--ml-text-lg);
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		width: 2rem;
 		height: 2rem;
 		display: flex;
@@ -476,12 +542,12 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__time-header-day--today .ml-cv__time-header-label {
-		color: var(--ml-color-primary);
+		color: var(--ml-calendar-view-weekday-today-color);
 	}
 
 	.ml-cv__time-header-day--today .ml-cv__time-header-number {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-view-today-bg);
+		color: var(--ml-calendar-view-today-color);
 		border-radius: var(--ml-radius-full);
 	}
 
@@ -505,11 +571,11 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__time-gutter {
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__time-column {
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 	}
 
 	.ml-cv__time-column--last {
@@ -517,7 +583,7 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__time-row {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		pointer-events: none;
 	}
 
@@ -527,7 +593,7 @@ export const calendarViewStyles = () => css `
 		justify-content: flex-end;
 		padding: var(--ml-space-1) var(--ml-space-2) 0;
 		font-size: 0.625rem;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 		white-space: nowrap;
 		pointer-events: none;
 	}
@@ -537,8 +603,8 @@ export const calendarViewStyles = () => css `
 		box-sizing: border-box;
 		min-width: 0;
 		min-height: 0;
-		border-radius: var(--ml-radius-sm);
-		border-left: 3px solid;
+		border-radius: var(--ml-calendar-view-event-radius);
+		border-left: var(--ml-calendar-view-event-border-width) solid;
 		padding: var(--ml-space-1) var(--ml-space-1-5);
 		font-size: 0.6875rem;
 		overflow: hidden;
@@ -583,7 +649,7 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__day-sidebar {
-		border-left: var(--ml-border) solid var(--ml-color-border);
+		border-left: var(--ml-calendar-view-border-width) solid var(--ml-calendar-view-border-color);
 		padding: var(--ml-space-4);
 		overflow-y: auto;
 		max-height: 780px;
@@ -604,7 +670,7 @@ export const calendarViewStyles = () => css `
 	.ml-cv__mini-cal-title {
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 	}
 
 	.ml-cv__mini-cal-nav {
@@ -622,13 +688,13 @@ export const calendarViewStyles = () => css `
 		border: none;
 		border-radius: var(--ml-radius-sm);
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-nav-color);
 		cursor: pointer;
 	}
 
 	.ml-cv__mini-cal-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
+		color: var(--ml-calendar-view-nav-hover-color);
 	}
 
 	.ml-cv__mini-cal-weekdays {
@@ -640,7 +706,7 @@ export const calendarViewStyles = () => css `
 	.ml-cv__mini-cal-weekday {
 		font-size: 0.625rem;
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 		text-align: center;
 		padding: var(--ml-space-0-5) 0;
 	}
@@ -660,18 +726,18 @@ export const calendarViewStyles = () => css `
 		border-radius: var(--ml-radius-full);
 		background: none;
 		font-size: 0.6875rem;
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		cursor: pointer;
 		padding: 0;
 		gap: 1px;
 	}
 
 	.ml-cv__mini-cal-day:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-view-nav-hover-bg);
 	}
 
 	.ml-cv__mini-cal-day--other {
-		color: var(--ml-color-text-disabled);
+		color: var(--ml-calendar-view-cell-other-color);
 	}
 
 	.ml-cv__mini-cal-day--today {
@@ -679,31 +745,31 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__mini-cal-day--selected {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-view-mini-selected-bg);
+		color: var(--ml-calendar-view-mini-selected-color);
 		font-weight: var(--ml-font-semibold);
 	}
 
 	.ml-cv__mini-cal-day--selected:hover {
-		background-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-calendar-view-mini-selected-hover-bg);
 	}
 
 	.ml-cv__mini-cal-dot {
 		width: 3px;
 		height: 3px;
 		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-calendar-view-mini-dot-color);
 	}
 
 	.ml-cv__mini-cal-day--selected .ml-cv__mini-cal-dot {
-		background-color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-view-mini-selected-color);
 	}
 
 	/* Sidebar event list */
 	.ml-cv__sidebar-title {
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		margin-bottom: var(--ml-space-3);
 	}
 
@@ -723,7 +789,7 @@ export const calendarViewStyles = () => css `
 	}
 
 	.ml-cv__sidebar-event:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-view-sidebar-event-hover-bg);
 	}
 
 	.ml-cv__sidebar-event-bar {
@@ -748,7 +814,7 @@ export const calendarViewStyles = () => css `
 	.ml-cv__sidebar-event-title {
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		color: var(--ml-calendar-view-title-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -756,12 +822,12 @@ export const calendarViewStyles = () => css `
 
 	.ml-cv__sidebar-event-time {
 		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 	}
 
 	.ml-cv__sidebar-empty {
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-view-weekday-color);
 		text-align: center;
 		padding: var(--ml-space-6) 0;
 	}

package/lib/components/data-display/data-grid/data-grid.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"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"}

package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA0e1B,CAAC"}
+{"version":3,"file":"data-grid.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAkiB1B,CAAC"}