@knime/kds-styles 0.1.0 → 0.1.1

package/README.md

@@ -24,9 +24,20 @@ All token values are fully calculated, ensuring that no variable references rema
 
 Two sets of files are generated for light and dark mode. Subsequently, the CSS files are merged to contain all variables only once. For variables that use different color values in light and dark mode, the `light-dark()` function is employed.
 
+## Fonts
+
+The design system uses the Roboto, Roboto Condensed and Roboto Mono fonts for typography. When using `@knime/kds-styles` as a dependency the fonts will automatically be installed, no separate dependency is needed.
+
 ## Usage
 
-_This section will be filled in later once the output and possible changes are clear._
+To use the design tokens and basic CSS you can simply import the following into a central CSS of your project:
+
+- `@import "@knime/kds-styles/kds-variables.css";`: Imports all built design tokens as CSS variables, including the colors in light and dark mode
+- `@import "@knime/kds-styles/kds-legacy-theme.css";`: Imports a legacy theme, which should be used to roll out design system components and tokens into an existing project, styles are adopted so old webapps-common components and new components can be used side by side
+- `@import "@knime/kds-styles/fonts.css"`: Import CSS font definitions for Roboto and Roboto Mono
+- `@import "@knime/kds-styles/fonts-workflows.css"`: Import CSS font definitions for Roboto Condensed which is only used in the context of workflow editing
+
+- `@import "@knime/kds-styles/index.css"`: Bundles all previous imports and adds basic core style rules, e.g. uses modern-normalize for browser reset. **Important:** Use only for new projects, or if conversion is already at a point where core styles can be replaced.
 
 ## Important Scripts
 

package/dist/css/basics.css

@@ -1,3 +1,7 @@
+:root {
+  font-family: var(--kds-core-font-family-roboto), sans-serif;
+}
+
 body {
   font: var(--kds-font-base-body-medium);
   color: var(--kds-color-text-and-icon-neutral);
@@ -7,6 +11,13 @@ a {
   color: inherit;
 }
 
+pre,
+code,
+tt,
+samp {
+  font-family: var(--kds-core-font-family-roboto-mono), monospace;
+}
+
 svg {
   shape-rendering: geometricPrecision;
 }

package/dist/css/fonts-workflows.css

@@ -0,0 +1,10 @@
+/**
+* Fonts for workflows.
+*
+* Import only the weights and styles that are required:
+* Sync with dist/tokens/css/_variables.css
+* Search for --kds-font- to find all font related CSS variables.
+*/
+@import "./fonts.css";
+@import "@fontsource/roboto-condensed/400";
+@import "@fontsource/roboto-condensed/700";

package/dist/css/fonts.css

@@ -0,0 +1,13 @@
+/**
+* Import only the weights and styles that are required:
+* Sync with dist/tokens/css/_variables.css
+* Search for --kds-font- to find all font related CSS variables.
+*
+* Roboto Condensed is not imported here as it's only rarely used,
+* it's imported in fonts-workflows.css instead.
+*/
+@import "@fontsource/roboto";
+@import "@fontsource/roboto/400-italic";
+@import "@fontsource/roboto/500";
+@import "@fontsource/roboto/700";
+@import "@fontsource/roboto-mono/300";

package/dist/css/index.css

@@ -1,3 +1,4 @@
+@import "./fonts";
 @import "modern-normalize/modern-normalize.css";
 @import "@knime/kds-styles/kds-variables.css";
 @import "./basics";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -11,6 +11,9 @@
   "author": "KNIME AG, Zurich, Switzerland",
   "type": "module",
   "dependencies": {
+    "@fontsource/roboto": "5.2.8",
+    "@fontsource/roboto-condensed": "5.2.8",
+    "@fontsource/roboto-mono": "5.2.8",
     "modern-normalize": "3.0.1"
   },
   "devDependencies": {
@@ -29,6 +32,8 @@
   ],
   "exports": {
     "./index.css": "./dist/css/index.css",
+    "./fonts.css": "./dist/css/fonts.css",
+    "./fonts-workflows.css": "./dist/css/fonts-workflows.css",
     "./kds-variables.css": "./dist/tokens/css/_variables.css",
     "./kds-properties.css": "./dist/tokens/css/_properties.css",
     "./kds-legacy-theme.css": "./dist/tokens/css/_variables-legacy.css",