@omicronenergy/oscd-shell 0.0.10 → 0.0.12

package/dist/landing-page/landing-page.js

@@ -55,13 +55,13 @@ LandingPage.styles = css `
     }
 
     .heading {
-      color: var(--oscd-base3);
+      color: var(--landing-heading-color);
       text-align: center;
-      font-family: 'Roboto';
-      font-size: 50px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
+      font-family: var(--landing-heading-font-family);
+      font-size: var(--landing-heading-size);
+      font-style: var(--landing-heading-style);
+      font-weight: var(--landing-heading-weight);
+      line-height: var(--landing-heading-line-height);
 
       margin-block-start: 64px;
       margin-block-end: 8px;
@@ -70,36 +70,36 @@ LandingPage.styles = css `
     }
 
     .sub-heading {
-      color: var(--oscd-base3);
+      color: var(--landing-subheading-color);
       text-align: center;
-      font-family: Roboto;
-      font-size: 16.909px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 65.194px; /* 385.56% */
+      font-family: var(--landing-subheading-font-family);
+      font-size: var(--landing-subheading-size);
+      font-style: var(--landing-subheading-style);
+      font-weight: var(--landing-subheading-weight);
+      line-height: var(--landing-subheading-line-height);
 
       margin-block-end: 168px;
     }
 
     .menu-plugins-grid {
-      width: 60%;
+      width: var(--landing-grid-width);
       display: flex;
       flex-wrap: wrap;
-      gap: 95px;
+      gap: var(--landing-grid-gap);
       justify-content: center;
       margin: 0 auto;
       padding: 16px 0;
     }
 
     .menu-plugin-item {
-      --md-text-button-container-shape: 2px;
+      --md-text-button-container-shape: var(--landing-card-radius);
       display: flex;
       flex-direction: row;
       align-items: center;
       text-align: center;
       padding: 8px;
-      color: var(--oscd-base3);
-      background: var(--oscd-primary);
+      color: var(--landing-card-text-color);
+      background: var(--landing-card-background);
       transition: background-color 0.3s;
       cursor: pointer;
     }
@@ -109,19 +109,19 @@ LandingPage.styles = css `
     }
 
     .menu-plugin-item-content {
-      color: var(--oscd-base3);
-      width: 240px;
-      height: 180px;
+      color: var(--landing-card-text-color);
+      width: var(--landing-card-width);
+      height: var(--landing-card-height);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 24px;
-      font-family: 'Roboto';
+      font-family: var(--landing-heading-font-family);
     }
 
     .menu-plugin-item-content oscd-icon {
-      --md-icon-size: 54px;
+      --md-icon-size: var(--landing-card-icon-size);
     }
 
     .menu-plugin-item-content span {
@@ -139,7 +139,7 @@ LandingPage.styles = css `
       height: 50px;
       background: linear-gradient(
         to top left,
-        var(--omicron-yellow) 50%,
+        var(--landing-card-corner-accent) 50%,
         transparent 50%
       );
     }

package/dist/landing-page/landing-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"landing-page.js","sourceRoot":"","sources":["../../src/landing-page/landing-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAQ3E,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAzD;;QAOL,gBAAgB;QAGhB,YAAO,GAAW,EAAE,CAAC;QAGrB,eAAU,GAAW,EAAE,CAAC;QAExB,gBAAW,GAAkB,EAAE,CAAC;IAuIlC,CAAC;IAlIC,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,OAAO;gCACR,IAAI,CAAC,UAAU;;UAErC,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;uBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;;;;6BAIc,MAAM,CAAC,IAAI;wBAChB,MAAM,CAAC,IAAI;;;iCAGF,CACxB;;KAEJ,CAAC;IACJ,CAAC;;AAhDM,0BAAc,GAAG;IACtB,WAAW,EAAE,QAAQ;IACrB,kBAAkB,EAAE,cAAc;IAClC,gBAAgB,EAAE,aAAa;CAChC,AAJoB,CAInB;AA8CK,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGX;AA3IF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH;AAExB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACM;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAlBR,WAAW;IADvB,SAAS,EAAE;GACC,WAAW,CAsJvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { PluginEntry } from '../oscd-shell.js';\nimport { LocaleTag } from '../localization.js';\nimport { OscdElevation } from '@omicronenergy/oscd-ui/elevation/OscdElevation.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'landing-page': LandingPage;\n  }\n}\n@localized()\nexport class LandingPage extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon': OscdIcon,\n    'oscd-text-button': OscdTextButton,\n    'oscd-elevation': OscdElevation,\n  };\n\n  /* Properties */\n\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subHeading: string = '';\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  render() {\n    return html`\n      <h1 class=\"heading\">${this.heading}</h1>\n      <h2 class=\"sub-heading\">${this.subHeading}</h2>\n      <div class=\"menu-plugins-grid\">\n        ${this.menuPlugins.map(\n          plugin =>\n            html`<oscd-text-button\n              class=\"menu-plugin-item\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('menu-plugin-select', {\n                    detail: { plugin },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-elevation></oscd-elevation>\n              <div class=\"menu-plugin-item-content\">\n                <oscd-icon>${plugin.icon}</oscd-icon>\n                <span>${plugin.name}</span>\n                <div class=\"menu-plugin-item-corner-wedge\"></div>\n              </div>\n            </oscd-text-button> `,\n        )}\n      </div>\n    `;\n  }\n\n  static styles = css`\n    .host {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n    }\n\n    .heading {\n      color: var(--oscd-base3);\n      text-align: center;\n      font-family: 'Roboto';\n      font-size: 50px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: normal;\n\n      margin-block-start: 64px;\n      margin-block-end: 8px;\n\n      --md-icon-size: 50px;\n    }\n\n    .sub-heading {\n      color: var(--oscd-base3);\n      text-align: center;\n      font-family: Roboto;\n      font-size: 16.909px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 65.194px; /* 385.56% */\n\n      margin-block-end: 168px;\n    }\n\n    .menu-plugins-grid {\n      width: 60%;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 95px;\n      justify-content: center;\n      margin: 0 auto;\n      padding: 16px 0;\n    }\n\n    .menu-plugin-item {\n      --md-text-button-container-shape: 2px;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-align: center;\n      padding: 8px;\n      color: var(--oscd-base3);\n      background: var(--oscd-primary);\n      transition: background-color 0.3s;\n      cursor: pointer;\n    }\n\n    .menu-plugin-item:hover {\n      --md-elevation-level: 2;\n    }\n\n    .menu-plugin-item-content {\n      color: var(--oscd-base3);\n      width: 240px;\n      height: 180px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      font-family: 'Roboto';\n    }\n\n    .menu-plugin-item-content oscd-icon {\n      --md-icon-size: 54px;\n    }\n\n    .menu-plugin-item-content span {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 22px; /* 135% */\n    }\n\n    .menu-plugin-item-corner-wedge {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 50px;\n      height: 50px;\n      background: linear-gradient(\n        to top left,\n        var(--omicron-yellow) 50%,\n        transparent 50%\n      );\n    }\n  `;\n}\n"]}
+{"version":3,"file":"landing-page.js","sourceRoot":"","sources":["../../src/landing-page/landing-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAIjF,OAAO,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAQ3E,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAzD;;QAOL,gBAAgB;QAGhB,YAAO,GAAW,EAAE,CAAC;QAGrB,eAAU,GAAW,EAAE,CAAC;QAExB,gBAAW,GAAkB,EAAE,CAAC;IAuIlC,CAAC;IAlIC,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,OAAO;gCACR,IAAI,CAAC,UAAU;;UAErC,IAAI,CAAC,WAAW,CAAC,GAAG,CACpB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;uBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;;;;6BAIc,MAAM,CAAC,IAAI;wBAChB,MAAM,CAAC,IAAI;;;iCAGF,CACxB;;KAEJ,CAAC;IACJ,CAAC;;AAhDM,0BAAc,GAAG;IACtB,WAAW,EAAE,QAAQ;IACrB,kBAAkB,EAAE,cAAc;IAClC,gBAAgB,EAAE,aAAa;CAChC,AAJoB,CAInB;AA8CK,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGX;AA3IF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH;AAExB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACM;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAlBR,WAAW;IADvB,SAAS,EAAE;GACC,WAAW,CAsJvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { PluginEntry } from '../oscd-shell.js';\nimport { LocaleTag } from '../localization.js';\nimport { OscdElevation } from '@omicronenergy/oscd-ui/elevation/OscdElevation.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'landing-page': LandingPage;\n  }\n}\n@localized()\nexport class LandingPage extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-icon': OscdIcon,\n    'oscd-text-button': OscdTextButton,\n    'oscd-elevation': OscdElevation,\n  };\n\n  /* Properties */\n\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subHeading: string = '';\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  render() {\n    return html`\n      <h1 class=\"heading\">${this.heading}</h1>\n      <h2 class=\"sub-heading\">${this.subHeading}</h2>\n      <div class=\"menu-plugins-grid\">\n        ${this.menuPlugins.map(\n          plugin =>\n            html`<oscd-text-button\n              class=\"menu-plugin-item\"\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('menu-plugin-select', {\n                    detail: { plugin },\n                    bubbles: true,\n                    composed: true,\n                  }),\n                );\n              }}\n            >\n              <oscd-elevation></oscd-elevation>\n              <div class=\"menu-plugin-item-content\">\n                <oscd-icon>${plugin.icon}</oscd-icon>\n                <span>${plugin.name}</span>\n                <div class=\"menu-plugin-item-corner-wedge\"></div>\n              </div>\n            </oscd-text-button> `,\n        )}\n      </div>\n    `;\n  }\n\n  static styles = css`\n    .host {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n    }\n\n    .heading {\n      color: var(--landing-heading-color);\n      text-align: center;\n      font-family: var(--landing-heading-font-family);\n      font-size: var(--landing-heading-size);\n      font-style: var(--landing-heading-style);\n      font-weight: var(--landing-heading-weight);\n      line-height: var(--landing-heading-line-height);\n\n      margin-block-start: 64px;\n      margin-block-end: 8px;\n\n      --md-icon-size: 50px;\n    }\n\n    .sub-heading {\n      color: var(--landing-subheading-color);\n      text-align: center;\n      font-family: var(--landing-subheading-font-family);\n      font-size: var(--landing-subheading-size);\n      font-style: var(--landing-subheading-style);\n      font-weight: var(--landing-subheading-weight);\n      line-height: var(--landing-subheading-line-height);\n\n      margin-block-end: 168px;\n    }\n\n    .menu-plugins-grid {\n      width: var(--landing-grid-width);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--landing-grid-gap);\n      justify-content: center;\n      margin: 0 auto;\n      padding: 16px 0;\n    }\n\n    .menu-plugin-item {\n      --md-text-button-container-shape: var(--landing-card-radius);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-align: center;\n      padding: 8px;\n      color: var(--landing-card-text-color);\n      background: var(--landing-card-background);\n      transition: background-color 0.3s;\n      cursor: pointer;\n    }\n\n    .menu-plugin-item:hover {\n      --md-elevation-level: 2;\n    }\n\n    .menu-plugin-item-content {\n      color: var(--landing-card-text-color);\n      width: var(--landing-card-width);\n      height: var(--landing-card-height);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      font-family: var(--landing-heading-font-family);\n    }\n\n    .menu-plugin-item-content oscd-icon {\n      --md-icon-size: var(--landing-card-icon-size);\n    }\n\n    .menu-plugin-item-content span {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 22px; /* 135% */\n    }\n\n    .menu-plugin-item-corner-wedge {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 50px;\n      height: 50px;\n      background: linear-gradient(\n        to top left,\n        var(--landing-card-corner-accent) 50%,\n        transparent 50%\n      );\n    }\n  `;\n}\n"]}

package/dist/menus/files-menu.js

@@ -62,11 +62,11 @@ FilesMenu.styles = css `
 
     :host oscd-text-button {
       --md-text-button-label-text-line-height: normal;
-      --md-text-button-label-text-family: 'Roboto';
-      --md-text-button-label-text-weight: 500;
-      --md-text-button-label-text-size: 18px;
+      --md-text-button-label-text-family: var(--file-menu-text-font-family);
+      --md-text-button-label-text-weight: var(--file-menu-text-weight);
+      --md-text-button-label-text-size: var(--file-menu-text-size);
       --md-text-button-label-text-style: normal;
-      --md-sys-color-primary: var(--oscd-base3);
+      --md-sys-color-primary: var(--file-menu-text-color);
       display: inline;
     }
 
@@ -75,12 +75,23 @@ FilesMenu.styles = css `
     }
 
     oscd-menu {
-      min-width: 350px;
-      padding: 12px;
+      min-width: var(--plugins-menu-min-width);
+      padding: var(--plugins-menu-padding);
+      --md-menu-container-color: var(--plugins-menu-container-color);
     }
 
     oscd-menu-item {
       width: 100%;
+      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);
+      --md-menu-item-leading-icon-color: var(
+        --plugins-menu-item-leading-icon-color
+      );
+      --md-menu-item-selected-container-color: var(
+        --plugins-menu-item-selected-container-color
+      );
+      --md-menu-item-selected-label-text-color: var(
+        --plugins-menu-item-selected-label-color
+      );
     }
   `;
 __decorate([

package/dist/menus/files-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"files-menu.js","sourceRoot":"","sources":["../../src/menus/files-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAU1E,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvD;;QAQL,gBAAgB;QAGhB,iBAAY,GAAa,EAAE,CAAC;IAkF9B,CAAC;IArEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;YAG7B,IAAI,CAAC,eAAe;;;;;;;;;;;UAWtB,IAAI,CAAC,YAAY,CAAC,GAAG,CACrB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;uBACO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,IAAI,EAAE;aACjB,CAAC,CACH,CAAC;QACJ,CAAC;0BACW,IAAI,CAAC,eAAe,KAAK,IAAI;iBACtC,IAAI;cACP,CACL;;KAEJ,CAAC;IACJ,CAAC;;AA3DM,wBAAc,GAAG;IACtB,kBAAkB,EAAE,cAAc;IAClC,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,QAAQ;IACrB,gBAAgB,EAAE,YAAY;CAC/B,AALoB,CAKnB;AAwDK,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BX;AAjFF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CACE;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACvB;AAKnB;IADC,KAAK,CAAC,WAAW,CAAC;uCACH;AAtBL,SAAS;IADrB,SAAS,EAAE;GACC,SAAS,CA6FrB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { LocaleTag } from '../localization.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'files-menu': FilesMenu;\n  }\n}\n@localized()\nexport class FilesMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-text-button': OscdTextButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: String })\n  selectedDocName: string | undefined;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  /* Queries */\n\n  @query('#fileMenu')\n  menu!: OscdMenu;\n\n  render() {\n    return html`\n      <oscd-text-button\n          id=\"fileMenuButton\"\n          @click=${() => this.menu.show()}\n          trailing-icon\n          >\n          ${this.selectedDocName}\n          <oscd-icon slot=\"icon\">code</oscd-icon></oscd-filled-icon-button\n        >\n      </oscd-text-button>\n\n      <oscd-menu\n        fixed\n        id=\"fileMenu\"\n        anchor=\"fileMenuButton\"\n        corner=\"BOTTOM_END\"\n      >\n        ${this.editableDocs.map(\n          name =>\n            html`<oscd-menu-item\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('change', {\n                    bubbles: true,\n                    composed: true,\n                    detail: { name },\n                  }),\n                );\n              }}\n              ?selected=${this.selectedDocName === name}\n              >${name}</oscd-menu-item\n            >`,\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    :host oscd-text-button {\n      --md-text-button-label-text-line-height: normal;\n      --md-text-button-label-text-family: 'Roboto';\n      --md-text-button-label-text-weight: 500;\n      --md-text-button-label-text-size: 18px;\n      --md-text-button-label-text-style: normal;\n      --md-sys-color-primary: var(--oscd-base3);\n      display: inline;\n    }\n\n    :host oscd-text-button oscd-icon {\n      transform: rotate(90deg);\n    }\n\n    oscd-menu {\n      min-width: 350px;\n      padding: 12px;\n    }\n\n    oscd-menu-item {\n      width: 100%;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"files-menu.js","sourceRoot":"","sources":["../../src/menus/files-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAU1E,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvD;;QAQL,gBAAgB;QAGhB,iBAAY,GAAa,EAAE,CAAC;IA6F9B,CAAC;IAhFC,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;YAG7B,IAAI,CAAC,eAAe;;;;;;;;;;;UAWtB,IAAI,CAAC,YAAY,CAAC,GAAG,CACrB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;uBACO,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,IAAI,EAAE;aACjB,CAAC,CACH,CAAC;QACJ,CAAC;0BACW,IAAI,CAAC,eAAe,KAAK,IAAI;iBACtC,IAAI;cACP,CACL;;KAEJ,CAAC;IACJ,CAAC;;AA3DM,wBAAc,GAAG;IACtB,kBAAkB,EAAE,cAAc;IAClC,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,QAAQ;IACrB,gBAAgB,EAAE,YAAY;CAC/B,AALoB,CAKnB;AAwDK,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,AAzCY,CAyCX;AA5FF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CACE;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACvB;AAKnB;IADC,KAAK,CAAC,WAAW,CAAC;uCACH;AAtBL,SAAS;IADrB,SAAS,EAAE;GACC,SAAS,CAwGrB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized } from '@lit/localize';\n\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\nimport { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';\n\nimport { LocaleTag } from '../localization.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'files-menu': FilesMenu;\n  }\n}\n@localized()\nexport class FilesMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-text-button': OscdTextButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: String })\n  selectedDocName: string | undefined;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  /* Queries */\n\n  @query('#fileMenu')\n  menu!: OscdMenu;\n\n  render() {\n    return html`\n      <oscd-text-button\n          id=\"fileMenuButton\"\n          @click=${() => this.menu.show()}\n          trailing-icon\n          >\n          ${this.selectedDocName}\n          <oscd-icon slot=\"icon\">code</oscd-icon></oscd-filled-icon-button\n        >\n      </oscd-text-button>\n\n      <oscd-menu\n        fixed\n        id=\"fileMenu\"\n        anchor=\"fileMenuButton\"\n        corner=\"BOTTOM_END\"\n      >\n        ${this.editableDocs.map(\n          name =>\n            html`<oscd-menu-item\n              @click=${() => {\n                this.dispatchEvent(\n                  new CustomEvent('change', {\n                    bubbles: true,\n                    composed: true,\n                    detail: { name },\n                  }),\n                );\n              }}\n              ?selected=${this.selectedDocName === name}\n              >${name}</oscd-menu-item\n            >`,\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    :host oscd-text-button {\n      --md-text-button-label-text-line-height: normal;\n      --md-text-button-label-text-family: var(--file-menu-text-font-family);\n      --md-text-button-label-text-weight: var(--file-menu-text-weight);\n      --md-text-button-label-text-size: var(--file-menu-text-size);\n      --md-text-button-label-text-style: normal;\n      --md-sys-color-primary: var(--file-menu-text-color);\n      display: inline;\n    }\n\n    :host oscd-text-button oscd-icon {\n      transform: rotate(90deg);\n    }\n\n    oscd-menu {\n      min-width: var(--plugins-menu-min-width);\n      padding: var(--plugins-menu-padding);\n      --md-menu-container-color: var(--plugins-menu-container-color);\n    }\n\n    oscd-menu-item {\n      width: 100%;\n      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);\n      --md-menu-item-leading-icon-color: var(\n        --plugins-menu-item-leading-icon-color\n      );\n      --md-menu-item-selected-container-color: var(\n        --plugins-menu-item-selected-container-color\n      );\n      --md-menu-item-selected-label-text-color: var(\n        --plugins-menu-item-selected-label-color\n      );\n    }\n  `;\n}\n"]}

package/dist/menus/plugins-menu.js

@@ -79,25 +79,38 @@ PluginsMenu.styles = css `
     }
 
     img {
-      height: 34.4px;
-      width: auto;
+      height: var(--app-bar-app-icon-height);
+      width: var(--app-bar-app-icon-width);
     }
 
     :host h1.app-title {
-      font-family: Roboto;
-      font-size: 22.114px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
+      font-family: var(--app-bar-title-text-font-family);
+      font-size: var(--app-bar-title-text-font-size);
+      font-style: var(--app-bar-title-text-font-style);
+      font-weight: var(--app-bar-title-text-font-weight);
+      line-height: var(--app-bar-title-text-line-height);
+      letter-spacing: var(--app-bar-title-text-letter-spacing);
+      color: var(--app-bar-title-text-color);
       display: inline;
     }
     oscd-menu {
-      min-width: 350px;
-      padding: 12px;
+      min-width: var(--plugins-menu-min-width);
+      padding: var(--plugins-menu-padding);
+      --md-menu-container-color: var(--plugins-menu-container-color);
     }
 
     oscd-menu-item {
       width: 100%;
+      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);
+      --md-menu-item-leading-icon-color: var(
+        --plugins-menu-item-leading-icon-color
+      );
+      --md-menu-item-selected-container-color: var(
+        --plugins-menu-item-selected-container-color
+      );
+      --md-menu-item-selected-label-text-color: var(
+        --plugins-menu-item-selected-label-color
+      );
     }
   `;
 __decorate([

package/dist/menus/plugins-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugins-menu.js","sourceRoot":"","sources":["../../src/menus/plugins-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'plugin-menu': PluginsMenu;\n  }\n}\n\n@localized()\nexport class PluginsMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String })\n  appIcon!: string;\n\n  @property({ type: String })\n  appTitle!: string;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  @property({ type: String, reflect: true })\n  open = () => {\n    this.menu.show();\n  };\n\n  /* Queries */\n  @query('oscd-menu')\n  menu!: OscdMenu;\n\n  renderMenuItem(plugin: PluginEntry, disabled: boolean) {\n    return html`\n      <oscd-menu-item\n        .disabled=${disabled}\n        @click=${() => {\n          this.dispatchEvent(\n            new CustomEvent('menu-plugin-select', {\n              detail: { plugin },\n              bubbles: true,\n              composed: true,\n            }),\n          );\n          this.menu.close();\n        }}\n      >\n        <oscd-icon slot=\"start\">${plugin.icon}</oscd-icon>\n        <div slot=\"headline\">\n          ${plugin.translations?.[this.locale as Translation] || plugin.name}\n        </div>\n      </oscd-menu-item>\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.appIcon ? html`<img src=${this.appIcon} alt=\"logo\" />` : nothing}\n      <h1 class=\"app-title\">${this.appTitle}</h1>\n      <oscd-filled-icon-button\n        id=\"menu-button\"\n        aria-label=\"${msg('Menu')}\"\n        @click=${async () => {\n          if (this.menu.open) {\n            this.menu.close();\n          } else {\n            this.menu.show();\n          }\n        }}\n        ><oscd-icon>arrow_drop_down_circle</oscd-icon></oscd-filled-icon-button\n      >\n      <oscd-menu\n        quick\n        anchor=\"menu-button\"\n        menuCorner=\"START_END\"\n        anchorCorner=\"START_END\"\n      >\n        ${this.menuPlugins.map(plugin =>\n          this.renderMenuItem(\n            plugin,\n            !!(plugin.requireDoc && (this.editableDocs ?? []).length === 0),\n          ),\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    img {\n      height: 34.4px;\n      width: auto;\n    }\n\n    :host h1.app-title {\n      font-family: Roboto;\n      font-size: 22.114px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n      display: inline;\n    }\n    oscd-menu {\n      min-width: 350px;\n      padding: 12px;\n    }\n\n    oscd-menu-item {\n      width: 100%;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"plugins-menu.js","sourceRoot":"","sources":["../../src/menus/plugins-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\nimport { localized, msg } from '@lit/localize';\n\nimport { OscdFilledIconButton } from '@omicronenergy/oscd-ui/iconbutton/OscdFilledIconButton.js';\nimport { OscdIcon } from '@omicronenergy/oscd-ui/icon/OscdIcon.js';\nimport { OscdMenu } from '@omicronenergy/oscd-ui/menu/OscdMenu.js';\nimport { OscdMenuItem } from '@omicronenergy/oscd-ui/menu/OscdMenuItem.js';\n\nimport { LocaleTag, Translation } from '../localization.js';\nimport { PluginEntry } from '../oscd-shell.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'plugin-menu': PluginsMenu;\n  }\n}\n\n@localized()\nexport class PluginsMenu extends ScopedElementsMixin(LitElement) {\n  static scopedElements = {\n    'oscd-filled-icon-button': OscdFilledIconButton,\n    'oscd-icon': OscdIcon,\n    'oscd-menu': OscdMenu,\n    'oscd-menu-item': OscdMenuItem,\n  };\n\n  /* Properties */\n  @property({ type: Array })\n  editableDocs: string[] = [];\n\n  @property({ type: Array })\n  menuPlugins: PluginEntry[] = [];\n\n  @property({ type: String })\n  appIcon!: string;\n\n  @property({ type: String })\n  appTitle!: string;\n\n  @property({ type: String, reflect: true })\n  locale!: LocaleTag;\n\n  @property({ type: String, reflect: true })\n  open = () => {\n    this.menu.show();\n  };\n\n  /* Queries */\n  @query('oscd-menu')\n  menu!: OscdMenu;\n\n  renderMenuItem(plugin: PluginEntry, disabled: boolean) {\n    return html`\n      <oscd-menu-item\n        .disabled=${disabled}\n        @click=${() => {\n          this.dispatchEvent(\n            new CustomEvent('menu-plugin-select', {\n              detail: { plugin },\n              bubbles: true,\n              composed: true,\n            }),\n          );\n          this.menu.close();\n        }}\n      >\n        <oscd-icon slot=\"start\">${plugin.icon}</oscd-icon>\n        <div slot=\"headline\">\n          ${plugin.translations?.[this.locale as Translation] || plugin.name}\n        </div>\n      </oscd-menu-item>\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.appIcon ? html`<img src=${this.appIcon} alt=\"logo\" />` : nothing}\n      <h1 class=\"app-title\">${this.appTitle}</h1>\n      <oscd-filled-icon-button\n        id=\"menu-button\"\n        aria-label=\"${msg('Menu')}\"\n        @click=${async () => {\n          if (this.menu.open) {\n            this.menu.close();\n          } else {\n            this.menu.show();\n          }\n        }}\n        ><oscd-icon>arrow_drop_down_circle</oscd-icon></oscd-filled-icon-button\n      >\n      <oscd-menu\n        quick\n        anchor=\"menu-button\"\n        menuCorner=\"START_END\"\n        anchorCorner=\"START_END\"\n      >\n        ${this.menuPlugins.map(plugin =>\n          this.renderMenuItem(\n            plugin,\n            !!(plugin.requireDoc && (this.editableDocs ?? []).length === 0),\n          ),\n        )}\n      </oscd-menu>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    img {\n      height: var(--app-bar-app-icon-height);\n      width: var(--app-bar-app-icon-width);\n    }\n\n    :host h1.app-title {\n      font-family: var(--app-bar-title-text-font-family);\n      font-size: var(--app-bar-title-text-font-size);\n      font-style: var(--app-bar-title-text-font-style);\n      font-weight: var(--app-bar-title-text-font-weight);\n      line-height: var(--app-bar-title-text-line-height);\n      letter-spacing: var(--app-bar-title-text-letter-spacing);\n      color: var(--app-bar-title-text-color);\n      display: inline;\n    }\n    oscd-menu {\n      min-width: var(--plugins-menu-min-width);\n      padding: var(--plugins-menu-padding);\n      --md-menu-container-color: var(--plugins-menu-container-color);\n    }\n\n    oscd-menu-item {\n      width: 100%;\n      --md-menu-item-label-text-color: var(--plugins-menu-item-label-color);\n      --md-menu-item-leading-icon-color: var(\n        --plugins-menu-item-leading-icon-color\n      );\n      --md-menu-item-selected-container-color: var(\n        --plugins-menu-item-selected-container-color\n      );\n      --md-menu-item-selected-label-text-color: var(\n        --plugins-menu-item-selected-label-color\n      );\n    }\n  `;\n}\n"]}

package/dist/oscd-shell-design-tokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Single source of truth for oscd-shell design tokens.
+ *
+ * This block contains:
+ * 1) Internal base tokens and fallbacks
+ * 2) Public token -> internal token mappings
+ *
+ * Keep this as an all-or-nothing layer so mappings can safely reference
+ * internal base tokens (e.g. --oscd-base*).
+ */
+export declare const oscdShellDesignTokens: import("lit").CSSResult;

package/dist/oscd-shell-design-tokens.js

@@ -0,0 +1,312 @@
+import { css } from 'lit';
+/**
+ * Single source of truth for oscd-shell design tokens.
+ *
+ * This block contains:
+ * 1) Internal base tokens and fallbacks
+ * 2) Public token -> internal token mappings
+ *
+ * Keep this as an all-or-nothing layer so mappings can safely reference
+ * internal base tokens (e.g. --oscd-base*).
+ */
+export const oscdShellDesignTokens = css `
+  /* Internal base theme tokens and defaults */
+  * {
+    --oscd-primary: var(--oscd-theme-primary, #0b335b);
+    --oscd-secondary: var(--oscd-theme-secondary, #2485e5);
+    --oscd-base03: var(--oscd-theme-base03, #121417);
+    --oscd-base02: var(--oscd-theme-base02, #1a1e23);
+    --oscd-base01: var(--oscd-theme-base01, #3d4651);
+    --oscd-base00: var(--oscd-theme-base00, #46505d);
+    --oscd-base0: var(--oscd-theme-base0, #8b97a7);
+    --oscd-base1: var(--oscd-theme-base1, #96a1b0);
+    --oscd-base2: var(--oscd-theme-base2, #f3f5f6);
+    --oscd-base3: var(--oscd-theme-base3, white);
+    --oscd-error: var(--oscd-theme-error, #dc322f);
+    --oscd-warning: var(--oscd-theme-warning, #b58900);
+    --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');
+    --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');
+    --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Symbols Outlined');
+
+    /* Fallbacks for Material Design variables */
+    --md-sys-color-primary: var(--oscd-primary);
+    --md-sys-color-on-primary: var(--oscd-base3);
+    --md-sys-color-secondary: var(--oscd-secondary);
+    --md-sys-color-on-secondary: var(--oscd-base3);
+    --md-sys-color-secondary-container: var(--oscd-base2);
+    --md-sys-color-surface: var(--oscd-base3);
+    --md-sys-color-on-surface: var(--oscd-base00);
+    --md-sys-color-surface-variant: var(--oscd-base3);
+    --md-sys-color-on-surface-variant: var(--oscd-base00);
+    --md-sys-color-surface-bright: var(--oscd-base2);
+    --md-sys-color-surface-container: var(--oscd-base3);
+    --md-sys-color-surface-container-high: var(--oscd-base3);
+    --md-sys-color-surface-container-highest: var(--oscd-base3);
+    --md-sys-color-outline-variant: var(--oscd-primary);
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-error: var(--oscd-error);
+    --md-sys-color-on-error: var(--oscd-base3);
+    --md-icon-button-disabled-icon-color: var(--oscd-base3);
+    /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */
+    --md-icon-button-disabled-icon-color: var(--oscd-base3);
+
+    /* MDC Theme Colors
+     * Needed for supporting any pluggins still using the depricated MWC Components
+     */
+    --mdc-theme-primary: var(--oscd-primary);
+    --mdc-theme-secondary: var(--oscd-secondary);
+    --mdc-theme-background: var(--oscd-base3);
+    --mdc-theme-surface: var(--oscd-base3);
+    --mdc-theme-on-primary: var(--oscd-base2);
+    --mdc-theme-on-secondary: var(--oscd-base2);
+    --mdc-theme-on-background: var(--oscd-base00);
+    --mdc-theme-on-surface: var(--oscd-base00);
+    --mdc-theme-text-primary-on-background: var(--oscd-base01);
+    --mdc-theme-text-secondary-on-background: var(--oscd-base00);
+    --mdc-theme-text-icon-on-background: var(--oscd-base00);
+    --mdc-theme-error: var(--oscd-error);
+    --mdc-button-disabled-ink-color: var(--oscd-base1);
+    --mdc-drawer-heading-ink-color: var(--oscd-base00);
+    --mdc-dialog-heading-ink-color: var(--oscd-base00);
+    --mdc-text-field-fill-color: var(--oscd-base2);
+    --mdc-text-field-disabled-fill-color: var(--oscd-base3);
+    --mdc-text-field-ink-color: var(--oscd-base00);
+    --mdc-text-field-label-ink-color: var(--oscd-base00);
+    --mdc-text-field-idle-line-color: var(--oscd-base00);
+    --mdc-text-field-hover-line-color: var(--oscd-base02);
+    --mdc-select-fill-color: var(--oscd-base2);
+    --mdc-select-disabled-fill-color: var(--oscd-base3);
+    --mdc-select-ink-color: var(--oscd-base00);
+    --mdc-select-label-ink-color: var(--oscd-base00);
+    --mdc-select-idle-line-color: var(--oscd-base00);
+    --mdc-select-hover-line-color: var(--oscd-base02);
+    --mdc-select-dropdown-icon-color: var(--oscd-base01);
+    --mdc-typography-font-family: var(--oscd-text-font);
+    --mdc-icon-font: var(--oscd-icon-font);
+    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
+  }
+
+  * {
+    --app-bar-height: 54px;
+    --side-panel-width: 280px;
+
+    --md-sys-color-primary: var(--oscd-primary);
+    --md-sys-color-on-primary: var(--oscd-base3);
+
+    --md-sys-color-secondary-container: var(--oscd-base2);
+
+    --md-sys-color-surface: var(--oscd-base3);
+    --md-sys-color-on-surface: var(--oscd-base00);
+  }
+
+  /*
+   * Public token -> internal token mappings
+   *
+   * Example pattern:
+   * --internal-variable-name: var(--oscd-shell-public-token, <default>);
+   */
+  * {
+    /* App bar */
+    --app-bar-color: var(--oscd-shell-app-bar-color, var(--oscd-base3));
+    --app-bar-background-color: var(
+      --oscd-shell-app-bar-background-color,
+      var(--oscd-primary)
+    );
+    --app-bar-height: var(--oscd-shell-app-bar-height, 54px);
+    --app-bar-small-height: var(--oscd-shell-app-bar-small-height, 48px);
+    --app-bar-elevation: var(
+      --oscd-shell-app-bar-elevation,
+      var(--md-sys-elevation-level-2)
+    );
+    --app-bar-app-icon-height: var(--oscd-shell-app-bar-icon-height, 34.4px);
+    --app-bar-app-icon-width: var(--oscd-shell-app-bar-icon-width, auto);
+    --app-bar-title-text-font-family: var(
+      --oscd-shell-app-bar-title-font-family,
+      var(--oscd-text-font)
+    );
+    --app-bar-title-text-color: var(
+      --oscd-shell-app-bar-title-color,
+      var(--app-bar-color)
+    );
+    --app-bar-title-text-font-size: var(
+      --oscd-shell-app-bar-title-font-size,
+      22.114px
+    );
+    --app-bar-title-text-font-weight: var(
+      --oscd-shell-app-bar-title-font-weight,
+      400
+    );
+    --app-bar-title-text-font-style: var(
+      --oscd-shell-app-bar-title-font-style,
+      normal
+    );
+    --app-bar-title-text-line-height: var(
+      --oscd-shell-app-bar-title-line-height,
+      normal
+    );
+    --app-bar-title-text-letter-spacing: var(
+      --oscd-shell-app-bar-title-letter-spacing,
+      inherit
+    );
+    --app-bar-action-icon-size: var(
+      --oscd-shell-app-bar-action-icon-size,
+      24px
+    );
+    --app-bar-action-icon-color: var(
+      --oscd-shell-app-bar-action-icon-color,
+      var(--md-sys-color-on-primary)
+    );
+
+    /* Bridge to oscd-ui app bar tokens */
+    --oscd-app-bar-color: var(--app-bar-color);
+    --oscd-app-bar-background-color: var(--app-bar-background-color);
+    --oscd-app-bar-elevation: var(--app-bar-elevation);
+    --oscd-app-bar-title-font-family: var(--app-bar-title-text-font-family);
+    --oscd-app-bar-title-font-size: var(--app-bar-title-text-font-size);
+    --oscd-app-bar-title-font-weight: var(--app-bar-title-text-font-weight);
+    --oscd-app-bar-title-line-height: var(--app-bar-title-text-line-height);
+
+    /* Files menu */
+    --file-menu-text-font-family: var(
+      --oscd-shell-file-menu-text-font-family,
+      var(--oscd-text-font)
+    );
+    --file-menu-text-size: var(--oscd-shell-file-menu-text-size, 18px);
+    --file-menu-text-weight: var(--oscd-shell-file-menu-text-weight, 500);
+    --file-menu-text-color: var(
+      --oscd-shell-file-menu-text-color,
+      var(--oscd-base3)
+    );
+
+    /* Plugins menu */
+    --plugins-menu-min-width: var(--oscd-shell-plugins-menu-min-width, 350px);
+    --plugins-menu-padding: var(--oscd-shell-plugins-menu-padding, 12px);
+    --plugins-menu-container-color: var(
+      --oscd-shell-plugins-menu-container-color,
+      var(--oscd-base3)
+    );
+    --plugins-menu-item-label-color: var(
+      --oscd-shell-plugins-menu-item-label-color,
+      var(--oscd-base00)
+    );
+    --plugins-menu-item-leading-icon-color: var(
+      --oscd-shell-plugins-menu-item-leading-icon-color,
+      var(--oscd-base00)
+    );
+    --plugins-menu-item-selected-container-color: var(
+      --oscd-shell-plugins-menu-item-selected-container-color,
+      var(--oscd-base2)
+    );
+    --plugins-menu-item-selected-label-color: var(
+      --oscd-shell-plugins-menu-item-selected-label-color,
+      var(--oscd-base00)
+    );
+
+    /* Editor plugins panel */
+    --editor-plugins-panel-width: var(
+      --oscd-shell-editor-plugins-panel-width,
+      280px
+    );
+    --editor-plugins-panel-collapsed-width: var(
+      --oscd-shell-editor-plugins-panel-width,
+      280px
+    );
+    --editor-plugins-panel-padding-top: var(
+      --oscd-shell-editor-plugins-panel-padding-top,
+      20px
+    );
+    --editor-plugins-panel-item-leading-space: var(
+      --oscd-shell-editor-plugins-panel-item-leading-space,
+      22px
+    );
+    --editor-plugins-panel-item-trailing-space: var(
+      --oscd-shell-editor-plugins-panel-item-trailing-space,
+      10px
+    );
+    --editor-plugins-panel-item-icon-size: var(
+      --oscd-shell-editor-plugins-panel-item-icon-size,
+      28px
+    );
+    --editor-plugins-panel-item-text-color: var(
+      --oscd-shell-editor-plugins-panel-item-text-color,
+      var(--oscd-base3)
+    );
+    --editor-plugins-panel-item-icon-color: var(
+      --oscd-shell-editor-plugins-panel-item-icon-color,
+      var(--oscd-base3)
+    );
+    --editor-plugins-panel-item-active-bg: var(
+      --oscd-shell-editor-plugins-panel-item-active-bg,
+      var(--oscd-primary)
+    );
+    --side-panel-width: var(--editor-plugins-panel-width);
+
+    /* Main editor container */
+    --editor-background-color: var(
+      --oscd-shell-editor-background-color,
+      var(--oscd-base3)
+    );
+    --editor-padding: var(--oscd-shell-editor-padding, 8px);
+
+    /* Landing page */
+    --landing-heading-color: var(
+      --oscd-shell-landing-heading-color,
+      var(--oscd-base3)
+    );
+    --landing-heading-font-family: var(
+      --oscd-shell-landing-heading-font-family,
+      var(--oscd-text-font)
+    );
+    --landing-heading-size: var(--oscd-shell-landing-heading-size, 50px);
+    --landing-heading-style: var(--oscd-shell-landing-heading-style, normal);
+    --landing-heading-weight: var(--oscd-shell-landing-heading-weight, 600);
+    --landing-heading-line-height: var(
+      --oscd-shell-landing-heading-line-height,
+      normal
+    );
+
+    --landing-subheading-color: var(
+      --oscd-shell-landing-subheading-color,
+      var(--oscd-base3)
+    );
+    --landing-subheading-font-family: var(
+      --oscd-shell-landing-subheading-font-family,
+      var(--oscd-text-font)
+    );
+    --landing-subheading-size: var(
+      --oscd-shell-landing-subheading-size,
+      16.909px
+    );
+    --landing-subheading-style: var(
+      --oscd-shell-landing-subheading-style,
+      normal
+    );
+    --landing-subheading-weight: var(
+      --oscd-shell-landing-subheading-weight,
+      400
+    );
+    --landing-subheading-line-height: var(
+      --oscd-shell-landing-subheading-line-height,
+      65.194px
+    );
+    --landing-grid-width: var(--oscd-shell-landing-grid-width, 60%);
+    --landing-grid-gap: var(--oscd-shell-landing-grid-gap, 95px);
+    --landing-card-width: var(--oscd-shell-landing-card-width, 240px);
+    --landing-card-height: var(--oscd-shell-landing-card-height, 180px);
+    --landing-card-background: var(
+      --oscd-shell-landing-card-background,
+      var(--oscd-primary)
+    );
+    --landing-card-text-color: var(
+      --oscd-shell-landing-card-text-color,
+      var(--oscd-base3)
+    );
+    --landing-card-radius: var(--oscd-shell-landing-card-radius, 2px);
+    --landing-card-icon-size: var(--oscd-shell-landing-card-icon-size, 54px);
+    --landing-card-corner-accent: var(
+      --oscd-shell-landing-card-corner-accent,
+      var(--omicron-yellow)
+    );
+  }
+`;
+//# sourceMappingURL=oscd-shell-design-tokens.js.map

package/dist/oscd-shell-design-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oscd-shell-design-tokens.js","sourceRoot":"","sources":["../src/oscd-shell-design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2SvC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Single source of truth for oscd-shell design tokens.\n *\n * This block contains:\n * 1) Internal base tokens and fallbacks\n * 2) Public token -> internal token mappings\n *\n * Keep this as an all-or-nothing layer so mappings can safely reference\n * internal base tokens (e.g. --oscd-base*).\n */\nexport const oscdShellDesignTokens = css`\n  /* Internal base theme tokens and defaults */\n  * {\n    --oscd-primary: var(--oscd-theme-primary, #0b335b);\n    --oscd-secondary: var(--oscd-theme-secondary, #2485e5);\n    --oscd-base03: var(--oscd-theme-base03, #121417);\n    --oscd-base02: var(--oscd-theme-base02, #1a1e23);\n    --oscd-base01: var(--oscd-theme-base01, #3d4651);\n    --oscd-base00: var(--oscd-theme-base00, #46505d);\n    --oscd-base0: var(--oscd-theme-base0, #8b97a7);\n    --oscd-base1: var(--oscd-theme-base1, #96a1b0);\n    --oscd-base2: var(--oscd-theme-base2, #f3f5f6);\n    --oscd-base3: var(--oscd-theme-base3, white);\n    --oscd-error: var(--oscd-theme-error, #dc322f);\n    --oscd-warning: var(--oscd-theme-warning, #b58900);\n    --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');\n    --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono');\n    --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Symbols Outlined');\n\n    /* Fallbacks for Material Design variables */\n    --md-sys-color-primary: var(--oscd-primary);\n    --md-sys-color-on-primary: var(--oscd-base3);\n    --md-sys-color-secondary: var(--oscd-secondary);\n    --md-sys-color-on-secondary: var(--oscd-base3);\n    --md-sys-color-secondary-container: var(--oscd-base2);\n    --md-sys-color-surface: var(--oscd-base3);\n    --md-sys-color-on-surface: var(--oscd-base00);\n    --md-sys-color-surface-variant: var(--oscd-base3);\n    --md-sys-color-on-surface-variant: var(--oscd-base00);\n    --md-sys-color-surface-bright: var(--oscd-base2);\n    --md-sys-color-surface-container: var(--oscd-base3);\n    --md-sys-color-surface-container-high: var(--oscd-base3);\n    --md-sys-color-surface-container-highest: var(--oscd-base3);\n    --md-sys-color-outline-variant: var(--oscd-primary);\n    --md-sys-color-scrim: #000000;\n    --md-sys-color-error: var(--oscd-error);\n    --md-sys-color-on-error: var(--oscd-base3);\n    --md-icon-button-disabled-icon-color: var(--oscd-base3);\n    /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */\n    --md-icon-button-disabled-icon-color: var(--oscd-base3);\n\n    /* MDC Theme Colors\n     * Needed for supporting any pluggins still using the depricated MWC Components\n     */\n    --mdc-theme-primary: var(--oscd-primary);\n    --mdc-theme-secondary: var(--oscd-secondary);\n    --mdc-theme-background: var(--oscd-base3);\n    --mdc-theme-surface: var(--oscd-base3);\n    --mdc-theme-on-primary: var(--oscd-base2);\n    --mdc-theme-on-secondary: var(--oscd-base2);\n    --mdc-theme-on-background: var(--oscd-base00);\n    --mdc-theme-on-surface: var(--oscd-base00);\n    --mdc-theme-text-primary-on-background: var(--oscd-base01);\n    --mdc-theme-text-secondary-on-background: var(--oscd-base00);\n    --mdc-theme-text-icon-on-background: var(--oscd-base00);\n    --mdc-theme-error: var(--oscd-error);\n    --mdc-button-disabled-ink-color: var(--oscd-base1);\n    --mdc-drawer-heading-ink-color: var(--oscd-base00);\n    --mdc-dialog-heading-ink-color: var(--oscd-base00);\n    --mdc-text-field-fill-color: var(--oscd-base2);\n    --mdc-text-field-disabled-fill-color: var(--oscd-base3);\n    --mdc-text-field-ink-color: var(--oscd-base00);\n    --mdc-text-field-label-ink-color: var(--oscd-base00);\n    --mdc-text-field-idle-line-color: var(--oscd-base00);\n    --mdc-text-field-hover-line-color: var(--oscd-base02);\n    --mdc-select-fill-color: var(--oscd-base2);\n    --mdc-select-disabled-fill-color: var(--oscd-base3);\n    --mdc-select-ink-color: var(--oscd-base00);\n    --mdc-select-label-ink-color: var(--oscd-base00);\n    --mdc-select-idle-line-color: var(--oscd-base00);\n    --mdc-select-hover-line-color: var(--oscd-base02);\n    --mdc-select-dropdown-icon-color: var(--oscd-base01);\n    --mdc-typography-font-family: var(--oscd-text-font);\n    --mdc-icon-font: var(--oscd-icon-font);\n    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);\n  }\n\n  * {\n    --app-bar-height: 54px;\n    --side-panel-width: 280px;\n\n    --md-sys-color-primary: var(--oscd-primary);\n    --md-sys-color-on-primary: var(--oscd-base3);\n\n    --md-sys-color-secondary-container: var(--oscd-base2);\n\n    --md-sys-color-surface: var(--oscd-base3);\n    --md-sys-color-on-surface: var(--oscd-base00);\n  }\n\n  /*\n   * Public token -> internal token mappings\n   *\n   * Example pattern:\n   * --internal-variable-name: var(--oscd-shell-public-token, <default>);\n   */\n  * {\n    /* App bar */\n    --app-bar-color: var(--oscd-shell-app-bar-color, var(--oscd-base3));\n    --app-bar-background-color: var(\n      --oscd-shell-app-bar-background-color,\n      var(--oscd-primary)\n    );\n    --app-bar-height: var(--oscd-shell-app-bar-height, 54px);\n    --app-bar-small-height: var(--oscd-shell-app-bar-small-height, 48px);\n    --app-bar-elevation: var(\n      --oscd-shell-app-bar-elevation,\n      var(--md-sys-elevation-level-2)\n    );\n    --app-bar-app-icon-height: var(--oscd-shell-app-bar-icon-height, 34.4px);\n    --app-bar-app-icon-width: var(--oscd-shell-app-bar-icon-width, auto);\n    --app-bar-title-text-font-family: var(\n      --oscd-shell-app-bar-title-font-family,\n      var(--oscd-text-font)\n    );\n    --app-bar-title-text-color: var(\n      --oscd-shell-app-bar-title-color,\n      var(--app-bar-color)\n    );\n    --app-bar-title-text-font-size: var(\n      --oscd-shell-app-bar-title-font-size,\n      22.114px\n    );\n    --app-bar-title-text-font-weight: var(\n      --oscd-shell-app-bar-title-font-weight,\n      400\n    );\n    --app-bar-title-text-font-style: var(\n      --oscd-shell-app-bar-title-font-style,\n      normal\n    );\n    --app-bar-title-text-line-height: var(\n      --oscd-shell-app-bar-title-line-height,\n      normal\n    );\n    --app-bar-title-text-letter-spacing: var(\n      --oscd-shell-app-bar-title-letter-spacing,\n      inherit\n    );\n    --app-bar-action-icon-size: var(\n      --oscd-shell-app-bar-action-icon-size,\n      24px\n    );\n    --app-bar-action-icon-color: var(\n      --oscd-shell-app-bar-action-icon-color,\n      var(--md-sys-color-on-primary)\n    );\n\n    /* Bridge to oscd-ui app bar tokens */\n    --oscd-app-bar-color: var(--app-bar-color);\n    --oscd-app-bar-background-color: var(--app-bar-background-color);\n    --oscd-app-bar-elevation: var(--app-bar-elevation);\n    --oscd-app-bar-title-font-family: var(--app-bar-title-text-font-family);\n    --oscd-app-bar-title-font-size: var(--app-bar-title-text-font-size);\n    --oscd-app-bar-title-font-weight: var(--app-bar-title-text-font-weight);\n    --oscd-app-bar-title-line-height: var(--app-bar-title-text-line-height);\n\n    /* Files menu */\n    --file-menu-text-font-family: var(\n      --oscd-shell-file-menu-text-font-family,\n      var(--oscd-text-font)\n    );\n    --file-menu-text-size: var(--oscd-shell-file-menu-text-size, 18px);\n    --file-menu-text-weight: var(--oscd-shell-file-menu-text-weight, 500);\n    --file-menu-text-color: var(\n      --oscd-shell-file-menu-text-color,\n      var(--oscd-base3)\n    );\n\n    /* Plugins menu */\n    --plugins-menu-min-width: var(--oscd-shell-plugins-menu-min-width, 350px);\n    --plugins-menu-padding: var(--oscd-shell-plugins-menu-padding, 12px);\n    --plugins-menu-container-color: var(\n      --oscd-shell-plugins-menu-container-color,\n      var(--oscd-base3)\n    );\n    --plugins-menu-item-label-color: var(\n      --oscd-shell-plugins-menu-item-label-color,\n      var(--oscd-base00)\n    );\n    --plugins-menu-item-leading-icon-color: var(\n      --oscd-shell-plugins-menu-item-leading-icon-color,\n      var(--oscd-base00)\n    );\n    --plugins-menu-item-selected-container-color: var(\n      --oscd-shell-plugins-menu-item-selected-container-color,\n      var(--oscd-base2)\n    );\n    --plugins-menu-item-selected-label-color: var(\n      --oscd-shell-plugins-menu-item-selected-label-color,\n      var(--oscd-base00)\n    );\n\n    /* Editor plugins panel */\n    --editor-plugins-panel-width: var(\n      --oscd-shell-editor-plugins-panel-width,\n      280px\n    );\n    --editor-plugins-panel-collapsed-width: var(\n      --oscd-shell-editor-plugins-panel-width,\n      280px\n    );\n    --editor-plugins-panel-padding-top: var(\n      --oscd-shell-editor-plugins-panel-padding-top,\n      20px\n    );\n    --editor-plugins-panel-item-leading-space: var(\n      --oscd-shell-editor-plugins-panel-item-leading-space,\n      22px\n    );\n    --editor-plugins-panel-item-trailing-space: var(\n      --oscd-shell-editor-plugins-panel-item-trailing-space,\n      10px\n    );\n    --editor-plugins-panel-item-icon-size: var(\n      --oscd-shell-editor-plugins-panel-item-icon-size,\n      28px\n    );\n    --editor-plugins-panel-item-text-color: var(\n      --oscd-shell-editor-plugins-panel-item-text-color,\n      var(--oscd-base3)\n    );\n    --editor-plugins-panel-item-icon-color: var(\n      --oscd-shell-editor-plugins-panel-item-icon-color,\n      var(--oscd-base3)\n    );\n    --editor-plugins-panel-item-active-bg: var(\n      --oscd-shell-editor-plugins-panel-item-active-bg,\n      var(--oscd-primary)\n    );\n    --side-panel-width: var(--editor-plugins-panel-width);\n\n    /* Main editor container */\n    --editor-background-color: var(\n      --oscd-shell-editor-background-color,\n      var(--oscd-base3)\n    );\n    --editor-padding: var(--oscd-shell-editor-padding, 8px);\n\n    /* Landing page */\n    --landing-heading-color: var(\n      --oscd-shell-landing-heading-color,\n      var(--oscd-base3)\n    );\n    --landing-heading-font-family: var(\n      --oscd-shell-landing-heading-font-family,\n      var(--oscd-text-font)\n    );\n    --landing-heading-size: var(--oscd-shell-landing-heading-size, 50px);\n    --landing-heading-style: var(--oscd-shell-landing-heading-style, normal);\n    --landing-heading-weight: var(--oscd-shell-landing-heading-weight, 600);\n    --landing-heading-line-height: var(\n      --oscd-shell-landing-heading-line-height,\n      normal\n    );\n\n    --landing-subheading-color: var(\n      --oscd-shell-landing-subheading-color,\n      var(--oscd-base3)\n    );\n    --landing-subheading-font-family: var(\n      --oscd-shell-landing-subheading-font-family,\n      var(--oscd-text-font)\n    );\n    --landing-subheading-size: var(\n      --oscd-shell-landing-subheading-size,\n      16.909px\n    );\n    --landing-subheading-style: var(\n      --oscd-shell-landing-subheading-style,\n      normal\n    );\n    --landing-subheading-weight: var(\n      --oscd-shell-landing-subheading-weight,\n      400\n    );\n    --landing-subheading-line-height: var(\n      --oscd-shell-landing-subheading-line-height,\n      65.194px\n    );\n    --landing-grid-width: var(--oscd-shell-landing-grid-width, 60%);\n    --landing-grid-gap: var(--oscd-shell-landing-grid-gap, 95px);\n    --landing-card-width: var(--oscd-shell-landing-card-width, 240px);\n    --landing-card-height: var(--oscd-shell-landing-card-height, 180px);\n    --landing-card-background: var(\n      --oscd-shell-landing-card-background,\n      var(--oscd-primary)\n    );\n    --landing-card-text-color: var(\n      --oscd-shell-landing-card-text-color,\n      var(--oscd-base3)\n    );\n    --landing-card-radius: var(--oscd-shell-landing-card-radius, 2px);\n    --landing-card-icon-size: var(--oscd-shell-landing-card-icon-size, 54px);\n    --landing-card-corner-accent: var(\n      --oscd-shell-landing-card-corner-accent,\n      var(--omicron-yellow)\n    );\n  }\n`;\n"]}

package/dist/oscd-shell.d.ts

@@ -95,7 +95,7 @@ export declare class OscdShell extends OscdShell_base {
     renderOffScreenPlugins(): import("lit-html").TemplateResult<1>;
     renderDefaultLandingPage(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {