button,
a {
  &.mat-button, &.mat-flat-button, &.mat-icon-button, &.mat-stroked-button {
    line-height: 40px;
    border-radius: 24px;
    &.small {
      line-height: 32px;
    }

    &.large {
      line-height: 48px;
    }
  }
  &.mat-button:hover .mat-button-focus-overlay, &.mat-stroked-button:hover .mat-button-focus-overlay,
  &.mat-icon-button:hover .mat-button-focus-overlay {
    opacity: 0.12;
  }
  &.mat-button, &.mat-raised-button, &.mat-flat-button, &.mat-stroked-button {
    .mat-button-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
}

// removing the pure circle on icon button ripple
.mat-icon-button .mat-button-ripple-round {
  border-radius: initial;
}

<button mat-button 
  color="primary">
  Primary
</button>

<button mat-button 
  color="primary">
  Primary
</button>

// palette level
:root,
:host {
  --palette-sky-50: #f5faff;
  --palette-sky-100: #e5f0fb;
  ...
  --palette-sky-900: #00162b;
  --palette-sky-0: #ffffff;
}

// semantic level
:root,
:host {
  --primary-1: var(--palette-sky-100);
  ...
  --primary-9: var(--palette-sky-900);
  --primary-0: var(--palette-sky-0);
}

// theme level
$material-palette-primary: (
  0: var(--primary-9),
  10: var(--primary-9),
  ...
  100: var(--primary-0),
);

@use 'sass:map';
@use '@angular/material' as mat;
@use './colors/palettes/palette' as palette;
@forward './variables.scss';

$nani-light-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: palette.$material-palette-primary,
      tertiary: palette.$material-palette-tertiary,
    ),
    density: (
      scale: 0,
    ),
  )
);

@use 'sass:map';
@use '@angular/material' as mat;

$nani-typography-plain-family: var(--font-level-p1-reg-font-family); // the font family value
$nani-typography-brand-family: var(--font-level-title-font-family); // the font family value

// Material 3: theme definition
$nani-light-theme: mat.define-theme((
  typography: (
    plain-family: $nani-typography-plain-family,
    brand-family: $nani-typography-brand-family,
  ),
));

// CDS levels stay in our own Sass map.
@function _level($name) {
  @return (
    font-family: var(--font-level-#{$name}-font-family),
    font-weight: var(--font-level-#{$name}-font-weight),
    font-size: var(--font-level-#{$name}-font-size),
    line-height: var(--font-level-#{$name}-line-height),
  );
}

$nani-typography-config: (
  'button': _level('btn-medium'),
  'p1-reg': _level('p1-reg'),
);

// Component overrides consume the level.
$_button-typo: map.get($nani-typography-config, 'button');

@include mat.button-overrides((
  filled-label-text-font: map.get($_button-typo, font-family),
  filled-label-text-size: map.get($_button-typo, font-size),
  filled-label-text-weight: map.get($_button-typo, font-weight),
));

@customElement(elementName)
export class Button extends LitElement {

  static override styles = css`
      :host {
        display: block;
        height: fit-content;
      }

      a, button {
        --_color: var(--color, #212121);
        --_background-color: var(--background-color, #1DE9B6);
        --_border-color: var(--border-color, #1DE9B6);
     }`;

  render() {
      const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixin;
      return html`
        <button part="button" 
          type=${<'button' | 'submit' | 'reset' | 'menu'>this.elementType} 
          ?disabled="${this.disabled}" 
          ?ripple=${this.ripple} 
          ?color=${this.color} 
          ?size=${this.size}
          fill=${this.fill}
          aria-label="${ariaLabel || nothing}"
          aria-haspopup="${ariaHasPopup || nothing}"
          aria-expanded="${ariaExpanded || nothing}">
          <slot></slot>
        </button>
      `;
    }
}

import { Button as _CoreButton, Props } from '@chameleon/core';
import { ProxyCmp } from '../../utils/utils';

const BUTTON_INPUTS = [ 'color', 'disabled', 'download', ...];

export const BUTTON_PROPS: Props = _CoreButton.props;

@ProxyCmp({
  inputs: BUTTON_INPUTS,
})
@Component({
  selector: `cha-button`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: ` <ng-content></ng-content> `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  inputs: BUTTON_INPUTS,
})
export class Button {
  protected el: HTMLElement;

  constructor(
    private readonly _cdr: ChangeDetectorRef,
    private readonly _ref: ElementRef,
    protected zone: NgZone
  ) {
    this._cdr.detach();
    this.el = this._ref.nativeElement;
  }
}

export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
  const decorator = function (cls: any) {
    const { defineCustomElementFn, inputs, methods } = opts;

    if (defineCustomElementFn !== undefined) {
      defineCustomElementFn();
    }

    if (inputs) {
      proxyInputs(cls, inputs);
    }
    if (methods) {
      proxyMethods(cls, methods);
    }
    return cls;
  };
  return decorator;
}

export const proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
};

export const defineCustomElement = (tagName: string, customElement: any) => {
  if (customElement !== undefined 
      && typeof customElements !== 'undefined' 
      && !customElements.get(tagName)) {
    customElements.define(tagName, customElement);
  }
};

export const proxyMethods = (Cmp: any, methods: string[]) => {
  const Prototype = Cmp.prototype;
  methods.forEach((methodName) => {
    Prototype[methodName] = function () {
      const args = arguments;
      return this.zone.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
    };
  });
};

export const proxyInputs = (Cmp: any, inputs: string[]) => {
  const Prototype = Cmp.prototype;
  inputs.forEach((item) => {
    Object.defineProperty(Prototype, item, {
      get() {
        return this.el[item];
      },
      set(val: any) {
        this.zone.runOutsideAngular(() => (this.el[item] = val));
      },
      /**
       * In the event that proxyInputs is called
       * multiple times re-defining these inputs
       * will cause an error to be thrown. As a result
       * we set configurable: true to indicate these
       * properties can be changed.
       */
      configurable: true,
    });
  });
};

export const CDS_BUTTON_HOST = {
  '[attr.cds-size]': '_size || null',
  '[attr.cds-type]': '_type || null',
  '[class]': '_color ? "cds-button cds-" + _color : "cds-button"',
};

@Directive({
  selector: `button[mat-button], button[mat-raised-button],
  button[mat-flat-button], button[mat-stroked-button], 
  button[mat-icon-button], a[mat-button], a[mat-raised-button],
  a[mat-flat-button], a[mat-stroked-button], a[mat-icon-button]`,
  host: CDS_BUTTON_HOST,
})
export class CdsButtonDirective {
  private _size: CdsSize = this._defaultOptions.size ?? 'medium';
  private _type!: CdsType = this._defaultOptions.type;
  private _color!: CdsButtonColor=  this._defaultOptions.color;

  @Input() color: CdsButtonColor;
  @Input('cds-size') size: CdsSize;
  @Input('cds-type') type: CdsType;
  
  constructor(
    @Optional()
    @Inject(CDS_BUTTON_DEFAULT_OPTIONS)
    private _defaultOptions?: CdsButtonDefaultOptions
  ) {}
}

import { Directive } from '@angular/core';

@Directive({
  selector: `table[mat-table], mat-table`,
  providers: [{
      provide: CDS_BUTTON_DEFAULT_OPTIONS,
      useValue: { size: 'small' },
    }],
})
export class CdsTableDirective {}

@Injectable({ providedIn: 'root' })
export class WebComponentOverlayContainer extends OverlayContainer {
  public constructor(
    @Inject(DOCUMENT)
    private readonly document: Document,
    platform: Platform,
    @Inject(SAT_APP_ENTRY_COMPONENT_NAME) private readonly entryComponentName: string
  ) {
    super(document, platform);
  }

  public override getContainerElement(): HTMLElement {
    if (!this._containerElement || !this.getRootElement().querySelector(`.${this._containerElement.className}`)) {
      this._createContainer();
    }
    return this._containerElement!;
  }

  protected override _createContainer(): void {
    super._createContainer();
    this._appendToRootComponent();
  }

  private _appendToRootComponent(): void {
    if (!this._containerElement) {
      return;
    }
    const rootElement = this.getRootElement();
    rootElement.appendChild(this._containerElement);
  }

  private getRootElement(): ShadowRoot | HTMLElement {
    const shellRootComponentSelector = 'ds-shl-root';
    const shellShadowRoot = this.document.querySelector(shellRootComponentSelector)?.shadowRoot;
    return (
      this.document.querySelector(this.entryComponentName)?.shadowRoot ??
      shellShadowRoot?.querySelector(this.entryComponentName)?.shadowRoot ??
      shellShadowRoot ??
      this.document.body
    );
  }
}

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');

module.exports = {
  corePlugins: [
    'textAlign',
    'display',
    'padding',
    'margin',
    'gap',
    'flex',
    'flexBasis',
    'flexDirection',
    'flexGrow',
    'flexShrink',
    'flexWrap',
    'gridTemplateColumns',
    'alignItems',
    'justifyContent',
    'position',
    'placeSelf',
    'inset',
    'zIndex',
  ],
  theme: {
    extend: {},
  },
  prefix: 'cds-',
  important: true,
};

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/cds-styles",
  "lib": {
    "styleIncludePaths": [
      "src"
    ]
  },
  "assets": [
    "src/nani-light.scss",
    "tailwind.config.js"
  ]
}

// cds-styles package.json
{
  "name": "@design-system-demo/cds-styles",
  "version": "x.y.z",
  "peerDependencies": {
    "@angular/common": "^19.0.0",
    "@angular/core": "^19.0.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17"
  },
}