@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/styles/dark.css

@@ -1,146 +1,146 @@
-/**
- * Dark Theme Overrides
- * Override variables when .dark class is applied to the document.
- */
-
-.dark {
-	/* ============================================
-	 * SURFACE COLORS
-	 * ============================================ */
-	--pui-bg-page: var(--pui-color-dark-100);
-	--pui-bg-surface: var(--pui-color-dark-400);
-	--pui-bg-surface-raised: var(--pui-color-dark-200);
-	--pui-bg-surface-sunken: var(--pui-color-dark-400);
-
-	/* ============================================
-	 * TEXT COLORS
-	 * ============================================ */
-	--pui-text-primary: var(--pui-color-off-white);
-	--pui-text-secondary: rgb(180, 180, 180);
-	--pui-text-muted: rgb(140, 140, 140);
-	--pui-text-disabled: rgb(100, 100, 100);
-	--pui-text-placeholder: rgb(115, 115, 115);
-	--pui-text-danger: var(--pui-color-danger-lighter);
-
-	/* ============================================
-	 * BORDER COLORS
-	 * ============================================ */
-	--pui-border-default: var(--pui-color-dark-border);
-	--pui-border-subtle: var(--pui-color-dark-border-subtle);
-	--pui-border-strong: rgb(75, 80, 90);
-
-	/* ============================================
-	 * ACCENT COLORS
-	 * ============================================ */
-	--pui-accent-color-rgb: var(--pui-color-secondary-rgb);
-	--pui-accent-color: var(--pui-color-secondary);
-	--pui-accent-text-color: var(--pui-color-black);
-
-	/* ============================================
-	 * SCROLLBAR
-	 * ============================================ */
-	--pui-scrollbar-track: var(--pui-color-dark-500);
-	--pui-scrollbar-thumb-border: var(--pui-color-black);
-
-	/* ============================================
-	 * FORM INPUTS
-	 * ============================================ */
-	--pui-input-bg: var(--pui-color-dark-200);
-	--pui-input-bg-disabled: var(--pui-color-dark-border);
-
-	/* ============================================
-	 * PAPER
-	 * ============================================ */
-	--pui-paper-title-bg: var(--pui-color-dark-400);
-	--pui-paper-title-border: var(--pui-color-dark-border-subtle);
-	--pui-paper-body-bg: var(--pui-color-dark-300);
-
-	/* ============================================
-	 * DIALOG
-	 * ============================================ */
-	--pui-dialog-backdrop: rgba(0, 0, 0, 0.75);
-
-	/* ============================================
-	 * SIDENAV
-	 * ============================================ */
-	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.2);
-	--pui-sidenav-item-active-bg: rgba(var(--pui-color-primary-rgb), 0.3);
-	--pui-sidenav-item-active-border: var(--pui-color-primary);
-
-	/* ============================================
-	 * DROPDOWN
-	 * ============================================ */
-	--pui-dropdown-item-hover-bg: var(--pui-color-dark-200);
-	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * TOOLTIP
-	 * ============================================ */
-	--pui-tooltip-bg: var(--pui-color-gray-100);
-	--pui-tooltip-text: var(--pui-color-gray-900);
-
-	/* ============================================
-	 * TABLE
-	 * ============================================ */
-	--pui-table-header-bg: var(--pui-color-dark-400);
-	--pui-table-row-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * TABS
-	 * ============================================ */
-	--pui-tab-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * ALERT
-	 * ============================================ */
-	--pui-alert-info-bg: #032830;
-	--pui-alert-info-border: #087990;
-	--pui-alert-success-bg: #051b11;
-	--pui-alert-success-border: #0f5132;
-	--pui-alert-warning-bg: #332701;
-	--pui-alert-warning-border: #997404;
-	--pui-alert-danger-bg: #2c0b0e;
-	--pui-alert-danger-border: #842029;
-
-	/* ============================================
-	 * AVATAR
-	 * ============================================ */
-	--pui-avatar-bg: var(--pui-color-gray-700);
-	--pui-avatar-text: var(--pui-color-gray-200);
-
-	/* ============================================
-	 * LOADER
-	 * ============================================ */
-	--pui-loader-color: var(--pui-color-secondary);
-
-	/* ============================================
-	 * SELECT
-	 * ============================================ */
-	--pui-select-option-hover-bg: var(--pui-color-dark-200);
-	--pui-select-option-selected-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * DATEPICKER
-	 * ============================================ */
-	--pui-datepicker-day-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * PAGINATION
-	 * ============================================ */
-	--pui-pagination-item-hover-bg: var(--pui-color-dark-200);
-	--pui-pagination-item-active-bg: var(--pui-color-secondary);
-	--pui-pagination-item-active-text: var(--pui-color-black);
-
-	/* ============================================
-	 * INTERACTIVE STATES
-	 * ============================================ */
-	--pui-bg-hover: rgba(255, 255, 255, 0.06);
-	--pui-bg-active: rgba(255, 255, 255, 0.1);
-
-	/* ============================================
-	 * DISABLED STATES
-	 * ============================================ */
-	--pui-border-disabled: #666;
-	--pui-bg-disabled: #444;
-	--pui-text-on-disabled: var(--pui-color-gray-600);
-}
+/**
+ * Dark Theme Overrides
+ * Override variables when .dark class is applied to the document.
+ */
+
+.dark {
+	/* ============================================
+	 * SURFACE COLORS
+	 * ============================================ */
+	--pui-bg-page: var(--pui-color-dark-100);
+	--pui-bg-surface: var(--pui-color-dark-400);
+	--pui-bg-surface-raised: var(--pui-color-dark-200);
+	--pui-bg-surface-sunken: var(--pui-color-dark-400);
+
+	/* ============================================
+	 * TEXT COLORS
+	 * ============================================ */
+	--pui-text-primary: var(--pui-color-off-white);
+	--pui-text-secondary: rgb(180, 180, 180);
+	--pui-text-muted: rgb(140, 140, 140);
+	--pui-text-disabled: rgb(100, 100, 100);
+	--pui-text-placeholder: rgb(115, 115, 115);
+	--pui-text-danger: var(--pui-color-danger-lighter);
+
+	/* ============================================
+	 * BORDER COLORS
+	 * ============================================ */
+	--pui-border-default: var(--pui-color-dark-border);
+	--pui-border-subtle: var(--pui-color-dark-border-subtle);
+	--pui-border-strong: rgb(75, 80, 90);
+
+	/* ============================================
+	 * ACCENT COLORS
+	 * ============================================ */
+	--pui-accent-color-rgb: var(--pui-color-secondary-rgb);
+	--pui-accent-color: var(--pui-color-secondary);
+	--pui-accent-text-color: var(--pui-color-black);
+
+	/* ============================================
+	 * SCROLLBAR
+	 * ============================================ */
+	--pui-scrollbar-track: var(--pui-color-dark-500);
+	--pui-scrollbar-thumb-border: var(--pui-color-black);
+
+	/* ============================================
+	 * FORM INPUTS
+	 * ============================================ */
+	--pui-input-bg: var(--pui-color-dark-200);
+	--pui-input-bg-disabled: var(--pui-color-dark-border);
+
+	/* ============================================
+	 * PAPER
+	 * ============================================ */
+	--pui-paper-title-bg: var(--pui-color-dark-400);
+	--pui-paper-title-border: var(--pui-color-dark-border-subtle);
+	--pui-paper-body-bg: var(--pui-color-dark-300);
+
+	/* ============================================
+	 * DIALOG
+	 * ============================================ */
+	--pui-dialog-backdrop: rgba(0, 0, 0, 0.75);
+
+	/* ============================================
+	 * SIDENAV
+	 * ============================================ */
+	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.2);
+	--pui-sidenav-item-active-bg: rgba(var(--pui-color-primary-rgb), 0.3);
+	--pui-sidenav-item-active-border: var(--pui-color-primary);
+
+	/* ============================================
+	 * DROPDOWN
+	 * ============================================ */
+	--pui-dropdown-item-hover-bg: var(--pui-color-dark-200);
+	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
+
+	/* ============================================
+	 * TOOLTIP
+	 * ============================================ */
+	--pui-tooltip-bg: var(--pui-color-gray-100);
+	--pui-tooltip-text: var(--pui-color-gray-900);
+
+	/* ============================================
+	 * TABLE
+	 * ============================================ */
+	--pui-table-header-bg: var(--pui-color-dark-400);
+	--pui-table-row-hover-bg: var(--pui-color-dark-200);
+
+	/* ============================================
+	 * TABS
+	 * ============================================ */
+	--pui-tab-hover-bg: var(--pui-color-dark-200);
+
+	/* ============================================
+	 * ALERT
+	 * ============================================ */
+	--pui-alert-info-bg: #032830;
+	--pui-alert-info-border: #087990;
+	--pui-alert-success-bg: #051b11;
+	--pui-alert-success-border: #0f5132;
+	--pui-alert-warning-bg: #332701;
+	--pui-alert-warning-border: #997404;
+	--pui-alert-danger-bg: #2c0b0e;
+	--pui-alert-danger-border: #842029;
+
+	/* ============================================
+	 * AVATAR
+	 * ============================================ */
+	--pui-avatar-bg: var(--pui-color-gray-700);
+	--pui-avatar-text: var(--pui-color-gray-200);
+
+	/* ============================================
+	 * LOADER
+	 * ============================================ */
+	--pui-loader-color: var(--pui-color-secondary);
+
+	/* ============================================
+	 * SELECT
+	 * ============================================ */
+	--pui-select-option-hover-bg: var(--pui-color-dark-200);
+	--pui-select-option-selected-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
+
+	/* ============================================
+	 * DATEPICKER
+	 * ============================================ */
+	--pui-datepicker-day-hover-bg: var(--pui-color-dark-200);
+
+	/* ============================================
+	 * PAGINATION
+	 * ============================================ */
+	--pui-pagination-item-hover-bg: var(--pui-color-dark-200);
+	--pui-pagination-item-active-bg: var(--pui-color-secondary);
+	--pui-pagination-item-active-text: var(--pui-color-black);
+
+	/* ============================================
+	 * INTERACTIVE STATES
+	 * ============================================ */
+	--pui-bg-hover: rgba(255, 255, 255, 0.06);
+	--pui-bg-active: rgba(255, 255, 255, 0.1);
+
+	/* ============================================
+	 * DISABLED STATES
+	 * ============================================ */
+	--pui-border-disabled: #666;
+	--pui-bg-disabled: #444;
+	--pui-text-on-disabled: var(--pui-color-gray-600);
+}

package/dist/styles/index.css

@@ -1,116 +1,116 @@
-/**
- * UI Library Core Styles
- *
- * Main entry point for all library styles.
- * Import this file to get default styling.
- *
- * To customize, override CSS variables after importing:
- *
- * @example
- * :root {
- *   --pui-color-primary: #1a365d;
- *   --pui-font-family-sans: 'Inter', sans-serif;
- * }
- */
-
-@import './reset.css';
-@import './tokens.css';
-@import './semantic.css';
-@import './components.css';
-@import './dark.css';
-@import './utilities.css';
-
-/* ============================================
- * BASE STYLES
- * ============================================ */
-
-:root {
-	background-color: var(--pui-bg-page);
-	color: var(--pui-text-primary);
-	font-family: var(--pui-font-family-sans);
-	font-size: var(--pui-font-size-md);
-	line-height: var(--pui-line-height-normal);
-}
-
-body {
-	margin: 0;
-	min-height: 100vh;
-}
-
-/* ============================================
- * LINK STYLES
- * ============================================ */
-
-a {
-	color: var(--pui-link-color);
-	text-decoration: none;
-	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
-}
-
-a:hover {
-	color: var(--pui-link-hover-color);
-}
-
-header a {
-	color: var(--pui-color-primary);
-	text-decoration: none;
-	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
-}
-
-.dark header a {
-	color: var(--pui-color-white);
-}
-
-.dark header a:hover {
-	color: var(--pui-color-secondary);
-}
-
-/* ============================================
- * SCROLLBAR STYLES
- * ============================================ */
-
-*::-webkit-scrollbar {
-	width: var(--pui-scrollbar-width);
-	height: var(--pui-scrollbar-width);
-}
-
-*::-webkit-scrollbar-track {
-	background: var(--pui-scrollbar-track);
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: var(--pui-scrollbar-thumb);
-	border-radius: 10px;
-	border: 5px solid var(--pui-scrollbar-thumb-border);
-}
-
-* {
-	scrollbar-width: thin;
-	scrollbar-color: var(--pui-scrollbar-thumb) var(--pui-scrollbar-track);
-}
-
-/* ============================================
- * FOCUS STYLES
- * ============================================ */
-
-:focus-visible {
-	outline: var(--pui-focus-ring-width) solid var(--pui-focus-ring-color);
-	outline-offset: var(--pui-focus-ring-offset);
-}
-
-:focus:not(:focus-visible) {
-	outline: none;
-}
-
-/* ============================================
- * SELECTION STYLES
- * ============================================ */
-
-::selection {
-	background-color: rgba(var(--pui-color-accent-rgb), 0.3);
-	color: inherit;
-}
-
-.dark ::selection {
-	background-color: rgba(var(--pui-color-secondary-rgb), 0.3);
-}
+/**
+ * UI Library Core Styles
+ *
+ * Main entry point for all library styles.
+ * Import this file to get default styling.
+ *
+ * To customize, override CSS variables after importing:
+ *
+ * @example
+ * :root {
+ *   --pui-color-primary: #1a365d;
+ *   --pui-font-family-sans: 'Inter', sans-serif;
+ * }
+ */
+
+@import './reset.css';
+@import './tokens.css';
+@import './semantic.css';
+@import './components.css';
+@import './dark.css';
+@import './utilities.css';
+
+/* ============================================
+ * BASE STYLES
+ * ============================================ */
+
+:root {
+	background-color: var(--pui-bg-page);
+	color: var(--pui-text-primary);
+	font-family: var(--pui-font-family-sans);
+	font-size: var(--pui-font-size-md);
+	line-height: var(--pui-line-height-normal);
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+}
+
+/* ============================================
+ * LINK STYLES
+ * ============================================ */
+
+a {
+	color: var(--pui-link-color);
+	text-decoration: none;
+	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
+}
+
+a:hover {
+	color: var(--pui-link-hover-color);
+}
+
+header a {
+	color: var(--pui-color-primary);
+	text-decoration: none;
+	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
+}
+
+.dark header a {
+	color: var(--pui-color-white);
+}
+
+.dark header a:hover {
+	color: var(--pui-color-secondary);
+}
+
+/* ============================================
+ * SCROLLBAR STYLES
+ * ============================================ */
+
+*::-webkit-scrollbar {
+	width: var(--pui-scrollbar-width);
+	height: var(--pui-scrollbar-width);
+}
+
+*::-webkit-scrollbar-track {
+	background: var(--pui-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: var(--pui-scrollbar-thumb);
+	border-radius: 10px;
+	border: 5px solid var(--pui-scrollbar-thumb-border);
+}
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--pui-scrollbar-thumb) var(--pui-scrollbar-track);
+}
+
+/* ============================================
+ * FOCUS STYLES
+ * ============================================ */
+
+:focus-visible {
+	outline: var(--pui-focus-ring-width) solid var(--pui-focus-ring-color);
+	outline-offset: var(--pui-focus-ring-offset);
+}
+
+:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* ============================================
+ * SELECTION STYLES
+ * ============================================ */
+
+::selection {
+	background-color: rgba(var(--pui-color-accent-rgb), 0.3);
+	color: inherit;
+}
+
+.dark ::selection {
+	background-color: rgba(var(--pui-color-secondary-rgb), 0.3);
+}