@ptsecurity/mosaic 13.3.0 → 13.5.0

package/datepicker/multi-year-view.component.d.ts

@@ -1,72 +1,72 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { DateAdapter } from '@ptsecurity/cdk/datetime';
-import { McCalendarBody, McCalendarCell } from './calendar-body.component';
-import * as i0 from "@angular/core";
-export declare const yearsPerPage = 24;
-export declare const yearsPerRow = 4;
-/**
- * An internal component used to display a year selector in the datepicker.
- * @docs-private
- */
-export declare class McMultiYearView<D> implements AfterContentInit {
-    private readonly changeDetectorRef;
-    dateAdapter: DateAdapter<D>;
-    private dir?;
-    /** The date to display in this multi-year view (everything other than the year is ignored). */
-    get activeDate(): D;
-    set activeDate(value: D);
-    /** The currently selected date. */
-    get selected(): D | null;
-    set selected(value: D | null);
-    /** The minimum selectable date. */
-    get minDate(): D | null;
-    set minDate(value: D | null);
-    /** The maximum selectable date. */
-    get maxDate(): D | null;
-    set maxDate(value: D | null);
-    /** A function used to filter which dates are selectable. */
-    dateFilter: (date: D) => boolean;
-    /** Emits when a new year is selected. */
-    readonly selectedChange: EventEmitter<D>;
-    /** Emits the selected year. This doesn't imply a change on the selected date */
-    readonly yearSelected: EventEmitter<D>;
-    /** Emits when any date is activated. */
-    readonly activeDateChange: EventEmitter<D>;
-    /** The body of calendar table */
-    mcCalendarBody: McCalendarBody;
-    /** Grid of calendar cells representing the currently displayed years. */
-    years: McCalendarCell[][];
-    /** The year that today falls on. */
-    todayYear: number;
-    /** The year of the selected date. Null if the selected date is null. */
-    selectedYear: number | null;
-    private _activeDate;
-    private _selected;
-    private _minDate;
-    private _maxDate;
-    constructor(changeDetectorRef: ChangeDetectorRef, dateAdapter: DateAdapter<D>, dir?: Directionality | undefined);
-    ngAfterContentInit(): void;
-    /** Initializes this multi-year view. */
-    init(): void;
-    /** Handles when a new year is selected. */
-    onYearSelected(year: number): void;
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-    handleCalendarBodyKeydown(event: KeyboardEvent): void;
-    getActiveCell(): number;
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell(): void;
-    /** Creates an McCalendarCell for the given year. */
-    private createCellForYear;
-    /** Whether the given year is enabled. */
-    private shouldEnableYear;
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    private getValidDateOrNull;
-    /** Determines whether the user has the RTL layout direction. */
-    private isRtl;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McMultiYearView<any>, "mc-multi-year-view", ["mcMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
-}
+import { Directionality } from '@angular/cdk/bidi';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { DateAdapter } from '@ptsecurity/cdk/datetime';
+import { McCalendarBody, McCalendarCell } from './calendar-body.component';
+import * as i0 from "@angular/core";
+export declare const yearsPerPage = 24;
+export declare const yearsPerRow = 4;
+/**
+ * An internal component used to display a year selector in the datepicker.
+ * @docs-private
+ */
+export declare class McMultiYearView<D> implements AfterContentInit {
+    private readonly changeDetectorRef;
+    dateAdapter: DateAdapter<D>;
+    private dir?;
+    /** The date to display in this multi-year view (everything other than the year is ignored). */
+    get activeDate(): D;
+    set activeDate(value: D);
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    /** A function used to filter which dates are selectable. */
+    dateFilter: (date: D) => boolean;
+    /** Emits when a new year is selected. */
+    readonly selectedChange: EventEmitter<D>;
+    /** Emits the selected year. This doesn't imply a change on the selected date */
+    readonly yearSelected: EventEmitter<D>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    mcCalendarBody: McCalendarBody;
+    /** Grid of calendar cells representing the currently displayed years. */
+    years: McCalendarCell[][];
+    /** The year that today falls on. */
+    todayYear: number;
+    /** The year of the selected date. Null if the selected date is null. */
+    selectedYear: number | null;
+    private _activeDate;
+    private _selected;
+    private _minDate;
+    private _maxDate;
+    constructor(changeDetectorRef: ChangeDetectorRef, dateAdapter: DateAdapter<D>, dir?: Directionality | undefined);
+    ngAfterContentInit(): void;
+    /** Initializes this multi-year view. */
+    init(): void;
+    /** Handles when a new year is selected. */
+    onYearSelected(year: number): void;
+    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
+    handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    getActiveCell(): number;
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell(): void;
+    /** Creates an McCalendarCell for the given year. */
+    private createCellForYear;
+    /** Whether the given year is enabled. */
+    private shouldEnableYear;
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    private getValidDateOrNull;
+    /** Determines whether the user has the RTL layout direction. */
+    private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMultiYearView<any>, "mc-multi-year-view", ["mcMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
+}

package/datepicker/ptsecurity-mosaic-datepicker.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ptsecurity/mosaic/datepicker" />
-export * from './index';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ptsecurity/mosaic/datepicker" />
+export * from './index';

package/datepicker/public-api.d.ts

@@ -1,11 +1,11 @@
-export * from './datepicker-module';
-export * from './calendar.component';
-export * from './calendar-body.component';
-export * from './datepicker.component';
-export * from './datepicker-animations';
-export * from './datepicker-input.directive';
-export * from './datepicker-intl';
-export * from './datepicker-toggle.component';
-export * from './month-view.component';
-export * from './year-view.component';
-export * from './multi-year-view.component';
+export * from './datepicker-module';
+export * from './calendar.component';
+export * from './calendar-body.component';
+export * from './datepicker.component';
+export * from './datepicker-animations';
+export * from './datepicker-input.directive';
+export * from './datepicker-intl';
+export * from './datepicker-toggle.component';
+export * from './month-view.component';
+export * from './year-view.component';
+export * from './multi-year-view.component';

package/datepicker/year-view.component.d.ts

@@ -1,90 +1,90 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
-import { McCalendarBody, McCalendarCell } from './calendar-body.component';
-import * as i0 from "@angular/core";
-/**
- * An internal component used to display a single year in the datepicker.
- * @docs-private
- */
-export declare class McYearView<D> implements AfterContentInit {
-    private changeDetectorRef;
-    private readonly dateFormats;
-    dateAdapter: DateAdapter<D>;
-    private dir?;
-    /** The date to display in this year view (everything other than the year is ignored). */
-    get activeDate(): D;
-    set activeDate(value: D);
-    /** The currently selected date. */
-    get selected(): D | null;
-    set selected(value: D | null);
-    /** The minimum selectable date. */
-    get minDate(): D | null;
-    set minDate(value: D | null);
-    /** The maximum selectable date. */
-    get maxDate(): D | null;
-    set maxDate(value: D | null);
-    /** A function used to filter which dates are selectable. */
-    dateFilter: (date: D) => boolean;
-    /** Emits when a new month is selected. */
-    readonly selectedChange: EventEmitter<D>;
-    /** Emits the selected month. This doesn't imply a change on the selected date */
-    readonly monthSelected: EventEmitter<D>;
-    /** Emits when any date is activated. */
-    readonly activeDateChange: EventEmitter<D>;
-    /** The body of calendar table */
-    mcCalendarBody: McCalendarBody;
-    /** Grid of calendar cells representing the months of the year. */
-    months: McCalendarCell[][];
-    /** The label for this year (e.g. "2017"). */
-    yearLabel: string;
-    /** The month in this year that today falls on. Null if today is in a different year. */
-    todayMonth: number | null;
-    /**
-     * The month in this year that the selected Date falls on.
-     * Null if the selected Date is in a different year.
-     */
-    selectedMonth: number | null;
-    private _activeDate;
-    private _selected;
-    private _minDate;
-    private _maxDate;
-    constructor(changeDetectorRef: ChangeDetectorRef, dateFormats: McDateFormats, dateAdapter: DateAdapter<D>, dir?: Directionality | undefined);
-    ngAfterContentInit(): void;
-    /** Handles when a new month is selected. */
-    onMonthSelected(month: number): void;
-    /** Handles keydown events on the calendar body when calendar is in year view. */
-    handleCalendarBodyKeydown(event: KeyboardEvent): void;
-    /** Initializes this year view. */
-    init(): void;
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell(): void;
-    /**
-     * Gets the month in this year that the given Date falls on.
-     * Returns null if the given Date is in another year.
-     */
-    private getMonthInCurrentYear;
-    /** Creates an McCalendarCell for the given month. */
-    private createCellForMonth;
-    /** Whether the given month is enabled. */
-    private shouldEnableMonth;
-    /**
-     * Tests whether the combination month/year is after this.maxDate, considering
-     * just the month and year of this.maxDate
-     */
-    private isYearAndMonthAfterMaxDate;
-    /**
-     * Tests whether the combination month/year is before this.minDate, considering
-     * just the month and year of this.minDate
-     */
-    private isYearAndMonthBeforeMinDate;
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    private getValidDateOrNull;
-    /** Determines whether the user has the RTL layout direction. */
-    private isRtl;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McYearView<any>, "mc-year-view", ["mcYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
-}
+import { Directionality } from '@angular/cdk/bidi';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
+import { McCalendarBody, McCalendarCell } from './calendar-body.component';
+import * as i0 from "@angular/core";
+/**
+ * An internal component used to display a single year in the datepicker.
+ * @docs-private
+ */
+export declare class McYearView<D> implements AfterContentInit {
+    private changeDetectorRef;
+    private readonly dateFormats;
+    dateAdapter: DateAdapter<D>;
+    private dir?;
+    /** The date to display in this year view (everything other than the year is ignored). */
+    get activeDate(): D;
+    set activeDate(value: D);
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    /** A function used to filter which dates are selectable. */
+    dateFilter: (date: D) => boolean;
+    /** Emits when a new month is selected. */
+    readonly selectedChange: EventEmitter<D>;
+    /** Emits the selected month. This doesn't imply a change on the selected date */
+    readonly monthSelected: EventEmitter<D>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    mcCalendarBody: McCalendarBody;
+    /** Grid of calendar cells representing the months of the year. */
+    months: McCalendarCell[][];
+    /** The label for this year (e.g. "2017"). */
+    yearLabel: string;
+    /** The month in this year that today falls on. Null if today is in a different year. */
+    todayMonth: number | null;
+    /**
+     * The month in this year that the selected Date falls on.
+     * Null if the selected Date is in a different year.
+     */
+    selectedMonth: number | null;
+    private _activeDate;
+    private _selected;
+    private _minDate;
+    private _maxDate;
+    constructor(changeDetectorRef: ChangeDetectorRef, dateFormats: McDateFormats, dateAdapter: DateAdapter<D>, dir?: Directionality | undefined);
+    ngAfterContentInit(): void;
+    /** Handles when a new month is selected. */
+    onMonthSelected(month: number): void;
+    /** Handles keydown events on the calendar body when calendar is in year view. */
+    handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    /** Initializes this year view. */
+    init(): void;
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell(): void;
+    /**
+     * Gets the month in this year that the given Date falls on.
+     * Returns null if the given Date is in another year.
+     */
+    private getMonthInCurrentYear;
+    /** Creates an McCalendarCell for the given month. */
+    private createCellForMonth;
+    /** Whether the given month is enabled. */
+    private shouldEnableMonth;
+    /**
+     * Tests whether the combination month/year is after this.maxDate, considering
+     * just the month and year of this.maxDate
+     */
+    private isYearAndMonthAfterMaxDate;
+    /**
+     * Tests whether the combination month/year is before this.minDate, considering
+     * just the month and year of this.minDate
+     */
+    private isYearAndMonthBeforeMinDate;
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    private getValidDateOrNull;
+    /** Determines whether the user has the RTL layout direction. */
+    private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McYearView<any>, "mc-year-view", ["mcYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
+}

package/design-tokens/index.d.ts

@@ -1 +1 @@
-export * from './public-api';
+export * from './public-api';

package/design-tokens/legacy-2017/tokens/components/alert.json5

@@ -0,0 +1,83 @@
+{
+    alert: {
+        'light-color-scheme': {
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.60}' },
+                border: { value: '{light-color-scheme.error.default}' },
+                icon: { value: '{light-color-scheme.error.default}' }
+            },
+            warning: {
+                background: { value: '{light-color-scheme.warning.palette.value.60}' },
+                border: { value: '{light-color-scheme.warning.default}' },
+                icon: { value: '{light-color-scheme.warning.palette.value.400}' }
+            },
+            success: {
+                background: { value: '{light-color-scheme.success.palette.value.60}' },
+                border: { value: '{light-color-scheme.success.default}' },
+                icon: { value: '{light-color-scheme.success.palette.value.400}' }
+            },
+            info: {
+                background: { value: '{light-color-scheme.info.palette.value.60}' },
+                border: { value: '{light-color-scheme.info.default}' },
+                icon: { value: '{light-color-scheme.info.palette.value.400}' }
+            },
+            default: {
+                background: { value: '{light-color-scheme.second.palette.value.60}' },
+                border: { value: '{light-color-scheme.second.default}' },
+                icon: { value: '{light-color-scheme.second.palette.value.200}' }
+            }
+        },
+        'dark-color-scheme': {
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.700}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.error.default}' }
+            },
+            warning: {
+                background: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.warning.default}' }
+            },
+            success: {
+                background: { value: '{dark-color-scheme.success.palette.value.700}' },
+                border: { value: '{dark-color-scheme.success.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.success.default}' }
+            },
+            info: {
+                background: { value: '{dark-color-scheme.info.palette.value.700}' },
+                border: { value: '{dark-color-scheme.info.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.info.default}' }
+            },
+            default: {
+                background: { value: '{dark-color-scheme.second.palette.value.700}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.second.default}' }
+            }
+        },
+        size: {
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
+
+            'horizontal-padding': { value: '{size.l}' },
+            'vertical-padding': { value: '{size.m}' },
+
+            'icon-margin': { value: '{size.s}' },
+
+            'close-button-width': { value: '{size.l}' },
+
+            small: {
+                'vertical-padding': { value: '{size.m}' }
+            }
+        },
+        font: {
+            default: {
+                header: { value: 'subheading' },
+                body: { value: 'body' }
+            },
+            small: {
+                header: { value: 'caption' },
+                body: { value: 'caption' }
+            }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/autocomplete.json5

@@ -0,0 +1,11 @@
+{
+    autocomplete: {
+        size: {
+            panel: {
+                padding: { value: '{size.xxs} 0' },
+                'max-height': { value: '256px' },
+                'border-radius': { value: '{size.border-radius}' }
+            }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/badge.json5

@@ -0,0 +1,174 @@
+{
+    badge: {
+        'light-color-scheme': {
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' },
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                },
+                info: {
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.500}' },
+                    background: { value: '{light-color-scheme.success.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.500}' },
+                    background: { value: '{light-color-scheme.error.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    border: { value: '{light-color-scheme.second.palette.value.200}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' },
+                    background: { value: 'transparent' }
+                },
+                light: {
+                    border: { value: '{light-color-scheme.second.palette.value.100}' },
+                    background: { value: '{light-color-scheme.second.palette.value.100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' }
+                },
+                second: {
+                    border: { value: '{light-color-scheme.second.palette.value.600}' },
+                    background: { value: '{light-color-scheme.second.palette.value.600}' },
+                    color: { value: 'white' }
+                }
+            },
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.500}' }
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.info.palette.value.500}' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.40}' },
+                    border: { value: '{light-color-scheme.success.palette.value.200}' },
+                    color: { value: '{light-color-scheme.success.palette.value.560}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.40}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.200}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.560}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.40}' },
+                    border: { value: '{light-color-scheme.error.palette.value.200}' },
+                    color: { value: '{light-color-scheme.error.palette.value.500}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.A100}' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.700}' },
+                    background: { value: '{light-color-scheme.success.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.success.palette.value.100}' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.100}' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.700}' },
+                    background: { value: '{light-color-scheme.error.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.error.palette.value.100}' }
+                }
+            },
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    color: { value: 'white' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                },
+                info: {
+                    border: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.700}' },
+                    background: { value: '{light-color-scheme.success.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.700}' },
+                    background: { value: '{light-color-scheme.error.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    border: { value: '{light-color-scheme.second.palette.value.500}' },
+                    color: { value: '{light-color-scheme.second.palette.value.40}' },
+                    background: { value: 'transparent' }
+                },
+                light: {
+                    border: { value: '{light-color-scheme.second.palette.value.400}' },
+                    background: { value: '{light-color-scheme.second.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                second: {
+                    border: { value: '{light-color-scheme.second.palette.value.700}' },
+                    background: { value: '{light-color-scheme.second.palette.value.700}' },
+                    color: { value: 'white' }
+                }
+            }
+        },
+        size: {
+            default: {
+                height: { value: '{size.xxl}' },
+                'min-width': { value: '10px' },
+                padding: { value: '0 {size.s}' },
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.border-radius}' }
+            },
+            mini: {
+                height: { value: '{size.l}' },
+                'min-width': { value: '10px' },
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.3xs}' },
+                padding: { value: '0 {size.xxs}' }
+            }
+        },
+        font: {
+            default: {
+                default: { value: 'caption' },
+                caps: { value: 'caption-caps' },
+                mono: { value: 'caption-mono'}
+            },
+            mini: {
+                default: { value: 'extra-small-text' },
+                caps: { value: 'extra-small-text-caps' },
+                mono: { value: 'extra-small-text-mono'}
+            }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/button-toggle.json5

@@ -0,0 +1,10 @@
+{
+    'button-toggle': {
+        size: {
+            border: {
+                size: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
+            }
+        }
+    }
+}