@openkfw/design-tokens 0.7.0 → 1.0.2

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 (19) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +54 -30
  3. package/demo/dist/css/style.min.css +1 -1
  4. package/demo/src/App.ts +12 -0
  5. package/demo/src/ColorPalette.ts +84 -0
  6. package/demo/src/Navigation.ts +55 -0
  7. package/demo/src/StickyHeader.ts +40 -0
  8. package/demo/src/main.ts +1 -0
  9. package/output/css/kfw-design-tokens.light.css +1 -1
  10. package/output/js/kfw-design-tokens.d.ts +1 -1
  11. package/output/js/kfw-design-tokens.light.js +1 -1
  12. package/output/scss/kfw-design-tokens.light.scss +1 -1
  13. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -1
  14. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -1
  15. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -1
  16. package/package.json +5 -11
  17. package/demo/src/style.css +0 -2023
  18. package/demo/src/vendor/gen-icons.css +0 -115
  19. /package/demo/scripts/{build-icons.js → build-icons-css.js} +0 -0
package/demo/src/vendor/gen-icons.css DELETED
@@ -1,115 +0,0 @@
1
- /* Auto-generated icon classes */
2
-
3
- :root,
4
- :host {
5
- --kfw-icon-alert: url("data:image/svg+xml,%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21.96954%2C20.12582a.25056.25056%2C0%2C0%2C1-.21566.37811H2.22287a.22912.22912%2C0%2C0%2C1-.19729-.34561L11.7969%2C3.60968a.23435.23435%2C0%2C0%2C1%2C.4035-.00015Z%22%2F%3E%3C%2Fsvg%3E");
6
- --kfw-icon-arrow-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23005A8C%22%20fill-rule%3D%22evenodd%22%20d%3D%22m2.146%207.852.706-.706a.5.5%200%200%201%20.706%200l8.448%208.238%208.436-8.238a.5.5%200%200%201%20.706%200l.706.706a.5.5%200%200%201%200%20.706l-9.495%209.296a.5.5%200%200%201-.706%200L2.146%208.558a.5.5%200%200%201%200-.706%22%20style%3D%22fill%3A%23005a8c%22%2F%3E%3C%2Fsvg%3E");
7
- --kfw-icon-arrow-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23005A8C%22%20fill-rule%3D%22evenodd%22%20d%3D%22m16.148%202.146.706.706a.5.5%200%200%201%200%20.706l-8.238%208.447%208.238%208.437a.5.5%200%200%201%200%20.705l-.706.707a.5.5%200%200%201-.706%200l-9.296-9.496a.5.5%200%200%201%200-.706l9.296-9.506a.5.5%200%200%201%20.706%200%22%20style%3D%22fill%3A%23005a8c%22%2F%3E%3C%2Fsvg%3E");
8
- --kfw-icon-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23005A8C%22%20fill-rule%3D%22evenodd%22%20d%3D%22m7.852%2021.854-.706-.706a.5.5%200%200%201%200-.706l8.238-8.447-8.238-8.437a.5.5%200%200%201%200-.706l.706-.706a.5.5%200%200%201%20.706%200l9.296%209.496a.5.5%200%200%201%200%20.705l-9.296%209.507a.5.5%200%200%201-.706%200%22%20style%3D%22fill%3A%23005a8c%22%2F%3E%3C%2Fsvg%3E");
9
- --kfw-icon-arrow-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22m21.854%2017.148-.706.706a.5.5%200%200%201-.706%200l-8.448-8.238-8.436%208.238a.5.5%200%200%201-.706%200l-.706-.706a.5.5%200%200%201%200-.706l9.495-9.296a.5.5%200%200%201%20.706%200l9.507%209.296a.5.5%200%200%201%200%20.706%22%20style%3D%22fill%3A%23000%22%2F%3E%3C%2Fsvg%3E");
10
- --kfw-icon-bullet-point-empty: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C6.478%202%202%206.478%202%2012s4.478%2010%2010%2010%2010-4.478%2010-10S17.522%202%2012%202m0%202c4.411%200%208%203.589%208%208s-3.589%208-8%208-8-3.589-8-8%203.589-8%208-8%22%2F%3E%3C%2Fsvg%3E");
11
- --kfw-icon-bullet-point: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C6.478%202%202%206.478%202%2012s4.478%2010%2010%2010%2010-4.478%2010-10S17.522%202%2012%202%22%2F%3E%3C%2Fsvg%3E");
12
- --kfw-icon-calendar: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M7.5%2C2%20C7.776%2C2%208%2C2.22301115%208%2C2.500025%20L8%2C2.500025%20L8%2C4.00010001%20L16%2C4.00010001%20L16%2C2.500025%20C16%2C2.22301115%2016.223%2C2%2016.5%2C2%20L16.5%2C2%20L17.5%2C2%20C17.776%2C2%2018%2C2.22301115%2018%2C2.500025%20L18%2C2.500025%20L18%2C4.00010001%20L21.5%2C4.00010001%20C21.776%2C4.00010001%2022%2C4.22311116%2022%2C4.50012501%20L22%2C4.50012501%20L22%2C21.499975%20C22%2C21.7759888%2021.776%2C22%2021.5%2C22%20L21.5%2C22%20L2.5%2C22%20C2.223%2C22%202%2C21.7759888%202%2C21.499975%20L2%2C21.499975%20L2%2C4.50012501%20C2%2C4.22311116%202.223%2C4.00010001%202.5%2C4.00010001%20L2.5%2C4.00010001%20L6%2C4.00010001%20L6%2C2.500025%20C6%2C2.22301115%206.223%2C2%206.5%2C2%20L6.5%2C2%20Z%20M20%2C5.99919996%20L4%2C5.99919996%20L4%2C20.0009%20L20%2C20.0009%20L20%2C5.99919996%20Z%20M7.4998%2C16.0005%20C7.7758%2C16.0005%207.9998%2C16.2245112%207.9998%2C16.500525%20L7.9998%2C16.500525%20L7.9998%2C17.500575%20C7.9998%2C17.7765888%207.7758%2C18.0006%207.4998%2C18.0006%20L7.4998%2C18.0006%20L6.4998%2C18.0006%20C6.2238%2C18.0006%205.9998%2C17.7765888%205.9998%2C17.500575%20L5.9998%2C17.500575%20L5.9998%2C16.500525%20C5.9998%2C16.2245112%206.2238%2C16.0005%206.4998%2C16.0005%20L6.4998%2C16.0005%20Z%20M12.4998%2C16.0005%20C12.7758%2C16.0005%2012.9998%2C16.2245112%2012.9998%2C16.500525%20L12.9998%2C16.500525%20L12.9998%2C17.500575%20C12.9998%2C17.7765888%2012.7758%2C18.0006%2012.4998%2C18.0006%20L12.4998%2C18.0006%20L11.4998%2C18.0006%20C11.2238%2C18.0006%2010.9998%2C17.7765888%2010.9998%2C17.500575%20L10.9998%2C17.500575%20L10.9998%2C16.500525%20C10.9998%2C16.2245112%2011.2238%2C16.0005%2011.4998%2C16.0005%20L11.4998%2C16.0005%20Z%20M17.4998%2C16.0005%20C17.7758%2C16.0005%2017.9998%2C16.2245112%2017.9998%2C16.500525%20L17.9998%2C16.500525%20L17.9998%2C17.500575%20C17.9998%2C17.7765888%2017.7758%2C18.0006%2017.4998%2C18.0006%20L17.4998%2C18.0006%20L16.4998%2C18.0006%20C16.2238%2C18.0006%2015.9998%2C17.7765888%2015.9998%2C17.500575%20L15.9998%2C17.500575%20L15.9998%2C16.500525%20C15.9998%2C16.2245112%2016.2238%2C16.0005%2016.4998%2C16.0005%20L16.4998%2C16.0005%20Z%20M7.4998%2C12.0003%20C7.7758%2C12.0003%207.9998%2C12.2243112%207.9998%2C12.500325%20L7.9998%2C12.500325%20L7.9998%2C13.500375%20C7.9998%2C13.7763888%207.7758%2C14.0004%207.4998%2C14.0004%20L7.4998%2C14.0004%20L6.4998%2C14.0004%20C6.2238%2C14.0004%205.9998%2C13.7763888%205.9998%2C13.500375%20L5.9998%2C13.500375%20L5.9998%2C12.500325%20C5.9998%2C12.2243112%206.2238%2C12.0003%206.4998%2C12.0003%20L6.4998%2C12.0003%20Z%20M12.4998%2C12.0003%20C12.7758%2C12.0003%2012.9998%2C12.2243112%2012.9998%2C12.500325%20L12.9998%2C12.500325%20L12.9998%2C13.500375%20C12.9998%2C13.7763888%2012.7758%2C14.0004%2012.4998%2C14.0004%20L12.4998%2C14.0004%20L11.4998%2C14.0004%20C11.2238%2C14.0004%2010.9998%2C13.7763888%2010.9998%2C13.500375%20L10.9998%2C13.500375%20L10.9998%2C12.500325%20C10.9998%2C12.2243112%2011.2238%2C12.0003%2011.4998%2C12.0003%20L11.4998%2C12.0003%20Z%20M17.4998%2C12.0003%20C17.7758%2C12.0003%2017.9998%2C12.2243112%2017.9998%2C12.500325%20L17.9998%2C12.500325%20L17.9998%2C13.500375%20C17.9998%2C13.7763888%2017.7758%2C14.0004%2017.4998%2C14.0004%20L17.4998%2C14.0004%20L16.4998%2C14.0004%20C16.2238%2C14.0004%2015.9998%2C13.7763888%2015.9998%2C13.500375%20L15.9998%2C13.500375%20L15.9998%2C12.500325%20C15.9998%2C12.2243112%2016.2238%2C12.0003%2016.4998%2C12.0003%20L16.4998%2C12.0003%20Z%20M7.4998%2C8.00010001%20C7.7758%2C8.00010001%207.9998%2C8.22411121%207.9998%2C8.50012501%20L7.9998%2C8.50012501%20L7.9998%2C9.50017501%20C7.9998%2C9.77618881%207.7758%2C10.0002%207.4998%2C10.0002%20L7.4998%2C10.0002%20L6.4998%2C10.0002%20C6.2238%2C10.0002%205.9998%2C9.77618881%205.9998%2C9.50017501%20L5.9998%2C9.50017501%20L5.9998%2C8.50012501%20C5.9998%2C8.22411121%206.2238%2C8.00010001%206.4998%2C8.00010001%20L6.4998%2C8.00010001%20Z%20M12.4998%2C8.00010001%20C12.7758%2C8.00010001%2012.9998%2C8.22411121%2012.9998%2C8.50012501%20L12.9998%2C8.50012501%20L12.9998%2C9.50017501%20C12.9998%2C9.77618881%2012.7758%2C10.0002%2012.4998%2C10.0002%20L12.4998%2C10.0002%20L11.4998%2C10.0002%20C11.2238%2C10.0002%2010.9998%2C9.77618881%2010.9998%2C9.50017501%20L10.9998%2C9.50017501%20L10.9998%2C8.50012501%20C10.9998%2C8.22411121%2011.2238%2C8.00010001%2011.4998%2C8.00010001%20L11.4998%2C8.00010001%20Z%20M17.4998%2C8.00010001%20C17.7758%2C8.00010001%2017.9998%2C8.22411121%2017.9998%2C8.50012501%20L17.9998%2C8.50012501%20L17.9998%2C9.50017501%20C17.9998%2C9.77618881%2017.7758%2C10.0002%2017.4998%2C10.0002%20L17.4998%2C10.0002%20L16.4998%2C10.0002%20C16.2238%2C10.0002%2015.9998%2C9.77618881%2015.9998%2C9.50017501%20L15.9998%2C9.50017501%20L15.9998%2C8.50012501%20C15.9998%2C8.22411121%2016.2238%2C8.00010001%2016.4998%2C8.00010001%20L16.4998%2C8.00010001%20Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
13
- --kfw-icon-checked: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m20.854%205.852-.706-.706a.5.5%200%200%200-.706%200L9.509%2015.385l-4.95-5.256a.5.5%200%200%200-.707%200l-.706.706a.5.5%200%200%200%200%20.706l6.01%206.313a.5.5%200%200%200%20.706%200L20.854%206.56a.5.5%200%200%200%200-.708%22%2F%3E%3C%2Fsvg%3E");
14
- --kfw-icon-close: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23005A8C%22%20fill-rule%3D%22evenodd%22%20d%3D%22m5.99%204.575%206.01%206.01%206.01-6.01a.5.5%200%200%201%20.708%200l.707.708a.5.5%200%200%201%200%20.707L13.415%2012l6.01%206.01a.5.5%200%200%201%200%20.707l-.707.708a.5.5%200%200%201-.707%200l-6.012-6.012-6.01%206.012a.5.5%200%200%201-.707%200l-.707-.707a.5.5%200%200%201%200-.707l6.01-6.012-6.01-6.01a.5.5%200%200%201%200-.706l.707-.708a.5.5%200%200%201%20.708%200%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E");
15
- --kfw-icon-delete: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2061.2%20(89653)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon%2Fm%C3%BClleimer%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icon%2Fm%C3%BClleimer%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7%2C20.0009%20L17%2C20.0009%20L17%2C8.00030002%20L7%2C8.00030002%20L7%2C20.0009%20Z%20M10%2C6.00020001%20L14%2C6.00020001%20L14%2C3.9980999%20L10%2C3.9980999%20L10%2C6.00020001%20Z%20M20.5%2C6.00020001%20L16%2C6.00020001%20L16%2C2.500025%20C16%2C2.22301115%2015.776%2C2%2015.5%2C2%20L8.5%2C2%20C8.223%2C2%208%2C2.22301115%208%2C2.500025%20L8%2C6.00020001%20L3.5%2C6.00020001%20C3.223%2C6.00020001%203%2C6.22321116%203%2C6.50022501%20L3%2C7.50027501%20C3%2C7.77628881%203.223%2C8.00030002%203.5%2C8.00030002%20L5%2C8.00030002%20L5%2C21.499975%20C5%2C21.7759888%205.223%2C22%205.5%2C22%20L18.5%2C22%20C18.776%2C22%2019%2C21.7759888%2019%2C21.499975%20L19%2C8.00030002%20L20.5%2C8.00030002%20C20.776%2C8.00030002%2021%2C7.77628881%2021%2C7.50027501%20L21%2C6.50022501%20C21%2C6.22321116%2020.776%2C6.00020001%2020.5%2C6.00020001%20L20.5%2C6.00020001%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
16
- --kfw-icon-dialogue: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%2012H5.74a.5.5%200%200%200-.39.188L4%2013.874V4h11zm1.5%202a.5.5%200%200%200%20.5-.5V9h3v9.874l-1.35-1.686a.5.5%200%200%200-.39-.187H9v-3zM7%2014v4.5a.5.5%200%200%200%20.5.5h10l2.515%202.82c.095.115.235.18.383.18H21.5a.5.5%200%200%200%20.5-.5v-14a.5.5%200%200%200-.5-.5H17V2.5a.5.5%200%200%200-.5-.5h-14a.5.5%200%200%200-.5.5v14a.5.5%200%200%200%20.5.5h1.102a.5.5%200%200%200%20.383-.18L6.5%2014z%22%2F%3E%3C%2Fsvg%3E");
17
- --kfw-icon-exclamation-mark-filled: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202c5.522%200%2010%204.477%2010%2010s-4.478%2010-10%2010S2%2017.523%202%2012%206.478%202%2012%202m.75%2015h-1.5a.25.25%200%200%200-.25.25v1.5c0%20.138.112.25.25.25h1.5a.25.25%200%200%200%20.25-.25v-1.5a.25.25%200%200%200-.25-.25m0-12h-1.5a.25.25%200%200%200-.25.25v9.5c0%20.138.112.25.25.25h1.5a.25.25%200%200%200%20.25-.25v-9.5a.25.25%200%200%200-.25-.25%22%2F%3E%3C%2Fsvg%3E");
18
- --kfw-icon-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%2020h-5v-6.5a.5.5%200%200%200-.5-.5h-5a.5.5%200%200%200-.5.5V20H4v-8.322L12.001%204.5%2020%2011.678zm1.83-9.374-9.498-8.502a.5.5%200%200%200-.663.002l-9.501%208.501a.5.5%200%200%200-.168.374V21.5a.5.5%200%200%200%20.5.5H11v-7.001h2V22h8.5a.5.5%200%200%200%20.5-.5V11.001a.5.5%200%200%200-.17-.375%22%2F%3E%3C%2Fsvg%3E");
19
- --kfw-icon-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7%2020h10v-8H7zM9%207c0-1.654%201.345-3%203-3s3%201.346%203%203v3H9zm9.5%203H17V7c0-2.757-2.242-5-5-5S7%204.243%207%207v3H5.5a.5.5%200%200%200-.5.5v11a.5.5%200%200%200%20.5.5h13a.5.5%200%200%200%20.5-.5v-11c0-.277-.223-.5-.5-.5%22%20style%3D%22fill%3A%23000%22%2F%3E%3C%2Fsvg%3E");
20
- --kfw-icon-login: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M21.5%202c.28%200%20.5.22.5.5v19c0%20.28-.22.5-.5.5h-19c-.28%200-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5h1c.28%200%20.5.22.5.5V20h16V4H4v4.5c0%20.28-.22.5-.5.5h-1c-.28%200-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5zM10.82%206.15c.19-.19.51-.19.71%200l5.18%205.15c.19.2.29.45.29.7%200%20.26-.1.51-.29.7l-5.18%205.15c-.19.19-.51.19-.71%200l-.67-.74c-.2-.2-.2-.51%200-.71l3.45-3.41H2.5c-.28%200-.5-.22-.5-.5v-.99c0-.28.22-.5.5-.5h11.1l-3.45-3.41c-.2-.2-.2-.51%200-.71l.67-.74z%22%20style%3D%22fill%3A%23000%22%2F%3E%3C%2Fsvg%3E");
21
- --kfw-icon-menu: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3E01_Elemente%20(ATOME%2C%20MOLECULES)%2FIcons%2FFunktionsicons%2Fmen%C3%BC-texthinweis-DE%3C%2Ftitle%3E%0A%20%20%20%20%3Cg%20id%3D%2201_Elemente-(ATOME%2C-MOLECULES)%2FIcons%2FFunktionsicons%2Fmen%C3%BC-texthinweis-DE%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.9572055%2C14.9627999%20L18.9572055%2C17.9190374%20C18.9572055%2C18.2683874%2019.0400607%2C18.5248114%2019.2057711%2C18.6883093%20C19.3714049%2C18.8518838%2019.6110443%2C18.9336455%2019.9246891%2C18.9335945%20C20.1764158%2C18.9459927%2020.4231795%2C18.8605301%2020.613318%2C18.6950992%20C20.7857419%2C18.5361028%2020.8719794%2C18.2774156%2020.8720305%2C17.9190374%20L20.865318%2C14.9627999%20L21.8328016%2C14.9627999%20L21.8260883%2C17.8854687%20C21.8296004%2C18.1364574%2021.7910733%2C18.3862635%2021.7121039%2C18.6245312%20C21.6414999%2C18.8353289%2021.5219945%2C19.0264174%2021.3633641%2C19.182164%20C21.1934811%2C19.3424068%2020.9893495%2C19.461875%2020.7664406%2C19.531514%20C20.4885757%2C19.617507%2020.1987132%2C19.6583604%2019.9079047%2C19.6525163%20C19.6082547%2C19.6588708%2019.3094709%2C19.6180373%2019.0225141%2C19.531514%20C18.797906%2C19.46349%2018.5923321%2C19.3438506%2018.4222336%2C19.182164%20C18.2658072%2C19.0264896%2018.1495781%2C18.8351151%2018.0835617%2C18.6245312%20C18.0090211%2C18.3853813%2017.9727918%2C18.1359427%2017.976218%2C17.8854687%20L17.976218%2C14.9627999%20L18.9572055%2C14.9627999%20Z%20M3.38828125%2C14.9695187%20L3.99222422%2C16.4678562%20C4.03700859%2C16.5843572%204.08733724%2C16.7131158%204.14321016%2C16.854132%20C4.19905703%2C16.9952778%204.25607396%2C17.1408466%204.31426094%2C17.2908382%20C4.37239687%2C17.4409851%204.42829479%2C17.5876731%204.48195469%2C17.7309023%20C4.53566562%2C17.8743341%204.58711328%2C18.0019992%204.63629766%2C18.1138976%20L4.69008516%2C18.1138976%20C4.79735391%2C17.8541929%204.9069112%2C17.5831968%205.01875703%2C17.3009093%20C5.13052786%2C17.0187739%205.24013724%2C16.7455653%205.34758516%2C16.4812835%20C5.39229401%2C16.3872132%205.44259714%2C16.2729757%205.49849453%2C16.138571%20L5.58232266%2C15.9345035%20L5.58232266%2C15.9345035%20L5.66626484%2C15.7253632%20C5.72211224%2C15.5842955%205.77803568%2C15.4465848%205.83403516%2C15.3122312%20C5.88988255%2C15.1778015%205.9402112%2C15.063564%205.98502109%2C14.9695187%20L7.16590156%2C14.9695187%20L7.16590156%2C19.5852999%20L6.20513125%2C19.5852999%20L6.20513125%2C16.4678515%20L6.18498984%2C16.4678515%20L5.84906797%2C17.321046%20C5.79077891%2C17.4510518%205.72694609%2C17.596646%205.65756953%2C17.7578288%20C5.58806641%2C17.9190382%205.51863932%2C18.0813919%205.44928828%2C18.2448898%20C5.37978411%2C18.4084643%205.31147682%2C18.5708432%205.24436641%2C18.7320265%20C5.1771513%2C18.8932359%205.11443776%2C19.0388046%205.05622578%2C19.1687328%20L4.24323281%2C19.1687328%20C4.18502031%2C19.0343796%204.12233203%2C18.8843351%204.05516797%2C18.7185992%20C3.98795339%2C18.5528882%203.91964609%2C18.3860333%203.85024609%2C18.2180343%20C3.78074245%2C18.0500354%203.71131536%2C17.8842994%203.64196484%2C17.7208265%20C3.57245755%2C17.5574025%203.50638594%2C17.408477%203.44375%2C17.2740499%20L3.14811094%2C16.501421%20L3.12796875%2C16.501421%20L3.12712891%2C17.6276152%20L3.12712891%2C17.6276152%20L3.1219957%2C18.4590867%20L3.1219957%2C18.4590867%20L3.12125%2C19.5852999%20L2.16719844%2C19.5852999%20L2.16719844%2C14.9695187%20L3.38828125%2C14.9695187%20Z%20M11.6002578%2C14.9695187%20L11.6002578%2C15.6750093%20L9.41664922%2C15.6750093%20L9.41664922%2C16.8373476%20L11.2509078%2C16.8373476%20L11.2509078%2C17.495764%20L9.41664922%2C17.495764%20L9.41664922%2C18.8798078%20L11.6943281%2C18.8798078%20L11.6943281%2C19.5852999%20L8.41559609%2C19.5852999%20L8.41559609%2C14.9695187%20L11.6002578%2C14.9695187%20Z%20M13.7636492%2C14.969514%20C14.0047372%2C15.345801%2014.2424945%2C15.7175815%2014.4769211%2C16.0848601%20C14.7112195%2C16.4522153%2014.9467143%2C16.8262083%2015.1834055%2C17.206839%20L15.7659836%2C18.147464%20L15.8061906%2C18.1474624%20L15.8061906%2C14.969514%20L16.7669602%2C14.969514%20L16.7669602%2C19.5852999%20L15.774757%2C19.5852999%20L14.2127914%2C17.0994093%20L14.0979684%2C16.9062136%20L14.0979684%2C16.9062136%20L13.981468%2C16.716414%20C13.9032674%2C16.5910624%2013.8261841%2C16.4633971%2013.750218%2C16.3334179%20C13.7444058%2C16.3326561%2013.7385048%2C16.3338372%2013.7334336%2C16.3367773%20C13.7311445%2C16.3391421%2013.725575%2C16.3401367%2013.7166484%2C16.3401367%20L13.7166484%2C19.5852999%20L12.755882%2C19.5852999%20L12.755882%2C14.969514%20L13.7636492%2C14.969514%20Z%20M19.2057727%2C13.8408218%20C19.3347593%2C13.8314552%2019.462364%2C13.872386%2019.5618359%2C13.9550335%20C19.6435862%2C14.0338378%2019.6876395%2C14.1439017%2019.6828383%2C14.2573484%20C19.685072%2C14.3683782%2019.6412749%2C14.4753855%2019.5618359%2C14.5529874%20C19.4838685%2C14.6224171%2019.3860677%2C14.6642222%2019.2834267%2C14.6733107%20L19.2057727%2C14.6739132%20C19.0796308%2C14.6836292%2018.9552361%2C14.6397269%2018.8631359%2C14.5529874%20C18.7873646%2C14.4734875%2018.7462809%2C14.3671416%2018.7489242%2C14.2573484%20C18.7452128%2C14.1457472%2018.7877556%2C14.0375677%2018.866493%2C13.9583906%20C18.9589574%2C13.8748031%2019.081414%2C13.8323689%2019.2057727%2C13.8408218%20Z%20M20.6234664%2C13.8408218%20C20.7524517%2C13.8314685%2020.8800518%2C13.8723977%2020.9795305%2C13.9550335%20C21.0612579%2C14.0338477%2021.1052837%2C14.1439123%2021.1004563%2C14.2573484%20C21.1027177%2C14.3683682%2021.0589478%2C14.4753768%2020.9795305%2C14.5529874%20C20.9015573%2C14.6224076%2020.8037584%2C14.6642096%2020.7011192%2C14.6733043%20L20.6234664%2C14.6739132%20C20.4994159%2C14.6828595%2020.3773666%2C14.638934%2020.287468%2C14.5529874%20C20.2116966%2C14.4734875%2020.1706129%2C14.3671416%2020.1732563%2C14.2573484%20C20.1695444%2C14.1457472%2020.2120874%2C14.0375675%2020.290825%2C13.9583906%20C20.3810805%2C13.8755574%2020.5012053%2C13.8331004%2020.6234664%2C13.8408218%20Z%20M21.5%2C9.9844402%20C21.7450408%2C9.98414836%2021.949096%2C10.1603939%2021.991789%2C10.3931755%20L22%2C10.4828843%20L22%2C11.4797718%20C21.9994693%2C11.7554424%2021.7756709%2C11.9785443%2021.5%2C11.9782159%20L2.5%2C11.9782159%20C2.25495851%2C11.9785074%202.05090322%2C11.8022609%202.0082107%2C11.5694786%20L2%2C11.4797695%20L2%2C10.482882%20C2.00053239%2C10.2072124%202.22433015%2C9.98411231%202.5%2C9.9844402%20L21.5%2C9.9844402%20Z%20M21.5%2C5.00000036%20C21.7450408%2C4.9997106%2021.949096%2C5.17595638%2021.991789%2C5.40873797%20L22%2C5.49844682%20L22%2C6.49533197%20C21.9994698%2C6.77100278%2021.7756711%2C6.99410485%2021.5%2C6.99377609%20L2.5%2C6.99377609%20C2.25495916%2C6.99406793%202.05090405%2C6.81782239%202.00821096%2C6.58504081%20L2%2C6.49533197%20L2%2C5.49844447%20C2.0005311%2C5.22277402%202.22432923%2C4.99967246%202.5%2C5.00000036%20L21.5%2C5.00000036%20Z%22%20id%3D%22menue-texthinweis-DE%22%20fill%3D%22%23005A8C%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
22
- --kfw-icon-personal-settings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012c2.8%200%205-2.2%205-5s-2.2-5-5-5-5%202.2-5%205%202.2%205%205%205m0-8c1.7%200%203%201.3%203%203s-1.3%203-3%203-3-1.3-3-3%201.3-3%203-3m8.8%2012.6C19.8%2015.2%2018%2014%2015%2014H9c-3%200-4.8%201.2-5.8%202.6C2.2%2018.1%202%2019.8%202%2021c0%20.7.5%201%201%201h18c.5%200%201-.3%201-1%200-1.2-.2-2.9-1.2-4.4M4%2020c.1-.7.3-1.5.8-2.2.8-1.2%202.1-1.8%204.1-1.8h6.2c2%200%203.3.6%204.1%201.8.5.7.7%201.5.8%202.2z%22%2F%3E%3C%2Fsvg%3E");
23
- --kfw-icon-plus: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2061.2%20(89653)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon%2Fplus%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icon%2Fplus%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M19.5%2C11%20L13%2C11%20L13%2C4.5%20C13%2C4.224%2012.776%2C4%2012.5%2C4%20L11.5%2C4%20C11.224%2C4%2011%2C4.224%2011%2C4.5%20L11%2C11%20L4.5%2C11%20C4.224%2C11%204%2C11.224%204%2C11.5%20L4%2C12.5%20C4%2C12.776%204.224%2C13%204.5%2C13%20L11%2C13%20L11%2C19.5%20C11%2C19.776%2011.224%2C20%2011.5%2C20%20L12.5%2C20%20C12.776%2C20%2013%2C19.776%2013%2C19.5%20L13%2C13%20L19.5%2C13%20C19.776%2C13%2020%2C12.776%2020%2C12.5%20L20%2C11.5%20C20%2C11.224%2019.776%2C11%2019.5%2C11%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
24
- --kfw-icon-search: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2061.2%20(89653)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon%2Flupe%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icon%2Flupe%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.999975%2C9.9999%20C3.999975%2C6.69094136%206.69094136%2C3.999975%209.9999%2C3.999975%20C13.3088586%2C3.999975%2015.999825%2C6.69094136%2015.999825%2C9.9999%20C15.999825%2C13.3088586%2013.3088586%2C15.999825%209.9999%2C15.999825%20C6.69094136%2C15.999825%203.999975%2C13.3088586%203.999975%2C9.9999%20M21.8537518%2C20.4387695%20L16.3138211%2C14.8998388%20C17.3668079%2C13.5448557%2017.9998%2C11.8488769%2017.9998%2C9.9999%20C17.9998%2C5.58195523%2014.4178448%2C2%209.9999%2C2%20C5.58195523%2C2%202%2C5.58195523%202%2C9.9999%20C2%2C14.4178448%205.58195523%2C17.9998%209.9999%2C17.9998%20C11.8488769%2C17.9998%2013.5458557%2C17.3668079%2014.8998388%2C16.3138211%20L20.4387695%2C21.8537518%20C20.6347671%2C22.0487494%2020.9507631%2C22.0487494%2021.1457607%2C21.8537518%20L21.8537518%2C21.1457607%20C22.0487494%2C20.9507631%2022.0487494%2C20.6347671%2021.8537518%2C20.4387695%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
25
- --kfw-icon-time: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%2C2%20C17.5%2C2%2022%2C6.5%2022%2C12%20C22%2C17.5%2017.5%2C22%2012%2C22%20C6.5%2C22%202%2C17.5%202%2C12%20C2%2C6.5%206.5%2C2%2012%2C2%20Z%20M12%2C4%20C7.6%2C4%204%2C7.6%204%2C12%20C4%2C16.4%207.6%2C20%2012%2C20%20C16.4%2C20%2020%2C16.4%2020%2C12%20C20%2C7.6%2016.4%2C4%2012%2C4%20Z%20M12.4%2C7%20C12.7%2C7%2012.9%2C7.2%2012.9%2C7.5%20L12.9%2C7.5%20L12.9%2C12.8%20L15.5%2C15.4%20C15.7%2C15.6%2015.7%2C15.9%2015.5%2C16.1%20L15.5%2C16.1%20L14.8%2C16.8%20C14.6%2C17%2014.3%2C17%2014.1%2C16.8%20L14.1%2C16.8%20L10.9%2C13.6%20L10.9%2C7.5%20C10.9%2C7.2%2011.1%2C7%2011.4%2C7%20L11.4%2C7%20Z%22%3E%3C%2Fpath%3E%0A%0A%3C%2Fsvg%3E");
26
- --kfw-icon-upload: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2061.2%20(89653)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon%2Fupload%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icon%2Fupload%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.5%2C13.0006749%20C3.776%2C13.0006749%204%2C13.2246582%204%2C13.5006375%20L4%2C13.5006375%20L4%2C20.00015%20L20%2C20.00015%20L20%2C13.5006375%20C20%2C13.2246582%2020.224%2C13.0006749%2020.5%2C13.0006749%20L20.5%2C13.0006749%20L21.5%2C13.0006749%20C21.776%2C13.0006749%2022%2C13.2246582%2022%2C13.5006375%20L22%2C13.5006375%20L22%2C21.5000375%20C22%2C21.7760168%2021.776%2C22%2021.5%2C22%20L21.5%2C22%20L2.5%2C22%20C2.224%2C22%202%2C21.7760168%202%2C21.5000375%20L2%2C21.5000375%20L2%2C13.5006375%20C2%2C13.2246582%202.224%2C13.0006749%202.5%2C13.0006749%20L2.5%2C13.0006749%20Z%20M11.9998%2C2%20C12.2548%2C2.00099993%2012.5088%2C2.09799265%2012.7028%2C2.2919781%20L12.7028%2C2.2919781%20L18.8538%2C8.47551434%20C19.0488%2C8.67049971%2019.0488%2C8.98747594%2018.8538%2C9.18246132%20L18.8538%2C9.18246132%20L18.1178%2C9.85341099%20C17.9228%2C10.0483964%2017.6068%2C10.0483964%2017.4108%2C9.85341099%20L17.4108%2C9.85341099%20L12.9958%2C5.40474464%20L12.9998%2C16.4999125%20C12.9998%2C16.7758918%2012.7758%2C16.999875%2012.4998%2C16.999875%20L12.4998%2C16.999875%20L11.4998%2C16.999875%20C11.2238%2C16.999875%2010.9998%2C16.7758918%2010.9998%2C16.4999125%20L10.9998%2C16.4999125%20L11.0048%2C5.40474464%20L6.5888%2C9.85341099%20C6.3938%2C10.0483964%206.0768%2C10.0483964%205.8818%2C9.85341099%20L5.8818%2C9.85341099%20L5.1468%2C9.18246132%20C4.9508%2C8.98747594%204.9508%2C8.67049971%205.1468%2C8.47551434%20L5.1468%2C8.47551434%20L11.2978%2C2.2919781%20C11.4908%2C2.09799265%2011.7458%2C2.00099993%2011.9998%2C2%20Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
27
- }
28
-
29
- .icon--alert {
30
- --icon: var(--kfw-icon-alert);
31
- }
32
-
33
- .icon--arrow-down {
34
- --icon: var(--kfw-icon-arrow-down);
35
- }
36
-
37
- .icon--arrow-left {
38
- --icon: var(--kfw-icon-arrow-left);
39
- }
40
-
41
- .icon--arrow-right {
42
- --icon: var(--kfw-icon-arrow-right);
43
- }
44
-
45
- .icon--arrow-up {
46
- --icon: var(--kfw-icon-arrow-up);
47
- }
48
-
49
- .icon--bullet-point-empty {
50
- --icon: var(--kfw-icon-bullet-point-empty);
51
- }
52
-
53
- .icon--bullet-point {
54
- --icon: var(--kfw-icon-bullet-point);
55
- }
56
-
57
- .icon--calendar {
58
- --icon: var(--kfw-icon-calendar);
59
- }
60
-
61
- .icon--checked {
62
- --icon: var(--kfw-icon-checked);
63
- }
64
-
65
- .icon--close {
66
- --icon: var(--kfw-icon-close);
67
- }
68
-
69
- .icon--delete {
70
- --icon: var(--kfw-icon-delete);
71
- }
72
-
73
- .icon--dialogue {
74
- --icon: var(--kfw-icon-dialogue);
75
- }
76
-
77
- .icon--exclamation-mark-filled {
78
- --icon: var(--kfw-icon-exclamation-mark-filled);
79
- }
80
-
81
- .icon--home {
82
- --icon: var(--kfw-icon-home);
83
- }
84
-
85
- .icon--lock {
86
- --icon: var(--kfw-icon-lock);
87
- }
88
-
89
- .icon--login {
90
- --icon: var(--kfw-icon-login);
91
- }
92
-
93
- .icon--menu {
94
- --icon: var(--kfw-icon-menu);
95
- }
96
-
97
- .icon--personal-settings {
98
- --icon: var(--kfw-icon-personal-settings);
99
- }
100
-
101
- .icon--plus {
102
- --icon: var(--kfw-icon-plus);
103
- }
104
-
105
- .icon--search {
106
- --icon: var(--kfw-icon-search);
107
- }
108
-
109
- .icon--time {
110
- --icon: var(--kfw-icon-time);
111
- }
112
-
113
- .icon--upload {
114
- --icon: var(--kfw-icon-upload);
115
- }