@gnist/design-system 2.0.34 → 3.0.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.35...@gnist/design-system@3.0.0) (2025-04-01)
+
+### ⚠ BREAKING CHANGES
+
+* The theme `SkodaDark` is no longer available. This theme has been renamed to simply `Skoda`.
+
+### Features
+
+* Change name of Skoda theme from `SkodaDark` to `Skoda` ([84c2b8b](https://github.com/mollerdigital/design-system-design-system/commit/84c2b8be4c2b28abbb299d046f186f59a6e07064))
+
+## <small>2.0.35 (2025-03-28)</small>
+
+* chore: update readme, development guide and migration guides ([25e7870](https://github.com/mollerdigital/design-system-design-system/commit/25e7870))
+
 ## <small>2.0.34 (2025-03-27)</small>
 
 * fix: remove margin and padding that pushed the modal off-center ([a2d5ef4](https://github.com/mollerdigital/design-system-design-system/commit/a2d5ef4))

package/README.md

@@ -55,7 +55,7 @@ import { bilholdLight } from "@gnist/themes/themes/bilholdLight.css.js";
 import { gumpen } from "@gnist/themes/themes/gumpen.css.js";
 import { brandless } from "@gnist/themes/themes/brandless.css.js";
 import { mollerBil } from "@gnist/themes/themes/mollerBil.css.js";
-import { skodaDark } from "@gnist/themes/themes/skodaDark.css.js";
+import { skoda } from "@gnist/themes/themes/skoda.css.js";
 import { vw } from "@gnist/themes/themes/vw.css.js";
 import { dahles } from "@gnist/themes/themes/dahles.css.js";
 import { autoria } from "@gnist/themes/themes/autoria.css.js";
@@ -145,76 +145,4 @@ Finally, import components from `@gnist/design-system`.
 
 ## Migrating from [`@moller/design-system`](https://www.npmjs.com/package/@moller/design-system)
 
-If you are migrating from the old component library, there are some breaking changes that will affect you.
-
-### Typographies
-
-The typographies have changed with new names and tokens. Replace the old typographies from `@moller/design-system` with the new ones from `@gnist/design-system`:
-
-#### Heading styles
-- The `Display` style is still present, but is a bit smaller on all screen sizes.
-- `Headline` has been replaced by `Heading1Text` and is the same size as before.
-- `Subtitle` has been replaced by `Heading2Text` and is larger on all screen sizes.
-- `Overline` has been replaced by `Heading3Text` and is larger on all screen sizes, with the smallest size going from `12px` to `18px`. The typography is no longer uppercase text. If you want this font style with uppercase, you must add it yourself. 
-
-#### Body styles
-- The `LeadText` style is still present, but is smaller on all screen sizes, making it truly smaller than `Heading3Text`. 
-- The `BodyText` style is still present and is the same size as before.
-- The `LinkText` style is still present and is the same size as before.
-- `DetailText` is a new style and shall replace every usage of `DescriptionText` and `LabelText`. The smallest size for `DetailText` is `14px`, whereas the smallest in the previous version was `10px` for `LabelText`. This enlargement is to ensure optimal readability, and it may affect your layout. 
-- `ActionText` is no longer present and shall be replaced with `BodyText`. The only difference between these two is that `ActionText` had a bold font weight, so it you want the same layout you need to add this yourself. 
-- `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-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. 
-
-The `AssistChip` is removed. We recommend that you use `Lozenge` for the same use case instead. 
-
-### Reference components for inline CSS with `styled-components`
-You can no longer reference components with inline CSS selector in styled-components style. For instance, before you could style `Icon` like this:
-```
-${Icon}:hover { ..styling.. }
-```
-Now, you must add `.selector` to achieve the same goal. 
-```
-${Icon.selector}:hover { ..styling.. }
-```
-
-### Chips
-You can no longer have children of the different Chip components, `ActionChip`, `FilterChip` and `TagChip`. To set the label inside a Chip, use the `label` prop instead.
-
-The outline variant has been removed from the Chip components.
-
-### Buttons 
-`GhostButton`, `TextButton` and `IconButton` no longer accept the `inverted` prop.
-The prop has been deprecated.
-
-### Themes
-Themes have been moved to @moller/gnist-themes, and require the use of a vanilla-extract plugin. This ensures better support for server-side rendering. Setup of the library in applications has thus changed significantly, but this should only require changes in some initialization and config files in your app. See [Using the library](#Using-the-library) in README for details.
-
-### Requirements for module resolution
-The compiled library files in the published package have been moved from root to the `dist` subdirectory.
-
-This requires consumers to respect the `"exports"` field in package.json. Bundlers typically do this already, but TypeScript requires `"moduleResolution": "bundler"` (or `"node16"` or `"nodenext"`, but `"bundler"` is recommended). 
+If you are migrating from the old component library `@moller/design.system`, please see the [migration guide](packages/design-system/MIGRATION.md).

package/dist/fonts/skoda/bold.css.cjs

@@ -1,9 +1,9 @@
 "use client";
 "use strict";
-const skodaDarkTokens_js = require("@gnist/themes/themes/skodaDarkTokens.js");
+const skodaTokens_js = require("@gnist/themes/themes/skodaTokens.js");
 const css = require("@vanilla-extract/css");
 const SKODANextW07Bold = require("./SKODANextW07-Bold.woff2.cjs");
-const { typeface } = skodaDarkTokens_js.skodaDarkTokens;
+const { typeface } = skodaTokens_js.skodaTokens;
 css.globalFontFace(typeface.brand, {
   src: `url(${SKODANextW07Bold.default})`,
   fontWeight: typeface.weight.bold

package/dist/fonts/skoda/bold.css.js

@@ -1,8 +1,8 @@
 "use client";
-import { skodaDarkTokens } from "@gnist/themes/themes/skodaDarkTokens.js";
+import { skodaTokens } from "@gnist/themes/themes/skodaTokens.js";
 import { globalFontFace } from "@vanilla-extract/css";
 import SkodaNextBold from "./SKODANextW07-Bold.woff2.js";
-const { typeface } = skodaDarkTokens;
+const { typeface } = skodaTokens;
 globalFontFace(typeface.brand, {
   src: `url(${SkodaNextBold})`,
   fontWeight: typeface.weight.bold

package/dist/fonts/skoda/medium.css.cjs

@@ -1,9 +1,9 @@
 "use client";
 "use strict";
-const skodaDarkTokens_js = require("@gnist/themes/themes/skodaDarkTokens.js");
+const skodaTokens_js = require("@gnist/themes/themes/skodaTokens.js");
 const css = require("@vanilla-extract/css");
 const SKODANextW07Bold = require("./SKODANextW07-Bold.woff2.cjs");
-const { typeface } = skodaDarkTokens_js.skodaDarkTokens;
+const { typeface } = skodaTokens_js.skodaTokens;
 css.globalFontFace(typeface.brand, {
   src: `url(${SKODANextW07Bold.default})`,
   fontWeight: typeface.weight.medium

package/dist/fonts/skoda/medium.css.js

@@ -1,8 +1,8 @@
 "use client";
-import { skodaDarkTokens } from "@gnist/themes/themes/skodaDarkTokens.js";
+import { skodaTokens } from "@gnist/themes/themes/skodaTokens.js";
 import { globalFontFace } from "@vanilla-extract/css";
 import SkodaNextBold from "./SKODANextW07-Bold.woff2.js";
-const { typeface } = skodaDarkTokens;
+const { typeface } = skodaTokens;
 globalFontFace(typeface.brand, {
   src: `url(${SkodaNextBold})`,
   fontWeight: typeface.weight.medium

package/dist/fonts/skoda/regular.css.cjs

@@ -1,9 +1,9 @@
 "use client";
 "use strict";
-const skodaDarkTokens_js = require("@gnist/themes/themes/skodaDarkTokens.js");
+const skodaTokens_js = require("@gnist/themes/themes/skodaTokens.js");
 const css = require("@vanilla-extract/css");
 const SKODANextW07Thin = require("./SKODANextW07-Thin.woff2.cjs");
-const { typeface } = skodaDarkTokens_js.skodaDarkTokens;
+const { typeface } = skodaTokens_js.skodaTokens;
 css.globalFontFace(typeface.brand, {
   src: `url(${SKODANextW07Thin.default})`,
   fontWeight: typeface.weight.regular

package/dist/fonts/skoda/regular.css.js

@@ -1,8 +1,8 @@
 "use client";
-import { skodaDarkTokens } from "@gnist/themes/themes/skodaDarkTokens.js";
+import { skodaTokens } from "@gnist/themes/themes/skodaTokens.js";
 import { globalFontFace } from "@vanilla-extract/css";
 import SkodaNextThin from "./SKODANextW07-Thin.woff2.js";
-const { typeface } = skodaDarkTokens;
+const { typeface } = skodaTokens;
 globalFontFace(typeface.brand, {
   src: `url(${SkodaNextThin})`,
   fontWeight: typeface.weight.regular

package/dist/fonts/skoda/semibold.css.cjs

@@ -1,9 +1,9 @@
 "use client";
 "use strict";
-const skodaDarkTokens_js = require("@gnist/themes/themes/skodaDarkTokens.js");
+const skodaTokens_js = require("@gnist/themes/themes/skodaTokens.js");
 const css = require("@vanilla-extract/css");
 const SKODANextW07Bold = require("./SKODANextW07-Bold.woff2.cjs");
-const { typeface } = skodaDarkTokens_js.skodaDarkTokens;
+const { typeface } = skodaTokens_js.skodaTokens;
 css.globalFontFace(typeface.brand, {
   src: `url(${SKODANextW07Bold.default})`,
   fontWeight: typeface.weight.semibold

package/dist/fonts/skoda/semibold.css.js

@@ -1,8 +1,8 @@
 "use client";
-import { skodaDarkTokens } from "@gnist/themes/themes/skodaDarkTokens.js";
+import { skodaTokens } from "@gnist/themes/themes/skodaTokens.js";
 import { globalFontFace } from "@vanilla-extract/css";
 import SkodaNextBold from "./SKODANextW07-Bold.woff2.js";
-const { typeface } = skodaDarkTokens;
+const { typeface } = skodaTokens;
 globalFontFace(typeface.brand, {
   src: `url(${SkodaNextBold})`,
   fontWeight: typeface.weight.semibold

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "2.0.34",
+    "version": "3.0.0",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -49,7 +49,7 @@
     "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
         "@gnist/component-utils": "3.0.6",
-        "@gnist/themes": "^2.2.10",
+        "@gnist/themes": "^3.0.0",
         "@mui/base": "^5.0.0-beta.69",
         "@vanilla-extract/css": "^1.17.1",
         "@vanilla-extract/css-utils": "^0.1.4",
@@ -104,5 +104,5 @@
             "optional": true
         }
     },
-    "gitHead": "280b6d37132fd6a3d6ec67c26a7ee35e9c42901f"
+    "gitHead": "c981aeab875d678264b540e2130229881e1df41f"
 }