@openkfw/design-tokens 0.5.2 → 0.5.3

package/demo/src/vendor/gen-custom-media.css

@@ -0,0 +1,8 @@
+/* Custom Media Queries generated from KfW Design Tokens v0.5.1 */
+
+/* See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media */
+
+@custom-media --kfw-breakpoint-mobile (min-width: 600px);
+@custom-media --kfw-breakpoint-tablet (min-width: 840px);
+@custom-media --kfw-breakpoint-desktop (min-width: 960px);
+@custom-media --kfw-breakpoint-desktop-large (min-width: 1280px);

package/demo/src/vendor/uaplus.css

@@ -0,0 +1,310 @@
+/* stylelint-disable */
+
+/**
+ * uaplus.css version 0.2.1
+ */
+
+/**
+ * Different box model
+ *
+ * We use the traditional box model, where the padding and border
+ * of the element is drawn inside and not outside the specified
+ * width and height. That makes combining relative and absolute
+ * units in properties like <code>inline-size</code> and
+ * <code>block-size</code> easier.
+ *
+ * See https://en.wikipedia.org/wiki/CSS_box_model
+ */
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+/**
+ * Improve focus styles
+ *
+ * Add spacing between content and its focus outline.
+ */
+:focus-visible {
+  outline-offset: 3px;
+}
+
+/**
+ * Disable text size adjustment
+ *
+ * To improve readability on non-mobile optimized websites, browsers
+ * like mobile Safari increase the default font size when you switch
+ * a website from portrait to landscape. We don't want that for our
+ * optimized sites.
+ *
+ * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
+ */
+:where(html) {
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/**
+ * Increase line height
+ *
+ * Long paragraphs are easier to read if the line height is higher.
+ */
+:where(html) {
+  line-height: 1.5;
+}
+
+/**
+ * Add scrollbar gutter
+ *
+ * Prevent the page from “jumping” when switching from a long to a short page.
+ *
+ */
+:where(html) {
+  scrollbar-gutter: stable;
+}
+
+/**
+ * Remove UA styles for h1s nested in sectioning content
+ *
+ * Nesting h1s in section, articles, etc., shouldn't influence the
+ * styling of the heading since nesting doesn't influence
+ * semantics either.
+ *
+ * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
+ * See https://github.com/whatwg/html/pull/11102
+ * See https://html.spec.whatwg.org/#sections-and-headings
+ */
+:where(h1) {
+  font-size: 2em;
+  margin-block: 0.67em;
+}
+
+/**
+ * Improve abbreviations with titles
+ *
+ * The abbr element with the title isn't helpful regarding
+ * accessibility because support is inconsistent, and it's only
+ * accessible to some users. Still, it's commonly used.
+ * This rule shows a dotted underline on abbreviations in all
+ * browsers (there's a bug in Safari) and changes the cursor.
+ *
+ * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
+ */
+:where(abbr[title]) {
+  cursor: help;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+/**
+ * Optimize mark element in Forced Colors Mode
+ *
+ * The colors of the mark element don't change in Forced Colors Mode,
+ * which can be problematic. Use system colors instead.
+ *
+ * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
+ */
+@media (forced-colors: active) {
+  mark {
+    color: HighlightText;
+    background-color: Highlight;
+  }
+}
+
+/**
+ * Announce del, ins, and s to screen readers
+ *
+ * With the exception of NVDA (2024.4.2), which announces "deletion",
+ * none of the common screen readers announces the <s> element.
+ * Voice Over on macOS and iOS and Narrator don't announce
+ * <ins> and <del>. Usually, screen readers not announcing text-level
+ * semantics is something we just accept, but devs using elements
+ * like <s> without knowing that they may not convey semantics is a
+ * common issue. We announce the start and end of stricken, inserted,
+ * and deleted content with pseudo-elements. For languages other
+ * than English, you should provide translations, e.g. :lang(de)
+ * :where(s::before) { content: "Durchgestrichener Text Beginn "; }
+ *
+ * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
+ */
+:where(del, ins, s)::before,
+:where(del, ins, s)::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  content: "test";
+}
+
+:where(s)::before {
+  content: "stricken text start ";
+}
+
+:where(s)::after {
+  content: " stricken text end";
+}
+
+:where(del)::before {
+  content: "deletion start ";
+}
+
+:where(del)::after {
+  content: " deletion end";
+}
+
+:where(ins)::before {
+  content: "insertion start ";
+}
+
+:where(ins)::after {
+  content: " insertion end";
+}
+
+/**
+ * Avoid overflow caused by embedded content
+ *
+ * Ensure that embedded content (audio, video, images, etc.)
+ * doesn't overflow its container.
+ */
+:where(audio, iframe, img, svg, video) {
+  max-block-size: 100%;
+  max-inline-size: 100%;
+}
+
+/**
+ * Prevent fieldsets from causing overflow
+ *
+ * Reset the default `min-inline-size: min-content` to prevent
+ * children from stretching fieldsets
+ *
+ * See https://github.com/twbs/bootstrap/issues/12359
+ * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+ */
+:where(fieldset) {
+  min-inline-size: 0;
+}
+
+/**
+ * Turn labels into block elements
+ *
+ * Labels for inputs, selects, and textarea should be block
+ * elements.
+ */
+:where(label):has(+ :where(textarea, input, select)) {
+  display: block;
+}
+
+/**
+ * Increase the block-size of textareas
+ *
+ * The default height of textareas is small. We increase it a bit.
+ */
+:where(textarea:not([rows])) {
+  min-block-size: 6em;
+}
+
+/**
+ * Inherit font styling in form elements
+ *
+ * buttons, inputs, selects, and textarea should have the same font
+ * family and size as the rest of the page.
+ */
+:where(button, input, select, textarea) {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/**
+ * Normalize search input styles
+ *
+ * Remove the rounded corners of search inputs on macOS and IOS
+ * and normalize the background color
+ */
+:where([type="search"]) {
+  -webkit-appearance: textfield;
+}
+
+/* iOS only */
+@supports (-webkit-touch-callout: none) {
+  :where([type="search"]) {
+    border: 1px solid -apple-system-secondary-label;
+    background-color: canvas;
+  }
+}
+
+/**
+ * Maintain direction in some input types
+ *
+ * Some input types should remain left-aligned in right-to-left
+ * languages,but only if the value isn't empty because the
+ * placeholder should be right-aligned.
+ *
+ * See https://rtlstyling.com/posts/rtl-styling#form-inputs
+ */
+:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
+  direction: ltr;
+}
+
+/**
+ * Improve table styling
+ *
+ * With the default styling, tables are hard to scan. These rules
+ * add padding and collapsed borders.
+ */
+:where(table) {
+  border-collapse: collapse;
+  border: 1px solid;
+}
+
+:where(th, td) {
+  border: 1px solid;
+  padding: 0.25em 0.5em;
+}
+
+/**
+ * Fading dialogs
+ *
+ * Add fade in and fade out transitions for the dialog element
+ * and backdrops
+ */
+:where(dialog)::backdrop {
+  background: oklch(0% 0 0 / 0.3);
+}
+
+:where(dialog),
+:where(dialog)::backdrop {
+  opacity: 0;
+  transition:
+    opacity 300ms ease-out,
+    display 300ms allow-discrete,
+    overlay 300ms allow-discrete;
+}
+
+:where(dialog[open]),
+:where(dialog[open])::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  :where(dialog[open]),
+  :where(dialog[open])::backdrop {
+    opacity: 0;
+  }
+}
+
+/**
+ * Increase specificity of [hidden]
+ *
+ * Make it harder to accidentally unhide elements with the
+ * [hidden] attribute while still maintaining the until-found
+ * functionality.
+ */
+[hidden]:not([hidden="until-found"]) {
+  display: none !important;
+}
+
+/* stylelint-enable */

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
+    "README.md",
     "output",
     "tokens/tokens.json",
     "tokens/gen-tokens.dark.json5",
-    "demo/src/styles/style.css",
-    "demo/src/styles/vendor/**.css",
+    "demo/src/style.css",
+    "demo/src/vendor/**.css",
     "demo/dist/css/style.min.css"
   ],
   "scripts": {
@@ -38,13 +39,13 @@
     "node": ">= 22.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^22",
+    "@types/node": "^22.18.10",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
@@ -52,7 +53,7 @@
     "style-dictionary": "^5.1.1",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.0",
-    "npm-check-updates": "^19.0.0"
+    "typescript-eslint": "^8.46.2",
+    "npm-check-updates": "^19.1.1"
   }
 }