@lukasmurdock/remix-ui-styles 0.3.0 → 0.5.0

package/README.md

@@ -20,3 +20,26 @@ import "@lukasmurdock/remix-ui-styles/src/index.css"
 - `primitives`
 - `patterns`
 - `components`
+
+## Stable DataTable contract
+
+DataTable styling hooks are semver-stable in this package:
+
+- `data-part` hooks: `wrapper`, `header`, `row`, `sort-indicator`, `footer`, and related table parts
+- `--rf-data-table-*` CSS variables, including:
+  - `--rf-data-table-header-bg`
+  - `--rf-data-table-cell-padding-y`
+  - `--rf-data-table-cell-padding-x`
+  - `--rf-data-table-row-selected-bg`
+  - `--rf-data-table-footer-border`
+
+```css
+.rf-data-table-wrap {
+  --rf-data-table-header-bg: color-mix(in srgb, var(--rf-brand-default) 8%, var(--rf-surface-default));
+  --rf-data-table-cell-padding-y: 0.625rem;
+}
+
+.rf-data-table-wrap [data-part="sort-indicator"] {
+  opacity: 1;
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lukasmurdock/remix-ui-styles",
   "description": "Layered CSS tokens, primitives, and component styles for Remix Frame UI.",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components.css

@@ -234,6 +234,39 @@
   .rf-error {
     color: var(--rf-danger-default);
     font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .rf-form-error-summary {
+    border: 1px solid var(--rf-danger-default);
+    border-left-width: 0.35rem;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--rf-danger-default) 8%, var(--rf-surface-default));
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .rf-form-error-summary-title {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .rf-form-error-summary-list {
+    margin: 0.5rem 0 0;
+    padding-left: 1.25rem;
+    display: grid;
+    gap: 0.3rem;
+  }
+
+  .rf-form-error-summary-item {
+    margin: 0;
+  }
+
+  .rf-form-error-summary-link {
+    color: inherit;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
   }
 
   .rf-form-layout {
@@ -268,10 +301,14 @@
   .rf-form-layout-actions {
     display: flex;
     gap: 0.5rem;
-    justify-content: flex-end;
+    justify-content: flex-start;
     flex-wrap: wrap;
   }
 
+  .rf-form-layout-actions[data-align="end"] {
+    justify-content: flex-end;
+  }
+
   .rf-form-fieldset {
     margin: 0;
     border: 1px solid var(--rf-border-default);
@@ -301,6 +338,13 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  @media (max-width: 768px) {
+    .rf-form-layout .rf-form-layout-fields,
+    .rf-form-fieldset .rf-form-fieldset-fields {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
   .rf-form-message {
     margin: 0;
     font-size: 0.875rem;
@@ -2544,36 +2588,88 @@
     background: color-mix(in srgb, var(--rf-surface-default) 92%, var(--rf-color-gray-100));
   }
 
+  .rf-data-table-wrap,
+  .rf-data-table-loading,
+  .rf-data-table-error {
+    --rf-data-table-border-color: var(--rf-border-default);
+    --rf-data-table-border-radius: 0.875rem;
+    --rf-data-table-background: var(--rf-surface-default);
+    --rf-data-table-min-width: 680px;
+    --rf-data-table-header-bg: color-mix(in srgb, var(--rf-color-gray-100) 80%, var(--rf-surface-default));
+    --rf-data-table-cell-border-color: color-mix(in srgb, var(--rf-border-default) 70%, transparent);
+    --rf-data-table-cell-padding-y: 0.75rem;
+    --rf-data-table-cell-padding-x: 1rem;
+    --rf-data-table-caption-padding-top: 0.875rem;
+    --rf-data-table-caption-padding-bottom: 0.4rem;
+    --rf-data-table-caption-padding-x: 1rem;
+    --rf-data-table-row-hover-bg: color-mix(in srgb, var(--rf-brand-default) 5%, var(--rf-surface-default));
+    --rf-data-table-row-selected-bg: color-mix(in srgb, var(--rf-brand-default) 9%, var(--rf-surface-default));
+    --rf-data-table-sort-indicator-size: 0.85rem;
+    --rf-data-table-sort-indicator-opacity: 0.75;
+    --rf-data-table-selection-column-width: 2.75rem;
+    --rf-data-table-footer-border: color-mix(in srgb, var(--rf-border-default) 70%, transparent);
+    --rf-data-table-footer-padding-y: 0.65rem;
+    --rf-data-table-footer-padding-x: 0.875rem;
+    --rf-data-table-pagination-font-size: 0.84rem;
+    --rf-data-table-pagination-text: color-mix(in srgb, var(--rf-text-default) 72%, transparent);
+  }
+
   .rf-data-table-wrap {
-    border: 1px solid var(--rf-border-default);
-    border-radius: 0.875rem;
-    background: var(--rf-surface-default);
+    border: 1px solid var(--rf-data-table-border-color);
+    border-radius: var(--rf-data-table-border-radius);
+    background: var(--rf-data-table-background);
     overflow: clip;
     display: grid;
   }
 
+  .rf-data-table-wrap[data-density="compact"] {
+    --rf-data-table-cell-padding-y: 0.5rem;
+    --rf-data-table-cell-padding-x: 0.75rem;
+    --rf-data-table-footer-padding-y: 0.5rem;
+    --rf-data-table-footer-padding-x: 0.75rem;
+  }
+
+  .rf-data-table-wrap[data-density="comfortable"] {
+    --rf-data-table-cell-padding-y: 0.95rem;
+    --rf-data-table-cell-padding-x: 1.125rem;
+    --rf-data-table-footer-padding-y: 0.8rem;
+    --rf-data-table-footer-padding-x: 1rem;
+  }
+
+  .rf-data-table-wrap[data-surface="flat"] {
+    --rf-data-table-border-radius: 0;
+  }
+
+  .rf-data-table-wrap[data-surface="none"] {
+    --rf-data-table-border-color: transparent;
+    --rf-data-table-border-radius: 0;
+    --rf-data-table-background: transparent;
+    border: 0;
+  }
+
   .rf-data-table {
     width: 100%;
     border-collapse: collapse;
-    min-width: 680px;
+    min-width: var(--rf-data-table-min-width);
   }
 
   .rf-data-table caption {
     text-align: left;
     font-weight: 600;
-    padding: 0.875rem 1rem 0.4rem;
+    padding: var(--rf-data-table-caption-padding-top) var(--rf-data-table-caption-padding-x)
+      var(--rf-data-table-caption-padding-bottom);
   }
 
   .rf-data-table th,
   .rf-data-table td {
-    border-top: 1px solid color-mix(in srgb, var(--rf-border-default) 70%, transparent);
-    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--rf-data-table-cell-border-color);
+    padding: var(--rf-data-table-cell-padding-y) var(--rf-data-table-cell-padding-x);
     text-align: left;
     vertical-align: top;
   }
 
   .rf-data-table th {
-    background: color-mix(in srgb, var(--rf-color-gray-100) 80%, var(--rf-surface-default));
+    background: var(--rf-data-table-header-bg);
     font-weight: 600;
     border-top: 0;
   }
@@ -2594,22 +2690,35 @@
     background: transparent;
     color: inherit;
     font: inherit;
+    line-height: 1.2;
     cursor: pointer;
     padding: 0;
   }
 
   .rf-data-table-sort-indicator {
-    font-size: 0.85rem;
-    opacity: 0.75;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.15em;
+    font-size: var(--rf-data-table-sort-indicator-size);
+    opacity: var(--rf-data-table-sort-indicator-opacity);
   }
 
   .rf-data-table-select-col {
-    width: 2.75rem;
+    width: var(--rf-data-table-selection-column-width);
     text-align: center;
   }
 
+  .rf-data-table [data-part="row"][data-interactive="true"] {
+    cursor: pointer;
+  }
+
+  .rf-data-table [data-part="row"][data-interactive="true"]:hover {
+    background: var(--rf-data-table-row-hover-bg);
+  }
+
   .rf-data-table tbody tr[data-selected="true"] {
-    background: color-mix(in srgb, var(--rf-brand-default) 9%, var(--rf-surface-default));
+    background: var(--rf-data-table-row-selected-bg);
   }
 
   .rf-data-table-empty {
@@ -2619,16 +2728,30 @@
 
   .rf-data-table-loading,
   .rf-data-table-error {
-    border: 1px solid var(--rf-border-default);
-    border-radius: 0.875rem;
+    border: 1px solid var(--rf-data-table-border-color);
+    border-radius: var(--rf-data-table-border-radius);
     padding: 1rem;
     color: color-mix(in srgb, var(--rf-text-default) 70%, transparent);
-    background: color-mix(in srgb, var(--rf-surface-default) 92%, var(--rf-color-gray-100));
+    background: color-mix(in srgb, var(--rf-data-table-background) 92%, var(--rf-color-gray-100));
+  }
+
+  .rf-data-table-loading[data-surface="flat"],
+  .rf-data-table-error[data-surface="flat"] {
+    --rf-data-table-border-radius: 0;
+  }
+
+  .rf-data-table-loading[data-surface="none"],
+  .rf-data-table-error[data-surface="none"] {
+    --rf-data-table-border-color: transparent;
+    --rf-data-table-border-radius: 0;
+    --rf-data-table-background: transparent;
+    border: 0;
+    padding: 0;
   }
 
   .rf-data-table-footer {
-    border-top: 1px solid color-mix(in srgb, var(--rf-border-default) 70%, transparent);
-    padding: 0.65rem 0.875rem;
+    border-top: 1px solid var(--rf-data-table-footer-border);
+    padding: var(--rf-data-table-footer-padding-y) var(--rf-data-table-footer-padding-x);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -2637,8 +2760,8 @@
   }
 
   .rf-data-table-pagination-status {
-    font-size: 0.84rem;
-    color: color-mix(in srgb, var(--rf-text-default) 72%, transparent);
+    font-size: var(--rf-data-table-pagination-font-size);
+    color: var(--rf-data-table-pagination-text);
   }
 
   .rf-data-table-pagination-actions {

package/src/patterns.css

@@ -12,4 +12,11 @@
     color: var(--rf-text-default);
     background: var(--rf-surface-default);
   }
+
+  .rf-input-base[aria-invalid="true"],
+  .rf-field :is(select, input, textarea)[aria-invalid="true"] {
+    border-color: var(--rf-danger-default);
+    border-width: 2px;
+    padding-inline: calc(0.75rem - 1px);
+  }
 }