@gnist/design-system 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.13](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@0.1.12...@gnist/design-system@0.1.13) (2025-01-10)
+
+### Bug Fixes
+
+* make sure all types are included on component by default ([53c2d0f](https://github.com/mollerdigital/design-system-design-system/commit/53c2d0f03e86c32149fe591654aec2ebf47f517a))
+
+## [0.1.12](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@0.1.11...@gnist/design-system@0.1.12) (2025-01-10)
+
+### Bug Fixes
+
+* adjust text input label size ([8da550b](https://github.com/mollerdigital/design-system-design-system/commit/8da550bf3c831bb7a14cbfcb724ab23b02bdf5ee))
+
 ## [0.1.11](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@0.1.10...@gnist/design-system@0.1.11) (2025-01-10)
 
 ### Bug Fixes

package/README.md

@@ -166,9 +166,27 @@ The typographies have changed with new names and tokens. Replace the old typogra
 - `NoticeText` is no longer present and shall be replaced with `BodyText`. The only difference between these two is that `NoticeText` had a bold font weight and uppercase text, so it you want the same layout you need to add this yourself. 
 
 ### CSS variables 
-It is still possible to use css variables like before, e.g. `var(--moller-color-primary)`. However, it is not type safe and you will not get an error if you use a css variable that no longer exists. For instance, since the typographies have been changed, there is no longer a css variable named `--moller-type-large-subtitle-font-size`. Instead, you must use `--moller-type-large-heading2text-font-size`. Moreover, if tokens are changed or deprecated in the future, you will not get an error for using an outdated css variable.
+It is still possible to use css variables like before, e.g. `var(--moller-color-primary)`. However, it is not type safe and you will not get an error if you use a css variable that no longer exists. For instance, since the typographies have been changed, there is no longer a css variable named `--moller-type-large-subtitle-font-size`. Instead, you must use `--moller-type-large-heading2-font-size`. Moreover, if tokens are changed or deprecated in the future, you will not get an error for using an outdated css variable.
 To solve this and make the type checking secure, we recommend that you use [`tokens` from the `@gnist/themes` package](https://www.npmjs.com/package/@gnist/themes#tokens) instead. 
 
+Furthermore, please note that all the CSS variables prefixed with the following no longer exist:
+- `--moller-type-{small/medium/large}-headline-{...}`
+    - replace with `--moller-type-{small/medium/large}-heading1-{...}`
+- `--moller-type-{small/medium/large}-subtitle-{...}`
+    - replace with `--moller-type-{small/medium/large}-heading2-{...}`
+- `--moller-type-{small/medium/large}-overline-{...}`
+    - replace with `--moller-type-{small/medium/large}-heading3-{...}`
+- `--moller-type-{small/medium/large}-description-{...}`
+    - replace with `--moller-type-{small/medium/large}-detail-{...}`
+- `--moller-type-{compact/default}-notice-{...}`
+    - replace with `--moller-type-{small/medium/large}-detail-{...}`
+- `--moller-type-{compact/default}-label-{...}`
+    - replace with `--moller-type-{small/medium/large}-detail-{...}`
+- `--moller-type-{compact/default}-action-{...}`
+    - replace with `--moller-type-{small/medium/large}-body-{...}`
+
+The `...` above is the text token type, e.g. `--moller-type-small-heading1-font-family` or `--moller-type-small-heading1-line-height`.
+
 ### Deleted components
 The components `CheckboxCardGroup` and `RadioCardGroup` has been removed completely. The consequence is that wherever these components are used, you must rewrite to use a mapping of multiple `CheckboxCard` and `RadioCard`, or make your own version of the group components. They are removed due to lack of use and high maintenance cost. 
 

package/dist/components/inputs/shared-styles/labelStyles.css.cjs

@@ -10,8 +10,7 @@ const inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
 const elevatedLabel = (color) => ({
   color: color || tokens_css_js.tokens.color["text-variant"],
   lineHeight: "1em",
-  fontSize: tokens_css_js.tokens.typeface.size.base,
-  // TODO: check font size. replaced xs with 0.75rem
+  fontSize: tokens_css_js.tokens.typeface.size.s,
   paddingLeft: tokens_css_js.tokens.spacing.base,
   paddingRight: tokens_css_js.tokens.spacing.base,
   left: cssUtils.calc(tokens_css_js.tokens.spacing.base).multiply(-1).subtract(inputFieldConstants_css.preInputWidth).toString()
@@ -25,7 +24,7 @@ const elevatedLabelBackground = (backgroundColor) => ({
   transitionDuration: inputFieldConstants_css.transitionTime,
   left: 0,
   right: 0,
-  top: cssUtils.calc(tokens_css_js.tokens.spacing.xs).divide(2).toString(),
+  top: "5px",
   height: tokens_css_js.tokens.stroke.medium
 });
 const labelStyle = recipes.recipe({

package/dist/components/inputs/shared-styles/labelStyles.css.d.ts

@@ -48,7 +48,7 @@ export declare const labelStyle: import("@vanilla-extract/recipes").RuntimeFn<{
                     readonly transitionDuration: "250ms";
                     readonly left: 0;
                     readonly right: 0;
-                    readonly top: string;
+                    readonly top: "5px";
                     readonly height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };

package/dist/components/inputs/shared-styles/labelStyles.css.js

@@ -8,8 +8,7 @@ import { transitionTime, preInputWidth } from "./inputFieldConstants.css.js";
 const elevatedLabel = (color) => ({
   color: color || tokens.color["text-variant"],
   lineHeight: "1em",
-  fontSize: tokens.typeface.size.base,
-  // TODO: check font size. replaced xs with 0.75rem
+  fontSize: tokens.typeface.size.s,
   paddingLeft: tokens.spacing.base,
   paddingRight: tokens.spacing.base,
   left: calc(tokens.spacing.base).multiply(-1).subtract(preInputWidth).toString()
@@ -23,7 +22,7 @@ const elevatedLabelBackground = (backgroundColor) => ({
   transitionDuration: transitionTime,
   left: 0,
   right: 0,
-  top: calc(tokens.spacing.xs).divide(2).toString(),
+  top: "5px",
   height: tokens.stroke.medium
 });
 const labelStyle = recipe({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "0.1.11",
+    "version": "0.1.13",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -113,5 +113,5 @@
             "optional": true
         }
     },
-    "gitHead": "e141b0df40690c659ad353e66f34784da879c6f5"
+    "gitHead": "7131a4e7b1e740edeb18fa56edaf6b88f7f3aba8"
 }