Skip to content

Instantly share code, notes, and snippets.

@abdokouta
Created September 21, 2025 13:23
Show Gist options
  • Select an option

  • Save abdokouta/3905545f57ebfcae96904bcbb43c77e7 to your computer and use it in GitHub Desktop.

Select an option

Save abdokouta/3905545f57ebfcae96904bcbb43c77e7 to your computer and use it in GitHub Desktop.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://console-framework.com/theme.schema.json",
"title": "Console Framework Theme Configuration with Inheritance",
"description": "A comprehensive theme configuration schema for the Console Framework, inspired by Tailwind CSS, with proper inheritance support",
"type": "object",
"required": ["name", "description", "version"],
"properties": {
"$schema": {
"type": "string",
"description": "JSON Schema reference"
},
"name": {
"type": "string",
"description": "Human-readable theme name",
"minLength": 1,
"maxLength": 50
},
"description": {
"type": "string",
"description": "Detailed theme description",
"minLength": 10,
"maxLength": 200
},
"version": {
"type": "string",
"pattern": "^\\d+\\.\\d+\\.\\d+$",
"description": "Semantic version of the theme"
},
"author": {
"type": "string",
"description": "Theme author name"
},
"extends": {
"anyOf": [
{ "type": "null" },
{ "type": "string", "description": "Base theme to extend from" }
]
},
"colors": {
"type": "object",
"description": "Tailwind-inspired color system with full color palettes",
"properties": {
"inherit": { "type": "string", "enum": ["inherit"] },
"current": { "type": "string", "enum": ["currentColor"] },
"transparent": { "type": "string", "enum": ["transparent"] },
"black": { "$ref": "#/definitions/color" },
"white": { "$ref": "#/definitions/color" }
},
"additionalProperties": {
"anyOf": [
{ "$ref": "#/definitions/color" },
{ "$ref": "#/definitions/colorPalette" }
]
}
},
"semantic": {
"type": "object",
"description": "Semantic color mappings for consistent theming",
"properties": {
"primary": { "$ref": "#/definitions/adaptiveColor" },
"secondary": { "$ref": "#/definitions/adaptiveColor" },
"success": { "$ref": "#/definitions/adaptiveColor" },
"warning": { "$ref": "#/definitions/adaptiveColor" },
"error": { "$ref": "#/definitions/adaptiveColor" },
"info": { "$ref": "#/definitions/adaptiveColor" }
}
},
"text": {
"type": "object",
"description": "Text color system",
"properties": {
"primary": { "$ref": "#/definitions/adaptiveColor" },
"secondary": { "$ref": "#/definitions/adaptiveColor" },
"muted": { "$ref": "#/definitions/adaptiveColor" },
"subtle": { "$ref": "#/definitions/adaptiveColor" },
"inverse": { "$ref": "#/definitions/adaptiveColor" }
}
},
"background": {
"type": "object",
"description": "Background color system",
"properties": {
"primary": { "$ref": "#/definitions/adaptiveColor" },
"secondary": { "$ref": "#/definitions/adaptiveColor" },
"muted": { "$ref": "#/definitions/adaptiveColor" },
"subtle": { "$ref": "#/definitions/adaptiveColor" },
"inverse": { "$ref": "#/definitions/adaptiveColor" }
}
},
"border": {
"type": "object",
"description": "Border color system",
"properties": {
"primary": { "$ref": "#/definitions/adaptiveColor" },
"secondary": { "$ref": "#/definitions/adaptiveColor" },
"muted": { "$ref": "#/definitions/adaptiveColor" },
"focus": { "$ref": "#/definitions/adaptiveColor" },
"error": { "$ref": "#/definitions/adaptiveColor" }
}
},
"spacing": {
"type": "object",
"description": "Tailwind-inspired spacing system [top, right, bottom, left]",
"additionalProperties": {
"type": "array",
"items": { "type": "integer", "minimum": 0 },
"minItems": 4,
"maxItems": 4
}
},
"fontSize": {
"type": "object",
"description": "Font size scale",
"additionalProperties": {
"type": "string",
"pattern": "^\\d+(\\.\\d+)?(rem|em|px)$"
}
},
"fontWeight": {
"type": "object",
"description": "Font weight scale",
"additionalProperties": {
"type": "integer",
"minimum": 100,
"maximum": 900
}
},
"fontFamily": {
"type": "object",
"description": "Font family stacks",
"additionalProperties": {
"type": "array",
"items": { "type": "string" }
}
},
"lineHeight": {
"type": "object",
"description": "Line height scale",
"additionalProperties": { "type": "number", "minimum": 0.5, "maximum": 3 }
},
"borderRadius": {
"type": "object",
"description": "Border radius scale",
"additionalProperties": { "type": "string" }
},
"borderWidth": {
"type": "object",
"description": "Border width scale",
"additionalProperties": {
"type": "string",
"pattern": "^\\d+(px|rem|em)$"
}
},
"opacity": {
"type": "object",
"description": "Opacity scale",
"additionalProperties": {
"type": "string",
"pattern": "^(0|0\\.\\d+|1)$"
}
},
"icons": {
"type": "object",
"description": "Comprehensive icon and emoji system for UI components",
"properties": {
"style": {
"type": "string",
"enum": ["emoji", "unicode", "minimal", "nerd-font", "ascii"],
"description": "Default icon style for the theme"
},
"fallback": {
"type": "string",
"enum": ["emoji", "unicode", "minimal", "nerd-font", "ascii"],
"description": "Fallback icon style if primary is not supported"
},
"sets": {
"type": "object",
"description": "Different icon sets for various styles",
"properties": {
"emoji": { "$ref": "#/definitions/iconSet" },
"unicode": { "$ref": "#/definitions/iconSet" },
"minimal": { "$ref": "#/definitions/iconSet" },
"nerd-font": { "$ref": "#/definitions/iconSet" },
"ascii": { "$ref": "#/definitions/iconSet" }
}
},
"components": {
"type": "object",
"description": "Component-specific icon mappings",
"properties": {
"note": { "$ref": "#/definitions/noteIcons" },
"button": { "$ref": "#/definitions/buttonIcons" },
"form": { "$ref": "#/definitions/formIcons" },
"progress": { "$ref": "#/definitions/progressIcons" },
"table": { "$ref": "#/definitions/tableIcons" },
"navigation": { "$ref": "#/definitions/navigationIcons" },
"status": { "$ref": "#/definitions/statusIcons" }
}
}
}
},
"components": {
"type": "object",
"description": "Component-specific styling definitions",
"properties": {
"note": { "$ref": "#/definitions/noteComponent" },
"button": { "$ref": "#/definitions/buttonComponent" },
"input": { "$ref": "#/definitions/inputComponent" },
"table": { "$ref": "#/definitions/tableComponent" }
},
"additionalProperties": { "$ref": "#/definitions/customComponent" }
},
"animation": {
"type": "object",
"description": "Animation timing and easing",
"properties": {
"duration": {
"type": "object",
"additionalProperties": {
"type": "string",
"pattern": "^\\d+(ms|s)$"
}
},
"easing": {
"type": "object",
"additionalProperties": { "type": "string" }
}
}
},
"boxShadow": {
"type": "object",
"description": "Box shadow definitions",
"additionalProperties": { "type": "string" }
}
},
"additionalProperties": false,
"definitions": {
"color": {
"type": "string",
"anyOf": [
{
"pattern": "^#[0-9a-fA-F]{6}$",
"description": "Hex color",
"format": "color-hex"
},
{
"pattern": "^#[0-9a-fA-F]{3}$",
"description": "Short hex color",
"format": "color-hex"
},
{
"pattern": "^#[0-9a-fA-F]{8}$",
"description": "Hex color with alpha",
"format": "color-hex"
},
{
"pattern": "^rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)$",
"description": "RGB color"
},
{
"pattern": "^rgba\\(\\d+,\\s*\\d+,\\s*\\d+,\\s*[01](\\.\\d+)?\\)$",
"description": "RGBA color"
},
{
"pattern": "^\\$[a-zA-Z][a-zA-Z0-9._-]*$",
"description": "Variable reference"
},
{ "enum": ["inherit", "currentColor", "transparent"] }
]
},
"colorPalette": {
"type": "object",
"description": "Tailwind-style color palette with numeric scales",
"additionalProperties": { "$ref": "#/definitions/color" },
"properties": {
"50": { "$ref": "#/definitions/color" },
"100": { "$ref": "#/definitions/color" },
"200": { "$ref": "#/definitions/color" },
"300": { "$ref": "#/definitions/color" },
"400": { "$ref": "#/definitions/color" },
"500": { "$ref": "#/definitions/color" },
"600": { "$ref": "#/definitions/color" },
"700": { "$ref": "#/definitions/color" },
"800": { "$ref": "#/definitions/color" },
"900": { "$ref": "#/definitions/color" },
"950": { "$ref": "#/definitions/color" }
}
},
"adaptiveColor": {
"type": "object",
"description": "Color that adapts to light/dark mode",
"required": ["light", "dark"],
"properties": {
"light": { "$ref": "#/definitions/color" },
"dark": { "$ref": "#/definitions/color" }
},
"additionalProperties": false
},
"spacingValue": {
"anyOf": [
{ "type": "string", "pattern": "^\\$spacing\\.[a-zA-Z0-9._-]+$" },
{
"type": "array",
"items": { "type": "integer", "minimum": 0 },
"minItems": 4,
"maxItems": 4
}
]
},
"noteComponent": {
"type": "object",
"properties": {
"base": {
"type": "object",
"description": "Base styling applied to all note variants",
"properties": {
"padding": { "type": "string" },
"margin": { "type": "string" },
"borderRadius": { "type": "string" },
"borderWidth": { "type": "string" },
"fontSize": { "type": "string" },
"lineHeight": { "type": "string" },
"fontWeight": { "type": "string" }
}
},
"variants": {
"type": "object",
"description": "Note type variants",
"properties": {
"info": { "$ref": "#/definitions/noteVariant" },
"success": { "$ref": "#/definitions/noteVariant" },
"warning": { "$ref": "#/definitions/noteVariant" },
"error": { "$ref": "#/definitions/noteVariant" },
"tip": { "$ref": "#/definitions/noteVariant" },
"caution": { "$ref": "#/definitions/noteVariant" }
}
}
}
},
"noteVariant": {
"type": "object",
"properties": {
"icon": { "type": "string", "maxLength": 50 },
"iconColor": { "$ref": "#/definitions/colorReference" },
"textColor": { "$ref": "#/definitions/colorReference" },
"backgroundColor": {
"anyOf": [
{ "$ref": "#/definitions/colorReference" },
{ "$ref": "#/definitions/adaptiveColor" }
]
},
"borderColor": { "$ref": "#/definitions/colorReference" },
"showIcon": { "type": "boolean" },
"bold": { "type": "boolean" },
"italic": { "type": "boolean" },
"underline": { "type": "boolean" }
}
},
"buttonComponent": {
"type": "object",
"properties": {
"base": { "$ref": "#/definitions/componentBase" },
"variants": {
"type": "object",
"properties": {
"primary": { "$ref": "#/definitions/buttonVariant" },
"secondary": { "$ref": "#/definitions/buttonVariant" },
"success": { "$ref": "#/definitions/buttonVariant" },
"danger": { "$ref": "#/definitions/buttonVariant" },
"ghost": { "$ref": "#/definitions/buttonVariant" }
}
}
}
},
"buttonVariant": {
"type": "object",
"properties": {
"textColor": { "$ref": "#/definitions/colorReference" },
"backgroundColor": { "$ref": "#/definitions/colorReference" },
"borderColor": { "$ref": "#/definitions/colorReference" },
"hover": { "$ref": "#/definitions/buttonState" },
"focus": { "$ref": "#/definitions/buttonState" }
}
},
"buttonState": {
"type": "object",
"properties": {
"backgroundColor": { "$ref": "#/definitions/colorReference" },
"borderColor": { "$ref": "#/definitions/colorReference" },
"textColor": { "$ref": "#/definitions/colorReference" },
"ringColor": { "$ref": "#/definitions/colorReference" }
}
},
"inputComponent": {
"type": "object",
"properties": {
"base": { "$ref": "#/definitions/componentBase" },
"variants": {
"type": "object",
"properties": {
"default": { "$ref": "#/definitions/inputVariant" },
"focused": { "$ref": "#/definitions/inputVariant" },
"error": { "$ref": "#/definitions/inputVariant" },
"disabled": { "$ref": "#/definitions/inputVariant" }
}
}
}
},
"inputVariant": {
"type": "object",
"properties": {
"textColor": { "$ref": "#/definitions/colorReference" },
"backgroundColor": { "$ref": "#/definitions/colorReference" },
"borderColor": { "$ref": "#/definitions/colorReference" },
"placeholderColor": { "$ref": "#/definitions/colorReference" },
"ringColor": { "$ref": "#/definitions/colorReference" }
}
},
"tableComponent": {
"type": "object",
"properties": {
"base": { "$ref": "#/definitions/componentBase" },
"header": { "$ref": "#/definitions/tableSection" },
"row": { "$ref": "#/definitions/tableSection" },
"cell": { "$ref": "#/definitions/tableSection" }
}
},
"tableSection": {
"type": "object",
"properties": {
"backgroundColor": { "$ref": "#/definitions/colorReference" },
"textColor": { "$ref": "#/definitions/colorReference" },
"borderColor": { "$ref": "#/definitions/colorReference" },
"padding": { "type": "string" },
"fontWeight": { "type": "string" },
"hover": {
"type": "object",
"properties": {
"backgroundColor": { "$ref": "#/definitions/colorReference" }
}
}
}
},
"customComponent": {
"type": "object",
"description": "Custom component definition",
"additionalProperties": true
},
"componentBase": {
"type": "object",
"description": "Base styling for components",
"properties": {
"padding": { "type": "string" },
"margin": { "type": "string" },
"borderRadius": { "type": "string" },
"borderWidth": { "type": "string" },
"fontSize": { "type": "string" },
"fontWeight": { "type": "string" },
"lineHeight": { "type": "string" }
}
},
"colorReference": {
"anyOf": [
{ "$ref": "#/definitions/color" },
{ "type": "string", "pattern": "^\\$[a-zA-Z][a-zA-Z0-9._-]*$" }
]
},
"iconSet": {
"type": "object",
"description": "Complete set of icons for a specific style",
"properties": {
"common": {
"type": "object",
"description": "Common UI icons used across components",
"properties": {
"check": { "type": "string", "description": "Checkmark/success" },
"cross": { "type": "string", "description": "Cross/error" },
"warning": { "type": "string", "description": "Warning/caution" },
"info": { "type": "string", "description": "Information" },
"question": { "type": "string", "description": "Question/help" },
"arrow-right": { "type": "string", "description": "Right arrow" },
"arrow-left": { "type": "string", "description": "Left arrow" },
"arrow-up": { "type": "string", "description": "Up arrow" },
"arrow-down": { "type": "string", "description": "Down arrow" },
"bullet": { "type": "string", "description": "List bullet point" },
"ellipsis": { "type": "string", "description": "More/loading" }
}
},
"note": {
"type": "object",
"description": "Icons for note/message components",
"properties": {
"info": { "type": "string" },
"success": { "type": "string" },
"warning": { "type": "string" },
"error": { "type": "string" },
"tip": { "type": "string" },
"caution": { "type": "string" },
"note": { "type": "string" }
}
},
"form": {
"type": "object",
"description": "Icons for form components",
"properties": {
"required": {
"type": "string",
"description": "Required field indicator"
},
"optional": {
"type": "string",
"description": "Optional field indicator"
},
"valid": { "type": "string", "description": "Valid input" },
"invalid": { "type": "string", "description": "Invalid input" },
"search": { "type": "string", "description": "Search input" },
"password": {
"type": "string",
"description": "Password/secret input"
},
"select": { "type": "string", "description": "Select dropdown" },
"multiselect": { "type": "string", "description": "Multi-select" },
"checkbox-checked": {
"type": "string",
"description": "Checked checkbox"
},
"checkbox-unchecked": {
"type": "string",
"description": "Unchecked checkbox"
},
"radio-selected": {
"type": "string",
"description": "Selected radio"
},
"radio-unselected": {
"type": "string",
"description": "Unselected radio"
}
}
},
"status": {
"type": "object",
"description": "Icons for status and progress indicators",
"properties": {
"loading": { "type": "string", "description": "Loading/spinner" },
"progress": {
"type": "string",
"description": "Progress indicator"
},
"complete": { "type": "string", "description": "Task complete" },
"pending": { "type": "string", "description": "Task pending" },
"failed": { "type": "string", "description": "Task failed" },
"paused": { "type": "string", "description": "Task paused" },
"stopped": { "type": "string", "description": "Task stopped" }
}
},
"navigation": {
"type": "object",
"description": "Icons for navigation and controls",
"properties": {
"menu": { "type": "string", "description": "Menu/hamburger" },
"close": { "type": "string", "description": "Close/exit" },
"back": { "type": "string", "description": "Back/previous" },
"forward": { "type": "string", "description": "Forward/next" },
"home": { "type": "string", "description": "Home" },
"settings": { "type": "string", "description": "Settings/config" },
"help": { "type": "string", "description": "Help/documentation" },
"refresh": { "type": "string", "description": "Refresh/reload" }
}
}
}
},
"noteIcons": {
"type": "object",
"description": "Icon overrides for note components",
"properties": {
"info": { "$ref": "#/definitions/iconReference" },
"success": { "$ref": "#/definitions/iconReference" },
"warning": { "$ref": "#/definitions/iconReference" },
"error": { "$ref": "#/definitions/iconReference" },
"tip": { "$ref": "#/definitions/iconReference" },
"caution": { "$ref": "#/definitions/iconReference" }
}
},
"buttonIcons": {
"type": "object",
"description": "Icon overrides for button components",
"properties": {
"submit": { "$ref": "#/definitions/iconReference" },
"cancel": { "$ref": "#/definitions/iconReference" },
"reset": { "$ref": "#/definitions/iconReference" },
"save": { "$ref": "#/definitions/iconReference" },
"delete": { "$ref": "#/definitions/iconReference" },
"edit": { "$ref": "#/definitions/iconReference" }
}
},
"formIcons": {
"type": "object",
"description": "Icon overrides for form components",
"properties": {
"required": { "$ref": "#/definitions/iconReference" },
"optional": { "$ref": "#/definitions/iconReference" },
"valid": { "$ref": "#/definitions/iconReference" },
"invalid": { "$ref": "#/definitions/iconReference" },
"search": { "$ref": "#/definitions/iconReference" }
}
},
"progressIcons": {
"type": "object",
"description": "Icon overrides for progress components",
"properties": {
"loading": { "$ref": "#/definitions/iconReference" },
"complete": { "$ref": "#/definitions/iconReference" },
"failed": { "$ref": "#/definitions/iconReference" }
}
},
"tableIcons": {
"type": "object",
"description": "Icon overrides for table components",
"properties": {
"sort-asc": { "$ref": "#/definitions/iconReference" },
"sort-desc": { "$ref": "#/definitions/iconReference" },
"sort-none": { "$ref": "#/definitions/iconReference" },
"filter": { "$ref": "#/definitions/iconReference" }
}
},
"navigationIcons": {
"type": "object",
"description": "Icon overrides for navigation components",
"properties": {
"menu": { "$ref": "#/definitions/iconReference" },
"close": { "$ref": "#/definitions/iconReference" },
"back": { "$ref": "#/definitions/iconReference" },
"forward": { "$ref": "#/definitions/iconReference" }
}
},
"statusIcons": {
"type": "object",
"description": "Icon overrides for status indicators",
"properties": {
"online": { "$ref": "#/definitions/iconReference" },
"offline": { "$ref": "#/definitions/iconReference" },
"connecting": { "$ref": "#/definitions/iconReference" },
"error": { "$ref": "#/definitions/iconReference" }
}
},
"iconReference": {
"anyOf": [
{ "type": "string", "description": "Direct icon string" },
{
"type": "string",
"pattern": "^\\$icons\\.[a-zA-Z][a-zA-Z0-9._-]*$",
"description": "Icon reference"
}
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment