npm - @openkfw/design-tokens - Versions diffs - 0.1.0 - Mend

@openkfw/design-tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/LICENSE +373 -0
package/README.md +39 -0
package/output/README.md +32 -0
package/output/figma/kfw-design-tokens.light.json +890 -0
package/output/json/kfw-design-tokens.light.json +7330 -0
package/output/penpot/kfw-design-tokens.light.json +890 -0
package/output/web_next_16px/css/kfw-design-tokens.light.css +262 -0
package/output/web_next_16px/js/kfw-design-tokens.light.d.ts +560 -0
package/output/web_next_16px/js/kfw-design-tokens.light.js +568 -0
package/output/web_next_16px/scss/kfw-design-tokens.light.scss +257 -0
package/output/web_stable_10px/css/kfw-design-tokens.light.css +262 -0
package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts +560 -0
package/output/web_stable_10px/js/kfw-design-tokens.light.js +568 -0
package/output/web_stable_10px/scss/kfw-design-tokens.light.scss +257 -0
package/package.json +58 -0
package/sd.config.ts +162 -0
package/tokens/extended/README.md +15 -0
package/tokens/extended/build.ts +79 -0
package/tokens/extended/tokens/tokens.dark.json +21 -0
package/tokens/gen-tokens.dark.json5 +1463 -0
package/tokens/tokens.json +450 -0

package/output/figma/kfw-design-tokens.light.json ADDED Viewed

@@ -0,0 +1,890 @@
+{
+  "Base": {
+    "Color": {
+      "Blue": {
+        "100": {
+          "$value": "#e9f5fb",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#54b3e2",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#007abc",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#005a8c",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#00446e",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#00375b",
+          "$type": "color"
+        }
+      },
+      "Green": {
+        "100": {
+          "$value": "#ecfded",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#b7f9aa",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#94eb90",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#398357",
+          "$type": "color"
+        }
+      },
+      "White": {
+        "90": {
+          "$value": "#ffffffe6",
+          "$type": "color"
+        },
+        "95": {
+          "$value": "#fffffff2",
+          "$type": "color"
+        },
+        "Default": {
+          "$value": "#ffffff",
+          "$type": "color"
+        }
+      },
+      "Black": {
+        "$value": "#000000",
+        "$type": "color"
+      },
+      "Gray": {
+        "50": {
+          "$value": "#f6f7f8",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#eef0f2",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#d8dfe3",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#a1adb5",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#6d767d",
+          "$type": "color"
+        },
+        "500": {
+          "10": {
+            "$value": "#41484c1a",
+            "$type": "color"
+          },
+          "30": {
+            "$value": "#41484c4d",
+            "$type": "color"
+          },
+          "90": {
+            "$value": "#41484ce6",
+            "$type": "color"
+          },
+          "Default": {
+            "$value": "#41484c",
+            "$type": "color"
+          }
+        },
+        "600": {
+          "$value": "#2d3134",
+          "$type": "color"
+        }
+      },
+      "Violet": {
+        "400": {
+          "$value": "#9598e0",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#686fc8",
+          "$type": "color"
+        }
+      },
+      "Red": {
+        "400": {
+          "$value": "#c80538",
+          "$type": "color"
+        }
+      },
+      "Yellow": {
+        "500": {
+          "$value": "#eac80b",
+          "$type": "color"
+        }
+      }
+    },
+    "Fontfamily": {
+      "Sans": {
+        "$value": "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif",
+        "$type": "fontFamilies"
+      },
+      "Mono": {
+        "$value": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
+        "$type": "fontFamilies"
+      }
+    },
+    "Space": {
+      "Static": {
+        "5": {
+          "$value": "5px",
+          "$type": "spacing"
+        },
+        "10": {
+          "$value": "10px",
+          "$type": "spacing"
+        },
+        "15": {
+          "$value": "15px",
+          "$type": "spacing"
+        },
+        "20": {
+          "$value": "20px",
+          "$type": "spacing"
+        },
+        "25": {
+          "$value": "25px",
+          "$type": "spacing"
+        },
+        "30": {
+          "$value": "30px",
+          "$type": "spacing"
+        },
+        "35": {
+          "$value": "35px",
+          "$type": "spacing"
+        },
+        "40": {
+          "$value": "40px",
+          "$type": "spacing"
+        },
+        "50": {
+          "$value": "50px",
+          "$type": "spacing"
+        },
+        "60": {
+          "$value": "60px",
+          "$type": "spacing"
+        }
+      }
+    },
+    "Fontsize": {
+      "Static": {
+        "Sm": {
+          "$value": "14px",
+          "$type": "fontSizes"
+        },
+        "Md": {
+          "$value": "16px",
+          "$type": "fontSizes"
+        },
+        "Lg": {
+          "$value": "18px",
+          "$type": "fontSizes"
+        },
+        "Xl": {
+          "$value": "20px",
+          "$type": "fontSizes"
+        },
+        "2xl": {
+          "$value": "22px",
+          "$type": "fontSizes"
+        },
+        "3xl": {
+          "$value": "24px",
+          "$type": "fontSizes"
+        },
+        "4xl": {
+          "$value": "26px",
+          "$type": "fontSizes"
+        },
+        "5xl": {
+          "$value": "28px",
+          "$type": "fontSizes"
+        },
+        "6xl": {
+          "$value": "30px",
+          "$type": "fontSizes"
+        },
+        "7xl": {
+          "$value": "32px",
+          "$type": "fontSizes"
+        },
+        "8xl": {
+          "$value": "36px",
+          "$type": "fontSizes"
+        }
+      }
+    },
+    "Lineheight": {
+      "2xs": {
+        "$value": "120%",
+        "$type": "lineHeights"
+      },
+      "Xs": {
+        "$value": "130%",
+        "$type": "lineHeights"
+      },
+      "Sm": {
+        "$value": "133.3%",
+        "$type": "lineHeights"
+      },
+      "Md": {
+        "$value": "140%",
+        "$type": "lineHeights"
+      },
+      "Lg": {
+        "$value": "150%",
+        "$type": "lineHeights"
+      }
+    },
+    "Borderradius": {
+      "Sm": {
+        "$value": "2px",
+        "$type": "borderRadius"
+      },
+      "Md": {
+        "$value": "4px",
+        "$type": "borderRadius"
+      },
+      "Lg": {
+        "$value": "20px",
+        "$type": "borderRadius"
+      },
+      "Full": {
+        "$value": "9999px",
+        "$type": "borderRadius"
+      }
+    },
+    "Borderwidth": {
+      "None": {
+        "$value": "0px",
+        "$type": "dimension"
+      },
+      "Md": {
+        "$value": "1px",
+        "$type": "dimension"
+      },
+      "Lg": {
+        "$value": "2px",
+        "$type": "dimension"
+      }
+    },
+    "Fontweight": {
+      "Regular": {
+        "$value": 400,
+        "$type": "fontWeights"
+      },
+      "Medium": {
+        "$value": 500,
+        "$type": "fontWeights"
+      }
+    },
+    "Letterspacing": {
+      "Tight": {
+        "$value": "-0.5px",
+        "$type": "dimension"
+      },
+      "Normal": {
+        "$value": "0px",
+        "$type": "dimension"
+      },
+      "Wide": {
+        "$value": "0.5px",
+        "$type": "dimension"
+      },
+      "Wider": {
+        "$value": "1px",
+        "$type": "dimension"
+      }
+    },
+    "Layout": {
+      "Breakpoint": {
+        "Xs": {
+          "$value": "320px",
+          "$type": "dimension"
+        },
+        "Sm": {
+          "$value": "600px",
+          "$type": "dimension"
+        },
+        "Md": {
+          "$value": "840px",
+          "$type": "dimension"
+        },
+        "Lg": {
+          "$value": "960px",
+          "$type": "dimension"
+        },
+        "Xl": {
+          "$value": "1280px",
+          "$type": "dimension"
+        }
+      },
+      "Container": {
+        "Sm": {
+          "$value": "896px",
+          "$type": "dimension"
+        },
+        "Md": {
+          "$value": "1080px",
+          "$type": "dimension"
+        },
+        "Lg": {
+          "$value": "1280px",
+          "$type": "dimension"
+        }
+      },
+      "Safezone": {
+        "Static": {
+          "Md": {
+            "$value": "20px",
+            "$type": "dimension"
+          },
+          "Lg": {
+            "$value": "40px",
+            "$type": "dimension"
+          }
+        }
+      },
+      "Gridcolumn": {
+        "1": {
+          "$value": 1,
+          "$type": "number"
+        },
+        "2": {
+          "$value": 2,
+          "$type": "number"
+        },
+        "3": {
+          "$value": 3,
+          "$type": "number"
+        },
+        "4": {
+          "$value": 4,
+          "$type": "number"
+        },
+        "6": {
+          "$value": 6,
+          "$type": "number"
+        },
+        "8": {
+          "$value": 8,
+          "$type": "number"
+        },
+        "12": {
+          "$value": 12,
+          "$type": "number"
+        }
+      },
+      "Gridgap": {
+        "Static": {
+          "Xs": {
+            "$value": "12px",
+            "$type": "dimension"
+          },
+          "Sm": {
+            "$value": "18px",
+            "$type": "dimension"
+          },
+          "Md": {
+            "$value": "22px",
+            "$type": "dimension"
+          },
+          "Lg": {
+            "$value": "26px",
+            "$type": "dimension"
+          },
+          "Xl": {
+            "$value": "36px",
+            "$type": "dimension"
+          }
+        }
+      }
+    }
+  },
+  "Semantic": {
+    "Color": {
+      "Fn": {
+        "Default": {
+          "$value": "#005a8c",
+          "$type": "color"
+        },
+        "Active": {
+          "$value": "#00446e",
+          "$type": "color"
+        },
+        "Inactive": {
+          "$value": "#a1adb5",
+          "$type": "color"
+        },
+        "Border": {
+          "$value": "#2d3134",
+          "$type": "color"
+        },
+        "Label": {
+          "$value": "#2d3134",
+          "$type": "color"
+        }
+      },
+      "Text": {
+        "Default": {
+          "$value": "#2d3134",
+          "$type": "color"
+        },
+        "On-dark-bg": {
+          "$value": "#ffffff",
+          "$type": "color"
+        },
+        "On-disabled": {
+          "$value": "#ffffff",
+          "$type": "color"
+        },
+        "Headline-on-dark-bg": {
+          "$value": "#b7f9aa",
+          "$type": "color"
+        }
+      },
+      "Background": {
+        "Default": {
+          "$value": "#ffffff",
+          "$type": "color"
+        },
+        "Subtle": {
+          "$value": "#f6f7f8",
+          "$type": "color"
+        },
+        "Disabled": {
+          "$value": "#a1adb5",
+          "$type": "color"
+        },
+        "Light-blue": {
+          "$value": "#e9f5fb",
+          "$type": "color"
+        },
+        "Light-green": {
+          "$value": "#ecfded",
+          "$type": "color"
+        },
+        "Dark-blue": {
+          "$value": "#00375b",
+          "$type": "color"
+        },
+        "Dark-green": {
+          "$value": "#398357",
+          "$type": "color"
+        }
+      },
+      "Accent": {
+        "$value": "#b7f9aa",
+        "$type": "color"
+      },
+      "Opaque": {
+        "White-90": {
+          "$value": "#ffffffe6",
+          "$type": "color"
+        },
+        "White-95": {
+          "$value": "#fffffff2",
+          "$type": "color"
+        },
+        "Gray-500-10": {
+          "$value": "#41484c1a",
+          "$type": "color"
+        },
+        "Gray-500-30": {
+          "$value": "#41484c4d",
+          "$type": "color"
+        },
+        "Gray-500-90": {
+          "$value": "#41484ce6",
+          "$type": "color"
+        }
+      },
+      "State": {
+        "Danger": {
+          "$value": "#c80538",
+          "$type": "color"
+        },
+        "Success": {
+          "$value": "#398357",
+          "$type": "color"
+        },
+        "Warning": {
+          "$value": "#9598e0",
+          "$type": "color"
+        }
+      },
+      "Status": {
+        "Red": {
+          "$value": "#c80538",
+          "$type": "color"
+        },
+        "Yellow": {
+          "$value": "#eac80b",
+          "$type": "color"
+        },
+        "Green": {
+          "$value": "#398357",
+          "$type": "color"
+        }
+      },
+      "Line": {
+        "6": {
+          "$value": "#00446e",
+          "$type": "color"
+        },
+        "7": {
+          "$value": "#2d3134",
+          "$type": "color"
+        },
+        "8": {
+          "$value": "#a1adb5",
+          "$type": "color"
+        },
+        "9": {
+          "$value": "#005a8c",
+          "$type": "color"
+        },
+        "10": {
+          "$value": "#2d3134",
+          "$type": "color"
+        },
+        "11": {
+          "$value": "#b7f9aa",
+          "$type": "color"
+        },
+        "12": {
+          "$value": "#a1adb5",
+          "$type": "color"
+        }
+      },
+      "Product": {
+        "Container": {
+          "$value": "#f6f7f8",
+          "$type": "color"
+        },
+        "Benefit": {
+          "$value": "#007abc",
+          "$type": "color"
+        },
+        "Credit": {
+          "$value": "#398357",
+          "$type": "color"
+        },
+        "Cooperation": {
+          "$value": "#686fc8",
+          "$type": "color"
+        },
+        "Credit-benefit": {
+          "$value": "#41484c",
+          "$type": "color"
+        }
+      },
+      "Icon": {
+        "Default": {
+          "$value": "#005a8c",
+          "$type": "color"
+        },
+        "Secondary": {
+          "$value": "#54b3e2",
+          "$type": "color"
+        },
+        "Disabled": {
+          "$value": "#398357",
+          "$type": "color"
+        },
+        "Disabled-secondary": {
+          "$value": "#94eb90",
+          "$type": "color"
+        }
+      }
+    },
+    "Fontfamily": {
+      "Default": {
+        "$value": "'KfW Centro Sans', Arial, Helvetica Neue, Helvetica, sans-serif",
+        "$type": "fontFamilies"
+      },
+      "Code": {
+        "$value": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
+        "$type": "fontFamilies"
+      }
+    },
+    "Space": {
+      "Xsmall": {
+        "$value": "10px",
+        "$type": "spacing"
+      },
+      "Small": {
+        "$value": "20px",
+        "$type": "spacing"
+      },
+      "Medium": {
+        "$value": "30px",
+        "$type": "spacing"
+      },
+      "Large": {
+        "Min": {
+          "$value": "35px",
+          "$type": "spacing"
+        },
+        "Max": {
+          "$value": "40px",
+          "$type": "spacing"
+        },
+        "Val": {
+          "$value": "33.333px",
+          "$type": "spacing"
+        }
+      },
+      "Big": {
+        "Min": {
+          "$value": "50px",
+          "$type": "spacing"
+        },
+        "Max": {
+          "$value": "60px",
+          "$type": "spacing"
+        },
+        "Val": {
+          "$value": "46.666px",
+          "$type": "spacing"
+        }
+      }
+    },
+    "Fontspace": {
+      "Default": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "Introduction": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "Small": {
+        "$value": "5px",
+        "$type": "dimension"
+      },
+      "Large": {
+        "$value": "15px",
+        "$type": "dimension"
+      },
+      "Heading-1": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "Heading-2": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "Heading-3": {
+        "$value": "10px",
+        "$type": "dimension"
+      },
+      "Heading-4": {
+        "$value": "10px",
+        "$type": "dimension"
+      },
+      "Heading-5": {
+        "$value": "10px",
+        "$type": "dimension"
+      },
+      "Heading-6": {
+        "$value": "20px",
+        "$type": "dimension"
+      }
+    },
+    "Fontsize": {
+      "Default": {
+        "$value": "16px",
+        "$type": "fontSizes"
+      },
+      "Introduction": {
+        "$value": "20px",
+        "$type": "fontSizes"
+      },
+      "Small": {
+        "$value": "14px",
+        "$type": "fontSizes"
+      },
+      "Large": {
+        "$value": "18px",
+        "$type": "fontSizes"
+      },
+      "Heading-1": {
+        "Min": {
+          "$value": "30px",
+          "$type": "fontSizes"
+        },
+        "Max": {
+          "$value": "36px",
+          "$type": "fontSizes"
+        },
+        "Val": {
+          "$value": "28px",
+          "$type": "fontSizes"
+        }
+      },
+      "Heading-2": {
+        "Min": {
+          "$value": "28px",
+          "$type": "fontSizes"
+        },
+        "Max": {
+          "$value": "32px",
+          "$type": "fontSizes"
+        },
+        "Val": {
+          "$value": "26.666px",
+          "$type": "fontSizes"
+        }
+      },
+      "Heading-3": {
+        "Min": {
+          "$value": "24px",
+          "$type": "fontSizes"
+        },
+        "Max": {
+          "$value": "26px",
+          "$type": "fontSizes"
+        },
+        "Val": {
+          "$value": "23.333px",
+          "$type": "fontSizes"
+        }
+      },
+      "Heading-4": {
+        "Min": {
+          "$value": "20px",
+          "$type": "fontSizes"
+        },
+        "Max": {
+          "$value": "22px",
+          "$type": "fontSizes"
+        },
+        "Val": {
+          "$value": "19.333px",
+          "$type": "fontSizes"
+        }
+      },
+      "Heading-5": {
+        "$value": "18px",
+        "$type": "fontSizes"
+      },
+      "Heading-6": {
+        "$value": "16px",
+        "$type": "fontSizes"
+      }
+    },
+    "Lineheight": {
+      "Default": {
+        "$value": "140%",
+        "$type": "lineHeights"
+      },
+      "List": {
+        "$value": "150%",
+        "$type": "lineHeights"
+      },
+      "Heading": {
+        "$value": "130%",
+        "$type": "lineHeights"
+      },
+      "Heading-5": {
+        "$value": "133.3%",
+        "$type": "lineHeights"
+      }
+    },
+    "Borderradius": {
+      "$value": "4px",
+      "$type": "borderRadius"
+    },
+    "Focusring": {
+      "Outline": {
+        "$value": {
+          "color": "#00446e",
+          "width": "2px",
+          "style": "dashed"
+        },
+        "$type": "border"
+      },
+      "Outline-offset": {
+        "$value": "2px",
+        "$type": "dimension"
+      }
+    },
+    "Fontweight": {
+      "Default": {
+        "$value": 400,
+        "$type": "fontWeights"
+      },
+      "Heading": {
+        "$value": 500,
+        "$type": "fontWeights"
+      }
+    },
+    "Breakpoint": {
+      "Mobile": {
+        "$value": "600px",
+        "$type": "dimension"
+      },
+      "Tablet": {
+        "$value": "840px",
+        "$type": "dimension"
+      },
+      "Desktop": {
+        "$value": "960px",
+        "$type": "dimension"
+      }
+    },
+    "Contentwrapper": {
+      "Narrow": {
+        "$value": "896px",
+        "$type": "dimension"
+      },
+      "Basic": {
+        "$value": "1080px",
+        "$type": "dimension"
+      },
+      "Extended": {
+        "$value": "1280px",
+        "$type": "dimension"
+      }
+    },
+    "Safezone": {
+      "Min": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "Max": {
+        "$value": "40px",
+        "$type": "dimension"
+      },
+      "Val": {
+        "$value": "-13.333px",
+        "$type": "dimension"
+      }
+    }
+  },
+  "$metadata": {
+    "tokenSetOrder": [
+      "Base",
+      "Semantic"
+    ]
+  }
+}