npm - @techsio/ui-kit - Versions diffs - 0.11.0 → 0.12.0 - Mend

@techsio/ui-kit 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/organisms/footer.figma.js +51 -0
package/dist/organisms/footer.js +11 -11
package/dist/organisms/gallery.figma.js +34 -0
package/dist/organisms/header.figma.js +58 -0
package/dist/organisms/table.figma.js +87 -0
package/dist/organisms/table.js +6 -6
package/dist/src/organisms/footer.d.ts.map +1 -1
package/dist/src/organisms/footer.figma.d.ts +2 -0
package/dist/src/organisms/footer.figma.d.ts.map +1 -0
package/dist/src/organisms/gallery.figma.d.ts +2 -0
package/dist/src/organisms/gallery.figma.d.ts.map +1 -0
package/dist/src/organisms/header.figma.d.ts +2 -0
package/dist/src/organisms/header.figma.d.ts.map +1 -0
package/dist/src/organisms/table.figma.d.ts +2 -0
package/dist/src/organisms/table.figma.d.ts.map +1 -0
package/package.json +22 -22
package/src/tokens/components/organisms/_footer.css +8 -82
package/src/tokens/components/organisms/_gallery.css +11 -33
package/src/tokens/components/organisms/_header.css +11 -80
package/src/tokens/components/organisms/_table.css +15 -61
package/src/tokens/figma/dark/variables.css +10 -6
package/src/tokens/figma/light/variables.css +10 -6
package/src/tokens/figma/variables.css +9 -5

package/dist/organisms/footer.figma.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Footer } from "./footer.js";
+code_connect.connect(Footer, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1372-161", {
+    imports: [
+        'import { Footer } from "@libs/ui/organisms/footer"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(Footer, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsx(Footer.Container, {
+                    children: /*#__PURE__*/ jsxs(Footer.Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(Footer.Title, {
+                                children: "Shop"
+                            }),
+                            /*#__PURE__*/ jsxs(Footer.List, {
+                                children: [
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: /*#__PURE__*/ jsx(Footer.Link, {
+                                            href: "/new",
+                                            children: "New arrivals"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: /*#__PURE__*/ jsx(Footer.Link, {
+                                            href: "/sale",
+                                            children: "Sale"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Footer.Divider, {}),
+                /*#__PURE__*/ jsx(Footer.Bottom, {
+                    children: /*#__PURE__*/ jsx(Footer.Text, {
+                        children: "\xa9 2026 Acme, Inc."
+                    })
+                })
+            ]
+        })
+});

package/dist/organisms/footer.js CHANGED Viewed

@@ -7,8 +7,8 @@ const footerVariants = tv({
         root: "flex w-full items-center justify-center rounded-footer bg-footer-bg",
         container: "w-full max-w-footer-max bg-footer-container-bg",
         section: "bg-footer-section-bg",
-        list: "flex list-none flex-col gap-footer-list-gap bg-footer-list-bg",
-        bottom: "flex w-full items-center justify-between border-t-(--border-width-footer) bg-footer-bottom-bg pt-footer-bottom",
+        list: "flex list-none flex-col gap-footer-list bg-footer-list-bg",
+        bottom: "flex w-full items-center justify-between border-t-(length:--border-footer-width) bg-footer-bottom-bg pt-footer-bottom",
         title: "font-footer-title text-footer-title-fg transition-footer-title hover:text-footer-title-fg-hover",
         link: "font-footer-link text-footer-link-fg transition-footer-link hover:text-footer-link-fg-hover",
         text: "text-footer-text-fg",
@@ -41,35 +41,35 @@ const footerVariants = tv({
         },
         size: {
             sm: {
-                root: "p-footer-root-sm",
+                root: "p-footer-sm",
                 container: "gap-footer-container-sm",
                 section: "gap-footer-section-sm",
-                list: "gap-footer-list-gap-sm",
+                list: "gap-footer-sm",
                 title: "text-footer-title-sm",
                 link: "text-footer-link-sm",
-                text: "text-footer-text-sm",
+                text: "text-footer-sm",
                 bottom: "p-footer-bottom-sm",
                 divider: "my-footer-divider-sm"
             },
             md: {
-                root: "p-footer-root-md",
+                root: "p-footer-md",
                 container: "gap-footer-container-md",
                 section: "gap-footer-section-md",
-                list: "gap-footer-list-gap-md",
+                list: "gap-footer-md",
                 title: "text-footer-title-md",
                 link: "text-footer-link-md",
-                text: "text-footer-text-md",
+                text: "text-footer-md",
                 bottom: "p-footer-bottom-md",
                 divider: "my-footer-divider-md"
             },
             lg: {
-                root: "p-footer-root-lg",
+                root: "p-footer-lg",
                 container: "gap-footer-container-lg",
                 section: "gap-footer-section-lg",
-                list: "gap-footer-list-gap-lg",
+                list: "gap-footer-lg",
                 title: "text-footer-title-lg",
                 link: "text-footer-link-lg",
-                text: "text-footer-text-lg",
+                text: "text-footer-lg",
                 bottom: "p-footer-bottom-lg",
                 divider: "my-footer-divider-lg"
             }

package/dist/organisms/gallery.figma.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Gallery } from "./gallery.js";
+code_connect.connect(Gallery, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1392-68", {
+    imports: [
+        'import { Gallery } from "@libs/ui/organisms/gallery"'
+    ],
+    props: {
+        orientation: code_connect["enum"]("orientation", {
+            vertical: "vertical",
+            horizontal: "horizontal"
+        })
+    },
+    example: ({ orientation })=>/*#__PURE__*/ jsx(Gallery, {
+            items: [
+                {
+                    id: "1",
+                    src: "/product-1.jpg",
+                    alt: "Product front"
+                },
+                {
+                    id: "2",
+                    src: "/product-2.jpg",
+                    alt: "Product side"
+                },
+                {
+                    id: "3",
+                    src: "/product-3.jpg",
+                    alt: "Product detail"
+                }
+            ],
+            orientation: orientation
+        })
+});

package/dist/organisms/header.figma.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Header } from "./header.js";
+code_connect.connect(Header, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1391-225", {
+    imports: [
+        'import { Header } from "@libs/ui/organisms/header"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(Header, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsxs(Header.Desktop, {
+                    children: [
+                        /*#__PURE__*/ jsx(Header.Container, {
+                            position: "start",
+                            children: "Logo"
+                        }),
+                        /*#__PURE__*/ jsxs(Header.Nav, {
+                            children: [
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    active: true,
+                                    children: "Home"
+                                }),
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    children: "Shop"
+                                }),
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    children: "About"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Header.Actions, {
+                            children: /*#__PURE__*/ jsx(Header.ActionItem, {
+                                children: "Cart"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Header.Hamburger, {}),
+                /*#__PURE__*/ jsxs(Header.Mobile, {
+                    children: [
+                        /*#__PURE__*/ jsx(Header.NavItem, {
+                            children: "Home"
+                        }),
+                        /*#__PURE__*/ jsx(Header.NavItem, {
+                            children: "Shop"
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/organisms/table.figma.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Table } from "./table.js";
+code_connect.connect(Table, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1393-232", {
+    imports: [
+        'import { Table } from "@libs/ui/organisms/table"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            line: "line",
+            outline: "outline",
+            striped: "striped"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ variant, size })=>/*#__PURE__*/ jsxs(Table, {
+            size: size,
+            variant: variant,
+            children: [
+                /*#__PURE__*/ jsx(Table.Caption, {
+                    children: "Recent orders"
+                }),
+                /*#__PURE__*/ jsx(Table.Header, {
+                    children: /*#__PURE__*/ jsxs(Table.Row, {
+                        children: [
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Order"
+                            }),
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Status"
+                            }),
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Total"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Table.Body, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Table.Row, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "#1001"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "Shipped"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "$99.00"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Table.Row, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "#1002"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "Pending"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "$149.00"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.Footer, {
+                    children: /*#__PURE__*/ jsxs(Table.Row, {
+                        children: [
+                            /*#__PURE__*/ jsx(Table.Cell, {
+                                children: "Total"
+                            }),
+                            /*#__PURE__*/ jsx(Table.Cell, {}),
+                            /*#__PURE__*/ jsx(Table.Cell, {
+                                children: "$248.00"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+});

package/dist/organisms/table.js CHANGED Viewed

@@ -21,7 +21,7 @@ const tableVariants = tv({
             "font-table-footer text-table-footer-fg"
         ],
         row: [
-            "border-b-(length:--border-width-table) border-table-border",
+            "border-b-(length:--border-table-width) border-table-border",
             "data-[selected=true]:bg-table-row-bg-selected",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
@@ -37,13 +37,13 @@ const tableVariants = tv({
         variant: {
             line: {
                 root: "",
-                row: "border-b-(length:--border-width-table) border-table-border"
+                row: "border-b-(length:--border-table-width) border-table-border"
             },
             outline: {
-                root: "border-(length:--border-width-table) rounded-table border-table-border shadow-table-outline"
+                root: "border-(length:--border-table-width) rounded-table border-table-border shadow-table-outline"
             },
             striped: {
-                row: "odd:bg-table-row-striped-bg-primary even:bg-table-row-striped-bg-secondary"
+                row: "odd:bg-table-row-striped-primary even:bg-table-row-striped-secondary"
             }
         },
         interactive: {
@@ -87,8 +87,8 @@ const tableVariants = tv({
         },
         showColumnBorder: {
             true: {
-                columnHeader: "border-r-(length:--border-width-table) border-table-border",
-                cell: "border-r-(length:--border-width-table) border-table-border"
+                columnHeader: "border-r-(length:--border-table-width) border-table-border",
+                cell: "border-r-(length:--border-table-width) border-table-border"
             }
         },
         captionPlacement: {

package/dist/src/organisms/footer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAEL~~,KAAK,wBAAwB,~~EAC7B~~,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiFlB,CAAA;AAUF,UAAU,WACR,SAAQ,cAAc,CAAC,WAAW,CAAC,EACjC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,oBAAqB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,qBAAqB,GAAG,mBAAmB,GAC9C,IAAI,CACF,wBAAwB,CAAC,GAAG,CAAC,EAC7B,MAAM,mBAAmB,GAAG,IAAI,GAAG,MAAM,CAC1C,GAAG;IACF,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,WAAW,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;CACzD,CAAA;AAEH,KAAK,qBAAqB,CAAC,CAAC,SAAS,WAAW,IAAI,mBAAmB,GACrE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG;IACpE,EAAE,EAAE,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;CACpB,CAAA;AAMH,UAAU,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,eAAgB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,CAAC,aAAa,CAAC;CAAG;AAErE,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,WAAW,2CAQb;yBAfe,MAAM;8CAoBnB,oBAAoB;4CASpB,kBAAkB;yCASwC,gBAAgB;;~~wCAyBlB~~,eAAe;kDAUvE,eAAe;2CAaf,kBAAkB;oDAUlB,iBAAiB;;~~AApDpB~~,iBAAS,UAAU,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAAA;AAC5D,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,~~EAAE~~,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,~~GAAG~~,SAAS,CAAA"}
1	+ {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiFlB,CAAA;AAUF,UAAU,WACR,SAAQ,cAAc,CAAC,WAAW,CAAC,EACjC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,oBAAqB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,qBAAqB,GAAG,mBAAmB,GAC9C,IAAI,CACF,wBAAwB,CAAC,GAAG,CAAC,EAC7B,MAAM,mBAAmB,GAAG,IAAI,GAAG,MAAM,CAC1C,GAAG;IACF,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,WAAW,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;CACzD,CAAA;AAEH,KAAK,qBAAqB,CAAC,CAAC,SAAS,WAAW,IAAI,mBAAmB,GACrE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG;IACpE,EAAE,EAAE,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;CACpB,CAAA;AAMH,UAAU,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,eAAgB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,CAAC,aAAa,CAAC;CAAG;AAErE,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,WAAW,2CAQb;yBAfe,MAAM;8CAoBnB,oBAAoB;4CASpB,kBAAkB;yCASwC,gBAAgB;;wCA2BlB,eAAe;kDAUvE,eAAe;2CAaf,kBAAkB;oDAUlB,iBAAiB;;AAtDpB,iBAAS,UAAU,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAAA;AAC5D,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,EACvC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,SAAS,CAAA"}

package/dist/src/organisms/footer.figma.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=footer.figma.d.ts.map

package/dist/src/organisms/footer.figma.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"footer.figma.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer.figma.tsx"],"names":[],"mappings":""}

package/dist/src/organisms/gallery.figma.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=gallery.figma.d.ts.map

package/dist/src/organisms/gallery.figma.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"gallery.figma.d.ts","sourceRoot":"","sources":["../../../src/organisms/gallery.figma.tsx"],"names":[],"mappings":""}

package/dist/src/organisms/header.figma.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=header.figma.d.ts.map

package/dist/src/organisms/header.figma.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"header.figma.d.ts","sourceRoot":"","sources":["../../../src/organisms/header.figma.tsx"],"names":[],"mappings":""}

package/dist/src/organisms/table.figma.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=table.figma.d.ts.map

package/dist/src/organisms/table.figma.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"table.figma.d.ts","sourceRoot":"","sources":["../../../src/organisms/table.figma.tsx"],"names":[],"mappings":""}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -78,27 +78,27 @@
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
-    "@zag-js/accordion": "^1.31.1",
-    "@zag-js/carousel": "^1.31.1",
-    "@zag-js/checkbox": "^1.31.1",
-    "@zag-js/combobox": "^1.31.1",
-    "@zag-js/dialog": "^1.31.1",
-    "@zag-js/i18n-utils": "^1.31.1",
-    "@zag-js/menu": "^1.31.1",
-    "@zag-js/number-input": "^1.31.1",
-    "@zag-js/pagination": "^1.31.1",
-    "@zag-js/popover": "^1.31.1",
-    "@zag-js/radio-group": "^1.31.1",
-    "@zag-js/rating-group": "^1.31.1",
-    "@zag-js/react": "^1.31.1",
-    "@zag-js/select": "^1.31.1",
-    "@zag-js/slider": "^1.31.1",
-    "@zag-js/steps": "^1.31.1",
-    "@zag-js/switch": "^1.31.1",
-    "@zag-js/tabs": "^1.31.1",
-    "@zag-js/toast": "^1.31.1",
-    "@zag-js/tooltip": "^1.31.1",
-    "@zag-js/tree-view": "^1.31.1",
+    "@zag-js/accordion": "^1.41.2",
+    "@zag-js/carousel": "^1.41.2",
+    "@zag-js/checkbox": "^1.41.2",
+    "@zag-js/combobox": "^1.41.2",
+    "@zag-js/dialog": "^1.41.2",
+    "@zag-js/i18n-utils": "^1.41.2",
+    "@zag-js/menu": "^1.41.2",
+    "@zag-js/number-input": "^1.41.2",
+    "@zag-js/pagination": "^1.41.2",
+    "@zag-js/popover": "^1.41.2",
+    "@zag-js/radio-group": "^1.41.2",
+    "@zag-js/rating-group": "^1.41.2",
+    "@zag-js/react": "^1.41.2",
+    "@zag-js/select": "^1.41.2",
+    "@zag-js/slider": "^1.41.2",
+    "@zag-js/steps": "^1.41.2",
+    "@zag-js/switch": "^1.41.2",
+    "@zag-js/tabs": "^1.41.2",
+    "@zag-js/toast": "^1.41.2",
+    "@zag-js/tooltip": "^1.41.2",
+    "@zag-js/tree-view": "^1.41.2",
     "libphonenumber-js": "^1.13.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",

package/src/tokens/components/organisms/_footer.css CHANGED Viewed

@@ -1,85 +1,11 @@
+/*
+ * Footer — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--footer-cols` runtime grid-template-columns value
+ * (repeat/minmax can't be expressed as a Figma variable).
+ */
 @theme static {
   --footer-cols: repeat(auto-fit, minmax(22%, 1fr));
-  /* === COLORS === */
-  --color-footer: var(--color-surface);
-  /* Background */
-  --color-footer-bg: var(--color-footer);
-  --color-footer-container-bg: var(--color-footer);
-  --color-footer-section-bg: var(--color-footer);
-  --color-footer-list-bg: var(--color-footer);
-  --color-footer-bottom-bg: var(--color-footer);
-  /* Foreground */
-  --color-footer-fg-primary: var(--color-fg-primary);
-  --color-footer-fg-secondary: var(--color-fg-secondary);
-  --color-footer-title-fg: var(--color-footer-fg-primary);
-  --color-footer-title-fg-hover: var(--color-primary);
-  --color-footer-link-fg: var(--color-footer-fg-secondary);
-  --color-footer-link-fg-hover: var(--color-primary);
-  --color-footer-text-fg: var(--color-footer-fg-secondary);
-  /* Divider & Bottom */
-  --color-footer-divider-bg: var(--color-fg-reverse);
-  /* === TYPOGRAPHY === */
-  --text-footer-title-sm: var(--text-md);
-  --text-footer-title-md: var(--text-lg);
-  --text-footer-title-lg: var(--text-xl);
-  --text-footer-link-sm: var(--text-sm);
-  --text-footer-link-md: var(--text-md);
-  --text-footer-link-lg: var(--text-lg);
-  --text-footer-text-sm: var(--text-xs);
-  --text-footer-text-md: var(--text-sm);
-  --text-footer-text-lg: var(--text-md);
-  --font-weight-footer-title: var(--font-weight-semibold);
-  --font-weight-footer-link: var(--font-weight-normal);
-  /* === SIZES === */
-  --container-footer-max: var(--container-max-w);
-  /* === SPACING === */
-  /* Root padding */
-  --padding-footer-root-sm: var(--spacing-100);
-  --padding-footer-root-md: var(--spacing-200);
-  --padding-footer-root-lg: var(--spacing-300);
-  /* Container spacing */
-  --spacing-footer-container-sm: var(--spacing-300);
-  --spacing-footer-container-md: var(--spacing-400);
-  --spacing-footer-container-lg: var(--spacing-500);
-  /* Section spacing */
-  --spacing-footer-section-sm: var(--spacing-50);
-  --spacing-footer-section-md: var(--spacing-100);
-  --spacing-footer-section-lg: var(--spacing-150);
-  /* List spacing */
-  --spacing-footer-list-gap: var(--spacing-100);
-  --spacing-footer-list-gap-sm: var(--spacing-50);
-  --spacing-footer-list-gap-md: var(--spacing-100);
-  --spacing-footer-list-gap-lg: var(--spacing-150);
-  /* Bottom padding */
-  --padding-footer-bottom: var(--spacing-300);
-  --padding-footer-bottom-sm: var(--spacing-200);
-  --padding-footer-bottom-md: var(--spacing-300);
-  --padding-footer-bottom-lg: var(--spacing-400);
-  /* Divider margins */
-  --margin-footer-divider-sm: var(--spacing-200);
-  --margin-footer-divider-md: var(--spacing-300);
-  --margin-footer-divider-lg: var(--spacing-400);
-  /* === BORDERS & EFFECTS === */
-  --border-width-footer: var(--border-width-md);
-  --color-footer-border: var(--color-border-primary);
-  --height-footer-divider: 2px;
-  --radius-footer: 0;
 }

package/src/tokens/components/organisms/_gallery.css CHANGED Viewed

@@ -1,35 +1,13 @@
-@theme static {
-  /* === REFERENCE LAYER === */
-  --color-gallery: var(--color-surface);
-  --color-gallery-accent: var(--color-primary);
-  /* === DERIVED COLORS === */
-  --color-gallery-trigger-bg: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 2) c h
-  );
-  --color-gallery-trigger-bg-active: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 3) c h
-  );
-  --color-gallery-trigger-border: var(--color-border-primary);
-  --color-gallery-trigger-border-active: var(--color-gallery-accent);
-  --color-gallery-trigger-ring: var(--color-ring);
-  /* === SPACING === */
-  --spacing-gallery-xs: var(--spacing-50);
-  --spacing-gallery-sm: var(--spacing-100);
-  --spacing-gallery-md: var(--spacing-200);
-  --spacing-gallery-lg: var(--spacing-300);
-  --spacing-gallery-root: var(--spacing-200);
-  --padding-gallery-trigger: 0 0;
-  /* === DIMENSIONS === */
+/*
+ * Gallery — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--height-gallery` responsive cap. Figma flattens it to a fixed
+ * dimension (576px); the `min(60svh, 36rem)` viewport behaviour can't be
+ * expressed as a Figma variable, so an unlayered `:root` override (which
+ * beats Figma's `@theme static`) restores it.
+ */
+:root {
   --height-gallery: min(60svh, 36rem);
-  /* === EFFECTS === */
-  --brightness-gallery-trigger: 70%;
-  --brightness-gallery-trigger-active: 100%;
-  --shadow-gallery-trigger: var(--shadow-sm);
-  /* === BORDERS === */
-  --radius-gallery-trigger: var(--radius-sm);
 }

package/src/tokens/components/organisms/_header.css CHANGED Viewed

@@ -1,3 +1,13 @@
+/*
+ * Header — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept:
+ * - `:root @media (width < 48rem)` nav-spacing override (responsive,
+ *   conditional value — can't be expressed as a Figma variable).
+ * - glyph utilities mapping the menu/close icons.
+ */
 :root {
   @media (width < 48rem) {
     --spacing-header-nav-sm: var(--spacing-50);
@@ -6,89 +16,10 @@
   }
 }
-@theme static {
-  /* === REFERENCE LAYER === */
-  /* These tokens reference semantic tokens from _semantic.css */
-  --color-header: var(--color-surface);
-  --color-header-accent: var(--color-primary);
-  /* Reference typhography */
-  --text-header-sm: var(--text-sm);
-  --text-header-md: var(--text-md);
-  --text-header-lg: var(--text-lg);
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-header-bg: var(--color-header);
-  /* === ITEMS === */
-  --color-header-nav-item-bg: transparent;
-  --color-header-nav-item-bg-hover: transparent;
-  --text-header-item-sm: var(--text-header-sm);
-  --text-header-item-md: var(--text-header-md);
-  --text-header-item-lg: var(--text-header-lg);
-  /* === ACTIONS === */
-  /* Foreground colors */
-  --color-header-fg: var(--color-fg-primary);
-  --color-header-nav-fg: var(--color-fg-secondary);
-  --color-header-nav-fg-hover: var(--color-header-fg);
-  --color-header-nav-fg-active: var(--color-header-accent);
-  --color-header-actions-fg: var(--color-primary);
-  --color-header-actions-fg-hover: var(--color-header-fg);
-  /* Border colors */
-  /* === SIZE === */
-  /* Width constraints */
-  --width-header-max: 100%;
-  /* === SPACING === */
-  /* Section spacing */
-  --spacing-header-container: var(--spacing-100);
-  --padding-header-item-sm: var(--spacing-100);
-  --padding-header-item-md: var(--spacing-150);
-  --padding-header-item-lg: var(--spacing-200);
-  --spacing-header-nav-sm: var(--spacing-200);
-  --spacing-header-nav-md: var(--spacing-300);
-  --spacing-header-nav-lg: var(--spacing-400);
-  --spacing-header-actions-sm: var(--spacing-200);
-  --spacing-header-actions-md: var(--spacing-300);
-  --spacing-header-actions-lg: var(--spacing-400);
-  /* === TYPOGRAPHY === */
-  --font-weight-header-nav: var(--font-weight-medium);
-  --font-weight-header-nav-active: var(--font-weight-semibold);
-  /* === Z-INDEX === */
-  /* Mobile menu hamburger colors */
-  --color-header-hamburger-fg: var(--color-fg-primary);
-  --color-header-hamburger-fg-hover: var(--color-fg-secondary);
-  /* hamburger button */
-  --text-header-hamburger-sm: var(--text-header-sm);
-  --text-header-hamburger-md: var(--text-header-md);
-  --text-header-hamburger-lg: var(--text-header-lg);
-  --padding-header-hamburger-sm: var(--spacing-100);
-  --padding-header-hamburger-md: var(--spacing-150);
-  --padding-header-hamburger-lg: var(--spacing-200);
-  /* breakpoint */
-  --container-header-desktop: 48rem;
-  --duration-header: 300ms;
-}
 @utility token-icon-header-menu {
   @apply token-icon-menu;
 }
 @utility token-icon-header-close {
   @apply token-icon-close;
-}
+}

package/src/tokens/components/organisms/_table.css CHANGED Viewed

@@ -1,63 +1,17 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-table: var(--color-surface);
-  --color-table-border: var(--color-border-primary);
-  --color-table-accent: var(--color-primary);
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-table-bg: var(--color-table);
-  --color-table-header-bg: oklch(
-    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
-  );
-  --color-table-footer-bg: var(--color-table-header-bg);
-  --color-table-row-bg: transparent;
-  --color-table-row-bg-hover: oklch(
-    from var(--color-table-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-table-row-bg-selected: --alpha(var(--color-table-accent) / 0.1);
-  --color-table-row-striped-bg-primary: oklch(
-    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
-  );
-  --color-table-row-striped-bg-secondary: var(--color-table-row-bg);
-  /* Foreground colors */
-  --color-table-fg: var(--color-fg-primary);
-  --color-table-header-fg: var(--color-fg-primary);
-  --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-caption-fg: var(--color-fg-secondary);
-  /* === SPACING === */
-  /* Cell padding */
-  --padding-table-cell-sm: var(--spacing-100) var(--spacing-150);
-  --padding-table-cell-md: var(--spacing-150) var(--spacing-200);
-  --padding-table-cell-lg: var(--spacing-200) var(--spacing-250);
-  /* Caption padding */
-  --padding-table-caption-sm: var(--spacing-100);
-  --padding-table-caption-md: var(--spacing-150);
-  --padding-table-caption-lg: var(--spacing-200);
+/*
+ * Table — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--padding-table-cell-{sm,md,lg}` composites. Figma exports the cell
+ * padding split into `-x`/`-y`; the `p-table-cell-*` shorthand utilities are
+ * rebuilt here (padding: y x) from those Figma halves.
+ */
-  /* === TYPOGRAPHY === */
-  /* Font weights */
-  --font-weight-table-header: var(--font-weight-semibold);
-  --font-weight-table-footer: var(--font-weight-medium);
-  --font-weight-table-caption: var(--font-weight-normal);
-  /* Text sizes for table content */
-  --text-table-sm: var(--text-sm);
-  --text-table-md: var(--text-md);
-  --text-table-lg: var(--text-lg);
-  /* Caption text sizes */
-  --text-table-caption-sm: var(--text-xs);
-  --text-table-caption-md: var(--text-sm);
-  --text-table-caption-lg: var(--text-md);
-  /* === BORDERS & RADIUS === */
-  --border-width-table: var(--border-width-sm);
-  --radius-table: var(--radius-sm);
-  /* === SHADOWS === */
-  --shadow-table-outline: var(--shadow-sm);
+@theme static {
+  --padding-table-cell-sm: var(--padding-table-cell-sm-y)
+    var(--padding-table-cell-sm-x);
+  --padding-table-cell-md: var(--padding-table-cell-md-y)
+    var(--padding-table-cell-md-x);
+  --padding-table-cell-lg: var(--padding-table-cell-lg-y)
+    var(--padding-table-cell-lg-x);
 }

package/src/tokens/figma/dark/variables.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
  * Design tokens exported from Figma
- * Exported at: 2026-06-12T13:18:24.711Z
+ * Exported at: 2026-06-15T06:51:18.175Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {
@@ -291,6 +291,7 @@
   --color-fill-highlight: var(--color-neutral-700);
   --color-fill-hover: var(--color-white-10);
   --color-fill-overlay: var(--color-neutral-800);
+  --color-fill-selected: var(--color-primary-alpha-10);
   --color-fill-surface: var(--color-neutral-800);
   --color-float: var(--color-fill-highlight);
   --color-footer-bg: var(--color-fill-surface);
@@ -483,6 +484,7 @@
   --color-primary-900: oklch(0.391 0.089 240.611);
   --color-primary-accent-fg: var(--color-fg-accent-primary);
   --color-primary-active: var(--color-bg-primary-active);
+  --color-primary-alpha-10: oklch(0.807 0.101 250.446 / 0.1);
   --color-primary-disabled: var(--color-bg-disabled);
   --color-primary-hover: var(--color-bg-primary-hover);
   --color-primary-light: var(--color-bg-light-primary-base);
@@ -741,14 +743,14 @@
   --color-table-border: var(--color-border-primary);
   --color-table-caption-fg: var(--color-fg-secondary);
   --color-table-fg: var(--color-fg-primary);
-  --color-table-footer-bg: var(--color-bg-light-primary-base);
+  --color-table-footer-bg: var(--color-fill-base);
   --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-header-bg: var(--color-bg-light-primary-base);
+  --color-table-header-bg: var(--color-fill-base);
   --color-table-header-fg: var(--color-fg-primary);
   --color-table-row-bg: var(--color-bg-transparent);
-  --color-table-row-bg-hover: var(--color-bg-light-primary-base);
-  --color-table-row-bg-selected: var(--color-bg-light-primary-base);
-  --color-table-row-striped-primary: var(--color-bg-light-primary-base);
+  --color-table-row-bg-hover: var(--color-fill-hover);
+  --color-table-row-bg-selected: var(--color-fill-selected);
+  --color-table-row-striped-primary: var(--color-fill-base);
   --color-table-row-striped-secondary: var(--color-bg-transparent);
   --color-tabs-bg: var(--color-fill-surface);
   --color-tabs-border-base: var(--color-border-primary);
@@ -1329,6 +1331,7 @@
   --shadow-accordion-root-md: var(--shadow-xl);
   --shadow-accordion-root-sm: var(--shadow-primary);
   --shadow-dialog-content: var(--shadow-primary);
+  --shadow-gallery-trigger: var(--shadow-sm);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-menu-content: var(--shadow-lg);
@@ -1338,6 +1341,7 @@
   --shadow-select-content: var(--shadow-md);
   --shadow-slider-thumb: var(--shadow-sm);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-table-outline: var(--shadow-sm);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --size-1: 0.06rem;
   --size-12: 0.75rem;

package/src/tokens/figma/light/variables.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
  * Design tokens exported from Figma
- * Exported at: 2026-06-12T13:18:24.704Z
+ * Exported at: 2026-06-15T06:51:18.168Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {
@@ -291,6 +291,7 @@
   --color-fill-highlight: var(--color-neutral-300);
   --color-fill-hover: var(--color-neutral-020617-10);
   --color-fill-overlay: var(--color-neutral-200);
+  --color-fill-selected: var(--color-primary-alpha-10);
   --color-fill-surface: var(--color-neutral-100);
   --color-float: var(--color-fill-highlight);
   --color-footer-bg: var(--color-fill-surface);
@@ -483,6 +484,7 @@
   --color-primary-900: oklch(0.38 0.145 265.465);
   --color-primary-accent-fg: var(--color-fg-accent-primary);
   --color-primary-active: var(--color-bg-primary-active);
+  --color-primary-alpha-10: oklch(0.807 0.101 250.446 / 0.1);
   --color-primary-disabled: var(--color-bg-disabled);
   --color-primary-hover: var(--color-bg-primary-hover);
   --color-primary-light: var(--color-bg-light-primary-base);
@@ -741,14 +743,14 @@
   --color-table-border: var(--color-border-primary);
   --color-table-caption-fg: var(--color-fg-secondary);
   --color-table-fg: var(--color-fg-primary);
-  --color-table-footer-bg: var(--color-bg-light-primary-base);
+  --color-table-footer-bg: var(--color-fill-base);
   --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-header-bg: var(--color-bg-light-primary-base);
+  --color-table-header-bg: var(--color-fill-base);
   --color-table-header-fg: var(--color-fg-primary);
   --color-table-row-bg: var(--color-bg-transparent);
-  --color-table-row-bg-hover: var(--color-bg-light-primary-base);
-  --color-table-row-bg-selected: var(--color-bg-light-primary-base);
-  --color-table-row-striped-primary: var(--color-bg-light-primary-base);
+  --color-table-row-bg-hover: var(--color-fill-hover);
+  --color-table-row-bg-selected: var(--color-fill-selected);
+  --color-table-row-striped-primary: var(--color-fill-base);
   --color-table-row-striped-secondary: var(--color-bg-transparent);
   --color-tabs-bg: var(--color-fill-surface);
   --color-tabs-border-base: var(--color-border-primary);
@@ -1329,6 +1331,7 @@
   --shadow-accordion-root-md: var(--shadow-xl);
   --shadow-accordion-root-sm: var(--shadow-primary);
   --shadow-dialog-content: var(--shadow-primary);
+  --shadow-gallery-trigger: var(--shadow-sm);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-menu-content: var(--shadow-lg);
@@ -1338,6 +1341,7 @@
   --shadow-select-content: var(--shadow-md);
   --shadow-slider-thumb: var(--shadow-sm);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-table-outline: var(--shadow-sm);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --size-1: 0.06rem;
   --size-12: 0.75rem;

package/src/tokens/figma/variables.css CHANGED Viewed

@@ -351,6 +351,7 @@
   --color-fill-highlight: light-dark(var(--color-neutral-300), var(--color-neutral-700));
   --color-fill-hover: light-dark(var(--color-neutral-020617-10), var(--color-white-10));
   --color-fill-overlay: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-fill-selected: var(--color-primary-alpha-10);
   --color-fill-surface: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   --color-float: var(--color-fill-highlight);
   --color-footer-bg: var(--color-fill-surface);
@@ -543,6 +544,7 @@
   --color-primary-900: light-dark(oklch(0.38 0.145 265.465), oklch(0.391 0.089 240.611));
   --color-primary-accent-fg: var(--color-fg-accent-primary);
   --color-primary-active: var(--color-bg-primary-active);
+  --color-primary-alpha-10: oklch(0.807 0.101 250.446 / 0.1);
   --color-primary-disabled: var(--color-bg-disabled);
   --color-primary-hover: var(--color-bg-primary-hover);
   --color-primary-light: var(--color-bg-light-primary-base);
@@ -801,14 +803,14 @@
   --color-table-border: var(--color-border-primary);
   --color-table-caption-fg: var(--color-fg-secondary);
   --color-table-fg: var(--color-fg-primary);
-  --color-table-footer-bg: var(--color-bg-light-primary-base);
+  --color-table-footer-bg: var(--color-fill-base);
   --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-header-bg: var(--color-bg-light-primary-base);
+  --color-table-header-bg: var(--color-fill-base);
   --color-table-header-fg: var(--color-fg-primary);
   --color-table-row-bg: var(--color-bg-transparent);
-  --color-table-row-bg-hover: var(--color-bg-light-primary-base);
-  --color-table-row-bg-selected: var(--color-bg-light-primary-base);
-  --color-table-row-striped-primary: var(--color-bg-light-primary-base);
+  --color-table-row-bg-hover: var(--color-fill-hover);
+  --color-table-row-bg-selected: var(--color-fill-selected);
+  --color-table-row-striped-primary: var(--color-fill-base);
   --color-table-row-striped-secondary: var(--color-bg-transparent);
   --color-tabs-bg: var(--color-fill-surface);
   --color-tabs-border-base: var(--color-border-primary);
@@ -1324,6 +1326,7 @@
   --shadow-accordion-root-sm: var(--shadow-primary);
   --shadow-color-select: var(--shadow-sm);
   --shadow-dialog-content: var(--shadow-primary);
+  --shadow-gallery-trigger: var(--shadow-sm);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-menu-content: var(--shadow-lg);
@@ -1333,6 +1336,7 @@
   --shadow-select-content: var(--shadow-md);
   --shadow-slider-thumb: var(--shadow-sm);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-table-outline: var(--shadow-sm);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --size-1: 0.06rem;
   --size-12: 0.75rem;