@utrecht/document-css 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @utrecht/document-css
+
+## 1.2.0
+
+### Minor Changes
+
+- a42a56a: Added metadata for document tokens.
+
+## 1.1.0
+
+### Minor Changes
+
+- 62f1157: Add SCSS files to `src/` directory of CSS component packages.
+
+## 1.0.0
+
+### Major Changes
+
+- 856d996: Switch from alpha releases to semantic versioning.

package/_lang.md

@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+<!-- markdownlint-disable first-line-h1 -->
+
+Maak duidelijk welke taal het document is ([WCAG eis 3.1.1](https://www.w3.org/TR/WCAG21/#language-of-page)) met het `lang` attribuut.
+
+Het is gebruikelijk om de tweeletterige ISO-639-1 code te gebruiken als die bestaat, anders de drieletterige ISO-639-3 code.

package/dist/index.css

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-document {
+  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  -webkit-font-smoothing: auto !important;
+  -moz-osx-font-smoothing: auto !important;
+  color: var(--utrecht-document-color, inherit);
+  font-family: var(--utrecht-document-font-family, inherit);
+  font-size: var(--utrecht-document-font-size, inherit);
+  font-weight: var(--utrecht-document-font-weight, inherit);
+  line-height: var(--utrecht-document-line-height, inherit);
+  text-rendering: optimizeLegibility;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+.utrecht-document :lang(ar) {
+  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
+  letter-spacing: 0 !important;
+}
+
+.utrecht-document--surface {
+  background-color: var(--utrecht-document-background-color, inherit);
+}

package/dist/index.js

@@ -0,0 +1 @@
+var undefined$1 = undefined;export{undefined$1 as default};

package/package.json

@@ -1,18 +1,32 @@
 {
-  "version": "1.0.0",
+  "version": "1.2.0",
   "author": "Community for NL Design System",
   "description": "Document component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/document-css",
   "files": [
-    "dist/"
+    "dist/",
+    "docs/",
+    "src/",
+    "*.md"
   ],
-  "devDependencies": {},
+  "main": "dist/index.css",
+  "devDependencies": {
+    "rollup": "4.18.0"
+  },
   "keywords": [
     "nl-design-system"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {}
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "components/document"
+  },
+  "scripts": {
+    "build": "rollup -c ../rollup.config.mjs",
+    "clean": "rimraf dist"
+  }
 }

package/src/_mixin.scss

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@mixin reset-font-smoothing {
+  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  -webkit-font-smoothing: auto !important;
+  -moz-osx-font-smoothing: auto !important;
+}
+
+@mixin utrecht-document {
+  @include reset-font-smoothing;
+
+  color: var(--utrecht-document-color, inherit);
+  font-family: var(--utrecht-document-font-family, inherit);
+  font-size: var(--utrecht-document-font-size, inherit);
+  font-weight: var(--utrecht-document-font-weight, inherit);
+  line-height: var(--utrecht-document-line-height, inherit);
+  text-rendering: optimizeLegibility;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+
+  :lang(ar) {
+    /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
+    letter-spacing: 0 !important;
+  }
+}
+
+@mixin utrecht-document--surface {
+  background-color: var(--utrecht-document-background-color, inherit);
+}

package/src/html/_mixin.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../mixin";
+
+@mixin utrecht-html-body {
+  body {
+    @include utrecht-document;
+    @include utrecht-document--surface;
+  }
+}

package/src/html/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+@include utrecht-html-body;

package/src/index.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./mixin";
+
+.utrecht-document {
+  @include utrecht-document;
+}
+
+.utrecht-document--surface {
+  @include utrecht-document--surface;
+}

package/src/tokens.json

@@ -0,0 +1,66 @@
+{
+  "utrecht": {
+    "document": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": ["<length>", "<number>"],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "lineHeights"
+      }
+    }
+  }
+}