@baseplate-dev/ui-components/dist/base-styles.css

Shared UI component library

/**
 * Base styles for the UI components.
 *
 * This file is used to import the base styles for the UI components.
 * It is used to import the fonts and other base styles that affect the
 * page.
 *
 * This is meant to be used for consumers, e.g. websites built with
 * ui-components.
 */

/**
 * Make sure to source classes from the ui-components package
 */

@source '.';

/**
 * Colors
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.041 264.695);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.041 257.417);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.041 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.041 264.695);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.04 265.755);
  --success: oklch(0.979 0.021 166.113);
  --success-foreground: oklch(0.262 0.051 172.552);
  --warning: oklch(0.987 0.022 95.277);
  --warning-foreground: oklch(0.279 0.077 45.635);
  --error: oklch(0.971 0.013 17.38);
  --error-foreground: oklch(0.258 0.092 26.042);
  --primary: oklch(0.424 0.181 265.638);
  --primary-hover: oklch(0.379 0.138 265.522);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-hover: oklch(0.869 0.02 252.894);
  --secondary-foreground: oklch(0.208 0.04 265.755);
  --destructive: oklch(0.637 0.237 25.331);
  --destructive-hover: oklch(0.505 0.213 27.518);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --link: oklch(0.488 0.217 264.376);
  --link-visited: oklch(0.424 0.181 265.638);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.714 0.143 254.624);
}

.dark,
html[data-theme='dark'] {
  --background: oklch(0.129 0.041 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.037 260.031);
  --muted-foreground: oklch(0.711 0.035 256.788);
  --card: oklch(0.129 0.041 264.695);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.129 0.041 264.695);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --accent: oklch(0.279 0.037 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --success: oklch(0.262 0.051 172.552);
  --success-foreground: oklch(0.979 0.021 166.113);
  --warning: oklch(0.279 0.077 45.635);
  --warning-foreground: oklch(0.987 0.022 95.277);
  --error: oklch(0.258 0.092 26.042);
  --error-foreground: oklch(0.971 0.013 17.38);
  --primary: oklch(0.282 0.087 267.935);
  --primary-hover: oklch(0.424 0.181 265.638);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.279 0.037 260.031);
  --secondary-hover: oklch(0.446 0.037 257.281);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-hover: oklch(0.505 0.213 27.518);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --link: oklch(0.546 0.215 262.881);
  --link-visited: oklch(0.488 0.217 264.376);
  --border: oklch(0.279 0.037 260.031);
  --input: oklch(0.279 0.037 260.031);
  --ring: oklch(0.623 0.188 259.815);
}

/**
 * Fonts
 */

@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

@layer base {
  /* Used https://screenspan.net/fallback to find best fallback settings */
  @font-face {
    font-family: 'Arial Fallback';
    src: local('Arial');
    size-adjust: 102%;
  }

  @font-face {
    font-family: 'Adjusted Courier New Fallback';
    src: local(Courier New);
    size-adjust: 100%;
    ascent-override: 91%;
    descent-override: 40%;
    line-gap-override: normal;
  }
}

/**
 * Typography
 */

@layer base {
  h1 {
    @apply text-3xl leading-none font-semibold tracking-tight;
  }

  h2 {
    @apply text-2xl leading-7 font-semibold tracking-tight;
  }

  h3 {
    @apply text-xl leading-6 font-semibold tracking-tight;
  }

  p {
    @apply leading-6;
  }
}

/**
 * Base styles for border and background/font colors
 */

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background font-body text-foreground antialiased;
    @apply surface-default;
  }
}