@midas-ds/theme 2.0.1 → 3.0.1-local.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# 3.0.0 (2025-09-23)
+
+### 🚀 Features
+
+- **theme:** update signal colors ([#194](https://github.com/migrationsverket/midas/issues/194))
+- ⚠️ **components-theme:** add new default css export ([60df9c5b0c](https://github.com/migrationsverket/midas/commit/60df9c5b0c))
+
+### 🏭 Refactoring
+
+- **theme:** refactor style dictionary build script to nx executor ([08676187cf](https://github.com/migrationsverket/midas/commit/08676187cf))
+- remove theme from components project completely, rely on theme package ([5616f8ecc2](https://github.com/migrationsverket/midas/commit/5616f8ecc2))
+
+### 🔧 Maintenance
+
+- split global.css into fonts.css and color-scheme.css ([4597020286](https://github.com/migrationsverket/midas/commit/4597020286))
+- fix errors in playground app, disable for future builds ([787e74f234](https://github.com/migrationsverket/midas/commit/787e74f234))
+- **theme:** add auto generated files in unformatted shape ([d8e2aa989f](https://github.com/migrationsverket/midas/commit/d8e2aa989f))
+- **theme:** add explicit exports for css type help ([444b3a6e3b](https://github.com/migrationsverket/midas/commit/444b3a6e3b))
+- temporary fix on named module imports in preview.tsx ([4ef7584195](https://github.com/migrationsverket/midas/commit/4ef7584195))
+- buildable docs version ([b25c77fdf3](https://github.com/migrationsverket/midas/commit/b25c77fdf3))
+
+### ⚠️ Breaking Changes
+
+- **components-theme:** Default styles are now accessible from `import '@midas-ds/components/default.css'` or via the `@midas-ds/theme` package.
+
+## 2.0.1 (2025-09-12)
+
+### 🔧 Maintenance
+
+- **theme:** rename style dictionary artifacts ([6aef7a733f](https://github.com/migrationsverket/midas/commit/6aef7a733f))
+- **theme:** remove 'generated' ([81eb8978a9](https://github.com/migrationsverket/midas/commit/81eb8978a9))
+- **theme:** edit config ([8db8ba0b0a](https://github.com/migrationsverket/midas/commit/8db8ba0b0a))
+- **theme:** streamline build config ([ca07684b88](https://github.com/migrationsverket/midas/commit/ca07684b88))
+- **theme:** sync tokens with components lib ([30c3df9190](https://github.com/migrationsverket/midas/commit/30c3df9190))
+- clean up workflows ([6068c40031](https://github.com/migrationsverket/midas/commit/6068c40031))
+- **theme:** update package.json with meta data ([11fd386c38](https://github.com/migrationsverket/midas/commit/11fd386c38))

package/README.md

@@ -0,0 +1,58 @@
+# @midas-ds/theme
+
+This package contains the design tokens for the Midas Design System, managed by [Style Dictionary](https://style-dictionary.com/).
+It automatically generates theme assets, such as CSS variables and JavaScript modules, from a common set of token definitions.
+
+## Installation
+
+To install the theme package, run the following command in your project root:
+
+```bash
+npm install @midas-ds/theme
+```
+
+## Usage
+
+The theme provides assets for both CSS and JavaScript environments.
+
+### CSS
+
+Import the `variables.css` file into your project's main entry point or global stylesheet. This will make all the design tokens available as CSS Custom Properties.
+
+The CSS variables are prefixed with `midas`.
+
+```css
+/* Example: In your main stylesheet */
+@import '@midas-ds/theme/variables.css';
+
+body {
+  background-color: var(--midas-color-background-default);
+  font-family: var(--midas-typography-font-family);
+  font-size: var(--midas-font-size-base);
+}
+```
+
+### JavaScript / TypeScript
+
+You can import the tokens directly into your JavaScript or TypeScript files to use them in your component logic or styled-components.
+
+```typescript
+// Example: Using tokens in a JavaScript file
+import { variables } from '@midas-ds/theme';
+
+const customStyle = {
+  backgroundColor: variables.color.background.default,
+  padding: variables.spacing.base,
+};
+```
+
+## Contributing
+
+The source of truth for all design tokens is located in the `tokens/` directory, organized into JSON files by category (e.g., `colors.json`, `spacing.json`).
+
+To make changes to the theme:
+
+1.  Modify the desired token values in the JSON files under the `tokens/` directory.
+2.  Run the build script `sd.build.mjs` to regenerate the theme assets. This will update the files in the `src/lib/style-dictionary-dist/` directory.
+
+This process ensures that all theme assets are kept in sync with the master token definitions.

package/color-scheme.css

@@ -0,0 +1 @@
+:root{color-scheme:light dark}

package/fonts.css

@@ -0,0 +1 @@
+@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}