Merge pull request #133 from contember/pr/fix-theming

Pr/fix theming

package.json

@@ -31,9 +31,9 @@
     ]
   },
   "devDependencies": {
-    "@contember/admin": "1.2.0-rc.11",
-    "@contember/layout": "1.2.0-rc.11",
-    "@contember/react-utils": "1.2.0-rc.11",
+    "@contember/admin": "1.2.0-rc.12",
+    "@contember/layout": "1.2.0-rc.12",
+    "@contember/react-utils": "1.2.0-rc.12",
     "@contember/schema": "1.2.1",
     "@contember/schema-definition": "1.2.1",
     "@docusaurus/module-type-aliases": "^2.4.0",

src/theming/Components/Generator.tsx

@@ -15,7 +15,7 @@ import {
   ThemeName,
   WHITE_SPACE
 } from "../Config"
-import { copyTextToClipboard, cssToSASS, indentText } from "../Helpers"
+import { copyTextToClipboard, indentText } from "../Helpers"
 import { scaleGradient, scaleToCSSProperties, scaleToColorWeightMap } from "../Scale"
 import { ColorInput } from './ColorInput'
 import { Scale } from "./Scale"
@@ -161,7 +161,7 @@ function themeEntriesToCSS(themeEntries: ThemeEntries) {
   return `:where(.cui-root) {\n${themeEntries
     .map(
       ([name, [lightHex, middleHex, hex]]) =>
-        `${WHITE_SPACE}/* ${name}: [${lightHex}, ${middleHex}, ${hex}] */\n${WHITE_SPACE}${indentText(
+        `${WHITE_SPACE}/* ${name}: [${lightHex}, ${middleHex}, ${hex}] */\n${indentText(
           scaleToCSSProperties(
             `${PREFIX}-theme-${name}-rgb`,
             scaleToColorWeightMap(scaleGradient(lightHex, middleHex, hex))
@@ -223,7 +223,7 @@ export const Generator = React.memo(() => {
     await copyTextToClipboard(allCSSResult);
   }, [allCSSResult])
   return (
-    <Stack direction='vertical' className="theming-generator scheme-system">
+    <Stack className="cui-root theming-generator scheme-system">
       <Stack align="center" direction="horizontal" className="sm:flex-wrap">
         <Button className="sm:flex-grow" disabled={changedThemeEntries.length === 0} distinction="primary" onClick={copyCSSToClipboard}>Copy CSS</Button>
         {verbose && <Button distinction="outlined" onClick={copyAllCSSToClipboard}>Copy All CSS</Button>}
@@ -239,7 +239,7 @@ export const Generator = React.memo(() => {
         onThemesChange={onThemesChange}
       />
       {verbose && <div className="is-visible-style">{cssResult}</div>}
-      <style>{themeEntriesToCSS(themeEntries)}</style>
+      <style>{allCSSResult}</style>
     </Stack>
   )
 })

src/theming/Components/Scale.css

@@ -36,7 +36,7 @@
   content: "*";
   display: inline-block;
   margin-left: 0.4em;
-  color: rgb(var(--cui-theme-danger-500))
+  color: rgb(var(--cui-theme-danger-rgb-500))
 }
 
 .theming-scale.is-dirty .theming-scale-label-theme-name-action {

src/theming/Components/Scale.tsx

@@ -46,7 +46,7 @@ export const Scale = ({ actions, children, className, elevated, name, direction
       >
         {weights.map(weight => <Swatch
           key={weight}
-          property={`--cui-theme-${name}-${weight}`}
+          property={`--cui-theme-${name}-rgb-${weight}`}
           weight={weight}
         >
           {verbose ? <small>{weight}</small> : null}