Feature: [HOP-38, HOP-45, HOP-44] (#76)

apps/docs/.eslintrc.json

@@ -13,6 +13,7 @@
   "globals": {
       "Card": true,
       "Table": true,
-      "Tabs": true
+      "Tabs": true,
+      "TableSection": true
   }
 }

apps/docs/components/tableSection/TableSection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Table from "@/components/ui/table/Table";
+
+import "@hopper-ui/tokens/fonts.css";
+
+interface TokenProps {
+    name: string;
+    value: string;
+}
+interface TableSectionProps {
+    tokens: TokenProps[];
+    categories: string[];
+    excludedCategories?: string[];
+    categoryKey: string;
+}
+
+const TableSection = ({ tokens, categories, excludedCategories, categoryKey }: TableSectionProps) => {
+    const categoryTokens = tokens.filter(token => {
+        const excludedCategoryTokens = excludedCategories?.some(category => token.name.includes(category));
+
+        return categories.some(category => token.name.includes(category)) && !excludedCategoryTokens;
+    });
+
+    return <div className="hd-table-section">
+        <Table category={categoryKey} data={categoryTokens} />
+    </div>;
+};
+
+export default TableSection;

apps/docs/components/ui/mdx/Mdx.tsx

@@ -7,6 +7,7 @@ import Pre from "@/components/ui/pre/Pre";
 import Title from "@/components/ui/title/Title";
 import Table from "@/components/ui/table/Table";
 import Tabs from "@/components/tabs/Tabs";
+import TableSection from "@/components/tableSection/TableSection";
 
 type HeadingProps = React.DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
 
@@ -16,6 +17,7 @@ const components = {
     pre: Pre,
     Table: Table,
     Tabs: Tabs,
+    TableSection: TableSection,
     h1: (props: HeadingProps) => {
         return <Title {...props} as="h1" />;
     },

apps/docs/content/tokens/semantic/dimensions.mdx

@@ -8,4 +8,46 @@ import tokens from '../../../datas/tokens.json';
 
 export const categoryKey = "size";
 
-<Table category={categoryKey} data={tokens.semantic[categoryKey]} />
+## Padding
+
+### Inset
+
+Inset space refers to the space within a block or container from which elements are separated from the edge. By default, the inset is equal on all four sides. Inset is also known as padding.
+
+<TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+    ["inset"]
+} excludedCategories={["inset-squish", "inset-stretch"]} />
+
+### Inset Squish
+
+Squish inset reduces the top and bottom padding by one space increment relative to the default inset space.
+
+<TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+    ["inset-squish"]
+} />
+
+### Inset Stretch
+
+Stretch inset increases the top and bottom padding by one space increment relative to the default inset space.
+
+<TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+    ["inset-stretch"]
+} />
+
+## Margin
+
+### Stack
+
+Stack is the space that separates elements or containers arranged vertically within a column. The last element of the stack should omit this space.
+
+<TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+    ["stack"]
+} />
+
+### Inline
+
+Inline refers to the space that separates inline elements arranged horizontally and that may wrap on the right. The last element should omit this space.
+
+<TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+    ["inline"]
+} />

apps/docs/datas/tokens-dark.json

@@ -781,7 +781,7 @@
       },
       {
         "name": "hop-upsell-surface-hover",
-        "value": "#7e5e0a"
+        "value": "#eac96d"
       },
       {
         "name": "hop-upsell-border-disabled",
@@ -1077,7 +1077,7 @@
       },
       {
         "name": "hop-decorative-option8-surface",
-        "value": "#ffbcb7"
+        "value": "#ffd6d3"
       },
       {
         "name": "hop-decorative-option8-text",

apps/docs/datas/tokens.json

@@ -1077,7 +1077,7 @@
       },
       {
         "name": "hop-decorative-option8-surface",
-        "value": "#ffbcb7"
+        "value": "#ffd6d3"
       },
       {
         "name": "hop-decorative-option8-text",
@@ -1395,6 +1395,10 @@
         "name": "hop-neutral-border-disabled",
         "value": "#ecebe8"
       },
+      {
+        "name": "hop-neutral-border-strong-hover",
+        "value": "#505050"
+      },
       {
         "name": "hop-neutral-border-strong",
         "value": "#3c3c3c"

packages/tokens/src/tokens/semantic/dark/colors.tokens.json

@@ -22,7 +22,7 @@
         },
         "surface-hover": {
             "$type": "color",
-            "$value": "{sunken-treasure.600}"
+            "$value": "{sunken-treasure.100}"
         },
         "border-disabled": {
             "$type": "color",
@@ -327,7 +327,7 @@
             },
             "surface": {
                 "$type": "color",
-                "$value": "{amanita.100}"
+                "$value": "{amanita.75}"
             },
             "text": {
                 "$type": "color",

packages/tokens/src/tokens/semantic/light/colors.tokens.json

@@ -327,7 +327,7 @@
             },
             "surface": {
                 "$type": "color",
-                "$value": "{amanita.100}"
+                "$value": "{amanita.75}"
             },
             "text": {
                 "$type": "color",
@@ -662,6 +662,10 @@
             "$type": "color",
             "$value": "{rock.50}"
         },
+        "border-strong-hover": {
+            "$type": "color",
+            "$value": "{rock.700}"
+        },
         "border-strong": {
             "$type": "color",
             "$value": "{rock.800}"