@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/styles/index.css

@@ -1,116 +0,0 @@
-/**
- * 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);
-}

package/dist/styles/reset.css

@@ -1,110 +0,0 @@
-/**
- * CSS Reset
- * A minimal, modern CSS reset for consistent cross-browser styling
- */
-
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-* {
-	margin: 0;
-}
-
-html {
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-}
-
-body {
-	line-height: var(--pui-line-height-normal, 1.5);
-	font-family: var(--pui-font-family-sans);
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-	display: block;
-	max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-	font: inherit;
-	color: inherit;
-}
-
-button {
-	cursor: pointer;
-	background: none;
-	border: none;
-	padding: 0;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	overflow-wrap: break-word;
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-}
-
-ul,
-ol {
-	list-style: none;
-	padding: 0;
-}
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-fieldset {
-	border: 0;
-	padding: 0;
-	margin: 0;
-	min-width: 0;
-}
-
-legend {
-	padding: 0;
-}
-
-textarea {
-	resize: vertical;
-}
-
-img,
-video {
-	height: auto;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-input[type='number'] {
-	-moz-appearance: textfield;
-}
-
-dialog:not([open]) {
-	display: none;
-}

package/dist/styles/semantic.css

@@ -1,86 +0,0 @@
-/**
- * Semantic Variables
- * Contextual variables derived from primitive tokens.
- */
-
-:root {
-	/* ============================================
-	 * SURFACE COLORS
-	 * ============================================ */
-	--pui-bg-page: var(--pui-color-gray-100);
-	--pui-bg-surface: var(--pui-color-white);
-	--pui-bg-surface-raised: var(--pui-color-gray-50);
-	--pui-bg-surface-sunken: var(--pui-color-gray-200);
-	--pui-bg-overlay: rgba(0, 0, 0, 0.5);
-	--pui-bg-overlay-dark: rgba(0, 0, 0, 0.65);
-
-	/* ============================================
-	 * TEXT COLORS
-	 * ============================================ */
-	--pui-text-primary: var(--pui-color-black);
-	--pui-text-secondary: var(--pui-color-gray-700);
-	--pui-text-muted: var(--pui-color-gray-600);
-	--pui-text-disabled: var(--pui-color-gray-400);
-	--pui-text-placeholder: rgb(161, 161, 170);
-
-	--pui-text-on-primary: var(--pui-color-white);
-	--pui-text-on-secondary: var(--pui-color-primary);
-	--pui-text-on-accent: var(--pui-color-primary);
-	--pui-text-on-danger: var(--pui-color-white);
-
-	--pui-text-danger: var(--pui-color-danger-light);
-	--pui-text-warning: var(--pui-color-warning);
-	--pui-text-success: var(--pui-color-success);
-	--pui-text-info: var(--pui-color-info);
-
-	/* ============================================
-	 * BORDER COLORS
-	 * ============================================ */
-	--pui-border-default: rgb(226, 232, 240);
-	--pui-border-subtle: var(--pui-color-gray-200);
-	--pui-border-strong: var(--pui-color-gray-400);
-	--pui-border-focus: var(--pui-color-primary);
-	--pui-border-error: var(--pui-color-danger);
-	--pui-border-success: var(--pui-color-success);
-
-	/* ============================================
-	 * ACCENT COLORS
-	 * ============================================ */
-	--pui-accent-color-rgb: var(--pui-color-primary-rgb);
-	--pui-accent-color: var(--pui-color-primary);
-	--pui-accent-text-color: var(--pui-color-off-white);
-
-	/* ============================================
-	 * LINK COLORS
-	 * ============================================ */
-	--pui-link-color: var(--pui-color-accent-dark);
-	--pui-link-hover-color: var(--pui-color-secondary-dark);
-
-	/* ============================================
-	 * FOCUS RING
-	 * ============================================ */
-	--pui-focus-ring-color: var(--pui-color-primary);
-	--pui-focus-ring-width: 2px;
-	--pui-focus-ring-offset: 2px;
-
-	/* ============================================
-	 * SCROLLBAR
-	 * ============================================ */
-	--pui-scrollbar-width: 19px;
-	--pui-scrollbar-track: var(--pui-color-white);
-	--pui-scrollbar-thumb: var(--pui-color-primary);
-	--pui-scrollbar-thumb-border: var(--pui-color-white);
-
-	/* ============================================
-	 * INTERACTIVE STATES
-	 * ============================================ */
-	--pui-bg-hover: rgba(0, 0, 0, 0.04);
-	--pui-bg-active: rgba(0, 0, 0, 0.08);
-
-	/* ============================================
-	 * DISABLED STATES
-	 * ============================================ */
-	--pui-border-disabled: #ccc;
-	--pui-bg-disabled: #f5f5f5;
-	--pui-text-on-disabled: var(--pui-color-gray-500);
-}

package/dist/styles/tokens.css

@@ -1,203 +0,0 @@
-/**
- * Design Tokens (Primitives)
- * Raw design values that form the foundation of the design system.
- */
-
-:root {
-	/* ============================================
-	 * COLORS - Brand Palette
-	 * ============================================ */
-	--pui-color-primary: #7a4a99;
-	--pui-color-primary-rgb: 122, 74, 153;
-	--pui-color-primary-light: #a271bd;
-	--pui-color-primary-dark: #433e72;
-	--pui-color-primary-darker: #302C51;
-
-	--pui-color-secondary: #e0ddf0;
-	--pui-color-secondary-rgb: 224, 221, 240;
-	--pui-color-secondary-hover: #b0abc9;
-	--pui-color-secondary-dark: #c4bde7;
-
-	--pui-color-accent-rgb: 135, 209, 201;
-	--pui-color-accent: #87d1c9;
-	--pui-color-accent-hover: #6bc4ba;
-	--pui-color-accent-light: #c3e8e4;
-	--pui-color-accent-dark: #318180;
-
-	/* ============================================
-	 * COLORS - Semantic Palette
-	 * ============================================ */
-	--pui-color-danger: #e03131;
-	--pui-color-danger-hover: #c92a2a;
-	--pui-color-danger-active: #b02a37;
-	--pui-color-danger-light: #ff5e5e;
-	--pui-color-danger-lighter: #ffa8a8;
-	--pui-color-danger-subtle: rgba(250, 82, 82, 0.12);
-	--pui-color-danger-subtle-dark: rgba(250, 82, 82, 0.2);
-
-	--pui-color-warning: #fcc419;
-	--pui-color-warning-hover: #fab005;
-	--pui-color-warning-active: #f59f00;
-	--pui-color-warning-dark: #e8b508;
-	--pui-color-warning-subtle: rgba(252, 196, 25, 0.12);
-	--pui-color-warning-subtle-dark: rgba(252, 196, 25, 0.2);
-
-	--pui-color-success: #37b24d;
-	--pui-color-success-hover: #2f9e44;
-	--pui-color-success-active: #2b8a3e;
-	--pui-color-success-dark: #2b8a3e;
-	--pui-color-success-subtle: rgba(55, 178, 77, 0.12);
-	--pui-color-success-subtle-dark: rgba(55, 178, 77, 0.2);
-
-	--pui-color-info: #1c7ed6;
-	--pui-color-info-hover: #1971c2;
-	--pui-color-info-dark: #1864ab;
-
-	/* ============================================
-	 * COLORS - Neutral Palette
-	 * ============================================ */
-	--pui-color-white: #ffffff;
-	--pui-color-black: #000000;
-	--pui-color-off-white: rgb(221, 221, 221);
-
-	--pui-color-gray-50: #f8f9fa;
-	--pui-color-gray-100: #f1f3f5;
-	--pui-color-gray-200: #e9ecef;
-	--pui-color-gray-300: #dee2e6;
-	--pui-color-gray-400: #ced4da;
-	--pui-color-gray-500: #adb5bd;
-	--pui-color-gray-600: #868e96;
-	--pui-color-gray-700: #495057;
-	--pui-color-gray-800: #343a40;
-	--pui-color-gray-900: #212529;
-
-	--pui-color-dark-100: rgb(36, 37, 40);
-	--pui-color-dark-200: rgb(33, 37, 41);
-	--pui-color-dark-300: rgb(25, 26, 28);
-	--pui-color-dark-400: rgb(18, 18, 18);
-	--pui-color-dark-500: #111111;
-	--pui-color-dark-border: rgb(55, 58, 64);
-	--pui-color-dark-border-subtle: rgb(46, 46, 46);
-
-	/* ============================================
-	 * TYPOGRAPHY
-	 * ============================================ */
-	--pui-font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-		Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--pui-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
-		'Liberation Mono', monospace;
-
-	--pui-font-size-xs: 0.75rem;
-	--pui-font-size-sm: 0.8125rem;
-	--pui-font-size-base: 0.875rem;
-	--pui-font-size-md: 1rem;
-	--pui-font-size-lg: 1.125rem;
-	--pui-font-size-xl: 1.25rem;
-	--pui-font-size-2xl: 1.5rem;
-	--pui-font-size-3xl: 1.875rem;
-	--pui-font-size-4xl: 2.25rem;
-
-	--pui-font-weight-thin: 100;
-	--pui-font-weight-light: 300;
-	--pui-font-weight-normal: 400;
-	--pui-font-weight-medium: 500;
-	--pui-font-weight-semibold: 600;
-	--pui-font-weight-bold: 700;
-	--pui-font-weight-extrabold: 800;
-	--pui-font-weight-black: 900;
-
-	--pui-line-height-none: 1;
-	--pui-line-height-tight: 1.25;
-	--pui-line-height-snug: 1.375;
-	--pui-line-height-normal: 1.5;
-	--pui-line-height-relaxed: 1.625;
-	--pui-line-height-loose: 2;
-
-	--pui-letter-spacing-tighter: -0.05em;
-	--pui-letter-spacing-tight: -0.025em;
-	--pui-letter-spacing-normal: 0;
-	--pui-letter-spacing-wide: 0.025em;
-	--pui-letter-spacing-wider: 0.05em;
-	--pui-letter-spacing-widest: 0.1em;
-
-	/* ============================================
-	 * SPACING
-	 * ============================================ */
-	--pui-spacing-0: 0;
-	--pui-spacing-px: 1px;
-	--pui-spacing-0_5: 0.125rem;
-	--pui-spacing-1: 0.25rem;
-	--pui-spacing-1_5: 0.375rem;
-	--pui-spacing-2: 0.5rem;
-	--pui-spacing-2_5: 0.625rem;
-	--pui-spacing-3: 0.75rem;
-	--pui-spacing-3_5: 0.875rem;
-	--pui-spacing-4: 1rem;
-	--pui-spacing-5: 1.25rem;
-	--pui-spacing-6: 1.5rem;
-	--pui-spacing-7: 1.75rem;
-	--pui-spacing-8: 2rem;
-	--pui-spacing-9: 2.25rem;
-	--pui-spacing-10: 2.5rem;
-	--pui-spacing-11: 2.75rem;
-	--pui-spacing-12: 3rem;
-	--pui-spacing-14: 3.5rem;
-	--pui-spacing-16: 4rem;
-	--pui-spacing-20: 5rem;
-	--pui-spacing-24: 6rem;
-
-	/* ============================================
-	 * BORDER RADIUS
-	 * ============================================ */
-	--pui-radius-none: 0;
-	--pui-radius-sm: 0.125rem;
-	--pui-radius-base: 0.25rem;
-	--pui-radius-md: 0.375rem;
-	--pui-radius-lg: 0.5rem;
-	--pui-radius-xl: 0.75rem;
-	--pui-radius-2xl: 1rem;
-	--pui-radius-3xl: 1.5rem;
-	--pui-radius-full: 9999px;
-
-	/* ============================================
-	 * SHADOWS
-	 * ============================================ */
-	--pui-shadow-none: none;
-	--pui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-	--pui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-	--pui-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-	--pui-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-	--pui-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-	--pui-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-	--pui-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-
-	/* ============================================
-	 * TRANSITIONS
-	 * ============================================ */
-	--pui-transition-fastest: 75ms;
-	--pui-transition-faster: 100ms;
-	--pui-transition-fast: 150ms;
-	--pui-transition-base: 200ms;
-	--pui-transition-slow: 300ms;
-	--pui-transition-slower: 500ms;
-
-	--pui-ease-linear: linear;
-	--pui-ease-in: cubic-bezier(0.4, 0, 1, 1);
-	--pui-ease-out: cubic-bezier(0, 0, 0.2, 1);
-	--pui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-	/* ============================================
-	 * Z-INDEX SCALE
-	 * ============================================ */
-	--pui-z-behind: -1;
-	--pui-z-base: 0;
-	--pui-z-dropdown: 50;
-	--pui-z-sticky: 100;
-	--pui-z-fixed: 200;
-	--pui-z-modal-backdrop: 300;
-	--pui-z-modal: 400;
-	--pui-z-popover: 500;
-	--pui-z-tooltip: 600;
-	--pui-z-toast: 700;
-}