@retalia/pos-components 0.0.4 → 0.0.5

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

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

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

@@ -1,22 +0,0 @@
-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 = {};