feat: table tokens

nl-design-system · Aug 21, 2021 · cfa36d4 · cfa36d4
1 parent 7de328c
commit cfa36d4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/components/table/bem.css b/components/table/bem.css
@@ -5,6 +5,11 @@
 
 .utrecht-table {
   border-collapse: collapse;
+  border-color: var(--utrecht-table-border-color, 0);
+  border-style: solid;
+  border-width: var(--utrecht-table-border-width, 0);
+  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-table-font-size, inherit);
   width: 100%;
 }
 .utrecht-table--distanced {
@@ -41,6 +46,7 @@
 
 .utrecht-table__heading {
   color: var(--utrecht-table-heading-color);
+  font-size: var(--utrecht-table-heading-font-size);
   font-weight: var(--utrecht-table-heading-font-weight);
   text-transform: var(--utrecht-table-heading-text-transform);
 }

diff --git a/components/table/block.style-dictionary.json b/components/table/block.style-dictionary.json
@@ -1,6 +1,30 @@
 {
   "utrecht": {
     "table": {
+      "border-color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
+      "border-width": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "font-family": {
+        "css": {
+          "syntax": "*",
+          "inherits": true
+        }
+      },
+      "font-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
       "margin-block-end": {
         "css": {
           "syntax": "<length>",

diff --git a/components/table/element.style-dictionary.json b/components/table/element.style-dictionary.json
@@ -78,6 +78,12 @@
         }
       },
       "heading": {
+        "font-size": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
         "font-weight": {
           "css": {
             "syntax": "<number>",

diff --git a/components/table/html.stories.mdx b/components/table/html.stories.mdx
@@ -7,6 +7,10 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import clsx from "clsx";
 import "./html.scss";
 
+export const defaultArgs = {
+  alternateRowColor: false,
+};
+
 <!--
 Source of table:
 https://www.utrecht.nl/wonen-en-leven/parkeren/ervaart-u-parkeeroverlast/spinozaplantsoen-invoeren-betaald-parkeren/
@@ -66,7 +70,14 @@ export const ExampleTable = ({ alternateRowColor = false }) =>
 # Table
 
 <Canvas>
-  <Story name="Table">{ExampleTable.bind({})}</Story>
+  <Story
+    name="Table"
+    args={{
+      ...defaultArgs,
+    }}
+  >
+    {ExampleTable.bind({})}
+  </Story>
 </Canvas>
 
 <ArgsTable story="Table" />