Variable cyberpunkConst

Type Declaration

• Readonlyborders: { width: "1px" }

• Readonlybreakpoints: { lg: "64rem"; md: "48rem"; sm: "40rem"; xl: "80rem"; xs: "30rem" }

• Readonlycolors: {
      danger: { dark: "#ff739b"; light: "#cf234d" };
      info: { dark: "#59efff"; light: "#006e80" };
      neutral: { dark: "#c6b4e6"; light: "#534369" };
      primary: { dark: "#ff70de"; light: "#ad007c" };
      success: { dark: "#bdff5b"; light: "#267400" };
      warning: { dark: "#ffe55b"; light: "#8a5c00" };
  }

• Readonlycomponents: {
      Alert: { gap: "sm"; padding: "md"; textStyle: "label" };
      Avatar: { radius: "rounded" };
      Card: { radius: "lg"; shadow: "sm" };
      Dialog: {
          radius: "md";
          slots: { header: { textStyle: "heading" }; root: { shadow: "lg" } };
      };
      Drawer: { size: "sm"; slots: { root: { shadow: "md" } } };
      EmptyState: {
          color: "neutral";
          gap: "sm";
          padding: "lg";
          textStyle: "body";
      };
      Stepper: { radius: "rounded" };
      Table: { slots: { header: { background: "tint"; textStyle: "label" } } };
      Toast: { gap: "sm"; padding: "md"; radius: "lg"; textStyle: "label" };
      Tooltip: { padding: "sm"; radius: "md"; textStyle: "caption" };
  }

• Readonlydefaults: {
      color: "primary";
      density: "comfortable";
      errorColor: "danger";
      floatingShadow: "md";
      gap: "md";
      helperStyle: "caption";
      labelStyle: "label";
      modalSize: "md";
      padding: "lg";
      radius: "sm";
      size: "md";
      softVariant: "soft";
      textStyle: "body";
      variant: "solid";
  }

• Readonlydensity: {
      comfortable: {
          fontSize: "0.8125rem";
          paddingX: "0.875rem";
          paddingY: "0.75rem";
      };
      compact: {
          fontSize: "0.75rem";
          paddingX: "0.625rem";
          paddingY: "0.375rem";
      };
  }

• ReadonlyfocusRing: { color: "info"; offset: "4px"; width: "2px" }

• Readonlylabels: {
      actions: "Actions";
      audioLevel: "Input level";
      avatarOverflow: (count: number) => string;
      breadcrumb: "Breadcrumb";
      chooseAction: "Choose action";
      chooseColor: "Choose color";
      chooseDate: "Choose date";
      chooseFile: "Choose file";
      chooseFiles: "Choose files";
      close: "Close";
      colorPresets: "Suggested colors";
      commandPalette: "Command palette";
      currentImage: "Current image";
      currentImageName: "current image";
      decrease: "Decrease";
      dismiss: "Dismiss";
      dropFile: "or drop a file here";
      dropFiles: "or drop files here";
      dropReplacement: "or drop a replacement here";
      expandBreadcrumb: "Show all breadcrumbs";
      increase: "Increase";
      loading: "Loading";
      loadingResults: "Loading…";
      nextMonth: "Next month";
      nextPage: "Next page";
      noResults: "No results";
      notifications: "Notifications";
      page: (page: number) => string;
      pageSummary: (page: number, count: number) => string;
      pagination: "Pagination";
      pauseAudio: "Pause audio";
      playAudio: "Play audio";
      previewImage: (name: string) => string;
      previousMonth: "Previous month";
      previousPage: "Previous page";
      progress: "Progress";
      progressValue: (value: number, max: number) => string;
      remove: "Remove";
      removeItem: (name: string) => string;
      replaceFile: "Replace file";
      searchCommands: "Search commands…";
      seekAudio: "Seek audio";
      selectAllRows: "Select all rows";
      selectedImage: "selected image";
      selectedItems: "Selected";
      shortcutAlt: "Alt";
      shortcutControl: "Ctrl";
      shortcutMeta: "Meta";
      shortcutShift: "Shift";
      sliderMaximum: "Maximum";
      sliderMinimum: "Minimum";
      stepCompleted: "Completed";
  }

• ReadonlymodalSizes: { full: "100vw"; lg: "48rem"; md: "32rem"; sm: "24rem"; xl: "64rem" }

• Readonlymotion: { base: "200ms"; easing: "cubic-bezier(0.2, 0, 0, 1)"; fast: "120ms" }

• Readonlyneutrals: {
      bg: { dark: "#090516"; light: "#f2ebfc" };
      border: { dark: "#8d53a5"; light: "#ae78bd" };
      muted: { dark: "#c0a9d5"; light: "#695176" };
      surface: { dark: "#1c1233"; light: "#fffbff" };
      text: { dark: "#f8eeff"; light: "#29113d" };
  }

• Readonlyradii: { lg: "4px"; md: "2px"; rounded: "9999px"; sm: "0"; square: "0"; xl: "6px" }

• Readonlyshadows: {
      lg: "0 0 0 1px light-dark(rgb(173 0 124 / 0.4), rgb(255 112 222 / 0.7)), 0 0 48px light-dark(rgb(173 0 124 / 0.2), rgb(255 112 222 / 0.25))";
      md: "0 0 0 1px light-dark(rgb(0 110 128 / 0.4), rgb(89 239 255 / 0.6)), 0 0 28px light-dark(rgb(0 110 128 / 0.14), rgb(89 239 255 / 0.2))";
      sm: "0 0 0 1px light-dark(rgb(173 0 124 / 0.3), rgb(255 112 222 / 0.5)), 0 0 16px light-dark(rgb(173 0 124 / 0.1), rgb(255 112 222 / 0.18))";
  }

• Readonlysizes: {
      lg: {
          fontSize: "1rem";
          height: "3.125rem";
          iconSize: "1.25rem";
          paddingX: "1.5rem";
      };
      md: {
          fontSize: "0.875rem";
          height: "2.625rem";
          iconSize: "1.125rem";
          paddingX: "1.125rem";
      };
      sm: {
          fontSize: "0.8125rem";
          height: "2.125rem";
          iconSize: "1rem";
          paddingX: "0.875rem";
      };
      xl: {
          fontSize: "1.125rem";
          height: "3.625rem";
          iconSize: "1.5rem";
          paddingX: "1.875rem";
      };
      xs: {
          fontSize: "0.75rem";
          height: "1.75rem";
          iconSize: "0.875rem";
          paddingX: "0.625rem";
      };
  }

• Readonlyspacing: { lg: "1.5rem"; md: "1rem"; sm: "0.625rem"; xl: "2.25rem"; xs: "0.25rem" }

• Readonlytiming: {
      hoverCloseDelay: 150;
      hoverOpenDelay: 300;
      toastDuration: 5000;
      tooltipDelay: 400;
      typeaheadTimeout: 1000;
  }

• Readonlytypography: {
      families: {
          mono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
          sans: "\"SF Mono\", \"Cascadia Code\", ui-monospace, Menlo, Consolas, monospace";
      };
      fonts: { body: "mono"; heading: "mono"; mono: "mono" };
      headings: {
          h1: "display";
          h2: "heading";
          h3: "subheading";
          h4: "subheading";
          h5: "label";
          h6: "label";
      };
      styles: {
          body: {
              family: "mono";
              lineHeight: 1.6;
              size: "0.875rem";
              weight: 400;
          };
          caption: { family: "mono"; lineHeight: 1.5; size: "0.75rem"; weight: 400 };
          code: { family: "mono"; lineHeight: 1.5; size: "0.8125rem"; weight: 400 };
          display: {
              family: "mono";
              letterSpacing: "-0.045em";
              lineHeight: 1.15;
              size: "2.25rem";
              weight: 700;
          };
          heading: {
              family: "mono";
              letterSpacing: "-0.025em";
              lineHeight: 1.25;
              size: "1.5rem";
              weight: 700;
          };
          label: {
              family: "mono";
              letterSpacing: "0.04em";
              lineHeight: 1.4;
              size: "0.8125rem";
              weight: 600;
          };
          subheading: {
              family: "mono";
              lineHeight: 1.35;
              size: "1.125rem";
              weight: 600;
          };
      };
  }

• Readonlyvariants: {
      ghost: { background: "none"; border: "none"; text: "color" };
      outline: { background: "none"; border: "color"; text: "color" };
      soft: { background: "tint"; border: "color"; text: "color" };
      solid: { background: "fill"; border: "color"; text: "on" };
  }

• Readonlywidths: { page: "72rem"; reading: "44rem"; sidebar: "15rem" }

• ReadonlyzIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 }