@mikeheinrich/adobe-xd-design-system/styles.css

Adobe XD-based design system with React components and Tailwind CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Brand Colors */
    --brand: 350 100% 42%; /* #d6002a - Brand red color */
    --brand-foreground: 0 0% 100%;

    /* Primary Action Colors */
    --primary: 192 100% 27%; /* #006d89 - Primary action color */
    --primary-hover: 192 100% 18%; /* #00495b - Primary hover color */
    --primary-foreground: 0 0% 100%;

    --secondary: 210 14% 45.9%; /* neutral gray */
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 0 0% 93%; /* #eeeeee - Light gray for button group background */
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%; /* danger red */
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 192 100% 27%;

    --radius: 0.125rem; /* 2px border radius */

    /* Semantic Colors */
    --success: 134 61% 41%; /* success green */
    --warning: 45 100% 51%; /* warning yellow */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    /* Brand Colors */
    --brand: 350 100% 42%; /* #d6002a - Brand red color */
    --brand-foreground: 0 0% 100%;

    /* Primary Action Colors */
    --primary: 192 100% 27%; /* #006d89 - Primary action color */
    --primary-hover: 192 100% 18%; /* #00495b - Primary hover color */
    --primary-foreground: 0 0% 100%;

    --secondary: 210 14% 45.9%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 192 100% 27%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Custom component styles */
.component-tab-content {
  display: none;
}
  
.component-tab-content.active {
  display: block;
}

.copied-tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.copy-button:hover + .copied-tooltip, 
.copy-button:focus + .copied-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Brand and component-specific styles */
.text-brand {
  color: hsl(var(--brand));
}

.bg-brand {
  background-color: hsl(var(--brand));
}

.border-brand {
  border-color: hsl(var(--brand));
}

.border-t-brand {
  border-top-color: hsl(var(--brand));
}

/* Primary button - Filled style */
.btn-primary {
  @apply bg-[#006d89] text-white h-[30px] px-4 flex items-center justify-center rounded-[2px] hover:bg-[#00495b] transition-colors;
}

/* Default button - Outline style */
.btn-default {
  @apply bg-white text-[#006d89] border border-[#006d89] h-[30px] px-4 flex items-center justify-center rounded-[2px] hover:bg-gray-50 transition-colors;
}

/* Link button style */
.btn-link {
  @apply text-[#006d89] px-4 h-[30px] flex items-center justify-center hover:underline;
}

/* Button attention/danger style */
.btn-attention {
  @apply text-[#d6002a] border border-[#d6002a] h-[30px] px-4 flex items-center justify-center rounded-[2px] hover:bg-red-50 transition-colors;
}

/* Button group style */
.btn-group {
  @apply flex border border-gray-300 rounded-[2px] overflow-hidden;
}

.btn-group button[class*="button-group-active"] {
  @apply border-t-2 border-t-[#d6002a] bg-[#eeeeee] text-[#d6002a];
}

.btn-group button:not([class*="button-group-active"]) {
  @apply bg-white;
}

/* Accordion styles */
.accordion-item {
  @apply border border-gray-200 rounded-[2px] overflow-hidden;
}

.accordion-item.open {
  @apply border-t-2 border-t-[#d6002a];
}

.accordion-header {
  @apply flex justify-between items-center p-3 bg-white;
}

.accordion-chevron {
  @apply text-[#d6002a];
}

/* List item styles */
.list-item {
  @apply border-b border-gray-200 p-3;
}

.list-item.selected {
  @apply bg-gray-100 text-[#d6002a] border-l-4 border-l-[#d6002a];
}

/* Radio and checkbox styles */
.radio-custom:checked,
.checkbox-custom:checked {
  @apply accent-[#d6002a];
}

/* Tab styles */
.tab-item {
  @apply relative cursor-pointer py-2 px-4;
}

.tab-item.active {
  @apply text-[#d6002a] border-b-2 border-b-[#d6002a];
}

/* Search styles */
.search-primary {
  @apply relative;
}

.search-primary input {
  @apply border-b-2 border-b-[#d6002a] w-full py-2 pl-2 pr-10 focus:outline-none;
}

.search-primary-icon {
  @apply absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500;
}

/* Modal styles */
.modal-header {
  @apply flex justify-between items-center p-4 border-b;
}

.modal-title {
  @apply text-[#d6002a] font-semibold;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}