@newtonedev/editor 0.1.12 → 0.2.1

package/src/components/RightSidebar.tsx

@@ -1,7 +1,6 @@
 import { useCallback, type KeyboardEvent } from "react";
 import { useTokens, getComponent, generateComponentCode, Select, NewtoneProvider, Icon } from "@newtonedev/components";
 import type { EditableProp, NewtoneThemeConfig, ColorMode } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 import { CodeBlock } from "./CodeBlock";
 import { ComponentRenderer } from "../preview/ComponentRenderer";
 import type { SidebarSelection } from "../types";
@@ -50,8 +49,8 @@ export function RightSidebar({
         transition: "transform 200ms ease, opacity 150ms ease",
         display: "flex",
         flexDirection: "column",
-        backgroundColor: srgbToHex(tokens.background.srgb),
-        borderLeft: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        backgroundColor: tokens.colors.primary.main.background,
+        borderLeft: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
       }}
     >
       {selection && component && (
@@ -63,7 +62,7 @@ export function RightSidebar({
               alignItems: "center",
               justifyContent: "space-between",
               padding: "12px 16px",
-              borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              borderBottom: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
               flexShrink: 0,
             }}
           >
@@ -76,7 +75,7 @@ export function RightSidebar({
                   border: "none",
                   cursor: "pointer",
                   padding: 4,
-                  color: srgbToHex(tokens.textSecondary.srgb),
+                  color: tokens.colors.primary.main.fontTertiary,
                   fontSize: 16,
                   lineHeight: 1,
                   flexShrink: 0,
@@ -84,7 +83,7 @@ export function RightSidebar({
                   alignItems: "center",
                 }}
               >
-                <Icon name="arrow_back" size={16} color={srgbToHex(tokens.textSecondary.srgb)} />
+                <Icon name="arrow_back" size={16} color={tokens.colors.primary.main.fontTertiary} />
               </button>
               {selection.scope === "variant" && variant ? (
                 <>
@@ -98,7 +97,7 @@ export function RightSidebar({
                       padding: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: srgbToHex(tokens.accent.fill.srgb),
+                      color: tokens.colors.secondary.emphasis.fontPrimary,
                       whiteSpace: "nowrap",
                     }}
                   >
@@ -107,7 +106,7 @@ export function RightSidebar({
                   <span
                     style={{
                       fontSize: 13,
-                      color: srgbToHex(tokens.textSecondary.srgb),
+                      color: tokens.colors.primary.main.fontTertiary,
                     }}
                   >
                     /
@@ -116,7 +115,7 @@ export function RightSidebar({
                     style={{
                       fontSize: 14,
                       fontWeight: 600,
-                      color: srgbToHex(tokens.textPrimary.srgb),
+                      color: tokens.colors.primary.main.fontPrimary,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
@@ -130,7 +129,7 @@ export function RightSidebar({
                   style={{
                     fontSize: 14,
                     fontWeight: 600,
-                    color: srgbToHex(tokens.textPrimary.srgb),
+                    color: tokens.colors.primary.main.fontPrimary,
                   }}
                 >
                   {component.name}
@@ -152,7 +151,7 @@ export function RightSidebar({
               style={{
                 marginBottom: 20,
                 borderRadius: 8,
-                border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
                 overflow: "hidden",
               }}
             >
@@ -172,7 +171,7 @@ export function RightSidebar({
               style={{
                 fontSize: 13,
                 fontWeight: 600,
-                color: srgbToHex(tokens.textSecondary.srgb),
+                color: tokens.colors.primary.main.fontTertiary,
                 textTransform: "uppercase",
                 letterSpacing: 0.5,
                 margin: 0,
@@ -202,9 +201,9 @@ export function RightSidebar({
                   width: "100%",
                   padding: "8px 12px",
                   borderRadius: 6,
-                  border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                  border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
                   backgroundColor: "transparent",
-                  color: srgbToHex(tokens.textSecondary.srgb),
+                  color: tokens.colors.primary.main.fontTertiary,
                   fontSize: 13,
                   cursor: "pointer",
                 }}
@@ -217,7 +216,7 @@ export function RightSidebar({
               style={{
                 fontSize: 13,
                 fontWeight: 600,
-                color: srgbToHex(tokens.textSecondary.srgb),
+                color: tokens.colors.primary.main.fontTertiary,
                 textTransform: "uppercase",
                 letterSpacing: 0.5,
                 margin: 0,
@@ -253,7 +252,7 @@ function PreviewSurface({
         justifyContent: "center",
         padding: 24,
         height: 120,
-        backgroundColor: srgbToHex(previewTokens.backgroundElevated.srgb),
+        backgroundColor: previewTokens.colors.primary.main.divider,
       }}
     >
       <ComponentRenderer componentId={componentId} props={propOverrides} />
@@ -286,9 +285,9 @@ function PropControl({
     width: "100%",
     padding: "6px 10px",
     borderRadius: 6,
-    border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
-    backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-    color: srgbToHex(tokens.textPrimary.srgb),
+    border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
+    backgroundColor: tokens.colors.primary.main.divider,
+    color: tokens.colors.primary.main.fontPrimary,
     fontSize: 13,
     fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
     boxSizing: "border-box" as const,
@@ -301,7 +300,7 @@ function PropControl({
           style={{
             fontSize: 12,
             fontWeight: 500,
-            color: srgbToHex(tokens.textPrimary.srgb),
+            color: tokens.colors.primary.main.fontPrimary,
           }}
         >
           {prop.label}
@@ -358,7 +357,7 @@ function PropControl({
               aria-label={prop.label}
               style={{
                 width: "100%",
-                accentColor: srgbToHex(tokens.accent.fill.srgb),
+                accentColor: tokens.colors.secondary.emphasis.fontPrimary,
                 cursor: "pointer",
               }}
             />
@@ -376,8 +375,8 @@ function PropControl({
                     fontSize: 11,
                     fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
                     color: o.value === value
-                      ? srgbToHex(tokens.textPrimary.srgb)
-                      : srgbToHex(tokens.textTertiary.srgb),
+                      ? tokens.colors.primary.main.fontPrimary
+                      : tokens.colors.primary.main.fontDisabled,
                     fontWeight: o.value === value ? 600 : 400,
                   }}
                 >
@@ -410,8 +409,8 @@ function PropControl({
               height: 20,
               borderRadius: 10,
               backgroundColor: value
-                ? srgbToHex(tokens.accent.fill.srgb)
-                : srgbToHex(tokens.border.srgb),
+                ? tokens.colors.secondary.emphasis.fontPrimary
+                : tokens.colors.primary.main.fontDisabled,
               position: "relative",
               transition: "background-color 150ms ease",
               flexShrink: 0,

package/src/components/Sidebar.tsx

@@ -1,93 +1,87 @@
-import { useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import { Frame, Text, Wrapper, Button } from "@newtonedev/components";
+import type { ColorResult } from "newtone";
+import type { ConfiguratorState } from "../configurator/types";
+import { ScalePlots } from "./sections/ScalePlots";
 
 const SIDEBAR_WIDTH = 360;
 
 interface SidebarProps {
   readonly isDirty: boolean;
   readonly onRevert: () => void;
+  readonly state: ConfiguratorState;
+  readonly previewColors: readonly (readonly ColorResult[])[];
+  readonly activePaletteIndex: number;
+  readonly activeSectionId: string;
+  readonly useP3: boolean;
 }
 
 export function Sidebar({
   isDirty,
   onRevert,
+  state,
+  previewColors,
+  activePaletteIndex,
+  activeSectionId,
+  useP3,
 }: SidebarProps) {
-  const tokens = useTokens();
-
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const bgColor = srgbToHex(tokens.background.srgb);
-
   return (
-    <div
+    <Frame
+      width={SIDEBAR_WIDTH}
+      bordered
+      direction="vertical"
       style={{
-        width: SIDEBAR_WIDTH,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
         height: "100vh",
-        borderLeft: `1px solid ${borderColor}`,
-        backgroundColor: bgColor,
-      }}
+        flexShrink: 0,
+        borderTopWidth: 0,
+        borderBottomWidth: 0,
+        borderRightWidth: 0,
+      } as any}
     >
       {/* Header */}
-      <div
-        style={{
-          flexShrink: 0,
-          padding: "16px 20px",
-          borderBottom: `1px solid ${borderColor}`,
-          display: "flex",
-          alignItems: "center",
-        }}
+      <Frame
+        bordered
+        padding={{ x: "20", y: "16" }}
+        direction="horizontal"
+        align="center"
+        style={{ flexShrink: 0, borderLeftWidth: 0, borderRightWidth: 0, borderTopWidth: 0 }}
       >
-        <span
-          style={{
-            fontSize: 16,
-            fontWeight: 700,
-            color: srgbToHex(tokens.textPrimary.srgb),
-          }}
-        >
-          newtone
-        </span>
-      </div>
+        <Text role="body" size="md" weight="bold">newtone</Text>
+      </Frame>
 
-      {/* Content area (empty for now) */}
+      {/* Content area */}
       <div
         style={{
           flex: 1,
           overflowY: "auto",
           overflowX: "hidden",
+          padding: activeSectionId === "colors" ? 16 : 0,
         }}
-      />
+      >
+        {activeSectionId === "colors" && (
+          <ScalePlots
+            state={state}
+            scale={previewColors[activePaletteIndex] ?? []}
+            activePaletteIndex={activePaletteIndex}
+            useP3={useP3}
+          />
+        )}
+      </div>
 
       {/* Footer */}
-      <div
-        style={{
-          flexShrink: 0,
-          padding: "12px 20px",
-          borderTop: `1px solid ${borderColor}`,
-        }}
+      <Frame
+        bordered
+        padding={{ x: "20", y: "12" }}
+        style={{ flexShrink: 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 }}
       >
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
           disabled={!isDirty}
-          onClick={onRevert}
-          aria-label="Revert all changes to the last saved version"
-          style={{
-            width: "100%",
-            padding: "8px 16px",
-            borderRadius: 6,
-            border: `1px solid ${borderColor}`,
-            backgroundColor: "transparent",
-            color: isDirty
-              ? srgbToHex(tokens.textPrimary.srgb)
-              : srgbToHex(tokens.textSecondary.srgb),
-            fontSize: 13,
-            cursor: isDirty ? "pointer" : "not-allowed",
-            opacity: isDirty ? 1 : 0.5,
-          }}
+          onPress={onRevert}
         >
           Revert Changes
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Frame>
+    </Frame>
   );
 }

package/src/components/TableOfContents.tsx

@@ -3,7 +3,6 @@ import {
   useTokens,
   getComponentsByCategory,
 } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 import type { PreviewView } from "../types";
 
 interface TableOfContentsProps {
@@ -24,9 +23,9 @@ export function TableOfContents({
   const tokens = useTokens();
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const activeColor = srgbToHex(tokens.accent.fill.srgb);
-  const textPrimary = srgbToHex(tokens.textPrimary.srgb);
+  const borderColor = tokens.colors.primary.main.fontDisabled;
+  const activeColor = tokens.colors.secondary.emphasis.fontPrimary;
+  const textPrimary = tokens.colors.primary.main.fontPrimary;
   const hoverBg = `${borderColor}20`;
 
   const components = getComponentsByCategory(activeSectionId);
@@ -44,7 +43,7 @@ export function TableOfContents({
         overflowY: "auto",
         borderRight: `1px solid ${borderColor}`,
         padding: "16px 0",
-        backgroundColor: srgbToHex(tokens.background.srgb),
+        backgroundColor: tokens.colors.primary.main.background,
       }}
     >
       <button