{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/tr/docs/variables",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/variables","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"tr","title":"Değişkenler","markdown":"\nKullanabileceğiniz birçok `scss` değişken, oluşturduk. Kullanım için sadece değişkenleri içeren `.scss` dosyasını import edebilirsiniz.\n\n```scss\n@import 'gralig/scss/abstracts/_variables.scss';\n```\n\n## Başlangıç Değişkenleri\n\nBaşlangıç renk değişkenleri için [renkler](/docs/colors 'Renkler Sayfası') sayfasını kontrol edebilirsiniz.\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Değişken</th>\n          <th>Tip</th>\n          <th>Değer</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$font-size</td>\n          <td>font-size</td>\n          <td>1.6rem</td>\n        </tr>\n        <tr>\n          <td>$font-size-s</td>\n          <td>font-size</td>\n          <td>1.4rem</td>\n        </tr>\n        <tr>\n          <td>$font-size-l</td>\n          <td>font-size</td>\n          <td>1.2rem</td>\n        </tr>\n        <tr>\n          <td>$font-thin</td>\n          <td>font-weight</td>\n          <td>lighter</td>\n        </tr>\n        <tr>\n          <td>$font-normal</td>\n          <td>font-weight</td>\n          <td>normal</td>\n        </tr>\n        <tr>\n          <td>$font-bold</td>\n          <td>font-weight</td>\n          <td>bold</td>\n        </tr>\n        <tr>\n          <td>$font-family-general</td>\n          <td>font-family</td>\n          <td>-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n  Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif</td>\n        </tr>\n         <tr>\n            <td>$font-family</td>\n            <td>font-family</td>\n            <td>\"Catamaran\", sans-serif</td>\n          </tr>\n          <tr>\n            <td>$space-xxs</td>\n            <td>size</td>\n            <td>0.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-xs</td>\n            <td>size</td>\n            <td>0.4rem</td>\n          </tr>\n          <tr>\n            <td>$space-s</td>\n            <td>size</td>\n            <td>0.8rem</td>\n          </tr>\n          <tr>\n            <td>$space</td>\n            <td>size</td>\n            <td>1.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-m</td>\n            <td>size</td>\n            <td>1.6rem</td>\n          </tr>\n          <tr>\n            <td>$space-l</td>\n            <td>size</td>\n            <td>2.4rem</td>\n          </tr>\n          <tr>\n            <td>$space-xl</td>\n            <td>size</td>\n            <td>3.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-xxl</td>\n            <td>size</td>\n            <td>6.4rem</td>\n          </tr>\n          <tr>\n            <td>$line-height-s</td>\n            <td>size</td>\n            <td>1.2</td>\n          </tr>\n          <tr>\n            <td>$line-height</td>\n            <td>size</td>\n            <td>1.5</td>\n          </tr>\n          <tr>\n            <td>$line-height-m</td>\n            <td>size</td>\n            <td>1.6</td>\n          </tr>\n          <tr>\n            <td>$line-height-l</td>\n            <td>size</td>\n            <td>1.7</td>\n          </tr>\n          <tr>\n            <td>$border-radius</td>\n            <td>size</td>\n            <td>0.2rem</td>\n          </tr>\n          <tr>\n            <td>$border-radius-full</td>\n            <td>size</td>\n            <td>50%</td>\n          </tr>\n          <tr>\n            <td>$border-radius-full</td>\n            <td>size</td>\n            <td>50%</td>\n          </tr>\n          <tr>\n            <td>$transition-default</td>\n            <td>transition</td>\n            <td>all 0.15s ease-in</td>\n          </tr>\n          <tr>\n            <td>$transition-secondary</td>\n            <td>transition</td>\n            <td>all 0.3s ease-in</td>\n          </tr>\n          <tr>\n            <td>$transparent</td>\n            <td>color</td>\n            <td>transparent</td>\n          </tr>\n          <tr>\n            <td>$white</td>\n            <td>color</td>\n            <td>hsl(0, 0%, 100%)</td>\n          </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Türetilmiş Değişkenler\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Değişken</th>\n          <th>Tip</th>\n          <th>Değer</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$color-background</td>\n          <td>color</td>\n          <td>$white</td>\n        </tr>\n        <tr>\n          <td>$color-font</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-font-secondary</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-font-revert</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-main</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-secondary</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-light</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-lighter</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-border</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-border-dark</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-input-disabled</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-input-placeholder</td>\n          <td>color</td>\n          <td>$mischka</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-main, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-blue</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-blue, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-green</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-green, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-yellow</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-yellow, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-red</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-red, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$p-size</td>\n          <td>font-size</td>\n          <td>$font-size</td>\n        </tr>\n        <tr>\n          <td>$p-s-size</td>\n          <td>font-size</td>\n          <td>$font-size * 0.8125</td>\n        </tr>\n        <tr>\n          <td>$p-l-size</td>\n          <td>font-size</td>\n          <td>$font-size * 1.125</td>\n        </tr>\n        <tr>\n          <td>$el-font-size</td>\n          <td>font-size</td>\n          <td>$font-size * 0.8125</td>\n        </tr>\n        <tr>\n          <td>$el-font-size-s</td>\n          <td>font-size</td>\n          <td>$font-size * 0.6875</td>\n        </tr>\n        <tr>\n          <td>$el-font-size-l</td>\n          <td>font-size</td>\n          <td>$font-size * 0.9375</td>\n        </tr>\n        <tr>\n          <td>$content-padding-inline</td>\n          <td>size</td>\n          <td>$space-xl</td>\n        </tr>\n        <tr>\n          <td>$content-padding-block</td>\n          <td>size</td>\n          <td>$space-m</td>\n        </tr>\n        <tr>\n          <td>$color-blue</td>\n          <td>color</td>\n          <td>$summer</td>\n        </tr>\n        <tr>\n          <td>$color-blue-light</td>\n          <td>color</td>\n          <td>$summer-light</td>\n        </tr>\n        <tr>\n          <td>$color-blue-lighter</td>\n          <td>color</td>\n          <td>$summer-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-blue-dark</td>\n          <td>color</td>\n          <td>$summer-dark</td>\n        </tr>\n        <tr>\n          <td>$color-blue-darker</td>\n          <td>color</td>\n          <td>$summer-darker</td>\n        </tr>\n        <tr>\n          <td>$color-green</td>\n          <td>color</td>\n          <td>$shamrock</td>\n        </tr>\n        <tr>\n          <td>$color-green-light</td>\n          <td>color</td>\n          <td>$shamrock-light</td>\n        </tr>\n        <tr>\n          <td>$color-green-lighter</td>\n          <td>color</td>\n          <td>$shamrock-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-green-dark</td>\n          <td>color</td>\n          <td>$shamrock-dark</td>\n        </tr>\n        <tr>\n          <td>$color-green-darker</td>\n          <td>color</td>\n          <td>$shamrock-darker</td>\n        </tr>\n        <tr>\n          <td>$color-yellow</td>\n          <td>color</td>\n          <td>$tulip</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-light</td>\n          <td>color</td>\n          <td>$tulip-light</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-lighter</td>\n          <td>color</td>\n          <td>$tulip-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-dark</td>\n          <td>color</td>\n          <td>$tulip-dark</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-darker</td>\n          <td>color</td>\n          <td>$tulip-darker</td>\n        </tr>\n        <tr>\n          <td>$color-red</td>\n          <td>color</td>\n          <td>$flame</td>\n        </tr>\n        <tr>\n          <td>$color-red-light</td>\n          <td>color</td>\n          <td>$flame-light</td>\n        </tr>\n        <tr>\n          <td>$color-red-lighter</td>\n          <td>color</td>\n          <td>$flame-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-red-dark</td>\n          <td>color</td>\n          <td>$flame-dark</td>\n        </tr>\n        <tr>\n          <td>$color-red-darker</td>\n          <td>color</td>\n          <td>$flame-darker</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Karanlık Mod Değişkenleri\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Değişken</th>\n          <th>Tip</th>\n          <th>Değer</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$color-font-dt</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-font-secondary-dt</td>\n          <td>color</td>\n          <td>$ghost</td>\n        </tr>\n        <tr>\n          <td>$color-font-revert-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-background-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-main-dt</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-secondary-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-button-font-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-border-dt</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-border-light-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-code-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-mute-dt</td>\n          <td>color</td>\n          <td>darken($abbey, 8%)</td>\n        </tr>\n        <tr>\n          <td>$color-alert-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-alert-font-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-card-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-link-font-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-link-hover-dt</td>\n          <td>color</td>\n          <td>$ghost</td>\n        </tr>\n        <tr>\n          <td>$color-input-disabled-dt</td>\n          <td>color</td>\n          <td>rgba($iron, 0.2)</td>\n        </tr>\n        <tr>\n          <td>$color-input-placeholder-dt</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>","mdtype":null,"section":"variables"},{"lang":"en","title":"Variables","markdown":"\nWe created many variables you can use. For use them simply import the variables `.scss` file.\n\n```scss\n@import 'gralig/scss/abstracts/_variables.scss';\n```\n\n## Initial Variables\n\nYou can check [colors](/docs/colors 'Colors Page') page for the initial color variables.\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Variable</th>\n          <th>Type</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$font-size</td>\n          <td>font-size</td>\n          <td>1.6rem</td>\n        </tr>\n        <tr>\n          <td>$font-size-s</td>\n          <td>font-size</td>\n          <td>1.4rem</td>\n        </tr>\n        <tr>\n          <td>$font-size-l</td>\n          <td>font-size</td>\n          <td>1.2rem</td>\n        </tr>\n        <tr>\n          <td>$font-thin</td>\n          <td>font-weight</td>\n          <td>lighter</td>\n        </tr>\n        <tr>\n          <td>$font-normal</td>\n          <td>font-weight</td>\n          <td>normal</td>\n        </tr>\n        <tr>\n          <td>$font-bold</td>\n          <td>font-weight</td>\n          <td>bold</td>\n        </tr>\n        <tr>\n          <td>$font-family-general</td>\n          <td>font-family</td>\n          <td>-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n  Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif</td>\n        </tr>\n         <tr>\n            <td>$font-family</td>\n            <td>font-family</td>\n            <td>\"Catamaran\", sans-serif</td>\n          </tr>\n          <tr>\n            <td>$space-xxs</td>\n            <td>size</td>\n            <td>0.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-xs</td>\n            <td>size</td>\n            <td>0.4rem</td>\n          </tr>\n          <tr>\n            <td>$space-s</td>\n            <td>size</td>\n            <td>0.8rem</td>\n          </tr>\n          <tr>\n            <td>$space</td>\n            <td>size</td>\n            <td>1.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-m</td>\n            <td>size</td>\n            <td>1.6rem</td>\n          </tr>\n          <tr>\n            <td>$space-l</td>\n            <td>size</td>\n            <td>2.4rem</td>\n          </tr>\n          <tr>\n            <td>$space-xl</td>\n            <td>size</td>\n            <td>3.2rem</td>\n          </tr>\n          <tr>\n            <td>$space-xxl</td>\n            <td>size</td>\n            <td>6.4rem</td>\n          </tr>\n          <tr>\n            <td>$line-height-s</td>\n            <td>size</td>\n            <td>1.2</td>\n          </tr>\n          <tr>\n            <td>$line-height</td>\n            <td>size</td>\n            <td>1.5</td>\n          </tr>\n          <tr>\n            <td>$line-height-m</td>\n            <td>size</td>\n            <td>1.6</td>\n          </tr>\n          <tr>\n            <td>$line-height-l</td>\n            <td>size</td>\n            <td>1.7</td>\n          </tr>\n          <tr>\n            <td>$border-radius</td>\n            <td>size</td>\n            <td>0.2rem</td>\n          </tr>\n          <tr>\n            <td>$border-radius-full</td>\n            <td>size</td>\n            <td>50%</td>\n          </tr>\n          <tr>\n            <td>$border-radius-full</td>\n            <td>size</td>\n            <td>50%</td>\n          </tr>\n          <tr>\n            <td>$transition-default</td>\n            <td>transition</td>\n            <td>all 0.15s ease-in</td>\n          </tr>\n          <tr>\n            <td>$transition-secondary</td>\n            <td>transition</td>\n            <td>all 0.3s ease-in</td>\n          </tr>\n          <tr>\n            <td>$transparent</td>\n            <td>color</td>\n            <td>transparent</td>\n          </tr>\n          <tr>\n            <td>$white</td>\n            <td>color</td>\n            <td>hsl(0, 0%, 100%)</td>\n          </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Derived Variables\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Variable</th>\n          <th>Type</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$color-background</td>\n          <td>color</td>\n          <td>$white</td>\n        </tr>\n        <tr>\n          <td>$color-font</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-font-secondary</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-font-revert</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-main</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-secondary</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-light</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-lighter</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-border</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-border-dark</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-input-disabled</td>\n          <td>color</td>\n          <td>$porcelain</td>\n        </tr>\n        <tr>\n          <td>$color-input-placeholder</td>\n          <td>color</td>\n          <td>$mischka</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-main, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-blue</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-blue, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-green</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-green, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-yellow</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-yellow, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$el-box-shadow-red</td>\n          <td>color</td>\n          <td>0 0 3px 1px rgba($color-red, 0.5)</td>\n        </tr>\n        <tr>\n          <td>$p-size</td>\n          <td>font-size</td>\n          <td>$font-size</td>\n        </tr>\n        <tr>\n          <td>$p-s-size</td>\n          <td>font-size</td>\n          <td>$font-size * 0.8125</td>\n        </tr>\n        <tr>\n          <td>$p-l-size</td>\n          <td>font-size</td>\n          <td>$font-size * 1.125</td>\n        </tr>\n        <tr>\n          <td>$el-font-size</td>\n          <td>font-size</td>\n          <td>$font-size * 0.8125</td>\n        </tr>\n        <tr>\n          <td>$el-font-size-s</td>\n          <td>font-size</td>\n          <td>$font-size * 0.6875</td>\n        </tr>\n        <tr>\n          <td>$el-font-size-l</td>\n          <td>font-size</td>\n          <td>$font-size * 0.9375</td>\n        </tr>\n        <tr>\n          <td>$content-padding-inline</td>\n          <td>size</td>\n          <td>$space-xl</td>\n        </tr>\n        <tr>\n          <td>$content-padding-block</td>\n          <td>size</td>\n          <td>$space-m</td>\n        </tr>\n        <tr>\n          <td>$color-blue</td>\n          <td>color</td>\n          <td>$summer</td>\n        </tr>\n        <tr>\n          <td>$color-blue-light</td>\n          <td>color</td>\n          <td>$summer-light</td>\n        </tr>\n        <tr>\n          <td>$color-blue-lighter</td>\n          <td>color</td>\n          <td>$summer-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-blue-dark</td>\n          <td>color</td>\n          <td>$summer-dark</td>\n        </tr>\n        <tr>\n          <td>$color-blue-darker</td>\n          <td>color</td>\n          <td>$summer-darker</td>\n        </tr>\n        <tr>\n          <td>$color-green</td>\n          <td>color</td>\n          <td>$shamrock</td>\n        </tr>\n        <tr>\n          <td>$color-green-light</td>\n          <td>color</td>\n          <td>$shamrock-light</td>\n        </tr>\n        <tr>\n          <td>$color-green-lighter</td>\n          <td>color</td>\n          <td>$shamrock-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-green-dark</td>\n          <td>color</td>\n          <td>$shamrock-dark</td>\n        </tr>\n        <tr>\n          <td>$color-green-darker</td>\n          <td>color</td>\n          <td>$shamrock-darker</td>\n        </tr>\n        <tr>\n          <td>$color-yellow</td>\n          <td>color</td>\n          <td>$tulip</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-light</td>\n          <td>color</td>\n          <td>$tulip-light</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-lighter</td>\n          <td>color</td>\n          <td>$tulip-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-dark</td>\n          <td>color</td>\n          <td>$tulip-dark</td>\n        </tr>\n        <tr>\n          <td>$color-yellow-darker</td>\n          <td>color</td>\n          <td>$tulip-darker</td>\n        </tr>\n        <tr>\n          <td>$color-red</td>\n          <td>color</td>\n          <td>$flame</td>\n        </tr>\n        <tr>\n          <td>$color-red-light</td>\n          <td>color</td>\n          <td>$flame-light</td>\n        </tr>\n        <tr>\n          <td>$color-red-lighter</td>\n          <td>color</td>\n          <td>$flame-lighter</td>\n        </tr>\n        <tr>\n          <td>$color-red-dark</td>\n          <td>color</td>\n          <td>$flame-dark</td>\n        </tr>\n        <tr>\n          <td>$color-red-darker</td>\n          <td>color</td>\n          <td>$flame-darker</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Dark Mode Variables\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Variable</th>\n          <th>Type</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>$color-font-dt</td>\n          <td>color</td>\n          <td>$iron</td>\n        </tr>\n        <tr>\n          <td>$color-font-secondary-dt</td>\n          <td>color</td>\n          <td>$ghost</td>\n        </tr>\n        <tr>\n          <td>$color-font-revert-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-background-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-main-dt</td>\n          <td>color</td>\n          <td>$raven</td>\n        </tr>\n        <tr>\n          <td>$color-secondary-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-button-font-dt</td>\n          <td>color</td>\n          <td>$woodsmoke</td>\n        </tr>\n        <tr>\n          <td>$color-border-dt</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n        <tr>\n          <td>$color-border-light-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-code-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-mute-dt</td>\n          <td>color</td>\n          <td>darken($abbey, 8%)</td>\n        </tr>\n        <tr>\n          <td>$color-alert-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-alert-font-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-card-dt</td>\n          <td>color</td>\n          <td>$shark</td>\n        </tr>\n        <tr>\n          <td>$color-link-font-dt</td>\n          <td>color</td>\n          <td>$oslo</td>\n        </tr>\n        <tr>\n          <td>$color-link-hover-dt</td>\n          <td>color</td>\n          <td>$ghost</td>\n        </tr>\n        <tr>\n          <td>$color-input-disabled-dt</td>\n          <td>color</td>\n          <td>rgba($iron, 0.2)</td>\n        </tr>\n        <tr>\n          <td>$color-input-placeholder-dt</td>\n          <td>color</td>\n          <td>$abbey</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>","mdtype":"MDHTML","section":"variables"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/variables/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/variables","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}