@signozhq/design-tokens 2.1.4 → 2.1.6

package/dist/design-tokens.js

@@ -1,4 +1,4 @@
-const b = {
+const S = {
   BG_ROBIN_50: "#edf1fe",
   BG_ROBIN_100: "#cad5fd",
   BG_ROBIN_150: "#cad5fd",
@@ -271,7 +271,7 @@ const b = {
   TEXT_GRADIENT_OCEAN: "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
   TEXT_GRADIENT_SPLASH: "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
   TEXT_GRADIENT_FLAMINGO: "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
-}, A = {
+}, I = {
   "robin-50": "#edf1fe",
   "robin-100": "#cad5fd",
   "robin-150": "#cad5fd",
@@ -408,7 +408,7 @@ const b = {
   "gradient-ocean": "linear-gradient(99deg, #48F8CF 4.42%, #28CBF3 96.6%)",
   "gradient-splash": "linear-gradient(99deg, #4568DC 4.42%, #324DAA 96.6%)",
   "gradient-flamingo": "linear-gradient(92deg, #CA9CD0 1.36%, #D38972 68.48%, #A1B1E7 98.99%)"
-}, T = {
+}, L = {
   PADDING_1: "0.25rem",
   PADDING_2: "0.5rem",
   PADDING_3: "0.75rem",
@@ -445,7 +445,7 @@ const b = {
   MARGIN_48: "12rem",
   MARGIN_56: "14rem",
   MARGIN_64: "16rem"
-}, R = {
+}, N = {
   PERISCOPE_LINEHEIGHTMEDIUM: "24px",
   PERISCOPE_LINEHEIGHTBASE: "20px",
   PERISCOPE_FONTFAMILYSANS: "Inter, sans-serif",
@@ -665,7 +665,7 @@ const b = {
   PARAGRAPH_SMALL_600_LINEHEIGHT: "18px",
   PARAGRAPH_SMALL_600_LETTERSPACING: "-0.5px",
   PARAGRAPH_SMALL_600_FONTFAMILY: "Inter, sans-serif"
-}, h = {
+}, m = {
   LABEL_LARGE_400: {
     fontFamily: "Inter, sans-serif",
     fontSize: "18px",
@@ -897,7 +897,13 @@ const b = {
     lineHeight: "18px",
     letterSpacing: "-0.5px"
   }
-}, S = {
+}, x = {
+  RADIUS_0: "0px",
+  RADIUS_1: "2px",
+  RADIUS_2: "4px",
+  RADIUS_3: "6px",
+  RADIUSROUND: "999999px"
+}, G = {
   BACKGROUND: "var(--background)",
   FOREGROUND: "var(--foreground)",
   CARD: "var(--card)",
@@ -1017,8 +1023,31 @@ const b = {
   ACCENT_SAKURA_FOREGROUND: "var(--accent-sakura-foreground)",
   ACCENT_SIENNA: "var(--accent-sienna)",
   ACCENT_SIENNA_HOVER: "var(--accent-sienna-hover)",
-  ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)"
-}, I = {
+  ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)",
+  GHOST_BACKGROUND: "var(--ghost-background)",
+  GHOST_BACKGROUND_HOVER: "var(--ghost-background-hover)",
+  GHOST_FOREGROUND: "var(--ghost-foreground)",
+  GHOST_FOREGROUND_HOVER: "var(--ghost-foreground-hover)",
+  GHOST_BORDER: "var(--ghost-border)",
+  ACTION_BACKGROUND: "var(--action-background)",
+  ACTION_BACKGROUND_HOVER: "var(--action-background-hover)",
+  ACTION_BORDER: "var(--action-border)",
+  ACTION_BORDER_HOVER: "var(--action-border-hover)",
+  ACTION_FOREGROUND: "var(--action-foreground)",
+  ACTION_FOREGROUND_HOVER: "var(--action-foreground-hover)",
+  CALLOUT_SIENNA_BACKGROUND: "var(--callout-sienna-background)",
+  CALLOUT_SIENNA_BORDER: "var(--callout-sienna-border)",
+  CALLOUT_SIENNA_TITLE: "var(--callout-sienna-title)",
+  CALLOUT_SIENNA_DESCRIPTION: "var(--callout-sienna-description)",
+  CALLOUT_SIENNA_ICON: "var(--callout-sienna-icon)",
+  CALLOUT_AQUA_BACKGROUND: "var(--callout-aqua-background)",
+  CALLOUT_AQUA_BORDER: "var(--callout-aqua-border)",
+  CALLOUT_AQUA_TITLE: "var(--callout-aqua-title)",
+  CALLOUT_AQUA_DESCRIPTION: "var(--callout-aqua-description)",
+  CALLOUT_AQUA_ICON: "var(--callout-aqua-icon)",
+  CONTROL_ICON_FOREGROUND: "var(--control-icon-foreground)",
+  CONTROL_ICON_FOREGROUND_CONTRAST: "var(--control-icon-foreground-contrast)"
+}, k = {
   background: "var(--background)",
   foreground: "var(--foreground)",
   card: "var(--card)",
@@ -1138,7 +1167,30 @@ const b = {
   "accent-sakura-foreground": "var(--accent-sakura-foreground)",
   "accent-sienna": "var(--accent-sienna)",
   "accent-sienna-hover": "var(--accent-sienna-hover)",
-  "accent-sienna-foreground": "var(--accent-sienna-foreground)"
+  "accent-sienna-foreground": "var(--accent-sienna-foreground)",
+  "ghost-background": "var(--ghost-background)",
+  "ghost-background-hover": "var(--ghost-background-hover)",
+  "ghost-foreground": "var(--ghost-foreground)",
+  "ghost-foreground-hover": "var(--ghost-foreground-hover)",
+  "ghost-border": "var(--ghost-border)",
+  "action-background": "var(--action-background)",
+  "action-background-hover": "var(--action-background-hover)",
+  "action-border": "var(--action-border)",
+  "action-border-hover": "var(--action-border-hover)",
+  "action-foreground": "var(--action-foreground)",
+  "action-foreground-hover": "var(--action-foreground-hover)",
+  "callout-sienna-background": "var(--callout-sienna-background)",
+  "callout-sienna-border": "var(--callout-sienna-border)",
+  "callout-sienna-title": "var(--callout-sienna-title)",
+  "callout-sienna-description": "var(--callout-sienna-description)",
+  "callout-sienna-icon": "var(--callout-sienna-icon)",
+  "callout-aqua-background": "var(--callout-aqua-background)",
+  "callout-aqua-border": "var(--callout-aqua-border)",
+  "callout-aqua-title": "var(--callout-aqua-title)",
+  "callout-aqua-description": "var(--callout-aqua-description)",
+  "callout-aqua-icon": "var(--callout-aqua-icon)",
+  "control-icon-foreground": "var(--control-icon-foreground)",
+  "control-icon-foreground-contrast": "var(--control-icon-foreground-contrast)"
 }, e = {
   Robin: {
     50: {
@@ -2285,7 +2337,7 @@ const b = {
       type: "color"
     }
   }
-}, L = {
+}, O = {
   bg: e,
   text: r
 }, a = {
@@ -2511,7 +2563,7 @@ const b = {
     value: "128px",
     type: "spacing"
   }
-}, m = {
+}, B = {
   padding: a,
   margin: o,
   spacing: t
@@ -2626,7 +2678,7 @@ const b = {
     value: "8rem",
     type: "typography"
   }
-}, i = {
+}, u = {
   thin: {
     value: "100",
     type: "typography"
@@ -2663,7 +2715,7 @@ const b = {
     value: "900",
     type: "typography"
   }
-}, p = {
+}, i = {
   18: {
     value: "18px",
     type: "typography"
@@ -2737,7 +2789,7 @@ const b = {
     value: "-0.5px",
     type: "typography"
   }
-}, u = {
+}, s = {
   large: {
     400: {
       fontSize: {
@@ -3010,7 +3062,7 @@ const b = {
       }
     }
   }
-}, s = {
+}, p = {
   base: {
     400: {
       fontSize: {
@@ -3284,7 +3336,7 @@ const b = {
       }
     }
   }
-}, y = {
+}, v = {
   medium: {
     400: {
       fontSize: {
@@ -3489,18 +3541,18 @@ const b = {
       }
     }
   }
-}, N = {
+}, F = {
   periscope: n,
   fontFamily: c,
   fontSize: l,
-  fontWeight: i,
-  lineHeight: p,
+  fontWeight: u,
+  lineHeight: i,
   letterSpacing: g,
-  label: u,
-  uppercase: s,
+  label: s,
+  uppercase: p,
   code: d,
-  paragraph: y
-}, v = {
+  paragraph: v
+}, y = {
   large: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3687,7 +3739,7 @@ const b = {
       letterSpacing: "0px"
     }
   }
-}, E = {
+}, b = {
   medium: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3757,12 +3809,12 @@ const b = {
       letterSpacing: "-0.5px"
     }
   }
-}, x = {
-  label: v,
+}, H = {
+  label: y,
   uppercase: f,
   code: _,
-  paragraph: E
-}, G = {
+  paragraph: b
+}, C = {
   default: {
     light: {
       meta: {
@@ -4521,6 +4573,144 @@ const b = {
           description: "Text color on sienna accent backgrounds",
           category: "foreground",
           group: "accents"
+        },
+        "ghost-background": {
+          value: "transparent",
+          description: "Background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-background-hover": {
+          value: "var(--bg-vanilla-300)",
+          description: "Hover background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-foreground": {
+          value: "var(--bg-slate-50)",
+          description: "Text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-foreground-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-border": {
+          value: "var(--bg-vanilla-300)",
+          description: "Border color for ghost buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-background": {
+          value: "transparent",
+          description: "Background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-background-hover": {
+          value: "var(--bg-vanilla-300)",
+          description: "Hover background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-border": {
+          value: "var(--bg-vanilla-300)",
+          description: "Border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-border-hover": {
+          value: "var(--bg-vanilla-400)",
+          description: "Hover border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-foreground": {
+          value: "var(--bg-slate-50)",
+          description: "Text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "action-foreground-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "callout-sienna-background": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 10%, transparent)",
+          description: "Background for sienna callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-sienna-border": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 20%, transparent)",
+          description: "Border for sienna callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-sienna-title": {
+          value: "var(--bg-sienna-600)",
+          description: "Title text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-description": {
+          value: "var(--bg-sienna-600)",
+          description: "Description text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-icon": {
+          value: "var(--bg-sienna-600)",
+          description: "Icon color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-background": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 10%, transparent)",
+          description: "Background for aqua callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-aqua-border": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 20%, transparent)",
+          description: "Border for aqua callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-aqua-title": {
+          value: "var(--bg-aqua-700)",
+          description: "Title text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-description": {
+          value: "var(--bg-aqua-700)",
+          description: "Description text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-icon": {
+          value: "var(--bg-aqua-600)",
+          description: "Icon color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "control-icon-foreground": {
+          value: "var(--text-base-white)",
+          description: "Icon/thumb color on colored control backgrounds",
+          category: "foreground",
+          group: "controls"
+        },
+        "control-icon-foreground-contrast": {
+          value: "var(--text-base-black)",
+          description: "High-contrast icon color for controls",
+          category: "foreground",
+          group: "controls"
         }
       }
     },
@@ -5275,22 +5465,183 @@ const b = {
           description: "Text color on sienna accent backgrounds",
           category: "foreground",
           group: "accents"
+        },
+        "ghost-background": {
+          value: "transparent",
+          description: "Background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-background-hover": {
+          value: "var(--bg-slate-400)",
+          description: "Hover background for ghost buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "ghost-foreground": {
+          value: "var(--bg-vanilla-400)",
+          description: "Text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-foreground-hover": {
+          value: "var(--bg-vanilla-100)",
+          description: "Hover text color for ghost buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "ghost-border": {
+          value: "var(--bg-slate-400)",
+          description: "Border color for ghost buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-background": {
+          value: "transparent",
+          description: "Background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-background-hover": {
+          value: "var(--bg-slate-400)",
+          description: "Hover background for action buttons",
+          category: "background",
+          group: "buttons"
+        },
+        "action-border": {
+          value: "var(--bg-slate-400)",
+          description: "Border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-border-hover": {
+          value: "var(--bg-slate-300)",
+          description: "Hover border color for action buttons",
+          category: "border",
+          group: "buttons"
+        },
+        "action-foreground": {
+          value: "var(--bg-vanilla-400)",
+          description: "Text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "action-foreground-hover": {
+          value: "var(--bg-vanilla-100)",
+          description: "Hover text color for action buttons",
+          category: "foreground",
+          group: "buttons"
+        },
+        "callout-sienna-background": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 10%, transparent)",
+          description: "Background for sienna callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-sienna-border": {
+          value: "color-mix(in srgb, var(--bg-sienna-500) 20%, transparent)",
+          description: "Border for sienna callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-sienna-title": {
+          value: "var(--bg-sienna-100)",
+          description: "Title text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-description": {
+          value: "var(--bg-sienna-300)",
+          description: "Description text color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-sienna-icon": {
+          value: "var(--bg-sienna-300)",
+          description: "Icon color for sienna callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-background": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 10%, transparent)",
+          description: "Background for aqua callout boxes",
+          category: "background",
+          group: "callouts"
+        },
+        "callout-aqua-border": {
+          value: "color-mix(in srgb, var(--bg-aqua-500) 20%, transparent)",
+          description: "Border for aqua callout boxes",
+          category: "border",
+          group: "callouts"
+        },
+        "callout-aqua-title": {
+          value: "var(--bg-aqua-100)",
+          description: "Title text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-description": {
+          value: "var(--bg-aqua-300)",
+          description: "Description text color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "callout-aqua-icon": {
+          value: "var(--bg-aqua-300)",
+          description: "Icon color for aqua callouts",
+          category: "foreground",
+          group: "callouts"
+        },
+        "control-icon-foreground": {
+          value: "var(--text-base-white)",
+          description: "Icon/thumb color on colored control backgrounds",
+          category: "foreground",
+          group: "controls"
+        },
+        "control-icon-foreground-contrast": {
+          value: "var(--text-base-black)",
+          description: "High-contrast icon color for controls",
+          category: "foreground",
+          group: "controls"
         }
       }
     }
   }
+}, E = {
+  value: "0px",
+  type: "radius"
+}, A = {
+  value: "2px",
+  type: "radius"
+}, T = {
+  value: "4px",
+  type: "radius"
+}, h = {
+  value: "6px",
+  type: "radius"
+}, R = {
+  value: "999999px",
+  type: "radius"
+}, U = {
+  radius_0: E,
+  radius_1: A,
+  radius_2: T,
+  radius_3: h,
+  radiusRound: R
 };
 export {
-  b as Color,
-  A as ColorTailwind,
-  T as Spacing,
-  S as Style,
-  I as StyleTailwind,
-  R as Typography,
-  h as TypographyStyles,
-  L as colorTokens,
-  G as semanticTokens,
-  m as spacingTokens,
-  x as typographyStylesTokens,
-  N as typographyTokens
+  S as Color,
+  I as ColorTailwind,
+  x as Radius,
+  L as Spacing,
+  G as Style,
+  k as StyleTailwind,
+  N as Typography,
+  m as TypographyStyles,
+  O as colorTokens,
+  U as radiusTokens,
+  C as semanticTokens,
+  B as spacingTokens,
+  H as typographyStylesTokens,
+  F as typographyTokens
 };