@signozhq/design-tokens 2.1.2 → 2.1.4

package/dist/design-tokens.js

@@ -1,4 +1,4 @@
-const E = {
+const b = {
   BG_ROBIN_50: "#edf1fe",
   BG_ROBIN_100: "#cad5fd",
   BG_ROBIN_150: "#cad5fd",
@@ -271,7 +271,7 @@ const E = {
   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%)"
-}, b = {
+}, A = {
   "robin-50": "#edf1fe",
   "robin-100": "#cad5fd",
   "robin-150": "#cad5fd",
@@ -408,7 +408,7 @@ const E = {
   "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%)"
-}, A = {
+}, T = {
   PADDING_1: "0.25rem",
   PADDING_2: "0.5rem",
   PADDING_3: "0.75rem",
@@ -445,7 +445,19 @@ const E = {
   MARGIN_48: "12rem",
   MARGIN_56: "14rem",
   MARGIN_64: "16rem"
-}, T = {
+}, R = {
+  PERISCOPE_LINEHEIGHTMEDIUM: "24px",
+  PERISCOPE_LINEHEIGHTBASE: "20px",
+  PERISCOPE_FONTFAMILYSANS: "Inter, sans-serif",
+  PERISCOPE_FONTFAMILYSERIF: "Lora, serif",
+  PERISCOPE_FONTFAMILYMONO: "SF Mono, monospace",
+  PERISCOPE_FONTWEIGHTREGULAR: "400",
+  PERISCOPE_FONTWEIGHTMEDIUM: "500",
+  PERISCOPE_FONTWEIGHTBOLD: "600",
+  PERISCOPE_FONTSIZELARGE: "18px",
+  PERISCOPE_FONTSIZEMEDIUM: "16px",
+  PERISCOPE_FONTSIZEBASE: "13px",
+  PERISCOPE_FONTSIZESMALL: "11px",
   FONTFAMILY_INTER: "Inter, sans-serif",
   FONTFAMILY_SFMONO: "SF Mono, monospace",
   FONTSIZE_XS: "0.75rem",
@@ -885,7 +897,7 @@ const E = {
     lineHeight: "18px",
     letterSpacing: "-0.5px"
   }
-}, R = {
+}, S = {
   BACKGROUND: "var(--background)",
   FOREGROUND: "var(--foreground)",
   CARD: "var(--card)",
@@ -1006,7 +1018,7 @@ const E = {
   ACCENT_SIENNA: "var(--accent-sienna)",
   ACCENT_SIENNA_HOVER: "var(--accent-sienna-hover)",
   ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)"
-}, S = {
+}, I = {
   background: "var(--background)",
   foreground: "var(--foreground)",
   card: "var(--card)",
@@ -2273,7 +2285,7 @@ const E = {
       type: "color"
     }
   }
-}, I = {
+}, L = {
   bg: e,
   text: r
 }, a = {
@@ -2499,11 +2511,60 @@ const E = {
     value: "128px",
     type: "spacing"
   }
-}, L = {
+}, m = {
   padding: a,
   margin: o,
   spacing: t
 }, n = {
+  lineHeightMedium: {
+    value: "24px",
+    type: "typography"
+  },
+  lineHeightBase: {
+    value: "20px",
+    type: "typography"
+  },
+  fontFamilySans: {
+    value: "Inter, sans-serif",
+    type: "typography"
+  },
+  fontFamilySerif: {
+    value: "Lora, serif",
+    type: "typography"
+  },
+  fontFamilyMono: {
+    value: "SF Mono, monospace",
+    type: "typography"
+  },
+  fontWeightRegular: {
+    value: "400",
+    type: "typography"
+  },
+  fontWeightMedium: {
+    value: "500",
+    type: "typography"
+  },
+  fontWeightBold: {
+    value: "600",
+    type: "typography"
+  },
+  fontSizeLarge: {
+    value: "18px",
+    type: "typography"
+  },
+  fontSizeMedium: {
+    value: "16px",
+    type: "typography"
+  },
+  fontSizeBase: {
+    value: "13px",
+    type: "typography"
+  },
+  fontSizeSmall: {
+    value: "11px",
+    type: "typography"
+  }
+}, c = {
   inter: {
     value: "Inter, sans-serif",
     type: "typography"
@@ -2512,7 +2573,7 @@ const E = {
     value: "SF Mono, monospace",
     type: "typography"
   }
-}, c = {
+}, l = {
   xs: {
     value: "0.75rem",
     type: "typography"
@@ -2565,7 +2626,7 @@ const E = {
     value: "8rem",
     type: "typography"
   }
-}, l = {
+}, i = {
   thin: {
     value: "100",
     type: "typography"
@@ -2602,7 +2663,7 @@ const E = {
     value: "900",
     type: "typography"
   }
-}, i = {
+}, p = {
   18: {
     value: "18px",
     type: "typography"
@@ -2676,7 +2737,7 @@ const E = {
     value: "-0.5px",
     type: "typography"
   }
-}, p = {
+}, u = {
   large: {
     400: {
       fontSize: {
@@ -2949,7 +3010,7 @@ const E = {
       }
     }
   }
-}, u = {
+}, s = {
   base: {
     400: {
       fontSize: {
@@ -3086,7 +3147,7 @@ const E = {
       }
     }
   }
-}, s = {
+}, d = {
   base: {
     400: {
       fontSize: {
@@ -3223,7 +3284,7 @@ const E = {
       }
     }
   }
-}, d = {
+}, y = {
   medium: {
     400: {
       fontSize: {
@@ -3428,17 +3489,18 @@ const E = {
       }
     }
   }
-}, m = {
-  fontFamily: n,
-  fontSize: c,
-  fontWeight: l,
-  lineHeight: i,
+}, N = {
+  periscope: n,
+  fontFamily: c,
+  fontSize: l,
+  fontWeight: i,
+  lineHeight: p,
   letterSpacing: g,
-  label: p,
-  uppercase: u,
-  code: s,
-  paragraph: d
-}, y = {
+  label: u,
+  uppercase: s,
+  code: d,
+  paragraph: y
+}, v = {
   large: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3531,7 +3593,7 @@ const E = {
       letterSpacing: "0px"
     }
   }
-}, v = {
+}, f = {
   base: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3578,7 +3640,7 @@ const E = {
       letterSpacing: "4px"
     }
   }
-}, f = {
+}, _ = {
   base: {
     400: {
       fontFamily: "SF Mono, monospace",
@@ -3625,7 +3687,7 @@ const E = {
       letterSpacing: "0px"
     }
   }
-}, _ = {
+}, E = {
   medium: {
     400: {
       fontFamily: "Inter, sans-serif",
@@ -3695,12 +3757,12 @@ const E = {
       letterSpacing: "-0.5px"
     }
   }
-}, N = {
-  label: y,
-  uppercase: v,
-  code: f,
-  paragraph: _
 }, x = {
+  label: v,
+  uppercase: f,
+  code: _,
+  paragraph: E
+}, G = {
   default: {
     light: {
       meta: {
@@ -4693,7 +4755,7 @@ const E = {
           group: "surface-levels"
         },
         "l2-background": {
-          value: "var(--bg-neutral-dark-900)",
+          value: "var(--bg-neutral-dark-950)",
           description: "Secondary background for cards and elevated surfaces",
           usage: "Use for cards, panels, sidebars, and first-level nested containers",
           dontUse: "Avoid for deeply nested elements - use l3 instead",
@@ -4815,7 +4877,7 @@ const E = {
           group: "actions"
         },
         "secondary-background": {
-          value: "var(--bg-neutral-dark-900)",
+          value: "var(--bg-neutral-dark-950)",
           description: "Secondary action background color",
           usage: "Use for secondary buttons and less prominent actions",
           category: "background",
@@ -4847,7 +4909,7 @@ const E = {
           group: "actions"
         },
         "success-background": {
-          value: "var(--bg-forest-600)",
+          value: "var(--bg-forest-500)",
           description: "Success action background color",
           usage: "Use for success states, confirmations, and positive actions",
           category: "background",
@@ -4860,19 +4922,19 @@ const E = {
           group: "actions"
         },
         "success-foreground": {
-          value: "var(--text-neutral-dark-50)",
+          value: "var(--text-neutral-dark-1000)",
           description: "Text color for success action elements",
           category: "foreground",
           group: "actions"
         },
         "success-foreground-hover": {
-          value: "var(--text-base-white)",
+          value: "var(--text-base-black)",
           description: "Hover text color for success elements",
           category: "foreground",
           group: "actions"
         },
         "warning-background": {
-          value: "var(--bg-amber-600)",
+          value: "var(--bg-amber-500)",
           description: "Warning action background color",
           usage: "Use for warning states and cautionary actions",
           category: "background",
@@ -4885,13 +4947,13 @@ const E = {
           group: "actions"
         },
         "warning-foreground": {
-          value: "var(--text-neutral-dark-50)",
+          value: "var(--text-neutral-dark-1000)",
           description: "Text color for warning action elements",
           category: "foreground",
           group: "actions"
         },
         "warning-foreground-hover": {
-          value: "var(--text-base-white)",
+          value: "var(--text-base-black)",
           description: "Hover text color for warning elements",
           category: "foreground",
           group: "actions"
@@ -4934,13 +4996,13 @@ const E = {
           group: "surface-levels"
         },
         "l2-background-transparent": {
-          value: "color-mix(in srgb, var(--bg-neutral-dark-900), transparent 100%)",
+          value: "color-mix(in srgb, var(--bg-neutral-dark-950), transparent 100%)",
           description: "",
           category: "background",
           group: "surface-levels"
         },
         "l2-background-60": {
-          value: "color-mix(in srgb, var(--bg-neutral-dark-900), transparent 40%)",
+          value: "color-mix(in srgb, var(--bg-neutral-dark-950), transparent 40%)",
           description: "",
           category: "background",
           group: "surface-levels"
@@ -5219,16 +5281,16 @@ const E = {
   }
 };
 export {
-  E as Color,
-  b as ColorTailwind,
-  A as Spacing,
-  R as Style,
-  S as StyleTailwind,
-  T as Typography,
+  b as Color,
+  A as ColorTailwind,
+  T as Spacing,
+  S as Style,
+  I as StyleTailwind,
+  R as Typography,
   h as TypographyStyles,
-  I as colorTokens,
-  x as semanticTokens,
-  L as spacingTokens,
-  N as typographyStylesTokens,
-  m as typographyTokens
+  L as colorTokens,
+  G as semanticTokens,
+  m as spacingTokens,
+  x as typographyStylesTokens,
+  N as typographyTokens
 };