Created
March 10, 2022 03:07
-
-
Save mpriour/e3650490004464f361ee02e3afc441a2 to your computer and use it in GitHub Desktop.
Tailwind config
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| content: ["./files/**/*.{html,js}","./public/templates/**/*.hbs","./index.html"], | |
| theme: { | |
| borderColor: ({ theme }) => ({ | |
| color: { | |
| 1: "var(--calcite-ui-border-1)", | |
| 2: "var(--calcite-ui-border-2)", | |
| 3: "var(--calcite-ui-border-3)", | |
| input: "var(--calcite-ui-border-input)", | |
| transparent: theme("colors.transparent") | |
| }, | |
| "color-brand": theme("colors.brand"), | |
| "color-brand-hover": theme("colors.brand-hover"), | |
| "color-brand-press": theme("colors.brand-press"), | |
| "color-info": theme("colors.info"), | |
| "color-success": theme("colors.success"), | |
| "color-warning": theme("colors.warning"), | |
| "color-danger": theme("colors.danger"), | |
| "color-danger-hover": theme("colors.danger-hover"), | |
| "color-danger-press": theme("colors.danger-press") | |
| }), | |
| colors: { | |
| current: "currentColor", | |
| brand: "var(--calcite-ui-brand)", | |
| "brand-hover": "var(--calcite-ui-brand-hover)", | |
| "brand-press": "var(--calcite-ui-brand-press)", | |
| info: "var(--calcite-ui-info)", | |
| success: "var(--calcite-ui-success)", | |
| warning: "var(--calcite-ui-warning)", | |
| danger: "var(--calcite-ui-danger)", | |
| "danger-hover": "var(--calcite-ui-danger-hover)", | |
| "danger-press": "var(--calcite-ui-danger-press)", | |
| background: { | |
| background: "var(--calcite-ui-background)", | |
| foreground: { | |
| 1: "var(--calcite-ui-foreground-1)", | |
| 2: "var(--calcite-ui-foreground-2)", | |
| 3: "var(--calcite-ui-foreground-3)" | |
| } | |
| }, | |
| color: { | |
| 1: "var(--calcite-ui-text-1)", | |
| 2: "var(--calcite-ui-text-2)", | |
| 3: "var(--calcite-ui-text-3)", | |
| inverse: "var(--calcite-ui-text-inverse)", | |
| link: "var(--calcite-ui-text-link)", | |
| icon: "var(--calcite-ui-icon-color)" | |
| }, | |
| transparent: "transparent" | |
| }, | |
| fontFamily: { | |
| // assets/styles/_type | |
| sans: "var(--calcite-sans-family)", | |
| mono: "var(--calcite-code-family)", | |
| inherit: "inherit" | |
| }, | |
| fontSize: { | |
| n3h: ["var(--calcite-font-size--3)", { lineHeight: "0.75rem" }], // 10px (0.625rem) | |
| n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) | |
| n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) | |
| "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) | |
| "1h": ["var(--calcite-font-size-1)", { lineHeight: "1.5rem" }], // 18px (1.125rem) | |
| "2h": ["var(--calcite-font-size-2)", { lineHeight: "1.5rem" }], // 20px (1.25rem) | |
| "3h": ["var(--calcite-font-size-3)", { lineHeight: "2rem" }], // 26px (1.625rem) | |
| "4h": ["var(--calcite-font-size-4)", { lineHeight: "2.5rem" }], // 32px (2rem) | |
| "5h": ["var(--calcite-font-size-5)", { lineHeight: "3rem" }], // 40px (2.5rem) | |
| "6h": ["var(--calcite-font-size-6)", { lineHeight: "4rem" }], // 48px (3rem) | |
| "7h": ["var(--calcite-font-size-7)", { lineHeight: "4rem" }], // 56px (3.5rem) | |
| "8h": ["var(--calcite-font-size-8)", { lineHeight: "5rem" }], // 64px (4rem) | |
| "n3-wrap": ["var(--calcite-font-size--3)", { lineHeight: "1.375" }], | |
| "n2-wrap": ["var(--calcite-font-size--2)", { lineHeight: "1.375" }], | |
| "n1-wrap": ["var(--calcite-font-size--1)", { lineHeight: "1.375" }], | |
| "0-wrap": ["var(--calcite-font-size-0)", { lineHeight: "1.375" }], | |
| "1-wrap": ["var(--calcite-font-size-1)", { lineHeight: "1.375" }], | |
| "2-wrap": ["var(--calcite-font-size-2)", { lineHeight: "1.375" }], | |
| "3-wrap": ["var(--calcite-font-size-3)", { lineHeight: "1.25" }], | |
| "4-wrap": ["var(--calcite-font-size-4)", { lineHeight: "1.25" }], | |
| "5-wrap": ["var(--calcite-font-size-5)", { lineHeight: "1.25" }], | |
| "6-wrap": ["var(--calcite-font-size-6)", { lineHeight: "1.25" }], | |
| "7-wrap": ["var(--calcite-font-size-7)", { lineHeight: "1.25" }], | |
| "8-wrap": ["var(--calcite-font-size-8)", { lineHeight: "1.25" }] | |
| }, | |
| fontWeight: { | |
| light: "var(--calcite-font-weight-light)", | |
| normal: "var(--calcite-font-weight-normal)", | |
| medium: "var(--calcite-font-weight-medium)", | |
| bold: "var(--calcite-font-weight-bold)" | |
| }, | |
| screens: { | |
| s: "480px", | |
| m: "864px", | |
| l: "1024px", | |
| xl: "1440px" | |
| }, | |
| backgroundColor: ({ theme }) => ({ | |
| ...theme("colors.background"), | |
| transparent: theme("colors.transparent"), | |
| brand: theme("colors.brand"), | |
| "brand-hover": theme("colors.brand-hover"), | |
| "brand-press": theme("colors.brand-press"), | |
| info: theme("colors.info"), | |
| success: theme("colors.success"), | |
| warning: theme("colors.warning"), | |
| danger: theme("colors.danger"), | |
| "danger-hover": theme("colors.danger-hover"), | |
| "danger-press": theme("colors.danger-press") | |
| }), | |
| extend: { | |
| animation: { | |
| in: "in var(--calcite-internal-animation-timing-slow) ease-in-out", | |
| "in-down": "in-down var(--calcite-internal-animation-timing-slow) ease-in-out", | |
| "in-up": "in-up var(--calcite-internal-animation-timing-slow) ease-in-out", | |
| "in-scale": "in-scale var(--calcite-internal-animation-timing-slow) linear" | |
| }, | |
| borderRadius: { | |
| half: "50%" | |
| }, | |
| boxShadow: { | |
| 0: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)", | |
| 1: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)", | |
| "1-lg": "0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.04)", | |
| "1-sm": "0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08)", | |
| 2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)", | |
| "2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)", | |
| "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)", | |
| "border-bottom": "0 1px 0 var(--calcite-ui-border-3)", | |
| "outline-active": "0 0 0 1px var(--calcite-ui-brand)", | |
| none: "none", | |
| xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", | |
| outline: "0 0 0 3px rgba(66, 153, 225, 0.5)" | |
| }, | |
| keyframes: { | |
| in: { | |
| "0%": { | |
| opacity: 0 | |
| }, | |
| "100%": { | |
| opacity: 1 | |
| } | |
| }, | |
| "in-down": { | |
| "0%": { | |
| opacity: 0, | |
| transform: "translate3D(0, -5px, 0)" | |
| }, | |
| "100%": { | |
| opacity: 1, | |
| transform: "translate3D(0, 0, 0)" | |
| } | |
| }, | |
| "in-up": { | |
| "0%": { | |
| opacity: 0, | |
| transform: "translate3D(0, 5px, 0)" | |
| }, | |
| "100%": { | |
| opacity: 1, | |
| transform: "translate3D(0, 0, 0)" | |
| } | |
| }, | |
| "in-scale": { | |
| "0%": { | |
| opacity: 0, | |
| transform: "scale3D(0.95, 0.95, 1)" | |
| }, | |
| "100%": { | |
| opacity: 1, | |
| transform: "scale3D(1, 1, 1)" | |
| } | |
| } | |
| }, | |
| opacity: { | |
| disabled: "var(--calcite-ui-opacity-disabled)" | |
| }, | |
| spacing: { | |
| 0.5: "0.125rem", | |
| 2.5: "0.625rem", | |
| 3.5: "0.875rem", | |
| 9: "2.25rem", | |
| 11: "2.75rem" | |
| }, | |
| transitionProperty: { | |
| margin: "margin", | |
| color: "color" | |
| }, | |
| transitionTimingFunction: { | |
| cubic: "cubic-bezier(0.215, 0.440, 0.420, 0.880)" | |
| } | |
| } | |
| }, | |
| plugins: [], | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment