@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/forms/date-picker/calendar.styles.js

@@ -2,11 +2,72 @@ import { css } from '@melodicdev/core';
 export const calendarStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* --- Calendar --- */
+		--ml-calendar-width: 280px;
+		--ml-calendar-font-family: var(--ml-font-sans);
+
+		/* --- Month label --- */
+		--ml-calendar-month-font-size: var(--ml-text-sm);
+		--ml-calendar-month-font-weight: var(--ml-font-semibold);
+		--ml-calendar-month-color: var(--ml-color-text);
+
+		/* --- Nav buttons --- */
+		--ml-calendar-nav-size: 2rem;
+		--ml-calendar-nav-border-radius: var(--ml-radius-md);
+		--ml-calendar-nav-color: var(--ml-color-text-muted);
+		--ml-calendar-nav-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-nav-hover-color: var(--ml-color-text);
+
+		/* --- Weekday headers --- */
+		--ml-calendar-weekday-height: 2.25rem;
+		--ml-calendar-weekday-font-size: var(--ml-text-xs);
+		--ml-calendar-weekday-font-weight: var(--ml-font-medium);
+		--ml-calendar-weekday-color: var(--ml-color-text-muted);
+
+		/* --- Day cells --- */
+		--ml-calendar-day-font-size: var(--ml-text-sm);
+		--ml-calendar-day-font-weight: var(--ml-font-regular);
+		--ml-calendar-day-color: var(--ml-color-text);
+		--ml-calendar-day-border-radius: var(--ml-radius-full);
+		--ml-calendar-day-hover-bg: var(--ml-color-surface-raised);
+
+		/* --- Today --- */
+		--ml-calendar-today-font-weight: var(--ml-font-semibold);
+		--ml-calendar-today-dot-size: 4px;
+		--ml-calendar-today-dot-color: var(--ml-color-primary);
+
+		/* --- Selected --- */
+		--ml-calendar-selected-bg: var(--ml-color-primary);
+		--ml-calendar-selected-color: var(--ml-color-text-inverse);
+		--ml-calendar-selected-font-weight: var(--ml-font-semibold);
+		--ml-calendar-selected-hover-bg: var(--ml-color-primary-hover);
+		--ml-calendar-selected-dot-color: var(--ml-color-text-inverse);
+
+		/* --- Disabled --- */
+		--ml-calendar-disabled-opacity: 0.3;
+
+		/* --- Focus --- */
+		--ml-calendar-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Today button --- */
+		--ml-calendar-today-btn-border-color: var(--ml-color-border);
+		--ml-calendar-today-btn-border-radius: var(--ml-radius-md);
+		--ml-calendar-today-btn-bg: var(--ml-color-surface);
+		--ml-calendar-today-btn-font-size: var(--ml-text-sm);
+		--ml-calendar-today-btn-font-weight: var(--ml-font-medium);
+		--ml-calendar-today-btn-color: var(--ml-color-text);
+		--ml-calendar-today-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-today-btn-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Transition --- */
+		--ml-calendar-transition-duration: var(--ml-duration-150);
+		--ml-calendar-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-calendar {
-		width: 280px;
-		font-family: var(--ml-font-sans);
+		width: var(--ml-calendar-width);
+		font-family: var(--ml-calendar-font-family);
 	}
 
 	/* Header with nav */
@@ -24,33 +85,33 @@ export const calendarStyles = () => css `
 	}
 
 	.ml-calendar__month-label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-size: var(--ml-calendar-month-font-size);
+		font-weight: var(--ml-calendar-month-font-weight);
+		color: var(--ml-calendar-month-color);
 	}
 
 	.ml-calendar__nav {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
+		width: var(--ml-calendar-nav-size);
+		height: var(--ml-calendar-nav-size);
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-calendar-nav-border-radius);
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-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);
+		transition: background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing), color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__nav:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-calendar-nav-hover-bg);
+		color: var(--ml-calendar-nav-hover-color);
 	}
 
 	.ml-calendar__nav:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 	}
 
 	/* Weekday headers */
@@ -65,10 +126,10 @@ export const calendarStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 2.25rem;
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		height: var(--ml-calendar-weekday-height);
+		font-size: var(--ml-calendar-weekday-font-size);
+		font-weight: var(--ml-calendar-weekday-font-weight);
+		color: var(--ml-calendar-weekday-color);
 	}
 
 	/* Day grid */
@@ -87,26 +148,26 @@ export const calendarStyles = () => css `
 		width: 100%;
 		aspect-ratio: 1;
 		border: none;
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-calendar-day-border-radius);
 		background: none;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-regular);
-		color: var(--ml-color-text);
+		font-size: var(--ml-calendar-day-font-size);
+		font-weight: var(--ml-calendar-day-font-weight);
+		color: var(--ml-calendar-day-color);
 		cursor: pointer;
 		padding: 0;
 		gap: 1px;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing),
+			color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__day:hover:not(:disabled):not(.ml-calendar__day--selected) {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-day-hover-bg);
 	}
 
 	.ml-calendar__day:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 		z-index: 1;
 	}
 
@@ -118,7 +179,7 @@ export const calendarStyles = () => css `
 
 	/* Today */
 	.ml-calendar__day--today {
-		font-weight: var(--ml-font-semibold);
+		font-weight: var(--ml-calendar-today-font-weight);
 	}
 
 	.ml-calendar__day-number {
@@ -127,30 +188,30 @@ export const calendarStyles = () => css `
 
 	/* Today dot indicator */
 	.ml-calendar__today-dot {
-		width: 4px;
-		height: 4px;
-		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-primary);
+		width: var(--ml-calendar-today-dot-size);
+		height: var(--ml-calendar-today-dot-size);
+		border-radius: var(--ml-calendar-day-border-radius);
+		background-color: var(--ml-calendar-today-dot-color);
 	}
 
 	.ml-calendar__day--selected .ml-calendar__today-dot {
-		background-color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-selected-dot-color);
 	}
 
 	/* Selected */
 	.ml-calendar__day--selected {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
-		font-weight: var(--ml-font-semibold);
+		background-color: var(--ml-calendar-selected-bg);
+		color: var(--ml-calendar-selected-color);
+		font-weight: var(--ml-calendar-selected-font-weight);
 	}
 
 	.ml-calendar__day--selected:hover:not(:disabled) {
-		background-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-calendar-selected-hover-bg);
 	}
 
 	/* Disabled */
 	.ml-calendar__day--disabled:not(.ml-calendar__day--other-month) {
-		opacity: 0.3;
+		opacity: var(--ml-calendar-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -162,25 +223,25 @@ export const calendarStyles = () => css `
 	}
 
 	.ml-calendar__today-btn {
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-surface);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		border: var(--ml-border) solid var(--ml-calendar-today-btn-border-color);
+		border-radius: var(--ml-calendar-today-btn-border-radius);
+		background-color: var(--ml-calendar-today-btn-bg);
+		font-family: var(--ml-calendar-font-family);
+		font-size: var(--ml-calendar-today-btn-font-size);
+		font-weight: var(--ml-calendar-today-btn-font-weight);
+		color: var(--ml-calendar-today-btn-color);
 		padding: var(--ml-space-1-5) var(--ml-space-3);
 		cursor: pointer;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out), border-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing), border-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__today-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-calendar-today-btn-hover-bg);
+		border-color: var(--ml-calendar-today-btn-hover-border-color);
 	}
 
 	.ml-calendar__today-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 	}
 `;

package/lib/components/forms/date-picker/date-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAuJ5B,CAAC"}
+{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiN5B,CAAC"}

package/lib/components/forms/date-picker/date-picker.styles.js

@@ -2,20 +2,76 @@ import { css } from '@melodicdev/core';
 export const datePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-date-picker-label-font-size: var(--ml-text-sm);
+		--ml-date-picker-label-font-weight: var(--ml-font-medium);
+		--ml-date-picker-label-color: var(--ml-color-text-secondary);
+		--ml-date-picker-label-line-height: var(--ml-leading-tight);
+		--ml-date-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-date-picker-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-date-picker-bg: var(--ml-color-input-bg);
+		--ml-date-picker-border-width: var(--ml-border);
+		--ml-date-picker-border-color: var(--ml-color-border);
+		--ml-date-picker-border-radius: var(--ml-radius-md);
+		--ml-date-picker-color: var(--ml-color-text);
+		--ml-date-picker-font-family: var(--ml-font-sans);
+		--ml-date-picker-font-size: var(--ml-text-sm);
+		--ml-date-picker-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-date-picker-gap: var(--ml-space-2);
+		--ml-date-picker-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-date-picker-focus-border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		--ml-date-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-date-picker-error-border-color: var(--ml-color-danger);
+		--ml-date-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-date-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-date-picker-disabled-opacity: 0.5;
+		--ml-date-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Icon --- */
+		--ml-date-picker-icon-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-date-picker-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Popover --- */
+		--ml-date-picker-popover-padding: var(--ml-space-4);
+		--ml-date-picker-popover-border-color: var(--ml-color-border);
+		--ml-date-picker-popover-border-radius: var(--ml-radius-lg);
+		--ml-date-picker-popover-bg: var(--ml-color-surface);
+		--ml-date-picker-popover-shadow: var(--ml-shadow-lg);
+
+		/* --- Hint --- */
+		--ml-date-picker-hint-color: var(--ml-color-text-muted);
+		--ml-date-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-date-picker-transition-duration: var(--ml-duration-150);
+		--ml-date-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-date-picker__label {
 		display: block;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		margin-bottom: var(--ml-space-1-5);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-date-picker-label-font-size);
+		font-weight: var(--ml-date-picker-label-font-weight);
+		color: var(--ml-date-picker-label-color);
+		margin-bottom: var(--ml-date-picker-label-margin-bottom);
+		line-height: var(--ml-date-picker-label-line-height);
 	}
 
 	.ml-date-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -23,48 +79,50 @@ export const datePickerStyles = () => css `
 	.ml-date-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-date-picker-gap);
 		width: 100%;
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-input-bg);
-		color: var(--ml-color-text);
+		padding: var(--ml-date-picker-padding);
+		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-border-color);
+		border-radius: var(--ml-date-picker-border-radius);
+		background-color: var(--ml-date-picker-bg);
+		color: var(--ml-date-picker-color);
 		cursor: pointer;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-date-picker-font-family);
+		font-size: var(--ml-date-picker-font-size);
 		text-align: left;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing),
+			box-shadow var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
 	.ml-date-picker__trigger:hover:not(:disabled) {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-date-picker-hover-border-color);
 	}
 
 	.ml-date-picker__trigger:focus-visible {
 		outline: none;
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-picker-focus-border-color);
+		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
 
 	.ml-date-picker--open .ml-date-picker__trigger {
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-picker-focus-border-color);
+		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
 
 	.ml-date-picker--error .ml-date-picker__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-date-picker-error-border-color);
 	}
 
 	.ml-date-picker--error .ml-date-picker__trigger:focus-visible,
 	.ml-date-picker--error.ml-date-picker--open .ml-date-picker__trigger {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-date-picker-error-focus-shadow);
 	}
 
 	.ml-date-picker--disabled .ml-date-picker__trigger {
-		opacity: 0.5;
+		opacity: var(--ml-date-picker-disabled-opacity);
 		cursor: not-allowed;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-date-picker-disabled-bg);
 	}
 
 	/* Sizes */
@@ -86,7 +144,7 @@ export const datePickerStyles = () => css `
 	/* Icon */
 	.ml-date-picker__icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-icon-color);
 	}
 
 	/* Value */
@@ -99,7 +157,7 @@ export const datePickerStyles = () => css `
 	}
 
 	.ml-date-picker__value--placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-placeholder-color);
 	}
 
 	/* Popover */
@@ -107,19 +165,19 @@ export const datePickerStyles = () => css `
 		position: fixed;
 		inset: unset;
 		margin: 0;
-		padding: var(--ml-space-4);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
-		box-shadow: var(--ml-shadow-lg);
+		padding: var(--ml-date-picker-popover-padding);
+		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-popover-border-color);
+		border-radius: var(--ml-date-picker-popover-border-radius);
+		background-color: var(--ml-date-picker-popover-bg);
+		box-shadow: var(--ml-date-picker-popover-shadow);
 		z-index: 50;
 
 		opacity: 0;
 		transform: scale(0.95);
 		transition:
-			opacity var(--ml-duration-150) var(--ml-ease-out),
-			transform var(--ml-duration-150) var(--ml-ease-out),
-			display var(--ml-duration-150) allow-discrete;
+			opacity var(--ml-date-picker-transition-duration) var(--ml-ease-out),
+			transform var(--ml-date-picker-transition-duration) var(--ml-ease-out),
+			display var(--ml-date-picker-transition-duration) allow-discrete;
 	}
 
 	.ml-date-picker__popover:popover-open {
@@ -138,16 +196,16 @@ export const datePickerStyles = () => css `
 	.ml-date-picker__hint,
 	.ml-date-picker__error {
 		display: block;
-		margin-top: var(--ml-space-1-5);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		margin-top: var(--ml-date-picker-label-margin-bottom);
+		font-size: var(--ml-date-picker-hint-font-size);
+		line-height: var(--ml-date-picker-label-line-height);
 	}
 
 	.ml-date-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-hint-color);
 	}
 
 	.ml-date-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-picker-error-color);
 	}
 `;

package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAwFhC,CAAC"}
+{"version":3,"file":"date-time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAgIhC,CAAC"}

package/lib/components/forms/date-time-picker/date-time-picker.styles.js

@@ -2,49 +2,89 @@ import { css } from '@melodicdev/core';
 export const dateTimePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-date-time-picker-label-font-size: var(--ml-text-sm);
+		--ml-date-time-picker-label-font-weight: var(--ml-font-medium);
+		--ml-date-time-picker-label-color: var(--ml-color-text-secondary);
+		--ml-date-time-picker-label-line-height: var(--ml-leading-tight);
+		--ml-date-time-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-date-time-picker-required-color: var(--ml-color-danger);
+
+		/* --- Row (unified input border) --- */
+		--ml-date-time-picker-border-width: var(--ml-border);
+		--ml-date-time-picker-border-color: var(--ml-color-border);
+		--ml-date-time-picker-border-radius: var(--ml-radius-md);
+		--ml-date-time-picker-bg: var(--ml-color-input-bg);
+
+		/* --- Focus --- */
+		--ml-date-time-picker-focus-border-color: var(--ml-color-primary);
+		--ml-date-time-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-date-time-picker-error-border-color: var(--ml-color-danger);
+		--ml-date-time-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-date-time-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-date-time-picker-disabled-opacity: 0.5;
+		--ml-date-time-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Divider --- */
+		--ml-date-time-picker-divider-color: var(--ml-color-border);
+
+		/* --- Hint --- */
+		--ml-date-time-picker-hint-color: var(--ml-color-text-muted);
+		--ml-date-time-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-date-time-picker-transition-duration: var(--ml-duration-150);
+		--ml-date-time-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-date-time-picker__label {
 		display: block;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		margin-bottom: var(--ml-space-1-5);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-date-time-picker-label-font-size);
+		font-weight: var(--ml-date-time-picker-label-font-weight);
+		color: var(--ml-date-time-picker-label-color);
+		margin-bottom: var(--ml-date-time-picker-label-margin-bottom);
+		line-height: var(--ml-date-time-picker-label-line-height);
 	}
 
 	.ml-date-time-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-time-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
-	/* Unified row — acts as the single input border */
+	/* Unified row -- acts as the single input border */
 	.ml-date-time-picker__row {
 		display: flex;
 		align-items: stretch;
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-input-bg);
+		border: var(--ml-date-time-picker-border-width) solid var(--ml-date-time-picker-border-color);
+		border-radius: var(--ml-date-time-picker-border-radius);
+		background-color: var(--ml-date-time-picker-bg);
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-date-time-picker-transition-duration) var(--ml-date-time-picker-transition-easing),
+			box-shadow var(--ml-date-time-picker-transition-duration) var(--ml-date-time-picker-transition-easing);
 	}
 
 	.ml-date-time-picker__row:focus-within {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-time-picker-focus-border-color);
+		box-shadow: var(--ml-date-time-picker-focus-shadow);
 	}
 
 	.ml-date-time-picker--error .ml-date-time-picker__row {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-date-time-picker-error-border-color);
 	}
 
 	.ml-date-time-picker--error .ml-date-time-picker__row:focus-within {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-date-time-picker-error-focus-shadow);
 	}
 
-	/* Child pickers — strip their individual borders, hover borders & focus rings */
+	/* Child pickers -- strip their individual borders, hover borders & focus rings */
 	.ml-date-time-picker__row > ml-date-picker,
 	.ml-date-time-picker__row > ml-time-picker {
 		flex: 1;
@@ -59,32 +99,32 @@ export const dateTimePickerStyles = () => css `
 	.ml-date-time-picker__divider {
 		width: 1px;
 		align-self: stretch;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-date-time-picker-divider-color);
 		margin: var(--ml-space-1-5) 0;
 		flex-shrink: 0;
 	}
 
 	/* Disabled */
 	.ml-date-time-picker--disabled .ml-date-time-picker__row {
-		opacity: 0.5;
+		opacity: var(--ml-date-time-picker-disabled-opacity);
 		pointer-events: none;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-date-time-picker-disabled-bg);
 	}
 
 	/* Hint / Error */
 	.ml-date-time-picker__hint,
 	.ml-date-time-picker__error {
 		display: block;
-		margin-top: var(--ml-space-1-5);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		margin-top: var(--ml-date-time-picker-label-margin-bottom);
+		font-size: var(--ml-date-time-picker-hint-font-size);
+		line-height: var(--ml-date-time-picker-label-line-height);
 	}
 
 	.ml-date-time-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-time-picker-hint-color);
 	}
 
 	.ml-date-time-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-time-picker-error-color);
 	}
 `;

package/lib/components/forms/file-upload/file-upload.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA2H5B,CAAC"}
+{"version":3,"file":"file-upload.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAgL5B,CAAC"}