@retalia/pos-components 0.0.2 → 0.0.4

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

@@ -0,0 +1,437 @@
+:host {
+  display: block;
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family);
+  font-size: var(--pos-font-size-md);
+  line-height: 1.5;
+}
+
+.pos-tokens__page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-2xl);
+  padding: var(--pos-space-xl);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-lg);
+  background: var(--pos-color-surface);
+}
+
+.pos-tokens__kicker {
+  margin: 0 0 var(--pos-space-sm);
+  color: var(--pos-color-primary);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.pos-tokens__title {
+  margin: 0 0 var(--pos-space-sm);
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-xl);
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: -0.02em;
+}
+
+.pos-tokens__lede {
+  margin: 0;
+  max-width: 48rem;
+  color: var(--pos-color-text-muted);
+}
+
+.pos-tokens__lede code,
+.pos-tokens__swatch-var,
+.pos-tokens__default code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+}
+
+.pos-tokens__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pos-space-sm);
+  margin-top: var(--pos-space-lg);
+}
+
+.pos-tokens__file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pos-tokens__tool {
+  min-height: var(--pos-button-min-height);
+  padding: 0 var(--pos-space-lg);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-panel-elevated);
+  color: var(--pos-color-text);
+  font: inherit;
+  font-weight: var(--pos-font-weight-semibold);
+  cursor: pointer;
+}
+
+.pos-tokens__tool:hover,
+.pos-tokens__tool:focus-visible {
+  border-color: var(--pos-color-primary);
+}
+
+.pos-tokens__tool:focus-visible,
+.pos-tokens__pick:focus-visible,
+.pos-tokens__sample:focus-visible,
+.pos-tokens__reset:focus-visible,
+.pos-tokens__value:focus-visible,
+.pos-tokens__color:focus-visible {
+  outline: 2px solid var(--pos-color-primary);
+  outline-offset: 2px;
+}
+
+.pos-tokens__tool:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pos-tokens__tool--primary {
+  border-color: transparent;
+  background: var(--pos-color-primary);
+  color: var(--pos-color-on-primary);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-tokens__tool--quiet {
+  min-height: 2.5rem;
+  padding: 0 var(--pos-space-md);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-tokens__status {
+  min-height: 1.25rem;
+  margin: var(--pos-space-sm) 0 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-tokens__layout {
+  display: grid;
+  gap: var(--pos-space-xl);
+}
+
+.pos-tokens__gallery,
+.pos-tokens__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-lg);
+}
+
+.pos-tokens__heading {
+  margin: 0;
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-tokens__hint {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-tokens__samples {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--pos-space-md);
+}
+
+.pos-tokens__sample {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: var(--pos-space-xs);
+  border: 1px solid transparent;
+  border-radius: var(--pos-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.pos-tokens__sample--text {
+  width: 100%;
+  justify-content: flex-start;
+  padding: var(--pos-space-sm);
+}
+
+.pos-tokens__sample:hover,
+.pos-tokens__sample:focus-visible {
+  border-color: var(--pos-color-border);
+  background: var(--pos-color-surface-muted);
+}
+
+.pos-tokens__sample--selected {
+  border-color: var(--pos-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pos-color-primary) 35%, transparent);
+}
+
+.pos-tokens__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--pos-button-min-height);
+  padding: 0 var(--pos-space-lg);
+  border: 0;
+  border-radius: var(--pos-radius-md);
+  font: inherit;
+  font-weight: var(--pos-font-weight-bold);
+  pointer-events: none;
+}
+
+.pos-tokens__btn--primary {
+  background: var(--pos-color-primary);
+  color: var(--pos-color-on-primary);
+}
+
+.pos-tokens__btn--success {
+  background: var(--pos-color-success);
+  color: var(--pos-color-on-success);
+}
+
+.pos-tokens__btn--danger {
+  background: var(--pos-color-danger);
+  color: var(--pos-color-on-danger);
+}
+
+.pos-tokens__btn--disabled {
+  background: var(--pos-color-disabled);
+  color: var(--pos-color-on-disabled);
+}
+
+.pos-tokens__sample-text {
+  margin: 0;
+}
+
+.pos-tokens__sample-muted {
+  color: var(--pos-color-text-muted);
+}
+
+.pos-tokens__sample-danger {
+  margin: 0;
+  color: var(--pos-color-danger);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tokens__swatch-grid,
+.pos-tokens__radius-row,
+.pos-tokens__space-list,
+.pos-tokens__type-list,
+.pos-tokens__control-list,
+.pos-tokens__fields {
+  display: grid;
+  gap: var(--pos-space-md);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pos-tokens__swatch-grid {
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+}
+
+.pos-tokens__radius-row {
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+}
+
+.pos-tokens__pick {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--pos-space-sm);
+  width: 100%;
+  min-height: 48px;
+  margin: 0;
+  padding: var(--pos-space-sm);
+  border: 1px solid transparent;
+  border-radius: var(--pos-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pos-tokens__pick--row {
+  flex-direction: row;
+  align-items: center;
+}
+
+.pos-tokens__pick:hover,
+.pos-tokens__pick:focus-visible {
+  border-color: var(--pos-color-border);
+  background: var(--pos-color-surface-muted);
+}
+
+.pos-tokens__pick--selected {
+  border-color: var(--pos-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pos-color-primary) 35%, transparent);
+}
+
+.pos-tokens__chip {
+  display: block;
+  width: 100%;
+  height: 3.25rem;
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+}
+
+.pos-tokens__swatch-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pos-tokens__swatch-name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pos-space-xs);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tokens__edited {
+  color: var(--pos-color-primary);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-tokens__swatch-var {
+  color: var(--pos-color-text-muted);
+  word-break: break-all;
+}
+
+.pos-tokens__radius-box,
+.pos-tokens__size-box {
+  flex: 0 0 auto;
+  width: 4.5rem;
+  height: 4.5rem;
+  border: 2px solid var(--pos-color-primary);
+  background: var(--pos-color-panel);
+}
+
+.pos-tokens__space-bar {
+  flex: 0 0 auto;
+  min-width: 4px;
+  height: 1.25rem;
+  background: var(--pos-color-primary);
+  border-radius: var(--pos-radius-sm);
+}
+
+.pos-tokens__type-preview {
+  font-family: var(--pos-font-family-display);
+}
+
+.pos-tokens__type-preview--caps {
+  font-weight: var(--pos-font-weight-bold);
+  text-transform: uppercase;
+}
+
+.pos-tokens__inspector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-lg);
+  padding: var(--pos-space-lg);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-lg);
+  background: var(--pos-color-panel);
+}
+
+.pos-tokens__inspector-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pos-space-sm);
+}
+
+.pos-tokens__fields {
+  gap: var(--pos-space-lg);
+}
+
+.pos-tokens__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-xs);
+}
+
+.pos-tokens__field-label {
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tokens__field-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--pos-space-sm);
+}
+
+.pos-tokens__color {
+  flex: 0 0 auto;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-sm);
+  background: var(--pos-color-panel-elevated);
+  cursor: pointer;
+}
+
+.pos-tokens__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--pos-button-min-height);
+  padding: 0 var(--pos-space-md);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-panel-elevated);
+  color: inherit;
+  font: inherit;
+}
+
+.pos-tokens__default {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-tokens__reset {
+  align-self: flex-start;
+  min-height: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--pos-color-primary);
+  font: inherit;
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-bold);
+  cursor: pointer;
+}
+
+@media (min-width: 960px) {
+  .pos-tokens__layout {
+    grid-template-columns: minmax(0, 1fr) 22rem;
+    align-items: start;
+  }
+
+  .pos-tokens__inspector {
+    position: sticky;
+    top: var(--pos-space-lg);
+  }
+}
+
+@media (max-width: 600px) {
+  .pos-tokens__page {
+    padding: var(--pos-space-lg);
+  }
+}

package/src/lib/tokens/pos-tokens.spec.ts

@@ -0,0 +1,164 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { POS_TOKEN_CATALOG, POS_TOKEN_DEFAULTS } from './pos-token-catalog';
+import { PosTokens } from './pos-tokens';
+
+describe('PosTokens', () => {
+  let fixture: ComponentFixture<PosTokens>;
+  let component: PosTokens;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PosTokens],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PosTokens);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  function compiled(): HTMLElement {
+    return fixture.nativeElement as HTMLElement;
+  }
+
+  function clickTokenNamed(name: string): HTMLButtonElement {
+    const button = Array.from(compiled().querySelectorAll('.pos-tokens__pick')).find(
+      (element) =>
+        element.querySelector('.pos-tokens__swatch-name')?.textContent?.includes(name),
+    ) as HTMLButtonElement | undefined;
+
+    if (!button) {
+      throw new Error(`Token "${name}" not found`);
+    }
+
+    button.click();
+    return button;
+  }
+
+  it('should render the design tokens gallery', () => {
+    expect(compiled().querySelector('.pos-tokens__title')?.textContent).toContain(
+      'Design tokens',
+    );
+    expect(compiled().textContent).toContain('--pos-color-primary');
+    expect(compiled().querySelector('.pos-tokens__btn--primary')).toBeTruthy();
+    expect(compiled().querySelector('.pos-tokens__tool--primary')?.textContent).toContain(
+      'Export CSS',
+    );
+  });
+
+  it('should open the inspector when a token is clicked', async () => {
+    clickTokenNamed('Primary');
+    await fixture.whenStable();
+
+    expect(compiled().querySelector('#pos-tokens-inspector-title')?.textContent).toContain(
+      'Primary',
+    );
+    expect(
+      (compiled().querySelector('.pos-tokens__value') as HTMLInputElement | null)?.value,
+    ).toBe('#c9b5f0');
+  });
+
+  it('should apply a live override without changing package defaults', async () => {
+    clickTokenNamed('Primary');
+    await fixture.whenStable();
+
+    const input = compiled().querySelector('.pos-tokens__value') as HTMLInputElement;
+    input.value = '#111111';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await fixture.whenStable();
+
+    expect(compiled().querySelector('.pos-tokens__edited')?.textContent).toContain('Edited');
+    expect(compiled().textContent).toContain('Default');
+    expect(compiled().querySelector('.pos-tokens__default')?.textContent).toContain('#c9b5f0');
+    expect(component.themeCss()).toContain('--pos-color-primary: #111111;');
+    expect(POS_TOKEN_DEFAULTS['--pos-color-primary']).toBe('#c9b5f0');
+    expect(
+      POS_TOKEN_CATALOG.find((token) => token.variable === '--pos-color-primary')
+        ?.defaultValue,
+    ).toBe('#c9b5f0');
+  });
+
+  it('should open related tokens when a sample is clicked', async () => {
+    const primarySample = compiled().querySelector(
+      '.pos-tokens__sample',
+    ) as HTMLButtonElement;
+    primarySample.click();
+    await fixture.whenStable();
+
+    const fields = Array.from(compiled().querySelectorAll('.pos-tokens__field-label')).map(
+      (label) => label.textContent?.trim(),
+    );
+    expect(fields).toContain('Primary');
+    expect(fields).toContain('On primary');
+    expect(fields).toContain('Radius md');
+  });
+
+  it('should export a complete CSS file for the host POS', () => {
+    const css = component.themeCss();
+    expect(css).toContain(':root {');
+    for (const token of POS_TOKEN_CATALOG) {
+      expect(css).toContain(`${token.variable}: ${token.defaultValue};`);
+    }
+  });
+
+  it('should import an exported theme as overrides only', async () => {
+    component.loadThemeCss(`
+      :root {
+        --pos-color-primary: #00aa00;
+        --pos-color-success: #16dbcc;
+      }
+    `);
+    await fixture.whenStable();
+
+    expect(component.themeCss()).toContain('--pos-color-primary: #00aa00;');
+    expect(component.themeCss()).toContain('--pos-color-success: #16dbcc;');
+    expect(compiled().querySelector('.pos-tokens__status')?.textContent).toContain(
+      'Package defaults are unchanged',
+    );
+
+    clickTokenNamed('Primary');
+    await fixture.whenStable();
+    expect(compiled().querySelector('.pos-tokens__edited')).toBeTruthy();
+
+    clickTokenNamed('Success');
+    await fixture.whenStable();
+    expect(
+      compiled().querySelector('.pos-tokens__pick--selected .pos-tokens__edited'),
+    ).toBeNull();
+  });
+
+  it('should reset live overrides back to package defaults', async () => {
+    component.loadThemeCss(':root { --pos-radius-md: 20px; }');
+    component.resetTheme();
+    await fixture.whenStable();
+
+    expect(component.themeCss()).toContain('--pos-radius-md: 8px;');
+    expect(compiled().querySelector('.pos-tokens__edited')).toBeNull();
+  });
+
+  it('should download the exported CSS file', async () => {
+    const createObjectURL = vi
+      .spyOn(URL, 'createObjectURL')
+      .mockReturnValue('blob:pos-theme');
+    const revokeObjectURL = vi
+      .spyOn(URL, 'revokeObjectURL')
+      .mockImplementation(() => undefined);
+    const click = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => undefined);
+
+    const exportButton = compiled().querySelector(
+      '.pos-tokens__tool--primary',
+    ) as HTMLButtonElement;
+    exportButton.click();
+    await fixture.whenStable();
+
+    expect(createObjectURL).toHaveBeenCalled();
+    expect(click).toHaveBeenCalled();
+    expect(revokeObjectURL).toHaveBeenCalled();
+
+    createObjectURL.mockRestore();
+    revokeObjectURL.mockRestore();
+    click.mockRestore();
+  });
+});

package/src/lib/tokens/pos-tokens.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { PosTokens } from './pos-tokens';
+
+const meta: Meta<PosTokens> = {
+  title: 'Theme / Tokens',
+  component: PosTokens,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Click a sample or token to edit live overrides, then export a complete CSS file for the host POS. Import that file later to resume. Package defaults are never overwritten.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PosTokens>;
+
+export const Default: Story = {};