@open-inwoner/design-tokens 0.0.20 → 0.0.22

package/dist/_variables.scss

@@ -314,6 +314,44 @@ $utrecht-skip-link-focus-color: #fff;
 $utrecht-skip-link-focus-text-decoration: underline;
 $utrecht-skip-link-focus-visible-color: #fff;
 $utrecht-skip-link-focus-visible-text-decoration: underline;
+$utrecht-table-border-color: transparent;
+$utrecht-table-border-width: 0;
+$utrecht-table-font-size: 16px;
+$utrecht-table-line-height: 24px;
+$utrecht-table-margin-block-end: 0;
+$utrecht-table-margin-block-start: 0;
+$utrecht-table-caption-font-weight: 700;
+$utrecht-table-caption-font-size: 16px;
+$utrecht-table-caption-color: #000000;
+$utrecht-table-caption-line-height: 130%;
+$utrecht-table-caption-text-align: left;
+$utrecht-table-caption-margin-block-end: 0;
+$utrecht-table-header-font-weight: bold;
+$utrecht-table-header-background-color: transparent;
+$utrecht-table-header-color: #000000;
+$utrecht-table-header-text-transform: none;
+$utrecht-table-header-border-block-end-width: 2px;
+$utrecht-table-header-sticky-background-color: transparent;
+$utrecht-table-header-sticky-color: #000000;
+$utrecht-table-header-sticky-border-block-end-width: 2px;
+$utrecht-table-footer-background-color: #ffffff;
+$utrecht-table-footer-color: #000000;
+$utrecht-table-footer-sticky-color: #000000;
+$utrecht-table-header-cell-font-size: 16px;
+$utrecht-table-header-cell-font-weight: bold;
+$utrecht-table-header-cell-color: #000000;
+$utrecht-table-header-cell-text-transform: none;
+$utrecht-table-cell-line-height: 24px;
+$utrecht-table-cell-padding-block-end: 12px;
+$utrecht-table-cell-padding-block-start: 12px;
+$utrecht-table-cell-padding-inline-end: 8px;
+$utrecht-table-cell-padding-inline-start: 8px;
+$utrecht-table-cell-selected-color: #000000;
+$utrecht-table-cell-icon-size: 16px;
+$utrecht-table-row-border-block-end-width: 1px;
+$utrecht-table-row-padding-inline-end: 8px;
+$utrecht-table-row-padding-inline-start: 8px;
+$utrecht-table-row-alternate-odd-background-color: #FFFFFF;
 $utrecht-textbox-background-color: transparent;
 $utrecht-textbox-border-block-end-width: 1px;
 $utrecht-textbox-border-bottom-width: 1px;
@@ -454,6 +492,16 @@ $utrecht-select-font-size: $oip-text-font-size;
 $utrecht-skip-link-background-color: $oip-color-accent;
 $utrecht-skip-link-focus-background-color: $oip-color-accent;
 $utrecht-skip-link-focus-visible-background-color: $oip-color-accent;
+$utrecht-table-font-family: $oip-typography-sans-serif-font-family;
+$utrecht-table-caption-font-family: $oip-typography-sans-serif-font-family;
+$utrecht-table-header-border-block-end-color: $oip-color-gray;
+$utrecht-table-header-sticky-border-block-end-color: $oip-color-gray;
+$utrecht-table-footer-sticky-background-color: $oip-color-gray;
+$utrecht-table-cell-selected-background-color: $oip-color-gray;
+$utrecht-table-row-border-block-end-color: $oip-color-gray;
+$utrecht-table-row-alternate-odd-color: $oip-color-fg;
+$utrecht-table-row-alternate-even-background-color: $oip-color-gray-lightest;
+$utrecht-table-row-alternate-even-color: $oip-color-fg;
 $utrecht-textbox-color: $oip-color-fg;
 $utrecht-textbox-font-family: $oip-typography-sans-serif-font-family;
 $utrecht-textbox-font-size: $oip-text-font-size;

package/dist/css/index.css

@@ -316,6 +316,44 @@
   --utrecht-skip-link-focus-text-decoration: underline;
   --utrecht-skip-link-focus-visible-color: #fff;
   --utrecht-skip-link-focus-visible-text-decoration: underline;
+  --utrecht-table-border-color: transparent;
+  --utrecht-table-border-width: 0;
+  --utrecht-table-font-size: 16px;
+  --utrecht-table-line-height: 24px;
+  --utrecht-table-margin-block-end: 0;
+  --utrecht-table-margin-block-start: 0;
+  --utrecht-table-caption-font-weight: 700;
+  --utrecht-table-caption-font-size: 16px;
+  --utrecht-table-caption-color: #000000;
+  --utrecht-table-caption-line-height: 130%;
+  --utrecht-table-caption-text-align: left;
+  --utrecht-table-caption-margin-block-end: 0;
+  --utrecht-table-header-font-weight: bold;
+  --utrecht-table-header-background-color: transparent;
+  --utrecht-table-header-color: #000000;
+  --utrecht-table-header-text-transform: none;
+  --utrecht-table-header-border-block-end-width: 2px;
+  --utrecht-table-header-sticky-background-color: transparent;
+  --utrecht-table-header-sticky-color: #000000;
+  --utrecht-table-header-sticky-border-block-end-width: 2px;
+  --utrecht-table-footer-background-color: #ffffff;
+  --utrecht-table-footer-color: #000000;
+  --utrecht-table-footer-sticky-color: #000000;
+  --utrecht-table-header-cell-font-size: 16px;
+  --utrecht-table-header-cell-font-weight: bold;
+  --utrecht-table-header-cell-color: #000000;
+  --utrecht-table-header-cell-text-transform: none;
+  --utrecht-table-cell-line-height: 24px;
+  --utrecht-table-cell-padding-block-end: 12px;
+  --utrecht-table-cell-padding-block-start: 12px;
+  --utrecht-table-cell-padding-inline-end: 8px;
+  --utrecht-table-cell-padding-inline-start: 8px;
+  --utrecht-table-cell-selected-color: #000000;
+  --utrecht-table-cell-icon-size: 16px;
+  --utrecht-table-row-border-block-end-width: 1px;
+  --utrecht-table-row-padding-inline-end: 8px;
+  --utrecht-table-row-padding-inline-start: 8px;
+  --utrecht-table-row-alternate-odd-background-color: #FFFFFF;
   --utrecht-textbox-background-color: transparent;
   --utrecht-textbox-border-block-end-width: 1px;
   --utrecht-textbox-border-bottom-width: 1px;
@@ -456,6 +494,16 @@
   --utrecht-skip-link-background-color: var(--oip-color-accent);
   --utrecht-skip-link-focus-background-color: var(--oip-color-accent);
   --utrecht-skip-link-focus-visible-background-color: var(--oip-color-accent);
+  --utrecht-table-font-family: var(--oip-typography-sans-serif-font-family);
+  --utrecht-table-caption-font-family: var(--oip-typography-sans-serif-font-family);
+  --utrecht-table-header-border-block-end-color: var(--oip-color-gray);
+  --utrecht-table-header-sticky-border-block-end-color: var(--oip-color-gray);
+  --utrecht-table-footer-sticky-background-color: var(--oip-color-gray);
+  --utrecht-table-cell-selected-background-color: var(--oip-color-gray);
+  --utrecht-table-row-border-block-end-color: var(--oip-color-gray);
+  --utrecht-table-row-alternate-odd-color: var(--oip-color-fg);
+  --utrecht-table-row-alternate-even-background-color: var(--oip-color-gray-lightest);
+  --utrecht-table-row-alternate-even-color: var(--oip-color-fg);
   --utrecht-textbox-color: var(--oip-color-fg);
   --utrecht-textbox-font-family: var(--oip-typography-sans-serif-font-family);
   --utrecht-textbox-font-size: var(--oip-text-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-inwoner/design-tokens",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Design tokens for Open Inwoner",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/community/utrecht/table.tokens.json

@@ -0,0 +1,78 @@
+{
+  "utrecht": {
+    "table": {
+      "border-color": {"value": "transparent"},
+      "border-width": {"value": "0"},
+      "font-family": {"value": "{oip.typography.sans-serif.font-family}"},
+      "font-size": {"value": "16px"},
+      "line-height": {"value": "24px"},
+      "margin-block-end": {"value": "0"},
+      "margin-block-start": {"value": "0"},
+      "caption": {
+        "font-weight": {"value": "700"},
+        "font-family": {"value": "{oip.typography.sans-serif.font-family}"},
+        "font-size": {"value": "16px"},
+        "color": {"value": "#000000"},
+        "line-height": {"value": "130%"},
+        "text-align": {"value": "left"},
+        "margin-block-end": {"value": "0"}
+      },
+      "header": {
+        "font-weight": {"value": "bold"},
+        "background-color": {"value": "transparent"},
+        "color": {"value": "#000000"},
+        "text-transform": {"value": "none"},
+        "border-block-end-color": {"value": "{oip.color.gray}"},
+        "border-block-end-width": {"value": "2px"},
+        "sticky": {
+          "background-color": {"value": "transparent"},
+          "color": {"value": "#000000"},
+          "border-block-end-color": {"value": "{oip.color.gray}"},
+          "border-block-end-width": {"value": "2px"}
+        }
+      },
+      "footer": {
+        "background-color": {"value": "#ffffff"},
+        "color": {"value": "#000000"},
+        "sticky": {
+          "background-color": {"value": "{oip.color.gray}"},
+          "color": {"value": "#000000"}
+        }
+      },
+      "header-cell": {
+        "font-size": {"value": "16px"},
+        "font-weight": {"value": "bold"},
+        "color": {"value": "#000000"},
+        "text-transform": {"value": "none"}
+      },
+      "cell": {
+        "line-height": {"value": "24px"},
+        "padding-block-end": {"value": "12px"},
+        "padding-block-start": {"value": "12px"},
+        "padding-inline-end": {"value": "8px"},
+        "padding-inline-start": {"value": "8px"},
+        "selected": {
+          "background-color": {"value": "{oip.color.gray}"},
+          "color": {"value": "#000000"}
+        },
+        "icon": {
+          "size": {"value": "16px"}
+        }
+      },
+      "row": {
+        "border-block-end-color": {"value": "{oip.color.gray}"},
+        "border-block-end-width": {"value": "1px"},
+        "padding-inline-end": {"value": "8px"},
+        "padding-inline-start": {"value": "8px"},
+        "alternate-odd": {
+          "background-color": {"value": "#FFFFFF"},
+          "color": {"value": "{oip.color.fg}"}
+        },
+        "alternate-even": {
+          "background-color": {"value": "{oip.color.gray-lightest}"},
+          "color": {"value": "{oip.color.fg}"}
+        }
+      }
+    }
+  }
+}