@retalia/pos-components 0.0.2 → 0.0.4

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

@@ -0,0 +1,351 @@
+<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>