@charstudios/pallet 0.1.0 → 0.3.0

package/dist/styles/variant-flat.css

@@ -1,32 +1,215 @@
-/*
- * Flat variant skin.
- *
- * The baseline look: crisp hairline borders, minimal shadows, tighter radii.
- * This mostly matches default shadcn/ui, so it is intentionally light-touch and
- * simply normalizes surfaces to hairline rings with no elevation.
- */
-
-@layer pallet-variants {
-  [data-pallet-variant="flat"] [data-slot="card"] {
-    box-shadow: none;
-    border-radius: var(--radius-2xl);
-  }
-
-  [data-pallet-variant="flat"] [data-slot="popover"],
-  [data-pallet-variant="flat"] [data-slot="dropdown-menu"],
-  [data-pallet-variant="flat"] [data-slot="dropdown-menu-content"],
-  [data-pallet-variant="flat"] [data-slot="select-content"] {
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--border);
-  }
-
-  [data-pallet-variant="flat"] [data-slot="button"] {
-    box-shadow: none;
-  }
-
-  [data-pallet-variant="flat"] [data-slot="input"],
-  [data-pallet-variant="flat"] [data-slot="textarea"],
-  [data-pallet-variant="flat"] [data-slot="select-trigger"] {
-    border-radius: var(--radius-md);
-  }
-}
+/*
+ * Flat variant skin.
+ *
+ * Crisp hairline borders, minimal shadows, tighter radii — the baseline shadcn
+ * look applied consistently across every common data-slot surface.
+ */
+
+@layer pallet-variants {
+  [data-pallet-variant="flat"] {
+    --pallet-control-radius: var(--radius-md);
+    --pallet-surface-radius: var(--radius-xl);
+    --pallet-overlay-radius: var(--radius-lg);
+    --pallet-chip-radius: var(--radius-md);
+    --pallet-surface-shadow: none;
+    --pallet-overlay-shadow: var(--shadow-md);
+    --pallet-control-shadow: none;
+  }
+
+  /* ── Controls ─────────────────────────────────────────────────────────── */
+  [data-pallet-variant="flat"] :is(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="native-select"],
+    [data-slot="native-select-wrapper"],
+    [data-slot="combobox-trigger"],
+    [data-slot="combobox-chip-input"],
+    [data-slot="command-input"],
+    [data-slot="input-otp"],
+    [data-slot="input-otp-slot"],
+    [data-slot="input-group"],
+    [data-slot="input-group-control"],
+    [data-slot="sidebar-input"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group"],
+    [data-slot="toggle-group-item"],
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="slider-thumb"],
+    [data-slot="calendar"],
+    [data-slot="pagination-link"],
+    [data-slot="button-group"],
+    [data-slot="input-group-button"]
+  ) {
+    border-radius: var(--pallet-control-radius);
+    box-shadow: var(--pallet-control-shadow);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="textarea"],
+    [data-slot="calendar"]
+  ) {
+    border-radius: var(--radius-lg);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="switch-thumb"],
+    [data-slot="slider-thumb"],
+    [data-slot="avatar"],
+    [data-slot="avatar-fallback"],
+    [data-slot="progress"],
+    [data-slot="progress-indicator"],
+    [data-slot="skeleton"]
+  ) {
+    border-radius: var(--radius-sm);
+  }
+
+  [data-pallet-variant="flat"] [data-slot="switch"],
+  [data-pallet-variant="flat"] [data-slot="slider-track"] {
+    border-radius: 9999px;
+  }
+
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  [data-pallet-variant="flat"] :is(
+    [data-slot="card"],
+    [data-slot="alert"],
+    [data-slot="accordion"],
+    [data-slot="accordion-item"],
+    [data-slot="tabs"],
+    [data-slot="tabs-list"],
+    [data-slot="table"],
+    [data-slot="table-container"],
+    [data-slot="item"],
+    [data-slot="item-group"],
+    [data-slot="empty"],
+    [data-slot="field"],
+    [data-slot="field-set"],
+    [data-slot="field-group"],
+    [data-slot="sidebar"],
+    [data-slot="sidebar-container"],
+    [data-slot="sidebar-inner"],
+    [data-slot="sidebar-inset"],
+    [data-slot="sidebar-group"],
+    [data-slot="carousel"],
+    [data-slot="chart"],
+    [data-slot="resizable-panel"],
+    [data-slot="scroll-area"],
+    [data-slot="breadcrumb"],
+    [data-slot="pagination"],
+    [data-slot="menubar"],
+    [data-slot="navigation-menu"],
+    [data-slot="navigation-menu-viewport"]
+  ) {
+    border-radius: var(--pallet-surface-radius);
+    box-shadow: var(--pallet-surface-shadow);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="card"],
+    [data-slot="alert"],
+    [data-slot="item"],
+    [data-slot="empty"],
+    [data-slot="accordion-item"]
+  ) {
+    border-color: var(--border);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="tabs-list"],
+    [data-slot="table-container"],
+    [data-slot="sidebar-menu-button"],
+    [data-slot="sidebar-menu-sub-button"],
+    [data-slot="breadcrumb-link"],
+    [data-slot="breadcrumb-page"],
+    [data-slot="badge"],
+    [data-slot="kbd"],
+    [data-slot="avatar-badge"]
+  ) {
+    border-radius: var(--pallet-chip-radius);
+  }
+
+  [data-pallet-variant="flat"] [data-slot="table-row"]:hover {
+    background-color: color-mix(in oklch, var(--muted) 70%, transparent);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="separator"],
+    [data-slot="sidebar-separator"],
+    [data-slot="dropdown-menu-separator"],
+    [data-slot="context-menu-separator"],
+    [data-slot="menubar-separator"],
+    [data-slot="command-separator"],
+    [data-slot="select-separator"],
+    [data-slot="combobox-separator"],
+    [data-slot="field-separator"],
+    [data-slot="item-separator"],
+    [data-slot="button-group-separator"]
+  ) {
+    background-color: var(--border);
+  }
+
+  /* ── Overlays / menus / portals ───────────────────────────────────────── */
+  [data-pallet-variant="flat"] :is(
+    [data-slot="popover-content"],
+    [data-slot="dropdown-menu-content"],
+    [data-slot="dropdown-menu-sub-content"],
+    [data-slot="context-menu-content"],
+    [data-slot="context-menu-sub-content"],
+    [data-slot="menubar-content"],
+    [data-slot="menubar-sub-content"],
+    [data-slot="select-content"],
+    [data-slot="combobox-content"],
+    [data-slot="combobox-list"],
+    [data-slot="command"],
+    [data-slot="command-list"],
+    [data-slot="hover-card-content"],
+    [data-slot="tooltip-content"],
+    [data-slot="navigation-menu-content"],
+    [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="drawer-content"]
+  ) {
+    border-radius: var(--pallet-overlay-radius);
+    box-shadow: var(--pallet-overlay-shadow);
+    border: 1px solid var(--border);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="dialog-overlay"],
+    [data-slot="alert-dialog-overlay"],
+    [data-slot="sheet-overlay"],
+    [data-slot="drawer-overlay"]
+  ) {
+    background-color: color-mix(in oklch, var(--foreground) 40%, transparent);
+  }
+
+  [data-pallet-variant="flat"] :is(
+    [data-slot="dropdown-menu-item"],
+    [data-slot="dropdown-menu-checkbox-item"],
+    [data-slot="dropdown-menu-radio-item"],
+    [data-slot="dropdown-menu-sub-trigger"],
+    [data-slot="context-menu-item"],
+    [data-slot="context-menu-checkbox-item"],
+    [data-slot="context-menu-radio-item"],
+    [data-slot="context-menu-sub-trigger"],
+    [data-slot="menubar-item"],
+    [data-slot="menubar-checkbox-item"],
+    [data-slot="menubar-radio-item"],
+    [data-slot="menubar-sub-trigger"],
+    [data-slot="menubar-trigger"],
+    [data-slot="select-item"],
+    [data-slot="combobox-item"],
+    [data-slot="command-item"],
+    [data-slot="navigation-menu-link"],
+    [data-slot="navigation-menu-trigger"]
+  ) {
+    border-radius: var(--radius-sm);
+  }
+}

package/dist/styles/variant-frosted.css

@@ -0,0 +1,216 @@
+/*
+ * Frosted variant skin.
+ *
+ * Quiet glassmorphism: light backdrop blur, hairline luminous borders, soft
+ * translucent fills. Intentionally restrained — no heavy sheens or deep shadows.
+ */
+
+@layer pallet-variants {
+  [data-pallet-variant="frosted"] {
+    --frost-blur: 12px;
+    --frost-saturate: 1.2;
+    --frost-bg: color-mix(in oklch, var(--card) 64%, transparent);
+    --frost-bg-strong: color-mix(in oklch, var(--card) 78%, transparent);
+    --frost-bg-soft: color-mix(in oklch, var(--background) 55%, transparent);
+    --frost-border: color-mix(in oklch, white 55%, var(--border));
+    --frost-border-muted: color-mix(in oklch, white 35%, var(--border));
+    --pallet-control-radius: var(--radius-md);
+    --pallet-surface-radius: var(--radius-xl);
+    --pallet-overlay-radius: var(--radius-lg);
+    --pallet-chip-radius: var(--radius-md);
+  }
+
+  :is(
+    .dark[data-pallet-variant="frosted"],
+    [data-pallet-variant="frosted"].dark,
+    .dark [data-pallet-variant="frosted"]
+  ) {
+    --frost-border: color-mix(in oklch, white 22%, var(--border));
+    --frost-border-muted: color-mix(in oklch, white 12%, var(--border));
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="card"],
+    [data-slot="alert"],
+    [data-slot="accordion-item"],
+    [data-slot="tabs-list"],
+    [data-slot="table-container"],
+    [data-slot="item"],
+    [data-slot="item-group"],
+    [data-slot="empty"],
+    [data-slot="field-set"],
+    [data-slot="sidebar"],
+    [data-slot="sidebar-container"],
+    [data-slot="sidebar-inner"],
+    [data-slot="sidebar-group"],
+    [data-slot="carousel"],
+    [data-slot="chart"],
+    [data-slot="menubar"],
+    [data-slot="navigation-menu-viewport"],
+    [data-slot="scroll-area"]
+  ) {
+    background-color: var(--frost-bg);
+    border: 1px solid var(--frost-border);
+    border-radius: var(--pallet-surface-radius);
+    box-shadow: 0 1px 0 color-mix(in oklch, white 40%, transparent);
+    backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
+    -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="button"],
+    [data-slot="toggle"],
+    [data-slot="toggle-group-item"],
+    [data-slot="pagination-link"],
+    [data-slot="carousel-previous"],
+    [data-slot="carousel-next"],
+    [data-slot="sidebar-trigger"],
+    [data-slot="sidebar-menu-button"],
+    [data-slot="sidebar-menu-sub-button"],
+    [data-slot="input-group-button"]
+  ) {
+    border-radius: var(--pallet-control-radius);
+    border-color: var(--frost-border-muted);
+    box-shadow: none;
+    backdrop-filter: blur(8px) saturate(var(--frost-saturate));
+    -webkit-backdrop-filter: blur(8px) saturate(var(--frost-saturate));
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="native-select"],
+    [data-slot="combobox-trigger"],
+    [data-slot="command-input"],
+    [data-slot="input-otp-slot"],
+    [data-slot="input-group"],
+    [data-slot="sidebar-input"],
+    [data-slot="calendar"]
+  ) {
+    background-color: var(--frost-bg-soft);
+    border: 1px solid var(--frost-border-muted);
+    border-radius: var(--pallet-control-radius);
+    box-shadow: none;
+    backdrop-filter: blur(8px) saturate(var(--frost-saturate));
+    -webkit-backdrop-filter: blur(8px) saturate(var(--frost-saturate));
+  }
+
+  [data-pallet-variant="frosted"] [data-slot="textarea"],
+  [data-pallet-variant="frosted"] [data-slot="calendar"] {
+    border-radius: var(--radius-lg);
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="combobox-trigger"],
+    [data-slot="command-input"],
+    [data-slot="sidebar-input"]
+  ):focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent);
+    outline: none;
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="badge"],
+    [data-slot="kbd"],
+    [data-slot="combobox-chip"]
+  ) {
+    background-color: var(--frost-bg);
+    border: 1px solid var(--frost-border-muted);
+    border-radius: var(--pallet-chip-radius);
+    box-shadow: none;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="slider-track"],
+    [data-slot="progress"],
+    [data-slot="avatar"],
+    [data-slot="avatar-fallback"],
+    [data-slot="skeleton"]
+  ) {
+    border-color: var(--frost-border-muted);
+    box-shadow: none;
+  }
+
+  [data-pallet-variant="frosted"] [data-slot="switch"],
+  [data-pallet-variant="frosted"] [data-slot="slider-track"],
+  [data-pallet-variant="frosted"] [data-slot="progress"] {
+    border-radius: 9999px;
+  }
+
+  [data-pallet-variant="frosted"] [data-slot="tabs-trigger"] {
+    border-radius: var(--pallet-control-radius);
+  }
+
+  [data-pallet-variant="frosted"] [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: var(--frost-bg-strong);
+    border: 1px solid var(--frost-border);
+    box-shadow: none;
+  }
+
+  [data-pallet-variant="frosted"] [data-slot="table-row"]:hover {
+    background-color: color-mix(in oklch, var(--accent) 40%, transparent);
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="popover-content"],
+    [data-slot="dropdown-menu-content"],
+    [data-slot="dropdown-menu-sub-content"],
+    [data-slot="context-menu-content"],
+    [data-slot="context-menu-sub-content"],
+    [data-slot="menubar-content"],
+    [data-slot="menubar-sub-content"],
+    [data-slot="select-content"],
+    [data-slot="combobox-content"],
+    [data-slot="combobox-list"],
+    [data-slot="command"],
+    [data-slot="command-list"],
+    [data-slot="hover-card-content"],
+    [data-slot="tooltip-content"],
+    [data-slot="navigation-menu-content"],
+    [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="drawer-content"]
+  ) {
+    background-color: var(--frost-bg-strong);
+    border: 1px solid var(--frost-border);
+    border-radius: var(--pallet-overlay-radius);
+    box-shadow: 0 8px 28px -12px color-mix(in oklch, var(--foreground) 28%, transparent);
+    backdrop-filter: blur(calc(var(--frost-blur) + 4px)) saturate(var(--frost-saturate));
+    -webkit-backdrop-filter: blur(calc(var(--frost-blur) + 4px))
+      saturate(var(--frost-saturate));
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="dialog-overlay"],
+    [data-slot="alert-dialog-overlay"],
+    [data-slot="sheet-overlay"],
+    [data-slot="drawer-overlay"]
+  ) {
+    background-color: color-mix(in oklch, var(--foreground) 22%, transparent);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  [data-pallet-variant="frosted"] :is(
+    [data-slot="dropdown-menu-item"],
+    [data-slot="context-menu-item"],
+    [data-slot="menubar-item"],
+    [data-slot="select-item"],
+    [data-slot="combobox-item"],
+    [data-slot="command-item"],
+    [data-slot="navigation-menu-link"]
+  ) {
+    border-radius: var(--radius-sm);
+  }
+}