diff options
| author | Alexandre Negrel <negrel.dev@protonmail.com> | 2021-01-26 23:23:32 +0300 |
|---|---|---|
| committer | Alexandre Negrel <negrel.dev@protonmail.com> | 2021-01-26 23:23:32 +0300 |
| commit | 6ff4da20980bc4a786bea0623a163b2c93825c64 (patch) | |
| tree | 2acd351374e2741681ace4aecca6e1ce23f7def7 | |
| parent | 38d8a10df8087d8ae5d5e9d02757b22cf4b61572 (diff) | |
adding color variables
| -rw-r--r-- | assets/config/tailwind.config.js | 21 | ||||
| -rw-r--r-- | assets/sass/_variables.scss | 29 | ||||
| -rw-r--r-- | assets/sass/styles.sass | 3 |
3 files changed, 50 insertions, 3 deletions
diff --git a/assets/config/tailwind.config.js b/assets/config/tailwind.config.js index 97bde37..ff7d5a1 100644 --- a/assets/config/tailwind.config.js +++ b/assets/config/tailwind.config.js @@ -26,6 +26,7 @@ maxHeight = generator({ }); module.exports = { + darkMode: 'media', theme: { inset, extend: { @@ -60,8 +61,19 @@ module.exports = { '700': '#2f855a', '800': '#276749', '900': '#22543d', - } - } + }, + primary: 'var(--color-primary)', + 'primary-dark': 'var(--color-primary-dark)', + 'primary-light': 'var(--color-primary-light)', + + secondary: 'var(--color-secondary)', + 'secondary-dark': 'var(--color-secondary-dark)', + 'secondary-light': 'var(--color-secondary-light)', + + accent: 'var(--color-accent)', + 'accent-dark': 'var(--color-accent-dark)', + 'accent-light': 'var(--color-accent-light)' + }, }, boxShadow: { xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', @@ -92,8 +104,11 @@ module.exports = { } }, variants: { - backgroundColor: ['hover', 'active'], + backgroundColor: ['hover', 'active', 'dark'], + fontWeight: ['hover', 'focus'], scale: ['hover', 'active'], + border: ['focus'], + textColor: ['hover', 'dark'] }, plugins: [] }
\ No newline at end of file diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss new file mode 100644 index 0000000..d03e61c --- /dev/null +++ b/assets/sass/_variables.scss @@ -0,0 +1,29 @@ +:root { + --color-primary: #212121; + --color-primary-dark: #000000; + --color-primary-light: #484848; + + --color-secondary: #e9ecef; + --color-secondary-dark: #ced4da; + --color-secondary-light: #f8f9fa; + + --color-accent: #48bb78; + --color-accent-dark: #43a76c; + --color-accent-light: #7deea7; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-primary: #dee2e6; + --color-primary-dark: #adb5bd; + --color-primary-light: #e9ecef; + + --color-secondary: #161616; + --color-secondary-dark: #000000; + --color-secondary-light: #303030; + + --color-accent: #9e44ae; + --color-accent-dark: #6d0e7e; + --color-accent-light: #d174e0; + } +} diff --git a/assets/sass/styles.sass b/assets/sass/styles.sass index d48537a..5d0d224 100644 --- a/assets/sass/styles.sass +++ b/assets/sass/styles.sass @@ -1,3 +1,6 @@ +// Theme variables +@import "_variables.scss" + // Fonts @import "fonts/_all" |