@hraness/design-kit 0.31.1

package/src/react/charts.stylex.ts

@@ -0,0 +1,563 @@
+import * as stylex from "@stylexjs/stylex";
+
+const forcedColors = "@media (forced-colors: active)";
+const reducedMotion = "@media (prefers-reduced-motion: reduce)";
+const selectableInteraction = ":is(:hover, :focus-visible)";
+const focusVisible = ":focus-visible";
+const selectedRowBackground =
+  "color-mix(in srgb, var(--foreground) 7%, transparent)";
+
+export const chartBarRevealKeyframes = stylex.keyframes({
+  from: { transform: "scaleX(0)" },
+  to: { transform: "scaleX(1)" },
+});
+
+export const chartStyles = stylex.create({
+  bar: {
+    borderImageSource: { default: null, [forcedColors]: "none" },
+    borderImageSlice: { default: null, [forcedColors]: "100%" },
+    borderImageWidth: { default: null, [forcedColors]: "1" },
+    borderImageOutset: { default: null, [forcedColors]: "0" },
+    borderImageRepeat: { default: null, [forcedColors]: "stretch" },
+    animationDelay: "0s",
+    animationDirection: "normal",
+    animationDuration: "var(--motion-duration-slow)",
+    animationFillMode: "both",
+    animationIterationCount: 1,
+    animationName: {
+      default: chartBarRevealKeyframes,
+      [reducedMotion]: "none",
+    },
+    animationPlayState: "running",
+    animationTimingFunction: "var(--motion-easing-emphasized)",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: {
+      default: "transparent",
+      [forcedColors]: "Canvas",
+    },
+    backgroundImage: {
+      default:
+        "linear-gradient(90deg, color-mix(in srgb, var(--hraness-design-chart-color) 55%, transparent), var(--hraness-design-chart-color))",
+      [forcedColors]: "none",
+    },
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-block-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    borderRadius: "inherit",
+    bottom: 0,
+    boxShadow:
+      "0 0 18px color-mix(in srgb, var(--hraness-design-chart-color) 20%, transparent)",
+    forcedColorAdjust: {
+      default: null,
+      [forcedColors]: "auto",
+    },
+    left: 0,
+    position: "absolute",
+    right: "auto",
+    top: 0,
+    transformOrigin: "left center",
+    width: "var(--hraness-design-chart-value)",
+  },
+  detail: {
+    color: "var(--muted)",
+    fontFamily: "var(--font-mono)",
+    fontSize: 10,
+    fontVariantNumeric: "tabular-nums",
+  },
+  heading: {
+    alignItems: "baseline",
+    display: "flex",
+    gap: "var(--space-3)",
+    justifyContent: "space-between",
+    minWidth: 0,
+  },
+  indicator: {
+    borderRadius: "var(--radius-round)",
+    display: "inline-block",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 0,
+    height: 4,
+    width: 12,
+  },
+  label: {
+    fontSize: "var(--text-caption)",
+    fontWeight: "var(--font-weight-medium)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  legend: {
+    alignItems: "center",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "var(--space-1) var(--space-2)",
+    minWidth: 0,
+  },
+  legendRow: {
+    alignItems: "center",
+    borderRadius: "var(--radius-round)",
+    display: "inline-flex",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 1,
+    fontSize: 11,
+    gap: "var(--space-2)",
+    minHeight: "var(--interactive-target-compact)",
+    width: "auto",
+    paddingTop: "var(--space-1)",
+    paddingRight: "var(--space-2)",
+    paddingBottom: "var(--space-1)",
+    paddingLeft: "var(--space-2)",
+  },
+  median: {
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: "1",
+    borderImageOutset: "0",
+    borderImageRepeat: "stretch",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: {
+      default: "var(--hraness-design-chart-color)",
+      [forcedColors]: "Canvas",
+    },
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": {
+      default: "var(--background)",
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-end-style": "solid",
+    "border-block-end-width": {
+      default: 2,
+      [forcedColors]: 1,
+    },
+    "border-block-start-color": {
+      default: "var(--background)",
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-start-style": "solid",
+    "border-block-start-width": {
+      default: 2,
+      [forcedColors]: 1,
+    },
+    "border-inline-end-color": {
+      default: "var(--background)",
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-end-style": "solid",
+    "border-inline-end-width": {
+      default: 2,
+      [forcedColors]: 1,
+    },
+    "border-inline-start-color": {
+      default: "var(--background)",
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-start-style": "solid",
+    "border-inline-start-width": {
+      default: 2,
+      [forcedColors]: 1,
+    },
+    borderRadius: "50%",
+    boxShadow:
+      "0 0 0 1px color-mix(in srgb, var(--foreground) 42%, transparent)",
+    forcedColorAdjust: {
+      default: null,
+      [forcedColors]: "auto",
+    },
+    height: 10,
+    left: "var(--hraness-design-chart-median)",
+    position: "absolute",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 10,
+  },
+  plot: {
+    height: "clamp(250px, 30vw, 320px)",
+    width: "100%",
+    minHeight: 250,
+  },
+  range: {
+    borderImageSource: { default: null, [forcedColors]: "none" },
+    borderImageSlice: { default: null, [forcedColors]: "100%" },
+    borderImageWidth: { default: null, [forcedColors]: "1" },
+    borderImageOutset: { default: null, [forcedColors]: "0" },
+    borderImageRepeat: { default: null, [forcedColors]: "stretch" },
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: {
+      default: "var(--hraness-design-chart-color)",
+      [forcedColors]: "Canvas",
+    },
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-block-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    borderRadius: "var(--radius-round)",
+    forcedColorAdjust: {
+      default: null,
+      [forcedColors]: "auto",
+    },
+    height: 5,
+    left: "var(--hraness-design-chart-range-left)",
+    opacity: 0.64,
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "var(--hraness-design-chart-range-width)",
+  },
+  rangeTrack: {
+    height: 2,
+    marginBlock: 5,
+    overflow: "visible",
+  },
+  root: {
+    color: "var(--foreground)",
+    fontFamily: "var(--font-text)",
+    minWidth: 0,
+  },
+  row: {
+    color: "inherit",
+    display: "grid",
+    fontFamily: "inherit",
+    fontFeatureSettings: "inherit",
+    fontKerning: "inherit",
+    fontLanguageOverride: "inherit",
+    fontOpticalSizing: "inherit",
+    fontSizeAdjust: "inherit",
+    fontVariationSettings: "inherit",
+    fontSize: "inherit",
+    fontStretch: "inherit",
+    fontStyle: "inherit",
+    fontVariant: "inherit",
+    fontWeight: "inherit",
+    gap: "var(--space-1)",
+    lineHeight: "inherit",
+    minWidth: 0,
+    paddingTop: "var(--space-2)",
+    paddingRight: "var(--space-2)",
+    paddingBottom: "var(--space-2)",
+    paddingLeft: "var(--space-2)",
+    textAlign: "start",
+  },
+  rows: {
+    display: "grid",
+    gap: "var(--space-2)",
+  },
+  selectableRow: {
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: "1",
+    borderImageOutset: "0",
+    borderImageRepeat: "stretch",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: {
+      default: "transparent",
+      [selectableInteraction]: selectedRowBackground,
+    },
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": "currentColor",
+    "border-block-end-style": "none",
+    "border-block-end-width": 0,
+    "border-block-start-color": "currentColor",
+    "border-block-start-style": "none",
+    "border-block-start-width": 0,
+    "border-inline-end-color": "currentColor",
+    "border-inline-end-style": "none",
+    "border-inline-end-width": 0,
+    "border-inline-start-color": "currentColor",
+    "border-inline-start-style": "none",
+    "border-inline-start-width": 0,
+    borderRadius: "var(--radius-md)",
+    cursor: "pointer",
+    minHeight: "var(--interactive-target-min)",
+    outlineColor: {
+      default: null,
+      [focusVisible]: "var(--focus)",
+    },
+    outlineOffset: {
+      default: null,
+      [focusVisible]: 1,
+    },
+    outlineStyle: {
+      default: null,
+      [focusVisible]: "solid",
+    },
+    outlineWidth: {
+      default: null,
+      [focusVisible]: 2,
+    },
+    transitionDelay: "0s",
+    transitionDuration: "var(--motion-duration-fast)",
+    transitionProperty: "background-color",
+    transitionTimingFunction: "var(--motion-easing-standard)",
+    width: "100%",
+  },
+  selectedRow: {
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: selectedRowBackground,
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+  },
+  tooltip: {
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: "1",
+    borderImageOutset: "0",
+    borderImageRepeat: "stretch",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "color-mix(in srgb, var(--popover) 94%, transparent)",
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": "var(--line)",
+    "border-block-end-style": "solid",
+    "border-block-end-width": 1,
+    "border-block-start-color": "var(--line)",
+    "border-block-start-style": "solid",
+    "border-block-start-width": 1,
+    "border-inline-end-color": "var(--line)",
+    "border-inline-end-style": "solid",
+    "border-inline-end-width": 1,
+    "border-inline-start-color": "var(--line)",
+    "border-inline-start-style": "solid",
+    "border-inline-start-width": 1,
+    borderRadius: "var(--radius-lg)",
+    boxShadow: "var(--elevation-overlay)",
+    color: "var(--popover-foreground)",
+    fontSize: "var(--text-caption)",
+    minWidth: 152,
+    "padding-block": "var(--space-3)",
+    "padding-inline": "var(--space-3)",
+  },
+  tooltipItem: {
+    alignItems: "center",
+    display: "grid",
+    gap: "var(--space-4)",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+  },
+  tooltipList: {
+    display: "grid",
+    gap: "var(--space-1)",
+    "margin-block": 0,
+    "margin-inline": 0,
+  },
+  tooltipTerm: {
+    alignItems: "center",
+    color: "var(--muted)",
+    display: "inline-flex",
+    gap: "var(--space-2)",
+    minWidth: 0,
+  },
+  tooltipTitle: {
+    display: "block",
+    fontWeight: "var(--font-weight-medium)",
+    marginBottom: "var(--space-2)",
+  },
+  tooltipValue: {
+    fontFamily: "var(--font-mono)",
+    fontVariantNumeric: "tabular-nums",
+    "margin-block": 0,
+    "margin-inline": 0,
+  },
+  track: {
+    borderImageSource: { default: null, [forcedColors]: "none" },
+    borderImageSlice: { default: null, [forcedColors]: "100%" },
+    borderImageWidth: { default: null, [forcedColors]: "1" },
+    borderImageOutset: { default: null, [forcedColors]: "0" },
+    borderImageRepeat: { default: null, [forcedColors]: "stretch" },
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: {
+      default: "color-mix(in srgb, var(--foreground) 8%, transparent)",
+      [forcedColors]: "Canvas",
+    },
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto",
+    "border-block-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-block-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-block-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-block-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-end-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-end-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-end-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    "border-inline-start-color": {
+      default: null,
+      [forcedColors]: "CanvasText",
+    },
+    "border-inline-start-style": {
+      default: null,
+      [forcedColors]: "solid",
+    },
+    "border-inline-start-width": {
+      default: null,
+      [forcedColors]: 1,
+    },
+    borderRadius: "var(--radius-round)",
+    display: "block",
+    forcedColorAdjust: {
+      default: null,
+      [forcedColors]: "auto",
+    },
+    height: 8,
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+  },
+  value: {
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 0,
+    fontFamily: "var(--font-mono)",
+    fontSize: "var(--text-caption)",
+    fontVariantNumeric: "tabular-nums",
+  },
+});