@demos-europe/demosplan-ui 0.0.1

package/tokens/color.json

@@ -0,0 +1,358 @@
+{
+  "color": {
+    "palette": {
+      "$description": "The raw hex values that other color tokens inherit from. Do not use directly.",
+      "white": {
+        "value": "#fff"
+      },
+      "black": {
+        "value": "#000"
+      },
+      "neutral": {
+        "$description": "Greyscale palette.",
+        "light-4": {
+          "value": "#f5f5f5",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#ebe9e9",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#d3d3d3",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#aeaeae",
+          "themeable": true
+        },
+        "base": {
+          "value": "#757575",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#595959",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#333333",
+          "themeable": true
+        }
+      },
+      "blue": {
+        "light-4": {
+          "value": "#ebf5ff",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#cee6fb",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#82c5ff",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#44a8ff",
+          "themeable": true
+        },
+        "base": {
+          "value": "#006fd0",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#005eb1",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#004078",
+          "themeable": true
+        }
+      },
+      "red": {
+        "light-4": {
+          "value": "#fff0f0",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#fcdddd",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#ffb3b3",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#fc5e5e",
+          "themeable": true
+        },
+        "base": {
+          "value": "#e81616",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#b20000",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#820000",
+          "themeable": true
+        }
+      },
+      "green": {
+        "light-4": {
+          "value": "#effbef",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#def7de",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#93e293",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#5cba5c",
+          "themeable": true
+        },
+        "base": {
+          "value": "#228b22",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#186218",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#064006",
+          "themeable": true
+        }
+      },
+      "yellow": {
+        "light-4": {
+          "value": "#fff7e5",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#ffefca",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#ffe5a7",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#ffd87c",
+          "themeable": true
+        },
+        "base": {
+          "value": "#ffbe24",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#eea700",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#845d01",
+          "themeable": true
+        }
+      },
+      "purple": {
+        "light-4": {
+          "value": "#f3ecf8",
+          "themeable": true
+        },
+        "light-3": {
+          "value": "#dfcced",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#bf99db",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#a572cd",
+          "themeable": true
+        },
+        "base": {
+          "value": "#8f4fc0",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#5e00a6",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#4b0085",
+          "themeable": true
+        }
+      },
+      "magenta": {
+        "light-3": {
+          "value": "#f3ecf8",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "#fbdbe5",
+          "themeable": true
+        },
+        "light-1": {
+          "value": "#ff9fbd",
+          "themeable": true
+        },
+        "base": {
+          "value": "#d4004b",
+          "themeable": true
+        },
+        "dark-1": {
+          "value": "#84002e",
+          "themeable": true
+        },
+        "dark-2": {
+          "value": "#600021",
+          "themeable": true
+        }
+      }
+    },
+    "message": {
+      "$description": "Color used to communicate system feedback.",
+      "$todo": "Add all other system colors here.",
+      "info": {
+        "text": {
+          "value": "{color.palette.blue.dark-2}"
+        }
+      }
+    },
+    "brand": {
+      "$description": "Color tokens that are used to express brand.",
+      "$todo": "Add other brand colors here. How to deal with small brand palettes? How to deal with css variables inside tokens?",
+      "main": {
+        "light-3": {
+          "value": "{color.palette.blue.light-3}",
+          "themeable": true
+        },
+        "light-2": {
+          "value": "{color.palette.blue.light-2}",
+          "themeable":  true
+        },
+        "light-1": {
+          "value": "{color.palette.blue.light-1}",
+          "themeable":  true
+        },
+        "base": {
+          "value": "{color.palette.blue.base}",
+          "themeable":  true
+        },
+        "dark-1": {
+          "value": "{color.palette.blue.dark-1}",
+          "themeable":  true
+        },
+        "dark-2": {
+          "value": "{color.palette.blue.dark-2}",
+          "themeable":  true
+        }
+      }
+    },
+    "data":{
+      "$description": "Data visualization colors",
+      "11": {
+        "$description": "11 Step palette",
+        "1": {
+          "value": "#a50026"
+        },
+        "2": {
+          "value": "#d73027"
+        },
+        "3": {
+          "value": "#f46d43"
+        },
+        "4": {
+          "value": "#fdae61"
+        },
+        "5": {
+          "value": "#fee090"
+        },
+        "6": {
+          "value": "#ffffbf"
+        },
+        "7": {
+          "value": "#e0f3f8"
+        },
+        "8": {
+          "value": "#abd9e9"
+        },
+        "9": {
+          "value": "#74add1"
+        },
+        "10": {
+          "value": "#4575b4"
+        },
+        "11": {
+          "value": "#313695"
+        }
+      },
+      "8": {
+        "$description": "8 Step palette",
+        "1": {
+          "value": "#d73027"
+        },
+        "2": {
+          "value": "#f46d43"
+        },
+        "3": {
+          "value": "#fdae61"
+        },
+        "4": {
+          "value": "#fee090"
+        },
+        "5": {
+          "value": "#e0f3f8"
+        },
+        "6": {
+          "value": "#abd9e9"
+        },
+        "7": {
+          "value": "#74add1"
+        },
+        "8": {
+          "value": "#4575b4"
+        }
+      },
+      "6": {
+        "$description": "6 Step palette",
+        "1": {
+          "value": "#d73027"
+        },
+        "2": {
+          "value": "#fc8d59"
+        },
+        "3": {
+          "value": "#fee090"
+        },
+        "4": {
+          "value": "#e0f3f8"
+        },
+        "5": {
+          "value": "#91bfdb"
+        },
+        "6": {
+          "value": "#4575b4"
+        }
+      },
+      "3": {
+        "$description": "3 Step palette",
+        "1": {
+          "value": "#fc8d59"
+        },
+        "2": {
+          "value": "#f1f1a3"
+        },
+        "3": {
+          "value": "#91bfdb"
+        }
+      }
+    }
+  }
+}

package/tokens/color.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta
+title="Design Tokens/Color"
+parameters={{
+    viewMode: 'docs',
+        previewTabs: {
+        canvas: {
+            hidden: true
+        }
+    },
+}} />
+
+<!-- @TODO integrate https://github.com/UX-and-I/storybook-design-token -->
+
+# Color Tokens
+
+The demosplan-ui colors are grouped into "scale" (the raw values which should not be used directly), "brand" (for
+colors used in branded context), "message" and "status" (to communicate system state), "data" (for data visualization)
+and "interaction" (to indicate interaction). apart from "brand", colors are not meant to be themeable.
+
+## Color scales
+
+Available color scales contain 7 steps: a base color plus 2 shades and 4 lights.
+
+## Neutrals
+
+Black, white, and greys.
+
+## Data visualization colors
+
+The 4 distinct scales can be used for data visualizations with a defined number of needed colors that differentiate
+from each other.
+
+These are generated with https://colorbrewer2.org/#type=diverging&scheme=BrBG&n=8 to be colorblind safe
+and intentionally separate from other color scales.
+
+Although these colors are universally used for charts, they need to be refined into "sequential", "categorical",
+and "diverging" when appropriate. Read more if the need arises:
+
+- https://design.gitlab.com/data-visualization/color/
+- https://www.carbondesignsystem.com/data-visualization/color-palettes/
+- https://medium.com/design-ibm/inclusive-color-sequences-for-data-viz-in-6-steps-712869b910c2
+- https://medium.com/carbondesign/color-palettes-and-accessibility-features-for-data-visualization-7869f4874fca
+- https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283

package/tokens/fontSize.json

@@ -0,0 +1,100 @@
+{
+  "font-size": {
+    "scale": {
+      "0": {
+        "value": "11px",
+        "themeable": true
+      },
+      "1": {
+        "value": "12px",
+        "themeable": true
+      },
+      "2": {
+        "value": "14px",
+        "themeable": true
+      },
+      "3": {
+        "value": "16px",
+        "themeable": true
+      },
+      "4": {
+        "value": "19.2px",
+        "themeable": true
+      },
+      "5": {
+        "value": "23px",
+        "themeable": true
+      },
+      "6": {
+        "value": "27.65px",
+        "themeable": true
+      },
+      "7": {
+        "value": "50px",
+        "themeable": true
+      }
+    },
+    "brand": {
+      "hero": {
+        "value": "{font-size.scale.7}",
+        "themeable": true
+      },
+      "header": {
+        "value": "{font-size.scale.5}",
+        "themeable": true
+      }
+    },
+    "heading": {
+      "1": {
+        "value": "{font-size.scale.6}",
+        "themeable": true
+      },
+      "2": {
+        "value": "{font-size.scale.5}",
+        "themeable": true
+      },
+      "3": {
+        "value": "{font-size.scale.4}",
+        "themeable": true
+      },
+      "4": {
+        "value": "{font-size.scale.3}",
+        "themeable": true
+      },
+      "5": {
+        "value": "{font-size.scale.2}",
+        "themeable": true
+      },
+      "6": {
+        "value": "{font-size.scale.1}",
+        "themeable": true
+      }
+    },
+    "ui": {
+      "larger": {
+        "value": "{font-size.scale.5}",
+        "themeable": true
+      },
+      "large": {
+        "value": "{font-size.scale.4}",
+        "themeable": true
+      },
+      "medium": {
+        "value": "{font-size.scale.3}",
+        "themeable": true
+      },
+      "small": {
+        "value": "{font-size.scale.2}",
+        "themeable": true
+      },
+      "smaller": {
+        "value": "{font-size.scale.1}",
+        "themeable": true
+      },
+      "smallest": {
+        "value": "{font-size.scale.0}",
+        "themeable": true
+      }
+    }
+  }
+}

package/tokens/space.json

@@ -0,0 +1,33 @@
+{
+  "dp": {
+    "space": {
+      "0": {
+        "value": "0px"
+      },
+      "1": {
+        "value": "3px"
+      },
+      "2": {
+        "value": "6px"
+      },
+      "3": {
+        "value": "9px"
+      },
+      "4": {
+        "value": "12px"
+      },
+      "6": {
+        "value": "18px"
+      },
+      "8": {
+        "value": "24px"
+      },
+      "12": {
+        "value": "36px"
+      },
+      "16": {
+        "value": "48px"
+      }
+    }
+  }
+}

package/utils/lengthHint.js

@@ -0,0 +1,69 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+/**
+ * Return a translated hint on exact matching characters.
+ * @param {Number}    currentLength Currently used character count
+ * @param {*|String}  requiredLength Expected amount of characters
+ * @return {*|string}
+ */
+const exactlengthHint = (currentLength, requiredLength) => {
+  const reqLength = Number(requiredLength)
+
+  return reqLength
+    ? Translator.trans('input.text.exactlength.short', {
+      requiredlength: requiredLength,
+      count: currentLength,
+      class: (currentLength === reqLength) ? 'color-ui-info' : 'color-ui-error'
+    })
+    : ''
+}
+
+/**
+ * Return a translated hint on maximum available characters.
+ * @param {Number}    currentLength Currently used character count
+ * @param {*|String}  maxlength     Max available characters
+ * @return {*|string}
+ */
+const maxlengthHint = (currentLength, maxlength) => {
+  /*
+   * In cases with more than 50 characters available, the available characters should be highlighted with a different
+   * color when dropping below 15. For less than 50 characters, only the remaining 3 chars are highlighted that way.
+   */
+  const errorThreshold = maxlength > 50 ? 15 : 3
+  const max = Number(maxlength)
+
+  return max
+    ? Translator.trans('input.text.maxlength.short', {
+      max,
+      count: max - currentLength,
+      class: (max - currentLength > errorThreshold) ? 'color-ui-info' : 'color-ui-error'
+    })
+    : ''
+}
+
+/**
+ * Return a translated hint on minimum available characters.
+ * @param {Number}    currentLength Currently used character count
+ * @param {*|String}  minlength     Min available characters
+ * @return {*|string}
+ */
+const minlengthHint = (currentLength, minlength) => {
+  const min = Number(minlength)
+
+  return min
+    ? Translator.trans('input.text.minlength.short', {
+      min: min,
+      count: min - currentLength,
+      class: (min <= currentLength) ? 'color-ui-info' : 'color-ui-error'
+    })
+    : ''
+}
+
+export { exactlengthHint, maxlengthHint, minlengthHint }