@muraldevkit/ds-foundation 2.17.0 → 2.19.0-dev-rMoq.1

package/README.md

@@ -33,15 +33,18 @@ Under `src/styles` you'll find the foundation styles of the design system that a
 
 #### Noteworthy files
 
+- **\_tokens.scss** — **Generated by Style Dictionary** from `src/tokens/**/*.json` during `npm run build`. Declares every `--mrl-*` custom property at `:root`. Committed to the repo as a verified snapshot of what the JSON compiles to. **Do not edit by hand** — edit the JSON sources instead.
 - **\_functions.scss** - Helper and utility functions used to reduce repetitive code.
 - **\_mixins.scss** - Helper and utility mixins used for reducing repetitive code when the output is CSS.
-- **global-variables/\*.scss** - Uses Sass maps to export global tokens as CSS variables for external use.
-- **contextual-variables/\*.scss** - Uses Sass maps to generate contextual token CSS variables for use across components and applications.
+- **global-variables/breakpoints.scss** — Sass-only breakpoint variables (`$mrl-breakpoint-01..05`). Lives outside the JSON because `@media` queries cannot reference `var(--…)`.
+- **contextual-variables/\*.scss** — Viewport-responsive overrides on top of the JSON-sourced custom properties. Used for the small set of tokens whose value changes inside `@media` blocks (Style Dictionary emits a flat `:root {}` and cannot model media queries).
 - **baseline.scss** - Ensures modern, cross-browser element rendering. Based off of [Normalize.css](https://necolas.github.io/normalize.css/).
 - **grid.scss** - Utility classes to allow applications to create consistent layouts.
-- **index.scss** - Collection of all SCSS modules in the `styles` directory **except** `fonts.scss`.
+- **index.scss** - Collection of all SCSS modules in the `styles` directory **except** `fonts.scss`. Forwards `_tokens` first.
 - **fonts.scss** - Collection of font styles for loading fonts - compiles separately from other scss files.
 
+The authored source of truth for every token is the DTCG-format JSON under `src/tokens/global-variables/` and `src/tokens/contextual-variables/`. See [`architecture.md`](./architecture.md) for the full pipeline.
+
 Applications are encouraged to use these files in their custom implementations to assist with alignment and consistency as Mural's UI design updates.
 
 ## Usage
@@ -68,12 +71,14 @@ To support the a more developer friendly environment, the design system provides
 
 #### CSS files
 
-To transpile the SCSS and get the CSS files, run:
+To compile the DTCG token JSON into `_tokens.scss` and then transpile the SCSS to CSS, run:
 
 ```bash
-npm run build:styles
+npm run build
 ```
 
+This runs `build.mjs`, which (1) executes Style Dictionary to regenerate `src/styles/_tokens.scss` from `src/tokens/**/*.json` and (2) compiles the Sass entry points to expanded + minified CSS with source maps. The DTCG JSON is also copied to `dist/tokens/` for downstream tooling.
+
 The design system provides compiled and minified versions of the baseline foundation styles and font declarations. The available CSS files are:
 
 1. `@muraldevkit/ds-foundation/dist/foundation.css`

package/dist/fonts.css

@@ -41,5 +41,4 @@
   font-weight: 500;
   src: url("../assets/fonts/STKBureau-SerifBook.12072022.woff2") format("woff2");
 }
-
 /*# sourceMappingURL=fonts.css.map */

package/dist/fonts.min.css

@@ -1 +1,2 @@
-.mrl-u-focus-wrapper{position:relative}@font-face{font-family:abcsocial;font-style:normal;font-weight:400;src:url("../assets/fonts/ABCSocial-Regular.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:500;src:url("../assets/fonts/ABCSocial-Medium.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:700;src:url("../assets/fonts/ABCSocial-Bold.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:800;src:url("../assets/fonts/ABCSocial-Black.12072022.woff2") format("woff2")}@font-face{font-family:stkbureau;font-style:normal;font-weight:400;src:url("../assets/fonts/STKBureau-SerifLight.12072022.woff2") format("woff2")}@font-face{font-family:stkbureau;font-style:normal;font-weight:500;src:url("../assets/fonts/STKBureau-SerifBook.12072022.woff2") format("woff2")}/*# sourceMappingURL=fonts.min.css.map */
+.mrl-u-focus-wrapper{position:relative}@font-face{font-family:abcsocial;font-style:normal;font-weight:400;src:url("../assets/fonts/ABCSocial-Regular.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:500;src:url("../assets/fonts/ABCSocial-Medium.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:700;src:url("../assets/fonts/ABCSocial-Bold.12072022.woff2") format("woff2")}@font-face{font-family:abcsocial;font-style:normal;font-weight:800;src:url("../assets/fonts/ABCSocial-Black.12072022.woff2") format("woff2")}@font-face{font-family:stkbureau;font-style:normal;font-weight:400;src:url("../assets/fonts/STKBureau-SerifLight.12072022.woff2") format("woff2")}@font-face{font-family:stkbureau;font-style:normal;font-weight:500;src:url("../assets/fonts/STKBureau-SerifBook.12072022.woff2") format("woff2")}
+/*# sourceMappingURL=fonts.min.css.map */