Skip to content

Commit

Permalink
Merge pull request #21 from VoiceDeck/fix/color-definitions
Browse files Browse the repository at this point in the history
feat(tailwind.config.js, tailwind.css): ♻️ Update color variables
  • Loading branch information
thebeyondr authored Feb 2, 2024
2 parents df10bd3 + 6eff7e1 commit 9eee706
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 46 deletions.
26 changes: 26 additions & 0 deletions app/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,32 @@
@tailwind components;
@tailwind utilities;

:root {
--vd-beige-200: 247 237 232;
--vd-beige-400: 231 201 186;
--vd-beige-300: 241 224 215;
--vd-beige-100: 251 247 245;
--vd-blue-900: 37 47 86;
--vd-blue-700: 58 82 100;
--vd-blue-600: 65 98 121;
--vd-blue-500: 75 119 143;
--vd-blue-400: 102 146 169;
--vd-blue-300: 152 184 200;
--vd-blue-200: 194 214 223;
--vd-orange-800: 135 54 45;
--vd-orange-700: 159 61 50;
--vd-orange-600: 193 78 65;
--vd-orange-500: 214 105 93;
--vd-orange-400: 228 143 133;
--vd-orange-300: 239 184 178;
--vd-orange-200: 246 214 210;
--vd-gray-600: 66 66 74;
--vd-gray-500: 95 95 106;
--vd-gray-400: 146 147 158;
--vd-gray-300: 185 186 192;
--vd-gray-200: 218 218 221;
}

@layer base {
body {
font-family: 'Plus Jakarta Sans Variable', sans-serif;
Expand Down
95 changes: 49 additions & 46 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,51 +1,54 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
// page background 'DawnPink'
"vd-beige-200": "#F7EDE8",
// container backgrounds
"vd-beige-400": "#E7C9BA",
"vd-beige-300": "#F1E0D7",
"vd-beige-100": "#FBF7F5",
// accent 'Gothic'
"vd-blue-900": "#252F56", // main text 'CloudBurst'
"vd-blue-700": "#3A5264",
"vd-blue-600": "#416279",
"vd-blue-500": "#4B778F",
"vd-blue-400": "#6692A9",
"vd-blue-300": "#98B8C8",
"vd-blue-200": "#C2D6DF",
// accent 'ElSalva'
"vd-orange-800": "#87362D",
"vd-orange-700": "#9F3D32",
"vd-orange-600": "#C14E41",
"vd-orange-500": "#D6695D",
"vd-orange-400": "#E48F85",
"vd-orange-300": "#EFB8B2",
"vd-orange-200": "#F6D6D2",
// accent 'Woodsmoke'
"vd-gray-600": "#42424A",
"vd-gray-500": "#5F5F6A",
"vd-gray-400": "#92939E",
"vd-gray-300": "#B9BAC0",
"vd-gray-200": "#DADADD",
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
'vd-beige': {
200: 'rgb(var(--vd-beige-200) / <alpha-value>)',
400: 'rgb(var(--vd-beige-400) / <alpha-value>)',
300: 'rgb(var(--vd-beige-300) / <alpha-value>)',
100: 'rgb(var(--vd-beige-100) / <alpha-value>)',
},
'vd-blue': {
900: 'rgb(var(--vd-blue-900) / <alpha-value>)',
700: 'rgb(var(--vd-blue-700) / <alpha-value>)',
600: 'rgb(var(--vd-blue-600) / <alpha-value>)',
500: 'rgb(var(--vd-blue-500) / <alpha-value>)',
400: 'rgb(var(--vd-blue-400) / <alpha-value>)',
300: 'rgb(var(--vd-blue-300) / <alpha-value>)',
200: 'rgb(var(--vd-blue-200) / <alpha-value>)',
},
'vd-orange': {
800: 'rgb(var(--vd-orange-800) / <alpha-value>)',
700: 'rgb(var(--vd-orange-700) / <alpha-value>)',
600: 'rgb(var(--vd-orange-600) / <alpha-value>)',
500: 'rgb(var(--vd-orange-500) / <alpha-value>)',
400: 'rgb(var(--vd-orange-400) / <alpha-value>)',
300: 'rgb(var(--vd-orange-300) / <alpha-value>)',
200: 'rgb(var(--vd-orange-200) / <alpha-value>)',
},
'vd-gray': {
600: 'rgb(var(--vd-gray-600) / <alpha-value>)',
500: 'rgb(var(--vd-gray-500) / <alpha-value>)',
400: 'rgb(var(--vd-gray-400) / <alpha-value>)',
300: 'rgb(var(--vd-gray-300) / <alpha-value>)',
200: 'rgb(var(--vd-gray-200) / <alpha-value>)',
},
},
keyframes: {
"accordion-down": {
Expand Down

0 comments on commit 9eee706

Please sign in to comment.