@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/DateRangePicker.svelte

@@ -24,8 +24,8 @@
 <script lang="ts">
 	import FormGroup from './FormGroup.svelte';
 	import { fade } from 'svelte/transition';
-	import dayjs from 'dayjs';
-	import { clickOutside } from '../actions/ClickOutside.js';
+	import dayjs from '../util/dayjs.js';
+	import { clickOutside } from '../util/ClickOutside.js';
 	import ActionIcon from '../ui/ActionIcon.svelte';
 	import { iconChevronLeft, iconChevronRight, iconX } from '../icon/index.js';
 
@@ -418,33 +418,33 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border: 1px solid var(--pui-input-border);
-		background-color: var(--pui-input-bg);
-		color: var(--pui-input-text);
-		border-radius: var(--pui-radius-base);
+		font-size: 1rem;
+		line-height: 1.5rem;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--border-color);
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		border-radius: 0.25rem;
 		box-sizing: border-box;
 		cursor: pointer;
 		user-select: none;
 		min-height: 2.125rem;
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: border-color 0.15s ease;
 	}
 
 	.drp-input-wrap:focus {
 		outline: none;
-		border-color: var(--pui-input-border-focus);
+		border-color: var(--accent-color);
 	}
 
 	.drp-input-wrap.drp-open {
-		border-color: var(--pui-input-border-focus);
+		border-color: var(--accent-color);
 	}
 
 	.drp-input-wrap.drp-disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--pui-input-bg-disabled);
+		background: var(--border-color);
 		pointer-events: none;
 	}
 
@@ -453,16 +453,16 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		padding-right: var(--pui-spacing-6);
+		padding-right: 1.5rem;
 	}
 
 	.drp-placeholder {
-		color: var(--pui-text-placeholder);
+		color: #9ca3af;
 	}
 
 	.drp-clear {
 		position: absolute;
-		right: var(--pui-spacing-2);
+		right: 0.5rem;
 		top: 50%;
 		transform: translateY(-50%);
 		line-height: 0;
@@ -481,20 +481,20 @@
 		width: 19rem;
 		text-align: center;
 		position: absolute;
-		z-index: var(--pui-z-dropdown);
-		background-color: var(--pui-bg-surface-raised);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
-		box-shadow: var(--pui-shadow-lg);
-		padding: var(--pui-spacing-2);
+		z-index: 10;
+		background-color: var(--paper-body-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+		padding: 0.5rem;
 	}
 
 	.calendar.below {
-		top: var(--pui-spacing-1);
+		top: 0.25rem;
 	}
 
 	.calendar.above {
-		bottom: calc(100% + var(--pui-spacing-1));
+		bottom: calc(100% + 0.25rem);
 		top: auto;
 	}
 
@@ -502,13 +502,13 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: var(--pui-spacing-2);
+		padding: 0.5rem;
 	}
 
 	.month-label {
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-primary);
-		font-size: var(--pui-font-size-lg);
+		font-weight: 600;
+		color: var(--text-color);
+		font-size: 1.125rem;
 		background: none;
 		border: none;
 		cursor: default;
@@ -516,20 +516,20 @@
 
 	.month-label.clickable {
 		cursor: pointer;
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-sm);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s ease;
 	}
 
 	.month-label.clickable:hover {
-		background-color: var(--pui-bg-hover);
+		background-color: rgba(var(--ui-primary-rgbc), 0.1);
 	}
 
 	.selecting-hint {
-		font-size: var(--pui-font-size-xs);
-		color: var(--pui-color-primary);
+		font-size: 0.75rem;
+		color: var(--ui-primary);
 		font-style: italic;
-		margin-bottom: var(--pui-spacing-1);
+		margin-bottom: 0.25rem;
 		opacity: 0.75;
 	}
 
@@ -538,41 +538,41 @@
 	.year-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		gap: var(--pui-spacing-2);
-		margin-top: var(--pui-spacing-2);
-		padding: var(--pui-spacing-2);
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+		padding: 0.5rem;
 	}
 
 	.year-button {
-		color: var(--pui-text-primary);
-		padding: var(--pui-spacing-3) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-md);
+		color: var(--text-color);
+		padding: 0.75rem 0.5rem;
+		border-radius: 0.375rem;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		font-size: var(--pui-font-size-sm);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		transition: all 0.15s ease;
 	}
 
 	.year-button:hover:not(.disabled) {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-color-primary);
+		background-color: rgba(var(--ui-primary-rgbc), 0.1);
+		color: var(--ui-primary);
 	}
 
 	.year-button.current-year {
-		background-color: var(--pui-bg-active);
-		color: var(--pui-color-primary);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: rgba(var(--ui-primary-rgbc), 0.15);
+		color: var(--ui-primary);
+		font-weight: 600;
 	}
 
 	.year-button.selected {
-		background-color: var(--pui-color-primary);
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: var(--ui-primary);
+		color: white;
+		font-weight: 600;
 	}
 
 	.year-button.disabled {
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 		background-color: transparent !important;
 		cursor: not-allowed !important;
 		opacity: 0.5;
@@ -583,17 +583,17 @@
 	.days-header-bar {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
-		margin-top: var(--pui-spacing-2);
-		background-color: var(--pui-color-gray-100);
-		border-radius: var(--pui-radius-sm);
-		border: 1px solid var(--pui-border-default);
+		margin-top: 0.5rem;
+		background-color: #f8f9fa;
+		border-radius: 0.25rem;
+		border: 1px solid var(--border-color);
 	}
 
 	.day-label {
-		color: var(--pui-color-gray-500);
-		padding: var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-semibold);
+		color: #6b7280;
+		padding: 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
 		text-transform: uppercase;
 		text-align: center;
 	}
@@ -601,7 +601,7 @@
 	.days-grid {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
-		margin-top: var(--pui-spacing-2);
+		margin-top: 0.5rem;
 	}
 
 	/* ---- Day cells (range background strip) ---- */
@@ -623,7 +623,7 @@
 		height: 2rem;
 		left: 0;
 		right: 0;
-		background-color: var(--pui-bg-active);
+		background-color: rgba(var(--ui-primary-rgbc), 0.12);
 		z-index: 0;
 	}
 
@@ -647,16 +647,15 @@
 	.day-button {
 		position: relative;
 		z-index: 1;
-		color: var(--pui-text-primary);
+		color: var(--text-color);
 		width: 2.125rem;
 		height: 2.125rem;
 		border-radius: 50%;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		font-size: var(--pui-font-size-sm);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			color var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		transition: background-color 0.15s ease, color 0.15s ease;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
@@ -664,32 +663,32 @@
 	}
 
 	.day-button:hover:not(.disabled):not(.selected) {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-color-primary);
+		background-color: rgba(var(--ui-primary-rgbc), 0.12);
+		color: var(--ui-primary);
 	}
 
 	.today {
-		background-color: var(--pui-bg-active);
-		color: var(--pui-color-primary);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: rgba(var(--ui-primary-rgbc), 0.15);
+		color: var(--ui-primary);
+		font-weight: 600;
 	}
 
 	.selected {
-		background-color: var(--pui-color-primary);
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: var(--ui-primary);
+		color: white;
+		font-weight: 600;
 	}
 
 	.text-red {
-		color: var(--pui-color-danger);
+		color: rgb(248 113 113);
 	}
 
 	.text-grey {
-		color: var(--pui-text-muted);
+		color: rgb(163 163 163);
 	}
 
 	.disabled {
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 		background-color: transparent !important;
 		cursor: not-allowed !important;
 		opacity: 0.5;
@@ -697,41 +696,45 @@
 
 	.disabled:hover {
 		background-color: transparent !important;
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 	}
 
 	/* ---- Dark mode ---- */
 
 	:global(.dark) {
 		.days-header-bar {
-			background-color: var(--pui-color-dark-200);
+			background-color: #252529;
 		}
 
 		.day-label {
-			color: var(--pui-color-gray-300);
+			color: #d1d5db;
 		}
 
 		.day-button:hover:not(.disabled):not(.selected) {
-			background-color: var(--pui-bg-hover);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.12);
+			color: var(--ui-accent);
 		}
 
 		.today {
-			background-color: var(--pui-bg-active);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.15);
+			color: var(--ui-accent);
 		}
 
 		.selected {
-			background-color: var(--pui-color-secondary);
-			color: var(--pui-color-primary);
+			background-color: var(--ui-accent);
+			color: var(--ui-primary);
+		}
+
+		.day-cell.in-range::before {
+			background-color: rgba(var(--ui-accent-rgbc), 0.18);
 		}
 
 		.text-grey {
-			color: var(--pui-color-gray-500);
+			color: #6b7280;
 		}
 
 		.disabled {
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 			background-color: transparent !important;
 			cursor: not-allowed !important;
 			opacity: 0.5;
@@ -739,34 +742,34 @@
 
 		.disabled:hover {
 			background-color: transparent !important;
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 		}
 
 		.selecting-hint {
-			color: var(--pui-color-secondary);
+			color: var(--ui-accent);
 		}
 
 		.month-label.clickable:hover {
-			background-color: var(--pui-bg-hover);
+			background-color: rgba(var(--ui-accent-rgbc), 0.1);
 		}
 
 		.year-button:hover:not(.disabled) {
-			background-color: var(--pui-bg-hover);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.1);
+			color: var(--ui-accent);
 		}
 
 		.year-button.current-year {
-			background-color: var(--pui-bg-active);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.15);
+			color: var(--ui-accent);
 		}
 
 		.year-button.selected {
-			background-color: var(--pui-color-secondary);
-			color: var(--pui-color-primary);
+			background-color: var(--ui-accent);
+			color: var(--ui-primary);
 		}
 
 		.year-button.disabled {
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 		}
 	}
 </style>