{{> header}}

<div class="atlas-stat-sizes-page-title">
	<div class="atlas-overline">
		<svg width="16" height="16" role="img">
			<use href="#{{ content.documentation.component.icon }}"></use>
		</svg>
		Colors
	</div>
	<div class="atlas-section">
		<h1 class="atlas atlas-title atlas-title_1">
			<span class="atlas-title__text">
				{{projectInfo.name}}
			</span>
		</h1>
	</div>
</div>

<section class="atlas-section">
<span class="atlas-anchor" id="h1-icons"></span>
<h1 class="atlas atlas-title atlas-title_1">
	<span class="atlas-title__text">
		Palette: {{ content.documentation.component.id }} {{ content.documentation.component.cid }}
	</span>
</h1>
<section>

<div class="atlas atlas-code scss">
<pre><code class="language-scss">{{#content.documentation.themeColorGroups}}{{originalComment}}
{{originalVariable}}: (
{{#variables}}
	{{key}}: {{hex}},
{{/variables}}
);
{{/content.documentation.themeColorGroups}}
</code></pre>
</div>

{{#content.documentation.themeColorGroups}}
<h2>{{ name }} - {{ group }}</h2>
<div class="atlas-colors">
	{{#variables}}
	<div class="atlas-colors__item">
		<figure class="atlas-color">
			<div class="atlas-color__figure">
				<span class="atlas-color__figure-color" style="background:{{hex}}"></span>
			</div>
			<figcaption class="atlas-color__caption">
				<strong class="atlas-color__name">{{key}}</strong>
				<code class="atlas-color__code">{{name}}</code>
				<code class="atlas-color__code">{{hex}}</code>
			</figcaption>
		</figure>
	</div>
	{{/variables}}
</div>
{{/content.documentation.themeColorGroups}}

{{#content.documentation.colorSections}}
<h2>{{ name }}</h2>
<div class="atlas-colors">
	{{#values}}
	<div class="atlas-colors__item">
		<figure class="atlas-color">
			<div class="atlas-color__figure">
				<span class="atlas-color__figure-color" style="background:{{hex}}"></span>
			</div>
			<figcaption class="atlas-color__caption">
				<strong class="atlas-color__name">{{name}}</strong>
				<code class="atlas-color__code">{{scssVariable}}</code>
				<code class="atlas-color__code">{{hex}}</code>
			</figcaption>
		</figure>
	</div>
	{{/values}}
</div>
{{/content.documentation.colorSections}}

{{#content.documentation.cssVariables}}
<h2 style="font-size: 30px;">{{ name }}</h2>

<div class="atlas-colors">
	{{#values}}
	<div class="atlas-colors__item">
		<figure class="atlas-color">
			<div class="atlas-color__figure">
				<span class="atlas-color__figure-color" style="background:{{ value }}"></span>
			</div>
			<figcaption class="atlas-color__caption">
				<strong class="atlas-color__name">{{name}}</strong>
				<code class="atlas-color__code">var(--color-{{name}})</code>
				<code class="atlas-color__code">{{scssVariable}}</code>
				<code class="atlas-color__code">{{value}}</code>
			</figcaption>
		</figure>
	</div>
	{{/values}}
</div>
{{/content.documentation.cssVariables}}

<div class="atlas atlas-code css">
<pre><code class="language-css">{{#content.documentation.cssVariables}}/* {{ name }} */
{{#values}}
--color-{{name}}: {{value}};
{{/values}}

{{/content.documentation.cssVariables}}
</code></pre>
</div>

</section>
{{> footer}}