@retalia/pos-components 0.0.4 → 0.0.5

package/src/lib/tokens/pos-tokens.html

@@ -1,351 +0,0 @@
-<article class="pos-tokens__page">
-  <header class="pos-tokens__intro">
-    <p class="pos-tokens__kicker">@retalia/pos-components</p>
-    <h1 class="pos-tokens__title">Design tokens</h1>
-    <p class="pos-tokens__lede">
-      Click a sample or token to edit it. Changes are live overrides in this lab only —
-      package defaults are never overwritten. Export a complete <code>:root</code> CSS
-      file for the consuming POS, and import that file back later to resume editing.
-    </p>
-    <div class="pos-tokens__toolbar">
-      <input
-        #importFile
-        class="pos-tokens__file"
-        type="file"
-        accept=".css,text/css"
-        (change)="onImportFile($event)"
-      />
-      <button type="button" class="pos-tokens__tool pos-tokens__tool--primary" (click)="exportThemeFile()">
-        Export CSS
-      </button>
-      <button type="button" class="pos-tokens__tool" (click)="importFile.click()">
-        Import CSS
-      </button>
-      <button
-        type="button"
-        class="pos-tokens__tool"
-        [disabled]="!hasOverrides()"
-        (click)="resetTheme()"
-      >
-        Reset overrides
-      </button>
-    </div>
-    <p class="pos-tokens__status" role="status" aria-live="polite">{{ statusMessage() }}</p>
-  </header>
-
-  <div class="pos-tokens__layout">
-    <div class="pos-tokens__gallery">
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-samples">
-        <h2 id="pos-tokens-samples" class="pos-tokens__heading">In action</h2>
-        <p class="pos-tokens__hint">Click a control to edit the tokens it uses.</p>
-        <div class="pos-tokens__samples">
-          <button
-            type="button"
-            class="pos-tokens__sample"
-            [class.pos-tokens__sample--selected]="isSampleSelected('primary')"
-            [attr.aria-pressed]="isSampleSelected('primary')"
-            (click)="selectSample('primary')"
-          >
-            <span class="pos-tokens__btn pos-tokens__btn--primary">Primary</span>
-          </button>
-          <button
-            type="button"
-            class="pos-tokens__sample"
-            [class.pos-tokens__sample--selected]="isSampleSelected('success')"
-            [attr.aria-pressed]="isSampleSelected('success')"
-            (click)="selectSample('success')"
-          >
-            <span class="pos-tokens__btn pos-tokens__btn--success">Success</span>
-          </button>
-          <button
-            type="button"
-            class="pos-tokens__sample"
-            [class.pos-tokens__sample--selected]="isSampleSelected('danger')"
-            [attr.aria-pressed]="isSampleSelected('danger')"
-            (click)="selectSample('danger')"
-          >
-            <span class="pos-tokens__btn pos-tokens__btn--danger">Danger</span>
-          </button>
-          <button
-            type="button"
-            class="pos-tokens__sample"
-            [class.pos-tokens__sample--selected]="isSampleSelected('disabled')"
-            [attr.aria-pressed]="isSampleSelected('disabled')"
-            (click)="selectSample('disabled')"
-          >
-            <span class="pos-tokens__btn pos-tokens__btn--disabled">Disabled</span>
-          </button>
-          <button
-            type="button"
-            class="pos-tokens__sample pos-tokens__sample--text"
-            [class.pos-tokens__sample--selected]="isSampleSelected('text')"
-            [attr.aria-pressed]="isSampleSelected('text')"
-            (click)="selectSample('text')"
-          >
-            <span class="pos-tokens__sample-text">
-              Body text · <span class="pos-tokens__sample-muted">muted</span>
-            </span>
-          </button>
-          <button
-            type="button"
-            class="pos-tokens__sample pos-tokens__sample--text"
-            [class.pos-tokens__sample--selected]="isSampleSelected('error')"
-            [attr.aria-pressed]="isSampleSelected('error')"
-            (click)="selectSample('error')"
-          >
-            <span class="pos-tokens__sample-danger">Danger / error message</span>
-          </button>
-        </div>
-      </section>
-
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-colors">
-        <h2 id="pos-tokens-colors" class="pos-tokens__heading">Color</h2>
-        <ul class="pos-tokens__swatch-grid">
-          @for (token of colorTokens; track token.variable) {
-            <li>
-              <button
-                type="button"
-                class="pos-tokens__pick"
-                [class.pos-tokens__pick--selected]="isTokenSelected(token.variable)"
-                [class.pos-tokens__pick--modified]="isModified(token.variable)"
-                [attr.aria-pressed]="isTokenSelected(token.variable)"
-                (click)="selectToken(token)"
-              >
-                <span
-                  class="pos-tokens__chip"
-                  [style.background]="'var(' + token.variable + ')'"
-                ></span>
-                <span class="pos-tokens__swatch-meta">
-                  <span class="pos-tokens__swatch-name">
-                    {{ token.name }}
-                    @if (isModified(token.variable)) {
-                      <span class="pos-tokens__edited">Edited</span>
-                    }
-                  </span>
-                  <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-                </span>
-              </button>
-            </li>
-          }
-        </ul>
-      </section>
-
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-radius">
-        <h2 id="pos-tokens-radius" class="pos-tokens__heading">Radius</h2>
-        <ul class="pos-tokens__radius-row">
-          @for (token of radiusTokens; track token.variable) {
-            <li>
-              <button
-                type="button"
-                class="pos-tokens__pick"
-                [class.pos-tokens__pick--selected]="isTokenSelected(token.variable)"
-                [class.pos-tokens__pick--modified]="isModified(token.variable)"
-                [attr.aria-pressed]="isTokenSelected(token.variable)"
-                (click)="selectToken(token)"
-              >
-                <span
-                  class="pos-tokens__radius-box"
-                  [style.border-radius]="'var(' + token.variable + ')'"
-                ></span>
-                <span class="pos-tokens__swatch-name">
-                  {{ token.name }}
-                  @if (isModified(token.variable)) {
-                    <span class="pos-tokens__edited">Edited</span>
-                  }
-                </span>
-                <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-              </button>
-            </li>
-          }
-        </ul>
-      </section>
-
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-space">
-        <h2 id="pos-tokens-space" class="pos-tokens__heading">Space</h2>
-        <ul class="pos-tokens__space-list">
-          @for (token of spaceTokens; track token.variable) {
-            <li>
-              <button
-                type="button"
-                class="pos-tokens__pick pos-tokens__pick--row"
-                [class.pos-tokens__pick--selected]="isTokenSelected(token.variable)"
-                [class.pos-tokens__pick--modified]="isModified(token.variable)"
-                [attr.aria-pressed]="isTokenSelected(token.variable)"
-                (click)="selectToken(token)"
-              >
-                <span
-                  class="pos-tokens__space-bar"
-                  [style.width]="'var(' + token.variable + ')'"
-                ></span>
-                <span class="pos-tokens__swatch-meta">
-                  <span class="pos-tokens__swatch-name">
-                    {{ token.name }}
-                    @if (isModified(token.variable)) {
-                      <span class="pos-tokens__edited">Edited</span>
-                    }
-                  </span>
-                  <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-                </span>
-              </button>
-            </li>
-          }
-        </ul>
-      </section>
-
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-type">
-        <h2 id="pos-tokens-type" class="pos-tokens__heading">Typography</h2>
-        <ul class="pos-tokens__type-list">
-          @for (token of typeTokens; track token.variable) {
-            <li>
-              <button
-                type="button"
-                class="pos-tokens__pick"
-                [class.pos-tokens__pick--selected]="isTokenSelected(token.variable)"
-                [class.pos-tokens__pick--modified]="isModified(token.variable)"
-                [attr.aria-pressed]="isTokenSelected(token.variable)"
-                (click)="selectToken(token)"
-              >
-                <span class="pos-tokens__swatch-name">
-                  {{ token.name }}
-                  @if (isModified(token.variable)) {
-                    <span class="pos-tokens__edited">Edited</span>
-                  }
-                </span>
-                <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-                @switch (token.preview) {
-                  @case ('font-family') {
-                    <span
-                      class="pos-tokens__type-preview"
-                      [style.font-family]="'var(' + token.variable + ')'"
-                    >
-                      The quick brown fox
-                    </span>
-                  }
-                  @case ('font-size') {
-                    <span
-                      class="pos-tokens__type-preview"
-                      [style.font-size]="'var(' + token.variable + ')'"
-                    >
-                      The quick brown fox
-                    </span>
-                  }
-                  @case ('font-weight') {
-                    <span
-                      class="pos-tokens__type-preview"
-                      [style.font-weight]="'var(' + token.variable + ')'"
-                    >
-                      The quick brown fox
-                    </span>
-                  }
-                  @case ('letter-spacing') {
-                    <span
-                      class="pos-tokens__type-preview pos-tokens__type-preview--caps"
-                      [style.letter-spacing]="'var(' + token.variable + ')'"
-                    >
-                      Display
-                    </span>
-                  }
-                }
-              </button>
-            </li>
-          }
-        </ul>
-      </section>
-
-      <section class="pos-tokens__section" aria-labelledby="pos-tokens-controls">
-        <h2 id="pos-tokens-controls" class="pos-tokens__heading">Controls</h2>
-        <ul class="pos-tokens__control-list">
-          @for (token of controlTokens; track token.variable) {
-            <li>
-              <button
-                type="button"
-                class="pos-tokens__pick pos-tokens__pick--row"
-                [class.pos-tokens__pick--selected]="isTokenSelected(token.variable)"
-                [class.pos-tokens__pick--modified]="isModified(token.variable)"
-                [attr.aria-pressed]="isTokenSelected(token.variable)"
-                (click)="selectToken(token)"
-              >
-                <span
-                  class="pos-tokens__size-box"
-                  [style.width]="'var(' + token.variable + ')'"
-                  [style.height]="'var(' + token.variable + ')'"
-                ></span>
-                <span class="pos-tokens__swatch-meta">
-                  <span class="pos-tokens__swatch-name">
-                    {{ token.name }}
-                    @if (isModified(token.variable)) {
-                      <span class="pos-tokens__edited">Edited</span>
-                    }
-                  </span>
-                  <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-                </span>
-              </button>
-            </li>
-          }
-        </ul>
-      </section>
-    </div>
-
-    <aside class="pos-tokens__inspector" aria-labelledby="pos-tokens-inspector-title">
-      <div class="pos-tokens__inspector-header">
-        <h2 id="pos-tokens-inspector-title" class="pos-tokens__heading">
-          {{ selection()?.title ?? 'Theme editor' }}
-        </h2>
-        @if (selection()) {
-          <button type="button" class="pos-tokens__tool pos-tokens__tool--quiet" (click)="clearSelection()">
-            Close
-          </button>
-        }
-      </div>
-
-      @if (!selection()) {
-        <p class="pos-tokens__hint">
-          Select a sample or token to change its values. Export writes a complete CSS
-          file the host POS can load after the package stylesheet.
-        </p>
-      } @else {
-        <ul class="pos-tokens__fields">
-          @for (token of selectedTokens(); track token.variable) {
-            <li class="pos-tokens__field">
-              <label class="pos-tokens__field-label" [attr.for]="tokenFieldId(token.variable)">
-                {{ token.name }}
-              </label>
-              <code class="pos-tokens__swatch-var">{{ token.variable }}</code>
-              <div class="pos-tokens__field-controls">
-                @if (token.kind === 'color') {
-                  @if (colorInputValue(token.variable); as hex) {
-                    <input
-                      class="pos-tokens__color"
-                      type="color"
-                      [value]="hex"
-                      [attr.aria-label]="token.name + ' color'"
-                      (input)="onTokenInput(token.variable, $event)"
-                    />
-                  }
-                }
-                <input
-                  class="pos-tokens__value"
-                  type="text"
-                  [id]="tokenFieldId(token.variable)"
-                  [value]="currentValue(token.variable)"
-                  spellcheck="false"
-                  autocomplete="off"
-                  (input)="onTokenInput(token.variable, $event)"
-                />
-              </div>
-              <p class="pos-tokens__default">
-                Default
-                <code>{{ defaultValue(token.variable) }}</code>
-              </p>
-              @if (isModified(token.variable)) {
-                <button type="button" class="pos-tokens__reset" (click)="resetToken(token.variable)">
-                  Reset to default
-                </button>
-              }
-            </li>
-          }
-        </ul>
-      }
-    </aside>
-  </div>
-</article>