@melodicdev/components 1.4.0 → 1.5.1

package/lib/components/forms/textarea/textarea.styles.js

@@ -4,6 +4,54 @@ export const textareaStyles = () => css `
 		display: block;
 		width: 100%;
 		min-width: 0;
+
+		/* --- Label --- */
+		--ml-textarea-label-font-size: var(--ml-text-sm);
+		--ml-textarea-label-font-weight: var(--ml-font-medium);
+		--ml-textarea-label-color: var(--ml-color-text-secondary);
+		--ml-textarea-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-textarea-required-color: var(--ml-color-danger);
+
+		/* --- Field --- */
+		--ml-textarea-bg: var(--ml-color-input-bg);
+		--ml-textarea-border-width: var(--ml-border);
+		--ml-textarea-border-color: var(--ml-color-border-strong);
+		--ml-textarea-border-radius: var(--ml-radius);
+		--ml-textarea-shadow: var(--ml-shadow-xs);
+		--ml-textarea-color: var(--ml-color-text);
+		--ml-textarea-font-family: var(--ml-font-sans);
+		--ml-textarea-font-size: var(--ml-text-sm);
+		--ml-textarea-line-height: var(--ml-leading-normal);
+		--ml-textarea-padding: var(--ml-space-3) var(--ml-space-3-5);
+		--ml-textarea-min-height: 80px;
+		--ml-textarea-placeholder-color: var(--ml-color-text-muted);
+		--ml-textarea-hover-border-color: var(--ml-color-border);
+
+		/* --- Focus --- */
+		--ml-textarea-focus-border-color: var(--ml-color-primary);
+		--ml-textarea-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-textarea-focus-inset-shadow: none;
+
+		/* --- Error --- */
+		--ml-textarea-error-border-color: var(--ml-color-danger);
+		--ml-textarea-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-textarea-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-textarea-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-textarea-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Hint / Counter --- */
+		--ml-textarea-hint-color: var(--ml-color-text-muted);
+		--ml-textarea-hint-font-size: var(--ml-text-sm);
+		--ml-textarea-counter-font-size: var(--ml-text-xs);
+		--ml-textarea-counter-color: var(--ml-color-text-muted);
+
+		/* --- Transition --- */
+		--ml-textarea-transition-duration: var(--ml-duration-150);
+		--ml-textarea-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-textarea {
@@ -13,54 +61,54 @@ export const textareaStyles = () => css `
 	}
 
 	.ml-textarea__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-textarea-label-font-size);
+		font-weight: var(--ml-textarea-label-font-weight);
+		color: var(--ml-textarea-label-color);
+		line-height: var(--ml-textarea-label-line-height);
 	}
 
 	.ml-textarea__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-textarea-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
 	.ml-textarea__field {
 		box-sizing: border-box;
 		width: 100%;
-		min-height: 80px;
-		padding: var(--ml-space-3) var(--ml-space-3-5);
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
+		min-height: var(--ml-textarea-min-height);
+		padding: var(--ml-textarea-padding);
+		background-color: var(--ml-textarea-bg);
+		border: var(--ml-textarea-border-width) solid var(--ml-textarea-border-color);
+		border-radius: var(--ml-textarea-border-radius);
+		box-shadow: var(--ml-textarea-shadow);
+		color: var(--ml-textarea-color);
+		font-family: var(--ml-textarea-font-family);
+		font-size: var(--ml-textarea-font-size);
+		line-height: var(--ml-textarea-line-height);
 		resize: none;
 		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-textarea-transition-duration) var(--ml-textarea-transition-easing),
+			box-shadow var(--ml-textarea-transition-duration) var(--ml-textarea-transition-easing);
 	}
 
 	.ml-textarea__field:hover:not(:disabled) {
-		border-color: var(--ml-color-border);
+		border-color: var(--ml-textarea-hover-border-color);
 	}
 
 	.ml-textarea__field:focus {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-textarea-focus-border-color);
+		box-shadow: var(--ml-textarea-focus-shadow), var(--ml-textarea-focus-inset-shadow);
 	}
 
 	.ml-textarea__field::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-placeholder-color);
 	}
 
 	.ml-textarea__field:disabled {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-textarea-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-disabled-color);
 	}
 
 	.ml-textarea__footer {
@@ -72,21 +120,21 @@ export const textareaStyles = () => css `
 
 	.ml-textarea__error,
 	.ml-textarea__hint {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-textarea-hint-font-size);
+		line-height: var(--ml-textarea-label-line-height);
 	}
 
 	.ml-textarea__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-textarea-error-color);
 	}
 
 	.ml-textarea__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-hint-color);
 	}
 
 	.ml-textarea__counter {
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-textarea-counter-font-size);
+		color: var(--ml-textarea-counter-color);
 		margin-left: auto;
 	}
 
@@ -95,13 +143,14 @@ export const textareaStyles = () => css `
 	}
 
 	.ml-textarea--error .ml-textarea__field {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-textarea-error-border-color);
 	}
 
 	.ml-textarea--error .ml-textarea__field:focus {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-textarea-error-focus-shadow);
 	}
 
+	/* --- Size variants --- */
 	.ml-textarea--sm .ml-textarea__field {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-sm);

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

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

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

@@ -2,20 +2,123 @@ import { css } from '@melodicdev/core';
 export const timePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-time-picker-label-font-size: var(--ml-text-sm);
+		--ml-time-picker-label-font-weight: var(--ml-font-medium);
+		--ml-time-picker-label-color: var(--ml-color-text-secondary);
+		--ml-time-picker-label-line-height: var(--ml-leading-tight);
+		--ml-time-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-time-picker-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-time-picker-bg: var(--ml-color-input-bg);
+		--ml-time-picker-border-width: var(--ml-border);
+		--ml-time-picker-border-color: var(--ml-color-border);
+		--ml-time-picker-border-radius: var(--ml-radius-md);
+		--ml-time-picker-color: var(--ml-color-text);
+		--ml-time-picker-font-family: var(--ml-font-sans);
+		--ml-time-picker-font-size: var(--ml-text-sm);
+		--ml-time-picker-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-time-picker-gap: var(--ml-space-2);
+		--ml-time-picker-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-time-picker-focus-border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		--ml-time-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-time-picker-error-border-color: var(--ml-color-danger);
+		--ml-time-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-time-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-time-picker-disabled-opacity: 0.5;
+		--ml-time-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Icon --- */
+		--ml-time-picker-icon-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-time-picker-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Popover --- */
+		--ml-time-picker-popover-padding: var(--ml-space-4);
+		--ml-time-picker-popover-border-color: var(--ml-color-border);
+		--ml-time-picker-popover-border-radius: var(--ml-radius-lg);
+		--ml-time-picker-popover-bg: var(--ml-color-surface);
+		--ml-time-picker-popover-shadow: var(--ml-shadow-lg);
+
+		/* --- Spinner --- */
+		--ml-time-picker-spin-btn-size: 2rem;
+		--ml-time-picker-spin-btn-color: var(--ml-color-text-muted);
+		--ml-time-picker-spin-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-spin-btn-hover-color: var(--ml-color-text);
+		--ml-time-picker-spin-btn-border-radius: var(--ml-radius-md);
+		--ml-time-picker-spin-input-width: 3rem;
+		--ml-time-picker-spin-input-height: 2.5rem;
+		--ml-time-picker-spin-input-font-size: var(--ml-text-xl);
+		--ml-time-picker-spin-input-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-spin-input-font-family: var(--ml-font-mono, var(--ml-font-sans));
+		--ml-time-picker-spin-input-color: var(--ml-color-text);
+		--ml-time-picker-spin-input-bg: var(--ml-color-surface-sunken);
+		--ml-time-picker-spin-input-border-radius: var(--ml-radius-md);
+		--ml-time-picker-spin-input-focus-border-color: var(--ml-color-primary);
+		--ml-time-picker-spin-input-focus-bg: var(--ml-color-surface);
+
+		/* --- Separator --- */
+		--ml-time-picker-separator-font-size: var(--ml-text-xl);
+		--ml-time-picker-separator-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-separator-color: var(--ml-color-text-muted);
+
+		/* --- Period button --- */
+		--ml-time-picker-period-bg: var(--ml-color-surface);
+		--ml-time-picker-period-border-color: var(--ml-color-border);
+		--ml-time-picker-period-border-radius: var(--ml-radius-md);
+		--ml-time-picker-period-font-size: var(--ml-text-sm);
+		--ml-time-picker-period-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-period-color: var(--ml-color-text);
+		--ml-time-picker-period-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-period-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Footer buttons --- */
+		--ml-time-picker-footer-btn-bg: var(--ml-color-surface);
+		--ml-time-picker-footer-btn-border-color: var(--ml-color-border);
+		--ml-time-picker-footer-btn-border-radius: var(--ml-radius-md);
+		--ml-time-picker-footer-btn-font-size: var(--ml-text-sm);
+		--ml-time-picker-footer-btn-font-weight: var(--ml-font-medium);
+		--ml-time-picker-footer-btn-color: var(--ml-color-text);
+		--ml-time-picker-footer-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-footer-btn-hover-border-color: var(--ml-color-border-strong);
+		--ml-time-picker-confirm-bg: var(--ml-color-primary);
+		--ml-time-picker-confirm-border-color: var(--ml-color-primary);
+		--ml-time-picker-confirm-color: var(--ml-color-text-inverse);
+		--ml-time-picker-confirm-hover-bg: var(--ml-color-primary-hover);
+		--ml-time-picker-confirm-hover-border-color: var(--ml-color-primary-hover);
+
+		/* --- Hint --- */
+		--ml-time-picker-hint-color: var(--ml-color-text-muted);
+		--ml-time-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-time-picker-transition-duration: var(--ml-duration-150);
+		--ml-time-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-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-time-picker-label-font-size);
+		font-weight: var(--ml-time-picker-label-font-weight);
+		color: var(--ml-time-picker-label-color);
+		margin-bottom: var(--ml-time-picker-label-margin-bottom);
+		line-height: var(--ml-time-picker-label-line-height);
 	}
 
 	.ml-time-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-time-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -23,48 +126,50 @@ export const timePickerStyles = () => css `
 	.ml-time-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-time-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-time-picker-padding);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-border-color);
+		border-radius: var(--ml-time-picker-border-radius);
+		background-color: var(--ml-time-picker-bg);
+		color: var(--ml-time-picker-color);
 		cursor: pointer;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-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-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			box-shadow var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__trigger:hover:not(:disabled) {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-time-picker-hover-border-color);
 	}
 
 	.ml-time-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-time-picker-focus-border-color);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker--open .ml-time-picker__trigger {
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-time-picker-focus-border-color);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker--error .ml-time-picker__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-time-picker-error-border-color);
 	}
 
 	.ml-time-picker--error .ml-time-picker__trigger:focus-visible,
 	.ml-time-picker--error.ml-time-picker--open .ml-time-picker__trigger {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-time-picker-error-focus-shadow);
 	}
 
 	.ml-time-picker--disabled .ml-time-picker__trigger {
-		opacity: 0.5;
+		opacity: var(--ml-time-picker-disabled-opacity);
 		cursor: not-allowed;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-time-picker-disabled-bg);
 	}
 
 	/* Sizes */
@@ -86,7 +191,7 @@ export const timePickerStyles = () => css `
 	/* Icon */
 	.ml-time-picker__icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-icon-color);
 	}
 
 	/* Value */
@@ -99,7 +204,7 @@ export const timePickerStyles = () => css `
 	}
 
 	.ml-time-picker__value--placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-placeholder-color);
 	}
 
 	/* Popover */
@@ -107,19 +212,19 @@ export const timePickerStyles = () => 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-time-picker-popover-padding);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-popover-border-color);
+		border-radius: var(--ml-time-picker-popover-border-radius);
+		background-color: var(--ml-time-picker-popover-bg);
+		box-shadow: var(--ml-time-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-time-picker-transition-duration) var(--ml-ease-out),
+			transform var(--ml-time-picker-transition-duration) var(--ml-ease-out),
+			display var(--ml-time-picker-transition-duration) allow-discrete;
 	}
 
 	.ml-time-picker__popover:popover-open {
@@ -153,41 +258,41 @@ export const timePickerStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
+		width: var(--ml-time-picker-spin-btn-size);
+		height: var(--ml-time-picker-spin-btn-size);
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-time-picker-spin-btn-border-radius);
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-spin-btn-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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__spin-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-time-picker-spin-btn-hover-bg);
+		color: var(--ml-time-picker-spin-btn-hover-color);
 	}
 
 	.ml-time-picker__spin-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker__spin-input {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 3rem;
-		height: 2.5rem;
-		font-size: var(--ml-text-xl);
-		font-weight: var(--ml-font-semibold);
-		font-family: var(--ml-font-mono, var(--ml-font-sans));
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-surface-sunken);
-		border: var(--ml-border) solid transparent;
-		border-radius: var(--ml-radius-md);
+		width: var(--ml-time-picker-spin-input-width);
+		height: var(--ml-time-picker-spin-input-height);
+		font-size: var(--ml-time-picker-spin-input-font-size);
+		font-weight: var(--ml-time-picker-spin-input-font-weight);
+		font-family: var(--ml-time-picker-spin-input-font-family);
+		color: var(--ml-time-picker-spin-input-color);
+		background-color: var(--ml-time-picker-spin-input-bg);
+		border: var(--ml-time-picker-border-width) solid transparent;
+		border-radius: var(--ml-time-picker-spin-input-border-radius);
 		text-align: center;
 		padding: 0;
 		outline: none;
@@ -201,14 +306,14 @@ export const timePickerStyles = () => css `
 	}
 
 	.ml-time-picker__spin-input:focus {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface);
+		border-color: var(--ml-time-picker-spin-input-focus-border-color);
+		background-color: var(--ml-time-picker-spin-input-focus-bg);
 	}
 
 	.ml-time-picker__separator {
-		font-size: var(--ml-text-xl);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-time-picker-separator-font-size);
+		font-weight: var(--ml-time-picker-separator-font-weight);
+		color: var(--ml-time-picker-separator-color);
 		padding: 0 var(--ml-space-0-5);
 		align-self: center;
 	}
@@ -227,27 +332,27 @@ export const timePickerStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		padding: var(--ml-space-1-5) var(--ml-space-2-5);
-		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-semibold);
-		color: var(--ml-color-text);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-period-border-color);
+		border-radius: var(--ml-time-picker-period-border-radius);
+		background-color: var(--ml-time-picker-period-bg);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-picker-period-font-size);
+		font-weight: var(--ml-time-picker-period-font-weight);
+		color: var(--ml-time-picker-period-color);
 		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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			border-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__period-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-time-picker-period-hover-bg);
+		border-color: var(--ml-time-picker-period-hover-border-color);
 	}
 
 	.ml-time-picker__period-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	/* Footer */
@@ -257,62 +362,62 @@ export const timePickerStyles = () => css `
 		align-items: center;
 		padding-top: var(--ml-space-3);
 		margin-top: var(--ml-space-3);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		border-top: var(--ml-time-picker-border-width) solid var(--ml-time-picker-popover-border-color);
 	}
 
 	.ml-time-picker__now-btn,
 	.ml-time-picker__confirm-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-time-picker-border-width) solid var(--ml-time-picker-footer-btn-border-color);
+		border-radius: var(--ml-time-picker-footer-btn-border-radius);
+		background-color: var(--ml-time-picker-footer-btn-bg);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-picker-footer-btn-font-size);
+		font-weight: var(--ml-time-picker-footer-btn-font-weight);
+		color: var(--ml-time-picker-footer-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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			border-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__now-btn:hover,
 	.ml-time-picker__confirm-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-time-picker-footer-btn-hover-bg);
+		border-color: var(--ml-time-picker-footer-btn-hover-border-color);
 	}
 
 	.ml-time-picker__now-btn:focus-visible,
 	.ml-time-picker__confirm-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker__confirm-btn {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-time-picker-confirm-bg);
+		border-color: var(--ml-time-picker-confirm-border-color);
+		color: var(--ml-time-picker-confirm-color);
 	}
 
 	.ml-time-picker__confirm-btn:hover {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-time-picker-confirm-hover-bg);
+		border-color: var(--ml-time-picker-confirm-hover-border-color);
 	}
 
 	/* Hint / Error */
 	.ml-time-picker__hint,
 	.ml-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-time-picker-label-margin-bottom);
+		font-size: var(--ml-time-picker-hint-font-size);
+		line-height: var(--ml-time-picker-label-line-height);
 	}
 
 	.ml-time-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-hint-color);
 	}
 
 	.ml-time-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-time-picker-error-color);
 	}
 `;

package/lib/components/forms/toggle/toggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAiIxB,CAAC"}
+{"version":3,"file":"toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA+JxB,CAAC"}