Created
May 31, 2021 02:05
-
-
Save justintadlock/0003b82a1fc753b8bae54fad5b8cfd55 to your computer and use it in GitHub Desktop.
Block theme color naming scheme
This file contains 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
{ | |
"settings": { | |
"defaults": { | |
"color": { | |
"palette": [ | |
{ | |
"slug": "transparent", | |
"color": "transparent", | |
"name" : "Transparent" | |
}, | |
{ | |
"slug" : "black", | |
"color" : "#22292f", | |
"name" : "Black" | |
}, | |
{ | |
"slug" : "white", | |
"color" : "#ffffff", | |
"name" : "White" | |
}, | |
{ | |
"slug" : "neutral-900", | |
"color" : "#1a202c", | |
"name" : "Neutral: 900" | |
}, | |
{ | |
"slug" : "neutral-800", | |
"color" : "#2d3748", | |
"name" : "Neutral: 800" | |
}, | |
{ | |
"slug" : "neutral-700", | |
"color" : "#4a5568", | |
"name" : "Neutral: 700" | |
}, | |
{ | |
"slug" : "neutral-600", | |
"color" : "#718096", | |
"name" : "Neutral: 600" | |
}, | |
{ | |
"slug" : "neutral-500", | |
"color" : "#a0aec0", | |
"name" : "Neutral: 500" | |
}, | |
{ | |
"slug" : "neutral-400", | |
"color" : "#cbd5e0", | |
"name" : "Neutral: 400" | |
}, | |
{ | |
"slug" : "neutral-300", | |
"color" : "#e2e8f0", | |
"name" : "Neutral: 300" | |
}, | |
{ | |
"slug" : "neutral-200", | |
"color" : "#edf2f7", | |
"name" : "Neutral: 200" | |
}, | |
{ | |
"slug" : "neutral-100", | |
"color" : "#f7fafc", | |
"name" : "Neutral: 100" | |
}, | |
{ | |
"slug" : "primary-900", | |
"color" : "#2a4365", | |
"name" : "Primary: 900" | |
}, | |
{ | |
"slug" : "primary-800", | |
"color" : "#2c5282", | |
"name" : "Primary: 800" | |
}, | |
{ | |
"slug" : "primary-700", | |
"color" : "#2b6cb0", | |
"name" : "Primary: 700" | |
}, | |
{ | |
"slug" : "primary-600", | |
"color" : "#3182ce", | |
"name" : "Primary: 600" | |
}, | |
{ | |
"slug" : "primary-500", | |
"color" : "#4299e1", | |
"name" : "Primary: 500" | |
}, | |
{ | |
"slug" : "primary-400", | |
"color" : "#63b3ed", | |
"name" : "Primary: 400" | |
}, | |
{ | |
"slug" : "primary-300", | |
"color" : "#90cdf4", | |
"name" : "Primary: 300" | |
}, | |
{ | |
"slug" : "primary-200", | |
"color" : "#bee3f8", | |
"name" : "Primary: 200" | |
}, | |
{ | |
"slug" : "primary-100", | |
"color" : "#ebf8ff", | |
"name" : "Primary: 100" | |
}, | |
{ | |
"slug" : "secondary-900", | |
"color" : "#44337a", | |
"name" : "Secondary: 900" | |
}, | |
{ | |
"slug" : "secondary-800", | |
"color" : "#553c9a", | |
"name" : "Secondary: 800" | |
}, | |
{ | |
"slug" : "secondary-700", | |
"color" : "#6b46c1", | |
"name" : "Secondary: 700" | |
}, | |
{ | |
"slug" : "secondary-600", | |
"color" : "#805ad5", | |
"name" : "Secondary: 600" | |
}, | |
{ | |
"slug" : "secondary-500", | |
"color" : "#9f7aea", | |
"name" : "Secondary: 500" | |
}, | |
{ | |
"slug" : "secondary-400", | |
"color" : "#b794f4", | |
"name" : "Secondary: 400" | |
}, | |
{ | |
"slug" : "secondary-300", | |
"color" : "#d6bcfa", | |
"name" : "Secondary: 300" | |
}, | |
{ | |
"slug" : "secondary-200", | |
"color" : "#e9d8fd", | |
"name" : "Secondary: 200" | |
}, | |
{ | |
"slug" : "secondary-100", | |
"color" : "#faf5ff", | |
"name" : "Secondary: 100" | |
} | |
] | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@justintadlock I ended up with exactly the same naming scheme as this. I feel like it's the best system for frameworks.