Skip to content

Instantly share code, notes, and snippets.

@phenomen

phenomen/shadcn-flexoki.css

Created October 8, 2023 06:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save phenomen/affd8c346538378548febd20dccdbfcc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save phenomen/affd8c346538378548febd20dccdbfcc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. phenomen created this gist Oct 8, 2023.
    54 changes: 54 additions & 0 deletions shadcn-flexoki.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    @layer base {
    :root {
    --flexoki-bg: 48 100% 97%;
    --flexoki-bg-2: 51 33% 92%;

    --flexoki-ui: 51 21% 88%;
    --flexoki-ui-2: 50 14% 83%;
    --flexoki-ui-3: 55 10% 79%;

    --flexoki-tx: 0 3% 6%;
    --flexoki-tx-2: 50 3% 42%;
    --flexoki-tx-3: 49 7% 70%;

    --flexoki-re: 3 62% 42%;
    }

    .dark {
    --flexoki-bg: 0 3% 6%;
    --flexoki-bg-2: 30 4% 11%;

    --flexoki-ui: 30 3% 15%;
    --flexoki-ui-2: 40 3% 20%;
    --flexoki-ui-3: 30 3% 24%;

    --flexoki-tx: 55 10% 79%;
    --flexoki-tx-2: 43 3% 52%;
    --flexoki-tx-3: 45 2% 33%;

    --flexoki-re: 5 61% 54%;
    }

    :root {
    --background: var(--flexoki-bg);
    --foreground: var(--flexoki-tx);
    --card: var(--flexoki-bg);
    --card-foreground: var(--flexoki-tx);
    --popover: var(--flexoki-bg);
    --popover-foreground: var(--flexoki-tx);
    --primary: var(--flexoki-tx);
    --primary-foreground: var(--flexoki-bg);
    --secondary: var(--flexoki-ui-2);
    --secondary-foreground: var(--flexoki-tx-2);
    --muted: var(--flexoki-bg-2);
    --muted-foreground: var(--flexoki-tx-3);
    --accent: var(--flexoki-ui);
    --accent-foreground: var(--flexoki-tx-2);
    --destructive: var(--flexoki-re);
    --destructive-foreground: var(--flexoki-bg);
    --border: var(--flexoki-ui-2);
    --input: var(--flexoki-ui-2);
    --ring: var(--flexoki-ui-3);
    --radius: 0.5rem;
    }
    }