{
    "elements" : {
        "accent-color" : {
            "_comment" : "Active buttons/toggles",
            "replace" : "ACCENT-COLOR",

            "light" : {
                "s" : 52,
                "l" : 67,
                "a" : 1
            },

            "dark" : {
                "s" : 42,
                "l" : 26,
                "a" : 1
            }
        },
        "accent_hover" : {
            "_comment" : "Hover color in active buttons/toggles",
            "replace" : "ACCENT_HOVER",

            "light" : {
                "s" : 50,
                "l" : 60,
                "a" : 1
            },

            "dark" : {
                "s" : 66,
                "l" : 22,
                "a" : 1
            }
        },

        "accent-disabled" : {
            "_comment" : "Buttons / disabled toggles",
            "replace" : "ACCENT-DISABLED-COLOR",
            
            "light" : {
                "s" : 40,
                "l" : 90,
                "a" : 1
            },
            
            "dark" : {
                "s" : 95,
                "l" : 85,
                "a" : 0.08
            }
        },
        "accent-disabled_hover" : {
            "_comment" : "Hover color in buttons / disabled toggles",
            "replace" : "ACCENT-DISABLED_HOVER",

            "light" : {
                "s" : 35,
                "l" : 85,
                "a" : 1
            },

            "dark" : {
                "s" : 40,
                "l" : 85,
                "a" : 0.13
            }
        },

        "accent-secondary-color" : {
            "_comment" : "Capture button in Screenshot UI, checkboxes; borders when focusing on element",
            "replace" : "ACCENT-SECONDARY-COLOR",
            
            "light" : {
                "s" : 20,
                "l" : 50,
                "a" : 1   
            },

            "dark" : {
                "s" : 20,
                "l" : 75,
                "a" : 1
            }
        },
        "accent-secondary_hover" : {
            "_comment" : "Secondary accent color on hover",
            "replace" : "ACCENT-SECONDARY_HOVER",

            "light" : {
                "s" : 20,
                "l" : 45,
                "a" : 1 
            },

            "dark" : {
                "s" : 20,
                "l" : 70,
                "a" : 1
            }
        },
        
        "accent-opacity-color" : {
            "_comment" : "Accent color, but with transparency. Used in selected workspace indicator / tiled windows / window selection (Screenshot UI)",
            "replace": "ACCENT-OPACITY-COLOR",
            
            "light" : {
                "s" : 78,
                "l" : 84,
                "a" : 0.5
            },

            "dark" : {
                "s" : 42,
                "l" : 26,
                "a" : 0.2
            }
        },

        "background-color" : {
            "_comment" : "Background color. Used in overview, panel, different menus...",
            "replace" : "BACKGROUND-COLOR",

            "light" : {
                "s" : 64,
                "l" : 97,
                "a" : 1
            },

            "dark" : {
                "s" : 7,
                "l" : 8,
                "a" : 1
            }
        },
        
        "dash-color" : {
            "_comment" : "Special color for dash background",
            "replace" : "DASH-COLOR",

            "light" : {
                "s" : 40,
                "l" : 98,
                "a" : 0.8
            },

            "dark" : {
                "s" : 5,
                "l" : 20,
                "a" : 0.7
            }
        },
        "dash_overview" : {
            "_comment" : "Dash backround when in overview",
            "replace" : "DASH_OVERVIEW",

            "light" : {
                "s" : 60,
                "l" : 90,
                "a" : 0.8
            },

            "dark" : {
                "s" : 0,
                "l" : 100,
                "a" : 0.12
            }
        },

        "well-app-selected" : {
            "_comment" : "Running app dot",
            "replace" : "WELL-APP-SELECTED",

            "light" : {
                "s" : 20,
                "l" : 50,
                "a" : 0.4
            },
            
            "dark" : {
                "s" : 20,
                "l" : 75,
                "a" : 0.4
            }
        },

        "text-primary-color" : {
            "_comment" : "Used as primary color in text",
            "replace" : "TEXT-PRIMARY-COLOR",
            
            "light" : {
                "s" : 71,
                "l" : 10,
                "a" : 0.87
            },

            "dark" : {
                "s" : 65,
                "l" : 95,
                "a" : 1
            }
        },
        "text-secondary-color" : {
            "_comment" : "Item description, time stamp",
            "replace" : "TEXT-SECONDARY-COLOR",

            "light" : {
                "s" : 71,
                "l" : 10,
                "a" : 0.6
            },

            "dark" : {
                "s" : 65,
                "l" : 95,
                "a" : 0.67
            }
        },
        "text-disabled-color" : {
            "_comment" : "No notifications, Searching..., etc. labels",
            "replace" : "TEXT-DISABLED-COLOR",

            "light" : {
                "s" : 71,
                "l" : 10,
                "a" : 0.38
            },

            "dark" : {
                "s" : 65,
                "l" : 95,
                "a" : 0.38
            }
        },

        "text-inverted-color": {
            "_comment" : "Screenshot UI shot/cast button",
            "replace" : "TEXT-INVERTED-COLOR",

            "light" : {
                "s" : 65,
                "l" : 95,
                "a" : 1
            },

            "dark" : {
                "s" : 71,
                "l" : 10,
                "a" : 0.87
            }
        },

        "border-shadow" : {
            "_comment" : "Used as border in buttons",
            "replace" : "BORDER-SHADOW",

            "light" : {
                "s" : 0,
                "l" : 0,
                "a" : 0.05
            },

            "dark" : {
                "s" : 0,
                "l" : 255,
                "a" : 0.03
            }
        },
        "border-menu-shadow" : {
            "_comment" : "Used as border in menus",
            "replace" : "BORDER-MENU-SHADOW",

            "light" : {
                "s" : 0,
                "l" : 0,
                "a" : 0.1
            },

            "dark" : {
                "s" : 0,
                "l" : 255,
                "a" : 0.07
            }
        },

        "separator-color" : {
            "_comment" : "Color for separators",
            "replace" : "SEPARATOR-COLOR",

            "light" : {
                "s" : 0,
                "l" : 0,
                "a" : 0.1
            },

            "dark" : {
                "s" : 0,
                "l" : 255,
                "a" : 0.1
            }
        },

        "show-apps-icon-color" : {
            "_comment" : "Dash: Show Apps icon",
            "replace" : "SHOW-APPS-ICON-COLOR",

            "light" : {
                "s" : 4,
                "l" : 30,
                "a" : 1
            },

            "dark" : {
                "s" : 65,
                "l" : 95,
                "a" : 1
            }
        },

        "scrollbar-color" : {
            "_comment" : "Special color for scrollbars",
            "replace" : "SCROLLBAR-COLOR",

            "light" : {
                "s" : 20,
                "l" : 70,
                "a" : 0.75
            },

            "dark" : {
                "s" : 10,
                "l" : 25,
                "a" : 0.75
            }
        },
        "scrollbar_hover" : {
            "replace" : "SCROLLBAR_HOVER",

            "light" : {
                "s" : 20,
                "l" : 70,
                "a" : 1
            },

            "dark" : {
                "s" : 12,
                "l" : 25,
                "a" : 1
            }
        },
        "scrollbar_active" : {
            "replace" : "SCROLLBAR_ACTIVE",

            "light" : {
                "s" : 20,
                "l" : 70,
                "a" : 0.87
            },

            "dark" : {
                "s" : 12,
                "l" : 35,
                "a" : 0.87
            }
        },
        
        "page-nav-hint" : {
            "_comment" : "Left and right hints on edges of the screen when dragging app icon ",
            "replace" : "PAGE-NAV-HINT",

            "light" : {
                "s" : 95,
                "l" : 20,
                "a" : 0.05
            },

            "dark" : {
                "s" : 15,
                "l" : 90,
                "a" : 0.05
            }
        },
    
        "section-color" : {
            "_comment" : "Same as ACCENT-DISABLED-COLOR, but less contrast and has no transparency",
            "replace" : "SECTION-COLOR",

            "light" : {
                "s" : 45,
                "l" : 92,
                "a" : 1
            },

            "dark" : {
                "s" : 6,
                "l" : 12,
                "a" : 1
            }
        },

        "close-button-color" : {
            "_comment" : "Same as ACCENT-DISABLED-COLOR, but has no transparency",
            "replace" : "CLOSE-BUTTON-COLOR",

            "light" : {
                "s" : 35,
                "l" : 90,
                "a" : 1
            },

            "dark" : {
                "s" : 6,
                "l" : 15,
                "a" : 1
            }
        },
        "close-button_hover" : {
            "_comment" : "Same as ACCENT-DISABLED_HOVER, but has no transparency",
            "replace" : "CLOSE-BUTTON_HOVER",

            "light" : {
                "s" : 35,
                "l" : 85,
                "a" : 1
            },

            "dark" : {
                "s" : 7,
                "l" : 20,
                "a" : 1
            }
        }
        
    },
    
    "colors" : {
        "red" : {
            "h" : 0,
            "s" : null
        },
        "yellow" : {
            "h" : 40,
            "s" : null
        },
        "green" : {
            "h" : 135,
            "s" : null
        },
        "blue" : {
            "h" : 210,
            "s" : null
        },
        "purple" : {
            "h" : 275,
            "s" : null
        },
        "pink" : {
            "h" : 295,
            "s" : null
        },
        "gray" : {
            "h" : 0,
            "s" : 0
        }
    }
}