<commit_before>var comments = {
"comments" : [
	{
		"el": "header[role=banner]",
		"title" : "Masthead",
		"comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests.</p>"
	},
	{
		"el": ".logo",
		"title" : "Logo",
		"comment": "Vie palvelun etusivulle. SVG tai muu vektorikuva 48 px koossa.</p>"
	},
	{
		"el": "#atoms-colors",
		"title" : "Värit – Colors",
		"comment": "Palvelut käyttävät samaa värisarjaa. Kullekin palvelulle on valittu oma heräteväri. Värejä suunniteltaessa on huomioitava <a href=\"http://www.w3.org/Translations/WCAG20-fi/\" target=\"_blank\">WCAG 2.0</a> kontrasti- luminanssi- ja fonttivaatimukset.</p><p>Huomiovärillä merkitään käyttäjätarinan mukaan seuraava painike jota käyttäjän odotetaan pääkäyttötapauksen mukaan painavan. Vaihtoehtoisten käyttötapausten painikkeet ovat tummanharmaat. Painikkeita joita ei pääse käyttämään, ei piiloteta vaan ne näytetään vaaleammalla harmaalla.</p>Services all use same colorspace. There is a primary attention color for each service, that also serves as the brand color in the logo. Colors have their luminance according to WCAG20 accessibility requirements.</p><h3>Yhteiset Värit – Common Colors</h3><h4>Valkoinen (#FFFFF)</h4><p>Tausta huomioalueille.</p><h4>Vaaleanharmaa (#F0F0F0)</h4><p>Toissijainen taustaväri vähemmälle huomiolle tarkoitetulle alueille.</p><h4>Tummanharmaa (#444444)</h4><p>Tummanharmaa eli murrettu musta.</p><h4>Sininen (#0089F2)</h4><p>Sininen linkkiväri kautta palveluiden, joka tarjoaa paremman kontrastin kuin korostusväri eikä ole sidottu yhteen palveluun.</p><h4>Punainen (#FF0000)</h4><p>Punaista käytetään virheilmoituksissa ja muissa kriittisissä käyttäjäpalautteissa, jonka tarkoitus on saada käyttäjä pysähtyä keskeyttämään tekemänsä.</p><h4>Vihreä (#2FC090)</h4><p>Palvelun sisäisissä ilmoituksissa ja infolohkoissa on ohjealueella käytössä vihreä (tai punainen) väri. Vihreää käytetään viestimään onnistuneesti päättyneestä käyttötapauksesta tai informaatiosta, jonka tarkoitus on palkita ja kannustaa käyttäjää jatkamaan käyttöä.</p><h4>Harmaa (#E3E3E3)</h4><p>Pois käytöstä olevan tekstin, ikonin tai painikkeen väri.</p><h3>Palvelukohtaiset ohjeet – Service-specific instructions</h3><h3>Otakantaa</h3><h4>Turkoosi (#17CEE4)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Keltainen (#D4DC3F)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p><h3>Lausuntopalvelu (#F16521)</h3><h4>Oranssi (#F16521)</h3><p>Lausuntopalvelun ensisijainen huomioväri ja palvelun logon väri.</p><h4>Turkoosi (?)</h4><p>Lausuntopalvelun toisisijainen huomioväri. Ei käytössä käyttöönottovaiheessa. Voi poimia sopivan Otakantaa osallistumistapojen väreistä.</p><h3>Kansalaisaloite</h3><h4>Vihreä (#077480)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Purppura (#BB448E)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p><h3>Kuntalaisaloitepalvelu</h3><h4>Vaaleanvihreä (#ADAD2D)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Oranssi (#E2A31C)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p>"
	},
	{
		"el": "#atoms-buttons",
		"title" : "Painikkeet – Buttons",
		"comment": "Painikkeet ovat kulmastaan yhden pikselin verran pyöristettyjä suorakulmioita. Kaikissa painikkeissa suositellaan käyttämään selventäviä ikoneita tekstiotsikon lisäksi.</p><p>Luodaan classilla, voi olla a-, input- tai button-tageilla.</p><h4>Painikkeiden ikonit</h4><p>Painikkeissa ikoni laitetaan painikkeen tekstin edelle tekstin värisenä.</p><h4>Painikkeiden tilat</h4><p>Painikkeen käytön voi estää lisäämällä painikkeen luokkaan <span style=\"red\">disabled</span>.</p>"
	},
	{
		"el": "#atoms-button-groups",
		"title" : "Painikkeet – Button Groups",<commit_msg>Update annotations.js<commit_after>var comments = {
"comments" : [
	{
		"el": "header[role=banner]",
		"title" : "Masthead",
		"comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests.</p>"
	},
	{
		"el": ".logo",
		"title" : "Logo",
		"comment": "Vie palvelun etusivulle. SVG tai muu vektorikuva 48 px koossa.</p>"
	},
	{
		"el": "#atoms-colors",
		"title" : "Värit – Colors",
		"comment": "Palvelut käyttävät samaa värisarjaa. Kullekin palvelulle on valittu oma heräteväri. Värejä suunniteltaessa on huomioitava <a href=\"http://www.w3.org/Translations/WCAG20-fi/\" target=\"_blank\">WCAG 2.0</a> kontrasti- luminanssi- ja fonttivaatimukset.</p><p>Huomiovärillä merkitään käyttäjätarinan mukaan seuraava painike jota käyttäjän odotetaan pääkäyttötapauksen mukaan painavan. Vaihtoehtoisten käyttötapausten painikkeet ovat tummanharmaat. Painikkeita joita ei pääse käyttämään, ei piiloteta vaan ne näytetään vaaleammalla harmaalla.</p>Services all use same colorspace. There is a primary attention color for each service, that also serves as the brand color in the logo. Colors have their luminance according to WCAG20 accessibility requirements.</p><h3>Yhteiset Värit – Common Colors</h3><h4>Valkoinen (#FFFFF)</h4><p>Tausta huomioalueille.</p><h4>Vaaleanharmaa (#F0F0F0)</h4><p>Toissijainen taustaväri vähemmälle huomiolle tarkoitetulle alueille.</p><h4>Tummanharmaa (#444444)</h4><p>Tummanharmaa eli murrettu musta.</p><h4>Sininen (#0089F2)</h4><p>Sininen linkkiväri kautta palveluiden, joka tarjoaa paremman kontrastin kuin korostusväri eikä ole sidottu yhteen palveluun.</p><h4>Punainen (#FF0000)</h4><p>Punaista käytetään virheilmoituksissa ja muissa kriittisissä käyttäjäpalautteissa, jonka tarkoitus on saada käyttäjä pysähtyä keskeyttämään tekemänsä.</p><h4>Vihreä (#2FC090)</h4><p>Palvelun sisäisissä ilmoituksissa ja infolohkoissa on ohjealueella käytössä vihreä (tai punainen) väri. Vihreää käytetään viestimään onnistuneesti päättyneestä käyttötapauksesta tai informaatiosta, jonka tarkoitus on palkita ja kannustaa käyttäjää jatkamaan käyttöä.</p><h4>Harmaa (#E3E3E3)</h4><p>Pois käytöstä olevan tekstin, ikonin tai painikkeen väri.</p><h3>Palvelukohtaiset ohjeet – Service-specific instructions</h3><h3>Otakantaa</h3><h4>Turkoosi (#17CEE4)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Keltainen (#D4DC3F)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p><h3>Lausuntopalvelu (#F16521)</h3><h4>Oranssi (#F16521)</h3><p>Lausuntopalvelun ensisijainen huomioväri ja palvelun logon väri.</p><h4>Turkoosi (#12C4AE)</h4><p>Lausuntopalvelun toisisijainen huomioväri. Ei käytössä käyttöönottovaiheessa. Voi poimia sopivan Otakantaa osallistumistapojen väreistä.</p><h3>Kansalaisaloite</h3><h4>Vihreä (#077480)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Purppura (#BB448E)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p><h3>Kuntalaisaloitepalvelu</h3><h4>Vaaleanvihreä (#ADAD2D)</h4><p>Ensisijainen huomioväri. Käytetään ensisijaisesti aktiivisissa painikkeissa – esim. lomakkeiden lähetyksissä.</p><h4>Oranssi (#E2A31C)</h4><p>Toissijainen huomioväri. Käytetään vaihtoehtoisia käyttötapauksia käynnistävissä painikkeissa – esim. hankkeen lisäasetuksissa.</p>"
	},
	{
		"el": "#atoms-buttons",
		"title" : "Painikkeet – Buttons",
		"comment": "Painikkeet ovat kulmastaan yhden pikselin verran pyöristettyjä suorakulmioita. Kaikissa painikkeissa suositellaan käyttämään selventäviä ikoneita tekstiotsikon lisäksi.</p><p>Luodaan classilla, voi olla a-, input- tai button-tageilla.</p><h4>Painikkeiden ikonit</h4><p>Painikkeissa ikoni laitetaan painikkeen tekstin edelle tekstin värisenä.</p><h4>Painikkeiden tilat</h4><p>Painikkeen käytön voi estää lisäämällä painikkeen luokkaan <span style=\"red\">disabled</span>.</p>"
	},
	{
		"el": "#atoms-button-groups",
		"title" : "Painikkeet – Button Groups",
{'fraction_non_alphanumeric': 0.11499423298731257, 'fraction_numerical': 0.025259515570934254, 'mean_word_length': 6.762757385854969, 'pattern_counts': {'":': 18, '<': 189, '<?xml version=': 0, '>': 189, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4909771', 'n_tokens_mistral': 3974, 'n_tokens_neox': 3538, 'n_words': 760}