pyth-network_pyth-crosschain/packages/component-library/src/theme.scss

@use "sass:map";
@use "sass:meta";
@use "sass:list";

@function map-get-strict($map, $key...) {
  @if map.has-key($map, $key...) {
    @return map.get($map, $key...);
  } @else {
    @error "ERROR: Specified index does not exist in the mapping";
  }
}

@function spacing($increment) {
  @return $increment * 0.25rem;
}

$font-weight: (
  "thin": 100,
  "extralight": 200,
  "light": 300,
  "normal": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
  "extrabold": 800,
  "black": 900,
);

@function font-weight($weight) {
  @return map-get-strict($font-weight, $weight);
}

$font-family: (
  "monospace": (
    "ui-monospace",
    "sfmono-regular",
    "consolas",
    "Liberation Mono",
    "menlo",
    "monospace",
  ),
);

@function font-family($family) {
  @return map-get-strict($font-family, $family);
}

$font-size: (
  "xxs": 0.6875rem,
  "xs": 0.75rem,
  "sm": 0.875rem,
  "base": 1rem,
  "lg": 1.125rem,
  "xl": 1.25rem,
  "2xl": 1.5rem,
  "3xl": 1.875rem,
  "4xl": 2.25rem,
  "5xl": 3rem,
  "6xl": 3.75rem,
  "7xl": 4.5rem,
  "8xl": 6rem,
  "9xl": 8rem,
);

@function font-size($size: "base") {
  @return map-get-strict($font-size, $size);
}

$letter-spacing: (
  "tighter": -0.05em,
  "tight": -0.025em,
  "normal": 0em,
  "wide": 0.025em,
  "wider": 0.05em,
  "widest": 0.1em,
);

@function letter-spacing($spacing: "normal") {
  @return map-get-strict($letter-spacing, $spacing);
}

$border-radius: (
  "none": 0px,
  "sm": 0.125rem,
  "base": 0.25rem,
  "md": 0.375rem,
  "lg": 0.5rem,
  "xl": 0.75rem,
  "2xl": 1rem,
  "3xl": 1.5rem,
  "full": 9999px,
);

@function border-radius($radius: "base") {
  @return map-get-strict($border-radius, $radius);
}

$color-pallette: (
  "black": #000,
  "white": #fff,
  "slate": (
    50: #f8fafc,
    100: #f1f5f9,
    200: #e2e8f0,
    300: #cbd5e1,
    400: #94a3b8,
    500: #64748b,
    600: #475569,
    700: #334155,
    800: #1e293b,
    900: #0f172a,
    950: #020617,
  ),
  "gray": (
    50: #f9fafb,
    100: #f3f4f6,
    200: #e5e7eb,
    300: #d1d5db,
    400: #9ca3af,
    500: #6b7280,
    600: #4b5563,
    700: #374151,
    800: #1f2937,
    900: #111827,
    950: #030712,
  ),
  "zinc": (
    50: #fafafa,
    100: #f4f4f5,
    200: #e4e4e7,
    300: #d4d4d8,
    400: #a1a1aa,
    500: #71717a,
    600: #52525b,
    700: #3f3f46,
    800: #27272a,
    900: #18181b,
    950: #09090b,
  ),
  "neutral": (
    50: #fafafa,
    100: #f5f5f5,
    200: #e5e5e5,
    300: #d4d4d4,
    400: #a3a3a3,
    500: #737373,
    600: #525252,
    700: #404040,
    800: #262626,
    900: #171717,
    950: #0a0a0a,
  ),
  "stone": (
    50: #fafaf9,
    100: #f5f5f4,
    200: #e7e5e4,
    300: #d6d3d1,
    400: #a8a29e,
    500: #78716c,
    600: #57534e,
    700: #44403c,
    800: #292524,
    900: #1c1917,
    950: #0c0a09,
  ),
  "red": (
    50: #fef2f2,
    100: #fee2e2,
    200: #fecaca,
    300: #fca5a5,
    400: #f87171,
    500: #ef4444,
    600: #dc2626,
    700: #b91c1c,
    800: #991b1b,
    900: #7f1d1d,
    950: #450a0a,
  ),
  "orange": (
    50: #fff7ed,
    100: #ffedd5,
    200: #fed7aa,
    300: #fdba74,
    400: #fb923c,
    500: #f97316,
    600: #ea580c,
    700: #c2410c,
    800: #9a3412,
    900: #7c2d12,
    950: #431407,
  ),
  "amber": (
    50: #fffbeb,
    100: #fef3c7,
    200: #fde68a,
    300: #fcd34d,
    400: #fbbf24,
    500: #f59e0b,
    600: #d97706,
    700: #b45309,
    800: #92400e,
    900: #78350f,
    950: #451a03,
  ),
  "yellow": (
    50: #fefce8,
    100: #fef9c3,
    200: #fef08a,
    300: #fde047,
    400: #facc15,
    500: #eab308,
    600: #ca8a04,
    700: #a16207,
    800: #854d0e,
    900: #713f12,
    950: #422006,
  ),
  "lime": (
    50: #f7fee7,
    100: #ecfccb,
    200: #d9f99d,
    300: #bef264,
    400: #a3e635,
    500: #84cc16,
    600: #65a30d,
    700: #4d7c0f,
    800: #3f6212,
    900: #365314,
    950: #1a2e05,
  ),
  "green": (
    50: #f0fdf4,
    100: #dcfce7,
    200: #bbf7d0,
    300: #86efac,
    400: #4ade80,
    500: #22c55e,
    600: #16a34a,
    700: #15803d,
    800: #166534,
    900: #14532d,
    950: #052e16,
  ),
  "emerald": (
    50: #ecfdf5,
    100: #d1fae5,
    200: #a7f3d0,
    300: #6ee7b7,
    400: #34d399,
    500: #10b981,
    600: #059669,
    700: #047857,
    800: #065f46,
    900: #064e3b,
    950: #022c22,
  ),
  "teal": (
    50: #f0fdfa,
    100: #ccfbf1,
    200: #99f6e4,
    300: #5eead4,
    400: #2dd4bf,
    500: #14b8a6,
    600: #0d9488,
    700: #0f766e,
    800: #115e59,
    900: #134e4a,
    950: #042f2e,
  ),
  "cyan": (
    50: #ecfeff,
    100: #cffafe,
    200: #a5f3fc,
    300: #67e8f9,
    400: #22d3ee,
    500: #06b6d4,
    600: #0891b2,
    700: #0e7490,
    800: #155e75,
    900: #164e63,
    950: #083344,
  ),
  "sky": (
    50: #f0f9ff,
    100: #e0f2fe,
    200: #bae6fd,
    300: #7dd3fc,
    400: #38bdf8,
    500: #0ea5e9,
    600: #0284c7,
    700: #0369a1,
    800: #075985,
    900: #0c4a6e,
    950: #082f49,
  ),
  "blue": (
    50: #eff6ff,
    100: #dbeafe,
    200: #bfdbfe,
    300: #93c5fd,
    400: #60a5fa,
    500: #3b82f6,
    600: #2563eb,
    700: #1d4ed8,
    800: #1e40af,
    900: #1e3a8a,
    950: #172554,
  ),
  "indigo": (
    50: #eef2ff,
    100: #e0e7ff,
    200: #c7d2fe,
    300: #a5b4fc,
    400: #818cf8,
    500: #6366f1,
    600: #4f46e5,
    700: #4338ca,
    800: #3730a3,
    900: #312e81,
    950: #1e1b4b,
  ),
  "violet": (
    50: #f5f3ff,
    100: #ede9fe,
    200: #ddd6fe,
    300: #c4b5fd,
    400: #a78bfa,
    500: #8b5cf6,
    600: #7c3aed,
    700: #6d28d9,
    800: #5b21b6,
    900: #4c1d95,
    950: #2e1065,
  ),
  "purple": (
    50: #faf5ff,
    100: #f3e8ff,
    200: #e9d5ff,
    300: #d8b4fe,
    400: #c084fc,
    500: #a855f7,
    600: #9333ea,
    700: #7e22ce,
    800: #6b21a8,
    900: #581c87,
    950: #3b0764,
  ),
  "fuchsia": (
    50: #fdf4ff,
    100: #fae8ff,
    200: #f5d0fe,
    300: #f0abfc,
    400: #e879f9,
    500: #d946ef,
    600: #c026d3,
    700: #a21caf,
    800: #86198f,
    900: #701a75,
    950: #4a044e,
  ),
  "pink": (
    50: #fdf2f8,
    100: #fce7f3,
    200: #fbcfe8,
    300: #f9a8d4,
    400: #f472b6,
    500: #ec4899,
    600: #db2777,
    700: #be185d,
    800: #9d174d,
    900: #831843,
    950: #500724,
  ),
  "rose": (
    50: #fff1f2,
    100: #ffe4e6,
    200: #fecdd3,
    300: #fda4af,
    400: #fb7185,
    500: #f43f5e,
    600: #e11d48,
    700: #be123c,
    800: #9f1239,
    900: #881337,
    950: #4c0519,
  ),
  "beige": (
    50: #f7f4f4,
    100: #f3eded,
    200: #e9dfdf,
    300: #d9c8c8,
    400: #c1a8a8,
    500: #a98a8a,
    600: #927070,
    700: #795c5c,
    800: #664e4e,
    900: #574545,
    950: #2d2222,
  ),
  "steel": (
    50: #f8f9fc,
    100: #f1f2f9,
    200: #e2e3f0,
    300: #cbcee1,
    400: #9497b8,
    500: #64678b,
    600: #474a69,
    700: #333655,
    800: #25253e,
    900: #27253d,
    950: #100e23,
  ),
);

@function pallette-color($color...) {
  @return map-get-strict($color-pallette, $color...);
}

$color: (
  "transparent": transparent,
  "background": (
    "primary": light-dark(pallette-color("white"), pallette-color("steel", 950)),
    "nav-blur": light-dark(
        rgb(from pallette-color("white") r g b / 70%),
        rgb(from pallette-color("steel", 950) r g b / 70%)
      ),
    "modal": light-dark(pallette-color("white"), pallette-color("steel", 950)),
    "secondary": light-dark(
        pallette-color("beige", 100),
        pallette-color("steel", 900)
      ),
    "card-highlight": light-dark(
        pallette-color("violet", 100),
        pallette-color("violet", 950)
      ),
    "card-secondary": light-dark(
        pallette-color("white"),
        pallette-color("steel", 950)
      ),
    "tooltip": light-dark(
        pallette-color("steel", 700),
        pallette-color("steel", 200)
      ),
  ),
  "foreground": light-dark(
      pallette-color("steel", 900),
      pallette-color("steel", 50)
    ),
  "heading": light-dark(
      pallette-color("steel", 800),
      pallette-color("steel", 200)
    ),
  "paragraph": light-dark(
      pallette-color("steel", 700),
      pallette-color("steel", 300)
    ),
  "tooltip": light-dark(
      pallette-color("steel", 200),
      pallette-color("steel", 800)
    ),
  "link": (
    "primary": light-dark(
        pallette-color("violet", 700),
        pallette-color("purple", 300)
      ),
    "normal": light-dark(
        pallette-color("steel", 800),
        pallette-color("steel", 50)
      ),
  ),
  "highlight": light-dark(
      pallette-color("violet", 600),
      pallette-color("violet", 500)
    ),
  "muted": light-dark(
      pallette-color("stone", 700),
      pallette-color("steel", 300)
    ),
  "border": light-dark(
      pallette-color("stone", 300),
      pallette-color("steel", 600)
    ),
  "selection": (
    "background": light-dark(
        pallette-color("violet", 600),
        pallette-color("violet", 400)
      ),
    "foreground": light-dark(
        pallette-color("steel", 50),
        pallette-color("steel", 950)
      ),
  ),
  "states": (
    "success": (
      "base": light-dark(
          pallette-color("emerald", 600),
          pallette-color("emerald", 500)
        ),
      "background": light-dark(
          pallette-color("emerald", 100),
          pallette-color("emerald", 950)
        ),
      "normal": light-dark(
          pallette-color("emerald", 600),
          pallette-color("emerald", 500)
        ),
      "hover": pallette-color("emerald", 700),
      "active": pallette-color("emerald", 800),
      "border": light-dark(
          pallette-color("emerald", 400),
          pallette-color("emerald", 800)
        ),
    ),
    "error": (
      "base": light-dark(pallette-color("red", 600), pallette-color("red", 400)),
      "color": light-dark(
          pallette-color("red", 500),
          pallette-color("red", 400)
        ),
      "background": light-dark(
          pallette-color("red", 100),
          pallette-color("red", 950)
        ),
      "normal": pallette-color("red", 500),
      "hover": pallette-color("red", 600),
      "active": pallette-color("red", 700),
      "border": light-dark(
          pallette-color("red", 400),
          pallette-color("red", 900)
        ),
    ),
    "neutral": (
      "normal": light-dark(
          pallette-color("steel", 900),
          pallette-color("steel", 50)
        ),
      "border": light-dark(
          pallette-color("stone", 300),
          pallette-color("steel", 600)
        ),
      "background": light-dark(
          pallette-color("white"),
          pallette-color("steel", 900)
        ),
    ),
    "info": (
      "background": light-dark(
          pallette-color("indigo", 100),
          pallette-color("indigo", 950)
        ),
      "background-opaque": light-dark(
          rgb(from pallette-color("indigo", 200) r g b / 80%),
          rgb(from pallette-color("indigo", 950) r g b / 80%)
        ),
      "icon": light-dark(
          pallette-color("indigo", 600),
          pallette-color("indigo", 500)
        ),
      "normal": light-dark(
          pallette-color("indigo", 600),
          pallette-color("indigo", 400)
        ),
      "border": light-dark(
          pallette-color("indigo", 400),
          pallette-color("indigo", 800)
        ),
    ),
    "warning": (
      "normal": light-dark(
          pallette-color("orange", 600),
          pallette-color("orange", 400)
        ),
      "background": light-dark(
          pallette-color("orange", 100),
          pallette-color("orange", 950)
        ),
      "border": light-dark(
          pallette-color("orange", 400),
          pallette-color("orange", 700)
        ),
    ),
    "yellow": (
      "normal": pallette-color("yellow", 500),
      "background": light-dark(
          pallette-color("yellow", 100),
          pallette-color("yellow", 900)
        ),
    ),
    "lime": (
      "normal": pallette-color("lime", 500),
      "background": light-dark(
          pallette-color("lime", 100),
          pallette-color("lime", 900)
        ),
    ),
    "data": (
      "normal": light-dark(
          pallette-color("violet", 600),
          pallette-color("violet", 400)
        ),
      "background": light-dark(
          pallette-color("violet", 100),
          pallette-color("violet", 950)
        ),
      "border": light-dark(
          pallette-color("violet", 200),
          pallette-color("violet", 800)
        ),
    ),
  ),
  "focus": light-dark(
      pallette-color("violet", 700),
      pallette-color("violet", 500)
    ),
  "focus-dim": light-dark(
      rgb(from pallette-color("violet", 700) r g b / 30%),
      rgb(from pallette-color("violet", 500) r g b / 30%)
    ),
  "forms": (
    "input": (
      "hover": (
        "border": light-dark(
            pallette-color("stone", 400),
            pallette-color("steel", 500)
          ),
      ),
    ),
  ),
  "chart": (
    "series": (
      "primary": light-dark(
          pallette-color("violet", 500),
          pallette-color("violet", 400)
        ),
      "neutral": light-dark(
          pallette-color("stone", 500),
          pallette-color("steel", 300)
        ),
    ),
  ),
  "button": (
    "primary": (
      "foreground": pallette-color("white"),
      "background": (
        "normal": light-dark(
            pallette-color("violet", 700),
            pallette-color("violet", 600)
          ),
        "hover": light-dark(
            pallette-color("violet", 800),
            pallette-color("violet", 700)
          ),
        "active": light-dark(
            pallette-color("violet", 900),
            pallette-color("violet", 800)
          ),
      ),
    ),
    "secondary": (
      "foreground": pallette-color("steel", 900),
      "background": (
        "normal": pallette-color("purple", 200),
        "hover": pallette-color("purple", 300),
        "active": pallette-color("purple", 400),
      ),
    ),
    "solid": (
      "foreground": light-dark(
          pallette-color("steel", 50),
          pallette-color("steel", 900)
        ),
      "background": (
        "normal": light-dark(
            pallette-color("steel", 900),
            pallette-color("steel", 50)
          ),
        "hover": light-dark(
            pallette-color("steel", 600),
            pallette-color("steel", 200)
          ),
        "active": light-dark(
            pallette-color("steel", 900),
            pallette-color("steel", 50)
          ),
      ),
    ),
    "outline": (
      "border": light-dark(
          pallette-color("stone", 300),
          pallette-color("steel", 600)
        ),
      "foreground": light-dark(
          pallette-color("stone", 900),
          pallette-color("steel", 50)
        ),
      "background": (
        "hover": light-dark(
            rgb(from pallette-color("beige", 950) r g b / 5%),
            rgb(from pallette-color("steel", 50) r g b / 5%)
          ),
        "active": light-dark(
            rgb(from pallette-color("beige", 950) r g b / 10%),
            rgb(from pallette-color("steel", 50) r g b / 10%)
          ),
      ),
    ),
    "disabled": (
      "foreground": light-dark(
          pallette-color("stone", 400),
          pallette-color("steel", 400)
        ),
      "background": light-dark(
          pallette-color("stone", 200),
          pallette-color("steel", 600)
        ),
    ),
  ),
);

@function color($color-path...) {
  @return map-get-strict($color, $color-path...);
}

$button-sizes: (
  "xs": (
    "padding": spacing(1),
    "height": spacing(6),
    "border-radius": border-radius("md"),
    "font-size": font-size("xxs"),
    "icon-size": spacing(4),
    "gap": spacing(1),
  ),
  "sm": (
    "padding": spacing(2),
    "height": spacing(9),
    "border-radius": border-radius("lg"),
    "font-size": font-size("sm"),
    "icon-size": spacing(5),
    "gap": spacing(2),
  ),
  "md": (
    "padding": spacing(3),
    "height": spacing(12),
    "border-radius": border-radius("xl"),
    "font-size": font-size("base"),
    "icon-size": spacing(6),
    "gap": spacing(2),
  ),
  "lg": (
    "padding": spacing(4),
    "height": spacing(14),
    "border-radius": border-radius("2xl"),
    "font-size": font-size("xl"),
    "icon-size": spacing(6),
    "gap": spacing(3),
  ),
);

@function button-padding($size, $include-gap) {
  $button: map-get-strict($button-sizes, $size);
  $padding: map-get-strict($button, "padding");

  @if $include-gap {
    @return $padding + map-get-strict($button, "gap");
  } @else {
    @return $padding;
  }
}

@function button-icon-size($size) {
  @return map-get-strict($button-sizes, $size, "icon-size");
}

@function button-border-radius($size) {
  @return map-get-strict($button-sizes, $size, "border-radius");
}

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@mixin pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }
}

@mixin spin {
  animation: spin 1s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

$max-width: spacing(372);
$max-width-padding: var(--max-width-padding);

@mixin max-width {
  & {
    --max-width-padding: #{spacing(4)};

    margin-left: auto;
    margin-right: auto;
    padding-left: $max-width-padding;
    padding-right: $max-width-padding;
    width: 100%;
    max-width: $max-width;
  }

  @include breakpoint("sm") {
    --max-width-padding: #{spacing(6)};
  }
}

@mixin row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

$elevations: (
  primary: (
    2: (
      0px 66px 18px 0px rgb(112 66 206 / 0%),
      0px 42px 17px 0px rgb(112 66 206 / 3%),
      0px 24px 14px 0px rgb(112 66 206 / 8%),
      0px 11px 11px 0px rgb(112 66 206 / 14%),
      0px 3px 6px 0px rgb(112 66 206 / 17%),
    ),
  ),
  default: (
    1: (
      0px 4px 6px -4px rgb(from black r g b / 10%),
      0px 10px 15px -3px rgb(from black r g b / 10%),
    ),
    2: (
      0px 29px 12px 0px
        light-dark(rgb(from #564848 r g b / 2%), rgb(from black r g b / 8%)),
      0px 16px 10px 0px
        light-dark(rgb(from #564848 r g b / 6%), rgb(from black r g b / 12%)),
      0px 7px 7px 0px
        light-dark(rgb(from #564848 r g b / 12%), rgb(from black r g b / 20%)),
      0px 2px 4px 0px
        light-dark(rgb(from #564848 r g b / 14%), rgb(from black r g b / 30%)),
    ),
  ),
);

@mixin elevation($elevation...) {
  box-shadow: map-get-strict($elevations, $elevation...);
}

@mixin h3 {
  @include text("xl", "semibold");

  line-height: 125%;
  letter-spacing: letter-spacing("tighter");

  @include breakpoint("sm") {
    font-size: font-size("2xl");
  }
}

@mixin h4 {
  font-size: font-size("xl");
  font-style: normal;
  font-weight: font-weight("medium");
  line-height: 125%;
  letter-spacing: letter-spacing("tight");
  margin: 0;
}

@mixin text($size: "base", $weight: "normal") {
  font-size: font-size($size);
  font-weight: font-weight($weight);
  margin: 0;
  font-style: normal;
  line-height: 1;
}

$breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "2xl": 1536px,
);

@mixin breakpoint($point) {
  @media (min-width: map-get-strict($breakpoints, $point)) {
    @content;
  }
}

$header-height: var(--header-height);