@zeytal/grid/src/styles.css

Small layout grid utility. Align everything perfectly. Simplify your responsive design coding process without sacrificing effectiveness. Hit G on your keyboard to toggle your grid on and off.

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

@layer base {
  :root,
  .dark-mode,
  .light-mode .invert-theme {
    /* Seperate HSL values from opacity, so opacity can be dynamic for TailwindCSS  */
    --grid-blue-400: 212 100% 23%;
    --grid-blue-700: 214 100% 50%;
    --grid-teal-400: 170 100% 13%;
    --grid-teal-700: 173 100% 33%;
    --grid-green-400: 138 100% 14%;
    --grid-green-700: 140 100% 34%;
    --grid-amber-400: 32 100% 18%;
    --grid-amber-700: 41 100% 50%;
    --grid-red-400: 353 75% 25%;
    --grid-red-700: 355 87% 57%;
    --grid-purple-400: 278 64% 28%;
    --grid-purple-700: 274 64% 54%;
  }

  .light-mode,
  .dark-mode .invert-theme {
    /* Seperate HSL values from opacity, so opacity can be dynamic for TailwindCSS  */
    --grid-blue-400: 207 100% 90%;
    --grid-blue-700: 215 100% 50%;
    --grid-teal-400: 171 81% 83%;
    --grid-teal-700: 173 100% 33%;
    --grid-green-400: 123 75% 84%;
    --grid-green-700: 135 62% 41%;
    --grid-amber-400: 45 100% 73%;
    --grid-amber-700: 41 100% 50%;
    --grid-red-400: 1 100% 92%;
    --grid-red-700: 347 100% 49%;
    --grid-purple-400: 279 100% 93%;
    --grid-purple-700: 279 100% 49%;
  }
}