diff --git a/packages/demo/src/components/demo/dialog.tsx b/packages/demo/src/components/demo/dialog.tsx index 3c60c71d..8c3876bd 100644 --- a/packages/demo/src/components/demo/dialog.tsx +++ b/packages/demo/src/components/demo/dialog.tsx @@ -134,12 +134,12 @@ export const DialogWithTableDemo = () => { Dialog Description - +

Card

- This card has an elevation of Floating. + This card has an elevation of Overlay.

diff --git a/packages/demo/src/components/demo/table.tsx b/packages/demo/src/components/demo/table.tsx index 5f04fff9..4821a4a1 100644 --- a/packages/demo/src/components/demo/table.tsx +++ b/packages/demo/src/components/demo/table.tsx @@ -1,26 +1,25 @@ import type { Elevation } from "@eqtylab/equality"; import { Badge, - Button, EmptyTableState, + IconButton, SortButton, Table, } from "@eqtylab/equality"; interface TableDemoProps { variant?: - | "unclickable" + | "default" | "clickable" - | "with-actions" | "with-border" | "with-sorter" | "empty-state" | "empty-state-custom"; - elevation: Elevation; + elevation?: Elevation; } export const TableDemo = ({ - variant = "unclickable", + variant = "default", elevation, }: TableDemoProps) => { const columns = [ @@ -28,9 +27,10 @@ export const TableDemo = ({ { key: "email", content: "Email" }, { key: "role", content: "Role" }, { key: "status", content: "Status" }, + { key: "actions", content: "" }, ]; - const demo_rows_unclickable = [ + const rows = [ { key: "1", cells: [ @@ -38,7 +38,14 @@ export const TableDemo = ({ { key: "email", content: "alice@example.com" }, { key: "role", content: "Admin" }, { key: "status", content: Active }, + { + key: "actions", + content: , + }, ], + ...(variant === "clickable" && { + onClick: () => console.log("Clicked row 1"), + }), }, { key: "2", @@ -47,7 +54,14 @@ export const TableDemo = ({ { key: "email", content: "bob@example.com" }, { key: "role", content: "User" }, { key: "status", content: Active }, + { + key: "actions", + content: , + }, ], + ...(variant === "clickable" && { + onClick: () => console.log("Clicked row 2"), + }), }, { key: "3", @@ -55,180 +69,23 @@ export const TableDemo = ({ { key: "name", content: "Charlie Brown" }, { key: "email", content: "charlie@example.com" }, { key: "role", content: "Viewer" }, - { key: "status", content: Inactive }, + { + key: "status", + content: Inactive, + }, + { + key: "actions", + content: , + }, ], + ...(variant === "clickable" && { + onClick: () => console.log("Clicked row 3"), + }), }, ]; - const demo_rows_clickable = [ - { - key: "1", - cells: [ - { key: "name", content: "Alice Cooper" }, - { key: "email", content: "alice@example.com" }, - { key: "role", content: "Admin" }, - { key: "status", content: "Active" }, - ], - onClick: () => console.log("Clicked row 1"), - }, - { - key: "2", - cells: [ - { key: "name", content: "Bob Smith" }, - { key: "email", content: "bob@example.com" }, - { key: "role", content: "User" }, - { key: "status", content: "Active" }, - ], - onClick: () => console.log("Clicked row 2"), - }, - { - key: "3", - cells: [ - { key: "name", content: "Charlie Brown" }, - { key: "email", content: "charlie@example.com" }, - { key: "role", content: "Viewer" }, - { key: "status", content: "Inactive" }, - ], - onClick: () => console.log("Clicked row 3"), - }, - ]; - - if (variant === "unclickable") { - return ( - - ); - } - - if (variant === "clickable") { - return ( -
- ); - } - - if (variant === "with-actions") { - const columns_with_actions = [ - { key: "name", content: "Name" }, - { key: "email", content: "Email" }, - { key: "role", content: "Role" }, - { key: "status", content: "Status" }, - { key: "actions", content: "Actions" }, - ]; - - const demo_rows_with_actions = [ - { - key: "1", - cells: [ - { key: "name", content: "Alice Cooper" }, - { key: "email", content: "alice@example.com" }, - { key: "role", content: "Admin" }, - { key: "status", content: "Active" }, - { - key: "actions", - content: ( - - ), - }, - ], - }, - { - key: "2", - cells: [ - { key: "name", content: "Bob Smith" }, - { key: "email", content: "bob@example.com" }, - { key: "role", content: "User" }, - { key: "status", content: "Active" }, - { - key: "actions", - content: ( - - ), - }, - ], - }, - { - key: "3", - cells: [ - { key: "name", content: "Charlie Brown" }, - { key: "email", content: "charlie@example.com" }, - { key: "role", content: "Viewer" }, - { key: "status", content: "Inactive" }, - { - key: "actions", - content: ( - - ), - }, - ], - }, - ]; - return ( -
- ); - } - - if (variant === "with-border") { - return ( -
- ); - } - - if (variant === "empty-state") { - return ( -
- ); - } - - if (variant === "empty-state-custom") { - return ( -
{}} - /> - } - /> - ); - } - if (variant === "with-sorter") { - const columns_with_sorter = [ + const sortColumns = [ { key: "name", content: ( @@ -281,16 +138,50 @@ export const TableDemo = ({ ), }, + { key: "actions", content: "" }, ]; + return
; + } + + if (variant === "empty-state") { return (
+ ); + } + + if (variant === "empty-state-custom") { + return ( +
{}} + /> + } /> ); } - return null; + return ( +
+ ); }; diff --git a/packages/demo/src/components/header.astro b/packages/demo/src/components/header.astro index 09b76b10..51a69eae 100644 --- a/packages/demo/src/components/header.astro +++ b/packages/demo/src/components/header.astro @@ -5,7 +5,7 @@ import { ThemeToggle } from "@demo/components/ui/theme-toggle"; ---
diff --git a/packages/demo/src/content/components/card.mdx b/packages/demo/src/content/components/card.mdx index 58550898..10b1b4a2 100644 --- a/packages/demo/src/content/components/card.mdx +++ b/packages/demo/src/content/components/card.mdx @@ -179,19 +179,3 @@ import { } - -### Floating - -{ - - - -
-

Card

-

- This card has an elevation of Floating. -

-
- - -} diff --git a/packages/demo/src/content/components/display-field.mdx b/packages/demo/src/content/components/display-field.mdx index c200ba73..eaaadac1 100644 --- a/packages/demo/src/content/components/display-field.mdx +++ b/packages/demo/src/content/components/display-field.mdx @@ -88,12 +88,3 @@ import { ELEVATION } from "@eqtylab/equality"; elevation={ELEVATION.OVERLAY} withinCard /> - -### Floating - - diff --git a/packages/demo/src/content/components/icon.mdx b/packages/demo/src/content/components/icon.mdx index ac2567d9..420768cf 100644 --- a/packages/demo/src/content/components/icon.mdx +++ b/packages/demo/src/content/components/icon.mdx @@ -94,12 +94,3 @@ import { ELEVATION } from "@eqtylab/equality"; background="square" elevation={ELEVATION.OVERLAY} /> - -### Floating - - diff --git a/packages/demo/src/content/components/info-card.mdx b/packages/demo/src/content/components/info-card.mdx index fb4f87c8..c30c0860 100644 --- a/packages/demo/src/content/components/info-card.mdx +++ b/packages/demo/src/content/components/info-card.mdx @@ -48,12 +48,3 @@ import { ELEVATION } from "@eqtylab/equality"; icon="Shield" elevation={ELEVATION.OVERLAY} /> - -### Floating - - diff --git a/packages/demo/src/content/components/select.mdx b/packages/demo/src/content/components/select.mdx index e6cb4c06..98f60214 100644 --- a/packages/demo/src/content/components/select.mdx +++ b/packages/demo/src/content/components/select.mdx @@ -38,7 +38,3 @@ import { ELEVATION } from "@eqtylab/equality"; ### Overlay - -### Floating - - diff --git a/packages/demo/src/content/components/sort-button.mdx b/packages/demo/src/content/components/sort-button.mdx index 073ebdf6..979b5cb9 100644 --- a/packages/demo/src/content/components/sort-button.mdx +++ b/packages/demo/src/content/components/sort-button.mdx @@ -1,10 +1,67 @@ --- layout: "@demo/layouts/mdx-layout.astro" heading: "Sort Button" +description: "A button for toggling column sort direction in tables and lists." --- import { SortButtonDemo } from "@demo/components/demo/sort-button"; -## Default +## Overview + +SortButton is a control for sorting data by a given field. It displays directional arrow icons to indicate the current sort state. It is primarily used inside [`
`](/components/table) column headers but can work anywhere a sort toggle is needed. + +## Usage + +Import the component: + +```ts +import { SortButton } from "@eqtylab/equality"; +``` + +Basic usage with required properties: + +```tsx + handleSort(field)} +> + Name + +``` + +## Variants + +### Default + +Click each button to toggle sort direction. Clicking a different button changes the active sort field. + +### With Custom Icon + +The `icon` prop allows rendering a custom icon before the label. + +```tsx +} +> + Name + +``` + +## Props + +| Name | Description | Type | Default | Required | +| --------------- | -------------------------------------------------------- | ------------------------- | ------- | -------- | +| `field` | The field identifier this button sorts by | `string` | | ✅ | +| `children` | Label content displayed inside the button | `ReactNode` | | ✅ | +| `sortField` | The currently active sort field, or null if none | `string \| null` | | ✅ | +| `sortDirection` | The current sort direction | `asc`, `desc` | | ✅ | +| `onSort` | Callback fired with the field when the button is clicked | `(field: string) => void` | | ✅ | +| `icon` | Custom icon rendered before the label | `ReactNode` | | ❌ | diff --git a/packages/demo/src/content/components/table.mdx b/packages/demo/src/content/components/table.mdx index 3088fc13..5e4b6820 100644 --- a/packages/demo/src/content/components/table.mdx +++ b/packages/demo/src/content/components/table.mdx @@ -1,30 +1,93 @@ --- layout: "@demo/layouts/mdx-layout.astro" heading: "Table" -description: "Table with sizes and variants" +description: "A data table for displaying structured information in rows and columns." --- import { TableDemo } from "@demo/components/demo/table"; import { ELEVATION } from "@eqtylab/equality"; -## Content Options +## Overview -### Unclickable +The Table component displays structured data in rows and columns. It supports clickable rows, sortable column headers, bordered styling, elevation levels, and empty state messaging. Column and cell `content` accepts any `ReactNode`, allowing badges, buttons, and other components inline. + +## Usage + +Import the component: + +```ts +import { Table } from "@eqtylab/equality"; +``` + +Basic usage with required properties: + +```tsx +
+``` + +## Variants + +### Default -### Clickable +### Clickable Rows - +Rows accept an `onClick` handler, which applies hover and cursor styles. -### With Actions + - +### Sortable Columns -### Column items with custom component +Use [``](/components/sort-button) in column headers to add interactive sort controls. +#### Usage + +```tsx +import { SortButton, Table } from "@eqtylab/equality"; + +
+ Name + + ), + }, + ]} + rows={rows} +/>; +``` + +### With Border + +Apply a border to tables with the `border` prop. This should be added most places `
` is used, except for when it lives within a different container which already has a border applied. + + + ### Empty State When `rows` is empty and `emptyState` is provided, the table keeps column headers visible and renders the empty state content spanning all columns. @@ -37,12 +100,6 @@ The `emptyState` prop accepts any `ReactNode`, so you can pass a custom componen -## Style Options - -### With Border - - - ## Elevations ### Sunken @@ -61,58 +118,12 @@ The `emptyState` prop accepts any `ReactNode`, so you can pass a custom componen -### Floating - - - -## Elevations With Border - -### Sunken - - - -### Base (default) - - - -### Raised - - - -### Overlay - - - -### Floating - - - ## Props -| Name | Description | Type | Default | Required | -| ------------ | ------------------------------------------------------------ | ------------------------------------------------- | ------- | -------- | -| `columns` | Column definitions with key, content, and optional className | `TableColumn[]` | | ✅ | -| `rows` | Row data with key, cells, and optional onClick/className | `TableRowData[]` | | ✅ | -| `border` | Adds a border and rounded corners around the table | `boolean` | `false` | ❌ | -| `elevation` | Controls the shadow and border elevation level | `sunken`, `base`, `raised`, `overlay`, `floating` | `base` | ❌ | -| `emptyState` | Content rendered when rows is empty, spanning all columns | `ReactNode` | | ❌ | +| Name | Description | Type | Default | Required | +| ------------ | ------------------------------------------------------------ | ------------------------------------- | ------- | -------- | +| `columns` | Column definitions with key, content, and optional className | `TableColumn[]` | | ✅ | +| `rows` | Row data with key, cells, and optional onClick/className | `TableRowData[]` | | ✅ | +| `border` | Adds a border and rounded corners around the table | `boolean` | `false` | ❌ | +| `elevation` | Controls the shadow and border elevation level | `sunken`, `base`, `raised`, `overlay` | `base` | ❌ | +| `emptyState` | Content rendered when rows is empty, spanning all columns | `ReactNode` | | ❌ | diff --git a/packages/demo/src/pages/getting-started/elevation.mdx b/packages/demo/src/pages/getting-started/elevation.mdx index e7dd7ed1..af8c267a 100644 --- a/packages/demo/src/pages/getting-started/elevation.mdx +++ b/packages/demo/src/pages/getting-started/elevation.mdx @@ -68,12 +68,6 @@ Use for UI that overlays the page and requires clear separation from the underly -### Floating - -An elevated surface reserved for UI that _must_ remain visually dominant over all other elements. - - - ## Elevation component prop Some components have an `elevation` prop that can be used to set the elevation of the component. By default, they will be set to the one that makes most sense in a standard page flow. @@ -105,7 +99,7 @@ The following components have an `elevation` prop: | Alert Dialog | Overlay | | Dialog | Overlay | | Drawer | Overlay | -| Dropdown Menu | Floating | -| Popover | Floating | +| Dropdown Menu | Overlay | +| Popover | Overlay | | Sheet | Overlay | | Tooltip | Overlay | diff --git a/packages/tokens/equality-tokens.json b/packages/tokens/equality-tokens.json index ec1ff532..a4f4a4f2 100644 --- a/packages/tokens/equality-tokens.json +++ b/packages/tokens/equality-tokens.json @@ -25,14 +25,6 @@ "hex": "#000000" } }, - "background-floating": { - "$type": "color", - "$value": { - "colorSpace": "display-p3", - "components": [0.1399, 0.14, 0.1485], - "hex": "#242426" - } - }, "background-overlay": { "$type": "color", "$value": { @@ -335,14 +327,6 @@ "hex": "#29292B" } }, - "border-floating": { - "$type": "color", - "$value": { - "colorSpace": "display-p3", - "components": [0.3328, 0.3328, 0.3426], - "hex": "#555557" - } - }, "border-overlay": { "$type": "color", "$value": { @@ -927,64 +911,56 @@ "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.8264, 0.8324, 0.8394], - "hex": "#D3D4D6" + "components": [1, 1, 1], + "hex": "#FFFFFF" } }, "background-base": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.8264, 0.8324, 0.8394], - "hex": "#D3D4D6" + "components": [1, 1, 1], + "hex": "#FFFFFF" } }, "background-bottom": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.6765, 0.6823, 0.689], - "hex": "#ADAEB0" - } - }, - "background-floating": { - "$type": "color", - "$value": { - "colorSpace": "display-p3", - "components": [0.9424, 0.9485, 0.9557], - "hex": "#F0F2F4" + "components": [0.7758, 0.7817, 0.7887], + "hex": "#C6C7C9" } }, "background-overlay": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.9034, 0.9095, 0.9166], - "hex": "#E6E8EA" + "components": [0.9946, 0.9998, 0.9999], + "hex": "#FDFFFF" } }, "background-raised": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.8648, 0.8708, 0.8779], - "hex": "#DDDEE0" + "components": [0.9554, 0.9616, 0.9688], + "hex": "#F4F5F7" } }, "background-sunken": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.7758, 0.7817, 0.7887], - "hex": "#C6C7C9" + "components": [0.8648, 0.8708, 0.8779], + "hex": "#DDDEE0" } }, "background-top": { "$type": "color", "$value": { "colorSpace": "display-p3", - "components": [0.9817, 0.9878, 0.9951], - "hex": "#FAFCFE" + "components": [0.9294, 0.9355, 0.9426], + "hex": "#EDEFF0" } }, "badge": { @@ -1339,14 +1315,6 @@ "hex": "#9D9EA0" } }, - "border-floating": { - "$type": "color", - "$value": { - "colorSpace": "display-p3", - "components": [0.8011, 0.807, 0.814], - "hex": "#CCCED0" - } - }, "border-overlay": { "$type": "color", "$value": { diff --git a/packages/tokens/equality-tokens.pinwheel b/packages/tokens/equality-tokens.pinwheel index 72f580d6..653bc9ef 100644 --- a/packages/tokens/equality-tokens.pinwheel +++ b/packages/tokens/equality-tokens.pinwheel @@ -1198,7 +1198,7 @@ - 0.82643 0.8324 0.83943 1 + 1 1 1 1 0.060177 0.060194 0.067867 1 @@ -1238,7 +1238,7 @@ - 0.67651 0.68226 0.68903 1 + 0.77584 0.78174 0.78869 1 1.094e-05 5.131e-06 6.4691e-05 1 @@ -1256,7 +1256,7 @@ - 0.77584 0.78174 0.78869 1 + 0.86476 0.87078 0.87787 1 0.035468 0.03547 0.042676 1 @@ -1283,7 +1283,7 @@ - 0.86476 0.87078 0.87787 1 + 0.95543 0.96157 0.96879 1 0.085234 0.085263 0.093244 1 @@ -1301,7 +1301,7 @@ - 0.90341 0.90948 0.91663 1 + 0.99459 0.99978 0.99989 1 0.11214 0.11218 0.12044 1 @@ -1310,24 +1310,6 @@ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9 - - 4E15FED3-BFA6-47D4-910B-D285FCDB57F1 - Background Floating - DisplayP3 - 7 - lightanddark - - - - 0.94238 0.9485 0.9557 1 - - - 0.13994 0.13998 0.14851 1 - - - - 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9 - D2D914F9-2851-4DF5-B8E3-71FF9CF3EDA9 Background Top @@ -1337,7 +1319,7 @@ - 0.98165 0.98782 0.99508 1 + 0.92935 0.93546 0.94264 1 0.13994 0.13998 0.14851 1 @@ -1422,24 +1404,6 @@ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9 - - 55AD9E0C-C95D-4474-BF8F-8A5007570498 - Border Floating - DisplayP3 - 7 - lightanddark - - - - 0.80106 0.80699 0.81398 1 - - - 0.33276 0.33284 0.34262 1 - - - - 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9 - C1513DB9-AC65-4188-A286-3678335AC5E6 Border Top diff --git a/packages/ui/package.json b/packages/ui/package.json index 89775618..117632c3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -2,7 +2,7 @@ "name": "@eqtylab/equality", "description": "EQTYLab's component and token-based design system", "homepage": "https://equality.eqtylab.io/", - "version": "1.2.4", + "version": "1.3.0", "license": "Apache-2.0", "keywords": [ "component library", diff --git a/packages/ui/src/components/card/card.module.css b/packages/ui/src/components/card/card.module.css index 953bf591..732c4308 100644 --- a/packages/ui/src/components/card/card.module.css +++ b/packages/ui/src/components/card/card.module.css @@ -61,7 +61,3 @@ .card--overlay { @apply bg-background-overlay shadow-shadow-overlay border-border-overlay; } - -.card--floating { - @apply bg-background-floating shadow-shadow-floating border-border-floating; -} diff --git a/packages/ui/src/components/display-field/display-field.module.css b/packages/ui/src/components/display-field/display-field.module.css index b3917563..2546655a 100644 --- a/packages/ui/src/components/display-field/display-field.module.css +++ b/packages/ui/src/components/display-field/display-field.module.css @@ -95,10 +95,10 @@ @apply shadow-shadow-raised; } .display-field--raised .display-field-inner { - @apply bg-background-raised border-border-raised; + @apply bg-background-raised border-border-base; } .display-field--raised .slot { - @apply bg-background-base border-border-base; + @apply bg-background-sunken border-border-base; } .display-field--overlay { @@ -108,15 +108,5 @@ @apply bg-background-overlay border-border-overlay; } .display-field--overlay .slot { - @apply bg-background-raised border-border-raised; -} - -.display-field--floating { - @apply shadow-shadow-floating border-border-floating; -} -.display-field--floating .display-field-inner { - @apply bg-background-floating border-border-floating; -} -.display-field--floating .slot { - @apply bg-background-overlay border-border-overlay; + @apply bg-background-sunken border-border-base; } diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css index d705793e..b4a794b7 100644 --- a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css +++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css @@ -69,5 +69,5 @@ } .dropdown-menu-content { - @apply bg-background-floating shadow-shadow-floating border-border-floating; + @apply bg-background-overlay shadow-shadow-overlay border-border-overlay; } diff --git a/packages/ui/src/components/icon/icon.module.css b/packages/ui/src/components/icon/icon.module.css index ac9ba871..4f1592f9 100644 --- a/packages/ui/src/components/icon/icon.module.css +++ b/packages/ui/src/components/icon/icon.module.css @@ -72,7 +72,3 @@ .icon-container--overlay:not(.background--transparent) { @apply bg-background-overlay shadow-shadow-overlay border-border-overlay; } - -.icon-container--floating:not(.background--transparent) { - @apply bg-background-floating shadow-shadow-floating border-border-floating; -} diff --git a/packages/ui/src/components/metric-card/metric-card.module.css b/packages/ui/src/components/metric-card/metric-card.module.css index 7c853d35..b9801974 100644 --- a/packages/ui/src/components/metric-card/metric-card.module.css +++ b/packages/ui/src/components/metric-card/metric-card.module.css @@ -74,7 +74,3 @@ .metric-card--overlay { @apply bg-background-overlay shadow-shadow-overlay border-border-overlay; } - -.metric-card--floating { - @apply bg-background-floating shadow-shadow-floating border-border-floating; -} diff --git a/packages/ui/src/components/popover/popover.module.css b/packages/ui/src/components/popover/popover.module.css index 6b4f496b..608fc2e4 100644 --- a/packages/ui/src/components/popover/popover.module.css +++ b/packages/ui/src/components/popover/popover.module.css @@ -1,9 +1,9 @@ @reference '../../theme/theme.module.css'; .popover-content { - @apply bg-background-floating text-text-primary outline-hidden; - @apply border-border-floating border; - @apply shadow-shadow-floating shadow-sm; + @apply bg-background-overlay text-text-primary outline-hidden; + @apply border-border-overlay border; + @apply shadow-shadow-overlay shadow-sm; @apply z-modal w-72 rounded-md p-4; @apply origin-(--radix-popover-content-transform-origin); @apply animate-popup-content; diff --git a/packages/ui/src/components/select/select.module.css b/packages/ui/src/components/select/select.module.css index dada7d7b..9e2c37de 100644 --- a/packages/ui/src/components/select/select.module.css +++ b/packages/ui/src/components/select/select.module.css @@ -90,10 +90,3 @@ .select-content--overlay .select-item { --mix-color: var(--color-background-overlay); } - -.select-content--floating { - @apply bg-background-floating shadow-shadow-floating border-border-floating; -} -.select-content--floating .select-item { - --mix-color: var(--color-background-floating); -} diff --git a/packages/ui/src/components/sort-button/sort-button.module.css b/packages/ui/src/components/sort-button/sort-button.module.css index 4e24bf83..524da5fb 100644 --- a/packages/ui/src/components/sort-button/sort-button.module.css +++ b/packages/ui/src/components/sort-button/sort-button.module.css @@ -3,7 +3,7 @@ .sort-button { @apply text-left font-medium transition-colors; @apply flex items-center gap-2; - @apply hover:text-brand-primary; + @apply hover:text-text-link; @apply [&>svg]:size-4; } diff --git a/packages/ui/src/components/table/table-components.module.css b/packages/ui/src/components/table/table-components.module.css index 9085a37c..ec303d58 100644 --- a/packages/ui/src/components/table/table-components.module.css +++ b/packages/ui/src/components/table/table-components.module.css @@ -1,7 +1,6 @@ @reference '../../theme/theme.module.css'; .table { - @apply relative; @apply w-full overflow-auto; } @@ -23,19 +22,15 @@ @apply font-medium; } -.table-row { - @apply border-b transition-colors; -} - .table-head { - @apply h-12; + @apply h-10; @apply px-4 align-middle; @apply text-text-primary text-left font-medium transition-colors; @apply [&:has([role=checkbox])]:pr-0; } .table-cell { - @apply px-4 py-3; + @apply px-4 py-2; @apply align-middle; @apply [&:has([role=checkbox])]:pr-0; } @@ -52,6 +47,10 @@ } .table--sunken .table-body { @apply bg-background-sunken; + --table-stripe-bg: light-dark( + color-mix(in oklch, var(--color-background-sunken), black 2%), + color-mix(in oklch, var(--color-background-sunken), white 4%) + ); } .table--base .table-header, @@ -60,6 +59,10 @@ } .table--base .table-body { @apply bg-background-base; + --table-stripe-bg: light-dark( + color-mix(in oklch, var(--color-background-base), black 2%), + color-mix(in oklch, var(--color-background-base), white 4%) + ); } .table--raised .table-header, @@ -68,20 +71,24 @@ } .table--raised .table-body { @apply bg-background-raised; + --table-stripe-bg: light-dark( + color-mix(in oklch, var(--color-background-raised), black 2%), + color-mix(in oklch, var(--color-background-raised), white 4%) + ); } .table--overlay .table-header, .table--overlay .table-footer { - @apply bg-background-floating; + @apply bg-background-overlay; } .table--overlay .table-body { @apply bg-background-overlay; + --table-stripe-bg: light-dark( + color-mix(in oklch, var(--color-background-overlay), black 2%), + color-mix(in oklch, var(--color-background-overlay), white 4%) + ); } -.table--floating .table-header, -.table--floating .table-footer { - @apply bg-background-top; -} -.table--floating .table-body { - @apply bg-background-floating; +.table-body .table-row:nth-child(even) { + background-color: var(--table-stripe-bg); } diff --git a/packages/ui/src/components/table/table.module.css b/packages/ui/src/components/table/table.module.css index e600bf5a..a8f91559 100644 --- a/packages/ui/src/components/table/table.module.css +++ b/packages/ui/src/components/table/table.module.css @@ -7,9 +7,10 @@ .table-row-clickable { --mix-color: var(--color-brand-primary); --hover-darken: 50%; + --hover-lighten: 50%; @apply cursor-pointer; - @apply hover:bg-mixed-dark; - @apply data-[state=selected]:bg-mixed-dark; + @apply hover:bg-mixed-light! dark:hover:bg-mixed-dark!; + @apply data-[state=selected]:bg-mixed-light dark:data-[state=selected]:bg-mixed-dark; } .table-border { @@ -50,10 +51,3 @@ .table--overlay.table-border { @apply border-border-overlay; } - -.table--floating { - @apply shadow-shadow-floating; -} -.table--floating.table-border { - @apply border-border-floating; -} diff --git a/packages/ui/src/lib/elevations.ts b/packages/ui/src/lib/elevations.ts index e81e1a3f..4a151de7 100644 --- a/packages/ui/src/lib/elevations.ts +++ b/packages/ui/src/lib/elevations.ts @@ -5,7 +5,6 @@ export const ELEVATION = { BASE: 'base', RAISED: 'raised', OVERLAY: 'overlay', - FLOATING: 'floating', }; export type Elevation = (typeof ELEVATION)[keyof typeof ELEVATION]; diff --git a/packages/ui/src/theme/generated/color-vars.css b/packages/ui/src/theme/generated/color-vars.css index d0acf655..c19eba2b 100644 --- a/packages/ui/src/theme/generated/color-vars.css +++ b/packages/ui/src/theme/generated/color-vars.css @@ -9,14 +9,13 @@ --color-amber-700: color(display-p3 0.4327 0.2812 0.1347); --color-amber-800: color(display-p3 0.2643 0.1753 0.09139); --color-amber-900: color(display-p3 0.1121 0.07777 0.04646); - --color-background-base: color(display-p3 0.8264 0.8324 0.8394); - --color-background-bottom: color(display-p3 0.6765 0.6823 0.689); - --color-background-floating: color(display-p3 0.9424 0.9485 0.9557); - --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166); - --color-background-raised: color(display-p3 0.8648 0.8708 0.8779); - --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887); - --color-background-top: color(display-p3 0.9817 0.9878 0.9951); - --color-background: color(display-p3 0.8264 0.8324 0.8394); + --color-background-base: color(display-p3 1 1 1); + --color-background-bottom: color(display-p3 0.7758 0.7817 0.7887); + --color-background-overlay: color(display-p3 0.9946 0.9998 0.9999); + --color-background-raised: color(display-p3 0.9554 0.9616 0.9688); + --color-background-sunken: color(display-p3 0.8648 0.8708 0.8779); + --color-background-top: color(display-p3 0.9294 0.9355 0.9426); + --color-background: color(display-p3 1 1 1); --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417); @@ -59,7 +58,6 @@ --color-blue-900: color(display-p3 0.06177 0.08243 0.1475); --color-border-base: color(display-p3 0.7432 0.7432 0.7432); --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281); - --color-border-floating: color(display-p3 0.8011 0.807 0.814); --color-border-overlay: color(display-p3 0.8011 0.807 0.814); --color-border-raised: color(display-p3 0.7383 0.7441 0.751); --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432); @@ -251,7 +249,6 @@ /* Dark theme */ --dark-color-background-base: color(display-p3 0.06018 0.06019 0.06787); --dark-color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469); - --dark-color-background-floating: color(display-p3 0.1399 0.14 0.1485); --dark-color-background-overlay: color(display-p3 0.1121 0.1122 0.1204); --dark-color-background-raised: color(display-p3 0.08523 0.08526 0.09324); --dark-color-background-sunken: color(display-p3 0.03547 0.03547 0.04268); @@ -289,7 +286,6 @@ --dark-color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204); --dark-color-border-base: color(display-p3 0.1792 0.1792 0.1792); --dark-color-border-bottom: color(display-p3 0.1589 0.159 0.1677); - --dark-color-border-floating: color(display-p3 0.3328 0.3328 0.3426); --dark-color-border-overlay: color(display-p3 0.2796 0.2796 0.2891); --dark-color-border-raised: color(display-p3 0.228 0.2281 0.2372); --dark-color-border-sunken: color(display-p3 0.1792 0.1792 0.1792); diff --git a/packages/ui/src/theme/generated/dark-tokens.css b/packages/ui/src/theme/generated/dark-tokens.css index 20b94fc3..fd482ea8 100644 --- a/packages/ui/src/theme/generated/dark-tokens.css +++ b/packages/ui/src/theme/generated/dark-tokens.css @@ -2,7 +2,6 @@ color-scheme: dark; --color-background-base: color(display-p3 0.06018 0.06019 0.06787); --color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469); - --color-background-floating: color(display-p3 0.1399 0.14 0.1485); --color-background-overlay: color(display-p3 0.1121 0.1122 0.1204); --color-background-raised: color(display-p3 0.08523 0.08526 0.09324); --color-background-sunken: color(display-p3 0.03547 0.03547 0.04268); @@ -40,7 +39,6 @@ --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204); --color-border-base: color(display-p3 0.1792 0.1792 0.1792); --color-border-bottom: color(display-p3 0.1589 0.159 0.1677); - --color-border-floating: color(display-p3 0.3328 0.3328 0.3426); --color-border-overlay: color(display-p3 0.2796 0.2796 0.2891); --color-border-raised: color(display-p3 0.228 0.2281 0.2372); --color-border-sunken: color(display-p3 0.1792 0.1792 0.1792); diff --git a/packages/ui/src/theme/generated/global-dark-tokens.css b/packages/ui/src/theme/generated/global-dark-tokens.css index 9978c20f..eb43466d 100644 --- a/packages/ui/src/theme/generated/global-dark-tokens.css +++ b/packages/ui/src/theme/generated/global-dark-tokens.css @@ -2,7 +2,6 @@ html[data-equality-theme='dark'] { color-scheme: dark; --color-background-base: color(display-p3 0.06018 0.06019 0.06787); --color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469); - --color-background-floating: color(display-p3 0.1399 0.14 0.1485); --color-background-overlay: color(display-p3 0.1121 0.1122 0.1204); --color-background-raised: color(display-p3 0.08523 0.08526 0.09324); --color-background-sunken: color(display-p3 0.03547 0.03547 0.04268); @@ -40,7 +39,6 @@ html[data-equality-theme='dark'] { --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204); --color-border-base: color(display-p3 0.1792 0.1792 0.1792); --color-border-bottom: color(display-p3 0.1589 0.159 0.1677); - --color-border-floating: color(display-p3 0.3328 0.3328 0.3426); --color-border-overlay: color(display-p3 0.2796 0.2796 0.2891); --color-border-raised: color(display-p3 0.228 0.2281 0.2372); --color-border-sunken: color(display-p3 0.1792 0.1792 0.1792); diff --git a/packages/ui/src/theme/generated/global-light-tokens.css b/packages/ui/src/theme/generated/global-light-tokens.css index 34aad387..89efa57f 100644 --- a/packages/ui/src/theme/generated/global-light-tokens.css +++ b/packages/ui/src/theme/generated/global-light-tokens.css @@ -13,14 +13,13 @@ html { --color-amber-700: color(display-p3 0.4327 0.2812 0.1347); --color-amber-800: color(display-p3 0.2643 0.1753 0.09139); --color-amber-900: color(display-p3 0.1121 0.07777 0.04646); - --color-background-base: color(display-p3 0.8264 0.8324 0.8394); - --color-background-bottom: color(display-p3 0.6765 0.6823 0.689); - --color-background-floating: color(display-p3 0.9424 0.9485 0.9557); - --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166); - --color-background-raised: color(display-p3 0.8648 0.8708 0.8779); - --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887); - --color-background-top: color(display-p3 0.9817 0.9878 0.9951); - --color-background: color(display-p3 0.8264 0.8324 0.8394); + --color-background-base: color(display-p3 1 1 1); + --color-background-bottom: color(display-p3 0.7758 0.7817 0.7887); + --color-background-overlay: color(display-p3 0.9946 0.9998 0.9999); + --color-background-raised: color(display-p3 0.9554 0.9616 0.9688); + --color-background-sunken: color(display-p3 0.8648 0.8708 0.8779); + --color-background-top: color(display-p3 0.9294 0.9355 0.9426); + --color-background: color(display-p3 1 1 1); --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417); @@ -63,7 +62,6 @@ html { --color-blue-900: color(display-p3 0.06177 0.08243 0.1475); --color-border-base: color(display-p3 0.7432 0.7432 0.7432); --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281); - --color-border-floating: color(display-p3 0.8011 0.807 0.814); --color-border-overlay: color(display-p3 0.8011 0.807 0.814); --color-border-raised: color(display-p3 0.7383 0.7441 0.751); --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432); diff --git a/packages/ui/src/theme/generated/light-tokens.css b/packages/ui/src/theme/generated/light-tokens.css index 0833c568..a88f6cb4 100644 --- a/packages/ui/src/theme/generated/light-tokens.css +++ b/packages/ui/src/theme/generated/light-tokens.css @@ -13,14 +13,13 @@ --color-amber-700: color(display-p3 0.4327 0.2812 0.1347); --color-amber-800: color(display-p3 0.2643 0.1753 0.09139); --color-amber-900: color(display-p3 0.1121 0.07777 0.04646); - --color-background-base: color(display-p3 0.8264 0.8324 0.8394); - --color-background-bottom: color(display-p3 0.6765 0.6823 0.689); - --color-background-floating: color(display-p3 0.9424 0.9485 0.9557); - --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166); - --color-background-raised: color(display-p3 0.8648 0.8708 0.8779); - --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887); - --color-background-top: color(display-p3 0.9817 0.9878 0.9951); - --color-background: color(display-p3 0.8264 0.8324 0.8394); + --color-background-base: color(display-p3 1 1 1); + --color-background-bottom: color(display-p3 0.7758 0.7817 0.7887); + --color-background-overlay: color(display-p3 0.9946 0.9998 0.9999); + --color-background-raised: color(display-p3 0.9554 0.9616 0.9688); + --color-background-sunken: color(display-p3 0.8648 0.8708 0.8779); + --color-background-top: color(display-p3 0.9294 0.9355 0.9426); + --color-background: color(display-p3 1 1 1); --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866); --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417); @@ -63,7 +62,6 @@ --color-blue-900: color(display-p3 0.06177 0.08243 0.1475); --color-border-base: color(display-p3 0.7432 0.7432 0.7432); --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281); - --color-border-floating: color(display-p3 0.8011 0.807 0.814); --color-border-overlay: color(display-p3 0.8011 0.807 0.814); --color-border-raised: color(display-p3 0.7383 0.7441 0.751); --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432); diff --git a/packages/ui/src/theme/generated/tailwind-tokens.css b/packages/ui/src/theme/generated/tailwind-tokens.css index 9af08494..09f9f092 100644 --- a/packages/ui/src/theme/generated/tailwind-tokens.css +++ b/packages/ui/src/theme/generated/tailwind-tokens.css @@ -13,7 +13,6 @@ --color-amber-900: var(--color-amber-900); --color-background-base: var(--color-background-base); --color-background-bottom: var(--color-background-bottom); - --color-background-floating: var(--color-background-floating); --color-background-overlay: var(--color-background-overlay); --color-background-raised: var(--color-background-raised); --color-background-sunken: var(--color-background-sunken); @@ -61,7 +60,6 @@ --color-blue-900: var(--color-blue-900); --color-border-base: var(--color-border-base); --color-border-bottom: var(--color-border-bottom); - --color-border-floating: var(--color-border-floating); --color-border-overlay: var(--color-border-overlay); --color-border-raised: var(--color-border-raised); --color-border-sunken: var(--color-border-sunken); diff --git a/packages/ui/src/theme/theme-base.css b/packages/ui/src/theme/theme-base.css index afaf48f4..1b019052 100644 --- a/packages/ui/src/theme/theme-base.css +++ b/packages/ui/src/theme/theme-base.css @@ -25,7 +25,6 @@ --color-shadow-base: transparent; --color-shadow-raised: rgba(0, 0, 0, 0.05); --color-shadow-overlay: rgba(0, 0, 0, 0.1); - --color-shadow-floating: rgba(0, 0, 0, 0.15); /* Animation */ --animate-grow-in: grow-in 800ms ease-in-out backwards; diff --git a/packages/ui/src/theme/theme-utilities.css b/packages/ui/src/theme/theme-utilities.css index def7fe33..8d9d4e70 100644 --- a/packages/ui/src/theme/theme-utilities.css +++ b/packages/ui/src/theme/theme-utilities.css @@ -23,7 +23,7 @@ } @utility dropdown-content { - @apply bg-background-floating text-text-primary border-border border; + @apply bg-background-overlay text-text-primary border-border border; @apply z-dropdown rounded-md p-1; @apply overflow-y-auto overflow-x-hidden; @apply max-h-80 min-w-32;