@cratis/scene.react 0.1.0

package/dist/esm/theme/themeTokens.js

@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The prefix every Scene design token gets as a CSS custom property. A package adapts these to whatever
+ * its own component library expects — the PrimeReact package maps them onto PrimeReact's variables, the
+ * same indirection `@cratis/components` uses for its `--cratis-*` layer — so layout and component CSS
+ * never hardcodes one library's variable names.
+ */ const themeTokenPrefix = '--scene';
+/**
+ * Turns a semantic token name into its CSS custom property name: `primary.color` becomes
+ * `--scene-primary-color`, `surface.borderColor` becomes `--scene-surface-border-color`.
+ *
+ * Token names are semantic and platform-neutral in `Scene.Model` on purpose; this is the one place that
+ * decides what they look like in CSS, so a non-DOM renderer can make an entirely different choice.
+ */ function themeTokenProperty(token) {
+    const kebab = token.split('.').map((part)=>part.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()).join('-');
+    return `${themeTokenPrefix}-${kebab}`;
+}
+/**
+ * Applies a theme to an element, in place.
+ *
+ * Every token becomes a custom property on the element, and the element is marked with the theme's name
+ * and colour scheme so CSS can key off either. Tokens the previous theme set and this one does not are
+ * removed, so switching themes cannot leave a stale value behind.
+ *
+ * This is deliberately a mutation of an existing element rather than a re-render: switching theme has to
+ * be live re-resolution against the running profile, with no reload and no remount, or a gallery preview
+ * flickers every time someone tries a different theme.
+ */ function applyThemeTokens(element, theme, previous) {
+    for (const token of Object.keys(previous?.tokens ?? {})){
+        if (!theme?.tokens || !(token in theme.tokens)) {
+            element.style.removeProperty(themeTokenProperty(token));
+        }
+    }
+    if (!theme) {
+        element.removeAttribute('data-scene-theme');
+        element.removeAttribute('data-scene-color-scheme');
+        return;
+    }
+    for (const [token, value] of Object.entries(theme.tokens ?? {})){
+        element.style.setProperty(themeTokenProperty(token), value);
+    }
+    element.setAttribute('data-scene-theme', theme.name);
+    element.setAttribute('data-scene-color-scheme', theme.isDark ? 'dark' : 'light');
+}
+
+export { applyThemeTokens, themeTokenPrefix, themeTokenProperty };
+//# sourceMappingURL=themeTokens.js.map

package/dist/esm/theme/themeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeTokens.js","sources":["../../../theme/themeTokens.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Theme } from '@cratis/scene.model';\n\n/**\n * The prefix every Scene design token gets as a CSS custom property. A package adapts these to whatever\n * its own component library expects — the PrimeReact package maps them onto PrimeReact's variables, the\n * same indirection `@cratis/components` uses for its `--cratis-*` layer — so layout and component CSS\n * never hardcodes one library's variable names.\n */\nexport const themeTokenPrefix = '--scene';\n\n/**\n * Turns a semantic token name into its CSS custom property name: `primary.color` becomes\n * `--scene-primary-color`, `surface.borderColor` becomes `--scene-surface-border-color`.\n *\n * Token names are semantic and platform-neutral in `Scene.Model` on purpose; this is the one place that\n * decides what they look like in CSS, so a non-DOM renderer can make an entirely different choice.\n */\nexport function themeTokenProperty(token: string): string {\n    const kebab = token\n        .split('.')\n        .map((part) => part.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase())\n        .join('-');\n    return `${themeTokenPrefix}-${kebab}`;\n}\n\n/**\n * Applies a theme to an element, in place.\n *\n * Every token becomes a custom property on the element, and the element is marked with the theme's name\n * and colour scheme so CSS can key off either. Tokens the previous theme set and this one does not are\n * removed, so switching themes cannot leave a stale value behind.\n *\n * This is deliberately a mutation of an existing element rather than a re-render: switching theme has to\n * be live re-resolution against the running profile, with no reload and no remount, or a gallery preview\n * flickers every time someone tries a different theme.\n */\nexport function applyThemeTokens(element: HTMLElement, theme: Theme | undefined, previous?: Theme): void {\n    for (const token of Object.keys(previous?.tokens ?? {})) {\n        if (!theme?.tokens || !(token in theme.tokens)) {\n            element.style.removeProperty(themeTokenProperty(token));\n        }\n    }\n\n    if (!theme) {\n        element.removeAttribute('data-scene-theme');\n        element.removeAttribute('data-scene-color-scheme');\n        return;\n    }\n\n    for (const [token, value] of Object.entries(theme.tokens ?? {})) {\n        element.style.setProperty(themeTokenProperty(token), value);\n    }\n\n    element.setAttribute('data-scene-theme', theme.name);\n    element.setAttribute('data-scene-color-scheme', theme.isDark ? 'dark' : 'light');\n}\n"],"names":["themeTokenPrefix","themeTokenProperty","token","kebab","split","map","part","replace","toLowerCase","join","applyThemeTokens","element","theme","previous","Object","keys","tokens","style","removeProperty","removeAttribute","value","entries","setProperty","setAttribute","name","isDark"],"mappings":"AAAA;AACA;AAIA;;;;;IAMO,MAAMA,gBAAAA,GAAmB;AAEhC;;;;;;IAOO,SAASC,kBAAAA,CAAmBC,KAAa,EAAA;AAC5C,IAAA,MAAMC,QAAQD,KAAAA,CACTE,KAAK,CAAC,GAAA,CAAA,CACNC,GAAG,CAAC,CAACC,IAAAA,GAASA,IAAAA,CAAKC,OAAO,CAAC,oBAAA,EAAsB,SAASC,WAAW,EAAA,CAAA,CACrEC,IAAI,CAAC,GAAA,CAAA;AACV,IAAA,OAAO,CAAA,EAAGT,gBAAAA,CAAiB,CAAC,EAAEG,KAAAA,CAAAA,CAAO;AACzC;AAEA;;;;;;;;;;AAUC,IACM,SAASO,gBAAAA,CAAiBC,OAAoB,EAAEC,KAAwB,EAAEC,QAAgB,EAAA;IAC7F,KAAK,MAAMX,SAASY,MAAAA,CAAOC,IAAI,CAACF,QAAAA,EAAUG,MAAAA,IAAU,EAAC,CAAA,CAAI;QACrD,IAAI,CAACJ,OAAOI,MAAAA,IAAU,EAAEd,KAAAA,IAASU,KAAAA,CAAMI,MAAK,CAAA,EAAI;AAC5CL,YAAAA,OAAAA,CAAQM,KAAK,CAACC,cAAc,CAACjB,kBAAAA,CAAmBC,KAAAA,CAAAA,CAAAA;AACpD,QAAA;AACJ,IAAA;AAEA,IAAA,IAAI,CAACU,KAAAA,EAAO;AACRD,QAAAA,OAAAA,CAAQQ,eAAe,CAAC,kBAAA,CAAA;AACxBR,QAAAA,OAAAA,CAAQQ,eAAe,CAAC,yBAAA,CAAA;AACxB,QAAA;AACJ,IAAA;AAEA,IAAA,KAAK,MAAM,CAACjB,KAAAA,EAAOkB,KAAAA,CAAM,IAAIN,MAAAA,CAAOO,OAAO,CAACT,KAAAA,CAAMI,MAAM,IAAI,EAAC,CAAA,CAAI;AAC7DL,QAAAA,OAAAA,CAAQM,KAAK,CAACK,WAAW,CAACrB,mBAAmBC,KAAAA,CAAAA,EAAQkB,KAAAA,CAAAA;AACzD,IAAA;AAEAT,IAAAA,OAAAA,CAAQY,YAAY,CAAC,kBAAA,EAAoBX,KAAAA,CAAMY,IAAI,CAAA;AACnDb,IAAAA,OAAAA,CAAQY,YAAY,CAAC,yBAAA,EAA2BX,KAAAA,CAAMa,MAAM,GAAG,MAAA,GAAS,OAAA,CAAA;AAC5E;;;;"}