Packages

prenix_components

0.1.6
0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Prebuilt UI components for Phoenix inspired by NextUI.

HexDocs

Current section

Files

Jump to
Readme
10 Versions
3 Dependencies
Dependants
Files
Activity
prenix_components assets css prenix_components variables.css
Raw

assets/css/prenix_components/variables.css 

:root {

  --background: 0 0% 100%;

  --foreground: 202 24% 9%;

  --default: 240 5% 84%;

  --default-foreground: 0 0% 0%;

  --primary: 212 100% 47%;

  --primary-foreground: 0 0% 100%;

  --secondary: 270 67% 47%;

  --secondary-foreground: 0 0% 100%;

  --success: 146 79% 44%;

  --success-foreground: 0 0% 0%;

  --warning: 37 91% 55%;

  --warning-foreground: 0 0% 0%;

  --danger: 339 90% 51%;

  --danger-foreground: 0 0% 100%;



  /* For components */

  --content: 0 0% 100%;

  --content-foreground: 202 24% 9%;

  --ripple: 0 0% 0%;

  --ripple-opacity: 0.7;

  --divider: 0 0% 7%;

  --divider-opacity: 0.15;



  /* For placeholders, component icons */

  --neutral1-foreground: 240 5% 65%;



  /* For helper text, labels */

  --neutral2-foreground: 240 4% 46%;



  /*  */

  --neutral3-foreground: 240 5% 34%;

  --overlay: 0 0% 0%;

  --overlay-opacity: 0.5;

  --focus: 212 100% 47%;

  --disabled-opacity: 0.5;



  --shadow-sm: 0px 0px 5px 0px rgba(0, 0, 0, 0.02),

    0px 2px 10px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

  --shadow-md: 0px 0px 15px 0px rgba(0, 0, 0, 0.03),

    0px 2px 30px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

  --shadow-lg: 0px 0px 30px 0px rgba(0, 0, 0, 0.04),

    0px 30px 60px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

}



.dark {

  --background: 0 0% 0%;

  --foreground: 210 6% 93%;

  --default: 240 5% 26%;

  --default-foreground: 0 0% 100%;

  --primary: 212 100% 47%;

  --primary-foreground: 0 0% 100%;

  --secondary: 270 59% 58%;

  --secondary-foreground: 0 0% 100%;

  --success: 146 79% 44%;

  --success-foreground: 0 0% 0%;

  --warning: 37 91% 55%;

  --warning-foreground: 0 0% 0%;

  --danger: 339 90% 51%;

  --danger-foreground: 0 0% 100%;

  --ripple: 0 0% 100%;

  --ripple-opacity: 0.7;

  --divider: 0 0% 100%;

  --divider-opacity: 0.15;

  --overlay: 0 0% 0%;

  --overlay-opacity: 0.5;

  --neutral1-foreground: 240 4% 46%;

  --neutral2-foreground: 240 5% 65%;

  --neutral3-foreground: 240 5% 84%;

  --content: 240 6% 10%;

  --content-foreground: 0 0% 98%;

  --focus: 212 100% 47%;

  --disabled-opacity: 0.7;

  --shadow-sm: 0px 0px 5px 0px rgba(0, 0, 0, 0.05),

    0px 2px 10px 0px rgba(0, 0, 0, 0.2),

    inset 0px 0px 1px 0px hsla(0, 0%, 100%, 0.15);

  --shadow-md: 0px 0px 15px 0px rgba(0, 0, 0, 0.06),

    0px 2px 30px 0px rgba(0, 0, 0, 0.22),

    inset 0px 0px 1px 0px hsla(0, 0%, 100%, 0.15);

  --shadow-lg: 0px 0px 30px 0px rgba(0, 0, 0, 0.07),

    0px 30px 60px 0px rgba(0, 0, 0, 0.26),

    inset 0px 0px 1px 0px hsla(0, 0%, 100%, 0.15);

}