activity-grid/dist/template.d.ts

A customizable activity grid component similar to GitHub's contribution graph

export declare const template = "\n  <style>\n    :host {\n      display: inline-block;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n    }\n\n    /* Dark mode styles */\n    :host([dark-mode]) {\n      color: #c9d1d9;\n      background-color: transparent;\n    }\n\n    .container {\n      display: inline-grid;\n      grid-template-rows: auto 1fr;\n    }\n\n    .months {\n      display: flex;\n      padding-left: 32px;\n      font-size: 12px;\n      color: #767676;\n      height: 20px;\n    }\n\n    :host([dark-mode]) .months {\n      color: #8b949e;\n    }\n\n    .months-spacer {\n      width: 30px;\n    }\n\n    .months-container {\n      display: flex;\n      justify-content: space-between;\n      flex: 1;\n    }\n\n    .months span {\n      padding: 0 4px;\n    }\n\n    .grid-wrapper {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: 4px;\n    }\n\n    .weekdays {\n      display: grid;\n      grid-template-rows: repeat(7, 1fr);\n      gap: 2px;\n      text-align: right;\n      padding-left: 6px;\n      padding-right: 2px;\n      font-size: 12px;\n      color: #767676;\n      margin-top: -1px;\n      height: calc(7 * 10px + 6 * 2px);\n    }\n\n    :host([dark-mode]) .weekdays {\n      color: #8b949e;\n    }\n\n    .weekdays div {\n      height: 10px;\n      line-height: 10px;\n    }\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(var(--grid-columns), 1fr);\n      grid-template-rows: repeat(7, 1fr);\n      gap: 2px;\n    }\n\n    .cell {\n      width: 10px;\n      height: 10px;\n      border-radius: 2px;\n    }\n  </style>\n";