Skip to content

Instantly share code, notes, and snippets.

@mvllow

mvllow/tailwindcss-theme.ts

Last active March 21, 2020 19:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mvllow/15aaa21828664875e04db4fdc8d278f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mvllow/15aaa21828664875e04db4fdc8d278f9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mvllow revised this gist Mar 21, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions tailwindcss-theme.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // Theme as of v1.2.0
    const theme = {
    gray: {
    100: "#f7fafc",
  2. mvllow revised this gist Dec 7, 2019. No changes.
  3. mvllow revised this gist Dec 7, 2019. No changes.
  4. mvllow renamed this gist Dec 7, 2019. 1 changed file with 0 additions and 0 deletions.
    0 theme.ts → tailwindcss-theme.ts
    View file
    File renamed without changes.
  5. mvllow created this gist Nov 20, 2019.
    131 changes: 131 additions & 0 deletions theme.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,131 @@
    const theme = {
    gray: {
    100: "#f7fafc",
    200: "#edf2f7",
    300: "#e2e8f0",
    400: "#cbd5e0",
    500: "#a0aec0",
    600: "#718096",
    700: "#4a5568",
    800: "#2d3748",
    900: "#1a202c"
    },
    red: {
    100: "#fff5f5",
    200: "#fed7d7",
    300: "#feb2b2",
    400: "#fc8181",
    500: "#f56565",
    600: "#e53e3e",
    700: "#c53030",
    800: "#9b2c2c",
    900: "#742a2a"
    },
    orange: {
    100: "#fffaf0",
    200: "#feebc8",
    300: "#fbd38d",
    400: "#f6ad55",
    500: "#ed8936",
    600: "#dd6b20",
    700: "#c05621",
    800: "#9c4221",
    900: "#7b341e"
    },
    yellow: {
    100: "#fffff0",
    200: "#fefcbf",
    300: "#faf089",
    400: "#f6e05e",
    500: "#ecc94b",
    600: "#d69e2e",
    700: "#b7791f",
    800: "#975a16",
    900: "#744210"
    },
    green: {
    100: "#f0fff4",
    200: "#c6f6d5",
    300: "#9ae6b4",
    400: "#68d391",
    500: "#48bb78",
    600: "#38a169",
    700: "#2f855a",
    800: "#276749",
    900: "#22543d"
    },
    teal: {
    100: "#e6fffa",
    200: "#b2f5ea",
    300: "#81e6d9",
    400: "#4fd1c5",
    500: "#38b2ac",
    600: "#319795",
    700: "#2c7a7b",
    800: "#285e61",
    900: "#234e52"
    },
    blue: {
    100: "#ebf8ff",
    200: "#bee3f8",
    300: "#90cdf4",
    400: "#63b3ed",
    500: "#4299e1",
    600: "#3182ce",
    700: "#2b6cb0",
    800: "#2c5282",
    900: "#2a4365"
    },
    indigo: {
    100: "#ebf4ff",
    200: "#c3dafe",
    300: "#a3bffa",
    400: "#7f9cf5",
    500: "#667eea",
    600: "#5a67d8",
    700: "#4c51bf",
    800: "#434190",
    900: "#3c366b"
    },
    purple: {
    100: "#faf5ff",
    200: "#e9d8fd",
    300: "#d6bcfa",
    400: "#b794f4",
    500: "#9f7aea",
    600: "#805ad5",
    700: "#6b46c1",
    800: "#553c9a",
    900: "#44337a"
    },
    pink: {
    100: "#fff5f7",
    200: "#fed7e2",
    300: "#fbb6ce",
    400: "#f687b3",
    500: "#ed64a6",
    600: "#d53f8c",
    700: "#b83280",
    800: "#97266d",
    900: "#702459"
    }
    };

    /**
    * Use a scheme prop, accepting the names of theme keys
    *
    * @example <Button sheme="pink">Hello!</Button>
    *
    * In styled-jsx (importing theme):
    * color: ${theme[scheme][500]};
    * background-color: ${theme[scheme][100]};
    *
    * In styled-components (using ThemeProvider):
    * color: ${props => props.theme[scheme][500]};
    * background-color: ${props => props.theme[scheme][500]};
    */
    export type Palette = {
    scheme?: keyof typeof theme;
    };

    export default theme;