fix: Theming fix & Remove unused

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}

src/theming/Config.ts

@@ -1,5 +1,3 @@
-import type { ColorSchemeOffsets } from "./Types";
-
 export const PREFIX = "cui";
 export const WHITE_SPACE = "\t";
 
@@ -58,95 +56,5 @@ export const CONTEMBER_THEMES: {[Property in ThemeName]: [string, string, string
   success: ["#6EBB00", "#6EBB00", "#6EBB00"],
   warn: ["#FF6600", "#FF6600", "#FF6600"], //"#EC9117",
   danger: ["#FF004C", "#FF4D00", "#FF0000"], //"#FF4827",
-  default: ["#999999", "#999999", "#999999"]
+  default: ["#8494A4", "#8494A4", "#8494A4"]
 })
-
-export const c5 = -4; // -4; // 8
-export const c4 = -14; // -15; // 0
-export const c3 = 6; // 6; // 0
-export const c2 = 180; // 180; // 90
-export const c1 = 100; // 100; // 68
-
-export const colorSchemeWeightOffsets: ColorSchemeOffsets = {
-  light: {
-    color: -875,
-    controlColor: -575,
-    controlColorHighlighted: -575,
-    controlColorPressed: -650,
-    controlBorderColor: -500,
-    controlBorderColorHighlighted: -575,
-    controlBackgroundColor: 0,
-    controlBackgroundColorHighlighted: 250,
-    filledControlColor: -575,
-    filledControlColorHighlighted: -525,
-    filledControlColorPressed: -775,
-    filledControlBorderColorPressed: -775,
-    filledControlBackroundColor: 50,
-    filledControlBackgroundColorHighlighted: 75,
-    filledControlBackgroundColorPressed: -600,
-    filledPrimaryControlColor: 50,
-    filledPrimaryControlColorHighlighted: 400,
-    filledPrimaryControlColorPressed: -200,
-    filledPrimaryControlBorderColorPressed: -200,
-    filledPrimaryControlBackroundColor: -600,
-    filledPrimaryControlBackgroundColorHighlighted: -550,
-    filledPrimaryControlBackgroundColorPressed: -600,
-    tonedControlColorWeight: -700,
-    tonedControlColorWeightHighlighed: -300,
-    tonedControlBackgroundColor: -125,
-    tonedControlBackgroundColorHighlighed: 100
-  },
-  dark: {
-    color: 975,
-    controlColor: 575,
-    controlColorHighlighted: 900,
-    controlColorPressed: 550,
-    controlBorderColor: 550,
-    controlBorderColorHighlighted: 900,
-    controlBackgroundColor: -150,
-    controlBackgroundColorHighlighted: 250,
-    filledControlColor: 650,
-    filledControlColorHighlighted: 1000,
-    filledControlColorPressed: 650,
-    filledControlBorderColorPressed: 650,
-    filledControlBackroundColor: 125,
-    filledControlBackgroundColorHighlighted: 250,
-    filledControlBackgroundColorPressed: 125,
-    filledPrimaryControlColor: 1000,
-    filledPrimaryControlColorHighlighted: 1000,
-    filledPrimaryControlColorPressed: 600,
-    filledPrimaryControlBorderColorPressed: 650,
-    filledPrimaryControlBackroundColor: 275,
-    filledPrimaryControlBackgroundColorHighlighted: 350,
-    filledPrimaryControlBackgroundColorPressed: 125,
-    tonedControlColorWeight: 850,
-    tonedControlColorWeightHighlighed: 950,
-    tonedControlBackgroundColor: 250,
-    tonedControlBackgroundColorHighlighed: 325
-  }
-}
-
-export const colorSchemesOpacities: ColorSchemeOffsets = {
-  light: {
-    high: -0.25,
-    medium: -0.50,
-    low: -0.7,
-    lower: -0.875,
-    controlBackgroundColor: -0.75,
-    controlBackgroundColorHighlighted: -0.25,
-    filledControlBackgroundColorPressed: -0.5,
-    tonedControlBackgroundColor: -0.75,
-    tonedControlBackgroundColorHighlighted: -0.5 / 2,
-  },
-  dark: {
-    high: -0.25,
-    medium: -0.50,
-    low: -0.7,
-    lower: -0.875,
-    controlBackgroundColor: -0.75,
-    controlBackgroundColorHighlighted: -0.25,
-    filledControlBackgroundColorPressed: -0.5,
-    tonedControlBackgroundColor: -0.5,
-    tonedControlBackgroundColorHighlighted: -0.25 / 2,
-  },
-}