@sragatiping/cuboid 0.1.0 → 0.1.4

package/dist/theme/themeCubeOverride.d.ts

@@ -0,0 +1,11 @@
+import { ThemeTokens } from './types';
+/** Rebind functional surface tokens used by Box and similar primitives. */
+export declare function functionalSurfaceCubeOverride(tokens: ThemeTokens): Record<string, string>;
+/** Rebind stack gap/padding scale tokens. */
+export declare function stackScaleCubeOverride(tokens: ThemeTokens): Record<string, string>;
+/** Rebind code-block typography tokens used by CodeSurface. */
+export declare function codeBlockTypographyCubeOverride(tokens: ThemeTokens): Record<string, string>;
+/** Surface + syntax + typography overrides for CodeSurface local themes. */
+export declare function codeSurfaceCubeOverride(tokens: ThemeTokens): Record<string, string>;
+/** Rebind JSON syntax colours used by CodeSurface and JsonCodeView. */
+export declare function syntaxColorsCubeOverride(tokens: ThemeTokens): Record<string, string>;

package/dist/theme/types.d.ts

@@ -83,10 +83,14 @@ export interface SyntaxColors {
     markupChangedBg: string;
     markupChangedText: string;
     nullLiteral: string;
+    /** JSON / numeric literal values — not identifiers (`variable`). */
+    numberLiteral: string;
     /** Both true and false — purple by default. Not red/green: value has no inherent sentiment. */
     booleanLiteral: string;
-    /** { } [ ] brackets and braces */
+    /** { } [ ] at nesting depth 0 */
     bracket: string;
+    /** { } [ ] at odd nesting depths (first level nested and below, alternating) */
+    bracketNested: string;
     /** String values that look like a URL */
     stringUrl: string;
     /** String values that look like an email address */
@@ -95,8 +99,18 @@ export interface SyntaxColors {
     stringUuid: string;
     /** Background tint applied to a row when the pointer hovers over it */
     rowHoverBg: string;
+    /** Background tint for a collapsed JSON node summary row */
+    collapsedRowBg: string;
+    /** Gutter watchlist marker dot when line is watched */
+    watchMark: string;
+    /** Gutter watchlist dot preview on row hover (before click) */
+    watchMarkHover: string;
+    /** Row background when line is on the watchlist */
+    watchRowBg: string;
 }
 /** Resolved palette from tokens/functional/colors/globals.json (color.* paths). */
+export type { GlobalColorPath } from './globalColor';
+export { resolveGlobalColor, resolveGlobalColorOrCss, GLOBAL_COLOR_PATH_EXAMPLES, } from './globalColor';
 export interface GlobalSemanticColorPair {
     default: string;
     muted: string;
@@ -294,21 +308,35 @@ export interface ActionMenuSizesTokens {
 export type PillSurface = "filled" | "bordered";
 /** Matches Figma Pill intensity property. */
 export type PillIntensity = "extralight" | "light" | "bold" | "extraBold";
+export interface PillSurfaceColors {
+    bgColor: string;
+    fgColor: string;
+    borderColor: string;
+}
 export interface PillIntensityColors {
-    filled: ButtonVariantInteractiveColors;
-    bordered: ButtonVariantInteractiveColors;
+    filled: PillSurfaceColors;
+    bordered: PillSurfaceColors;
 }
 /** Keys are shade names (`gray`, `yellow`, …) from token files under `components/pill/`. */
 export type PillFunctionalColors = Record<string, Record<PillIntensity, PillIntensityColors>>;
-export interface PillSizeStopTokens {
+/** Chip geometry from `pill.json` (scales with inherited font size via em). */
+export interface PillLayoutTokens {
     paddingInline: string;
     paddingBlock: string;
     borderRadius: string;
     gap: string;
 }
-export interface PillSizesTokens {
-    sm: PillSizeStopTokens;
-    md: PillSizeStopTokens;
+export interface HighlightColorRecipe {
+    bgColor: string;
+    fgColor: string;
+}
+/** Shade keys from Figma `HighlightedText` — `none` is plain muted text without a tint. */
+export type HighlightColor = "none" | "neutral" | "green" | "blue" | "yellow" | "orange" | "red";
+export type HighlightFunctionalColors = Record<HighlightColor, HighlightColorRecipe>;
+export interface HighlightSizesTokens {
+    paddingInline: string;
+    paddingBlock: string;
+    borderRadius: string;
 }
 export interface FunctionalColors {
     background: BackgroundColors;
@@ -319,6 +347,7 @@ export interface FunctionalColors {
     button: ButtonFunctionalColors;
     iconButton: IconButtonFunctionalColors;
     link: LinkFunctionalColors;
+    highlight: HighlightFunctionalColors;
     breadcrumb: BreadcrumbFunctionalColors;
     siteHeader: SiteHeaderFunctionalColors;
     overlay: OverlayFunctionalColors;
@@ -387,16 +416,6 @@ export interface ButtonTypography {
     medium: ButtonTypographyStop;
     large: ButtonTypographyStop;
 }
-/** Pill label metrics per size stop (from typography tokens). */
-export interface PillTypographyStop {
-    fontSize: string;
-    lineHeight: string;
-    fontWeight: number;
-}
-export interface PillTypography {
-    sm: PillTypographyStop;
-    md: PillTypographyStop;
-}
 export interface Typography {
     fontFamily: FontFamilyTokens;
     fontSize: FontSizeTokens;
@@ -404,7 +423,6 @@ export interface Typography {
     lineHeight: LineHeightTokens;
     text: TextTokens;
     button: ButtonTypography;
-    pill: PillTypography;
 }
 export interface SpaceTokens {
     1: string;
@@ -566,6 +584,29 @@ export interface SidebarSizesTokens {
     padding: string;
     footerPadding: string;
 }
+export interface LayoutTokens {
+    pageMaxWidth: string;
+    contentMaxWidth: string;
+    sectionLabelWidth: string;
+    pagePaddingInline: string;
+}
+/** Shared panel widths for sheet, sidebar, and similar overlays (from size/container.json). */
+export interface ContainerSizesTokens {
+    panelMinWidth: string;
+    sheetWidthSm: string;
+    sheetWidthMd: string;
+    sheetWidthLg: string;
+    sidebarWidthSm: string;
+    sidebarWidthMd: string;
+    sidebarWidthLg: string;
+    sidebarMinWidth: string;
+    sidebarMaxWidth: string;
+    tooltipMaxWidth: string;
+    tooltipMaxWidthSingleLine: string;
+    popoverMinWidth: string;
+    popoverMaxWidth: string;
+}
+export type LayoutWidth = "label" | "page" | "content" | "full" | "auto";
 export interface ResizeHandleSizesTokens {
     hitArea: string;
 }
@@ -573,6 +614,7 @@ export interface ShadowTokens {
     popover: string;
     popoverElevated: string;
     sheet: string;
+    tooltip: string;
 }
 export interface Sizes {
     space: SpaceTokens;
@@ -580,12 +622,15 @@ export interface Sizes {
         gap: StackGapTokens;
         padding: StackPaddingTokens;
     };
+    layout: LayoutTokens;
+    container: ContainerSizesTokens;
+    highlight: HighlightSizesTokens;
     borderRadius: BorderRadiusTokens;
     borderWidth: BorderWidthTokens;
     breakpoints: BreakpointTokens;
     control: ControlSizesTokens;
     tooltip: TooltipLayoutTokens;
-    pill: PillSizesTokens;
+    pill: PillLayoutTokens;
     iconButton: IconButtonSizesTokens;
     breadcrumb: BreadcrumbSizesTokens;
     siteHeader: SiteHeaderSizesTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sragatiping/cuboid",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "description": "Cube — React components and design tokens for data views, tables, and themed UI.",
   "keywords": [
     "react",
@@ -20,10 +20,15 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/style.css",
+    "./theme.css": "./src/theme/output/theme.css",
+    "./components.css": "./src/theme/output/components.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/theme/output/theme.css",
+    "src/theme/output/components.css"
   ],
   "scripts": {
     "dev": "vite",
@@ -40,7 +45,7 @@
     "tokens:functional-typography": "node scripts/flatten-functional-typography.mjs",
     "tokens:typography-theme": "node scripts/build-typography-theme.mjs",
     "pretokens:theme": "node scripts/build-typography-theme.mjs",
-    "tokens:theme": "node scripts/build-theme.mjs && node scripts/build-theme-css.mjs",
+    "tokens:theme": "node scripts/build-theme.mjs && node scripts/build-theme-css.mjs && node scripts/build-component-theme-css.mjs",
     "prebuild": "npm run tokens:theme"
   },
   "peerDependencies": {